:root{
  --primary: #1f2937;
  --primary-600:#111827;
  --accent: #3b82f6;
  --bg: #ffffff;
  --text: #0b1220;
  --muted:#6b7280;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text, #0b1220);background:var(--bg, #ffffff)}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin:0 auto}

header{border-bottom:1px solid rgba(0,0,0,.06);background:var(--bg, #ffffff);position:sticky;top:0;z-index:50}
.topbar{padding:0 0 8px;}
.brand{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.brand img.logo{display:block;margin:0 auto;max-height:324px}
.brand a.hc-badge{display:inline-block;line-height:0;margin:10px auto 6px;}
.brand a.hc-badge img{display:block;width:min(220px, 50vw);height:auto}

/* NAV (Healthy Cleaning link removed) */
.nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;padding:0}
.nav a{padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.04);color:var(--primary, #1f2937);font-weight:600}
.nav a.cta{background:var(--accent, #3b82f6);color:#fff}

.hero{padding:32px 0 36px;background:linear-gradient(180deg, rgba(0,0,0,.02), transparent)}
h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 10px;color:var(--primary, #1f2937)}
p.lead{font-size:clamp(16px,2.5vw,20px);color:var(--muted, #6b7280);max-width:60ch;margin:0 auto}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:28px}
.card{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:18px;background:#fff}
.card h3{margin:6px 0 8px;color:var(--primary, #1f2937)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;justify-content:center}
.btn{padding:12px 16px;border-radius:10px;border:1px solid rgba(0,0,0,.1);background:#fff;color:var(--primary, #1f2937);font-weight:600;display:inline-block}
.btn.primary{background:var(--primary, #1f2937);border-color:var(--primary, #1f2937);color:#fff}
.btn.accent{background:var(--accent, #3b82f6);border-color:var(--accent, #3b82f6);color:#fff}

section{padding:42px 0}
footer{border-top:1px solid rgba(0,0,0,.06);padding:20px 0;margin-top:28px;background:#ffffff;color:var(--primary, #1f2937);font-size:14px;text-align:center}

/* Hide Call Now! on >=768px */
@media (min-width: 768px){ .call-now{ display:none !important; } }

/* Very narrow: allow nav to scroll instead of wrapping */
@media (max-width:420px){ .nav{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:10px} }


/* --- Healthy Cleaning button size overrides (double) --- */
.nav a.health-btn{ padding:0 !important; background:transparent !important; }
.nav a.health-btn img{ height:88px !important; width:auto !important; display:block !important; vertical-align:middle !important; }
.nav img[src*="health-button"]{ height:88px !important; width:auto !important; display:block !important; vertical-align:middle !important; }
/* Keep nav readable on tiny screens */
@media (max-width:420px){
  .nav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:10px; }
}


/* BLUE HEALTH BTN */
.nav a.health-btn{ padding:0 !important; background:transparent !important; }
.nav a.health-btn img{
  height:88px !important; width:auto !important; display:block !important; vertical-align:middle !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
  transition: transform .2s ease, filter .2s ease;
}
.nav a.health-btn:hover img{ transform: scale(1.05); filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }

/* === Header row REAL badge === */
.header-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:6px 0}
.header-row .logo{max-height:260px;height:auto;display:block}
.header-row .nav{display:flex;justify-content:center;align-items:center;gap:10px}
.header-row .health-bubble{width: clamp(180px, 22vw, 280px);height:auto;display:block}
.topbar{display:none !important}.nav.container{display:none !important}header{margin:0;padding:0}
@media (max-width:720px){.header-row{gap:10px;padding:4px 0}.header-row .logo{max-height:140px}.header-row .health-bubble{width: clamp(140px, 36vw, 200px)}}


/* === Healthy Cleaning? button: 2x size + no hover background === */
/* Double the circular 'Healthy Cleaning?' image in the nav */
.header-row .nav img[alt="Healthy Cleaning"]{
  width: clamp(88px, 7vw, 110px) !important;  /* approx 2x typical 44-55px */
  height: auto !important;
  display:block;
}

/* Remove background/hover square specifically for the Healthy link */
.header-row .nav a[href*="healthy"]{ 
  background: transparent !important; 
  box-shadow: none !important;
}
.header-row .nav a[href*="healthy"]:hover{
  background: transparent !important; 
  box-shadow: none !important;
}

/* Fallback for browsers that support :has() */
.header-row .nav a:has(img[alt="Healthy Cleaning"]){
  background: transparent !important;
  box-shadow: none !important;
}


/* === Healthy Cleaning button: larger + transparent (no hover square) === */
.header-row .nav a[href*="healthy"]{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.header-row .nav a[href*="healthy"]:hover{
  background: transparent !important;
  box-shadow: none !important;
}
/* scale image up ~50% from current */
.header-row .nav img[alt="Healthy Cleaning"]{
  width: clamp(130px, 9vw, 170px) !important;
  height: auto !important;
  display: block;
}


/* === Mobile CTA layout v2: organized grid === */
@media (max-width: 720px){
  /* Hide desktop nav on mobile; we use CTA grid instead */
  .header-row .nav{ display:flex !important; }

  /* Header: logo centered, jagged badge sized */
  .header-row{ grid-template-columns: 1fr; gap: 6px; padding: 8px 0 4px; }
  .header-row .logo{ max-height: 72px; margin: 0 auto; }
  .header-row .health-bubble{ width:min(70vw, 280px); margin:4px auto 0; }

  /* CTA grid: Services | Call | Get Quote */
  .mobile-cta-grid{ 
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    margin: 8px auto 6px; 
  }
  .mobile-cta-grid .btn{ 
    width:100%; text-align:center; padding:12px 14px; border-radius:9999px;
    background: rgba(0,0,0,.06); 
  }
  .mobile-cta-grid .btn.primary{ background: var(--accent,#3b82f6); color:#fff; }
  .mobile-cta-grid .call-btn{ font-weight:700; } /* front & center emphasis */

  /* Healthy circular button centered below grid */
  .mobile-healthy-btn{ display:block; text-align:center; margin: 6px auto 8px; }
  .mobile-healthy-btn img[alt="Healthy Cleaning"]{ 
    width: min(26vw, 120px) !important; height:auto; 
  }
  /* remove any hover/active background squares */
  .mobile-healthy-btn .healthy-link{ background:transparent !important; box-shadow:none !important; }
  .mobile-healthy-btn .healthy-link:hover{ background:transparent !important; box-shadow:none !important; }
}
/* Hide mobile-only sections on desktop */
@media (min-width: 721px){
  .mobile-cta-grid, .mobile-healthy-btn{ display:none; }
}


/* === Mobile tweak v3: swap logo & jagged badge; bigger logo; Healthy btn 2x === */
@media (max-width: 720px){
  /* Re-order: jagged badge first, logo second */
  .header-row{ grid-template-columns: 1fr; }
  .header-row .health-bubble{ order: 1; margin: 4px auto 0; width: min(75vw, 320px); }
  .header-row .logo{ order: 2; max-height: min(40vh, 300px); margin: 6px auto 0; }
  /* Keep CTA grid next */
  .mobile-cta-grid{ order: 3; }
  .mobile-healthy-btn{ order: 4; }
  /* Healthy circular button ~2x */
  .mobile-healthy-btn img[alt="Healthy Cleaning"]{
    width: min(52vw, 200px) !important;
    height: auto !important;
  }
}


/* === Mobile tweak v4: logo & jagged badge side-by-side to reduce header height === */
@media (max-width: 720px){
  .header-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
  }
  .header-row .logo{
    justify-self: end;
    max-height: 22vh;
    width: min(45vw, 360px);
    height: auto;
  }
  .header-row .health-bubble{
    justify-self: start;
    width: min(45vw, 360px);
    height: auto;
  }
  /* Keep CTA grid and healthy button as-is from previous build */
}


/* === Mobile tweak v5: swap badge & logo order; fix logo stretch === */
@media (max-width: 720px){
  .header-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
  }
  /* Badge on the LEFT */
  .header-row .health-bubble{
    grid-column: 1;
    justify-self: end;
    width: min(45vw, 360px);
    height: auto;
  }
  /* Logo on the RIGHT, no stretch */
  .header-row .logo{
    grid-column: 2;
    justify-self: start;
    max-width: 45vw;
    max-height: 22vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}


/* === Mobile CTA grid update: add Home button & remove extra Call Now === */
@media (max-width: 720px){
  .mobile-cta-grid{
    grid-template-columns: 1fr 1fr 1fr 1fr !important; /* Home | Services | Call | Get Quote */
  }
  .mobile-cta-grid .home-btn{
    background: rgba(0,0,0,.06);
    color: var(--primary,#1f2937);
  }
}


/* Special styles for Home, Services, and About buttons */
.nav a[href*="index.html"],
.nav a[href*="services"],
.nav a[href*="about"] {
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(145deg, #3b82f6, #1e40af);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.6px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  box-shadow: 4px 4px 8px rgba(0,0,0,0.25), -4px -4px 8px rgba(255,255,255,0.1);
  transition: all 0.3s ease-in-out;
}

.nav a[href*="index.html"]:hover,
.nav a[href*="services"]:hover,
.nav a[href*="about"]:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 12px rgba(0,0,0,0.35), -6px -6px 12px rgba(255,255,255,0.15);
}


/* === 3D Gold-Outline Buttons for Home / Services / About ONLY === */
.nav a[href="index.html"],
.nav a[href="services/"],
.nav a[href="about/"] {
  position: relative;
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid #d4af37; /* gold rim */
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 60%, #e5ecf6 100%); /* cloud-like, subtle blue tint */
  color: var(--primary, #1f2937) !important;
  font-weight: 800;
  letter-spacing: .4px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  box-shadow:
     0 6px 12px rgba(0,0,0,0.18),      /* drop depth */
     inset 0 1px 0 rgba(255,255,255,0.9),  /* top inner highlight */
     inset 0 -3px 6px rgba(0,0,0,0.15);    /* bottom inner shading */
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}

/* Subtle gold glow edge for luxe feel */
.nav a[href="index.html"]::after,
.nav a[href="services/"]::after,
.nav a[href="about/"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.35), 0 0 14px rgba(212,175,55,0.25);
}

/* Specular highlight band (glossy cloud cap) */
.nav a[href="index.html"]::before,
.nav a[href="services/"]::before,
.nav a[href="about/"]::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 10%;
  right: 10%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
  filter: blur(0.5px);
  pointer-events: none;
}

/* Hover: lift and brighten */
.nav a[href="index.html"]:hover,
.nav a[href="services/"]:hover,
.nav a[href="about/"]:hover {
  transform: translateY(-2px);
  box-shadow:
     0 10px 16px rgba(0,0,0,0.24),
     inset 0 1px 0 rgba(255,255,255,0.95),
     inset 0 -3px 8px rgba(0,0,0,0.18);
  filter: saturate(1.05);
}

/* Active/pressed: tactile press */
.nav a[href="index.html"]:active,
.nav a[href="services/"]:active,
.nav a[href="about/"]:active {
  transform: translateY(1px);
  box-shadow:
     0 4px 8px rgba(0,0,0,0.18),
     inset 0 2px 6px rgba(0,0,0,0.2);
}

/* Typography polish */
.nav a[href="index.html"] span,
.nav a[href="services/"] span,
.nav a[href="about/"] span,
.nav a[href="index.html"],
.nav a[href="services/"],
.nav a[href="about/"] {
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Ensure HOME button also gets 3D Gold treatment */
.nav a[href="/"],
.nav a[href="index.html"] {
  position: relative;
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid #d4af37;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 60%, #e5ecf6 100%);
  color: var(--primary, #1f2937) !important;
  font-weight: 800;
  letter-spacing: .4px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  box-shadow:
     0 6px 12px rgba(0,0,0,0.18),
     inset 0 1px 0 rgba(255,255,255,0.9),
     inset 0 -3px 6px rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.nav a[href="/"]::after,
.nav a[href="index.html"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.35), 0 0 14px rgba(212,175,55,0.25);
}
.nav a[href="/"]::before,
.nav a[href="index.html"]::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 10%;
  right: 10%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
  filter: blur(0.5px);
  pointer-events: none;
}
.nav a[href="/"]:hover,
.nav a[href="index.html"]:hover {
  transform: translateY(-2px);
  box-shadow:
     0 10px 16px rgba(0,0,0,0.24),
     inset 0 1px 0 rgba(255,255,255,0.95),
     inset 0 -3px 8px rgba(0,0,0,0.18);
  filter: saturate(1.05);
}
.nav a[href="/"]:active,
.nav a[href="index.html"]:active {
  transform: translateY(1px);
  box-shadow:
     0 4px 8px rgba(0,0,0,0.18),
     inset 0 2px 6px rgba(0,0,0,0.2);
}


/* === Force 3D Gold/Cloud style on three main nav links (all viewports) === */
.nav a[href="index.html"],
.nav a[href="/"],
.nav a[href="./"],
.nav a[href^="/index"],
.nav a[href^="./index"],
.nav a[href="services/"],
.nav a[href="/services/"],
.nav a[href="./services/"],
.nav a[href="about/"],
.nav a[href="/about/"],
.nav a[href="./about/"] {
  position: relative !important;
  display: inline-block !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  border: 2px solid #d4af37 !important; /* gold rim */
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 60%, #e5ecf6 100%) !important; /* cloud face */
  color: var(--primary, #1f2937) !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9) !important;
  box-shadow:
     0 6px 12px rgba(0,0,0,0.18),
     inset 0 1px 0 rgba(255,255,255,0.9),
     inset 0 -3px 6px rgba(0,0,0,0.15) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease !important;
}
.nav a[href="index.html"]::after,
.nav a[href="/"]::after,
.nav a[href="./"]::after,
.nav a[href^="/index"]::after,
.nav a[href^="./index"]::after,
.nav a[href="services/"]::after,
.nav a[href="/services/"]::after,
.nav a[href="./services/"]::after,
.nav a[href="about/"]::after,
.nav a[href="/about/"]::after,
.nav a[href="./about/"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.35), 0 0 14px rgba(212,175,55,0.25);
}
.nav a[href="index.html"]::before,
.nav a[href="/"]::before,
.nav a[href="./"]::before,
.nav a[href^="/index"]::before,
.nav a[href^="./index"]::before,
.nav a[href="services/"]::before,
.nav a[href="/services/"]::before,
.nav a[href="./services/"]::before,
.nav a[href="about/"]::before,
.nav a[href="/about/"]::before,
.nav a[href="./about/"]::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 10%;
  right: 10%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
  filter: blur(0.5px);
  pointer-events: none;
}


/* === Mobile-only nav: stack, full-width, and hide Call buttons === */
@media (max-width: 640px) {
  .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 8px 12px !important;
  }
  .nav a[href="index.html"],
  .nav a[href="/"],
  .nav a[href="./"],
  .nav a[href^="/index"],
  .nav a[href^="./index"],
  .nav a[href="services/"],
  .nav a[href="/services/"],
  .nav a[href="./services/"],
  .nav a[href="about/"],
  .nav a[href="/about/"],
  .nav a[href="./about/"] {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
  }
  .nav a[href="index.html"], .nav a[href="/"], .nav a[href^="/index"], .nav a[href^="./index"], .nav a[href="./"] { order: 1 !important; }
  .nav a[href="services/"], .nav a[href="/services/"], .nav a[href="./services/"] { order: 2 !important; }
  .nav a[href*="healthy"] { order: 3 !important; }
  .nav a[href="about/"], .nav a[href="/about/"], .nav a[href="./about/"] { order: 4 !important; }

  /* Kill Call/Call Now on mobile */
  a[href^="tel:"],
  .call-btn,
  .call-now { display: none !important; }
}


/* === Mobile nav: stack & hide call buttons === */
@media (max-width: 640px) {
  .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 8px 12px !important;
  }
  .nav a[href="index.html"],
  .nav a[href="/"],
  .nav a[href="./"],
  .nav a[href^="/index"],
  .nav a[href^="./index"],
  .nav a[href="services/"],
  .nav a[href="/services/"],
  .nav a[href="./services/"],
  .nav a[href="about/"],
  .nav a[href="/about/"],
  .nav a[href="./about/"] {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
  }
  .nav a[href="index.html"], .nav a[href="/"], .nav a[href^="/index"], .nav a[href^="./index"], .nav a[href="./"] { order: 1 !important; }
  .nav a[href="services/"], .nav a[href="/services/"], .nav a[href="./services/"] { order: 2 !important; }
  .nav a[href*="healthy"] { order: 3 !important; }
  .nav a[href="about/"], .nav a[href="/about/"], .nav a[href="./about/"] { order: 4 !important; }

  a[href^="tel:"],
  .call-btn,
  .call-now { display: none !important; }
}


/* === Force 3D Gold/Cloud style on Home, Services, About (all viewports) === */
.nav a[href="index.html"],
.nav a[href="/"],
.nav a[href="./"],
.nav a[href^="/index"],
.nav a[href^="./index"],
.nav a[href="services/"],
.nav a[href="/services/"],
.nav a[href="./services/"],
.nav a[href="about/"],
.nav a[href="/about/"],
.nav a[href="./about/"] {
  position: relative !important;
  display: inline-block !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  border: 2px solid #d4af37 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 60%, #e5ecf6 100%) !important;
  color: var(--primary, #1f2937) !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9) !important;
  box-shadow:
     0 6px 12px rgba(0,0,0,0.18),
     inset 0 1px 0 rgba(255,255,255,0.9),
     inset 0 -3px 6px rgba(0,0,0,0.15) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease !important;
}
.nav a[href="index.html"]::after,
.nav a[href="/"]::after,
.nav a[href="./"]::after,
.nav a[href^="/index"]::after,
.nav a[href^="./index"]::after,
.nav a[href="services/"]::after,
.nav a[href="/services/"]::after,
.nav a[href="./services/"]::after,
.nav a[href="about/"]::after,
.nav a[href="/about/"]::after,
.nav a[href="./about/"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.35), 0 0 14px rgba(212,175,55,0.25);
}
.nav a[href="index.html"]::before,
.nav a[href="/"]::before,
.nav a[href="./"]::before,
.nav a[href^="/index"]::before,
.nav a[href^="./index"]::before,
.nav a[href="services/"]::before,
.nav a[href="/services/"]::before,
.nav a[href="./services/"]::before,
.nav a[href="about/"]::before,
.nav a[href="/about/"]::before,
.nav a[href="./about/"]::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 10%;
  right: 10%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
  filter: blur(0.5px);
  pointer-events: none;
}

/* === Mobile nav: stack & hide call buttons === */
@media (max-width: 640px) {
  .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 8px 12px !important;
  }
  .nav a[href="index.html"],
  .nav a[href="/"],
  .nav a[href="./"],
  .nav a[href^="/index"],
  .nav a[href^="./index"],
  .nav a[href="services/"],
  .nav a[href="/services/"],
  .nav a[href="./services/"],
  .nav a[href="about/"],
  .nav a[href="/about/"],
  .nav a[href="./about/"] {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
  }
  .nav a[href="index.html"], .nav a[href="/"], .nav a[href^="/index"], .nav a[href^="./index"], .nav a[href="./"] { order: 1 !important; }
  .nav a[href="services/"], .nav a[href="/services/"], .nav a[href="./services/"] { order: 2 !important; }
  .nav a[href*="healthy"] { order: 3 !important; }
  .nav a[href="about/"], .nav a[href="/about/"], .nav a[href="./about/"] { order: 4 !important; }

  a[href^="tel:"],
  .call-btn,
  .call-now { display: none !important; }
}


/* === Mobile match desktop nav (pill buttons + glow) === */
@media (max-width: 720px){
  header .nav, nav, .site-nav, .navbar{
    display:flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 8px auto 6px;
  }
  header .nav a, nav a, .site-nav a, .navbar a{
    display:inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(59,130,246,.25); /* subtle blue edge */
    text-decoration:none;
    line-height:1;
    box-shadow: 0 0 10px rgba(0,136,255,.25);
    text-shadow: 0 0 6px rgba(0,136,255,.35);
  }
  header .nav a:active, nav a:active, .site-nav a:active, .navbar a:active{
    transform: translateY(1px);
    box-shadow: 0 0 8px rgba(0,136,255,.35) inset;
  }
  /* Keep header compact on mobile */
  header{
    padding-top: 8px;
    padding-bottom: 6px;
  }
}

/* hide legacy mobile CTAs */
@media (max-width: 720px){
  .mobile-cta-grid, .mobile-healthy-btn { display: none !important; }
}


/* === Mobile header "remote control": [logo] [buttons] [cloud] === */
@media (max-width: 720px){
  header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    flex-wrap: nowrap;
  }

  /* Make header children flexible columns */
  header .site-nav, header nav, header .navbar{
    order: 2;
    flex: 1 1 auto;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
  }
  /* Keep button look (match desktop vibe) */
  header .site-nav a, header nav a, header .navbar a{
    display:inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(59,130,246,.28);
    text-decoration:none;
    font-weight:800;
    line-height:1;
    box-shadow: 0 0 16px rgba(0,136,255,.30), inset 0 -3px 0 rgba(0,0,0,.05);
    text-shadow: 0 0 10px rgba(0,136,255,.45);
  }

  /* Slightly shrink the two side images to fit */
  header img[src*="logo"]{
    order: 1;
    flex: 0 0 auto;
    width: 72px;
    height: auto;
  }
  header img[src*="health-bubble"]{
    order: 3;
    flex: 0 0 auto;
    width: 92px;
    height: auto;
  }

  /* Ensure header doesn't become too tall */
  header .brand, header .header-left, header .header-right{
    flex: 0 0 auto;
  }
}


/* Services layout */
.services .page-title{
  text-align:center;
  margin: 1.2rem 0 1.6rem;
}

.service-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 14px;
}

/* Responsive columns */
.service-card{
  grid-column: span 6;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(59,130,246,.18);
  padding: 16px 16px 18px;
  /* glow line consistent with header theme */
  box-shadow: 0 0 18px rgba(0,136,255,.18), inset 0 -3px 0 rgba(0,0,0,.05);
}
.service-card.featured{
  grid-column: span 12;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 22px rgba(0,136,255,.24), inset 0 -3px 0 rgba(0,0,0,.06);
}

.service-card h2{
  margin: 0 0 10px;
}
.service-card ul{
  margin: 0 0 10px 18px;
}
.service-card .fine-print{
  font-size: .92rem;
  opacity: .85;
  margin: 6px 0 0;
}

.btn-pill{
  display:inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(59,130,246,.28);
  text-decoration:none;
  font-weight:700;
  line-height:1;
  /* same glow vibe */
  box-shadow: 0 0 16px rgba(0,136,255,.30), inset 0 -3px 0 rgba(0,0,0,.05);
  text-shadow: 0 0 8px rgba(0,136,255,.35);
}

/* Mobile */
@media (max-width: 720px){
  .service-card{ grid-column: span 12; }
}


/* === HERO Refresh === */
.hero{
  position: relative;
  overflow: hidden;
  padding: 56px 20px 64px;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(235,245,255,0.95), rgba(255,250,230,0.9));
  border-bottom: 1px solid rgba(59,130,246,.15);
}
.hero-glow::before{
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(600px 300px at 70% 10%, rgba(59,130,246,.18), transparent 60%);
  pointer-events:none;
}
.hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}
.hero-title{
  margin:0 0 8px;
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(0,136,255,.25);
}
.hero-title span{ color:#1e3a8a; }
.hero-sub{
  margin: 4px 0 16px;
  font-size: clamp(14px, 2.5vw, 18px);
  opacity:.9;
}
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-pill{
  display:inline-block;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(59,130,246,.28);
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 0 16px rgba(0,136,255,.30), inset 0 -3px 0 rgba(0,0,0,.05);
  text-shadow: 0 0 8px rgba(0,136,255,.35);
}
.btn-pill.primary{
  background: linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 10px 24px rgba(0,136,255,.35), inset 0 -3px 0 rgba(0,0,0,.06);
}
.hero-art{
  display:flex; justify-content:center; align-items:center;
}
.aircleaner{ width: min(320px, 100%); height: auto; filter: drop-shadow(0 10px 30px rgba(0,136,255,.25)); }

/* subtle bubble particles */
.hero-bubbles span{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 16px rgba(0,136,255,.2);
  animation: floatUp 12s linear infinite;
}
.hero-bubbles span:nth-child(1){ left:8%; bottom:-20px; animation-delay: 0s; }
.hero-bubbles span:nth-child(2){ left:22%; bottom:-30px; width:10px; height:10px; animation-delay: 2s;}
.hero-bubbles span:nth-child(3){ left:48%; bottom:-25px; width:12px; height:12px; animation-delay: 4s;}
.hero-bubbles span:nth-child(4){ left:68%; bottom:-35px; width:9px; height:9px; animation-delay: 6s;}
.hero-bubbles span:nth-child(5){ left:86%; bottom:-28px; width:11px; height:11px; animation-delay: 8s;}
@keyframes floatUp { 0%{ transform: translateY(0); opacity:.0;} 10%{opacity:.6;} 100%{ transform: translateY(-420px); opacity:0;} }

/* Mobile */
@media (max-width: 720px){
  .hero{ padding: 36px 14px 40px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 18px; }
  .hero-ctas{ justify-content: center; }
  .aircleaner{ width: 240px; }
}


/* === About layout (Hontz family) === */
.about-hero{ padding: 24px 16px 48px; }
.about-grid{
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 24px;
  align-items: start;
}
.about-photo img{
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,136,255,.20), inset 0 -3px 0 rgba(0,0,0,.05);
  border: 1px solid rgba(59,130,246,.15);
}
.about-copy h1{ margin: 0 0 10px; }
.about-copy p{ margin: 0 0 12px; }
.about-copy .about-signoff{ margin-top: 12px; font-style: italic; opacity: .95; }

/* subtle glow divider under title */
.about-copy h1{
  position: relative; padding-bottom: 8px;
}
.about-copy h1:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height: 2px;
  background: linear-gradient(90deg, rgba(0,136,255,.0), rgba(0,136,255,.35), rgba(0,136,255,.0));
  box-shadow: 0 0 10px rgba(0,136,255,.35);
}

/* Mobile stack */
@media (max-width: 720px){
  .about-grid{ grid-template-columns: 1fr; gap: 16px; }
}


/* keep desktop nav lowered */
@media (min-width: 721px){
  nav.nav{ margin-top: 120px !important; }
}


/* signature styling to match header vibe */
.hontz-sign{
  font-style: italic;
  font-weight: 600;
  color: #0b2a68;
  text-shadow: 0 0 10px rgba(255,200,0,.55), 0 0 2px rgba(255,200,0,.35);
  display: inline-block;
}


/* === About page branded typography === */
:root{
  --brand-blue: #1756a9; /* close to your logo text */
  --brand-gold: #f5c400; /* crown glow */
  --ink-900: #22252a;
  --ink-700: #343a46;
}
.about-copy{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color: var(--ink-700);
  line-height: 1.65;
  font-size: 1.02rem;
}
.about-copy h1{
  color: var(--brand-blue);
  font-weight: 700;
  letter-spacing: .2px;
}
.about-copy p strong{
  color: var(--ink-900);
  font-weight: 600;
}
.about-copy p em{
  color: var(--ink-900);
}
.about-copy .about-signoff{
  font-style: italic;
  margin-top: 14px;
  color: var(--ink-900);
  position: relative;
  display: inline-block;
}
.about-copy .about-signoff::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, rgba(245,196,0,0), rgba(245,196,0,.9), rgba(245,196,0,0));
  box-shadow: 0 0 10px rgba(245,196,0,.55);
  border-radius: 2px;
}
/* Subheading style (first sentence line) */
.about-copy p:first-of-type strong{
  color: var(--brand-blue);
}

.brand-blue{ color: var(--brand-blue); }