:root{
  --g-blue:#4285F4;
  --g-red:#EA4335;
  --g-yellow:#FBBC05;
  --g-green:#34A853;

  --g-ink:#202124;
  --g-muted:#5f6368;
  --g-surface: rgba(255,255,255,.92);
  --g-border: rgba(60,64,67,.16);
  --g-border2: rgba(60,64,67,.10);
  --g-shadow: 0 6px 18px rgba(0,0,0,.10);
  --g-shadow2: 0 1px 0 rgba(255,255,255,.70) inset;

  --sh2-shadow: 0 16px 44px rgba(12,16,23,.12);
  --sh2-r14:14px;
  --sh2-sticky-offset: 92px;
}

/* ===== Base safety (don’t break sticky) ===== */
html, body{
  overflow-x: hidden;
  overflow-y: visible;
}

/* Anchor offset */
section[id]{ scroll-margin-top: var(--sh2-sticky-offset); }

/* Header wrapper */
#sh2Header{ position:relative; z-index:999; }
.sh2{ position:relative; z-index:999; }

/* ================= Topbar (scrolls away) ================= */
.sh2-top{
  background:#fff;
  border-bottom:1px solid var(--g-border2);
}
.sh2-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
}
.sh2-top-left, .sh2-top-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.sh2-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.84rem;
  font-weight:800;
  color: rgba(32,33,36,.80);
}
.sh2-muted{
  font-size:.82rem;
  font-weight:700;
  color: rgba(32,33,36,.62);
}
.sh2-divider{ color: rgba(32,33,36,.28); }

.sh2-toplink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color: rgba(32,33,36,.78);
  font-weight:800;
  font-size:.84rem;
  padding:6px 10px;
  border-radius:999px;
}
.sh2-toplink:hover{
  color: var(--g-ink);
  background: rgba(66,133,244,.08);
}

.sh2-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--g-border);
  background: rgba(255,255,255,.95);
  text-decoration:none;
  font-weight:900;
  font-size:.84rem;
}
.sh2-chip--wa{ color: var(--g-green); }
.sh2-chip--call{ color: var(--g-blue); }

/* ================= Main (ONLY THIS IS STICKY) ================= */
.sh2-main{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;

  background: var(--g-surface);
  border-bottom: 1px solid var(--g-border);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--g-shadow), var(--g-shadow2);
}

/* Solid on scroll */
#sh2Header.is-solid .sh2-main{
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.70) inset;
}

.sh2-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 8px 0;
}

.sh2-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.sh2-logo{
  width:150px;
  height:auto;
}

/* Desktop nav (Google pill links) */
.sh2-nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.sh2-nav a{
  text-decoration:none;
  color: rgba(32,33,36,.82);
  font-weight:800;
  padding:10px 12px;
  border-radius:999px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sh2-nav a:hover{
  color: var(--g-ink);
  background: rgba(66,133,244,.10);
}
.sh2-nav a.is-active{
  color: var(--g-ink);
  background: rgba(66,133,244,.14);
  border: 1px solid rgba(66,133,244,.22);
}

/* Actions */
.sh2-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.sh2-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;

  background: rgba(66,133,244,.12);
  color: var(--g-ink);
  border: 1px solid rgba(66,133,244,.22);
}
.sh2-cta i{ color: var(--g-blue); }
.sh2-cta:hover{ background: rgba(66,133,244,.16); transform: translateY(-1px); }

.sh2-icon, .sh2-menu{
  height:42px;
  width:42px;
  border-radius:999px;
  border:1px solid var(--g-border);
  background: rgba(255,255,255,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sh2-menu{ width:46px; display:none; }
.sh2-icon:hover, .sh2-menu:hover{
  background: rgba(241,243,244,.95);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.sh2-icon--wa{ color: var(--g-green); }
.sh2-icon--call{ color: var(--g-blue); }

/* Mobile quick links */
.sh2-quick{
  display:none;
  gap:10px;
  padding:0 0 12px;
  overflow:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.sh2-quick::-webkit-scrollbar{ display:none; }
.sh2-quick a{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--g-border);
  background: rgba(255,255,255,.92);
  text-decoration:none;
  color: rgba(32,33,36,.86);
  font-weight:900;
}
.sh2-quick a.is-active{
  background: rgba(66,133,244,.12);
  border-color: rgba(66,133,244,.22);
}

/* Drawer */
.sh2-drawer{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:.2s ease;
}
.sh2-drawer.is-open{ pointer-events:auto; opacity:1; }
.sh2-backdrop{
  position:absolute;
  inset:0;
  background: rgba(32,33,36,.55);
}
.sh2-panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(420px, 88vw);
  background: rgba(255,255,255,.96);
  border-left:1px solid var(--g-border);
  box-shadow: var(--sh2-shadow);
  padding:16px;
  transform: translateX(12px);
  transition:.2s ease;
}
.sh2-drawer.is-open .sh2-panel{ transform: translateX(0); }

.sh2-panelTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.sh2-panelTitle{ font-weight:950; font-size:1.15rem; color: var(--g-ink); }
.sh2-panelSub{ color: rgba(32,33,36,.65); font-weight:700; font-size:.92rem; }

.sh2-x{
  border:1px solid var(--g-border);
  background: rgba(255,255,255,.95);
  border-radius:999px;
  height:42px; width:42px;
  font-weight:950;
}

.sh2-links{
  display:grid;
  gap:8px;
  padding:12px 0;
  margin-top:10px;
  border-top:1px solid var(--g-border2);
}
.sh2-links a{
  text-decoration:none;
  padding:12px 12px;
  border-radius: var(--sh2-r14);
  border:1px solid rgba(60,64,67,.10);
  background: rgba(255,255,255,.92);
  color: rgba(32,33,36,.92);
  font-weight:900;
}
.sh2-links a:hover{
  background: rgba(66,133,244,.08);
  border-color: rgba(66,133,244,.18);
}
.sh2-links a.is-active{
  background: rgba(66,133,244,.12);
  border-color: rgba(66,133,244,.22);
}

.sh2-panelCta{
  margin-top:10px;
  border-top:1px solid var(--g-border2);
  padding-top:12px;
  display:grid;
  gap:10px;
}
.sh2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius: var(--sh2-r14);
  text-decoration:none;
  font-weight:950;
  border:1px solid var(--g-border);
  background: rgba(241,243,244,.95);
  color: var(--g-ink);
}
.sh2-btn--wa i{ color: var(--g-green); }
.sh2-btn--call i{ color: var(--g-blue); }
.sh2-note{ color: rgba(32,33,36,.65); font-weight:700; font-size:.92rem; }

/* Responsive */
@media (max-width: 992px){
  .sh2-nav{ display:none; }
  .sh2-menu{ display:inline-flex; }
  .sh2-quick{ display:flex; }
}
@media (max-width: 576px){
  .sh2-muted{ display:none; }
  .sh2-cta{ display:none; }
}

/* =========================================================
   GUARANTEED STICKY FALLBACK (JS uses this if needed)
========================================================= */
#sh2StickySpacer{ height:0; }

.sh2-main.is-fixed{
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999 !important;
}

/* =========================================================
   SH2 TOPBAR + MENU — BRAND COLOR UPGRADE (Logo colors)
   Paste AFTER your current sh2 CSS (at the END).
   Keeps Google UI feel but adds premium brand presence.
   ========================================================= */

/* Brand accents (from your logo system) */
:root{
  --sn-blue:#0B3AA4;
  --sn-orange:#FF7A00;
  --sn-green:#0E8F3A;
  --sn-yellow:#FFC107;
}

/* ================= TOPBAR (not plain) ================= */

/* Soft brand gradient + glass */
.sh2-top{
  background:
    linear-gradient(90deg,
      rgba(11,58,164,.12) 0%,
      rgba(255,122,0,.10) 45%,
      rgba(14,143,58,.10) 100%
    ),
    radial-gradient(900px 220px at 15% 0%, rgba(11,58,164,.16), rgba(255,255,255,0) 60%),
    radial-gradient(900px 220px at 85% 0%, rgba(255,122,0,.14), rgba(255,255,255,0) 58%),
    rgba(255,255,255,.92) !important;

  border-bottom: 1px solid rgba(60,64,67,.12) !important;
  backdrop-filter: blur(12px) saturate(1.15);
}

/* Slightly more compact + premium */
.sh2-top-row{
  padding: 8px 0 !important;
}

/* Left info: add “capsule” feel */
.sh2-top-left{
  gap: 10px !important;
}
.sh2-top-left .sh2-item{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(60,64,67,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* Make icons brand-colored */
.sh2-top-left .fa-location-dot{ color: var(--sn-orange); }
.sh2-top-left .fa-circle-check{ color: var(--sn-green); }

/* Divider: softer */
.sh2-divider{ opacity: .7; }

/* Topbar links: pill hover */
.sh2-toplink{
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(60,64,67,.10) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.sh2-toplink:hover{
  background: rgba(11,58,164,.10) !important;
  border-color: rgba(11,58,164,.18) !important;
}

/* WhatsApp/Call chips: strong brand outline */
.sh2-chip{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(60,64,67,.12) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.sh2-chip--wa{
  border-color: rgba(14,143,58,.22) !important;
  background: linear-gradient(180deg, rgba(14,143,58,.10), rgba(255,255,255,.72)) !important;
}
.sh2-chip--call{
  border-color: rgba(11,58,164,.22) !important;
  background: linear-gradient(180deg, rgba(11,58,164,.10), rgba(255,255,255,.72)) !important;
}

/* ================= MENU BAR (looks richer) ================= */

/* Add a thin brand line on top of menu (premium cue) */
.sh2-main{
  position: sticky !important;
  top: 0 !important;
}
.sh2-main::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, var(--sn-blue), var(--sn-orange), var(--sn-green));
  opacity: .95;
}

/* Give menu a subtle background tint and deeper shadow */
.sh2-main{
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(11,58,164,.10), rgba(255,255,255,0) 60%),
    radial-gradient(900px 240px at 90% 0%, rgba(255,122,0,.10), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.92) !important;

  border-bottom: 1px solid rgba(60,64,67,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.72) inset !important;
}

/* Nav pills: slightly stronger hover */
.sh2-nav a:hover{
  background: rgba(255,122,0,.12) !important;
}
.sh2-nav a.is-active{
  background: rgba(11,58,164,.14) !important;
  border-color: rgba(11,58,164,.24) !important;
}

/* Get Quote button: brand gradient (not plain) */
.sh2-cta{
  background: linear-gradient(90deg, var(--sn-blue), var(--sn-orange)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,122,0,.35) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.14) !important;
}
.sh2-cta i{ color: #fff !important; }
.sh2-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(0,0,0,.18) !important;
}

/* Icons: make WhatsApp/Call more branded */
.sh2-icon{
  background: rgba(255,255,255,.92) !important;
}
.sh2-icon--wa{ color: var(--sn-green) !important; }
.sh2-icon--call{ color: var(--sn-blue) !important; }

/* Solid-on-scroll: stronger depth */
#sh2Header.is-solid .sh2-main{
  box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.72) inset !important;
}

/* Mobile quick links: match brand */
.sh2-quick a:hover{
  background: rgba(255,122,0,.10) !important;
  border-color: rgba(255,122,0,.18) !important;
}

/* =========================================
   Hide Topbar on Mobile
   ========================================= */

@media (max-width: 992px){
  .sh2-top{
    display: none !important;
  }
}