/* ============================================================
   Grouped dropdown navigation (2026-10-19)
   Services v / Pricing / About v / Resources v / Contact / Book a call
   Loaded after style.css (and after the tool pages' inline styles),
   so it overrides the older flat-nav rules. Desktop above 960px;
   at 960px and below the hamburger opens a panel with accordion groups.
   ============================================================ */
.nav .nav-links{gap:4px}
.nav .nav-links > a:not(.btn),
.nav-dd-btn{
  font:inherit; font-size:16px; font-weight:500; line-height:1.2; color:var(--muted);
  background:none; border:0; border-radius:10px; padding:10px 12px; margin:0;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:color .2s, background-color .2s;
}
.nav .nav-links > a:not(.btn):hover, .nav-dd-btn:hover, .nav-dd.open > .nav-dd-btn{color:var(--accent)}
.nav .nav-links > a.active, .nav-dd-btn.active{color:var(--accent); font-weight:700}
.nav-dd-btn:focus-visible, .nav .nav-links a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nav-dd-btn svg{width:11px; height:11px; flex-shrink:0; transition:transform .2s ease}
.nav-dd.open > .nav-dd-btn svg{transform:rotate(180deg)}
.nav .nav-links > .btn{margin-left:10px}

.nav-dd{position:relative}
.nav .nav-dd-panel{
  display:none; position:absolute; top:calc(100% + 12px); left:0; z-index:60;
  min-width:250px; padding:10px; background:var(--cream-hi);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(13,44,39,.16);
}
.nav .nav-dd.open > .nav-dd-panel{display:block}
.nav .nav-dd-panel a{
  display:block; padding:9px 12px; border-radius:8px; font-size:15px; font-weight:500;
  color:var(--ink); text-decoration:none; white-space:nowrap; line-height:1.35;
}
.nav .nav-dd-panel a:hover{background:var(--cream); color:var(--ink)}
.nav .nav-dd-panel a.active{color:var(--gold); font-weight:700}
.nav .nav-dd-panel a.nav-dd-all{color:var(--gold); font-weight:600}
.nav-dd-h{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold); padding:8px 12px 6px}
.nav-dd-sep{display:block; height:1px; background:rgba(18,58,51,.14); margin:8px 6px}
/* Services: two-column list of the nine services */
.nav .nav-dd-wide.open > .nav-dd-panel{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:4px; min-width:500px}
.nav-dd-wide .nav-dd-h, .nav-dd-wide .nav-dd-sep{grid-column:1 / -1}

/* ---------- desktop: 961px and up ---------- */
@media (min-width:961px){
  .nav .nav-toggle{display:none}
  .nav .nav-links > a:not(.btn), .nav .nav-links > .nav-dd{display:inline-flex}
  .nav .nav-links > .nav-dd{display:block}
}
@media (min-width:961px) and (max-width:1100px){
  .nav-in{gap:10px}
  .nav .nav-links > a:not(.btn), .nav-dd-btn{font-size:15px; padding:9px 9px}
}

/* ---------- 960px and below: hamburger + accordion groups ---------- */
@media (max-width:960px){
  .nav .nav-toggle{display:flex}
  .nav:not(.open) .nav-links > :not(.btn){display:none}
  .nav.open .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    margin-left:0; gap:0; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 16px 28px rgba(13,44,39,.16); padding:6px 22px 22px; max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .nav.open .nav-links > a:not(.btn), .nav.open .nav-dd-btn{
    display:flex; width:100%; justify-content:space-between; padding:15px 2px; border-radius:0;
    border-bottom:1px solid var(--line); font-size:17px; color:var(--fg);
  }
  .nav.open .nav-links > .nav-dd{display:block}
  .nav.open .nav-dd-btn svg{width:13px; height:13px}
  .nav.open .nav-dd-panel, .nav.open .nav-dd-wide.open > .nav-dd-panel{
    position:static; min-width:0; box-shadow:none; border:0; border-radius:0; background:transparent;
    padding:4px 0 10px 12px; border-bottom:1px solid var(--line); grid-template-columns:1fr;
  }
  .nav.open .nav-dd.open > .nav-dd-panel{display:block}
  .nav.open .nav-dd-panel a{display:block; padding:10px 4px; font-size:16px; color:var(--fg); white-space:normal}
  .nav.open .nav-dd-panel a:hover{background:transparent; color:var(--accent)}
  .nav.open .nav-dd-h{padding:8px 4px 4px}
  .nav.open .nav-links > a.btn{display:block; width:100%; text-align:center; margin:16px 0 0}
}

/* Book a call pill: same size at every desktop width */
@media (min-width:961px){ .nav .nav-links > a.btn{padding:11px 18px; font-size:14.5px} }
/* Mobile accordion: no rules between sub-links, no repeated group heading */
@media (max-width:960px){
  .nav.open .nav-dd-panel a, .nav.open .nav-dd-panel a:not(.btn){border-bottom:0; padding:10px 4px}
  .nav.open .nav-dd-h{display:none}
}
/* Skip link: the four tool pages carry their own inline CSS without this rule */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
  background:var(--ink); color:var(--cream-hi); padding:14px 22px; border-radius:0 0 10px 0;
  font-weight:600; font-size:15px; text-decoration:none; z-index:100
}
.skip-link:focus{left:0; top:0; width:auto; height:auto; overflow:visible}