/* ============================================================
   JustAir 2026 — CASE STUDIES TEMPLATE modernization (page-scoped).
   ONE overlay for the shared "Case Studies Template" → every
   /case-studies/* item. Older Brix template (no heading-style
   classes) — reskin like about-modern: Sora/Manrope, mesh hero,
   readable rich-text body, floating images, quote card, pill
   buttons, navy CTA + footer, dark navbar logo / white footer logo.
   Strict brand palette only.
   JM-BUILD: case-studies-citylogo-2026-06-16b
   ============================================================ */
@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%);
  --soft:linear-gradient(180deg,hsl(220 25% 98%),hsl(220 30% 96%));
  --shadow-lg:0 30px 70px -38px rgba(33,31,84,.42);
}

/* ---- type ---- */
body{ font-family:'Manrope',system-ui,sans-serif!important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--grey-med); }
h1,h2,h3,h4,h5,h6{ font-family:'Sora',system-ui,sans-serif!important; letter-spacing:-.025em!important; color:var(--navy); }

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

/* ---- HERO (.location-hero) → on-brand mesh gradient ---- */
.location-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 560px at 82% 12%, rgba(41,171,226,.18), transparent 60%),
    radial-gradient(700px 520px at 6% 92%, rgba(34,181,115,.12), transparent 56%),
    linear-gradient(180deg,#FFFFFF 0%,#F6FAFC 60%,#ECF3F7 100%)!important;
  padding:clamp(88px,11vw,150px) 0 clamp(56px,8vw,104px)!important;
}
.location-hero h1{ font-size:clamp(2.4rem,5.5vw,4rem)!important; line-height:1.05!important; font-weight:800!important; color:var(--navy)!important; }
.hero-split{ align-items:center!important; gap:clamp(2rem,5vw,4rem)!important; }
.intro-left .w-richtext p, .intro-left p, .location-hero .w-richtext p{ color:var(--grey-med)!important; font-size:1.12rem!important; line-height:1.65!important; }
.location-hero .w-richtext a{ color:var(--sky-dk)!important; text-decoration:underline; }

/* ---- buttons → pills ---- */
.button, .default-button, .button-translated, .button-link-block{ border-radius:999px!important; font-family:'Manrope',sans-serif!important; font-weight:700!important; transition:transform .2s,box-shadow .2s!important; }
.button, .default-button, .button-translated{ padding:14px 28px!important; }
.button:hover,.default-button:hover,.button-translated:hover{ transform:translateY(-1px); }
.button, .default-button{ background:var(--navy)!important; color:#fff!important; border:none!important; box-shadow:0 12px 28px -12px rgba(33,31,84,.5)!important; }
.button-translated{ background:var(--gold)!important; color:var(--navy)!important; border:none!important; box-shadow:0 10px 26px -10px rgba(228,175,96,.7)!important; }

/* ---- article body (.content-rich-text) → readable column ---- */
.content-rich-text, .content-rich-text.w-richtext{ max-width:760px; margin-left:auto; margin-right:auto; }
.content-rich-text p{ font-size:1.12rem!important; line-height:1.78!important; color:var(--grey-med)!important; margin:0 0 1.2em!important; }
.content-rich-text h2, .content-rich-text h3, .content-rich-text h4{ color:var(--navy)!important; margin:1.6em 0 .5em!important; }
.content-rich-text a{ color:var(--sky-dk)!important; text-decoration:underline; }
.content-rich-text ul, .content-rich-text ol{ font-size:1.08rem; line-height:1.75; color:var(--grey-med); }
.content-rich-text blockquote{ border-left:4px solid var(--sky); background:var(--light-bg); border-radius:0 14px 14px 0; padding:1rem 1.4rem; color:var(--navy); font-family:'Sora',sans-serif; }

/* ---- images → rounded, floating ---- */
.content-image, .content-rich-text img, .sidekick-image img, .content-rich-text figure img{ border-radius:18px!important; box-shadow:var(--shadow-lg)!important; }

/* ---- testimonial / quote card ---- */
.testimonials-wrapper, .testimonial{
  background:#fff!important; border:1px solid rgba(33,31,84,.08)!important; border-radius:20px!important;
  box-shadow:0 2px 8px -2px rgba(33,31,84,.08),0 22px 50px -30px rgba(33,31,84,.42)!important;
  padding:clamp(1.6rem,3vw,2.6rem)!important;
}
.testimonial p, .testimonial .testimonial-quote, .testimonials-wrapper .testimonial-text{ font-family:'Sora',sans-serif!important; font-size:1.22rem!important; line-height:1.5!important; color:var(--navy)!important; }
.testimonial-job, .testimonial-name{ color:var(--grey-med)!important; }

/* ---- intro / subheading bands ---- */
.section-intro-wrapper, .section-subheading{ background:var(--soft)!important; }

/* ---- CTA / "Stay Connected" + footer ---- */
.footer-section, .footer-section.background-color-black{ background-color:var(--navy)!important; }
.footer-section a.footer_link, .footer-section .footer_link-list a{ color:var(--gold)!important; transition:color .2s; }
.footer-section a.footer_link:hover, .footer-section .footer_link-list a:hover{ color:#fff!important; }
.footer_logo{ content:url("https://inspiring-muffin-1f99a3.netlify.app/justair-logo-whitetext.svg")!important; }

/* ---- mobile ---- */
@media(max-width:860px){
  .hero-split{ grid-template-columns:1fr!important; }
  .location-hero{ padding:clamp(72px,16vw,96px) 0 48px!important; }
  .location-hero h1{ font-size:clamp(2rem,8vw,2.6rem)!important; }
  .content-rich-text p{ font-size:1.04rem!important; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; } }

/* tighten the hero: the "split" right side was empty, leaving an awkward gap.
   Make it a single readable column, trim the padding. */
.location-hero{ padding:clamp(56px,7vw,92px) 0 clamp(40px,6vw,68px)!important; }
.location-hero .hero-split{ display:block!important; }
.location-hero .intro-left, .location-hero .hero-stack{ max-width:820px; }

/* ============================================================
   Some case studies (e.g. Dearborn) use a .city-head hero layout instead of
   .location-hero — give it the same modern treatment: mesh gradient, Sora
   headline (.heading-9), sky language-toggle pill (.button-2), gold + navy
   CTA pills (.button-link-block / .is-alternate).
   ============================================================ */
.city-head, .city-head.tinted{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 560px at 84% 10%, rgba(41,171,226,.18), transparent 60%),
    radial-gradient(720px 520px at 4% 94%, rgba(34,181,115,.12), transparent 56%),
    linear-gradient(180deg,#FFFFFF 0%,#F6FAFC 58%,#ECF3F7 100%)!important;
  padding:clamp(72px,9vw,128px) 0 clamp(56px,8vw,104px)!important;
}
.heading-9{ font-family:'Sora',sans-serif!important; font-size:clamp(2.4rem,5.5vw,4rem)!important; line-height:1.05!important; font-weight:800!important; color:var(--navy)!important; }
.city-head .intro-left{ max-width:820px; }
.city-head .arabic, .city-head p, .city-head .intro-left p{ color:var(--grey-med)!important; font-size:1.12rem!important; line-height:1.65!important; }
.button-2, a.button-2{
  display:inline-flex!important; align-items:center; border-radius:999px!important;
  background:rgba(41,171,226,.12)!important; color:var(--sky-dk)!important;
  border:1px solid rgba(41,171,226,.28)!important; font-family:'Manrope',sans-serif!important;
  font-weight:700!important; padding:.55rem 1.15rem!important; margin-bottom:1.5rem!important; box-shadow:none!important;
}
.button-2:hover{ background:rgba(41,171,226,.2)!important; }
.button-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6rem; }
.button-link-block{
  display:inline-flex!important; align-items:center; border-radius:999px!important;
  padding:14px 26px!important; font-family:'Manrope',sans-serif!important; font-weight:700!important;
  background:var(--gold)!important; color:var(--navy)!important;
  box-shadow:0 12px 28px -12px rgba(228,175,96,.8)!important; transition:transform .2s,box-shadow .2s!important;
}
.button-link-block:hover{ transform:translateY(-1px); }
.button-link-block.is-alternate{ background:var(--navy)!important; color:#fff!important; box-shadow:0 12px 28px -12px rgba(33,31,84,.5)!important; }
.button-link-block.is-alternate .icon-small svg path{ fill:#fff!important; }
@media(max-width:860px){
  .city-head, .city-head.tinted{ padding:clamp(64px,14vw,92px) 0 56px!important; }
  .heading-9{ font-size:clamp(2rem,8vw,2.7rem)!important; }
  .button-row{ flex-direction:column; align-items:flex-start; }
}

/* de-clutter the .city-head hero: hide empty CMS placeholders (empty video
   field etc.) that render as blank boxes, and collapse the empty right half of
   the two-column hero split so the content uses the full width — no boxy gaps. */
.w-dyn-bind-empty{ display:none !important; }
.city-head .hero-split{ display:block !important; }
.city-head .intro-left, .city-head .hero-stack{ max-width:880px; }

/* Dearborn nests .location-hero INSIDE .city-head, so both render a mesh-gradient
   hero → a "frame inside a box". Neutralize the inner one so only the outer
   full-bleed .city-head hero shows (natural, like the feature pages). */
.city-head .location-hero{ background:none !important; padding:0 !important; max-width:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; }

/* Injected partner hero logo (Dearborn, Wayne County) — contained + centered in
   the hero's right slot rather than stretched like a photo illustration. */
.jm-hero-logo{
  display:block !important;
  width:100% !important;
  max-width:440px !important;
  height:auto !important;
  margin:auto !important;
  object-fit:contain !important;
  padding:clamp(8px,2vw,24px) 0 !important;
}