/* ============================================================================
   THE OASIS — Global Components: Header / Footer / Nav / Buttons / Forms
   ============================================================================ */

/* ----------------------- Dark-surface token cascade ----------------------- */
/* Anywhere we sit on a navy / dark background, swap the default --warm
   (gulf #1E5592, which drops to ~1.5:1 on navy) for --warm-on-dark
   (pool #6FB1C2, ~5.2:1 on navy — WCAG AA for normal, AAA for large).
   Add `class="on-dark"` to any element with a navy background so every
   descendant — including script flourishes via `color: var(--warm)` —
   inherits the legible tint without per-rule overrides. */
.on-dark,
[data-on-dark],
.site-footer,
.nav-drawer {
  --warm: var(--warm-on-dark);
}
/* Script flourishes on dark/photo backgrounds: soft dark halo via text-shadow
   so the lighter --warm tone still reads on the bright patches of photos
   (concrete, sky, foliage). Targets the script em that uses --font-script. */
.on-dark em,
[data-hero="dark"] em.script,
[data-hero="dark"] .home-hero__title em,
[data-hero="dark"] .hero-page__title em,
.on-dark .pull-quote__text em,
.on-dark .closer__word em {
  text-shadow:
    0 1px 12px rgba(14, 39, 66, 0.55),
    0 0 26px rgba(14, 39, 66, 0.30);
}

/* ----------------------- Smart Cursor Trail ------------------------------- */
.cursor {
  position: fixed; top: 0; left: 0; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); mix-blend-mode: multiply;
  transform: translate3d(-50%, -50%, 0);
  transition: width var(--dur-med) var(--ease-out),
              height var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out),
              opacity var(--dur-med);
  z-index: var(--z-cursor);
  opacity: 0;
}
.cursor.is-active { opacity: 1; }
.cursor.is-link  { width: 56px; height: 56px; background: rgba(30, 85, 146, 0.18); }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }

/* ----------------------- Page Transition Veil ----------------------------
   PROVEN PATTERN — uses CSS @keyframes with explicit from/to states.
   - Default (no class): covering the screen at translateY(0) — visible on every page-load
   - .veil-enter (added on page-load): animates UP off-screen -> page reveals
   - .veil-leave (added on link-click): animates UP from below -> covers screen
   - animation-fill-mode: forwards keeps the element at its end state */
.veil {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh; height: 100svh;
  z-index: var(--z-modal);
  pointer-events: none;
  background: var(--oasis-navy);
  transform: translate3d(0, 0, 0);   /* DEFAULT: covering on fresh load */
  will-change: transform;
}
.veil.veil-enter {
  animation: veilEnter 1100ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.veil.veil-leave {
  animation: veilLeave 1100ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes veilEnter {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -100%, 0); }
}
@keyframes veilLeave {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .veil { display: none !important; }
}

/* ----------------------- Header scrim over hero images ------------------ */
/* A subtle navy fade under the fixed header. Guarantees the wordmark and
   nav stay legible no matter what hero photo sits behind. Disappears once
   the user scrolls (since the header itself gets a frosted white bg then). */
body[data-hero="dark"]::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 220px;
  z-index: calc(var(--z-nav) - 1);
  background: linear-gradient(180deg,
    rgba(14, 39, 66, 0.78) 0%,
    rgba(14, 39, 66, 0.50) 28%,
    rgba(14, 39, 66, 0.22) 60%,
    rgba(14, 39, 66, 0)    100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-hero="dark"].is-scrolled::before {
  opacity: 0;
}

/* ----------------------- Editorial Masthead Ticker ----------------------- */
/* A thin masthead row above the header — like a magazine's running head.
   Pure CSS marquee. Disappears on scroll, freeing the header to compact. */
.masthead {
  position: fixed; top: 0; inset-inline: 0;
  z-index: calc(var(--z-nav) + 1);
  background: var(--oasis-ink); color: var(--oasis-paper);
  font-family: var(--font-body); font-weight: 380;
  font-size: 0.66rem; line-height: 1;
  letter-spacing: var(--tracking-mega-wide);
  text-transform: uppercase;
  padding: 0.55rem 0;
  overflow: hidden; user-select: none; pointer-events: none;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.masthead-track {
  display: inline-flex; gap: 2.4rem; white-space: nowrap;
  animation: masthead 48s linear infinite;
  padding-left: 100%;
}
.masthead-track span { display: inline-flex; align-items: center; gap: 2.4rem; }
.masthead-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: inline-block; }
@keyframes masthead {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body.is-scrolled .masthead { transform: translateY(-100%); opacity: 0; }

/* ----------------------- Site Header / Nav ------------------------------- */
.site-header {
  position: fixed; top: 30px; inset-inline: 0;       /* sits below the masthead */
  z-index: var(--z-nav);
  padding: var(--space-s) var(--gutter);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-l);
  transition: background 320ms var(--ease-out),
              backdrop-filter 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              padding 320ms var(--ease-out),
              top 320ms var(--ease-out);
  border-bottom: 1px solid transparent;
  color: var(--oasis-paper);
}
body.is-scrolled .site-header {
  top: 0;
  background: rgba(251, 247, 238, 0.92);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--line);
  color: var(--ink);
  padding-block: 0.7rem;
}
.site-header.is-light { color: var(--ink); }

/* The wordmark — Oasis / APARTMENTS, editorial stacked lockup.
   Calibrated to match the original logo: "Oasis" and "APARTMENTS" sharing
   the same visual width, APARTMENTS moderately tracked (not over-spaced). */
.brand {
  display: inline-flex; flex-direction: column;
  align-items: stretch; gap: 0.10rem;
  line-height: 0.9;
  transition: transform var(--dur-med) var(--ease-out);
  text-decoration: none;
}
.brand:hover { transform: translateY(-1px); }
/* The brand-name's natural rendered width determines the lockup width.
   .brand-meta below stretches to fill exactly that width via text-align: justify. */
.brand-name {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: clamp(1.85rem, 1.55rem + 1.10vw, 2.55rem);
  letter-spacing: -0.022em;       /* tight, matches the source */
  line-height: 0.85;
  font-feature-settings: "kern", "liga", "calt";
  text-align: center;
  /* Don't stretch beyond intrinsic — let the word size itself,
     then the meta line will justify to match. */
  align-self: center;
}
.brand-name .brand-glyph {
  display: inline-block;
  letter-spacing: -0.03em;
}
/* "APARTMENTS" — width gets pinned by JS to match the rendered width of
   "Oasis" above. JS calculates the exact letter-spacing needed so both lines
   share the same start AND end x-coordinate. CSS provides a sensible default
   in case JS hasn't run yet (e.g. before fonts load). */
.brand-meta {
  display: block;
  align-self: center;
  font-family: var(--font-body);
  font-weight: 460;
  font-size: clamp(0.62rem, 0.58rem + 0.14vw, 0.78rem);
  letter-spacing: 0.22em;     /* default that approximates while JS calibrates */
  text-transform: uppercase;
  opacity: 0.92;
  white-space: nowrap;
  margin-top: 0.32rem;
  /* JS will overwrite letter-spacing inline for pixel accuracy. */
}

.nav-primary {
  display: flex; gap: clamp(1.4rem, 0.5rem + 2.4vw, 2.6rem); align-items: center;
  justify-self: center;
}
.nav-primary a {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 460;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.45rem 0;
  opacity: 0.88;
  transition: opacity var(--dur-fast);
  font-feature-settings: "tnum";
}
.nav-primary a:hover { opacity: 1; }
.nav-primary a::before {
  content: counter(nav-i, decimal-leading-zero);
  position: absolute; top: -0.85em; left: 0;
  font-size: 0.5rem; opacity: 0.42;
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
  counter-increment: nav-i;
}
.nav-primary { counter-reset: nav-i; }
.nav-primary a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right 480ms var(--ease-out);
}
.nav-primary a:hover::after,
.nav-primary a[aria-current="page"]::after { right: 0; }
.nav-primary a[aria-current="page"] { opacity: 1; }

.nav-cta { display: inline-flex; gap: var(--space-s); align-items: center; }

/* Mobile drawer */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  width: 16px; height: 1px; background: currentColor; position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor;
  transition: transform var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  background: var(--oasis-navy); color: var(--oasis-paper);
  padding: calc(var(--space-2xl)) var(--gutter) var(--space-xl);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  display: flex; flex-direction: column; justify-content: space-between;
}
.nav-drawer.is-open { transform: translateY(0); }
.nav-drawer ol {
  display: flex; flex-direction: column; gap: var(--space-xs);
  font-family: var(--font-display); font-weight: 380;
}
.nav-drawer ol a {
  display: flex; align-items: baseline; gap: var(--space-s);
  font-size: var(--step-5); line-height: 1.05;
  letter-spacing: var(--tracking-snug);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast);
}
.nav-drawer ol a:hover { color: var(--accent); transform: translateX(10px); }
.nav-drawer ol a span.idx {
  font-family: var(--font-body); font-size: var(--step--1); opacity: 0.55;
  letter-spacing: var(--tracking-wide);
}
.nav-drawer-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-m);
  font-size: var(--step--1); opacity: 0.78;
  padding-top: var(--space-m); border-top: 1px solid rgba(251, 247, 238, 0.18);
}

@media (max-width: 960px) {
  .nav-primary, .nav-cta-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header { grid-template-columns: 1fr auto; }
}

/* ----------------------- Buttons ----------------------------------------- */
/* Primary pill — refined proportions, tighter tracking, thinner arrow, magnetic */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.7rem;
  padding: 0.95rem 1.7rem 0.92rem;
  border-radius: var(--radius-pill);
  background: var(--ink); color: var(--oasis-paper);
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  overflow: hidden; will-change: transform;
  transition: transform 480ms var(--ease-spring),
              background 320ms var(--ease-out),
              color 320ms var(--ease-out),
              box-shadow 480ms var(--ease-out);
  box-shadow: 0 1px 2px rgba(28, 24, 18, 0.06);
  font-feature-settings: "tnum", "ss01";
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 560ms var(--ease-out);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { box-shadow: 0 18px 36px -12px rgba(30, 85, 146, 0.45); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(0.985); }
.btn-arrow {
  width: 0.78em; height: 0.78em; stroke-width: 1.4;
  transition: transform 520ms var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(0.32em); }

.btn-ghost {
  background: transparent; color: currentColor;
  border: 1px solid currentColor;
  box-shadow: none;
}
.btn-ghost::before { background: currentColor; }
.btn-ghost:hover { color: var(--bg); }
.btn-ghost:hover::before { background: var(--ink); }

.btn-accent { background: var(--accent); color: var(--oasis-paper); }
.btn-accent::before { background: var(--accent-deep); }

/* Small variant for header chrome — tighter, more refined */
.btn--sm {
  padding: 0.65rem 1.1rem 0.62rem;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  gap: 0.5rem;
}
.btn--sm .btn-arrow { width: 0.68em; height: 0.68em; }

.btn-leaf { background: var(--leaf); color: var(--oasis-paper); }
.btn-leaf::before { background: var(--oasis-navy); }

/* Editorial text link — replaces pill buttons in secondary contexts.
   A typographic affordance: text + arrow + underline that draws on hover. */
.btn-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0 0.45rem;
  background: transparent; color: inherit;
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border-radius: 0;
}
.btn-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 520ms var(--ease-out);
}
.btn-link:hover::after { transform: scaleX(0); transform-origin: left center; }
.btn-link::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 520ms var(--ease-out) 80ms;
}
.btn-link:hover::before { transform: scaleX(1); }
.btn-link .btn-arrow { stroke-width: 1.4; }
.btn-link:hover .btn-arrow { transform: translateX(0.4em); }

/* Magnetic wrapper — used by JS to recenter cursor offset. */
.btn[data-magnetic], a.btn[data-magnetic] {
  transition: transform 380ms var(--ease-out),
              background 320ms var(--ease-out),
              box-shadow 480ms var(--ease-out);
}

/* Header phone treatment — refined */
/* Header phone — pill button that pops. Outline by default, accent fill on hover. */
.header-phone {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1.1rem 0.52rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  transition: color 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              transform 320ms var(--ease-out);
}
.header-phone::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 480ms var(--ease-out);
}
.header-phone > * { position: relative; z-index: 1; }
.header-phone:hover { color: var(--oasis-paper); border-color: var(--accent); transform: translateY(-1px); }
.header-phone:hover::before { transform: translateY(0); }
.header-phone svg {
  width: 14px; height: 14px;
  stroke-width: 1.6;
  transition: transform 320ms var(--ease-out);
}
.header-phone:hover svg { transform: rotate(-12deg) scale(1.1); }
/* Soft pulse on the icon to invite the click */
.header-phone svg { animation: phonePulse 3.4s var(--ease-in-out) infinite; }
@keyframes phonePulse {
  0%, 100% { transform: rotate(0deg) scale(1); }
  6%       { transform: rotate(-6deg) scale(1.05); }
  12%      { transform: rotate(0deg) scale(1); }
}
/* When scrolled (light header), invert the resting state for legibility */
body.is-scrolled .header-phone {
  background: var(--accent);
  color: var(--oasis-paper);
  border-color: var(--accent);
}
body.is-scrolled .header-phone::before { background: var(--accent-deep); }

/* ----------------------- AOS — smoothed to match the page veil ----------- */
/* If AOS JS fails to load, show the content (don't leave it invisible). */
html.no-js [data-aos],
html.aos-failed [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}
/* Soften AOS reveals — gentler transforms and consistent ease-in-out.
   We do NOT override transition-duration so AOS's per-element data-aos-duration
   attribute continues to work. Easing IS overridden so it's uniformly velvety. */
[data-aos] {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
  transition-property: opacity, transform;
}
[data-aos="fade-up"]    { transform: translate3d(0, 18px, 0); }
[data-aos="fade-down"]  { transform: translate3d(0, -14px, 0); }
[data-aos="fade-right"] { transform: translate3d(-20px, 0, 0); }
[data-aos="fade-left"]  { transform: translate3d(20px, 0, 0); }
[data-aos="zoom-in"],
[data-aos="zoom-in-up"] { transform: translate3d(0, 12px, 0) scale(0.985); opacity: 0; }
[data-aos].aos-animate {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* ----------------------- Reveal-on-scroll -------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: 420ms; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: 490ms; }
[data-reveal-stagger].is-in > * { opacity: 1 !important; transform: none !important; }
[data-reveal-stagger].is-in > *:nth-child(n) { opacity: 0; transform: translateY(24px); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

/* Marquee */
.marquee {
  display: flex; gap: var(--space-l);
  overflow: hidden; user-select: none;
  border-block: 1px solid var(--line);
  padding-block: var(--space-s);
  font-family: var(--font-display); font-size: var(--step-3);
  font-style: italic; color: var(--ink-soft);
}
.marquee-track {
  display: flex; gap: var(--space-l);
  animation: marquee 38s linear infinite;
  flex-shrink: 0;
}
.marquee-track span { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-l); }
.marquee-track svg { width: 26px; height: 26px; opacity: 0.4; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ----------------------- Site Footer -------------------------------------
   Editorial masthead footer. Three rows:
     1. .footer-mast      — centered wordmark + eyebrow + lede (no script font)
     2. .footer-data      — 4 evenly-weighted columns, one-line headers,
                            aligned to a single baseline at desktop widths
     3. .footer-fineprint — copyright, Equal Housing badge, site attribution
   Tokens only; navy + paper palette; no warm/terracotta.
   ------------------------------------------------------------------------ */
.site-footer {
  background: var(--oasis-navy); color: var(--oasis-paper);
  padding: var(--space-2xl) 0 var(--space-l);
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(at 80% 0%, rgba(30, 85, 146, 0.12), transparent 60%),
              radial-gradient(at 0% 100%, rgba(30, 85, 146, 0.18), transparent 60%);
  pointer-events: none;
}
.site-footer .u-container { position: relative; }

/* ---- Row 1: editorial masthead ---- */
.footer-mast {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(251, 247, 238, 0.14);
}
.footer-mast__word {
  font-family: var(--font-wordmark); font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  line-height: 0.92; letter-spacing: -0.022em;
  color: var(--oasis-paper);
}
.footer-mast__eyebrow {
  /* JS pins width to match the "Oasis" wordmark above; justify distributes
     the letter-spaces so both lines align edge-to-edge. */
  margin-top: var(--space-2xs);
  font-family: var(--font-body); font-weight: 460;
  font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.92rem);
  letter-spacing: 0;
  text-transform: uppercase; opacity: 0.78;
  text-align: justify;
  text-align-last: justify;
  -moz-text-align-last: justify;
  white-space: normal;
}
.footer-mast__lede {
  margin-top: var(--space-m);
  max-width: 52ch;
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.45; letter-spacing: var(--tracking-snug);
  opacity: 0.88;
}

/* ---- Row 2: 4-column data row ---- */
.footer-data {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
  align-items: start;
  margin-bottom: var(--space-xl);
}
.footer-col h4 {
  font-family: var(--font-body); font-weight: 380;
  font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.78;
  margin-bottom: var(--space-s);
  line-height: 1;
  white-space: nowrap;
}
.footer-col ul {
  display: flex; flex-direction: column;
  gap: var(--space-2xs);
  font-family: var(--font-body); font-weight: 460;
  font-size: 0.86rem; line-height: 1.7;
  opacity: 0.92;
}
.footer-col a { opacity: 0.85; transition: opacity var(--dur-fast), color var(--dur-fast); }
.footer-col a:hover { opacity: 1; color: var(--oasis-gulf-light); }
.footer-col__lead {
  font-family: var(--font-display); font-weight: 380;
  font-size: 1.02rem; line-height: 1.35;
  opacity: 1;
}
.footer-col__lead strong { font-weight: 480; letter-spacing: var(--tracking-snug); }

@media (max-width: 880px) {
  .footer-data { grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-xl); }
}
@media (max-width: 640px) {
  .footer-mast__word { font-size: clamp(2.6rem, 14vw, 4.2rem); }
  .footer-data { grid-template-columns: 1fr; gap: var(--space-m); }
  .footer-col h4 { white-space: normal; }
}

/* ---- Row 3: fineprint ---- */
.footer-fineprint {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: 1px solid rgba(251, 247, 238, 0.16);
  font-size: var(--step--2); opacity: 0.68;
  font-family: var(--font-body); font-weight: 380;
  letter-spacing: 0.04em;
}
.footer-fineprint__copy { flex: 1 1 auto; }
.footer-fineprint__site { opacity: 0.62; font-size: 0.7rem; letter-spacing: 0.12em; }
.fair-housing { display: inline-flex; gap: var(--space-2xs); align-items: center; }
.fair-housing svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 640px) {
  .footer-fineprint { justify-content: flex-start; }
}

/* ----------------------- Hero kit (shared) ------------------------------- */
.hero-page {
  position: relative; min-height: 88vh;
  display: grid; align-items: end;
  padding: var(--space-3xl) var(--gutter) var(--space-xl);
  color: var(--oasis-paper);
  overflow: hidden;
  isolation: isolate;
}
.hero-page .hero-bg {
  position: absolute; inset: 0; z-index: -2;
}
.hero-page .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-page::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(27, 26, 23, 0.42) 0%, rgba(27, 26, 23, 0.12) 38%, rgba(27, 26, 23, 0.72) 100%);
}
.hero-page__inner { width: 100%; max-width: var(--container-max); margin-inline: auto; }
.hero-page__crumbs {
  display: inline-flex; gap: var(--space-2xs);
  font-size: var(--step--1); letter-spacing: var(--tracking-loose); text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: var(--space-m);
}
.hero-page__title {
  font-family: var(--font-display); font-weight: 380;
  font-size: var(--step-7); line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-m);
}
.hero-page__title em {
  font-family: var(--font-script); font-style: normal; color: var(--warm);
  /* --warm is gulf blue by default (light bg); on .on-dark heroes the
     cascade swaps it to --warm-on-dark (sky #DBE9F0) for legibility. */
}
.hero-page__sub {
  font-size: var(--step-1); max-width: 56ch; line-height: var(--lh-snug);
  opacity: 0.92;
}

/* ----------------------- Section header (shared) ------------------------- */
.section {
  padding-block: var(--space-2xl);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  align-items: end;
}
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: var(--space-m); } }
.section-title {
  font-family: var(--font-display); font-weight: 380;
  font-size: var(--step-5); line-height: 1.05;
  letter-spacing: -0.025em;
}
.section-title em {
  font-family: var(--font-script); font-style: normal; color: var(--warm);
  font-size: 0.82em;
  letter-spacing: -0.005em;
}
.section-lede {
  font-size: var(--step-1); line-height: var(--lh-snug); color: var(--ink-soft); align-self: end;
}

/* ----------------------- Knock chat button override ---------------------- */
/* Knock injects its widget; nudge it above any custom UI but below the modal */
#knockDoorwayContainer, .knock-doorway, .knock-react-launcher,
[id^="knock-"], [class^="knock-"] {
  z-index: var(--z-sticky) !important;
}

/* ----------------------- Tour modal -------------------------------------- */
/* Site-wide booking modal. Markup is injected by partials.js and lives at the
   end of <body>. Open/close + submit logic lives in main.js. Hidden by default
   via aria-hidden + pointer-events; .is-open flips both flags. */
.tour-modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid; place-items: end center;
  pointer-events: none;
  visibility: hidden;
}
.tour-modal.is-open { pointer-events: auto; visibility: visible; }
@media (min-width: 720px) {
  .tour-modal { place-items: center; }
}

.tour-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 54, 90, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.tour-modal.is-open .tour-modal__backdrop { opacity: 1; }

.tour-modal__panel {
  position: relative;
  width: min(100% - var(--space-s) * 2, 480px);
  margin-bottom: var(--space-s);
  background: var(--oasis-paper);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-3);
  padding: var(--space-l);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 500ms var(--ease-out);
  will-change: transform, opacity;
}
@media (min-width: 720px) {
  .tour-modal__panel { margin-bottom: 0; }
}
.tour-modal.is-open .tour-modal__panel {
  transform: translateY(0);
  opacity: 1;
}
.tour-modal.is-closing .tour-modal__panel {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1),
              opacity 500ms var(--ease-out);
}
.tour-modal.is-closing .tour-modal__backdrop {
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}

.tour-modal__close {
  position: absolute; top: var(--space-s); right: var(--space-s);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out);
}
.tour-modal__close:hover { background: var(--oasis-bone); color: var(--ink); }
.tour-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tour-modal__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 380;
  font-size: var(--step-3);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
  padding-right: var(--space-m);
}
.tour-modal__sub {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  max-width: 38ch;
  margin-bottom: var(--space-m);
}

.tour-form {
  display: flex; flex-direction: column;
  gap: var(--space-xs);
}

/* Floating-label field. Input pads top to leave room for label, label sits
   over the input and shrinks/lifts when focused or filled. */
.tour-field {
  position: relative;
  display: block;
}
.tour-field > input,
.tour-field > select {
  width: 100%;
  padding: 1.05rem 0 0.7rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  transition: border-color 320ms var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.tour-field > select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
  cursor: pointer;
}
.tour-field > input:focus,
.tour-field > select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.tour-field > label {
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-soft);
  pointer-events: none;
  transform-origin: left center;
  transition: transform 320ms var(--ease-out),
              color 320ms var(--ease-out),
              top 320ms var(--ease-out);
}
.tour-field > input:focus + label,
.tour-field > input:not(:placeholder-shown) + label,
.tour-field > select:focus + label,
.tour-field--date > input + label,
.tour-field--select > select + label {
  top: 0;
  transform: scale(0.74);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.tour-field > input:not(:focus):not(:placeholder-shown) + label,
.tour-field--date > input:not(:focus) + label,
.tour-field--select > select:not(:focus) + label {
  color: var(--ink-soft);
}
.tour-field > input::placeholder { color: transparent; }
.tour-field--date > input::-webkit-calendar-picker-indicator {
  filter: invert(20%) sepia(28%) saturate(983%) hue-rotate(178deg) brightness(92%) contrast(89%);
  cursor: pointer;
}

.tour-field.is-error > input,
.tour-field.is-error > select {
  border-bottom-color: var(--oasis-gulf);
}
.tour-field.is-error > label { color: var(--oasis-gulf); }

/* Honeypot — visually hidden but still in the DOM */
.tour-form__hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.tour-form__submit {
  width: 100%;
  margin-top: var(--space-2xs);
}
.tour-form__submit.is-loading { pointer-events: none; opacity: 0.75; }
.tour-form__submit.is-loading .btn-arrow { opacity: 0; }

.tour-form__fineprint {
  font-size: var(--step--2);
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: var(--tracking-loose);
  margin-top: var(--space-2xs);
  opacity: 0.78;
}

/* Success state */
.tour-modal__body--success { display: none; }
.tour-modal__body--success[hidden] { display: none; }
.tour-modal .tour-modal__body[data-tour-view="success"]:not([hidden]) {
  display: block;
}
.tour-success {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) 0 var(--space-2xs);
  text-align: center;
}
.tour-success__icon {
  color: var(--leaf);
  width: 64px; height: 64px;
}
.tour-success__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 380;
  font-size: var(--step-3);
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
}
.tour-success__sub {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-soft);
  max-width: 32ch;
  line-height: var(--lh-snug);
}
.tour-success__close { color: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .tour-modal__panel,
  .tour-modal__backdrop {
    transition: none !important;
  }
}