/*
 * ACCL header v2 (doc 146 workstream A). Restyles the EXISTING theme header markup to the Amendment 13
 * prototype header (accl/homepage-v2-prototype/index-amendment-13.html). No markup changes: the menus still come
 * from the "header-navigation" WordPress menu and the ACF "parent_navigation_items" mega menus, the pills from
 * templates/partials/persistent-contact.php (WhatConverts swaps the visible number as today).
 *
 * Everything is scoped to body.accl-hv2, which is the on/off switch. The theme and Customizer CSS carry many
 * !important header rules, so some declarations here need !important too; they only ever apply under the switch.
 */

body.accl-hv2 {
  --hv2-navy: #061e45;
  --hv2-blue: #096dcc;
  --hv2-blue-hover: #0759aa;
  --hv2-underline: #1488ea;
  --hv2-pill: #214a77;
  --hv2-pill-hover: #285785;
  --hv2-rail: 1760px;
  --hv2-height: 108px;
  --hv2-font: "Raleway", "Segoe UI", Arial, sans-serif;
  --hv2-gap: clamp(15px, 1.3vw, 26px);
  /* one timing for every scroll change (logo, bar trim, glass) so they move together; ease-out quart */
  --hv2-ease: cubic-bezier(.25, 1, .5, 1);
  --hv2-dur: .4s;
}

/* ---------- bar ---------- */
body.accl-hv2 .header-main > .wrapper,
body.accl-hv2 .main-header.sticky > .wrapper {
  width: min(calc(100% - 48px), var(--hv2-rail)) !important;
  max-width: none !important;
  padding: 0 !important;
}

body.accl-hv2 .header-main .wrapper .main-header { position: relative; }
body.accl-hv2 .header-main .wrapper .main-header,
body.accl-hv2 .main-header.sticky {
  min-height: var(--hv2-height);
  padding: 0 !important;
  align-items: center;
  font-family: var(--hv2-font);
}

/* Solid navy bar across the full width. The decorative overlay below stays for pages with the old hero. */
body.accl-hv2 .header-main .wrapper .main-header::before {
  position: absolute;
  z-index: 60;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  background: var(--hv2-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  content: "";
  transform: translateX(-50%);
}
/*
 * One pinned header (as in the prototype). The theme prints the header twice: the normal one in .header-main and a
 * copy, .main-header.sticky, that it fades in after scrolling. Here the copy is pinned to the top from the start,
 * exactly over the normal bar, so the visitor sees a single header that never leaves. The normal bar stays in the
 * page as an invisible spacer (and out of the tab order), so nothing below it moves.
 * On scroll (body.hv2-compact, set by header-v2.js after 40px) only transforms change: the logo scales down and the
 * bar is trimmed 5px top and bottom. Nothing is re-laid out, so no menu item shifts sideways.
 */
body.accl-hv2 .header-main .wrapper .main-header { visibility: hidden; }
body.accl-hv2 .main-header.sticky,
body.accl-hv2 .main-header.sticky.enabled {
  position: fixed !important;
  top: 0 !important;
  right: 0;
  left: 0;
  display: block !important;
  visibility: visible;
  opacity: 1 !important;
  background: transparent !important;
  transform: translateY(0);
  transition: transform var(--hv2-dur) var(--hv2-ease);
}
body.accl-hv2 .main-header.sticky::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--hv2-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  content: "";
}
body.accl-hv2 .main-header.sticky > .wrapper { position: relative; z-index: 1; display: flex; min-height: var(--hv2-height); align-items: center; }
/* the trimmed edges are transparent: let clicks through them to whatever sits underneath (e.g. the mobile contact bar) */
body.accl-hv2 .main-header.sticky,
body.accl-hv2 .main-header.sticky > .wrapper { pointer-events: none; }
body.accl-hv2 .main-header.sticky > .wrapper > * { pointer-events: auto; }

/* compact: bar 108px to 80px (14px off the top, 14px off the bottom), logo 145px to 110px */
body.accl-hv2.hv2-compact .main-header.sticky { transform: translateY(-14px) !important; }
body.accl-hv2.hv2-compact .main-header.sticky::before { transform: scaleY(calc(80 / 108)); }

/* Frosted glass once scrolled (solid at the top, where only the theme's old header graphic is behind it).
   Without backdrop-filter support the bar stays near-solid so text never sits over sharp content. */
body.accl-hv2 .main-header.sticky::before { transition: transform var(--hv2-dur) var(--hv2-ease), background-color var(--hv2-dur) var(--hv2-ease); }
body.accl-hv2.hv2-compact .main-header.sticky::before { background-color: rgba(6, 30, 69, .96); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.accl-hv2.hv2-compact .main-header.sticky::before {
    background-color: rgba(6, 30, 69, .85);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/*
 * Shrink on scroll (Spencer, 8 Oct): where the browser supports scroll-driven animations, the logo, bar trim and
 * glass follow the scroll position over the first 80px instead of switching at 40px; scrolling back reverses it.
 * Runs off the main thread. header-v2.js stops toggling .hv2-compact in these browsers, so the transition rules
 * above are the fallback (Firefox today) and the reduced-motion behaviour (instant switch).
 */
@keyframes hv2-bar { to { transform: translateY(-14px); } }
@keyframes hv2-bar-bg { to { transform: scaleY(calc(80 / 108)); background-color: rgba(6, 30, 69, .96); } }
@keyframes hv2-bar-bg-glass { to { transform: scaleY(calc(80 / 108)); background-color: rgba(6, 30, 69, .85); } }
@keyframes hv2-logo { to { transform: scale(calc(110 / 145)); } }
@keyframes hv2-panel { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes hv2-bar-phone { to { transform: translateY(-5px); } }
@keyframes hv2-bar-bg-phone { to { transform: scaleY(calc(73 / 83)); background-color: rgba(6, 30, 69, .85); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.accl-hv2 .main-header.sticky,
    body.accl-hv2 .main-header.sticky::before,
    body.accl-hv2 .main-header.sticky .header-col-left img {
      transition: none;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    body.accl-hv2 .main-header.sticky { animation-name: hv2-bar; }
    body.accl-hv2 .main-header.sticky::before { animation-name: hv2-bar-bg; }
    body.accl-hv2 .main-header.sticky .header-col-left img { animation-name: hv2-logo; }
    body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu {
      animation: hv2-panel linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      body.accl-hv2 .main-header.sticky::before {
        animation-name: hv2-bar-bg-glass;
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
      }
    }
    @media (max-width: 760px) {
      body.accl-hv2 .main-header.sticky { animation-name: hv2-bar-phone; }
      body.accl-hv2 .main-header.sticky::before { animation-name: hv2-bar-bg-phone; }
    }
  }
}

/* keep clear of bars that are already pinned at the top */
body.accl-hv2.admin-bar .main-header.sticky,
body.accl-hv2.admin-bar .main-header.sticky.enabled { top: 32px !important; }
@media (min-width: 768px) and (max-width: 800px) {
  body.accl-hv2 .main-header.sticky,
  body.accl-hv2 .main-header.sticky.enabled { top: 40px !important; }
}
@media (max-width: 767px) {
  body.accl-hv2 .main-header.sticky,
  body.accl-hv2 .main-header.sticky.enabled { top: 52px !important; }
}
/* Logged-in editors (admin bar showing) on phones and small tablets: stack the admin bar, the call/WhatsApp strip
   and the header with no gap or overlap (9 Oct: the more specific admin-bar rule above put the header at 32px,
   over the strip, leaving an empty band under it). WordPress unpins its admin bar below 600px; pinned here so the
   stack holds while scrolling. Visitors are unaffected. */
@media (max-width: 600px) {
  body.accl-hv2.admin-bar #wpadminbar { position: fixed; }
}
/* ...and the slide-out menu starts below the admin bar, so its close button and logo row stay tappable */
body.accl-hv2.admin-bar #responsive-menu.panel { top: var(--wp-admin--admin-bar--height, 32px) !important; bottom: 0 !important; height: auto !important; }
@media (max-width: 767px) {
  body.accl-hv2.admin-bar .accl-mobile-contact-bar { top: var(--wp-admin--admin-bar--height, 46px); }
  body.accl-hv2.admin-bar .main-header.sticky,
  body.accl-hv2.admin-bar .main-header.sticky.enabled { top: calc(var(--wp-admin--admin-bar--height, 46px) + 52px) !important; }
}
@media (min-width: 768px) and (max-width: 800px) {
  body.accl-hv2.admin-bar .mobile-contact { top: var(--wp-admin--admin-bar--height, 32px); }
  body.accl-hv2.admin-bar .main-header.sticky,
  body.accl-hv2.admin-bar .main-header.sticky.enabled { top: calc(var(--wp-admin--admin-bar--height, 32px) + 40px) !important; }
}

/* Both columns are flex items with z-index 250, so the right column (which holds the open mega-menu panel) would
   paint over the logo. Logo above it; pills above the panel inside the right column. */
body.accl-hv2 .header-col-left { position: relative; z-index: 260 !important; }
body.accl-hv2 .header-col-right > .accl-header-utility { z-index: 150; }

body.accl-hv2 .header-main .wrapper .header-col-left img,
body.accl-hv2 .main-header.sticky .header-col-left img {
  width: 145px !important;
  height: auto !important;
}
body.accl-hv2 .main-header.sticky .header-col-left img { transform-origin: left center; transition: transform var(--hv2-dur) var(--hv2-ease); will-change: transform; }
body.accl-hv2.hv2-compact .main-header.sticky .header-col-left img { transform: scale(calc(110 / 145)); }

/* ---------- one row: mega menu, divider, menu, button, pills ---------- */
body.accl-hv2 .header-main .wrapper .header-col-right,
body.accl-hv2 .main-header.sticky .wrapper .header-col-right {
  position: static !important;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding-top: 0 !important;
}

body.accl-hv2 .mega-menu { order: 1; display: flex; flex: 0 0 auto; align-items: center; gap: var(--hv2-gap); margin: 0 0 0 auto; }
body.accl-hv2 .mega-menu::after { width: 1px; height: 28px; margin: 0 calc(var(--hv2-gap) + 2px) 0 2px; background: rgba(255, 255, 255, .42); border: 0; content: ""; }
body.accl-hv2 .header-col-right > nav { order: 2; }
body.accl-hv2 .accl-header-utility { order: 3; }
body.accl-hv2 .menu-link { order: 4; }

/* menu items */
body.accl-hv2 .mega-menu > li { padding: 0 !important; }
body.accl-hv2 .mega-menu .menu-item.sub .parent-link,
body.accl-hv2 #header-navigation > li > a {
  position: relative;
  display: block;
  padding: 27px 0;
  color: #fff;
  border-radius: 0;
  font-family: var(--hv2-font);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
body.accl-hv2 .mega-menu .menu-item.sub .parent-link span { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; }
body.accl-hv2 .mega-menu .menu-item.sub .parent-link::after,
body.accl-hv2 #header-navigation > li > a::after {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  width: auto;
  height: 2px;
  background: var(--hv2-underline);
  border: 0;
  content: "";
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
body.accl-hv2 .mega-menu .menu-item.sub .parent-link:hover::after,
body.accl-hv2 #header-navigation > li > a:hover::after,
body.accl-hv2 #header-navigation > .current-menu-item > a::after { transform: scaleX(1); }
body.accl-hv2 .mega-menu .sub-open span { color: #fff; }
body.accl-hv2 #header-navigation .current_page_item > a { color: #fff !important; }

body.accl-hv2 #header-navigation { display: flex; align-items: center; gap: var(--hv2-gap); margin: 0; padding: 0; }
body.accl-hv2 #header-navigation > li { padding: 0; background: none; }

/* the last menu item (Contact / Discuss Your Project) is the button */
body.accl-hv2 #header-navigation > li.contact-nav { margin-left: 4px; background: none; border-radius: 0; }
body.accl-hv2 #header-navigation > li.contact-nav > a {
  display: inline-flex;
  min-height: 40px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  color: #fff !important;
  background: var(--hv2-blue);
  border: 1px solid var(--hv2-blue);
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 740;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
body.accl-hv2 #header-navigation > li.contact-nav > a:hover { background: var(--hv2-blue-hover); border-color: var(--hv2-blue-hover); transform: translateY(-2px); }
body.accl-hv2 #header-navigation > li.contact-nav > a::after { display: none; }

/* ---------- mega-menu panels: dark (Spencer, 9 Oct; light version tried and set aside) ----------
   Deep navy panel a step lighter than the bar, hanging below it; darker intro column; translucent checkerboard
   boxes; white titles, pale-blue links, blue button. Content still comes
   from the ACF "parent_navigation_items" repeater. The visible header is the pinned copy, so the rules target it;
   the long selectors beat the Customizer's !important panel geometry. */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu {
  position: absolute !important;
  top: 100% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 100vw !important;
  max-height: calc(100dvh - 80px - var(--wp-admin--admin-bar--height, 0px));
  overflow-y: auto;
  translate: -50% 0;
  box-sizing: border-box !important;
  margin: 0 !important; /* the theme's .alignfull adds a negative margin */
  padding: 0 !important;
  background: #0a2652 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 24px 48px rgba(2, 10, 26, .45);
  font-family: var(--hv2-font);
  transition: opacity .18s ease, visibility .18s ease;
}
/* intro column background, running to the left edge of the screen */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-overlay {
  display: block !important;
  z-index: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: calc((100vw - min(100vw - 48px, var(--hv2-rail))) / 2 + 340px) !important;
  height: 100% !important;
  background: #061e45 !important;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu > .wrapper {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;
  width: min(calc(100vw - 48px), var(--hv2-rail)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* intro column */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-header {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 36px 36px 40px 40px !important;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-header .sub-menu-title {
  margin: 0 0 18px !important;
  color: #fff !important;
  font-family: var(--hv2-font) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  line-height: 1.2 !important;
  text-transform: none;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-header p:not(.sub-menu-title) {
  margin: 0 0 22px !important;
  color: #c3d2e6 !important;
  font-family: var(--hv2-font) !important;
  font-size: .86rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-header .sub-menu-button {
  display: inline-flex !important;
  min-height: 44px;
  align-items: center;
  margin: 0 !important;
  padding: 11px 20px !important;
  color: #fff !important;
  background: var(--hv2-blue) !important;
  border-radius: 4px !important;
  font-family: var(--hv2-font) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-header .sub-menu-button:hover { background: var(--hv2-blue-hover) !important; }


/* proof-led intro column (header-v2.js adds .hv2-intro): proof points, one case study, a call link.
   The theme's generic paragraph and its button are replaced. */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-header > p:not(.sub-menu-title),
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-menu-header > .sub-menu-button { display: none !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-intro { display: flex; flex-direction: column; gap: 20px; width: 100%; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-proof { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-proof li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: #d3e0f0;
  background: none;
  border: 0;
  font-family: var(--hv2-font);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-intro svg { transform: none !important; margin-bottom: 0 !important; transition: none !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-proof svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: #4fb8f0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-case {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-case:hover { background: rgba(255, 255, 255, .09); border-color: rgba(140, 196, 255, .4); }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-case img { width: 100%; height: 132px; object-fit: cover; border-radius: 0; transition: transform .4s cubic-bezier(.25, 1, .5, 1); }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-case:hover img { transform: scale(1.04); }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-case-copy { display: grid; gap: 3px; min-width: 0; padding: 12px 14px 14px; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-case-copy strong { color: #fff; font-family: var(--hv2-font); font-size: .84rem; font-weight: 700; line-height: 1.3; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-case-copy span { color: #a9bbd3; font-family: var(--hv2-font); font-size: .76rem; line-height: 1.35; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-panel-call {
  display: inline-flex !important;
  min-height: 44px;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 10px 16px !important;
  color: #fff !important;
  background: var(--hv2-blue);
  border-radius: 4px;
  font-family: var(--hv2-font);
  font-size: .86rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-panel-call:hover { background: var(--hv2-blue-hover); }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .hv2-panel-call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* link groups */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 36px 0 40px 44px !important;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main {
  align-self: stretch;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 18px 14px !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 6px !important;
}

body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main > a:first-child {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  font-family: var(--hv2-font) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  letter-spacing: -.005em;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition: color .15s ease;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main > a:first-child strong { color: inherit !important; font-weight: inherit; }
/* arrow pinned top-right of the title, so it never wraps onto a line of its own */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main > a:first-child { position: relative; padding-right: 24px !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main > a:first-child::after {
  position: absolute;
  top: 3px;
  right: 0;
  width: 14px;
  height: 14px;
  background: currentColor;
  content: "";
  opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s ease, opacity .15s ease;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main > a:first-child:hover::after { opacity: 1; transform: translateX(3px); }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main > a:first-child:hover { color: #8cc4ff !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main > p {
  margin: 0 0 8px !important;
  color: #a9bbd3 !important;
  font-family: var(--hv2-font) !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items { display: flex !important; flex-direction: column !important; gap: 2px; margin: 0 !important; padding: 0 !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items a {
  display: block !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  color: #d3e0f0 !important;
  font-family: var(--hv2-font) !important;
  font-size: .84rem !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition: color .15s ease;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items a span { display: inline !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: 500 !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items a:hover { color: #8cc4ff !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items a:hover span { font-weight: 500 !important; }
/* no arrows: the theme's image arrow is removed, links turn blue on hover (arrows orphaned on wrapped items) */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items a::after { content: none !important; display: none !important; }

/* Industries-style groups (a summary, then links): clear gap; links in light blue, white on hover (no underline) */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> p) { display: flex !important; flex-direction: column; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> p) .sub-items {
  gap: 4px;
  margin-top: auto !important; /* links sit at the bottom of the box, so they line up across a row */
  padding-top: 10px !important;
  border-top: 1px dashed rgba(255, 255, 255, .14);
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> p) .sub-items a {
  padding: 2px 0 !important;
  color: #8cc4ff !important;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> p) .sub-items a span { font-weight: 600 !important; text-decoration: none; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> p) .sub-items a:hover { color: #fff !important; }

/* Services panel: the six disciplines in three columns; the two non-service groups (Environmental &
   Sustainability, AI Network Hub) sit in a slim strip underneath. Matched by URL, so the ACF data stays as it is. */
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main-grid:has(> .sub-items-main > a:first-child[href*="ai-network-intelligence"]) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main-grid:has(> .sub-items-main > a:first-child[href*="ai-network-intelligence"]) > .sub-items-main { grid-column: span 2; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> a:first-child[href*="ai-network-intelligence"]),
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> a:first-child[href*="sustainable-network"]) {
  grid-column: span 3 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding: 12px 16px !important;
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, .16) !important;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> a:first-child[href*="ai-network-intelligence"]) > a:first-child,
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> a:first-child[href*="sustainable-network"]) > a:first-child {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: .9rem !important;
}
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> a:first-child[href*="ai-network-intelligence"]) .sub-items,
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> a:first-child[href*="sustainable-network"]) .sub-items { flex-direction: row !important; flex-wrap: wrap; gap: 2px 16px; }
body.accl-hv2 .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu .sub-items-main:has(> a:first-child[href*="ai-network-intelligence"]) { border-color: rgba(20, 136, 234, .5) !important; background: rgba(20, 136, 234, .1) !important; }

/* the panel hangs from the bar's bottom edge, which rises 14px when the bar is trimmed */
body.accl-hv2.hv2-compact .main-header.sticky .mega-menu > li.menu-item.sub > .sub-menu { transform: translateY(-14px) !important; }

/* the open menu is marked with the logo's node dot (cyan with a white ring), not an underline */
body.accl-hv2 .mega-menu .sub-open .parent-link::after {
  right: auto;
  bottom: 14px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #1d9fe9;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translateX(-50%);
}
/* the open panel's parent link stays white; the theme turns its text cyan */
body.accl-hv2 .mega-menu .sub-open .parent-link span { color: #fff !important; }

/* ---------- mobile drawer (Spencer, 9 Oct) ----------
   The theme's slide-out drawer (#responsive-menu), restyled to the v2 header: compact logo row, call and WhatsApp
   pills and the footer's social links (both copied in by header-v2.js), Raleway rows with hairlines, chevrons on
   Services/Industries, their sub-panels with "Back" at the top, "Discuss Your Project" as a full-width button. */
body.accl-hv2 #responsive-menu.panel {
  width: min(360px, calc(100vw - 64px)) !important;
  max-width: 100vw !important;
  padding-top: 0 !important;
  background: var(--hv2-navy) !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 12px 0 40px rgba(2, 10, 26, .4);
  font-family: var(--hv2-font);
}
body.accl-hv2 #responsive-menu.panel .mobile-navigation-logo {
  display: flex !important;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  padding: 18px 24px !important;
  background: var(--hv2-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: left !important;
}
body.accl-hv2 #responsive-menu.panel .mobile-navigation-logo img { max-width: 96px !important; margin: 0 !important; padding: 0 !important; }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-close {
  display: grid;
  width: 48px;
  height: 48px;
  margin: -6px -10px -6px auto;
  padding: 0;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
body.accl-hv2 #responsive-menu.panel .hv2-drawer-close:hover { background: rgba(255, 255, 255, .08); }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-close:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact {
  display: flex;
  gap: 8px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* one line each, centred: icon + number / icon + "WhatsApp ACCL"; the small labels stay for screen readers */
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact a {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 9px;
  color: #fff !important;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact a:hover,
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact a:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: #4fb8f0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact .accl-header-utility__whatsapp svg { fill: #25d366; stroke: none; }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact .accl-header-utility__copy { display: block; min-width: 0; }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact strong {
  display: block;
  overflow: hidden;
  font-size: .82rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact .accl-header-utility__separator { display: none; }
body.accl-hv2 #responsive-menu.panel .hv2-drawer-contact :is(a, small, strong) { font-family: var(--hv2-font) !important; }

/* rows */
body.accl-hv2 #responsive-menu.panel ul li,
body.accl-hv2 #responsive-menu.panel #menu-top-header-navigation li {
  margin: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
body.accl-hv2 #responsive-menu.panel ul li a {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 24px !important;
  color: #fff !important;
  background: transparent !important;
  font-family: var(--hv2-font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
body.accl-hv2 #responsive-menu.panel ul li a:hover,
body.accl-hv2 #responsive-menu.panel ul li a:focus-visible { color: #8cc4ff !important; background: rgba(255, 255, 255, .04) !important; }
body.accl-hv2 #responsive-menu.panel .menu-item-has-children > a::after {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 4px 0 0 !important;
  border-top: 2px solid #8cc4ff;
  border-right: 2px solid #8cc4ff;
  content: "" !important;
  opacity: 1 !important;
  transform: rotate(45deg);
}
/* sub-panels slide over the drawer */
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu {
  display: flex !important;
  flex-direction: column;
  padding-top: 0 !important;
  overflow-y: auto;
  background: #0a2652 !important;
}
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li a { color: #d3e0f0 !important; font-size: .95rem !important; font-weight: 500 !important; }
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li a:hover { color: #8cc4ff !important; }
body.accl-hv2 #responsive-menu.panel .hv2-back-item { border-bottom: 1px solid rgba(255, 255, 255, .1) !important; }
body.accl-hv2 #responsive-menu.panel .hv2-back {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  color: #fff;
  background: rgba(255, 255, 255, .04);
  border: 0;
  font-family: var(--hv2-font);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
body.accl-hv2 #responsive-menu.panel .hv2-back::before {
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #8cc4ff;
  border-left: 2px solid #8cc4ff;
  content: "";
  transform: rotate(45deg);
}
body.accl-hv2 #responsive-menu.panel .hv2-back:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li.hv2-group { border-bottom: 0 !important; }
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li.hv2-group > a {
  padding: 18px 24px 6px !important;
  color: #fff !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
}
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li.hv2-child { border-bottom: 0 !important; }
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li.hv2-child > a { padding: 9px 24px 9px 36px !important; font-size: .92rem !important; }
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li.hv2-child:has(+ li.hv2-group) { padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; }
body.accl-hv2 #responsive-menu.panel .menu-item-has-children ul.sub-menu li.hv2-group--extra > a { color: #8cc4ff !important; font-size: .9rem !important; }
body.accl-hv2 #responsive-menu.panel .menu-back {
  order: -1;
  padding: 18px 24px !important;
  color: #8cc4ff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  font-family: var(--hv2-font) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}
body.accl-hv2 #responsive-menu.panel .desktop-hide:empty { display: none !important; }

/* "Discuss Your Project" */
body.accl-hv2 #responsive-menu.panel li.contact-nav { padding: 20px 24px 4px !important; border-bottom: 0 !important; }
body.accl-hv2 #responsive-menu.panel li.contact-nav > a {
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px !important;
  color: #fff !important;
  background: var(--hv2-blue) !important;
  border-radius: 4px;
  font-size: .9rem !important;
  font-weight: 700 !important;
}
body.accl-hv2 #responsive-menu.panel li.contact-nav > a:hover { color: #fff !important; background: var(--hv2-blue-hover) !important; }

/* social links (the footer's set, copied in) */
body.accl-hv2 #responsive-menu.panel .mobile-navigation-social-icons { padding: 20px 24px 28px !important; background: transparent !important; }
body.accl-hv2 #responsive-menu.panel .mobile-navigation-social-icons .list { justify-content: center !important; gap: 10px !important; padding: 0 !important; }
body.accl-hv2 #responsive-menu.panel .mobile-navigation-social-icons a {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  transition: background-color .15s ease;
}
body.accl-hv2 #responsive-menu.panel .mobile-navigation-social-icons a:hover { background: rgba(255, 255, 255, .14); }
body.accl-hv2 #responsive-menu.panel .mobile-navigation-social-icons svg { width: 18px !important; height: 18px; margin: 0 !important; color: #fff !important; fill: #fff !important; }

/* ---------- skip link and focus (audit, 9 Oct) ---------- */
body.accl-hv2 .hv2-skip {
  position: fixed;
  z-index: 100000;
  top: 8px;
  left: 8px;
  padding: 12px 18px;
  color: #fff;
  background: var(--hv2-navy);
  border: 2px solid #fff;
  border-radius: 4px;
  font-family: var(--hv2-font);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%) !important;
}
body.accl-hv2 .hv2-skip:focus { transform: none !important; }
body.accl-hv2 .header-col-left a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
body.accl-hv2 .mega-menu .parent-link:focus-visible,
body.accl-hv2 #header-navigation > li:not(.contact-nav) > a:focus-visible { outline: none; }
body.accl-hv2 .mega-menu .parent-link:focus-visible span,
body.accl-hv2 #header-navigation > li:not(.contact-nav) > a:focus-visible { text-decoration: underline 2px #fff; text-underline-offset: 6px; }

/* ---------- call / WhatsApp pills ---------- */
body.accl-hv2 .header-col-right > .accl-header-utility,
body.accl-hv2 .header-col-right:has(> .accl-header-utility) > .accl-header-utility {
  position: relative !important;
  top: auto !important;
  display: flex;
  align-self: center;
  gap: 9px;
  margin: 0 0 0 auto !important; /* auto on both sides of the menu group centres it between logo and pills */
  padding: 0 !important;
  font-family: var(--hv2-font);
}
body.accl-hv2 .accl-header-utility :is(a, small, strong) { font-family: var(--hv2-font); }
body.accl-hv2 .accl-header-utility a { min-height: 44px; gap: 8px; padding: 6px 10px; background: var(--hv2-pill); border-color: rgba(205, 230, 247, .34) !important; }
body.accl-hv2 .accl-header-utility a:hover { background: var(--hv2-pill-hover); }
body.accl-hv2 .accl-header-utility svg { width: 22px; height: 22px; stroke: #009de4; }
body.accl-hv2 .accl-header-utility__whatsapp svg { fill: #25d366; stroke: none; }
body.accl-hv2 .accl-header-utility__copy { gap: 1px; }
body.accl-hv2 .accl-header-utility small { color: #d7e6f3; font-size: .75rem; font-weight: 650; line-height: 1.1; }
body.accl-hv2 .accl-header-utility strong { font-size: .8rem; font-weight: 740; line-height: 1.1; letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- hamburger below 1320px (the single row needs the room) ---------- */
body.accl-hv2 .menu-link.mobile-nav { position: relative; z-index: 260; min-width: 44px; min-height: 44px; margin-left: 16px; }
body.accl-hv2 .menu-link .line { width: 23px !important; height: 2px !important; margin: 2.5px auto !important; }
body.accl-hv2 .menu-link.active .line:nth-child(1) { transform: translateY(4.5px) !important; }
body.accl-hv2 .menu-link.active .line:nth-child(3) { transform: translateY(-4.5px) rotate(90deg) !important; }
@media (max-width: 1320px) {
  body.accl-hv2 .mega-menu,
  body.accl-hv2 .header-col-right > nav { display: none !important; }
  body.accl-hv2 .menu-link { display: flex !important; flex-direction: column; justify-content: center; }
}
/* The prototype hides the pills below 1320px; the live site keeps them down to 981px (persistent-contact.css),
   and below 768px the fixed mobile contact bar takes over. Keep the live behaviour so no width loses them. */
@media (max-width: 980px) {
  body.accl-hv2 .header-col-right > .accl-header-utility,
  body.accl-hv2 .header-col-right:has(> .accl-header-utility) > .accl-header-utility { display: none !important; }
}
@media (max-width: 760px) {
  body.accl-hv2 .header-main > .wrapper,
  body.accl-hv2 .main-header.sticky > .wrapper { width: min(calc(100% - 32px), var(--hv2-rail)) !important; }
  body.accl-hv2 .header-main .wrapper .main-header,
  body.accl-hv2 .main-header.sticky,
  body.accl-hv2 .main-header.sticky > .wrapper { min-height: 83px; }
  body.accl-hv2 .header-main .wrapper .header-col-left img,
  body.accl-hv2 .main-header.sticky .header-col-left img { width: 96px !important; }
  /* phones: 83px bar to 73px (5px each side) */
  body.accl-hv2.hv2-compact .main-header.sticky { transform: translateY(-5px) !important; }
  body.accl-hv2.hv2-compact .main-header.sticky::before { transform: scaleY(calc(73 / 83)); }
}

@media (prefers-reduced-motion: reduce) {
  body.accl-hv2 .main-header.sticky,
  body.accl-hv2 .main-header.sticky::before,
  body.accl-hv2 .main-header.sticky .header-col-left img { transition: none !important; }
  body.accl-hv2 .mega-menu .menu-item.sub .parent-link::after,
  body.accl-hv2 #header-navigation > li > a::after,
  body.accl-hv2 #header-navigation > li.contact-nav > a { transition: none; }
  body.accl-hv2 #header-navigation > li.contact-nav > a:hover { transform: none; }
}

/* Footer v2 moved to assets/css/footer-v2.css (sitewide, its own switch). */

/* Mega-menu toggles are real buttons since 10 Oct (were "#" links): strip browser button styling so they match the links. */
body.accl-hv2 .mega-menu button.parent-link{-webkit-appearance:none;appearance:none;width:100%;margin:0;border:0;background:none;cursor:pointer;text-align:inherit;line-height:inherit;letter-spacing:inherit}