/* Vida Residences Reem Island — vidareemislandresidences.com
   Palette is taken from the Vida wordmark itself (#004D71) and the warm sand
   of the interior renders. Renders are never cropped: every project image is
   shown whole (height:auto, or object-fit:contain inside the gallery stage). */

/* ============================================================= tokens */
:root {
  --teal:        #004D71;
  --teal-deep:   #023A55;
  --teal-ink:    #012838;
  --gold:        #B08D4F;
  --gold-soft:   #D6BC8C;

  --sand:        #F1EADE;
  --sand-deep:   #E6DCCB;
  --cream:       #FBF8F2;
  --ink:         #1C1A17;
  --muted:       #6E675C;
  --on-dark:     #F4EFE6;
  --on-dark-dim: rgba(244, 239, 230, .70);

  --line:        rgba(28, 26, 23, .13);
  --line-soft:   rgba(28, 26, 23, .07);
  --line-dark:   rgba(244, 239, 230, .20);

  --shell:  min(1280px, 100% - 2 * var(--gut));
  --gut:    24px;
  --r:      2px;
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 900px)  { :root { --gut: 40px; } }
@media (min-width: 1240px) { :root { --gut: 56px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; }
img { display: block; height: auto; border: 0; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.14; letter-spacing: -.005em; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 18px; background: var(--teal); color: #fff;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ============================================================= type */
.shell { width: var(--shell); margin-inline: auto; }
.narrow { max-width: 760px; }

.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.on-dark { color: var(--gold-soft); }

.h1 { font-size: clamp(38px, 6.4vw, 82px); font-weight: 300; letter-spacing: -.02em; }
.h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 300; }
.h3 { font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; letter-spacing: 0; }

.lede {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}
.lede.on-dark { color: var(--on-dark-dim); }

.rule {
  width: 46px; height: 1px; border: 0; margin: 26px 0;
  background: var(--gold);
}

.section { padding: clamp(72px, 9vw, 132px) 0; }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.section--teal  { background: var(--teal-deep); color: var(--on-dark); }
.section--teal .h2, .section--teal .h3 { color: var(--on-dark); }

/* ============================================================= buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover  { background: var(--teal-ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }

.btn--gold  { background: var(--gold); color: #23190A; }
.btn--gold:hover { background: #9C7B41; color: #fff; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--teal); background: rgba(0, 77, 113, .05); }

.btn--on-dark { background: transparent; border-color: var(--line-dark); color: var(--on-dark); }
.btn--on-dark:hover { background: rgba(244, 239, 230, .10); border-color: var(--on-dark); }

.btn--sm { min-height: 42px; padding: 0 20px; font-size: 11px; }
.btn--wide { width: 100%; }

/* ============================================================= header */
.header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: flex; align-items: center;
  height: 84px;
  transition: background .35s var(--ease), height .35s var(--ease),
              box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header-in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 28px;
}

.brand { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.brand-mark { width: 108px; height: auto; }
.brand-mark--light { display: block; }
.brand-mark--dark  { display: none; }
.brand-sub {
  padding-left: 14px;
  border-left: 1px solid var(--line-dark);
  font-size: 9px; font-weight: 500; line-height: 1.5;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-dim);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
@media (max-width: 560px) { .brand-sub { display: none; } }

.nav { display: none; gap: 30px; }
.nav a {
  position: relative;
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark);
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 1px; background: var(--gold);
  transition: right .35s var(--ease);
}
.nav a:hover::after { right: 0; }

.header-cta { display: none; }

.header.is-on {
  height: 68px;
  background: var(--cream);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px rgba(2, 40, 56, .07);
}
.header.is-on .nav a,
.header.is-on .brand-sub { color: var(--ink); }
.header.is-on .brand-sub { border-left-color: var(--line); }
.header.is-on .brand-mark--light { display: none; }
.header.is-on .brand-mark--dark  { display: block; }
.header.is-on .btn--on-dark { border-color: var(--line); color: var(--ink); }
.header.is-on .btn--on-dark:hover { background: rgba(0, 77, 113, .06); border-color: var(--teal); }
.header.is-on .burger span { background: var(--ink); }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 1px; background: var(--on-dark);
  transition: background .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1000px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .burger { display: none; }
}

/* mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 89;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 96px var(--gut) 48px;
  background: var(--teal-deep);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
  font-size: 20px; font-weight: 300;
}
.mobile-nav .btn { margin-top: 28px; }

/* ============================================================= hero */
.hero { position: relative; background: var(--teal-ink); }

/* The exterior render is shown whole — never cropped to a band. */
.hero-media { position: relative; }
.hero-media img { width: 100%; }

/* The copy sits over the lower third of the render, so the upward gradient
   carries most of the weight and holds its density well past the headline
   before it releases. The downward one is only there to keep the header
   lockup and nav legible against a bright sky. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(1, 40, 56, .62) 0%, rgba(1, 40, 56, 0) 34%),
    linear-gradient(to top,
      rgba(1, 40, 56, .94)  0%,
      rgba(1, 40, 56, .88) 30%,
      rgba(1, 40, 56, .78) 50%,
      rgba(1, 40, 56, .62) 66%,
      rgba(1, 40, 56, .28) 80%,
      rgba(1, 40, 56, 0)   94%);
  pointer-events: none;
}

.hero-copy { padding: 44px 0 56px; background: var(--teal-ink); color: var(--on-dark); }
.hero-copy .h1 { color: #fff; }
.hero-copy .lede { max-width: 620px; margin-top: 22px; color: var(--on-dark-dim); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

@media (min-width: 900px) {
  .hero-copy {
    position: absolute; inset: auto 0 0; z-index: 2;
    padding: 0 0 clamp(48px, 5vw, 84px);
    background: none;
  }
  .hero-copy .lede { color: rgba(255, 255, 255, .84); }
}

/* The gold eyebrow clears contrast easily on the solid teal and cream
   sections, but at 11px over a render it cannot — even against the
   strengthened scrim it measures 2.69:1. Warm off-white keeps the kicker
   elegant and takes it to 4.6:1. Gold still leads the eye via the CTA below. */
.hero-copy .eyebrow { color: #FBF7F0; }

/* quick facts under the hero */
.facts { background: var(--cream); border-bottom: 1px solid var(--line-soft); }
.facts-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
}
.fact {
  padding: 26px 22px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.fact:nth-child(2n) { border-right: 0; }
.fact-k {
  font-size: 10px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.fact-v {
  margin-top: 8px;
  font-size: clamp(15px, 1.4vw, 19px); font-weight: 500; line-height: 1.3;
  color: var(--teal);
}
@media (min-width: 900px) {
  .facts-grid { grid-template-columns: repeat(4, 1fr); }
  .fact { padding: 34px 26px; border-bottom: 0; }
  .fact:nth-child(2n) { border-right: 1px solid var(--line-soft); }
  .fact:last-child { border-right: 0; }
}

/* ============================================================= split */
.split {
  display: grid; gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  /* Equal columns: the render keeps its own proportions and the copy centres
     beside it, rather than the picture being trimmed to match a column. */
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split-media { order: -1; }
}
.split-media img { width: 100%; }
.split-cap, .figure-cap {
  margin-top: 12px;
  font-size: 11px; line-height: 1.6; letter-spacing: .04em;
  color: var(--muted);
}
.section--teal .split-cap, .section--teal .figure-cap { color: var(--on-dark-dim); }

/* ============================================================= status table */
.status { margin-top: 40px; border-top: 1px solid var(--line); }
.section--teal .status { border-top-color: var(--line-dark); }

.status-row {
  display: grid; gap: 4px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.section--teal .status-row { border-bottom-color: var(--line-dark); }
@media (min-width: 700px) { .status-row { grid-template-columns: 240px 1fr; align-items: baseline; } }

.status-k {
  font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.section--teal .status-k { color: var(--gold-soft); }
.status-v { font-size: 16px; font-weight: 400; }
.status-v .tba {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.section--teal .status-v .tba { border-color: var(--line-dark); color: var(--on-dark-dim); }

.note {
  margin-top: 26px; padding: 20px 22px;
  border-left: 2px solid var(--gold);
  background: rgba(176, 141, 79, .07);
  font-size: 14px; line-height: 1.7; color: var(--muted);
}
.section--teal .note { background: rgba(214, 188, 140, .10); color: var(--on-dark-dim); }

/* ============================================================= gallery */
.gallery-stage {
  position: relative;
  display: grid;
  place-items: center;
  /* Seeded here, then set from the active image by main.js: the frame takes the
     picture's own ratio instead of letterboxing it inside a fixed one. These
     renders run from 16:9 to square, so a fixed frame left dead bands around
     half of them. The layout moves; the picture is never cropped. */
  aspect-ratio: 16 / 9;
  /* Height-led on desktop: the frame keeps a constant height and its WIDTH
     shrinks to the picture's ratio, so a square render sits centred on the
     page instead of stranded inside a 16:9 letterbox. Nothing is cropped and
     every frame still fits the viewport. */
  height: min(78vh, 760px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  background: var(--sand-deep);
  overflow: hidden;
  transition: aspect-ratio .5s var(--ease), width .5s var(--ease);
}
/* On a phone there is no height to spare, so width leads instead. */
@media (max-width: 700px) {
  .gallery-stage { height: auto; width: 100%; }
}
.gallery-stage img {
  grid-area: 1 / 1;
  /* contain, not cover — no interior render is trimmed to fit the frame.
     With the stage on the image's own ratio there is normally nothing to
     letterbox; contain only does work when max-height clamps a tall render. */
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.gallery-stage img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gallery-stage { transition: none; } }

.gallery-bar {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
}
.gallery-counter {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--muted);
}
.gallery-label { margin-right: auto; font-size: 12px; color: var(--muted); }
.gnav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.gnav:hover { border-color: var(--teal); background: rgba(0, 77, 113, .06); }
.gnav svg { width: 15px; height: 15px; }

/* ============================================================= amenities */
.amen-grid {
  display: grid; gap: 1px;
  margin-top: 48px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .amen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .amen-grid { grid-template-columns: repeat(5, 1fr); } }

.amen {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 34px 16px;
  background: var(--teal-deep);
  text-align: center;
  transition: background .35s var(--ease);
}
.amen:hover { background: #034A6B; }
.amen img {
  width: 40px; height: 40px; object-fit: contain;
  /* the supplied icons ship in brand teal; invert them onto the dark ground */
  filter: brightness(0) saturate(100%) invert(88%) sepia(14%) saturate(220%) hue-rotate(2deg) brightness(101%);
  opacity: .92;
}
.amen span {
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.5;
  color: var(--on-dark);
}

/* ============================================================= services */
.svc-grid {
  display: grid; gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
@media (min-width: 780px)  { .svc-grid { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
@media (min-width: 1140px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }

.svc {
  display: flex; align-items: baseline; gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-soft);
}
.svc-n {
  min-width: 26px;
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  color: var(--gold);
}
.svc-t { font-size: 15px; }

/* ============================================================= bands */
.band { background: var(--cream); }
.band figure { margin: 0; }
.band img { width: 100%; }
.band .figure-cap { width: var(--shell); margin-inline: auto; padding: 14px 0 0; }

/* ============================================================= location */
.loc-grid {
  display: grid; gap: 1px;
  margin-top: 44px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px)  { .loc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .loc-grid { grid-template-columns: repeat(4, 1fr); } }

.loc {
  padding: 26px 22px;
  background: var(--cream);
  transition: background .3s var(--ease);
}
.loc:hover { background: #fff; }
.loc-t { font-size: 15px; font-weight: 500; }
.loc-d { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ============================================================= form */
.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 720px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 8px; }
.field > label {
  font-size: 10px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
}
.section--teal .field > label { color: var(--gold-soft); }

.input, .select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  color: var(--on-dark);
  font: inherit;
  font-size: 15px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.input::placeholder { color: rgba(244, 239, 230, .45); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, .09);
}
.select { appearance: none; padding-right: 44px; cursor: pointer; }
.select option { color: var(--ink); background: #fff; }
.field--select { position: relative; }
.field--select::after {
  content: ''; position: absolute; right: 18px; bottom: 22px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  transform: rotate(45deg);
  pointer-events: none;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-status { min-height: 20px; font-size: 13px; color: var(--on-dark-dim); }
.form-status.is-error { color: #FFB4A2; }

/* dial-code picker */
.phone-wrap { display: flex; gap: 10px; }
.dial { position: relative; flex: 0 0 auto; }
.dial-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 14px;
  border: 1px solid var(--line-dark); border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  color: var(--on-dark); cursor: pointer;
  transition: border-color .3s var(--ease);
}
.dial-btn:hover { border-color: var(--gold); }
.dial-btn .caret {
  width: 6px; height: 6px; margin-left: 2px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.dial-pop {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
  width: min(320px, 78vw);
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(1, 40, 56, .28);
}
.dial-search {
  width: 100%; padding: 12px 14px;
  border: 0; border-bottom: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-size: 14px;
}
.dial-search:focus { outline: none; }
.dial-list { max-height: 260px; overflow-y: auto; }
.dial-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  color: var(--ink); font-size: 14px; cursor: pointer;
}
.dial-list li:hover, .dial-list li.is-active { background: var(--sand); }
.dial-list li[aria-selected="true"] { background: rgba(0, 77, 113, .10); }
.dial-name { flex: 1; }
.dial-num  { color: var(--muted); font-size: 13px; }
.dial-empty { padding: 14px; color: var(--muted); font-size: 14px; }

.form-side { align-self: start; }
@media (min-width: 1000px) {
  .register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
}

/* ============================================================= faq */
.fqx { margin-top: 44px; border-top: 1px solid var(--line); }
.fqx-item { border-bottom: 1px solid var(--line-soft); }
/* The question is wrapped in an h3 for document outline and for the retrieval
   systems that use headings as chunk titles. The heading is purely semantic —
   the button below it keeps every visual property, so this must not introduce
   heading sizing, weight or line-height of its own. */
.fqx-h { margin: 0; font: inherit; letter-spacing: inherit; }

.fqx-btn {
  display: flex; align-items: center; gap: 18px;
  width: 100%; padding: 22px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: clamp(15px, 1.3vw, 17px); font-weight: 500;
}
.fqx-btn .sign {
  position: relative; flex: 0 0 auto;
  width: 14px; height: 14px; margin-left: auto;
}
.fqx-btn .sign::before,
.fqx-btn .sign::after {
  content: ''; position: absolute; inset: 50% 0 auto;
  height: 1px; background: var(--teal);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.fqx-btn .sign::after { transform: rotate(90deg); }
.fqx-open .fqx-btn .sign::after { transform: rotate(0deg); opacity: 0; }
.fqx-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.fqx-open .fqx-panel { grid-template-rows: 1fr; }
.fqx-panel > div { overflow: hidden; }
.fqx-panel p {
  padding-bottom: 24px;
  max-width: 780px;
  font-size: 15px; line-height: 1.75; color: var(--muted);
}

/* ============================================================= footer */
.footer {
  padding: clamp(56px, 6vw, 88px) 0 40px;
  background: var(--teal-ink);
  color: var(--on-dark-dim);
  font-size: 13px;
}
.footer-top {
  display: grid; gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.1fr 1fr; } }
.footer .brand-mark { width: 120px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.footer-nav a { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); }
.footer-nav a:hover { color: var(--gold-soft); }
.footer-disc { margin-top: 30px; font-size: 11.5px; line-height: 1.75; }
.footer-disc p + p { margin-top: 12px; }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 28px;
  font-size: 11px; letter-spacing: .06em;
}

/* ============================================================= sticky cta */
.sticky-cta {
  position: fixed; inset: auto 0 0; z-index: 80;
  display: flex; align-items: center; gap: 14px;
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .sticky-t { flex: 1; font-size: 12px; line-height: 1.4; color: var(--muted); }
.sticky-cta .sticky-t b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
@media (min-width: 1000px) { .sticky-cta { display: none; } }

/* ============================================================= modal */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--gut);
  background: rgba(1, 30, 42, .72);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
/* The author `display:grid` above beats the UA stylesheet's [hidden]{display:none},
   so without this the closed modal stays laid out full-screen at opacity 0 and
   swallows every click on the page — the register buttons and the inline form
   become unclickable. */
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
.modal-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 88vh; overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  background: var(--teal-deep);
  color: var(--on-dark);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .4);
}
.modal-panel .h2 { color: var(--on-dark); font-size: clamp(24px, 3vw, 32px); }
.modal-panel .lede { color: var(--on-dark-dim); }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px;
  background: none; border: 1px solid var(--line-dark); border-radius: 50%;
  color: var(--on-dark); font-size: 18px; line-height: 1; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.modal-close:hover { background: rgba(255, 255, 255, .08); border-color: var(--on-dark); }
.modal-unit {
  display: inline-block; margin-bottom: 12px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft);
}

/* ============================================================= toast */
.toast {
  position: fixed; z-index: 140; right: 20px; bottom: 20px;
  width: min(360px, calc(100vw - 40px));
  padding: 18px 44px 18px 20px;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(1, 40, 56, .22);
  opacity: 0; transform: translateY(16px);
  visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translateY(0); visibility: visible; }
.toast::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; background: var(--gold); transform-origin: left;
  transform: scaleX(1);
}
.toast.is-dismissing::after {
  transform: scaleX(0);
  transition: transform var(--toast-duration, 5000ms) linear;
}
.toast-t { font-size: 14px; font-weight: 600; }
.toast-m { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.toast-x {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer;
}

/* ============================================================= reveal */
.reveal { opacity: 0; transform: translateY(22px); }
.js .reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in-view { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}