/* ==========================================================================
   Lulu Island Abu Dhabi — luluislandresidences.com
   Pre-launch guide + interest register. Built to render complete with no
   photography: the island has no released renders, so the page leans on
   typography, a hand-drawn SVG orientation map and colour instead of stock.
   Palette reads the site of the project itself — Gulf water at dusk, pearl,
   and the sand the island was made from.
   ========================================================================== */

:root {
  --ink:        #0b1a24;   /* deep gulf navy — headings, dark sections */
  --ink-2:      #123240;   /* teal shadow */
  --ink-line:   rgba(11, 26, 36, 0.12);
  --pearl:      #f7f4ee;   /* page ground */
  --pearl-2:    #ece4d6;   /* tinted band */
  --paper:      #ffffff;
  --gold:       #b08d57;
  --gold-light: #c9a86a;
  --teal:       #2e6b73;
  --body:       #4d5860;
  --body-light: rgba(247, 244, 238, 0.76);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap:   1280px;
  --narrow: 860px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --sec-y:  clamp(64px, 8.5vw, 128px);
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--pearl);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(3rem, 8vw, 6.2rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }
h4 { font-size: 1.1rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong { font-weight: 500; color: var(--ink); }
em { font-style: italic; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--pearl);
  padding: 12px 20px; font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* --------------------------------------------------------------- layout - */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--narrow); }

.section { padding: var(--sec-y) 0; }
.section-tint { background: var(--pearl-2); }
.section-dark { background: var(--ink); color: var(--body-light); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--pearl); }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.section-dark .eyebrow { color: var(--gold-light); }

.sec-head { margin-bottom: clamp(38px, 5vw, 68px); max-width: 760px; }
.sec-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-sub { font-size: 1.05rem; margin-top: 18px; }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 300;
}
.section-dark .lede { color: var(--pearl); }

.two-col {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.two-col-flip .col-text { order: 1; }
.two-col-flip .col-visual { order: 2; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }

/* ---------------------------------------------------------------- header - */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
  padding: 18px 0;
}
.site-header.scrolled {
  background: rgba(11, 26, 36, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 10px 0;
}

.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--pearl); }
.brand-mark { color: var(--gold-light); display: flex; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong {
  font-family: var(--display); font-size: 1.35rem; font-weight: 500;
  color: var(--pearl); letter-spacing: 0.01em;
}
.brand-text em {
  font-style: normal; font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold-light);
}

.nav-desktop { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); }
.nav-desktop a {
  text-decoration: none; font-size: 14px; letter-spacing: 0.03em;
  color: rgba(247, 244, 238, 0.82); transition: color 0.25s var(--ease);
}
.nav-desktop a:hover { color: var(--gold-light); }
.nav-desktop .btn { color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 34px; padding: 6px 4px; flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 1.4px; background: var(--pearl); transition: transform 0.35s var(--ease), opacity 0.25s; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9.8px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9.8px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 95;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(46, 107, 115, 0.22) 0%, rgba(46, 107, 115, 0) 60%),
    var(--ink);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 88px var(--gutter) 32px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s;
}
body.nav-open .nav-mobile { opacity: 1; visibility: visible; }

.nav-mobile-inner { width: 100%; max-width: 520px; }

.nav-mobile-eyebrow {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}

.nav-mobile-list { list-style: none; margin: 0 0 26px; padding: 0; }
.nav-mobile-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nav-mobile-list li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.nav-mobile-list a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0; text-decoration: none; color: var(--pearl);
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.nav-mobile-list a:hover,
.nav-mobile-list a:focus-visible { color: var(--gold-light); padding-left: 6px; }

.nav-idx {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; color: var(--gold);
  min-width: 22px; opacity: 0.85;
}
.nav-label { font-family: var(--display); font-size: 1.32rem; line-height: 1.2; }

/* Items lift in one after the other once the panel is open. */
.nav-mobile-list li,
.nav-mobile-cta,
.nav-mobile-note {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
body.nav-open .nav-mobile-list li,
body.nav-open .nav-mobile-cta,
body.nav-open .nav-mobile-note { opacity: 1; transform: none; }
body.nav-open .nav-mobile-list li:nth-child(1) { transition-delay: 0.06s; }
body.nav-open .nav-mobile-list li:nth-child(2) { transition-delay: 0.10s; }
body.nav-open .nav-mobile-list li:nth-child(3) { transition-delay: 0.14s; }
body.nav-open .nav-mobile-list li:nth-child(4) { transition-delay: 0.18s; }
body.nav-open .nav-mobile-list li:nth-child(5) { transition-delay: 0.22s; }
body.nav-open .nav-mobile-list li:nth-child(6) { transition-delay: 0.26s; }
body.nav-open .nav-mobile-list li:nth-child(7) { transition-delay: 0.30s; }
body.nav-open .nav-mobile-list li:nth-child(8) { transition-delay: 0.34s; }
body.nav-open .nav-mobile-cta  { transition-delay: 0.40s; }
body.nav-open .nav-mobile-note { transition-delay: 0.46s; }

.nav-mobile-cta { font-family: var(--sans); color: var(--ink); }
.nav-mobile-note {
  margin: 16px 0 0; font-size: 12.5px; line-height: 1.6;
  color: rgba(247, 244, 238, 0.45);
}

/* ---------------------------------------------------------------- button - */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--ink);
  border: 1px solid var(--gold); border-radius: 2px;
  padding: 13px 26px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); }
.btn-sm { padding: 9px 18px; font-size: 12px; }
.btn-lg { padding: 17px 38px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--pearl); border-color: rgba(247, 244, 238, 0.4); }
.btn-ghost:hover { background: rgba(247, 244, 238, 0.1); color: var(--pearl); border-color: var(--pearl); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------------ hero - */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 132px 0 96px;
  overflow: hidden;
  color: var(--pearl);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; background: #0b1a24; }

.hero-photo { position: absolute; inset: 0; display: block; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; }

/* Scrim over the photograph. Weighted to the left and bottom so the headline
   and buttons stay legible while the skyline on the right stays visible. */
.hero-sky {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(8, 17, 25, 0.92) 0%, rgba(9, 21, 30, 0.72) 38%, rgba(11, 26, 36, 0.34) 68%, rgba(11, 26, 36, 0.22) 100%),
    linear-gradient(180deg, rgba(8, 17, 25, 0.72) 0%, rgba(8, 17, 25, 0.12) 34%, rgba(6, 14, 20, 0.86) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.hero h1 { color: var(--pearl); margin-bottom: 26px; letter-spacing: -0.02em; }
.hero-lede {
  max-width: 620px; font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65; color: rgba(247, 244, 238, 0.82); margin-bottom: 38px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------------------------------------------------------------- notice - */

.notice { padding: clamp(48px, 6vw, 84px) 0; background: var(--pearl); }
.notice-card {
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--gold);
  padding: clamp(28px, 4vw, 52px);
  max-width: 940px;
}
.notice-tag {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 14px;
}
.notice-card h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 20px; }
.notice-foot {
  font-size: 15px; padding-top: 18px; margin-top: 6px;
  border-top: 1px solid var(--ink-line);
}
.notice-foot a { color: var(--teal); text-underline-offset: 3px; }
.notice-card .btn { margin-top: 24px; }

/* ----------------------------------------------------------------- facts - */

.col-facts {
  background: var(--paper);
  border: 1px solid var(--ink-line);
  padding: clamp(24px, 3vw, 38px);
  position: sticky; top: 104px;
}
.section-dark .col-facts { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.col-facts h3 { font-size: 1.3rem; margin-bottom: 22px; }

.fact-list { margin: 0; }
.fact-list > div {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--ink-line);
}
.fact-list > div:last-child { border-bottom: 0; }
.fact-list dt { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.fact-list dd { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.5; }

.fact-note { font-size: 12.5px; line-height: 1.6; color: var(--body); opacity: 0.8; margin-top: 20px; }

.ask-list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.65; }
.ask-list li { margin-bottom: 12px; padding-left: 4px; }
.ask-list li::marker { color: var(--gold); font-family: var(--display); }

/* -------------------------------------------------------------- timeline - */

.timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
/* The rule sits on each cell rather than the grid, so wrapped rows keep a line
   above their markers instead of leaving the dots floating. Cells keep a left
   inset — with none, the marker of every column after the first lands right on
   top of the previous column's divider. The first column in each row drops the
   inset so the timeline still starts flush with the page grid. */
.timeline li {
  padding: 30px clamp(16px, 2vw, 28px) 34px clamp(18px, 2vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.timeline li:nth-child(4n) { border-right: 0; }
.timeline li:nth-child(4n + 1) { padding-left: 0; }
.timeline li::before {
  content: ""; position: absolute; top: -4.5px; left: clamp(18px, 2vw, 30px);
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.timeline li:nth-child(4n + 1)::before { left: 0; }
.timeline li.t-now::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(201, 168, 106, 0.18); }
.t-year {
  display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 12px;
}
.timeline h3 { font-size: 1.2rem; margin-bottom: 8px; }
.timeline p { font-size: 14px; line-height: 1.6; color: rgba(247, 244, 238, 0.65); }
.timeline li.t-quiet { opacity: 0.62; }
.timeline li.t-now .t-year { color: var(--gold); }

/* Full-width closing rule — it caps the dangling column dividers, so it has to
   span the whole grid even though the sentence under it sits on a short measure. */
.timeline-foot {
  margin-top: 0; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.timeline-foot p {
  margin: 0; max-width: 780px;
  font-size: 15px; color: rgba(247, 244, 238, 0.7);
}

/* -------------------------------------------------------------- typology - */

.col-visual { position: sticky; top: 104px; }
.typology-card {
  background: var(--paper);
  border: 1px solid var(--ink-line);
  padding: clamp(26px, 3.2vw, 40px);
}
.section-tint .typology-card { background: var(--paper); }
.typology-icon { color: var(--teal); margin-bottom: 22px; }
.typology-icon svg { width: 100%; max-width: 190px; height: auto; }
.typology-card h3 { font-size: 1.35rem; margin-bottom: 20px; }
.typology-note {
  font-size: 12.5px; line-height: 1.6; opacity: 0.8;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink-line);
}

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.6;
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 12px; height: 1.5px; background: var(--gold);
}
.tick-list-light li { color: rgba(247, 244, 238, 0.82); }

/* -------------------------------------------------------------- callouts - */

.callout {
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--teal);
  background: rgba(46, 107, 115, 0.05);
  padding: 22px 26px;
  margin: 30px 0;
}
/* Callout headings are h3 so the outline never skips a level, but they keep the
   small sans look — they are labels, not section titles. */
.callout h3 {
  margin-bottom: 8px; color: var(--ink);
  font-family: var(--sans); font-size: 1.1rem; font-weight: 500;
  letter-spacing: 0.01em; line-height: 1.35;
}
.callout p { font-size: 14.5px; line-height: 1.65; }
.callout-warn { border-left-color: var(--gold); background: rgba(176, 141, 87, 0.07); }
.callout-dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  border-left-color: var(--gold);
  margin-top: 40px;
}
.callout-dark h3 { color: var(--pearl); }
.callout-dark p { color: rgba(247, 244, 238, 0.75); }

/* ------------------------------------------------------------- masterplan */

.mp-card {
  background: var(--paper); border: 1px solid var(--ink-line);
  padding: clamp(22px, 2.6vw, 32px);
}
.mp-num {
  display: block; font-family: var(--display);
  font-size: clamp(2.1rem, 3.6vw, 3rem); color: var(--gold); line-height: 1;
}
/* Number and unit live inside one h3 so the heading reads "469 hectares"
   rather than "hectares" to screen readers and content parsers. */
.mp-card h3 { margin: 0 0 14px; }
.mp-unit {
  display: block; margin-top: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal);
}
.mp-card p { font-size: 14px; line-height: 1.6; }

.mp-fig { margin: 0 0 clamp(32px, 4vw, 54px); }
.mp-fig img { width: 100%; height: auto; border: 1px solid var(--ink-line); }
.mp-fig figcaption {
  margin-top: 14px; font-size: 13px; line-height: 1.65;
  color: var(--body); opacity: 0.82; max-width: 820px;
}

.mp-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--ink-line);
}
.mp-detail h3 { font-size: 1.3rem; margin-bottom: 18px; }
.mp-foot {
  margin-top: 34px; font-size: 14.5px; max-width: 780px;
  color: var(--body); opacity: 0.9;
}

/* ------------------------------------------------------------------- map - */

.map-fig { margin: 0 0 clamp(34px, 4vw, 56px); }
.map-svg {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.map-fig figcaption {
  margin-top: 14px; font-size: 13px;
  color: rgba(247, 244, 238, 0.58); text-align: center;
}

.map-label { font-family: var(--sans); fill: #f7f4ee; }
.map-label-island {
  fill: #12222b; font-size: 30px; letter-spacing: 0.24em; text-anchor: middle; font-weight: 500;
}
.map-label-islandsub { fill: #3a3223; font-size: 15px; letter-spacing: 0.12em; text-anchor: middle; }
.map-label-land { fill: rgba(247, 244, 238, 0.72); font-size: 17px; letter-spacing: 0.2em; }
.map-label-pin { fill: rgba(247, 244, 238, 0.72); font-size: 14px; text-anchor: middle; letter-spacing: 0.04em; }
.map-label-gold { fill: #c9a86a; font-size: 14px; letter-spacing: 0.06em; }
.map-label-faint { fill: rgba(247, 244, 238, 0.3); font-size: 13px; letter-spacing: 0.22em; }
.map-pin circle { fill: #c9a86a; }

.loc-card {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 24px;
}
.loc-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.loc-card p { font-size: 14.5px; line-height: 1.65; color: rgba(247, 244, 238, 0.68); }

/* ----------------------------------------------------------------- table - */

.table-scroll { overflow-x: auto; margin: 24px 0 12px; -webkit-overflow-scrolling: touch; }
.bench-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.bench-table caption {
  text-align: left; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal); padding-bottom: 12px;
}
.bench-table th, .bench-table td {
  text-align: left; padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--ink-line); vertical-align: top; font-weight: 300;
}
.bench-table thead th {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--body); border-bottom-color: var(--ink);
}
.bench-table tbody th { color: var(--ink); font-weight: 400; }
.table-note { font-size: 12.5px; opacity: 0.8; line-height: 1.6; }

/* ------------------------------------------------------------------ form - */

.section-form { background: var(--ink); color: var(--body-light); }
.section-form h2 { color: var(--pearl); }

.form-shell {
  display: grid; grid-template-columns: 1fr 0.85fr;
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.form-copy p { color: rgba(247, 244, 238, 0.75); }
.form-copy .tick-list { margin: 24px 0; }
.form-legal {
  font-size: 12.5px; line-height: 1.65;
  color: rgba(247, 244, 238, 0.5) !important;
  padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.form {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  padding: clamp(24px, 3vw, 36px);
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(247, 244, 238, 0.6); margin-bottom: 8px;
}
.field input, .field select {
  width: 100%; padding: 13px 14px;
  background: rgba(11, 26, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  color: var(--pearl);
  font-family: var(--sans); font-size: 15px; font-weight: 300;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input::placeholder { color: rgba(247, 244, 238, 0.32); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--gold); background: rgba(11, 26, 36, 0.75);
}
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(247,244,238,0.5) 50%), linear-gradient(135deg, rgba(247,244,238,0.5) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: var(--ink); color: var(--pearl); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { margin: 14px 0 0; font-size: 13.5px; min-height: 1em; }
.form-msg.err { color: #e8a598; }
.form-msg.ok  { color: var(--gold-light); }

/* intl-tel-input on a dark field */
.iti { width: 100%; }
.iti__flag-container { background: transparent; }
.iti__selected-flag { border-radius: 2px 0 0 2px; }
.iti__country-list {
  background: #0f2531; color: var(--pearl);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.iti__country.iti__highlight { background: rgba(201, 168, 106, 0.18); }
.iti__divider { border-bottom-color: rgba(255, 255, 255, 0.14); }
.iti__dial-code { color: rgba(247, 244, 238, 0.55); }

/* ------------------------------------------------------------------- faq - */

.faq { border-top: 1px solid var(--ink-line); }
.faq-item { border-bottom: 1px solid var(--ink-line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 44px 22px 0; position: relative;
  font-family: var(--display); font-size: clamp(1.12rem, 1.9vw, 1.4rem);
  color: var(--ink); line-height: 1.35;
}
.faq-q::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 13px; height: 1.5px; background: var(--gold); transform: translateY(-50%);
}
.faq-q::before {
  content: ""; position: absolute; right: 11.75px; top: 50%;
  width: 1.5px; height: 13px; background: var(--gold);
  transform: translateY(-50%); transition: transform 0.3s var(--ease), opacity 0.3s;
}
.faq-item.open .faq-q::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a-inner { padding: 0 40px 26px 0; font-size: 15.5px; line-height: 1.72; }

/* ---------------------------------------------------------------- footer - */

.site-footer { background: var(--ink); color: rgba(247, 244, 238, 0.6); padding: clamp(48px, 6vw, 80px) 0 40px; }
.foot-top {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.foot-brand { display: flex; gap: 14px; align-items: flex-start; }
.foot-brand .brand-mark { color: var(--gold-light); }
.foot-brand strong { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--pearl); font-weight: 500; }
.foot-brand p { font-size: 14px; margin: 4px 0 0; max-width: 340px; }
.foot-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.foot-contact p { margin: 0; max-width: 260px; }
.foot-contact .btn { color: var(--ink); margin-top: 6px; text-decoration: none; }

.disclaimer {
  font-size: 12.5px; line-height: 1.75; color: rgba(247, 244, 238, 0.45);
  margin: 30px 0 0; max-width: 940px;
}
.disclaimer strong { color: rgba(247, 244, 238, 0.7); }
.copyline { font-size: 12.5px; margin: 26px 0 0; color: rgba(247, 244, 238, 0.38); }

/* ----------------------------------------------------------- sticky cta - */

/* Mobile only — on desktop the header keeps a Register button in view, so a
   second permanent bar is just clutter. */
.sticky-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(11, 26, 36, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 168, 106, 0.3);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform 0.4s var(--ease);
}
@media (max-width: 900px) {
  .sticky-cta { display: block; }
}
.sticky-cta.show { transform: translateY(0); }

/* ---------------------------------------------------------------- modals - */

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 14, 20, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
  overflow-y: auto;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  display: none;
  position: relative;
  width: min(560px, 100%);
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: clamp(28px, 4vw, 46px);
  margin: auto;
  color: var(--body-light);
}
.modal.active { display: block; }
/* Not an h2 — the dialogs sit outside the document outline and take their
   accessible name from aria-labelledby instead. */
.modal-title {
  color: var(--pearl); font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.14;
  letter-spacing: -0.01em; margin: 0 0 0.5em;
}
.modal-sub { font-size: 15px; color: rgba(247, 244, 238, 0.72); margin-bottom: 26px; }
.modal .form { background: none; border: 0; padding: 0; }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: rgba(247, 244, 238, 0.5);
  transition: color 0.25s;
}
.modal-close:hover { color: var(--pearl); }

.modal-success { text-align: center; }
.success-mark { color: var(--gold); margin: 0 auto 20px; width: 62px; }
.modal-success p { color: rgba(247, 244, 238, 0.75); margin-bottom: 26px; }

/* --------------------------------------------------------------- reveals - */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 1080px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline li:nth-child(2n) { border-right: 0; }
  /* Two columns per row now, so the flush-left cell is every odd one — not
     every fourth, which would indent the wrong cards. */
  .timeline li:nth-child(2n + 1) { padding-left: 0; }
  .timeline li:nth-child(2n + 1)::before { left: 0; }
}

@media (max-width: 900px) {
  .two-col, .form-shell, .mp-detail { grid-template-columns: 1fr; }
  .two-col-flip .col-text { order: 1; }
  .two-col-flip .col-visual { order: 2; }
  .col-facts, .col-visual { position: static; }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { min-height: auto; padding: 118px 0 72px; }
  .grid-4, .timeline { grid-template-columns: 1fr; }
  /* Single column — every card is flush left. */
  .timeline li:nth-child(n) { border-right: 0; padding-right: 0; padding-left: 0; }
  .timeline li:nth-child(n)::before { left: 0; }
  .fact-list > div { grid-template-columns: 1fr; gap: 2px; }
  .sticky-cta span { display: none; }
  .foot-top { flex-direction: column; }
  .map-label-island { font-size: 34px; }
  .map-label-pin, .map-label-gold { font-size: 15px; }
}