/* =============================================================
   NAMOU V2 — CRITIQUE-REMEDIATED PASS
   DM Sans body + display, Instrument Serif italic accent (one per page),
   #00B073 brand accent on white, #003D2E structural anchor.
   ============================================================= */

:root {
  --bg: #FDFDFD;
  --bg-alt: #F5F5F5;
  --bg-deep: #003D2E;
  --ink: #121212;
  --ink-muted: #555555;
  --ink-soft: #737373;
  --line: rgba(0, 0, 0, 0.08);
  --rule: #E2E2E2;
  --accent: #00B073;
  --accent-deep: #003D2E;
  --accent-hover: #009963;
  --mint: #3FE6A8;
  --accent-subtle: rgba(0, 176, 115, 0.08);
  --wa: #25D366;
  /* Device-mockup chrome — declared once so JV phones, WhatsApp mockup,
     laptop frames, and broker deck tiles all pull from the same shades. */
  --device-shell: #0a0a0a;
  --device-bezel-1: #1a1a1a;
  --device-bezel-2: #2c2c2c;
  --device-island: oklch(6% 0.005 160);
  --device-screen: oklch(8% 0.005 160);
  --device-laptop-shell-from: #1c1c1c;
  --device-laptop-shell-to: #0f0f0f;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-size: 16px; }

body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
  font-feature-settings: "ss01", "ss02";
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--grain);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

main, section { position: relative; z-index: 2; }
section { overflow-x: clip; }

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

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

.font-display { font-family: "DM Sans", -apple-system, sans-serif; font-weight: 500; letter-spacing: -0.02em; }
.font-serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Title case for every heading */
h1, h2, h3, h4 { text-transform: capitalize; }

/* =====================================================
   NAV — floating glass pill
   ===================================================== */
.nav {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  transform: none;
  z-index: 1000;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.nav__logo {
  position: absolute;
  top: 0;
  left: clamp(24px, 3vw, 56px);
  min-width: 168px;
  min-height: 64px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 61, 46, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0, 61, 46, 0.55);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 61, 46, 0.24);
  pointer-events: auto;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav__logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(0, 61, 46, 0.28);
}
.nav__logo img { height: 48px; width: auto; }
.logo-dark { display: none; }

.nav__links {
  position: absolute;
  /* Smaller than the .nav__logo pill (64px) — sits 8px lower so the
     two pills don't have the same vertical centre, and shrinks the
     padding + gap so it occupies noticeably less space on the hero
     image than the brand pill on the left. */
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  gap: 22px;
  background: rgba(0, 61, 46, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0, 61, 46, 0.55);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 61, 46, 0.24);
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  pointer-events: auto;
}

.nav__links a {
  position: relative;
  color: #ffffff;
  opacity: 0.9;
  transition: opacity 0.2s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a[aria-current="page"] { opacity: 1; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu a[aria-current="page"] { color: var(--accent); }
.nav__links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav__toggle span {
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}

/* Mobile-only logo pill — hidden at all viewports by default. The
   `@media (max-width: 768px)` block below flips it on for mobile.
   Placed BEFORE the media-query block so the mobile rule wins via
   source order at ≤768px (both rules have specificity 0,1,0). */
.mobile-home-pill { display: none; }

@media (max-width: 768px) {
  /* Mobile: shrink the nav pill to a compact burger-only button
     pinned to the top-left, so the sticky header stops eating into
     the hero/major-section content. The Namou logo is hidden on
     mobile (it stays in the desktop nav and in the mobile-menu
     drawer's open state, both unchanged); the visible nav pill is
     now a ~52×52 forest-green ring around the burger toggle. The
     toggle keeps its 44×44 tap target — the pill is just a 4-px
     ring of brand colour around it. DOM order, aria-controls, and
     the open/close JS for `#mobileMenu` are preserved. */
  .nav {
    top: 16px;
  }
  .nav__logo {
    left: 16px;
    min-width: 136px;
    min-height: 54px;
    padding: 0 20px;
  }
  .nav .nav__logo img { height: 38px; }
  .nav__links { display: none; }
  .nav__toggle {
    position: absolute;
    top: 0;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 0;
    background: rgba(0, 61, 46, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(0, 61, 46, 0.55);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 61, 46, 0.24);
    pointer-events: auto;
  }

  /* Mobile-only logo pill anchored to the top-right, balancing the
     compact burger pill on the top-left. Provides a clear visible
     way to return to the homepage from any v3 subpage when the
     normal `.nav__logo` is hidden on mobile. Same pill aesthetic
     as the burger nav (forest-green, rounded, 1px hairline border,
     soft brand shadow) and matches its ~52px height so the two
     pills read as a paired set. */
  .mobile-home-pill { display: none !important; }
}

/* =====================================================
   HERO — cinematic center with full-bleed backdrop
   ===================================================== */
.hero {
  --hero-copy-top: clamp(92px, 7vw, 128px);
  --hero-bg-y: 78%;
  --hero-inline-pad: clamp(20px, 3vw, 32px);
  --hero-copy-max: min(100%, 1180px);
  display: grid;
  grid-template-rows: var(--hero-copy-top) auto minmax(0, 1fr) auto;
  align-items: start;
  justify-items: center;
  text-align: center;
  padding: 0 var(--hero-inline-pad);
  min-height: 100svh;
  position: relative;
  overflow: clip;
  /* Single full-bleed masterplan sketch as the hero background. The
     prior `radial-gradient(ellipse 82% 62% at 50% 36%, rgba(253,253,
     253,0.88) → 0.22)` legibility halo on top of this PNG was reading
     as a "blurry shadow" behind the headline / CTA cluster — removed
     per CEO direction. The sketch is mostly light/cream itself, so
     dark `var(--ink)` headline text remains readable directly on the
     PNG. `center 78%` keeps the densest cluster of property renders
     in the lower band of the hero, well below the CTA row. */
  background-image: url("/assets/images/Homepage-hero.png");
  background-size: cover;
  background-position: center var(--hero-bg-y);
  background-repeat: no-repeat;
}

.hero__inner {
  position: relative;
  z-index: 2;
  grid-row: 2;
  max-width: var(--hero-copy-max);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero__title {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 100%;
  text-wrap: balance;
}

/* Mobile-only <br> inside hero title (between "Real estate" and "done right") */
.hero__title .br-mobile { display: block; }

/* Mobile: center hero title vertically in the space between nav and subtitle */
@media (max-width: 1023px) {
  .hero {
    --hero-copy-top: clamp(86px, 22vw, 116px);
    padding: 0 24px;
    min-height: 100svh;
  }
  .hero__inner {
    gap: 28px;
    width: 100%;
  }
  .hero__title {
    margin: 0;
  }
  .hero__marquee {
    margin-top: 32px;
  }
}

/* Mobile-only homepage hero background swap. Phones (≤768 px) use a
   portrait-cropped variant of the hero illustration; desktop/tablet
   keep the landscape variant set in the base `.hero` rule above.
   Filename has spaces and commas → URL-encoded as %20 and %2C. */
@media (max-width: 768px) {
  .hero {
    background-image: url("/assets/images/Homepage-hero-mob.png");
  }
}

/* Desktop-only: lock hero title lines to single line (no wrap) */
@media (min-width: 1024px) {
  .hero { --hero-copy-top: clamp(104px, 7vw, 132px); padding: 0 var(--hero-inline-pad); }
  .hero__title .nowrap-lg { white-space: nowrap; }
  .hero__title { font-size: clamp(3rem, 5vw, 4.75rem); }
  .hero__title .br-mobile { display: none; }
  .section__lede.nowrap-lg-lede {
    max-width: none;
    white-space: nowrap;
  }
}

/* Zoom / compact-laptop safety net. Browser zoom effectively reduces
   available layout space: text grows visually while the background
   remains a cropped cover image. These rules let the headline wrap,
   reduce its cap, and shift the image focal point upward before the
   hero starts colliding with the marquee or skyline. */
@media (min-width: 1024px) and (max-width: 1360px),
       (min-width: 1024px) and (max-height: 820px) {
  .hero {
    --hero-copy-top: clamp(96px, 10vh, 118px);
    --hero-bg-y: 70%;
    --hero-copy-max: min(92vw, 1060px);
    --hero-inline-pad: clamp(24px, 4vw, 52px);
  }
  .hero__inner {
    gap: clamp(14px, 2.2vh, 22px);
  }
  .hero__title {
    font-size: clamp(2.5rem, 4.6vw, 4rem);
    line-height: 1.03;
    letter-spacing: -0.035em;
  }
  .hero__title .nowrap-lg {
    white-space: normal;
  }
  .hero__subtitle {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.55;
    max-width: min(82vw, 760px);
  }
  .hero__actions .btn {
    padding-block: 14px;
  }
  .hero__marquee .marquee__item {
    font-size: clamp(1rem, 1.7vw, 1.45rem);
  }
}

@media (min-width: 1024px) and (max-width: 1180px),
       (min-width: 1024px) and (max-height: 700px) {
  .hero {
    --hero-copy-top: clamp(84px, 9vh, 104px);
    --hero-bg-y: 64%;
    --hero-copy-max: min(88vw, 920px);
  }
  .hero__title {
    font-size: clamp(2.25rem, 4.1vw, 3.35rem);
  }
  .hero__subtitle {
    max-width: min(78vw, 680px);
  }
}

.hero__title .serif {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
}

.hero__inline-img {
  display: inline-block;
  width: clamp(90px, 10vw, 160px);
  height: clamp(40px, 4.5vw, 72px);
  border-radius: 999px;
  background-image: url("https://images.unsplash.com/photo-1590579491624-f98f36d4c763?w=600&h=300&fit=crop");
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  margin: 0 0.15em;
  position: relative;
  top: -0.1em;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.hero__subtitle {
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink-muted);
  max-width: 640px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Marquee sitting inside the hero frame — bleeds to viewport edges */
.hero .hero__marquee {
  position: relative;
  z-index: 2;
  grid-row: 4;
  align-self: end;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  padding: 10px 0;
  background: rgba(253, 253, 253, 0.82);
}
.hero__marquee .marquee__item {
  font-size: clamp(1rem, 2vw, 1.75rem);
  gap: 36px;
}
.hero__marquee .marquee__item::after {
  width: 5px;
  height: 5px;
}
.hero__marquee .marquee__track {
  gap: 36px;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.btn[hidden] { display: none; }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 61, 46, 0.2);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.btn--wa {
  background: var(--wa);
  color: #fff;
}
.btn--wa:hover {
  background: #1ebe57;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.3);
}

.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* =====================================================
   SECTION SHELL
   ===================================================== */
.section {
  padding: 120px 24px;
}
@media (min-width: 1024px) {
  .section { padding: 180px 48px; }
}

.section__inner {
  max-width: 1480px;
  margin: 0 auto;
  text-align: center;
}

.section__title {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 900px;
  text-wrap: balance;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  text-align: center;
}
.section__title .serif {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
}

.section__lede {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-muted);
  max-width: 580px;
  line-height: 1.7;
  margin: 0 auto 64px;
  text-align: center;
}

/* =====================================================
   BENTO — Why RAK (gapless grid-flow-dense)
   ===================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 12px;
}

.bento__cell {
  position: relative;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  text-align: center;
}
.bento__cell:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.bento__cell--wide { grid-column: span 2; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell--hero { grid-column: span 2; grid-row: span 2; }

.bento__cell--dark {
  background: var(--bg-alt);
  color: var(--ink);
  border-color: var(--line);
}

.bento__cell--image {
  background-size: cover;
  background-position: center;
  color: #fff;
}
.bento__cell--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
}
.bento__cell--image > * { position: relative; z-index: 1; }

.bento__label {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bento__heading {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.bento__body {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
}
.bento__cell--image .bento__body { color: rgba(255, 255, 255, 0.8); }

.bento__icon .material-symbols-outlined {
  font-size: 32px;
  color: var(--accent);
}

.bento__stat {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}
.bento__stat-label {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .bento__cell--hero { grid-column: span 2; }
  .bento__cell--wide { grid-column: span 2; }
  .bento__cell--tall { grid-row: span 1; }
}

/* Desktop-only: swap the first bento hero card background to the local Al Marjan render */
@media (min-width: 1024px) {
  .bento__cell--hero.bento__cell--image {
    background-image: url("/assets/illustrations/Diplomatic_hero.webp") !important;
  }
}
@media (max-width: 500px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--hero, .bento__cell--wide { grid-column: span 1; }
}

/* =====================================================
   LANES — audience cards with inline pill images
   ===================================================== */
.section--lanes {
  background-image: url("/assets/images/Audience-Path-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Lanes default to a translucent dark card so the section backdrop
   (Audience-Path-bg.png) reads through, with white type and a ghost
   button. On hover the card flips to a translucent light card,
   ink-on-light copy, and an accent-deep ghost. The lift + shadow
   animation from the global .lane rule is preserved. */
.section--lanes .lane {
  background: rgba(18, 18, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  padding: 20%;
  min-height: 0;
  gap: 20px;
  justify-content: space-between;
}
.section--lanes .lanes {
  align-items: stretch;
  justify-items: stretch;
  grid-auto-columns: 1fr;
}
.section--lanes .lane__eyebrow {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  color: #ffffff;
}
.section--lanes .lane__heading {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  color: var(--mint);
}
.section--lanes .lane__body {
  font-size: 15px;
  max-width: 300px;
  color: rgba(255, 255, 255, 0.78);
}
.section--lanes .lane .btn--ghost {
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
  background: transparent;
}
/* Hover — invert to a white card with dark ink */
.section--lanes .lane:hover {
  background: rgba(245, 245, 245, 0.96);
  border-color: var(--rule);
  color: var(--ink);
}
.section--lanes .lane:hover .lane__eyebrow { color: var(--ink); }
.section--lanes .lane:hover .lane__heading { color: var(--accent-deep); }
.section--lanes .lane:hover .lane__body { color: var(--ink-muted); }
.section--lanes .lane:hover .btn--ghost {
  border-color: var(--rule);
  color: var(--ink);
  background: transparent;
}
.section--lanes .lane:hover .btn--ghost:hover {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
.section--lanes {
  padding-bottom: 120px;
}
.section--lanes .section__inner {
  position: relative;
}
.section--lanes .lanes {
  margin-top: 80px;
  gap: 40px;
}
@media (min-width: 768px) {
  .section--lanes .section__inner {
    display: grid;
    /* Single-column outer grid so the title and the lanes both span
       the full inner width — gives the new four-card lane row room
       to breathe. The previous `1fr 1fr 1fr` outer grid was sized for
       three cards spanning two of the three columns; with four cards
       in the same 2-of-3 span, each lane was too narrow. */
    grid-template-columns: 1fr;
    row-gap: 80px;
    max-width: none;
  }
  .section--lanes .section__title {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    white-space: nowrap;
    margin: 24px 0 0 0;
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
    text-align: center;
  }
  .section--lanes .lanes {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    gap: 16px;
  }
  .section--lanes .lane {
    padding: 12%;
  }
  .section--lanes .lane__eyebrow {
    white-space: nowrap;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
  }
  .section--lanes .lane__heading {
    font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  }
  .section--lanes .lane__body {
    font-size: 12px;
    max-width: 100%;
  }
}

.lanes {
  display: grid;
  /* Bumped from repeat(3, 1fr) → repeat(4, 1fr) for the new four-card
     audience row (Buyers / Landowners / Investors / Brokers). */
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.lane {
  padding: 48px 32px;
  border-radius: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 380px;
  text-align: center;
  align-items: center;
  justify-content: space-between;
}
.lane:hover {
  transform: translateY(-6px);
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.03);
}
.lane:hover .lane__body { color: rgba(255, 255, 255, 0.75); }
.lane:hover .lane__sub { color: rgba(255, 255, 255, 0.9); }
.lane:hover .btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.lane:hover .btn--ghost:hover { background: #fff; color: var(--ink); }

/* Primary title — "For Buyers" / "For Landowners" / "For Investors" */
.lane__eyebrow {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: none;
  transition: color 0.4s var(--ease);
}
.lane:hover .lane__eyebrow { color: var(--bg); }

/* Supporting heading — descriptive action phrase */
.lane__heading {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-top: -8px;
}

.lane__body {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  transition: color 0.4s var(--ease);
  max-width: 280px;
}

@media (max-width: 900px) {
  .lanes { grid-template-columns: 1fr; }
  .lane { min-height: auto; }
}

/* Mobile asset swap for the audience-router section background.
   Swaps the desktop `Audience-Path-bg.png` for the mobile-cropped
   `Audience-path-mobile.png` at 768px and below — matches the
   project's existing `(max-width: 768px)` mobile breakpoint used in
   site.css. Desktop styling above is untouched. */
@media (max-width: 768px) {
  .section--lanes {
    background-image: url("/assets/images/Audience-path-mobile.png");
  }
}

/* =====================================================
   PINNED REVEAL — video call section with scrubbing text
   ===================================================== */
.reveal {
  padding: 100px 24px;
  background: var(--ink);
  color: var(--bg);
}

.reveal__inner {
  width: 75vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
  text-align: left;
}

.reveal__left {
  display: flex;
  flex-direction: column;
  gap: 48px;
  height: 100%;
}
/* Title hugs the top of the column (= top of upper tablet); CTA pushed
   to the bottom (= bottom of lower tablet) so the column visually frames
   the diagonal pair. Same anchor pattern is applied to call-showcase. */
.reveal__cta {
  margin-top: auto;
  align-self: flex-start;
}

.reveal__text {
  position: relative;
}

.reveal__eyebrow {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
}

.reveal__title {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.reveal__title .serif { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }

.reveal__lede {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 420px;
}

.reveal__steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.reveal__step {
  display: flex;
  gap: 24px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
}

.reveal__step-num {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  min-width: 60px;
}

.reveal__step h4 {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.reveal__step p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.reveal__showcase {
  margin: 0;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal__showcase .call-frame {
  width: 100%;
  max-width: 720px;
}

.reveal__showcase figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -36px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

@media (max-width: 900px) {
  .reveal { padding: 100px 24px; }
  .reveal__inner { grid-template-columns: 1fr; gap: 48px; }
  .reveal__text { position: static; }
  .reveal__showcase { margin-top: 0; }
}

/* =====================================================
   MARQUEE — infinite scrolling trust strip
   ===================================================== */
.marquee {
  padding: 32px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Edge fade — premium ticker; replaces hard cut-off at viewport edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee__track {
  display: flex;
  gap: 72px;
  animation: marqueeScroll 40s linear infinite;
  white-space: nowrap;
  width: max-content;
  /* Pause-on-hover affordance — accessibility + premium "let me read this" */
  transition: animation-duration 0.4s var(--ease);
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 72px;
}
.marquee__item::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =====================================================
   FAQ — editorial accordion
   ===================================================== */
.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  text-align: left;
  max-width: 960px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 32px 0;
  position: relative;
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
  padding-right: 60px;
  transition: color 0.3s var(--ease);
}
.faq__item summary:hover { color: var(--accent); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}
.faq__item[open] summary::after {
  content: "–";
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-50%) rotate(180deg);
}

.faq__body {
  padding: 0 60px 32px 0;
  max-width: 720px;
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.7;
}
.faq__body p { margin-bottom: 12px; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__source {
  font-size: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.faq__source a { color: var(--accent); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.3s var(--ease); }
.faq__source a:hover { text-decoration-color: var(--accent); }

/* =====================================================
   CTA FINAL — massive footer action
   ===================================================== */
.cta-final {
  padding: 140px 24px;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0, 176, 115, 0.15), transparent 70%);
  pointer-events: none;
}

.cta-final__title {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 1000px;
  margin: 0 auto 32px;
  position: relative;
}
.cta-final__title .serif { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }

.cta-final__sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 480px;
  margin: 0 auto 48px;
  line-height: 1.6;
  position: relative;
}

.cta-final__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.cta-final .btn--primary { background: var(--bg); color: var(--ink); }
.cta-final .btn--primary:hover { background: var(--accent); color: #fff; }

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  padding: 40px 24px 24px;
  border-top: 1px solid var(--line);
}
.footer__inner {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer__brand p { font-size: 14px; color: var(--ink-muted); max-width: 280px; margin-top: 12px; line-height: 1.6; }
.footer__col h4 {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.footer__col a,
.footer__col span {
  display: block;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
  transition: color 0.2s var(--ease);
}
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  max-width: 1480px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* =====================================================
   FLOATING WA
   ===================================================== */
.wa-float {
  position: fixed;
  /* Lifted from 24px → 96px so the float sits above the hero
     marquee strip on first view instead of overlapping it. On
     scrolled views the higher offset reads as intentional clearance
     above the page footer rather than a thumb-collision risk. */
  bottom: 96px;
  right: 28px;
  z-index: 999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wa);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: transform 0.3s var(--ease);
}
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* =====================================================
   MOTION — initial hidden state for GSAP
   ===================================================== */
/* Jakub enter recipe: opacity + translateY(8px) + blur(4px), 0.45s ease-out-quart.
   Materializing effect — feels physical, not theatrical. Movement caps at 8px so
   reveals don't read as "this section was elsewhere a moment ago." */
.motion-fade { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.motion-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease),
    filter 0.45s var(--ease);
}

/* Reveal scrub: 0.45 baseline reads as "draft / pending highlight" rather than
   "broken first paint" before scroll reaches the section. */
.scrub-word { opacity: 0.45; transition: opacity 0.3s var(--ease); }
.scrub-word.active { opacity: 1; }

/* Mobile menu overlay — translateY + opacity; per-link stagger via nth-child */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu a {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.2s var(--ease);
}
.mobile-menu.is-open a { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open a:nth-child(1) { transition-delay: 80ms; }
.mobile-menu.is-open a:nth-child(2) { transition-delay: 130ms; }
.mobile-menu.is-open a:nth-child(3) { transition-delay: 180ms; }
.mobile-menu.is-open a:nth-child(4) { transition-delay: 230ms; }
.mobile-menu a:hover { color: var(--accent); }


/* =====================================================
   DARK MODE — form controls and native dropdowns
   ===================================================== */

/* Native select option popup — force theme-aware colors
   (required because <option> elements render via OS layer
   and ignore most CSS rules on some browsers) */
select {
  color-scheme: light;
  color: var(--ink);
}
select option {
  background: var(--bg);
  color: var(--ink);
}

/* Filter bar — ensure placeholder/display value is legible in both themes */
.filter select {
  color: var(--ink-muted);
}
.filter select:focus,
.filter select:hover {
  color: var(--ink);
}
.filter__label {
  color: var(--ink);
}

/* Filter dropdown arrow — adapt to theme */
.filter__body::after {
  border-top-color: var(--ink-muted);
}

/* Text inputs (any future forms) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea {
  background: var(--bg-alt);
  color: var(--ink);
  border-color: var(--line);
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

/* Featured property card details */
.card__detail {
  color: var(--ink-muted);
}
.card__area,
.card__price {
  color: var(--ink);
}

/* Filters empty-state */
.empty {
  color: var(--ink-muted);
}

/* =============================================================
   CRITIQUE-REMEDIATION OVERRIDES (P0 / P1 / P2)
   Loaded last so they trump earlier rules without rewriting them.
   ============================================================= */

/* Footer + accent panels carry --accent-deep (color drift away from "deep green only in nav"). */
.footer { background: var(--accent-deep); color: #fff; }
.footer,
.footer a,
.footer span,
.footer p,
.footer h4,
.footer__brand p,
.footer__col a,
.footer__col span,
.footer__col h4,
.footer__bottom,
.footer__bottom span,
.footer__bottom a { color: #fff; opacity: 1; }
.footer a { transition: opacity 200ms var(--ease); }
.footer a:hover { opacity: 0.7; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* Primary button — single accent, decisive focus, AA-safe ink.
   White on #00B073 measures 2.82:1 (sub-AA); --accent-deep on #00B073
   measures 8.7:1 (AAA). Keeps the brand-green pill without losing legibility. */
.btn--primary {
  background: var(--accent);
  color: var(--accent-deep);
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0, 61, 46, 0.08);
  transition:
    background-color 200ms var(--ease),
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
  border: none;
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 61, 46, 0.18), 0 1px 2px rgba(0, 61, 46, 0.08);
}
.btn--primary:active { transform: translateY(0); }
.btn--primary:focus-visible,
.btn--ghost:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}
.btn--primary svg { transition: transform 200ms var(--ease); }
.btn--primary:hover svg { transform: translateX(2px); }
.btn--primary svg path { stroke: var(--accent-deep); }

/* Italic-serif rationing — one .serif span per page. Subsequent .serif spans
   inside the same major heading lose the italic-serif treatment; HTML is also
   pruned to a single span per page, this is a defense in depth. */
.serif,
.font-serif,
.reveal__title .serif,
.cta-final__title .serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Remove the gradient overlay on the bento hero photo (P2: gradient as decoration). */
.bento__cell--hero.bento__cell--image::after { display: none; }

/* CTA final — kill the radial-gradient halo, let the deep-green panel speak. */
.cta-final {
  background: var(--accent-deep);
  color: #fff;
}
.cta-final::before { display: none; }
.cta-final .btn--primary { background: var(--accent); color: var(--accent-deep); }
.cta-final .btn--primary:hover { background: var(--accent-hover); color: var(--accent-deep); }
.cta-final .btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.92);
}

/* Filter bar — focus state, validation visual, chips, recovery state. */
.filter select {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 10px 36px 10px 16px;
  background: var(--bg);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.filter select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.filter select:hover { border-color: var(--ink-muted); }
.filter--invalid select { border-color: #C8392F; }
.filter__error {
  color: #C8392F;
  font-size: 0.8125rem;
  margin-top: 6px;
  display: none;
}
.filter--invalid .filter__error { display: block; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
  align-items: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  background: var(--accent-subtle);
  color: var(--accent-deep);
  border: 1px solid rgba(0, 176, 115, 0.18);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.filter-chip__close {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-deep);
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  transition: background-color 150ms var(--ease);
}
.filter-chip__close:hover { background: rgba(0, 61, 46, 0.12); }
.filter-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
}
.filter-clear:hover { color: var(--ink); }

/* Empty state with recovery — displayed when no plots match filters. */
.empty {
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--rule);
  border-radius: 16px;
  background: var(--bg-alt);
}
.empty__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
.empty__hint { color: var(--ink-muted); margin-bottom: 20px; }
.empty__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font: inherit;
  transition: background-color 200ms var(--ease);
}
.empty__action:hover { background: oklch(22% 0.04 160); }
.empty__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* figcaption — left-aligned beneath the frame, never floating. */
.call-frame figcaption,
.call-showcase figcaption {
  margin-top: 12px;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
}

/* Leader card — replace the "NS" initials box with a quiet portrait surface. */
.leader__avatar {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  background-image: url("/assets/images/nadim-salameh.jpeg");
  background-size: cover;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
}
/* Fallback when portrait is missing — quieter than the previous bold "NS". */
.leader__avatar:not([data-has-photo="true"]) {
  text-indent: 0;
  background-image: none;
  display: grid;
  place-items: center;
}

/* Leader CTA pair — phone (secondary) next to the primary video-call CTA. */
.leader__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.leader__ctas .btn--phone {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.leader__ctas .btn--phone .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
.leader__ctas .btn--phone:hover { border-color: var(--accent); color: var(--accent); }

/* Footer + nav logo — preserve aspect ratio when only height is constrained.
   Without width: auto, the explicit width="330" attribute on the <img>
   stretches the logo flat against any height: 32px override. */
.footer .logo-light,
.footer__brand img,
.nav__logo img {
  width: auto;
  height: 32px;
}
.nav__logo img { height: 48px; }

/* USD secondary price on Buy plot cards. */
.card__price-usd {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-weight: 400;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Body copy — never monospace, even where local rules try to set it. */
p, li, dd, dt, blockquote, figcaption, label, input, textarea, select, button {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Tabular numerals for stats and monetary figures. */
.stat__number, .card__price, .card__sqft, .filter-chip {
  font-variant-numeric: tabular-nums;
}

/* Frame caption — drop ALL CAPS body styling reported by the detector. */
.call-frame figcaption {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}

/* Ensure footer "Back to v1" sub-links never reappear if reintroduced. */
.footer__bottom a[href*="Back to v1" i],
.footer__bottom a:where([data-legacy]) {
  display: none;
}


/* Count label above grid */
.count {
  color: var(--ink-muted);
}

/* =============================================================
   PAGE-SPECIFIC COMPONENTS (migrated from per-page <style> blocks)

   Rules unique to one page that don't conflict across pages live here so
   they cache between page navigations. Page-scoped rules with conflicts
   (.tree, .benefits, .tag — different per page) stay inline.
   ============================================================= */

/* Buy: filter bar + grid + cards
   ----------------------------------- */
.filters {
  display: flex;
  align-items: stretch;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px;
  max-width: 1320px;
  margin: 0 auto 48px;
}
.filter {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
  position: relative;
}
.filter:last-child { border-right: none; }
.filter .material-symbols-outlined { font-size: 20px; color: var(--ink-muted); flex-shrink: 0; }
.filter__body { display: flex; flex-direction: column; flex: 1; min-width: 0; position: relative; }
.filter__label {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.filter select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 2px 16px 0 0;
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  width: 100%;
  outline: none;
}
.filter select:focus { color: var(--ink); }
.filter__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 12px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--ink-muted);
  pointer-events: none;
}
.grid { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 16px; }
.card {
  flex: 0 0 300px;
  max-width: 320px;
  padding: 24px;
  border-radius: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card__price {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.card__cat {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-deep);
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card__area {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.card__detail { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
.card__detail .material-symbols-outlined { font-size: 14px; }
.card__cta {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-deep);
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.2s var(--ease);
}
.card__cta:hover { background: var(--accent-hover); }

/* Buy: "live on the call" showcase (laptop frames)
   ----------------------------------- */
.call-showcase {
  background: var(--ink);
  color: var(--bg);
  padding: 112px 88px;
  margin-bottom: 80px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 80px;
  box-sizing: border-box;
}
/* Same anchor pattern as the home Reveal section: title hugs the top
   (= top of the upper laptop frame on the right), CTA pushes to the
   bottom (= bottom of the lower laptop frame). */
.call-showcase__copy {
  flex: 1 1 480px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
}
.call-showcase__frames { flex: 1 1 480px; max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.call-showcase__copy .eyebrow {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
}
.call-showcase__copy h2 {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}
.call-showcase__copy h2 .serif { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }
.call-showcase__copy p {
  font-size: clamp(17px, 1.3vw, 22px);
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 620px;
}
.call-showcase__list { list-style: none; padding: 0; margin: 0 0 48px; }
.call-showcase__list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: clamp(16px, 1.15vw, 19px);
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}
.call-showcase__list li .material-symbols-outlined {
  font-size: clamp(22px, 1.6vw, 28px);
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.call-showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 36px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 17px);
  transition: transform 0.3s var(--ease);
  margin-top: auto;
  align-self: flex-start;
}
.call-showcase__cta:hover { transform: translateY(-2px); background: var(--accent); color: var(--accent-deep); }
.call-showcase__cta svg { width: 20px; height: 20px; fill: currentColor; transition: transform 200ms var(--ease); }
.call-showcase__cta:hover svg { transform: translateX(2px); }
.call-frame {
  position: relative;
  padding: 14px;
  background: linear-gradient(180deg, var(--device-laptop-shell-from) 0%, var(--device-laptop-shell-to) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px 20px 8px 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.call-frame::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.call-frame__screen { border-radius: 8px; overflow: hidden; background: var(--device-screen); }
.call-frame__screen img { width: 100%; height: auto; display: block; }
.call-frame__cap {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 1024px) { .call-showcase { padding: 80px 56px; gap: 60px; } }
@media (max-width: 900px) {
  .call-showcase { padding: 56px 32px; gap: 48px; }
  .filters { flex-direction: column; border-radius: 24px; }
  .filter { border-right: none; border-bottom: 1px solid var(--line); }
  .filter:last-child { border-bottom: none; }
}

/* (Removed: orphaned .jv-phones / .jv-phone* / .jv-card* rules.
   The JV strategy section was rebuilt from iPhone mockups to laptop
   frames in commit 061b7a2 — this CSS no longer matches any markup.) */

/* Brokers: deck-tour grid
   ----------------------------------- */
.deck-tour {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
  margin: 48px auto 0;
  max-width: 1480px;
}
.deck-tile {
  flex: 0 1 calc(33.333% - 20px);
}
.deck-tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-alt);
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.deck-tile:hover { transform: translateY(-4px); border-color: var(--accent); }
.deck-tile__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--device-screen);
  overflow: hidden;
}
.deck-tile__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.deck-tile__num {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.deck-tile__body { padding: 20px 22px 22px; }
.deck-tile__head {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.deck-tile__body p { font-size: 13px; color: var(--ink-muted); line-height: 1.55; }
.deck-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 24px;
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.7;
}
@media (max-width: 1024px) { .deck-tour { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .deck-tour { grid-template-columns: 1fr; } }

/* =============================================================
   Reduced-motion preference — pause marquee, scrub, fades, parallax.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; transform: none; }
  .scrub-word { opacity: 1 !important; }
  .motion-fade { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* =============================================================
   Buy page state animations — chips, empty state, validation, plot grid.
   Replaces the previous instant `hidden`/`display` toggles with
   fade + 4px lift + light blur over 200-220ms.
   ============================================================= */
.filter-chips,
.filter__error,
.empty {
  opacity: 0;
  transform: translateY(4px);
  filter: blur(2px);
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    filter 0.22s var(--ease);
  pointer-events: none;
}
.filter-chips.is-visible,
.filter__error.is-visible,
.empty.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
.filter-chips:not(.is-visible),
.filter__error:not(.is-visible),
.empty:not(.is-visible) { display: none; }
.filter-chips.is-mounting,
.filter__error.is-mounting,
.empty.is-mounting { display: flex; }
.empty.is-mounting,
.empty.is-visible { display: block; }
.filter-chips.is-mounting,
.filter-chips.is-visible { display: flex; }

/* Plot card stagger on enter (filtered re-render) */
.card.card--enter {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
}
.card.card--in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.32s var(--ease),
    transform 0.32s var(--ease),
    filter 0.32s var(--ease);
}

/* =============================================================
   View Transitions API — cross-page navigation continuity.
   Modern browsers cross-fade the page on same-origin nav; nav pill
   keeps its position via view-transition-name. Gracefully degrades
   on unsupported browsers (full reload as before).
   ============================================================= */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav-pill; }
.footer { view-transition-name: footer-panel; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================================
   Scroll-progress indicator — 1px line at the very top of the
   viewport. Uses scroll-driven animation timeline where supported,
   no-ops elsewhere. Restraint-first: 1px tall, --mint colored.
   ============================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--mint);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1001;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scrollProgress linear;
    animation-timeline: scroll(root);
  }
  @keyframes scrollProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* Stat count-up — set --count via JS; CSS animates the @property numeric */
@property --stat-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

/* =============================================================
   Intent modal — intercepts generic "Schedule a video call" CTAs.
   User picks Buy / Sell / Invest / Broker; each option opens
   WhatsApp with a tailored pre-filled message. Plot-card CTAs
   bypass the modal because they already carry plot context.
   ============================================================= */
.intent-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
  pointer-events: none;
}
.intent-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.intent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 22, 0.62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.intent-modal__panel {
  position: relative;
  background: var(--accent-deep);
  color: #ffffff;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.32s var(--ease);
}
.intent-modal[aria-hidden="false"] .intent-modal__panel {
  transform: translateY(0) scale(1);
}
.intent-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color 200ms var(--ease);
}
.intent-modal__close:hover { background: rgba(255, 255, 255, 0.18); }
.intent-modal__close:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.intent-modal__title {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: #ffffff;
  padding-right: 32px;
}
.intent-modal__sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0 0 24px;
}
.intent-modal__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.intent-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.92);
  font-family: "DM Sans", -apple-system, sans-serif;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 200ms var(--ease),
    background-color 200ms var(--ease),
    transform 200ms var(--ease);
}
.intent-option:hover {
  border-color: var(--mint);
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-2px);
}
.intent-option:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
.intent-option__label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.intent-option__desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.45;
}
@media (max-width: 560px) {
  .intent-modal__options { grid-template-columns: 1fr; }
}

/* =============================================================
   Mobile sticky contact bar — replaces the floating WhatsApp
   bubble on small screens with a 3-action bar (WhatsApp, Call,
   Email). Mobile users are 1-tap away from any contact path.
   ============================================================= */
.mobile-contact-bar { display: none; }
@media (max-width: 768px) {
  .mobile-contact-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--accent-deep);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  }
  .mobile-contact-bar a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: "DM Sans", -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background-color 200ms var(--ease);
    min-height: 44px;
  }
  .mobile-contact-bar a:hover { background: rgba(255, 255, 255, 0.14); }
  .mobile-contact-bar a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
  .mobile-contact-bar a.is-primary {
    background: var(--accent);
    color: var(--accent-deep);
    border-color: transparent;
    font-weight: 600;
  }
  .mobile-contact-bar a.is-primary:hover { background: var(--accent-hover); }
  .mobile-contact-bar svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
  }
  /* Hide the floating WA bubble on mobile — bar replaces it */
  .wa-float { display: none !important; }
  /* Reserve bottom padding so the bar doesn't cover the footer */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* =============================================================
   PAGE-SPECIFIC: LANDOWNER (/landowner/)
   Migrated from inline <style> on the Sell page so styles cache
   between page navigations. Selectors are scoped under .process-grid
   and .section--leader so they don't leak to other pages that have
   different .tree / .compare / .stat needs.
   ============================================================= */

/* Process grid (How it works | Two ways to list) — full-width bleed */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 clamp(24px, 4vw, 80px);
  box-sizing: border-box;
}
.process-grid__col {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.process-grid__title {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  min-height: 2.2em;
}

/* Sell-scoped tree (vertical, compact) */
.process-grid .tree {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 14px;
  flex: 1;
}
.process-grid .tree__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-alt);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.process-grid .tree__step:hover {
  transform: translateY(-4px);
  border-color: var(--mint);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}
.process-grid .tree__num {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--mint);
  line-height: 1;
  letter-spacing: -0.03em;
}
.process-grid .tree__head {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.process-grid .tree__body {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Sell-scoped compare table — sized for the right column */
.process-grid .compare {
  width: 100%;
  flex: 1;
  border-collapse: collapse;
  background: var(--bg-alt);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.process-grid .compare th,
.process-grid .compare td {
  padding: 18px 20px;
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
.process-grid .compare th {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  color: var(--ink-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.process-grid .compare td:first-child {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  width: 34%;
}
.process-grid .compare .cell-non { color: var(--ink-muted); }
.process-grid .compare .cell-exc { color: var(--ink); font-weight: 500; }
.process-grid .compare tr:last-child th,
.process-grid .compare tr:last-child td { border-bottom: none; }

/* Section--leader (deep-green panel: Nadim + USP grid) */
.section--leader {
  background: var(--accent-deep);
  color: #ffffff;
  width: 100vw;
  margin: 96px calc(50% - 50vw) 0;
  padding: 96px 24px 72px;
  box-sizing: border-box;
}
.leader-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto;
}
.leader-grid__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
}
.leader-grid__title {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  min-height: 2.2em;
  text-align: center;
  margin: 0;
}
.section--leader .leader {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  width: 100%;
  max-width: 560px;
  min-height: 312px;
  box-sizing: border-box;
}
.section--leader img.leader__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-alt);
  background-image: none;
  border: 2px solid rgba(255, 255, 255, 0.18);
  text-indent: 0;
}
.section--leader .leader__name {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.section--leader .leader__role {
  font-size: 13px;
  color: var(--mint);
  margin: 4px 0 8px;
  font-weight: 500;
}
.section--leader .leader__bio {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}
.section--leader .leader .btn--phone {
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}
.section--leader .leader .btn--phone:hover {
  border-color: var(--mint);
  color: var(--mint);
}

/* USP cards on the deep-green panel */
.section--leader .stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 0;
  width: 100%;
  max-width: 560px;
}
.section--leader .stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 150px;
  padding: 24px;
  border-radius: 20px;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.section--leader .stat:hover {
  border-color: var(--mint);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.section--leader .stat__num {
  color: #ffffff;
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: clamp(1.125rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.section--leader .stat__lbl {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; gap: 56px; }
  .process-grid .compare { font-size: 13px; }
  .process-grid .compare th,
  .process-grid .compare td { padding: 14px 16px; font-size: 14px; }
  .leader-grid { grid-template-columns: 1fr; gap: 56px; }
  .section--leader .leader { flex-direction: column; text-align: center; gap: 20px; padding: 28px; }
}
@media (max-width: 500px) {
  .process-grid .tree__step { grid-template-columns: 1fr; gap: 8px; }
}