/* Les Résidences Pointe d'Esny: landing built from Shwena's InDesign page (1200 pt wide, desktop only), then
   reworked (30 Oct): larger type, a right-aligned header with an active-section bar, aligned residence tiles,
   a rebuilt footer, and One Bain Boeuf style motion (see "Motion" at the end and js/main.js).
   Decorations and full-width photos are sized in vw (1 pt = 1/12 vw), so they keep their place at any width.
   Breakpoints: laptop <=1280px, tablet <=1024px (burger menu), stacked <=900px, phone <=600px.
   Colours come from the :root block each template writes from globals.colours. */

@font-face { font-family: 'Wulkan Display'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/WulkanDisplayLight.woff') format('woff'); }
@font-face { font-family: 'Wulkan Display'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/WulkanDisplayLightItalic.woff') format('woff'); }
@font-face { font-family: 'Wulkan Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/WulkanDisplayMedium.woff') format('woff'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Jost-Regular.woff2') format('woff2'); }

:root { --ease: cubic-bezier(.22, .61, .36, 1); --line: rgba(17, 65, 108, .22); }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* lining-nums: Wulkan defaults to old-style figures (a 3 that dips below the line) */
body { margin: 0; overflow-x: clip; background: var(--cream); color: var(--navy); font-family: 'Jost', sans-serif; font-size: 17px; line-height: 1.65; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
em { font-style: italic; }
section[id], main[id] { scroll-margin-top: 86px; }  /* anchors land under the sticky header, not behind it */
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { clip: auto; width: auto; height: auto; margin: 0; padding: 12px 24px; z-index: 100000; top: 5px; left: 5px; background: #fff; color: var(--navy); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Shared type */
.title { font-family: 'Wulkan Display', serif; font-size: clamp(30px, 3.4vw, 50px); font-weight: 300; line-height: 1.15; color: var(--teal); text-wrap: balance; }
.title-lg { font-size: clamp(32px, 3.8vw, 56px); }
.body { font-size: 18px; line-height: 1.7; }

/* Buttons: colour swap + the arrow nudges */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 28px; font-size: 12px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; text-align: center; border: 1px solid transparent; transition: background-color .35s, color .35s, border-color .35s; }
.btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .35s var(--ease); }
.btn:hover svg, .btn:focus-visible svg { transform: translate(2px, -2px); }
.btn-navy { color: var(--btn-text); background: var(--navy); }
.btn-navy:hover, .btn-navy:focus-visible { background: var(--teal); color: #fff; }
.btn-gold { color: var(--cream); background: var(--gold); }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--navy); }
.btn-outline { color: var(--cream); border-color: var(--gold); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--gold); }

/* ---- Decorations: absolutely placed in their section, behind its content ---- */
.deco-host { position: relative; overflow: hidden; }
.deco-host > :not(.deco) { position: relative; }
.deco { position: absolute; max-width: none; height: auto; pointer-events: none; user-select: none; }
svg.deco path { fill: none; }

/* ---- Header (sticky): logo left, menu + button grouped right, a bar under the active section ---- */
.hdr { position: sticky; top: 0; z-index: 99; display: flex; align-items: center; gap: 44px; height: 86px; padding: 0 40px 0 60px; background: var(--ivory); transition: box-shadow .3s; }
.hdr.is-stuck { box-shadow: 0 0 14px rgba(0, 0, 0, .1); }
.hdr-brand { flex: none; margin-right: auto; }
.hdr-brand img { width: 200px; }
.hdr-nav { position: relative; align-self: stretch; }
.hdr-nav ul { display: flex; gap: 40px; height: 100%; }
.hdr-nav li { display: flex; }
.hdr-nav a { display: flex; align-items: center; font-family: 'Wulkan Display', serif; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); transition: color .3s; }
.hdr-nav a:hover, .hdr-nav a:focus-visible, .hdr-nav a.is-active { color: var(--navy); }
/* The bar (span added by main.js) slides under the active link, or the hovered one; a CSS underline without JS */
.hdr-bar { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--gold); opacity: 0; transition: translate .55s var(--ease), width .55s var(--ease), opacity .3s; }
.hdr-nav:not(.has-bar) a.is-active { box-shadow: inset 0 -3px var(--gold); }
.hdr-cta { flex: none; min-height: 44px; padding: 12px 26px; font-family: 'Wulkan Display', serif; font-size: 13px; font-weight: 500; letter-spacing: .1em; }
.hdr-toggle { display: none; margin-left: auto; padding: 8px; font-size: 22px; line-height: 1; border: 0; background: none; color: var(--teal); cursor: pointer; }
.hdr-toggle svg { width: 1em; height: 1em; fill: currentColor; }
.hdr-toggle .ic-close, .hdr.menu-open .hdr-toggle .ic-open { display: none; }
.hdr.menu-open .hdr-toggle .ic-close { display: block; }
.hdr-drop { display: none; }
/* Scroll progress (div added by main.js) */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 2px; background: var(--gold); transform-origin: 0 50%; scale: 0 1; pointer-events: none; }

/* ---- Hero: the photo alone, clear (client, 30 Oct: no text on it, no wash), then the facts under it ---- */
.hero { position: relative; height: max(420px, 38vw); overflow: hidden; }  /* short enough for the facts to show on the first screen */
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }  /* keeps the couple in view on phones */
.hero-info { position: relative; z-index: 2; background: var(--ivory); }  /* above the intro's flowers, which would spill onto it */
.hero-info-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 64px; width: min(100% - 80px, 1160px); margin: 0 auto; padding: 76px 0 84px; }
.hero-title { font-family: 'Wulkan Display', serif; font-size: clamp(32px, 3.4vw, 50px); font-weight: 300; line-height: 1.15; color: var(--teal); text-wrap: balance; }
.hero-facts { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-left: 64px; border-left: 1px solid var(--line); }
.hero-kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.hero-price { margin-top: -6px; font-family: 'Wulkan Display', serif; font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; line-height: 1.2; }
.hero-facts .btn { margin-top: 6px; }

/* ---- Centred text sections (intro, nature, lifestyle, architecture) ---- */
.center-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; width: min(100% - 40px, 640px); margin: 0 auto; text-align: center; }
.center-inner .btn { margin-top: 10px; }
.center-inner .title { width: max-content; max-width: min(960px, 100vw - 40px); }  /* titles run wider than the text, as in the PDF */
.intro { z-index: 1; overflow: clip visible; clip-path: inset(-14vw 0 0 0); padding: 100px 0 64px; background: var(--beige); }  /* flowers spill onto the hero above */
.deco-intro-left { left: -8.33vw; top: -13.58vw; width: 40.08vw; }
.deco-intro-right { left: 71.58vw; top: -4.42vw; width: 31.75vw; }

/* ---- Full-width photo bands ---- */
.band { overflow: hidden; }
.band img { width: 100%; object-fit: cover; }
.band-aerial img { aspect-ratio: 1200 / 610; }
.band-residences img { aspect-ratio: 1200 / 618; }

/* ---- Text + photo (rental, village): photo right ---- */
.split { display: flex; align-items: center; padding: 90px 4.83% 90px 0; background: var(--cream); }
.split-text { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 40.33%; padding: 0 30px; text-align: center; }
.split-text > * { max-width: 470px; }
.split-text .title { font-size: clamp(28px, 2.9vw, 42px); }  /* a narrower column than the centred sections */
.split-media { width: 54.83%; margin-left: auto; overflow: hidden; }
.split-media img { width: 100%; aspect-ratio: 658 / 516; object-fit: cover; }
.deco-rental { left: -9.5vw; bottom: -6.92vw; width: 26.92vw; }

/* ---- Nature ---- */
.s-nature { padding: 90px 0 100px; background: var(--beige); }
.deco-nature-right { left: 78.42vw; top: -8.08vw; width: 30.75vw; }
.deco-nature-left { left: -5.67vw; bottom: -10.75vw; width: 35.58vw; }

/* ---- Lifestyle + carousel ---- */
.s-life { z-index: 1; overflow: clip visible; clip-path: inset(0 0 -7vw 0); padding: 90px 0 128px; background: var(--cream); }  /* lines run on into the village section */
.s-life .center-inner { width: min(100% - 40px, 780px); }
.deco-life { left: -16vw; top: 26.33vw; width: 49.42vw; }
.carousel { position: relative; width: 83.67%; margin: 56px auto 0; }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; }
.car-slide img { width: 100%; aspect-ratio: 1004 / 455; object-fit: cover; }
.car-btn { position: absolute; top: calc(50% - 40px); display: flex; padding: 16px; border: 0; background: none; color: #fff; cursor: pointer; transition: translate .35s var(--ease); }
.car-prev:hover, .car-prev:focus-visible { translate: -4px 0; }
.car-next:hover, .car-next:focus-visible { translate: 4px 0; }
.car-btn svg { width: 22px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2; }
.car-prev { left: 2px; }
.car-next { right: 2px; }
.car-dots { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.car-dots button { width: 12px; height: 12px; padding: 0; border: 1px solid var(--navy); border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .3s, scale .3s; }
.car-dots button[aria-current="true"] { background: var(--navy); scale: 1.15; }

/* ---- Architecture ---- */
.s-arch { padding: 90px 0 96px; background: var(--cream); }  /* cream since nature (beige) comes right before it */
.arch-row { display: flex; justify-content: center; gap: 1.5%; margin-top: 60px; padding: 0 3.25%; }
.arch-row img { width: 49.25%; aspect-ratio: 552 / 334; object-fit: cover; }

/* ---- Residence tiles: one subgrid, so photo, name, specs, surface and link line up across every tile ---- */
.s-units { z-index: 1; overflow: clip visible; clip-path: inset(-9vw 0 0 0); padding: 110px 0 130px; background: var(--beige); }  /* the gold blob overlaps the architecture section */
.deco-units-right { left: 83.17vw; top: -8.92vw; width: 30.17vw; }
.deco-units-left { left: -6.33vw; bottom: -7.5vw; width: 26.08vw; }
.units-wrap { width: min(100% - 48px, 1200px); margin: 0 auto; }
.units-head { max-width: 660px; }
.units-head .title { margin-bottom: 20px; }
.units { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; margin-top: 52px; }
.unit { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.unit + .unit::before { content: ''; position: absolute; top: 0; bottom: 0; left: -14px; width: 1px; background: var(--line); }
.unit-media { overflow: hidden; }
.unit-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s var(--ease); }
.unit:hover .unit-media img { transform: scale(1.05); }
.unit-name { padding-top: 20px; font-family: 'Wulkan Display', serif; font-size: 21px; font-weight: 300; line-height: 1.2; color: var(--teal); transition: color .3s; }
.unit:hover .unit-name { color: var(--navy); }
/* Small icon + figure side by side, like the listings the client pointed to (azuri, moka, savannah) */
.unit-specs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: center; column-gap: 20px; margin-top: 18px; padding: 14px 0; border-block: 1px solid var(--line); }
.unit-specs li { display: flex; align-items: center; gap: 7px; font-family: 'Wulkan Display', serif; font-size: 18px; font-weight: 300; line-height: 1; }
.unit-specs .ic { width: 20px; height: 16px; color: var(--navy); }
.unit-surface { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; }
.unit-surface-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.unit-surface-value { font-family: 'Wulkan Display', serif; font-size: 24px; font-weight: 300; line-height: 1.15; }
.unit-cta { position: relative; display: inline-flex; align-items: center; gap: 10px; justify-self: start; align-self: end; margin-top: 18px; padding-bottom: 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.unit-cta::after { content: ''; position: absolute; left: 0; right: 24px; bottom: 0; height: 1px; background: currentColor; transform-origin: left; scale: 0 1; transition: scale .45s var(--ease); }
.unit-cta:hover::after, .unit-cta:focus-visible::after, .unit:hover .unit-cta::after { scale: 1 1; }
.unit-cta svg { width: 14px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .35s var(--ease); }
.unit-cta:hover svg, .unit-cta:focus-visible svg, .unit:hover .unit-cta svg { transform: translateX(5px); }

/* ---- Virtual tour band ---- */
.s-visit { position: relative; overflow: hidden; min-height: 38.42vw; color: #fff; }
.visit-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-visit::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(108, 153, 156, .57); }  /* same wash as the hero, over the photo */
.visit-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; width: min(100% - 80px, 1120px); margin: 0 auto; padding: 110px 0 100px; }
.visit-text { max-width: 600px; }
.visit-title { font-family: 'Wulkan Display', serif; font-size: clamp(40px, 4.4vw, 66px); font-weight: 300; line-height: 1; }
.visit-body { max-width: 470px; margin-top: 30px; font-size: 17px; line-height: 1.65; }
.visit-body p + p { margin-top: 1.2em; }
.visit-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }
.visit-btns .btn { min-height: 42px; padding: 10px 24px; font-size: 11px; border-radius: 999px; white-space: nowrap; }
.visit-stats { display: flex; flex-direction: column; gap: 30px; width: 330px; flex: none; margin-top: 10px; padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, .55); }
.visit-stats li { display: flex; flex-direction: column; gap: 8px; }
.stat-value { font-family: 'Wulkan Display', serif; font-size: 58px; font-weight: 300; line-height: 1; }
.stat-label { font-size: 11px; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; }

/* ---- Gap between the two photo bands ---- */
.gap { height: 5.67vw; background: var(--ivory); }
.deco-gap-right { left: 84.17vw; top: -24vw; width: 25.75vw; }

/* ---- Contact form over the lagoon photo (its field styles also serve the pop-ups and the coming-soon dialog) ---- */
.s-register { position: relative; display: flex; justify-content: center; overflow: hidden; padding: 70px 20px; min-height: 30.83vw; }
.register-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.register-box { position: relative; width: 760px; max-width: 100%; padding: 46px 40px 40px; background: rgba(255, 255, 255, .88); text-align: center; }
.register-title { font-family: 'Wulkan Display', serif; font-size: clamp(28px, 2.6vw, 38px); font-weight: 300; line-height: 1.2; color: var(--form); }
.register-text { margin-top: 8px; font-size: 18px; line-height: 1.5; }
.lead-form { width: 600px; max-width: 100%; margin: 28px auto 0; text-align: left; }
.fields { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.field { position: relative; flex: 1 1 100%; min-width: 0; }  /* min-width: lets the 360px send button and long country names shrink on phones */
.field.w50 { flex-basis: calc(50% - 4px); }
.field[class*="w-"] { flex-basis: calc(50% - 4px); }  /* email + phone, country + type, budget + project: even pairs */
.field.w-civ { flex: 0 0 120px; }  /* civilité, prénom, nom fill one row: 120px + two gaps of 8px + two halves of the rest */
.field.w-name { flex: 0 0 calc(50% - 68px); }
.phone-row { display: flex; }
.phone-row select { flex: 0 0 104px; border-right: 0 !important; }  /* dial code (main.js), then the number */
.phone-row input { flex: 1; min-width: 0; }
.field:not(.consent) > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* screen readers only: the text shows as the placeholder */
.field ::placeholder { color: var(--form); opacity: 1; }
.field select:has(option[value=""]:checked) { color: var(--form); }  /* nothing picked yet: the label reads like a placeholder */
.field input:not([type=checkbox]), .field textarea, .field select { display: block; width: 100%; min-height: 48px; padding: 12px 10px; font-size: 15px; background: transparent; border: 1px solid var(--navy); border-radius: 0; outline: 0; transition: border-color .25s, box-shadow .25s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--form); box-shadow: inset 0 0 0 1px var(--form); }
.field textarea { min-height: 90px; resize: vertical; }
.field select { appearance: none; background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"%3E%3Cpath d="M1 1l4 4 4-4" fill="none" stroke="%2311416C"/%3E%3C/svg%3E') right 10px center / 10px no-repeat; padding-right: 26px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.consent input { flex: none; width: 14px; height: 14px; margin: 3px 0 0; accent-color: var(--form); }
.consent label { font-size: 12px; line-height: 1.5; color: var(--form); }
.submit { display: flex; justify-content: center; margin-top: 22px; }
.btn-submit { width: 360px; max-width: 100%; min-height: 48px; padding: 10px 24px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: #FBF9F0; background: var(--form); border: 0; border-radius: 0; cursor: pointer; transition: background-color .3s; }
.btn-submit:hover, .btn-submit:focus-visible { background: var(--navy); }
.btn-submit:disabled { opacity: .5; cursor: default; }
.form-msg { margin-top: 14px; font-size: 15px; text-align: center; }
.form-msg.ok { color: var(--form); }
.form-msg.err { color: #B3261E; }

/* ---- Pop-up forms (<dialog>, opened by js/main.js from any link to #form-<key>) ---- */
.pop { width: min(640px, 100vw - 32px); max-height: calc(100svh - 32px); padding: 0; overflow: auto; overscroll-behavior: contain; color: var(--navy); background: var(--ivory); border: 0; }
.pop[open] { animation: pop-in .45s var(--ease); }
@keyframes pop-in { from { opacity: 0; translate: 0 18px; } }
.pop::backdrop { background: rgba(17, 65, 108, .55); }
.pop-box { position: relative; padding: 44px 36px 34px; text-align: center; }
.pop-close { position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; font-size: 30px; line-height: 1; color: var(--navy); background: none; border: 0; cursor: pointer; }
.pop-box .register-title, .soon-dialog .register-title { padding: 0 36px; }  /* keeps long titles clear of the close button on phones */
.pop .lead-form { margin-top: 22px; }

/* ---- Footer: three equal columns on the page axis, framed by two rules ---- */
.ftr { padding: 70px 24px 30px; background: var(--ivory); color: var(--form); }
.deco-footer-left { left: -9.08vw; top: -30.08vw; width: 37vw; }
.ftr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 1040px); margin: 0 auto; border-block: 1px solid var(--line); }
.ftr-row > * { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; padding: 28px 20px; }
.ftr-row > * + * { border-left: 1px solid var(--line); }
.ftr-logo img { width: 210px; }
.ftr-logo2 img { width: 122px; }
.ftr-logo, .ftr-logo2 { transition: opacity .3s; }
.ftr-logo:hover, .ftr-logo2:hover { opacity: .75; }
.ftr-links ul { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ftr-links a { position: relative; padding-bottom: 3px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.ftr-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; scale: 0 1; transition: scale .4s var(--ease); }
.ftr-links a:hover::after, .ftr-links a:focus-visible::after { scale: 1 1; }
.ftr-copy { margin-top: 26px; font-size: 13px; text-align: center; }

/* ---- 404 ---- */
.nf { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 140px 20px; text-align: center; background: var(--beige); }

/* ---- Legal pages (templates/legal.html): one readable column on the beige of the 404 ---- */
.legal { padding: 90px 20px 110px; background: var(--beige); }
.legal > * { max-width: 760px; margin-inline: auto; }
.legal-updated { margin-top: 12px; font-size: 13px; opacity: .75; }
.legal-intro { margin-top: 26px; font-size: 19px; }
.legal-block { margin-top: 48px; }
.legal-block h2 { margin: 0 0 14px; font-family: 'Wulkan Display', serif; font-size: 27px; font-weight: 300; line-height: 1.25; color: var(--teal); }
.legal-block p, .legal-block ul { margin: 0 0 12px; }
.legal-block ul { padding-left: 20px; }
.legal-block a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* ================= Motion (html.m, set in each template's <head>; js/main.js adds .in as things scroll in) =================
   One Bain Boeuf's language: one ease-out curve, fade + 32px rise, titles word by word, photos drifting in their frames.
   Plus: photos open like curtains, flowers bloom then sway, the coloured lines draw themselves (main.js inlines them). */
/* Text, buttons, cards, form, footer: fade + rise. Same list as REVEAL in main.js. */
.m :is(.center-inner > :not(.title), .split-text > :not(.title), .hero-facts > *, .units-head > .body, .carousel, .arch-row > img, .unit, .visit-body, .visit-btns, .visit-stats > li, .register-box, .ftr-row, .ftr-copy, .legal-updated, .legal-intro, .legal-block, .nf > :not(.title)) { transition: opacity 1s var(--ease), translate 1.1s var(--ease); transition-delay: var(--d, 0s); }
.m :is(.center-inner > :not(.title), .split-text > :not(.title), .hero-facts > *, .units-head > .body, .carousel, .arch-row > img, .unit, .visit-body, .visit-btns, .visit-stats > li, .register-box, .ftr-row, .ftr-copy, .legal-updated, .legal-intro, .legal-block, .nf > :not(.title)):not(.in) { opacity: 0; translate: 0 32px; }
/* Titles: hidden until main.js has split them into words, then each word rises in turn */
.m :is(.title, .hero-title, .visit-title, .register-title):not(.words) { opacity: 0; }
.m .words .w { display: inline-block; opacity: 0; translate: 0 .55em; transition: opacity .8s ease, translate .95s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i) * 55ms); }
.m .words.in .w { opacity: 1; translate: none; }
/* Photos: bands and split photos open like curtains (clipped on the image: a frame clipped to nothing would never
   count as on screen); inside, the image drifts (main.js sets translate) */
.m :is(.band, .split-media) img { transition: clip-path 1.5s var(--ease); }
.m .band:not(.in) img { clip-path: inset(14% 0 14% 0); }
.m .split-media:not(.in) img { clip-path: inset(0 0 0 100%); }
.m :is(.band img, .split-media img, .visit-bg, .register-bg) { scale: 1.14; will-change: translate; }
/* Hero: the photo settles from a slow zoom, the title and facts follow */
.m .hero-img { animation: hero-zoom 2.8s var(--ease) both; will-change: translate; }
@keyframes hero-zoom { from { scale: 1.16; } to { scale: 1.04; } }
.m .hero-title { --d: .35s; }
/* Flowers and blobs: bloom in, then sway for good (main.js adds a slow drift with translate) */
.m :is(.deco-intro-left, .deco-intro-right, .deco-nature-left, .deco-units-right) { transition: opacity 1.6s var(--ease), scale 1.8s var(--ease); animation: sway 11s ease-in-out infinite alternate; will-change: translate; }
.m :is(.deco-intro-left, .deco-intro-right, .deco-nature-left, .deco-units-right):not(.in) { opacity: 0; scale: .9; }
.m .deco-intro-right, .m .deco-units-right { animation-duration: 13s; animation-direction: alternate-reverse; }
@keyframes sway { from { rotate: -1.6deg; } to { rotate: 1.8deg; } }
/* Lines: hidden until main.js has inlined them as SVG; it then draws each stroke with the scroll */
.m img:is(.deco-footer-left, .deco-gap-right, .deco-life, .deco-nature-right, .deco-rental, .deco-units-left) { opacity: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ================= Laptop (<=1280px) ================= */
@media (max-width: 1280px) {
  .hdr { gap: 32px; padding-left: 30px; padding-right: 30px; }
  .hdr-nav ul { gap: 28px; }
  .units { column-gap: 22px; }
  .unit + .unit::before { left: -11px; }
  .unit-name { font-size: 19px; }
  .unit-specs { column-gap: 14px; }
  .unit-specs li { font-size: 17px; }
  .unit-specs .ic { width: 18px; height: 15px; }
}

/* ================= Tablet (<=1024px): burger menu, 3 tiles per row ================= */
@media (max-width: 1024px) {
  .hdr { height: 70px; padding: 0 20px; }
  .hdr-brand img { width: 160px; }
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-toggle { display: flex; }
  .hdr-drop { display: block; position: absolute; left: 0; right: 0; top: 100%; visibility: hidden; background: var(--ivory); box-shadow: 0 8px 10px rgba(0, 0, 0, .08); transform-origin: top; transform: scaleY(0); transition: transform .35s var(--ease), visibility 0s .35s; }
  .hdr.menu-open .hdr-drop { visibility: visible; transform: scaleY(1); transition-delay: 0s; }
  .hdr-drop a { display: block; padding: 16px 20px; font-family: 'Wulkan Display', serif; font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--teal); }
  .hdr-drop li:last-child a { background: var(--gold); color: var(--cream); }
  section[id], main[id] { scroll-margin-top: 70px; }
  .units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unit { margin-bottom: 48px; }
  .unit:nth-child(3n + 1)::before { display: none; }
  .visit-inner { width: min(100% - 60px, 1120px); gap: 40px; }
  .visit-stats { width: 280px; padding-left: 30px; }
}

/* ================= Stacked (<=900px) ================= */
@media (max-width: 900px) {
  .body { font-size: 17px; }
  .hero-info-inner { grid-template-columns: 1fr; gap: 30px; width: min(100% - 40px, 640px); padding: 56px 0 64px; text-align: center; }
  .hero-facts { align-items: center; padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .split { flex-direction: column; gap: 44px; padding: 70px 0; }
  .split-text { width: 100%; gap: 26px; }
  .split-media { width: 100%; }
  .m .split-media:not(.in) img { clip-path: inset(0 0 100% 0); }
  .carousel { width: 100%; }
  .arch-row { flex-direction: column; gap: 12px; padding: 0 20px; }
  .arch-row img { width: 100%; }
  .visit-inner { flex-direction: column; padding: 70px 0; }
  .visit-stats { flex-direction: row; flex-wrap: wrap; width: auto; gap: 24px 40px; margin-top: 0; padding: 26px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .55); }
  .stat-value { font-size: 46px; }
  .register-box { padding: 36px 24px; }
  .ftr-row { grid-template-columns: 1fr; }
  .ftr-row > * { min-height: 0; padding: 28px 0; }
  .ftr-row > * + * { border-left: 0; border-top: 1px solid var(--line); }
}

/* ================= Phone (<=600px): 2 tiles per row, fields stacked ================= */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .body { font-size: 16px; }
  .title, .title-lg, .hero-title { font-size: 28px; }
  .visit-title { font-size: 38px; }
  .intro, .s-nature, .s-life, .s-arch { padding-top: 70px; }
  .units { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .unit + .unit::before { left: -8px; }
  .unit:nth-child(3n + 1)::before { display: block; }
  .unit:nth-child(2n + 1)::before { display: none; }
  .unit-name { font-size: 17px; padding-top: 14px; }
  .unit-specs { column-gap: 10px; padding: 12px 0; }
  .unit-specs li { gap: 5px; font-size: 15px; }
  .unit-specs .ic { width: 16px; height: 13px; }
  .unit-surface-value { font-size: 19px; }
  .register-box { padding: 30px 16px; }
  .pop-box { padding: 40px 16px 26px; }
  .field.w50, .field[class*="w-"] { flex-basis: 100%; }
  .car-btn { padding: 8px; }
  .car-btn svg { width: 14px; height: 28px; }
}