/* ============================================================
   JustAir 2026 — FEATURED PROJECTS page modernization (page-scoped).
   Loaded ONLY on /locations/learn-more-copy (staging). Templated on
   the about-modern pattern: KEEPS + restyles the real Webflow navbar,
   dark-logo swap, mesh hero, floating project cards, clean testimonial
   cards, V2 underline form. Strict brand palette only.
   ============================================================ */
/* JM-BUILD: featured-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);
  --v2-shadow:0px 4px 4px rgba(117,117,117,.25);
  --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"]{ font-family:'Sora',system-ui,sans-serif!important; letter-spacing:-.025em!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 — flat green .city-head -> on-brand mesh gradient
   (navy -> sky-dark, with a green accent that nods to the original).
   ============================================================ */
.city-head.bggreen{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 540px at 82% 16%, rgba(41,171,226,.42), transparent 60%),
    radial-gradient(720px 520px at 8% 88%, rgba(34,181,115,.28), transparent 55%),
    linear-gradient(135deg,#211F54 0%,#196A8C 100%) !important;
  padding:clamp(96px,12vw,150px) 0 clamp(80px,9vw,120px) !important;
}
.city-head.bggreen > *{ position:relative; z-index:1; }
.city-head.bggreen .txt-white,
.city-head.bggreen .txt-white *{ color:#fff!important; }
.city-head.bggreen h1{
  font-size:clamp(2.6rem,6vw,4.6rem)!important; line-height:1.03!important; font-weight:800!important;
  text-wrap:balance; max-width:18ch;
}
.city-head.bggreen .full-width-text,
.city-head.bggreen p{ font-size:clamp(1.05rem,1.4vw,1.2rem)!important; line-height:1.65!important; opacity:.92; max-width:62ch; }

/* eyebrow chip injected above the hero h1 */
.jm-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; margin-bottom:1.2rem; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.02em; color:#fff;
}
.jm-eyebrow::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--green); box-shadow:0 0 0 4px rgba(34,181,115,.3); }

/* ============================================================
   INTRO / section headings
   ============================================================ */
.section-intro-wrapper, .section-subheading{ background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFC 100%)!important; }
.centered-heading, .intro-center h2, .section-subheading h2{ color:var(--navy)!important; }

/* ============================================================
   PROJECT CARDS — floating white cards with image on top.
   .city-card-wrapper.is-full -> .card-image + .card-content
   ============================================================ */
.city-card-wrapper{
  position:relative; overflow:hidden;
  background:#fff!important; border:1px solid rgba(33,31,84,.08)!important;
  border-radius:24px!important; box-shadow:var(--shadow-sm),0 22px 46px -28px rgba(33,31,84,.28)!important;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s!important;
}
.city-card-wrapper:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md),0 34px 64px -28px rgba(33,31,84,.34)!important; }
.card-image{
  width:100%!important; aspect-ratio:16/10; object-fit:cover!important; display:block!important;
  border-radius:0!important;
}
.card-content, .city-card-text{ padding:clamp(1.4rem,2.4vw,2rem)!important; }
.city-card-text .heading-h5-2{ color:var(--navy)!important; font-size:clamp(1.2rem,2vw,1.5rem)!important; line-height:1.2!important; margin-bottom:.6rem!important; }
.city-card-text .w-richtext, .city-card-text p{ color:var(--grey-med)!important; line-height:1.6!important; }

/* "view more" link -> sky-dark pill-link with arrow affordance */
.actions .view-more, a.view-more{
  display:inline-flex!important; align-items:center; gap:.45rem;
  color:var(--sky-dk)!important; font-family:'Manrope',sans-serif!important; font-weight:700!important;
  text-decoration:none!important; transition:gap .2s,color .2s;
}
.actions .view-more:hover, a.view-more:hover{ gap:.75rem; color:var(--navy)!important; }
.view-more .vectors-wrapper-2{ transition:transform .2s; }

/* ============================================================
   TESTIMONIALS — clean white cards
   ============================================================ */
.testimonials-wrapper, .test-card{ }
.test-card{
  background:#fff!important; border:1px solid rgba(33,31,84,.08)!important;
  border-radius:20px!important; box-shadow:var(--shadow-sm),0 22px 46px -30px rgba(33,31,84,.25)!important;
  padding:clamp(1.6rem,2.6vw,2.4rem)!important; transition:transform .28s,box-shadow .28s;
}
.test-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md)!important; }
.test-container, .test-content{ color:var(--navy)!important; }
.test-content{ font-family:'Sora',sans-serif!important; font-size:clamp(1.05rem,1.5vw,1.25rem)!important; line-height:1.5!important; font-weight:500!important; }
.test-headshot{ border-radius:999px!important; box-shadow:0 6px 16px -8px rgba(33,31,84,.4); }
.test-author{ color:var(--navy)!important; font-family:'Sora',sans-serif!important; font-weight:700!important; }
.testimonial-job, .brix---color-accent-2{ color:var(--sky-dk)!important; font-weight:600!important; }

/* ============================================================
   GET CONNECTED FORM — V2 underline style (mirrors about-modern)
   ============================================================ */
.application-form, .form-wrapper, .form-block{ background:transparent!important; color:var(--navy)!important; }
.form-h2, .application-form h2{ color:var(--navy)!important; }
.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; box-sizing:border-box!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; }
.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 label, .application-form .field-block > div{ color:var(--grey-med)!important; font-family:'Manrope',sans-serif!important; font-weight:600!important; font-size:.8rem!important; }
.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); }

/* ============================================================
   Pill buttons site-wide + footer
   ============================================================ */
.button,.button-block,.w-button,.default-button{
  font-family:'Manrope',sans-serif!important; font-weight:600!important; border-radius:999px!important;
  transition:transform .25s,box-shadow .25s!important;
}
.button:hover,.button-block:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md)!important; }

.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; }

/* ---- accessible focus ring ---- */
a:focus-visible,.button:focus-visible,.w-button:focus-visible,.view-more: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; } 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; }