:root{--header-height:164px}
body{padding-top:var(--header-height)}
    /* HEADER */
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:100;
      background:var(--navy);
      padding:14px 0;
      transition:transform .28s ease, padding .22s ease, box-shadow .22s ease;
      box-shadow:0 1px 0 rgba(255,255,255,.04);
      overflow:visible;
    }

    .site-header.scrolled{
      padding:9px 0;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
    }

    .site-header.header-hidden{
      transform:translateY(-100%);
    }

    .header-inner{
      display:grid;
      grid-template-columns:140px minmax(0, 1fr);
      gap:24px;
      align-items:center;
    }

    .brand{
      position:relative;
      width:140px;
      height:136px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:visible;
    }

    /* The viewBox centres the original gold rings at source coordinates (515, 443). */
    .brand-logo{
      display:block;
      width:136px;
      height:136px;
      border-radius:50%;
      overflow:hidden;
      box-shadow:0 14px 24px rgba(0,0,0,.22);
    }

    .nav-area{
      display:flex;
      justify-content:flex-end;
      padding-top:0;
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:28px;
      flex-wrap:wrap;
      color:var(--white);
      font-size:14px;
      font-weight:400;
    }

    .nav a{
      position:relative;
      white-space:nowrap;
      padding-bottom:6px;
      opacity:.97;
      transition:color .2s ease;
    }

    .nav a:not(.nav-contact):not(.youtube-link)::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-2px;
      height:2px;
      background:rgba(255,255,255,.9);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .2s ease;
    }

    .nav a:not(.nav-contact):not(.youtube-link):hover,
    .nav a:not(.nav-contact):not(.youtube-link):focus-visible{
      color:#f0e1a7;
      outline:none;
    }

    .nav a:not(.nav-contact):not(.youtube-link):hover::after,
    .nav a:not(.nav-contact):not(.youtube-link):focus-visible::after,
    .nav a.active::after{
      transform:scaleX(1);
    }

    .youtube-link{
      display:inline-flex;
      width:38px;
      height:38px;
      border:2px solid rgba(255,255,255,.84);
      border-radius:50%;
      align-items:center;
      justify-content:center;
      padding-bottom:0 !important;
    }

    .youtube-link svg{
      width:18px;
      height:18px;
      fill:currentColor;
    }

    .nav-contact{
      background:linear-gradient(180deg, var(--gold-soft), var(--gold));
      color:var(--navy);
      padding:10px 20px !important;
      border-radius:999px;
      font-weight:600;
      font-size:13px;
      box-shadow:0 8px 16px rgba(0,0,0,.14);
    }

    .mobile-bar{
      display:none;
      width:100%;
      justify-content:flex-end;
      align-items:center;
      padding-top:12px;
    }

    .menu-toggle{
      width:44px;
      height:44px;
      border:none;
      border-radius:50%;
      background:transparent;
      color:var(--white);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }

    .menu-toggle svg{
      width:24px;
      height:24px;
      fill:currentColor;
    }

    .mobile-menu{
      display:none;
      width:100%;
      background:var(--navy);
      border-top:1px solid rgba(255,255,255,.08);
      padding:10px 20px 18px;
    }

    .mobile-menu.open{
      display:block;
    }

    .mobile-menu a{
      display:block;
      color:var(--white);
      padding:12px 0;
      font-size:15px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }


@media(max-width:820px){
      .header-inner{
        position:relative;
        grid-template-columns:1fr;
        justify-items:center;
        gap:0;
      }

      .brand{
        justify-content:center;
        height:136px;
      }

      .nav-area{
        display:none;
      }

      .mobile-bar{
        display:flex;
        position:absolute;
        right:0;
        top:50%;
        transform:translateY(-50%);
        width:44px;
        height:44px;
        padding-top:0;
      }

      .site-header.mobile-menu-open .mobile-menu{
        display:block;
      }


.site-header .mobile-menu{max-height:calc(100dvh - var(--header-height));overflow-y:auto}
}
.site-header .mobile-menu .nav-contact{color:var(--navy);text-align:center;margin-top:10px}
.site-header .brand:focus-visible,.site-header .menu-toggle:focus-visible,.site-header .nav-contact:focus-visible,.site-header .youtube-link:focus-visible{outline:3px solid var(--gold-soft);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .nav a{transition:none}}