/* Header: services shown individually, Site Audit emphasised, compact menu on small screens */
.site-header nav a[aria-current=page]{color:var(--accent)}
.site-header nav a.wb-nav-audit,.wb-header-audit{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent)!important;font-weight:600;font-size:.875rem;line-height:1.2;white-space:nowrap;box-shadow:0 5px 15px var(--shadow-accent);transition:background .2s}
.site-header nav a.wb-nav-audit:after{display:none}
.site-header nav a.wb-nav-audit:hover,.wb-header-audit:hover{background:var(--accent-hover);color:var(--on-accent)}
.wb-nav-audit strong,.wb-header-audit strong{font-weight:700}
.site-header nav a{white-space:nowrap}
.site-header nav .wb-nav-contact{display:none}
.wb-header-audit{display:none}
.wb-menu-toggle{display:none;flex:none;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--outline,var(--line));border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}
.wb-menu-toggle span,.wb-menu-toggle span:before,.wb-menu-toggle span:after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform .2s,opacity .2s}
.wb-menu-toggle span:before,.wb-menu-toggle span:after{content:"";position:absolute;left:0}
.wb-menu-toggle span:before{top:-6px}.wb-menu-toggle span:after{top:6px}
.wb-menu-open .wb-menu-toggle span{background:transparent}
.wb-menu-open .wb-menu-toggle span:before{transform:translateY(6px) rotate(45deg);background:currentColor}
.wb-menu-open .wb-menu-toggle span:after{transform:translateY(-6px) rotate(-45deg);background:currentColor}
.wb-menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1250px){.site-header nav{gap:20px}}
@media(max-width:1500px){
  .site-header nav .wb-nav-page{display:none}
  .wb-menu-toggle{display:inline-grid}
}
@media(max-width:1000px){.wb-header-audit{display:inline-flex}}
/* Open menu panel (all links listed individually) */
.site-header.wb-menu-open nav{display:flex!important;position:absolute;top:100%;left:var(--gutter);right:var(--gutter);z-index:60;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px #0003}
.site-header.wb-menu-open nav a{display:flex!important;align-items:center;min-height:50px;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem;color:var(--ink)}
.site-header.wb-menu-open nav a:after{display:none}
.site-header.wb-menu-open nav a.wb-nav-audit{order:-1;justify-content:center;margin:10px 0 6px;border-bottom:0;color:var(--on-accent)}
@media(max-width:640px){
  .site-header .header-actions>.button{display:none!important}
  .wb-header-audit{padding:10px 13px;font-size:.8125rem}
  .site-header:has(.trex-trigger){grid-template-columns:minmax(0,1fr) auto auto}
  .site-header:has(.trex-trigger) .wb-header-audit{grid-column:2;grid-row:1}
  .site-header:has(.trex-trigger) .wb-menu-toggle{grid-column:3;grid-row:1}
}
@media(max-width:370px){.site-header .header-actions{width:auto;margin-left:auto;gap:8px}.wb-header-audit{padding-inline:12px}.wb-xs-hide{display:none}}
@media(max-width:350px){.site-header{flex-wrap:nowrap}}
@media(prefers-reduced-motion:reduce){.wb-menu-toggle span,.wb-menu-toggle span:before,.wb-menu-toggle span:after{transition:none}}
@media(min-width:1001px) and (max-width:1250px){.site-header nav{display:flex!important}}
@media(min-width:641px) and (max-width:1250px){
  .site-header:has(.trex-trigger) .header-actions .header-cta-full{display:none}
  .site-header:has(.trex-trigger) .header-actions .header-cta-short{display:inline}
  .site-header .trex-trigger,.site-header .trex-back{white-space:normal;max-width:180px;font-size:.8125rem;padding:8px 12px}
}
@media(min-width:1251px){.site-header .header-actions .button{white-space:nowrap}}
@media(max-width:1850px){
  .site-header:has(.trex-trigger) nav .wb-nav-page{display:none}
  .site-header:has(.trex-trigger) .wb-menu-toggle{display:inline-grid}
}
.site-header:has(.trex-trigger){column-gap:28px}
@media(min-width:1251px) and (max-width:1750px){
  .site-header:has(.trex-trigger) .header-actions .header-cta-full{display:none}
  .site-header:has(.trex-trigger) .header-actions .header-cta-short{display:inline}
  .site-header .trex-trigger,.site-header .trex-back{max-width:200px;white-space:normal;font-size:.8125rem;padding:8px 12px}
}

/* Header parity with the home page (28 Oct 2026). Home is the reference: these rules repeat
   the home header geometry (trex/experience.css and the :has(.trex-trigger) rules) for pages
   without the T-rex button, so the logo, nav links, audit pill and menu button sit in exactly the
   same place on every page. Home is unaffected. */
.site-header:not(:has(.trex-trigger)){column-gap:28px}
@media(min-width:1251px){
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .site-header>.wordmark{justify-self:start}
  .site-header nav{justify-self:center;white-space:nowrap}
  .site-header .header-actions{justify-self:end}
}
@media(max-width:1850px){
  .site-header nav .wb-nav-page{display:none}
  .site-header .wb-menu-toggle{display:inline-grid}
}
/* Same actions-box width as home (T-rex button + short CTA + menu) so the nav and buttons line up */
/* Home 641-1000px: the T-rex button, Enquire and menu used to run past the right edge below ~800px.
   Let the T-rex button shrink if space is short, and below 800px drop the Enquire button (Contact is in the menu), as on mobile. */
@media(min-width:641px) and (max-width:1000px){
  .site-header:has(.trex-trigger) .header-actions{flex:0 1 auto;min-width:0}
  .site-header:has(.trex-trigger) .trex-trigger{flex:0 1 180px;min-width:0}
}
@media(min-width:641px) and (max-width:1000px){
  .site-header:not(:has(.trex-trigger)) .header-actions{flex:0 1 509.547px;min-width:0;justify-content:flex-end}
}
@media(min-width:641px) and (max-width:799px){
  .site-header:has(.trex-trigger) .header-actions>.button{display:none}
  .site-header:not(:has(.trex-trigger)) .header-actions{flex-basis:373px}
}
@media(min-width:1001px) and (max-width:1150px){
  .site-header:not(:has(.trex-trigger)) .header-actions{min-width:372.547px;justify-content:flex-end;flex-shrink:0}
}
@media(min-width:1151px) and (max-width:1250px){
  .site-header:not(:has(.trex-trigger)) .header-actions{min-width:382.547px;justify-content:flex-end;flex-shrink:0}
}
@media(max-width:640px){
  .site-header:not(:has(.trex-trigger)){padding-block:20px}
}
@media(max-width:640px){
  .site-header:not(:has(.trex-trigger)){display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  .site-header:not(:has(.trex-trigger)) .header-actions{display:contents}
}

/* 1001-1009px: everything was ~4px too wide for the viewport on every page; tighten the two header gaps slightly */
@media(min-width:1001px) and (max-width:1009px){.site-header,.site-header:has(.trex-trigger),.site-header:not(:has(.trex-trigger)){column-gap:24px}}

/* Web design and Redesign nav links (30 Oct 2026): keep the desktop bar on one line without overlap.
   Links hidden here stay in the open menu, which lists every link. */
@media(min-width:1001px) and (max-width:1250px){
  .site-header nav a[href="/creative-design/"],.site-header nav a[href="/news/"]{display:none}
}
@media(min-width:1251px) and (max-width:1420px){
  .site-header nav{gap:18px}
  .site-header nav a[href="/news/"]{display:none}
}
@media(min-width:1751px) and (max-width:2200px){
  .site-header:has(.trex-trigger) .header-actions .header-cta-full{display:none}
  .site-header:has(.trex-trigger) .header-actions .header-cta-short{display:inline}
  .site-header .trex-trigger,.site-header .trex-back{max-width:200px;white-space:normal;font-size:.8125rem;padding:8px 12px}
}