/* ============================================================= */
/*  Villa Pontica — cinematic scroll intro + side-scroll gallery */
/* ============================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #14110d;
  --ivory: #f4f1ea;
  --muted: #9a927f;
  --gold: #c9a86a;
}

html, body { background: #070605; }
html { scroll-behavior: smooth; }   /* nav links / rail glide to sections */

body {
  color: #f5f2ec;
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.section { position: relative; width: 100%; }

/* the element pinned to the viewport inside each section */
.pin {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #060606;      /* fills the cinema bars on non-16:9 screens */
}

/* Dark premium backdrop (reveal + gallery share it) */
.dark-premium {
  background:
    radial-gradient(120% 90% at 50% 12%, #221d16 0%, #12100c 45%, #070605 100%);
}
.dark-premium::after {           /* faint vignette for depth */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130% 130% at 50% 50%, transparent 55%, rgba(0,0,0,0.55));
  pointer-events: none;
}

.fill-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* default: fill (used by the reveal + gallery) */
  display: block;
}

/* ------------------------------------------------------------- */
/*  SECTION A — HERO                                             */
/* ------------------------------------------------------------- */
/* Hero videos show the WHOLE frame (contain). The reveal keeps cover. */
#vid1 { opacity: 1; z-index: 1; object-fit: contain; }
#vid2 { opacity: 0; z-index: 2; object-fit: contain; }

/* Blur-fill variant (?fill=blur): a blurred, scaled copy of the same clip
   fills the leftover space instead of flat dark bars. Hidden by default. */
.hero-bg { display: none; }
body.blur-fill .hero-bg {
  display: block;
  object-fit: cover;
  z-index: 0;                       /* behind the sharp, contained video */
  filter: blur(34px) brightness(0.5) saturate(1.1);
  transform: scale(1.15);           /* hide blurred edges */
}

/* still end frame (3.png) — sits above the videos, below scrim/UI */
.hero-still {
  z-index: 3;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.25) 62%, rgba(0,0,0,0.72) 100%);
  opacity: 0;
  pointer-events: none;
}

.hero-ui {
  position: absolute;
  z-index: 5;
  top: 50%;
  /* anchor to the CONTAINED video's right edge (+ inset), not the viewport,
     so on ultrawide screens the UI stays on the image, not the dark bar */
  right: calc((100vw - min(100vw, 100vh * 16 / 9)) / 2 + clamp(24px, 3.5vw, 72px));
  transform: translateY(-50%);
  width: min(420px, 78vw);
  text-align: right;
  opacity: 0;               /* revealed by the timeline */
}
.hero-ui .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 12.5px;
  color: var(--gold);
  margin-bottom: 22px;
}
.hero-ui h1 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  font-size: clamp(46px, 6vw, 92px);
  color: #fff;
}
.hero-ui .sub {
  margin: 26px 0 30px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: rgba(245,242,236,0.82);
}
.cta {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 15px 26px;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.btn-solid { background: var(--ivory); color: var(--ink); }
.btn-solid:hover { background: var(--gold); color: #1a1508; }
.btn-ghost { border: 1px solid rgba(245,242,236,0.45); color: #fff; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.hero-ui .fineprint {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- NAV BAR (hero overlay) -----------------------------------
   Sizes scale with vw so the bar stays prominent on 4K/5K, and the
   backdrop is a real gradient band (not a whisper) so it never
   disappears against bright video frames. ------------------------ */
.site-nav {
  position: absolute; z-index: 6;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 1.9vw, 46px) clamp(24px, 3.5vw, 84px) clamp(34px, 3vw, 90px);
  background: linear-gradient(to bottom,
    rgba(5,4,3,0.82), rgba(5,4,3,0.52) 46%, rgba(5,4,3,0));
}
.nav-brand {
  font-family: "Anton", sans-serif; text-transform: uppercase;
  font-size: clamp(19px, 1.3vw, 42px);
  letter-spacing: 0.14em; color: #fff; text-decoration: none;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
  transition: color .35s ease;
}
.nav-brand em { font-style: normal; color: var(--gold); }
.nav-brand:hover { color: var(--gold); }
.nav-links { display: flex; gap: clamp(20px, 3vw, 72px); }
.nav-links a {
  position: relative;
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(14px, 0.9vw, 28px);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(250,247,240,0.95); text-decoration: none;
  padding-bottom: 7px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
  transition: color .35s ease;
}
.nav-links a sup {
  font-size: clamp(9px, 0.55vw, 17px);
  color: var(--gold); margin-right: 8px; letter-spacing: 0.1em;
}
.nav-links a::after {          /* gold underline sweeps in on hover */
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--gold);
  transition: right .45s cubic-bezier(.19,1,.22,1);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { right: 0; }
.nav-cta {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(13px, 0.8vw, 25px);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #16110a; background: var(--gold); text-decoration: none;
  padding: clamp(11px, 0.8vw, 24px) clamp(24px, 1.7vw, 52px);
  border-radius: 999px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: background .35s ease, transform .35s ease;
}
.nav-cta:hover { background: #d9ba7d; transform: translateY(-1px); }

/* ---- TRUST STRIP (hero bottom) --------------------------------- */
.trust-strip {
  position: absolute; z-index: 6;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch; justify-content: center;
  padding: clamp(30px, 2.6vw, 80px) clamp(24px, 3.5vw, 84px) 0;
  background: linear-gradient(to top,
    rgba(5,4,3,0.85), rgba(5,4,3,0.5) 55%, rgba(5,4,3,0));
}
.ts-item {
  display: flex; align-items: center; gap: clamp(12px, 0.9vw, 24px);
  padding: clamp(20px, 1.6vw, 44px) clamp(16px, 2.4vw, 64px);
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(12.5px, 0.75vw, 24px);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(250,247,240,0.9);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  border-left: 1px solid rgba(245,242,236,0.22);
  white-space: nowrap;
}
.ts-item:first-child { border-left: 0; }
.ts-scroll { color: var(--gold); }
.ts-line {
  width: clamp(30px, 2vw, 60px); height: 1px; transform-origin: left;
  background: linear-gradient(to right, var(--gold), rgba(201,168,106,0));
  animation: scrollPulse 1.9s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%{transform:scaleX(.15);opacity:.25} 50%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(.15);opacity:.25}
}

/* ---- SECTION RAIL (fixed right-edge scroll indicator) ----------- */
.rail {
  position: fixed; z-index: 40;
  right: clamp(18px, 1.6vw, 46px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: clamp(26px, 2.4vh, 40px);
  mix-blend-mode: difference;          /* auto-adapts over ivory & dark */
}
.rail a {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; text-decoration: none;
}
.rail a span {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(11px, 0.65vw, 20px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #fff; opacity: 0;
  transform: translateX(6px);
  transition: opacity .4s ease, transform .4s ease;
  white-space: nowrap;
}
.rail a i {
  width: clamp(7px, 0.45vw, 12px); height: clamp(7px, 0.45vw, 12px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.65);
  background: transparent;
  transition: background .4s ease, transform .4s ease, border-color .4s ease;
  flex: 0 0 auto;
}
.rail a:hover span { opacity: 0.8; transform: translateX(0); }
.rail a.on span { opacity: 1; transform: translateX(0); }
.rail a.on i { background: #fff; border-color: #fff; transform: scale(1.35); }

/* ------------------------------------------------------------- */
/*  SECTION A (MOBILE HERO)                                      */
/* ------------------------------------------------------------- */
.mobile-hero { display: none; }        /* desktop: hidden */

.m-stage {
  position: relative;
  width: 100vw;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: #060606;
}
#mHeroVid { z-index: 1; }
.m-end-img {                            /* still frame after the animation */
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.m-scrim {                             /* darkens the TOP (sky) for the UI */
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(6,6,6,0.9) 0%, rgba(6,6,6,0.5) 24%, rgba(6,6,6,0) 46%);
}
.m-ui {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px;
  padding: calc(11vh + env(safe-area-inset-top, 0px)) 8vw 0; /* clears the nav */
  opacity: 0; transition: opacity 0.7s ease;   /* revealed when the clip ends */
}

/* compact nav + slim strip on the mobile hero */
.m-nav { padding: 18px 6vw; }
.m-nav .nav-brand { font-size: 17px; }
.m-strip { padding-bottom: env(safe-area-inset-bottom, 0px); }
.m-strip .ts-item { border-left: 0; padding: 15px 0; font-size: 11px; letter-spacing: 0.24em; }
.m-ui .eyebrow {
  text-transform: uppercase; letter-spacing: 0.32em; font-size: 11px; color: var(--gold);
}
.m-ui h1 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  line-height: 0.94; font-size: clamp(38px, 11vw, 62px); color: #fff;
}
.m-ui .sub {
  font-size: 16px; line-height: 1.5; color: rgba(245,242,236,0.85); max-width: 32ch;
}
.m-ui .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Book a Tour — the single, prominent mobile CTA (bolder + darker) */
.m-book {
  background: var(--gold);
  color: #16110a;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.22em;
  padding: 19px 52px;
  border-radius: 3px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.m-book:hover { background: #d9ba7d; color: #16110a; }

/* Keep this condition in sync with IS_MOBILE in main.js */
@media (max-width: 767px), (max-width: 1024px) and (pointer: coarse) {
  #hero { display: none; }             /* swap desktop hero for the mobile one */
  .mobile-hero { display: block; }
  .rail { display: none; }             /* section rail is a desktop affordance */
}

/* ------------------------------------------------------------- */
/*  SECTION B — REVEAL (VID 3 in text)                          */
/* ------------------------------------------------------------- */
#vid3 { z-index: 1; }
#maskSvg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; display: block;
}
#maskText { will-change: transform; }
.ltr { will-change: transform, opacity; }

/* scroll-down cue on the reveal chapter */
.scroll-cue {
  position: absolute; z-index: 3;
  left: 50%; bottom: 5.5vh;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
}
.scroll-cue span {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(12px, 0.72vw, 22px);
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold);
}
.scroll-cue i {
  width: 1px; height: clamp(40px, 5vh, 74px);
  transform-origin: top;
  background: linear-gradient(to bottom, var(--gold), rgba(201,168,106,0));
  animation: cuePulse 1.9s ease-in-out infinite;
}
@keyframes cuePulse {
  0%   { transform: scaleY(0.15); opacity: 0.25; }
  50%  { transform: scaleY(1);    opacity: 1;    }
  100% { transform: scaleY(0.15); opacity: 0.25; }
}

/* ------------------------------------------------------------- */
/*  SECTION C — GALLERY (horizontal side-scroll)                */
/* ------------------------------------------------------------- */
/* the pinned gallery viewport is horizontally draggable */
#gallery .pin {
  cursor: grab;
  touch-action: pan-y;   /* keep native vertical scrolling on touch */
}
#gallery .pin.dragging { cursor: grabbing; }
#gallery .pin.dragging .card-figure { cursor: grabbing; }

/* Focus carousel: base-size cards, the centred one scales up bigger.
   padding-inline centres the first & last card at the track's extremes. */
.gallery-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3vw;
  height: 100vh; height: 100svh;
  padding-inline: 29vw;
  will-change: transform;
}
.g-panel {
  flex: 0 0 auto;
  height: 100vh; height: 100svh;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

/* every image is a same-size card; JS scales the focused one up */
.g-panel.card { width: 42vw; }
.card-inner {
  width: 100%;
  transform-origin: center center;
  will-change: transform, opacity;
}
.card-figure {
  position: relative; overflow: hidden; border-radius: 3px;
  height: 66vh; background: #1a1712; cursor: zoom-in;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.card-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.001); transition: transform 1.2s cubic-bezier(.19,1,.22,1);
}
.card-figure:hover img { transform: scale(1.05); }
.card-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: 18px;
}
.card-meta .name {
  font-size: clamp(18px, 1.7vw, 26px); letter-spacing: 0.02em; color: #f2eee6;
}
.card-meta .idx {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}

/* first card doubles as the "A tour of the residence" title */
.title-card .card-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,6,5,0.85), rgba(7,6,5,0.15) 55%, rgba(7,6,5,0.45));
}
.title-card .card-title {
  position: absolute; z-index: 2; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 8%;
}
.title-card .card-title .eyebrow {
  text-transform: uppercase; letter-spacing: 0.38em; font-size: 11.5px; color: var(--gold); margin-bottom: 16px;
}
.title-card .card-title h2 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  line-height: 0.94; font-size: clamp(30px, 3vw, 58px); color: #fff;
}

/* outro / contact panel at the end of the strip */
.g-panel.outro {
  width: 42vw;
  flex-direction: column; gap: 24px; text-align: center;
}
.g-panel.outro h3 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 3.4vw, 60px); line-height: 0.96; color: #fff;
}
.g-panel.outro p { color: rgba(245,242,236,0.75); font-size: clamp(15px,1.3vw,19px); max-width: 460px; }

/* ---- fullscreen lightbox (click a card) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(5,4,3,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s ease;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 92vw; max-height: 90vh; object-fit: contain;
  border-radius: 3px; box-shadow: 0 40px 120px rgba(0,0,0,0.7);
  transform: scale(0.96); transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.lightbox.open img { transform: scale(1); }
.lightbox .lb-close {
  position: absolute; top: 26px; right: 30px;
  width: 44px; height: 44px; border: 1px solid rgba(245,242,236,0.4);
  background: none; color: #fff; border-radius: 50%; font-size: 20px; cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.lightbox .lb-close:hover { border-color: var(--gold); color: var(--gold); }
.lightbox .lb-cap {
  position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center;
  letter-spacing: 0.24em; text-transform: uppercase; font-size: 13px; color: rgba(245,242,236,0.75);
}

/* horizontal progress bar */
.gallery-progress {
  position: absolute; z-index: 4; left: 6vw; right: 6vw; bottom: 4.5vh; height: 1px;
  background: rgba(245,242,236,0.16);
}
.gallery-progress span {
  display: block; height: 100%; width: 0%;
  background: var(--gold);
}

/* =============================================================== */
/*  EXTENDED CHAPTERS — manifesto / genesis / marquee / residence  */
/*  / vista / location / contact                                   */
/* =============================================================== */

/* word-mask reveal (JS wraps .split words into .w > i) */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split .w i { display: inline-block; font-style: normal; will-change: transform; }

/* ---- LOCATION (ivory distances + sticky dusk exterior) ------------ */
.location { background: var(--ivory); color: var(--ink); padding: 16vh 7vw; }
.loc-inner {
  max-width: 1560px; margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 80px); align-items: start;
}
.loc-col { min-width: 0; }

/* clip-reveal figure system (shared) */
.clipfig { position: relative; margin: 0; overflow: hidden; border-radius: 3px; }
.fig-inner { position: absolute; inset: 0; overflow: hidden; }
.fig-inner img {
  width: 100%; height: 114%; object-fit: cover; display: block; margin-top: -7%;
  transition: scale 1.2s cubic-bezier(.19,1,.22,1);  /* `scale` composes with GSAP translate */
}
.clipfig:hover .fig-inner img { scale: 1.05; }
.clipfig figcaption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; padding: 18px 22px;
  font-size: 12.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(7,6,5,0.55), transparent);
  opacity: 0; translate: 0 8px; transition: opacity .5s ease, translate .5s ease;
}
.clipfig:hover figcaption { opacity: 1; translate: 0 0; }

.loc-fig {
  position: sticky; top: 7vh;
  aspect-ratio: 4 / 5;
  height: min(86vh, 1040px);
  width: auto; max-width: 100%;
  justify-self: end;
  box-shadow: 0 34px 90px rgba(20,17,13,0.2);
}

/* ---- DAY / NIGHT comparison (drag the gold divider) -------------- */
.ba-inner { cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ba-fig .ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  margin: 0; transition: none;             /* pixel-locked layers: no hover zoom */
}
.ba-fig:hover .ba-img { scale: 1; }
.ba-top {                                   /* DAY layer, clipped from the right */
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 38% 0 0);
  will-change: clip-path;
}
.ba-handle {
  position: absolute; z-index: 3; top: 0; bottom: 0;
  left: 62%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom,
    rgba(201,168,106,0.1), var(--gold) 18%, var(--gold) 82%, rgba(201,168,106,0.1));
  box-shadow: 0 0 22px rgba(0,0,0,0.45);
  will-change: left;
}
.ba-handle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(42px, 3vw, 62px); height: clamp(42px, 3vw, 62px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,10,7,0.72);
  border: 1px solid var(--gold);
  color: var(--gold); font-size: clamp(16px, 1.1vw, 24px);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5);
  transition: transform .35s cubic-bezier(.19,1,.22,1);
}
.ba-inner:active .ba-knob { transform: translate(-50%, -50%) scale(0.92); }
.ba-tag {
  position: absolute; z-index: 4; top: 18px;
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: clamp(11.5px, 0.7vw, 20px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #fff; padding: 8px 16px; border-radius: 999px;
  background: rgba(12,10,7,0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .4s ease;
}
.ba-tag-day { left: 18px; }
.ba-tag-night { right: 18px; }
.ba-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  font-family: "Cormorant Garamond", serif;
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 8px 18px; border-radius: 999px;
  background: rgba(12,10,7,0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .6s ease;
}
.loc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5vh; padding: 0; }
.loc-chips li {
  border: 1px solid rgba(20,17,13,0.22); padding: 9px 16px; border-radius: 999px;
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #6a6152;
}
.location .eyebrow { color: #8a7b58; text-transform: uppercase; letter-spacing: 0.42em; font-size: 12.5px; margin-bottom: 4vh; }
.location h2 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  color: var(--ink); font-size: clamp(40px, 5vw, 92px); line-height: 1.02;
}
.loc-copy { margin-top: 3.5vh; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; color: #4d463b; max-width: 46ch; }
.dist { list-style: none; margin-top: 8vh; padding: 0; }
.dist-row {
  display: flex; align-items: baseline; gap: 26px; padding: 26px 0;
  transition: padding-left .45s cubic-bezier(.19,1,.22,1);
}
.dist-place { font-family: "Cormorant Garamond", serif; font-size: clamp(19px, 1.9vw, 28px); white-space: nowrap; }
.dist-line { flex: 1; height: 1px; background: rgba(20,17,13,0.18); }
.dist-val { font-family: "Anton", sans-serif; font-size: clamp(22px, 2.3vw, 40px); color: #8a7b58; white-space: nowrap; transition: color .35s ease; }
@media (hover: hover) {
  .dist-row:hover { padding-left: 18px; }
  .dist-row:hover .dist-val { color: var(--ink); }
}
.coords { margin-top: 6vh; letter-spacing: 0.3em; text-transform: uppercase; font-size: 12.5px; color: var(--muted); }

/* ---- CONTACT (dark finale + footer) ------------------------------- */
.contact {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #221d16 0%, #12100c 45%, #070605 100%);
  color: #f5f2ec; padding: 20vh 7vw 0; text-align: center;
}
/* veiled villa exterior drifting slowly behind the finale */
.contact-bg { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.42) saturate(0.9); }
.contact-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(7,6,5,0.25), rgba(7,6,5,0.88)),
    linear-gradient(to bottom, rgba(7,6,5,0.72), rgba(7,6,5,0.25) 40%, rgba(7,6,5,0.9) 88%);
}
.contact-inner, .contact .foot { position: relative; z-index: 2; }

/* availability pulse line */
.avail {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}
.avail-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201,168,106,0.55);
  animation: availPulse 2.2s ease-out infinite;
}
@keyframes availPulse {
  0% { box-shadow: 0 0 0 0 rgba(201,168,106,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(201,168,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,106,0); }
}
.contact .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 0.42em; font-size: 12.5px; }
.contact-inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.contact-title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(54px, 8vw, 150px); line-height: 0.96; color: #fff; }
.contact-copy { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: rgba(245,242,236,0.78); max-width: 52ch; }
.big-cta {
  background: var(--gold); color: #16110a; font-weight: 700; font-size: 17px;
  letter-spacing: 0.24em; padding: 22px 64px; border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55); margin-top: 12px; will-change: transform;
}
.big-cta:hover { background: #d9ba7d; color: #16110a; }
.contact-rows { display: flex; gap: clamp(24px, 6vw, 90px); margin-top: 7vh; flex-wrap: wrap; justify-content: center; }
.contact-rows div { display: flex; flex-direction: column; gap: 8px; }
.contact-rows span { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.contact-rows a {
  color: #f1ead9; text-decoration: none; font-size: clamp(17px, 1.5vw, 22px);
  font-family: "Cormorant Garamond", serif;
  border-bottom: 1px solid rgba(245,242,236,0.25); padding-bottom: 3px;
  transition: border-color .3s ease, color .3s ease;
}
.contact-rows a:hover { color: var(--gold); border-color: var(--gold); }
.foot {
  margin-top: 16vh; border-top: 1px solid rgba(245,242,236,0.14);
  padding: 34px 0 40px; display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; align-items: baseline;
}
.foot p { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 20px; color: #fff; }
.foot span { font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* ---- chapters: small screens -------------------------------------- */
@media (max-width: 960px) {
  .loc-inner { grid-template-columns: 1fr; }
  .loc-fig { position: relative; top: 0; aspect-ratio: 4 / 3; order: -1; }
}
@media (max-width: 860px) {
  .location { padding-left: 7vw; padding-right: 7vw; }
  .dist-row { gap: 14px; padding: 20px 0; }
  .contact { padding-top: 14vh; }
  .foot { flex-direction: column; gap: 10px; align-items: flex-start; }
  /* hero overlay on small landscape screens */
  .nav-links { display: none; }
  .trust-strip:not(.m-strip) .ts-item { padding: 16px 14px; font-size: 11px; }
}

/* ------------------------------------------------------------- */
/*  Responsive                                                  */
/* ------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-ui { text-align: right; right: 20px; width: min(360px, 84vw); }
  .gallery-track { padding-inline: 12vw; gap: 6vw; }
  .g-panel.card, .g-panel.outro { width: 76vw; }
  .card-figure { height: 60vh; }
  .title-card .card-title h2 { font-size: clamp(26px, 7vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-line { animation: none; }
}