:root{ --brand:#16a34a; }
body{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}

/* --------------------------------------------------------------------------
   Sticky header visibility fix
   --------------------------------------------------------------------------
   The header is intentionally sticky. When Tailwind CDN is blocked, classes
   like bg-white/95 and backdrop-blur won't exist, making the header appear
   transparent and causing "menu overlay" on scrolled content.
   The rules below ensure the header always has an opaque background.
----------------------------------------------------------------------------*/

header{background:rgba(255,255,255,.98)!important;}

/* Tailwind-like fallbacks for special utility class names used in HTML */
.bg-white\/95{background:rgba(255,255,255,.95)!important;}
.backdrop-blur{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;}
.border-gray-200{border-color:#e5e7eb!important;}
.ring-1{box-shadow:0 0 0 1px rgba(22,163,74,.18) inset!important;}
.ring-green-100{--ring: rgba(187,247,208,.9); box-shadow:0 0 0 1px var(--ring) inset!important;}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops, #ecfdf5, #ffffff))!important;}
.from-green-50{--tw-gradient-from:#f0fdf4!important;}
.to-white{--tw-gradient-to:#ffffff!important;}

/* Slight shadow so text never visually mixes with header */
header{box-shadow:0 1px 0 rgba(15,23,42,.06)!important;}

/* --------------------------------------------------------------------------
   Tailwind CDN fallback utilities
   --------------------------------------------------------------------------
   This project uses Tailwind utility classes in the HTML. If the Tailwind
   CDN is blocked (common on some corporate/mobile networks), the site becomes
   unstyled and the header/menu appears duplicated.

   The lightweight utilities below provide a safe fallback for the most-used
   classes across pages (layout + spacing + typography + basic colors).
----------------------------------------------------------------------------*/

*,*::before,*::after{box-sizing:border-box}
img,iframe{max-width:100%;height:auto}

/* display */
.hidden{display:none!important}
.block{display:block!important}
.inline-block{display:inline-block!important}
.flex{display:flex!important}
.grid{display:grid!important}

/* flex */
.flex-col{flex-direction:column!important}
.flex-row{flex-direction:row!important}
.items-center{align-items:center!important}
.justify-between{justify-content:space-between!important}
.justify-center{justify-content:center!important}
.shrink-0{flex-shrink:0!important}

/* gaps */
.gap-2{gap:.5rem!important}
.gap-3{gap:.75rem!important}
.gap-6{gap:1.5rem!important}
.gap-8{gap:2rem!important}
.gap-10{gap:2.5rem!important}

/* spacing */
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:.75rem!important}
.mt-5{margin-top:1.25rem!important}
.mt-6{margin-top:1.5rem!important}
.mt-8{margin-top:2rem!important}
.mt-16{margin-top:4rem!important}
.ml-2{margin-left:.5rem!important}

.px-3{padding-left:.75rem!important;padding-right:.75rem!important}
.px-4{padding-left:1rem!important;padding-right:1rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-4{padding-top:1rem!important;padding-bottom:1rem!important}
.py-10{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
.py-16{padding-top:4rem!important;padding-bottom:4rem!important}
.py-20{padding-top:5rem!important;padding-bottom:5rem!important}

/* width containers */
.max-w-7xl{max-width:80rem!important}
.max-w-5xl{max-width:64rem!important}
.w-full{width:100%!important}
.h-full{height:100%!important}
.h-auto{height:auto!important}

/* text */
.text-xs{font-size:.75rem!important;line-height:1rem!important}
.text-sm{font-size:.875rem!important;line-height:1.25rem!important}
.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}
.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}
.font-bold{font-weight:700!important}
.font-semibold{font-weight:600!important}
.tracking-wide{letter-spacing:.025em!important}
.leading-tight{line-height:1.25!important}

/* colors */
.bg-white{background:#fff!important}
.bg-gray-50{background:#f9fafb!important}
.text-gray-600{color:#4b5563!important}
.text-gray-700{color:#374151!important}
.text-gray-900{color:#111827!important}
.text-green-600{color:var(--brand)!important}

/* borders & effects */
.border{border:1px solid #e5e7eb!important}
.border-t{border-top:1px solid #e5e7eb!important}
.border-b{border-bottom:1px solid #e5e7eb!important}
.rounded-lg{border-radius:.5rem!important}
.rounded-2xl{border-radius:1rem!important}
.overflow-hidden{overflow:hidden!important}
.shadow{box-shadow:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.08)!important}

/* position */
.sticky{position:sticky!important}
.top-0{top:0!important}
.z-50{z-index:50!important}

/* grid cols */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* Responsive (md = 768px, lg = 1024px) */
@media (min-width:768px){
  .md\:hidden{display:none!important}
  .md\:flex{display:flex!important}
  .md\:grid{display:grid!important}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .md\:flex-row{flex-direction:row!important}
}
@media (min-width:1024px){
  .lg\:block{display:block!important}
}
/* Compact Header */
.brand-title-text{font-family:'Cinzel',serif;font-weight:900;letter-spacing:.2px;font-size:20px;line-height:1;color:var(--brand)}
.tagline{font-size:10.5px;color:#64748b;margin-top:2px}
.navlink{font-weight:600;font-size:14px;padding:.5rem .6rem;border-radius:.6rem;color:#0f172a}
.navlink:hover{background:#f1f5f9}
.btn-primary{background:var(--brand);color:white;padding:.6rem 1rem;border-radius:999px;display:inline-block;font-weight:700;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn-secondary{border:1px solid var(--brand);color:var(--brand);padding:.6rem 1rem;border-radius:999px;font-weight:700;background:white}
.btn-compact{padding:.45rem .85rem}
.btn-large{padding:.7rem 1.1rem}
.section-title{font-size:1.75rem;font-weight:800}
.card{background:white;border:1px solid #e5f3ea;border-radius:1rem;padding:1rem}
.card-title{font-weight:700;font-size:1.1rem;margin-bottom:.25rem;color:#065f46}
.card-text{color:#475569}
.logo-tile{background:white;border:1px dashed #d1fae5;border-radius:1rem;padding:1.25rem;text-align:center;color:#065f46}
.page-title{font-size:2rem;font-weight:900;color:#065f46}
.hero-title{font-size:2.5rem;font-weight:900;line-height:1.15}
.lead{font-size:1.05rem;color:#475569}
.input{width:100%;border:1px solid #e5e7eb;border-radius:.75rem;padding:.65rem .9rem}
.label{font-size:.8rem;color:#64748b;display:block;margin-bottom:.35rem}
@media (min-width:768px){
  .hero-title{font-size:3rem}
}

.h-9{height:2.25rem}


/* Professional compact menu */
.navlink{position:relative;font-weight:700;font-size:15px;padding:.5rem .75rem;border-radius:.6rem;color:#0f172a}
.navlink:hover{background:#ecfdf5;color:var(--brand)}
.navlink::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-6px;height:2px;background:transparent;transition:all .2s ease}
.navlink:hover::after{background:var(--brand)}
.navlink.is-active{background:#ecfdf5;color:var(--brand)}
.navlink.is-active::after{background:var(--brand)}



/* Force single-line main menu and tighten spacing */
#mainNav{flex-wrap:nowrap;gap:.25rem}
.navlink{font-size:14px;padding:.45rem .6rem}
/* Prevent header wrap at common widths */
@media (max-width:1280px){
  .brand-title-text{font-size:18px}
}


/* Override: smaller media width for IAQ image */

/* IAQ image explicit size (avoids Tailwind max-w-md 28rem) */
.iaq-img{max-width:14rem;width:100%;height:auto;}


/* Normalized content image sizes across service pages */
.content-img{max-width:720px;width:100%;height:auto;display:block;margin-left:auto;margin-right:auto;}
@media (min-width:1024px){ .content-img{max-width:640px} }  /* keep images comfortable on desktops */
@media (min-width:1280px){ .content-img{max-width:700px} }


/* Clients collage banner */
.clients-banner{
  max-width: 1000px;
  width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 1rem;
  border: 1px solid #e5f3ea;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
@media (min-width:1024px){
  .clients-banner{ max-width: 900px; }
}