/* ==========================================================================
   Lance.live clone — tokens, base, components, sections, responsive
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "gtStandard";
  src: url("assets/fonts/gtStandard-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gtStandard";
  src: url("assets/fonts/gtStandard-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gtStandard";
  src: url("assets/fonts/gtStandard-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gtStandard";
  src: url("assets/fonts/gtStandard-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gtStandard";
  src: url("assets/fonts/gtStandard-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "publishSerif";
  src: url("assets/fonts/publishSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --color-black: #000000;
  --color-paper: #fafafa;
  --color-white: #ffffff;
  --color-sand-s: #f7f6f4;   /* light section bg: hero reveal / features */
  --color-sand-l: #dad9d4;   /* security section bg */
  --color-grey-m: #7b7b7b;   /* secondary text on light bg */
  --color-border-l: #bcbbb4;

  --white-12: rgba(255, 255, 255, 0.12);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-24: rgba(255, 255, 255, 0.24);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-70: rgba(255, 255, 255, 0.70);
  --white-75: rgba(255, 255, 255, 0.75);
  --black-20: rgba(0, 0, 0, 0.20);
  --black-40: rgba(0, 0, 0, 0.40);
  --black-50: rgba(0, 0, 0, 0.50);
  --black-60: rgba(0, 0, 0, 0.60);

  --font-serif: "publishSerif", Georgia, "Times New Roman", serif;
  --font-sans: "gtStandard", Arial, Helvetica, sans-serif;

  --container-max: 1440px;
  --page-x: 28px;
  --nav-h: 88px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Measured: the original's px-page is 28px on desktop and tablet (HUD list/card
   at x=28 at 834px wide), 14px on mobile. */
@media (max-width: 1024px) {
  :root { --page-x: 28px; }
}
@media (max-width: 640px) {
  :root { --page-x: 14px; } /* measured px-page at 390px; nav stays 88px tall like the original */
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html {
  font-size: 16px;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-paper);
  font: 400 16px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

.c-white { color: var(--color-white); }
.c-white-40 { color: var(--white-40); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
body:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 14px/1 var(--font-sans);
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}
.cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--color-white);
  color: var(--color-black);
}
.cta-arrow img { width: 11px; height: 11px; }
.cta-arrow--dark { background: var(--color-black); filter: invert(1); }

.btn-ghost-pill {
  background: var(--white-12);
  color: var(--color-white);
  padding: 8px 8px 8px 20px;
  height: 36px;
}
.btn-ghost-pill:hover { background: var(--white-24); color: var(--color-sand-l); }

.btn-dark-pill {
  background: var(--black-60);
  color: var(--color-white);
  padding: 10px 10px 10px 22px;
  height: 44px;
  border: 1px solid var(--white-15);
}
.btn-dark-pill:hover { background: var(--black-40); transform: translateY(-1px); }
.btn-dark-pill .cta-arrow { background: var(--color-white); }
.btn-dark-pill .cta-arrow--dark { filter: none; }
.btn-dark-pill .cta-arrow--dark img { filter: invert(1); }

.btn-light-pill {
  background: var(--color-sand-s);
  color: var(--color-black);
  padding: 8px 8px 8px 22px;
  height: 40px;
}
.btn-light-pill:hover { background: var(--color-white); transform: translateY(-1px); }
.btn-light-pill .cta-arrow--dark { background: var(--color-black); filter: none; }
.btn-light-pill .cta-arrow--dark img { filter: invert(1); }

/* ---------- Nav ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}
/* The original nav stays transparent at every scroll position (data-nav-fill
   "bg-transparent"); over light surfaces it switches to dark text instead. */
.site-nav .nav-btn, .site-nav .nav-link, .site-nav .nav-logo img, .site-nav .nav-logo span, .site-nav .btn-ghost-pill,
.site-nav .cta-arrow, .site-nav .burger span { transition: color 0.3s ease, background-color 0.3s ease, filter 0.3s ease; }
body.nav-dark .nav-btn, body.nav-dark .nav-link { color: #1a1a1a; }
body.nav-dark .nav-btn:hover { color: #000; }
body.nav-dark .nav-link:hover { background: rgba(0, 0, 0, 0.06); }
body.nav-dark .nav-logo img { filter: invert(1); }
body.nav-dark .nav-logo span { color: #111; }
body.nav-dark .btn-ghost-pill { background: rgba(0, 0, 0, 0.08); color: #000; }
body.nav-dark .btn-ghost-pill .cta-arrow { background: #000; }
body.nav-dark .btn-ghost-pill .cta-arrow img { filter: invert(1); }
body.nav-dark .burger { color: #1a1a1a; }
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links--left { justify-content: flex-start; }
.nav-links--right { justify-content: flex-end; gap: 12px; }
.nav-dropdown { position: relative; }
.nav-dropdown__trigger { gap: 6px; }
.nav-dropdown__trigger span { font-size: 14px; transform: translateY(-1px); transition: transform 0.2s ease; }
.nav-dropdown:hover .nav-dropdown__trigger span,
.nav-dropdown:focus-within .nav-dropdown__trigger span,
.nav-dropdown.is-open .nav-dropdown__trigger span { transform: rotate(180deg) translateY(1px); }
.nav-dropdown__panel {
  position: absolute; top: calc(100% + 14px); left: 0; width: 620px; padding: 18px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  background: rgba(13,14,12,0.96); box-shadow: 0 28px 80px rgba(0,0,0,0.35); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s var(--ease-out);
}
.nav-dropdown--solutions .nav-dropdown__panel { width: 560px; }
.nav-dropdown__panel::before { content: ""; position: absolute; inset: -16px 0 auto; height: 18px; }
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.is-open .nav-dropdown__panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav-dropdown__eyebrow { grid-column: 1 / -1; padding: 2px 10px 8px; font: 500 10px/1 var(--font-sans); letter-spacing: 1.7px; text-transform: uppercase; color: #bfc4a0; }
.nav-dropdown__panel a { display: flex; flex-direction: column; gap: 5px; min-height: 62px; padding: 11px 12px; border-radius: 10px; transition: background 0.2s ease; }
.nav-dropdown__panel a:hover, .nav-dropdown__panel a:focus-visible { background: rgba(255,255,255,0.075); outline: none; }
.nav-dropdown__panel strong { font: 500 14px/1.15 var(--font-sans); color: #fff; }
.nav-dropdown__panel a span { font: 400 12px/1.35 var(--font-sans); color: rgba(255,255,255,0.48); }
body.nav-dark .nav-dropdown__trigger { color: #1a1a1a; }
body.nav-dark .nav-dropdown__panel { border-color: rgba(0,0,0,0.08); background: rgba(250,250,247,0.97); box-shadow: 0 28px 80px rgba(26,27,24,0.14); }
body.nav-dark .nav-dropdown__panel strong { color: #111; }
body.nav-dark .nav-dropdown__panel a span { color: rgba(0,0,0,0.52); }
body.nav-dark .nav-dropdown__panel a:hover, body.nav-dark .nav-dropdown__panel a:focus-visible { background: rgba(0,0,0,0.055); }
.nav-btn, .nav-link {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  font: 400 13px/1 var(--font-sans);
  color: var(--color-white);
  border-radius: 9999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-btn:hover { color: #f7f6f4; }
.nav-link:hover { background: rgba(255, 255, 255, 0.15); }
.nav-links--right .nav-link { font-size: 14px; }
.nav-logo { display: flex; justify-content: center; }
.brand-lockup { display: inline-flex; align-items: center; gap: 7px; color: var(--color-white); }
.brand-lockup img { width: 25px; height: 25px; object-fit: contain; flex: 0 0 auto; }
.brand-lockup span { font: 600 16px/1 var(--font-sans); letter-spacing: 1.8px; text-transform: uppercase; color: currentColor; }

/* Below 1024px the original replaces the left links with a text "Menu" button. */
.burger { display: none; align-items: center; height: 32px; padding: 0; font: 400 14px/1 var(--font-sans); color: var(--color-white); transition: color 0.3s ease; }

.mobile-menu {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: rgba(0, 0, 0, 0.97);
  z-index: 55;
  flex-direction: column;
  gap: 4px;
  padding: 24px var(--page-x);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.mobile-menu a, .mobile-menu summary { padding: 14px 4px; font-size: 20px; border-bottom: 1px solid var(--white-15); }
.mobile-menu details { border-bottom: 1px solid var(--white-15); }
.mobile-menu summary { display: flex; align-items: center; justify-content: space-between; border-bottom: 0; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: "+"; color: var(--white-45); }
.mobile-menu details[open] summary::after { content: "−"; }
.mobile-menu__sub { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 0 0 12px; }
.mobile-menu__sub a { padding: 9px 4px; border: 0; font-size: 14px; color: var(--white-60); }
.mobile-menu .btn { margin-top: 16px; justify-content: center; width: fit-content; }
body.menu-open .mobile-menu { display: flex; opacity: 1; transform: none; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* ---------- Typography ---------- */
h1 {
  font: 400 64px/1.05 var(--font-serif);
  letter-spacing: -1.28px;
  color: var(--color-white);
}
h2 {
  font: 400 42px/1.1 var(--font-serif);
  letter-spacing: -0.84px;
}
.section--sand h2, .section--dune h2 { color: var(--color-black); }
.section--black h2, footer h2 { color: var(--color-white); }

/* ==========================================================================
   PRODUCT / HERO — real scroll-jack.
   #product is a tall (~10800px desktop) section; .stage-pin is position:sticky
   and stays pinned to the viewport for that whole scroll distance. JS reads
   scroll progress (0..1) across that distance and cross-fades the 4 .stage
   layers + advances the department tabs, matching the original's pacing
   (fold 1 = hero, fold 2 = trust/logos, folds 3-11 = department walkthrough,
   fold 12 = Measured in Outcomes).
   ========================================================================== */
/* Original ScrollTrigger: end = innerHeight * 11, so the section is 12 viewports
   tall (10800px at 900px high — matches the measured pin-spacer; 14328px on tablet). */
:root { --hero-scroll-h: calc(100vh * 12); }
/* Mobile: the original itself does not scroll-jack the tour on narrow/touch
   viewports (the captured mobile folds show the departments as a plain
   stacked "+"-accordion list, not a pinned scrub) — so below 640px we drop
   the sticky pin entirely and let the 4 stages stack in normal document
   flow, matching that real mobile behaviour instead of forcing a desktop-only
   mechanic onto a viewport where the source site doesn't use it. */

.stage-section {
  position: relative;
  width: 100%;
  height: var(--hero-scroll-h);
  background: var(--color-black);
}
.stage-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--color-black);
}
/* Stage content layers sit at z20 above the shared backgrounds. While pinned,
   their opacity is written every frame from the measured curves, so no CSS
   transition here (it would lag behind the scroll). */
.stage {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Shared background layers (same stacking as the original .hotel-stage). */
.pin-layer { position: absolute; inset: 0; }
.pin-video { z-index: 1; will-change: filter, opacity; }
.pin-scrim { z-index: 2; background: rgba(0, 0, 0, 0.4); pointer-events: none; }
.pin-map { z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; }
.hotel-map { position: absolute; inset: 0; }
.hotel-map svg { display: block; width: 100%; height: 100%; }
.pin-grad { position: absolute; z-index: 10; pointer-events: none; opacity: 0; }
.pin-grad--left {
  inset: 0 auto 0 0;
  width: min(800px, calc(800 / 1512 * 100vw));
  background: linear-gradient(to right in oklab, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.pin-grad--top {
  inset: 0 0 auto 0;
  height: min(719px, calc(719 / 1512 * 100vw));
  background: linear-gradient(to bottom in oklab, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.stage.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* Stage 0: hero */
.stage-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stage-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Original: bg-[linear-gradient(180deg,rgba(0,0,0,0)_40%,rgba(0,0,0,0.5)_100%)] */
.stage-hero__gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
}
.stage-hero__content { position: relative; z-index: 2; padding-bottom: 64px; padding-top: var(--nav-h); }
.stage-hero__row { display: flex; align-items: center; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.stage-hero__sub { font: 500 16px/1.4 var(--font-sans); color: var(--color-white); }

.scroll-hint {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  align-self: flex-end;
  margin: 0 var(--page-x) 26px auto;
  color: var(--white-40);
  font: 400 14px/1 var(--font-sans);
  transition: color 0.2s ease;
}
.scroll-hint__chevron { display: inline-flex; opacity: 0.6; animation: hero-walk-caret 3s cubic-bezier(0.4,0,0.2,1) infinite; }
.scroll-hint:hover, .scroll-hint:hover .scroll-hint__chevron { color: var(--color-white); opacity: 1; }
@keyframes hero-walk-caret { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Stage 1: trust logos over blurred hero */
/* Trust stage has no background of its own: it sits over the shared video
   layer, which blurs to 20px (measured) — the original blurs the live video,
   not a separate still. */
.stage-trust { display: flex; flex-direction: column; justify-content: center; padding: 0 0 44px; }
.stage-trust__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
/* Original .trust-word spans: publishSerif 36px/45px, -0.72px. */
.stage-trust__line { max-width: 690px; font: 400 36px/45px var(--font-serif); letter-spacing: -0.72px; color: var(--color-white); }

/* Logos sit along the bottom of the trust screen, no divider (original fold 2). */
.brand-strip {
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 32px;
  padding: 0 var(--page-x);
}
.brand-strip img { height: 24px; width: auto; opacity: 0.85; filter: grayscale(1) brightness(2.2); }
.hotel-types { justify-content: flex-start; gap: clamp(36px, 7vw, 108px); }
.hotel-types span {
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.28);
  font: 500 12px/1.2 var(--font-sans); letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--white-75); white-space: nowrap;
}

/* Stage 2: department tour */
.stage-tour { padding: 0; display: flex; align-items: center; }
/* Department HUD — values measured on the original at 1440x900:
   list [28,386 132x129], items 14px/21px on a 27px pitch, card at x=232
   centred on y=450, row gap eo=36px, list wrapper pr-9 (36px). */
.tour-hud {
  position: absolute; z-index: 1;
  left: var(--page-x); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 36px;
}
.tour-list { position: relative; flex-shrink: 0; padding-right: 36px; }
.tour-dash {
  position: absolute; left: 0; top: 0; width: 16px; height: 1px;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.5s ease-in-out;
}
.dept-tabs { display: flex; flex-direction: column; gap: 6px; width: 132px; }
/* Original: text-white opacity-40, active opacity-60 + translateX(24px),
   transition-[opacity,transform] 500ms ease-in-out. */
.dept-tab {
  display: block; padding: 0; text-align: left; white-space: nowrap;
  font: 400 14px/21px var(--font-sans); color: var(--color-white); opacity: 0.4;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.dept-tab:hover, .dept-tab.is-active { opacity: 0.6; }
.dept-tab.is-active { transform: translateX(24px); }

/* Card frame: its size follows the active panel (JS), morphing over 0.4s. */
.dept-card {
  position: relative; flex-shrink: 0; overflow: hidden;
  width: 357px; height: 354px; border-radius: 12px;
  background: rgba(188, 187, 180, 0.12);
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.24);
}
.dept-card__blur { position: absolute; inset: 0; border-radius: 12px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
/* 0.5px ring with a slowly spinning conic highlight (original .product-ui-stroke). */
.dept-card__stroke {
  position: absolute; inset: 0; border-radius: 12px; padding: 0.5px; overflow: hidden; opacity: 0.6; pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}
.dept-card__spin {
  position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1;
  background: conic-gradient(#fff 0deg, #ffffff2e 90deg, #ffffffd9 180deg, #ffffff2e 270deg, #fff 360deg);
  animation: product-ui-stroke-spin 10s linear infinite;
}
@keyframes product-ui-stroke-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dept-card__spin { animation: none; } }
/* Panels stack absolutely; each has its own width (panelWidth + 36, set by JS)
   so its height is stable while the frame morphs. Opacity 0.28s power2.inOut. */
.dept-card__panel {
  position: absolute; left: 0; top: 0; padding: 22px 18px 18px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.45, 0, 0.55, 1);
}
.dept-card__panel.is-active { opacity: 1; pointer-events: auto; }
.dept-card__panel h3 { font: 400 26px/1.2 var(--font-serif); letter-spacing: -0.52px; color: var(--color-white); margin-bottom: 6px; }
/* Description + 0.5px grey-m/60 divider, 18px either side (measured). */
.dept-card__panel p { font: 400 14px/1.35 var(--font-sans); color: #bcbbb4; padding-bottom: 18px; border-bottom: 0.5px solid rgba(123, 123, 123, 0.6); }
/* Bottom media slot of each department card = the real Lottie scene.
   Sizes come from the original bundle config (panelWidth × panelHeight,
   inside a container padded by tu=18px each side). */
.dept-card__media {
  margin-top: 18px;
  width: var(--lottie-w);
  height: var(--lottie-h);
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
}
.dept-card__media svg { display: block; width: 100% !important; height: 100% !important; }

/* Original: absolute bottom-[52px] right-[var(--page-x)] text-sm text-white/60 */
.tour-skip { position: absolute; z-index: 1; right: var(--page-x); bottom: 52px; font: 400 14px/20px var(--font-sans); color: var(--white-60); transition: color 0.2s ease; }
/* Tablet (measured at 834x1194): list pinned at top y=120, card bottom-aligned 28px up. */
@media (max-width: 1100px) and (min-width: 641px) {
  .tour-hud {
    top: 120px; bottom: 28px; left: var(--page-x); right: var(--page-x); transform: none;
    flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px;
  }
  .tour-list { padding-right: 0; }
}
.tour-skip:hover { color: var(--color-white); }

/* Stage 3: measured outcomes */
/* Sand comes from the pin background (measured black → sand at p≈0.89–0.95). */
.stage-outcomes { padding: 0; display: flex; align-items: center; }
.stage-outcomes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; width: 100%; }
.stage-outcomes__intro h2 { color: var(--color-black); margin-bottom: 12px; }
.stage-outcomes__intro p { font: 400 15px/1.5 var(--font-sans); color: var(--color-grey-m); max-width: 340px; }
.stats-list { display: flex; flex-direction: column; }
.stat-row { padding: 20px 0; border-bottom: 1px solid var(--color-border-l); }
.stat-row:first-child { padding-top: 0; }
/* Real bundle: font-display text-[100px] leading-none tracking-[-2px] */
.stat-row__num { font: 400 100px/1 var(--font-serif); letter-spacing: -2px; color: var(--color-black); display: flex; align-items: flex-start; }
.stat-row__suffix { font-size: 34px; letter-spacing: -0.6px; line-height: 1.15; }
.stat-row__metric { font: 400 clamp(34px, 4.2vw, 62px)/1.02 var(--font-serif); letter-spacing: -1.2px; color: var(--color-black); }
/* Count-up reveal: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1),
   staggered 160ms per index — matching the original's inline transition. */
.stat-row { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.stat-row[data-stat-index="1"] { transition-delay: 160ms; }
.stat-row[data-stat-index="2"] { transition-delay: 320ms; }
.stats-list.is-counting .stat-row { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stat-row { transition: none; }
}
.stat-row__label { font: 400 15px/1.4 var(--font-sans); color: var(--color-black); margin-top: 4px; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.section { width: 100%; padding: 100px 0; }
.section--sand { background: var(--color-sand-s); color: var(--color-black); }
.section--black { background: var(--color-black); }
.section--dune { background: var(--color-sand-l); color: var(--color-black); }
/* Measured desktop section boxes: features py-[120px] → 919px; trusted 924px
   (140 + head 92 + 64 + cards 488 + 140); security 760px (64 + head 158 + 64 +
   433px rows + 40). Mobile overrides come later in the file. */
#features { padding: 120px 0; }
@media (min-width: 1025px) {
  .section--black { padding: 140px 0; }
  #trust { padding: 64px 0 40px; }
  .security-item { height: 433px; min-height: 0; }
}

.features-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.features-head__text p { margin-top: 12px; font: 400 16px/1.5 var(--font-sans); color: var(--color-grey-m); max-width: 620px; }

.carousel-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.carousel-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; color: currentColor; transition: opacity 0.2s ease, color 0.2s ease; }
.carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.section--sand .carousel-btn { color: var(--color-black); }
.section--black .carousel-btn { color: var(--color-sand-l); }
.section--black .carousel-btn:hover:not(:disabled) { color: var(--color-border-l); }

.agents-carousel { width: 100%; overflow: hidden; cursor: grab; }
.agents-carousel__track { display: flex; gap: 24px; transition: transform 0.5s var(--ease-out); }
.agent-card { flex: 0 0 400px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; } /* original: fixed 400px cards, track overflows */
.agent-card__img { border-radius: 12px; overflow: hidden; aspect-ratio: 400/464; background: #ddd; }
.agent-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* Original: title and description run inline in one paragraph, 16px/22.4px. */
.agent-card p { font: 400 16px/22.4px var(--font-sans); color: var(--color-grey-m); }
.agent-card p strong { font-weight: 500; color: var(--color-black); }

/* ==========================================================================
   TESTIMONIAL QUOTE CAROUSEL
   ========================================================================== */
.section--quote { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 0; overflow: hidden; }
.quote-carousel { position: relative; width: 100%; min-height: 100svh; display: flex; align-items: center; }
.quote-carousel__bg { position: absolute; inset: 0; }
.quote-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.quote-slide-bg.is-active { opacity: 1; }
.quote-slide-bg::before, .quote-slide-bg::after { content: ""; position: absolute; pointer-events: none; }
.quote-slide-bg::before {
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.quote-slide-bg::after { width: 58vw; height: 58vw; right: -12vw; top: -22vw; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,0.02), 0 0 0 180px rgba(255,255,255,0.015); }
.quote-slide-bg--one { background: radial-gradient(circle at 76% 24%, rgba(188,177,140,0.22), transparent 34%), linear-gradient(135deg, #151716, #34352f); }
.quote-slide-bg--two { background: radial-gradient(circle at 20% 75%, rgba(161,177,169,0.22), transparent 38%), linear-gradient(135deg, #242722, #111211); }
.quote-carousel__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.12); }
.quote-carousel__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 80px var(--page-x); width: 100%; }

.quote-card { width: 100%; max-width: 780px; background: rgba(12,13,12,0.58); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 48px; min-height: 390px; }
.quote-card__slide { display: none; flex-direction: column; gap: 20px; }
.quote-card__slide.is-active { display: flex; }
.quote-card__eyebrow { font: 500 12px/1.2 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--white-45); }
.quote-card__text { max-width: 610px; font: 400 clamp(28px, 3vw, 42px)/1.08 var(--font-serif); letter-spacing: -0.5px; color: var(--color-white); }
.quote-card__intro { max-width: 610px; font: 400 15px/1.5 var(--font-sans); color: var(--white-75); }
.integration-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 4px; }
.integration-grid > div { min-height: 108px; padding: 18px; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.integration-grid strong { font: 500 14px/1.3 var(--font-sans); color: var(--color-white); }
.integration-grid span { font: 400 13px/1.45 var(--font-sans); color: var(--white-45); }
.quote-card__signature { margin-top: 4px; }
.quote-card__name { font: 400 15px/1.4 var(--font-sans); color: var(--color-white); }
.quote-card__role { font: 400 13px/1.4 var(--font-sans); color: var(--white-75); }
.quote-card__meta { font: 400 13px/1.4 var(--font-sans); color: var(--white-45); }
.quote-card__logo { margin-top: 8px; opacity: 0.9; }

.quote-thumbs { display: flex; gap: 8px; margin-top: 24px; }
.quote-thumb { width: 57px; height: 36px; border-radius: 6px; overflow: hidden; opacity: 0.4; transition: opacity 0.2s ease; border: 1px solid var(--white-45); color: var(--color-white); font: 500 11px/1 var(--font-sans); }
.quote-thumb img { width: 100%; height: 100%; object-fit: cover; }
.quote-thumb span { display: grid; place-items: center; width: 100%; height: 100%; }
.quote-thumb:hover { opacity: 0.7; }
.quote-thumb.is-active { opacity: 1; border-color: var(--color-white); }

/* ==========================================================================
   TRUSTED HOTELS story carousel
   ========================================================================== */
.stories-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 64px; flex-wrap: wrap; } /* original mt-16 */
.stories-head h2 { max-width: 560px; }

.story-carousel-mask { width: 100%; overflow: hidden; cursor: grab; }
.story-carousel-track { display: flex; align-items: flex-start; gap: 30px; transition: transform 0.5s var(--ease-out); }
/* Original card = image box + logo/stat row (gap 24px); the quote lives inside
   the image box as an overlay revealed on hover, not as text below it. */
.story-card { flex: 0 0 min(377px, 78vw); display: grid; grid-template-rows: auto auto; row-gap: 24px; }
.story-card__img { position: relative; height: 440px; border-radius: 8px; overflow: hidden; background: #222; }
.story-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.story-card:hover .story-card__img img { transform: scale(1.04); }
.story-card__img { grid-area: 1 / 1; }
.story-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%); opacity: 0; transition: opacity 0.35s ease; }
.story-card__quote, .story-card__attr {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; margin-inline: 20px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.story-card__quote { font: 400 18px/1.25 var(--font-serif); color: var(--color-white); letter-spacing: -0.2px; margin-bottom: 44px; }
.story-card__attr { font: 400 13px/17.55px var(--font-sans); color: var(--white-75); margin-bottom: 16px; }
.story-card:hover .story-card__quote, .story-card:hover .story-card__attr,
.story-card:focus-visible .story-card__quote, .story-card:focus-visible .story-card__attr { opacity: 1; transform: none; }
.story-card:hover .story-card__img::after, .story-card:focus-visible .story-card__img::after { opacity: 1; }
.story-card__foot { grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.story-card__foot img { height: 18px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.story-card__foot span { font: 400 13px/1 var(--font-sans); color: var(--white-45); }
.process-card { display: flex; flex-direction: column; row-gap: 0; }
.process-card__visual {
  grid-area: auto; background: #171914; border: 1px solid rgba(255,255,255,0.1);
}
.process-card__visual::after { opacity: 1; background: linear-gradient(180deg, transparent 58%, rgba(8,9,7,0.28)); }
.process-card__visual img { filter: saturate(0.82) contrast(1.02); }
.process-card__title { margin-top: 22px; font: 400 24px/1.15 var(--font-serif); color: var(--color-white); }
.process-card__copy { margin-top: 10px; max-width: 340px; font: 400 14px/1.5 var(--font-sans); color: var(--white-45); }

/* ==========================================================================
   SECURITY
   ========================================================================== */
.security-head { max-width: 588px; margin-bottom: 64px; }
.security-head p { margin-top: 12px; font: 400 16px/1.5 var(--font-sans); color: var(--color-grey-m); max-width: 384px; }
/* Original: flex w-fit items-center gap-3, 40px tall, no underline. */
.learn-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 0; font: 400 14px/16px var(--font-sans); color: var(--color-grey-m); }
.learn-more span { font-size: 12px; }

.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--color-border-l); }
.security-item { border-right: 1px solid var(--color-border-l); padding: 0 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; gap: 40px; }
.security-item__title { text-transform: uppercase; font: 500 13px/1.4 var(--font-sans); letter-spacing: 0.4px; color: var(--color-black); margin-bottom: 12px; }
.security-item__desc { font: 400 14px/1.5 var(--font-sans); color: var(--color-grey-m); }
.security-badge { width: 100px; height: 100px; color: var(--color-grey-m); }
.security-badge svg { width: 100%; height: 100%; }
.trust-symbol { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid var(--color-grey-m); border-radius: 50%; font: 400 20px/1 var(--font-serif); color: var(--color-grey-m); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer { background: var(--color-black); padding: 100px 0 56px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-rule { border: 0; border-top: 1px solid var(--white-15); margin: 64px 0; }

.footer-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-brand { flex: 1.2 1 200px; min-width: 150px; }
.brand-lockup--footer { justify-content: flex-start; gap: 12px; }
.brand-lockup--footer img { width: 44px; height: 44px; }
.brand-lockup--footer span { font-size: 24px; letter-spacing: 2.6px; }
.footer-col { flex: 1 1 130px; min-width: 120px; display: flex; flex-direction: column; gap: 20px; }
.footer-col__title { font: 400 14px/1 var(--font-sans); color: var(--color-grey-m); }
.footer-col a { font: 400 14px/1 var(--font-sans); color: var(--white-70); transition: color 0.2s ease; }
.footer-col a.is-bright { color: var(--color-white); }
.footer-col a:hover { color: var(--color-sand-l); }

.footer-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 64px; flex-wrap: wrap; }
.footer-bottom__left { display: flex; flex-direction: column; gap: 20px; max-width: 280px; }
.footer-buildings { width: 100%; max-width: 280px; height: auto; opacity: 0.9; }
.footer-copy { font: 400 13px/1.5 var(--font-sans); color: var(--color-grey-m); }
.footer-bottom__right { display: flex; align-items: center; gap: 16px; font: 400 14px/1 var(--font-sans); color: var(--color-grey-m); }
.iso-badge { display: block; width: 36px; height: 36px; border-radius: 9999px; background: var(--color-grey-m); }

/* ==========================================================================
   DEMO PROTOTYPE — visual flow only, deliberately no submission or storage
   ========================================================================== */
.demo-dialog {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; color: var(--color-white);
  background: #121311; box-shadow: 0 32px 100px rgba(0,0,0,0.55); overflow: auto;
}
.demo-dialog::backdrop { background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); }
.demo-dialog__shell { position: relative; padding: 56px; }
.demo-dialog__close { position: absolute; top: 20px; right: 22px; font: 400 13px/1 var(--font-sans); color: var(--white-45); }
.demo-dialog__close:hover { color: var(--color-white); }
.demo-dialog__progress { display: flex; gap: 8px; margin-bottom: 44px; }
.demo-dialog__progress span { width: 42px; height: 2px; background: var(--white-15); transition: background 0.25s ease; }
.demo-dialog__progress span.is-active { background: var(--color-white); }
.demo-step { display: none; }
.demo-step.is-active { display: block; }
.demo-dialog__eyebrow { margin-bottom: 12px; font: 500 11px/1.2 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--white-45); }
.demo-dialog h2 { max-width: 500px; font-size: 42px; color: var(--color-white); }
.demo-dialog__intro { max-width: 520px; margin: 14px 0 32px; font: 400 15px/1.5 var(--font-sans); color: var(--white-75); }
.demo-dialog label { display: flex; flex-direction: column; gap: 9px; font: 500 12px/1.2 var(--font-sans); color: var(--white-75); }
.demo-dialog input, .demo-dialog select {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(255,255,255,0.18); border-radius: 7px;
  background: rgba(255,255,255,0.055); color: var(--color-white); font: 400 14px/1 var(--font-sans); outline: none;
}
.demo-dialog select option { color: #111; }
.demo-dialog input:focus, .demo-dialog select:focus { border-color: rgba(255,255,255,0.65); }
.demo-dialog__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.demo-dialog__actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 34px; }
.demo-dialog__actions .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.demo-back { padding: 10px 0; font: 400 14px/1 var(--font-sans); color: var(--white-45); }
.demo-back:hover { color: var(--color-white); }
.demo-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-options label { position: relative; cursor: pointer; }
.demo-options input { position: absolute; opacity: 0; pointer-events: none; }
.demo-options span { display: flex; align-items: center; min-height: 54px; padding: 14px; border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; transition: border-color 0.2s ease, background 0.2s ease; }
.demo-options input:checked + span { border-color: var(--color-white); background: rgba(255,255,255,0.1); color: var(--color-white); }
.demo-note { display: flex; align-items: center; gap: 18px; padding: 20px; border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; }
.demo-note > span { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--white-45); border-radius: 50%; font: 400 24px/1 var(--font-serif); }
.demo-note p { font: 400 13px/1.5 var(--font-sans); color: var(--white-75); }

/* ==========================================================================
   RESPONSIVE — tablet (<=1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Compact navigation: menu, Holdera, contact and demo. */
  .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .nav-links--left { display: none; }
  .burger { display: flex; order: -1; }
  .nav-logo { margin-right: auto; margin-left: 18px; }
  .nav-links--right { gap: 8px; }
  .nav-links--right .nav-link { padding: 0 8px; white-space: nowrap; }

  h1 { font-size: 52px; }
  h2 { font-size: 34px; }

  .stage-trust__content { flex-direction: column; align-items: flex-start; }

  .stage-outcomes__grid { grid-template-columns: 1fr; gap: 32px; }

  .agent-card { flex: 0 0 calc(50% - 12px); }

  .security-grid { grid-template-columns: repeat(2, 1fr); }
  .security-item { border-bottom: 1px solid var(--color-border-l); padding-bottom: 32px; min-height: unset; }

  .footer-cols { gap: 32px 24px; }
  .footer-brand { flex-basis: 100%; }
  .footer-col { flex: 0 0 calc(33.333% - 16px); }
}

/* Tablet outcome composition: reserve the centre for the hotel facade and
   place the decision metrics along the bottom edge of the pinned scene. */
@media (min-width: 641px) and (max-width: 1024px) {
  .stage-outcomes { align-items: stretch; }
  .stage-outcomes__grid {
    height: 100%;
    padding-top: 120px;
    padding-bottom: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    column-gap: 28px;
    row-gap: 0;
    align-items: start;
  }
  .stage-outcomes__intro { grid-column: 1 / -1; }
  .stats-list {
    grid-column: 1 / -1;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .stat-row, .stat-row:first-child {
    padding: 16px 0 0;
    border-top: 1px solid var(--color-border-l);
    border-bottom: 0;
  }
  .stat-row__metric { font-size: clamp(30px, 4.2vw, 38px); }
  .stat-row__label { font-size: 13px; }
}

/* ==========================================================================
   RESPONSIVE — mobile (<=640px)
   ========================================================================== */
@media (max-width: 640px) {
  body { font-size: 15px; }
  /* Keep the brand and primary action legible on narrow screens. */
  .nav-logo { margin-left: 4px; }
  .brand-lockup { gap: 4px; }
  .brand-lockup img { width: 22px; height: 22px; }
  .brand-lockup span { font-size: 12px; letter-spacing: 1.1px; }
  .nav-links--right { gap: 4px; }
  .nav-links--right .nav-link { display: none; }
  .nav-cta { padding-left: 12px; font-size: 12px; }
  .section { padding: 64px 0; }

  h1 { font-size: 36px; letter-spacing: -0.6px; }
  h2 { font-size: 28px; letter-spacing: -0.5px; }

  .stage-hero__row { flex-direction: row; align-items: center; gap: 12px; }
  .stage-hero__sub { font-size: 13px; max-width: 140px; }
  .scroll-hint { font-size: 12px; margin-right: 8px; }

  .stage-trust__line { font-size: 22px; line-height: 30px; letter-spacing: -0.4px; }
  /* Mobile trust block is compact on the original: one logo row on top, then the line. */
  .stage-trust { min-height: auto; justify-content: flex-start; padding: 32px 0 56px; }
  .brand-strip { position: static; order: -1; flex-wrap: nowrap; overflow: hidden; justify-content: flex-start; gap: 44px; padding: 16px var(--page-x) 48px; }
  .brand-strip img { height: 20px; flex-shrink: 0; }
  .hotel-types span { flex: 0 0 auto; font-size: 11px; }

  /* Disable the scroll-jack pin on mobile — the real site doesn't scrub the
     tour there either (its captured mobile folds show departments as a
     stacked "+"-accordion list), so stack the 4 stages in normal flow. */
  .stage-section { height: auto; }
  .stage-pin { position: relative; height: auto; overflow: visible; }
  /* Unpinned: video + scrim only back the first (hero) screen; the hotel-map
     camera and edge gradients belong to the pinned walkthrough, so they're off. */
  .pin-video, .pin-scrim { inset: 0 0 auto 0; height: 100svh; }
  .pin-map, .pin-grad { display: none; }
  .stage-outcomes { background: var(--color-sand-s); }
  .stage {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto;
  }
  .stage-hero { min-height: 100svh; }
  .stage-tour, .stage-outcomes { min-height: auto; padding: 56px 0; }

  .dept-tabs { max-width: 100%; }
  .dept-card { max-width: 100%; }

  .stat-row__num { font-size: 56px; }

  .features-head { align-items: flex-start; }
  .agent-card { flex: 0 0 85%; }

  .quote-card { padding: 28px; }
  .quote-card__text { font-size: 18px; }
  .integration-grid { grid-template-columns: 1fr; }

  .story-card { flex: 0 0 78vw; }
  .story-card__img { height: 320px; }

  .security-grid { grid-template-columns: 1fr; border-left: 0; }
  .security-item { border-right: 0; border-bottom: 1px solid var(--color-border-l); padding: 28px 0; }
  .security-item:first-child { padding-top: 0; }

  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-top h2 { font-size: 26px; }
  .footer-cols { flex-direction: column; gap: 32px; }
  .footer-col { flex: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* Mobile-only pieces are hidden on larger screens. */
.mobile-map, .dept-accordion { display: none; }

/* ==========================================================================
   MOBILE REBUILD — every value below measured on the original at 390x844
   with mobile emulation (isMobile + hasTouch), page height 9616px:
   hero 844 · trust+departments 1000 · outcomes 698 · features 2339 ·
   testimonials 844 · trusted 715 · security 1772 · footer 1404.
   ========================================================================== */
@media (max-width: 640px) {
  /* Hero: 36px/37.8 headline, 24px to the row, 32px white/12 pill. */
  .stage-hero h1 { font-size: 36px; line-height: 37.8px; letter-spacing: -0.72px; }
  .stage-hero__content { padding-bottom: 8px; }
  .stage-hero__row { margin-top: 24px; gap: 15px; flex-wrap: wrap; }
  .stage-hero__sub { font-size: 14px; line-height: 19.6px; max-width: none; }
  .stage-hero .btn-dark-pill { height: 32px; padding: 0 5px 0 16px; background: rgba(255, 255, 255, 0.12); border: 0; }
  .scroll-hint { font-size: 13px; margin: 0 var(--page-x) 52px auto; }

  /* Trust + departments section: pt 40, marquee 72 (+40), line 24/30, map 180 (mt 48). */
  .stage-trust { padding: 40px 0 0; }
  .brand-strip {
    position: static; order: -1; display: flex; flex-wrap: nowrap; justify-content: flex-start;
    width: max-content; gap: 0; padding: 0; margin: 0 0 40px; opacity: 0.5;
    animation: partner-marquee 36s linear infinite;
  }
  .brand-strip img { width: 260px; height: 24px; margin: 24px 0; object-fit: contain; flex-shrink: 0; }
  .hotel-types {
    width: auto; max-width: 100%; flex-wrap: wrap; gap: 18px 28px; padding: 0 var(--page-x);
    margin-bottom: 40px; opacity: 1; animation: none;
  }
  .hotel-types span { padding-top: 8px; font-size: 10px; }
  .stage-trust__line { font-size: 24px; line-height: 30px; letter-spacing: -0.48px; }
  .mobile-map { display: block; position: relative; height: 180px; margin: 48px var(--page-x) 0; overflow: hidden; }
  .mobile-map svg { display: block; width: 100%; height: 100%; }

  .stage-tour { display: block; padding: 56px 0 64px; }
  .tour-hud, .tour-skip { display: none; }
  .dept-accordion { display: block; list-style: none; margin: 0 var(--page-x); padding: 0; border-top: 1px solid var(--white-15); }

  /* Outcomes: white, pt 64 / pb 80, 120px to the stats, 64px numbers. */
  .stage-outcomes { background: #fff; padding: 64px 0 80px; }
  .stage-outcomes__grid { grid-template-columns: 1fr; gap: 120px; }
  .stage-outcomes__intro h2 { font-size: 28px; line-height: 30.8px; letter-spacing: -0.56px; margin-bottom: 12px; }
  .stage-outcomes__intro p { font-size: 14px; line-height: 21px; max-width: none; }
  .stats-list { gap: 20px; }
  .stat-row, .stat-row:first-child { padding: 0 0 16px; border-bottom: 1px solid rgba(188, 187, 180, 0.35); }
  .stat-row__num { font-size: 64px; letter-spacing: -1.28px; }
  .stat-row__suffix { font-size: 38px; line-height: 41.8px; letter-spacing: -0.76px; }
  .stat-row__label { font-size: 14px; line-height: 18.2px; margin-top: 4px; }

  /* Features: py 80, heading block 287 wide, cards stacked (420 image, gap 40). */
  #features { padding: 80px 0; }
  .features-head { margin-bottom: 32px; }
  .features-head__text { max-width: 287px; }
  .features-head h2 { font-size: 28px; line-height: 30.8px; letter-spacing: -0.56px; }
  .features-head__text p { font-size: 14px; line-height: 21px; max-width: 273px; }
  #features .carousel-controls { display: none; }
  .agents-carousel { overflow: visible; cursor: auto; }
  .agents-carousel__track { flex-direction: column; gap: 40px; transform: none !important; }
  .agent-card { flex: none; width: 100%; min-width: 0; }
  .agent-card__img { aspect-ratio: auto; height: 420px; }
  .agent-card p { font-size: 14px; line-height: 19.6px; }

  /* Testimonials: exactly one screen. */
  .section--quote, .quote-carousel { min-height: 0; height: 100svh; }
  .quote-carousel__inner { padding: 0 var(--page-x); }
  .quote-card { padding: 36px 20px 16px 32px; }

  /* Trusted: py 80, 28px heading, 280x360 cards, bleeding off the right edge. */
  .section--black { padding: 80px 0; }
  .stories-head { flex-wrap: nowrap; gap: 32px; margin-bottom: 32px; }
  .stories-head h2 { font-size: 28px; line-height: 30.8px; letter-spacing: -0.56px; max-width: 240px; }
  .story-carousel-mask { margin-right: calc(-1 * var(--page-x)); }
  .story-card { flex: 0 0 280px; row-gap: 16px; }
  .story-card__img { height: 360px; }

  /* Security: pt 64 / pb 40, head 273 wide, rows 360 tall. */
  #trust { padding: 64px 0 40px; }
  .security-head { max-width: 273px; margin-bottom: 40px; }
  .security-head h2 { font-size: 28px; line-height: 30.8px; letter-spacing: -0.56px; }
  .security-head p { font-size: 14px; line-height: 21px; }
  .security-grid { grid-template-columns: 1fr; border-left: 1px solid var(--color-border-l); border-top: 1px solid var(--color-border-l); }
  .security-item, .security-item:first-child {
    height: 360px; min-height: 0; padding: 24px 24px 48px; gap: 0; justify-content: space-between;
    border-right: 1px solid var(--color-border-l); border-bottom: 1px solid var(--color-border-l);
  }
  .security-item__title { font-size: 14px; line-height: 19.6px; margin-bottom: 12px; }
  .security-item__desc { font-size: 14px; line-height: 21px; }
  .security-badge { width: 90px; height: 90px; }

  /* Footer: pt 80 / pb 40, 2-column link grid (gap 40/12), 200px buildings. */
  footer { padding: 80px 0 40px; }
  .footer-top { gap: 32px; }
  .footer-top h2 { font-size: 28px; line-height: 30.8px; letter-spacing: -0.56px; }
  .footer-rule { margin: 40px 0; }
  .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 12px; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; min-width: 0; }
  .brand-lockup--footer img { width: 38px; height: 38px; }
  .brand-lockup--footer span { font-size: 20px; }
  .footer-col { min-width: 0; gap: 20px; }
  .footer-bottom { gap: 32px; margin-top: 40px; }
  .footer-bottom__left { gap: 20px; }
  .footer-buildings { max-width: 200px; }
  .footer-copy { font-size: 14px; line-height: 21px; }

  .demo-dialog__shell { padding: 48px 24px 28px; }
  .demo-dialog h2 { font-size: 30px; }
  .demo-dialog__fields, .demo-options { grid-template-columns: 1fr; }
  .demo-dialog__progress { margin-bottom: 32px; }
}
@keyframes partner-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brand-strip { animation: none; } }

/* Department accordion (mobile). Rows 70px: 20px padding, 24px serif label,
   20px plus icon; panels open via grid rows over 500ms cubic-bezier(.22,1,.36,1). */
.acc-item { border-bottom: 1px solid var(--white-15); }
.acc-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; text-align: left; }
.acc-title { font: 400 24px/1.2 var(--font-serif); letter-spacing: -0.48px; color: var(--color-white); }
.acc-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; color: #bcbbb4; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.acc-icon::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.acc-icon::after { width: 1px; height: 12px; transform: translate(-50%, -50%); }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }
.acc-clip { min-height: 0; overflow: hidden; }
.acc-body { display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; }
.acc-body p { font: 400 14px/1.45 var(--font-sans); color: #bcbbb4; }
.acc-media { width: 100%; border-radius: 6px; overflow: hidden; }
.acc-media svg { display: block; width: 100% !important; height: 100% !important; }