/* ===================================================================
   Scale Converge — shared theme
   Edit tokens here and every page (index, blog, post, admin) updates.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy-950:#0a1830;
  --navy-800:#0f2a4d;
  --navy-700:#163a63;
  --green-700:#1c7a41;
  --green-500:#3fae5c;
  --green-300:#8fd35b;
  --paper:#ffffff;
  --paper-dim:#ffffff;
  --ink:#101a14;
  --ink-soft:#4c5a51;
  --line:#dbe3dc;
  --radius:10px;
  --max:1180px;
  --gradient-arrow: linear-gradient(105deg, var(--navy-700) 0%, var(--navy-700) 38%, var(--green-700) 52%, var(--green-300) 100%);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:'Sora',system-ui,sans-serif;
  color:var(--navy-950);
  line-height:1.15;
  margin:0 0 .5em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
section{padding:88px 0;}
@media (max-width:720px){ section{padding:56px 0;} }

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:999px;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--gradient-arrow);color:#fff;
  box-shadow:0 10px 24px -10px rgba(28,122,65,.55);
}
.btn-primary:hover{box-shadow:0 14px 28px -10px rgba(28,122,65,.65);}
/* .nav-links a (color:var(--ink)) was winning over .btn-primary's white text
   because it's more specific — this is why "Get a Free Audit" text was
   nearly invisible against its own gradient background. */
.nav-links a.btn{color:#fff;}
.nav-links a.btn::after{display:none;}
.btn-ghost{
  background:transparent;border-color:var(--navy-700);color:var(--navy-700);
}
.btn-ghost:hover{background:var(--navy-700);color:#fff;}

/* ---------------- Header ---------------- */
#site-header{position:sticky;top:0;z-index:40;}
.header-inner{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:38px;width:auto;}
.brand-text{font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:var(--navy-950);}
.brand-text span{color:var(--green-600,#1c7a41);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{
  font-size:.92rem;font-weight:500;color:var(--ink);
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--gradient-arrow);transition:width .2s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{margin-left:6px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy-950);margin:5px 0;}

/* ---------------- Services dropdown ---------------- */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-item.has-dropdown{gap:4px;}
.nav-dropdown-label{display:inline-block;}
.dropdown-caret{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:4px;cursor:pointer;color:var(--ink);
  transition:transform .2s ease;
}
.dropdown-caret svg{display:block;}
.nav-item.has-dropdown:hover .dropdown-caret,
.nav-item.has-dropdown.open .dropdown-caret{transform:rotate(180deg);}

.dropdown-panel{
  /* top sits flush against the nav item (no gap) — the 18px of breathing
     room before the visible card is done with padding-top instead, so
     that space stays PART of this element's hoverable box. A margin/gap
     approach here creates a dead zone the mouse falls through, which is
     why the menu was closing when you moved down into it. */
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  padding-top:18px;
  min-width:640px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:50;
}
.nav-item.has-dropdown:hover .dropdown-panel,
.nav-item.has-dropdown.open .dropdown-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.dropdown-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;padding:22px 0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(10,24,48,.14);
}
.dropdown-col{padding:0 26px;border-left:1px solid var(--line);}
.dropdown-col:first-child{border-left:none;}
.dropdown-col .dropdown-heading{
  font-family:'Sora',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;
}
.dropdown-col a{
  display:block;font-size:.9rem;font-weight:500;color:var(--ink);
  padding:7px 0;position:static;
}
.dropdown-col a::after{display:none;}
.dropdown-col a:hover{color:var(--green-700);}
.dropdown-viewall{color:var(--green-700)!important;font-weight:600;margin-top:4px;}
.dropdown-soon{
  display:inline-block;font-size:.82rem;color:var(--ink-soft);font-style:italic;
  padding:6px 10px;background:var(--paper-dim);border:1px dashed var(--line);border-radius:6px;
}

@media (max-width:860px){
  .nav-links{
    position:fixed;inset:64px 0 auto 0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:10px 28px 20px;border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:all .2s ease;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);}
  .nav-cta{margin-left:0;padding-top:14px;width:100%;}
  .nav-cta .btn{width:100%;justify-content:center;}
  .nav-toggle{display:block;}

  /* dropdown becomes an inline accordion on mobile */
  .nav-item.has-dropdown{
    flex-direction:column;align-items:stretch;width:100%;border-bottom:1px solid var(--line);
  }
  .nav-item.has-dropdown > .nav-dropdown-label{border-bottom:none;padding:12px 0;width:auto;}
  .dropdown-caret{
    position:absolute;right:0;top:2px;padding:10px;
  }
  .dropdown-panel{
    position:static;transform:none;min-width:0;width:100%;padding-top:0;
    max-height:0;opacity:1;visibility:visible;pointer-events:none;overflow:hidden;
    transition:max-height .22s ease;
  }
  .nav-item.has-dropdown.open .dropdown-panel{max-height:600px;pointer-events:auto;transform:none;}
  .dropdown-inner{
    display:block;padding:4px 0 14px;
    background:none;border:none;box-shadow:none;border-radius:0;
  }
  .dropdown-col{border-left:none;padding:10px 0 0;}
  .dropdown-col a{border-bottom:none;padding:8px 0;}
}

/* ---------------- Footer ---------------- */
#site-footer{background:var(--navy-950);color:#c9d4cd;}
.footer-inner{padding:64px 0 28px;}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:1000px){ .footer-grid{grid-template-columns:1fr 1fr 1fr;} }
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand img{height:34px;}
.footer-brand-text{font-family:'Sora',sans-serif;font-weight:700;color:#fff;}
.footer-col h4{color:#fff;font-size:.85rem;letter-spacing:.03em;margin-bottom:16px;}
.footer-col a, .footer-col p{
  display:block;color:#a9b7ad;font-size:.92rem;margin-bottom:10px;
}
.footer-col a:hover{color:var(--green-300);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:22px;font-size:.82rem;color:#8695a1;flex-wrap:wrap;gap:10px;
}
.footer-social{display:flex;gap:14px;}
.footer-social a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;
}
.footer-social a:hover{background:var(--gradient-arrow);border-color:transparent;}

/* ---------------- Utility blocks reused across pages ---------------- */
.eyebrow-tag{
  display:inline-block;font-size:.78rem;font-weight:600;color:var(--green-700);
  background:var(--paper-dim);border:1px solid var(--line);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;
}
.divider-curve{display:block;width:100%;height:auto;}

/* ---------------- Blog tags + rich post body ---------------- */
.blog-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.blog-tag{
  display:inline-block;font-size:.72rem;font-weight:600;color:var(--green-700);
  background:var(--paper-dim);border:1px solid var(--line);
  padding:4px 11px;border-radius:999px;
}
.post-body h1,.post-body h2,.post-body h3{margin-top:1.4em;}
.post-body ul,.post-body ol{margin:0 0 1.3em;padding-left:1.4em;color:var(--ink);}
.post-body li{margin-bottom:.4em;}
.post-body a{color:var(--green-700);text-decoration:underline;}
.post-body blockquote{
  margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--green-500);
  color:var(--ink-soft);font-style:italic;
}
.post-body table{width:100%;border-collapse:collapse;margin:1.6em 0;}
.post-body table td,.post-body table th{border:1px solid var(--line);padding:10px 12px;font-size:.94rem;text-align:left;}
.post-body table th{background:var(--paper-dim);font-family:'Sora',sans-serif;}