:root{
  --nav-h: 72px;
  --gold: #D1AB75;
  --red:  #A91617;
  --ink:  #232b38;
  --white:#fff;
}

/* ----- Hard reset inside header so bullets never appear ----- */
.site-nav ul,
.site-nav li{ list-style:none; margin:0; padding:0; }

.site-nav ul, .site-nav li { list-style: none; margin: 0; padding: 0; }

/* ===== Base ===== */
.site-nav{
  position:relative;
  z-index:1000;
  height:var(--nav-h);
  font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.site-nav .wrap{
  max-width:1200px; margin:0 auto; height:var(--nav-h);
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:24px; padding:0 20px;
}

/* Variants */
.site-nav.in-hero{
  position:absolute; inset:0 0 auto 0; background:transparent; color:#fff;
}
.site-nav.solid{
  position:sticky; top:0; background:#fff; color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Logo */
.site-nav .logo{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.site-nav .logo img{ display:block; height:48px; width:auto; }

/* Primary nav */
.primary-nav{ justify-self:center; }
.primary-nav .menu{ display:flex; align-items:center; gap:28px; }
.primary-nav .menu > li{ position:relative; }

/* Top-level links */
.primary-nav .menu > li > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 0; text-decoration:none; font-weight:700; color:inherit;
}

/* caret */
.primary-nav .menu > li.menu-item-has-children > a::after{
  content:"▾"; font-size:.8em; opacity:.85; margin-left:.35em;
}

/* Hover/focus colors per variant */
.site-nav.in-hero .primary-nav a:hover{ color:var(--gold); }
.site-nav.solid   .primary-nav a:hover{ color:var(--red); }

/* Dropdowns */
.primary-nav .sub-menu{
  position:absolute; left:0; top:calc(100% + 8px); min-width:240px; padding:8px; display:none;
  background:#fff; color:#232b38; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.primary-nav .sub-menu a{
  display:block; padding:10px 12px; color:#232b38; text-decoration:none; font-weight:600; border-radius:10px;
}
.primary-nav .sub-menu a:hover{ background:#f6f7f9; }

/* Show dropdowns (mouse & keyboard) */
@media (pointer:fine){
  .primary-nav .menu > li:hover   > .sub-menu{ display:block; }
  .primary-nav .sub-menu li:hover > .sub-menu{ display:block; }
}
.primary-nav .menu > li:focus-within   > .sub-menu,
.primary-nav .sub-menu li:focus-within > .sub-menu{ display:block; }

/* Right-side CTAs */
.nav-cta{ display:flex; align-items:center; gap:16px; justify-self:end; }
.nav-cta .btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:10px; font-weight:800; text-decoration:none;
}
.nav-cta .btn-primary{ background:var(--red); color:#fff; border:1px solid #980f10; }
.nav-cta .btn-primary:hover{ filter:brightness(.93); }
.nav-cta .phone{ font-weight:800; text-decoration:none; color:inherit; }
.site-nav.in-hero .nav-cta .estimate{ color:#fff; font-weight:800; text-decoration:none; }
.site-nav.in-hero .nav-cta .estimate:hover{ color:var(--gold); }

/* Keep nav above hero elements */
.hero-inner{ position:relative; z-index:1; }
.site-nav{ z-index:2; }

/* Safety: if any legacy mobile clone exists, keep it hidden */
.mnav, .nav-dim{ display:none !important; }

/* === HARDENED DROPDOWN RULES (works with any submenu class) === */
.site-nav .primary-nav .menu > li { position: relative; }
.site-nav .primary-nav .menu li > ul{
  /* hide by default */
  display: none;

  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  margin: 0;
  padding: 8px;

  background: #fff;
  color: #232b38;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  z-index: 20;
  list-style: none;
}
.site-nav .primary-nav .menu li > ul li { list-style: none; }

.site-nav .primary-nav .menu li > ul a{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  font-weight: 600;
  color: #232b38;
  border-radius: 10px;
}
.site-nav .primary-nav .menu li > ul a:hover{ background:#f6f7f9; }

/* show on hover + keyboard */
@media (pointer:fine){
  .site-nav .primary-nav .menu > li:hover > ul{ display:block; }
  .site-nav .primary-nav .menu li:hover > ul > li:hover > ul{ display:block; }
}
.site-nav .primary-nav .menu > li:focus-within > ul,
.site-nav .primary-nav .menu li:focus-within > ul{ display:block; }

/* ===== Stones nav: dropdown hover fix ===== */

/* Keep menus from being clipped by the header container */
.site-nav,
.site-nav .wrap { overflow: visible; }

/* Top level items: bigger hit area */
.site-nav .primary-nav .menu { display:flex; gap: clamp(22px,3.2vw,40px); }
.site-nav .primary-nav .menu > li { position: relative; }
.site-nav .primary-nav .menu > li > a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding: 12px 6px;              /* <- vertical padding = easy to stay hovered */
  line-height: 1.2; text-decoration:none;
}

/* Submenu card */
.site-nav .primary-nav .sub-menu{
  position:absolute; left:0; top: calc(100% + 6px);  /* sits just below link */
  min-width: 260px; padding: 8px 0;
  background:#fff; color:#232b38; border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  display:none; opacity:0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 2000;                  /* above header bits */
}

/* >>> Invisible bridge to remove the hover gap <<< */
.site-nav .primary-nav .menu > li > .sub-menu::before{
  content:"";
  position:absolute; left:0; right:0;
  top: -10px; height: 10px;       /* ← the “bridge” */
  /* no background; it just keeps :hover alive */
}

/* Show on hover (desktop pointers) */
@media (pointer:fine){
  .site-nav .primary-nav .menu > li:hover > .sub-menu{
    display:block; opacity:1; transform:none;
  }
}

/* Items inside the card */
.site-nav .primary-nav .sub-menu a{
  display:block; padding:12px 16px; color:#232b38; text-decoration:none;
}
.site-nav .primary-nav .sub-menu a:hover{ background:#f6f7f9; }

/* Optional: flyout menus (if you add second level later) */
.site-nav .primary-nav .sub-menu li{ position:relative; }
.site-nav .primary-nav .sub-menu li.menu-item-has-children > .sub-menu{
  top: 0; left: calc(100% + 10px);
}
.site-nav .primary-nav .sub-menu li.menu-item-has-children > .sub-menu::before{
  content:""; position:absolute; top:0; left:-10px; width:10px; height:100%;
}

/* Mobile – leave your existing behavior alone */
@media (max-width: 900px){
  .site-nav .primary-nav .sub-menu{
    position:static; display:none; opacity:1; transform:none;
    box-shadow:none; border:0; border-radius:0; padding:0;
  }
  .site-nav .primary-nav li.open > .sub-menu{ display:block; }
}

/* --- Fix: keep top-level nav items on one line --- */
.site-nav .primary-nav .menu{
  flex-wrap: nowrap;            /* don't allow the row to wrap */
}

.site-nav .primary-nav .menu > li{
  flex: 0 0 auto;               /* don't let items shrink */
  white-space: nowrap;          /* keep the label on one line */
}

.site-nav .primary-nav .menu > li > a,
.site-nav .primary-nav .menu > li > .submenu-toggle{
  white-space: nowrap;          /* belt & suspenders */
  display: inline-flex;         /* keeps our hover “bridge” working */
  align-items: center;
}

/* --- Stones nav: layout hardening --- */

/* 3-column frame that never wraps */
.site-nav .wrap{
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | menu | CTAs */
  align-items: center;
  gap: 24px;
}

/* center menu can flex but must not push CTAs to wrap */
.site-nav .primary-nav{ min-width: 0; }                     /* allows shrinking */
.site-nav .primary-nav .menu{ display:flex; gap: 28px; }
.site-nav .primary-nav .menu > li{ white-space: nowrap; }   /* keep top items on one line */

/* Right-side CTAs never shrink or wrap */
.site-nav .nav-cta{ display:flex; gap:16px; align-items:center; flex:0 0 auto; }
.site-nav .nav-cta .btn,
.site-nav .nav-cta .estimate,
.site-nav .nav-cta .phone{
  white-space: nowrap;        /* <- prevents 2-line breaks */
  flex: 0 0 auto;             /* <- don’t let them shrink */
}

/* Button + phone sizing so the grid always holds */
.site-nav .nav-cta .btn,
.site-nav .nav-cta .estimate{ 
  min-width: 210px;           /* tune if you want wider */
}
.site-nav .nav-cta .phone{
  min-width: 160px;           /* keeps (516) 826-2600 single-line */
}

/* Logo must never squash */
.site-nav .logo img{
  max-height: 52px;           /* adjust if you want */
  height: auto;
  width: auto;                /* don’t distort aspect */
  object-fit: contain;
}

/* Ensure dropdown-open hit area did not re-introduce wrapping */
.site-nav .primary-nav .menu > li > a{
  display:inline-flex; align-items:center; padding:10px 0;
}

/* --- Hero navbar: make the Estimate CTA a red button --- */
.site-nav.in-hero .nav-cta .estimate{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  background: var(--red, #A91617);
  color:#fff;
  border: 1px solid #980f10;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  transition: filter .15s ease, transform .08s ease;
}
.site-nav.in-hero .nav-cta .estimate:hover{ filter: brightness(.92); }
.site-nav.in-hero .nav-cta .estimate:active{ transform: translateY(0); }

/* Inner (solid) navbar: if you renamed text to “Get an Estimate”, keep same button style */
.site-nav.solid .nav-cta .btn,
.site-nav.solid .nav-cta .estimate{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius:12px; font-weight:800;
  background: var(--red, #A91617); color:#fff; border:1px solid #980f10;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.site-nav.solid .nav-cta .btn:hover,
.site-nav.solid .nav-cta .estimate:hover{ filter: brightness(.92); }

/* ===== Hero nav — full width with centered links ===== */
.site-nav.in-hero.full{
  width:100%;
  padding: 0 30px;              /* 30px side padding */
  box-sizing: border-box;
}

.site-nav.in-hero.full .nav-row{
  display: grid;                 /* logo | center | right */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: var(--nav-h, 72px);
}

/* Center block keeps the links centered in the remaining space */
.site-nav.in-hero.full .center-links{
  display:flex; justify-content:center; align-items:center;
  min-width:0;                   /* allow shrinking without wrapping the grid */
}
.site-nav.in-hero.full .primary-nav{ min-width:0; }
.site-nav.in-hero.full .primary-nav .menu{
  display:flex; gap: clamp(20px,4vw,48px); align-items:center;
}
.site-nav.in-hero.full .primary-nav .menu > li{ white-space:nowrap; }

/* Right cluster never wraps or shrinks */
.site-nav.in-hero.full .right-side{
  display:flex; gap:16px; align-items:center; flex:0 0 auto;
}
.site-nav.in-hero.full .right-side .estimate,
.site-nav.in-hero.full .right-side .phone{ white-space:nowrap; flex:0 0 auto; }
.site-nav.in-hero.full .right-side .estimate{ min-width:210px; }
.site-nav.in-hero.full .right-side .phone{ min-width:160px; }

/* Logo never distorts */
.site-nav.in-hero.full .logo img{
  max-height:52px; width:auto; height:auto; object-fit:contain;
}

/* Keep the hover “bridge” so dropdowns are easy to enter */
.site-nav.in-hero.full .primary-nav .menu > li > a{ display:inline-flex; align-items:center; padding:10px 0; }
.site-nav.in-hero.full .primary-nav .menu > li.menu-item-has-children > .sub-menu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}

/* Hero CTA as Stones red button */
.site-nav.in-hero.full .right-side .estimate{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; font-weight:800;
  background: var(--red, #A91617); color:#fff; border:1px solid #980f10;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  transition: filter .15s ease, transform .08s ease;
}
.site-nav.in-hero.full .right-side .estimate:hover{ filter:brightness(.92); }
.site-nav.in-hero.full .right-side .estimate:active{ transform: translateY(0); }

/* ==== Layout: full-width row with 30px gutters ==== */
.site-nav { background:#fff; }
.site-nav.in-hero { background: transparent; }  /* hero keeps transparent */
.site-nav .nav-row{
  display:grid;
  grid-template-columns: auto 1fr auto;   /* logo | links | CTA+phone */
  align-items:center;
  gap: 20px;
  padding: 12px 30px;                     /* 30px gutters like you asked */
  min-height: var(--nav-h, 72px);
}

/* Center links live exactly between left & right zones */
.center-links{ justify-self:center; }
.center-links .menu{
  display:flex; align-items:center; gap: clamp(20px, 4vw, 48px);
  list-style:none; margin:0; padding:0;
}
.center-links .menu > li > a{
  display:inline-flex; align-items:center; gap:8px;
  font: 700 1.05rem/1 Manrope, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  white-space: nowrap;                     /* keep “Areas We Serve” on one line */
  color: #232b38;
}
.site-nav.in-hero .center-links .menu > li > a{ color:#fff; }

/* Dropdown bridge (prevents hover gap collapse) */
.center-links .menu > li{ position:relative; }
.center-links .menu > li.menu-item-has-children > .sub-menu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}
.center-links .sub-menu{
  position:absolute; top:calc(100% + 1px); left:0; display:none;
  min-width: 280px; padding:10px 0; border-radius:16px;
  background:#fff; color:#232b38; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.18); z-index:20;
}
.center-links .menu > li:hover > .sub-menu{ display:block; }
.center-links .sub-menu a{ display:flex; justify-content:space-between; padding:14px 18px; color:#232b38; }

/* Logo sizing remains clean (prevents “squish”) */
.site-nav .logo img{ display:block; height:auto; max-height:48px; }

/* Right side: CTA + phone always single line */
.right-side{ display:flex; align-items:center; gap:18px; }
.nav-estimate{
  white-space: nowrap;
  min-width: 240px;                 /* keeps text on one line */
  text-align:center;
  padding: 12px 18px;
  border-radius: 12px;
  font: 800 1rem/1 Manrope, system-ui, -apple-system;
  color:#fff; background:#A91617; border:1px solid #980f10;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.nav-estimate:hover{ background:#901214; }
.nav-estimate:active{ background:#7D0F11; }
.phone{ white-space: nowrap; font-weight:800; color:#232b38; }
.site-nav.in-hero .phone{ color:#fff; }

/* Keep top-level link labels from wrapping */
.center-links .menu > li > a,
.center-links .menu > li > .submenu-toggle{ white-space:nowrap; }

/* Hero variant: make the hero CTA red too (matches your request) */
.site-nav.in-hero .nav-estimate{
  background:#A91617; border-color:#980f10; color:#fff;
}

/* Small screens (you can adapt later for a mobile menu) */
@media (max-width: 980px){
  .center-links{ display:none; }            /* keep desktop nav only for now */
  .right-side .nav-estimate{ min-width: 0; }
}