:root {
  --bg-dark: #07090e;
  --bg-card: rgba(14, 20, 31, 0.85);
  --bg-sheet: #0b101b;
  --color-cyan: #00f0ff;
  --color-amber: #ff9e00;
  --color-blue: #3b82f6;
  --border-line: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(0, 240, 255, 0.4);
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #7b8a9e;
  --font-main: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', monospace;
  --safe-bottom: env(safe-area-inset-bottom, 16px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-main);
  overflow-x: clip; /* Important: do not use overflow: hidden which breaks position: sticky */
  overflow-y: visible;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 1. Editorial Navigation */
.editorial-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.92) 0%, rgba(7, 9, 14, 0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Drop the expensive fixed-bar backdrop blur while the page is moving
   (scroll or hero glide) — it recomposites the whole viewport every frame.
   Restored 150ms after motion stops. No display-dimension change. */
body.scrolling .editorial-nav,
body.scrolling .floating-cta-wrap {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.brand-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.brand-sep {
  color: var(--color-cyan);
  font-weight: 300;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.nav-cta-btn {
  background: transparent;
  border: 1px solid var(--border-line);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-cta-btn:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 240, 255, 0.08);
}

/* 2. Video Scrubbing Track (300vh height gives smooth scrubbing) */
.scrub-container {
  position: relative;
  height: 300vh;
  width: 100%;
}

.scrub-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080c14;
}

#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}


.video-overlay-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(7, 9, 14, 0.25) 0%, rgba(7, 9, 14, 0.8) 100%);
  z-index: 2;
  pointer-events: none;
}

/* 3. Progress-Locked Hero Stages */
.hero-stage {
  position: relative;
  z-index: 10;
  max-width: 800px;
  width: 100%;
  height: 100%;          /* fill the sticky viewport so % tops on the
                            absolute stage cards resolve against it — a
                            0-height containing block silently zeroed them */
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}

.stage-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 48px);
  max-width: 680px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.stage-card.active {
  pointer-events: auto;
}

.stage-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(3, 6, 12, 0.9), 0 0 18px rgba(3, 6, 12, 0.6);
}

.stage-headline {
  font-size: clamp(2.2rem, 6.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 16px;
  /* dark halo lifts the copy off the machine's lit face (any background) */
  text-shadow:
    0 1px 2px rgba(3, 6, 12, 0.9),
    0 2px 14px rgba(3, 6, 12, 0.65),
    0 0 30px rgba(3, 6, 12, 0.5);
}

.stage-subhead {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  color: #e6edf5; /* brighter than --text-muted: keeps contrast over the image */
  font-weight: 500;
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 24px auto;
  text-shadow:
    0 1px 2px rgba(3, 6, 12, 0.9),
    0 2px 12px rgba(3, 6, 12, 0.7),
    0 0 26px rgba(3, 6, 12, 0.5);
}

.scroll-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--color-cyan) 0%, transparent 100%);
  animation: scroll-pulse 2s infinite ease-in-out;
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

.scroll-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: #cbd5e1; /* brighter than --text-dim */
  text-shadow: 0 1px 2px rgba(3, 6, 12, 0.9), 0 0 16px rgba(3, 6, 12, 0.6);
}

.hero-actions-row {
  display: flex;
  justify-content: center;
}

.stage-action-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-amber);
  color: #07090e;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(255, 158, 0, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stage-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 45px rgba(255, 158, 0, 0.55);
}

.editorial-section {
  position: relative;
  z-index: 20;
  background: var(--bg-dark);
  padding: 90px 24px;
  border-top: 1px solid var(--border-line);
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.section-container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-cyan);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #fff;
  max-width: 800px;
  margin-bottom: 48px;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.grid-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.grid-card:hover {
  border-color: rgba(0, 240, 255, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 240, 255, 0.07);
  border: 1px solid rgba(0, 240, 255, 0.18);
  color: var(--color-cyan);
  margin-bottom: 22px;
  transition: background 0.25s, transform 0.25s;
}

.card-icon svg { width: 24px; height: 24px; }

.grid-card:hover .card-icon {
  background: rgba(0, 240, 255, 0.14);
  transform: scale(1.05);
}

.card-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.card-body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* 5. Sticky Floating Consultation Bar */
.floating-cta-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(7, 9, 14, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-line);
  padding: 12px 24px calc(12px + var(--safe-bottom)) 24px;
}

.floating-cta-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cta-info {
  display: flex;
  flex-direction: column;
}

.cta-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.cta-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.floating-book-btn {
  padding: 11px 22px;
  background: var(--color-amber);
  border: none;
  border-radius: 9999px;
  color: #07090e;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 158, 0, 0.3);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.floating-book-btn:active {
  transform: scale(0.97);
}

/* 6. Floating Real-Time Chat Trigger */
.floating-chat-bubble {
  position: fixed;
  right: 20px;
  bottom: calc(75px + var(--safe-bottom));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #151d2d;
  border: 1px solid var(--border-focus);
  color: var(--color-cyan);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 95;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s, background 0.2s;
}

.floating-chat-bubble:hover {
  transform: translateY(-2px);
  background: #1c273d;
}

.chat-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--color-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-cyan);
}

/* 7. Real-Time Chat Drawer */
.chat-drawer {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom));
  right: 20px;
  width: calc(100vw - 40px);
  max-width: 380px;
  height: 460px;
  max-height: 70vh;
  background: var(--bg-sheet);
  border: 1px solid var(--border-focus);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.96);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.chat-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.chat-drawer-header {
  padding: 14px 16px;
  background: rgba(18, 26, 42, 0.95);
  border-bottom: 1px solid var(--border-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-header-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.chat-header-status {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}

.chat-close-icon {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
}

.chat-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #080c14;
}

.chat-entry {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}

.chat-entry.bot {
  align-self: flex-start;
}

.chat-entry.user {
  align-self: flex-end;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.chat-entry.bot .chat-bubble {
  background: #141b2b;
  border: 1px solid var(--border-line);
  color: var(--text-main);
  border-bottom-left-radius: 4px;
}

.chat-entry.user .chat-bubble {
  background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
  color: #07090e;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}

.chat-time {
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-top: 3px;
  padding: 0 4px;
}

/* Markdown rendering inside bot bubbles */
.chat-bubble strong { font-weight: 700; color: inherit; }
.chat-entry.bot .chat-bubble strong { color: #fff; }
.chat-bubble em { font-style: italic; }
.chat-bubble code {
  font-family: var(--font-mono);
  font-size: 0.78em;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}
.chat-bubble .chat-list {
  margin: 4px 0 2px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-bubble .chat-list li { line-height: 1.4; }
.chat-bubble .chat-list li::marker { color: var(--color-cyan); }

.chat-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.quick-chip {
  text-align: left;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--color-cyan);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.quick-chip:hover {
  background: rgba(0, 240, 255, 0.15);
}

.chat-drawer-footer {
  padding: 10px 12px;
  background: var(--bg-sheet);
  border-top: 1px solid var(--border-line);
  display: flex;
  gap: 8px;
}

#chatInput {
  flex: 1;
  background: #141c2c;
  border: 1px solid var(--border-line);
  border-radius: 9999px;
  padding: 9px 14px;
  font-size: 0.82rem;
  color: #fff;
  outline: none;
}

#chatInput:focus {
  border-color: var(--color-cyan);
}

.chat-submit-btn {
  width: 36px;
  height: 36px;
  background: var(--color-cyan);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #07090e;
  cursor: pointer;
}

/* 8. Booking Modal Bottom Sheet */
.booking-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 12, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.booking-dialog-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.booking-sheet {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg-sheet);
  border-top: 1px solid var(--border-focus);
  border-radius: 20px 20px 0 0;
  padding: 24px 24px calc(24px + var(--safe-bottom)) 24px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-dialog-backdrop.open .booking-sheet {
  transform: translateY(0);
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.sheet-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.sheet-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sheet-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.6rem;
  cursor: pointer;
}

.sheet-field {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.service-toggles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.toggle-option {
  background: #141c2c;
  border: 1px solid var(--border-line);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-option input {
  display: none;
}

.toggle-option.active {
  border-color: var(--color-cyan);
  color: #fff;
  background: rgba(0, 240, 255, 0.1);
}

.date-toggles {
  display: flex;
  gap: 8px;
}

.date-btn {
  flex: 1;
  padding: 10px 8px;
  background: #141c2c;
  border: 1px solid var(--border-line);
  border-radius: 8px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.date-btn span {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: normal;
}

.date-btn.active {
  border-color: var(--color-cyan);
  background: rgba(0, 240, 255, 0.12);
}

.date-btn.active span {
  color: var(--color-cyan);
}

.text-input {
  width: 100%;
  background: #141c2c;
  border: 1px solid var(--border-line);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 8px;
  outline: none;
}

.text-input:focus {
  border-color: var(--color-cyan);
}

.submit-consult-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-amber);
  border: none;
  border-radius: 9999px;
  color: #07090e;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 158, 0, 0.3);
  margin-top: 6px;
}

/* Toast */
.toast-popup {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-40px);
  background: #141c2c;
  border: 1px solid var(--color-cyan);
  color: #fff;
  padding: 10px 22px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.3);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  max-width: 92vw;
  text-align: center;
}

/* =========================================================================
   Language toggle (EN/ES) — used on landing nav + checkout header
   ========================================================================= */
/* flex-shrink: 0 is load-bearing, not tidying. This toggle is an inline-flex
   item inside a flex row (the landing nav, and the Square badge on the
   checkout header), so by default it is a shrinkable item: when the row runs
   out of room the browser squeezes the toggle narrower than its own two
   buttons and the overflow:hidden below quietly amputates the second one.
   Measured on checkout.html in Chromium at 390x844 DPR3, where i18n.js has
   swapped to the short "EN"/"ES" labels: the toggle's content wanted 72px but
   it was allotted a 53px content box, so the ES button ran from x=313.7 to
   x=348.4 while the container ended at x=330 — 18 of its 22 painted pixels
   were cut off, and document.elementFromPoint at the button's own bounding-box
   centre (331.1, 238) returned DIV.square-badge, not the button. A
   Spanish-speaking homeowner tapping "ES" on a phone hit the badge behind it
   and nothing happened; only a ~4px sliver at the left edge was live. At 360px
   the allotment fell to 44px and 28px were lost. Refusing to shrink costs the
   row nothing at any width we render (measured: the landing nav's toggle is
   68px of content in a 68px box from 320px up to 1440px, so this changes no
   pixel there) and makes the amputation structurally impossible rather than
   a function of how much room the neighbours happened to leave. */
.lang-toggle {
  display: inline-flex;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-toggle button {
  appearance: none;
  background: transparent;
  color: #94a3b8;
  border: none;
  font: 600 12px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.lang-toggle button:hover {
  color: #e2e8f0;
}
.lang-toggle button.active {
  background: #38bdf8;
  color: #07090e;
}
.nav-lang {
  margin-right: 14px;
  align-self: center;
  /* Same reasoning as .lang-toggle above: .nav-lang is the flex item the nav
     row actually measures, and the toggle inside it can only keep its width if
     this wrapper keeps its own. Both carry the declaration because the two
     pages mount the toggle differently — index.html puts these classes on one
     element, checkout.html has no .nav-lang at all. */
  flex-shrink: 0;
}
/* =========================================================================
   Responsive: tablets down. The scrub hero, nav and overlays reflow for
   portrait phones instead of cramming the desktop layout into 390px.
   ========================================================================= */
@media (max-width: 720px) {
  /* Nav: compact single row — AURAS | EN/ES | CTA */
  .editorial-nav { padding: 10px 12px; }
  .nav-inner { gap: 8px; }
  .brand-sub { display: none; }
  .brand-title { font-size: 1.05rem; letter-spacing: 1.5px; }
  .brand-sep { display: none; }
  .nav-lang { margin-right: 0; }
  .lang-toggle button { padding: 5px 9px; font-size: 11px; }
  .nav-cta-btn { padding: 7px 12px; font-size: 0.75rem; }

  /* Hero: scale typography/overlays to portrait without overflowing */
  .hero-stage { padding: 0 12px; }
  .stage-card { width: calc(100% - 24px); }
  .stage-eyebrow { font-size: 0.68rem; letter-spacing: 1.5px; margin-bottom: 8px; }
  .stage-headline { font-size: clamp(1.8rem, 8vw, 2.6rem); margin-bottom: 12px; }
  .stage-subhead { font-size: 0.86rem; line-height: 1.45; max-width: 94%; margin-bottom: 16px; }
  .scroll-indicator { margin-top: 8px; }
  .scroll-line { height: 24px; }
  .scroll-text { font-size: 0.66rem; }
  .stage-action-btn { padding: 12px 22px; font-size: 0.85rem; }

  /* Kill expensive backdrop blur repaint while scrolling on mobile GPUs */
  .editorial-nav,
  .floating-cta-wrap,
  .booking-dialog-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .editorial-nav { background: linear-gradient(180deg, rgba(7, 9, 14, 0.97) 0%, rgba(7, 9, 14, 0) 100%); }
  .floating-cta-wrap { background: rgba(7, 9, 14, 0.97); padding: 10px 14px calc(10px + var(--safe-bottom)) 14px; }
  .floating-cta-content { gap: 10px; }
  .cta-label { font-size: 0.8rem; }
  .cta-sub { font-size: 0.66rem; }
  .floating-book-btn { padding: 10px 16px; font-size: 0.78rem; }

  /* Chat dialogs: edge-to-edge on phones */
  .chat-drawer {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    height: min(480px, 70dvh);
    bottom: calc(70px + var(--safe-bottom));
  }
  .floating-chat-bubble { right: 12px; bottom: calc(66px + var(--safe-bottom)); }
  .booking-sheet { padding: 18px 16px calc(18px + var(--safe-bottom)) 16px; }
  .service-toggles { gap: 6px; }
  .toggle-option { font-size: 0.7rem; padding: 9px 4px; }
  .date-btn { font-size: 0.72rem; padding: 8px 4px; }

  .toast-popup {
    white-space: normal;
    width: max-content;
    max-width: 88vw;
  }
  .editorial-section { padding: 64px 16px; }
  .section-title { margin-bottom: 32px; }
  .grid-card { padding: 26px 20px; }
}

/* Very small phones: shrink the chat bubble to keep the row clean */
@media (max-width: 400px) {
  .floating-chat-bubble { width: 44px; height: 44px; }
}

/* Short landscape phones: keep stage overlays clear of nav + CTA bar */
@media (max-height: 520px) and (orientation: landscape) {
  .stage-eyebrow { display: none; }
  .stage-subhead { display: none; }
  .scroll-indicator { display: none; }
  .stage-headline { font-size: clamp(1.5rem, 5.5vw, 2.4rem); }
}

/* Mobile typography stays compact; the scrub frame is content-framed on
   portrait (app.js) and plain cover elsewhere. */
@media (max-width: 720px) {
  .scroll-text { font-size: 0.64rem; }
}

/* Portrait phones: SPLIT the copy so the AC animation shows through the
   middle. The card fills the (full-height) hero-stage and becomes a flex
   column; eyebrow + headline pin to the top, and `margin-top:auto` on the
   subhead pushes it + the cue/CTA to the bottom. The JS translate(-50%,-50%)
   centering is preserved (it just centers a viewport-sized box), so desktop
   is untouched. */
@media (max-width: 720px) and (orientation: portrait) {
  .stage-card {
    width: 100%;
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: calc(78px + env(safe-area-inset-top, 0px)) 20px calc(106px + var(--safe-bottom)) 20px;
  }
  .stage-subhead { margin-top: auto; margin-bottom: 14px; }
}


/* ============ Ambient WebGPU effects (public/gpu-fx.js via vgpu) ============
   Five canvases: the "What we do" backdrop, one per service card, and the
   footer aurora. Each host element carries a CSS-animated gradient fallback
   underneath; the engine adds .glow-on to the host once its canvas is live,
   which retires the fallback so the two never composite together. */
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.fx-canvas.glow-live { opacity: 1; }

/* Fallback layer, animated so browsers without WebGPU still get motion.
   Bound to the hosts directly rather than a utility class so the markup does
   not have to repeat it on all five elements. */
.editorial-section::before,
.grid-card::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 28% 68%, rgba(0, 240, 255, 0.16), transparent 62%),
    radial-gradient(42% 48% at 72% 82%, rgba(59, 130, 246, 0.18), transparent 66%);
  animation: fx-drift 19s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.glow-on::before { display: none; }

@keyframes fx-drift {
  from { transform: translate3d(-4%, 2%, 0) scale(1.04); opacity: 0.75; }
  to   { transform: translate3d(5%, -3%, 0) scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-section::before,
  .grid-card::before,
  .site-footer::before { animation: none; }
}

/* --- "What we do" section --- */
.editorial-section { overflow: hidden; isolation: isolate; }
.editorial-section > .section-container { position: relative; z-index: 1; }

/* --- Service cards: canvas sits above the card fill, below the copy --- */
.grid-card { position: relative; overflow: hidden; isolation: isolate; }
.grid-card > :not(canvas) { position: relative; z-index: 1; }

/* --- Footer --- */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--border-line);
  background: var(--bg-dark);
  min-height: 340px;
}
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 20px calc(120px + var(--safe-bottom));
  text-align: center;
}
.footer-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-tag {
  margin: 14px auto 0;
  max-width: 480px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.footer-legal {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
@media (min-width: 721px) {
  .site-footer { min-height: 400px; }
  .footer-inner { padding: 72px 32px calc(140px + var(--safe-bottom)); text-align: left; }
  .footer-brand { justify-content: flex-start; }
  .footer-tag { margin-left: 0; }
}

/* Mobile: the footer is the last thing on the page, so its copy belongs at the
   BOTTOM of the band, not floating in the middle of it. The band keeps its
   min-height (the aurora needs the room), the content is pushed down to sit
   just above the fixed consultation bar (which wraps to ~90px on narrow
   phones) instead of leaving ~90px of dead space under the legal line. */
@media (max-width: 720px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .footer-inner {
    width: 100%;
    padding: 40px 20px calc(108px + var(--safe-bottom));
  }
}