@media (min-width: 821px){
  .desktop-only{display:block}.mobile-only{display:none!important}
}
@media (min-width: 821px) and (max-width: 1080px){
  .header-top{grid-template-columns:220px 1fr auto;gap:14px}.brand-mark{width:210px}.nav-row{gap:22px}.hero-grid{grid-template-columns:1fr .8fr;gap:34px}.tools-grid{grid-template-columns:repeat(3,1fr)}.footer-main{grid-template-columns:1.2fr repeat(3,1fr);gap:26px}
}

/* ===== Desktop header navigation premium hover experiment v3.1.1 ===== */
@media (min-width: 821px){
  .header-nav{
    overflow:visible;
  }
  .nav-row{
    gap:12px;
    height:58px;
  }
  .nav-row a{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 16px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--ink-2);
    background:transparent;
    box-shadow:0 0 0 rgba(0,0,0,0);
    transform:translateY(0);
    transition:
      color .22s var(--ease),
      background .28s var(--ease),
      border-color .28s var(--ease),
      box-shadow .32s var(--ease),
      transform .22s var(--ease);
  }

  /* silver light sweep */
  .nav-row a::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-35%;
    bottom:-35%;
    left:-48%;
    width:34%;
    opacity:0;
    transform:skewX(-22deg) translateX(-180%);
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.12) 22%,
      rgba(255,255,255,.82) 50%,
      rgba(170,174,178,.22) 70%,
      transparent 100%
    );
    filter:blur(.2px);
    transition:transform .62s cubic-bezier(.16,.8,.22,1),opacity .16s ease;
    pointer-events:none;
  }

  /* precision underline */
  .nav-row a::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:4px;
    height:2px;
    border-radius:999px;
    opacity:0;
    transform:scaleX(.25);
    transform-origin:center;
    background:linear-gradient(90deg,transparent,#767b80 25%,#111315 50%,#767b80 75%,transparent);
    box-shadow:0 0 12px rgba(25,27,29,.22);
    transition:transform .28s var(--ease),opacity .22s ease;
  }

  .nav-row a:hover,
  .nav-row a:focus-visible{
    color:#101112;
    transform:translateY(-3px);
    border-color:#bfc1bf;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(226,227,224,.78));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(90,94,98,.08),
      0 0 0 4px rgba(30,32,34,.035),
      0 10px 24px rgba(18,19,20,.11);
    outline:none;
  }
  .nav-row a:hover::before,
  .nav-row a:focus-visible::before{
    opacity:1;
    transform:skewX(-22deg) translateX(520%);
  }
  .nav-row a:hover::after,
  .nav-row a:focus-visible::after{
    opacity:1;
    transform:scaleX(1);
  }
  .nav-row a:active{
    transform:translateY(-1px) scale(.985);
    box-shadow:
      inset 0 1px 4px rgba(0,0,0,.08),
      0 5px 12px rgba(0,0,0,.07);
  }

  html[data-theme="dark"] .nav-row a{
    color:#d7d8d6;
  }
  html[data-theme="dark"] .nav-row a:hover,
  html[data-theme="dark"] .nav-row a:focus-visible{
    color:#fff;
    border-color:#565a5e;
    background:linear-gradient(145deg,rgba(55,58,61,.92),rgba(27,29,31,.96));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 -1px 0 rgba(0,0,0,.28),
      0 0 0 4px rgba(255,255,255,.025),
      0 11px 25px rgba(0,0,0,.28);
  }
  html[data-theme="dark"] .nav-row a::before{
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 22%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.08) 72%,transparent);
  }
  html[data-theme="dark"] .nav-row a::after{
    background:linear-gradient(90deg,transparent,#7b7f83 24%,#f0f0ee 50%,#7b7f83 76%,transparent);
    box-shadow:0 0 12px rgba(255,255,255,.12);
  }
}