/* Contact page mobile hardening.
   Loaded after the shared mobile/theme styles so the contact page wins the cascade
   without depending on stylesheet order or Safari cache behavior. */

@media (max-width:860px){
  /* Kill the inherited 350px flex hero that was creating the giant blank gap. */
  html body.contact-page:not(#home)>.hero{
    display:block!important;
    min-height:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#06131f!important;
  }
  html body.contact-page:not(#home)>.hero>.hero-stage{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  html body.contact-page:not(#home)>.hero .hero-copy{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:30px 18px 28px!important;
    border:0!important;
    border-radius:0!important;
    background:
      linear-gradient(90deg,rgba(3,14,26,.96),rgba(3,14,26,.88)),
      var(--hero-image) center 48%/cover no-repeat!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    animation:none!important;
  }
  html body.contact-page:not(#home)>.hero .kicker{
    margin:0 0 12px!important;
    padding-left:9px!important;
    font-size:8.5px!important;
  }
  html body.contact-page:not(#home)>.hero h1{
    max-width:365px!important;
    margin:0 0 12px!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:36px!important;
    line-height:1.01!important;
    letter-spacing:-.045em!important;
    text-shadow:0 4px 18px rgba(0,0,0,.35)!important;
  }
  html body.contact-page:not(#home)>.hero p{
    max-width:365px!important;
    margin:0!important;
    color:#dbe7f0!important;
    -webkit-text-fill-color:#dbe7f0!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1.52!important;
  }
  html body.contact-page:not(#home)>.hero .actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:18px!important;
  }
  html body.contact-page:not(#home)>.hero .button{
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
  html body.contact-page:not(#home)>.hero .hero-proof,
  html body.contact-page:not(#home)>.hero .hero-aside{
    display:none!important;
  }

  /* Light estimate form. review-theme-base.css was painting this navy. */
  html body.contact-page:not(#home) main>.content:first-child .form{
    margin-top:20px!important;
    padding:16px!important;
    gap:9px!important;
    border:1px solid #d9e3eb!important;
    border-radius:16px!important;
    background:#f6f9fc!important;
    background-image:none!important;
    box-shadow:0 8px 22px rgba(14,39,61,.07)!important;
    backdrop-filter:none!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form input,
  html body.contact-page:not(#home) main>.content:first-child .form select,
  html body.contact-page:not(#home) main>.content:first-child .form textarea{
    width:100%!important;
    min-height:50px!important;
    padding:12px 13px!important;
    border:1px solid #d5e0e8!important;
    border-radius:10px!important;
    background:#fff!important;
    background-image:none!important;
    color:#14283f!important;
    -webkit-text-fill-color:#14283f!important;
    font-size:16px!important;
    box-shadow:none!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form input::placeholder,
  html body.contact-page:not(#home) main>.content:first-child .form textarea::placeholder{
    color:#7f8f9f!important;
    -webkit-text-fill-color:#7f8f9f!important;
    opacity:1!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form select:required:invalid{
    color:#7f8f9f!important;
    -webkit-text-fill-color:#7f8f9f!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form select option{
    background:#fff!important;
    color:#14283f!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form textarea{
    min-height:104px!important;
    line-height:1.5!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form input:focus,
  html body.contact-page:not(#home) main>.content:first-child .form select:focus,
  html body.contact-page:not(#home) main>.content:first-child .form textarea:focus{
    border-color:#2999f5!important;
    background:#fff!important;
    box-shadow:0 0 0 3px rgba(41,153,245,.11)!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form button{
    min-height:50px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }

  /* The shared mobile stylesheet has #home inside :not(), so its light-card
     selectors were beating the dark contact card even though this CSS loads later. */
  html body.contact-page:not(#home) main>.content:first-child .contact-card{
    margin-top:20px!important;
    padding:22px 18px 18px!important;
    border:1px solid rgba(105,151,194,.28)!important;
    border-radius:18px!important;
    color:#fff!important;
    background:linear-gradient(155deg,#0c263f,#081b2e 58%,#061522)!important;
    background-image:linear-gradient(155deg,#0c263f,#081b2e 58%,#061522)!important;
    box-shadow:0 10px 26px rgba(7,28,46,.14)!important;
    backdrop-filter:none!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card h2{
    margin:0 0 12px!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    text-shadow:none!important;
    opacity:1!important;
    font-size:27px!important;
    line-height:1.05!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card>p{
    margin:0!important;
    color:#c5d3df!important;
    -webkit-text-fill-color:#c5d3df!important;
    text-shadow:none!important;
    opacity:1!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .eyebrow{
    color:#67baff!important;
    -webkit-text-fill-color:#67baff!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .contact-list{
    margin-top:16px!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .contact-item{
    padding:12px 0!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .contact-item:last-child{
    border-bottom:0!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .contact-item strong{
    color:#78c4ff!important;
    -webkit-text-fill-color:#78c4ff!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .contact-item a,
  html body.contact-page:not(#home) main>.content:first-child .contact-card .contact-item span{
    color:#f2f7fb!important;
    -webkit-text-fill-color:#f2f7fb!important;
    opacity:1!important;
    font-size:13.5px!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:16px!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .button{
    min-height:44px!important;
    width:100%!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card .button.alt{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    background:rgba(255,255,255,.055)!important;
    background-image:none!important;
    border:1px solid rgba(255,255,255,.28)!important;
  }

  /* Keep every dark section readable, including the final section which is not .alt. */
  html body.contact-page:not(#home) main>.content.alt h1,
  html body.contact-page:not(#home) main>.content.alt h2,
  html body.contact-page:not(#home) main>.content.alt h3,
  html body.contact-page:not(#home) main>.contact-final-section h1,
  html body.contact-page:not(#home) main>.contact-final-section h2,
  html body.contact-page:not(#home) main>.contact-final-section h3{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    text-shadow:none!important;
    opacity:1!important;
  }
  html body.contact-page:not(#home) main>.content.alt p,
  html body.contact-page:not(#home) main>.content.alt li,
  html body.contact-page:not(#home) main>.content.alt .lead,
  html body.contact-page:not(#home) main>.contact-final-section p,
  html body.contact-page:not(#home) main>.contact-final-section li,
  html body.contact-page:not(#home) main>.contact-final-section .lead{
    color:#c9d8e5!important;
    -webkit-text-fill-color:#c9d8e5!important;
    text-shadow:none!important;
    opacity:1!important;
  }
  html body.contact-page:not(#home) main>.contact-final-section{
    color:#fff!important;
    background:radial-gradient(circle at 90% 10%,rgba(41,153,245,.12),transparent 32%),linear-gradient(145deg,#0a2035,#071827)!important;
    border-color:rgba(105,151,194,.24)!important;
  }
  html body.contact-page:not(#home) main>.contact-final-section .eyebrow{
    color:#67baff!important;
    -webkit-text-fill-color:#67baff!important;
  }
  html body.contact-page:not(#home) main>.contact-final-section .button.alt{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.24)!important;
  }
}

@media (max-width:390px){
  html body.contact-page:not(#home)>.hero .hero-copy{
    padding:26px 15px 24px!important;
  }
  html body.contact-page:not(#home)>.hero h1{
    font-size:33px!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .form{
    padding:14px!important;
  }
  html body.contact-page:not(#home) main>.content:first-child .contact-card{
    padding:20px 16px 16px!important;
  }
}