/* =========================================================================
   NOMAD — content pages (Amenities · La Romana)
   Section styles that sit ON TOP of styles.css (which supplies the tokens,
   header, cursor, mobile menu, noise and the inquiry form). Structure mirrors
   the IPANEMA amenities/location pages; the look is NOMAD.
   ========================================================================= */

/* the content pages scroll normally (no fixed-height scrubber) */
.page-body {
  min-height: 100vh;
}

/* reveal helpers used by pages.js -------------------------------------- */
.reveal-word { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-char { display: inline-block; will-change: transform; }

/* generic section wrapper --------------------------------------------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 1.1em;
}

/* =========================================================================
   HERO
   ========================================================================= */
.p-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.p-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.p-hero-media img,
.p-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}
.p-hero-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-hero-media video.is-playing { opacity: 1; }

.p-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 10, 9, 0.55) 0%, rgba(12, 10, 9, 0.1) 34%, rgba(12, 10, 9, 0.86) 100%),
    radial-gradient(120% 120% at 20% 90%, rgba(12, 10, 9, 0.7) 0%, rgba(12, 10, 9, 0) 60%);
}

.p-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 11vh, 128px);
}

.p-hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.7rem, 7.4vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.p-hero-title .script {
  font-family: var(--script);
  font-weight: 600;
  color: var(--accent);
  font-size: 1.06em;
  letter-spacing: 0;
  /* the script face overhangs its box, so a mid-sentence word runs into the next
     one without this. Matches .beat-head .script on the homepage. */
  padding: 0 0.05em;
}

.p-hero-sub {
  margin-top: clamp(18px, 3vh, 30px);
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.6;
  color: #ded8d0;
}

.p-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 4vh, 44px);
  background: var(--accent);
  color: #17120b;
  border: 0;
  border-radius: 2px;
  padding: 16px 30px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 0.3s ease, background 0.3s ease;
}
.p-cta span { transition: transform 0.3s ease; }
.p-cta:hover { background: #d4bd93; }
.p-cta:hover span { transform: translateX(4px); }

.p-cta.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(250, 250, 250, 0.34);
}
.p-cta.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(40px, 8vh, 96px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue i { width: 46px; height: 1px; background: currentColor; display: block; }

/* =========================================================================
   SECTION HEADER (shared)
   ========================================================================= */
.section {
  padding: var(--section-pad) 0;
  position: relative;
}
.section + .section { border-top: 1px solid var(--hairline); }

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(40px, 6vh, 76px);
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.section-lead {
  margin-top: clamp(16px, 2.4vh, 26px);
  max-width: 52ch;
  font-size: clamp(1rem, 1.1vw, 1.14rem);
  line-height: 1.65;
  color: #cfc9c1;
}

/* =========================================================================
   EXPERIENCE (tab -> synced sub-list + image carousel)
   ========================================================================= */
.exp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(30px, 4.5vh, 54px);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
}

.exp-tab {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--sans);
  font-size: clamp(0.86rem, 1.15vw, 1.02rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 12px 4px 16px;
  margin-right: clamp(8px, 2vw, 26px);
  transition: color 0.3s ease;
  white-space: nowrap;
}
.exp-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.exp-tab:hover { color: var(--text); }
.exp-tab.is-active { color: var(--text); }
.exp-tab.is-active::after { transform: scaleX(1); }

.exp-body {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

/* the swapping sub-list */
.exp-list {
  list-style: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.exp-list.is-in { opacity: 1; transform: none; }
.exp-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.exp-list li:first-child { padding-top: 0; }
.exp-li-name {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.exp-li-note {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}

/* the image carousel */
.exp-gallery {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.exp-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--surface);
  overflow: hidden;
}
.exp-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s ease;
}
.exp-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 10, 9, 0) 55%, rgba(12, 10, 9, 0.6) 100%);
}

.exp-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  background: rgba(12, 10, 9, 0.62);
  border: 1px solid rgba(250, 250, 250, 0.14);
  backdrop-filter: blur(6px);
  padding: 9px 16px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.exp-index {
  position: absolute;
  right: 18px;
  bottom: 20px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #e8e2da;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.exp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 250, 250, 0.28);
  background: rgba(12, 10, 9, 0.42);
  backdrop-filter: blur(5px);
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.exp-arrow:hover { background: var(--accent); color: #17120b; border-color: var(--accent); }
.exp-arrow.left { left: 16px; }
.exp-arrow.right { right: 16px; }

/* =========================================================================
   SPLIT (text + image, "rises above" block)
   ========================================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 96px);
  align-items: center;
}
.split.reverse .split-text { order: 2; }

.split-text .section-title { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.split-copy {
  margin-top: clamp(18px, 2.6vh, 30px);
  max-width: 46ch;
  font-size: clamp(1rem, 1.1vw, 1.14rem);
  line-height: 1.7;
  color: #cfc9c1;
}
.split-copy p + p { margin-top: 1.1em; }

.split-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 54px);
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(24px, 3vh, 34px);
  border-top: 1px solid var(--hairline);
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
.stat-label {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.split-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  will-change: clip-path;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split.tall .split-media { aspect-ratio: 3 / 4; }

/* =========================================================================
   SURROUNDINGS (POI list + illustrated map)  — La Romana page
   ========================================================================= */
.surround-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.poi-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.poi {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
.poi:first-child { padding-top: 0; }
.poi-ic {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--accent);
}
.poi-ic svg { width: 20px; height: 20px; }
.poi-name {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 500;
}
.poi-detail {
  margin-top: 4px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted);
}

.map-panel {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  background: #100d0a;
}
.map-panel svg { display: block; width: 100%; height: auto; }
.map-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(22px, 3vh, 32px);
}

/* map pin ping */
.map-pin-ping { transform-origin: center; animation: pinPing 2.6s ease-out infinite; }
@keyframes pinPing {
  0% { opacity: 0.55; transform: scale(0.4); }
  70% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .exp-body { grid-template-columns: 1fr; gap: clamp(24px, 5vh, 40px); }
  .exp-gallery { order: -1; }               /* image first, then the list */
  .split { grid-template-columns: 1fr; gap: clamp(28px, 6vh, 44px); }
  .split.reverse .split-text { order: 0; }
  .split-media { aspect-ratio: 16 / 11; }
  .split.tall .split-media { aspect-ratio: 16 / 11; }
  .surround-grid { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
  .map-panel { order: -1; }
}

@media (max-width: 560px) {
  .exp-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .exp-tab { margin-right: 14px; }
  .exp-arrow { width: 44px; height: 44px; }
  .split-stats { gap: 24px; }
  .poi { grid-template-columns: 38px 1fr; gap: 14px; }
  .poi-ic { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero-media img { transform: none; }
  .map-pin-ping { animation: none; }
  .exp-list { opacity: 1; transform: none; }
}

/* =========================================================================
   INVESTORS PORTAL — the data room
   ========================================================================= */

/* figures strip: one restrained editorial line of the key numbers */
.figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 5vw, 82px);
  align-items: flex-end;
}
.fig-n {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.fig-n .g { color: var(--accent); }
.fig-l {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--muted);
}
.figures-note {
  margin-top: clamp(26px, 3.5vh, 42px);
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(154, 147, 140, 0.85);
  max-width: 62ch;
}

/* the document index: an editorial ledger of exhibits */
.idx-cat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(34px, 4.5vh, 58px) 0 8px;
}
.idx-cat:first-child { padding-top: 0; }
.idx-cat-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em; color: var(--accent); }
.idx-cat-name { font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.42rem); font-weight: 500; color: var(--text); }
.idx-cat-count { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.idx-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(20px, 2.6vh, 30px) 0;
  border-top: 1px solid var(--hairline);
  transition: padding-left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
a.idx-row:hover { padding-left: 12px; }
.idx-num { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); transition: color 0.3s ease; }
a.idx-row:hover .idx-num { color: var(--accent); }
.idx-main { min-width: 0; }
.idx-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.1vw, 1.72rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  transition: color 0.3s ease;
}
a.idx-row:hover .idx-title { color: var(--accent); }
.idx-desc { display: block; margin-top: 8px; font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 54ch; }
.idx-side { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); justify-self: end; }
.idx-meta { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(154, 147, 140, 0.8); white-space: nowrap; }
.idx-act { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); white-space: nowrap; transition: color 0.3s ease; }
.idx-act svg { width: 15px; height: 15px; }
a.idx-row:hover .idx-act { color: var(--accent); }
.idx-langs { display: flex; gap: clamp(12px, 1.4vw, 18px); }
.idx-lang { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.3s ease; }
.idx-lang:hover { color: var(--accent); }
.idx-note {
  margin-top: clamp(28px, 3.5vh, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(154, 147, 140, 0.85);
  max-width: 66ch;
}

/* colophon: the responsible parties as one editorial row */
.colophon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 48px);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(30px, 4vh, 48px);
}

/* creative direction: three colourways side by side */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(24px, 3vh, 36px);
}
.cd-item { margin: 0; }
.cd-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.cd-item figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 760px) {
  .cd-grid { grid-template-columns: 1fr; }
}

/* lender cards (financing page): the colophon's plain text row, promoted to
   something clickable now that financing has a page of its own to link to */
.lenders {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(24px, 3vh, 36px);
}
.lender {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.lender:hover { border-color: var(--accent); transform: translateY(-2px); }
.lender-mark {
  flex: 0 0 auto;
  width: clamp(72px, 8vw, 104px);
  display: flex;
  align-items: center;
}
.lender-mark img { width: 100%; height: auto; }
.lender-body { flex: 1; min-width: 0; }
.lender-name { display: block; font-family: var(--serif); font-size: clamp(1rem, 1.3vw, 1.22rem); font-weight: 500; }
.lender-note { display: block; margin-top: 8px; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.lender-go { flex: 0 0 auto; color: var(--accent); font-size: 1.1rem; }
@media (max-width: 760px) {
  .lenders { grid-template-columns: 1fr; }
}
.colo-role { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.colo-name { margin-top: 11px; font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500; }
.colo-note { margin-top: 9px; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 760px) {
  .colophon { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .figures { gap: 24px 34px; }
  .idx-row { grid-template-columns: 30px minmax(0, 1fr); }
  .idx-side { grid-column: 2; justify-self: start; margin-top: 12px; gap: 22px; }
  .colophon { grid-template-columns: 1fr; }
}

/* =========================================================================
   EDITORIAL PAGES (Investors · Amenities · La Romana)
   Dark photo hero + LIGHT editorial body, brandbook accents.
   body.editorial = light theme · body.portal adds non-sticky chrome.
   ========================================================================= */

/* investors only: the menu + social rail scroll away with the hero */
.portal .site-ui { position: absolute; }
.portal .social-rail { position: absolute; }

.editorial,
.editorial main { background: #f1ece3; }

/* brand text face on editorial pages */
.editorial .section,
.editorial .inquiry {
  --sans: "Gantari", "Inter", system-ui, sans-serif;
  color: #241d13;
  --text: #241d13;
  --muted: #6f665a;
  --accent: #5d0000;          /* brandbook burgundy */
  --hairline: rgba(28, 22, 14, 0.13);
  --surface: #fbf8f2;
  --bg: #f1ece3;
  font-family: var(--sans);
}

.editorial .section-lead,
.editorial .idx-meta,
.editorial .idx-note { color: #6f665a; }

/* figures -> separated stat tiles */
/* Six stats since Sonesta I and II carry separate delivery dates. Explicit column
   counts rather than auto-fit: auto-fit lands on 5 across at tablet widths and
   strands the sixth tile alone on a second row. 6 / 3 / 2 always divide evenly. */
.editorial .figures {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
}
@media (max-width: 1180px) {
  .editorial .figures { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .editorial .figures { grid-template-columns: repeat(2, 1fr); }
}
.editorial .fig {
  background: #fbf8f2;
  border: 1px solid rgba(28, 22, 14, 0.1);
  border-radius: 8px;
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 26px);
  transition: border-color 0.3s ease;
}
.editorial .fig:hover { border-color: rgba(93, 0, 0, 0.45); }
.editorial .fig-n { color: #241d13; font-size: clamp(1.45rem, 2.3vw, 2rem); }
.editorial .fig-n .g { color: #5d0000; }
.editorial .fig-l { margin-top: 12px; color: #6f665a; }

/* light contact / inquiry */
.editorial .inquiry { background: #f1ece3; }
.editorial .inquiry-bg,
.editorial .inquiry-scrim { display: none; }
.editorial .inquiry-lead { color: #4a4238; }
.editorial .inquiry-form { background: #fbf8f2; border: 1px solid rgba(28, 22, 14, 0.1); }
.editorial .field input,
.editorial .field textarea { background: #ffffff; border-color: rgba(28, 22, 14, 0.2); }
.editorial .field input::placeholder,
.editorial .field textarea::placeholder { color: rgba(28, 22, 14, 0.35); }
.editorial .toggle-opt span { border-color: rgba(28, 22, 14, 0.2); }
.editorial .toggle-opt input:checked + span { border-color: #5d0000; background: rgba(93, 0, 0, 0.07); }
.editorial .inquiry-disclaimer { color: rgba(28, 22, 14, 0.55); }
.editorial .send-inquiry { background: #241d13; color: #f5f1e9; }
.editorial .send-inquiry:hover { background: #5d0000; }

/* in-body CTA on the light pages sits on burgundy (--accent), so it needs light
   text — the base .p-cta uses dark ink for the gold hero button. */
.editorial .section .p-cta { color: #f5f1e9; }
.editorial .section .p-cta:hover { background: #7a1f1f; color: #f5f1e9; }

/* =========================================================================
   EDITORIAL CHAPTERS (Amenities · La Romana)
   ========================================================================= */
.chap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
  padding: clamp(48px, 7vh, 96px) 0;
}
.chap + .chap { border-top: 1px solid var(--hairline); }
.chap.flip .chap-text { order: 2; }

.chap-kicker {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5d0000;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.chap-kicker .rule { flex: 0 0 44px; height: 1px; background: rgba(93, 0, 0, 0.5); align-self: center; }

.chap-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.chap-copy {
  margin-top: clamp(16px, 2.4vh, 24px);
  max-width: 44ch;
  font-size: clamp(0.98rem, 1.08vw, 1.1rem);
  line-height: 1.7;
  color: #4a4238;
}
.chap-items {
  list-style: none;
  margin-top: clamp(22px, 3vh, 34px);
}
.chap-items li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
}
.chap-item-name { font-family: var(--serif); font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 500; }
.chap-item-note {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f665a;
  text-align: right;
  white-space: nowrap;
}

.chap-src { margin-top: clamp(20px, 3vh, 30px); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7d6f; }

.chap-media { position: relative; }
.chap-media .main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.chap-media .main.tall { aspect-ratio: 4 / 4.4; }
.chap-media .inset {
  position: absolute;
  width: 38%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 6px solid #f1ece3;
  bottom: -9%;
  display: block;
}
.chap-media .inset.left { left: -6%; }
.chap-media .inset.right { right: -6%; }
.chap-media .credit {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(20, 14, 10, 0.55);
  backdrop-filter: blur(5px);
  color: #f5f1e9;
  border-radius: 4px;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* full-bleed image break */
.bleed {
  position: relative;
  height: clamp(340px, 62vh, 620px);
  overflow: hidden;
}
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.bleed .bleed-chip {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(20px, 4vh, 40px);
  background: rgba(20, 14, 10, 0.55);
  backdrop-filter: blur(6px);
  color: #f5f1e9;
  border-radius: 4px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* the NOMAD voice: dark brand band, three editorial pillars */
.voice {
  background: #17120f;
  color: #f5f1e9;
  padding: var(--section-pad) 0;
}
.voice .eyebrow { color: #c9a06a; }
.voice-head {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(36px, 5.5vh, 64px);
}
.voice-card { position: relative; border-radius: 8px; overflow: hidden; }
.voice-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.voice-card:hover img { transform: scale(1.04); }
.voice-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 7, 5, 0) 46%, rgba(10, 7, 5, 0.78) 100%);
  pointer-events: none;
}
.voice-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(18px, 2.2vw, 30px);
}
.voice-card-n {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  color: #c9a06a;
}
.voice-card-t {
  margin-top: 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: 0.02em;
}
.voice-card-p { margin-top: 8px; font-size: 0.9rem; line-height: 1.55; color: rgba(245, 241, 233, 0.72); max-width: 34ch; }

@media (max-width: 900px) {
  .chap { grid-template-columns: 1fr; gap: clamp(26px, 5vh, 40px); padding: clamp(38px, 6vh, 64px) 0; }
  .chap.flip .chap-text { order: 0; }
  .chap-media { order: -1; }
  .chap-media .inset { border-width: 4px; }
  .voice-grid { grid-template-columns: 1fr; }
  .voice-card img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .chap-media .inset { display: none; }
  .chap-item-note { white-space: normal; }
}

/* =========================================================================
   TOURISM BILLBOARDS — dark record-stat band (La Romana)
   ========================================================================= */
.billboards { background: #17120f; color: #f5f1e9; padding: var(--section-pad) 0; }
.bb-hero { text-align: center; max-width: 24ch; margin: 0 auto; }
.bb-hero-n {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3.4rem, 13vw, 10.5rem);
  line-height: 0.9; letter-spacing: -0.03em; color: #f7f2e9;
}
.bb-hero-cap {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: #c9a06a;
}
.bb-hero-sub {
  margin: clamp(18px, 2.6vh, 26px) auto 0; max-width: 48ch;
  font-size: clamp(1rem, 1.1vw, 1.14rem); line-height: 1.65; color: rgba(245, 241, 233, 0.72);
}
.bb-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: clamp(44px, 6.5vh, 88px);
  border-top: 1px solid rgba(245, 241, 233, 0.16);
}
.bb { padding: clamp(28px, 3.6vh, 44px) clamp(16px, 2vw, 30px); border-right: 1px solid rgba(245, 241, 233, 0.12); }
.bb:last-child { border-right: 0; }
.bb-n { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; color: #f7f2e9; }
.bb-l { margin-top: 12px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 241, 233, 0.6); }
.bb-chart { max-width: 620px; margin: clamp(46px, 7vh, 84px) auto 0; }
.bb-chart-cap { text-align: center; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c9a06a; margin-bottom: clamp(20px, 3vh, 30px); }
.bb-chart svg { display: block; width: 100%; height: auto; }
.bb-src { margin-top: clamp(30px, 4vh, 48px); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 241, 233, 0.42); text-align: center; }
@media (max-width: 760px) {
  .bb-row { grid-template-columns: 1fr 1fr; }
  .bb:nth-child(2) { border-right: 0; }
  .bb:nth-child(1), .bb:nth-child(2) { border-bottom: 1px solid rgba(245, 241, 233, 0.12); }
}
@media (max-width: 460px) {
  .bb-row { grid-template-columns: 1fr; }
  .bb { border-right: 0; border-bottom: 1px solid rgba(245, 241, 233, 0.12); }
  .bb:last-child { border-bottom: 0; }
}

.lang{text-decoration:none}