/* =========================================================================
   Cartagena Rental Luxury — Cinematic Editorial design system
   -------------------------------------------------------------------------
   Sharp corners everywhere, tonal layering instead of shadows, Playfair
   Display against Montserrat, and a 160px vertical rhythm that collapses
   gracefully on smaller screens.
   ========================================================================= */

/* -------------------------------------------------------------- tokens -- */
:root {
  /* palette */
  --ink: #0d0d0d;
  --ink-soft: #1c1c16;
  --ivory: #f9f7f2;
  --ivory-dim: #f2ede4;
  --sand: #e5e1d8;
  --sand-deep: #dedad1;
  --rule: #d1cdc2;
  --gold: #b59e74;
  --muted: #6f6f68;
  --muted-dark: #a8a49b;
  --error: #ba1a1a;

  /* surfaces */
  --bg: var(--ivory);
  --fg: var(--ink);

  /* type */
  --serif: 'Playfair Display', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --t-display: clamp(2.5rem, 6.4vw, 5.25rem);
  --t-display-md: clamp(2.125rem, 4.6vw, 3.75rem);
  --t-headline: clamp(1.75rem, 3.1vw, 2.625rem);
  --t-headline-md: clamp(1.375rem, 2.1vw, 1.75rem);
  --t-body-lg: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  --t-body: 1rem;
  --t-caps: 0.75rem;
  --t-nav: 0.875rem;

  /* layout */
  --container: 1440px;
  --gutter: 2rem;
  --margin: clamp(1.5rem, 5.2vw, 5rem);
  --section: clamp(4.5rem, 11vw, 10rem);
  --header-h: 5.5rem;

  /* motion */
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.8s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* The UA stylesheet's `[hidden] { display: none }` is beaten by any author rule
   that sets `display` — which had left both amenity groups, the finder's
   confirm button and the filtered rows all visible while marked hidden.
   One authoritative rule instead of remembering it at every call site. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--ivory);
  font-size: var(--t-caps);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- typography -- */
.headline {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.headline--xl { font-size: var(--t-display); line-height: 1.06; }
.headline--lg { font-size: var(--t-headline); line-height: 1.16; }
.headline--md { font-size: var(--t-headline-md); line-height: 1.25; }

.eyebrow {
  display: block;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  font-size: var(--t-body-lg);
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: 0.01em;
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- layout -- */
.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--tint { background: var(--ivory-dim); }

.section-heading { display: grid; gap: 1.25rem; max-width: 62ch; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center .lede { margin-inline: auto; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ivory);
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 2.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  overflow: hidden;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
/* The label must sit above the sweeping fill, or the text disappears on hover. */
.btn__label {
  position: relative;
  z-index: 1;
  display: block;
  transition: transform 0.5s var(--ease);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { border-color: var(--gold); color: var(--ink); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--light { --btn-bg: var(--ivory); --btn-fg: var(--ink); --btn-bd: var(--ivory); }
/* A 0.7-alpha border on a bright photograph fell under the 3:1 a non-text
   control needs to be seen at all. */
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: rgb(249 247 242 / 0.92); }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { color: var(--ink); }
.btn--compact { min-height: 2.875rem; padding: 0 1.5rem; }
.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  width: fit-content;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.arrow-link__icon { width: 1.5rem; transition: transform 0.5s var(--ease); }
.arrow-link:hover { border-color: var(--gold); color: var(--gold); }
.arrow-link:hover .arrow-link__icon { transform: translateX(6px); }

/* -------------------------------------------------------------- frames -- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  margin: 0;
}
/* The client's photography is landscape almost without exception — measured
   across the live library, 29 of 31 files are 3:2 (1.50) or 1.57. A portrait
   frame therefore cuts the sides off the picture: 4:5 throws away 47% of a 3:2
   photograph, which is what "the photos are out of frame" means. Prefer 3x2
   (nothing lost) or 4x3 (11%); keep 4x5 for the few genuinely portrait files. */
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--3x2  { aspect-ratio: 3 / 2; }
.frame--4x3  { aspect-ratio: 4 / 3; }
.frame--4x5  { aspect-ratio: 4 / 5; }
.frame--1x1  { aspect-ratio: 1 / 1; }
.frame--wide { aspect-ratio: 21 / 9; }
.frame--full { height: 100%; }

.frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1));
  transition: transform 1.4s var(--ease), clip-path 1.2s var(--ease);
}
/* `--park` is the zoom that gives the parallax shift room to move without
   ever exposing the frame edge. motion.js derives it from the shift strength:
   park = 1 + 2*strength + margin. */
.frame--parallax .frame__img { --ps: var(--park, 1.16); }

.frame--empty {
  display: grid;
  place-items: center;
  background: var(--sand);
  border: 1px solid var(--rule);
}
.frame--empty .frame__note {
  font-size: var(--t-caps);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.frame--zoom:hover .frame__img,
a:hover .frame--zoom .frame__img,
button:hover .frame--zoom .frame__img { --ps: 1.05; }
.frame--zoom.frame--parallax:hover .frame__img { --ps: calc(var(--park, 1.16) * 1.04); }

@media (min-width: 1024px) { .frame--wide { aspect-ratio: 24 / 9; } }
@media (max-width: 640px) { .frame--wide { aspect-ratio: 4 / 3; } }

/* -------------------------------------------------------------- header -- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  color: var(--ivory);
  transition: background 0.5s var(--ease), color 0.5s var(--ease), backdrop-filter 0.5s;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.site-header.is-solid,
.site-header--solid {
  background: rgb(13 13 13 / 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: transform 0.5s var(--ease), background 0.5s var(--ease); }

.wordmark { margin-right: auto; }
.wordmark__name {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  position: relative;
  display: block;
  padding-block: 0.35rem;
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgb(249 247 242 / 0.78);
  transition: color 0.35s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link.is-active { color: var(--ivory); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.menu-toggle__bars { display: grid; gap: 5px; width: 22px; }
.menu-toggle__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
body.nav-open .menu-toggle__bars i:first-child { transform: translateY(3px) rotate(45deg); }
body.nav-open .menu-toggle__bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 1080px) {
  /* The burger needs JavaScript to open the panel, so it only replaces the
     inline nav when scripting is available. Without it the links simply wrap. */
  .js .nav { display: none; }
  .js .menu-toggle { display: inline-flex; }
  html:not(.js) .nav__list { flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem 1rem; }
  html:not(.js) .menu-toggle { display: none; }
}
@media (max-width: 640px) {
  .site-header__actions .btn--light { display: none; }
}

/* --------------------------------------------------------- mobile nav -- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--ivory);
  display: grid;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-out);
}
body.nav-open .mobile-nav { clip-path: inset(0 0 0 0); }

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: calc(var(--header-h) + 2rem) var(--margin) 2.5rem;
  overflow-y: auto;
}
.mobile-nav__eyebrow {
  font-size: var(--t-caps);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.mobile-nav__list { display: grid; gap: 0.25rem; margin-top: auto; }
.js .mobile-nav__list a { opacity: 0; transform: translateY(28px); }
.mobile-nav__list a {
  display: block;
  padding-block: 0.55rem;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  line-height: 1.1;
  transition: opacity 0.6s var(--ease) calc(var(--i) * 45ms + 120ms),
              transform 0.7s var(--ease-out) calc(var(--i) * 45ms + 120ms),
              color 0.3s;
}
body.nav-open .mobile-nav__list a { opacity: 1; transform: none; }
.mobile-nav__list a:hover, .mobile-nav__list a[aria-current] { color: var(--gold); }
.mobile-nav__foot { display: grid; gap: 1rem; margin-top: auto; }
.mobile-nav__wa {
  font-size: var(--t-caps);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dark);
  text-align: center;
}

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  isolation: isolate;
  /* Ink under the photo: a listing without photography would otherwise put
     ivory headline text on the ivory page. */
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
}
.hero--full   { min-height: 100svh; align-items: center; }
.hero--tall   { min-height: 74svh; }
.hero--detail { min-height: 82svh; }

.hero__media { position: absolute; inset: 0; z-index: -1; }
/* Two separate zooms, multiplied:
   --hero-park  constant headroom so the scroll shift can never expose an edge
   --hero-zoom  the cinematic entrance settle, 1.08 -> 1 on load             */
.hero__img {
  --hero-park: 1.14;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--hero-y, 0px), 0)
             scale(calc(var(--hero-park) * var(--hero-zoom, 1)));
  transition: transform 2.4s var(--ease-out);
}
.js .hero__img { --hero-zoom: 1.08; }
.hero.is-loaded .hero__img { --hero-zoom: 1; }
/* The scrim has to earn its keep in the middle, not just at the edges. It used
   to thin out to 0.18 at the 38% mark — which is exactly the band the headline
   and lede occupy — and that was survivable over a dark sunset photograph. Over
   a bright one (white hull, lit sky) the lede measured 4.22:1 and dipped under
   3:1 where it crossed the hull. Holding ~0.45 through the text band keeps body
   copy above 4.5:1 on any photograph, dark or bright. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgb(13 13 13 / 0.62) 0%,
      rgb(13 13 13 / 0.52) 30%,
      rgb(13 13 13 / 0.58) 62%,
      rgb(13 13 13 / 0.8) 100%
    );
}

.hero__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--header-h) + 3rem) var(--margin) clamp(3rem, 8vw, 6rem);
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}
.hero--center .hero__inner { justify-items: center; text-align: center; }
.hero--center .hero__lede { margin-inline: auto; }

.hero__eyebrow {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(249 247 242 / 0.85);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero--detail .hero__title { text-transform: none; max-width: 22ch; }
.hero__lede {
  max-width: 44ch;
  font-size: var(--t-body-lg);
  font-weight: 300;
  line-height: 1.7;
  /* Full strength over a photograph. The 0.9 alpha cost contrast for an effect
     nobody can see against a scrim this dark. */
  color: var(--ivory);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }

.hero__cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  transform: translateX(-50%);
  transform-origin: top;
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateX(-50%) scaleY(0.25); opacity: 0.4; }
  50%      { transform: translateX(-50%) scaleY(1);    opacity: 1; }
}

/* hero intro choreography */
.js .hero__eyebrow, .js .hero__lede, .js .hero__overline, .js .hero__actions {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease) var(--hd, 0s), transform 1s var(--ease-out) var(--hd, 0s);
}
.hero__eyebrow { --hd: 0.15s; }
.hero__lede, .hero__overline { --hd: 0.55s; }
.hero__actions { --hd: 0.7s; }
.hero.is-ready .hero__eyebrow,
.hero.is-ready .hero__lede,
.hero.is-ready .hero__overline,
.hero.is-ready .hero__actions { opacity: 1; transform: none; }

/* ------------------------------------------------------------ crumbs --- */
.crumbs { padding-block: 1.5rem 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--t-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--rule); }
.crumbs a:hover { color: var(--gold); }

/* --------------------------------------------------------------- split -- */
.split__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__copy { display: grid; gap: 1.5rem; align-content: start; }
.split__media { position: relative; }
/* The offset outline that used to sit behind this image (`.split__rule`) is
   gone at the client's request — it read as a stray border rather than a
   frame, and it appeared beside the first image on almost every page. */
.split--dark { background: var(--ink); color: var(--ivory); }
.split--dark .lede { color: var(--muted-dark); }

@media (min-width: 900px) {
  .split__inner { grid-template-columns: 5fr 6fr; }
  .split--flip .split__copy { order: 2; }
}

/* ------------------------------------------------------- collection ix -- */
.tiles {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* A tile fills its cell, the body takes the slack and the count is pinned to
   the bottom. As a two-row auto grid the leftover height was split between the
   rows instead, and the image -- locked to 4:5 -- left its share empty, so the
   pictures in a row stopped lining up along the bottom. Same rule as the cards. */
.tile { display: flex; flex-direction: column; gap: 1.25rem; }
.tile > .frame { flex: none; }
.tile__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.tile__count { margin-top: auto; }
.tile__label { font-family: var(--serif); font-size: var(--t-headline-md); line-height: 1.2; }
.tile__blurb { font-size: 0.9375rem; font-weight: 300; line-height: 1.65; color: var(--muted); }
.tile__count {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.tile:hover .tile__label { color: var(--gold); }

/* ---------------------------------------------------------------- cards -- */
.card-grid {
  display: grid;
  gap: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Cards in a row are as tall as the tallest, so a name that wraps to two lines
   would otherwise leave a ragged gap under its shorter neighbours. Let the card
   fill its cell and pin the CTA to the bottom: the slack collapses into one
   flexible space and the "Request Availability" links line up across the row. */
.card__link {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.card__title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  transition: color 0.4s var(--ease);
}
.card__link:hover .card__title { color: var(--gold); }
.card__meta {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.card__chips li {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--muted);
}
.card__chips li + li::before { content: '·'; margin-right: 1rem; color: var(--rule); }
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  width: fit-content;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.card__cta svg { width: 1.375rem; transition: transform 0.5s var(--ease); }
.card__link:hover .card__cta { border-color: var(--gold); color: var(--gold); }
.card__link:hover .card__cta svg { transform: translateX(6px); }

/* ---------------------------------------------------------------- price -- */
/* The client's starting rate. Caps for the qualifiers and a serif figure — the
   same pairing as the spec band, so a rate reads as a fact rather than a promo. */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45em; margin: 0; }
.price__from,
.price__unit,
.price__for {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.price__amount { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; letter-spacing: 0.01em; }
.showcase--dark .price__from,
.showcase--dark .price__unit,
.showcase--dark .price__for { color: var(--muted-dark); }
.match__price { font-size: 0.8125rem; color: var(--ivory); }

/* ----------------------------------------------------------------- rows -- */
.row-list { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.row { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.row__body { display: grid; gap: 1.25rem; align-content: start; }
.row__place {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.row__title { font-family: var(--serif); font-size: var(--t-headline); font-weight: 400; line-height: 1.15; }
.row__title a { transition: color 0.4s var(--ease); }
.row__title a:hover { color: var(--gold); }
.row__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--rule);
  max-width: 30rem;
}
.row__specs dt {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.row__specs dd { font-family: var(--serif); font-size: 1.25rem; }
.row__amenities { font-size: 0.9375rem; font-weight: 300; color: var(--muted); }

@media (min-width: 900px) {
  .row { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); }
  .row--flip .row__media { order: 2; }
  .row__specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- filters -- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.filters__legend {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.filters__options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.filters__btn {
  position: relative;
  padding-block: 0.35rem;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.filters__btn span { color: var(--rule); margin-left: 0.35rem; }
.filters__btn::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.filters__btn:hover { color: var(--ink); }
.filters__btn.is-active { color: var(--ink); }
.filters__btn.is-active::after { transform: scaleX(1); }
.filters__count { margin-left: auto; font-size: var(--t-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.empty-state { margin-top: 3rem; font-size: var(--t-body-lg); font-weight: 300; color: var(--muted); }
.empty-state button { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------- specs -- */
.specs-band { background: var(--ivory); }
/* Wrapping flex, not auto-fit grid: the cells that land on the last line grow
   to fill it, so the band always closes on a full-width rule. A grid left a
   lone trailing cell one column wide and the rule under it stopped a sixth of
   the way across. `--specs-columns` is set on the element by SpecGrid. */
.specs {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
}
.specs__cell {
  flex: 1 1 max(7.5rem, calc(100% / var(--specs-columns, 4)));
  padding: clamp(1.25rem, 2.4vw, 2rem) 1rem clamp(1.25rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
}
.specs__label {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.specs__value {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ features -- */
.features__title {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.features__list { display: grid; }
.features__item {
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
}
.features__item:first-child { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ overview -- */
.overview__inner { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.overview__copy { display: grid; gap: 1.5rem; align-content: start; }
.overview__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
@media (min-width: 900px) { .overview__inner { grid-template-columns: 6fr 5fr; } }

/* ------------------------------------------------------------ featured -- */
.featured { position: relative; padding: 0; color: var(--ivory); isolation: isolate; }
.featured__media { position: absolute; inset: 0; z-index: -1; }
.featured__media .frame { height: 100%; aspect-ratio: auto; }
.featured__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(13 13 13 / 0.85) 0%, rgb(13 13 13 / 0.45) 55%, rgb(13 13 13 / 0.2) 100%);
}
.featured__inner { padding-block: clamp(5rem, 14vw, 11rem); }
.featured__panel { display: grid; gap: 1.25rem; max-width: 34rem; }
.featured__panel .eyebrow { color: var(--gold); }
.featured__spec { font-size: var(--t-body-lg); font-weight: 300; line-height: 1.7; color: rgb(249 247 242 / 0.85); }
.featured__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }

/* -------------------------------------------------------------- values -- */
.values__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.values__head { display: grid; gap: 1.25rem; align-content: start; }
.values__list { display: grid; }
.values__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: clamp(1.125rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}
.values__item:first-child { border-top: 1px solid var(--rule); }
.values__index { font-size: var(--t-caps); font-weight: 600; letter-spacing: 0.15em; color: var(--gold); }
.values__text { font-family: var(--serif); font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.4; }
@media (min-width: 900px) { .values__inner { grid-template-columns: 4fr 7fr; } }

/* --------------------------------------------------------- destination -- */
.destination__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.destination__copy { display: grid; gap: 1.5rem; align-content: start; }
.destination__areas { display: grid; margin-top: 0.5rem; }
.destination__areas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--rule);
}
.destination__areas li:first-child { border-top: 1px solid var(--rule); }
.destination__area { font-family: var(--serif); font-size: 1.125rem; }
.destination__count { font-size: var(--t-caps); font-weight: 600; letter-spacing: 0.15em; color: var(--muted); }
.destination__note { font-size: var(--t-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
@media (min-width: 900px) { .destination__inner { grid-template-columns: 6fr 5fr; } }

/* -------------------------------------------------------- testimonials -- */
.testimonials { background: var(--ink); color: var(--ivory); }
.testimonials .headline { color: var(--ivory); }
.quotes { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* The track is as tall as the tallest quote because the slides share one grid
   cell. A fixed min-height plus absolutely positioned slides cannot do that --
   the longest testimonial overflowed it by 66px and crowded the controls. */
.quotes__track { position: relative; display: grid; min-height: 13rem; }
.quote {
  grid-area: 1 / 1;
  display: grid;
  gap: 1.5rem;
  place-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.quote.is-current { opacity: 1; transform: none; pointer-events: auto; }
.quote__text {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  max-width: 34ch;
  margin-inline: auto;
}
.quote__title {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.quotes__controls { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; }
.quotes__btn { color: rgb(249 247 242 / 0.6); transition: color 0.3s; }
.quotes__btn svg { width: 1.75rem; }
.quotes__btn:hover { color: var(--ivory); }
.quotes__rule { position: relative; flex: 1; height: 1px; background: rgb(249 247 242 / 0.22); }
.quotes__rule i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% / var(--n));
  background: var(--gold);
  transform: translateX(calc(100% * var(--index, 0)));
  transition: transform 0.6s var(--ease);
}

/* ----------------------------------------------------------------- cta -- */
.cta { background: var(--ink); color: var(--ivory); text-align: center; }
.cta__inner { display: grid; gap: 1.5rem; justify-items: center; }
.cta .lede { color: var(--muted-dark); max-width: 48ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }
.cta__wa {
  flex-basis: 100%;
  margin-top: 0.75rem;
  font-size: var(--t-caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: color 0.3s;
}
.cta__wa:hover { color: var(--gold); }

/* ------------------------------------------------------------- gallery -- */
.gallery { background: var(--ivory-dim); }
.gallery__grid {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.gallery__item { display: block; width: 100%; }
/* One shape for every tile, and that shape is the shape of the photographs.
   The mosaic this replaces sized its cells from a fixed 15rem row height, so a
   wide cell came out at 3.5:1 and a tall one at 4:5 — 57% and 45% of a 3:2
   picture cut away. A uniform 3:2 grid loses nothing and still tiles evenly. */
.gallery__item .frame { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Two columns below that, so an odd count would leave the last picture next to
   an empty cell. Let it close the gallery full width instead. */
@media (max-width: 899.98px) {
  .gallery__item:nth-child(odd):last-child { grid-column: 1 / -1; }
}

.lightbox {
  width: min(100vw, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  background: rgb(13 13 13 / 0.96);
  color: var(--ivory);
}
.lightbox::backdrop { background: rgb(13 13 13 / 0.9); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__close,
.lightbox__nav button {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1.25rem var(--margin);
}
.lightbox__close { justify-self: end; }
.lightbox__img { width: 100%; height: 100%; object-fit: contain; padding-inline: var(--margin); }
/* While the next photograph downloads the frame is deliberately empty rather
   than still showing the previous one. A quiet pulse says "loading" without
   putting a spinner on a luxury gallery. */
.lightbox.is-loading .lightbox__img { opacity: 0; }
.lightbox.is-loading::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.25;
  animation: lightbox-wait 1.2s ease-in-out infinite;
}
@keyframes lightbox-wait {
  0%, 100% { transform: scale(0.6); opacity: 0.18; }
  50%      { transform: scale(1);   opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-loading::after { animation: none; }
}
.lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; font-size: var(--t-caps); letter-spacing: 0.15em; }

/* ------------------------------------------------------------- enquire -- */
.enquire { background: var(--ivory-dim); }
.enquire__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.enquire__copy { display: grid; gap: 1.5rem; align-content: start; }
.enquire__meta {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (min-width: 980px) { .enquire__inner { grid-template-columns: 4fr 6fr; } }

/* ---------------------------------------------------------------- form -- */
.form { display: grid; gap: 2rem; }
.form__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
/* Slack belongs at the foot of the field. Left to stretch, the auto rows shared
   it out and pushed the label and the control taller than their neighbours',
   which knocked the underlines in a row out of line by up to 24px. */
.field { display: grid; gap: 0.5rem; margin: 0; align-content: start; }
/* `display: grid` beats the `hidden` attribute's UA `display: none`, so the
   date field the form is not using would stay on screen without this. */
.field[hidden] { display: none; }
.field--full { grid-column: 1 / -1; }
.field--honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.875rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.35s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.6rem center, right 0.25rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}
/* One height for every control. Left to their intrinsic sizes Chrome lays a
   date input out 2px taller than a text input, which is enough to knock the
   underlines in a row of the form out of line. */
.field input,
.field select { min-height: 3.4375rem; }
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--gold); }
.field.is-invalid input,
.field.is-invalid select { border-color: var(--error); }
.field__error { font-size: 0.8125rem; color: var(--error); min-height: 1rem; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.form__note { font-size: 0.8125rem; font-weight: 300; color: var(--muted); }
/* Only ever rendered inside <noscript>, where the form cannot submit itself. */
.form__noscript {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
}
.form__noscript a { border-bottom: 1px solid var(--gold); color: var(--gold); }
.form__status { font-size: 0.9375rem; font-weight: 300; }
.form__status.is-error { color: var(--error); }
.form__status:empty { display: none; }

/* ------------------------------------------------------- experiences --- */
/* Space the experiences with a gap on the row that actually holds them, not
   with padding on each article: padding also applies at the two ends, where it
   doubled up with the section's own padding and opened the block 64px lower
   than every other section on the site. The articles sit inside the .shell, so
   that is where the gap belongs. */
.experiences .shell { display: grid; gap: clamp(4rem, 10vw, 8rem); }
.experience { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.experience__copy { display: grid; gap: 1.25rem; align-content: start; }
.experience__index {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.experience__copy .arrow-link, .experience__copy .btn { margin-top: 0.5rem; justify-self: start; }
@media (min-width: 900px) {
  .experience { grid-template-columns: 6fr 5fr; gap: clamp(2rem, 6vw, 6rem); }
  .experience--flip .experience__media { order: 2; }
}
.island__inner { display: grid; gap: 2rem; justify-items: start; }
.island__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ------------------------------------------------------------ mission -- */
.mission__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.mission__list { display: grid; }
.mission__list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-body-lg);
  font-weight: 300;
}
.mission__list li:first-child { border-top: 1px solid var(--rule); }
.mission__list span { font-size: var(--t-caps); font-weight: 600; letter-spacing: 0.15em; color: var(--gold); }

/* Three services, so a two-column grid always leaves the third alone on a line
   covering 48% of the width. One column or three, never two — 760px is where
   three columns are still wide enough for the longest word in either language
   ("Organización", 168px) without overflowing. */
.services__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 760px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service { display: grid; gap: 1rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.service__index { font-size: var(--t-caps); font-weight: 600; letter-spacing: 0.18em; color: var(--gold); }
.service__title { font-family: var(--serif); font-size: var(--t-headline-md); font-weight: 400; line-height: 1.25; }
.service__body { font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--muted); }

/* ------------------------------------------------------------- contact -- */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.contact-grid__title { font-family: var(--serif); font-size: var(--t-headline-md); font-weight: 400; margin-bottom: 1.75rem; }
.contact-list { display: grid; }
.contact-list > div { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.contact-list > div:first-child { border-top: 1px solid var(--rule); }
.contact-list dt { font-size: var(--t-caps); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.contact-list dd { font-size: 1.0625rem; font-weight: 300; }
.contact-list a:hover { color: var(--gold); }
.contact-grid__note { margin-top: 1.75rem; font-size: 0.875rem; font-weight: 300; color: var(--muted); }
.contact-grid__note a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 7fr 4fr; } }

/* --------------------------------------------------------------- legal -- */
.legal { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 5rem)); }
.legal__inner { max-width: 52rem; }
.prose { margin-top: clamp(2rem, 4vw, 3rem); }
.prose__intro { font-size: var(--t-body-lg); font-weight: 300; line-height: 1.8; color: var(--muted); }
.prose__sections { display: grid; gap: 2.5rem; margin-top: 2.5rem; counter-reset: none; }
.prose__section h2 {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  margin-bottom: 1rem;
}
.prose__section h2 span { font-family: var(--sans); font-size: var(--t-caps); font-weight: 600; letter-spacing: 0.15em; color: var(--gold); }
.prose p { font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--muted); margin-bottom: 0.75rem; }
.prose__list { display: grid; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.prose__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}
.prose__list li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 0.5rem; height: 1px; background: var(--gold); }
.prose__contact { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.prose__contact h2 { font-family: var(--serif); font-size: 1.375rem; font-weight: 400; margin-bottom: 1rem; }
.prose__contact a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ notfound -- */
.notfound { padding-top: calc(var(--header-h) + clamp(4rem, 12vw, 8rem)); min-height: 70svh; display: grid; align-content: center; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; margin-top: 3rem; }
.notfound__links a {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  transition: color 0.3s, border-color 0.3s;
}
.notfound__links a:hover { color: var(--gold); border-color: var(--gold); }

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--ink); color: var(--ivory); padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
.site-footer__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.site-footer__name { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.25rem; }
.site-footer__blurb { font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--muted-dark); max-width: 32ch; }
.site-footer__contact { display: grid; gap: 0.5rem; margin-top: 1.75rem; font-style: normal; font-size: 0.9375rem; font-weight: 300; color: var(--muted-dark); }
.site-footer__contact a:hover { color: var(--gold); }
.site-footer__nav {
  /* Independent columns, not grid rows. In a wrapped grid the next row starts
     below the tallest group of the previous one, so "Collection" — five links,
     72px taller than the other three — left a 72px band under its neighbour.
     Column counts stay at 1, 2 or 4 so four groups always divide evenly;
     auto-fit was picking 3 and stranding "Follow" alone on a line. */
  columns: 2;
  column-gap: clamp(1.75rem, 3vw, 2.5rem);
  /* Multicol has no row gap, so the groups carry their own and the nav takes
     the last one back off the bottom. */
  margin-bottom: -2.5rem;
}
.site-footer__group { break-inside: avoid; padding-bottom: 2.5rem; }
@media (max-width: 559px) { .site-footer__nav { columns: 1; } }
@media (min-width: 1240px) { .site-footer__nav { columns: 4; } }
.site-footer__title { font-size: var(--t-caps); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory); margin-bottom: 1.25rem; }
.site-footer__group ul { display: grid; gap: 0.75rem; }
.site-footer__group a { font-size: 0.9375rem; font-weight: 300; color: var(--muted-dark); transition: color 0.3s; }
.site-footer__group a:hover { color: var(--gold); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  max-width: var(--container);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 1.75rem var(--margin);
  border-top: 1px solid rgb(249 247 242 / 0.14);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--muted-dark);
}
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: 4fr 8fr; } }

/* ------------------------------------------------------------ whatsapp -- */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid rgb(249 247 242 / 0.18);
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out), background 0.35s, color 0.35s;
}
/* No entrance animation on purpose. This is the primary contact action on
   every page, so it must never depend on an animation or a script running:
   it is simply always there. */
.wa:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.wa__icon { width: 1.125rem; height: 1.125rem; }
@media (max-width: 640px) {
  .wa { padding: 0.75rem; }
  .wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
body.nav-open .wa { opacity: 0; pointer-events: none; }

/* -------------------------------------------------------------- motion --
   Every rule that hides content until it is revealed is scoped to `.js`,
   which an inline head script adds before first paint. No JavaScript (or a
   script that fails to load) therefore means a fully visible page, not an
   invisible one.                                                            */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s var(--ease) calc(var(--rd, 0) * 90ms),
    transform 1s var(--ease-out) calc(var(--rd, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .frame[data-reveal='mask'] { opacity: 1; transform: none; }
.js .frame[data-reveal='mask'] .frame__img { clip-path: inset(0 0 101% 0); --ps: 1.1; }
.js .frame[data-reveal='mask'].is-in .frame__img { clip-path: inset(0 0 0 0); --ps: 1; }
.js .frame--parallax[data-reveal='mask'].is-in .frame__img { --ps: var(--park, 1.16); }

/* line-by-line headline reveal (built by motion.js) */
/* Playfair's em box (1.33em) is taller than these tight display line-heights,
   so descenders on g/y/p sit below the line box and the mask would shear them
   off. Give the clip region room, then take it back out of layout. */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.line__inner {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out) calc(var(--l, 0) * 85ms);
}
/* The hero's H1 is split by initHero(), not by the reveal observer, so it is
   marked `data-hero-title` and never carries `data-split`. Without it listed
   here the reveal never matched: every hero headline was built into masked
   lines, parked at translateY(105%), and left there — the H1 of all 184 pages
   painted once as plain text and then vanished. */
.js [data-split].is-in .line__inner,
.js [data-hero-title].is-in .line__inner { transform: none; }
.js [data-split]:not(.is-split) { opacity: 0; transition: opacity 0.6s var(--ease); }
.js [data-split]:not(.is-split).is-in { opacity: 1; }

/* cross-document page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 0.28s var(--ease) both; }
::view-transition-new(root) { animation: fade-in 0.42s var(--ease) both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* scripted fallback for browsers without the View Transitions API */
body { animation: fade-in 0.5s var(--ease) both; }
body.is-leaving { opacity: 0; transition: opacity 0.24s var(--ease); }

/* --------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-split] { opacity: 1 !important; transform: none !important; }
  .line__inner { transform: none !important; }
  .frame[data-reveal='mask'] .frame__img { clip-path: none !important; --ps: 1 !important; }
  .frame__img { --py: 0 !important; }
  .hero__img { transform: none !important; }
  .hero__eyebrow, .hero__lede, .hero__actions, .hero__overline { opacity: 1 !important; transform: none !important; }
  .wa { opacity: 1 !important; transform: none !important; }
  @view-transition { navigation: none; }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  .site-header, .mobile-nav, .wa, .hero__cue, .filters, .cta { display: none !important; }
  body { color: #000; background: #fff; }
  [data-reveal], [data-split] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================ showcase ==
   One-at-a-time listing carousel. Native scroll-snap does the scrolling;
   the script adds arrows, keyboard control and the endless wrap-around.
   ======================================================================== */
.showcase {
  --slide-w: min(62rem, 88vw);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.showcase--dark { background: var(--ink); color: var(--ivory); }
.showcase--light { background: var(--ivory-dim); }

.showcase__viewport {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.showcase__viewport::-webkit-scrollbar { display: none; }
.showcase__viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.showcase__track {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
  /* Padding keeps the active slide optically centred at both ends. */
  padding-inline: max(var(--margin), calc((100vw - var(--slide-w)) / 2));
}
.showcase__slide {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Slides are flex items, so every one is as tall as the tallest. The link has
   to fill that height and pin its CTA, or the slack lands under the CTA and the
   distance from the CTA to the controls changes as you page through. */
.showcase__link { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.showcase__media { position: relative; flex: none; }
.showcase__index {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  padding: 0.5rem 0.875rem;
  background: rgb(13 13 13 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ivory);
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.16em;
}

.showcase__body { display: flex; flex-direction: column; gap: 0.75rem; max-width: 44rem; flex: 1; }
.showcase__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.12;
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
}
.showcase__link:hover .showcase__title { color: var(--gold); }
.showcase__meta {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.showcase--light .showcase__meta { color: var(--muted); }
.showcase__chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.showcase__chips li { font-size: 0.875rem; font-weight: 300; color: var(--muted-dark); }
.showcase--light .showcase__chips li { color: var(--muted); }
.showcase__chips li + li::before { content: '·'; margin-right: 1rem; opacity: 0.6; }
.showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin-top: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid currentColor;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
}
.showcase__cta svg { width: 1.375rem; transition: transform 0.5s var(--ease); }
.showcase__link:hover .showcase__cta { color: var(--gold); }
.showcase__link:hover .showcase__cta svg { transform: translateX(6px); }

/* Slides other than the current one recede — the "one at a time" feel. */
.js .showcase__slide { transition: opacity 0.6s var(--ease); }
.js .showcase[data-ready] .showcase__slide { opacity: 0.32; }
.js .showcase[data-ready] .showcase__slide.is-current { opacity: 1; }

.showcase__controls {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.showcase__btn {
  flex: none;
  color: currentColor;
  opacity: 0.62;
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.showcase__btn svg { width: 2rem; }
.showcase__btn:hover { opacity: 1; }
.showcase__btn[data-carousel-prev]:hover { transform: translateX(-4px); }
.showcase__btn[data-carousel-next]:hover { transform: translateX(4px); }
.showcase__rule { position: relative; flex: 1; height: 1px; background: currentColor; opacity: 0.24; }
.showcase__rule i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% / var(--n));
  background: var(--gold);
  opacity: 1;
  transform: translateX(calc(100% * var(--index, 0)));
  transition: transform 0.55s var(--ease);
}
.showcase__status {
  flex: none;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

@media (max-width: 760px) {
  .showcase { --slide-w: 86vw; }
  .showcase__title { text-transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase__viewport { scroll-behavior: auto; }
  .js .showcase[data-ready] .showcase__slide { opacity: 1; }
}

/* ================================================================ disc ==
   Signature showcase: one vessel as a circular disc, its name set oversized
   behind it, a vertical stepper to move through the fleet, and a background
   tone that grades from slide to slide.

   The circle is the one deliberate exception to the design system's sharp
   0px shape language — it is the form the whole section is built on.
   ======================================================================== */
.disc {
  position: relative;
  isolation: isolate;
  background: var(--tone, #0d0d0d);
  color: var(--ivory);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
  transition: background 1.1s var(--ease);
}
/* A soft radial lift so the flat tone reads as lit, like the reference. */
.disc__wash {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 42%, rgb(255 255 255 / 0.09), transparent 70%);
  pointer-events: none;
}

.disc__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.disc__head { display: grid; gap: 0.875rem; justify-items: center; text-align: center; }
.disc__eyebrow {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.disc__headline {
  font-family: var(--serif);
  font-size: var(--t-headline-md);
  font-weight: 400;
  line-height: 1.25;
  max-width: 26ch;
}

/* ---- stage ------------------------------------------------------------ */
.disc__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 46vw, 34rem);
}

/* The oversized name, sitting behind the disc and occluded by it. */
.disc__word {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: 0;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(3.5rem, 15vw, 13rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  color: rgb(249 247 242 / 0.16);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.7s var(--ease-out);
}
.disc__word.is-swapping { opacity: 0; transform: translateY(-50%) scale(0.96); }

.disc__list { position: relative; z-index: 1; display: grid; width: 100%; place-items: center; }

/* ---- slides ----------------------------------------------------------- */
.disc__slide { grid-area: 1 / 1; width: 100%; display: grid; place-items: center; }
.disc__link { display: grid; place-items: center; gap: 1rem; }

.disc__disc {
  display: block;
  width: clamp(15rem, 40vw, 27rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sand);
  box-shadow: 0 3rem 6rem rgb(0 0 0 / 0.45);
}
.disc__img { width: 100%; height: 100%; object-fit: cover; }

/* Without JS every vessel is simply listed — no hidden content. */
.disc__fallback { display: grid; gap: 0.35rem; text-align: center; }
.disc__fallback-name {
  font-family: var(--serif);
  font-size: 1.375rem;
  text-transform: uppercase;
}
.disc__fallback-spec {
  font-size: var(--t-caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

/* With JS the fallback text is redundant — the footer panel carries it. */
.js .disc__list { display: grid; }
.js .disc__slide {
  opacity: 0;
  transform: rotate(-10deg) scale(0.88);
  transition: opacity 0.75s var(--ease), transform 0.95s var(--ease-out);
  pointer-events: none;
}
.js .disc__slide.is-current { opacity: 1; transform: none; pointer-events: auto; }
.js .disc__slide.is-leaving { opacity: 0; transform: rotate(10deg) scale(0.88); }
.js .disc__fallback { display: none; }
.js .disc__link:hover .disc__disc { transform: scale(1.02); }
.js .disc__disc { transition: transform 0.8s var(--ease); }

/* ---- footer panel + stepper ------------------------------------------- */
.disc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.disc__detail { display: grid; gap: 0.625rem; justify-items: start; }
.disc__name {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  transition: opacity 0.4s var(--ease);
}
.disc__spec {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: opacity 0.4s var(--ease);
}
.disc__cta { margin-top: 0.75rem; }
.disc__detail.is-swapping .disc__name,
.disc__detail.is-swapping .disc__spec { opacity: 0; }

.disc__stepper { display: grid; justify-items: center; gap: 0.875rem; }
.disc__step {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgb(249 247 242 / 0.28);
  border-radius: 50%;
  color: var(--ivory);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
    color 0.35s var(--ease), transform 0.35s var(--ease);
}
.disc__step svg { width: 0.75rem; }
.disc__step:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.disc__step[data-disc-prev]:hover { transform: translateY(-3px); }
.disc__step[data-disc-next]:hover { transform: translateY(3px); }
.disc__count {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--muted-dark);
}

@media (max-width: 700px) {
  .disc__foot { flex-direction: column; align-items: stretch; }
  .disc__stepper { grid-auto-flow: column; justify-content: center; }
  .disc__detail { justify-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .disc { transition: none; }
  .js .disc__slide { transition: opacity 0.001ms; transform: none !important; }
  .disc__word { transition: none; }
}

/* ============================================================== finder ==
   Guided match finder: a hero trigger above the headline, opening a
   full-screen four-step brief that ranks the real inventory.
   ======================================================================== */
/* A real button, in the accent gold, so it reads as the distinctive action —
   separate from the ivory primary CTA and the ghost secondary below it. */
.finder-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.finder-trigger__spark {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: var(--ink);
  border-radius: 50%;
}
.finder-trigger__arrow { width: 1.25rem; transition: transform 0.45s var(--ease); }
.finder-trigger:hover,
.finder-trigger:focus-visible {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}
.finder-trigger:hover .finder-trigger__spark { background: var(--gold); }
.finder-trigger:hover .finder-trigger__arrow { transform: translateX(5px); }
@media (max-width: 560px) {
  .finder-trigger { letter-spacing: 0.1em; padding-inline: 0.875rem 1rem; }
}

/* ---- dialog ----------------------------------------------------------- */
/* A centred card, not a full-bleed takeover — it should feel like a panel the
   site opened, with the hero still visible behind it. Goes full-screen on
   phones, where a floating card would just waste edges. */
.finder {
  width: min(46rem, calc(100vw - 2rem));
  max-width: none;
  /* fit-content, not auto: the UA stylesheet pins <dialog> with top:0 AND
     bottom:0, so `height: auto` resolves to "fill the viewport" and the card
     stood at its max-height with 379px of empty ink below the footer. */
  height: fit-content;
  max-height: min(88vh, 50rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgb(249 247 242 / 0.16);
  background: var(--ink);
  color: var(--ivory);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 0.55);
}
.finder::backdrop { background: rgb(13 13 13 / 0.92); }
.finder[open] { display: block; }

.finder__inner {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  max-height: inherit;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.finder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
}
.finder__brand {
  font-family: var(--serif);
  font-size: 1.25rem;
}
.finder__close {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: color 0.3s;
}
.finder__close:hover { color: var(--gold); }

.finder__progress { height: 1px; background: rgb(249 247 242 / 0.2); }
.finder__progress i {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--gold);
  transition: width 0.5s var(--ease);
}

.finder__body { overflow-y: auto; padding-block: clamp(1.25rem, 3vw, 2rem); }

.finder__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.625rem;
}
.finder__question {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.finder__note {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted-dark);
  max-width: 52ch;
  margin-bottom: 1.25rem;
}
.finder__hint {
  margin-top: 1.5rem;
  font-size: var(--t-caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- choices ---------------------------------------------------------- */
.finder__choices {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  margin-top: 1.25rem;
}
.finder__choices--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.finder__choice {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.875rem;
  text-align: left;
  border: 1px solid rgb(249 247 242 / 0.22);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.finder__choice-label { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.2; }
.finder__choice-count {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.finder__choice:hover { border-color: var(--ivory); }
.finder__choice[aria-pressed="true"] {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}
.finder__choice[aria-pressed="true"] .finder__choice-count { color: var(--muted); }
.finder__choice--soft .finder__choice-label { font-style: italic; }

/* ---- counter ---------------------------------------------------------- */
.finder__counter { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.finder__step-btn {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(249 247 242 / 0.28);
  border-radius: 50%;
  font-size: 1.25rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.finder__step-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.finder__count {
  width: 6rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgb(249 247 242 / 0.3);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.finder__count::-webkit-outer-spin-button,
.finder__count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.finder__count:focus { outline: none; border-color: var(--gold); }

.finder__field { display: grid; gap: 0.5rem; margin-top: 2rem; max-width: 18rem; }
.finder__field label {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.finder__optional { text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
.finder__field input {
  padding: 0.75rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgb(249 247 242 / 0.3);
  color: var(--ivory);
  color-scheme: dark;
}
.finder__field input:focus { outline: none; border-color: var(--gold); }

/* ---- tags ------------------------------------------------------------- */
.finder__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.finder__tag {
  padding: 0.4375rem 0.75rem;
  border: 1px solid rgb(249 247 242 / 0.24);
  font-size: 0.875rem;
  font-weight: 300;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.finder__tag span { color: var(--muted-dark); font-size: 0.75rem; margin-left: 0.35rem; }
.finder__tag:hover { border-color: var(--ivory); }
.finder__tag[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.finder__tag[aria-pressed="true"] span { color: rgb(13 13 13 / 0.6); }

/* ---- results ---------------------------------------------------------- */
.finder__matches { display: grid; gap: 0.75rem; margin-bottom: 2rem; }
.match {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgb(249 247 242 / 0.16);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.match:hover { border-color: var(--gold); background: rgb(249 247 242 / 0.04); }
.match--best { border-color: var(--gold); }
.match__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sand); }
.match__media img { width: 100%; height: 100%; object-fit: cover; }
.match__noimg {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.match__body { display: grid; gap: 0.3rem; }
.match__flag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.match__name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.match__meta,
.match__why {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--muted-dark);
}
.match__cta {
  margin-top: 0.25rem;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.finder__results-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---- footer ----------------------------------------------------------- */
.finder__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem 1.75rem;
  border-top: 1px solid rgb(249 247 242 / 0.14);
}
.finder__nav {
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-dark);
  transition: color 0.3s;
}
.finder__nav:hover { color: var(--ivory); }
.finder__next { margin-left: auto; }

@media (max-width: 560px) {
  .finder {
    width: 100vw;
    max-height: none;
    height: 100%;
    border: 0;
  }
  /* Full-screen on a phone, so the inner grid has to take the whole height too
     — its 1fr body row is what absorbs the slack. Left at content height the
     Back/Next foot floated 353px above the bottom of the panel. */
  .finder__inner { height: 100%; }
  .match { grid-template-columns: 4.5rem 1fr; gap: 0.875rem; }
  .finder__results-actions .btn { width: 100%; }
}
.hero__slot { display: flex; justify-content: inherit; }
.hero--center .hero__slot { justify-content: center; }

/* ---- party-size bands (replaces the counter; one tap advances) --------- */
.finder__bands {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
  margin-top: 1.25rem;
}
.finder__band {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid rgb(249 247 242 / 0.22);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.finder__band-label { font-family: var(--serif); font-size: 1.125rem; line-height: 1.1; }
.finder__band-count {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.finder__band:hover { border-color: var(--ivory); }
.finder__band[aria-pressed="true"] {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}
.finder__band[aria-pressed="true"] .finder__band-count { color: var(--muted); }

/* The full-height hero centres its content, so top and bottom padding must be
   balanced — an oversized top pad pushed the whole block below true centre. */
.hero--full .hero__inner {
  padding-top: calc(var(--header-h) + 0.5rem);
  padding-bottom: calc(var(--header-h) + 0.5rem);
  gap: 1.125rem;
}

/* ---- language switch --------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid currentColor;
  font-size: var(--t-caps);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-switch:hover,
.lang-switch:focus-visible {
  opacity: 1;
  background: var(--ivory);
  color: var(--ink);
}
/* The two halves used to be 0.75 on the control times 0.6 on the target — 45%
   effective, 3.86:1. That dimmed the one word a visitor is looking for. The
   current locale is the one to recede now, and it recedes by weight, not alpha,
   so the language you can switch to always stays fully legible. */
.lang-switch__sep { opacity: 0.55; font-weight: 400; }
.lang-switch__current { font-weight: 400; }
.lang-switch__other { font-weight: 600; }
@media (max-width: 400px) {
  .lang-switch { padding: 0.35rem 0.45rem; letter-spacing: 0.08em; }
}

/* Translation-precedence notice on the Spanish legal pages. */
.prose__notice {
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  border-left: 2px solid var(--gold);
  background: var(--ivory-dim);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}