/* src/sections/base.css */
/* base.css: theme variables, fonts, reset, typography, buttons, grid, utilities, status pills, header, menu, footer finale, floating WhatsApp, reveal states (S-sections-layout), and the scroll film frame: page canvas, gold thread, stages, seams, words, Lenis (SCROLLFILM.md §3-§4, Foundation). */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-ext-300-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-ext-500-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/jost-latin-ext-300-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/jost-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/jost-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/jost-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* Theme variables (plan/journeys/DESIGN.md; scene type and veil from SCROLLFILM.md §3): every section stylesheet uses only these. */
:root {
  --teal-950: #032328;
  --teal-900: #062F35;
  --teal-800: #0A4049;
  --teal-700: #0E5560;
  --teal-600: #136B77;
  --gold-500: #C9A262;
  --gold-400: #D8B97F;
  --gold-300: #E9D5AA;
  --gold-grad: linear-gradient(90deg, transparent, #C9A262 30%, #E9D5AA 50%, #C9A262 70%, transparent);
  --sand-50: #F7F2E9;
  --sand-100: #EFE6D6;
  --sand-300: #D9CBB2;
  --stone-500: #8C8070;
  --ink-900: #0E2226;
  --mist-100: #F3EEE5;
  --mist-300: rgba(243, 238, 229, .72);
  --coral: #E07A5F;

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-text: "Jost", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(3.1rem, 7.2vw, 8rem);
  --fs-h2: clamp(2.4rem, 4.6vw, 4.75rem);
  --fs-h3: clamp(1.6rem, 2.4vw, 2.25rem);
  --fs-lead: clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .72rem;
  --lh-display: .98;
  --lh-h2: 1.04;
  --lh-h3: 1.15;
  --lh-lead: 1.6;
  --lh-body: 1.75;
  --ls-label: .32em;
  /* Scene type: statements, stage headings, figures, word-lit paragraphs (Cormorant 300) */
  --fs-statement: min(6.4vw, 10.5svh, 7.5rem);
  --fs-stage: min(4.6vw, 7.2svh, 5rem);
  --fs-figure: min(9vw, 15svh, 10rem);
  --fs-lit: min(2.2vw, 3.8svh, 2.25rem);

  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(104px, 15vh, 200px);
  --max: 1440px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --header-h: 88px;

  --radius: 2px;
  --hairline: 1px solid rgba(201, 162, 98, .35);
  --shadow-float: 0 30px 80px rgba(3, 35, 40, .35);
  --scrim: linear-gradient(180deg, rgba(3, 35, 40, 0) 35%, rgba(3, 35, 40, .85) 100%);
  /* The minimum veil under any text over a photo */
  --veil-text: rgba(3, 35, 40, .82);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); background: var(--teal-950); overflow-x: hidden; overflow-x: clip; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
picture > img { object-fit: cover; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Typography. The body is transparent over the page canvas; it clips sideways without becoming a scroller (sticky stages). */
body {
  position: relative;
  background: transparent;
  color: var(--mist-100);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.accent { font-style: italic; font-weight: 400; color: var(--gold-400); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
/* Labels are gold-400: gold-500 reads below 4.5:1 on the canvas glow; gold-500 stays for rules, icons and display sizes. */
.label {
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.rule { display: block; width: 96px; height: 1px; background: var(--gold-grad); }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--star { width: .9em; height: .9em; color: var(--gold-500); }
.icon--diamond { width: .75em; height: .75em; color: var(--gold-500); }
.icon--whatsapp { stroke-linecap: round; }
.icon--instagram, .icon--telegram, .icon--facebook { color: var(--gold-400); }
.icon--arrow { transition: transform .4s var(--ease-out); }
.btn:hover .icon--arrow { transform: translateX(4px); }

/* Grid and utilities. Sections lie on the canvas: dark sections have no background of their own. */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section--dark { background: transparent; color: var(--mist-100); }
.section--cream { background: var(--sand-50); color: var(--ink-900); }
/* On sand, text is ink and labels teal; gold stays for rules and icons (R9; SCROLLFILM.md §2 "Text on the sand island"). */
.section--cream .section-head__label, .section--cream .section-head__number, .section--cream .label, .section--cream .accent { color: var(--teal-700); }
.section--cream .btn--primary { color: var(--ink-900); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--gold-500);
  color: var(--teal-950);
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}
/* A section or main that a same-page link moved the focus to (R4) is a reading start, not a control: no ring around it. */
:is(main, section)[tabindex="-1"]:focus-visible { outline: none; }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: color .4s var(--ease-out), background-size .5s var(--ease-out), transform .4s var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary {
  padding: 18px 30px;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius);
  color: var(--mist-100);
  background: linear-gradient(var(--gold-500), var(--gold-500)) no-repeat left center / 0% 100%;
}
.btn--primary:hover, .btn--primary:focus-visible { background-size: 100% 100%; color: var(--teal-950); }
.btn--secondary {
  padding: 8px 0;
  color: var(--gold-400);
  background: linear-gradient(var(--gold-500), var(--gold-500)) no-repeat left bottom / 100% 1px;
}
.btn--secondary:hover, .btn--secondary:focus-visible { background-size: 0% 1px; background-position: right bottom; }
.btn__label { display: inline-block; }

/* Section head: index label, gold rule, headline, lead */
.section-head { display: grid; gap: var(--space-3); max-width: 62rem; }
.section-head__index { display: flex; align-items: center; gap: var(--space-2); }
.section-head__number { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--gold-400); }
.section-head__rule { width: 64px; height: 1px; background: var(--gold-grad); }
.section-head__label {
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.section-head__title { max-width: 18ch; }
.section-head__lead { max-width: 46ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--mist-300); }

/* Status pills */
.status {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .9rem;
  border: var(--hairline);
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold-300);
}
.status__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1px solid var(--gold-500); }
.status__label { display: inline-block; }
.status--open .status__dot { background: var(--gold-500); animation: status-pulse 2.4s ease-in-out infinite; }
.status--built .status__dot { background: var(--gold-500); }
.status--coming .status__dot { background: transparent; }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 98, .55); }
  50% { box-shadow: 0 0 0 6px rgba(201, 162, 98, 0); }
}

/* Header (SCROLLFILM.md §4): the menu button, the centred lockup, the language switch and the WhatsApp button;
   transparent over the hero, then the glass bar. Every label stays on one line. */
body > header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--mist-100);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
}
body > header[data-scrolled] {
  background: rgba(6, 47, 53, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: var(--hairline);
}
/* While the menu is open the header is solid, so nothing scrolls under the lockup or the close control. */
body > header[data-menu-open] { background: var(--teal-800); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: var(--hairline); }
.header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-2);
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  max-width: var(--max);
  margin-inline: auto;
}
.header__brand { justify-self: center; display: block; height: 68px; aspect-ratio: 770 / 655; overflow: hidden; line-height: 0; transform-origin: 50% 50%; transition: transform .4s var(--ease-out); }
/* The header shows the emblem and BONDI only: the box crops the lockup above its tagline, which is unreadable at this size (the footer keeps the whole lockup). */
.header__lockup { width: 100%; height: auto; max-width: none; }
body > header[data-scrolled] .header__brand { transform: scale(.72); }
.header__actions { justify-self: end; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.header__book { display: none; }
/* Below 1024px the label alone (the glyph comes back on wide screens), so the lockup stays centred from 640px. */
.header__book .btn--primary { padding: 12px 16px; letter-spacing: .18em; white-space: nowrap; }
.header__book .btn--primary .icon { display: none; }
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mist-100);
  background: linear-gradient(var(--gold-500), var(--gold-500)) no-repeat left bottom / 0% 1px;
  transition: background-size .4s var(--ease-out), color .3s;
}
.nav__link:hover, .nav__link[aria-current="page"] { background-size: 100% 1px; color: var(--gold-300); }
.lang-switch { display: inline-flex; align-items: center; gap: .1rem; white-space: nowrap; }
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--mist-300);
}
a.lang-switch__item:hover { color: var(--gold-300); }
.lang-switch__item--current { color: var(--mist-100); text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 8px; }
/* Its text and the two-line glyph from 640px; the glyph alone below (the text stays its accessible name). */
.menu-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-width: 44px;
  min-height: 44px;
  padding-inline: .25rem;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mist-100);
}
.menu-button::after { content: ""; flex: none; width: 28px; height: 1px; background: var(--gold-500); box-shadow: 0 6px 0 var(--gold-500); transform: translateY(-3px); }
.menu-button[aria-expanded="true"]::after {
  width: 22px;
  height: 22px;
  box-shadow: none;
  transform: none;
  background:
    linear-gradient(45deg, transparent calc(50% - .75px), var(--gold-500) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(-45deg, transparent calc(50% - .75px), var(--gold-500) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px));
}

/* The menu: one full-screen teal overlay at every width; it scrolls on its own (data-lenis-prevent) */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 30%, var(--teal-700), var(--teal-950));
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav { flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-top: auto; }
.mobile-menu__nav .nav__link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 9vw, 3.25rem);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.15;
}
.mobile-menu__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: auto; }

/* The page canvas (SCROLLFILM.md §3): one fixed layer behind the whole page. motion.js moves its warm (sun) and cool
   (sea) glows and its depth through one stop per section; the static defaults are the hero stop. At the brightest stop
   these alphas keep mist-100 text above 9:1 and mist-300 above 4.5:1. */
.canvas {
  --warm-x: 28;
  --warm-y: 78;
  --warm: 1;
  --cool-x: 80;
  --cool-y: 20;
  --cool: .25;
  --depth: .2;
  position: fixed;
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(60% 55% at calc(var(--warm-x) * 1%) calc(var(--warm-y) * 1%), rgb(201 162 98 / calc(var(--warm) * .12)), transparent 70%),
    radial-gradient(70% 60% at calc(var(--cool-x) * 1%) calc(var(--cool-y) * 1%), rgb(19 107 119 / calc(var(--cool) * .45)), transparent 72%),
    linear-gradient(rgb(3 35 40 / var(--depth)), rgb(3 35 40 / var(--depth))),
    radial-gradient(150% 110% at 50% 45%, rgb(3 35 40 / 0) 55%, rgb(3 35 40 / .6) 100%),
    var(--teal-900);
}
.canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The gold thread («el hilo del horizonte», SCROLLFILM.md §3): drawn down the right gutter by the scroll from the hero's
   cue line, a ◇ node per chapter, the star at its front. Only with html.film from 640px; it fades in once measured. */
.thread {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: max(var(--gutter), 44px, var(--thread-reach, 0px));
  z-index: 3;
  pointer-events: none;
  contain: layout paint style;
}
html.film .thread { display: block; opacity: 0; transition: opacity 1.2s var(--ease-out); }
html.film .thread.is-live { opacity: 1; }
.thread__svg { position: absolute; top: 0; right: 0; overflow: visible; }
.thread__line, .thread__glow { fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-linecap: round; }
.thread__line { stroke: var(--gold-500); stroke-width: 1; }
.thread__glow { stroke: var(--gold-300); stroke-width: 4; opacity: .25; }
.thread__nodes { fill: var(--teal-950); }
.thread__node { fill: var(--teal-950); stroke: var(--gold-500); stroke-width: 1; transition: fill .6s var(--ease-out); }
.thread__node.is-passed { fill: var(--gold-400); }
.thread__front { transition: opacity .6s var(--ease-out); }
.thread.is-ended .thread__front { opacity: 0; }
.thread__halo { opacity: .9; }
.thread__star { fill: var(--gold-300); }

/* Scenes (SCROLLFILM.md §2-§3). Seams are 1px gold lines a scene draws from 0 (static: drawn); words are the spans of
   film.words(). Tall tracks, sticky stages and step pre-states exist only under WIDE with html.film. */
[data-seam] { display: block; background: var(--gold-grad); }
[data-seam="x"] { height: 1px; transform-origin: 0 50%; }
[data-seam="y"] { width: 1px; background: linear-gradient(180deg, transparent, #C9A262 30%, #E9D5AA 50%, #C9A262 70%, transparent); transform-origin: 50% 0; }
.film-word { display: inline; }

/* Lenis (smooth scroll on fine pointers) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* Footer: the finale's night (SCROLLFILM.md Footer row): the closing line, the horizon the thread turns into with the
   star that lands on the lockup's star, the lockup, the three columns, the legal line. */
.footer { position: relative; overflow-x: clip; color: var(--mist-100); padding-block: var(--section-y) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.footer__inner { display: grid; justify-items: center; }
.footer__closing { max-width: 20ch; text-align: center; font-size: clamp(2rem, min(5vw, 8svh), 5.5rem); line-height: 1.04; }
.footer__horizon { position: relative; margin-block: var(--space-5) var(--space-4); padding-inline: var(--gutter) calc(max(var(--gutter), 44px) / 2); }
.footer__horizon-line { display: block; height: 1px; background: linear-gradient(90deg, transparent, #C9A262 22%, #E9D5AA 50%, #C9A262 78%, #D8B97F); transform-origin: 100% 50%; }
.footer__star { display: none; position: absolute; top: 50%; right: calc(max(var(--gutter), 44px) / 2); width: 64px; height: 64px; margin: -32px -32px 0 0; overflow: visible; pointer-events: none; }
html.film .footer__star { display: block; will-change: transform; }
.footer__star-core { fill: var(--gold-300); }
.footer__star-halo { opacity: 0; }
.footer__base { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.footer__lockup { width: 200px; height: auto; }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--gutter); width: 100%; max-width: 62rem; }
.footer__col { display: grid; align-content: start; justify-items: center; gap: var(--space-1); min-width: 0; }
.footer__col--contact { grid-column: 1 / -1; }
.footer__title {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--gold-400);
}
.footer__list { display: grid; justify-items: center; }
.footer__link, .footer__text { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--mist-300); overflow-wrap: anywhere; }
.footer__link .icon, .footer__text .icon { width: 18px; height: 18px; }
.footer__link[href^="mailto:"] { text-transform: lowercase; }
.footer__link { transition: color .3s; }
.footer__link:hover { color: var(--gold-300); }
.footer__legal { font-size: var(--fs-small); color: var(--mist-300); }

/* Floating WhatsApp button */
.float-whatsapp {
  position: fixed;
  right: max(var(--space-3), env(safe-area-inset-right));
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--teal-900);
  color: var(--gold-500);
  box-shadow: var(--shadow-float);
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out), opacity .4s, transform .4s var(--ease-out);
}
.float-whatsapp .icon { width: 26px; height: 26px; }
@media (max-width: 639px) {
  .float-whatsapp { right: max(var(--space-2), env(safe-area-inset-right)); bottom: max(var(--space-2), env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .float-whatsapp .icon { width: 22px; height: 22px; }
}
.float-whatsapp:hover { background: var(--gold-500); color: var(--teal-950); }
[data-float-whatsapp][hidden] { display: none; }

/* Reveal: pre-reveal states apply only when scripts are running (html.js), and the failsafe removes the class */
html.js [data-reveal="lines"] { opacity: 0; }
html.js [data-reveal="fade"] { opacity: 0; transform: translateY(24px); }
html.js [data-reveal="clip"] { clip-path: inset(12% 0 12% 0); }

@media (max-width: 639px) {
  .menu-button { font-size: 0; letter-spacing: 0; gap: 0; width: 44px; height: 44px; padding: 0; }
  html.film .thread { display: none; }
  /* Phones: «Síguenos» takes the wider column so a handle never breaks; the lockup's star stays in the last 0.8 screen. */
  .footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--space-2); }
  .footer__link, .footer__text { gap: .45rem; font-size: .9375rem; }
  .footer__link .icon, .footer__text .icon { width: 16px; height: 16px; }
}

@media (max-width: 639px), (max-height: 500px) {
  :root { --header-h: 72px; }
}

@media (min-width: 640px) {
  .header__book { display: block; }
}

@media (min-width: 1024px) {
  .header__book .btn--primary { padding: 15px 26px; letter-spacing: .2em; }
  .header__book .btn--primary .icon { display: block; }
  .footer__base { gap: var(--space-4); }
  .footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .mobile-menu { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 50%; }
  .mobile-menu__nav { gap: .25rem; }
  .mobile-menu__nav .nav__link { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.1; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__col--contact { grid-column: auto; }
}

/* Phones turned sideways (or any short window): the menu's links go in three columns so every item and the bottom row fit under the header. */
@media (max-height: 500px) {
  .mobile-menu { gap: var(--space-2); padding-top: var(--space-2); padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .mobile-menu__nav { display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--space-4); row-gap: 0; margin-top: 0; }
  .mobile-menu__nav .nav__link { font-size: clamp(1.5rem, 6svh, 2rem); line-height: 1.1; }
  .mobile-menu__actions { margin-bottom: 0; gap: var(--space-2); }
}

/* WIDE scenes: the section is its track (--track, set in its own stylesheet), its first child the sticky stage. */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film [data-scene]:not([data-scene="flow"]) { height: var(--track, auto); }
  html.film [data-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
  html.film [data-step] { pointer-events: none; will-change: transform, opacity; }
  html.film [data-step]:not([data-step="0"]) { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}

/* src/sections/home.css */
/* home.css: the marquee band between the hero and the manifesto (S-sections-pages; S-sections-opening, SCROLLFILM.md §2 MARQUEE). Uses only the base.css variables (plan/journeys/DESIGN.md).
   The band lies on the canvas: no background, no border. Nothing moves by CSS: under html.film src/client/scene-opening.ts
   slides the tracks with the scroll; static, the band stands still. */
.marquee { position: relative; display: flex; overflow: clip; color: var(--gold-300); }
/* Under html.film the band rises over the tail of the hero track (hero.css --pull); it is decoration and never catches a click. */
html.film .marquee { pointer-events: none; }
.marquee__track { display: flex; flex: none; align-items: center; min-width: 100%; margin: 0; padding: 0; list-style: none; }
.marquee__item { display: flex; flex: none; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.marquee__word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: 1;
  white-space: nowrap;
  opacity: .5;
}
.marquee .icon--star { flex: none; width: clamp(1rem, 2.4vw, 2.25rem); height: clamp(1rem, 2.4vw, 2.25rem); color: currentColor; opacity: .5; }
html.film .marquee__track { will-change: transform; }

/* src/sections/hero.css */
/* hero.css: written by S-sections-opening (SCROLLFILM.md §2 HERO, §4 Hero). Uses only the base.css variables (plan/journeys/DESIGN.md).
   Static (no html.film): the stage is one 100svh screen and the dusk veil does not exist. Under html.film the section is
   a cover track (150svh, 160svh from WIDE) whose stage sticks while src/client/scene-opening.ts moves the layers. The
   section has no background of its own: the canvas shows when the photo dissolves. The track's tail is pulled under the
   marquee (--pull) so the marquee rises while the photo is still dissolving and the manifesto follows it with no empty
   stage between them. On a phone --pull is the whole pinned range (track - 100svh): the marquee starts just below the
   first screen and the words leave with the scroll, so no stretch of the scroll shows only a dimmed photo. */
.hero { --hero-extra: 0px; position: relative; color: var(--mist-100); }
@supports (height: 100lvh) {
  /* The stage is as tall as the largest viewport, so the photo covers the first screen whatever the browser bars do; the
     words and the frame keep clear of the part the bars may cover (the difference between the large and small viewport). */
  .hero { --hero-extra: calc(100lvh - 100svh); }
}
.hero__stage {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100lvh;
  overflow: clip;
  isolation: isolate;
}
/* 10% taller above the stage: the scene moves the photo down by up to 8% and grows it, and it must never uncover the top edge. */
.hero__media { position: absolute; inset: -10% 0 0; z-index: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 35, 40, .78) 0%, rgba(3, 35, 40, .5) 35%, rgba(3, 35, 40, 0) 60%),
    var(--scrim),
    linear-gradient(180deg, rgba(3, 35, 40, .45) 0%, rgba(3, 35, 40, 0) 40%);
}
/* The sun sets: the scene brings this veil from 0 to 1. It does not exist when static. */
.hero__dusk { display: none; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(3, 35, 40, .75), rgba(3, 35, 40, .35) 60%, rgba(3, 35, 40, .6)); }
/* The hairline frame starts under the header, so it never runs behind the lockup or the buttons. */
.hero__frame { position: absolute; inset: calc(var(--header-h) + 8px) 24px calc(24px + var(--hero-extra)); z-index: 3; border: var(--hairline); pointer-events: none; }
.hero__corner { position: absolute; width: 28px; height: 28px; border: 0 solid var(--gold-500); }
.hero__corner--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.hero__corner--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.hero__corner--bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.hero__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.hero__content {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding-block: calc(var(--header-h) + var(--space-5)) calc(var(--space-6) + var(--space-3) + var(--hero-extra));
}
/* Eyebrow: the emblem and the badge in one row; the badge is mist-100 over the left scrim (>= 4.5:1). */
.hero__seal { display: flex; align-items: center; gap: var(--space-3); }
.hero__emblem { flex: none; width: 56px; height: auto; }
.hero__badge {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--mist-100);
  text-shadow: 0 1px 14px rgba(3, 35, 40, .55);
}
/* The badge sits level with the emblem: the reveal state of base.css (translateY 24px) is only ever animated away for the
   nodes after the h1, so the badge keeps no offset of its own (opacity is set by the intro). */
html.js .hero__badge[data-reveal="fade"] { transform: none; }
.hero__badge::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--gold-grad); }
.hero__title { max-width: 14ch; text-shadow: 0 2px 40px rgba(3, 35, 40, .45); }
.hero__lead { max-width: 40ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--mist-100); }
.hero__cta { padding-top: var(--space-1); }
.hero__cue {
  position: absolute;
  right: calc(var(--gutter) + var(--space-2));
  bottom: calc(24px + var(--space-3) + var(--hero-extra));
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-300);
  transition: color .3s;
}
.hero__cue-label { display: block; }
.hero__cue:hover { color: var(--gold-400); }
.hero__cue-line { position: relative; display: block; width: 1px; height: 48px; overflow: hidden; background: rgba(201, 162, 98, .35); }
.hero__cue-line::after { content: ""; position: absolute; inset: 0; background: var(--gold-500); transform: translateY(-100%); animation: hero-cue 2.4s var(--ease-out) infinite; }

@keyframes hero-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* The film: the cover track on every screen (the only phone track), the stage sticky, the moved layers promoted. */
html.film .hero { --track: 150svh; --pull: 50svh; height: var(--track); margin-bottom: calc(-1 * var(--pull)); }
html.film .hero__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; }
html.film .hero__dusk { display: block; opacity: 0; }
html.film .hero__media, html.film .hero__dusk, html.film .hero__frame, html.film .hero__content, html.film .hero__cue-label { will-change: transform, opacity; }

@media (max-width: 639px) {
  /* The cue label stays on one line, so the cue is short enough for the room the content leaves it (no overlap with the CTA at 360px). */
  .hero__cue-label { white-space: nowrap; letter-spacing: .24em; }
  .hero__badge { letter-spacing: .24em; }
  .hero__scrim { background: linear-gradient(180deg, rgba(3, 35, 40, 0) 15%, rgba(3, 35, 40, .8) 50%, rgba(3, 35, 40, .9) 100%), linear-gradient(180deg, rgba(3, 35, 40, .45) 0%, rgba(3, 35, 40, 0) 40%); }
  .hero__cue { right: auto; left: 50%; translate: -50% 0; }
  .hero__content { padding-bottom: calc(var(--space-6) + var(--space-5) + var(--hero-extra)); }
}

@media (max-width: 400px) {
  .hero__badge::before { width: 24px; }
}

@media (min-width: 1024px) {
  .hero__frame { inset: calc(var(--header-h) + 8px) 32px calc(32px + var(--hero-extra)); }
  .hero__content { padding-bottom: calc(var(--space-6) + var(--space-4) + var(--hero-extra)); }
}

@media (min-width: 1024px) and (min-height: 600px) {
  html.film .hero { --track: 160svh; --pull: 32svh; }
}

/* Short screens (a phone on its side): the content takes two columns so the headline and the call to action fit the
   first screen; the lead sits beside them; the cue is its line only. */
@media (max-height: 500px) {
  .hero__content {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: end;
    gap: var(--space-2) var(--space-4);
    padding-block: calc(var(--header-h) + var(--space-2)) calc(var(--space-3) + var(--hero-extra));
  }
  .hero__seal { grid-column: 1; grid-row: 1; }
  .hero__emblem { width: 40px; }
  .hero__badge { letter-spacing: .16em; }
  .hero__badge::before { display: none; }
  .hero__scrim { background: linear-gradient(180deg, rgba(3, 35, 40, 0) 15%, rgba(3, 35, 40, .8) 55%, rgba(3, 35, 40, .9) 100%), linear-gradient(180deg, rgba(3, 35, 40, .45) 0%, rgba(3, 35, 40, 0) 40%); }
  .hero__title { grid-column: 1; grid-row: 2; max-width: none; font-size: clamp(1.9rem, 9svh, 2.8rem); }
  .hero__cta { grid-column: 1; grid-row: 3; padding-top: 0; }
  .hero__lead { grid-column: 2; grid-row: 2 / span 2; align-self: end; padding-right: var(--space-4); }
  .hero__cue-label { display: none; }
  .hero__cue-line { height: 32px; }
  .hero__cue { bottom: calc(24px + var(--hero-extra)); }
}

/* src/sections/manifesto.css */
/* manifesto.css: written by S-sections-opening (SCROLLFILM.md §2 MANIFESTO). Uses only the base.css variables (plan/journeys/DESIGN.md).
   Default (static, phone): an editorial flow on the canvas, head, paragraph, image, paragraph, image, pillars, figures, in
   a 12-column grid; the text is mist on the canvas, `.accent` and the figures gold-400, the images sit beside the
   text and never under it. Under WIDE with html.film the section is a 360svh track whose sticky stage holds the dock
   (index + h2), the four steps on columns 1-6 / 1-12 and the image window on columns 8-12
   (src/client/scene-opening.ts). The section has no background of its own. */
.manifesto { position: relative; color: var(--mist-100); }
.manifesto__stage { position: relative; }
.manifesto__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-5);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding-block: var(--section-y);
}
.manifesto__steps, .manifesto__media { display: contents; }
.manifesto .accent { color: var(--gold-400); }

/* The dock: the index label and the statement. */
.manifesto__dock { grid-column: 1 / -1; grid-row: 1; transform-origin: 0 0; }
.manifesto .section-head { max-width: none; }
.manifesto .section-head__title { max-width: 20ch; font-size: clamp(2.6rem, 9vw, 6rem); line-height: .95; }

/* Flow order: paragraph 1 and the first image, paragraph 2 and the second, the pillars, the figures. */
.manifesto__step { grid-column: 1 / -1; }
.manifesto__step[data-step="0"] { grid-row: 2; }
.manifesto__step[data-step="1"] { grid-row: 4; }
.manifesto__step--pillars { grid-row: 6; }
.manifesto__step--figures { grid-row: 7; }
.manifesto__paragraph { max-width: 40rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 5.6vw, 2.1rem); line-height: 1.25; color: var(--mist-100); }

/* The images: a soft oval window, no frame. */
.manifesto__frame {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
  width: min(100%, 34rem);
  aspect-ratio: 4 / 5;
  justify-self: center;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 58%, transparent 100%);
}
.manifesto__frame--wide { grid-row: 3; }
.manifesto__frame--tall { grid-row: 5; }
.manifesto__frame picture { display: block; width: 100%; height: 100%; }
.manifesto__image { width: 100%; height: 100%; object-fit: cover; }

/* The pillars, under a gold seam. */
.manifesto__step--pillars { position: relative; padding-left: var(--space-4); }
.manifesto__step--pillars .manifesto__seam {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent, #C9A262 30%, #E9D5AA 50%, #C9A262 70%, transparent);
  transform-origin: 50% 0;
}
.manifesto__pillars { display: grid; gap: var(--space-4); align-content: start; }
.manifesto__pillar { display: grid; gap: var(--space-1); }
.manifesto__pillar-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.manifesto__pillar-text { color: var(--mist-300); font-size: var(--fs-body); }

/* The figures: giant gold numbers, the unit words small around them, the note under them. */
.manifesto__figures { display: grid; gap: var(--space-4); padding-block: var(--space-4); border-block: var(--hairline); }
.manifesto__figure { display: grid; gap: var(--space-1); align-content: start; }
.manifesto__figure-value { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.4rem, 15vw, 6rem); line-height: .95; padding-bottom: .12em; font-variant-numeric: lining-nums; word-spacing: -.1em; color: var(--gold-400); }
.manifesto__unit { font-size: max(.17em, .75rem); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); }
.manifesto__figure-caption { max-width: 30ch; font-size: var(--fs-small); line-height: 1.5; color: var(--mist-300); }
.manifesto__note { font-size: var(--fs-small); line-height: 1.6; color: var(--mist-300); max-width: 52ch; }

@media (min-width: 640px) {
  .manifesto__pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .manifesto__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .manifesto__note { grid-column: 1 / -1; }
}

/* Static from 1024px: text and image side by side, pillars and figures across the page, the seam horizontal. */
@media (min-width: 1024px) {
  .manifesto__step[data-step="0"] { grid-column: 1 / span 6; grid-row: 2; align-self: center; }
  .manifesto__step[data-step="1"] { grid-column: 1 / span 6; grid-row: 3; align-self: center; }
  .manifesto__frame { grid-column: 8 / -1; width: 100%; justify-self: stretch; align-self: center; }
  .manifesto__frame--wide { grid-row: 2; }
  .manifesto__frame--tall { grid-row: 3; }
  .manifesto__step--pillars { grid-row: 4; padding-left: 0; }
  .manifesto__step--figures { grid-row: 5; }
  .manifesto__step--pillars .manifesto__seam { position: static; width: auto; height: 1px; margin-bottom: var(--space-4); background: var(--gold-grad); transform-origin: 0 50%; }
  .manifesto__figure-value { font-size: var(--fs-figure); }
  .manifesto__paragraph { font-size: var(--fs-lit); }
  .manifesto .section-head__title { font-size: var(--fs-statement); }
}

/* The film, phone and tablet: the head follows the marquee closely (the stage above it is already pulled under the band). */
html.film .manifesto__inner { padding-top: var(--space-5); }

/* The film, WIDE: the track, the stage on 12 columns, every step in one cell, the image window on 8-12. */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film .manifesto { --track: 360svh; }
  html.film .manifesto__inner {
    height: 100%;
    padding-block: calc(var(--header-h) + 3svh) calc(4svh + env(safe-area-inset-bottom));
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 0;
  }
  html.film .manifesto__dock { grid-column: 1 / span 7; will-change: transform; }
  html.film .manifesto__steps {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-content: center;
    will-change: transform;
  }
  html.film .manifesto__step { grid-row: 1; }
  html.film .manifesto__step--text { grid-column: 1 / span 6; align-self: start; }
  html.film .manifesto__step--pillars, html.film .manifesto__step--figures { grid-column: 1 / -1; }
  html.film .manifesto__media { display: block; position: relative; grid-column: 8 / -1; grid-row: 1 / -1; align-self: center; height: 72vh; height: 72svh; will-change: transform, opacity; }
  html.film .manifesto__frame { position: absolute; inset: 0; width: auto; aspect-ratio: auto; will-change: transform, opacity; }
  html.film .manifesto__figures { border-block: 0; padding-block: 0; }
  html.film .manifesto__figure-value { font-size: var(--fs-figure); }
  html.film .manifesto__paragraph { font-size: var(--fs-lit); }
}

/* src/sections/wellness.css */
/* wellness.css: «La terraza», the rooftop wellness club (S-sections-retreat; plan/journeys/SCROLLFILM.md §2). Uses only the base.css variables.
   Static (reduced motion, no script) and COMPACT (html.film, phone or short screen): in flow, a vertical list of panels beside a seam.
   WIDE (html.film): a travel track, 1 px of scroll = 1 px of strip; src/client/scene-retreat.ts moves it. */
.wellness { --wl-w: calc(40vw + 6 * (22rem + var(--gutter)) + 34rem); }
.wellness__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wellness__persist { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.wellness__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.wellness__statuses { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.wellness__cta { display: flex; }

/* The photo window: both pictures in flow when static and on phones */
.wellness__images { display: grid; gap: var(--space-3); }
.wellness__image { position: relative; overflow: clip; border-radius: 0; }
.wellness__img { display: block; width: 100%; height: auto; object-fit: cover; }

/* Therapies: a vertical list beside the seam; each panel has a ◇ node on its hairline, lit when reached */
.wellness__track-wrap { position: relative; padding-left: 2.25rem; }
.wellness__track { position: relative; display: grid; gap: var(--space-4); }
.wellness__seam {
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent, var(--gold-500) 4%, var(--gold-300) 50%, var(--gold-500) 96%, transparent);
  transform-origin: 50% 0;
}
.wellness__panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--hairline);
  transition: opacity .6s var(--ease-out);
}
.wellness__panel::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -2.25rem;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold-500);
  background: var(--gold-400);
  transform: rotate(45deg);
  transition: background-color .6s var(--ease-out);
}
html.film .wellness__panel:not(.is-reached)::before { background: var(--teal-950); }
.wellness__panel-icon { display: inline-flex; font-size: 1.5rem; }
.wellness__panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  color: var(--mist-100);
}
.wellness__panel-text { max-width: 36ch; color: var(--mist-300); }
.wellness__tail { padding-top: var(--space-3); border-top: var(--hairline); }
.wellness__amenities { display: grid; gap: var(--space-1); }
.wellness__amenity { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--mist-100); }

@media (min-width: 640px) {
  .wellness__images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Static from 640px: two columns of panels and no seam; the node sits on the hairline's corner */
  html:not(.film) .wellness__track-wrap { padding-left: 0; }
  html:not(.film) .wellness__track { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  html:not(.film) .wellness__tail { grid-column: 1 / -1; }
  html:not(.film) .wellness__seam { display: none; }
  html:not(.film) .wellness__panel::before { left: 0; }
}

/* COMPACT with the film: the images come between the blocks, in this order */
html.film .wellness__images { display: contents; }
html.film .wellness__persist { order: 0; }
html.film .wellness__image--first { order: 1; }
html.film .wellness__track-wrap { order: 2; }
html.film .wellness__image--second { order: 3; }

/* WIDE with the film: the stage is 100svh. Top band (header to 56svh): the persistent head on columns 1-5 and the photo
   window on columns 7-12 (40svh). Bottom band (60-92svh): the strip. The seam lies under it, ending at the playhead (30vw). */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film .wellness {
    --track: calc(var(--wl-w) - 100vw + 100svh + 40svh);
    padding-block: 0;
  }
  html.film .wellness__stage {
    --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
    --col: calc((100% - 2 * var(--edge) - 11 * var(--gutter)) / 12);
    display: block;
    width: auto;
    margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  html.film .wellness__persist {
    position: absolute;
    left: var(--edge);
    top: calc(var(--header-h) + 2svh);
    z-index: 2;
    width: calc(5 * var(--col) + 4 * var(--gutter));
    gap: var(--space-3);
  }
  html.film .wellness__persist .section-head { gap: var(--space-2); }
  html.film .wellness__persist .section-head__title { font-size: var(--fs-stage); line-height: 1.02; }
  html.film .wellness__persist .section-head__lead { font-size: clamp(1.05rem, 1.15vw, 1.25rem); line-height: 1.5; }
  html.film .wellness__images {
    position: absolute;
    display: block;
    left: calc(var(--edge) + 6 * (var(--col) + var(--gutter)));
    top: calc(var(--header-h) + 2svh);
    width: calc(6 * var(--col) + 5 * var(--gutter));
    height: 40svh;
    overflow: clip;
    pointer-events: none;
  }
  html.film .wellness__image { position: absolute; inset: 0; order: 0; }
  html.film .wellness__image--second { opacity: 0; }
  html.film .wellness__img { width: 100%; height: 100%; will-change: transform; }
  html.film .wellness__track-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 60svh;
    height: 32svh;
    padding-left: 0;
    order: 0;
    z-index: 1;
  }
  html.film .wellness__track {
    display: flex;
    gap: var(--gutter);
    width: max-content;
    height: 100%;
    padding-left: 40vw;
    will-change: transform;
  }
  html.film .wellness__panel {
    flex: none;
    width: 22rem;
    align-content: start;
    opacity: .36;
  }
  html.film .wellness__panel.is-reached { opacity: 1; }
  html.film .wellness__panel::before { left: 0; }
  html.film .wellness__panel-text { font-size: var(--fs-body); }
  html.film .wellness__tail { flex: none; width: 34rem; padding-right: var(--gutter); }
  html.film .wellness__amenities { gap: var(--space-2); }
  html.film .wellness__amenity { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; }
  html.film .wellness__seam {
    left: var(--edge);
    right: auto;
    top: calc(100% + 1.5svh);
    bottom: auto;
    width: calc(30vw - var(--edge));
    height: 1px;
    background: var(--gold-grad);
    transform-origin: 0 50%;
  }
  html.film .wellness__stage::after {
    content: "";
    position: absolute;
    left: 30vw;
    bottom: calc(6.5svh - 4px);
    width: 9px;
    height: 9px;
    margin-left: -4px;
    border: 1px solid var(--gold-500);
    background: var(--teal-950);
    transform: rotate(45deg);
    pointer-events: none;
  }
}

/* The pill never wraps on desktop and laptop (its label is one line, ~18 MESES included); it may run past the head column, never into the photo window.
   On phones and tablets it wraps inside the column. */
@media (min-width: 1024px) {
  .wellness__statuses .status { white-space: nowrap; }
}

/* WIDE on a short or narrow laptop (under 800px tall, or 1024-1279px wide): the head column takes columns 1-6 so the pill and the
   lead fit in fewer lines, and the strip drops lower and thinner so it never runs under the call to action. Verified with a probe
   at 1024x700, 1280x720, 1366x768 and 1024x768: the strip's top stays clear of the head column's bottom. */
@media (min-width: 1024px) and (min-height: 600px) and (max-width: 1279px) {
  html.film .wellness__persist { width: calc(6 * var(--col) + 5 * var(--gutter)); }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 799px) {
  html.film .wellness__persist { width: calc(6 * var(--col) + 5 * var(--gutter)); gap: var(--space-2); }
  html.film .wellness__persist .section-head__lead { font-size: min(var(--fs-body), 2.3svh); line-height: 1.45; }
  html.film .wellness__track-wrap { top: 68svh; height: 24svh; }
  html.film .wellness__panel { gap: var(--space-1); padding-top: var(--space-2); }
  html.film .wellness__tail { padding-top: var(--space-2); }
  html.film .wellness__amenities { gap: var(--space-1); }
  html.film .wellness__amenity { min-height: 0; font-size: min(var(--fs-h3), 3.6svh); }
}

/* src/sections/beach-club.css */
/* beach-club.css: «Abierto hoy», the beach club, marked open (S-sections-retreat; plan/journeys/SCROLLFILM.md §2). Uses only the base.css variables.
   Static (reduced motion, no script) and COMPACT (html.film, phone or short screen): in flow, head, day image, features beside a
   seam, night image. WIDE (html.film): an expand track; src/client/scene-retreat.ts expands the day card, lights the features
   and brings in the night. */
.beach-club__stage { display: grid; gap: var(--space-5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.beach-club__persist { display: contents; }
.beach-club__intro { display: grid; gap: var(--space-4); justify-items: start; align-content: start; order: 0; }
.beach-club__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.beach-club__statuses { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.beach-club__cta { display: flex; }

/* Photo layers: in flow when static and on phones, day first, night on top of it in the film */
.beach-club__layer { position: relative; overflow: clip; border-radius: 0; }
.beach-club__layer--day { order: 1; }
.beach-club__layer--night { order: 3; }
.beach-club__img { display: block; width: 100%; height: auto; object-fit: cover; }
.beach-club__veil { display: none; }

/* Features beside a hairline */
.beach-club__rail { position: relative; padding-left: 1.75rem; order: 2; }
.beach-club__features { display: grid; gap: var(--space-3); }
.beach-club__feature { display: grid; gap: var(--space-1); }
.beach-club__feature-title {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--gold-300);
}
.beach-club__feature-text { max-width: 40ch; color: var(--mist-100); }
.beach-club__seam { position: absolute; left: 0; top: 0; bottom: 0; height: auto; }

/* Static from 1024px: the text on columns 1-5, the two pictures on columns 7-12 */
@media (min-width: 1024px) {
  html:not(.film) .beach-club__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); align-items: start; }
  html:not(.film) .beach-club__persist { display: grid; grid-column: 1 / span 5; grid-row: 1 / span 2; gap: var(--space-5); align-content: start; }
  html:not(.film) .beach-club__layer { grid-column: 7 / span 6; }
  html:not(.film) .beach-club__layer--day { grid-row: 1; }
  html:not(.film) .beach-club__layer--night { grid-row: 2; }
}

/* WIDE with the film: the stage is 100svh. Layers fill it behind the veil; the persistent column sits on the left. */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film .beach-club {
    --track: 300svh;
    padding-block: 0;
  }
  html.film .beach-club__stage {
    --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
    display: block;
    width: auto;
    margin: 0;
  }
  html.film .beach-club__layer {
    position: absolute;
    inset: 0;
    order: 0;
    -webkit-mask-image: linear-gradient(transparent, #000 12svh, #000 calc(100% - 12svh), transparent);
    mask-image: linear-gradient(transparent, #000 12svh, #000 calc(100% - 12svh), transparent);
    pointer-events: none;
  }
  /* The pre-states: the day layer is a card at the right, the night waits, the veil is off, the features are dim */
  html.film .beach-club__layer--day { clip-path: inset(12svh 8vw 12svh 52vw); will-change: clip-path; }
  html.film .beach-club__layer--night { opacity: 0; will-change: opacity; }
  html.film .beach-club__img { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
  html.film .beach-club__layer--day .beach-club__img { transform: scale(1.04); }
  html.film .beach-club__layer--night .beach-club__img { transform: scale(1.1); }
  html.film .beach-club__veil {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 35, 40, .9) 0%, rgba(3, 35, 40, .82) 38%, rgba(3, 35, 40, 0) 62%);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
  }
  html.film .beach-club__persist {
    position: absolute;
    left: var(--edge);
    top: calc(var(--header-h) + 3svh);
    bottom: calc(3svh + env(safe-area-inset-bottom));
    z-index: 2;
    display: grid;
    align-content: space-between;
    gap: var(--space-3);
    max-width: 34vw;
  }
  html.film .beach-club__intro { gap: var(--space-3); }
  html.film .beach-club__intro .section-head { gap: var(--space-2); }
  html.film .beach-club__intro .section-head__title { font-size: var(--fs-stage); line-height: 1.02; }
  html.film .beach-club__intro .section-head__lead { font-size: clamp(1.05rem, 1.15vw, 1.25rem); line-height: 1.5; color: var(--mist-100); }
  html.film .beach-club__rail { order: 0; padding-left: 1.5rem; }
  html.film .beach-club__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-3); }
  html.film .beach-club__feature { opacity: .2; will-change: transform, opacity; }
  html.film .beach-club__feature-text { font-size: var(--fs-small); line-height: 1.5; }
}

/* src/sections/suites.css */
/* suites.css: suites section, «La suite modelo» (S3-stay; SCROLLFILM.md §2). No background: it lies on the page canvas, text in mist, labels gold-400 (base.css). The plan sheet is one of the two sand islands. Static and phone: an editorial layout in flow. WIDE with html.film: a 380svh track holding a sticky stage (persist and caption slot on columns 1-5, the image cell on columns 6-12 stacking the gallery figures and then the plan sheet). Uses only the base.css variables. */
.suites { position: relative; padding-block: var(--section-y); color: var(--mist-100); }
.suites__stage { display: grid; gap: var(--space-5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.suites__persist { display: grid; align-content: start; gap: var(--space-3); }
.suites__statuses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.suites__caption { display: grid; align-content: start; }
.suites__seam { display: none; }
.suites__features { display: grid; align-content: start; gap: var(--space-3); }
.suites__feature { display: flex; align-items: baseline; gap: var(--space-2); padding-top: var(--space-2); border-top: var(--hairline); }
.suites__count { display: none; }
.suites__feature-body { display: grid; gap: var(--space-1); }
.suites__feature-title { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.5; color: var(--gold-300); }
.suites__feature-text { color: var(--mist-300); }
/* In flow the cell dissolves: the plan sheet and the gallery figures are items of the stage grid. */
.suites__cell { display: contents; }
.suites__layer { position: relative; min-width: 0; }
.suites__figure { position: relative; margin: 0; overflow: hidden; border-radius: 0; }
.suites__figure--0 { box-shadow: var(--shadow-float); }
.suites__image { width: 100%; height: auto; object-fit: cover; }
/* The plan sheet: a sand island, the plan on white inside a hairline frame with a 14px gold offset. */
.suites__plan { position: relative; display: grid; place-items: center; margin: 0; padding: clamp(24px, 5vw, 44px); background: var(--sand-50); color: var(--ink-900); box-shadow: var(--shadow-float); }
.suites__plan-frame { position: relative; width: min(100%, 26rem); overflow: clip; background: #fff; border: var(--hairline); box-shadow: 14px 14px 0 0 var(--gold-500); }
.suites__plan-image { width: 100%; height: auto; object-fit: contain; }
.suites__cta { padding-top: var(--space-2); }

@media (min-width: 640px) {
  .suites__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .suites__persist, .suites__caption, .suites__cta { grid-column: 1 / -1; }
  .suites__layer--plan { grid-column: 3 / span 8; }
  .suites__layer--gallery { grid-column: span 4; align-self: start; }
  .suites__figure--1 { margin-top: var(--space-5); }
  .suites__figure--2 { margin-top: var(--space-3); }
  .suites__figure--3 { margin-top: var(--space-6); }
}

@media (min-width: 1024px) {
  .suites__caption { grid-column: 1 / span 5; grid-row: 2; }
  .suites__layer--plan { grid-column: 8 / span 4; grid-row: 2; }
  .suites__cta { grid-row: 4; }
}

/* WIDE with the film: the track, the sticky stage, the caption slot and the image cell. The stage is 100svh and clips; every link lives in a persist layer above the cell; step layers never take the pointer. */
@media (min-width: 1024px) and (min-height: 600px) {
  .suites { --track: 380svh; }
  html.film .suites { padding-block: 0; }
  html.film .suites__stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0 var(--gutter);
    width: auto;
    margin: 0;
    padding: calc(var(--header-h) + 2svh) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) max(4svh, calc(1rem + env(safe-area-inset-bottom)));
  }
  html.film .suites__persist { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 2; gap: min(var(--space-3), 2.4svh); }
  html.film .suites__persist .section-head { gap: min(var(--space-3), 2.2svh); }
  html.film .suites__persist .section-head__title { font-size: var(--fs-stage); }
  html.film .suites__persist .section-head__lead { font-size: min(var(--fs-lead), 2.7svh); }
  html.film .suites__cta { grid-column: 1 / span 5; grid-row: 2; position: relative; z-index: 3; padding-top: min(var(--space-3), 2.6svh); }
  html.film .suites__caption { grid-column: 1 / span 5; grid-row: 4; align-self: end; position: relative; z-index: 1; gap: min(var(--space-3), 2.4svh); }
  html.film .suites__seam { display: block; height: 1px; transform-origin: 0 50%; }
  html.film .suites__features { gap: 0; }
  html.film .suites__feature { grid-area: 1 / 1; display: grid; align-content: start; gap: .35rem; padding-top: 0; border-top: 0; }
  html.film .suites__feature .icon { display: none; }
  html.film .suites__count { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 3.4svh, 2rem); line-height: 1; color: var(--gold-400); }
  html.film .suites__feature-title { font-family: var(--font-display); font-weight: 300; font-size: min(var(--fs-h3), 4.4svh); letter-spacing: 0; text-transform: none; line-height: var(--lh-h3); color: var(--mist-100); }
  html.film .suites__feature-text { font-size: min(var(--fs-body), 2.4svh); line-height: 1.5; }
  html.film .suites__cell { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); grid-column: 6 / -1; grid-row: 1 / -1; align-self: center; height: 74svh; position: relative; z-index: 0; }
  html.film .suites__layer { grid-area: 1 / 1; display: grid; will-change: clip-path; }
  html.film .suites__layer--plan { grid-area: 1 / 1; z-index: 4; }
  html.film .suites__layer--gallery { align-self: stretch; margin-top: 0; }
  html.film .suites__figure { position: absolute; inset: 0; margin: 0; box-shadow: none; }
  html.film .suites__figure picture { height: 100%; }
  html.film .suites__image { height: 100%; will-change: transform; }
  html.film .suites__plan { position: absolute; inset: 0; padding: clamp(20px, 3svh, 32px); box-shadow: none; }
  html.film .suites__plan-frame { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1122 / 1402; box-shadow: 14px 14px 0 0 var(--gold-500); }
  html.film .suites__plan-image { height: 100%; will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .suites [data-parallax] { transform: none !important; }
}

/* src/sections/gastronomy.css */
/* gastronomy.css: gastronomy section, «La mesa» (S3-stay; SCROLLFILM.md §2). No background: it lies on the page canvas (the canvas is at its terracotta-lamp warm point here), text in mist, labels gold-400 (base.css). Static and phone: an editorial layout in flow. WIDE with html.film: a 260svh track holding a sticky stage mirrored from the suites (image cell on columns 1-7, persist and caption slot on columns 8-12). Uses only the base.css variables. */
.gastronomy { position: relative; padding-block: var(--section-y); color: var(--mist-100); }
.gastronomy__stage { display: grid; gap: var(--space-5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.gastronomy__persist { display: grid; align-content: start; gap: var(--space-3); }
.gastronomy__statuses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gastronomy__caption { display: grid; align-content: start; }
.gastronomy__seam { display: none; }
.gastronomy__highlights { display: grid; gap: var(--space-3); }
.gastronomy__highlight { display: flex; align-items: baseline; gap: var(--space-2); padding-top: var(--space-2); border-top: var(--hairline); }
.gastronomy__count { display: none; }
.gastronomy__highlight-body { display: grid; gap: var(--space-1); }
.gastronomy__highlight-title { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.5; color: var(--gold-300); }
.gastronomy__highlight-text { color: var(--mist-300); }
.gastronomy__cta { padding-top: var(--space-2); }
.gastronomy__cell { display: grid; align-content: start; gap: var(--space-3); }
.gastronomy__layer { position: relative; min-width: 0; }
/* The renders carry a baked-in caption pill at the bottom right: in flow they are cropped from the bottom (aspect 1.95) so it never shows. */
.gastronomy__figure { position: relative; margin: 0; overflow: hidden; border-radius: 0; aspect-ratio: 1.95; }
.gastronomy__layer--lead .gastronomy__figure { box-shadow: var(--shadow-float); }
.gastronomy__figure picture { height: 100%; }
.gastronomy__image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

@media (min-width: 1024px) {
  .gastronomy__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .gastronomy__persist { grid-column: 1 / span 5; grid-row: 1; }
  .gastronomy__caption { grid-column: 1 / span 5; grid-row: 2; }
  .gastronomy__cta { grid-column: 1 / span 5; grid-row: 3; }
  .gastronomy__cell { grid-column: 7 / span 6; grid-row: 1 / span 3; }
}

/* WIDE with the film: the track, the sticky stage mirrored from the suites. The stage is 100svh and clips; every link lives in a persist layer above the cell; step layers never take the pointer. */
@media (min-width: 1024px) and (min-height: 600px) {
  .gastronomy { --track: 260svh; }
  html.film .gastronomy { padding-block: 0; }
  html.film .gastronomy__stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0 var(--gutter);
    align-items: stretch;
    width: auto;
    margin: 0;
    padding: calc(var(--header-h) + 2svh) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) max(4svh, calc(1rem + env(safe-area-inset-bottom)));
  }
  html.film .gastronomy__persist { grid-column: 8 / -1; grid-row: 1; position: relative; z-index: 2; gap: min(var(--space-3), 2.4svh); }
  html.film .gastronomy__persist .section-head { gap: min(var(--space-3), 2.2svh); }
  html.film .gastronomy__persist .section-head__title { font-size: var(--fs-stage); }
  html.film .gastronomy__persist .section-head__lead { font-size: min(var(--fs-lead), 2.7svh); }
  html.film .gastronomy__cta { grid-column: 8 / -1; grid-row: 2; position: relative; z-index: 3; padding-top: min(var(--space-3), 2.6svh); }
  html.film .gastronomy__caption { grid-column: 8 / -1; grid-row: 4; align-self: end; position: relative; z-index: 1; gap: min(var(--space-3), 2.4svh); }
  html.film .gastronomy__seam { display: block; height: 1px; transform-origin: 0 50%; }
  html.film .gastronomy__highlights { gap: 0; }
  html.film .gastronomy__highlight { grid-area: 1 / 1; display: grid; align-content: start; gap: .35rem; padding-top: 0; border-top: 0; }
  html.film .gastronomy__highlight .icon { display: none; }
  html.film .gastronomy__count { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 3.4svh, 2rem); line-height: 1; color: var(--gold-400); }
  html.film .gastronomy__highlight-title { font-family: var(--font-display); font-weight: 300; font-size: min(var(--fs-h3), 4.4svh); letter-spacing: 0; text-transform: none; line-height: var(--lh-h3); color: var(--mist-100); }
  html.film .gastronomy__highlight-text { font-size: min(var(--fs-body), 2.4svh); line-height: 1.5; }
  html.film .gastronomy__cell { grid-template: minmax(0, 1fr) / minmax(0, 1fr); grid-column: 1 / span 7; grid-row: 1 / -1; align-self: center; height: 76svh; position: relative; z-index: 0; gap: 0; }
  html.film .gastronomy__layer { grid-area: 1 / 1; display: grid; will-change: clip-path; }
  html.film .gastronomy__layer--over { z-index: 1; }
  html.film .gastronomy__figure { position: absolute; inset: 0; aspect-ratio: auto; box-shadow: none; }
  /* The image is 110% of the cell, top-aligned: the baked-in caption pill (the bottom 8% of the render) falls below the cell and is clipped. */
  html.film .gastronomy__figure picture { height: 110%; }
  html.film .gastronomy__image { height: 100%; object-position: 40% 0; will-change: transform; }
}

/* src/sections/events.css */
/* events.css: events section "La celebración" (S-sections-club; SCROLLFILM.md §2 EVENTS). The section lies on the page canvas.
   Base (reduced, static, phone): an editorial in-flow layout: head, the sunset photo, occasions, capacity, services, call to action.
   WIDE with html.film: a 240svh track whose sticky stage holds the full-bleed sunset layer under a persistent veil, with the head and
   the call to action persistent and two step layers (occasions, capacity + services) that scene-club.ts brings in. Uses only the base.css variables. */
.events { position: relative; padding-block: var(--section-y); color: var(--mist-100); }
.events__stage { display: grid; gap: var(--space-5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.events__head { display: grid; }
.events .section-head__lead { color: var(--mist-100); }

/* The photo in flow; the veil and the seam only exist in the scene (WIDE and phone with html.film for the seam). */
.events__layer { position: relative; margin: 0; }
.events__photo { position: relative; }
.events__photo picture { display: block; }
.events__image { display: block; width: 100%; height: auto; object-fit: cover; }
.events__veil { display: none; }
.events .events__seam { display: none; }
html.film .events .events__seam { display: block; position: absolute; left: 0; right: 0; top: 50%; z-index: 2; }

.events__steps { display: grid; gap: var(--space-5); }
.events__occasions, .events__services { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.events__occasions-item, .events__services-item { display: flex; align-items: baseline; gap: var(--space-2); }
.events__occasions-item { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.events__services-item { font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.6; color: var(--mist-100); }
.events__facts { display: grid; gap: var(--space-3); }
.events__capacity { display: grid; gap: var(--space-1); }
.events__capacity-value {
  /* The sizer keeps the box at the written width while the number counts up, so a centred figure never shifts. */
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: .95;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  text-align: left;
  white-space: nowrap;
  color: var(--gold-300);
}
.events__capacity-value::after { content: attr(data-final); display: block; height: 0; overflow: hidden; visibility: hidden; }
.events__capacity-caption { font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold-300); }
.events__cta { padding-top: var(--space-2); }
.events .section-head__label, .events .section-head__number, .events .accent { color: var(--gold-300); }

@media (min-width: 1024px) {
  .events__steps { gap: var(--space-4); }
}

/* WIDE scene: the track is the section, the stage its sticky first child (base.css). Text sits on the persistent veil. */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film .events { --track: 240svh; padding-block: 0; }
  html.film .events__stage {
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    gap: 0;
    width: auto;
    margin: 0;
    padding: calc(var(--header-h) + var(--space-3)) max(var(--gutter), calc((100% - var(--max)) / 2)) calc(var(--space-4) + env(safe-area-inset-bottom));
    text-align: center;
  }
  html.film .events__layer { position: absolute; inset: 0; z-index: 0; will-change: transform, opacity; }
  /* Feathered edges: the photo and its veil never show a hard edge entering or leaving. */
  html.film .events__photo {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(transparent, #000 12svh, #000 calc(100% - 12svh), transparent);
    mask-image: linear-gradient(transparent, #000 12svh, #000 calc(100% - 12svh), transparent);
  }
  html.film .events__photo picture { position: absolute; inset: 0; }
  html.film .events__image { position: absolute; inset: 0; width: 100%; height: 100%; }
  html.film .events__veil {
    display: block;
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 50% 50%, rgba(3, 35, 40, .55), transparent), rgba(3, 35, 40, .72);
  }
  html.film .events__veil-night { position: absolute; inset: 0; background: rgba(3, 35, 40, .5); opacity: 0; will-change: opacity; }
  html.film .events__head, html.film .events__steps, html.film .events__cta { position: relative; z-index: 2; }
  html.film .events__head { justify-items: center; }
  html.film .events .section-head { justify-items: center; max-width: 64rem; }
  html.film .events .section-head__index { justify-content: center; }
  html.film .events .section-head__title { max-width: none; font-size: var(--fs-stage); }
  html.film .events .section-head__lead { max-width: 56ch; }
  html.film .events__steps { align-content: center; justify-items: center; gap: min(var(--space-4), 5svh); }
  html.film .events__occasions, html.film .events__services { justify-content: center; }
  html.film .events__occasions { gap: var(--space-1) var(--space-4); }
  html.film .events__facts { justify-items: center; gap: min(var(--space-3), 2.5svh); }
  html.film .events__capacity { justify-items: center; }
  html.film .events__capacity-value { font-size: min(11vw, 18svh, 10rem); }
  html.film .events__cta { padding-top: 0; }
}

/* src/sections/membership.css */
/* membership.css: Bondi Club membership "Pertenecer" (S-sections-club; SCROLLFILM.md §2 MEMBERSHIP). The section lies on the page canvas;
   the only cream is the Bondi Club card, a sand-50 island with ink text (R9: no stone or gold text on sand). The call to action sits on the
   canvas, so the primary button's mist text and gold outline read (W3/R2). Uses only the base.css variables.
   Base (reduced, static, phone): head, window, card, benefits, call to action, in flow, nothing under text below 1024px.
   From 1024px the left column holds head, call to action and benefits, the window the right six columns, the card overlapping its lower-left.
   WIDE with html.film: the section is a 240svh track and the grid above is the sticky stage. */
.membership { position: relative; padding-block: var(--section-y); color: var(--mist-100); }
.membership__stage { display: grid; gap: var(--space-5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.membership__head { display: grid; }
.membership .section-head__lead { color: var(--mist-100); }
.membership__media { position: relative; display: grid; gap: var(--space-3); }
.membership__window { display: grid; gap: var(--space-3); }
.membership__figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.membership__figure picture { display: block; }
.membership__image { display: block; width: 100%; height: auto; object-fit: cover; }

/* The Bondi Club card: the sand island. */
.membership__card {
  container-type: inline-size;
  display: grid;
  gap: var(--space-3);
  width: min(100%, 24rem);
  padding: var(--space-4) calc(var(--space-3) + .5rem);
  background: var(--sand-50);
  color: var(--ink-900);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.membership__price { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--sand-300); }
/* --fs-display where the card is wide enough for «USD 1.000» on one line; otherwise it follows the card (24cqw of its content box). */
.membership__price-value {
  font-family: var(--font-display);
  font-size: min(var(--fs-display), 20cqw);
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  color: var(--teal-800);
}
.membership__price-caption { font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--teal-700); }
.membership__includes { display: grid; gap: var(--space-2); }
.membership__includes-item { display: flex; align-items: baseline; gap: var(--space-2); font-size: .9375rem; line-height: 1.45; font-weight: 400; color: var(--ink-900); }

.membership__benefits { display: grid; gap: var(--space-3); }
.membership__benefit { display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-2); border-top: 1px solid rgba(201, 162, 98, .45); }
.membership__benefit-title { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.5; color: var(--gold-400); }
.membership__benefit-text { font-size: var(--fs-small); line-height: 1.55; color: var(--mist-100); }
.membership__cta { padding-top: var(--space-2); }

@media (min-width: 640px) {
  .membership__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}

@media (min-width: 1024px) {
  .membership__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); align-items: start; }
  .membership__head { grid-column: 1 / span 5; grid-row: 1; }
  .membership__cta { grid-column: 1 / span 5; grid-row: 2; padding-top: 0; }
  .membership__benefits { grid-column: 1 / span 5; grid-row: 3; }
  .membership__media { grid-column: 7 / span 6; grid-row: 1 / span 3; align-self: center; display: block; height: 64svh; min-height: 26rem; }
  .membership__window, .membership__figure { height: 100%; }
  .membership__image { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* The card overlaps the window's lower-left corner by 4rem on both axes. */
  .membership__card { position: absolute; left: -4rem; bottom: -4rem; z-index: 2; }
}

/* WIDE scene: the track is the section, the stage its sticky first child (base.css). */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film .membership { --track: 240svh; padding-block: 0; }
  html.film .membership__stage {
    align-content: center;
    width: auto;
    margin: 0;
    padding: calc(var(--header-h) + var(--space-3)) max(var(--gutter), calc((100% - var(--max)) / 2)) calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  html.film .membership .section-head__title { font-size: var(--fs-stage); }
  html.film .membership__window, html.film .membership__card, html.film .membership__benefit { will-change: transform, opacity; }
  html.film .membership__image { will-change: transform; }
}

/* src/sections/invest-teaser.css */
/* invest-teaser.css: the investment teaser (S-sections-info; SCROLLFILM.md §2 INVEST TEASER). The section lies on the page canvas.
   Base (reduced, static, phone): head, figures with the risk note, more link, then the photo, in flow.
   From 1024px: the left five columns hold head and figures, the photo the right six.
   WIDE with html.film: a 180svh track whose sticky stage is that grid; the window opens over the track (scene-club.ts).
   The risk note is never inside a tweened element and never animated. Uses only the base.css variables. */
.invest-teaser { overflow: visible; }
.invest-teaser__stage { display: block; }
.invest-teaser__inner { display: grid; gap: var(--space-5); }
.invest-teaser__head { display: grid; }
.invest-teaser__body { display: grid; gap: var(--space-4); align-content: start; }
.invest-teaser__figures { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: start; border-top: var(--hairline); padding-top: var(--space-3); }
.invest-teaser__figure { display: grid; gap: .25rem; min-width: 0; }
.invest-teaser__value { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-h2); white-space: nowrap; font-variant-numeric: lining-nums; color: var(--gold-400); }
.invest-teaser__caption { font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mist-300); }
.invest-teaser__risk { flex: 1 1 100%; margin-top: var(--space-2); padding-left: var(--space-2); border-left: 1px solid var(--gold-500); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--mist-100); max-width: 62ch; }
.invest-teaser__more {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: 44px;
  font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400);
  background: linear-gradient(var(--gold-500), var(--gold-500)) left bottom / 100% 1px no-repeat; padding-bottom: .25rem;
  transition: color .3s;
}
.invest-teaser__more:hover, .invest-teaser__more:focus-visible { color: var(--gold-300); }
.invest-teaser__more-label { display: inline-block; }
.invest-teaser__more .icon { width: 18px; height: 18px; }
.invest-teaser__more:hover .icon--arrow { transform: translateX(4px); }
.invest-teaser__gallery { display: grid; gap: var(--space-3); }
.invest-teaser__image { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-float); }
.invest-teaser__image picture { display: block; }
.invest-teaser__img { display: block; width: 100%; height: auto; object-fit: cover; }

@media (min-width: 1024px) {
  .invest-teaser__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); align-items: start; }
  .invest-teaser__head { grid-column: 1 / span 5; grid-row: 1; }
  .invest-teaser__body { grid-column: 1 / span 5; grid-row: 2; }
  .invest-teaser__gallery { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: center; }
}

/* WIDE scene: the track is the section, the stage its sticky first child (base.css). */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film .invest-teaser { --track: 180svh; padding-block: 0; }
  html.film .invest-teaser__stage { display: grid; align-items: center; padding-top: calc(var(--header-h) + var(--space-3)); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  html.film .invest-teaser .section-head__title { font-size: var(--fs-stage); }
  html.film .invest-teaser__gallery { height: 64svh; min-height: 24rem; grid-template-rows: minmax(0, 1fr); }
  html.film .invest-teaser__image { height: 100%; box-shadow: none; }
  html.film .invest-teaser__image picture { height: 100%; }
  html.film .invest-teaser__img { height: 100%; will-change: transform; }
}

/* src/sections/location.css */
/* location.css: the location section (S-sections-info; S5-closing). Uses only the base.css variables (plan/journeys/DESIGN.md; SCROLLFILM.md LOCATION row).
   Static and phone: in flow, head, address, details, the image, the map link. WIDE with html.film: a 180svh track whose sticky stage
   holds the text on columns 1-5 and the lens window on columns 6-12 (scene-closing.ts opens it and lights the details). */
.location { color: var(--mist-100); }
.location__inner { display: grid; gap: var(--space-4); }
.location__text { display: grid; gap: var(--space-3); align-content: start; }
.location__address { font-style: normal; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--gold-300); }
.location__details { display: grid; gap: var(--space-1); }
.location__detail { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--mist-100); line-height: var(--lh-body); }
.location__detail .icon { margin-top: .5em; flex: none; color: var(--gold-400); }
.location__map {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: 44px;
  font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400);
  background: linear-gradient(var(--gold-500), var(--gold-500)) left bottom / 100% 1px no-repeat; padding-bottom: .25rem;
  transition: color .3s;
}
.location__map:hover, .location__map:focus-visible { color: var(--gold-300); }
.location__map .icon { width: 18px; height: 18px; }
.location__map:hover .icon--arrow { transform: translateX(4px); }
.location__map-label { display: inline-block; }
.location__window { display: grid; }
.location__image { overflow: clip; border-radius: var(--radius); aspect-ratio: 1 / 1; }
.location__image picture { display: block; height: 100%; }
.location__img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  .location__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gutter); row-gap: var(--space-3); align-content: center; align-items: center; }
  .location__text { grid-column: 1 / span 5; grid-row: 1; align-self: end; }
  .location__map { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
  .location__window { grid-column: 6 / span 7; grid-row: 1 / span 2; }
  .location__image { aspect-ratio: auto; height: min(76svh, 46rem); box-shadow: var(--shadow-float); }
}

/* WIDE scene: the track is the section, the stage is its sticky first child (base.css). The stage's own padding keeps the
   content under the header and above the home indicator. */
@media (min-width: 1024px) and (min-height: 600px) {
  html.film .location { --track: 180svh; padding-block: 0; }
  html.film .location__stage { display: grid; align-content: center; padding-block: var(--header-h) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  html.film .location__inner { gap: var(--space-2) var(--gutter); }
  html.film .location__text { gap: var(--space-2); }
  html.film .location__window { will-change: clip-path; }
  html.film .location__detail { will-change: opacity; }
  html.film .location__img { will-change: transform; }
}

/* src/sections/faq.css */
/* faq.css: the questions section (S-sections-info; S5-closing). Uses only the base.css variables (plan/journeys/DESIGN.md; SCROLLFILM.md FAQ row).
   Mist text on the canvas, gold hairlines, a gold «+». Flow, no track; from 1024px the head sits on columns 1-4 (pinned by CSS under html.film)
   and the list on columns 6-12. */
.faq { color: var(--mist-100); }
.faq__inner { display: grid; gap: var(--space-5); }
.faq__list { border-bottom: var(--hairline); max-width: 62rem; }
.faq__item { border-top: var(--hairline); }
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px;
  padding-block: var(--space-3); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--mist-100);
  transition: color .3s;
}
.faq__question:hover { color: var(--gold-300); }
.faq__question:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 4px; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; flex: none; font-family: var(--font-text); font-weight: 300; font-size: 1.75rem; line-height: 1; color: var(--gold-400); transition: transform .4s var(--ease-out); }
.faq__item[open] > .faq__question::after { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--space-3); max-width: 52rem; font-weight: 300; line-height: var(--lh-body); color: var(--mist-100); }

@media (min-width: 1024px) {
  .faq__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .faq__inner > .section-head { grid-column: 1 / span 4; }
  .faq__list { grid-column: 6 / span 7; }
  /* The head stays while the list scrolls past it (a CSS pin, no script). */
  html.film .faq__inner > .section-head { position: sticky; top: calc(var(--header-h) + 4rem); }
}

/* src/sections/contact.css */
/* contact.css: contact section with the lead form and the direct channels (S-sections-contact; S5-closing). Uses only the base.css variables (plan/journeys/DESIGN.md; SCROLLFILM.md CONTACT row).
   Finale part 1: a centred head, then the form (columns 2-7) and the channels (columns 9-11) on the canvas. Flow, no track, no stage. */
.contact {
  /* Error text: a lighter coral than --coral at weight 400, 6:1 or better on the teal canvas of this section (R9: --coral at weight 300 measured 3.2-4:1). */
  --contact-error: #F7B5A0;
}
.contact__inner { display: grid; gap: var(--space-5); }
.contact .section-head { justify-items: center; justify-self: center; text-align: center; }
.contact .section-head__index { justify-content: center; }
.contact .section-head__title { max-width: 18ch; font-size: max(2.4rem, min(6vw, 10svh, 6.5rem)); line-height: var(--lh-display); }
.contact .section-head__lead { max-width: 46ch; }
.contact__layout { display: grid; gap: var(--space-5); }
.contact__form { display: grid; gap: var(--space-4); }
.contact__field { display: grid; gap: var(--space-1); }
.contact__label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.contact__optional { letter-spacing: .1em; text-transform: none; color: var(--mist-300); font-weight: 300; }
.contact__control {
  width: 100%;
  min-height: 44px;
  padding: .6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(201, 162, 98, .35);
  border-radius: 0;
  color: var(--mist-100);
  /* The dark scheme draws the date picker's calendar icon, the select list and the note's scrollbar light on the dark field (W7). */
  color-scheme: dark;
  font-size: var(--fs-body);
  transition: border-color .4s var(--ease-out);
}
.contact__control:focus { border-bottom-color: var(--gold-500); }
.contact__control:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
.contact__control::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .9; }
.contact__control:-webkit-autofill, .contact__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mist-100);
  box-shadow: 0 0 0 100px var(--teal-900) inset;
  caret-color: var(--mist-100);
}
.contact__control--select {
  appearance: none; cursor: pointer; padding-right: 2rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23D8B97F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .25rem center / 14px 9px;
}
.contact__control--select option { background: var(--teal-900); color: var(--mist-100); }
.contact__control--note { min-height: 7rem; resize: vertical; }
.contact__control[aria-invalid="true"] { border-bottom-color: var(--contact-error); }
.contact__error { font-size: var(--fs-small); font-weight: 400; line-height: 1.5; color: var(--contact-error); }
.contact__error[hidden] { display: none; }
.contact__actions { display: grid; gap: var(--space-2); justify-items: start; }
.contact__submit { min-height: 44px; }
.contact__hint { max-width: 44ch; font-size: var(--fs-small); color: var(--mist-300); }
.contact__channels { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-3); border-top: var(--hairline); }
.contact__channels-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.contact__channel-list { display: grid; gap: var(--space-2); }
.contact__channel { display: grid; gap: .25rem; }
.contact__channel-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.contact__channel-link {
  display: inline-block;
  min-height: 44px;
  padding-block: .6rem;
  font-size: var(--fs-lead);
  color: var(--mist-100);
  background: linear-gradient(var(--gold-500), var(--gold-500)) no-repeat left bottom / 0% 1px;
  transition: background-size .5s var(--ease-out), color .4s var(--ease-out);
  white-space: nowrap;
}
.contact__channel-link:hover, .contact__channel-link:focus-visible { background-size: 100% 1px; color: var(--gold-300); }
/* The approach (scene-closing.ts scrubs yPercent and scale on this wrapper and ends at identity). */
html.film .contact__rise { will-change: transform; }
@media (min-width: 1024px) {
  .contact__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .contact__form { grid-column: 2 / span 6; }
  .contact__channels { grid-column: 9 / span 3; padding-top: var(--space-4); }
}
/* From 1024 to 1199 px the three-column channels column is narrower than the email at the link size (205 px against 236 px at 1024),
   so the form takes five columns and the channels four. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .contact__form { grid-column: 2 / span 5; }
  .contact__channels { grid-column: 8 / span 4; }
}

/* src/sections/invest.css */
/* invest.css: investment page (S-sections-invest). Uses only the base.css variables (plan/journeys/DESIGN.md).
   Scenes: plan/journeys/SCROLLFILM.md §2 INVEST PAGE, run by src/client/scene-invest.ts. The base rules below are the finished
   page (reduced motion, no JS, phones): sections lie on the page canvas, in flow. The tall tracks and sticky stages exist only
   under html.film at WIDE (the last media block); a phone keeps flow, except the hero cover (140svh). */

/* Hero: the cover. Static: a full-screen photo under a veil, text at the bottom left. */
.invest__hero { position: relative; color: var(--mist-100); }
.invest__hero-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--space-5)) calc(var(--space-6) + env(safe-area-inset-bottom));
  overflow: clip;
  isolation: isolate;
}
.invest__hero-media { position: absolute; inset: -8% 0; z-index: -3; }
.invest__hero-media picture { display: block; height: 100%; }
.invest__hero-image { width: 100%; height: 100%; object-fit: cover; }
.invest__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(0deg, rgba(3, 35, 40, .9) 0%, rgba(3, 35, 40, .78) 45%, rgba(3, 35, 40, .2) 80%, rgba(3, 35, 40, .45) 100%),
    linear-gradient(90deg, var(--veil-text) 0%, rgba(3, 35, 40, .35) 70%, transparent 100%);
}
.invest__hero-dusk { display: none; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 35, 40, .75), rgba(3, 35, 40, .35) 60%, rgba(3, 35, 40, .6)); }
.invest__hero-frame { position: absolute; inset: 8px; z-index: 1; border: var(--hairline); pointer-events: none; }
.invest__hero-inner { position: relative; z-index: 2; display: grid; gap: var(--space-3); justify-items: start; }
.invest__hero-label { color: var(--gold-300); }
.invest__hero-rule { margin-block: var(--space-1); }
.invest__hero-title { max-width: 14ch; text-shadow: 0 2px 40px rgba(3, 35, 40, .45); }
.invest__hero-lead { max-width: 46ch; color: var(--mist-100); }

/* Content sections: no background, no edge; the canvas shows through. */
.invest__section { color: var(--mist-100); }
.invest__opportunity { padding-top: var(--space-5); }
.invest__layout { row-gap: var(--space-5); align-items: start; }
.invest__aside, .invest__body, .invest__window { grid-column: 1 / -1; }
.invest__stack { display: grid; gap: var(--space-5); }
.invest__head { min-width: 0; }
.invest__body { display: grid; gap: var(--space-4); }

/* Opportunity: two statements in Cormorant, lit word by word by the scene (static: all lit). */
.invest__paragraph {
  max-width: 34em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: max(1.45rem, var(--fs-lit));
  line-height: 1.3;
  color: var(--mist-100);
}

/* Figures */
/* The figures and their notice form one block: on a wide screen it adds no box (the stack lays them out); on a compact one it is
   the box the notice sticks inside. */
.invest__figure-block { display: contents; }
.invest__figure-list { display: grid; gap: var(--space-4); }
.invest__figure { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--hairline); }
.invest__figure-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--gold-400);
}
.invest__figure-caption {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--mist-300);
}

/* Risk notice: never animated, always at full opacity, next to the figures */
.invest__risk {
  display: grid;
  gap: var(--space-2);
  max-width: 62rem;
  padding: var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--teal-950);
}
.invest__risk-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--gold-400);
}
.invest__risk-text { max-width: 62ch; font-size: var(--fs-body); color: var(--mist-100); }

/* Progress. Static and phone: the milestones beside a vertical gold line (the scene scrubs it on a phone). */
.invest__images { display: grid; gap: var(--space-3); }
.invest__image { overflow: clip; border-radius: 0; }
.invest__image-inner { margin-block: -6%; }
.invest__image-img { width: 100%; height: auto; }
.invest__timeline { position: relative; margin-top: var(--space-5); }
.invest__timeline .invest__line {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 5px;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, #C9A262, #E9D5AA 50%, #C9A262);
  transform-origin: 50% 0;
}
.invest__milestones { display: grid; gap: var(--space-4); }
.invest__milestone { position: relative; padding-left: calc(12px + var(--space-3)); }
.invest__stem { display: none; }
.invest__marker {
  position: absolute;
  top: .55rem;
  left: 0;
  width: 12px;
  height: 12px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--teal-950);
}
.invest__milestone-text { display: block; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--mist-100); }
.invest__milestone--done .invest__marker { background: var(--gold-500); }
.invest__milestone--underway .invest__marker { background: var(--gold-500); animation: invest-pulse 2.4s ease-in-out infinite; }
.invest__milestone--next .invest__marker { background: var(--teal-950); }
.invest__milestone--next .invest__milestone-text { color: var(--mist-300); }

/* Advisor: the finale, centred. Its entrance is the scene's (a wrapper, so the card keeps its own reveal). */
.invest__advisor { padding-block: var(--space-6) var(--section-y); }
.invest__advisor .invest__stack { width: min(100% - 2 * var(--gutter), var(--max)); }
.invest__advisor-rise { display: grid; justify-items: center; gap: var(--space-5); text-align: center; }
.invest__advisor .section-head { justify-items: center; margin-inline: auto; }
.invest__advisor .section-head__title { max-width: 22ch; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.invest__advisor .section-head__index { justify-content: center; }
.invest__advisor-card { display: grid; justify-items: center; gap: var(--space-1); width: min(100%, 40rem); padding-top: var(--space-4); border-top: var(--hairline); }
.invest__advisor-name { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--mist-100); }
.invest__advisor-role {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-400);
}
.invest__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }

.invest__back { color: var(--gold-400); }

@keyframes invest-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (min-width: 640px) {
  .invest__figure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .invest__images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invest__hero-frame { inset: 14px; }
}

@media (min-width: 1024px) {
  .invest__hero-frame { inset: 24px; }
}

/* Desktop layout, static or not: head left, content right; the figures as 3 + 2 on six columns. */
@media (min-width: 1024px) {
  .invest__aside { grid-column: 1 / span 5; }
  .invest__body { grid-column: 7 / -1; }
  .invest__progress .invest__aside { grid-column: 1 / span 6; }
  .invest__window { grid-column: 8 / -1; }
  .invest__images { grid-template-columns: 1fr; }
  .invest__figure-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .invest__figure:nth-child(-n + 3) { grid-column: span 2; }
  .invest__figure:nth-child(n + 4) { grid-column: span 3; }
  .invest__figure-value { font-size: min(5.2vw, 8.4svh, 6.25rem); line-height: 1; }
  .invest__timeline { max-width: 46rem; }
}

/* COMPACT (phones, short screens; film or not): the risk notice stays at the foot of the screen while the figures are on it,
   so a money figure is never in view without it (it settles under the last figure). Stuck at the very edge (bottom: 0), so
   nothing shows below it; the floating WhatsApp button hides while it touches the notice (nav.ts). Opaque, never animated. */
@media (max-width: 1023.98px), (max-height: 599.98px) {
  .invest__figure-block { display: grid; gap: var(--space-5); }
  .invest__risk {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    box-shadow: 0 -1rem 1rem -.25rem var(--teal-950);
  }
}

/* COMPACT with the film (phones, short screens): the hero is the only track; the rest stays in flow. */
@media (max-width: 1023.98px), (max-height: 599.98px) {
  html.film .invest__hero { height: 140vh; height: 140svh; }
  html.film .invest__hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
  html.film .invest__hero-dusk { display: block; opacity: 0; }
  html.film .invest__hero-media, html.film .invest__hero-inner, html.film .invest__hero-frame { will-change: transform, opacity; }
  html.film .invest__hero-dusk, html.film .invest__hero-scrim { will-change: opacity; }
  html.film .invest__figure, html.film .invest__timeline .invest__line { will-change: transform, opacity; }
  html.film .invest__advisor-rise { will-change: transform; }
  /* Handover: the opportunity rises under the dissolving cover's tail; the scene fades its stage in once the cover's content
     has left (scene-invest.ts lit), so the statement arrives as the photo goes instead of after a dead screen. */
  html.film .invest__section:not(.invest__advisor) { padding-block: var(--space-5); }
  html.film .invest__opportunity { margin-top: -70vh; margin-top: -70svh; padding-top: var(--space-3); }
}

/* WIDE with the film: tall tracks, each section's first child a sticky 100svh stage (base.css). */
@media (min-width: 1024px) and (min-height: 600px) {
  .invest__hero { --track: 160svh; }
  .invest__opportunity { --track: 220svh; }
  .invest__figures { --track: 190svh; }
  .invest__progress { --track: 190svh; }
  html.film .invest__hero-dusk { display: block; opacity: 0; }
  html.film .invest__hero-media, html.film .invest__hero-inner, html.film .invest__hero-frame { will-change: transform, opacity; }
  html.film .invest__hero-dusk, html.film .invest__hero-scrim { will-change: opacity; }
  html.film .invest__section:not(.invest__advisor) { padding-block: 0; }
  /* Handovers: each stage starts rising while the previous one still holds and then leaves, so the screen is never empty
     (the previous text exits upward as the next one climbs from the bottom; they never share a row). */
  html.film .invest__opportunity { margin-top: -100vh; margin-top: -100svh; }
  html.film .invest__figures { margin-top: -50vh; margin-top: -50svh; }
  html.film .invest__progress { margin-top: -20vh; margin-top: -20svh; }
  html.film .invest__section:not(.invest__advisor) .invest__stage {
    display: grid;
    align-content: center;
    padding-block: calc(var(--header-h) + 2svh) calc(3svh + env(safe-area-inset-bottom));
  }
  html.film .invest__section .section-head__title { max-width: none; font-size: var(--fs-stage); line-height: 1.02; }
  html.film .invest__advisor .section-head__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  html.film .invest__section:not(.invest__advisor) .section-head { gap: min(2.4svh, var(--space-3)); }
  html.film .invest__layout { align-items: center; row-gap: 0; }
  html.film .invest__body { gap: min(4svh, var(--space-4)); }

  /* Figures: head, the 3 + 2 grid, the note directly under it, all inside one stage */
  html.film .invest__stack { gap: min(3.6svh, var(--space-4)); }
  html.film .invest__figure-list { gap: min(3.2svh, var(--space-3)) var(--gutter); }
  html.film .invest__figure { padding-top: min(2svh, var(--space-2)); gap: .25rem; will-change: transform, opacity; }
  html.film .invest__risk { margin-top: min(1.8svh, var(--space-2)); padding: min(2.2svh, var(--space-3)) var(--space-3); gap: .5rem; }

  /* Progress: head and facade window at the top, the gold line across the container at 67svh, milestones alternating */
  html.film .invest__progress .invest__layout { align-items: start; }
  html.film .invest__section.invest__progress .invest__stage { align-content: start; }
  html.film .invest__window, html.film .invest__images, html.film .invest__image { height: 34svh; }
  html.film .invest__images { display: block; }
  html.film .invest__image-inner { height: 100%; margin: 0; }
  html.film .invest__image-inner picture { display: block; height: 100%; }
  html.film .invest__image-img { height: 100%; object-fit: cover; }
  html.film .invest__timeline { position: absolute; left: 0; right: 0; top: 67svh; height: 0; max-width: none; margin-top: 0; }
  html.film .invest__timeline .invest__line {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C9A262 5%, #E9D5AA 50%, #C9A262 95%, transparent);
    transform-origin: 0 50%;
    will-change: transform;
  }
  html.film .invest__milestones { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  html.film .invest__milestone { height: 0; padding-left: 0; --stem: 5.5svh; }
  html.film .invest__stem {
    display: block;
    position: absolute;
    left: 50%;
    width: 1px;
    height: var(--stem);
    background: var(--gold-500);
    will-change: transform;
  }
  html.film .invest__marker { top: -6px; left: calc(50% - 6px); will-change: transform; }
  html.film .invest__milestone-text {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 17em;
    margin-inline: auto;
    padding-inline: .5rem;
    text-align: center;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.4;
    will-change: transform, opacity;
  }
  /* 1st, 3rd, 5th above the line; 2nd, 4th below */
  html.film .invest__milestone:nth-child(odd) .invest__stem { bottom: 6px; transform-origin: 50% 100%; }
  html.film .invest__milestone:nth-child(odd) .invest__milestone-text { bottom: calc(6px + var(--stem) + .5rem); }
  html.film .invest__milestone:nth-child(even) .invest__stem { top: 6px; transform-origin: 50% 0; }
  html.film .invest__milestone:nth-child(even) .invest__milestone-text { top: calc(6px + var(--stem) + .5rem); }

  /* Advisor: flow, centred; the entrance is a scrub on the wrapper. It rises over the empty foot of the progress stage. */
  html.film .invest__advisor { margin-top: -14vh; margin-top: -14svh; padding-top: var(--space-4); }
  html.film .invest__advisor-rise { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .invest__milestone--underway .invest__marker { animation: none; }
}

/* src/sections/not-found.css */
/* not-found.css: the bilingual 404 content (S-sections-pages). Uses only the base.css variables (plan/journeys/DESIGN.md). */
.not-found { display: grid; gap: var(--space-6); align-content: center; min-height: 100vh; padding-block: calc(var(--header-h) + var(--space-6)) var(--section-y); }
.not-found__block { display: grid; gap: var(--space-3); justify-items: start; max-width: 40rem; }
.not-found__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.not-found__title--second { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--mist-300); }
.not-found__text { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--mist-300); }
.not-found__link { margin-top: var(--space-2); }

@media (min-width: 1024px) {
  .not-found { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
}