:root{
  --bar-h:56px;
  --brand-blue:#33ACFF;     /* underline + focus color */
  --divider:rgba(0,0,0,.22);
  --text:#111;
  --dim-alpha:.28;          /* we can test .26 after go-live */
}

/* ===== MOBILE HEADER (drawer trigger) ===== */
.topbar{
  position:fixed; inset:0 0 auto 0;
  height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  background:#fff;
  border-bottom:1.75px solid rgba(0,0,0,.08);
  z-index:2000;
}
.brand a{ font-size:18px; font-weight:700; color:var(--text); text-decoration:none; }

/* Hamburger */
.hamburger{ width:21px; height:15px; position:relative; cursor:pointer; background:none; border:0; padding:0; }
.hamburger .bar{
  position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s, opacity .2s, top .25s, bottom .25s;
}
.hamburger .bar:nth-child(1){ top:0; }
.hamburger .bar:nth-child(2){ top:6px; }
.hamburger .bar:nth-child(3){ bottom:0; }
.hamburger.is-active .bar:nth-child(1){ top:6px; transform:rotate(45deg); }
.hamburger.is-active .bar:nth-child(2){ opacity:0; }
.hamburger.is-active .bar:nth-child(3){ top:6px; bottom:auto; transform:rotate(-45deg); }

/* ===== DRAWER + OVERLAY ===== */
#mobileMenu{
  position:fixed; top:var(--bar-h); right:-82vw; width:82vw; max-width:380px;
  height:calc(100vh - var(--bar-h)); background:#fff;
  box-shadow:-2px 0 18px rgba(0,0,0,.18);
  transition:right .28s ease; overflow:auto; z-index:1500;
}
#mobileMenu.open{ right:0; }

.menu-dim{ position:fixed; inset:0; background:rgba(0,0,0,var(--dim-alpha)); display:none; z-index:1400; }
.menu-dim.show{ display:block; }

/* ===== GROUPS / ROWS (primaries) ===== */
.menu-group{ border-bottom:1.75px solid var(--divider); padding:0; }
.menu-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 18px;
  font-size:17px;
  font-weight:600;                 /* primaries */
  letter-spacing:-0.2px;
}
.menu-row a{ color:var(--text); text-decoration:none; flex:1 1 auto; }

/* Link-only primaries: make the whole row tappable and show soft press */
.menu-row.link-only { position: relative; }
.menu-row.link-only a{
  display:block; position:relative;
  margin:-17px -18px;             /* expand to row edges without extra markup */
  padding:17px 18px;
  border-radius:10px;
}

/* Testimonials toggle (only primary with a chevron) */
.menu-row .toggle{
  appearance:none; background:none; border:0; padding:0; margin-left:12px;
  width:32px; height:32px; cursor:pointer; position:relative; flex:0 0 auto;
}
.menu-row .toggle::before{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  width:6px; height:6px; border:solid #333; border-width:0 2px 2px 0; transition:transform .25s ease;
}
.menu-group.open .menu-row .toggle::before{ transform:translate(-50%,-50%) rotate(-135deg); }

/* Open-state underline = brand blue */
.menu-group.open .menu-row{ box-shadow: inset 0 -4px 0 0 var(--brand-blue); }

/* ===== SUBMENU (secondaries) ===== */
.submenu{ display:none; padding:6px 0 10px 0; }
.menu-group.open .submenu{ display:block; }

.submenu a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px;
  font-size:17px;                 /* same size as primaries */
  font-weight:500;                /* lighter than primaries */
  line-height:1.45;
  color:rgba(0,0,0,.65);          /* lighter gray for hierarchy */
  text-decoration:none;
  border-top:1px solid rgba(0,0,0,.12);
}
.submenu a:first-child{ border-top:0; }

/* ===== ACCESSIBILITY / TOUCH FEEDBACK ===== */
@media (pointer: coarse){
  /* Remove the harsh blue WebKit tap block; keep our soft press bg */
  a, button { -webkit-tap-highlight-color: transparent; }
  .menu-row.link-only a:active,
  .submenu a:active { background: rgba(51,172,255,.12); }
}

/* Keyboard focus (desktop + mobile keyboards) */
.menu-row a:focus-visible,
.menu-row .toggle:focus-visible,
.submenu a:focus-visible{
  outline:2px solid var(--brand-blue);
  outline-offset:2px;
  border-radius:4px;
}

/* ===== DESKTOP GUARDS ===== */
@media (min-width:769px){
  .topbar{ display:none; }           /* mobile header hidden on desktop */
  .hamburger, #mobileMenu, .menu-dim{ display:none !important; }
  body{ overflow:auto !important; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  .hamburger .bar, #mobileMenu{ transition:none !important; }
}