/* ===================================================================
   Responsive breakpoints — loaded after style.css
   =================================================================== */

@media (max-width: 1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .checklist-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .hero-panel h1{font-size:38px}
  .masonry{columns:3 200px}
}

@media (max-width: 860px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;top:73px;height:calc(100vh - 73px);width:78%;max-width:320px;
    background:var(--ivory-2);flex-direction:column;align-items:flex-start;gap:0;
    padding:20px;transform:translateX(100%);transition:transform .3s ease;box-shadow:var(--shadow-lg);
    overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav a{width:100%;padding:14px 4px;border-bottom:1px solid var(--line)}
  .header-actions .btn-primary{display:none}
  .nav-toggle{display:block}
  .nav-backdrop{display:none;position:fixed;inset:0;background:rgba(10,15,22,.4);z-index:99}
  .nav-backdrop.open{display:block}

  .grid-3,.grid-2{grid-template-columns:1fr!important}
  .info-grid{grid-template-columns:1fr}
  .checklist-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:28px;padding:44px 0 30px}
  .spec-strip{grid-template-columns:1fr}
  .spec-strip .spec{border-right:none;border-bottom:1px solid var(--line)}
  .spec-strip .spec:last-child{border-bottom:none}
  .thumb-gallery{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .masonry{columns:2 180px}
  .hero-panel{padding:32px 24px;left:20px;right:20px;bottom:20px;max-width:none}
  .hero-panel h1{font-size:30px}
  .yacht-hero-content{flex-direction:column;align-items:flex-start}
}

@media (max-width: 520px){
  .container{padding:0 16px}
  .header-inner{padding:14px 16px}
  .hero-media{min-height:560px}
  .hero-panel h1{font-size:26px}
  .hero-actions .btn{width:100%}
  .hero-actions{flex-direction:column}
  .section{padding:44px 0}
  .section-head h2{font-size:26px}
  .thumb-gallery{grid-template-columns:1fr 1fr}
  .masonry{columns:1}
  .cta-seg{font-size:12.5px;padding:12px 6px;gap:5px}
  .cta-seg span{display:inline}
  .footer-bottom{flex-direction:column;text-align:center}
}