@scope (#site-header .contact-liquid){
  .liquid-stage{
    --lu:calc(var(--h) / 516);
    --bh:var(--h);
    --pad:calc(900 * var(--lu));
    position:relative;
    width:max-content; height:max-content;
    padding:var(--pad);
    display:grid; place-items:center;
    touch-action:manipulation;
    font-family:'Lexend','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
    font-optical-sizing:auto;
    -webkit-font-smoothing:antialiased;
  }
  .liquid-stage--explore{ --h:calc(60.156 * var(--u)); }
  .liquid-stage--play{ --h:calc(88.2288 * var(--u)); }

  .liquid-plate{
    position:absolute;
    inset:var(--pad);
    border-radius:999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.014) 44%, rgba(255,255,255,0) 64%),
      rgba(10,12,10,.42);
    box-shadow:
      0 calc(var(--h) * 0.08) calc(var(--h) * 0.18) rgba(0,0,0,.38),
      0 calc(var(--h) * 0.24) calc(var(--h) * 0.50) rgba(0,0,0,.28),
      0 calc(var(--h) * 0.48) calc(var(--h) * 0.96) rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.05);
    transition:box-shadow .38s cubic-bezier(.22,.61,.36,1),
               background .38s cubic-bezier(.22,.61,.36,1);
  }
  .liquid-stage.hot .liquid-plate{
    background:
      linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.02) 44%, rgba(255,255,255,0) 64%),
      rgba(8,10,8,.50);
    box-shadow:
      0 calc(var(--h) * 0.10) calc(var(--h) * 0.22) rgba(0,0,0,.44),
      0 calc(var(--h) * 0.32) calc(var(--h) * 0.66) rgba(0,0,0,.34),
      0 calc(var(--h) * 0.66) calc(var(--h) * 1.32) rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 calc(var(--h) * -0.02) calc(var(--h) * 0.05) rgba(255,255,255,.06);
  }
  .liquid-fx{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  .liquid-button{
    position:relative;
    height:var(--bh);
    border:0; background:none;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-family:inherit; font-weight:500; line-height:1; letter-spacing:0;
    cursor:pointer; -webkit-tap-highlight-color:transparent; outline:none;
  }
  .liquid-button:focus-visible{
    outline:calc(4 * var(--lu)) solid rgba(255,255,255,.55);
    outline-offset:calc(10 * var(--lu));
  }
  .liquid-button .ico{ display:block; flex:none; overflow:visible; }
  .liquid-button .lbl{ display:block; transform:translateY(calc(2 * var(--lu))); }
  .liquid-button--explore{
    padding:0 calc(224 * var(--lu)) 0 calc(95 * var(--lu));
    gap:calc(112 * var(--lu));
    font-size:calc(140 * var(--lu));
  }
  .liquid-button--explore .ico{
    width:calc(150 * var(--lu)); height:calc(150 * var(--lu));
  }
  .liquid-button--play{
    width:var(--bh); height:var(--bh); padding:0;
  }
  .liquid-button--play .ico{
    width:calc(176 * var(--lu)); height:calc(176 * var(--lu));
    margin-left:calc(14 * var(--lu));
  }
  .liquid-button--play .lbl{ display:none; }
  .liquid-stage.press .liquid-plate{
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 44%, rgba(255,255,255,0) 64%),
      rgba(7,9,7,.55);
    box-shadow:
      0 calc(var(--h) * 0.04) calc(var(--h) * 0.11) rgba(0,0,0,.46),
      0 calc(var(--h) * 0.13) calc(var(--h) * 0.32) rgba(0,0,0,.36),
      0 calc(var(--h) * 0.27) calc(var(--h) * 0.62) rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.10);
    transition-duration:.10s;
  }


}
#site-header .contact-liquid{--h:38px;--lu:calc(var(--h) / 516);--bh:var(--h);--pad:calc(900 * var(--lu));position:relative;display:grid;place-items:center;flex:0 0 auto;width:max-content;height:max-content;padding:var(--pad);margin:calc(-1 * var(--pad)) calc(12px - var(--pad));isolation:isolate;pointer-events:none}
#site-header .contact-liquid .liquid-button{padding:0 22px;min-width:100px;font-size:13px;font-weight:700;text-decoration:none;pointer-events:auto;white-space:nowrap;color:#fff!important;text-shadow:0 1px 3px #000b}
#site-header .contact-liquid .liquid-button span{color:#fff!important}
#site-header .contact-liquid .liquid-plate{background:transparent;border:1px solid #ffffff12;box-shadow:0 2px 6px #00000012}
#site-header .contact-liquid .liquid-fx{pointer-events:none;opacity:.85;transition:opacity .25s}
#site-header .contact-liquid .liquid-button:focus-visible{outline:2px solid #7451ff;outline-offset:4px}
/* Transparent plates reveal the exact header surface in both tones. */
html body #site-header[data-nav-tone="light"] .contact-liquid .liquid-plate{background:transparent;border-color:#1c2b330c;box-shadow:0 2px 6px #1c2b3310}
html body #site-header[data-nav-tone="light"] .contact-liquid .liquid-button,html body #site-header[data-nav-tone="light"] .contact-liquid .liquid-button span{color:#1c2b33!important;text-shadow:0 1px 1px #fff8}
#site-header .contact-liquid .liquid-button{transition:color .25s,text-shadow .25s}
@media(max-width:767px){#site-header .contact-liquid{--h:34px;margin-left:calc(6px - var(--pad));margin-right:calc(6px - var(--pad))}#site-header .contact-liquid .liquid-button{min-width:86px;padding:0 14px;font-size:12px}}

html body #site-header[data-nav-tone]{backdrop-filter:blur(18px);transition:background .3s,color .3s,box-shadow .3s;--stnbgo:0}
html body #site-header[data-nav-tone="light"]{background:rgba(255,255,255,.80);color:#1c2b33;--stnld:contents;--stndd:none}
html body #site-header[data-nav-tone="dark"]{background:rgba(17,21,25,.80);color:#fff;--stnld:none;--stndd:contents}
html body #site-header[data-nav-tone="light"] nav :is(span,svg){color:#1c2b33!important}
html body #site-header[data-nav-tone="dark"] nav :is(span,svg){color:#fff!important}

/* Keep the fine outline quiet while letting the soft glow remain visible. */
#site-header .contact-liquid:is(.hot,:focus-within) .liquid-fx{opacity:1}
#site-header .contact-liquid::before{content:"";position:absolute;inset:var(--pad);border-radius:999px;pointer-events:none;background:radial-gradient(ellipse at 25% 80%,#efc58642,transparent 65%),radial-gradient(ellipse at 85% 30%,#8bc7f342,transparent 65%);filter:blur(12px);opacity:.6;transition:opacity .25s}
#site-header .contact-liquid:is(.hot,:focus-within)::before{opacity:1}
/* Top-level selections use the very same canvas shader as the contact button. */
#site-header .nav-liquid{--h:32px;margin:calc(-1 * var(--pad));}
#site-header .nav-liquid::before{display:none}
#site-header .nav-liquid .liquid-button{min-width:0;padding:0 12px;font-size:inherit;font-weight:inherit;color:inherit!important;text-shadow:none!important;background:transparent!important;border-radius:999px;overflow:visible}
#site-header .nav-liquid .liquid-button span{color:inherit!important}
#site-header .nav-liquid .liquid-plate,#site-header .nav-liquid .liquid-fx{opacity:0;transition:opacity .2s}
#site-header .nav-liquid.hot .liquid-plate{opacity:1}
#site-header .nav-liquid.hot .liquid-fx{opacity:1}
@media(max-width:767px){#site-header .nav-liquid{display:none}}

/* An open dropdown retains the navigation tone instead of forcing white. */
html body #site-header[data-nav-tone="dark"].open #desktop-menu{background:#171c20;color:#f5f7f9}
html body #site-header[data-nav-tone="dark"] #desktop-menu :is(div,section,ul,li){background-color:transparent!important}
html body #site-header[data-nav-tone="dark"] #desktop-menu :is(a,span,p,h2,h3,h4,button){color:#f5f7f9!important}
html body #site-header[data-nav-tone="dark"] #desktop-menu a:hover{background-color:#ffffff0c!important}
html body:has(#site-header[data-nav-tone="dark"]) #mobile-menu{background:#171c20;color:#f5f7f9}
html body:has(#site-header[data-nav-tone="dark"]) #mobile-menu :is(div,section,ul,li){background-color:transparent!important}
html body:has(#site-header[data-nav-tone="dark"]) #mobile-menu :is(a,span,p,h2,h3,button){color:#f5f7f9!important}

/* Home starts directly over the video; reveal the surface after scrolling. */
html body[data-page="home"] #site-header:not(.scrolled):not(.open){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:#1c2b33;--stnbgo:0;--stnld:contents;--stndd:none}
html body[data-page="home"] #site-header:not(.scrolled):not(.open) nav :is(span,svg){color:#1c2b33!important}
