/* ============================================================
   JustAir 2026 — ABOUT page modernization (page-scoped).
   Loaded only on the About staging copy. Pure CSS refresh of the
   older "hero is-blue" + Brix-template About layout.
   Form + cards follow the @justair-solutions/components V2 spec.
   ============================================================ */
@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%);
  --v2-shadow:0px 4px 4px rgba(117,117,117,.25);
  --soft:linear-gradient(180deg,hsl(220 25% 98%),hsl(220 30% 96%));
}

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

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

/* ---- HERO: flat blue -> on-brand mesh gradient ---- */
.hero.is-blue{
  background:
    radial-gradient(900px 540px at 82% 18%, rgba(41,171,226,.42), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(34,181,115,.20), transparent 55%),
    linear-gradient(135deg,#211F54 0%,#196A8C 100%) !important;
  position:relative; overflow:hidden;
  padding:clamp(96px,12vw,156px) 0 !important;
}
.hero.is-blue .txt-white, .hero.is-blue .txt-white *{ color:#fff!important; }
.hero.is-blue h1{ font-size:clamp(2.6rem,6vw,4.6rem)!important; line-height:1.03!important; font-weight:800!important; }
.hero.is-blue .txt-white p{ font-size:1.15rem; line-height:1.6; opacity:.92; }
.hero-image-wrapper{ overflow:visible!important; }
.split-hero-img{ width:100%!important; height:auto!important; object-fit:contain!important; max-width:100%!important; border-radius:18px!important; box-shadow:0 40px 90px -36px rgba(0,0,0,.55)!important; }
.button-row .default-button{
  border-radius:999px!important; font-family:'Manrope',sans-serif!important; font-weight:600!important;
  padding:14px 26px!important; transition:transform .2s,box-shadow .2s!important;
}
.button-row .default-button:hover{ transform:translateY(-1px); }
.button-row .default-button:first-child{ background:var(--gold)!important; color:var(--navy)!important; border:none!important; box-shadow:0 10px 26px -10px rgba(228,175,96,.7)!important; }
.button-row .default-button:last-child{ background:transparent!important; color:#fff!important; border:1.5px solid rgba(255,255,255,.55)!important; }

/* ---- mission / vision headings ---- */
.our-values{ background:var(--soft)!important; }
.text-color-dark, h2.text-color-dark{ color:var(--navy)!important; }

/* ============================================================
   "We Value" — compact 3-col grid of deep-navy value cards
   (home-page feel: strong indigo/navy, white text, sky accent).
   Accordion still works (click to expand description); titles
   always visible — nothing hidden.
   ============================================================ */
.brix---grid-1-column-gap-row-0{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
}
.brix---accordion-item-wrapper-v2{
  position:relative; margin:0!important; overflow:hidden;
  border-radius:16px!important;
  background:#211F54!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 2px 8px -2px rgba(20,18,50,.5),0 22px 46px -28px rgba(20,18,50,.7)!important;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.brix---accordion-item-wrapper-v2:hover{
  transform:translateY(-3px);
  border-color:rgba(41,171,226,.6)!important;
  box-shadow:0 10px 26px -10px rgba(20,18,50,.55),0 30px 60px -28px rgba(41,171,226,.35)!important;
}
/* sky accent bar down the left edge */
.brix---accordion-item-wrapper-v2::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#29ABE2,rgba(41,171,226,.45)); z-index:2;
}
.brix---accordion-header{ padding:22px 22px 22px 26px!important; }
/* white text on navy (this restores the titles + colors them) */
.brix---accordion-header, .brix---accordion-header *{ color:#ffffff!important; }
.brix---accordion-header h3,.brix---accordion-header h4,.brix---accordion-header [class*="heading"],
.brix---accordion-header [class*="text"]{ font-family:'Sora',sans-serif!important; font-size:1.02rem!important; line-height:1.25!important; margin:0!important; }
/* expandable description (when opened) */
.brix---accordion-content-wrapper-v2, .brix---accordion-content-wrapper-v2 *{ color:rgba(255,255,255,.82)!important; }
.brix---accordion-content-wrapper-v2{ padding:0 24px 18px 26px!important; }
/* + toggle icon -> white */
.brix---accordion-header svg,
.brix---accordion-header svg path,
.brix---accordion-header [class*="icon"] *{ color:#fff!important; stroke:#fff!important; fill:currentColor; }
@media(max-width:900px){ .brix---grid-1-column-gap-row-0{ grid-template-columns:repeat(2,1fr)!important; } }
@media(max-width:600px){ .brix---grid-1-column-gap-row-0{ grid-template-columns:1fr!important; } }

/* ---- team grid ---- */
[class*="team"] img, .team-member img, .team img{ border-radius:14px!important; }

/* ============================================================
   FORM — V2 component-library style.
   Flat-blue section -> clean light surface; inputs become MUI
   "standard" (underline-only): transparent, 2px grey underline,
   dark navy bold text, 4px gold underline on focus.
   ============================================================ */
/* the blue is var(--steel-blue) #2596be on .cta-block + .application-form + .form-wrapper */
.cta-block{
  background:linear-gradient(180deg,var(--light-bg) 0%,#ffffff 100%)!important;
  color:var(--navy)!important; border-radius:18px!important;
}
.application-form, .form-wrapper, .form-block, .form{
  background:transparent!important; background-color:transparent!important; color:var(--navy)!important;
}
.form-h2, .cta-block .form-h2, .application-form h2, .cta-block h2{ color:var(--navy)!important; }
.application-form .form-wrapper > div{ color:var(--grey-med)!important; }
.cta-block, .cta-block p, .cta-block div, .cta-block .form-wrapper *,
.cta-block [class*="brix---"]{ color:var(--navy)!important; }
.cta-block a{ color:var(--sky-dk)!important; text-decoration:underline; }

/* inputs: standard underline style */
.application-form .text-field,
.application-form .w-input,
.application-form .w-select,
.application-form textarea.w-input{
  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;
  font-size:1rem!important;
  letter-spacing:-.01em!important;
  padding:12px 2px!important;
  box-shadow:none!important;
  transition:border-color .2s,border-width .2s!important;
}
.application-form .text-field::placeholder,
.application-form .w-input::placeholder{ color:var(--grey)!important; font-weight:600!important; opacity:1; }
.application-form .text-field:focus,
.application-form .w-input:focus,
.application-form .w-select:focus,
.application-form textarea.w-input:focus{
  border-bottom:4px solid var(--gold)!important;
  outline:none!important;
}
/* select was clipping its option text — give it height + box-sizing */
.application-form .text-field, .application-form .w-input,
.application-form .w-select, .application-form textarea.w-input{ box-sizing:border-box!important; }
.application-form .w-select{
  height:auto!important; min-height:56px!important; line-height:1.6!important;
  padding-top:15px!important; padding-bottom:15px!important;
}
.application-form .field-block{ margin-bottom:18px!important; }
.application-form .field-block > div{ margin-bottom:2px!important; }
/* labels like "Select one" */
.application-form .field-block > div,
.application-form label{ color:var(--grey-med)!important; font-family:'Manrope',sans-serif!important; font-weight:600!important; font-size:.8rem!important; }

/* submit -> gold pill (V2 CTA) */
.application-form .default-button,
.application-form .w-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;
}
.application-form .default-button:hover,
.application-form .w-button:hover{ transform:translateY(-1px); }

/* jobs "no openings" empty-state block — match the light surface */
.empty-state, .collection-list-wrapper .w-dyn-empty{
  background:#fff!important; color:var(--navy)!important;
  border:1px solid var(--bd)!important; border-radius:10px!important; box-shadow:var(--v2-shadow)!important;
}

/* ============================================================
   "We Value" SPOTLIGHT (built by about-modern.js): left navy
   panel shows the active value; right list swaps it on hover.
   The .brix grid above is the no-JS fallback (JS hides it).
   ============================================================ */
/* once JS builds the spotlight it marks the grid — hide the fallback grid */
.brix---grid-1-column-gap-row-0[data-jm-spot]{ display:none!important; }
.jm-vspot{ display:grid; grid-template-columns:1.35fr 1fr; gap:24px; max-width:1080px; margin:0 auto; align-items:stretch; }
.jm-vstage{
  position:relative; overflow:hidden; color:#fff;
  background:#211F54;
  border-radius:20px; padding:clamp(32px,4vw,52px); min-height:340px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 22px 50px -28px rgba(20,18,50,.7);
}
.jm-vstage::after{ content:""; position:absolute; top:-30%; right:-18%; width:60%; height:70%;
  background:radial-gradient(circle,rgba(41,171,226,.4),transparent 70%); filter:blur(50px); pointer-events:none; }
.jm-vnum{ position:relative; font-family:'Sora',sans-serif; font-weight:800; font-size:.85rem; letter-spacing:.18em; color:#29ABE2; }
.jm-vtitle{ position:relative; font-family:'Sora',sans-serif!important; font-weight:800;
  font-size:clamp(1.7rem,3vw,2.4rem)!important; color:#fff!important; margin:10px 0 16px!important; line-height:1.1; }
.jm-vdesc{ position:relative; font-family:'Manrope',sans-serif; font-size:1.08rem; line-height:1.6; color:rgba(255,255,255,.85); margin:0; max-width:46ch; }
.jm-vlist{ display:flex; flex-direction:column; gap:2px; justify-content:center; }
.jm-vitem{ text-align:left; border:0; background:transparent; padding:13px 18px; border-radius:10px;
  border-left:3px solid transparent; font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem;
  color:#211F54; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.jm-vitem:hover,.jm-vitem.active{ background:rgba(41,171,226,.12); border-left-color:#29ABE2; color:#196A8C; }
@media(max-width:820px){ .jm-vspot{ grid-template-columns:1fr; } .jm-vstage{ min-height:230px; } }

/* ---- footer ---- */
.footer-section,.footer-section.background-color-black{ background-color:var(--navy)!important; }
.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; }

@media (prefers-reduced-motion: reduce){ *{ 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; }