/* ============================================================
   LHG & PARTNERS — design system
   ============================================================ */

:root {
  /* palette */
  /* ---- MIDNIGHT-NAVY DARK THEME (rich sunset-luxury accents) ---- */
  --ivory:      #F2ECDF;   /* crisp bright cream — primary LIGHT TEXT on navy */
  --page:       #030e1a;   /* VOID — deepest ocean blue (user's pick) */
  --ivory-2:    #0b1e34;   /* lifted pool-blue — cards / panels stand off the page */
  --sand:       #020a14;   /* deepest void — image placeholder behind media */
  --stone:      #34465a;   /* muted navy-grey */
  --charcoal:   #020a14;   /* deepest void — bands/footer + dark text on light badges */
  --charcoal-2: #06182c;   /* lifted pool-blue (contact band) */
  --ink:        rgba(242,236,223,0.86);   /* brighter light body text (crisper) */
  --bronze:     #D8B279;   /* brighter, richer champagne-gold — glows on the darker navy */
  --bronze-2:   #CBA46C;
  --bronze-dim: #97794f;

  --line:       rgba(242,236,223,0.14);   /* light hairline on navy */
  --line-light: rgba(242,236,223,0.16);

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* rhythm */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 12vw, 11rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--sans);
  font-weight: 400;
  background: var(--page);
  color: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--bronze); color: var(--ivory); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- shared ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze-2);
  margin-bottom: 1.4rem;
}
.eyebrow--light { color: var(--bronze); }

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head--center { text-align: center; max-width: 46rem; margin-inline: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 1.05em 2em; border-radius: 2px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.5s var(--ease);
}
.btn--solid { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.btn--solid:hover { background: var(--bronze-2); border-color: var(--bronze-2); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }

/* ============================================================
   NAV
   ============================================================ */
/* Nav has NO background — it floats over the content and simply flips its
   text colour to stay legible (light over dark sections, dark over light). */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: color 0.45s var(--ease), background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  color: var(--ivory);              /* homepage opens over the dark hero */
  border-bottom: 1px solid transparent;
}
body.is-subpage .nav { color: var(--ivory); }   /* subpages open over navy */
.nav.nav-on-dark { color: var(--ivory); }           /* over any dark section */
/* once scrolled off the top, a frosted translucent bar keeps the header legible over content */
.nav.is-scrolled { background: rgba(4, 14, 26, 0.68); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); color: var(--ivory); }
/* Developments page: a warm, sunset-toned frosted bar to match its hero (not the cool navy) */
.dev-page .nav.is-scrolled { background: rgba(58, 28, 34, 0.5); -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); border-bottom-color: rgba(216,178,121,0.22); }
.nav__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 1.35rem var(--gutter);
  /* 3-col grid so the links lock to TRUE viewport centre (aligned to the villa),
     independent of the brand vs CTA widths */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav__brand { display: flex; align-items: center; gap: 0.65rem; justify-self: start; white-space: nowrap; }
.logo-mark { display: block; width: auto; flex: none; }
.nav__brand .logo-mark { height: 1.85rem; }
.nav__mark { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.06em; color: var(--bronze); }
.nav__word { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; letter-spacing: 0.02em; }
.nav__links { display: flex; gap: 2rem; justify-self: center; }
.nav__links a {
  font-size: 0.82rem; letter-spacing: 0.06em; position: relative; padding-bottom: 3px; opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--bronze);
  transition: width 0.4s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }
/* CTA is a plain text link with a bronze underline — no box/bracket */
.nav__cta {
  font-size: 0.82rem; letter-spacing: 0.06em; padding-bottom: 3px; justify-self: end;
  border-bottom: 1px solid var(--bronze); transition: color 0.3s var(--ease);
}
.nav__cta:hover { color: var(--bronze); }

/* mobile hamburger + full-screen overlay menu (injected by JS, hidden on desktop) */
.nav__toggle, .nav__menu { display: none; }

@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }        /* links + CTA move into the overlay */
  .nav__inner { grid-template-columns: 1fr auto; }  /* brand | hamburger */
  /* the bar gets a legible translucent navy backing so it never collides with body text */
  .nav {
    background: rgba(3, 14, 26, 0.72);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav, .nav.nav-on-dark { color: var(--ivory); }   /* always light on the navy bar */
  /* while the overlay is open the bar itself disappears, but the toggle (X) stays on top */
  body.menu-open .nav {
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 130;
  }

  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; margin-right: -8px; padding: 0;
    background: none; border: none; color: inherit; cursor: pointer;
    justify-self: end; z-index: 130;
  }
  .nav__toggle span { display: block; width: 24px; height: 1.6px; background: currentColor; border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }
  body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
  body.menu-open .nav__toggle span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

  .nav__menu {
    display: flex; flex-direction: column; justify-content: center;
    position: fixed; inset: 0; z-index: 120;
    padding: 5.5rem var(--gutter) 3rem;
    background: rgba(3, 14, 26, 0.98);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  }
  body.menu-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
  body.menu-open { overflow: hidden; }
  .nav__menu a {
    font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 1.22; letter-spacing: -0.01em; color: var(--ivory);
    padding: 0.5rem 0; border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(12px);
  }
  body.menu-open .nav__menu a { opacity: 1; transform: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  body.menu-open .nav__menu a:nth-child(1) { transition-delay: 0.08s; }
  body.menu-open .nav__menu a:nth-child(2) { transition-delay: 0.13s; }
  body.menu-open .nav__menu a:nth-child(3) { transition-delay: 0.18s; }
  body.menu-open .nav__menu a:nth-child(4) { transition-delay: 0.23s; }
  body.menu-open .nav__menu a:nth-child(5) { transition-delay: 0.28s; }
  body.menu-open .nav__menu a:nth-child(6) { transition-delay: 0.33s; }
  .nav__menu a[data-cta] {
    margin-top: 1.6rem; border-bottom: none; text-align: center; border-radius: 3px;
    background: var(--bronze); color: #05101c;
    font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; padding: 1.05em 1.4em;
  }
}
@media (max-width: 480px) {
  :root { --gutter: 1.25rem; }
  .nav__inner { padding-block: 1.1rem; }
  .nav__mark, .nav__word { font-size: 1.1rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; height: 100vh; }
html.audit .hero { height: 820px; }  /* ?hp= stage-preview / full-page capture */
.hero__stage {
  position: absolute; inset: 0; overflow: hidden;
  background: #0b0a08;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* scroll-scrubbed hero visual (Higgsfield); sits under .hero__grade + overlays.
   JS drives transform: scale() for the scroll-linked zoom-out (center origin). */
.hero__video,
.hero__still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; pointer-events: none; background: #0b0a08;
  transform-origin: center center; will-change: transform; backface-visibility: hidden;
}

/* cinematic grade: soft center pool for legibility (text is centered) + edge vignette */
.hero__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(44% 28% at 50% 61%, rgba(10,8,20,0.46) 0%, rgba(10,8,20,0.18) 55%, transparent 80%),   /* tame the blinding sunset reflection in the pool near the villa */
    radial-gradient(66% 52% at 50% 46%, rgba(14,8,22,0.32) 0%, rgba(14,8,22,0.12) 46%, transparent 72%),      /* soft centre for text legibility */
    linear-gradient(180deg, rgba(64,36,74,0.44) 0%, rgba(48,30,66,0.16) 20%, transparent 42%, transparent 64%, rgba(24,20,52,0.14) 86%, rgba(16,16,42,0.30) 100%),  /* violet sky top with a hint of pink, matching the Services/Q&A sunsets; cool violet-navy base into the fade */
    linear-gradient(0deg, rgba(66,42,86,0.11), rgba(66,42,86,0.11));   /* faint overall violet wash so the hero flows into the other pages' purple */
}


/* dusk dimmer — sits ABOVE the villa/grade but BELOW the text overlays, so the
   villa sinks into evening on scroll while the gold headline + logo stay lit.
   Opacity is driven by --dusk (0 at the top → 1 fully scrolled), set in
   hero-sequence.js renderStill(). Weighted heaviest low, so the warm first-floor
   lights are the last thing to fade as focus moves to the words + the logo. */
.hero__dusk {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--dusk, 0);
  background: linear-gradient(180deg,
    rgba(44,24,56,0.14) 0%,
    rgba(30,18,48,0.34) 50%,
    rgba(22,15,40,0.40) 72%,
    rgba(15,12,34,0.26) 100%);   /* dusks the villa into a violet evening with a hint of pink at the top on scroll-out (matches the other pages), eased at the very bottom so the pool keeps its warmth */
  transition: opacity 0.08s linear;
  will-change: opacity;
}

/* centered overlay: logo + eyebrow stay locked on the villa's light bar as it zooms */
.hero__overlays {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center;
  animation: heroOverlaysIn 1.5s var(--ease, ease) 0.25s both;  /* gentle fade-in on load */
}
@keyframes heroOverlaysIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__overlays { animation: none; } }
.hero__phase {
  grid-area: 1 / 1; position: relative; text-align: center; color: var(--ivory);
  padding-inline: var(--gutter);
  opacity: 0; transform: translateY(14px);
  will-change: opacity, transform;
}
/* soft legibility halo behind the centered text */
.hero__phase::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 190%; height: 250%; transform: translate(-50%, -50%);
  /* soft radial glow behind the text — enough to read over the villa's bright glowing
     atrium, but blurred/gradual so it reads as atmosphere, not a stamped block */
  background: radial-gradient(ellipse at center, rgba(8,7,5,0.58) 0%, rgba(8,7,5,0.30) 46%, rgba(8,7,5,0) 74%);
  z-index: -1; pointer-events: none;
}
.hero__eyebrow {
  font-size: clamp(0.84rem, 1.22vw, 1.14rem); font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase;
  color: #e7c98c; margin: 0;   /* luxury champagne-gold — soft wide glow keeps it legible on the bright atrium */
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 24px rgba(0,0,0,0.7);
}

/* hero brand lockup (exact logo: mark + wordmark) — centered on the light bar */
.hero__logo { height: clamp(6.05rem, 14.3vw, 10.45rem); width: auto; margin: 0 auto; color: var(--ivory); display: block; filter: drop-shadow(0 2px 34px rgba(0,0,0,0.55)); }
/* at full zoom-out the logo sits a touch lower so it rests over the pool */
.hero__phase--logo { margin-top: clamp(1rem, 5.5vh, 4.5rem); }
/* gentle dim so the villa's interior lights + pool glare aren't overwhelming (tunable dial) */
.hero__still, .hero__video { filter: brightness(0.9) contrast(1.045) saturate(1.03); }
/* the pool video layers ON TOP of the sharp still, revealed only over the pool
   (soft-edged), so the villa stays a crisp static image and only the water moves */
.hero__video--pool {
  background: transparent;
  /* tight to the central pool water only — day beds, deck, glass & concrete stay 100% the sharp static image */
  -webkit-mask-image: radial-gradient(ellipse 27% 48% at 50% 88%, #000 54%, transparent 100%);
  mask-image: radial-gradient(ellipse 27% 48% at 50% 88%, #000 54%, transparent 100%);
}

.hero__scrollcue {
  position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  color: var(--ivory); opacity: 0.7;
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.hero__cueline { width: 1px; height: 46px; background: linear-gradient(var(--bronze), transparent); }

/* transition band: the island's rock base melts into the sandy site — a long, even,
   many-stepped earth ramp (brown → ochre → tan → sand → cream) so it reads as one
   continuous material change, not a band. Pairs with the warm-brown grade at the hero
   bottom so the seam is brown→brown (no light→dark jump). */
.hero-fade {
  /* overlaps the hero and starts TRANSPARENT, so the pool blends straight into the
     page with no colour step (kills the seam line). Eases down into --page. */
  margin-top: clamp(-150px, -15vh, -90px);
  height: clamp(240px, 34vh, 460px);
  /* monotonic: transparent (the real pool shows) → the dark site blue builds up →
     solid --page. No dip, no re-lighten — the pool just fades into the dark blue. */
  background: linear-gradient(180deg,
    rgba(3,14,26,0) 0%,
    rgba(3,14,26,0.34) 26%,
    rgba(3,14,26,0.7) 48%,
    rgba(3,14,26,0.92) 66%,
    var(--page) 82%);
}

/* ============================================================
   HERO → THESIS OVERLAP  (toggle: remove class `hero-blend` from <body> to undo)
   Drags the earth ramp much longer and pulls the thesis up so it overlaps and
   emerges from the blend, instead of sitting below a discrete band.
   ============================================================ */
.hero-blend .hero-fade { height: clamp(260px, 36vh, 500px); }
.hero-blend .manifesto {
  position: relative; z-index: 1;
  margin-top: clamp(-150px, -15vh, -100px);
  padding-top: clamp(3.6rem, 8vh, 6.5rem);
  background: linear-gradient(180deg, rgba(4,8,16,0) 0, rgba(4,8,16,0) 36px, var(--page) 190px);
}

/* ============================================================
   MANIFESTO (the thesis — sits on the lighter sand band)
   ============================================================ */
.manifesto { padding-block: clamp(2.7rem, 5.4vw, 4.8rem); background: var(--page); text-align: center; }
/* minimal headline-metrics bar — under the thesis, above selected work */
.home-stats { background: var(--page); padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.home-stats + .work-sec { padding-top: clamp(2.8rem, 5.5vw, 4.8rem); }
.home-stats__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem clamp(2rem, 6vw, 5rem); max-width: 62rem; margin: 0 auto; padding-top: clamp(1.8rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.home-stat { text-align: center; }
.home-stat dt { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.95rem); line-height: 1; letter-spacing: -0.01em; color: var(--ivory); }
.home-stat dd { margin-top: 0.45rem; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.manifesto__lead {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.3rem, 3vw, 2.15rem); line-height: 1.36; letter-spacing: -0.007em;
  max-width: 50rem; margin: 1.2rem auto 0;
}
.manifesto__lead em { font-style: italic; color: var(--bronze-2); }
.manifesto__lead span[data-line] { display: block; overflow: hidden; }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio { padding-block: var(--section-y); }
.project {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
}
.project--reverse .project__media { order: 2; }
.project__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px;
  background: var(--sand);
}
.project__img {
  position: absolute; inset: -8% 0; height: 116%; width: 100%;
  background-image: var(--img); background-size: cover; background-position: center;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.project:hover .project__img { transform: scale(1.05); }
.project__status {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 0.5em 0.9em; border-radius: 2px;
  background: rgba(20,17,14,0.7); color: var(--ivory); backdrop-filter: blur(6px);
}
.project__status--live { background: rgba(184,149,106,0.92); color: var(--charcoal); }
.project__status--soon { background: rgba(244,241,234,0.85); color: var(--charcoal); }

.project__index { font-family: var(--serif); font-size: 0.9rem; color: var(--bronze-2); margin-bottom: 1rem; }
.project__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; }
.project__loc { color: var(--stone); font-size: 0.92rem; letter-spacing: 0.04em; margin-top: 0.5rem; margin-bottom: 1.6rem; }
.project__desc { max-width: 40ch; color: var(--ink); }

.stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.stats dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.4rem; }
.stats dd { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }

@media (max-width: 820px) {
  .project { grid-template-columns: 1fr; gap: 1.8rem; }
  .project--reverse .project__media { order: 0; }
  .stats { gap: 1.6rem 2rem; }
  .stats dd { font-size: 1.25rem; }
}

/* ---------- portfolio grid + cards ---------- */
.portfolio__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: end; }
.portfolio__intro { color: var(--ink); max-width: 42ch; justify-self: end; }

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.6vw, 2.6rem); }

.pcard { display: flex; flex-direction: column; color: inherit; }
.pcard__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--sand);
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.055); }
.pcard__status {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 0.5em 0.85em; border-radius: 2px; color: var(--ivory);
  background: rgba(20,17,14,0.72); backdrop-filter: blur(6px);
}
.pcard__status--live { background: rgba(184,149,106,0.94); color: var(--charcoal); }
.pcard__status--soon { background: rgba(244,241,234,0.9); color: var(--charcoal); }
.pcard__status--done { background: rgba(48,78,66,0.85); color: var(--ivory); }

.pcard__body { padding-top: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pcard__loc { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.6rem; }
.pcard__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; }
.pcard__tag { color: var(--ink); font-size: 0.95rem; margin-top: 0.6rem; }
.pcard__meta {
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.pcard__price { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.pcard__cta {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--bronze); display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
}
.pcard__cta i { font-style: normal; color: var(--bronze-2); transition: transform 0.4s var(--ease); }
.pcard:hover .pcard__cta i { transform: translateX(5px); }
.pcard--featured .pcard__meta { margin-top: 1.8rem; }

/* featured (first) card spans full width, horizontal */
.pcard--featured { grid-column: 1 / -1; flex-direction: row; gap: clamp(2rem, 4vw, 4rem); align-items: stretch; }
.pcard--featured .pcard__media { flex: 0 0 60%; aspect-ratio: 16 / 10; }
.pcard--featured .pcard__body { padding-top: 0; justify-content: center; max-width: 42ch; }
.pcard--featured .pcard__name { font-size: clamp(2rem, 3.4vw, 3rem); }
.pcard--featured .pcard__tag { font-size: 1.05rem; }

/* ============================================================
   SERVICES — "everything, under one roof" (Art Villas Bali ref,
   rebuilt dark): an integrated grid of capabilities with hairline
   dividers, each a title + line + "Learn more".
   ============================================================ */
.services { background: var(--page); padding-block: clamp(3.6rem, 8vw, 6.5rem); }
.services__lead { max-width: 44rem; margin-top: 1.1rem; color: var(--ink); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; }
.svc-grid { margin-top: clamp(2.4rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: clamp(1.1rem, 2vw, 1.6rem); }
.svc-card { display: flex; flex-direction: column; background: var(--ivory-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.4s var(--ease); }
.svc-card:hover { transform: translateY(-4px); border-color: rgba(216,178,121,0.35); }
.svc-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
/* a shared navy foot-gradient ties the varied source photos into one on-brand family */
.svc-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,18,0) 45%, rgba(3,10,18,0.55) 100%); }
.svc-card__no { position: absolute; left: 0.9rem; bottom: 0.65rem; z-index: 1; font-family: var(--serif); font-weight: 300; font-size: 1rem; letter-spacing: 0.04em; color: var(--ivory); text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.svc-card__body { padding: clamp(1.1rem, 1.8vw, 1.5rem); display: flex; flex-direction: column; gap: 0.5rem; }
.svc-card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.1; color: var(--ivory); }
.svc-card__desc { color: var(--ink); font-size: 0.9rem; line-height: 1.55; opacity: 0.84; }
.services__ask { margin-top: clamp(2.4rem, 5vw, 3.6rem); display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.services__ask-line { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ivory); }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; } .svc-card__body { padding: 0.9rem; gap: 0.35rem; } .svc-card__desc { font-size: 0.82rem; } }
@media (max-width: 400px) { .svc-grid { grid-template-columns: 1fr; } }

/* --- services PAGE: hero + closing band --- */
.svc-page-hero { position: relative; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: flex-end; overflow: hidden; background: var(--page); }
.svc-page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); filter: brightness(1.02) contrast(1.03); }
.svc-page-hero__grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,18,0.52) 0%, rgba(3,10,18,0.22) 34%, rgba(3,10,18,0.5) 66%, #030e1a 100%); }
.svc-page-hero__inner { position: relative; z-index: 2; padding-bottom: clamp(2.4rem, 6vh, 4.5rem); color: var(--ivory); max-width: 52rem; }
.svc-page-hero__eyebrow { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze-2); margin: 0; }
.svc-page-hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6.5vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; margin-top: 0.6rem; text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
.svc-page-hero__lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.5; color: rgba(242,236,223,0.9); max-width: 42rem; margin-top: 1.1rem; }
.svc-page .services { padding-top: clamp(2.6rem, 5vw, 4rem); }
.svc-close { background: var(--page); padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.svc-close__line { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--ivory); }
.svc-close__actions { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; justify-content: center; align-items: center; }
.svc-close__link { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.svc-close__link i { font-style: normal; transition: transform 0.4s var(--ease); }
.svc-close__link:hover i { transform: translateX(4px); }

/* --- homepage SERVICES TEASER: six word-over-image tiles that lead to the services page --- */
.svc-tiles { margin-top: clamp(2.2rem, 4.5vw, 3.6rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 1.5vw, 1.1rem); }
.svc-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; display: flex; align-items: flex-end; color: var(--ivory); }
.svc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.svc-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,18,0.12) 0%, rgba(3,10,18,0.2) 45%, rgba(3,10,18,0.78) 100%); transition: background 0.4s var(--ease); }
.svc-tile:hover img { transform: scale(1.06); }
.svc-tile:hover::after { background: linear-gradient(180deg, rgba(3,10,18,0.26) 0%, rgba(3,10,18,0.34) 45%, rgba(3,10,18,0.82) 100%); }
.svc-tile__label { position: relative; z-index: 1; padding: clamp(1rem, 2vw, 1.5rem); font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.05; text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.services__more { margin-top: clamp(2rem, 4vw, 3rem); display: flex; justify-content: center; }
@media (max-width: 700px) { .svc-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .svc-tiles { grid-template-columns: 1fr; } }

/* ============================================================
   DEVELOPMENTS — Reallos vibe: cinematic generated hero, an
   understated statement, and a numbered portfolio index.
   ============================================================ */
/* a tall scroll zone; the hero sticks and its image scrubs a zoom as you pass through it */
.dev-hero-zone { position: relative; height: 175vh; background: var(--page); }
.dev-hero { position: sticky; top: 0; height: 100vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--page); }
.dev-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.0); will-change: transform; filter: brightness(1.04) contrast(1.03) saturate(1.02); }
/* darkens the base + a stronger bottom scrim for the headline, blending into the page navy */
.dev-hero__grade { position: absolute; inset: 0; z-index: 1; background:
  /* deep navy wash confined to the upper sky — keeps the sky dark & on-brand while the villa below stays bright and sharp */
  linear-gradient(180deg, rgba(4,14,36,0.62) 0%, rgba(5,15,34,0.4) 24%, rgba(5,14,30,0.14) 44%, rgba(3,10,18,0) 60%),
  /* diagonal scrim: darkens the lower-left so the ivory headline reads over the white villa */
  linear-gradient(101deg, rgba(3,10,18,0.5) 0%, rgba(3,10,18,0.32) 24%, rgba(3,10,18,0.1) 46%, rgba(3,10,18,0) 62%),
  /* base vertical: deep navy bottom to blend into the page */
  linear-gradient(180deg, rgba(3,10,18,0.34) 0%, rgba(3,10,18,0.06) 22%, rgba(3,10,18,0.24) 50%, rgba(3,10,18,0.72) 78%, #030e1a 100%); }
/* the scroll dim deepens the sunset into the site's navy from the bottom up */
.dev-hero__dim { position: absolute; inset: 0; z-index: 1; opacity: 0; background: linear-gradient(180deg, rgba(3,12,24,0) 0%, rgba(3,11,20,0.34) 50%, #030e1a 100%); }
@media (max-width: 720px) { .dev-hero-zone { height: 150vh; } }
@media (prefers-reduced-motion: reduce) {
  .dev-hero-zone { height: auto; }
  .dev-hero { position: relative; height: auto; min-height: clamp(540px, 88vh, 900px); }
  .dev-hero__bg { transform: none; }
}
.dev-hero__inner { position: relative; z-index: 2; padding-bottom: clamp(2.6rem, 7vh, 5rem); color: var(--ivory); max-width: 54rem; }
.dev-hero__eyebrow { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ivory); margin: 0; text-shadow: 0 1px 16px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.4); }
.dev-hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 8.5vw, 6.8rem); line-height: 0.96; letter-spacing: -0.02em; margin-top: 0.6rem; text-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 2px 34px rgba(0,0,0,0.5); }
.dev-hero__lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.55; color: rgba(242,236,223,0.9); max-width: 40rem; margin-top: 1.1rem; text-shadow: 0 1px 18px rgba(0,0,0,0.4); }
.dev-hero__cue { display: inline-flex; align-items: center; gap: 0.6em; margin-top: clamp(1.4rem, 3vh, 2rem); font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); }
.dev-hero__cue i { font-style: normal; color: var(--bronze); transition: transform 0.4s var(--ease); }
.dev-hero__cue:hover i { transform: translateY(3px); }

.dev-statement { background: var(--page); padding-top: clamp(1.2rem, 3vw, 2.2rem); padding-bottom: clamp(2.2rem, 5vw, 3.8rem); }
.dev-statement__text { max-width: 52rem; margin-inline: auto; text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--bronze); }
/* each clause is its own line; JS scrubs opacity/translate against scroll so they rise in as the hero fades out */
.dev-statement__line { display: block; will-change: opacity, transform; }
.dev-statement__line + .dev-statement__line { margin-top: 0.1em; }

.dev-statement + .portfolio { padding-top: clamp(1.5rem, 3vw, 3rem); }
.dev-list__head { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.dev-list__head--center { text-align: center; }
.dev-list__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.1; letter-spacing: 0.01em; margin-top: 0.4rem; }
.dev-list { display: flex; flex-direction: column; }
.dev-item { display: grid; grid-template-columns: 2.8rem minmax(0, 40%) 1fr; gap: clamp(1.2rem, 3vw, 2.8rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.6rem) 0; border-top: 1px solid var(--line); color: inherit; }
.dev-item:last-child { border-bottom: 1px solid var(--line); }
.dev-item__no { align-self: start; padding-top: 0.3rem; font-family: var(--serif); font-weight: 300; font-size: clamp(1rem, 1.8vw, 1.4rem); color: var(--bronze); }
.dev-item__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--sand); }
.dev-item__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.94); transition: transform 0.9s var(--ease), filter 0.6s var(--ease); }
.dev-item:hover .dev-item__media img { transform: scale(1.05); filter: brightness(1.02); }
.dev-item__loc { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.dev-item__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.03; margin-top: 0.4rem; transition: color 0.4s var(--ease); }
.dev-item:hover .dev-item__name { color: var(--bronze); }
.dev-item__tag { margin-top: 0.7rem; color: var(--ink); opacity: 0.82; font-size: 0.98rem; line-height: 1.5; max-width: 48ch; }
.dev-item__cta { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 1.1rem; font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); }
.dev-item__cta i { font-style: normal; transition: transform 0.4s var(--ease); }
.dev-item:hover .dev-item__cta i { transform: translateX(5px); }
@media (max-width: 720px) {
  .dev-item { grid-template-columns: 1fr; gap: 0.9rem; }
  .dev-item__no { padding-top: 0; }
  .dev-item__media { order: -1; }
}

@media (max-width: 980px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pcard--featured { grid-column: 1 / -1; flex-direction: column; }
  .pcard--featured .pcard__media { flex: none; width: 100%; aspect-ratio: 16 / 9; }
  .portfolio__head { grid-template-columns: 1fr; }
  .portfolio__intro { justify-self: start; }
}
@media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } }

/* ============================================================
   SELECTED WORK — homepage editorial showcase
   ============================================================ */
.work-sec { padding-block: var(--section-y); }
.work-list { display: grid; gap: clamp(4rem, 9vw, 8rem); margin-top: clamp(3rem, 6vw, 5rem); }
.work { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.work:nth-child(even) .work__media { order: 2; }
.work__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--sand); }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.work:hover .work__media img { transform: scale(1.045); }
.work__index { display: flex; align-items: center; gap: 1rem; font-family: var(--serif); font-size: 1rem; color: var(--bronze-2); margin-bottom: 1.3rem; }
.work__index span { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.work__name { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.03; letter-spacing: -0.01em; }
.work__desc { margin-top: 1.4rem; color: var(--ink); font-size: 1.05rem; max-width: 48ch; }
.work__meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; margin-top: 1.8rem; }
.work__meta li { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze);
  border: 1px solid rgba(216,178,121,0.30); border-radius: 100px; padding: 0.5em 1.05em;
  background: linear-gradient(135deg, rgba(216,178,121,0.16) 0%, rgba(30,26,24,0.22) 42%, rgba(4,8,16,0.34) 100%); }
.work__link { display: inline-flex; align-items: center; gap: 0.6em; margin-top: 2.2rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--bronze); }
.work__link i { font-style: normal; color: var(--bronze-2); transition: transform 0.4s var(--ease); }
.work__link:hover i { transform: translateX(6px); }
.work-more { text-align: center; margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.work-more p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.4; color: var(--ink); max-width: 42ch; margin: 0 auto 1.9rem; }
/* developments-room entry, relocated to the bottom of the homepage (above About) */
.dev-entry { padding-block: clamp(1rem, 2vw, 2rem) var(--section-y); }
.dev-entry .work-more { margin-top: 0; }
@media (max-width: 820px) {
  .work { grid-template-columns: 1fr; gap: 1.6rem; }
  .work:nth-child(even) .work__media { order: 0; }
}

/* ============================================================
   DEVELOPMENTS SUBSECTION (projects.html)
   ============================================================ */
.dev-intro { padding-top: clamp(7rem, 13vh, 9.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.dev-intro__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.015em; margin-top: 0.6rem; }
.dev-intro__lead { margin-top: 1.8rem; max-width: 62ch; color: var(--ink); font-size: 1.08rem; }
.pd-back--static { position: static; display: inline-block; margin-bottom: 2.2rem; color: var(--stone); }
.pd-back--static:hover { color: var(--bronze-2); }
.dev-foot { background: var(--charcoal); color: var(--ivory); text-align: center; padding-block: clamp(4rem, 8vw, 7rem); margin-top: clamp(3rem, 6vw, 5rem); }
.dev-foot .section-title { color: var(--ivory); }
.dev-foot p { color: rgba(244,241,234,0.7); max-width: 46ch; margin: 1.4rem auto 2.4rem; }

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
body.is-subpage { padding-top: 0; }

.pd-hero { position: relative; height: min(86vh, 780px); min-height: 460px; overflow: hidden; background: #0b0a08; }
.pd-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-hero__grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, transparent 26%, rgba(9,8,6,0.42) 56%, rgba(9,8,6,0.92) 100%);
}
.pd-hero__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); color: var(--ivory); text-shadow: 0 2px 26px rgba(0,0,0,0.5); }
.pd-back {
  position: absolute; top: calc(var(--gutter) * 0 + 6.5rem); left: var(--gutter);
  font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ivory); opacity: 0.85;
}
.pd-back:hover { opacity: 1; color: var(--bronze); }
.pd-hero__status { position: static; align-self: flex-start; margin-bottom: 1.2rem; }
.pd-hero__loc { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1rem; }
.pd-hero__name { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 1.02; letter-spacing: -0.015em; }
.pd-hero__tag { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 2.2vw, 1.6rem); margin-top: 1rem; color: rgba(244,241,234,0.9); max-width: 40ch; }
.pd-hero__price { margin-top: 1.6rem; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); }
.pd-hero__price em { display: block; font-style: normal; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,241,234,0.65); margin-top: 0.5rem; }
/* Uluwatu 1/2/3-bedroom layout switcher */
.pd-variants { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.pd-variants__label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,241,234,0.55); margin-right: 0.4rem; }
.pd-variant { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ivory);
  padding: 0.5rem 1.05rem; border: 1px solid rgba(244,241,234,0.28); border-radius: 999px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); }
.pd-variant:hover { border-color: var(--bronze); color: var(--bronze); }
.pd-variant.is-active { background: var(--bronze-2); border-color: var(--bronze-2); color: var(--charcoal); cursor: default; }

.pd-overview { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); padding-block: clamp(4rem, 9vw, 8rem); align-items: start; }
.pd-overview__text p:not(.eyebrow) { font-size: 1.12rem; line-height: 1.75; color: var(--ink); margin-top: 1.3rem; }
.pd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.pd-facts dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.4rem; }
.pd-facts dd { font-family: var(--serif); font-size: 1.25rem; line-height: 1.15; }

.pd-gallery { padding-bottom: clamp(3rem, 7vw, 6rem); }
.pd-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem); }
.pd-gallery__item { border: none; padding: 0; margin: 0; cursor: zoom-in; background: var(--sand); overflow: hidden; border-radius: 3px; aspect-ratio: 3 / 2; }
.pd-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.pd-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.pd-gallery__item:hover img { transform: scale(1.05); }

/* interiors — portrait render gallery (lightbox) */
.pd-interiors { padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.pd-interiors > .eyebrow { margin-bottom: clamp(1.2rem, 2.6vw, 2rem); }
.pd-interiors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem); }
.pd-interiors__item { border: none; padding: 0; margin: 0; cursor: zoom-in; background: var(--sand); overflow: hidden; border-radius: 3px; aspect-ratio: 3 / 4; }
.pd-interiors__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.pd-interiors__item:hover img { transform: scale(1.05); }
@media (max-width: 720px) { .pd-interiors__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- The residences: per-villa render slider ---- */
.pd-villas-head { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 0.5rem; }
.pd-villas-head__text { font-size: 1.05rem; color: #6b6455; margin-top: 0.6rem; max-width: 44rem; }
.pd-villa { padding-block: clamp(1.6rem, 3.5vw, 3rem); border-top: 1px solid var(--line); }
.pd-villa:first-of-type { border-top: none; }
.pd-villa__head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.pd-villa__idx { font-size: 0.78rem; letter-spacing: 0.22em; color: var(--bronze); font-weight: 600; }
.pd-villa__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1; }
.pd-villa__meta { margin-left: auto; color: #6b6455; font-size: 0.95rem; letter-spacing: 0.01em; }
.pd-villa__note { width: 100%; margin-top: 0.35rem; color: var(--bronze-2); font-size: 0.95rem; line-height: 1.6; max-width: 60ch; }
.pd-villa__status { position: static; align-self: center; }
.pd-maplink { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.6rem; font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--bronze-2); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.3s, color 0.3s; }
.pd-maplink:hover { color: var(--ink); border-bottom-color: var(--bronze-2); }
.pd-maplink em { font-style: normal; font-variant-numeric: tabular-nums; color: #6b6455; }
.pd-maplink__pin { color: var(--bronze); font-size: 0.72rem; }
.pd-slider { position: relative; }
.pd-slider__viewport { overflow: hidden; border-radius: 4px; background: var(--sand); }
.pd-slider__track { display: flex; transition: transform 0.6s var(--ease); will-change: transform; }
.pd-slide { position: relative; min-width: 100%; margin: 0; }
.pd-slide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; }
.pd-slide__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2.2vw, 1.6rem) clamp(0.8rem, 1.6vw, 1.1rem);
  color: var(--ivory); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(180deg, transparent, rgba(9,8,6,0.55)); pointer-events: none; }
.pd-slider__nav { position: absolute; top: calc(50% - 1.2rem); transform: translateY(-50%); z-index: 2;
  width: clamp(2.4rem, 3.4vw, 3rem); height: clamp(2.4rem, 3.4vw, 3rem); border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,17,14,0.42); color: var(--ivory); font-size: 1.35rem; line-height: 1; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.3s; }
.pd-slider__nav:hover { background: rgba(20,17,14,0.78); }
.pd-slider__nav--prev { left: clamp(0.6rem, 1.4vw, 1.1rem); }
.pd-slider__nav--next { right: clamp(0.6rem, 1.4vw, 1.1rem); }
.pd-slider__count { position: absolute; top: clamp(0.7rem, 1.6vw, 1.1rem); right: clamp(0.7rem, 1.6vw, 1.1rem); z-index: 2;
  background: rgba(20,17,14,0.5); color: var(--ivory); font-size: 0.72rem; letter-spacing: 0.1em; padding: 0.3em 0.7em; border-radius: 2px;
  font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pd-slider__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.pd-slider__dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--line); transition: background 0.3s, transform 0.3s; }
.pd-slider__dot.is-active { background: var(--bronze); transform: scale(1.35); }
/* bold availability flag overlaid on the slider — catches the eye over the render */
.pd-villa__flag { position: absolute; top: clamp(0.8rem, 1.7vw, 1.2rem); left: clamp(0.8rem, 1.7vw, 1.2rem); z-index: 3;
  font-size: clamp(0.58rem, 1.1vw, 0.72rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5em 0.85em; border-radius: 3px; pointer-events: none; line-height: 1;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pd-villa__flag--done { background: rgba(4,10,18,0.6); color: rgba(242,236,223,0.85); border: 1px solid rgba(242,236,223,0.35); }
.pd-villa__flag--live { background: var(--bronze); color: #05101c; border: 1px solid var(--bronze);
  box-shadow: 0 8px 30px rgba(216,178,121,0.42); animation: flagPulse 2.8s var(--ease) infinite; }
@keyframes flagPulse { 0%, 100% { box-shadow: 0 8px 24px rgba(216,178,121,0.3); } 50% { box-shadow: 0 10px 42px rgba(216,178,121,0.62); } }
@media (prefers-reduced-motion: reduce) { .pd-villa__flag--live { animation: none; } }
@media (max-width: 640px) { .pd-villa__meta { margin-left: 0; width: 100%; } }

/* unit-type breakdown (Uluwatu — 1/2/3-bed, sold-out badges) */
.pd-units { padding-top: clamp(2rem, 5vw, 4rem); }
.pd-units__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.pd-unit { border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--ivory-2); display: flex; flex-direction: column; gap: 0.65rem; min-height: 12rem; }
.pd-unit--sold { opacity: 0.62; }
.pd-unit__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.pd-unit__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1; }
.pd-unit .pcard__status { position: static; }
.pd-unit__meta { color: #6b6455; font-size: 0.9rem; letter-spacing: 0.01em; }
.pd-unit__price { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin-top: auto; }
@media (max-width: 720px) { .pd-units__grid { grid-template-columns: 1fr; } .pd-unit { min-height: 0; } }

/* project credits — designed by / partnership / constructed by */
.pd-credits { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.2rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--page); isolation: isolate; }
.pd-credits__cell { display: flex; flex-direction: column; gap: 0.35rem; }
.pd-credits__cell--left { align-items: flex-start; text-align: left; }
.pd-credits__cell--right { align-items: flex-end; text-align: right; }
.pd-credits__cell--mid { align-items: center; text-align: center; }
.pd-credits__role { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 0.15rem; }
.pd-credits__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: var(--ink); }
.pd-credits__partners { display: flex; align-items: center; justify-content: center; gap: clamp(1.6rem, 3.4vw, 3rem); flex-wrap: wrap; }
/* The supplied partner marks are dark artwork on white, made for light backgrounds.
   On the navy we drop the plaque and render them as one elegant monochrome lockup:
   invert(1)+grayscale(1) recolours the ink to light and neutralises colour casts, and
   mix-blend-mode:screen knocks out the white background. All the same optical size. */
.pd-credits__logo { height: clamp(30px, 3.8vw, 46px); width: auto; max-width: clamp(120px, 15vw, 158px); object-fit: contain;
  filter: invert(1) grayscale(1) brightness(3); mix-blend-mode: screen;
  transition: transform 0.3s var(--ease); }
.pd-credits__cell:hover .pd-credits__logo { transform: translateY(-2px); }
/* pre-whitened transparent marks (e.g. Ventures) render direct — no invert/blend needed */
.pd-credits__logo[src$="-ventures.png"] { filter: none; mix-blend-mode: normal; opacity: 0.92; }
.pd-credits__cell:hover .pd-credits__logo[src$="-ventures.png"] { opacity: 1; }

/* solo development (funded/developed/sold in-house): two centred marks, no partner row */
.pd-credits--solo { display: flex; justify-content: center; align-items: flex-start; gap: clamp(2.2rem, 7vw, 5.5rem); flex-wrap: wrap; }
.pd-credits--solo .pd-credits__logo { height: clamp(40px, 5.2vw, 60px); max-width: 190px; }

@media (max-width: 700px) {
  .pd-credits { grid-template-columns: 1fr 1fr; row-gap: 1.8rem; }
  .pd-credits__cell--mid { grid-column: 1 / -1; order: 3; }
}

/* ============================================================
   MARKETPLACE — cinematic hero → stats → listings → CTA
   (Ambience layout, recoded in the LHG dark-navy brand)
   ============================================================ */
.mkt-hero { position: relative; min-height: clamp(520px, 82vh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--page); text-align: center; }
.mkt-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.0); filter: contrast(1.06) saturate(1.04) brightness(1.02); }
/* deeper, smoother blue fade from the lit ocean down into the navy of the stats section below */
.mkt-hero__grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,18,0.7) 0%, rgba(3,10,18,0.36) 30%, rgba(4,14,32,0.5) 58%, rgba(4,13,28,0.82) 82%, #030e1a 100%); }
.mkt-hero__inner { position: relative; z-index: 2; max-width: 60rem; margin-inline: auto; color: var(--ivory); }
.mkt-hero__eyebrow { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze-2); margin: 0; }
.mkt-hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 0.98; letter-spacing: -0.02em; margin-top: 0.7rem; text-shadow: 0 3px 40px rgba(0,0,0,0.4); }
.mkt-hero__lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.55; color: rgba(242,236,223,0.9); max-width: 42rem; margin: 1.2rem auto 0; text-shadow: 0 1px 18px rgba(0,0,0,0.4); }
.mkt-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; justify-content: center; margin-top: clamp(1.6rem, 3.5vh, 2.4rem); }
.mkt-btn { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.9rem 1.6rem; border-radius: 999px; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }
.mkt-btn i { font-style: normal; transition: transform 0.35s var(--ease); }
.mkt-btn--solid { background: var(--bronze); color: var(--charcoal); }
.mkt-btn--solid:hover { transform: translateY(-2px); background: var(--ivory); }
.mkt-btn--solid:hover i { transform: translateY(3px); }
.mkt-btn--ghost { border: 1px solid rgba(242,236,223,0.32); color: var(--ivory); }
.mkt-btn--ghost:hover { border-color: var(--bronze); background: rgba(216,178,121,0.1); }

.mkt-stats { background: var(--page); padding-block: clamp(2.6rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.mkt-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2rem); max-width: 66rem; margin-inline: auto; }
.mkt-stat { text-align: center; }
.mkt-stat + .mkt-stat { border-left: 1px solid var(--line); }
.mkt-stat dt { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--ivory); }
.mkt-stat dd { margin-top: 0.55rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink); opacity: 0.82; line-height: 1.4; padding-inline: 0.5rem; }
.mkt-stats__note { text-align: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); font-family: var(--serif); font-style: italic; font-size: 0.8rem; color: var(--stone); }

.market__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2.5rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.market__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -0.015em; margin-top: 0.4rem; }
.market__note { max-width: 34rem; font-size: 0.9rem; color: var(--ink); opacity: 0.82; line-height: 1.55; }
@media (max-width: 820px) {
  .mkt-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; }
  .mkt-stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 500px) {
  .mkt-stats__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .mkt-stat + .mkt-stat { border-left: 0; }
}

/* ---------- marketplace (buyer-facing available units) ---------- */
.market { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.market__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.mcard { display: flex; flex-direction: column; background: var(--ivory-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.mcard:hover { transform: translateY(-4px); border-color: var(--bronze-dim); box-shadow: 0 26px 60px rgba(0,0,0,0.4); }
.mcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mcard:hover .mcard__media img { transform: scale(1.045); }
.mcard__badges { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.mcard__status { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.32rem 0.6rem; border-radius: 2px; font-weight: 600; }
.mcard__body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: 0.32rem; flex: 1; }
.mcard__eyebrow { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); }
.mcard__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.1; }
.mcard__meta { font-size: 0.82rem; color: var(--ink); opacity: 0.9; }
.mcard__loc { font-size: 0.82rem; color: var(--ink); opacity: 0.9; }
.mcard__spec { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(242,236,223,0.6); margin-top: 0.2rem; }
.mcard__foot { margin-top: auto; padding-top: 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border-top: 1px solid var(--line); }
.mcard__price { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--ivory); }
.mcard__cta { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.mcard__cta i { font-style: normal; transition: transform 0.3s var(--ease); }
.mcard:hover .mcard__cta i { transform: translateX(3px); }

/* "On site" — construction footage of the actual build */
.pd-construction { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.pd-construction__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.08; margin-top: 0.4rem; }
.pd-construction__note { color: var(--ink); max-width: 62ch; margin-top: 1rem; line-height: 1.75; font-size: 0.95rem; }
.pd-construction__player { margin-top: 1.9rem; border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.pd-construction__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "On site" — drone construction-progress timeline (date-stepper) */
.pd-progress { padding-block: clamp(2.5rem, 5vw, 4.5rem); outline: none; }
.pd-progress__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.08; margin-top: 0.4rem; }
.pd-progress__note { color: var(--ink); max-width: 62ch; margin-top: 1rem; line-height: 1.75; font-size: 0.95rem; }
.pd-progress__stage { position: relative; margin-top: clamp(1.6rem, 3vw, 2.4rem); border-radius: 6px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--sand); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.pd-progress__frames { position: absolute; inset: 0; }
.pd-progress__stage { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pd-progress.is-dragging .pd-progress__stage { cursor: grabbing; }
.pd-progress__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.55s var(--ease); -webkit-user-select: none; user-select: none; pointer-events: none; }
.pd-progress__img.is-active { opacity: 1; }
.pd-progress__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.2rem;
  padding: clamp(2.6rem, 6vw, 4.2rem) clamp(1.2rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(180deg, transparent, rgba(3,10,20,0.85)); pointer-events: none; }
.pd-progress__cap-date { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--ivory); line-height: 1; }
.pd-progress__cap-text { font-size: clamp(0.82rem, 1.6vw, 0.95rem); color: rgba(242,236,223,0.82); letter-spacing: 0.02em; }

.pd-progress__timeline { position: relative; margin: clamp(1.7rem, 3vw, 2.5rem) 0 0; padding: 0 clamp(1.2rem, 4vw, 2.8rem) 2.7rem;
  cursor: ew-resize; touch-action: none; }
.pd-progress__rail { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.pd-progress__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bronze); border-radius: 2px; transition: width 0.6s var(--ease); }
.pd-progress__handle { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--bronze); border: 2px solid var(--page); box-sizing: border-box;
  box-shadow: 0 0 0 5px rgba(216,178,121,0.16), 0 4px 14px rgba(0,0,0,0.45); cursor: grab; z-index: 3;
  transition: left 0.6s var(--ease); }
.pd-progress__handle::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--page); }
.pd-progress.is-dragging .pd-progress__handle { cursor: grabbing; transition: none; }
.pd-progress.is-dragging .pd-progress__fill { transition: none; }
.pd-progress__nodes { position: relative; height: 0; }
.pd-progress__node { position: absolute; top: -6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  background: none; border: none; cursor: pointer; padding: 0; -webkit-appearance: none; appearance: none; z-index: 2; }
.pd-progress__node::before { content: ""; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  background: var(--page); border: 2px solid var(--line-light);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
.pd-progress__node.is-done::before,
.pd-progress__node.is-active::before { border-color: var(--bronze); background: var(--bronze); }
.pd-progress__tick { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); opacity: 0.5; font-variant-numeric: tabular-nums; transition: opacity 0.3s, color 0.3s; }
.pd-progress__node:hover .pd-progress__tick { opacity: 0.85; }
.pd-progress__node.is-active .pd-progress__tick { opacity: 1; color: var(--bronze); }
.pd-progress__node:focus-visible::before { border-color: var(--bronze); box-shadow: 0 0 0 4px rgba(216,178,121,0.30); }
@media (max-width: 640px) {
  .pd-progress__tick { font-size: 0.55rem; letter-spacing: 0.06em; }
  .pd-progress__timeline { padding-inline: 0.6rem; }
}

.pd-invest { background: var(--charcoal); color: var(--ivory); padding-block: clamp(3.5rem, 7vw, 6rem); }
.pd-invest__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.2rem; }
.pd-invest__value { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--bronze); line-height: 1; }
.pd-invest__label { display: block; margin-top: 0.8rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,241,234,0.62); }
.pd-invest__note { margin-top: 2.4rem; font-size: 0.86rem; color: rgba(244,241,234,0.5); max-width: 62ch; line-height: 1.7; }

.pd-highlights { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); padding-block: clamp(4rem, 9vw, 8rem); align-items: start; }
.pd-highlights__list { list-style: none; padding: 0; margin-top: 1.6rem; columns: 2; column-gap: 2.5rem; }
.pd-highlights__list li { padding: 0.7rem 0 0.7rem 1.4rem; position: relative; break-inside: avoid; border-bottom: 1px solid var(--line); }
.pd-highlights__list li::before { content: "—"; position: absolute; left: 0; color: var(--bronze-2); }
.pd-cta { background: var(--ivory-2); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.8rem, 3vw, 2.6rem); }
.pd-cta h3 { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; line-height: 1.1; }
.pd-cta p { color: var(--ink); font-size: 0.95rem; margin: 1rem 0 1.8rem; }
.pd-cta .btn { width: 100%; }
.pd-cta__form { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.4rem; }
.pd-cta__email { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 3px; background: var(--ivory-2);
  font: inherit; font-size: 0.95rem; color: var(--ink); transition: border-color 0.3s; }
.pd-cta__email::placeholder { color: #9c968a; }
.pd-cta__email:focus { outline: none; border-color: var(--bronze); }
.pd-cta__status { font-size: 0.8rem; color: var(--bronze-2); min-height: 1.1em; margin: 0.2rem 0 0; }
.pd-cta__ext { display: inline-block; margin-top: 1.3rem; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--bronze-2); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.pd-cta__ext:hover { border-bottom-color: var(--bronze-2); }
.pd-cta--closed { background: var(--charcoal); border-color: transparent; color: var(--ivory); }
.pd-cta--closed h3 { color: var(--ivory); }
.pd-cta--closed p { color: rgba(244,241,234,0.68); }

/* lightbox */
.pd-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(9,8,6,0.94); display: grid; place-items: center; padding: 4vw; }
.pd-lightbox[hidden] { display: none; }
.pd-lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 3px; }
.pd-lightbox__close { position: absolute; top: 1.4rem; right: 1.8rem; background: none; border: none; color: var(--ivory); font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: 0.8; }
.pd-lightbox__close:hover { opacity: 1; color: var(--bronze); }

@media (max-width: 820px) {
  .pd-overview, .pd-highlights { grid-template-columns: 1fr; }
  .pd-invest__grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
  .pd-highlights__list { columns: 1; }
  .pd-back { top: 5.2rem; }
}

/* ============================================================
   OPPORTUNITY (dark)
   ============================================================ */
.opportunity {
  background: var(--charcoal); color: var(--ivory);
  padding-block: var(--section-y);
}
.opportunity .section-title { color: var(--ivory); }
.opportunity__lead { color: rgba(244,241,234,0.72); font-size: 1.06rem; margin-top: 1.6rem; }

/* split-out bands: metrics kept up top; "three ways" sits under Selected Work */
.metrics-band { background: var(--charcoal); color: var(--ivory); padding-block: clamp(2.7rem, 5.4vw, 4.5rem); }
.metrics-band .metrics { margin-block: 0; padding-block: clamp(1.8rem, 4.2vw, 3.1rem); }
.participate { background: var(--charcoal); color: var(--ivory); padding-block: var(--section-y); }
.participate .process { margin-top: 0; border-top: none; padding-top: 0; text-align: center; }
.participate .process__title { text-align: center; }
.participate .process__steps { max-width: 66rem; margin-inline: auto; }

.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-block: clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light);
  padding-block: clamp(2.6rem, 5vw, 4rem);
}
.metric { text-align: center; }
.metric__value {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1; color: var(--bronze);
  font-variant-numeric: tabular-nums;
}
.metric__label { display: block; margin-top: 0.9rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,241,234,0.6); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.pillar__no { font-family: var(--serif); color: var(--bronze); font-size: 1rem; margin-bottom: 1.2rem; }
.pillar h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.9rem; }
.pillar p { color: rgba(244,241,234,0.66); font-size: 0.96rem; }

.process { margin-top: clamp(4rem, 8vw, 6.5rem); border-top: 1px solid var(--line-light); padding-top: clamp(3rem, 5vw, 4.5rem); }
.process__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 2.8rem; }
.process__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); counter-reset: step; }
.process__steps li { position: relative; }
.process__step-no { font-family: var(--serif); font-size: 1.6rem; color: var(--bronze); display: block; margin-bottom: 1rem; }
.process__steps h4 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-bottom: 0.6rem; }
.process__steps p { color: rgba(244,241,234,0.62); font-size: 0.92rem; }

@media (max-width: 820px) {
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .pillars, .process__steps { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { padding-block: var(--section-y); }
.about__grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.about__portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; }
.about__img { position: absolute; inset: -8% 0; height: 116%; background-image: var(--img); background-size: cover; will-change: transform; }
.about__text { margin-top: 1.4rem; max-width: 46ch; color: var(--ink); }
.about__quote { margin-top: 2.6rem; padding-left: 1.6rem; border-left: 2px solid var(--bronze); }
.about__quote p { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.35; }
.about__quote cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
@media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; } .about__portrait { max-width: 420px; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--charcoal-2); color: var(--ivory); padding-block: var(--section-y); }
.contact .section-title { color: var(--ivory); }
.contact__head { text-align: center; max-width: 40rem; margin-inline: auto; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.contact__lead { color: rgba(244,241,234,0.7); margin-top: 1.4rem; }

.contact__cta { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }
.form { max-width: 720px; margin-inline: auto; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 1.6rem; }
.field { display: block; margin-bottom: 1.6rem; }
.field > span { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,241,234,0.55); margin-bottom: 0.7rem; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line-light);
  padding: 0.7rem 0; color: var(--ivory); font-size: 1rem; border-radius: 0;
  transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; }
.field select option { color: #14110E; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--bronze); }
.field input::placeholder, .field textarea::placeholder { color: rgba(244,241,234,0.35); }

.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.form .btn--solid { background: var(--bronze-2); border-color: var(--bronze-2); color: var(--charcoal); }
.form .btn--solid:hover { background: var(--ivory); border-color: var(--ivory); }
.form__alt { font-size: 0.88rem; color: rgba(244,241,234,0.6); }
.form__alt a { color: var(--bronze); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.form__alt a:hover { border-bottom-color: var(--bronze); }
.form__status { margin-top: 1.4rem; font-size: 0.9rem; color: var(--bronze); min-height: 1.2em; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--charcoal); color: var(--ivory); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-light); }
.footer__lockup { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer__lockup .logo-mark { height: 1.7rem; }
.footer__tag { color: rgba(244,241,234,0.55); font-size: 0.86rem; margin-top: 0.8rem; }
.footer__nav { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer__nav a { font-size: 0.86rem; color: rgba(244,241,234,0.75); transition: color 0.3s; }
.footer__nav a:hover { color: var(--bronze); }
.footer__legal { padding-top: 2rem; display: grid; gap: 1rem; }
.footer__legal p { font-size: 0.76rem; color: rgba(244,241,234,0.45); }
.footer__disclaimer { max-width: 70ch; line-height: 1.7; }

/* ============================================================
   WHY INVEST — the investor's guide
   Cinematic Bali hero → a sticky, clickable question index
   beside scrolling editorial answers (choose one, or read
   straight through) → an image band → glossary → CTA.
   ============================================================ */
.wi-kicker { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--bronze-2); margin: 0; }

/* ---- hero (condensed so the first cards greet you on open) ---- */
.wi-hero { position: relative; min-height: clamp(460px, 66vh, 700px); display: flex; align-items: center; overflow: hidden; background: var(--page); text-align: center; padding-top: clamp(3.5rem, 8vh, 5.5rem); }
/* cool the sunset down out of orange-red and toward the site's navy/violet */
.wi-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); filter: saturate(0.8) brightness(0.96) hue-rotate(-12deg); }
.wi-hero__grade { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(46,26,74,0.5) 0%, rgba(40,26,70,0.22) 28%, rgba(20,16,46,0.14) 52%, rgba(6,12,30,0.55) 82%, rgba(3,12,22,0) 100%),
    linear-gradient(180deg, rgba(3,12,22,0.5) 0%, rgba(3,12,22,0.1) 26%, rgba(3,12,22,0.34) 58%, rgba(3,14,26,0.97) 100%); }
.wi-hero__inner { position: relative; z-index: 2; padding-block: clamp(2.4rem, 6vh, 4rem); color: var(--ivory); max-width: 48rem; margin-inline: auto; }
.wi-hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 10vw, 7rem); line-height: 0.92;
  letter-spacing: -0.02em; margin-top: 0.5rem; text-shadow: 0 3px 44px rgba(0,0,0,0.42), 0 2px 12px rgba(0,0,0,0.35); }
/* kicker sits over the bright sunset sky — lift it to ivory + shadow so it stays legible */
.wi-hero .wi-kicker { color: var(--ivory); text-shadow: 0 1px 14px rgba(0,0,0,0.55), 0 0 4px rgba(0,0,0,0.5); }
.wi-hero__lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.5;
  color: rgba(242,236,223,0.92); max-width: 40rem; margin: 1.1rem auto 0; text-shadow: 0 1px 20px rgba(0,0,0,0.4); }
.wi-hero__cue { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: clamp(1.2rem, 3vh, 2rem);
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,236,223,0.78); }
.wi-hero__cue::before { content: ""; width: 34px; height: 1px; background: var(--bronze); }
/* two minimalist jump buttons — forward the reader to either guide */
.wi-jump { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: clamp(1.3rem, 3.2vh, 2rem); justify-content: center; }
.wi-jump__btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.62rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(242,236,223,0.28); background: rgba(3,10,18,0.14); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease); }
.wi-jump__btn i { font-style: normal; color: var(--bronze); transition: transform 0.4s var(--ease); }
.wi-jump__btn:hover { border-color: var(--bronze); background: rgba(216,178,121,0.1); }
.wi-jump__btn:hover i { transform: translateY(2px); }

/* ---- journal: grid of Bali photo cards that flip to reveal the answer ---- */
.wi-journal { background: var(--page); color: var(--ivory); padding-block: clamp(2.4rem, 5vw, 4rem); }
.wi-journal__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: 0; text-align: center; margin: 0 auto clamp(1.9rem, 3.6vw, 2.8rem); }
/* two guides: a purchasing guide and a location guide, each its own section */
.wi-guide + .wi-guide { margin-top: clamp(2.4rem, 5vw, 4rem); }
.wi-guide__head { display: flex; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: clamp(1rem, 2.2vw, 1.5rem); padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.wi-guide__label { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 2.4vw, 1.85rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ivory); }
.wi-guide__meta { margin-left: auto; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-2); }
.wi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.3vw, 1.1rem); }

/* flip card */
.wi-card { position: relative; aspect-ratio: 4 / 5; perspective: 1600px; background: transparent; border: 0; padding: 0;
  width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wi-card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.75s var(--ease); }
.wi-card.is-flipped .wi-card__inner { transform: rotateY(180deg); }
.wi-card__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; overflow: hidden; }

.wi-card__front { background: var(--sand); }
.wi-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.wi-card:hover .wi-card__img, .wi-card:focus-visible .wi-card__img { transform: scale(1.06); filter: brightness(0.96); }
.wi-card__grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,18,0.9) 0%, rgba(3,10,18,0.55) 24%, rgba(3,10,18,0.14) 52%, rgba(3,10,18,0) 78%); }
.wi-card__body { position: absolute; inset: 0 0 auto 0; z-index: 2; padding: clamp(1.1rem, 2vw, 1.5rem); }
.wi-card__cat { display: block; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
.wi-card__q { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.12; margin-top: 0.4rem; text-shadow: 0 2px 18px rgba(0,0,0,0.55); }
.wi-card__more { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.75rem;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242,236,223,0.75); }
.wi-card__more i { font-style: normal; color: var(--bronze); font-size: 1.05em; transition: transform 0.5s var(--ease); }
.wi-card:hover .wi-card__more i { transform: rotate(180deg); }

/* the back reads like a little newspaper article — blue frame, serif column, drop cap */
.wi-card__back { transform: rotateY(180deg); background: var(--ivory-2);
  border: 1px solid rgba(124,158,196,0.38); box-shadow: inset 0 0 0 1px rgba(3,10,18,0.5);
  display: flex; flex-direction: column; padding: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--ink); }
.wi-card__back .wi-card__cat { position: static; text-shadow: none; color: var(--bronze-2); }
.wi-card__back-q { font-family: var(--serif); font-weight: 400; font-size: clamp(1.02rem, 1.5vw, 1.32rem); line-height: 1.12;
  color: var(--ivory); margin: 0.4rem 0 0.7rem; padding-bottom: 0.7rem; letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(216,178,121,0.3); }
.wi-card__back-a { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  font-family: var(--serif); font-weight: 300; font-size: clamp(0.86rem, 1.05vw, 0.95rem); line-height: 1.6; color: rgba(242,236,223,0.82); }
.wi-card__back-a > p:first-child::first-letter { float: left; font-family: var(--serif); font-weight: 400;
  font-size: 2.55em; line-height: 0.82; padding: 0.02em 0.12em 0 0; color: var(--bronze-2); }
.wi-card__back-a p { margin-bottom: 0.6rem; }
.wi-card__back-a p:last-child { margin-bottom: 0; }
.wi-card__slot { clear: both; margin-top: 0.7rem !important; padding-top: 0.6rem;
  border-top: 1px dashed rgba(216,178,121,0.42); font-family: var(--sans); font-size: 0.7rem;
  letter-spacing: 0.02em; line-height: 1.4; color: var(--bronze-2); }
.wi-card__hint { align-self: flex-start; margin-top: 0.8rem; pointer-events: none;
  font-family: var(--sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone);
  display: inline-flex; align-items: center; gap: 0.4em; }
@media (prefers-reduced-motion: reduce) { .wi-card__inner { transition: none; } }

/* ---- glossary + note ---- */
.wi-outro { background: var(--page); color: var(--ivory); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.wi-terms { max-width: 60rem; margin: 0 auto; }
.wi-terms .wi-kicker { margin-bottom: 1.4rem; text-align: center; }
.wi-terms__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem clamp(1.4rem, 3vw, 2.4rem); }
.wi-term dt { font-family: var(--serif); color: var(--ivory); font-size: 1rem; line-height: 1.2; }
.wi-term dt span { color: var(--stone); font-size: 0.82rem; }
.wi-term dd { font-size: 0.85rem; color: var(--ink); opacity: 0.72; margin-top: 0.25rem; line-height: 1.5; }
.wi-note { text-align: center; font-family: var(--serif); font-style: italic; font-size: 0.84rem;
  color: var(--stone); max-width: 44rem; margin: clamp(2rem, 4vw, 3rem) auto 0; line-height: 1.6; }

/* ---- CTA ---- */
.wi-cta { background: var(--charcoal); color: var(--ivory); text-align: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
.wi-cta .wi-kicker { margin-bottom: 1rem; }
.wi-cta h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; }
.wi-cta p { color: rgba(242,236,223,0.72); max-width: 40rem; margin: 1.2rem auto 2.2rem; }
.wi-cta__actions { display: flex; align-items: center; justify-content: center; gap: 1.4rem 2rem; flex-wrap: wrap; }
.wi-cta__link { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--bronze);
  display: inline-flex; align-items: center; gap: 0.5em; }
.wi-cta__link i { font-style: normal; color: var(--bronze-2); transition: transform 0.4s var(--ease); }
.wi-cta__link:hover i { transform: translateX(5px); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .wi-grid { grid-template-columns: repeat(2, 1fr); }
  .wi-terms__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wi-grid { grid-template-columns: 1fr 1fr; }
  .wi-terms__grid { grid-template-columns: 1fr; }
  /* tighten the article back so the full answer + blueprint slot fit the card */
  .wi-card__back { padding: 1.05rem 1.05rem 0.9rem; }
  .wi-card__back-a { font-size: 0.82rem; line-height: 1.5; }
  .wi-card__back-a > p:first-child::first-letter { font-size: 2.3em; padding-right: 0.1em; }
  .wi-card__back-a p { margin-bottom: 0.5rem; }
  .wi-card__slot { font-size: 0.66rem; margin-top: 0.55rem !important; padding-top: 0.5rem; }
  .wi-card__hint { margin-top: 0.6rem; }
}
@media (max-width: 420px) {
  .wi-grid { grid-template-columns: 1fr; }   /* full-width single column */
  .wi-card { aspect-ratio: 5 / 6.3; }        /* a touch taller so long articles flip back cleanly */
}
@media (prefers-reduced-motion: reduce) { .wi-hero__bg { transform: none; } .wi-card__img { transition: none; } }

/* ============================================================
   MOTION / reveal defaults (JS adds .is-in)
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }

/* reduced motion: everything visible, no scrub pin */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero__phase { opacity: 1 !important; transform: none !important; }
  .project__img, .about__img { transition: none; }
  .hero__scrollcue { display: none; }
  .invest-hero__bg { transform: none; }
}

/* ============================================================
   ENQUIRE / PARTNER PAGE — the whole enquiry framed by the
   Lempuyang "gates of heaven" split gate, symmetrical, centred.
   Form first, then four transparent boxes. One section.
   ============================================================ */
.enq { position: relative; overflow: hidden; background: var(--page); color: var(--ivory);
  padding-top: clamp(6.5rem, 14vh, 9.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
/* gate blown up + zoomed so the two pillars cap the sides; content is
   narrowed to sit INSIDE the central gap with no overlap onto the stone */
.enq__bg { position: absolute; inset: 0; background-size: cover; background-position: center 48%;
  transform: scale(1.4); transform-origin: 50% 48%; filter: saturate(0.98) brightness(0.82); }
.enq__grade { position: absolute; inset: 0;
  background:
    radial-gradient(50% 62% at 50% 50%, rgba(3,11,21,0.6) 0%, rgba(3,11,21,0.24) 60%, rgba(3,11,21,0) 82%),
    linear-gradient(180deg, rgba(3,14,26,0.4) 0%, rgba(3,14,26,0.56) 26%, rgba(3,14,26,0.82) 55%, rgba(3,14,26,0.95) 82%, #030e1a 100%); }
/* column sits centred in front of the gate, towers framing the sides */
.enq__inner { position: relative; z-index: 2; max-width: 30rem; margin-inline: auto; text-align: center; }
.enq__eyebrow { font-size: 0.64rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.enq__title { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; white-space: nowrap;
  font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.0; margin-top: clamp(0.7rem, 1.6vh, 1.1rem);
  text-shadow: 0 3px 40px rgba(0,0,0,0.6); }
.enq__lead { font-family: var(--serif); font-weight: 300; line-height: 1.45;
  font-size: clamp(0.98rem, 1.6vw, 1.18rem); color: rgba(242,236,223,0.9);
  margin: 0.9rem auto clamp(1.8rem, 4vw, 2.6rem); text-shadow: 0 1px 20px rgba(0,0,0,0.5); }

/* the form sits centred in front of the gate — two columns so it breathes */
.enq__form { max-width: 30rem; margin-inline: auto; text-align: left; }
.enq__form .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-bottom: 0; }
.enq__form .field > span { color: rgba(242,236,223,0.8); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.enq__form .field input, .enq__form .field select, .enq__form .field textarea { border-bottom-color: rgba(242,236,223,0.4); }
/* Send enquiry centred in gold at the bottom; contact line beneath it */
.enq__form .form__foot { flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; text-align: center; margin-top: 1.4rem; }
.enq__form .form__alt { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.enq__form .form__status { text-align: center; }

/* four transparent NON-clickable hooks — below the form, gate showing through */
.enq__paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.6rem, 1.2vw, 0.9rem);
  margin-top: clamp(2rem, 4.5vw, 3rem); pointer-events: none; }
.enq-box { display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(3.2rem, 5vw, 4rem); padding: 0.7rem 0.8rem;
  border: 1px solid rgba(242,236,223,0.28); border-radius: 5px; background: transparent;
  font-family: var(--serif); font-weight: 400; font-size: clamp(0.95rem, 1.5vw, 1.18rem); color: var(--ivory);
  text-shadow: 0 1px 12px rgba(0,0,0,0.7); }

/* mobile: ease the zoom and let content fill — pillar framing is a desktop effect */
@media (max-width: 640px) {
  .enq__bg { transform: scale(1.04); transform-origin: 50% 44%; }
  .enq__inner, .enq__form { max-width: 22rem; }
  .enq__paths { grid-template-columns: 1fr 1fr; }
}