/* 02 NAV: floating bar, links, buttons */
  /* ---------- NAV ---------- */
  header {
    position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
    pointer-events: none;
  }
  .nav-bar {
    pointer-events: auto;
    max-width: 1280px; margin: 0 auto;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ink);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 20px;
    height: 60px;
  }
  .nav-bar .logo img { height: 30px; filter: grayscale(1) contrast(1.1); }
  .nav-links { display: flex; gap: 32px; font-weight: 500; font-size: 15px; }
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; bottom: -4px;
    width: 0; height: 1px; background: #000; transition: width 0.3s ease;
  }
  .nav-links a:hover::after { width: 100%; }
  .nav-cta { display: flex; align-items: center; gap: 16px; }
  .nav-tel { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
  .nav-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-weight: 700; font-size: 14px;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 14px 28px;
    border: 1px solid #000;
    white-space: nowrap;
    transition: transform 0.2s cubic-bezier(0.32,0.72,0,1), background 0.25s cubic-bezier(0.32,0.72,0,1);
  }
  .btn:active { transform: translateY(1px) scale(0.98); }
  .btn:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
  .btn-black { background: #000; color: #fff; }
  .btn-black:hover { background: #1a1a1a; }
  .btn-white { background: #fff; color: #000; }
  .btn-white:hover { background: #f2f2f2; }
  .btn-sm { padding: 8px 16px; font-size: 14px; }
  /* hero primary: the single most-clicked element, sized apart from every other button */
  .btn-hero { padding: 16px 32px; font-size: 16px; }