/* ============================================================
   JustAir 2026 — SOLUTIONS page modernization (page-scoped).
   Loaded ONLY on /solutions-copy (staging). Templated on the
   about-modern pattern: KEEPS + restyles the real Webflow navbar
   (the page has no hero-zoom iframe), dark-logo swap, mesh hero,
   Sora/Manrope, pill tabs, floating cards, on-brand CTA + footer.
   Strict brand palette only.
   ============================================================ */
/* JM-BUILD: solutions-2026-06-12a */
@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-md:0 8px 24px -8px rgba(33,31,84,.15);
  --shadow-lg:0 30px 70px -38px rgba(33,31,84,.42);
  --section-y:clamp(5rem,10vw,8rem);
}

/* ---- type ---- */
body{ font-family:'Manrope',system-ui,sans-serif!important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3,h4,h5,h6,[class*="heading-style"]{ font-family:'Sora',system-ui,sans-serif!important; letter-spacing:-.025em!important; }
.heading-style-h1{ font-size:clamp(2.25rem,6vw,4.5rem)!important; font-weight:700!important; line-height:1.05!important; text-wrap:balance; }
.heading-style-h2{ font-size:clamp(1.875rem,4vw,3rem)!important; font-weight:700!important; line-height:1.1!important; text-wrap:balance; }
.heading-style-h3{ font-size:clamp(1.375rem,2.4vw,1.875rem)!important; font-weight:600!important; line-height:1.2!important; }

/* ---- KEEP + restyle the real navbar; dark navy wordmark logo ---- */
.navbar_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-darktext.svg")!important; }

/* ============================================================
   HERO — the feature-hero band gets a soft mesh-gradient backdrop
   and a centered, balanced headline. Ends at #ECF3F7 so the wave
   SVG below blends into the next section.
   ============================================================ */
.section_feature-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 540px at 80% 12%, rgba(41,171,226,.30), transparent 58%),
    radial-gradient(720px 520px at 8% 80%, rgba(34,181,115,.16), transparent 55%),
    linear-gradient(180deg,#FFFFFF 0%,#F6FAFC 55%,#ECF3F7 100%) !important;
}
.section_feature-hero > *{ position:relative; z-index:1; }
.section_feature-hero .heading-style-h2{
  font-size:clamp(2.4rem,5.4vw,4rem)!important; font-weight:800!important;
  line-height:1.04!important; color:var(--navy)!important; max-width:18ch; margin-inline:auto;
}

/* eyebrow chip we inject above the hero headline */
.jm-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; margin-bottom:1.1rem; border-radius:999px;
  background:rgba(41,171,226,.12); border:1px solid rgba(41,171,226,.28);
  font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.02em; color:var(--sky-dk);
}
.jm-eyebrow::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--green); }

/* lede paragraph injected under the headline */
.jm-hero-lede{
  max-width:48ch; margin:1.4rem auto 0; text-align:center;
  font-family:'Manrope',sans-serif; font-size:clamp(1.05rem,1.4vw,1.2rem);
  line-height:1.6; color:var(--grey-med);
}

/* ============================================================
   TAB COMPONENT — pill tabs + floating solution cards
   ============================================================ */
.features-solution_tabs-menu{
  display:flex!important; flex-wrap:wrap; justify-content:center; gap:.5rem!important;
  max-width:760px; margin:2.5rem auto 0!important; padding:.4rem!important;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--bd); border-radius:999px; box-shadow:var(--shadow-sm);
}
.features-hero_tab-link{
  display:inline-flex!important; align-items:center; gap:.5rem;
  padding:.7rem 1.15rem!important; border-radius:999px!important;
  font-family:'Manrope',sans-serif!important; font-weight:600!important; font-size:.92rem!important;
  color:var(--grey-med)!important; background:transparent!important; border:0!important;
  transition:background .22s,color .22s,box-shadow .22s!important; cursor:pointer; white-space:nowrap;
}
.features-hero_tab-link:hover{ color:var(--navy)!important; background:rgba(41,171,226,.10)!important; }
.features-hero_tab-link.w--current{
  color:#fff!important; background:var(--navy)!important; box-shadow:var(--shadow-sm)!important;
}
.features-hero_tab-link .icon-1x1-small{ width:18px; height:18px; transition:filter .22s; }
/* navy icon -> white when the tab is active */
.features-hero_tab-link.w--current .icon-1x1-small{ filter:brightness(0) invert(1); }

.features-solution_tabs-content{ margin-top:clamp(2.5rem,4vw,3.5rem)!important; }

/* the solution card = floating white panel */
.features-solution_card{
  position:relative; overflow:hidden;
  background:#fff!important; border:1px solid rgba(33,31,84,.08)!important;
  border-radius:24px!important; box-shadow:var(--shadow-lg)!important;
  padding:clamp(1.75rem,3vw,2.75rem)!important;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.features-solution_card::after{
  content:""; position:absolute; top:-30%; right:-22%; width:55%; height:65%;
  background:radial-gradient(circle,rgba(41,171,226,.16) 0%,rgba(34,181,115,.07) 55%,transparent 72%);
  filter:blur(40px); pointer-events:none; z-index:0;
}
.features-solution_card > *{ position:relative; z-index:1; }
.features-solution_card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg),0 0 0 1px rgba(41,171,226,.18)!important; }
.features-solution_card .heading-style-h3{ color:var(--navy)!important; }
.features-solution_card p{ color:var(--grey-med)!important; line-height:1.65; }

/* any link/button inside a solution card -> sky-dark text link */
.features-solution_card a:not(.button):not(.w-button){
  color:var(--sky-dk)!important; font-weight:600; text-decoration:none;
}
.features-solution_card a:not(.button):not(.w-button):hover{ text-decoration:underline; }

/* ============================================================
   Shared section styling — wave-connection (start+end at #ECF3F7).
   Mirrors the home overlay so the page reads as one family.
   ============================================================ */
.section_audience, .section_more-features, .section_cta{ position:relative; overflow:hidden; }
.section_audience, .section_more-features{
  background:linear-gradient(180deg,#ECF3F7 0%,#F6FAFC 16%,#FFFFFF 50%,#F6FAFC 84%,#ECF3F7 100%)!important;
}
.section_more-features::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(circle at 20% 20%, rgba(41,171,226,.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(34,181,115,.12), transparent 55%);
}
.section_more-features > *{ position:relative; z-index:1; }

/* pill buttons site-wide */
.button,.button-block,.w-button,.button-2{
  font-family:'Manrope',sans-serif!important; font-weight:600!important; font-size:.95rem!important;
  border-radius:999px!important; padding:14px 26px!important; letter-spacing:-.005em!important;
  display:inline-flex!important; align-items:center; justify-content:center; width:auto!important;
  transition:transform .25s,box-shadow .25s,background-color .25s!important;
}
.button:hover,.button-block:hover,.w-button:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md)!important; }
.button.is-secondary,.button-block,.button-2{ background-color:var(--navy)!important; color:#fff!important; border:none!important; }
.button.is-secondary:hover,.button-block:hover{ background-color:var(--sky-dk)!important; }

/* "Explore Our Solutions" cards (same as home: light, lifted) */
.section_more-features .heading-style-h2.text-color-white,
.section_more-features .more-features_item .heading-style-h5{ color:var(--navy)!important; -webkit-text-fill-color:var(--navy)!important; }
.section_more-features .more-features_item{
  background:linear-gradient(135deg,#ffffff 0%,#ECF3F7 100%)!important;
  border:1px solid rgba(15,23,42,.07)!important;
  box-shadow:0 2px 8px -2px rgba(33,31,84,.08),0 18px 40px -22px rgba(33,31,84,.22)!important;
  border-radius:24px!important; overflow:hidden;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s!important;
}
.section_more-features .paragraph-white{ color:var(--grey-med)!important; }
.section_more-features .more-features_item-icon-wrapper{ border-radius:16px!important; box-shadow:0 8px 22px -8px rgba(33,31,84,.20); }
.section_more-features .more-features_link:hover .more-features_item{ transform:translateY(-6px); }
.section_more-features .more-features_link:hover .more-features_item-icon-wrapper{ transform:scale(1.08) rotate(-3deg); }

/* CTA — navy -> sky gradient + clean white card */
.section_cta{ background:radial-gradient(900px 520px at 82% 18%,rgba(41,171,226,.40),transparent 60%),linear-gradient(135deg,#211F54 0%,#196A8C 100%)!important; }
.section_cta .cta_wrapper{ background:#fff!important; border-radius:22px!important; padding:clamp(40px,5vw,64px) clamp(28px,4vw,48px)!important; box-shadow:0 40px 90px -36px rgba(33,31,84,.55)!important; }
.section_cta .heading-style-h2{ color:var(--navy)!important; }

/* Footer — deep navy + warm gold links */
.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; }

/* kill the harsh navy wave band; keep the light puzzle-piece blends */
.wave_background.dark-blue{ background-color:transparent!important; }
.background-holder{ display:none!important; }

/* ---- accessible focus ring on all interactive elements ---- */
a:focus-visible,.button:focus-visible,.w-button:focus-visible,.features-hero_tab-link:focus-visible{
  outline:3px solid rgba(41,171,226,.55)!important; outline-offset:3px; border-radius:999px;
}

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

/* 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; }