/* 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; }
}


/* Mobile v325 preview. Only phone/tablet overrides; desktop styles remain in index.html. */
#top .mobile-hero-eyebrow,#top .mobile-hero-tail,#top .mobile-story-nav{display:none}
@media(max-width:980px){
 header.nav-wrap .brand .kcmo-logo-placeholder{color:#fff!important;text-shadow:0 1px 5px #0002;line-height:1.12}
 header.nav-wrap .menu{border:1px solid #ffffff80!important;border-radius:12px;background:#ffffff1a!important;color:white!important;min-height:42px;font-size:12px;font-weight:750}
 header.nav-wrap .mobile-nav-menu{top:100%;max-height:calc(100svh - 64px);overflow-y:auto;background:#fffffffc;border-radius:0 0 16px 16px}
 .mobile-nav-inner a:focus-visible,#top .mobile-story-nav a:focus-visible{outline:2px solid #b69b7a;outline-offset:-3px}
}
@media(max-width:680px){
 :root{--kcmo-mobile-pad:20px}
 html{scroll-padding-top:79px}
 body{-webkit-text-size-adjust:100%}
 #top .container,#top .mobile-story-nav,footer.footer>.container{width:calc(100% - 2 * var(--kcmo-mobile-pad));max-width:520px}
 #top>section.hero{min-height:0!important;height:auto!important;padding:112px 0 75px!important;isolation:isolate;background-color:#0b1934!important;background-image:linear-gradient(150deg,#09142be0,#0c20439e),var(--hero-mobile-image,none),radial-gradient(ellipse at 92% 22%,#b69b7a33,transparent 55%),linear-gradient(125deg,#0c1b3b,#142e51 68%,#0d1e3f)!important;background-position:center,var(--hero-mobile-position,50% 50%),center,center;background-size:cover}
 #top>section.hero>video{display:none!important}
 #top>section.hero::before{inset:auto -35% -115px 12%!important;width:130%;height:270px;transform:rotate(-12deg);background:repeating-linear-gradient(0deg,transparent 0 28px,#ffffff09 29px 30px),repeating-linear-gradient(90deg,transparent 0 37px,#ffffff0a 38px 39px)!important;opacity:.58}
 #top>section.hero::after{background:linear-gradient(175deg,#09142b0a 0%,#09142b1f 60%,#09142b85 100%)!important}
 #top .hero-content{width:calc(100% - 40px);max-width:520px;margin:0 auto;padding:0!important;position:relative;transform:none!important}
 #top .mobile-hero-eyebrow{display:flex;gap:10px;align-items:center;font:800 10px/1.35 var(--sans);letter-spacing:.16em;color:#d6bea0;margin-bottom:23px}
 #top .mobile-hero-dot{display:block;width:7px;height:7px;border-radius:50%;background:#d5b88f;box-shadow:0 0 0 5px #d5b88f1f}
 #top .hero h1{font-size:clamp(32px,8.6vw,43px)!important;line-height:1.09;max-width:11.5em;letter-spacing:-.037em;text-wrap:balance;margin:0 0 19px}
 #top .hero-sub{max-width:35ch;font-size:14px!important;line-height:1.67;color:#ffffffd4;margin:0 0 23px}
 #top .hero-actions{width:100%;margin:0}
 #top .hero-actions .btn{background:#cab398;color:#132340;border-radius:12px;min-height:47px;padding:14px 20px;font-size:12px;font-weight:800;box-shadow:0 10px 24px #0002}
 #top .mobile-hero-tail{display:flex;align-items:center;gap:10px;margin-top:37px;font-size:9px;font-weight:800;letter-spacing:.18em;color:#ffffff8c}
 #top .mobile-tail-line{width:24px;height:1px;background:#bea88e;display:block}
 #top .mobile-story-nav{position:relative;z-index:11;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100% - 40px);max-width:520px;margin:-30px auto 0;background:#fff;border:1px solid #e7dfd6;border-radius:15px;box-shadow:0 12px 30px #101c3b21;overflow:hidden}
 #top .mobile-story-nav a{display:flex;flex-direction:column;gap:6px;justify-content:center;padding:16px 11px 15px;min-width:0;min-height:75px;border-right:1px solid #ece7e1}
 #top .mobile-story-nav a:last-child{border-right:0}
 #top .mobile-story-nav span{font-size:10px;font-weight:900;letter-spacing:.08em;color:#a58b6e}
 #top .mobile-story-nav strong{font-size:11px;line-height:1.22;font-weight:800;color:#152341}
 #investment-case{padding-top:15px}
 #investment-case .story-intro{padding:45px 0 24px}
 #investment-case .story-intro .h2{font-size:clamp(31px,8.1vw,41px);line-height:1.08;margin-bottom:15px}
 #investment-case .story-intro .lead{font-size:14px;line-height:1.65;max-width:42ch}
 #investment-case .story-chapter{padding:27px 0 42px}
 #investment-case .story-chapter-growth{padding-top:13px}
 #investment-case .story-chapter-label{margin-bottom:23px;gap:9px;font-size:9px;letter-spacing:.11em}
 #investment-case .story-step{padding:6px 9px;font-size:9px;flex-shrink:0}
 #investment-case .story-chapter h3{font-size:clamp(27px,7vw,35px);line-height:1.13;letter-spacing:-.025em}
 #investment-case .story-intro-copy,#investment-case .story-chapter p:not(.story-footnote){font-size:13px;line-height:1.62}
 #investment-case .story-growth-grid{gap:23px}
 #investment-case .story-growth-metrics{gap:9px;margin:20px 0 16px}
 #investment-case .story-growth-metrics>div{padding:12px 11px;border-radius:13px}
 #investment-case .story-growth-metrics b{font-size:clamp(21px,6vw,29px)}
 #investment-case .story-growth-metrics span{font-size:10px;line-height:1.35}
 #investment-case .story-chart-card{padding:15px 9px;border-radius:16px}
 #investment-case .story-chart{width:100%;max-width:100%;height:auto}
 #investment-case .story-resilience{border-radius:18px}
 #investment-case .story-economy-grid{grid-template-columns:1fr;gap:19px}
 #investment-case .story-economy-photo{min-height:0!important;height:215px;border-radius:16px}
 #investment-case .story-supply-grid{gap:22px}
 #investment-case .story-gallery{gap:11px;margin-top:26px}
 #investment-case .story-gallery-item{height:clamp(145px,43vw,185px);border-radius:14px}
 #investment-case .story-gallery-item figcaption{font-size:10px;left:13px;right:13px;bottom:12px;line-height:1.35}
 #properties.section{padding:46px 0 48px!important}
 #properties .h2{font-size:38px}
 #properties .lead{font-size:14px;line-height:1.6}
 #properties .property-carousel{margin-top:22px}
 #properties .property-carousel-viewport{padding:3px 0 15px;mask-image:none!important;-webkit-mask-image:none!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 #properties #propertyCards{gap:12px}
 #properties #propertyCards>.card{flex:0 0 90%!important;border-radius:18px;box-shadow:0 10px 22px #101c3b12}
 #properties #propertyCards .prop-img{height:clamp(190px,55vw,250px);background:linear-gradient(160deg,#dddcd8,#e5e9ed)}
 #properties #propertyCards .card-body{padding:17px 17px 18px}
 #properties #propertyCards h4{font-size:21px;letter-spacing:-.02em}
 #properties #propertyCards .location{margin-bottom:12px}
 #properties #propertyCards .price-row{margin-bottom:14px}
 #properties #propertyCards .fact{font-size:10px}
 #properties #propertyCards .btn{min-height:45px;border-radius:11px}
 #how.section{padding:47px 0 39px!important}
 #how .h2{font-size:37px}
 #how .lead{font-size:14px;line-height:1.6}
 #how .process-scroll{margin-top:21px;min-width:0;max-width:100%}
 #how .process-wrap{gap:16px;grid-template-columns:minmax(0,1fr);max-width:100%}
 #how .process-wrap>div:first-child{min-width:0;width:100%;max-width:100%}
 #how .process-pin{min-width:0;max-width:100%}
 #how .process-carousel{display:flex;width:100%;max-width:100%;min-width:0;gap:10px;padding:3px 0 15px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 #how .process-carousel::before{display:none}
 #how .process-step,#how .process-step.is-current,#how .process-step.is-next,#how .process-step.is-prev,#how .process-step.is-far-prev,#how .process-step.is-far-next{flex:0 0 171px;min-width:0;min-height:125px;max-height:none;margin:0;opacity:1;transform:none;border:1px solid #e4ddd3;border-radius:14px;background:#fff;padding:12px 13px;scroll-snap-align:start}
 #how .process-step.is-current{background:#17284c;color:#fff;border-color:#17284c;box-shadow:0 9px 20px #101c3b1f}
 #how .process-step .process-step-top{gap:5px}
 #how .process-step h4{font-size:15px}
 #how .process-step p{font-size:11px;line-height:1.4;margin-bottom:0}
 #how .process-step.is-current p{color:#ffffffc4}
 #how .process-counter,#how .process-manual-hint{display:none}
 #how .detail-card{padding:20px 17px;border-radius:17px}
 #how .detail-card h3{font-size:23px;line-height:1.2}
 #how .detail-point{padding-block:8px}
 #ownership-protection.section{padding:41px 0 46px!important}
 #ownership-protection .protection-intro .h2{font-size:clamp(32px,8vw,39px);line-height:1.1;white-space:normal}
 #ownership-protection .protection-lead{font-size:14px;line-height:1.6}
 #ownership-protection .protection-grid{gap:12px;margin-top:21px}
 #ownership-protection .protection-card{padding:19px 16px;border-radius:16px}
 #ownership-protection .protection-card h3{font-size:19px;line-height:1.2}
 #ownership-protection .protection-card p{font-size:12px;line-height:1.6}
 #ownership-protection .commitment-qualifier{font-size:11px;line-height:1.5}
 #contact.cta{padding:46px 0 50px}
 #contact .cta-inner{gap:21px}
 #contact h2{font-size:clamp(31px,8vw,39px);line-height:1.1}
 #contact p{font-size:14px;line-height:1.55}
 #contact .cta-actions .btn{min-height:47px;border-radius:11px}
 footer.footer{padding-top:37px}
 footer.footer .footer-grid{gap:23px}
 footer.footer .kcmo-logo-placeholder{font-size:19px;line-height:1.2}
 footer.footer .footer-links{gap:11px 16px}
 footer.footer .copyright{gap:8px;font-size:11px}
 #investment-case,#kc-growth,#kc-economy,#kc-supply,#properties,#how,#ownership-protection,#contact{scroll-margin-top:75px}
}
@media(max-width:360px){
 :root{--kcmo-mobile-pad:16px}
 #top .hero-content{width:calc(100% - 32px)}
 #top .hero h1{font-size:31px!important}
 #top .mobile-story-nav{width:calc(100% - 32px)}
 #top .mobile-story-nav a{padding:14px 8px}
 #top .mobile-story-nav strong{font-size:10px}
}
@media(max-width:680px) and (prefers-reduced-motion:reduce){
 #top .hero-content,#top .mobile-story-nav{animation:none!important;transition:none!important}
}