/* KCMO Property Partners — Mobile layout (first pass)
   These rules deliberately do not apply to desktop widths >= 981px.
   Future image CMS can set --hero-mobile-image to url(...), and individual
   images can use --mobile-focus-x / --mobile-focus-y independently.
*/
@media (max-width: 980px) {
  .nav-wrap .nav { gap: 12px; }
  .nav-wrap .brand { min-width: 0; }
  .nav-wrap .menu { flex-shrink: 0; }
  .mobile-nav-menu.open { max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-nav-inner a { min-height: 42px; display: flex; align-items: center; }
  #why-us, #why-kc, #returns, #how, #properties, #ownership-protection { scroll-margin-top: 82px; }
  .macro-shell, .kc-panel, .buy-map-shell, .property-carousel { min-width: 0; }
}
@media (max-width: 680px) {
  /* App-like first screen. No video download is needed for this rendering.
     When an approved mobile hero image exists, the CMS will fill the variable. */
  #top > section.hero {
    min-height: min(660px, calc(100svh - 68px)) !important;
    height: auto !important;
    padding: 78px 0 56px;
    align-items: center;
    background-color: #101c3b;
    background-image: linear-gradient(110deg, rgba(8,20,45,.88), rgba(8,20,45,.48)), var(--hero-mobile-image, none);
    background-position: center, var(--hero-mobile-position, 50% 50%);
    background-size: cover, cover;
  }
  #top > section.hero > video { display: none !important; }
  #top > section.hero::after { background: linear-gradient(180deg, rgba(8,20,45,.2), rgba(8,20,45,.45)); }
  #top .hero-content { width: min(100% - 40px, 520px); max-width: none; margin: 0 auto; padding: 0 !important; transform: none !important; }
  #top .hero h1 { font-size: clamp(36px, 10vw, 52px) !important; line-height: 1.03; letter-spacing: -.035em; max-width: 12.5em; }
  #top .hero-sub { font-size: 15.5px; line-height: 1.55; max-width: 34ch; margin-bottom: 22px; }
  #top .hero-actions { margin: 0; }
  #top .hero-actions .btn { min-height: 46px; font-size: 13px; padding-inline: 17px; }
  .nav-wrap .nav { height: 68px; }
  .nav-wrap .brand .kcmo-logo-placeholder { font-size: clamp(13px, 4vw, 17px); line-height: 1.15; }
  .nav-wrap .menu { min-height: 42px; padding: 0 13px; font-size: 13px; }
  .section .h2, .story-intro .h2 { overflow-wrap: anywhere; }
  #why-us .lead, #why-kc .lead, #properties .lead, #returns .lead { font-size: 15px; line-height: 1.55; }
  .story-gallery { gap: 11px; margin-top: 28px; }
  .story-gallery-item { height: clamp(160px, 50vw, 235px); border-radius: 12px; }
  .story-gallery-item img { object-position: var(--mobile-focus-x, 50%) var(--mobile-focus-y, 50%) !important; }
  #properties .property-carousel { margin-top: 21px; }
  #properties .card { border-radius: 16px; }
  .footer-grid { gap: 24px; }
  .footer-links { gap: 11px 15px; }
}
@media (max-width: 380px) {
  #top .hero h1 { font-size: 34px !important; }
  #top .hero-content { width: calc(100% - 32px); }
  .nav-wrap .brand .kcmo-logo-placeholder { font-size: 13px; }
}