/* LUXOMES — Design System */
:root {
  /* Default: cool & elegant */
  --bg: oklch(0.985 0.003 110);
  --surface: oklch(0.955 0.005 110);
  --surface-2: oklch(0.92 0.006 110);
  --ink: oklch(0.22 0.012 150);
  --ink-soft: oklch(0.36 0.012 150);
  --muted: oklch(0.55 0.012 150);
  --line: oklch(0.88 0.008 110);
  --line-strong: oklch(0.78 0.01 110);
  --accent: oklch(0.48 0.045 145);   /* Sage, from logo */
  --accent-ink: oklch(0.98 0 0);
  --accent-soft: oklch(0.92 0.02 145);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --font-display: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px oklch(0 0 0 / 0.06);
  --shadow-lift: 0 20px 50px oklch(0 0 0 / 0.12);

  --page-max: 1440px;
  --pad: clamp(20px, 4vw, 80px);
}

[data-theme="dark"] {
  --bg: oklch(0.16 0.008 150);
  --surface: oklch(0.21 0.009 150);
  --surface-2: oklch(0.26 0.01 150);
  --ink: oklch(0.96 0.004 110);
  --ink-soft: oklch(0.82 0.006 110);
  --muted: oklch(0.62 0.01 110);
  --line: oklch(0.32 0.01 150);
  --line-strong: oklch(0.42 0.012 150);
  --accent: oklch(0.72 0.06 145);
  --accent-ink: oklch(0.14 0 0);
  --accent-soft: oklch(0.30 0.03 145);
}

[data-accent="terracotta"] { --accent: oklch(0.58 0.10 45); --accent-soft: oklch(0.92 0.04 45); }
[data-accent="ocean"]      { --accent: oklch(0.48 0.07 230); --accent-soft: oklch(0.92 0.03 230); }
[data-accent="sand"]       { --accent: oklch(0.62 0.05 80); --accent-soft: oklch(0.94 0.03 80); }
[data-accent="ink"]        { --accent: oklch(0.22 0.012 150); --accent-soft: oklch(0.92 0.005 150); }

[data-theme="dark"][data-accent="terracotta"] { --accent: oklch(0.72 0.12 45); }
[data-theme="dark"][data-accent="ocean"]      { --accent: oklch(0.72 0.09 230); }
[data-theme="dark"][data-accent="sand"]       { --accent: oklch(0.80 0.07 80); }
[data-theme="dark"][data-accent="ink"]        { --accent: oklch(0.88 0.005 110); }

[data-typo="editorial"] {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
}
[data-typo="modern"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", system-ui, sans-serif;
}
[data-typo="swiss"] {
  --font-display: "Instrument Serif", Georgia, serif;
  --font-sans: "Geist", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; margin: 0; color: var(--ink); }
.h-display { font-size: clamp(44px, 7vw, 108px); line-height: 0.98; letter-spacing: -0.025em; }
.h-xl      { font-size: clamp(36px, 4.4vw, 68px); letter-spacing: -0.02em; }
.h-lg      { font-size: clamp(28px, 2.6vw, 40px); }
.h-md      { font-size: clamp(22px, 1.6vw, 26px); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--accent);
}

.body-lg { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.body-md { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 600; font-size: 14px;
  border-bottom: 1px solid var(--ink);
  padding: 2px 0;
}
.btn-link:hover { color: var(--accent); border-color: var(--accent); }

.arrow { transition: transform .3s ease; }
.btn:hover .arrow, .btn-link:hover .arrow { transform: translateX(4px); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 1001;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.nav-logo {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 16px;
  color: var(--ink);
}
.nav-logo img { height: 22px; filter: none; }
[data-theme="dark"] .nav-logo img { filter: invert(1) brightness(1.5); }

.nav-links {
  display: flex; gap: 38px; align-items: center;
  font-size: 14.5px;
}
.nav-links button {
  color: var(--ink-soft);
  font-weight: 500;
  position: relative;
  padding: 8px 0;
  transition: color .2s;
}
.nav-links button:hover, .nav-links button.active { color: var(--ink); }
.nav-links button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
}
.nav-right { display: flex; align-items: center; gap: 16px; }
.lang-toggle {
  display: flex; gap: 2px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em;
}
.lang-toggle button { padding: 6px 8px; color: var(--muted); }
.lang-toggle button.active { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* Sections */
section { padding: clamp(64px, 9vw, 140px) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
.section-head-text { max-width: 640px; }
.section-head .eyebrow { margin-bottom: 18px; }

/* Image placeholders (stock-photo swaps) */
.ph {
  background: var(--surface-2);
  position: relative; overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, oklch(0 0 0 / 0.25));
  pointer-events: none;
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }

/* Tag chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Scroll-reveal helper */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* When a Reveal sits directly inside a CSS grid (used as a card-cell wrapper),
   stretch its single child to the row's full height so adjacent cards' borders
   stay continuous even when content heights differ (Benefits, Mgmt-Why, Mgmt-Modules). */
.grid > .reveal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grid > .reveal > * { flex: 1 1 auto; min-height: 0; }

/* Footer */
footer {
  background: var(--ink);
  color: oklch(0.92 0.005 110);
  padding: 96px 0 40px;
}
[data-theme="dark"] footer { background: var(--surface); }
footer h4 { color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px; }
footer a { color: oklch(0.78 0.005 110); font-size: 14.5px; }
footer a:hover { color: #fff; }

/* ────────────────────────────────────────────────────────────────────
   Floating Contact FAB — expands to phone + WhatsApp options.
   Bottom-right on every page. Hidden behind mobile drawer when open.
   ──────────────────────────────────────────────────────────────────── */
.contact-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
  border: 0;
}
.contact-fab:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--accent) 90%, black); }
.contact-fab.is-open { background: var(--ink); }
.contact-fab-options {
  position: fixed; right: 22px; bottom: 92px; z-index: 999;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
  animation: fab-fade-up .18s ease;
}
@keyframes fab-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-fab-item {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  color: var(--ink);
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  font-family: var(--font-sans);
  font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.contact-fab-item:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
.contact-fab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
}
.contact-fab-icon--wa { background: #25D366; }

/* Hide the FAB when the mobile nav drawer is open */
body:has(.nav-drawer.open) .contact-fab,
body:has(.nav-drawer.open) .contact-fab-options { display: none; }

/* ────────────────────────────────────────────────────────────────────
   Cookie consent banner
   ──────────────────────────────────────────────────────────────────── */
.consent-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 20, 20, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  animation: fab-fade-up .2s ease;
}
.consent-card {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.consent-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--ink);
}
.consent-intro {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.consent-actions {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: 8px;
}
.consent-categories {
  display: flex; flex-direction: column; gap: 14px;
  margin: 8px 0 20px;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
}
.consent-row {
  display: flex; gap: 14px; align-items: flex-start;
  cursor: pointer;
}
.consent-row-text { flex: 1; min-width: 0; }
.consent-row-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.consent-row-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.consent-row input[type="checkbox"] {
  width: 20px; height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.consent-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
.consent-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}
.consent-legal {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}
.consent-legal a { color: var(--accent); text-decoration: underline; }
.consent-legal a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .consent-card { padding: 22px 18px 18px; border-radius: 12px; }
  .consent-title { font-size: 19px; }
  .consent-actions button { flex: 1 1 auto; }
}

/* Tweaks panel */
.tweaks-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 100;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift);
}
.tweaks-panel {
  position: fixed; right: 24px; bottom: 84px; z-index: 100;
  width: 320px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 20px;
  font-size: 13px;
}
.tweaks-panel h5 { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.tweaks-row { margin-bottom: 18px; }
.tweaks-options { display: flex; gap: 6px; flex-wrap: wrap; }
.tweaks-options button {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; color: var(--ink-soft); background: var(--surface);
}
.tweaks-options button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); padding: 0; }
.swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }

/* Accordion */
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 28px 0; text-align: left; }
.acc-head span.q { font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 26px); color: var(--ink); padding-right: 20px; }
.acc-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, color .2s, transform .3s; }
.acc-item.open .acc-icon { background: var(--ink); color: var(--bg); transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.acc-body-inner { padding: 0 0 32px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; max-width: 760px; }
.acc-item.open .acc-body { max-height: 800px; }

/* Misc utility */
.divider { height: 1px; background: var(--line); width: 100%; }
.grid { display: grid; }

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — tablet & mobile
   The prototype was desktop-first; below we collapse multi-column
   grids, shrink hero typography, hide the desktop nav links and
   surface a hamburger button instead.
   ───────────────────────────────────────────────────────────────────── */

/* Tablet — 1024px and below */
@media (max-width: 1024px) {
  .nav-links { gap: 24px; font-size: 14px; }
  .nav-inner { height: 68px; }
  section { padding: clamp(48px, 7vw, 96px) 0; }
  .section-head { margin-bottom: 40px; }
}

/* Mobile — 768px and below: collapse all desktop grids to single column */
@media (max-width: 768px) {
  :root { --pad: 20px; }

  /* Hide desktop nav links, show a simple hamburger menu */
  .nav-links { display: none; }
  .nav-mobile-toggle { display: inline-flex !important; }
  .nav-inner { height: 60px; }
  .nav-logo img { height: 18px; }
  .nav-right .btn { padding: 10px 14px; font-size: 13px; }
  .lang-toggle { display: none; }

  /* Typography compress */
  .h-display { font-size: clamp(36px, 9vw, 56px); }
  .h-xl      { font-size: clamp(28px, 7vw, 40px); }
  .h-lg      { font-size: clamp(22px, 5vw, 28px); }
  .h-md      { font-size: clamp(18px, 4.5vw, 22px); }
  .body-lg   { font-size: 16px; }
  .body-md   { font-size: 14.5px; }

  /* Sections collapse 2-col / 3-col / 4-col grids to single column */
  .container > .grid[style*="repeat(4"],
  .container > .grid[style*="repeat(3"],
  .container > .grid[style*="repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  /* Inline-style grids in pages (cards, fee sections, gallery) */
  section [style*="gridTemplateColumns"],
  section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Section heads stack neatly */
  .section-head { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* Hero offset/badge cards: drop the negative positioning that overflows on mobile */
  section [style*="position: absolute"][style*="top: -"],
  section [style*="position: absolute"][style*="bottom: -"],
  section [style*="position: absolute"][style*="left: -"],
  section [style*="position: absolute"][style*="right: -"] {
    position: static !important;
    margin-top: 16px;
    width: auto !important;
    max-width: none !important;
  }

  /* Footer 4-column grid → stacked */
  footer > .container > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 40px !important;
  }
  footer > .container > div:last-child {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  /* Buttons full-width inside hero CTAs */
  section .btn-primary, section .btn-ghost { width: auto; }

  /* Reduce huge negative margins on inline styles */
  .tweaks-panel { width: calc(100vw - 32px); right: 16px; bottom: 76px; }
}

/* Hamburger toggle visible only at mobile breakpoint */
.nav-mobile-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; }
.nav-mobile-toggle:hover { background: var(--surface); }

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 60px 0 0 0; z-index: 1000;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 32px var(--pad);
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.nav-drawer button, .nav-drawer a {
  text-align: left; padding: 14px 4px;
  font-family: var(--font-display); font-size: 22px;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.nav-drawer .drawer-sub {
  padding-left: 18px; font-size: 16px; font-family: var(--font-sans); color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.nav-drawer .drawer-section-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  padding: 16px 4px 6px; border: 0;
}
.nav-drawer-cta { margin-top: 24px; }

/* ────────────────────────────────────────────────────────────────────
   Hostaway booking widget container — keep it scoped so internal
   popovers (date picker, location dropdown) stay below the nav and
   don't escape the hero box on narrow desktops.
   ──────────────────────────────────────────────────────────────────── */
.hero-booking-widget {
  isolation: isolate;
  overflow: visible;
  min-width: 0;
}
.hero-booking-widget #hostaway-booking-widget,
.hero-booking-widget #hostaway-booking-widget > * {
  max-width: 100%;
  box-sizing: border-box;
}
/* Hide the widget when the mobile drawer is open — the Hostaway script
   uses portal-style popovers in a different stacking context that
   would otherwise leak above the nav drawer. */
body:has(.nav-drawer.open) .hero-booking-widget {
  visibility: hidden;
}
/* Prevent body scroll when the mobile drawer is open. */
body:has(.nav-drawer.open) {
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────────────────
   Hostaway calendar popover — mobile fix.
   The script renders .hsbw-calendar with position:absolute; top:0
   inside its trigger container, which means on mobile (where the
   trigger sits high on the page) the calendar overflows above the
   viewport AND scrolls away with the page. We override it to behave
   like a centered modal on small screens, with internal scrolling so
   the month navigation is always reachable.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Backdrop behind the modal */
  .hsbw-container:has(> .hsbw-calendar)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    pointer-events: none;
  }
  .hsbw-calendar {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 9999 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25) !important;
    padding: 16px !important;
    box-sizing: border-box;
  }
  /* Make sure the month navigation buttons are always tappable */
  .hsbw-calendar-nav { position: sticky; top: 0; background: #fff; z-index: 2; padding: 4px 0; }
  /* Lock body scroll only while a calendar popover is open */
  body:has(.hsbw-calendar) { overflow: hidden; }
}

/* ────────────────────────────────────────────────────────────────────
   MANAGEMENT PAGE — rebuilt 2026-05-16
   Process circle, tier matrix, live calculator, lead form.
   ──────────────────────────────────────────────────────────────────── */

/* Hero: 2-column on desktop, stacked on mobile */
.mgmt-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) {
  .mgmt-hero { grid-template-columns: 1fr; gap: 56px; }
}

.mgmt-why-grid { gap: 1px; }
@media (max-width: 760px) {
  .mgmt-why-grid { grid-template-columns: 1fr !important; }
}

/* Process circle: side-by-side on desktop, stacked on mobile */
.mgmt-process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mgmt-process-detail { padding: 24px 0; }
@media (max-width: 900px) {
  .mgmt-process-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Tier cards: 3 columns on desktop, stack on mobile */
.mgmt-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  align-items: stretch;
}
/* Stretch Reveal wrappers so all three cards have the same height */
.mgmt-tier-grid > * { display: flex; height: 100%; }
.mgmt-tier-grid > * > .mgmt-tier-card { width: 100%; }
@media (max-width: 980px) {
  .mgmt-tier-grid { grid-template-columns: 1fr; gap: 28px; }
}
.mgmt-tier-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px oklch(0 0 0 / 0.1); }
.mgmt-tier-card.active:hover { transform: translateY(-6px); }

/* Matrix: feature × tier table */
.mgmt-matrix {
  border: 1px solid var(--line);
  background: var(--surface);
}
.mgmt-matrix-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  background: var(--bg);
  border-bottom: 1px solid var(--line-strong);
}
.mgmt-matrix-cell {
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  border-right: 1px solid var(--line);
}
.mgmt-matrix-cell:last-child { border-right: none; }
.mgmt-matrix-feature-head, .mgmt-matrix-feature {
  justify-content: flex-start;
}
.mgmt-matrix-tier-head { flex-direction: column; gap: 4px; text-align: center; }
.mgmt-matrix-tier-head.active { background: var(--accent-soft); }
.mgmt-matrix-section-head {
  padding: 14px 20px 10px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mgmt-matrix-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.mgmt-matrix-row:last-child { border-bottom: none; }
.mgmt-matrix-row:hover { background: var(--bg); }
.mgmt-matrix-check.active { background: oklch(from var(--accent) l c h / 0.06); }

@media (max-width: 760px) {
  .mgmt-matrix-cell { padding: 12px 10px; font-size: 12.5px; }
  .mgmt-matrix-tier-head { padding: 12px 6px; }
  .mgmt-matrix-section-head { padding: 12px 16px; }
}

/* Live calculator */
.mgmt-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.mgmt-calc-controls {
  padding: 40px;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 4px;
}
.mgmt-calc-output {
  padding: 40px;
  background: oklch(1 0 0 / 0.06);
  border: 1px solid oklch(1 0 0 / 0.15);
  border-radius: 4px;
}
@media (max-width: 900px) {
  .mgmt-calc-grid { grid-template-columns: 1fr; gap: 32px; }
  .mgmt-calc-controls, .mgmt-calc-output { padding: 28px; }
}

/* Slider styling */
.mgmt-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: oklch(1 0 0 / 0.15);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.mgmt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.3);
  transition: transform .15s;
}
.mgmt-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.mgmt-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.3);
}

/* Lead form */
.mgmt-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .mgmt-lead-grid { grid-template-columns: 1fr; gap: 40px; }
}
.form-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.form-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .2s;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
}
.form-input::placeholder { color: var(--muted); opacity: 0.6; }
select.form-input { cursor: pointer; }

/* Modules grid mobile */
@media (max-width: 760px) {
  .mgmt-modules-grid { grid-template-columns: 1fr !important; }
}

/* Btn ghost variant (for hero secondary CTA) */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* Management lead estimate box — shows the live heuristic estimate */
.mgmt-estimate-box {
  padding: 28px;
  background: var(--ink);
  color: oklch(0.95 0.005 110);
  border-radius: 4px;
  animation: mgmtEstimateAppear .5s cubic-bezier(.65,.05,.36,1);
}
.mgmt-estimate-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.mgmt-estimate-value {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  margin-bottom: 14px;
  color: #fff;
}
.mgmt-estimate-meta {
  font-size: 13px;
  color: oklch(0.78 0 0);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid oklch(1 0 0 / 0.12);
}
.mgmt-estimate-hint {
  font-size: 12px;
  color: oklch(0.7 0 0);
  line-height: 1.55;
}
@keyframes mgmtEstimateAppear {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────────────────────
   MOBILE FIXES (audit 2026-05) — targeted overrides
   These come AFTER the global @media(max-width:768px) rules above to
   selectively re-enable horizontal layouts where stacking creates
   worse UX (matrices, timelines, side-by-side comparisons) and to
   adjust fixed pixel sizes that don't fit a 375px viewport.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Management feature matrix: keep table layout, scroll horizontally.
     The matrix has 4 columns of dense data that becomes unreadable when stacked. */
  .mgmt-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--pad) * -1);
    padding: 0 var(--pad);
  }
  .mgmt-matrix-scroll .mgmt-matrix {
    min-width: 640px;
  }

  /* Real Estate BuildPhases: hide horizontal progress bar when grid stacks vertically.
     The 6 phase markers stack 1-col via the global rule, but the absolute progress
     line above would otherwise float orphaned. */
  .re-build-progress-track,
  .re-build-progress-fill {
    display: none;
  }
  /* Phase buttons: add left accent border so the timeline still reads as ordered */
  .re-build-timeline > div[style*="gridTemplateColumns"] {
    border-left: 2px solid var(--line);
    padding-left: 18px;
    gap: 20px !important;
  }

  /* Real Estate Process: same — hide horizontal connector line when 4 steps stack */
  .re-process-connector { display: none; }

  /* Real Estate locations: 4 tall portrait cards in a single column is too much
     vertical scroll. 2x2 reads better. */
  .re-locations-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Blog tripleStage: keep 3 columns (this is a before/during/after comparison;
     stacking destroys the comparison). Override the section-wide stacking rule. */
  section .blog-triple-stage[style*="gridTemplateColumns"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  /* Location detail page — hero gallery: drop the fixed-height grid rows so
     stacked tiles don't all become 240px-tall full-width slabs. */
  section .loc-hero-gallery[style*="gridTemplateColumns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
  }
  section .loc-hero-gallery > div[style*="gridRow"] {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
    aspect-ratio: 4 / 3;
  }
  section .loc-hero-gallery > div {
    aspect-ratio: 4 / 3;
  }

  /* Common-areas mosaic: same problem */
  section .loc-common-mosaic[style*="gridTemplateColumns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
  }
  section .loc-common-mosaic > div[style*="gridRow"] {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
    aspect-ratio: 4 / 3;
  }
  section .loc-common-mosaic > div {
    aspect-ratio: 4 / 3;
  }

  /* Spec grid: 4 stacked rows looks like a bulleted list; 2x2 reads as specs. */
  section .loc-spec-grid[style*="gridTemplateColumns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Disable sticky positioning on aside columns at mobile — saves viewport
     and stops the sticky from overlapping the stacked content beneath it. */
  .mobile-static-aside {
    position: static !important;
    top: auto !important;
  }
}