/* Shared dropdown menu. Uses each page's own color tokens. */
.top { position: relative; }
.top-right { display: flex; align-items: center; gap: 16px; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: 4px; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.menu-btn .bars { width: 20px; height: 14px; display: block; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after, .menu-btn .bars i { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars i { top: 6px; }
.menu-btn .bars::after { bottom: 0; }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.menu { position: absolute; right: 0; top: calc(100% - 4px); z-index: 50; width: min(360px, 100%); background: var(--ink); color: var(--bg); border-radius: 6px; padding: 8px 10px 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.menu[hidden] { display: none; }
.menu a { display: block; padding: 16px 14px; font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; color: var(--bg); border-bottom: 1px solid rgba(128, 128, 128, 0.35); }
.menu a:hover, .menu a:focus-visible { color: var(--copper); }
.menu a[aria-current="page"] { color: var(--copper); }
.menu a.menu-cta { margin-top: 12px; border: 0; border-radius: 4px; background: var(--copper); color: var(--copper-ink); text-align: center; }
.menu a.menu-cta:hover, .menu a.menu-cta:focus-visible { color: var(--copper-ink); filter: brightness(1.06); }
.menu a.menu-call { border: 0; padding: 14px 14px 4px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; opacity: 0.92; }
.menu a.menu-call + a.menu-call { padding-top: 4px; }
.menu .menu-note { display: block; padding: 4px 14px 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
@media (max-width: 720px) {
  .top { flex-wrap: nowrap; gap: 8px; }
  .top .brand { font-size: 21px; gap: 8px; min-width: 0; line-height: 1.05; }
  .top .brand small { display: none; }
  .top .logo { width: 44px; height: 44px; }
  .top-right { flex: none; }
  .menu-btn { min-height: 44px; padding: 0 12px; font-size: 18px; gap: 8px; }
  .top-right .phone-link { display: none; }
  .menu { left: 0; right: 0; width: auto; }
}

/* ---------- Light theme: soft green-on-cream, no black bands, no automatic dark mode ---------- */
:root {
  --bg: #FAFCF2; --surface: #FFFFFF; --panel: #EDF3D8; --ink: #2A3A20; --muted: #556349; --line: #D3DEB8; --grid: #DDE6C6;
  --copper: #B4D331; --copper-ink: #1B2812; --accent-text: #4A6608; --band-accent: #4A6608; --ground: #3E7D1E;
  --band: #E3EEB7; --band-ink: #2A3A20; --alert: #B3261E; --alert-bg: #FBE9E7; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #FAFCF2; --surface: #FFFFFF; --panel: #EDF3D8; --ink: #2A3A20; --muted: #556349; --line: #D3DEB8; --grid: #DDE6C6;
    --copper: #B4D331; --copper-ink: #1B2812; --accent-text: #4A6608; --band-accent: #4A6608; --ground: #3E7D1E;
    --band: #E3EEB7; --band-ink: #2A3A20; --alert: #B3261E; --alert-bg: #FBE9E7; color-scheme: light;
  }
}
:root[data-theme="dark"] {
  --bg: #FAFCF2; --surface: #FFFFFF; --panel: #EDF3D8; --ink: #2A3A20; --muted: #556349; --line: #D3DEB8; --grid: #DDE6C6;
  --copper: #B4D331; --copper-ink: #1B2812; --accent-text: #4A6608; --band-accent: #4A6608; --ground: #3E7D1E;
  --band: #E3EEB7; --band-ink: #2A3A20; --alert: #B3261E; --alert-bg: #FBE9E7; color-scheme: light;
}
/* Bands that used to be black are now light lime. Inside them, "--bg" means the dark text color. */
.member, .contact, .cta-band, .out, .price, .callbar, .menu { --bg: var(--band-ink); }
.member, .contact, .cta-band, .out, .price { background: var(--band); color: var(--band-ink); }
.callbar { background: var(--band); border-top: 2px solid var(--line); }
.circuit .num { background: var(--copper); color: var(--copper-ink); }
.step-head .sn { background: var(--copper); color: var(--copper-ink); }
.chip input:checked + span, .day[aria-pressed="true"] { background: var(--copper); color: var(--copper-ink); border-color: var(--ink); }
.copy-btn:hover { background: var(--band-ink); color: var(--band); }
.summary { background: #FFFFFF; color: var(--band-ink); border: 1px solid var(--line); }
.member .btn.primary, .cta-band .btn.primary, .contact .btn.primary { border-color: var(--band-ink); }
.menu { background: #FFFFFF; color: var(--band-ink); border: 2px solid var(--line); box-shadow: 0 14px 34px rgba(42, 58, 32, 0.18); }
.menu a { color: var(--band-ink); border-bottom: 1px solid var(--line); }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="page"] { color: var(--accent-text); }
.menu a.menu-cta { background: var(--copper); color: var(--copper-ink); border: 0; }
.menu a.menu-cta:hover, .menu a.menu-cta:focus-visible { color: var(--copper-ink); }
.menu .menu-note { opacity: 1; color: var(--muted); }
.menu-btn[aria-expanded="true"] { background: var(--copper); color: var(--copper-ink); border-color: var(--ink); }
.btn { line-height: 1.1; padding-block: 8px; text-align: center; }