/* ============================================================
   JustAir 2026 — CONTACT page modernization (page-scoped).
   IMPORTANT: load ONLY on a /contact-copy staging duplicate, never
   on the production /contact page. Templated on about-modern:
   keeps + restyles the navbar, dark-logo swap, mesh treatment on the
   contact section, V2 underline-style HubSpot form. Brand palette only.
   ============================================================ */
/* JM-BUILD: contact-2026-06-13a */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  --navy:#211F54; --sky:#29ABE2; --sky-dk:#196A8C; --gold:#E4AF60; --green:#22B573;
  --grey:#98A5B2; --grey-med:#4B5157; --light-bg:#ECF3F7; --bd:hsl(220 20% 90%);
  --shadow-sm:0 2px 8px -2px rgba(33,31,84,.08);
  --shadow-lg:0 30px 70px -38px rgba(33,31,84,.42);
}

body{ font-family:'Manrope',system-ui,sans-serif!important; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,[class*="heading"],.form-h2{ font-family:'Sora',system-ui,sans-serif!important; letter-spacing:-.025em!important; }

.navbar_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-darktext.svg")!important; }

/* ---- the contact section becomes a soft mesh-gradient surface ---- */
.brix---section-contact-v12{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 560px at 88% 12%, rgba(41,171,226,.26), transparent 58%),
    radial-gradient(700px 520px at 6% 92%, rgba(34,181,115,.14), transparent 55%),
    linear-gradient(180deg,#FFFFFF 0%,#F6FAFC 60%,#ECF3F7 100%) !important;
  padding:clamp(80px,10vw,140px) 0 !important;
}
.brix---section-contact-v12 > *{ position:relative; z-index:1; }

/* left column copy */
.brix---color-neutral-814{ color:var(--navy)!important; }
.brix---color-neutral-814 h1,.brix---color-neutral-814 h2{
  font-size:clamp(2.4rem,5vw,3.6rem)!important; font-weight:800!important; line-height:1.05!important; color:var(--navy)!important;
}
.brix---color-neutral-816{ color:var(--grey-med)!important; font-size:clamp(1.05rem,1.4vw,1.2rem)!important; line-height:1.65!important; }

/* NOTE: the Webflow ".brix---contact-v12-half-bg-right" decorative panel
   has no rendered box on this template (hidden/zero-size — confirmed via
   red-debug), so it is intentionally NOT styled. The right "Contact
   Details" column lives on the light mesh with navy headings, matching the
   site's other light surfaces. */

/* right "Contact Details" column — quiet labels + clear links */
.brix---color-neutral-816, .brix---text-uppercase{ color:var(--grey-med)!important; }
.brix---section-contact-v12 a.brix---link-big,
.brix---section-contact-v12 .brix---text-200-bold-3{ color:var(--sky-dk)!important; font-weight:700!important; }
.brix---section-contact-v12 a:hover{ color:var(--navy)!important; }

/* the form wrapper -> floating white card */
.form-wrapper{
  background:#fff!important; border:1px solid rgba(33,31,84,.08)!important; border-radius:22px!important;
  padding:clamp(28px,4vw,44px)!important; box-shadow:var(--shadow-lg)!important;
}
.form-h2{ color:var(--navy)!important; }

/* HubSpot embedded form sits in .hs-form-frame — give it breathing room.
   (HubSpot renders its inputs in an iframe/shadow we can't deeply restyle;
   we frame it cleanly and let HubSpot's own theme handle field chrome.) */
.hs-form-frame{ min-height:420px; }

/* any non-HubSpot native inputs (fallback) -> V2 underline style */
.form input.w-input, .form textarea.w-input, .form select.w-select{
  background:transparent!important; border:none!important; border-bottom:2px solid var(--grey)!important;
  border-radius:0!important; color:var(--navy)!important; font-family:'Manrope',sans-serif!important;
  font-weight:600!important; padding:12px 2px!important; box-shadow:none!important; transition:border-color .2s,border-width .2s!important;
}
.form input.w-input:focus, .form textarea.w-input:focus, .form select.w-select:focus{
  border-bottom:4px solid var(--gold)!important; outline:none!important;
}
.form .w-button, .form .default-button{
  background:var(--gold)!important; color:var(--navy)!important; border:none!important; border-radius:999px!important;
  font-family:'Manrope',sans-serif!important; font-weight:700!important; padding:13px 30px!important;
  box-shadow:0 10px 26px -10px rgba(228,175,96,.7)!important; transition:transform .2s!important;
}
.form .w-button:hover, .form .default-button:hover{ transform:translateY(-1px); }

/* footer */
.footer-section,.footer-section.background-color-black{ background-color:var(--navy)!important; }
.footer_logo{ max-height:40px; width:auto; }
.footer-section .footer_link-list a,.footer-section a.footer_link{ color:var(--gold)!important; transition:color .2s; }
.footer-section .footer_link-list a:hover,.footer-section a.footer_link:hover{ color:#FFFFFF!important; }

.wave_background.dark-blue{ background-color:transparent!important; }
.background-holder{ display:none!important; }

a:focus-visible,.w-button:focus-visible{ outline:3px solid rgba(41,171,226,.55)!important; outline-offset:3px; border-radius:8px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

/* white JustAir wordmark in the footer (navy bg) — keeps the colour mark */
.footer_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-whitetext.svg") !important; }