/* Top navigation, brand panel, nav search, and collapsed brand dock. */

/* ===== Top nav ===== */
    .nav{
      position:sticky;
      top:0;
      z-index:9990;
      background: transparent;
      border-bottom: 1px solid rgba(255,255,255,.07);
      overflow: visible;
      transform: translateY(var(--nav-hide-y));
      transition: border-color .18s ease, transform .34s cubic-bezier(.2,.8,.2,1);
    }
    .nav::before{
      content:"";
      position:absolute;
      inset:0;
      backdrop-filter: blur(22px);
      background:
        linear-gradient(180deg, rgba(9,11,14,.92), rgba(7,8,10,.76)),
        radial-gradient(720px 120px at 50% 0%, rgba(255,255,255,.055), transparent 70%);
      opacity: var(--nav-shell-alpha);
      transition: opacity .18s ease;
      pointer-events:none;
    }
    .nav::after{
      display:none;
    }
    .nav-slice{
      position:absolute;
      left:calc(var(--brand-panel-w) - 66px + var(--brand-slice-offset));
      top:0;
      bottom:0;
      width:var(--brand-slice-w);
      background:rgba(255,255,255,.96);
      transform:skewX(-22deg);
      transform-origin:center;
      opacity:var(--nav-shell-alpha);
      pointer-events:none;
      z-index:4;
      box-shadow: 10px 0 24px rgba(0,0,0,.28);
      animation: navSliceDrift 5.8s ease-in-out infinite;
    }
    body.brand-slice-hidden .nav-slice{ display:none; }
    .nav-inner{
      width:100vw;
      margin:0;
      display:grid;
      grid-template-columns: var(--brand-panel-w) minmax(540px, 1fr) auto;
      align-items:center;
      gap:34px;
      min-height: var(--nav-h);
      padding:0 32px 0 0;
      position:relative;
      z-index:1;
      transition: opacity .18s ease, padding .18s ease, min-height .18s ease;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      color: rgba(244,246,248,.84);
      font-size:13px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.55px;
      will-change: transform;
      transition: transform .18s ease, opacity .18s ease;
    }
    .nav-links a{
      padding:34px 0 30px;
      border-radius: 0;
      border-bottom:2px solid transparent;
      transition: border-color .2s ease, color .2s ease, text-shadow .2s ease;
    }
    .nav-links a:hover{
      color: rgba(244,246,248,.95);
      border-bottom-color: var(--accent);
      text-shadow:0 0 18px rgba(var(--accent-rgb),.28);
    }
    /* uniform pill buttons for the right-side nav cluster */
    .nav-links.nav-right a,
    .nav-links.nav-right .admin-toggle{
      padding:13px 22px;
      margin:20px 0;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.05);
      color:rgba(244,246,248,.82);
      line-height:1;
      white-space:nowrap;
      cursor:pointer;
      box-shadow:none;
      text-shadow:none;
      transition:background .16s ease, color .16s ease, border-color .16s ease;
    }
    .nav-links.nav-right a:hover,
    .nav-links.nav-right .admin-toggle:hover{
      background:rgba(255,255,255,.11);
      border-color:rgba(255,255,255,.2);
      color:#f4f6f8;
      text-shadow:none;
    }
    .nav-links.nav-right a.active{ color:#f4f6f8; }
    .nav-links a.contact-cta{ background:rgba(255,255,255,.05); color:rgba(244,246,248,.82); }
    .nav-links.nav-left{ justify-content:flex-start; display:none; }
    .nav-links.nav-left{
      transform: translateX(var(--nav-left-shift));
      opacity: var(--nav-links-fade);
    }
    .nav-links.nav-right{ justify-content:flex-end; }
    .nav-links.nav-right{
      transform: translateX(var(--nav-right-shift));
      opacity: var(--nav-links-fade);
    }

    .brand{
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:16px;
      font-weight:900;
      letter-spacing:1px;
      padding:0 118px 0 78px;
      transform: translate(var(--brand-shift-x), var(--brand-shift-y)) scale(var(--brand-scale));
      will-change: transform;
      transition: transform .18s ease;
      cursor:pointer;
      height:var(--brand-panel-h);
      min-height:0;
      justify-content:flex-start;
      align-self:center;
      background:none;
      box-shadow:none;
      position:relative;
      z-index:2;
      overflow:visible;
    }
    .brand::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,28,42,var(--brand-panel-bg-alpha)), rgba(190,8,20,var(--brand-panel-bg-alpha))),
        radial-gradient(260px 90px at 25% 12%, rgba(255,255,255,calc(var(--brand-panel-bg-alpha) * .20)), transparent 65%);
      clip-path: polygon(0 0, calc(100% - var(--brand-cut-top)) 0, calc(100% - var(--brand-cut-bottom)) 100%, 0 100%);
      box-shadow: 18px 0 44px rgba(0,0,0,calc(var(--brand-panel-bg-alpha) * .32)), inset 0 1px 0 rgba(255,255,255,calc(var(--brand-panel-bg-alpha) * .18));
      z-index:-1;
      pointer-events:none;
    }
    .brand::after{
      display:none;
    }
    .brand-logo{
      width:var(--brand-logo-size);
      height:var(--brand-logo-size);
      min-width:var(--brand-logo-size);
      min-height:var(--brand-logo-size);
      flex:0 0 var(--brand-logo-size);
      border-radius:50%;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      background: transparent;
      transform: translate(var(--brand-logo-x), var(--brand-logo-y));
      position:relative;
      z-index:4;
    }
    .brand-logo img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .brand-divider{
      width:1px;
      align-self:center;
      height:72%;
      background:rgba(255,255,255,.38);
      box-shadow:0 0 16px rgba(255,255,255,.08);
      flex:0 0 1px;
    }
    .brand-copy{
      display:flex;
      flex-direction:column;
      gap:12px;
      flex:0 1 auto;
      min-width:0;
      transform: translate(var(--brand-text-x), var(--brand-text-y));
      position:relative;
      z-index:3;
    }
    .brand-name{
      display:block;
      flex:0 1 auto;
      min-width:0;
      font-family:"Besan", ui-sans-serif, system-ui, sans-serif;
      font-size:var(--brand-name-size);
      line-height:.82;
      font-weight:400;
      letter-spacing:var(--brand-name-letter);
      text-transform:uppercase;
      color:rgba(255,255,255,.94);
      text-shadow:0 0 28px rgba(255,255,255,.12);
      transform:translate(var(--brand-name-x), var(--brand-name-y));
    }
    .brand-subtitle{
      display:block;
      font-family:"Besan", ui-sans-serif, system-ui, sans-serif;
      color:rgba(255,255,255,.82);
      font-size:var(--brand-studio-size);
      line-height:1;
      font-weight:400;
      letter-spacing:var(--brand-studio-letter);
      text-transform:uppercase;
      transform:translate(var(--brand-studio-x), var(--brand-studio-y));
      position:relative;
      width:max-content;
    }
    .brand-subtitle::after{
      content:"";
      position:absolute;
      right:calc(100% + var(--brand-studio-line-gap));
      top:50%;
      width:var(--brand-studio-line-w);
      height:var(--brand-studio-line-h);
      transform:translateY(-50%);
      transform-origin:center;
      background:var(--brand-studio-line-color);
      box-shadow:0 0 12px color-mix(in srgb, var(--brand-studio-line-color) 46%, transparent);
      pointer-events:none;
    }
    .brand-subtitle::before{
      content:"";
      position:absolute;
      left:calc(100% - var(--brand-studio-letter) + var(--brand-studio-line-gap));
      top:50%;
      width:var(--brand-studio-line-w);
      height:var(--brand-studio-line-h);
      transform:translateY(-50%);
      transform-origin:center;
      background:var(--brand-studio-line-color);
      box-shadow:0 0 12px color-mix(in srgb, var(--brand-studio-line-color) 46%, transparent);
      pointer-events:none;
    }
    body.studio-line-animated .brand-subtitle::before,
    body.studio-line-animated .brand-subtitle::after{
      animation: studioLinePulse var(--brand-studio-line-anim-duration) ease-in-out infinite;
    }
    @keyframes studioLinePulse{
      0%, 100%{ transform:translateY(-50%) scaleX(1); opacity:.72; }
      50%{ transform:translateY(-50%) scaleX(1.22); opacity:1; }
    }
    .brand-tools{
      position:absolute;
      right:86px;
      bottom:8px;
      display:none;
      z-index:5;
    }
    body.admin-active .brand-tools{ display:block; }
    body.nav-collapsed .nav{
      pointer-events:none;
      border-bottom-color: transparent;
    }
    body.nav-collapsed .nav-inner{
      opacity:0;
      visibility:hidden;
    }
    body.nav-collapsed .nav-links{
      opacity:0 !important;
      visibility:hidden;
    }
    body.nav-collapsed .brand{
      pointer-events:none;
      opacity:0;
      visibility:hidden;
    }
    .nav-search{
      height:58px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.22));
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 0 34px rgba(0,0,0,.22);
      display:flex;
      align-items:center;
      gap:14px;
      padding:0 28px;
      color: rgba(244,246,248,.48);
      font-size:16px;
      opacity: var(--nav-links-fade);
      transform: translateY(calc(var(--brand-shift-y) * .15));
      transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .nav-search input{
      width: min(210px, 18vw);
      min-width: 120px;
      border:0;
      outline:0;
      background:transparent;
      color:rgba(244,246,248,.92);
      font:inherit;
      font-size:14px;
      font-weight:800;
      letter-spacing:.04em;
    }
    .nav-search input::placeholder{
      color:rgba(244,246,248,.48);
      text-transform:uppercase;
    }
    .nav-search:focus-within{
      border-color: rgba(var(--accent-rgb),.42);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.045),
        0 0 44px rgba(var(--accent-rgb),.14);
    }
    .nav-search:hover{
      border-color: rgba(var(--accent-rgb),.28);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 0 40px rgba(var(--accent-rgb),.10);
    }
    .nav-search::before{
      content:"";
      width:22px;
      height:22px;
      border:3px solid rgba(244,246,248,.82);
      border-radius:50%;
      box-shadow: 12px 12px 0 -9px rgba(244,246,248,.82);
      transform: rotate(-22deg);
      flex:0 0 22px;
    }
    @keyframes navSliceDrift{
      0%, 100%{ transform:skewX(-22deg) translateX(0); opacity:calc(var(--nav-shell-alpha) * .96); }
      45%{ transform:skewX(-22deg) translateX(7px); opacity:var(--nav-shell-alpha); }
      70%{ transform:skewX(-22deg) translateX(-3px); opacity:calc(var(--nav-shell-alpha) * .88); }
    }
    @keyframes brandLogoDrift{
      0%, 100%{ transform: translate(var(--brand-logo-x), var(--brand-logo-y)); }
      45%{ transform: translate(calc(var(--brand-logo-x) - 4px), calc(var(--brand-logo-y) + 2px)); }
      72%{ transform: translate(calc(var(--brand-logo-x) + 3px), calc(var(--brand-logo-y) - 1px)); }
    }
    @keyframes brandTextDrift{
      0%, 100%{ transform: translate(var(--brand-text-x), var(--brand-text-y)); }
      42%{ transform: translate(calc(var(--brand-text-x) + 6px), calc(var(--brand-text-y) - 1px)); }
      76%{ transform: translate(calc(var(--brand-text-x) - 2px), calc(var(--brand-text-y) + 2px)); }
    }
    .brand-dock{
      position:fixed;
      left:22px;
      bottom:18px;
      z-index:10010;
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      opacity: var(--brand-dock-alpha);
      transform: translateY(var(--brand-dock-y));
      transition:
        opacity .46s ease .12s,
        transform .52s cubic-bezier(.2,.8,.2,1) .12s;
      pointer-events:none;
      cursor:pointer;
      background: transparent;
      border: 0;
      box-shadow:none;
      backdrop-filter:none;
      padding:0;
      width:54px;
      height:54px;
    }
    .brand-dock .brand-name{
      display:none;
      opacity:.92;
    }
    .brand-dock .brand-logo{
      width:54px;
      height:54px;
      min-width:54px;
      min-height:54px;
      flex:0 0 54px;
      background: transparent;
      transform:none;
      animation:none;
    }
    body.nav-collapsed .brand-dock{
      pointer-events:auto;
    }

    /* ===== Layout ===== */