/* ============================================================
   DOMINIUM PROPERTY MANAGEMENT
   Design system + global stylesheet
   Palette sampled from the official logo.
   ============================================================ */

/* ---------- 1. Fonts ------------------------------------------------------
   Body + headings : Outfit (Google Fonts) — geometric sans
   Display accents : Cinzel — matches the roman serif in the logo wordmark

   Both are loaded via the <link> in each page's <head>.

   WANT GIVONIC LATER? It's a commercial face from Letterhend Studio (the free
   "Demo" is personal-use only and can't ship on a business site). Buy a
   WEBFONT licence, put the four .woff2 files in assets/fonts/, uncomment the
   block below, and add 'Givonic' to the front of --font-sans. Nothing else
   needs to change.

   @font-face { font-family:'Givonic'; src:url('../fonts/Givonic-Regular.woff2')  format('woff2'); font-weight:400; font-display:swap; }
   @font-face { font-family:'Givonic'; src:url('../fonts/Givonic-Medium.woff2')   format('woff2'); font-weight:500; font-display:swap; }
   @font-face { font-family:'Givonic'; src:url('../fonts/Givonic-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
   @font-face { font-family:'Givonic'; src:url('../fonts/Givonic-Bold.woff2')     format('woff2'); font-weight:700; font-display:swap; }
   ------------------------------------------------------------------------ */

/* ---------- 2. Tokens --------------------------------------------------- */
:root {
  /* Brand — sampled from logo */
  --navy-900: #060F1C;
  --navy-850: #08131F;
  --navy-800: #0A1829;
  --navy-700: #0F2338;
  --navy-600: #17314A;
  --navy-500: #24415C;

  --gold-600: #A8862A;
  --gold-500: #C9A63C;
  --gold-400: #D9BB5E;
  --gold-300: #E7D08C;

  --cream:     #FDF9EC;
  --cream-dim: #DCD6C6;
  --sand:      #F6F2E7;
  --sand-2:    #EDE7D8;

  /* Semantic */
  --bg:            var(--navy-800);
  --bg-alt:        var(--navy-900);
  --surface:       var(--navy-700);
  --fg:            var(--cream);
  --fg-muted:      rgba(253, 249, 236, 0.66);
  --fg-subtle:     rgba(253, 249, 236, 0.42);
  --accent:        var(--gold-500);
  --on-accent:     var(--navy-900);
  --line:          rgba(201, 166, 60, 0.22);
  --line-soft:     rgba(253, 249, 236, 0.12);

  /* Light sections */
  --bg-light:       var(--sand);
  --fg-light:       var(--navy-800);
  --fg-light-muted: rgba(10, 24, 41, 0.68);
  --line-light:     rgba(10, 24, 41, 0.14);

  /* Type */
  --font-sans:    'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cinzel', 'Outfit', Georgia, serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.93rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.52rem + 1.40vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.72rem + 2.40vw, 3.90rem);
  --step-5:  clamp(2.70rem, 1.85rem + 4.25vw, 5.60rem);
  --step-6:  clamp(3.20rem, 1.80rem + 7.00vw, 8.00rem);

  /* Space — density 4/10 (spacious marketing rhythm) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);

  /* Layout */
  --container: 78rem;
  --container-wide: 92rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 3rem);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 620ms;

  --radius-s: 4px;
  --radius:   8px;
  --radius-l: 16px;

  --shadow-s: 0 1px 2px rgba(6, 15, 28, 0.16), 0 2px 8px rgba(6, 15, 28, 0.10);
  --shadow-m: 0 4px 12px rgba(6, 15, 28, 0.18), 0 12px 32px rgba(6, 15, 28, 0.16);
  --shadow-l: 0 12px 28px rgba(6, 15, 28, 0.24), 0 32px 72px rgba(6, 15, 28, 0.24);

  --nav-h: 4.75rem;
}

/* The space scale above is fixed-rem, so a 320px phone got the exact same 56px
   section-head gap and ~75px section padding as a 1920px monitor — roughly
   150px of dead space between every block, or a third of the screen. These
   overrides retune the scale for phones only; the query stops at 48em so the
   desktop rhythm is untouched. Must stay after the base :root — same
   specificity, so source order decides. */
@media (max-width: 47.99em) {
  :root {
    --space-m:   1.25rem;
    --space-l:   1.75rem;
    --space-xl:  2.25rem;
    --space-2xl: 3rem;
    --space-3xl: 4.25rem;
    --section-y: clamp(2.75rem, 1.6rem + 5.2vw, 4rem);
  }
}

/* ---------- 3. Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

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

::selection { background: var(--gold-500); color: var(--navy-900); }

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

/* ---------- 4. Layout helpers ------------------------------------------ */
/* viewport-fit=cover is set, so respect the notch / home indicator on iOS.
   env() falls back to 0px everywhere else. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + env(safe-area-inset-left))
                  calc(var(--gutter) + env(safe-area-inset-right));
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
@media (max-width: 47.99em) {
  .section--tight { padding-block: clamp(2.25rem, 1.6rem + 3.2vw, 3rem); }
}

.section--light {
  background: var(--bg-light);
  color: var(--fg-light);
}
.section--light .eyebrow { color: var(--gold-600); }
.section--light .lede,
.section--light p { color: var(--fg-light-muted); }

.section--deep { background: var(--bg-alt); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold-500);
  color: var(--navy-900);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* ---------- 5. Typographic components ---------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--space-s);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--center::after {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-muted);
  font-weight: 300;
  max-width: 42ch;
}

.section-head { max-width: 60ch; margin-bottom: var(--space-xl); }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lede { margin-inline: auto; }

.section-index {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  color: var(--gold-500);
  opacity: 0.85;
}

.gold { color: var(--gold-500); }
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; }

/* ---------- 6. Buttons -------------------------------------------------- */
.btn {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--navy-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.9rem 1.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-s);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy-900);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--gold-400); border-color: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  border-color: var(--line);
}
.btn--ghost::before { background: var(--gold-500); }
.btn--ghost:hover { color: var(--navy-900); border-color: var(--gold-500); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  border-color: rgba(10, 24, 41, 0.25);
}
.btn--light::before { background: var(--navy-800); }
.btn--light:hover { color: var(--cream); border-color: var(--navy-800); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* Text link with animated rule */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
  padding-block: 0.35rem;
  position: relative;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 7. Preloader ------------------------------------------------ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--navy-900);
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}
.preloader__mark { width: clamp(56px, 12vw, 84px); height: auto; overflow: visible; }
.preloader__mark path {
  fill: none;
  stroke: var(--gold-500);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: markDraw 1.15s var(--ease-out) forwards;
}
.preloader__mark path:nth-child(2) { animation-delay: 0.13s; }
.preloader__mark path:nth-child(3) { animation-delay: 0.26s; }

@keyframes markDraw {
  to { stroke-dashoffset: 0; fill: rgba(201, 166, 60, 0.9); }
}

.preloader__word {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--cream);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 0.5s forwards;
}
.preloader__bar {
  width: clamp(140px, 30vw, 220px);
  height: 2px;
  background: rgba(253, 249, 236, 0.16);
  overflow: hidden;
  border-radius: 2px;
}
.preloader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transition: width 320ms var(--ease-out);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Curtain wipe out */
.preloader.is-done {
  animation: curtainUp 900ms var(--ease-inout) forwards;
}
@keyframes curtainUp {
  to { clip-path: inset(0 0 100% 0); }
}
.preloader.is-done .preloader__inner {
  animation: fadeOutUp 460ms var(--ease-out) forwards;
}
@keyframes fadeOutUp {
  to { opacity: 0; transform: translateY(-14px); }
}

/* ---------- 8. Navigation ----------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-slow) var(--ease-out),
              backdrop-filter var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              height var(--dur-slow) var(--ease-out);
}
.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-soft);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.nav.is-stuck {
  background: rgba(8, 19, 31, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-s);
  height: 4.25rem;
}
.nav.is-stuck::after { opacity: 1; }
/* Hide on scroll-down, show on scroll-up */
.nav.is-hidden { transform: translateY(-100%); transition: transform 420ms var(--ease-out), background-color var(--dur-slow) var(--ease-out); }

.nav__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + env(safe-area-inset-left))
                  calc(var(--gutter) + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  min-height: 44px; /* touch target */
}
.brand__mark { width: 26px; height: auto; }
.brand__mark path { fill: var(--gold-500); transition: fill var(--dur) var(--ease-out); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--cream);
}
.brand__sub {
  font-size: 0.53rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-top: 0.28rem;
  font-weight: 500;
}
.brand:hover .brand__mark path { fill: var(--gold-300); }

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.1rem);
  list-style: none;
  padding: 0;
}
.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding-block: 0.5rem;
  transition: color var(--dur) var(--ease-out);
  white-space: nowrap;
}
/* Invisible hit-area expander — gets the link to 44px for touch-capable
   laptops and tablets without moving the underline off the text baseline. */
.nav__link::before {
  content: '';
  position: absolute;
  inset: -5px -6px;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.15rem;
  width: 100%; height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 460ms var(--ease-out);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--cream); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--space-s); }
.nav__cta { display: none; }
.nav__call {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.02em;
}
.nav__call svg { color: var(--gold-500); }
.nav__call:hover { color: var(--gold-400); }

/* Hamburger */
.burger {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  flex-shrink: 0;
}
.burger__box { width: 22px; height: 14px; position: relative; }
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 420ms var(--ease-out), opacity 220ms var(--ease-out), width 420ms var(--ease-out);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6.25px; width: 70%; }
.burger__box span:nth-child(3) { bottom: 0; }
.burger:hover .burger__box span:nth-child(2) { width: 100%; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* Mobile menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + var(--space-l))
           calc(var(--gutter) + env(safe-area-inset-right))
           calc(var(--space-xl) + env(safe-area-inset-bottom))
           calc(var(--gutter) + env(safe-area-inset-left));
  clip-path: inset(0 0 100% 0);
  transition: clip-path 780ms var(--ease-inout);
  visibility: hidden;
  overflow-y: auto;
}
.menu.is-open { clip-path: inset(0 0 0% 0); visibility: visible; }

.menu__bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/entrance-hall-1280.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  filter: grayscale(0.4);
  pointer-events: none;
}
.menu__inner { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; }

.menu__list { list-style: none; padding: 0; margin: 0 0 var(--space-xl); }
.menu__item { overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  padding-block: clamp(0.7rem, 1.6vw, 1.05rem);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream);
  transform: translateY(105%);
  transition: transform 700ms var(--ease-out), color var(--dur) var(--ease-out);
}
.menu.is-open .menu__link { transform: translateY(0); }
.menu__item:nth-child(1) .menu__link { transition-delay: 130ms; }
.menu__item:nth-child(2) .menu__link { transition-delay: 190ms; }
.menu__item:nth-child(3) .menu__link { transition-delay: 250ms; }
.menu__item:nth-child(4) .menu__link { transition-delay: 310ms; }
.menu__item:nth-child(5) .menu__link { transition-delay: 370ms; }
.menu__item:nth-child(6) .menu__link { transition-delay: 430ms; }
.menu__link:hover { color: var(--gold-400); }
.menu__num {
  font-family: var(--font-display);
  font-size: var(--step--2);
  color: var(--gold-500);
  letter-spacing: 0.1em;
}

.menu__foot {
  display: grid;
  gap: var(--space-m);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out) 480ms, transform 600ms var(--ease-out) 480ms;
}
.menu.is-open .menu__foot { opacity: 1; transform: translateY(0); }
.menu__foot a { color: var(--fg-muted); transition: color var(--dur) var(--ease-out); }
.menu__foot a:hover { color: var(--gold-400); }
.menu__foot-label {
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.35rem;
  display: block;
}

@media (min-width: 62em) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .menu { display: none; }
}
@media (min-width: 48em) and (max-width: 61.99em) {
  .nav__call { display: inline-flex; }
}

/* ---------- 9. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-900);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__media video.is-playing { opacity: 1; }

/* Slow drift on the poster so the hero is never static, even without video.
   Kept shallow on phones — the portrait crop is already tight. */
.hero__poster {
  animation: heroDriftSm 30s var(--ease-inout) infinite alternate;
  will-change: transform;
}
@keyframes heroDriftSm {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-0.6%, -0.8%, 0); }
}
@media (min-width: 48em) {
  .hero__poster { animation-name: heroDrift; animation-duration: 26s; }
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}

/* The scrim earns text contrast at the cost of hiding the footage, so it is
   weighted rather than uniform: it stays near-opaque along the bottom-left
   where the headline sits, and thins out fast across the upper right where
   there is nothing to protect. The previous version peaked at 55% visibility
   anywhere on the frame, which made even a 4K master look muddy. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Split into two custom properties so the vertical density is written once
     and phones can opt out of the horizontal wash without restating it. Two
     copies of the same stops would drift apart the next time either is tuned. */
  --scrim-v: linear-gradient(to top, rgba(6, 15, 28, 0.60) 0%, rgba(6, 15, 28, 0.34) 26%, rgba(6, 15, 28, 0.04) 62%, rgba(6, 15, 28, 0.16) 100%);
  --scrim-h: linear-gradient(to right, rgba(6, 15, 28, 0.28) 0%, rgba(6, 15, 28, 0) 58%);
  background: var(--scrim-v), var(--scrim-h);
}

/* Phones inherit --scrim-v untouched, so the overlay density matches desktop
   exactly. Only the horizontal wash is dropped: it exists to back a headline
   sitting bottom-left of a wide frame, and on a 9:16 crop with full-width copy
   it just darkens the shot for nothing. Neutralised rather than removed
   because `none` is not a valid background-image and would void the shorthand. */
@media (max-width: 47.99em) {
  .hero__scrim { --scrim-h: linear-gradient(rgba(6, 15, 28, 0), rgba(6, 15, 28, 0)); }
}

.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 4vw, 5rem) clamp(6rem, 8vw, 8rem);
}

/* Contrast is bought locally, behind the copy, instead of by dimming the whole
   frame. Sits inside .hero__body's stacking context so it paints over the
   scrim but under the text, and fades out well before the top of the hero —
   the footage stays clear everywhere there is nothing to read. */
.hero__body::before {
  content: '';
  position: absolute;
  inset: -5rem 0 -3rem;
  z-index: -1;
  pointer-events: none;
  /* Deliberately flat rather than a steep bottom-heavy fade. The binding
     constraint is the small eyebrow at the TOP of the block; the body copy
     lower down sits at ~12:1 with headroom to spare. Spreading the same
     protection evenly buys the eyebrow its 4.5:1 while lifting the heavy
     wash off the bottom of the frame, so more of the clip reads. */
  background: linear-gradient(to top,
    rgba(6, 15, 28, 0.52) 0%, rgba(6, 15, 28, 0.50) 34%,
    rgba(6, 15, 28, 0.49) 60%, rgba(6, 15, 28, 0.45) 78%,
    rgba(6, 15, 28, 0.21) 92%, rgba(6, 15, 28, 0) 100%);
}
/* Over video the eyebrow is the single most expensive piece of text: it is
   small (so it owes 4.5:1) and gold carries far less relative luminance than
   cream, which forced the whole overlay darker just to protect one short line.
   Cream costs ~40% less contrast budget, so the brand accent moves to the rule
   instead — same signature, and the footage gets to stay visible.
   Elsewhere on the site the eyebrow sits on flat colour and stays gold. */
.hero .eyebrow {
  color: var(--cream);
  /* Even as cream this line is the most expensive text in the hero — small
     type owes 4.5:1, and it sits highest where the plate is thinnest. It gets
     its own local backing so one short strip pays for legibility instead of
     the whole frame being darkened to suit it. */
  position: relative;
}
/* A blurred halo rather than a gradient: a linear-gradient only falls off on
   one axis, so its top and bottom edges stay hard and read as a box sitting
   on the footage. Blurring a rounded rect falls off on every side at once. */
.hero .eyebrow::after {
  content: '';
  position: absolute;
  inset: -0.5rem -1.5rem;
  z-index: -1;
  border-radius: 999px;
  background: rgba(6, 15, 28, 0.72);
  filter: blur(16px);
  pointer-events: none;
}
.hero .eyebrow::before { background: var(--gold-400); opacity: 1; }
/* Last-resort legibility for the one or two frames where the clip goes bright
   right behind a glyph. Costs nothing visually against the dark plate. */
.hero__title,
.hero .eyebrow { text-shadow: 0 1px 14px rgba(6, 15, 28, 0.55); }

/* Geometry only — the colour stops are inherited from the rule above so the
   density matches desktop exactly. A phone stacks the copy over the middle of
   a 9:16 crop, so the plate needs more room above the text for the gradient to
   reach fully transparent inside the element; stopping short of zero draws a
   hard horizontal band across the footage. */
@media (max-width: 47.99em) {
  .hero__body::before { inset: -9rem 0 -3rem; }
}
.hero__title {
  font-size: var(--step-5);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 18ch;
}

.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
}
.hero.is-in .hero__title .line > span { transform: translateY(0); }
.hero__title .line:nth-child(2) > span { transition-delay: 110ms; }
.hero__title .line:nth-child(3) > span { transition-delay: 220ms; }

.hero__sub {
  margin-top: var(--space-m);
  max-width: 46ch;
  font-size: var(--step-1);
  font-weight: 300;
  /* Full-strength cream rather than 80%. The softness was costing ~1.5x of
     contrast ratio, which had to be paid back by darkening the whole frame.
     The light weight already does the visual job of making it secondary. */
  color: var(--cream);
}

.hero .eyebrow,
.hero__sub,
.hero .btn-row {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.hero.is-in .eyebrow   { opacity: 1; transform: none; transition-delay: 80ms; }
.hero.is-in .hero__sub { opacity: 1; transform: none; transition-delay: 420ms; }
.hero.is-in .btn-row   { opacity: 1; transform: none; transition-delay: 560ms; }

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.hero__cue-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--gold-500), transparent);
  position: relative;
  overflow: hidden;
}
.hero__cue-line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--gold-300);
  animation: cueRun 2.1s var(--ease-inout) infinite;
}
@keyframes cueRun {
  0%   { top: -100%; }
  60%, 100% { top: 100%; }
}

/* Hero side rail — quick contact */
.hero__rail {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  z-index: 3;
  display: none;
  align-items: center;
  gap: var(--space-m);
  padding: 0.9rem 0;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.hero__rail a { color: var(--fg-muted); transition: color var(--dur) var(--ease-out); }
.hero__rail a:hover { color: var(--gold-400); }
.hero__rail span { width: 1px; height: 12px; background: var(--line-soft); }

@media (min-width: 48em) {
  .hero__cue { display: flex; }
}
@media (min-width: 62em) {
  .hero__rail { display: flex; }
}

/* Phone overrides MUST stay at the end of this section. They share specificity
   with the base .hero__* rules above, so the cascade is decided by source
   order — placed any earlier and the base rules silently win. */

/* Small phones: the display scale's lower bound is still too large here and
   pushes the CTAs below the fold. */
@media (max-width: 30em) {
  .hero__title { font-size: clamp(2.05rem, 1.15rem + 4.6vw, 2.7rem); }
  .hero__sub {
    font-size: var(--step-0);
    margin-top: var(--space-s);
    max-width: 34ch;
  }
  /* Top padding must clear the fixed nav — the hero is bottom-aligned, so
     without this the eyebrow rides up underneath the logo. */
  .hero__body { padding-block: calc(var(--nav-h) + 0.75rem) 3.25rem; }
  .hero .btn-row { margin-top: var(--space-m); gap: 0.6rem; }
  .hero .btn { width: 100%; }
}

/* Very small phones (320px — iPhone SE / older Androids). */
@media (max-width: 23em) {
  .hero__title { font-size: 1.92rem; }
  .hero__sub {
    font-size: var(--step--1);
    line-height: 1.45;
    margin-top: 0.6rem;
    max-width: 30ch;
  }
  .hero__body { padding-block: calc(var(--nav-h) + 0.4rem) 1.75rem; }
  .hero .btn-row { margin-top: 0.9rem; }
  .hero .btn { min-height: 2.85rem; padding-block: 0.75rem; }
  .hero .eyebrow { margin-bottom: 0.5rem; }
  .hero__cue, .hero__rail { display: none; }
}

/* ---------- 10. Marquee -------------------------------------------------- */
.marquee {
  --gap: 3rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  padding-block: 1.15rem;
  border-block: 1px solid var(--line);
  background: var(--navy-900);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-width: 100%;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  to { transform: translateX(calc(-100% - var(--gap))); }
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  width: 5px; height: 5px;
  background: var(--gold-500);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ---------- 11. Stats ---------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.stat {
  background: var(--navy-800);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.1rem, 2vw, 1.75rem);
  text-align: center;
  transition: background-color var(--dur-slow) var(--ease-out);
}
.stat:hover { background: var(--navy-700); }
.stat__num {
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--gold-500);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 0.6rem;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
@media (min-width: 48em) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 12. Pillars (Why choose us) ---------------------------------- */
.pillars {
  display: grid;
  gap: var(--space-l);
  counter-reset: pillar;
}
@media (min-width: 40em) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .pillars { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.pillar {
  position: relative;
  padding: var(--space-m) 0 var(--space-m);
  counter-increment: pillar;
}
@media (min-width: 68em) {
  .pillar { padding: var(--space-m) var(--space-l); }
  .pillar + .pillar { border-left: 1px solid var(--line-light); }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child  { padding-right: 0; }
}
.pillar__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  color: var(--gold-600);
  display: block;
  margin-bottom: var(--space-s);
}
.pillar__num::before { content: '0' counter(pillar); }
.pillar__icon {
  width: 30px; height: 30px;
  color: var(--gold-600);
  margin-bottom: var(--space-s);
  stroke-width: 1.4;
}
.pillar h3 {
  font-size: var(--step-1);
  margin-bottom: 0.55rem;
  letter-spacing: -0.015em;
}
.pillar p { font-size: var(--step--1); line-height: 1.6; }

/* ---------- 13. Service cards -------------------------------------------- */
.services {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 44em) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66em) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  position: relative;
  background: var(--navy-800);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-slow) var(--ease-out);
}
.service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.service:hover::before { opacity: 1; }
.service__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}
.service__icon {
  width: 34px; height: 34px;
  color: var(--gold-500);
  stroke-width: 1.35;
  transition: transform var(--dur-slow) var(--ease-back);
}
.service:hover .service__icon { transform: translateY(-3px) scale(1.06); }
.service__num {
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  color: var(--fg-subtle);
}
.service h3 {
  font-size: var(--step-1);
  margin-bottom: 0.65rem;
  letter-spacing: -0.015em;
}
.service p {
  font-size: var(--step--1);
  color: var(--fg-muted);
  line-height: 1.65;
}
.service__rule {
  margin-top: auto;
  padding-top: var(--space-m);
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out);
}
.service:hover .service__rule { transform: scaleX(1); }

/* ---------- 14. Split feature -------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 56em) {
  .split { grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
  .split--reverse .split__media { order: 2; }
}

.split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out);
}
.split__media:hover img { transform: scale(1.07); }

.split__badge {
  position: absolute;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  padding: 0.7rem 1.1rem;
  background: rgba(6, 15, 28, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
}

.checklist { list-style: none; padding: 0; margin-top: var(--space-l); display: grid; gap: 0.85rem; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: var(--step-0);
}
.checklist svg { width: 20px; height: 20px; color: var(--gold-500); flex-shrink: 0; margin-top: 0.22rem; }

/* ---------- 15. Audience panels ------------------------------------------ */
.panels { display: grid; gap: var(--space-m); }
@media (min-width: 52em) { .panels { grid-template-columns: repeat(2, 1fr); } }

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(22rem, 42vw, 30rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  color: var(--cream);
}
.panel__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.panel:hover .panel__img { transform: scale(1.06); }
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 15, 28, 0.94) 8%, rgba(6, 15, 28, 0.55) 48%, rgba(6, 15, 28, 0.22) 100%);
  transition: background var(--dur-slow) var(--ease-out);
}
.panel:hover::after {
  background: linear-gradient(to top, rgba(6, 15, 28, 0.96) 8%, rgba(10, 24, 41, 0.7) 52%, rgba(6, 15, 28, 0.34) 100%);
}
.panel h3 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.panel p { color: rgba(253, 249, 236, 0.78); font-size: var(--step-0); max-width: 34ch; }
.panel .link-arrow { margin-top: var(--space-m); }

/* ---------- 16. Gallery --------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 56em) {
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(8rem, 13vw, 12rem); }
  .gallery__item--tall { grid-row: span 2; }
  .gallery__item--wide { grid-column: span 2; }
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--navy-700);
}
.gallery__item img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
@media (min-width: 56em) {
  .gallery__item img { aspect-ratio: auto; }
}
.gallery__item:hover img { transform: scale(1.07); }
.gallery__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1rem 0.85rem;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: linear-gradient(to top, rgba(6, 15, 28, 0.85), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: translateY(0); }

/* ---------- 17. Testimonials ---------------------------------------------- */
.quote {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 0.6;
  color: var(--gold-500);
  opacity: 0.28;
  display: block;
  margin-bottom: var(--space-s);
}
.quote blockquote {
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.015em;
}
.quote figcaption {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
}

/* ---------- 18. FAQ / Accordion ------------------------------------------- */
.faq { border-top: 1px solid var(--line-light); }
.section:not(.section--light) .faq { border-color: var(--line-soft); }

.faq__item { border-bottom: 1px solid var(--line-light); }
.section:not(.section--light) .faq__item { border-color: var(--line-soft); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: color var(--dur) var(--ease-out);
}
.faq__q:hover { color: var(--gold-600); }
.section:not(.section--light) .faq__q:hover { color: var(--gold-400); }

.faq__sign { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  background: var(--gold-500);
  border-radius: 2px;
  transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out);
}
.faq__sign::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq__sign::after  { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--ease-inout);
}
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  max-width: 68ch;
  font-size: var(--step-0);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ---------- 19. Forms ----------------------------------------------------- */
.form { display: grid; gap: var(--space-m); }
.form__row { display: grid; gap: var(--space-m); }
@media (min-width: 40em) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.field .hint { font-size: var(--step--2); color: var(--fg-subtle); letter-spacing: 0; text-transform: none; font-weight: 400; }

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1rem;
  background: rgba(253, 249, 236, 0.04);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  color: var(--fg);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A63C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
  cursor: pointer;
}
.field select option { background: var(--navy-800); color: var(--cream); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-subtle); }
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: rgba(201, 166, 60, 0.4); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold-500);
  background: rgba(253, 249, 236, 0.06);
  box-shadow: 0 0 0 3px rgba(201, 166, 60, 0.16);
}
.field .error {
  font-size: var(--step--2);
  color: #FF9C8A;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  min-height: 0;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: #E5624A; }

/* Radio pills */
.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill { position: relative; display: inline-flex; }
.pill input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-size: var(--step--1);
  color: var(--fg-muted);
  transition: all var(--dur) var(--ease-out);
  cursor: pointer;
}
.pill input:checked + span {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  font-weight: 600;
}
.pill input:focus-visible + span { outline: 2px solid var(--gold-400); outline-offset: 3px; }
.pill span:hover { border-color: var(--gold-500); color: var(--cream); }

.form__status {
  padding: var(--space-m);
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: rgba(201, 166, 60, 0.08);
  font-size: var(--step--1);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-error { border-color: #E5624A; background: rgba(229, 98, 74, 0.1); }

/* ---------- 20. Contact cards --------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-m); }
@media (min-width: 44em) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .contact-grid { grid-template-columns: repeat(4, 1fr); } }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out);
}
.contact-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-4px);
  background: rgba(201, 166, 60, 0.05);
}
.contact-card svg { width: 24px; height: 24px; color: var(--gold-500); stroke-width: 1.4; margin-bottom: 0.35rem; }
.contact-card__label {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.contact-card__value { font-size: var(--step-0); font-weight: 500; color: var(--fg); line-height: 1.45; }
a.contact-card:hover .contact-card__value { color: var(--gold-400); }

/* ---------- 21. CTA band --------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  isolation: isolate;
}
.cta-band__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.3;
}
.cta-band::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(6, 15, 28, 0.95) 20%, rgba(6, 15, 28, 0.7) 100%);
}

/* ---------- 22. Footer ------------------------------------------------------ */
.footer {
  background: var(--navy-900);
  border-top: 1px solid var(--line-soft);
  padding-block: var(--space-2xl) var(--space-l);
}
.footer__grid {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 44em) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-l); } }

.footer h4 {
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--space-m);
  font-weight: 600;
}
/* Links get vertical padding rather than list gap, so each one is a legitimate
   44px touch target on a phone without changing the visual rhythm. */
.footer ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer li { display: flex; }
.footer a {
  color: var(--fg-muted);
  font-size: var(--step--1);
  transition: color var(--dur) var(--ease-out);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.1rem;
}
.footer a:hover { color: var(--gold-400); }
.footer__bottom a { min-height: 44px; }
.footer address { font-style: normal; color: var(--fg-muted); font-size: var(--step--1); line-height: 1.7; }

.footer__brand-copy {
  color: var(--fg-muted);
  font-size: var(--step--1);
  max-width: 34ch;
  margin-top: var(--space-m);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-l);
  /* Keep the last row clear of the fixed WhatsApp / back-to-top stack. */
  padding-right: 4.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--step--2);
  color: var(--fg-subtle);
}
@media (max-width: 33.99em) {
  .footer__bottom { padding-right: 0; padding-bottom: 4rem; }
}
.footer__bottom a { font-size: inherit; }

/* ---------- 23. Floating actions -------------------------------------------- */
.fab-stack {
  position: fixed;
  right: calc(clamp(0.9rem, 2.5vw, 1.5rem) + env(safe-area-inset-right));
  bottom: calc(clamp(0.9rem, 2.5vw, 1.5rem) + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-end;
}
.fab {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-900);
  box-shadow: var(--shadow-m);
  transform: translateY(16px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 460ms var(--ease-back), opacity 360ms var(--ease-out), background-color var(--dur) var(--ease-out);
}
.fab.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.fab:hover { background: var(--gold-300); }
.fab--wa { background: #25D366; color: #fff; }
.fab--wa:hover { background: #1FB855; }
.fab--top { background: rgba(10, 24, 41, 0.85); color: var(--cream); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fab--top:hover { background: var(--gold-500); color: var(--navy-900); }

/* Scroll progress */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  z-index: 101;
  will-change: transform;
}

/* ---------- 24. Page header (interior pages) --------------------------------- */
.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 7vw, 6.5rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  background: var(--navy-900);
  isolation: isolate;
}
.page-head__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.34;
  transform: scale(1.05);
}
.page-head::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--navy-800) 2%, rgba(6, 15, 28, 0.78) 45%, rgba(6, 15, 28, 0.6) 100%);
}
.page-head h1 { font-size: var(--step-4); max-width: 20ch; }
.page-head .lede { margin-top: var(--space-m); }

/* Phone: the interior hero opened with 132px of empty navy before the
   breadcrumb even appeared. Keep the nav clearance, drop the rest. */
@media (max-width: 47.99em) {
  .page-head {
    padding-top: calc(var(--nav-h) + 1.75rem);
    padding-bottom: 2.25rem;
  }
  .page-head h1 { max-width: 16ch; }
  .crumbs { margin-bottom: 0.85rem; }
  .crumbs a { min-height: 34px; }
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--space-m);
  list-style: none;
  padding: 0;
}
.crumbs li { display: flex; align-items: center; }
.crumbs a {
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease-out);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 0.25rem;
}
.crumbs a:hover { color: var(--gold-400); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 0.25rem; color: var(--gold-600); }

/* ---------- 25. Process steps ------------------------------------------------ */
.steps { display: grid; gap: var(--space-l); counter-reset: step; }
@media (min-width: 52em) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76em) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  counter-increment: step;
  padding-top: var(--space-l);
  border-top: 1px solid var(--line-soft);
}
.section--light .step { border-color: var(--line-light); }
.step::before {
  content: '0' counter(step);
  position: absolute;
  top: var(--space-l);
  right: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--gold-500);
  opacity: 0.2;
}
.step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; padding-right: 3rem; }
.step p { font-size: var(--step--1); }

/* ---------- 26. Reveal animations --------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal="clip"]  {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out);
}
[data-reveal="clip"].is-revealed { clip-path: inset(0 0 0% 0); }

[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }
[data-reveal-delay="5"] { transition-delay: 450ms; }
[data-reveal-delay="6"] { transition-delay: 540ms; }

/* Line-by-line heading reveal */
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
}
.reveal-lines.is-revealed .line > span { transform: translateY(0); }
.reveal-lines .line:nth-child(2) > span { transition-delay: 90ms; }
.reveal-lines .line:nth-child(3) > span { transition-delay: 180ms; }
.reveal-lines .line:nth-child(4) > span { transition-delay: 270ms; }

/* Parallax */
[data-parallax] { will-change: transform; }

/* ---------- 27. Reduced motion / data saver ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .reveal-lines .line > span,
  .hero__title .line > span { transform: none !important; }
  .hero .eyebrow, .hero__sub, .hero .btn-row { opacity: 1 !important; transform: none !important; }
  .menu__link { transform: none !important; }
  .menu__foot { opacity: 1 !important; transform: none !important; }
  .hero__poster { animation: none !important; transform: scale(1.04) !important; }
  .marquee__track { animation: none !important; }
  .preloader { display: none !important; }
}

/* Print */
@media print {
  .nav, .menu, .fab-stack, .progress, .preloader, .hero__media, .hero__cue { display: none !important; }
  body { background: #fff; color: #000; }
}