/* ==========================================================================
   FOUR PALMS — KEDUNGU, BALI
   Design system / main stylesheet
   --------------------------------------------------------------------------
   Contents
   01. Tokens
   02. Reset & base
   03. Typography
   04. Layout & grid
   05. Buttons & links
   06. Image placeholders / media
   07. Header & navigation
   08. Hero
   09. Sections & editorial blocks
   10. Villa collection & detail
   11. Specification tables, notes, data
   12. Forms
   13. Footer & sticky actions
   14. Motion
   15. Utilities & responsive
   ========================================================================== */

/* Self-hosted variable fonts. No third-party connection, no render-blocking
   external stylesheet: ~88KB for both, subset to latin. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-var-latin.woff2") format("woff2-variations");
  font-weight: 200 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* 01. TOKENS ============================================================== */

:root {
  /* Surface */
  --paper:        #F8F5EF;
  --paper-2:      #F1ECE2;
  --sand:         #E7DFD1;
  --ink:          #1B1A16;
  --ink-2:        #2C2A24;

  /* Text */
  --text:         #1B1A16;
  --text-2:       #4A463C;
  --muted:        #7C7566;
  --on-dark:      #F2EEE5;
  --on-dark-2:    #B6AF9F;

  /* Line */
  --line:         #DCD4C5;
  --line-soft:    #E9E3D7;
  --line-dark:    #3B382F;

  /* Accent — used sparingly */
  --forest:       #2D3A2E;
  --brass:        #9A7B45;

  /* Type */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --max:          1320px;
  --max-narrow:   760px;
  --section-y:    clamp(4.5rem, 9vw, 9rem);
  --section-y-lg: clamp(6rem, 12vw, 12rem);

  /* Motion */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur:         0.7s;

  --header-h:    76px;
}

/* 02. RESET & BASE ======================================================== */

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

/* The UA rule for [hidden] loses to any author `display`, which silently
   breaks every element JS hides. Restore it. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

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

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  transition: top 0.2s var(--ease-soft);
}
.skip-link:focus { top: 1rem; }

/* 03. TYPOGRAPHY ========================================================== */

.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: var(--display);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(2.875rem, 6.6vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.display-l  { font-size: clamp(2.25rem, 4.6vw, 3.875rem); line-height: 1.04; }
.display-m  { font-size: clamp(1.75rem, 3.1vw, 2.75rem);  line-height: 1.12; }
.display-s  { font-size: clamp(1.375rem, 2.1vw, 1.875rem); line-height: 1.2; letter-spacing: -0.012em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
  display: block;
}
.eyebrow--light { color: rgba(242, 238, 229, 0.86); }

.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 34ch;
  text-wrap: pretty;
}
.lead--wide { max-width: 52ch; }

.prose p {
  max-width: 64ch;
  color: var(--text-2);
  text-wrap: pretty;
}
.prose p + p { margin-top: 1.25rem; }
.prose > * + h2 { margin-top: clamp(3rem, 5vw, 4.5rem); }
.prose > * + h3 { margin-top: clamp(2rem, 3vw, 2.75rem); }
.prose h2 + p, .prose h3 + p { margin-top: 1.125rem; }
.prose > * + .spec,
.prose > * + .note,
.prose > * + .figure { margin-top: 2rem; }
.prose > * + .inline-cta { margin-top: 1.75rem; }

/* The article renderer wraps figures, notes and spec rows in a reveal div, so
   the sibling rules above never saw them. Space the wrapper on both sides. */
.prose > div[data-reveal]:not(.inline-cta) { margin-top: 2rem; }
.prose > div[data-reveal]:not(.inline-cta) + * { margin-top: 2rem; }
.prose > div[data-reveal]:first-child { margin-top: 0; }
.prose > div[data-reveal] > .figure,
.prose > div[data-reveal] > .note,
.prose > div[data-reveal] > .spec { margin-top: 0; }
.prose strong { font-weight: 600; color: var(--text); }

/* Editorial list. A hairline marker rather than a bullet glyph, so a list
   sits in the page the way the hairline rules elsewhere do. */
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets > li {
  position: relative;
  padding-left: 1.5rem;
  max-width: 62ch;
  line-height: 1.75;
  color: var(--text-2);
}
.bullets > li + li { margin-top: 0.6rem; }
.bullets > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.75rem;
  height: 1px;
  background: var(--brass);
}
.prose > * + .bullets { margin-top: 1.25rem; }
.prose .bullets + p { margin-top: 1.25rem; }

.caption {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: 0.005em;
  max-width: 58ch;
}

.tk {
  border-bottom: 1px dotted var(--brass);
  color: var(--brass);
  font-size: 0.95em;
  /* Tokens are placeholders, not content: let a long one wrap rather than
     widen its container and push the page sideways. */
  overflow-wrap: anywhere;
}

/* 04. LAYOUT & GRID ======================================================= */

.wrap { width: min(100% - (var(--gutter) * 2), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--max-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark .lead,
.section--dark .prose p { color: var(--on-dark-2); }
.section--sand { background: var(--paper-2); }
.section--line-top { border-top: 1px solid var(--line); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head__aside { align-self: end; }

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
  }
}

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--dark .rule { background: var(--line-dark); }

/* 05. BUTTONS & LINKS ===================================================== */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.9rem 1.85rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--ink); }
.btn:hover::after { transform: scaleY(1); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
}
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: var(--paper); border-color: var(--ink); }

.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-bd: var(--paper);
}
.btn--light::after { background: transparent; }
.btn--light:hover { background: transparent; color: var(--paper); border-color: var(--paper); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  --btn-bd: rgba(242, 238, 229, 0.35);
}
.btn--outline-light::after { background: var(--paper); }
.btn--outline-light:hover { color: var(--ink); border-color: var(--paper); }

.btn--sm { min-height: 44px; padding: 0.65rem 1.35rem; font-size: 0.8125rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Text link with rule */
.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-bottom: 0.35rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease), opacity 0.3s var(--ease-soft);
}
.tlink:hover { background-size: 0% 1px; opacity: 0.72; }
.tlink__arrow { transition: transform 0.4s var(--ease); font-size: 0.85em; }
.tlink:hover .tlink__arrow { transform: translateX(4px); }

.inline-cta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; }

/* 06. IMAGE PLACEHOLDERS / MEDIA ========================================== */

.figure { margin: 0; }
.figure figcaption { margin-top: 0.875rem; }

.ph {
  --ratio: 3 / 2;
  position: relative;
  aspect-ratio: var(--ratio);
  width: 100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--sand) 0%, var(--paper-2) 100%);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(27, 26, 22, 0.08);
  pointer-events: none;
}
.ph__label {
  position: relative;
  margin: 0;
  padding: 1.1rem 1.35rem;
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 44ch;
}
.ph__label b {
  display: block;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 0.25rem;
}
.ph--tall  { --ratio: 4 / 5; }
.ph--port  { --ratio: 3 / 4; }
.ph--square{ --ratio: 1 / 1; }
.ph--wide  { --ratio: 16 / 9; }
.ph--pano  { --ratio: 21 / 9; }
.ph--plan  { --ratio: 4 / 3; background: linear-gradient(180deg, #FBF9F4 0%, #F1ECE2 100%); }
.ph--dark {
  background: linear-gradient(180deg, #2A2823 0%, #1B1A16 100%);
  border-color: var(--line-dark);
}
.ph--dark .ph__label { color: var(--on-dark-2); }
.ph--dark .ph__label b { color: var(--on-dark); }
.ph--dark::before { border-color: rgba(242, 238, 229, 0.1); }
/* Real image in a slot. The written brief stays in the markup and comes back
   automatically if the file is missing, so the layout never breaks. */
.ph--img { background: var(--sand); }
.ph--dark.ph--img { background: linear-gradient(180deg, #2A2823 0%, #1B1A16 100%); }
.ph--img::before { display: none; }
.ph--img > picture { position: absolute; inset: 0; z-index: 1; display: block; }
.ph--img picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.ph--plan.ph--img {
  background: #FBF9F4;
  aspect-ratio: auto;
  display: block;
  padding: clamp(0.75rem, 2vw, 1.75rem);
}
.ph--plan.ph--img > picture { position: relative; inset: auto; }
.ph--plan.ph--img picture > img {
  height: auto;
  object-fit: contain;
  transition: none;
}
.ph--img.is-missing::before { display: block; }
.ph--img.is-missing > picture { display: none; }

/* Full-bleed background placeholders: keep the brief out of the content area */
.ph--fill { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; align-items: flex-start; }
.ph--fill .ph__label {
  position: absolute;
  top: calc(var(--header-h) + 0.5rem);
  right: 0;
  max-width: 30ch;
  text-align: right;
  opacity: 0.75;
}
@media (max-width: 899px) {
  .ph--fill .ph__label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* With a real image in place the written brief is removed from the page
   entirely; it only comes back if the file is missing. Declared after the
   .ph--fill rules above so it wins on hero slots too. */
.ph--img .ph__label { display: none; }
.ph--img.is-missing .ph__label {
  display: block;
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
  opacity: 1;
  text-align: left;
}

/* 07. HEADER & NAVIGATION ================================================= */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--on-dark);
  transition: background-color 0.5s var(--ease-soft), color 0.4s var(--ease-soft),
              box-shadow 0.4s var(--ease-soft), height 0.4s var(--ease-soft);
}
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,19,16,0.55) 0%, rgba(20,19,16,0) 100%);
  z-index: -1;
  transition: opacity 0.4s var(--ease-soft);
}
.header.is-solid {
  background: var(--paper);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  height: 66px;
}
.header.is-solid::after { opacity: 0; }
.header.is-hidden { transform: translateY(-100%); }
.header { transition-property: background-color, color, height, transform; }

/* Pages without a dark hero start solid */
.header--static {
  position: sticky;
  background: var(--paper);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.header--static::after { opacity: 0; }

.header__inner {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}
.brand__mark {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.brand__sub {
  font-size: 0.5625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.66;
  margin-top: 0.3rem;
}

.nav { display: none; }
@media (min-width: 1040px) {
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
}
.nav__link {
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  white-space: nowrap;
}
.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::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { opacity: 1; }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }
.header__cta { display: none; }
@media (min-width: 1040px) { .header__cta { display: inline-flex; } }

/* The header CTA follows the header's own colour, whatever state it is in */
.header__cta.btn {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: 0.92;
}
.header__cta.btn::after { background: currentColor; }
.header:not(.is-solid):not(.header--static) .header__cta.btn:hover { color: var(--ink); opacity: 1; }
.header.is-solid .header__cta.btn:hover,
.header--static .header__cta.btn:hover { color: var(--paper); opacity: 1; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 1040px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease-soft);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  color: var(--text);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease), visibility 0.4s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  font-family: var(--display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 300;
  text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.drawer__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 0.75rem; }
.drawer__contact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  font-size: 0.9375rem;
}
.drawer__contact span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }

/* 08. HERO ================================================================ */

.hero {
  position: relative;
  /* The text block is grounded, not centred: centring runs the headline across
     the middle of the building. Capping the height on very tall screens stops
     the empty space above it growing without limit, and lets a sliver of the
     next section show as a scroll cue. min() is required here because a larger
     min-height would otherwise override max-height. */
  min-height: min(100svh, 1060px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--on-dark);
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .ph { height: 100%; border: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two layers: a vertical wash for the nav and the fact bar, and a horizontal
     one so the text column always sits on a dark field whatever the image. */
  background:
    linear-gradient(90deg, rgba(16,15,12,0.78) 0%, rgba(16,15,12,0.58) 34%, rgba(16,15,12,0.12) 62%, rgba(16,15,12,0) 80%),
    linear-gradient(180deg, rgba(16,15,12,0.55) 0%, rgba(16,15,12,0.15) 30%, rgba(16,15,12,0.55) 74%, rgba(16,15,12,0.88) 100%);
  pointer-events: none;
}
@media (max-width: 899px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(16,15,12,0.62) 0%, rgba(16,15,12,0.38) 28%, rgba(16,15,12,0.72) 70%, rgba(16,15,12,0.9) 100%);
  }
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  padding-top: calc(var(--header-h) + 4rem);
  /* Scales with viewport height so the block lifts clear of the fact bar on
     tall screens instead of sitting tight against it. */
  padding-bottom: clamp(1.75rem, 7vh, 6rem);
}

.hero__title { margin-bottom: 1.75rem; color: var(--on-dark); }
.hero__lead {
  color: rgba(242, 238, 229, 0.82);
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.6;
}
.hero__lead + .hero__lead { margin-top: 0.75rem; }

.hero__bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(242, 238, 229, 0.22);
}
.hero__bar-inner {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  display: grid;
  gap: 1rem 2rem;
  padding: 1.25rem 0 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .hero__bar-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: center;
    padding: 1.5rem 0;
  }
}
.hero__bar-inner--status { grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 900px) {
  .hero__bar-inner--status { grid-template-columns: 1fr auto; align-items: center; }
}
.hero__fact {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.78);
}
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.9);
  border: 1px solid rgba(242, 238, 229, 0.28);
  padding: 0.5rem 0.9rem;
  white-space: normal;
  line-height: 1.5;
  text-align: left;
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .hero__status { grid-column: auto; justify-self: end; white-space: nowrap; }
}
@media (max-width: 899px) {
  .hero__status { grid-column: 1 / -1; justify-self: start; }
  .hero__dot { flex: 0 0 auto; }
}
.hero__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(6.5rem, 12vh, 9rem);
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.62);
  text-decoration: none;
}
@media (min-width: 900px) { .scroll-cue { display: flex; } }
.scroll-cue__line {
  width: 1px; height: 54px;
  background: linear-gradient(180deg, rgba(242,238,229,0.55), rgba(242,238,229,0));
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px; height: 18px;
  background: var(--paper);
  animation: cue 2.6s var(--ease-soft) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-20px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(54px); opacity: 0; }
}

/* Page hero (interior pages) */
.phero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  min-height: clamp(460px, 68vh, 720px);
  display: flex;
  align-items: flex-end;
}
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media .ph { height: 100%; border: 0; }
.phero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(16,15,12,0.76) 0%, rgba(16,15,12,0.5) 38%, rgba(16,15,12,0) 74%),
    linear-gradient(180deg, rgba(16,15,12,0.6) 0%, rgba(16,15,12,0.2) 38%, rgba(16,15,12,0.82) 100%);
}
@media (max-width: 899px) {
  .phero__scrim {
    background: linear-gradient(180deg, rgba(16,15,12,0.66) 0%, rgba(16,15,12,0.42) 30%, rgba(16,15,12,0.85) 100%);
  }
}
.phero__inner {
  position: relative; z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  padding-top: calc(var(--header-h) + 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.phero__title { color: var(--on-dark); max-width: 18ch; }
.phero__lead { color: rgba(242,238,229,0.82); margin-top: 1.5rem; max-width: 52ch; }

/* Lightweight hero for text pages */
.thero {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.header--static ~ main .thero { padding-top: clamp(3rem, 7vw, 6rem); }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs li::after { content: "/"; margin-left: 0.5rem; opacity: 0.5; }
.crumbs li:last-child::after { content: none; }
.crumbs--light { color: rgba(242,238,229,0.66); }

/* 09. SECTIONS & EDITORIAL BLOCKS ========================================= */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--sticky > :first-child {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }
  .split--media-right > .split__media { order: 2; }
  .split--wide-media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--top { align-items: start; }
}
.split__body { max-width: 52ch; }

.offset-media {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 760px) {
  .offset-media { grid-template-columns: 1.6fr 1fr; align-items: end; }
  .offset-media > :last-child { margin-bottom: clamp(2rem, 6vw, 5rem); }
}

.fact-list { display: grid; gap: 0; margin-top: 2.25rem; }
.fact-list li {
  display: flex;
  gap: 1.25rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem;
  color: var(--text-2);
}
.fact-list li:first-child { border-top: 1px solid var(--line-soft); }
.fact-list__n {
  font-family: var(--display);
  font-size: 0.875rem;
  color: var(--muted);
  flex: none;
  padding-top: 0.15rem;
}
.section--dark .fact-list li { border-color: var(--line-dark); color: var(--on-dark-2); }

/* Numbered feature list, used for buyer journeys */
.steps { counter-reset: step; display: grid; gap: 0; }
.steps > li {
  counter-increment: step;
  display: grid;
  gap: 0.5rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .steps > li { grid-template-columns: 4rem minmax(0, 1fr); }
  /* The ::before counter takes column 1; every real child belongs in column 2,
     otherwise auto-placement drops paragraphs into the 4rem number column. */
  .steps > li > * { grid-column: 2; }
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.125rem;
  color: var(--brass);
}
.steps h3 { margin-bottom: 0.5rem; }
.steps p { color: var(--text-2); max-width: 62ch; }
.steps p + p { margin-top: 0.875rem; }

/* Cards used for guide indexes — flat, hairline, no shadow */
.index-list { display: grid; gap: 0; }
.index-item {
  display: grid;
  gap: 0.75rem 2.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left 0.5s var(--ease);
}
.index-item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 860px) {
  .index-item { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto; align-items: baseline; }
  .index-item:hover { padding-left: 0.75rem; }
}
.index-item p { color: var(--text-2); font-size: 0.9375rem; }
.index-item .tlink { pointer-events: none; }

/* Pull quote / statement block */
.statement {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 24ch;
  text-wrap: balance;
}

/* Progress meter */
.meter { margin-top: 2rem; }
.meter__track {
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.section--dark .meter__track { background: var(--line-dark); }
.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--brass);
  transition: width 1.6s var(--ease);
}
.meter__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.meter__value { font-family: var(--display); font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; }
.meter__label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.section--dark .meter__label { color: var(--on-dark-2); }

/* 10. VILLA COLLECTION & DETAIL =========================================== */

.villa-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  align-items: center;
}
@media (min-width: 900px) {
  .villa-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .villa-row--flip > .villa-row__media { order: 2; }
}
.villa-row__media { position: relative; }
.villa-row__no {
  position: absolute;
  top: -0.35em;
  left: -0.12em;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}
.villa-row__body { max-width: 46ch; }
.villa-row__title { margin-bottom: 1rem; }
.villa-row .tag-row { margin-top: 1.75rem; }

/* Villa tiles (home page collection preview) */
.villa-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 900px) { .villa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.villa-tile { text-decoration: none; display: block; }
.villa-tile__media { position: relative; overflow: hidden; }
.villa-tile__media .ph { transition: transform 1.2s var(--ease); }
.villa-tile:hover .ph:not(.ph--img) { transform: scale(1.035); }
.villa-tile:hover .ph--img picture > img { transform: scale(1.045); }
.villa-tile__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16,15,12,0) 0%, rgba(16,15,12,0.42) 100%);
  pointer-events: none;
}
.villa-tile__no {
  position: absolute;
  right: 1.15rem;
  bottom: 0.5rem;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--paper);
  opacity: 0.85;
  pointer-events: none;
}
.villa-tile__spec {
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
}
.villa-tile__price {
  font-family: var(--display);
  font-size: 1.25rem;
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}
.villa-tile .tlink { display: inline-flex; margin-top: 1rem; }
.villa-tile:hover .tlink { background-size: 0% 1px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.45rem 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
}
.tag--accent { border-color: var(--brass); color: var(--brass); }
.tag--light { border-color: rgba(242,238,229,0.3); color: rgba(242,238,229,0.85); }

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-top: 1.5rem;
}
.price__label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); width: 100%; }
.price__value { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.1; }
.price__note { font-size: 0.8125rem; color: var(--brass); letter-spacing: 0.04em; }

/* Comparison table */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.compare th, .compare td {
  text-align: left;
  padding: 1.1rem 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.compare thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
}
.compare tbody th {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  white-space: nowrap;
}
.compare td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: rgba(231, 223, 209, 0.28); }
.compare .num { white-space: nowrap; }

/* Sticky purchase rail on villa detail */
.villa-lead { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) {
  .villa-lead { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
}
.rail {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 1000px) { .rail { position: sticky; top: calc(var(--header-h) + 24px); } }
.rail__label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rail__price { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; margin-top: 0.4rem; }
.rail__alt { font-size: 0.875rem; color: var(--text-2); margin-top: 0.6rem; }
.rail__specs { margin: 1.5rem 0; border-top: 1px solid var(--line-soft); }
.rail__specs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.875rem;
}
.rail__specs dt { color: var(--muted); }
.rail__specs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rail__actions { display: grid; gap: 0.6rem; }
.rail__foot { margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.55; color: var(--muted); }

/* Gallery */
.gallery { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .gallery > *:nth-child(1) { grid-column: span 4; }
  .gallery > *:nth-child(2) { grid-column: span 2; }
  .gallery > *:nth-child(3) { grid-column: span 2; }
  .gallery > *:nth-child(4) { grid-column: span 4; }
  .gallery > *:nth-child(5) { grid-column: span 3; }
  .gallery > *:nth-child(6) { grid-column: span 3; }
  /* Ratios chosen so each row lines up while the crops stay varied */
  .gallery > *:nth-child(1) .ph,
  .gallery > *:nth-child(4) .ph { --ratio: 16 / 9; }
  .gallery > *:nth-child(2) .ph,
  .gallery > *:nth-child(3) .ph { --ratio: 8 / 9; }
  .gallery > *:nth-child(5) .ph,
  .gallery > *:nth-child(6) .ph { --ratio: 4 / 3; }
}

/* Floor plan tabs */
.plan-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.plan-tab {
  background: none;
  border: 1px solid var(--line);
  padding: 0.6rem 1.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s;
}
.plan-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan-panel[hidden] { display: none; }

/* 11. SPEC TABLES, NOTES, DATA ============================================ */

.spec { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.spec th, .spec td {
  text-align: left;
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec th {
  font-weight: 400;
  color: var(--muted);
  width: 42%;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.spec td { color: var(--text); }
.spec thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  width: auto;
}
.spec--2col th { width: 50%; }
.section--dark .spec th, .section--dark .spec td { border-color: var(--line-dark); }
.section--dark .spec th { color: var(--on-dark-2); }
.section--dark .spec td { color: var(--on-dark); }

.note {
  border-top: 1px solid var(--brass);
  background: rgba(154, 123, 69, 0.055);
  padding: 1.35rem 1.5rem;
  max-width: 68ch;
}
.note__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.note p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-2); max-width: none; }
.note p + p { margin-top: 0.75rem; }
.section--dark .note { background: rgba(154, 123, 69, 0.12); }
.section--dark .note p { color: var(--on-dark-2); }

/* Key-value stat band */
.stats {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.stats > div {
  /* The inline padding is deliberately modest: these cells sit three across in
     a half-width column, and a date value needs the room more than the frame
     needs the air. */
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 1.4vw, 1.25rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Label row and value row are shared across the rail, so a label that wraps
     to two lines does not drop its own value out of line with its neighbours. */
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
}
@supports not (grid-template-rows: subgrid) {
  .stats > div { display: block; }
}
/* On small screens fix the rail at two columns and let a lone third cell run
   the full width, so the frame never ends on an empty square. */
@media (max-width: 559px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.stats dt { font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
/* No overflow-wrap here. It was added when an unresolved template token sat
   in a stat cell; with real values it broke dates mid-word ("Septembe / r").
   Aggressive wrapping now lives on .tk alone, which is where tokens are. */
.stats dd { margin: 0.65rem 0 0; font-family: var(--display); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.25; }
.stats dd .tk { font-size: 0.72em; }
.stats small { display: block; font-family: var(--sans); font-size: 0.75rem; color: var(--muted); margin-top: 0.45rem; letter-spacing: 0.02em; }
.section--dark .stats { border-color: var(--line-dark); }
.section--dark .stats > div { border-color: var(--line-dark); }
.section--dark .stats dt { color: var(--on-dark-2); }

/* FAQ / accordion */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  background: none;
  border: 0;
  padding: 1.35rem 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.35;
}
.faq__icon { flex: none; width: 14px; height: 14px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--text);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease-soft);
}
.faq__icon::before { inset: 6px 0 auto 0; height: 1px; }
.faq__icon::after  { inset: 0 6px auto 6px; width: 1px; height: 13px; }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__panel { display: grid; grid-template-rows: 1fr; }
.js .faq__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq__panel > div { overflow: hidden; }
.js .faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel p { padding-bottom: 1.5rem; color: var(--text-2); max-width: 66ch; font-size: 0.9375rem; }
.faq__panel p + p { padding-bottom: 1.5rem; margin-top: -0.75rem; }

/* Location / distance list */
.place-list { display: grid; gap: 0; }
.place-list > li {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .place-list > li { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); } }
.place-list h3 { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; }
.place-list p { color: var(--text-2); font-size: 0.9375rem; }
.section--dark .place-list > li { border-color: var(--line-dark); }

/* Contact person block */
.person {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .person { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.person__name { font-family: var(--display); font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 400; }
.person__role { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }
.person__num { font-variant-numeric: tabular-nums; color: var(--text-2); margin-top: 0.5rem; font-size: 0.9375rem; }
.person__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Dark sections: anything that defaults to the light-theme body colour */
.section--dark .place-list p,
.section--dark .index-item p,
.section--dark .steps p,
.section--dark .split__body p,
.cta-band .caption,
.section--dark .caption { color: var(--on-dark-2); }
.section--dark .place-list h3,
.section--dark .index-item .display-s,
.section--dark .steps h3 { color: var(--on-dark); }
.section--dark .figure figcaption { color: var(--on-dark-2); }
.section--dark .tag { border-color: rgba(242,238,229,0.28); color: rgba(242,238,229,0.85); }
.section--dark .index-item,
.section--dark .steps > li { border-color: var(--line-dark); }

/* 12. FORMS =============================================================== */

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.55rem; }
.field > label,
.fieldset > legend {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.field__help { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.input, .textarea, .select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.3s var(--ease-soft);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Native select, used on touch devices and without JavaScript. Chrome and
   Firefox on Windows/Linux honour these on the popup itself. */
.select { color-scheme: light; }
.select option {
  background: var(--paper);
  color: var(--text);
  padding: 0.5rem;
}
.textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* Custom dropdown -------------------------------------------------------
   Progressive enhancement over the native <select>, which stays in the DOM
   and remains the value the form submits. Skipped on coarse pointers, where
   the platform picker is the better control. */
.sel { position: relative; }
.sel__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sel__btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
  font-size: 1rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-soft);
}
.sel__btn:hover { border-bottom-color: var(--muted); }
.sel__btn[aria-expanded="true"] { border-bottom-color: var(--ink); }
.sel__btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 2px; }
.sel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__value[data-placeholder="true"] { color: var(--muted); }
.sel__arrow {
  flex: none;
  width: 9px; height: 9px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.sel__btn[aria-expanded="true"] .sel__arrow {
  transform: translateY(1px) rotate(225deg);
  border-color: var(--ink);
}

.sel__list {
  position: absolute;
  z-index: 40;
  inset: calc(100% - 1px) 0 auto 0;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -18px rgba(16, 15, 12, 0.3);
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sel__list:focus-visible { outline: none; }
.sel__opt {
  padding: 0.7rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
}
.sel__opt[aria-selected="true"] { color: var(--text); font-weight: 600; }
.sel__opt[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  transform: rotate(-45deg) translate(1px, -2px);
}
.sel__opt.is-active { background: var(--ink); color: var(--paper); }
.sel__opt.is-active[aria-selected="true"]::after { border-color: var(--paper); }
.sel__opt--placeholder { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .sel__arrow { transition: none; }
}

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  position: relative;
  display: inline-flex;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.choice span {
  border: 1px solid var(--line);
  padding: 0.65rem 1.1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  transition: background-color 0.3s var(--ease-soft), border-color 0.3s, color 0.3s;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 3px; }

.form__foot { display: grid; gap: 1rem; }
.form__privacy { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; max-width: 56ch; }
.form__privacy a { color: var(--text-2); }

/* Honeypot. Off-screen rather than display:none, so a bot that checks
   computed style still fills it. Never shown, never focusable. */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.hp input, .hp label { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

.mode-switch {
  display: inline-flex;
  justify-self: start;
  border: 1px solid var(--line);
  padding: 4px;
  gap: 4px;
  margin-bottom: 2rem;
}
.mode-switch button {
  background: none;
  border: 0;
  padding: 0.6rem 1.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.3s var(--ease-soft), color 0.3s;
}
.mode-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* The grid must exist at every width, otherwise the fields stack with no gap
   on mobile and each helper line reads as part of the next field's label. */
.form__grid { display: grid; gap: 1.75rem; }
@media (min-width: 720px) {
  /* Each field spans three parent rows (label / control / help) and adopts
     them as a subgrid, so a label that wraps to two lines lifts its partner's
     label too instead of pushing its own control out of line. The parent row
     gap plus the field's own gap add up to the 1.75rem between field groups. */
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
  .form__grid .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.55rem; }
  .form__grid .field--full { grid-column: 1 / -1; }
}
/* Without subgrid support, fall back to the previous behaviour. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .form__grid { gap: 1.75rem 2rem; }
    .form__grid .field { grid-row: auto; grid-template-rows: none; }
  }
}

/* 13. FOOTER & STICKY ACTIONS ============================================= */

.footer {
  background: var(--ink);
  color: var(--on-dark);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom));
}
.footer a { text-decoration: none; }
.footer__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.footer__brand .brand__mark { font-size: 1.75rem; }
.footer__blurb { color: var(--on-dark-2); font-size: 0.9375rem; margin-top: 1.5rem; max-width: 34ch; line-height: 1.7; }
.footer__col h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.footer__col li + li { margin-top: 0.7rem; }
.footer__col a {
  font-size: 0.9375rem;
  color: var(--on-dark);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-soft);
}
.footer__col a:hover { opacity: 1; }
.footer__bottom {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .footer__bottom { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8125rem; color: var(--on-dark-2); }
.footer__disclaimer { font-size: 0.75rem; line-height: 1.7; color: var(--on-dark-2); max-width: 72ch; }

/* Desktop floating enquire */
.floating {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  display: none;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease);
  pointer-events: none;
}
.floating.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 760px) { .floating { display: flex; } }
.floating .btn {
  /* A hairline ring keeps the solid button legible on dark sections too. */
  box-shadow: 0 0 0 1px rgba(242, 238, 229, 0.22), 0 6px 30px rgba(16, 15, 12, 0.28);
}
.floating .btn--ghost { background: var(--paper); border-color: var(--line); }

/* Mobile action bar */
.actionbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.actionbar.is-visible { transform: none; }
@media (min-width: 760px) { .actionbar { display: none; } }
.actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 60px;
  text-decoration: none;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  border-right: 1px solid var(--line-soft);
}
.actionbar a:last-child { border-right: 0; background: var(--ink); color: var(--paper); }
.actionbar svg { width: 17px; height: 17px; }
body.has-actionbar { padding-bottom: 0; }
@media (max-width: 759px) {
  body.has-actionbar .footer { padding-bottom: calc(60px + 2rem + env(safe-area-inset-bottom)); }
}

/* CTA band */
.cta-band { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; opacity: 0.45; }
.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, rgba(16,15,12,0.8) 0%, rgba(16,15,12,0.55) 42%, rgba(16,15,12,0.12) 78%);
}
.cta-band__media .ph { height: 100%; border: 0; }
.cta-band__inner { position: relative; z-index: 2; }
.cta-band .display-l { color: var(--on-dark); max-width: 16ch; }
.cta-band .lead { color: var(--on-dark-2); }

/* 14. MOTION ============================================================== */

/* Entrance animations are an enhancement, never a precondition for reading the
   page. The hidden starting state is scoped to .js, which an inline script in
   <head> sets. Without JavaScript every element renders in its final state. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-media] { overflow: hidden; }
.js [data-reveal-media] > * {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal-media].is-in > * { clip-path: inset(0 0 0 0); transform: none; }

[data-reveal-lines] .line { display: block; overflow: hidden; }
.js [data-reveal-lines] .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal-lines].is-in .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal],
  .js [data-reveal-media] > *,
  .js [data-reveal-lines] .line > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .scroll-cue__line::after { display: none; }
}


/* The price comparison is a primary conversion surface, so on small screens it
   restacks into one block per villa rather than scrolling sideways. */
@media (max-width: 759px) {
  .compare-wrap { overflow-x: visible; }
  .compare { min-width: 0; display: block; }
  .compare thead { display: none; }
  .compare tbody,
  .compare tbody tr,
  .compare tbody th,
  .compare tbody td { display: block; width: auto; }
  .compare tbody tr {
    border-top: 1px solid var(--line);
    padding-block: 1.25rem 1.5rem;
  }
  .compare tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .compare tbody tr:hover td,
  .compare tbody tr:hover th { background: none; }
  .compare tbody th {
    font-size: 1.5rem;
    padding: 0 0 0.75rem;
    border: 0;
  }
  .compare tbody td {
    border: 0;
    padding: 0.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    text-align: right;
  }
  .compare tbody td::before {
    content: attr(data-label);
    flex: none;
    text-align: left;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Guide tables carry sentences, not figures, so on small screens they restack
   with the column label above each value rather than beside it. The row's own
   <th> becomes the block heading. */
@media (max-width: 759px) {
  .prose .compare-wrap { overflow-x: visible; }
  .spec { min-width: 0; display: block; }
  .spec thead { display: none; }
  .spec tbody,
  .spec tbody tr,
  .spec tbody th,
  .spec tbody td { display: block; width: auto; }
  .spec tbody tr {
    border-top: 1px solid var(--line);
    padding-block: 1.25rem 1.5rem;
  }
  .spec tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .spec tbody th {
    font-family: var(--display);
    font-size: 1.25rem;
    line-height: 1.3;
    padding: 0 0 0.75rem;
    border: 0;
    text-align: left;
  }
  .spec tbody td {
    border: 0;
    padding: 0 0 0.9rem;
    text-align: left;
  }
  .spec tbody tr > td:last-child { padding-bottom: 0; }
  .spec tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Touch targets: comfortable hit areas without changing how anything looks. */
@media (max-width: 899px) {
  .brand { min-height: 44px; justify-content: center; }
  .footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer__col li + li { margin-top: 0.15rem; }
  .crumbs { gap: 0.4rem 0.5rem; }
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .crumbs li::after { align-self: center; }
  .person__num a { display: inline-flex; align-items: center; min-height: 40px; }
  .tlink { padding-top: 0.6rem; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 15. UTILITIES & RESPONSIVE ============================================== */

.u-mt-0  { margin-top: 0 !important; }
.u-mt-1  { margin-top: 0.75rem; }
.u-mt-2  { margin-top: 1.5rem; }
.u-mt-3  { margin-top: 2.25rem; }
.u-mt-4  { margin-top: clamp(2.5rem, 5vw, 4rem); }
.u-mb-2  { margin-bottom: 1.5rem; }
.u-mb-3  { margin-bottom: 2.25rem; }
.u-mb-4  { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.u-narrow { max-width: 62ch; }
.u-center { text-align: center; margin-inline: auto; }
.u-tabular { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 759px) {
  .hero { min-height: 92svh; }
  .villa-row__no { font-size: 3.25rem; }
  .rail { position: static; }
}

/* Project at a glance: three plain fact columns, hairline-separated. */
.glance { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 760px) { .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.glance__col { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.glance__head {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.glance__col ul { list-style: none; margin: 0; padding: 0; }
.glance__col li {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  color: var(--text);
}
.glance__col li + li { margin-top: 0.6rem; }

/* Project parties: three profile blocks, hairline-separated, no cards. */
.parties { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 860px) {
  .parties { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
}
.party { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.party__role {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.party__name {
  margin: 0.75rem 0 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
}
.party__body { margin: 0.9rem 0 0; color: var(--text-2); line-height: 1.75; }

/* ==========================================================================
   16. CONSTRUCTION LOG, RENDER/REALITY SWITCH, LIGHTBOX
   ========================================================================== */

/* --- Render and reality ------------------------------------------------- */
.rvr { margin-top: clamp(2rem, 4vw, 3rem); }

.rvr__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sand);
}

.rvr__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.65s var(--ease-soft);
}
.rvr__layer.is-on { opacity: 1; }
.rvr__layer .ph { height: 100%; aspect-ratio: auto; border: 0; }
.rvr__layer img { object-position: center 42%; }

@media (min-width: 1100px) {
  .rvr__stage { aspect-ratio: 16 / 9; }
}

/* Without JS both layers must still be readable: stack them instead. */
html:not(.js) .rvr__stage { aspect-ratio: auto; display: grid; gap: 1px; }
html:not(.js) .rvr__layer { position: static; opacity: 1; }
html:not(.js) .rvr__bar { display: none; }

.rvr__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: 1.1rem;
}

.rvr__switch {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--paper);
}

.rvr__btn {
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 1.35rem;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft);
}
.rvr__btn + .rvr__btn { border-left: 1px solid var(--line); }
.rvr__btn:hover { color: var(--ink); }
.rvr__btn.is-on { background: var(--ink); color: var(--paper); }

.rvr__cap {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 48ch;
}

/* A plan that links to its own full-size file. */
.figure--plan a { display: block; text-decoration: none; }
.js .figure--plan a .ph--img { cursor: zoom-in; transition: border-color 0.35s var(--ease-soft); }
.js .figure--plan a:hover .ph--img { border-color: var(--ink); }
.figure--plan a:focus-visible .ph--img { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- Dated log ---------------------------------------------------------- */
.log { margin-top: clamp(2rem, 4vw, 3.25rem); }

.log__entry {
  display: grid;
  gap: 1.25rem;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-top: 1px solid var(--line);
}
.log__entry:last-child { border-bottom: 1px solid var(--line); }

.log__date {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.2;
}
.log__kind {
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.log__body > .prose { max-width: 62ch; }

@media (min-width: 900px) {
  .log__entry { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 3rem; }
  .log__aside { position: sticky; top: 7rem; align-self: start; }
}

/* --- Photo grid --------------------------------------------------------- */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 720px) {
  .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shots--more { margin-top: clamp(0.5rem, 1.2vw, 1rem); }

.shot { margin: 0; }
.shot .ph { --ratio: 3 / 2; }
.shot__cap {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.shots__toggle { margin-top: 1.5rem; }

/* Clickable when the viewer is available. */
.js .shot .ph--img,
.js .gallery > [data-caption] .ph--img { cursor: zoom-in; }
.js .shot .ph--img img,
.js .gallery > [data-caption] .ph--img img {
  transition: transform 0.9s var(--ease), opacity 0.4s var(--ease-soft);
}
.js .shot .ph--img:hover img,
.js .gallery > [data-caption] .ph--img:hover img { transform: scale(1.03); }

/* --- Lightbox ----------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(14, 13, 11, 0.96);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-soft);
}
.lb.is-open { opacity: 1; pointer-events: auto; }

/* Nothing else competes with the viewer. */
.lb-open .actionbar, .lb-open .floating, .lb-open .header { opacity: 0; pointer-events: none; }

.lb__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 7vw, 5rem) clamp(3.5rem, 6vw, 6rem) 0.5rem;
  overflow: hidden;
}
.lb__stage picture { display: contents; }
.lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s var(--ease-soft);
}
.lb__img.is-ready { opacity: 1; }

.lb__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2rem);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}
.lb__cap { margin: 0; max-width: 60ch; }
.lb__count { margin: 0; letter-spacing: 0.14em; font-size: 0.6875rem; text-transform: uppercase; white-space: nowrap; }

.lb__btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.lb__btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.lb__close { position: absolute; top: clamp(0.85rem, 2vw, 1.5rem); right: clamp(0.85rem, 2vw, 1.5rem); }
.lb__prev, .lb__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lb__prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lb__next { right: clamp(0.5rem, 2vw, 1.5rem); }

@media (max-width: 719px) {
  .lb__stage { padding: 3.5rem 1rem 0.5rem; }
  .lb__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding-bottom: 4.75rem;
  }
  .lb__prev, .lb__next { top: auto; bottom: 1.1rem; transform: none; }
  .lb__prev { left: 1rem; }
  .lb__next { right: 1rem; }
}

/* --- Restrained hero drift ---------------------------------------------
   The media is oversized so a slow downward drift never exposes an edge. */
.js [data-drift] {
  will-change: transform;
  top: -9%;
  height: 118%;
}

@media (prefers-reduced-motion: reduce) {
  .rvr__layer { transition: none; }
  .lb, .lb__img { transition: none; }
  .js .shot .ph--img img,
  .js .gallery > [data-caption] .ph--img img { transition: none; }
  .js .shot .ph--img:hover img,
  .js .gallery > [data-caption] .ph--img:hover img { transform: none; }
}

@media print {
  .header, .footer, .actionbar, .floating, .scroll-cue { display: none !important; }
  .ph { border: 1px dashed #999; }
  body { background: #fff; }
}