*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ivory:        #FAF7F2;
      --sand:         #E5CDB0;
      --taupe:        #BFA090;
      --cocoa:        #3D2B1E;
      --teal-brand:   #2A8B8A;
      --teal-deep:    #195458;
      --teal-light:   #5EC9C3;
      --lilac:        #9D88BF;
      --lavender:     #E3DCF1;
      --white:        #FFFFFF;
      --gold:         #C9A84C;
      --gold-light:   #F0D89A;
      --forest:       #1A3D35;
      --surface-glass: rgba(255,255,255,0.07);
      --border-glass:  rgba(255,255,255,0.13);
    }

    html { scroll-behavior: auto; }

    body {
      font-family: 'IBM Plex Sans Hebrew', sans-serif;
      background: var(--ivory);
      color: var(--cocoa);
      overflow-x: hidden;
      overscroll-behavior: none;
    }

    /* ── Skip to content (accessibility) ── */
    .skip-link {
      position: absolute;
      top: -100%;
      right: 20px;
      background: var(--teal-deep);
      color: #fff;
      padding: 10px 20px;
      border-radius: 0 0 8px 8px;
      font-size: 14px;
      font-weight: 600;
      z-index: 9999;
      text-decoration: none;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }

    /* ── Global focus styles ── */
    :focus-visible {
      outline: 2px solid var(--teal-light);
      outline-offset: 3px;
      border-radius: 4px;
    }
    /* Remove outline for mouse users on specific elements */
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible) { outline: none; }

    /* ══════════════════════════════════════════════════════════════
       NAV — floating glass pill over hero, solid bar after
    ══════════════════════════════════════════════════════════════ */