/* ════════════════════════════════════════════════════════════════════════
   LUXURY PROPTECH HERO — override stylesheet
   Loaded after styles.css. Affects only .hero and its descendants.
   Palette: white + soft gray + navy + muted gold (subtle only).
   Typography: Inter sans-serif throughout the hero. No Playfair, no italic.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── NAV — always-solid slim navy header, centered links ───────────────── */
.nav {
  background: #071B34;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  padding-left: 16px;
  padding-right: 32px;
}
.nav.scrolled { background: #071B34; box-shadow: 0 2px 24px rgba(0,0,0,0.32); }

.nav__inner {
  height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.nav__logo { gap: 4px; margin-left: 8px; }
.logo-mark { height: 60px; }
.logo-mark--sm { height: 50px; }
.nav__logo-name { font-size: 1rem; color: #FFFFFF; }
.nav__logo-sub  { font-size: 0.625rem; letter-spacing: 0.26em; color: #FFFFFF; }
.nav__logo-meta { font-size: 0.5rem; letter-spacing: 0.30em; margin-top: 3px; color: #FFFFFF; }

.nav__links {
  justify-self: center;
  gap: 44px;
}
.nav__links a:not(.nav__cta-link) {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.86);
}

/* CTA button — gold, dark text, subtle hover glow */
.nav__cta-link {
  padding: 10px 22px !important;
  box-shadow: 0 2px 10px rgba(198,161,91,0.18);
  transition: background var(--t), box-shadow var(--t), transform var(--t) !important;
}
.nav__cta-link:hover {
  box-shadow: 0 6px 22px rgba(198,161,91,0.42);
  transform: translateY(-1px);
}

/* Mobile: collapse to logo + hamburger, hide grid 2nd column */
@media (max-width: 768px) {
  .nav__inner { grid-template-columns: auto 1fr auto; height: 64px; }
  .nav__links { top: 64px; justify-self: stretch; }
  .logo-mark { height: 52px; }
  .nav__logo-name { font-size: 0.9375rem; }
}

/* ─── HERO CONTAINER ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  overflow: hidden;
}
.hero__bg-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 720px at 82% 18%, rgba(11,31,51,0.045), transparent 70%),
    radial-gradient(circle 540px at 8% 92%,  rgba(11,31,51,0.030), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
}
.hero::after { content: none; }

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px 32px 100px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 480px);
  gap: 80px;
  align-items: center;
}
.hero__content, .hero-showcase { min-width: 0; }

/* ─── LEFT COLUMN ────────────────────────────────────────────────────────── */
.eyebrow--hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(11,31,51,0.10);
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 28px;
  box-shadow: 0 1px 2px rgba(11,31,51,0.04);
}
.eyebrow--hero .eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,161,91,0.22);
}

.hero__headline {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--navy);
  margin-bottom: 24px;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.hero__headline em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}
.hero__line-1 {
  color: var(--navy);
  font-weight: 700;
  font-family: var(--sans);
}
/* Gold gradient accent — slightly larger and visually dominant */
.hero__headline .hero-accent {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 1.08em;
  letter-spacing: -0.03em;
  line-height: 1.0;
  background: linear-gradient(135deg, #B58844 0%, #D4B26A 45%, #C6A15B 75%, #A87C3A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__sub {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 460px;
  margin-bottom: 36px;
  font-weight: 400;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* ─── TRUST INDICATORS ───────────────────────────────────────────────────── */
.hero__trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__trust-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__trust-stack {
  display: flex;
  align-items: center;
}
.hero__trust-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
  box-shadow: 0 1px 3px rgba(11,31,51,0.10);
}
.hero__trust-avatar:first-child { margin-left: 0; }
.hero__trust-avatar:nth-child(1) { background: linear-gradient(135deg, #DDE3EC, #B7C0CD); }
.hero__trust-avatar:nth-child(2) { background: linear-gradient(135deg, #C8D0DC, #9AA5B5); }
.hero__trust-avatar:nth-child(3) { background: linear-gradient(135deg, #E5E0D2, #C0B695); }
.hero__trust-avatar:nth-child(4) { background: linear-gradient(135deg, #C9D1DC, #8E99AD); }
.hero__trust-row p {
  font-size: 0.8125rem;
  color: var(--text-mid);
  font-weight: 500;
  margin: 0;
}
.hero__trust-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-light);
}
.hero__trust-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.hero__trust-meta strong {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}

/* ─── RIGHT COLUMN — SHOWCASE ────────────────────────────────────────────── */
.hero-showcase {
  position: relative;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero-showcase__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,31,51,0.06) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Phone mockup */
.phone-mock {
  position: relative;
  width: 280px;
  height: 580px;
  background: #0B1F33;
  border-radius: 42px;
  padding: 8px;
  box-shadow:
    0 50px 100px rgba(11,31,51,0.18),
    0 24px 50px  rgba(11,31,51,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(11,31,51,0.06);
  z-index: 2;
  animation: float-soft 9s ease-in-out infinite;
}
.phone-mock__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #0B1F33;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone-mock__screen {
  position: relative;
  height: 100%;
  background: #F6F7F9;
  border-radius: 34px;
  padding: 50px 18px 18px;
  overflow: hidden;
}
.phone-mock__bar {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--navy);
}
.phone-mock__bar-icons {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
}
.phone-mock__hdr { margin-bottom: 14px; }
.phone-mock__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 5px;
}
.phone-mock__addr {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.012em;
  margin: 0;
}
.phone-mock__city {
  font-size: 0.75rem;
  color: var(--text-light);
  margin: 2px 0 0;
}
.phone-mock__photo {
  height: 175px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #DDD;
}
.phone-mock__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phone-mock__row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.phone-mock__metric {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid rgba(11,31,51,0.06);
  border-radius: 12px;
  padding: 10px 12px;
}
.phone-mock__metric span {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
  margin-bottom: 3px;
}
.phone-mock__metric strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.phone-mock__cta {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 11px;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Floating glass status cards */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(11,31,51,0.06);
  border-radius: 14px;
  box-shadow:
    0 18px 40px rgba(11,31,51,0.14),
    0 4px 10px  rgba(11,31,51,0.04);
  z-index: 4;
  width: 220px;
}
.float-card--top {
  top: 70px;
  left: 0;
  animation: float-soft 7s ease-in-out infinite;
  animation-delay: -1s;
}
.float-card--bottom {
  bottom: 70px;
  right: 0;
  animation: float-soft 8s ease-in-out infinite;
  animation-delay: -3s;
}
.float-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.float-card__icon svg { width: 16px; height: 16px; }
.float-card__icon--check {
  background: rgba(11,31,51,0.06);
  color: var(--navy);
}
.float-card__icon--gold {
  background: rgba(198,161,91,0.14);
  color: var(--gold);
}
.float-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin: 0;
}
.float-card__sub {
  font-size: 0.6875rem;
  color: var(--text-light);
  margin: 1px 0 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero { min-height: auto; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    padding: 120px 32px 80px;
  }
  .hero__content  { max-width: 640px; }
  .hero-showcase  { max-width: 480px; margin: 0 auto; height: 560px; }
}

@media (max-width: 768px) {
  .hero__inner    { padding: 100px 20px 64px; }
  .hero__headline { font-size: 2.25rem; }
  .hero__sub      { font-size: 1rem; }
  .hero__actions  { gap: 10px; margin-bottom: 36px; }
  .hero__trust-meta { gap: 16px; row-gap: 8px; }

  .hero-showcase  { height: 520px; }
  .phone-mock     { width: 250px; height: 510px; padding: 7px; border-radius: 38px; }
  .phone-mock__screen { border-radius: 31px; padding: 46px 16px 16px; }
  .phone-mock__photo  { height: 145px; }
  .phone-mock__notch  { width: 84px; height: 18px; }

  .hero-showcase__halo { width: 380px; height: 380px; }

  .float-card        { width: 188px; padding: 10px 14px; }
  .float-card--top   { left: -8px; top: 36px; }
  .float-card--bottom{ right: -8px; bottom: 36px; }
}

@media (max-width: 520px) {
  .hero__trust-meta { gap: 14px; }
  .hero-showcase    { height: 480px; }
  .phone-mock       { width: 230px; height: 480px; }
  .phone-mock__photo{ height: 130px; }
  .float-card       { width: 168px; }
  .float-card__title{ font-size: 0.75rem; }
}

/* Reduced motion — disable floats */
@media (prefers-reduced-motion: reduce) {
  .phone-mock,
  .float-card { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES (2026-05-13)
   Fixes: nav overflow at 768-1024px, hero showcase overflow,
   phone-mock + float-card misalignment, horizontal scroll, hero spacing.
   Loaded last — wins the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* Global responsive defaults */
* { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
img { max-width: 100%; height: auto; }
/* Restore explicit dimensions for images that fill fixed-aspect containers */
.site-logo { height: 100%; width: auto; }
.buy-card__photo img,
.t-card__photo img,
.audience-panel__photo img,
.phone-mock__photo img,
.hero__bg-img,
.final-cta__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── TABLET ≤1024px — collapse navbar to hamburger ────────────────────── */
@media (max-width: 1024px) {
  .nav__inner {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: 64px;
  }
  .nav__hamburger { display: flex !important; }

  .nav__links {
    position: fixed !important;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    background: #060F1C;
    flex-direction: column;
    padding: 22px 24px 28px;
    gap: 2px;
    transform: translateY(-110%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    z-index: 190;
    align-items: stretch;
    justify-self: stretch;
    margin: 0;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links li { width: 100%; }
  .nav__links a:not(.nav__cta-link) {
    display: block;
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav__cta-link {
    display: block;
    margin-top: 12px;
    padding: 13px 18px !important;
    text-align: center;
    border-bottom: none !important;
  }
}

/* ─── MOBILE ≤768px — stack hero, resize everything ──────────────────── */
@media (max-width: 768px) {
  .nav__inner { height: 60px; padding: 0; }
  .nav__links { top: 60px; }
  .logo-mark { height: 44px; }
  .nav__logo { gap: 4px; margin-left: 4px; }
  .nav__logo-name { font-size: 0.875rem; letter-spacing: 0.12em; }
  .nav__logo-sub  { font-size: 0.5625rem; letter-spacing: 0.22em; }
  .nav__logo-meta { font-size: 0.4375rem; letter-spacing: 0.28em; }

  /* Hero — stacked, tighter spacing */
  .hero { min-height: auto; }
  .hero__inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 88px 20px 56px !important;
  }
  .hero__content { max-width: 100%; }
  .hero__headline { font-size: clamp(1.875rem, 7vw, 2.25rem); }
  .hero__sub { font-size: 0.9375rem; margin-bottom: 28px; }
  .hero__actions { gap: 10px; margin-bottom: 30px; }
  .hero__actions .btn { padding: 12px 18px; font-size: 0.875rem; }
  .hero__trust-meta { gap: 14px; row-gap: 8px; font-size: 0.7rem; }

  /* Showcase — contained inside viewport */
  .hero-showcase {
    width: 100%;
    max-width: 100%;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .phone-mock {
    width: 220px;
    height: 460px;
    padding: 6px;
    border-radius: 36px;
  }
  .phone-mock__screen { border-radius: 30px; padding: 44px 14px 14px; }
  .phone-mock__photo { height: 130px; }
  .phone-mock__notch { width: 78px; height: 16px; }
  .hero-showcase__halo { width: 340px; height: 340px; }

  /* Float cards — flush with showcase edge (no negative offsets) */
  .float-card {
    width: 168px;
    padding: 10px 12px;
  }
  .float-card--top    { left: 0; top: 28px; }
  .float-card--bottom { right: 0; bottom: 28px; }
  .float-card__title  { font-size: 0.75rem; }

  /* Section padding — tighter on mobile */
  .section-inner { padding: 60px 20px; }
}

/* ─── ULTRA-SMALL ≤380px (small phones) ────────────────────────────── */
@media (max-width: 380px) {
  .hero__inner { padding: 84px 16px 48px !important; }
  .hero__headline { font-size: 1.75rem; }
  .hero-showcase { height: 440px; }
  .phone-mock { width: 200px; height: 420px; }
  .phone-mock__photo { height: 112px; }
  .float-card { width: 150px; padding: 9px 11px; }
  .float-card__title { font-size: 0.6875rem; }
  .float-card__sub { font-size: 0.625rem; }
  .hero__trust-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   iPad PORTRAIT FIX (768–900px) — 2026-05-13
   Bug: 60px desktop logo clips inside 64px tablet-nav; 64px stack gap is too large.
   Targets iPad Air (820), iPad Pro 11 (834), and similar tablet-portrait widths.
   Does NOT affect desktop (≥1025px) or landscape iPad (≥1024px).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 900px) {
  /* Header — taller, full logo visible, proper padding */
  .nav { padding: 0 28px; }
  .nav__inner {
    height: 80px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: none !important;
    gap: 16px;
    overflow: visible;
  }
  .nav__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    overflow: visible;
  }
  .logo-mark {
    height: 52px;
    overflow: visible;
  }
  .nav__logo-name { font-size: 0.9375rem; letter-spacing: 0.14em; }
  .nav__logo-sub  { font-size: 0.6125rem; letter-spacing: 0.26em; }
  .nav__logo-meta { font-size: 0.5rem; letter-spacing: 0.30em; margin-top: 3px; }

  .nav__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .nav__links {
    top: 80px;
  }

  /* Hero — text on top, phone below, centered, tight gap */
  .hero__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 104px 32px 64px !important;
    align-items: flex-start;
  }
  .hero__content { max-width: 100%; }

  .hero-showcase {
    margin: 8px auto 0;
    align-self: center;
    max-width: 360px;
    width: 100%;
    height: 540px;
    overflow: hidden;
  }
  .phone-mock {
    width: 240px;
    height: 500px;
    padding: 7px;
    border-radius: 38px;
  }
  .phone-mock__screen { border-radius: 31px; padding: 46px 16px 16px; }
  .phone-mock__photo  { height: 150px; }
  .phone-mock__notch  { width: 86px; height: 20px; }

  .hero-showcase__halo { width: 380px; height: 380px; }

  .float-card { width: 188px; padding: 11px 14px; }
  .float-card--top    { left: 0; top: 32px; }
  .float-card--bottom { right: 0; bottom: 32px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE HEADER + HERO POLISH (2026-05-13)
   1. Mobile header height → 76px, vertically centered, compact
   2. Strip 1px ring shadow on phone-mock that read as a gray border line
   3. Showcase wrapper goes overflow: visible so soft shadows don't clip
      into a hard rectangular edge
   Final declaration block — wins the cascade.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Mobile header — taller, vertically centered, cleaner */
  .nav { padding: 0 20px; }
  .nav__inner {
    min-height: 76px;
    height: 76px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    gap: 12px;
    grid-template-columns: none !important;
  }
  .nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
  }
  .logo-mark { height: 46px; }
  .nav__logo-name { font-size: 0.875rem;  letter-spacing: 0.14em; }
  .nav__logo-sub  { font-size: 0.5625rem; letter-spacing: 0.22em; }
  .nav__logo-meta { font-size: 0.4375rem; letter-spacing: 0.26em; }
  .nav__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  .nav__links { top: 76px; }

  /* Hero — let the phone mockup shadow breathe; no clipped gray edges */
  .hero { background: #FFFFFF; }
  .hero-showcase {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 8px auto 0;
  }
  .hero-showcase::before,
  .hero-showcase::after {
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Phone mockup — strip the 1px ring shadow that read as a gray border */
  .phone-mock {
    box-shadow:
      0 40px 80px rgba(11,31,51,0.16),
      0 18px 36px rgba(11,31,51,0.08);
    border: none;
  }

  /* Float cards — keep their elevation but no hard edges */
  .float-card {
    border: 1px solid rgba(11,31,51,0.06);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE FIX (2026-05-13)
   Bug: phone in landscape (769–900px wide) fell under the iPad portrait
        rule which set .hero-showcase { overflow: hidden }, clipping the
        phone's drop shadow into a hard gray rectangle.
   Fix: at any width ≤900px in landscape orientation, force the showcase
        and all wrapper containers to be transparent with visible overflow.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {
  .hero,
  .hero-showcase,
  .hero-showcase__halo {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .hero { background: #FFFFFF !important; }

  .hero-showcase {
    overflow: visible !important;
  }
  .hero-showcase::before,
  .hero-showcase::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Phone mockup — softer drop shadow only, no ring border */
  .phone-mock {
    border: none !important;
    box-shadow:
      0 30px 70px rgba(11,31,51,0.15),
      0 14px 28px rgba(11,31,51,0.07) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   iPad / TABLET HERO POLISH (2026-05-13)
   Strips the gray rectangular edges from the .hero-showcase column on all
   iPad/tablet viewports. Lets the phone's soft drop-shadow fade naturally
   onto the white hero background instead of clipping at the column edge.
   Desktop (≥1181px portrait, ≥1367px landscape) untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet — any orientation, 768–1180px */
@media (min-width: 768px) and (max-width: 1180px) {
  .hero,
  .hero__inner,
  .hero-showcase,
  .hero-showcase__halo {
    background: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .hero { background: #FFFFFF !important; }
  .hero__bg-mesh { display: block; }  /* keep the soft white-to-faint-gray base */

  .hero-showcase,
  .hero__inner {
    overflow: visible !important;
  }

  .hero-showcase::before,
  .hero-showcase::after,
  .hero__inner::before,
  .hero__inner::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Phone mockup — keep elevation, remove the 1px ring shadow */
  .phone-mock {
    border: none !important;
    box-shadow:
      0 36px 80px rgba(11,31,51,0.16),
      0 16px 32px rgba(11,31,51,0.08) !important;
  }
}

/* iPad landscape orientation up to 1366px (covers iPad Pro 12.9) */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  .hero,
  .hero-showcase,
  .hero-showcase__halo {
    background: #FFFFFF !important;
  }

  .hero-showcase::before,
  .hero-showcase::after {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-showcase,
  .hero__inner {
    overflow: visible !important;
  }

  /* Tighten any residual bottom spacing around the showcase */
  .hero-showcase {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP HERO POLISH (2026-05-13)
   Root causes of the gray rectangle on desktop:
     1. .phone-mock had a `0 0 0 1px rgba(11,31,51,0.06)` ring shadow
        rendering as a literal 1px gray border.
     2. .hero-showcase had `overflow: hidden`, clipping the phone's soft
        drop shadow into a hard rectangular edge at the column boundary.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .hero,
  .hero__inner,
  .hero-showcase,
  .hero-showcase__halo {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .hero { background: #FFFFFF !important; }

  .hero-showcase,
  .hero__inner {
    overflow: visible !important;
  }

  .hero-showcase::before,
  .hero-showcase::after,
  .hero__inner::before,
  .hero__inner::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Phone mockup — clean soft shadow, no 1px ring, no hard edges */
  .phone-mock {
    border: none !important;
    box-shadow:
      0 50px 100px rgba(11,31,51,0.16),
      0 24px 48px  rgba(11,31,51,0.08) !important;
  }
}

/* Desktop landscape — same treatment, stricter (display: none on pseudo) */
@media (min-width: 1024px) and (orientation: landscape) {
  .hero,
  .hero-showcase,
  .hero-showcase__halo {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .hero { background: #FFFFFF !important; }

  .hero-showcase::before,
  .hero-showcase::after,
  .hero__inner::before,
  .hero__inner::after {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP HERO — NUCLEAR CLEAN (2026-05-13)
   Root cause: .hero__bg-mesh (absolute-positioned gradient layer covering
   the entire hero) and .hero-showcase__halo (radial gradient circle behind
   the phone) were tinting the area around the phone with subtle gradients
   that read as a gray rectangular backdrop.
   This block KILLS those layers at desktop. Pure white behind the phone.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Kill the gradient layers that were tinting the hero behind the phone */
  .hero__bg-mesh,
  .hero-showcase__halo {
    display: none !important;
  }

  /* All hero wrappers — solid white, no gradients, no edges */
  .hero,
  .hero__inner,
  .hero-showcase {
    background: #FFFFFF !important;
    background-image: none !important;
    background-color: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
  }

  /* Defensive: kill any decorative pseudo-elements anywhere in the chain */
  .hero::before, .hero::after,
  .hero__inner::before, .hero__inner::after,
  .hero-showcase::before, .hero-showcase::after {
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Phone — clean soft drop shadow, no rings, no hard edges */
  .phone-mock {
    border: none !important;
    box-shadow:
      0 40px 80px rgba(11,31,51,0.12),
      0 20px 40px rgba(11,31,51,0.06) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE HEADER COMPACT FIX (2026-05-13)
   Final word on mobile header — compact dark navy bar, logo left, hamburger
   right, no tall blank strip, no awkward wordmark overflow.
   Wins the cascade against every prior mobile rule.
   ════════════════════════════════════════════════════════════════════════ */

/* iPhone portrait + standard mobile widths */
@media (max-width: 768px) {
  .nav {
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 20px !important;
    background: #071427 !important;
    overflow: hidden;
  }
  .nav__inner {
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
    gap: 12px;
  }

  .nav__logo {
    display: flex !important;
    align-items: center !important;
    height: 100%;
    gap: 8px;
    margin: 0 !important;
    flex-shrink: 1;
    min-width: 0;
  }
  .logo-mark { height: 48px !important; }
  .site-logo, .logo-mark img, .logo-mark svg {
    max-height: 48px;
    width: auto;
    object-fit: contain;
  }
  .nav__logo-text {
    gap: 2px !important;
    line-height: 1 !important;
  }
  .nav__logo-name { font-size: 0.8125rem; letter-spacing: 0.12em; }
  .nav__logo-sub  { font-size: 0.5625rem; letter-spacing: 0.2em; }
  .nav__logo-meta { font-size: 0.4375rem; letter-spacing: 0.24em; }

  .nav__links { top: 76px !important; }

  .nav__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Hero starts cleanly below the fixed header */
  .hero {
    margin-top: 0;
    padding-top: 0 !important;
  }
  .hero__inner {
    padding: 92px 20px 56px !important;
  }
}

/* iPhone landscape (and small landscape phones) */
@media (max-width: 932px) and (orientation: landscape) {
  .nav,
  .nav__inner {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 24px !important;
  }
  .nav__inner { padding: 0 !important; }
  .nav__links { top: 64px !important; }
  .logo-mark { height: 42px !important; }
  .site-logo, .logo-mark img, .logo-mark svg {
    max-height: 42px;
  }

  .nav__logo-name { font-size: 0.75rem; }
  .nav__logo-sub  { font-size: 0.5rem; }
  .nav__logo-meta { font-size: 0.4rem; }

  .hero__inner {
    padding: 80px 24px 48px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED TABLET-PORTRAIT HEADER (2026-05-13) — FINAL
   Bug: At 901–1099px (iPad Pro 12.9 portrait, large tablets) the desktop
        60px logo + 3-line wordmark didn't fit the 64px tablet nav, creating
        a tall navy strip with overflow.
   Fix: Use mobile/hamburger layout up to 1099px. Restore desktop nav at
        ≥1100px. Consistent 82px header height across all tablet widths.
   ════════════════════════════════════════════════════════════════════════ */

/* TABLET PORTRAIT + below — mobile/hamburger layout up through 1099px */
@media (max-width: 1099px) {
  .nav {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 0 24px !important;
    background: #071427 !important;
    overflow: hidden !important;
  }
  .nav__inner {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 12px;
  }

  .nav__logo {
    display: flex !important;
    align-items: center;
    height: 100%;
    gap: 10px;
    margin: 0 !important;
    flex-shrink: 1;
    min-width: 0;
  }
  .logo-mark { height: 52px !important; }
  .site-logo, .logo-mark img, .logo-mark svg {
    max-height: 52px;
    width: auto;
    object-fit: contain;
  }
  .nav__logo-text { gap: 2px !important; line-height: 1 !important; }
  .nav__logo-name { font-size: 0.875rem; letter-spacing: 0.14em; }
  .nav__logo-sub  { font-size: 0.5625rem; letter-spacing: 0.22em; }
  .nav__logo-meta { font-size: 0.4375rem; letter-spacing: 0.26em; }

  /* Hide inline desktop links — they slide in via hamburger */
  .nav__links {
    top: 82px !important;
  }
  .nav__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Hero clears the 82px fixed header cleanly */
  .hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .hero__inner {
    padding-top: 98px !important;
  }
}

/* DESKTOP — restore inline nav at 1100px+ */
@media (min-width: 1100px) {
  .nav__hamburger { display: none !important; }
  .nav__links {
    position: static !important;
    transform: none !important;
    flex-direction: row !important;
    display: flex !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
}

/* iPhone landscape (re-assert, narrower than 1099 trigger) */
@media (max-width: 932px) and (orientation: landscape) {
  .nav,
  .nav__inner {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
  .logo-mark { height: 42px !important; }
  .nav__links { top: 64px !important; }
  .hero__inner { padding-top: 80px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   iPad PORTRAIT — RESTORE FULL DESKTOP NAV (2026-05-13)
   Override the prior hamburger-on-tablet rule. At iPad portrait widths,
   show the full desktop nav (logo left + links center + CTA right) with
   safe-area-inset-top padding so Safari's URL bar doesn't clip it.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1099px) {
  .nav {
    padding-top: env(safe-area-inset-top) !important;
    min-height: 95px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #071427 !important;
  }
  .nav__inner {
    min-height: 95px !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    gap: 18px;
  }

  /* Logo block — fits comfortably alongside nav links + CTA */
  .logo-mark { height: 50px !important; }
  .nav__logo { gap: 10px; margin: 0 !important; }
  .nav__logo-name { font-size: 0.875rem; letter-spacing: 0.13em; }
  .nav__logo-sub  { font-size: 0.5625rem; letter-spacing: 0.22em; }
  .nav__logo-meta { font-size: 0.4375rem; letter-spacing: 0.26em; }

  /* Hide hamburger — desktop layout, not collapse */
  .nav__hamburger { display: none !important; }

  /* Restore inline nav links (kill mobile dropdown position:fixed) */
  .nav__links {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    justify-self: center;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    gap: 28px !important;
    width: auto;
    z-index: auto !important;
  }
  .nav__links li { width: auto !important; }
  .nav__links a:not(.nav__cta-link) {
    border-bottom: none !important;
    padding: 6px 0 !important;
    font-size: 0.8125rem !important;
    width: auto !important;
    display: inline-block !important;
  }

  /* CTA button — fits comfortably on the right */
  .nav__cta-link {
    margin: 0 !important;
    padding: 9px 18px !important;
    font-size: 0.8125rem !important;
    text-align: center;
    width: auto !important;
  }

  /* Hero clears the taller nav + Safari safe area */
  .hero { margin-top: 0; padding-top: 0 !important; }
  .hero__inner {
    padding-top: calc(95px + env(safe-area-inset-top) + 32px) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   iPHONE PORTRAIT — SAFE-AREA HEADER FIX (2026-05-13)
   Switch the nav from `position: fixed` to `position: relative` on phones
   so it sits in normal document flow and is never hidden behind Safari
   chrome. Add safe-area-inset-top padding for notched iPhones (X/11/12+).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .nav {
    position: relative !important;
    top: 0 !important;
    z-index: 9999 !important;
    overflow: visible !important;
    padding-top: calc(env(safe-area-inset-top) + 14px) !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: 92px !important;
    height: auto !important;
    max-height: none !important;
    background: #071427 !important;
  }
  .nav__inner {
    min-height: 78px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow: visible !important;
    gap: 12px;
  }

  .nav__logo {
    display: flex !important;
    align-items: center;
    height: auto;
    gap: 10px;
    margin: 0 !important;
    flex-shrink: 1;
    min-width: 0;
  }
  .logo-mark { height: 48px !important; }
  .nav__logo-name { font-size: 0.875rem; letter-spacing: 0.13em; }
  .nav__logo-sub  { font-size: 0.5625rem; letter-spacing: 0.22em; }
  .nav__logo-meta { font-size: 0.4375rem; letter-spacing: 0.26em; }

  .nav__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
  }
  .nav__links {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 92px) !important;
  }

  /* Hero — nav is in normal flow now, so just a small top gap */
  .hero {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
  .hero__inner {
    padding-top: 24px !important;
  }

  body { overflow-x: hidden; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE CTA — separated row below nav (2026-05-13) FINAL
   Root cause: the in-dropdown CTA (last <li> in .nav__links) was visible
   over the logo because translateY(-110%) doesn't fully clear a tall
   dropdown when anchored at top: 92px.
   Fix: render a separate, full-width CTA below the nav on mobile only;
   hide the in-dropdown CTA on mobile.
   ════════════════════════════════════════════════════════════════════════ */

/* Mobile-only CTA — hidden everywhere by default */
.nav__cta-mobile {
  display: none;
}

@media (max-width: 767px) {
  /* Show the standalone mobile CTA, full width, below the nav row */
  .nav__cta-mobile {
    display: block;
    width: calc(100% - 32px);
    margin: 14px auto 14px;
    padding: 13px 18px;
    background: var(--gold);
    color: var(--navy);
    text-align: center;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 10px rgba(198,161,91,0.20);
    transition: background var(--t), box-shadow var(--t), transform var(--t);
  }
  .nav__cta-mobile:hover,
  .nav__cta-mobile:active {
    background: var(--gold-light);
    box-shadow: 0 6px 18px rgba(198,161,91,0.40);
    transform: translateY(-1px);
  }

  /* Hide the in-dropdown CTA so it doesn't duplicate or peek over the logo */
  .nav__links .nav__cta-link {
    display: none !important;
  }

  /* Nav itself expands to contain logo row + mobile CTA naturally */
  .nav {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* Make sure dropdown is fully off-screen when closed (defensive) */
  .nav__links:not(.open) {
    transform: translateY(-200%) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   iPHONE PORTRAIT — COMPACT HEADER (2026-05-13) FINAL
   Reduce vertical padding everywhere in the mobile header.
   No empty navy gap below the Safari bar, no extra space below the CTA.
   Landscape (≤932 landscape) carve-out untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) and (orientation: portrait) {
  .nav {
    padding-top: calc(env(safe-area-inset-top) + 4px) !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .nav__inner {
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Logo + hamburger sit tight, vertically centered */
  .nav__logo { gap: 8px; }
  .logo-mark { height: 42px !important; }
  .nav__logo-text { gap: 1px !important; }
  .nav__logo-name { font-size: 0.8125rem; }
  .nav__logo-sub  { font-size: 0.5rem; }
  .nav__logo-meta { font-size: 0.4rem; }

  /* Mobile CTA — tight margins, smaller padding, no big gap below */
  .nav__cta-mobile {
    width: calc(100% - 32px);
    margin: 8px auto 6px !important;
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
  }

  /* Strip any leftover space from hidden in-dropdown CTA container */
  .nav__links .nav__cta-link {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
  .nav__links li:has(.nav__cta-link) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
  }

  /* Hero starts right under the compact header — no extra top gap */
  .hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .hero__inner {
    padding-top: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HIDE NAV "Submit a Property" CTA ON iPHONE PORTRAIT ONLY (2026-05-13)
   Targets only the nav-bar CTA — hero CTAs and all other buttons unaffected.
   ════════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 480px) and (orientation: portrait) {
  .nav .nav__cta-mobile,
  .nav .nav__cta-link {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HIDE NAV CTA ON ALL MOBILE PORTRAIT WIDTHS (2026-05-13)
   Widens the prior 480px rule to cover all phones up to 767px portrait.
   Also zero out any padding on .nav that could leave a navy gap after
   the CTA is hidden, so the hero moves up cleanly.
   ════════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .nav .nav__cta-mobile,
  .nav .nav__cta-link {
    display: none !important;
  }

  /* Collapse leftover space — nav height is now driven only by .nav__inner */
  .nav {
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .hero__inner {
    padding-top: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE DROPDOWN FLUSH FIX (2026-05-13)
   Bug: .nav__links was anchored at top: 92px from viewport but the actual
   nav bottom edge is at ~64px + safe-area. The ~28px gap rendered as a
   white strip when the menu opened.
   Fix: anchor dropdown precisely to the nav bottom and strip internal
   top padding so it sits flush against the navbar.
   ════════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .nav__links {
    top: calc(env(safe-area-inset-top) + 60px) !important;
    margin-top: 0 !important;
    padding-top: 8px !important;
  }

  /* Open state — make sure no leftover transform pulls it down past flush */
  .nav__links.open {
    margin-top: 0 !important;
    transform: translateY(0) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   STAT-NUMBER UNIFIED TYPOGRAPHY (2026-05-13)
   Applied to all four trust-bar headings — 25+, All-Cash, 7 Days, $120M+
   so they render identically across desktop, tablet, and mobile.
   Tabular numerals + explicit font fallback ensure the + glyph reads at
   the same weight as the digits.
   ════════════════════════════════════════════════════════════════════════ */
.trust-bar .stat-number,
.trust-stat .stat-number,
.stat-number {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--gold) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1, 'kern' 1 !important;
  text-transform: none !important;
  white-space: nowrap;
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════════
   TRUSTED-BY AVATARS — real headshots (2026-05-15)
   Replaces the 4 placeholder gradient circles with real <img> headshots.
   Sized 60px desktop / 50px tablet / 44px mobile, perfect circles, white
   ring, soft drop shadow, overlapping stack.
   ════════════════════════════════════════════════════════════════════════ */
.hero__trust-stack {
  display: flex;
  align-items: center;
}
.hero__trust-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  border: 3px solid #FFFFFF;
  margin-left: -14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  background: #FFFFFF;
  flex-shrink: 0;
  display: block;
}
.hero__trust-avatar:first-child { margin-left: 0; }

/* Tablet — slightly smaller for the narrower hero column */
@media (max-width: 1099px) {
  .hero__trust-avatar {
    width: 60px;
    height: 60px;
    margin-left: -12px;
    border-width: 3px;
  }
}

/* Mobile — compact for the stacked hero, proportional overlap */
@media (max-width: 767px) {
  .hero__trust-avatar {
    width: 52px;
    height: 52px;
    margin-left: -10px;
    border-width: 2px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE — STACK TRUST ROW (2026-05-15)
   On narrow viewports the "Trusted by 500+..." text was running into the
   avatar stack. Switch .hero__trust-row to flex-column so the text wraps
   cleanly below the headshots.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero__trust-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .hero__trust-stack {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0;
  }
  .hero__trust-row p {
    display: block;
    max-width: 100%;
    line-height: 1.35;
    margin: 0;
    text-align: left;
  }
}