/* ==========================================================
   GT STUDIOS NAVBAR - lifted from the GT Studios site and
   namespaced (gsnav / gsbrand / gsdrawer) so it can sit on top
   of gt-voice.css without fighting that sheet's own .nav rules.
   ========================================================== */
    /* ---------- Nav ---------- */
    .gsnav {
      position: sticky; top: 0; z-index: 200;   /* above the drawer (195) so it stays put while the menu slides behind it */
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
      padding: clamp(0.35rem, 0.7vw, 0.6rem) clamp(1.2rem, 3vw, 2.4rem);
      background: var(--bg);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
    }
    .gsnav.is-scrolled {
      background: rgba(255, 255, 255, 0.6);
      -webkit-backdrop-filter: saturate(1.6) blur(16px);
              backdrop-filter: saturate(1.6) blur(16px);
    }
    .gsbrand { display: inline-flex; align-items: center; gap: 0.65rem; justify-self: start; }
    .gsbrand__mark { height: 42px; width: auto; flex: 0 0 auto; filter: brightness(0); }   /* GT icon → black */
    .gsbrand__name { font-family: var(--sans); font-weight: 700; font-size: 1.42rem; line-height: 1; letter-spacing: -0.015em; }
    .gsbrand__logo { height: 40px; width: auto; filter: brightness(0); }   /* full GT Studios lockup → black */
    .gsnav__links { display: flex; justify-content: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
    /* GT Voice nav item: green New badge with a pulsing dot */
    .gsnav__item { display: inline-flex; align-items: center; gap: 0.45rem; }
    /* GT Voice nav dropdown: the label still goes to the GT Voice page, the caret opens the menu */
    .gsnav__drop { position: relative; }
    .gsnav__label { font-size: 0.88rem; color: var(--ink); cursor: default; }
    .gsnav__caret { -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0; padding: 0 0 0 0.1rem; font: inherit; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; }
    .gsnav__caret svg { width: 12px; height: 12px; transition: transform 0.22s ease; }
    .gsnav__drop.is-open .gsnav__caret svg { transform: rotate(180deg); }
    .gsnav__menu { position: absolute; top: calc(100% + 0.85rem); left: -0.9rem; min-width: 11rem; display: grid; gap: 0.1rem; padding: 0.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 46px -30px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 10; }
    .gsnav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem; }   /* keeps hover alive across the gap */
    .gsnav__drop.is-open .gsnav__menu { opacity: 1; visibility: visible; transform: none; }
    .gsnav__mi { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); transition: color 0.2s ease; }
    .gsnav__mi svg { width: 100%; height: 100%; }
    .gsnav__menu a:hover .gsnav__mi { color: var(--ink); }
    .gsnav__menu-rule { display: block; height: 1px; margin: 0.35rem 0.3rem; background: var(--line); }
    .gsnav__menu .gsnav__badge { margin-left: 0.45rem; font-size: 0.6rem; }
    .gsnav__menu a { display: flex; align-items: center; }
    .gsnav__menu a { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.88rem; white-space: nowrap; }
    .gsnav__menu a:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }
    @media (prefers-reduced-motion: reduce) { .gsnav__menu { transition: none; } .gsnav__caret svg { transition: none; } }
    .gsdrawer__sub { display: flex; flex-direction: column; margin: 0.1rem 0 0.5rem; padding-left: 1.1rem; border-left: 1px solid var(--line); }
    .gsdrawer__sub a { font-family: var(--sans); font-size: clamp(1rem, 4.4vw, 1.3rem); font-weight: 500; letter-spacing: 0; line-height: 1.3; padding: 0.4rem 0; color: var(--muted); }
    .gsdrawer__sub a:hover { color: var(--ink); opacity: 1; }
    .gsnav__badge { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #12874c; white-space: nowrap; }
    .gsnav__badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: gsnavPulse 1.5s ease-in-out infinite; }
    @keyframes gsnavPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.7); } }
    @media (prefers-reduced-motion: reduce) { .gsnav__badge i { animation: none; } }
    .gsdrawer__links .gsnav__item { display: flex; align-items: center; gap: 0.7rem; }
    .gsdrawer__links .gsnav__badge { font-size: 0.8rem; }
    .gsdrawer__links .gsnav__badge i { width: 8px; height: 8px; }
    .gsnav__links a { font-size: 0.88rem; color: var(--ink); opacity: 1; transition: opacity 0.2s ease; }
    .gsnav__links a:hover { opacity: 0.55; }
    /* the underline belongs to top-level links only: inside the dropdown it ran the
       full width of the menu row and read as a stray rule */
    .gsnav__links > a[aria-current="page"] { position: relative; }
    .gsnav__links > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; background: var(--ink); }
    .gsnav__links.js-nav > a[aria-current="page"]::after { display: none; }
    .gsnav__menu a[aria-current="page"] { background: rgba(0, 0, 0, 0.055); font-weight: 600; }
    .gsnav__menu a[aria-current="page"]::after { content: ""; width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--ink); }
    .gsnav__links { position: relative; }
    .gsnav__ink { position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0; background: var(--ink); opacity: 0; pointer-events: none; transform: translateX(0); transition: transform 0.42s cubic-bezier(0.45, 0, 0.15, 1), width 0.42s cubic-bezier(0.45, 0, 0.15, 1), opacity 0.35s ease; }
    @media (prefers-reduced-motion: reduce) { .gsnav__ink { transition: opacity 0.2s ease; } }
    .gsnav__cta { justify-self: end; }

    /* ---- Mobile nav toggle + drawer ---- */
    .gsnav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; background: none; border: none; cursor: pointer; justify-self: end; }
    .gsnav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.28s ease, opacity 0.2s ease; }
    .gsnav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .gsnav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .gsnav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .gsnav-scrim { position: fixed; inset: 0; z-index: 190; background: rgba(12, 12, 12, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .gsnav-scrim.is-open { opacity: 1; pointer-events: auto; }
    .gsdrawer { position: fixed; top: 0; left: 0; right: 0; z-index: 195; width: auto; height: auto; max-height: 100dvh; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(4.6rem, 12vh, 6rem) clamp(1.7rem, 6vw, 2.4rem) clamp(1.8rem, 5vh, 2.6rem); transform: translateY(-100%); transition: transform 0.44s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; }
    .gsdrawer.is-open { transform: translateY(0); }
    .gsdrawer__links { display: flex; flex-direction: column; }
    .gsdrawer__links a { font-family: var(--sans); font-size: clamp(2rem, 9vw, 2.7rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.24; color: var(--ink); padding: 0.5rem 0; transition: opacity 0.2s ease; }
    .gsdrawer__links a:hover { opacity: 0.55; }
    .gsdrawer__cta { margin-top: clamp(1.3rem, 4vw, 1.9rem); width: 100%; justify-content: center; padding-top: 0.95rem; padding-bottom: 0.95rem; }

    @media (max-width: 900px) {
      .gsnav { grid-template-columns: 1fr auto; }
      .gsnav.gsnav--hidden { transform: translateY(-100%); }
      .gsnav.is-menu-open { z-index: 200; transform: none; }
      .gsnav__links { display: none; }
      .gsnav .gsnav__cta { display: none; }
      .gsnav__toggle { display: flex; }
    }