/* Maps Hunter Pro — responsive layout polish
   Desktop-first hero clarity + mobile-first safety. */

html,body,button,input,select,textarea{
  font-family:"Readex Pro",Arial,sans-serif;
}

/* Keep the top navigation clean on laptop and desktop widths. */
@media (min-width:1100px){
  .nav-wrap{
    width:min(1280px,calc(100% - 48px));
    height:76px;
    gap:18px;
  }
  .nav-links{gap:20px}
  .nav-links a{font-size:13px}
  .brand-copy strong{font-size:16px}
  .brand-copy span{font-size:10px}
}

/* The hero should read first, then show the product. The visual no longer
   steals horizontal space from the headline on desktop. */
@media (min-width:900px){
  .hero{
    padding:76px 0 80px;
  }
  .hero-grid{
    width:min(1180px,calc(100% - 48px));
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:42px!important;
    align-items:start!important;
  }
  .hero-copy{
    width:min(940px,100%);
    max-width:none!important;
    margin:0 auto;
    text-align:center;
  }
  .hero .eyebrow{
    margin:0 auto 20px;
  }
  .hero h1{
    max-width:1040px;
    margin:0 auto 22px;
    font-size:clamp(48px,5vw,68px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
    text-wrap:balance;
  }
  .hero p{
    max-width:800px!important;
    margin:0 auto 28px!important;
    font-size:17px!important;
    line-height:1.72!important;
  }
  .hero-cta,
  .hero-trust{
    justify-content:center;
  }
  .hero-visual{
    width:min(1020px,100%);
    max-width:none;
    margin:0 auto;
  }
  .hero-card{
    border-radius:26px;
    padding:12px;
    box-shadow:10px 10px 0 var(--color-black);
  }
  .hero-workspace{
    grid-template-columns:minmax(0,1.28fr) minmax(270px,.72fr)!important;
    min-height:420px!important;
  }
}

/* Tablet: remove the main nav before it starts crowding the brand/actions. */
@media (max-width:1099px){
  .nav-links{display:none!important}
  .nav-wrap{
    width:min(100% - 30px,980px);
    gap:12px;
  }
}

@media (max-width:899px){
  .hero{
    padding:54px 0 56px!important;
  }
  .hero-grid{
    width:min(100% - 30px,760px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .hero-copy{
    max-width:700px!important;
    margin:0 auto;
    text-align:center;
  }
  .hero .eyebrow{margin:0 auto 18px}
  .hero h1{
    max-width:760px;
    margin:0 auto 18px;
    font-size:clamp(38px,7.5vw,52px)!important;
    line-height:1.11!important;
    letter-spacing:-.02em!important;
  }
  .hero p{
    max-width:660px!important;
    margin:0 auto 24px!important;
    font-size:16px!important;
    line-height:1.65!important;
  }
  .hero-cta,.hero-trust{justify-content:center}
  .hero-visual{width:100%;max-width:760px;margin:0 auto}
}

@media (max-width:760px){
  html,body{overflow-x:hidden}
  .nav-wrap{
    width:calc(100% - 24px)!important;
    min-height:68px;
    height:68px!important;
  }
  .brand{gap:9px!important}
  .brand-copy span{display:none!important}
  .nav-actions{gap:7px!important}
  .nav-actions .btn-primary{
    min-height:40px!important;
    padding-inline:12px!important;
    font-size:12.5px!important;
  }
  .hero{
    padding:42px 0 44px!important;
  }
  .hero-grid{
    width:calc(100% - 24px)!important;
    gap:22px!important;
  }
  .hero-copy{text-align:center!important}
  .hero .eyebrow{
    min-height:32px!important;
    margin-bottom:15px!important;
    padding:6px 10px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  .hero h1{
    font-size:clamp(31px,9vw,42px)!important;
    line-height:1.14!important;
    margin-bottom:15px!important;
  }
  .hero p{
    font-size:15px!important;
    line-height:1.58!important;
    margin-bottom:20px!important;
  }
  .hero-cta{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%;
    margin-bottom:18px!important;
  }
  .hero-cta .btn{
    width:100%;
    min-height:48px!important;
  }
  .hero-trust{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center;
    gap:6px!important;
    font-size:11.5px!important;
  }
  .hero-card{
    padding:7px!important;
    border-radius:20px!important;
    box-shadow:6px 6px 0 var(--color-black)!important;
  }
  .hero-window{border-radius:14px!important}
  .hero-windowbar{
    height:42px!important;
    padding-inline:12px!important;
  }
  .hero-workspace{
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .hero-map{
    min-height:205px!important;
    border-inline-end:0!important;
    border-bottom:1.5px solid var(--color-black)!important;
  }
  .hero-panel{padding:14px!important}
  .map-search{
    top:13px!important;
    left:13px!important;
    right:13px!important;
    height:38px!important;
    font-size:10.5px!important;
  }
}

@media (max-width:520px){
  .nav-actions .btn-primary{display:none!important}
  .brand-copy strong{font-size:14.5px!important}
  .hero h1{font-size:clamp(29px,9.5vw,37px)!important}
  .hero p{font-size:14.5px!important}
  .hero-map{min-height:185px!important}
}

@media (max-width:360px){
  .nav-wrap{width:calc(100% - 18px)!important}
  .brand-mark{width:38px!important;height:38px!important;flex-basis:38px!important}
  .hero-grid{width:calc(100% - 18px)!important}
  .hero h1{font-size:28px!important}
  .hero-card{box-shadow:4px 4px 0 var(--color-black)!important}
}