/* The Setai, St. Maarten. Base layer.
   Reset, typography tiers, components, and layout scaffolding only.
   No page specific sections. No cards, no shadows, no border radius. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  /* Transparent root canvas: with no fixed elements over the hero, iOS 26
     leaves the bars as plain glass and lets the image show through once the
     page is scrolled. An opaque color here becomes the bar tint instead. */
  background-color: transparent;
  /* Dark scheme tints the Liquid Glass haze dark so it melts into the
     imagery instead of sitting white on it (on-device pick, 7/13). Also
     makes the default canvas behind the transparent root dark, so top
     overscroll no longer flashes white. Form controls are pinned back to
     light where they need today's rendering. */
  color-scheme: dark;
}

/* overflow-x clip guards against full bleed breakouts without killing sticky */
html,
body { overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

img, video, svg, picture { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Typography tiers */

.headline {
  font-family: var(--font-display);
  font-weight: var(--fw-headline);
  font-optical-sizing: auto;
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-tight);
  color: var(--fg);
  font-size: var(--fs-h1);
  text-wrap: balance;
}

.headline--h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.headline--h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.headline--h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); }

.body-copy {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: var(--measure);
  text-wrap: pretty;
}

.body-copy--muted { color: var(--muted); }
.body-copy--lg { font-size: var(--fs-body-lg); }

/* Ghost button. Transparent, 1px border, 0 radius, slow fill from the bottom. */
.btn-ghost {
  --btn-line: var(--fg);
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--btn-line);
  border-radius: 0;
  background: transparent;
  color: var(--btn-line);
  font-family: var(--font-body);
  font-weight: var(--fw-eyebrow);
  font-size: 0.78rem;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--dur) var(--ease);
}

.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-line);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
}

.btn-ghost:hover,
.btn-ghost:focus-visible { color: var(--bg); }
.btn-ghost:hover::before,
.btn-ghost:focus-visible::before { transform: scaleY(1); }

.btn-ghost--gold { --btn-line: var(--accent); }
.btn-ghost--gold:hover,
.btn-ghost--gold:focus-visible { color: var(--bg); }

/* onDark forces cream regardless of the local theme, for use over imagery */
.btn-ghost--on-dark { --btn-line: var(--cream); }
.btn-ghost--on-dark:hover,
.btn-ghost--on-dark:focus-visible { color: var(--ink); }

/* Underline fields. Transparent, bottom hairline only, letter spaced labels. */
.field { display: block; margin-bottom: var(--space-md); }

.field__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.68rem;
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  /* Keep native widget rendering (select popovers, autofill, carets) as it
     was before the root went color-scheme dark */
  color-scheme: light;
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field textarea { resize: vertical; min-height: 6rem; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 0.7; }

/* The OS paints the open option list on a white sheet regardless of theme,
   so options must not inherit the ink form's cream text color */
.field select option {
  color: #232320;
  background: #FFFFFF;
}

/* Honeypot: pulled off-screen, still submitted, never focusable or announced.
   Absolute so it leaves the flow; the neutralizer below keeps it from adding a
   stack gap above the first real field. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#inquiry-form .hp + * { margin-top: 0; }

/* Tighten the inquiry form's vertical rhythm on small phones (form only) */
@media (max-width: 700px) {
  #inquiry-form.stack > * + * { margin-top: 1.25rem; }
  #inquiry-form .field { margin-bottom: 1.25rem; }
  #inquiry-form .grid { gap: 1.25rem; }
}

/* Select caret without a boxed control */
.field--select { position: relative; }
.field--select select { appearance: none; padding-right: 1.5rem; }
.field--select::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  bottom: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Hairline rule utilities */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--gold { border-top-color: var(--gold-primary); }
.rule--driftwood { border-top-color: var(--hairline-driftwood); }

/* Paired accent rule, one warm and one coastal blue, echoed sparingly */
.rule--paired {
  border: 0;
  height: 1px;
  background: var(--gold-primary);
  box-shadow: 0 3px 0 -1px var(--coastal-blue);
}

/* Layout scaffolding */
.section { padding-block: clamp(var(--space-lg), 10vw, var(--space-xl)); }

.contained {
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
}

.contained--narrow { --container-max: 760px; }

.full-bleed { position: relative; width: 100%; }

/* Break a child out of a contained wrapper to true full width */
.full-bleed--break {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

[data-theme] {
  background-color: var(--bg);
  color: var(--fg);
}

/* Nav. Fixed, transparent over the hero, cream solid once scrolled. */
/* Absolute by default so it scrolls away with the hero and iOS 26 paints no
   bar block over the imagery (a fixed/sticky element near a screen edge is
   what triggers the opaque tint). motion.js adds .affixed only while the nav
   is actually shown away from the top: revealed on scroll-up, then released
   again once hidden. */
#nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  padding-inline: clamp(var(--space-sm), 4vw, var(--space-md));
  color: var(--cream);
  background: transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Hide-on-scroll: motion.js toggles nav-hidden (never under reduced motion).
   Note: no will-change/transform on the base #nav, so it never becomes a
   containing block for the fixed .nav__menu overlay (which relies on inset:0
   resolving to the viewport on mobile). */
#nav.affixed { position: fixed; }

#nav.nav-hidden { transform: translateY(-100%); }

#nav.scrolled {
  background: var(--cream);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 1.9rem; width: auto; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  min-height: 44px;
  margin-inline-start: -0.5rem;
  color: inherit;
  font-size: 0.72rem;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

/* Persistent inquire pill. Follows the nav color in both states. */
.nav__cta {
  border: 1px solid currentColor;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--cream);
}

/* Desktop nav links inline */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* On desktop the link run flows straight into the flex row; the brand mark and
   contact block are overlay-only rows, hidden here. */
.nav__menu-links { display: contents; }
.nav__menu-brand,
.nav__menu-contact { display: none; }

/* Active page: gold text, and in the nav a thin gold underline. Reads on both
   the transparent (cream) and scrolled (ink) nav states and in the overlay. */
.nav__menu a[aria-current="page"] {
  color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}

/* Mobile menu is a full screen ink overlay, toggled by JS adding is-open on
   #nav. Three rows: brand pinned top, links centered, contacts bottom. */
@media (max-width: 860px) {
  .nav__menu {
    position: fixed;
    inset: 0;
    /* display:none when closed, not just opacity/visibility: an invisible
       full-viewport fixed ink panel still counts for iOS 26 bar sampling.
       allow-discrete + @starting-style keep the settle animation on open. */
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    padding-top: calc(var(--nav-h) + var(--space-md));
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--space-md);
    /* Scroll the overlay if the links do not fit a short viewport (iPhone SE) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ink-deep);
    color: var(--cream);
    font-size: 1.1rem;
    opacity: 0;
    visibility: hidden;
    /* Subtle settle on open, neutralized under reduced motion by the global rule */
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease) allow-discrete, display var(--dur) var(--ease) allow-discrete;
  }
  #nav.is-open .nav__menu { display: flex; opacity: 1; visibility: visible; transform: translateY(0); }
  @starting-style {
    #nav.is-open .nav__menu { opacity: 0; transform: translateY(-8px); }
  }

  /* Link run becomes the centered middle row, single axis for all links */
  .nav__menu-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  .nav__menu-brand { display: block; }
  .nav__menu-brand img { height: 2rem; width: auto; }

  .nav__menu-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }
  .nav__menu-contact a { color: rgba(246, 243, 239, 0.85); }
  .nav__menu-contact a:hover { color: var(--accent); }

  /* Open: header bar goes transparent so the overlay ink shows through, no cream
     strip and no bottom rule; the overlay brand replaces the header wordmark. */
  #nav.is-open {
    background: transparent;
    border-bottom: 0;
    color: var(--cream);
  }
  #nav.is-open .nav__logo { display: none; }
}

@media (min-width: 861px) {
  .nav__toggle { display: none; }
}

/* Short viewports: tighten the overlay so all links fit an iPhone SE (667px) */
@media (max-width: 860px) and (max-height: 700px) {
  .nav__menu {
    gap: var(--space-sm);
    padding-top: calc(var(--nav-h) + var(--space-sm));
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    font-size: 1rem;
  }
  .nav__menu-links { gap: var(--space-sm); }
}

/* No fixed header on phones, so the sticky-nav scroll offset would leave a big
   gap above hash targets; shrink it here (desktop keeps the full nav-h offset). */
@media (max-width: 860px) {
  html { scroll-padding-top: 16px; }
  /* Clean mobile chrome (7/18): the header row (menu text, logo, CTA)
     hides on phones while the overlay is closed; the always-visible menu pill
     is the sole nav entry. The overlay lives inside #nav, so .is-open restores
     display and the full-screen menu still works. */
  #nav:not(.is-open) { display: none; }
  /* Home hero hugs the true screen edge as Safari's bars collapse. svh above
     stays as the fallback for browsers without dvh. */
  .hero--home { min-height: 100dvh; }
}

/* Floating menu pill. Built by motion.js on phones only, appears past the hero,
   opens the same overlay as the header toggle. Above the call float (95),
   below the nav/overlay (100). Hidden while the overlay is open. */
.menu-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  z-index: 98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--hairline-gold);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.menu-pill.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}
#nav.is-open ~ .menu-pill,
.menu-pill[aria-expanded="true"] {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  visibility: hidden;
}
.menu-pill .nav__toggle-bars { gap: 4px; }

/* Reveal on scroll. Motion.js adds in, matching the current main.js contract.
   The hidden state is gated on html.js (motion.js adds that class as its first
   act), so without JS every .reveal stays visible instead of blank forever. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}

html.js .reveal.in { opacity: 1; transform: none; }

/* Crossfade chapter stack. Sticky stage, absolutely stacked layers, one active. */
.stack-track { position: relative; }

.stack-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.stack-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-crossfade) ease;
}

.stack-layer.is-active { opacity: 1; }
.stack-layer img,
.stack-layer video { width: 100%; height: 100%; object-fit: cover; }

/* Before motion.js marks the track ready, show the first layer as a fallback */
.stack-track:not(.is-ready) .stack-layer:first-child { opacity: 1; }

/* Phones: no sticky stage. A full-viewport sticky element makes iOS 26 paint
   opaque bar blocks over the whole page, killing the glass-through chrome.
   Fallback: the chapters render as plain stacked full-screen panels. */
@media (max-width: 860px) {
  .stack-stage { position: static; height: auto; overflow: visible; }
  .stack-layer { position: relative; inset: auto; height: 100svh; opacity: 1; }
  .stack-track .chapter { display: none; }
}

/* Phones with scroll-driven view timelines: recreate the pinned crossfade
   WITHOUT sticky. The stage stays in normal flow and a compositor-driven
   transform pushes it down the track at exactly scroll speed, so it reads
   as pinned while the bar chrome stays glass (only fixed/sticky positioning
   triggers the opaque bars, transforms do not). The dvh in the keyframe
   re-resolves as Safari's bars collapse, keeping the pin math live.
   Removed 7/18 over judder concerns, restored same day: the pinned walk IS
   the product moment (owner decision); occasional bar-collapse judder is the
   accepted trade until a stabler pin lands. */
@supports (animation-timeline: view()) {
  @media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
    .stack-track {
      view-timeline: --stack block;
      /* Default inset honors scroll-padding-top (nav height), which would
         start the pin ~72px early; the stage aligns to the true screen top */
      view-timeline-inset: 0;
    }
    .stack-stage {
      position: relative;
      height: 100svh;
      overflow: hidden;
      animation: stack-pin linear both;
      animation-timeline: --stack;
      animation-range: contain 0% contain 100%;
    }
    .stack-layer { position: absolute; inset: 0; height: auto; opacity: 0; }
    .stack-layer.is-active { opacity: 1; }
    .stack-track:not(.is-ready) .stack-layer:first-child { opacity: 1; }
    .stack-track .chapter { display: block; }
  }
}
@keyframes stack-pin {
  from { transform: translateY(0); }
  to { transform: translateY(calc(500svh - 100dvh)); }
}

.stack-layer__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.05));
}

.stack-layer__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(var(--space-lg), 12vh, var(--space-xl));
  padding-inline: clamp(var(--space-md), 6vw, var(--space-xl));
  color: var(--cream);
}

/* Chapters are the scroll drivers. Motion.js reads their data-i to set active. */
.chapter { position: relative; min-height: 100svh; }

/* Hero line reveal. Motion.js arms then triggers, CSS runs the wipe up. */
[data-lines] .line { display: block; overflow: hidden; }
[data-lines] .line > span {
  display: inline-block;
  transition: transform var(--dur-slow) var(--ease);
}
[data-lines].lines-armed .line > span { transform: translateY(110%); }
[data-lines].lines-armed.lines-in .line > span { transform: none; }

/* WhatsApp float, present site wide */
.whatsapp-float {
  position: fixed;
  right: var(--space-md);
  bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-wa);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid rgba(146, 122, 72, 0.6);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.whatsapp-float:hover { transform: translateY(-2px); }
.whatsapp-float svg { width: 55%; height: 55%; }

/* Call float, phones only, stacked directly above the message float */
.phone-float {
  position: fixed;
  right: var(--space-md);
  bottom: calc(var(--space-md) + var(--wa-size) + 0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-wa);
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid rgba(146, 122, 72, 0.6);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.phone-float:hover { transform: translateY(-2px); }
.phone-float svg { width: 50%; height: 50%; }

/* When the inquiry form is on screen the call/message floats are redundant;
   motion.js toggles is-form-visible on <body> and they fade out. animation:none
   is required: the float-in scroll animation's final keyframe (opacity 1, fill
   both) would otherwise beat these declarations in the cascade. visibility
   keeps the hidden buttons out of the tab order. */
.is-form-visible .phone-float,
.is-form-visible .whatsapp-float {
  animation: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* iOS 26 Liquid Glass. On-device verified 7/13: the opaque bar block only
   appears when a fixed/sticky element sits near a screen edge, its color
   derived from the html/body canvas, and with zero pinned elements plus a
   transparent canvas the image shows through both bars once the page has
   scrolled (never at scrollY 0; the OS owns that state). So nothing is
   pinned while the hero is on screen: the nav starts absolute, the floats
   slide in with scroll (engine-driven scroll timelines are re-sampled
   continuously where JS toggles are read once), and the canvas goes cream
   only once the solid nav can appear, so any block that does get painted
   matches the header. */
@supports (animation-timeline: scroll()) {
  body {
    animation: chrome-canvas linear both;
    animation-timeline: scroll();
    animation-range: 0px 120px;
  }
  /* hover:none keeps the slide-in off mouse-driven narrow windows, where it
     would permanently override the hover lift (a filling animation wins the
     cascade for transform) */
  @media (max-width: 860px) and (hover: none) {
    .whatsapp-float,
    .phone-float {
      animation: float-in linear both;
      animation-timeline: scroll();
      animation-range: 0px 120px;
    }
  }
}
@keyframes chrome-canvas {
  from { background-color: transparent; }
  to { background-color: var(--cream); }
}
@keyframes float-in {
  from { transform: translateY(300%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (max-width: 860px) {
  .phone-float { display: flex; }
}

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

/* Layout utilities and composite components.
   Reusable scaffolding consumed by the pages. No page-scoped selectors. */

.center { text-align: center; }
.center .body-copy,
.center .headline { margin-inline: auto; }

.stack > * + * { margin-top: var(--space-md); }
.stack--sm > * + * { margin-top: var(--space-sm); }
.stack--lg > * + * { margin-top: var(--space-lg); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.center .cluster { justify-content: center; }

.grid { display: grid; gap: var(--space-md); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 699px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.split { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 861px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(var(--space-lg), 6vw, var(--space-xl)); }
  .split--reverse .split__media { order: 2; }
}

.nav__right { display: flex; align-items: center; gap: var(--space-md); }

/* Media */
.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* Parallax wrapper. The image runs taller than its frame so the rAF shift
   from motion.js never reveals an empty edge. */
.parallax-wrap { position: relative; overflow: hidden; }
.parallax-wrap img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.figure { margin: 0; }
.figure img { width: 100%; height: auto; }
.figure__caption {
  margin-top: var(--space-xs);
  font-size: 0.72rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

/* Hero */
.hero { position: relative; display: flex; min-height: 100svh; overflow: hidden; }
.hero--short { min-height: 68svh; }
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Mobile vertical hero reel. Inert until motion.js opts in on a portrait load,
   so the desktop still stays untouched and the vertical file is never fetched in landscape. */
.hero__reel { display: none; }
/* Arming: the reel renders invisibly so iOS will buffer and start it (hidden
   videos may never fire playing); the still stays visible underneath. Only a
   genuine playing event promotes to .is-reel and swaps the layers. */
[data-hero].is-arming .hero__reel { display: block; opacity: 0; }
[data-hero].is-reel .hero__still { display: none; }
[data-hero].is-reel .hero__reel { display: block; opacity: 1; transition: opacity 0.4s var(--ease); }
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Light head for nav legibility only; the bars are glass now, so the image
     needs no opaque blend at the top */
  background:
    radial-gradient(135% 115% at 0% 100%, rgba(10, 10, 10, 0.70) 0%, rgba(10, 10, 10, 0.32) 40%, rgba(10, 10, 10, 0) 72%),
    linear-gradient(to bottom, rgba(22, 22, 20, 0.46) 0, rgba(22, 22, 20, 0) 140px);
}
/* The vertical reel is not a fixed still: its luminance swings across the loop
   (dark water through to blown-out sand and sky), so the price line and the
   scroll cue sit on a moving backdrop. Scoped to .is-reel, so it never touches
   the desktop aerial, which is already clean. The foot gradient carries most of
   the load and keeps the frame filmic; the shadows are the local guarantee on
   the specular highlights, which no full-frame scrim can flatten without
   killing the image. */
[data-hero].is-reel .hero__scrim {
  background:
    radial-gradient(135% 115% at 0% 100%, rgba(10, 10, 10, 0.70) 0%, rgba(10, 10, 10, 0.32) 40%, rgba(10, 10, 10, 0) 72%),
    linear-gradient(to top,
      rgba(10, 10, 10, 0.72) 0%,
      rgba(10, 10, 10, 0.58) 14%,
      rgba(10, 10, 10, 0.44) 26%,
      rgba(10, 10, 10, 0.19) 40%,
      rgba(10, 10, 10, 0) 54%),
    linear-gradient(to bottom, rgba(22, 22, 20, 0.46) 0, rgba(22, 22, 20, 0) 140px);
}
[data-hero].is-reel .hero__sales {
  text-shadow:
    0 1px 2px rgba(10, 10, 10, 0.72),
    0 2px 10px rgba(10, 10, 10, 0.72),
    0 0 30px rgba(10, 10, 10, 0.55);
}
/* drop-shadow, not text-shadow: the cue's rule is a currentColor pseudo-element,
   which a text-shadow would leave untouched */
[data-hero].is-reel .hero__cue {
  filter:
    drop-shadow(0 1px 2px rgba(10, 10, 10, 0.8))
    drop-shadow(0 2px 10px rgba(10, 10, 10, 0.6));
}
.hero__inner {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
  padding-top: calc(var(--nav-h) + var(--space-lg));
  padding-bottom: clamp(var(--space-lg), 12vh, var(--space-xl));
  text-shadow: 0 1px 3px rgba(10, 10, 10, 0.40);
}
.hero__inner > * + * { margin-top: var(--space-sm); }
.hero__line { max-width: 34ch; color: var(--cream); }

.kenburns { animation: kenburns 24s ease-in-out infinite alternate; transform-origin: 55% 45%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-md);
  font-size: 0.62rem;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--cream);
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 2.4rem;
  background: currentColor;
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue { 0%, 100% { transform: scaleY(0.4); opacity: 0.3; } 50% { transform: scaleY(1); opacity: 0.75; } }

/* Stats */
.stats { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 374px) { .stats { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-weight: var(--fw-headline);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1;
  color: var(--accent);
}
.stat__label {
  margin-top: var(--space-sm);
  font-size: 0.72rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

/* Quote band */
.quote-band { position: relative; overflow: hidden; }
.quote-band__media { position: absolute; inset: 0; }
.quote-band__media img { width: 100%; height: 100%; object-fit: cover; }
.quote-band__scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.64); }
.quote-band__inner { position: relative; z-index: 1; }

/* Accordion */
.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--fg);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.accordion__item[open] summary::after { transform: rotate(-135deg); }
.accordion__body { padding-bottom: var(--space-md); color: var(--muted); max-width: var(--measure); }

/* Floor plan plates, a framed thumbnail of the real plan sheet */
.plan-plate {
  position: relative;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.plan-plate img {
  display: block;
  width: 100%;
  height: auto;
}

/* Price ladder, hairline rows echoing the accordion (residences current pricing) */
.price-ladder { border-top: 1px solid var(--rule); }
.price-ladder__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--rule);
}
.price-ladder__name {
  font-family: var(--font-display);
  font-weight: var(--fw-headline);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg);
}
.price-ladder__price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}


/* Standalone underline input, shares field styling (brokerage toggle) */
.input-line {
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input-line:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.input-line::placeholder { color: var(--muted); opacity: 0.7; }

/* Footer. Three columns on desktop: brand, vertical nav, contacts + register. */
.footer { padding-block: clamp(var(--space-md), 6vw, var(--space-lg)); }
.footer__top { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 861px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.footer__logo img { height: 2rem; width: auto; }
.footer__brand-line { font-size: 0.9rem; line-height: 1.6; color: rgba(246, 243, 239, 0.72); max-width: 32ch; }
.footer__property-logo { width: 100px; height: auto; opacity: 0.9; }

.footer__nav { display: flex; flex-direction: column; gap: 0; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__nav a:hover { color: var(--accent); }
.footer__nav a[aria-current="page"] { color: var(--accent); }

.footer__connect { display: flex; flex-direction: column; gap: var(--space-md); }
.footer__contacts { display: flex; flex-direction: column; gap: var(--space-sm); font-size: 0.9rem; color: rgba(246, 243, 239, 0.80); }
.footer__contacts a:hover { color: var(--accent); }

.footer__register { border-top: 1px solid var(--rule); padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.footer__register p { font-size: 0.9rem; line-height: 1.6; color: rgba(246, 243, 239, 0.80); max-width: 34ch; }

.footer__meta { border-top: 1px solid var(--rule); margin-top: var(--space-lg); padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__meta .design-credit { text-align: left; }
.footer__disclaimer { max-width: 74ch; font-size: 0.78rem; line-height: 1.6; color: rgba(246, 243, 239, 0.72); }
.footer__copy { font-size: 0.75rem; color: var(--muted); }

/* Legal row: copyright left, utility links right, tucked under the meta strip */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); }
.footer__legal-links { display: flex; flex-wrap: wrap; column-gap: var(--space-md); font-size: 0.75rem; }
.footer__legal-links a { color: rgba(246, 243, 239, 0.72); min-height: 44px; display: inline-flex; align-items: center; }
.footer__legal-links a:hover,
.footer__legal-links a[aria-current="page"] { color: var(--accent); }
/* Keep the last link clear of the fixed call/message floats at the viewport edge */
@media (min-width: 861px) { .footer__legal-links { padding-right: 6.5rem; } }

/* Small eyebrow label, built from the existing eyebrow tokens */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 860px) {
  .footer__top { gap: var(--space-md); }
  /* Clear the call + message float stack at full scroll (2 x 3.5rem + gaps) */
  .footer { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }
}

/* Design credits strip */
.credits { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); justify-content: center; }
.credits span { font-size: 0.78rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); }
.credits b { color: var(--fg); font-weight: var(--fw-strong); }

/* Quiet single-line design credit (home + residences) */
.design-credit {
  font-size: 0.78rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.design-credit b { color: var(--fg); font-weight: var(--fw-strong); }

/* Hidden utility, supports the main.js form success toggle contract */
.hidden { display: none !important; }

/* Nav toggle icon */
.nav__toggle { position: relative; z-index: 2; }
.nav__cta { position: relative; z-index: 2; }
.nav__toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; }
.nav__toggle-bars i { display: block; width: 20px; height: 1px; background: currentColor; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
#nav.is-open .nav__toggle-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#nav.is-open .nav__toggle-bars i:nth-child(2) { opacity: 0; }
#nav.is-open .nav__toggle-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 860px) { .nav__menu { z-index: 1; } #nav.is-open .nav__toggle-text { display: none; } }

/* Property logo (The Setai, St. Maarten), distinct from the Setai Realty wordmark */
.hero__logo { width: clamp(180px, 24vw, 260px); height: auto; }
/* Pure centered home hero: logo centered, scroll cue centered at the bottom */
.hero__center { position: relative; z-index: 1; margin: auto; text-align: center; padding-top: var(--nav-h); }
.hero__center .hero__logo { margin-inline: auto; }
/* Home hero lockup: small property mark above the dominant Setai Realty wordmark */
.hero__lockup { display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 1.6vh, 1.1rem); }
.hero__mark-property { width: clamp(64px, 8vw, 96px); height: auto; }
.hero__mark-brand { width: clamp(230px, 34vw, 360px); height: auto; }
.hero__cue { position: absolute; left: 50%; bottom: calc(clamp(var(--space-md), 6vh, var(--space-lg)) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1; }
/* Floor-plan gate collapses to a single card on phones (keeps 3-up on desktop) */
@media (max-width: 699px) { .plan-plate:nth-of-type(n+2) { display: none; } }
.inquire__logo { display: block; width: clamp(112px, 14vw, 140px); height: auto; margin: 0 auto; }

/* Heritage watermark, mock only, off unless body carries show-watermark */
.quote-watermark {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("/assets/brand/setai-stm-gold.png") center / min(58%, 520px) no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
body.show-watermark .quote-watermark { display: block; }

/* Lifestyle nav dropdown */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__group-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav__group-toggle::after {
  content: ""; width: 0.38rem; height: 0.38rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease);
}
.nav__group.is-open .nav__group-toggle::after { transform: rotate(-135deg) translateY(-1px); }
.nav__dropdown {
  display: none; position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
  flex-direction: column; min-width: 15rem;
  background: var(--cream); border: 1px solid var(--hairline-gold); padding: 0.4rem 0;
}
.nav__dropdown a { padding: 0.6rem 1.3rem; color: var(--ink); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.nav__dropdown a:hover { color: var(--gold-dark); }
@media (min-width: 861px) {
  .nav__group:hover .nav__dropdown,
  .nav__group:focus-within .nav__dropdown,
  .nav__group.is-open .nav__dropdown { display: flex; }
}
@media (max-width: 860px) {
  .nav__group { flex-direction: column; align-items: center; gap: var(--space-sm); }
  .nav__group-toggle { pointer-events: none; color: rgba(246, 243, 239, 0.55); font-size: 0.72rem; }
  .nav__group-toggle::after { display: none; }
  .nav__dropdown { display: flex; position: static; transform: none; background: transparent; border: 0; padding: 0; min-width: 0; gap: var(--space-sm); }
  .nav__dropdown a { color: var(--cream); padding: 0; font-size: 1rem; }
}

/* Register band, closes every page */
.register-band { border-top: 1px solid var(--hairline-gold); }
.register-band .headline { color: var(--gold-primary); }

/* Hub routing cards (resort) */
.hub-card { display: block; color: inherit; }
.hub-card .figure { overflow: hidden; }
.hub-card img { transition: transform var(--dur-slow) var(--ease); }
.hub-card:hover img { transform: scale(1.03); }
.hub-card__body { margin-top: var(--space-sm); }
.hub-card__body .body-copy { margin-inline: 0; }

/* Refined sales and editorial system */
.section--compact { padding-block: clamp(var(--space-md), 6vw, var(--space-lg)); }
.section-intro { max-width: 62rem; margin-inline: auto; }
.section-intro .body-copy { max-width: 58ch; }

.hero__sales {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(5.5rem, 12vh, 8rem);
  width: min(calc(100% - (var(--gutter) * 2)), 58rem);
  transform: translateX(-50%);
  color: var(--cream);
  text-align: center;
  text-shadow: 0 1px 14px rgba(10, 10, 10, 0.4);
}
.hero__sales-kicker {
  font-size: clamp(0.68rem, 0.6rem + 0.2vw, 0.78rem);
  font-weight: var(--fw-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__sales-line { margin-top: 0.65rem; font-family: var(--font-display); font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.75rem); }
.hero--home .hero__lockup { transform: translateY(-8vh); }
.hero--home .hero__cue { bottom: calc(clamp(1.25rem, 3.5vh, 2.5rem) + env(safe-area-inset-bottom, 0px)); }

.credential-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.15rem;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}
/* Vertical hairline between the two partner cells. */
.credential:first-child { border-right: 1px solid var(--rule); }
/* Setai Realty spans the full width beneath, set off by its own hairline. */
.credential--lead {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  gap: 1.35rem;
  padding-block: calc(var(--space-md) * 1.15);
}
.credential__label { display: block; font-size: 0.65rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); }
.credential__logo { display: block; width: auto; height: 2.6rem; }
/* HKS's bold mark reads oversized at the shared height; optically balanced down */
.credential__logo--hks { height: 1.8rem; }
.credential__logo--lead { height: 3.9rem; }

.room-story .body-copy { margin-top: var(--space-sm); color: var(--muted); max-width: 34rem; }
.room-story .eyebrow { color: var(--accent); }
.price-intro { color: var(--accent); font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1vw, 2rem); }

.plan-request {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding: clamp(var(--space-md), 5vw, var(--space-lg));
  border: 1px solid var(--hairline-gold);
  background: var(--cream-deep);
}
.plan-request__list { display: grid; gap: var(--space-sm); border-top: 1px solid var(--rule); }
.plan-request__item { display: flex; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-sm); font-size: 0.78rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); }
.plan-request__item::after { content: "Included"; color: var(--accent); }

.register-band { padding-block: clamp(var(--space-lg), 8vw, calc(var(--space-xl) * 0.8)); }
.register-band .body-copy { max-width: 48rem; }

@media (min-width: 700px) {
  .credential { padding: var(--space-lg) var(--space-md); }
  .credential__logo { height: 2.9rem; }
  .credential__logo--hks { height: 2rem; }
  .credential__logo--lead { height: 4.4rem; }
  .plan-request { grid-template-columns: 1.2fr 0.8fr; }
}

@media (max-width: 860px) {
  .hero--home .hero__lockup { transform: translateY(-10vh); }
  /* Lift the sales block clear of the call float. The floats stack bottom-right
     from this breakpoint down (z-index 95) and the sales line runs the full
     gutter width, so it cannot sit beside them, only above them. At rest the
     call float's top edge is space-md + both float heights + the gap between
     them off the viewport bottom, and rest is the state that collided: the
     floats only slide in on scroll where scroll-timelines are supported, and
     under reduced motion they never move at all. */
  .hero__sales {
    --float-stack-top: calc(var(--space-md) + (var(--wa-size) * 2) + 0.75rem + env(safe-area-inset-bottom, 0px));
    bottom: calc(var(--float-stack-top) + 0.75rem);
  }
  .hero__sales-line { max-width: 23rem; margin-inline: auto; }
}

@media (max-width: 560px) {
  .section { padding-block: clamp(3.5rem, 16vw, 5rem); }
  .btn-ghost { width: 100%; padding-inline: 1rem; }
  .cluster { width: 100%; }
  .hero__sales-kicker { letter-spacing: 0.13em; }
  .credential { padding-inline: 0.6rem; }
  .credential__logo { height: 2.2rem; }
  .credential__logo--hks { height: 1.5rem; }
  .credential__logo--lead { height: 3.2rem; }
}

/* Editorial lifestyle compositions */
.editorial-feature { position: relative; min-height: clamp(36rem, 72vw, 52rem); display: flex; align-items: flex-end; }
.editorial-feature__media { position: absolute; inset: 0 8% 0 0; overflow: hidden; }
.editorial-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial-feature__panel { position: relative; z-index: 1; width: min(35rem, 48%); margin-left: auto; margin-bottom: var(--space-lg); padding: clamp(var(--space-md), 5vw, var(--space-lg)); background: var(--cream); }
.editorial-feature--dark .editorial-feature__panel { background: var(--ink); color: var(--cream); }
.editorial-feature__index { color: var(--accent); font-size: .7rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

.editorial-mosaic { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto auto; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.editorial-mosaic__lead { grid-row: 1 / 3; }
.editorial-mosaic__lead img { aspect-ratio: 4 / 5; }
.editorial-mosaic__side img { aspect-ratio: 3 / 2; }
.editorial-mosaic__copy { padding: clamp(var(--space-sm), 3vw, var(--space-md)); max-width: 34rem; }

.cinematic { position: relative; min-height: clamp(32rem, 68svh, 50rem); display: flex; align-items: flex-end; overflow: hidden; }
.cinematic__media, .cinematic__scrim { position: absolute; inset: 0; }
.cinematic__media img { width: 100%; height: 100%; object-fit: cover; }
.cinematic__scrim { background: rgba(10, 10, 10, 0.34); }
.cinematic__copy { position: relative; z-index: 1; padding-block: clamp(var(--space-lg), 10vw, var(--space-xl)); color: var(--cream); }
.cinematic__copy .body-copy { max-width: 42rem; margin-inline: 0; }

.experience-rail { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.experience-step { padding: var(--space-md); border-right: 1px solid var(--rule); }
.experience-step:last-child { border-right: 0; }
.experience-step__time { color: var(--accent); font-size: .68rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.experience-step .headline { margin-top: var(--space-xs); }

.buyer-note { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--hairline-gold); border-bottom: 1px solid var(--hairline-gold); }
.buyer-note__copy { max-width: 52rem; }
.buyer-note .eyebrow { color: var(--accent); }

.editorial-atlas { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.editorial-atlas__lead { grid-row: span 2; }
.editorial-atlas__lead img { aspect-ratio: 4 / 5; }
.editorial-atlas__item img { aspect-ratio: 3 / 2; }
.editorial-atlas__caption { padding-top: var(--space-sm); }

.process-line { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline-gold); }
.process-line__item { padding: var(--space-md) var(--space-md) 0 0; }
.process-line__num { color: var(--accent); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4rem); }

.fact-rail { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--rule); }
.fact-rail__item { padding: var(--space-md); text-align: center; border-right: 1px solid var(--rule); }
.fact-rail__item:last-child { border-right: 0; }
.fact-rail__value { font-family: var(--font-display); font-size: var(--fs-h4); }
.fact-rail__label { margin-top: .4rem; color: var(--muted); font-size: .7rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

@media (max-width: 860px) {
  .editorial-feature { min-height: auto; display: block; }
  .editorial-feature__media { position: relative; inset: auto; height: min(72svh, 38rem); }
  .editorial-feature__panel { width: calc(100% - var(--gutter)); margin: -3rem 0 0 auto; }
  .editorial-mosaic, .editorial-atlas { grid-template-columns: 1fr; }
  .editorial-mosaic__lead, .editorial-atlas__lead { grid-row: auto; }
  .editorial-mosaic__lead img, .editorial-atlas__lead img { aspect-ratio: 4 / 5; }
  .experience-rail, .process-line, .fact-rail { grid-template-columns: 1fr; }
  .experience-step, .fact-rail__item { border-right: 0; border-bottom: 1px solid var(--rule); }
  .experience-step:last-child, .fact-rail__item:last-child { border-bottom: 0; }
  .buyer-note { align-items: flex-start; flex-direction: column; }
}

/* Reduced motion. Neutralize transforms, parallax, and reveal so content shows. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kenburns { animation: none !important; }
  .scroll-cue::after { animation: none !important; }
  /* Scroll-driven animations ignore animation-duration, so kill them
     explicitly: floats sit in place and the canvas stays cream */
  body,
  .whatsapp-float,
  .phone-float { animation: none !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  [data-lines] .line > span { transform: none !important; }
  .stack-layer { transition: none !important; }
}

/* Residences unit collection, per-plan depth with gated floor-plan teasers */
.unit-collection { display: grid; gap: var(--space-lg) var(--space-md); }
@media (min-width: 700px) { .unit-collection { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .unit-collection { grid-template-columns: repeat(3, 1fr); } }

.unit-card { display: flex; flex-direction: column; gap: var(--space-xs); }
.unit-card__media { overflow: hidden; margin-bottom: var(--space-xs); }
.unit-card__media img { transition: transform var(--dur-slow) var(--ease); }
.unit-card__media:hover img { transform: scale(1.03); }
.unit-card .eyebrow { margin-top: var(--space-xs); }
.unit-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem var(--space-sm);
}
.unit-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-headline);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg);
}
.unit-card__price {
  font-size: 0.9rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.unit-card__soldout {
  font-size: 0.9rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.unit-card__spec { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--muted); }
.unit-card .body-copy { font-size: 0.95rem; }

/* Gated floor-plan teaser. The plate is a dimmed placeholder; the real plan is
   shared on request, so the whole tile links to the inquiry form. */
.plan-teaser { display: block; margin-top: auto; padding-top: var(--space-sm); }
.plan-teaser .plan-plate { opacity: 0.94; transition: opacity var(--dur) var(--ease); }
.plan-teaser:hover .plan-plate,
.plan-teaser:focus-visible .plan-plate { opacity: 1; }
.plan-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-xs);
  font-size: 0.72rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.plan-teaser__cta::after { content: "\2192"; }

/* In-house team (about). Portrait for the broker, matted gold monogram plates
   for the two without a photo, so the trio reads as one intentional set rather
   than one photo and two blanks. No cards: hairlines and the frame do the work. */
.team-grid { display: grid; gap: var(--space-lg) var(--space-md); }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

.team-member { display: flex; flex-direction: column; }
.team-member__media { margin-bottom: var(--space-md); overflow: hidden; }
.team-member__media img { width: 100%; height: 100%; object-fit: cover; }

/* Monogram plate stands in for a portrait, matted with a double hairline frame */
.team-member__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-deep);
  border: 1px solid var(--hairline-gold);
}
.team-member__plate::after {
  content: "";
  position: absolute;
  inset: clamp(0.85rem, 4%, 1.5rem);
  border: 1px solid var(--hairline-gold);
  pointer-events: none;
}
.team-member__monogram {
  font-family: var(--font-display);
  font-weight: var(--fw-headline);
  font-size: clamp(2.75rem, 2rem + 4vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em; /* offset the trailing letter-spacing to keep it centered */
  color: var(--accent);
}

.team-member__name { margin-top: 0; }
.team-member__role { margin-top: 0.55rem; color: var(--accent); }
.team-member__bio { margin-top: var(--space-sm); font-size: 0.95rem; color: var(--muted); max-width: none; }
.team-member__contact {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}
.team-member__contact a { color: var(--accent); transition: color var(--dur) var(--ease); }
.team-member__contact a:hover,
.team-member__contact a:focus-visible { color: var(--gold-dark); }

/* On phones the contact hairline sits with normal flow spacing, not pushed to a
   shared baseline, since each member is full width and stacked */
@media (max-width: 699px) {
  .team-member__contact { margin-top: var(--space-md); }
}

/* Cookie / tracking consent banner. Injected by js/consent.js; gates the Meta
   Pixel behind an explicit Accept. Compact bottom bar (targets under ~90px on a
   390px screen so it never eats the fold), reads as site chrome. Sits above the
   floats (z-wa 95) and below the nav (z-nav 100). */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  background: var(--ink-deep);
  color: var(--cream);
  border-top: 1px solid var(--hairline-gold);
  padding: 0.55rem 0 calc(0.55rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(10, 10, 10, 0.35);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.consent.is-visible { transform: translateY(0); }

.consent__inner {
  width: min(100% - (var(--space-md) * 2), var(--container-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem var(--space-md);
  flex-wrap: wrap;
}
.consent__text {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(246, 243, 239, 0.85);
}
.consent__text a {
  color: var(--gold-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.consent__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.consent__actions .btn-ghost {
  padding: 0.5rem 1.15rem;
  font-size: 0.72rem;
  min-height: 40px;
}

/* While the banner is up, hide the call/message floats so nothing stacks on it. */
.consent-open .phone-float,
.consent-open .whatsapp-float {
  animation: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 620px) {
  .consent__inner {
    width: min(100% - (var(--space-sm) * 2), var(--container-max));
    gap: 0.4rem var(--space-sm);
  }
  .consent__text { flex: 1 1 100%; text-align: center; font-size: 0.8rem; line-height: 1.35; }
  .consent__actions { width: 100%; }
  .consent__actions .btn-ghost { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* =====================================================================
   Fix wave (UI + content lane). Appended so these intentionally win.
   ===================================================================== */

/* Task 1: active nav link. Ivory text (inherited), thin gold underline with a
   slight offset. Replaces the former gold-text treatment Paul disliked. Reads
   in the transparent, scrolled, and mobile-overlay nav states alike. */
.nav__menu a[aria-current="page"] {
  color: inherit;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--gold-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.footer__nav a[aria-current="page"] {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--gold-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Task 3: footer brand lockup. Setai Realty wordmark paired with the St. Maarten
   mark to its right, tagline beneath. Bigger, tighter pairing on phones. */
.footer__brand-lockup { display: flex; align-items: center; gap: var(--space-md); }
.footer__brand-lockup .footer__property-logo { width: auto; height: 2.3rem; }
@media (max-width: 860px) {
  .footer__brand { gap: var(--space-sm); }
  .footer__brand-lockup { gap: var(--space-sm); }
  .footer__logo img { height: 2.6rem; }
  .footer__brand-lockup .footer__property-logo { height: 2.9rem; }
}

/* Task 10: quiet hero CTA (home). Ghost outline, never the full-width block the
   base btn-ghost becomes on small screens. */
.hero__cta {
  width: auto;
  margin-top: var(--space-sm);
  padding: 0.7rem 1.6rem;
  font-size: 0.7rem;
}

/* Task 13: skip link. Off-screen until focused, then pinned top-left above nav. */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.7rem 1.15rem;
  background: var(--ink-deep);
  color: var(--cream);
  border: 1px solid var(--hairline-gold);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}
.skip-link:focus,
.skip-link:focus-visible { left: var(--space-sm); top: var(--space-sm); }

/* Task 16: Equal Housing line, discreet, near the copyright/legal row. */
.footer__equal-housing {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(246, 243, 239, 0.55);
}

/* Task 19: contact submit label bumped ~12.5px -> 14px (scoped, no site churn). */
#inquiry-form button[type="submit"] { font-size: 0.875rem; }

/* Task 5: floats vs body copy on small phones. Shrink modestly and tuck tighter
   into the corner, and give narrow text columns a right safe-gutter so no copy
   sits under the corner floats. The contact form section is excluded: its floats
   already auto-hide (is-form-visible) while the form is on screen. */
@media (max-width: 480px) {
  :root { --wa-size: 3rem; }
  .whatsapp-float {
    right: var(--space-sm);
    bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  }
  .phone-float {
    right: var(--space-sm);
    bottom: calc(var(--space-sm) + var(--wa-size) + 0.6rem + env(safe-area-inset-bottom, 0px));
  }
  .section:not(.quote-band) .contained--narrow { padding-right: 3.25rem; }
}