/* === GroundSet Site Nav (source-of-truth) ===
   Topbar + sticky nav (G-square logo) + mobile drawer.
   Loaded by all pages; supersedes legacy <nav id="nav"> styles. */

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:12px 18px;background:var(--orange);color:var(--cream);font-family:var(--font-display);font-weight:700;font-size:14px;border-radius:8px;text-decoration:none}

/* PR-F7 — topbar uses 2-row markup (.tb-row-1 + .tb-row-2). On desktop the
   two rows sit on the same line via flex space-between; on mobile (<=960px)
   they stack but each row remains left/right justified. The .live status is
   set dynamically by site-nav.js (open/closed by ET hours). Legacy .left and
   .right selectors retained for backward-compat with any cached HTML. */
.topbar{background:var(--navy);border-bottom:1px solid var(--rule-cream)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:11px 32px;font-size:13px;color:var(--text-cream-dim);max-width:1320px;margin:0 auto;gap:24px}
.topbar .tb-row{display:flex;gap:24px;align-items:center}
.topbar .tb-row-2{gap:18px}
/* Reviews on left, langs+phone grouped on right */
.topbar .tb-row-2 .tb-langs{margin-left:auto}
.topbar .live{display:inline-flex;align-items:center;gap:8px;color:var(--cream);white-space:nowrap}
.topbar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3DD68C;box-shadow:0 0 0 3px rgba(61,214,140,.18);transition:background-color .2s,box-shadow .2s;flex-shrink:0}
.topbar .live.is-closed::before{background:#9CA3AF;box-shadow:0 0 0 3px rgba(156,163,175,.18)}
.topbar a{color:var(--cream);text-decoration:none}
.topbar .tb-area,.topbar .tb-reviews,.topbar .tb-langs,.topbar .tb-phone{white-space:nowrap}
/* Legacy classes (some cached pages) */
.topbar .right{display:flex;gap:24px;align-items:center}

.nav.nav{position:sticky;top:0;z-index:50;background:rgba(11,25,41,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-cream)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;max-width:1320px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.04em}
.brand a{color:var(--cream);text-decoration:none;display:flex;align-items:center;gap:11px}
.brand-mark{width:32px;height:32px;display:grid;place-items:center;background:var(--orange);color:var(--cream);font-family:var(--font-display);font-weight:900;border-radius:6px;font-size:18px}
.nav-links{display:flex;gap:32px;font-size:15px;font-weight:500}
.nav-links a{color:var(--cream);text-decoration:none}
.nav-links a:hover,.nav-links a.is-active{color:var(--orange-light)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-cta .nav-phone{color:var(--cream);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.01em;white-space:nowrap}
.nav-cta .nav-phone:hover{color:var(--orange-light)}

/* Ghost-cream button (used in nav for language toggle) */
.btn-ghost-cream{background:transparent;color:var(--cream);border:2px solid var(--rule-cream-strong,rgba(245,240,228,.28));text-decoration:none}
.btn-ghost-cream:hover{border-color:var(--cream);color:var(--cream)}
.btn-ghost-cream:active{transform:translateY(0)}

.nav-burger{display:none;width:44px;height:44px;background:transparent;border:1px solid var(--rule-cream-strong);border-radius:8px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-burger:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nav-burger .nb-bars{display:block;width:20px;height:14px;position:relative;background:transparent}
.nav-burger .nb-bars::before,.nav-burger .nb-bars::after,.nav-burger .nb-bars span{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--cream);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-burger .nb-bars::before{top:0}
.nav-burger .nb-bars span{top:6px;left:0;display:block}
.nav-burger .nb-bars::after{bottom:0}

.nav-backdrop{position:fixed;inset:0;background:rgba(10,22,40,.55);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:90}
.nav-backdrop.is-shown{opacity:1;pointer-events:auto}

.mobile-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,360px);background:var(--navy);color:var(--cream);border-left:1px solid var(--rule-cream-strong);transform:translateX(100%);transition:transform .22s ease-out;z-index:100;display:flex;flex-direction:column;padding:24px 24px 28px;box-shadow:-12px 0 40px rgba(0,0,0,.35);overflow-y:auto}
.mobile-drawer.is-open{transform:translateX(0)}
.mobile-drawer[hidden]{display:none}
.md-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.md-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.04em;color:var(--cream)}
.md-brand .brand-mark{width:28px;height:28px;font-size:16px}
.md-close{width:40px;height:40px;background:transparent;border:1px solid var(--rule-cream-strong);border-radius:8px;cursor:pointer;color:var(--cream);font-size:22px;line-height:1;display:grid;place-items:center}
.md-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.md-links{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:4px}
.md-links a{display:block;padding:14px 8px;font-size:18px;font-weight:500;color:var(--cream);text-decoration:none;border-radius:6px}
.md-links a:hover,.md-links a:focus{background:rgba(244,238,224,.06);color:var(--orange-light);outline:2px solid var(--orange);outline-offset:2px}
.md-links a.is-active{color:var(--orange-light)}
.md-divider{height:1px;background:var(--rule-cream);margin:8px 0 20px}
.md-cta-stack{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.md-cta-stack .btn{height:48px;font-size:15px;width:100%;justify-content:center;display:inline-flex;align-items:center}
.md-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule-cream);font-size:13px;color:var(--text-cream-dim);display:flex;flex-direction:column;gap:6px}
.md-foot a{color:var(--cream);text-decoration:none}
body.no-scroll{overflow:hidden}

/* Tablet + mobile: switch to burger menu, hide desktop nav links + CTA.
   Breakpoint moved 767px → 960px so iPad-portrait (768) gets the burger
   instead of the cramped desktop nav with wrapping CTA text. */
@media (max-width:960px){
  .nav-burger{display:inline-flex}
  .nav-cta{display:none}
  .nav-links{display:none}
  /* PR-F7 — stack rows vertically; each row remains internally space-between */
  .topbar-inner{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;font-size:12px}
  .topbar .tb-row{justify-content:space-between;gap:12px;width:100%}
  .topbar .tb-row-2{gap:12px}
  /* Mobile: same right-grouping for langs+phone */
  .topbar .tb-row-2 .tb-langs{margin-left:auto}
  .topbar .right{font-size:12px;gap:14px}
}
@media (max-width:480px){
  .nav-inner{padding:12px 16px;gap:12px}
  .brand{font-size:13px;letter-spacing:.03em;white-space:nowrap}
  .brand-mark{width:28px;height:28px;font-size:15px}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:0 14px;font-size:12.5px;height:40px;white-space:nowrap}
  .nav-cta .btn-ghost-cream{display:none}
  .topbar-inner{padding:9px 16px;font-size:11.5px}
  .topbar .tb-row{gap:8px}
}
@media (prefers-reduced-motion:reduce){.mobile-drawer,.nav-backdrop{transition:none}}