/* v448G — Contact hero restore.
   The broad subpage rail made the contact hero look split and rời rạc.
   Restore the older, cleaner left-aligned support hero layout. */

body:has(.contact-hero) .contact-hero{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:clamp(86px, 8vw, 132px) 0 clamp(84px, 7vw, 118px) !important;
  min-height:auto !important;
  background:
    radial-gradient(circle at 78% 30%, rgba(219,234,254,.75), transparent 36%),
    linear-gradient(180deg,#f8fbff 0%,#ffffff 100%) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Force this hero back to a single left-aligned content column. */
body:has(.contact-hero) .contact-hero > .container{
  display:block !important;
  width:min(calc(100vw - 112px), 1280px) !important;
  max-width:1280px !important;
  margin-left:max(56px, calc((100vw - 1280px) / 2)) !important;
  margin-right:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

body:has(.contact-hero) .contact-hero .eyebrow{
  margin:0 0 18px !important;
  text-align:left !important;
  font-size:clamp(16px, 1.15vw, 22px) !important;
  letter-spacing:.08em !important;
}

body:has(.contact-hero) .contact-hero h1{
  max-width:980px !important;
  margin:0 0 22px !important;
  text-align:left !important;
  font-size:clamp(48px, 5vw, 78px) !important;
  line-height:1.03 !important;
  letter-spacing:-.055em !important;
}

body:has(.contact-hero) .contact-hero p.muted{
  max-width:1040px !important;
  margin:0 0 30px !important;
  text-align:left !important;
  font-size:clamp(22px, 1.7vw, 31px) !important;
  line-height:1.48 !important;
  color:#58677d !important;
}

body:has(.contact-hero) .contact-hero .hero-actions{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:18px !important;
  margin:0 !important;
  flex-wrap:wrap !important;
  width:auto !important;
  max-width:none !important;
}

body:has(.contact-hero) .contact-hero .hero-actions .btn{
  min-width:230px !important;
  min-height:62px !important;
  padding:18px 30px !important;
  font-size:clamp(18px, 1.2vw, 24px) !important;
  font-weight:950 !important;
  border-radius:999px !important;
  line-height:1.1 !important;
}

/* Keep the visual band below close to the restored hero rhythm. */
body:has(.contact-hero) .contact-hero + .page-visual-band{
  padding-top:clamp(32px, 3vw, 48px) !important;
}

/* Stop earlier v436 contact grid rule from splitting this hero again. */
body:has(.contact-hero) .contact-hero > .container > *{
  grid-column:auto !important;
  justify-self:start !important;
}

@media(max-width:980px){
  body:has(.contact-hero) .contact-hero{
    padding:64px 0 72px !important;
  }

  body:has(.contact-hero) .contact-hero > .container{
    width:min(calc(100vw - 44px), 1280px) !important;
    margin-left:22px !important;
  }

  body:has(.contact-hero) .contact-hero h1{
    font-size:clamp(40px, 8vw, 58px) !important;
  }

  body:has(.contact-hero) .contact-hero p.muted{
    font-size:clamp(18px, 4vw, 24px) !important;
  }
}

@media(max-width:640px){
  body:has(.contact-hero) .contact-hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  body:has(.contact-hero) .contact-hero .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
  }
}