/* ============================================================
   ARUNA · The Residence in Uluwatu — page stylesheet (A4)
   1. Tokens (verbatim :root from webCJP css/main.css 25-145)
      + ARUNA additions
   2. Base, motion primitives, shared vocabulary
   3. Chrome: skip link, preloader, progress bar, header
   4. Sections: 01 hero · facts · 02 walk · partners ·
      03 location · 04 quality · 05 availability · 06 contact
   5. Footer · responsive · reduced motion
   Motion belongs to js/scenes.js (GSAP). Never set `transform`
   here on .hero-aerial, .leaf, .hero-copy children, .hero-hint,
   .hero-caption, .walk-item, .walk-caption, .avail-board or
   .avail-rot: centring uses the individual `translate` property,
   which GSAP leaves alone.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* ===========================================================
     COLOR — Brand
     =========================================================== */
  --cjp-gold:          #A78143; /* primary accent — sampled from logo */
  --cjp-gold-light:    #C2A165; /* hover / highlights on dark */
  --cjp-gold-deep:     #8A6A35; /* pressed / on light */
  --cjp-gold-soft:     #D9C49A; /* tints, dividers, fills */

  --cjp-charcoal:      #211E1A; /* primary dark — warm near-black */
  --cjp-espresso:      #38322A; /* warm editorial dark — IG post backgrounds */
  --cjp-ink:           #2A2722; /* body text on light */
  --cjp-black-true:    #0F0E0C; /* full-bleed dark backgrounds */

  /* ===========================================================
     COLOR — Warm neutrals (the workhorses)
     =========================================================== */
  --cjp-white:         #FFFFFF;
  --cjp-offwhite:      #FAF7F2; /* default page background */
  --cjp-sand:          #F0E9DD; /* section fills, cards */
  --cjp-beige:         #E5D8C4; /* panels, image mats */
  --cjp-taupe:         #BCAB90; /* borders, muted UI */
  --cjp-stone:         #8C8275; /* secondary text on light */
  --cjp-greige:        #6B6358; /* tertiary text / captions */

  /* ===========================================================
     COLOR — Secondary (use sparingly, ≤1 per layout)
     =========================================================== */
  --cjp-green:         #2F4A40; /* deep Mediterranean green */
  --cjp-green-soft:    #5C7367;
  --cjp-navy:          #1F2D3D; /* deep navy alternative */

  /* ===========================================================
     COLOR — Semantic surfaces / text / lines
     =========================================================== */
  --bg:                var(--cjp-offwhite);
  --bg-elevated:       var(--cjp-white);
  --bg-sunken:         var(--cjp-sand);
  --bg-inverse:        var(--cjp-charcoal);

  --fg:                var(--cjp-ink);     /* primary text */
  --fg-muted:          var(--cjp-stone);   /* secondary text */
  --fg-subtle:         var(--cjp-greige);  /* captions, meta */
  --fg-inverse:        var(--cjp-offwhite);/* text on dark */
  --fg-accent:         var(--cjp-gold-deep);

  --line:              #E2D9CC;            /* hairline dividers */
  --line-strong:       var(--cjp-taupe);
  --line-inverse:      rgba(250,247,242,.16);

  --accent:            var(--cjp-gold);
  --accent-hover:      var(--cjp-gold-deep);
  --focus-ring:        rgba(167,129,67,.45);

  /* ===========================================================
     TYPOGRAPHY — Families
     =========================================================== */
  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif; /* editorial headlines */
  --font-sans:    'Manrope', 'Century Gothic', 'Futura', system-ui, sans-serif; /* UI, labels, body */
  --font-body:    var(--font-sans);

  /* Tracking — the brand leans on generous letterspacing for labels */
  --track-eyebrow: 0.34em; /* "REAL ESTATE" lockup spacing */
  --track-label:   0.16em;
  --track-tight:   -0.01em;

  /* ===========================================================
     TYPE SCALE  (1.250 major-third, editorial)
     =========================================================== */
  --text-xs:   0.75rem;  /* 12 */
  --text-sm:   0.875rem; /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md:   1.125rem; /* 18 */
  --text-lg:   1.375rem; /* 22 */
  --text-xl:   1.75rem;  /* 28 */
  --text-2xl:  2.25rem;  /* 36 */
  --text-3xl:  3rem;     /* 48 */
  --text-4xl:  4rem;     /* 64 */
  --text-5xl:  5.5rem;   /* 88 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  /* ===========================================================
     SPACING  (8px base, generous editorial rhythm)
     =========================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ===========================================================
     RADII  (slightly rounded, never playful)
     =========================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ===========================================================
     SHADOWS  (soft, warm-tinted, low-contrast)
     =========================================================== */
  --shadow-xs: 0 1px 2px rgba(33,30,26,.05);
  --shadow-sm: 0 2px 8px rgba(33,30,26,.06);
  --shadow-md: 0 8px 24px rgba(33,30,26,.08);
  --shadow-lg: 0 18px 48px rgba(33,30,26,.12);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur: 280ms; /* @kind other */
}

/* ARUNA additions: dossier panels + pale gold, layout rhythm (webCJP main.css 388-392) */
:root {
  --cjp-gold-pale:     #E7C98A;
  --cjp-panel:         #F5F0E7;
  --cjp-panel-2:       #EDE5D8;

  --maxw: 1400px;
  --pad: clamp(24px, 4.5vw, 64px);
  --sec: clamp(96px, 11vw, 168px);
  --hd-h: 72px;
  --track-aruna: .42em;          /* the ARUNA wordmark */
  --track-eyebrow-aruna: .28em;  /* eyebrows on this page */
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--cjp-offwhite);
  color: var(--cjp-greige);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
img, picture, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
::selection { background: var(--cjp-gold-soft); color: var(--cjp-charcoal); }
:focus-visible { outline: 2px solid var(--cjp-gold); outline-offset: 3px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: var(--hd-h); }

/* ---- motion primitives (hidden ONLY when main.js grants motion: no JS = all visible) ---- */
body.has-motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
body.has-motion .rv.in { opacity: 1; transform: none; }
body.has-motion :is(.facts-grid, .partners-row, .places) > .rv:nth-child(2) { transition-delay: 70ms; }
body.has-motion :is(.facts-grid, .partners-row, .places) > .rv:nth-child(3) { transition-delay: 140ms; }
body.has-motion :is(.facts-grid, .partners-row, .places) > .rv:nth-child(4) { transition-delay: 210ms; }
body.has-motion :is(.facts-grid, .partners-row, .places) > .rv:nth-child(5) { transition-delay: 280ms; }
body.has-motion :is(.facts-grid, .partners-row, .places) > .rv:nth-child(6) { transition-delay: 350ms; }
body.has-motion :is(.facts-grid, .partners-row, .places) > .rv:nth-child(7) { transition-delay: 420ms; }
body.has-motion :is(.facts-grid, .partners-row, .places) > .rv:nth-child(8) { transition-delay: 490ms; }
[data-prlx] { will-change: transform; }

/* ---- shared section vocabulary ---- */
.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--track-eyebrow-aruna);
  text-transform: uppercase;
  color: var(--cjp-gold-deep);
}
.eyebrow.on-dark { color: var(--cjp-gold-light); }
.sec-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--cjp-charcoal);
  text-wrap: balance;
}
.sec-title::after { /* the dossier's short gold rule under titles */
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: clamp(20px, 2.2vw, 28px);
  background: var(--cjp-gold);
}
.sec-title.on-dark { color: #fff; }
.sec-lede {
  max-width: 58ch;
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--cjp-greige);
}

/* ---- buttons (webCJP .cjp-btn, contrast-safe gold: charcoal on #A78143 = 4.6:1) ---- */
.cjp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 36px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cjp-btn-gold { background: var(--cjp-gold); color: var(--cjp-charcoal); }
.cjp-btn-gold:hover { background: var(--cjp-gold-pale); }
.cjp-btn-gold:focus-visible { outline-color: var(--cjp-gold-pale); outline-offset: 4px; }

/* ============================================================
   3. CHROME
   ============================================================ */
.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 300;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--cjp-charcoal);
  color: var(--cjp-offwhite);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  translate: 0 -220%;
  transition: translate var(--dur) var(--ease);
}
.skip-link:focus { translate: 0 0; }

/* ---- preloader: ivory veil + wordmark (main.js removes body.is-loading, then the node) ---- */
.pre {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cjp-offwhite);
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
  animation: preSafety .6s var(--ease) 6s forwards; /* never strands the page if a script fails */
}
.pre-mark {
  position: relative;
  padding-bottom: 26px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1;
  letter-spacing: var(--track-aruna);
  text-indent: var(--track-aruna); /* balances the trailing tracking so the word sits centred */
  text-transform: uppercase;
  color: var(--cjp-charcoal);
  animation: preIn 1.2s var(--ease) both;
}
.pre-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72px;
  height: 1px;
  margin-left: -36px;
  background: var(--cjp-gold);
  transform-origin: 0 50%;
  animation: preLine 1.3s var(--ease) .25s both;
}
.pre.pre-done,
body:not(.is-loading) .pre { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes preIn { from { opacity: 0; letter-spacing: .62em; text-indent: .62em; } to { opacity: 1; letter-spacing: var(--track-aruna); text-indent: var(--track-aruna); } }
@keyframes preLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes preSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---- scroll progress hairline (scenes.js scales X) ---- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  height: 2px;
  background: var(--cjp-gold);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---- header: transparent over the hero, ivory bar once .solid ---- */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hd.solid {
  background: rgba(250, 247, 242, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.hd-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: padding var(--dur) var(--ease);
}
.hd.solid .hd-inner { padding-top: 10px; padding-bottom: 10px; }
.brand {
  margin-right: calc(var(--track-aruna) * -1);
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: var(--track-aruna);
  text-transform: uppercase;
  color: var(--cjp-offwhite);
  text-shadow: 0 1px 14px rgba(15, 14, 12, .4);
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}
.hd.solid .brand { color: var(--cjp-charcoal); text-shadow: none; }
.hd-right { display: flex; align-items: center; gap: 14px; }
.hd-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(250, 247, 242, .45);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease);
}
.hd-lang-btn {
  min-width: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  color: rgba(250, 247, 242, .88);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hd-lang-btn:hover { color: #fff; }
.hd-lang-btn.on { background: var(--cjp-gold-deep); color: #fff; } /* white on #8A6A35 = 5:1 */
.hd-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 20px;
  border: 1px solid rgba(250, 247, 242, .62);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cjp-offwhite);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hd-cta:hover { background: var(--cjp-offwhite); border-color: var(--cjp-offwhite); color: var(--cjp-charcoal); }
.hd.solid .hd-lang { border-color: var(--line-strong); }
.hd.solid .hd-lang-btn { color: var(--cjp-greige); }
.hd.solid .hd-lang-btn:hover { color: var(--cjp-charcoal); }
.hd.solid .hd-lang-btn.on { color: #fff; }
.hd.solid .hd-cta { border-color: var(--cjp-gold); color: var(--cjp-gold-deep); }
.hd.solid .hd-cta:hover { background: var(--cjp-gold-deep); border-color: var(--cjp-gold-deep); color: #fff; }

/* ============================================================
   4. SECTIONS
   ============================================================ */

/* ---- 01 · HERO --------------------------------------------- */
.hero { position: relative; background: var(--cjp-charcoal); }
.hero-stage { /* the pinned element */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cjp-charcoal);
}
.hero-stage::after { /* top scrim so the transparent header reads */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  height: 180px;
  background: linear-gradient(to bottom, rgba(15, 14, 12, .42), rgba(15, 14, 12, 0));
  pointer-events: none;
}
.hero-aerial {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}
.hero-fog { /* ivory morning mist between the aerial and the leaves */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(140% 42% at 50% 118%, rgba(250, 247, 242, .34) 0%, rgba(250, 247, 242, .1) 52%, rgba(250, 247, 242, 0) 76%),
    radial-gradient(60% 50% at 50% 45%, rgba(250, 247, 242, .12) 0%, rgba(250, 247, 242, 0) 70%);
}

/* foliage cutouts: anchored to their edge, natural aspect ratio, closed around the title */
.leaf {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform;
}
.leaf img { display: block; max-width: none; }
.leaf[data-side="left"] { top: 0; left: 0; height: 100%; width: auto; }
.leaf[data-side="right"] { /* flex-end so an over-wide img overflows to the LEFT and the foliage stays on the right edge */
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  display: flex;
  justify-content: flex-end;
}
.leaf[data-side="right"] img { flex: none; }
.leaf[data-side="left"] img,
.leaf[data-side="right"] img { height: 100%; width: auto; }
.leaf[data-side="top"] { top: 0; left: 0; width: 100%; height: auto; }
.leaf[data-side="top"] img { width: 100%; height: auto; }
.leaf-l1, .leaf-l2 { z-index: 2; }
.leaf-l3, .leaf-l4 { z-index: 3; }
.leaf-l5 { z-index: 4; }

.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  text-align: center;
  pointer-events: none;
}
.hero-eyebrow {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-size: 12.5px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--cjp-offwhite);
  text-shadow: 0 0 2px rgba(15, 14, 12, .55), 0 0 18px rgba(15, 14, 12, .8), 0 0 42px rgba(15, 14, 12, .5);
}
.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 180px);
  line-height: .92;
  letter-spacing: var(--track-aruna);
  text-indent: var(--track-aruna); /* keep equal to letter-spacing when animating it */
  text-transform: uppercase;
  color: var(--cjp-offwhite);
  text-shadow: 0 0 90px rgba(15, 14, 12, .5), 0 0 26px rgba(15, 14, 12, .32), 0 2px 6px rgba(15, 14, 12, .3);
}
.hero-sub {
  margin: clamp(20px, 2.6vw, 34px) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.3;
  color: var(--cjp-offwhite);
  text-shadow: 0 0 2px rgba(15, 14, 12, .5), 0 0 22px rgba(15, 14, 12, .8), 0 0 50px rgba(15, 14, 12, .5);
}
.hero-sub::before { /* short gold rule, as on the dossier cover */
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto clamp(18px, 2.2vw, 28px);
  background: var(--cjp-gold-light);
}
.hero-hint { /* glass pill: legible over foliage and over the bright aerial alike */
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4.5vh, 44px);
  translate: -50% 0;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 21px;
  border: 1px solid rgba(250, 247, 242, .42);
  border-radius: var(--radius-pill);
  background: rgba(15, 14, 12, .32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cjp-offwhite);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-hint:hover { background: rgba(15, 14, 12, .48); border-color: rgba(250, 247, 242, .72); }
.hero-hint::after { /* the falling hairline */
  content: "";
  flex: none;
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, var(--cjp-gold-light), rgba(194, 161, 101, 0));
  transform-origin: 50% 0;
}
body.has-motion .hero-hint::after { animation: hintDrop 2.4s var(--ease) infinite; }
@keyframes hintDrop {
  0% { transform: scaleY(0); opacity: 1; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.hero-caption { /* end-of-scene caption; scenes.js fades it in */
  position: absolute;
  left: var(--pad);
  bottom: clamp(20px, 4.5vh, 44px);
  z-index: 7;
  max-width: calc(100% - 2 * var(--pad));
  padding: 12px 18px;
  border: 1px solid rgba(250, 247, 242, .45);
  background: rgba(15, 14, 12, .32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cjp-offwhite);
  opacity: 0;
  pointer-events: none;
}

/* ---- KEY FACTS --------------------------------------------- */
.facts {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 3.4vw, 48px) var(--pad);
  background: var(--cjp-panel);
}
.facts-grid {
  display: flex;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.fact {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 28px);
  border-left: 1px solid var(--line);
}
.fact:first-child { padding-left: 0; border-left: 0; }
.fact:last-child { padding-right: 0; }
.fact-val {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 2.9vw, 48px);
  line-height: 1;
  white-space: nowrap;
  color: var(--cjp-charcoal);
}
.fact-key {
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cjp-greige);
}
.fact-price .fact-val { color: var(--cjp-gold-deep); }

/* ---- 02 · WALK ---------------------------------------------- */
.walk { position: relative; background: var(--cjp-offwhite); }
.walk-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sec) var(--pad) clamp(40px, 5vw, 72px);
}
.walk-stage { /* the pinned element */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cjp-charcoal);
}
.walk-stills { position: absolute; inset: 0; }
.walk-item {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.walk-item[data-stage="1"] { opacity: 1; }
.walk-item picture { display: block; width: 100%; height: 100%; }
.walk-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  background: var(--cjp-espresso);
}
.walk-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0;
  padding: clamp(96px, 16vh, 180px) var(--pad) clamp(32px, 6vh, 64px);
  background: linear-gradient(to top, rgba(15, 14, 12, .66) 0%, rgba(15, 14, 12, .3) 46%, rgba(15, 14, 12, 0) 100%);
  pointer-events: none;
}
.walk-caption-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--cjp-gold-light);
}
.walk-caption-num::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.walk-caption-txt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.1vw, 44px);
  line-height: 1.1;
  color: var(--cjp-offwhite);
  text-shadow: 0 1px 18px rgba(15, 14, 12, .4);
}
.walk-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.walk-canvas[hidden] { display: none; }
.walk-dusk {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--cjp-charcoal);
  opacity: 0;
  pointer-events: none;
}
.walk-rail {
  position: absolute;
  top: 50%;
  right: clamp(16px, 2.4vw, 36px);
  translate: 0 -50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}
.walk-rail::before { /* thin spine behind the dots */
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 1px;
  translate: -50% 0;
  background: rgba(250, 247, 242, .3);
  z-index: -1;
}
.walk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250, 247, 242, .6);
  box-shadow: 0 0 0 3px rgba(15, 14, 12, .16);
  transition: background-color .4s var(--ease), scale .4s var(--ease);
}
.walk-dot.is-on { background: var(--cjp-gold); scale: 1.45; }
.walk-skip { /* bottom-centre: the desktop cookie box sits bottom-right, the captions bottom-left */
  position: absolute;
  left: 50%;
  bottom: clamp(32px, 6vh, 64px);
  translate: -50% 0;
  z-index: 5;
  white-space: nowrap;
  padding: 13px 0 6px;
  border-bottom: 1px solid rgba(250, 247, 242, .45);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, .9);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.walk-skip:hover { color: #fff; border-color: var(--cjp-gold-light); }

/* ---- PARTNERS ----------------------------------------------- */
/* Real logos (assets/img/partners/*.png, built by _src/logos/build.py) at their natural colours:
   no grayscale, the Terreta mark is a black box with white type. Each item sets an optical height
   (--logo-h): the very wide Double M runs shorter, the heavy Terreta box a touch smaller, the
   thin-stroke S2S taller. --logo-k scales the whole set per breakpoint. .partner-mark is a
   fixed-height band, so the role captions line up whatever the logo height. */
.partners {
  padding: clamp(80px, 9vw, 136px) var(--pad);
  text-align: center;
  background: var(--cjp-offwhite);
}
.partners .eyebrow { margin-bottom: clamp(36px, 4.4vw, 60px); }
.partners-row {
  --logo-k: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.partner {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 4px clamp(16px, 2.2vw, 40px);
  border-left: 1px solid var(--line);
}
.partner:first-child { border-left: 0; }
.partner[data-partner="terreta"]  { --logo-h: 48px; }
.partner[data-partner="double-m"] { --logo-h: 36px; }
.partner[data-partner="huma"]     { --logo-h: 52px; }
.partner[data-partner="s2s"]      { --logo-h: 56px; }
.partner[data-partner="cjp"]      { --logo-h: 48px; }
.partner-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.partner-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: calc(58px * var(--logo-k));
}
.partner-logo {
  display: block;
  width: auto;
  height: calc(var(--logo-h, 48px) * var(--logo-k));
  max-width: 100%;
  object-fit: contain;
  opacity: .88;
  transition: opacity var(--dur) var(--ease), transform .6s var(--ease);
}
.partner-role {
  max-width: 24ch;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cjp-greige);
  transition: color var(--dur) var(--ease);
}
a.partner-link:hover .partner-logo,
a.partner-link:focus-visible .partner-logo { opacity: 1; }
a.partner-link:hover .partner-role,
a.partner-link:focus-visible .partner-role { color: var(--cjp-gold-deep); }
a.partner-link:focus-visible { outline-offset: 8px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.partner-link:hover .partner-logo { transform: translateY(-2px); }
}
.partner-note { /* "opens in a new tab": part of the link name for screen readers, never shown */
  position: absolute;
  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;
}
@media (max-width: 1180px) { /* 2 + 3 (one row needs ~1160px): the two Bali partners on top, Huma · S2S · CJP below */
  .partners-row { --logo-k: .9; max-width: 760px; row-gap: clamp(30px, 5vw, 44px); }
  .partner { flex: 0 0 33.333%; padding-inline: clamp(6px, 1.6vw, 16px); }
  .partner:nth-child(-n+2) { flex-basis: 50%; }
  .partner:nth-child(3) { border-left: 0; }
}
@media (max-width: 760px) {
  .partners-row { --logo-k: .7; }
  .partner-link { gap: 12px; }
  .partner-role { font-size: 9px; letter-spacing: .1em; }
}
@media (max-width: 400px) { /* 360-400px phones: "COMERCIALIZACIÓN" must fit a third of the row */
  .partner { padding-inline: 4px; }
  .partner-role { font-size: 8.5px; letter-spacing: .05em; }
}
@media (max-width: 359px) { /* 320px phones: 2 + 2 + 1 */
  .partner, .partner:nth-child(-n+2) { flex-basis: 50%; }
  .partner:nth-child(3) { border-left: 0; }
  .partner:nth-child(4) { border-left: 1px solid var(--line); }
  .partner:nth-child(5) { border-left: 0; }
}

/* ---- 03 · LOCATION ------------------------------------------ */
.location {
  padding: var(--sec) var(--pad);
  background: var(--cjp-offwhite);
  border-top: 1px solid var(--line);
}
.location-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(48px, 6vw, 112px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: clamp(28px, 3vw, 48px);
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.place {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding: 15px 0 13px;
  border-bottom: 1px solid var(--line);
}
.place::before { /* hairline leader between name and distance, as in the dossier */
  content: "";
  order: 2;
  flex: 1 1 12px;
  min-width: 12px;
  height: 1px;
  translate: 0 -.3em;
  background: var(--cjp-gold-soft);
}
.place-num {
  order: 0;
  flex: none;
  min-width: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--cjp-gold-deep);
}
.place-name { order: 1; min-width: 0; font-size: 15px; line-height: 1.4; color: var(--cjp-ink); }
.place-dist {
  order: 3;
  flex: none;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--cjp-gold-deep);
}
.location-note {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  color: var(--cjp-greige);
}
.location-map { /* white card with a hairline, as the dossier's map card (p. 48) */
  margin: 0;
  padding: clamp(32px, 5.6vw, 84px) clamp(14px, 2.6vw, 40px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cjp-white);
}
/* Bali map: flat sand island, 1px coast, black place pins, gold project marker.
   Sizes are viewBox units (610 wide); strokes stay 1px at any width. */
.location-map .loc-map { width: 100%; height: auto; aspect-ratio: 610 / 448; overflow: visible; }
.loc-map .loc-land { fill: var(--cjp-panel-2); stroke: var(--cjp-taupe); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.loc-map text { font-family: var(--font-sans); font-size: 25px; font-weight: 400; fill: var(--cjp-greige); }
.loc-map .loc-ocean { font-family: var(--font-display); font-style: italic; font-size: 31px; fill: var(--cjp-stone); }
.loc-map .loc-sub { font-size: 22px; fill: var(--cjp-stone); }
.loc-map .loc-sep { fill: var(--cjp-gold); }
.loc-map .loc-end { text-anchor: end; }
.loc-map .loc-proj { font-size: 22px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; fill: var(--cjp-gold-deep); }
.loc-map .loc-dot { fill: var(--cjp-stone); }
.loc-map .loc-pin { fill: var(--cjp-charcoal); stroke: var(--cjp-white); stroke-width: 2.2; }
.loc-map .loc-lead { stroke: var(--cjp-gold); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.loc-map .loc-proj-ring { fill: rgba(167, 129, 67, .07); stroke: var(--cjp-gold); stroke-opacity: .55; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.loc-map .loc-proj-dot { fill: var(--cjp-gold); stroke: var(--cjp-white); stroke-width: 2.4; }

/* ---- 04 · QUALITY ------------------------------------------- */
.quality { padding: var(--sec) var(--pad); background: var(--cjp-offwhite); border-top: 1px solid var(--line); }
.quality-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(64px, 7vw, 120px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.quality-head { grid-column: 1 / span 8; grid-row: 1; }
.quality-media-a { grid-column: 1 / span 7; grid-row: 2; }
.qlist-amenities { grid-column: 9 / span 4; grid-row: 2; }
.quality-media-b { grid-column: 6 / span 7; grid-row: 3; }
.qlist-materials { grid-column: 1 / span 4; grid-row: 3; }
.quality-media { min-width: 0; padding: 11px; } /* room for the 10px frame offset */
.photo { /* thin tan-gold frame, as around the dossier photos */
  position: relative;
  margin: 0;
  outline: 1px solid var(--cjp-gold-soft);
  outline-offset: 10px;
  background: var(--cjp-sand);
}
.photo picture, .photo img { display: block; width: 100%; }
.photo img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.photo-cap {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--cjp-greige);
}
.qlist-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.15;
  color: var(--cjp-charcoal);
}
.labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  counter-reset: lbl;
}
.labels li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0 13px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
  color: var(--cjp-ink);
}
.labels li::before {
  counter-increment: lbl;
  content: counter(lbl, decimal-leading-zero);
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--cjp-gold-deep);
}

/* ---- 05 · AVAILABILITY (layout only; map, tooltip, pins, list rows: css/availability.css) ---- */
.avail {
  position: relative;
  padding: var(--sec) 0;
  background: var(--cjp-offwhite);
  border-top: 1px solid var(--line);
}
.avail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow ."
    "title   ."
    "lede    legend"
    "lede    counters";
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.avail-head .eyebrow { grid-area: eyebrow; }
.avail-head .sec-title { grid-area: title; }
.avail-lede {
  grid-area: lede;
  max-width: 54ch;
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--cjp-greige);
}
/* legend swatches and counter typography: css/availability.css (A5); placement only here */
.avail-legend {
  grid-area: legend;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 26px;
}
.avail-counters {
  grid-area: counters;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px 32px;
  margin-top: 22px;
}
.avail-counters span:empty { display: none; }
.avail-stage { /* perspective wrapper for the 3D entrance */
  max-width: calc(1240px + 2 * var(--pad));
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding: 11px var(--pad);
  perspective: 1400px;
}
.avail-board { /* GSAP owns its transform: none set here */
  position: relative;
  aspect-ratio: 1448 / 914;
  transform-origin: 50% 100%;
  outline: 1px solid var(--cjp-gold-soft);
  outline-offset: 10px;
  background: var(--cjp-sand);
  box-shadow: 0 34px 60px -34px rgba(33, 30, 26, .45);
}
.avail-rot { position: relative; width: 100%; height: 100%; } /* A5 turns it 90° on portrait phones */
.avail-aerial {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none; /* default object-fit:fill keeps pixels aligned with the 1000x631 viewBox */
}
.avail-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.avail-hint {
  max-width: var(--maxw);
  margin: 30px auto 0;
  padding: 0 var(--pad);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--cjp-greige);
}

/* ---- 06 · CONTACT ------------------------------------------- */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 15vw, 220px) var(--pad);
  background: var(--cjp-charcoal);
  color: var(--cjp-offwhite);
}
.contact-bg { position: absolute; inset: 0; z-index: -2; }
.contact-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.contact-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(15, 14, 12, .58), rgba(15, 14, 12, .22) 72%),
    linear-gradient(to bottom, rgba(15, 14, 12, .55), rgba(15, 14, 12, .25) 45%, rgba(15, 14, 12, .7));
}
.contact-inner { /* hairline frame, as on the dossier's closing page */
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) clamp(24px, 5vw, 76px);
  border: 1px solid rgba(250, 247, 242, .28);
  text-align: center;
}
.contact .sec-title { color: #fff; }
.contact .sec-title::after { margin-left: auto; margin-right: auto; background: var(--cjp-gold-light); }
.contact-lede {
  max-width: 48ch;
  margin: clamp(22px, 2.4vw, 30px) auto clamp(30px, 3.4vw, 42px);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.75;
  color: rgba(250, 247, 242, .86);
}
.contact-alt {
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: rgba(250, 247, 242, .74);
}
.contact-mail { color: var(--cjp-offwhite); white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(250, 247, 242, .45); }
.contact-mail:hover { text-decoration-color: var(--cjp-gold-light); }
.contact-copy { /* fallback for browsers without a mail app: copies the address */
  margin-left: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(250, 247, 242, .35);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cjp-offwhite);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contact-copy:hover, .contact-copy.is-done { border-color: var(--cjp-gold-light); color: var(--cjp-gold-light); }

/* ============================================================
   5. FOOTER
   ============================================================ */
.ft {
  padding: clamp(44px, 5vw, 68px) var(--pad) clamp(28px, 3vw, 40px);
  background: var(--cjp-black-true);
  color: rgba(250, 247, 242, .64);
}
.ft-base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand   brand"
    "company company"
    "legal   note";
  gap: 14px 40px;
  max-width: var(--maxw);
  margin: 0 auto;
  font-size: 11.5px;
  line-height: 1.75;
  letter-spacing: .04em;
}
.ft-brand {
  grid-area: brand;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: var(--track-aruna);
  text-transform: uppercase;
  color: var(--cjp-offwhite);
}
.ft-brand span { font-style: italic; letter-spacing: .02em; text-transform: none; color: rgba(250, 247, 242, .64); }
.ft-company { grid-area: company; padding-bottom: 18px; border-bottom: 1px solid var(--line-inverse); }
.ft-rights { display: block; margin-top: 2px; }
.ft-legal { grid-area: legal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ft-legal a { color: rgba(250, 247, 242, .82); transition: color var(--dur) var(--ease); }
.ft-legal a:hover, .ft-legal a:focus-visible { color: var(--cjp-gold-light); }
.ft-note { grid-area: note; text-align: right; }
.ft-handle { margin-left: 10px; color: var(--cjp-gold-light); white-space: nowrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (pointer: coarse) {
  .hero-hint { min-height: 44px; }
  .hd-lang-btn { min-width: 44px; min-height: 38px; }
  .hd-cta { min-height: 44px; }
  .walk-skip { padding-top: 16px; padding-bottom: 10px; }
}

@media (max-width: 1180px) {
  .location-inner { grid-template-columns: minmax(0, 1fr); }
  .location-map { width: 100%; max-width: 560px; }
}

@media (max-width: 1080px) {
  .facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact { padding: 22px 0 22px clamp(14px, 2.4vw, 28px); }
  .fact:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .fact-val { font-size: clamp(26px, 4vw, 40px); }
}

@media (max-width: 899px) {
  :root { --hd-h: 64px; }
  .hd-inner { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .brand { font-size: 19px; }
  .hd-right { gap: 10px; }
  .hero-caption { font-size: 10px; letter-spacing: .2em; }
  .walk-caption { gap: 14px; }
  .walk-caption-txt { font-size: clamp(28px, 5.4vw, 36px); }
  .walk-skip { top: calc(var(--hd-h) + 14px); bottom: auto; left: auto; right: var(--pad); translate: none; } /* the phone cookie bar spans the bottom */
  .quality-inner { grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 9vw, 72px); }
  .quality-head, .quality-media-a, .qlist-amenities, .quality-media-b, .qlist-materials { grid-column: 1 / -1; grid-row: auto; }
  .quality-media { padding: 11px 11px 0; }
  .photo img { aspect-ratio: auto 1600 / 901; object-fit: contain; } /* complete render at its own ratio (both are 1600x901; the ratio keeps the box before the lazy load) */
  .avail-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "lede" "legend" "counters";
  }
  .avail-legend, .avail-counters { justify-content: flex-start; }
  .avail-legend { margin-top: 26px; }
  .ft-base { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "company" "legal" "note"; }
  .ft-note { text-align: left; }
  .ft-handle { margin-left: 0; display: block; }
}

/* ============================================================
   PHONES & PORTRAIT TABLETS · the walk as an image strip
   Under 900px in portrait the walk no longer fills the screen: js/scenes.js
   pins the whole section under the header, so the reader sees the eyebrow
   "02" and the title, then one 4:3 frame for all seven renders (cover-fit:
   the wider ones are enlarged to fill it), then the caption, the dots and
   the skip link, all on the ivory page and all within one phone screen.
   The hero keeps its full-bleed crop. Scoped to motion: the reduced-motion
   gallery keeps its stacked layout below.
   ============================================================ */
@media (max-width: 899px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  .walk-head { padding: 24px var(--pad) 18px; }
  .walk-head .sec-title { font-size: clamp(30px, 8.2vw, 40px); }
  .walk-stage {
    height: auto;
    min-height: 0;
    padding: 0 0 calc(116px + 7.5vw); /* caption + dots + skip link under the frame, pushed 10 % of the frame height (7.5vw) down */
    overflow: visible;
    background: transparent;
  }
  .walk-stills { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; background: var(--cjp-charcoal); } /* no overflow:hidden: the captions hang below it */
  .walk-item picture { position: absolute; inset: 0; z-index: 1; overflow: hidden; } /* clips the zoomed img */
  .walk-item picture img { will-change: transform; }
  .walk-item img { height: 100%; object-fit: cover; }
  .walk-caption { /* under the frame, 10 % of its height (7.5vw) lower */
    top: calc(100% + 18px + 7.5vw);
    bottom: auto;
    padding: 0 calc(var(--pad) + 28px) 0 var(--pad);
    background: none;
  }
  .walk-caption-txt { color: var(--cjp-espresso); text-shadow: none; }
  .walk-canvas, .walk-dusk { bottom: auto; height: auto; aspect-ratio: 4 / 3; } /* the frame only */
  .walk-rail { /* horizontal, under the caption, left */
    top: auto;
    bottom: 26px;
    left: var(--pad);
    right: auto;
    translate: none;
    flex-direction: row;
    gap: 14px;
  }
  .walk-rail::before { top: 50%; bottom: auto; left: 3px; right: 3px; width: auto; height: 1px; translate: 0 -50%; background: rgba(33, 30, 26, .22); }
  .walk-dot { background: rgba(33, 30, 26, .28); box-shadow: none; }
  .walk-skip { /* bottom right, next to the dots */
    top: auto;
    bottom: 22px;
    left: auto;
    right: var(--pad);
    translate: none;
    padding: 6px 0 4px;
    color: var(--cjp-espresso);
    border-color: rgba(33, 30, 26, .35);
  }
  .walk-skip:hover { color: var(--cjp-gold); border-color: var(--cjp-gold); }
}

@media (max-width: 760px) {
  .hero-title { font-size: clamp(48px, 15vw, 96px); letter-spacing: .3em; text-indent: .3em; }
  .hero-eyebrow { letter-spacing: .28em; text-indent: .28em; }
  .hero-caption { right: var(--pad); padding: 10px 14px; }
  .fact { padding: 18px 0 18px 12px; gap: 10px; }
  .fact-val { font-size: clamp(20px, 5.9vw, 30px); white-space: normal; }
  .fact-key { font-size: 9.5px; letter-spacing: .14em; }
  .walk-caption { padding-right: calc(var(--pad) + 28px); }
  .walk-caption-num::after { width: 18px; }
  .places { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .labels { column-gap: 18px; }
  .contact-inner { border-color: rgba(250, 247, 242, .22); }
}

@media (max-width: 760px) and (orientation: portrait) {
  .hero-sub { font-size: clamp(19px, 5.4vw, 24px); }
}

@media (orientation: portrait) { /* frame 01 is ~2.07:1 and its ARUNA sign sits ~2/3 across: keep it in the narrow cover crop */
  .walk-item[data-stage="1"] img { object-position: 72% 50%; }
}

@media (max-width: 420px) {
  .hd-inner { gap: 8px; }
  .brand { font-size: 17px; letter-spacing: .34em; margin-right: -.34em; }
  .hd-right { gap: 8px; }
  .hd-cta { padding: 0 14px; letter-spacing: .14em; }
  .labels { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

@media (max-width: 359px) { /* 320px phones: keep the header on one line */
  .brand { font-size: 16px; letter-spacing: .3em; margin-right: -.3em; }
  .hd-lang-btn { min-width: 34px; padding: 7px 6px; }
  .hd-cta { padding: 0 10px; letter-spacing: .1em; }
  .hero-hint { letter-spacing: .2em; padding-left: 16px; padding-right: 14px; }
  .fact-key { letter-spacing: .1em; } /* "CONSTRUIDOS" fits its 91px cell */
}

/* ============================================================
   REDUCED MOTION: no pins (scenes.js skips them), static hero,
   walk becomes a stacked gallery, no preloader.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pre { display: none; }
  .leaf, .leaf[data-side] { display: none; } /* [data-side] outranks the right leaves' display:flex */
  .hero-aerial { will-change: auto; }
  .hero-caption { opacity: 1; }
  .hero-hint::after { animation: none; }
  .walk-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0 var(--pad) var(--sec);
    background: transparent;
  }
  .walk-stills {
    position: static;
    display: grid;
    gap: clamp(16px, 2vw, 28px);
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .walk-item { position: relative; inset: auto; opacity: 1; height: auto; will-change: auto; }
  .walk-item picture, .walk-item img { height: auto; aspect-ratio: 16 / 9; }
  .walk-canvas { display: none; }
  .walk-dusk, .walk-rail, .walk-skip { display: none; }
  body.has-motion .rv { opacity: 1; transform: none; transition: none; }
  [data-prlx] { transform: none !important; will-change: auto; }
  .pre-mark, .pre-mark::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .hero-caption { bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .walk-item picture { aspect-ratio: auto; }
  .walk-item img { aspect-ratio: auto 16 / 9; } /* each render complete at its own ratio once loaded; 16:9 box before */
}