/* =========================================================
   LIZARD Real Estate Ibiza
   Cinematic ultra-minimal luxury landing page
   Aman Hotels · Apple · The Row · Ibiza sunset editorial
   ========================================================= */

:root {
  /* Near-pure-white architectural palette — gallery canvas. The Ibiza
     atmosphere (sunset radials, logo aura, dusk vignette) now sits on an
     almost luminous white base. Stops between bg / bg-deep / bg-edge are
     intentionally very close so the wash gradient produces no visible band. */
  --bg:            #fdfcf9;   /* near-pure white */
  --bg-deep:       #f9f6f0;   /* whisper warm — closer to bg, no banding */
  --bg-edge:       #f3ece0;   /* pale vignette — only at far corners */
  --ink:           #2b261f;   /* near-black, warm */
  --ink-soft:      #5a5046;   /* secondary editorial copy */
  --ink-faint:     #a39686;   /* faded sand */
  --rule:          rgba(43, 38, 31, 0.16);
  --rule-soft:     rgba(43, 38, 31, 0.10);
  --sienna:        #b5704a;   /* Ibiza terracotta accent (used sparingly) */
  --sienna-deep:   #a04d2c;   /* deep baked terracotta — editorial headline accent */
  --pool:          #4f9499;   /* dusty Ibiza pool turquoise */
  --petrol:        #3a6670;   /* dark petrol — readable editorial accent */
  --petrol-deep:   #1c4a52;   /* deep petrol from logo gradient */
  --sunset-gold:   #c4a062;   /* warm editorial sunset gold */
  --gold:          #d8a878;   /* warm sunset gold for the light sweep */

  /* Intro phases — landing sequence (tune delays in script.js LANDING + INTRO_SPEED) */
  --intro-speed:       2;      /* 2 = half as fast (double duration) */
  --phase-art:         var(--landing-vedra-fade-ms);
  --phase-logo:        3500ms; /* fixed — LIZARD fade after Vedrà */
  --phase-headline:    calc(3000ms * var(--intro-speed));
  --phase-copy:        calc(3000ms * var(--intro-speed));
  --phase-glow:        calc(3200ms * var(--intro-speed));
  --phase-atmosphere:  calc(2000ms * var(--intro-speed));
  --ease-fade:         linear; /* steady constant fade — no punchy easing */
  --ease-in-out:       cubic-bezier(0.42, 0, 0.58, 1);

  /* Landing Phase 1 — Es Vedrà soft → clear (duration set from script.js) */
  --landing-vedra-fade-ms:        6000ms;
  --landing-vedra-hold-ms:        2000ms;
  --landing-vedra-opacity-max:    0.28;
  --landing-vedra-contrast-in:    0.36;
  --landing-vedra-contrast-out:   0.42;
  --landing-vedra-saturate-out:   0.38;
  --landing-vedra-brightness-out: 1.08;
  --landing-glow-phase1:          1;

  /* Landing — pale pool-teal veil (Ibiza turquoise, pool-villa tone) */
  --landing-pool-veil-light: rgba(158, 216, 210, 0.06);
  --landing-pool-veil-mid:   rgba(136, 200, 194, 0.10);
  --landing-pool-veil-deep:  rgba(118, 185, 178, 0.16);

  /* Enquiry — Bungalow Hintergrund (pale villa wash) */
  --enquiry-bungalow-opacity:       0.41;
  --enquiry-bungalow-opacity-mobile: 0.47;

  /* Curious CTA ring — landing */
  --cta-ring-scale: 0.83;

  /* Cinematic timing */
  --ease-cinema:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-breath:   cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  overflow-x: clip;
}

html, body { height: 100%; }

body {
  margin: 0;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
  min-height: 100dvh;
  position: relative;
  letter-spacing: 0.01em;
}

button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
.cta-curious,
.enquiry-option,
.sound-toggle,
.access__button,
.enquiry-form__submit,
.enquiry-back,
.private-access-link {
  touch-action: manipulation;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 900ms var(--ease-cinema), color 900ms var(--ease-cinema);
}
a:hover { border-bottom-color: var(--ink); }

/* =========================================================
   Ambient layers: warm wash + sunset glow + delicate grain
   ========================================================= */

.ambient-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Very large, very gentle radial — the centre stays uniformly white for
       a long way out, then drifts almost imperceptibly to the whisper-warm
       pool, and only at the far corners falls into the pale dusk vignette.
       Doubled --bg stops (0 → 38%) prevent any horizontal seam from forming
       above the logo. */
    radial-gradient(150% 115% at 50% 55%,
      var(--bg)       0%,
      var(--bg-deep)  78%,
      var(--bg-edge)  100%
    ),
    /* Almost imperceptible warm tint — shifted toward soft gold so the
       page reads as golden-hour-tinted rather than sand-toned. */
    linear-gradient(180deg, rgba(255, 240, 200, 0.02), rgba(232, 200, 138, 0.015));
  animation: washBreathe 28s var(--ease-breath) infinite alternate;
}

@keyframes washBreathe {
  0%   { filter: brightness(1.00) saturate(1.00); }
  100% { filter: brightness(1.03) saturate(1.05); }
}

/* Warm Ibiza sunset light — three focused radials that read as directional
   light sources on an architectural off-white canvas, not a generalised wash. */
.ambient-sunset {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Warm gold-orange — a touch richer than pale lemon, still editorial */
    radial-gradient(72% 56% at 72% 20%,
      rgba(255, 188, 130, 0.10) 0%,
      rgba(255, 188, 130, 0.04) 50%,
      rgba(255, 188, 130, 0)    100%
    ),
    /* Central warmth — honey gold-orange pool around the logo */
    radial-gradient(46% 40% at 50% 42%,
      rgba(255, 168, 110, 0.05) 0%,
      rgba(255, 228, 158, 0.04) 55%,
      rgba(255, 228, 158, 0)    100%
    ),
    /* Lower-left reflection — soft sunset gold */
    radial-gradient(56% 46% at 16% 80%,
      rgba(245, 200, 125, 0.09) 0%,
      rgba(245, 200, 125, 0.025) 55%,
      rgba(245, 200, 125, 0)    100%
    );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 4200ms var(--ease-cinema);
  animation: sunsetDrift 24s var(--ease-breath) infinite alternate;
  will-change: opacity, transform;
}
.is-loaded .ambient-sunset { opacity: 0.88; }

@keyframes sunsetDrift {
  0%   { transform: translate3d(2%, -1.2%, 0) scale(1.00); }
  100% { transform: translate3d(-5%, 3.5%, 0) scale(1.12); }
}

.ambient-grain {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* =========================================================
   Backdrop: Es Vedrà — ghost-like, very slow drift + zoom
   ========================================================= */

.backdrop {
  position: fixed;
  inset: 0;
  margin: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.backdrop__art {
  position: absolute;
  left: 50%;
  bottom: -4vh;
  width: min(1600px, 118vw);
  max-width: none;
  transform: translate(-50%, 0) scale(1.05);
  opacity: 0;
  filter:
    saturate(0.50)
    contrast(0.69)
    brightness(0.97)
    sepia(0.22);
  mix-blend-mode: multiply;
  /* Very slow breathing zoom + drift, like distant weather */
  animation: drift 64s var(--ease-breath) infinite alternate;
  will-change: transform, opacity;
}

.backdrop.is-in .backdrop__art {
  /* Recognisable landmark — landscape presence without imposition */
  opacity: 0.32;
  filter:
    saturate(0.58)
    contrast(0.70)
    brightness(1.02)
    sepia(0.18)
    blur(0);
  transition:
    opacity 5200ms var(--ease-cinema),
    filter 5000ms ease-in-out;
}

/* Landing — calmer wash motion; same canvas as enquiry */
.landing-page .ambient-wash {
  animation: none;
}

.landing-page .ambient-grain {
  opacity: 0;
}

.landing-page .backdrop {
  background: var(--bg);
}

/* Landing — intro: Phase 1 sun-mist + Es Vedrà soft → clear */
.landing-page .backdrop__art {
  opacity: 0;
  filter:
    blur(10px)
    contrast(var(--landing-vedra-contrast-in))
    saturate(0.38)
    brightness(1.06)
    sepia(0.10);
  animation: none;
  transition: none;
}

.landing-page .backdrop.is-in .backdrop__art {
  opacity: var(--landing-vedra-opacity-max);
  filter:
    blur(0)
    contrast(var(--landing-vedra-contrast-out))
    saturate(var(--landing-vedra-saturate-out))
    brightness(var(--landing-vedra-brightness-out))
    sepia(0.08);
  transition:
    opacity var(--landing-vedra-fade-ms) var(--ease-fade),
    filter var(--landing-vedra-fade-ms) var(--ease-fade);
}

/* Lower third — pale pool-blue veil below Es Vedrà */
.landing-page .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--landing-vedra-fade-ms) var(--ease-fade);
  background:
    linear-gradient(180deg,
      rgba(253, 252, 249, 0) 0%,
      rgba(253, 252, 249, 0) 62%,
      rgba(253, 252, 249, 0.05) 72%,
      var(--landing-pool-veil-light) 82%,
      var(--landing-pool-veil-mid) 91%,
      var(--landing-pool-veil-deep) 100%),
    radial-gradient(88% 46% at 50% 100%,
      rgba(128, 198, 192, 0.09) 0%,
      rgba(128, 198, 192, 0) 68%);
}

.landing-page .backdrop.is-in::after {
  opacity: 1;
  transition: opacity var(--landing-vedra-fade-ms) var(--ease-fade);
}

.landing-page .ambient-sunset {
  opacity: 0;
  animation: none;
  transition: opacity var(--landing-vedra-fade-ms) var(--ease-fade);
  mix-blend-mode: screen;
  background:
    radial-gradient(70% 56% at 50% 40%,
      rgba(255, 198, 110, 0.47) 0%,
      rgba(255, 210, 130, 0.21) 40%,
      rgba(255, 210, 130, 0) 72%
    ),
    radial-gradient(92% 68% at 72% 18%,
      rgba(255, 222, 145, 0.23) 0%,
      rgba(255, 222, 145, 0) 72%
    ),
    radial-gradient(118% 88% at 50% 34%,
      rgba(255, 228, 158, 0.16) 0%,
      rgba(255, 228, 158, 0) 68%
    );
}

.landing-page.is-sun-glow .ambient-sunset {
  opacity: var(--landing-glow-phase1);
}

.landing-page.is-art-in .ambient-sunset,
.landing-page.is-loaded .ambient-sunset {
  opacity: 0.94;
  transition: opacity var(--phase-glow) var(--ease-fade);
}

.landing-page .logo-aura {
  display: block;
  opacity: 0;
  filter: blur(17px);
  transform: scale(1.2);
  transition: none;
}

.landing-page.is-sun-glow .logo-aura {
  background:
    radial-gradient(48% 52% at 50% 50%,
      rgba(255, 220, 142, 0.28) 0%,
      rgba(255, 200, 110, 0.16) 28%,
      rgba(255, 180, 90, 0.06) 54%,
      rgba(255, 180, 90, 0) 78%);
  animation: none;
}

.landing-page.is-logo-in .logo-aura {
  animation: landingLogoAuraFade var(--phase-logo) var(--ease-fade) forwards;
}

.landing-page .logo-sunlight {
  display: block;
  opacity: 0;
  transition: none;
}

.landing-page .logo-sweep {
  display: none;
}

@keyframes landingLogoFade {
  from {
    opacity: 0;
    filter:
      brightness(1.08)
      drop-shadow(0 8px 24px rgba(48, 38, 28, 0));
  }
  to {
    opacity: 1;
    filter:
      brightness(1)
      drop-shadow(0 8px 24px rgba(48, 38, 28, 0.08))
      drop-shadow(0 2px 6px rgba(48, 38, 28, 0.05));
  }
}

@keyframes landingLogoAuraFade {
  from {
    opacity: 0.18;
    transform: scale(1.18);
  }
  to {
    opacity: 0.58;
    transform: scale(1.22);
  }
}

@keyframes landingLogoSunFade {
  from { opacity: 0; }
  to   { opacity: 0.58; }
}

/* Hidden until Phase 2 — warm canvas always visible */
.landing-page .logo {
  width: clamp(259px, 37.4vw, 490px);
  opacity: 0;
  visibility: hidden;
  transform: none;
  filter: brightness(1.08);
  transition: none;
  will-change: opacity, filter;
}

.landing-page.is-logo-in .logo {
  visibility: visible;
  animation: landingLogoFade var(--phase-logo) var(--ease-fade) forwards;
}

.landing-page.is-logo-in .logo-sunlight {
  animation: landingLogoSunFade var(--phase-logo) var(--ease-fade) forwards;
}

.landing-page .logo-wrap {
  overflow: visible;
  isolation: auto;
}

/* Copy — linear opacity fade, same language as Es Vedrà */
.landing-page .reveal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Stay in layout (no display:none) so lines never push content upward when they fade in */
.landing-page .hero p.reveal:not(.is-in):not(.is-revealing),
.landing-page .hero h1.reveal:not(.is-in):not(.is-revealing),
.landing-page .hero div.reveal:not(.is-in):not(.is-revealing) {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Same fade language as desktop — override generic kicker 2.6s transition */
.landing-page .hero .eyebrow.reveal,
.landing-page .hero .kicker.reveal,
.landing-page .hero .headline.reveal,
.landing-page .hero .rule.reveal {
  transform: none;
  transition: none;
  will-change: opacity;
}

.landing-page .landing-mid .cta-wrap.reveal:not(.is-in):not(.is-revealing) {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.landing-page .hero .reveal.is-revealing {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.landing-page .landing-mid .cta-wrap.reveal.is-revealing {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.landing-page .hero .reveal.is-in {
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--phase-copy) var(--ease-fade);
}

.landing-page .landing-mid .cta-wrap.reveal.is-in {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--phase-copy) var(--ease-fade);
}

.landing-page .eyebrow.reveal.is-in {
  opacity: 0.8;
}

.landing-page .kicker.reveal.is-in {
  font-style: italic;
  opacity: 0.94;
  color: rgba(255, 138, 48, 0.92);
}

.landing-page .headline.reveal.is-in {
  opacity: 1;
  transition: opacity var(--phase-headline) var(--ease-fade);
}

.landing-page .headline.reveal.is-in::after {
  display: none;
}

/* Chrome — fixed UI */
.landing-page .sound-toggle.reveal:not(.is-in):not(.is-revealing),
.landing-page .private-access-link.reveal:not(.is-in):not(.is-revealing) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.landing-page .sound-toggle.reveal.is-revealing,
.landing-page .sound-toggle.reveal.is-in,
.landing-page .private-access-link.reveal.is-revealing,
.landing-page .private-access-link.reveal.is-in {
  visibility: visible;
}

.landing-page .sound-toggle.reveal.is-revealing,
.landing-page .private-access-link.reveal.is-revealing {
  opacity: 0;
  transition: none;
}

.landing-page .sound-toggle.reveal.is-in,
.landing-page .private-access-link.reveal.is-in {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--phase-copy) var(--ease-fade);
}

.landing-page .headline__line {
  display: inline-block;
}

.landing-page .headline.reveal.is-in .headline__line {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes kickerSunsetOrangeGlow {
  0% {
    color: rgba(225, 105, 28, 0.82);
    text-shadow:
      0 0 12px rgba(255, 130, 40, 0.52),
      0 0 26px rgba(255, 100, 20, 0.32);
  }
  100% {
    color: rgba(255, 158, 55, 0.98);
    text-shadow:
      0 0 18px rgba(255, 145, 35, 0.68),
      0 0 36px rgba(255, 115, 15, 0.42),
      0 0 54px rgba(255, 90, 0, 0.22);
  }
}

@keyframes kickerNeonPinkGlow {
  0% {
    color: rgba(255, 148, 178, 0.58);
    text-shadow:
      0 0 10px rgba(255, 105, 150, 0.28),
      0 0 22px rgba(255, 80, 130, 0.14);
  }
  100% {
    color: rgba(255, 198, 212, 0.86);
    text-shadow:
      0 0 16px rgba(255, 130, 168, 0.48),
      0 0 32px rgba(255, 95, 145, 0.28),
      0 0 48px rgba(255, 70, 120, 0.12);
  }
}

@keyframes drift {
  0%   { transform: translate(-50%, 0)      scale(1.04); }
  50%  { transform: translate(-50.6%, -0.8vh) scale(1.07); }
  100% { transform: translate(-50%, -1.8vh) scale(1.10); }
}

/* =========================================================
   Layout
   ========================================================= */

.stage,
.footnote { position: relative; z-index: 3; }

.stage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 160px);
  padding: clamp(48px, 9vh, 140px) clamp(24px, 5vw, 64px);
}

.hero {
  text-align: center;
  max-width: 1100px;
  width: 100%;
}

/* =========================================================
   Logo + atmospheric layers
   (logo-aura · logo · logo-sunlight · logo-sweep)
   ========================================================= */

.logo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(40px, 7vh, 100px);
  padding-bottom: 4px;
  overflow: visible;
  isolation: isolate;
}

/* +20% larger main logo */
.logo {
  width: clamp(216px, 31.2vw, 408px);
  height: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.984);
  /* Filter list kept consistent across both states so the transition
     interpolates each function (blur + drop-shadows) cleanly. */
  filter:
    blur(4px)
    drop-shadow(0 4px 14px rgba(48, 38, 28, 0))
    drop-shadow(0 2px 6px  rgba(48, 38, 28, 0));
  transition:
    opacity 3400ms var(--ease-cinema) 1600ms,
    transform 3400ms var(--ease-cinema) 1600ms,
    filter 3400ms var(--ease-cinema) 1600ms;
  position: relative;
  z-index: 2;
  will-change: opacity, transform, filter;
}

.is-loaded .logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Subtle depth shadow lifts the logo off the warm background without
     ever looking heavy or ad-like — like ink on textured paper. */
  filter:
    blur(0)
    drop-shadow(0 8px 24px rgba(48, 38, 28, 0.10))
    drop-shadow(0 2px 6px  rgba(48, 38, 28, 0.06));
  /* Very gentle, slow breathing zoom — barely perceptible */
  animation: logoBreathe 22s var(--ease-breath) 6200ms infinite alternate;
}

@keyframes logoBreathe {
  0%   { transform: translateY(0) scale(1.000); }
  100% { transform: translateY(-2px) scale(1.012); }
}

/* Warm atmospheric halo BEHIND the logo — tighter & richer late-Ibiza gold */
.logo-aura {
  position: absolute;
  inset: -30% -25% -30% -25%;
  z-index: 1;
  pointer-events: none;
  background:
    /* Warm gold-orange halo behind the logo */
    radial-gradient(48% 52% at 50% 50%,
      rgba(255, 220, 142, 0.30) 0%,
      rgba(255, 212, 135, 0.17) 26%,
      rgba(245, 198, 118, 0.08) 52%,
      rgba(245, 198, 118, 0)    78%);
  filter: blur(16px);
  opacity: 0;
  transform: scale(1.16);
  transition: opacity 4000ms var(--ease-cinema) 2400ms;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.is-loaded .logo-aura {
  opacity: 0.55;
  /* Slow drift + breathe — starts after the fade-in completes (~6.4s) */
  animation:
    auraDrift   28s var(--ease-breath) 6400ms infinite alternate,
    auraBreathe 20s var(--ease-breath) 6400ms infinite alternate;
}

@keyframes auraDrift {
  0%   { transform: scale(1.08) translate(-3.5%, 2%); }
  100% { transform: scale(1.28) translate(3.5%, -2.5%); }
}

@keyframes auraBreathe {
  0%   { opacity: 0.65; filter: blur(12px); }
  100% { opacity: 0.94; filter: blur(22px); }
}

/* Soft late-golden sunlight catching the logo — directional from upper-left.
   Slightly amber & a touch stronger so it reads as real sunset light on the
   typography rather than a uniform wash.

   The element is extended generously upward (top inset -50%) so the radial
   gradient has room to fade asymptotically to zero ABOVE the logo — without
   the old visible horizontal clip line that formed at the element edge. The
   centre and Y-radius are recalibrated so the glow visually sits in the
   exact same place on the logo as before. */
.logo-sunlight {
  position: absolute;
  inset: -55% -15% -55% -15%;
  z-index: 3;
  pointer-events: none;
  background:
    /* Gold-orange directional light — late Ibiza sunset on the logo */
    radial-gradient(38% 38% at 26% 40%,
      rgba(255, 222, 148, 0.36) 0%,
      rgba(255, 215, 138, 0.13) 36%,
      rgba(255, 215, 138, 0)    100%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 3600ms var(--ease-cinema) 3200ms;
  will-change: transform, opacity;
}
.is-loaded .logo-sunlight {
  opacity: 0.78;
  /* Directional light slowly shifts across the logo (~6.8s after fade-in) */
  animation:
    sunlightDrift   22s var(--ease-breath) 6800ms infinite alternate,
    sunlightBreathe 18s var(--ease-breath) 6800ms infinite alternate;
}

@keyframes sunlightDrift {
  0%   { transform: translate(-5%, 3%); }
  100% { transform: translate(5.5%, -3.5%); }
}

@keyframes sunlightBreathe {
  0%   { opacity: 0.58; }
  100% { opacity: 0.92; }
}

/* Golden light sweep across the logo — masked to the logo silhouette */
.logo-sweep {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  width: clamp(216px, 31.2vw, 408px);
  aspect-ratio: 624 / 319;
  margin: auto;
  /* Mask the sweep to the logo glyph shape so it reads as metallic reflection */
  -webkit-mask-image: url("assets/logo.svg");
          mask-image: url("assets/logo.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background: linear-gradient(
    115deg,
    rgba(255, 235, 200, 0) 0%,
    rgba(255, 235, 200, 0) 38%,
    rgba(255, 224, 178, 0.55) 49%,
    rgba(255, 240, 210, 0.85) 50%,
    rgba(255, 224, 178, 0.55) 51%,
    rgba(255, 235, 200, 0) 62%,
    rgba(255, 235, 200, 0) 100%
  );
  background-size: 280% 100%;
  background-repeat: no-repeat;
  background-position: -180% 0;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: background-position, opacity;
}

.is-swept .logo-sweep {
  animation:
    sweepGlide 4200ms var(--ease-cinema) 1 forwards,
    sweepFade  4200ms linear              1 forwards;
}

@keyframes sweepGlide {
  0%   { background-position: -180% 0; }
  100% { background-position:  280% 0; }
}
@keyframes sweepFade {
  0%   { opacity: 0;    }
  18%  { opacity: 0.95; }
  82%  { opacity: 0.95; }
  100% { opacity: 0;    }
}

/* =========================================================
   Typography
   ========================================================= */

.eyebrow {
  margin: 0 0 clamp(18px, 2.8vh, 32px);
  font-family: var(--sans);
  font-size: clamp(10px, 0.85vw, 11px);
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}

.eyebrow.reveal.is-in {
  opacity: 0.8;
}

.kicker {
  margin: 0 0 clamp(22px, 3.4vh, 36px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 24px);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.kicker .apos { margin: 0 0.02em; }

/* ---------- Kicker: quiet supporting line ----------
   "Launching Summer '26" — elegant fade-in; stays secondary to the headline. */

.kicker.reveal {
  opacity: 0;
  transform: none;
  transition: opacity 2600ms var(--ease-cinema);
  will-change: opacity, color;
}

.kicker.reveal.is-in {
  animation: none;
  opacity: 0.72;
  color: var(--ink-soft);
  font-style: italic;
  transition: opacity 2600ms var(--ease-cinema);
}

.rule {
  width: clamp(40px, 5vw, 64px);
  height: 1px;
  background: var(--rule);
  margin: clamp(22px, 3.4vh, 36px) auto clamp(22px, 3.4vh, 36px);
  transform-origin: center;
  transform: scaleX(0);
  transition:
    transform 2400ms var(--ease-cinema),
    opacity   2400ms var(--ease-cinema);
}

/* ---------- Headline ("Selected Off-Market Listings")
   The centrepiece — first sentence of a great property brochure. */

.headline {
  margin: 0;
  padding: 0 clamp(8px, 2vw, 16px);
  font-size: clamp(28px, 4.2vw, 54px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.25;
  position: relative;
}

.headline__line {
  display: inline;
}

.headline__line + .headline__line {
  margin-left: 0.32em;
}

.headline__line--italic {
  font-style: italic;
  font-weight: 300;
  color: inherit;
  opacity: 1;
}

.headline.reveal.is-in { opacity: 1; }

/* Non-landing fallback only */
body:not(.landing-page) .headline.reveal.is-in { opacity: 1; }

/* =========================================================
   Footer
   ========================================================= */

.footnote {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(22px, 3vw, 40px)
           max(clamp(24px, 5vw, 64px), env(safe-area-inset-right))
           max(clamp(28px, 3.6vw, 48px), calc(env(safe-area-inset-bottom) + 12px))
           max(clamp(24px, 5vw, 64px), env(safe-area-inset-left));
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Private Listings Access ---------- */

.access {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: min(360px, 70vw);
  max-width: 460px;
  /* The form is part of the reveal pipeline */
}

.access__label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  /* Slight optical lift so the label doesn't shout */
  opacity: 0.92;
}

/* Editorial subtitle — explains the field in refined, invitation-only voice.
   Italic serif keeps it warm and personal; right-aligned to sit in column. */
.access__intro {
  margin: 2px 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  text-align: right;
  max-width: 40ch;
  text-transform: none;
  opacity: 0.92;
}

.access__row {
  display: flex;
  align-items: baseline;
  gap: 22px;
  width: 100%;
}

.access__input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 2px 10px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.28em;
  color: var(--ink);
  caret-color: var(--sienna);
  outline: none;
  transition:
    border-color 1200ms var(--ease-cinema),
    color 1200ms var(--ease-cinema);
}

.access__input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.14em;
  opacity: 0.55;
}
.access__input:focus::placeholder {
  opacity: 0.32;
  transition: opacity 900ms var(--ease-cinema);
}

.access__input:hover { border-bottom-color: var(--ink-soft); }

.access__input:focus,
.access__input:focus-visible {
  border-bottom-color: var(--ink);
}

/* Remove default password reveal in some browsers for a quieter look */
.access__input::-ms-reveal,
.access__input::-ms-clear { display: none; }

.access__button {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 0 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  transition: color 900ms var(--ease-cinema);
}

.access__button-label {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.access__button-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0.42);
  transform-origin: left center;
  transition: transform 1200ms var(--ease-cinema), background 1200ms var(--ease-cinema);
}

.access__button:hover { color: var(--ink); }
.access__button:hover .access__button-label::after {
  transform: scaleX(1);
  background: var(--ink-soft);
}

.access__button:focus-visible {
  outline: none;
  color: var(--ink);
}
.access__button:focus-visible .access__button-label::after {
  transform: scaleX(1);
  background: var(--ink);
}

.access__hint {
  min-height: 1em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 1200ms var(--ease-cinema);
  align-self: flex-end;
}
.access__hint.is-visible { opacity: 1; }

/* States */
.access.is-invalid .access__input {
  border-bottom-color: rgba(181, 112, 74, 0.55);
}
.access.is-checking .access__hint,
.access.is-invalid  .access__hint {
  opacity: 1;
}

/* Landing — discreet link to enquiry page */
.private-access-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid transparent;
  transition:
    color 900ms var(--ease-cinema),
    border-color 900ms var(--ease-cinema);
}

.private-access-link__label {
  display: inline-block;
  padding-bottom: 2px;
}

.private-access-link:hover,
.private-access-link:focus-visible {
  color: var(--ink-soft);
  border-bottom-color: var(--rule-soft);
  outline: none;
}

/* Enquiry page — compact private access at the foot */
.enquiry-footnote {
  position: relative;
  z-index: 3;
  padding:
    0
    max(24px, env(safe-area-inset-right))
    max(clamp(28px, 4vh, 48px), calc(env(safe-area-inset-bottom) + 16px))
    max(24px, env(safe-area-inset-left));
}

#private-access {
  scroll-margin-top: 88px;
}

.access--enquiry {
  align-items: center;
  min-width: 0;
  max-width: 320px;
  margin: clamp(40px, 7vh, 64px) auto 0;
  gap: 4px;
}

.access--enquiry .access__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.38em;
  color: var(--ink);
  opacity: 1;
}

.access--enquiry .access__intro {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  max-width: 28ch;
  color: var(--ink);
  opacity: 1;
}

.enquiry-page .private-access-link {
  color: var(--ink);
  font-weight: 700;
}

.access--enquiry .access__row {
  gap: 14px;
}

.access--enquiry .access__input {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.access--enquiry .access__button {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.36em;
}

.access--enquiry .access__hint {
  align-self: center;
  font-size: 11px;
  text-align: center;
}

/* =========================================================
   Sound toggle — discreet editorial whisper in the top-right.
   Off by default; opt-in via click. Matches the type system: italic
   small caps from the access label, plus a small terracotta dot
   indicator that gently breathes when audio is active.
   ========================================================= */

.sound-toggle {
  position: fixed;
  /* Top-right — quiet utility control, separate from page content. */
  top: max(clamp(20px, 3.4vh, 36px), env(safe-area-inset-top, 0px));
  right: max(clamp(20px, 3.4vw, 36px), env(safe-area-inset-right, 0px));
  bottom: auto;
  left: auto;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Apple HIG — minimum 44×44px touch target on mobile */
  min-height: 44px;
  min-width: 44px;
  padding: 10px 8px;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 600ms var(--ease-cinema),
    opacity 600ms var(--ease-cinema);
}

.sound-toggle__label {
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
}
/* Hairline that grows on hover/focus — matches the access button language */
.sound-toggle__label::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition:
    transform 700ms var(--ease-cinema),
    opacity 500ms var(--ease-cinema);
}
.sound-toggle:hover .sound-toggle__label::after,
.sound-toggle:focus-visible .sound-toggle__label::after {
  opacity: 0.55;
  transform: scaleX(1);
}

/* The dot — off-state: muted hairline ring. On-state: filled terracotta with
   a quiet breathing pulse so it reads as "listening, not blinking". */
.sound-toggle__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  opacity: 0.55;
  transition:
    background-color 700ms var(--ease-cinema),
    border-color 700ms var(--ease-cinema),
    opacity 700ms var(--ease-cinema),
    transform 700ms var(--ease-cinema);
}
.sound-toggle.is-on .sound-toggle__dot {
  background: var(--sienna);
  border-color: var(--sienna);
  opacity: 1;
  animation: soundDotBreathe 3600ms var(--ease-breath) infinite alternate;
}

.landing-page .sound-toggle.is-on .sound-toggle__dot {
  animation: none;
  transform: scale(1);
  box-shadow: none;
}
.sound-toggle:focus-visible {
  outline: none;
  color: var(--ink);
}

@keyframes soundDotBreathe {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(181, 112, 74, 0.0); }
  100% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(181, 112, 74, 0.08); }
}

/* =========================================================
   Reveal mechanism — applied per-element from JS
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 2600ms var(--ease-cinema),
    transform 2600ms var(--ease-cinema);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.intro-skip-hint {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding:
    max(clamp(24px, 6vh, 48px), calc(env(safe-area-inset-top) + 16px))
    clamp(20px, 5vw, 40px)
    max(clamp(24px, 6vh, 48px), calc(env(safe-area-inset-bottom) + 16px));
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 5.8vw, 48px);
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  color: var(--ink);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
}

.intro-skip-hint__touch,
.intro-skip-hint__pointer {
  display: inline;
}

.intro-skip-hint__pointer {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .intro-skip-hint__touch {
    display: none;
  }

  .intro-skip-hint__pointer {
    display: inline;
  }
}

.intro-skip-hint__label {
  display: inline-block;
  position: relative;
  padding: 0 clamp(8px, 2vw, 16px) 6px;
}

.intro-skip-hint__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.38;
  transform: scaleX(0.42);
  transform-origin: center center;
  transition: transform 1200ms var(--ease-cinema), opacity 900ms var(--ease-cinema);
}

.landing-page.is-awaiting-enter .intro-skip-hint {
  opacity: 0.9;
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  .landing-page.is-awaiting-enter .intro-skip-hint {
    opacity: 0.96;
    font-size: clamp(28px, 3.2vw, 44px);
  }
}

.landing-page.is-awaiting-enter {
  cursor: pointer;
}

.landing-page.is-awaiting-enter .intro-skip-hint__label::after {
  animation: none;
  opacity: 0.42;
  transform: scaleX(0.72);
}

.landing-page.is-awaiting-enter .hero,
.landing-page.is-awaiting-enter .landing-mid,
.landing-page.is-awaiting-enter .footnote,
.landing-page.is-awaiting-enter .sound-toggle {
  visibility: hidden;
  pointer-events: none;
}

/* Phase 1 — only Es Vedrà fades in; no logo, no copy, no chrome yet */
.landing-page.is-phase-vedra .stage,
.landing-page.is-phase-vedra .landing-mid,
.landing-page.is-phase-vedra .footnote,
.landing-page.is-phase-vedra .sound-toggle {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.landing-page.is-phase-vedra .logo,
.landing-page.is-phase-vedra .logo-aura,
.landing-page.is-phase-vedra .logo-sunlight {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

body.is-entered .intro-skip-hint {
  display: none;
}

@keyframes introEnterPulse {
  from { opacity: 0.76; }
  to   { opacity: 0.98; }
}

@keyframes introEnterUnderline {
  from { opacity: 0.28; transform: scaleX(0.38); }
  to   { opacity: 0.52; transform: scaleX(0.88); }
}

@keyframes introHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 0.72; transform: translateX(-50%) translateY(0); }
}

/* The rule element scales horizontally rather than translating */
.rule.reveal { transform: scaleX(0); }
.rule.reveal.is-in { transform: scaleX(1); opacity: 1; }

/* =========================================================
   CTA — "Curious?" editorial invitation
   ========================================================= */

.cta-wrap {
  margin: clamp(32px, 5vh, 56px) 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Landing shell — stage (hero) · mid (Curious?) · footnote (Private access) */
body.landing-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  min-height: 100dvh;
}

.landing-page .stage {
  flex: 0 0 auto;
  min-height: 0;
  /* Top-anchored: copy fades in without re-centering the block upward */
  display: grid;
  place-items: start center;
  align-content: start;
  padding-top: clamp(12vh, 16vh, 20vh);
  padding-bottom: clamp(16px, 2vh, 28px);
}

.landing-page .landing-mid {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(56px, 10vh, 140px);
  padding: clamp(8px, 2vh, 24px) clamp(24px, 5vw, 64px);
  position: relative;
  z-index: 5;
}

.landing-page .landing-mid .cta-wrap {
  margin: 0;
  width: 100%;
}

.landing-page .footnote {
  flex: 0 0 auto;
}

.landing-page .hero {
  width: 100%;
}

.cta-curious {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 30px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 1.55vw, 20px);
  letter-spacing: 0.14em;
  color: inherit;
  border: 1px solid rgba(43, 38, 31, 0.48);
  background: rgba(253, 252, 249, 0.65);
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(43, 38, 31, 0.10);
  transition:
    transform 1400ms var(--ease-cinema),
    border-color 900ms var(--ease-cinema),
    box-shadow 900ms var(--ease-cinema);
}

.landing-page .cta-curious {
  position: relative;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  min-height: 48px;
  min-width: 152px;
  padding: 28px 40px 32px 44px;
  font-size: clamp(15px, 1.35vw, 18px);
  letter-spacing: 0.13em;
  transition:
    transform 900ms var(--ease-cinema),
    filter 900ms var(--ease-cinema);
}

.landing-page .cta-curious__label,
.landing-page .cta-curious__arrow {
  position: relative;
  z-index: 1;
  pointer-events: none;
  color: var(--ink);
  opacity: 1;
}

.landing-page .cta-curious::before {
  content: "";
  position: absolute;
  inset: -55% -42%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(48% 50% at 50% 50%,
      rgba(255, 210, 130, 0.42) 0%,
      rgba(255, 198, 110, 0.22) 42%,
      rgba(255, 198, 110, 0) 72%);
  filter: blur(16px);
  mix-blend-mode: screen;
  opacity: 0.78;
  transition:
    opacity 900ms var(--ease-cinema),
    filter 900ms var(--ease-cinema),
    transform 900ms var(--ease-cinema);
}

.landing-page .cta-curious::after {
  content: "";
  position: absolute;
  inset: -20px -16px;
  z-index: 0;
  display: block;
  border: none;
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
}

.landing-page .cta-wrap.reveal.is-in .cta-curious {
  animation: none;
}

.landing-page .cta-wrap.reveal.is-in .cta-curious::before {
  animation: none;
  opacity: 0.72;
}

@keyframes ctaInviteNudge {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-5px) scale(1.018); }
}

@keyframes ctaMistBreathe {
  0% {
    opacity: 0.62;
    filter: blur(13px);
    transform: scale(0.94);
  }
  100% {
    opacity: 0.92;
    filter: blur(20px);
    transform: scale(1.06);
  }
}

.landing-page .cta-curious__arrow {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.92em;
  line-height: 1;
  color: rgba(43, 38, 31, 0.72);
  transform: translateX(-2px);
  transition:
    color 900ms var(--ease-cinema),
    transform 900ms var(--ease-cinema),
    opacity 900ms var(--ease-cinema);
}

.landing-page .cta-wrap.reveal.is-in .cta-curious__arrow {
  animation: none;
  opacity: 0.78;
}

@keyframes ctaArrowInvite {
  0%   { transform: translateX(-3px); opacity: 0.45; }
  100% { transform: translateX(4px);  opacity: 1; }
}

.landing-page .cta-curious__label::after {
  opacity: 0.62;
  transform: scaleX(0.96);
  height: 2px;
}

.landing-page .cta-wrap.reveal.is-in .cta-curious__label::after {
  animation: none;
  opacity: 0.58;
  transform: scaleX(0.92);
}

@keyframes ctaUnderlineInvite {
  0%   { opacity: 0.4;  transform: scaleX(0.82); }
  100% { opacity: 0.78; transform: scaleX(1); }
}

.landing-page .cta-curious:hover,
.landing-page .cta-curious:focus-visible {
  border: none;
  background: transparent;
  box-shadow: none;
  transform: translateY(-5px) scale(1.02);
}

.landing-page .cta-curious:hover::before,
.landing-page .cta-curious:focus-visible::before {
  opacity: 1;
  filter: blur(18px);
  transform: scale(1.08);
}

.landing-page .cta-curious:hover .cta-curious__arrow,
.landing-page .cta-curious:focus-visible .cta-curious__arrow {
  color: var(--ink);
  transform: translateX(6px);
  opacity: 1;
  animation: none;
}

.landing-page .cta-curious:hover .cta-curious__label::after,
.landing-page .cta-curious:focus-visible .cta-curious__label::after {
  opacity: 1;
  transform: scaleX(1);
  animation: none;
}

.landing-page .cta-curious:focus-visible {
  outline: 1px solid rgba(43, 38, 31, 0.18);
  outline-offset: 8px;
}

.landing-page .cta-curious:active {
  transform: translateY(-1px) scale(0.98);
}

/* Text — editorial black */
.landing-page .cta-wrap.reveal.is-in .cta-curious__label {
  animation: none;
  color: var(--ink);
  text-shadow: none;
}

.cta-curious__label {
  position: relative;
  display: inline-block;
  font-weight: 700;
  padding-bottom: 2px;
  /* Letter-spacing adds trailing space — keep it inside the frame */
  padding-right: 0.14em;
}

.cta-curious__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: 50% 50%;
  transition:
    transform 1200ms var(--ease-cinema),
    opacity 900ms var(--ease-cinema);
}

.cta-curious:hover,
.cta-curious:focus-visible {
  border-color: rgba(43, 38, 31, 0.55);
  background: transparent;
  box-shadow: none;
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .cta-curious:hover,
  .cta-curious:focus-visible {
    transform: translateY(-2px);
  }
}

.cta-curious:hover .cta-curious__label,
.cta-curious:focus-visible .cta-curious__label {
  animation: none;
  color: #8ed0d8;
  text-shadow:
    0 0 6px rgba(240, 252, 254, 0.98),
    0 0 16px rgba(170, 235, 242, 0.9),
    0 0 34px rgba(115, 210, 220, 0.58),
    0 0 56px rgba(90, 190, 200, 0.3);
}

.landing-page .cta-curious:hover .cta-curious__label,
.landing-page .cta-curious:focus-visible .cta-curious__label {
  color: var(--ink);
  text-shadow: none;
}

.cta-curious:hover .cta-curious__label::after,
.cta-curious:focus-visible .cta-curious__label::after {
  opacity: 0.45;
  transform: scaleX(1);
}

/* =========================================================
   Enquiry page
   ========================================================= */

body.enquiry-page {
  min-height: 100svh;
}

/* Enquiry — Bungalow Hintergrund: full-bleed, very pale villa illustration */
.enquiry-page .backdrop__art--bungalow {
  inset: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 52%;
  transform: none;
  animation: none;
  opacity: 0;
  filter:
    saturate(0.52)
    contrast(0.84)
    brightness(1.08)
    sepia(0.03);
  mix-blend-mode: normal;
}

.enquiry-page .backdrop.is-in .backdrop__art--bungalow {
  opacity: var(--enquiry-bungalow-opacity);
  filter:
    saturate(0.62)
    contrast(0.88)
    brightness(1.03)
    sepia(0.03)
    blur(0);
  transition:
    opacity 4200ms var(--ease-cinema),
    filter 4000ms ease-in-out;
}

.enquiry-page .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(253, 252, 249, 0.63) 0%,
      rgba(253, 252, 249, 0.47) 38%,
      rgba(253, 252, 249, 0.46) 62%,
      rgba(253, 252, 249, 0.43) 100%);
}

.enquiry-back {
  position: fixed;
  top: max(clamp(20px, 3.4vh, 36px), env(safe-area-inset-top, 0px));
  left: max(clamp(20px, 3.4vw, 36px), env(safe-area-inset-left, 0px));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 6px 8px 2px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: none;
  transition: color 900ms var(--ease-cinema);
}

.enquiry-back__arrow {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  transition:
    transform 1200ms var(--ease-cinema),
    color 900ms var(--ease-cinema);
}

.enquiry-back__label {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.enquiry-back__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule-soft);
  transform: scaleX(0.22);
  transform-origin: left center;
  transition:
    transform 1200ms var(--ease-cinema),
    background 1200ms var(--ease-cinema);
}

.enquiry-back:hover,
.enquiry-back:focus-visible {
  color: var(--ink);
  outline: none;
}

.enquiry-back:hover .enquiry-back__arrow,
.enquiry-back:focus-visible .enquiry-back__arrow {
  color: var(--ink-soft);
  transform: translateX(-3px);
}

.enquiry-back:hover .enquiry-back__label::after,
.enquiry-back:focus-visible .enquiry-back__label::after {
  transform: scaleX(1);
  background: var(--ink-soft);
}

.enquiry {
  position: relative;
  z-index: 3;
  width: min(680px, 88vw);
  margin: 0 auto;
  padding:
    max(clamp(88px, 14vh, 120px), calc(env(safe-area-inset-top) + 64px))
    max(24px, env(safe-area-inset-right))
    max(clamp(64px, 10vh, 96px), calc(env(safe-area-inset-bottom) + 32px))
    max(24px, env(safe-area-inset-left));
}

.enquiry__mark {
  display: block;
  width: clamp(140px, 28vw, 200px);
  margin: 0 auto clamp(36px, 5vh, 52px);
  opacity: 0.82;
  filter:
    brightness(0)
    saturate(100%)
    invert(46%)
    sepia(98%)
    saturate(720%)
    hue-rotate(356deg)
    brightness(1.06)
    contrast(0.92);
}

.enquiry__mark-link {
  display: block;
  border-bottom: none;
  transition: opacity 900ms var(--ease-cinema);
}

.enquiry__mark-link:hover {
  border-bottom: none;
}

.enquiry__mark-link:hover .enquiry__mark {
  opacity: 0.94;
  filter:
    brightness(0)
    saturate(100%)
    invert(50%)
    sepia(100%)
    saturate(820%)
    hue-rotate(356deg)
    brightness(1.10)
    contrast(0.94);
}

.enquiry__intro {
  margin: 14mm 0 clamp(40px, 6vh, 64px);
}

.enquiry__intro p {
  margin: 0 0 1.35em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.72;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.enquiry__intro p:last-child {
  margin-bottom: 0;
}

.enquiry__lead {
  margin: 0 0 calc(clamp(12px, 2vh, 18px) + 5.16em);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.72;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.enquiry__options-label {
  margin: 0 0 clamp(8px, 1.2vh, 12px);
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}

.enquiry__options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(8px, 2vh, 16px);
}

.enquiry__options.has-selection {
  gap: 0;
}

.enquiry-option {
  position: relative;
  min-height: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: clamp(16px, 2.6vh, 22px) clamp(18px, 3.5vw, 26px);
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: rgba(253, 252, 249, 0.84);
  border: 1px solid rgba(43, 38, 31, 0.58);
  cursor: pointer;
  transition:
    transform 1200ms var(--ease-cinema),
    background 900ms var(--ease-cinema),
    border-color 900ms var(--ease-cinema),
    box-shadow 900ms var(--ease-cinema),
    opacity 500ms var(--ease-cinema);
}

.enquiry-option__label {
  display: inline;
}

.enquiry-option__badge {
  display: none;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.enquiry-option.is-selected .enquiry-option__badge {
  display: none;
}

.enquiry-option--list.is-selected .enquiry-option__badge {
  color: var(--sienna-deep);
}

.enquiry-option--search.is-selected .enquiry-option__badge {
  color: var(--petrol-deep);
}

.enquiry__selection-confirm {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0;
  margin: clamp(8px, 1.2vh, 12px) 0 0;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-faint);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 900ms var(--ease-cinema),
    max-height 800ms var(--ease-cinema),
    margin 800ms var(--ease-cinema);
}

.enquiry__selection-confirm[hidden] {
  display: none !important;
}

.enquiry__selection-confirm-text {
  display: none;
}

.enquiry__selection-change {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 0 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition:
    color 700ms var(--ease-cinema),
    border-color 700ms var(--ease-cinema);
}

.enquiry__selection-change:hover,
.enquiry__selection-change:focus-visible {
  color: var(--ink-soft);
  border-bottom-color: var(--rule-soft);
  outline: none;
}

.enquiry__selection-confirm.is-visible {
  opacity: 0.72;
  max-height: 2em;
  margin-top: clamp(10px, 1.5vh, 14px);
}

.enquiry__selection-confirm[data-intent="list"] .enquiry__selection-confirm-text {
  color: var(--ink-faint);
}

.enquiry__selection-confirm[data-intent="search"] .enquiry__selection-confirm-text {
  color: var(--ink-faint);
}

.enquiry__options.has-selection .enquiry-option:not(.is-selected) {
  display: none;
}

.enquiry__options.has-selection .enquiry-option:not(.is-selected) .enquiry-option__label {
  animation: none;
  text-shadow: none;
}

/* Text-only terracotta glow — list a property */
.enquiry__options.reveal.is-in .enquiry-option--list .enquiry-option__label {
  animation: enquiryListTextGlow 9s var(--ease-breath) 2200ms infinite alternate;
}

@keyframes enquiryListTextGlow {
  0% {
    color: #b5704a;
    text-shadow: 0 0 4px rgba(160, 77, 44, 0.18);
  }
  100% {
    color: var(--sienna-deep);
    text-shadow:
      0 0 6px rgba(160, 77, 44, 0.4),
      0 0 14px rgba(160, 77, 44, 0.16);
  }
}

/* Text-only petrol glow — search for a property */
.enquiry__options.reveal.is-in .enquiry-option--search .enquiry-option__label {
  animation: enquirySearchTextGlow 9s var(--ease-breath) 4200ms infinite alternate;
}

@keyframes enquirySearchTextGlow {
  0% {
    color: var(--petrol);
    text-shadow: 0 0 4px rgba(28, 74, 82, 0.18);
  }
  100% {
    color: var(--petrol-deep);
    text-shadow:
      0 0 6px rgba(28, 74, 82, 0.42),
      0 0 14px rgba(28, 74, 82, 0.18);
  }
}

.enquiry-option:hover,
.enquiry-option:focus-visible {
  border-color: rgba(43, 38, 31, 0.72);
  background: rgba(253, 252, 249, 0.92);
  transform: translateY(-1px);
  outline: none;
  box-shadow: none;
}

.enquiry-option--list:hover .enquiry-option__label,
.enquiry-option--list:focus-visible .enquiry-option__label {
  animation: none;
  color: var(--sienna-deep);
  text-shadow:
    0 0 6px rgba(160, 77, 44, 0.45),
    0 0 14px rgba(160, 77, 44, 0.2);
}

.enquiry-option--search:hover .enquiry-option__label,
.enquiry-option--search:focus-visible .enquiry-option__label {
  animation: none;
  color: var(--petrol-deep);
  text-shadow:
    0 0 6px rgba(28, 74, 82, 0.48),
    0 0 14px rgba(28, 74, 82, 0.22);
}

.enquiry-option--list.is-selected .enquiry-option__label {
  animation: none;
  color: var(--ink);
  text-shadow: none;
}

.enquiry-option--search.is-selected .enquiry-option__label {
  animation: none;
  color: var(--ink);
  text-shadow: none;
}

.enquiry-option--list.is-selected,
.enquiry-option--search.is-selected {
  background: rgba(253, 252, 249, 0.84);
  border: 1px solid rgba(43, 38, 31, 0.52);
  box-shadow: none;
}

.enquiry-form {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 1600ms var(--ease-cinema),
    opacity 1400ms var(--ease-cinema),
    margin-top 1400ms var(--ease-cinema);
}

.enquiry-form.is-visible {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: clamp(28px, 4vh, 40px);
}

.enquiry-form__inner {
  overflow: hidden;
  min-height: 0;
}

.enquiry-form__panel {
  padding-top: clamp(8px, 1.5vh, 12px);
  border-top: 1px solid var(--rule-soft);
}

.enquiry-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.enquiry-field {
  margin-bottom: clamp(22px, 3.2vh, 30px);
}

.enquiry-field__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
}

.enquiry-field__optional {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.92;
}

.enquiry-field.is-error .enquiry-field__input,
.enquiry-field.is-error .enquiry-field__textarea {
  border-bottom: 2px solid var(--sienna-deep);
  padding-bottom: 11px;
}

.enquiry-field.is-error .enquiry-field__label {
  color: var(--sienna-deep);
}

.enquiry-field__error {
  display: none;
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--sienna-deep);
}

.enquiry-field.is-error .enquiry-field__error {
  display: block;
}

.enquiry-field__input,
.enquiry-field__textarea {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 2px 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink);
  caret-color: var(--sienna);
  outline: none;
  transition: border-color 1000ms var(--ease-cinema);
}

.enquiry-field__textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.65;
}

.enquiry-field__input::placeholder,
.enquiry-field__textarea::placeholder {
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0.72;
}

.enquiry-field__input:hover,
.enquiry-field__textarea:hover {
  border-bottom-color: var(--ink-soft);
}

.enquiry-field__input:focus,
.enquiry-field__textarea:focus {
  border-bottom-color: var(--ink);
}

.enquiry-form__submit {
  appearance: none;
  -webkit-appearance: none;
  margin-top: clamp(8px, 2vh, 16px);
  padding: 12px 0 10px;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 900ms var(--ease-cinema);
}

.enquiry-form__submit-label {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.enquiry-form__submit-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 1200ms var(--ease-cinema), background 1200ms var(--ease-cinema);
}

.enquiry-form__submit:hover,
.enquiry-form__submit:focus-visible {
  color: var(--ink);
  outline: none;
}

.enquiry-form__submit:hover .enquiry-form__submit-label::after,
.enquiry-form__submit:focus-visible .enquiry-form__submit-label::after {
  transform: scaleX(1);
  background: var(--ink-soft);
}

.enquiry-form__submit:disabled {
  cursor: default;
  opacity: 0.55;
}

.enquiry-form__submit.is-busy {
  opacity: 0.72;
  pointer-events: none;
}

.enquiry-form.is-submitted .enquiry-field__input,
.enquiry-form.is-submitted .enquiry-field__textarea {
  opacity: 0.72;
}

.enquiry__selection-change:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.enquiry-form__hint {
  display: block;
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 900ms var(--ease-cinema);
}

.enquiry-form__hint.is-visible {
  opacity: 1;
}

.enquiry-form__hint.is-success {
  color: var(--sienna-deep);
}

.enquiry-form__hint.is-invalid {
  color: #9a4a3a;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 860px) {
  .logo { width: clamp(220px, 56vw, 360px); }
  .landing-page .logo { width: clamp(264px, 67vw, 432px); }
  .logo-sweep { width: clamp(220px, 56vw, 360px); }
}

@keyframes landingDriftMobile {
  0%   { transform: scale(1.10); }
  100% { transform: scale(1.14); }
}

@media (max-width: 720px) {
  body.landing-page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .stage {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    min-height: 0;
    padding:
      max(clamp(28px, 6vh, 56px), calc(env(safe-area-inset-top) + 12px))
      max(20px, env(safe-area-inset-right))
      clamp(20px, 4vh, 40px)
      max(20px, env(safe-area-inset-left));
  }

  .hero {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .logo-wrap {
    margin-bottom: clamp(28px, 5vh, 48px);
  }

  /* Logo — same 3.5s phase as desktop (script LANDING.logoFadeMs) */
  .landing-page .logo {
    width: clamp(264px, 67vw, 432px);
    opacity: 0;
    visibility: hidden;
    transform: none;
    filter: brightness(1.08);
    transition: none;
    animation: none;
    will-change: opacity, filter;
  }

  .landing-page.is-logo-in .logo {
    visibility: visible;
    animation: landingLogoFade var(--phase-logo) var(--ease-fade) forwards;
  }

  .landing-page.is-logo-in .logo-sunlight {
    animation: landingLogoSunFade var(--phase-logo) var(--ease-fade) forwards;
  }

  .landing-page.is-logo-in .logo-aura {
    animation: landingLogoAuraFade var(--phase-logo) var(--ease-fade) forwards;
  }

  .eyebrow {
    letter-spacing: 0.34em;
    font-size: 10.5px;
    margin-bottom: clamp(14px, 2.4vh, 24px);
  }

  .kicker {
    font-size: clamp(16px, 4.6vw, 20px);
    margin-bottom: clamp(18px, 2.8vh, 28px);
  }

  /* Headline — centrepiece on mobile too */
  .headline {
    font-size: clamp(24px, 7vw, 40px);
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin-bottom: clamp(18px, 2.8vh, 28px);
  }

  .intro-skip-hint {
    font-size: clamp(24px, 7vw, 38px);
  }

  .headline__line {
    display: block;
  }

  .headline__line + .headline__line {
    margin-left: 0;
    margin-top: 0.15em;
  }

  .cta-wrap {
    margin-top: clamp(24px, 4vh, 40px);
    padding: 12px 20px 20px;
    overflow: visible;
  }

  .cta-curious {
    min-height: 48px;
    min-width: 160px;
    max-width: 100%;
    padding: 12px 32px;
    font-size: clamp(16px, 4.2vw, 18px);
    letter-spacing: 0.1em;
    border: 1px solid rgba(43, 38, 31, 0.58);
    background: rgba(253, 252, 249, 0.85);
    box-shadow: 0 2px 16px rgba(43, 38, 31, 0.12);
  }

  .landing-page .cta-curious {
    border: none;
    background: transparent;
    box-shadow: none;
    min-height: 44px;
    min-width: 140px;
    padding: 24px 32px 28px 36px;
    font-size: clamp(14px, 3.8vw, 17px);
    letter-spacing: 0.11em;
  }

  .landing-page .cta-curious::after {
    inset: -16px -12px;
  }

  .cta-curious__label {
    padding-right: 0.1em;
  }

  .footnote {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding:
      clamp(12px, 2vh, 20px)
      max(20px, env(safe-area-inset-right))
      max(clamp(20px, 3vh, 32px), calc(env(safe-area-inset-bottom) + 10px))
      max(20px, env(safe-area-inset-left));
  }

  .landing-page .stage {
    flex: 0 0 auto;
    place-items: start center;
    align-content: start;
    padding-top: max(clamp(10vh, 14vh, 18vh), calc(env(safe-area-inset-top) + 8vh));
    padding-bottom: clamp(12px, 2vh, 24px);
  }

  .landing-page .landing-mid {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(48px, 8vh, 100px);
    padding: clamp(6px, 1.5vh, 16px) max(20px, env(safe-area-inset-right))
      clamp(6px, 1.5vh, 16px) max(20px, env(safe-area-inset-left));
  }

  .landing-page .footnote {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    position: relative;
  }

  .private-access-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 9.5px;
    letter-spacing: 0.34em;
  }

  .access--enquiry {
    width: min(320px, 92vw);
    margin-top: clamp(32px, 6vh, 48px);
  }

  .access--enquiry .access__intro { max-width: 26ch; }
  .access--enquiry .access__input { font-size: 16px; letter-spacing: 0.14em; }

  .access--enquiry .access__row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .access--enquiry .access__button {
    align-self: center;
    min-height: 44px;
    padding: 10px 8px 12px;
  }

  .backdrop__art {
    width: min(155vw, 920px);
    bottom: -2vh;
    opacity: 0;
    filter:
      saturate(0.62)
      contrast(0.77)
      brightness(0.96)
      sepia(0.28);
  }

  .backdrop.is-in .backdrop__art { opacity: 0.28; }

  .enquiry-page .backdrop__art--bungalow {
    inset: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 56%;
    transform: none;
    animation: none;
  }

  .enquiry-page .backdrop.is-in .backdrop__art--bungalow {
    opacity: var(--enquiry-bungalow-opacity-mobile);
    filter:
      saturate(0.64)
      contrast(0.90)
      brightness(1.02)
      sepia(0.03)
      blur(0);
  }

  /* Landing — full-bleed Es Vedrà (same Phase-1 fade as desktop) */
  .landing-page .backdrop__art {
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    max-width: none;
    object-fit: cover;
    object-position: center 42%;
    opacity: 0;
    filter:
      blur(10px)
      contrast(var(--landing-vedra-contrast-in))
      saturate(0.38)
      brightness(1.06)
      sepia(0.10);
    mix-blend-mode: multiply;
    transform: scale(1.1);
    transform-origin: center 42%;
    animation: none;
    transition: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .landing-page .backdrop.is-in .backdrop__art {
    opacity: var(--landing-vedra-opacity-max);
    filter:
      blur(0)
      contrast(var(--landing-vedra-contrast-out))
      saturate(var(--landing-vedra-saturate-out))
      brightness(var(--landing-vedra-brightness-out))
      sepia(0.08);
    transition:
      opacity var(--landing-vedra-fade-ms) var(--ease-fade),
      filter var(--landing-vedra-fade-ms) var(--ease-fade);
  }

  .landing-page .backdrop.is-in .backdrop__art {
    animation: landingDriftMobile 64s var(--ease-breath) infinite alternate;
  }

  /* Mobile landing — pool-teal glow begins below Curious? */
  .landing-page {
    --landing-pool-veil-light: rgba(158, 216, 210, 0.10);
    --landing-pool-veil-mid:   rgba(136, 200, 194, 0.17);
    --landing-pool-veil-deep:  rgba(118, 185, 178, 0.24);
  }

  .landing-page .ambient-wash {
    background: var(--bg);
    animation: none;
  }

  .landing-page .ambient-sunset {
    mix-blend-mode: normal;
    background:
      radial-gradient(92% 72% at 50% 36%,
        rgba(255, 198, 110, 0.16) 0%,
        rgba(255, 210, 130, 0.07) 42%,
        rgba(255, 210, 130, 0) 72%
      );
  }

  .landing-page.is-sun-glow .ambient-sunset,
  .landing-page.is-loaded .ambient-sunset {
    opacity: 0.72;
  }

  .landing-page .backdrop::after {
    opacity: 1;
    background:
      linear-gradient(180deg,
        rgba(253, 252, 249, 0) 0%,
        rgba(253, 252, 249, 0) 82%,
        rgba(253, 252, 249, 0) 86%,
        var(--landing-pool-veil-light) 90%,
        var(--landing-pool-veil-mid) 95%,
        var(--landing-pool-veil-deep) 100%),
      radial-gradient(90% 38% at 50% 94%,
        rgba(100, 188, 182, 0.22) 0%,
        rgba(128, 198, 192, 0.12) 40%,
        rgba(128, 198, 192, 0) 72%);
  }

  .landing-page .landing-mid::before {
    display: none;
  }

  .landing-page .landing-mid::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + clamp(8px, 2vh, 16px));
    width: min(128vw, 460px);
    height: min(22vh, 160px);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(52% 50% at 50% 0%,
      rgba(130, 210, 218, 0.26) 0%,
      rgba(128, 198, 192, 0.14) 44%,
      rgba(128, 198, 192, 0) 72%);
    filter: blur(12px);
    mix-blend-mode: screen;
    opacity: 0.58;
  }

  .landing-page .footnote::after {
    display: none;
  }

  .sound-toggle {
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    gap: 8px;
    font-size: 10px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 10px;
  }

  /* Enquiry page */
  body.enquiry-page {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .enquiry {
    width: min(680px, 92vw);
    padding:
      max(clamp(72px, 12vh, 96px), calc(env(safe-area-inset-top) + 52px))
      max(20px, env(safe-area-inset-right))
      clamp(40px, 6vh, 64px)
      max(20px, env(safe-area-inset-left));
  }

  .enquiry-back {
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    min-height: 44px;
    min-width: 44px;
    gap: 6px;
    padding: 10px 6px 10px 2px;
    font-size: 8.5px;
    letter-spacing: 0.30em;
  }

  .enquiry-back__arrow {
    font-size: 13px;
  }

  .enquiry__mark {
    width: clamp(120px, 34vw, 168px);
    margin-bottom: clamp(28px, 4vh, 40px);
  }

  .enquiry__intro {
    margin-bottom: clamp(32px, 5vh, 48px);
  }

  .enquiry__intro p {
    font-size: clamp(15px, 4.1vw, 17px);
    line-height: 1.68;
  }

  .enquiry__lead {
    margin-bottom: calc(clamp(10px, 1.8vh, 16px) + 5.16em);
    font-size: clamp(15px, 4.1vw, 17px);
    line-height: 1.68;
  }

  .enquiry__options-label {
    margin-bottom: clamp(6px, 1vh, 10px);
    letter-spacing: 0.26em;
    font-size: 10.5px;
  }

  .enquiry-option {
    min-height: 52px;
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.45;
  }

  .enquiry-field__input,
  .enquiry-field__textarea {
    font-size: 16px;
    letter-spacing: 0.04em;
    padding: 10px 2px 12px;
  }

  .enquiry-field__textarea {
    min-height: 120px;
  }

  .enquiry-form__submit {
    min-height: 44px;
    padding: 14px 8px 12px;
    font-size: 10px;
    letter-spacing: 0.36em;
  }

  .enquiry__selection-change {
    min-height: 44px;
    padding: 12px 10px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .enquiry-footnote {
    padding:
      0
      max(20px, env(safe-area-inset-right))
      max(clamp(24px, 4vh, 40px), calc(env(safe-area-inset-bottom) + 12px))
      max(20px, env(safe-area-inset-left));
  }

  #private-access {
    scroll-margin-top: max(72px, calc(env(safe-area-inset-top) + 56px));
  }

  /* Contain bright text glow on small screens */
  .cta-curious__label,
  .enquiry-option__label {
    -webkit-font-smoothing: antialiased;
  }
}

@media (max-width: 420px) {
  .eyebrow { letter-spacing: 0.28em; font-size: 10px; }
  .kicker { font-size: 15px; }
  .access__label { letter-spacing: 0.32em; }
  .access__button { letter-spacing: 0.32em; }
  .access__input { letter-spacing: 0.18em; font-size: 16px; }
  .enquiry__options-label { letter-spacing: 0.28em; }
  .enquiry-option { padding: 15px 16px; }
  .cta-curious { letter-spacing: 0.1em; padding: 12px 26px; }
}

/* Touch devices — active states instead of sticky hover */
@media (hover: none) and (pointer: coarse) {
  .cta-curious:hover,
  .cta-curious:focus-visible {
    transform: none;
  }

  .cta-curious:active {
    transform: none;
  }

  .cta-curious:active .cta-curious__label {
    animation: none;
    color: #8ed0d8;
    text-shadow:
      0 0 6px rgba(240, 252, 254, 0.98),
      0 0 16px rgba(170, 235, 242, 0.9),
      0 0 34px rgba(115, 210, 220, 0.58);
  }

  .enquiry-option:hover,
  .enquiry-option:focus-visible {
    transform: none;
  }

  .enquiry-option:active {
    transform: translateY(-1px);
  }

  .private-access-link:hover {
    border-bottom-color: transparent;
    color: var(--ink-faint);
  }

  .private-access-link:active {
    color: var(--ink-soft);
    border-bottom-color: var(--rule-soft);
  }
}

/* =========================================================
   Reduced motion — respect the user
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .logo,
  .backdrop__art,
  .ambient-sunset { transition: opacity 600ms linear; }

  .reveal { transform: none; }
  .rule.reveal { transform: scaleX(1); }
  .logo { transform: none; filter: none; animation: none; }
  .landing-page.is-logo-in .logo {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter:
      drop-shadow(0 0 24px rgba(255, 180, 95, 0.22))
      drop-shadow(0 10px 28px rgba(48, 38, 28, 0.12))
      drop-shadow(0 2px 8px rgba(48, 38, 28, 0.08));
    animation: none;
  }
  .landing-page.is-sun-glow .logo-aura { opacity: 0.58; animation: none; }
  .landing-page.is-logo-in .logo-sweep { display: none; }
  .landing-page .headline.reveal.is-in {
    animation: none;
    opacity: 1;
    transform: translateY(0);
    filter: none;
    letter-spacing: 0.02em;
  }
  .landing-page .headline.reveal.is-in::after {
    display: none;
  }
  .landing-page .headline.reveal.is-in .headline__line {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .backdrop__art { animation: none; transform: translate(-50%, 0); }
  .backdrop.is-in .backdrop__art {
    animation: none;
    opacity: 0.32;
    filter:
      saturate(0.58)
      contrast(0.70)
      brightness(1.02)
      sepia(0.18)
      blur(0);
    transform: translate(-50%, 0);
    transition: none;
  }

  .enquiry-page .backdrop.is-in .backdrop__art--bungalow {
    opacity: var(--enquiry-bungalow-opacity-mobile);
    filter:
      saturate(0.64)
      contrast(0.90)
      brightness(1.02)
      sepia(0.03)
      blur(0);
    transform: none;
  }

  .landing-page .backdrop.is-in .backdrop__art {
    opacity: var(--landing-vedra-opacity-max);
    filter:
      blur(0)
      contrast(var(--landing-vedra-contrast-out))
      saturate(var(--landing-vedra-saturate-out))
      brightness(var(--landing-vedra-brightness-out))
      sepia(0.08);
    transform: scale(1.06);
    transform-origin: center 38%;
    animation: none;
  }

  .landing-page .backdrop.is-in::after {
    opacity: 1;
    transition: none;
    background: linear-gradient(180deg,
      rgba(253, 252, 249, 0.04) 0%,
      rgba(253, 252, 249, 0) 28%,
      rgba(253, 252, 249, 0) 62%,
      rgba(253, 252, 249, 0.10) 88%,
      rgba(253, 252, 249, 0.16) 100%
    );
  }

  .ambient-wash { animation: none; }
  .ambient-sunset { animation: none; }
  .is-loaded .logo-aura,
  .is-loaded .logo-sunlight { animation: none; }
  .is-loaded .logo-aura { opacity: 0.55; filter: blur(16px); }
  .is-loaded .logo-sunlight { opacity: 0.78; transform: none; }
  .landing-page.is-logo-in .logo-aura { opacity: 0.48; filter: blur(14px); }
  .landing-page.is-logo-in .logo-sunlight { opacity: 0.55; }
  .logo-sweep { animation: none; opacity: 0; }
  .sound-toggle.is-on .sound-toggle__dot { animation: none; }

  /* Kicker — settled supporting tone */
  .landing-page .hero .reveal.is-in,
  .landing-page .sound-toggle.reveal.is-in,
  .landing-page .private-access-link.reveal.is-in {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .landing-page .eyebrow.reveal.is-in {
    opacity: 0.8;
  }

  .landing-page .kicker.reveal.is-in {
    opacity: 0.94;
    color: rgba(255, 138, 48, 0.92);
    text-shadow: 0 0 16px rgba(255, 120, 30, 0.45);
  }

  .landing-page .cta-wrap.reveal.is-in .cta-curious {
    animation: none;
  }

  .landing-page .cta-wrap.reveal.is-in .cta-curious__label {
    animation: none;
    color: var(--ink);
    text-shadow: none;
  }

  .landing-page .cta-wrap.reveal.is-in .cta-curious__arrow {
    animation: none;
    opacity: 0.78;
    transform: translateX(2px);
  }

  .landing-page .cta-curious__label::after,
  .landing-page .cta-wrap.reveal.is-in .cta-curious__label::after {
    animation: none;
    opacity: 0.72;
    transform: scaleX(1);
  }

  .landing-page .cta-wrap.reveal.is-in .cta-curious::before {
    animation: none;
    opacity: 0.78;
  }

  .enquiry__options.reveal.is-in .enquiry-option--list .enquiry-option__label,
  .enquiry__options.reveal.is-in .enquiry-option--search .enquiry-option__label { animation: none; }

  .enquiry__options.has-selection .enquiry-option:not(.is-selected) {
    display: none;
  }
}