/* =====================================================================
   nav.css — responsive header / navigation
   Load LAST on every page (after styles.css, fx.css, editorial.css ...)
   Desktop: horizontal bar with hover dropdown
   Mobile / tablet (<= 1180px): hamburger + full-height slide-down panel
   ===================================================================== */
:root{--nav-bp:1180px;--head:72px}

.hd{padding-top:env(safe-area-inset-top,0)}
.hd__in{height:var(--head);gap:16px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px}
.logo img{display:block;height:34px;width:auto}
.nav__list{flex-wrap:nowrap}
.nav__link{white-space:nowrap}
.sub-toggle{display:none}

/* ---------- desktop tightening so 7 items + CTA fit above 1180px ---------- */
@media (min-width:1181px){
  .nav__link{padding:10px 12px;font-size:15px}
  .hd__cta{margin-left:10px;white-space:nowrap}
}

/* ---------- mobile + tablet ---------- */
@media (max-width:1180px){
  :root{--head:64px}

  .util{display:none}
  .hd__in{height:var(--head)}

  /* hamburger */
  .hd .menu-btn{display:flex;width:48px;height:48px;margin-right:-10px;border-radius:50%;
    align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
  .hd .menu-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
  .hd .menu-btn span,.hd .menu-btn span::before,.hd .menu-btn span::after{width:24px;height:2px;border-radius:2px}
  .hd .menu-btn span::before{top:-8px}
  .hd .menu-btn span::after{top:8px}

  /* slide-down panel */
  .hd .nav{
    position:fixed;left:0;right:0;top:calc(var(--head) + env(safe-area-inset-top,0));
    bottom:0;height:auto;
    display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom,0));
    background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    border-top:1px solid var(--line);
  }
  body.menu-open{overflow:hidden}
  body.menu-open .hd .nav{display:flex;animation:navIn .22s ease-out}
  @keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .hd .nav__list{flex-direction:column;align-items:stretch;gap:0;height:auto}
  .hd .nav__list>li{display:block;position:relative;border-bottom:1px solid var(--line)}
  .hd .nav__link{display:flex;justify-content:space-between;align-items:center;
    min-height:56px;padding:14px 0;font-size:20px;font-weight:500;letter-spacing:-.01em;
    color:var(--ink);background:none;border:0}
  .hd .nav__link:hover{background:none}
  .hd .nav__link[aria-current]{font-weight:600}
  .hd .nav__link[aria-current]::after{display:none}
  .hd .nav__caret{display:none}

  /* "What We Do" accordion */
  .hd .has-sub>.nav__link{padding-right:56px}
  .hd .sub-toggle{
    display:flex;align-items:center;justify-content:center;
    position:absolute;right:-8px;top:4px;width:48px;height:48px;
    color:var(--ink);border-radius:50%;-webkit-tap-highlight-color:transparent}
  .hd .sub-toggle::before{content:"";width:10px;height:10px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
  .hd .has-sub.open>.sub-toggle::before{transform:rotate(-135deg) translate(-2px,-2px)}

  .hd .sub{position:static;display:none;border:0;box-shadow:none;background:none}
  .hd .has-sub:hover>.sub,.hd .has-sub:focus-within>.sub{display:none}      /* no hover-open on touch */
  .hd .has-sub.open>.sub{display:block}
  .hd .sub__in{display:block;padding:0 0 14px;max-width:none}
  .hd .sub a,.hd .sub a+a{display:block;padding:12px 0 12px 16px;border:0;border-left:2px solid var(--line);margin-left:2px}
  .hd .sub a b{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:0}
  .hd .sub a small{display:block;font-size:13.5px;line-height:1.45;margin-top:3px;color:var(--muted)}

  /* CTA — full-width, thumb-friendly */
  .hd .hd__cta{margin:24px 0 0;width:100%;justify-content:center;text-align:center;
    min-height:52px;font-size:17px;background:var(--navy,#152145);color:#fff;border:1px solid var(--navy,#152145)}

  /* header colours while menu is open (beats the transparent .hd--over hero state) */
  body.menu-open .hd,body.menu-open .hd--over{background:#fff;border-bottom-color:var(--line);box-shadow:none}
  body.menu-open .hd .logo img,body.menu-open .hd--over .logo img{filter:none}
  body.menu-open .hd .logo__txt,body.menu-open .hd--over .logo__txt{color:var(--ink)}
  body.menu-open .hd--over .nav__link{color:var(--ink)}
  body.menu-open .hd--over .hd__cta{background:var(--navy,#152145);color:#fff;border-color:var(--navy,#152145)}
  body.menu-open .hd .menu-btn span,
  body.menu-open .hd--over .menu-btn span{background:transparent}
  body.menu-open .hd .menu-btn span::before,
  body.menu-open .hd .menu-btn span::after,
  body.menu-open .hd--over .menu-btn span::before,
  body.menu-open .hd--over .menu-btn span::after{background:var(--ink);top:0}
  body.menu-open .hd .menu-btn span::before{transform:rotate(45deg)}
  body.menu-open .hd .menu-btn span::after{transform:rotate(-45deg)}
}

/* small phones */
@media (max-width:380px){
  .logo__txt{font-size:18px}
  .logo img{height:28px}
  .hd .nav__link{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  body.menu-open .hd .nav{animation:none}
  .hd .sub-toggle::before{transition:none}
}