/* ==========================================================================
   SHANTHA HI TECH — SHARED SITE HEADER
   header.css

   Single source of truth for the masthead: logo, primary nav, the Products
   mega-menu, and the Enquire button. Linked by every page so the header
   can never drift between them.

   Load order on each page:
     1. css/header.css   (this file)
     2. the page's own stylesheet
   ========================================================================== */


/* Masthead height is fixed: 99 (top pad) + 70 (logo) + 24 (bottom pad).
   Exposed so pages can size a first screen against it. */
:root {
  --header-h: 193px;
}

.site-header {
  width: 100%;
  padding: 99px 40px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Explicit, so the white logo and nav stay legible on light pages too.
     No visual change on index.html, whose body is already black. */
  background-color: #000000;
}

/* The logo is wrapped in a link home, so the anchor is the grid item. */
.logo-link {
  grid-column: 1;
  justify-self: start;
  display: inline-block;
  line-height: 0;
  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.logo-link:hover {
  opacity: 0.82;
}

.logo-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
  border-radius: 2px;
}

.logo {
  height: 70px;
  width: auto;
  display: inline-block;
}

.site-nav {
  grid-column: 2;
  justify-self: center;
}

.site-nav > ul {
  list-style: none;
  display: flex;
  gap: 52px;
}

.site-nav .dropdown > a {
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-nav .dropdown > a::after {
  content: "▾";
  font-size: 14px;
  font-weight: 400;
}

.dropdown {
  position: relative;
}

.products-menu {
  position: absolute;
  top: calc(100% + 24px);
  /* Left-anchored to the trigger, NOT centred (was `left: 50%;
     transform: translateX(-50%)`). Products is the leftmost nav item, so
     centering a wide box on it pushes the box mostly off the LEFT edge of
     the viewport — confirmed by measurement: at exactly 992px (the width
     the header switches from hamburger to this desktop menu at) the old
     centred 720px box was already rendering ~77px off-screen to the left,
     before this change ever widened it for a 4th column. Left-anchoring
     removes that failure mode entirely, since the trigger's own left edge
     is always inside the viewport by definition. */
  left: 0;
  transform: translateY(10px);
  width: 760px;
  max-width: 90vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 40px;
  background-color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s step-end;
  z-index: 999;
}

.dropdown--products:hover .products-menu,
.dropdown--products:focus-within .products-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.products-menu__column {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.products-menu__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.products-menu__eyebrow {
  color: #898989;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.products-menu__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.products-menu__list li {
  display: block;
  width: 100%;
}

.products-menu__list a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  line-height: 1.4;
  color: #ffffff;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-size: 15px;
  letter-spacing: -0.001em;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.products-menu__list a:hover {
  color: #d9d9d9;
  transform: translateX(2px);
}

@media (max-width: 991px) {
  .products-menu {
    width: 95vw;
    grid-template-columns: 1fr;
    row-gap: 36px;
    padding: 32px;
  }

  .products-menu__column {
    gap: 28px;
  }
}

/* ==========================================================================
   SOLUTIONS MEGA-MENU
   Two panes: a rail of industries on the left, and an "Explore" pane on the
   right that swaps to whichever rail item is hovered or focused.

   This menu also opens on :focus-within, so it is reachable by keyboard and
   by tap — .products-menu above now follows the same pattern.
   ========================================================================== */

.solutions-menu {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  /* Matched to .products-menu (720px wide, ~414px tall) so the two dropdowns
     are the same size and the header doesn't resize as you move between them. */
  width: 720px;
  max-width: 90vw;
  /* Height matched to .products-menu too. Set on the panel rather than a
     child, because the taller of the two columns (the 10-item rail) drives
     the height, not the explore pane. */
  min-height: 414px;
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 0;
  background-color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s step-end;
  z-index: 999;
}

.dropdown--solutions:hover .solutions-menu,
.dropdown--solutions:focus-within .solutions-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* Set by js/header.js after a menu link is clicked, so the panel gets out of
   the way instead of hovering over the destination. Must come after the
   :hover/:focus-within rule above — same specificity, later wins. */
.dropdown--solutions.is-dismissed .solutions-menu,
.dropdown--products.is-dismissed .products-menu,
.dropdown--apps.is-dismissed .apps-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.solutions-menu__rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.solutions-menu__eyebrow {
  color: #898989;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.solutions-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}

.solutions-menu__link {
  display: block;
  padding: 4px 0;
  color: #898989;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-size: 15px;
  /* Pinned rather than inherited. Each page's own stylesheet sets a
     different body line-height, which cascades into this shared header and
     made the ten-item rail — and so the whole panel — a different height on
     every page. Fixing it here keeps the panel stable sitewide. */
  line-height: 1.35;
  letter-spacing: -0.001em;
  text-decoration: none;
  transition: color 0.18s ease;
}

.solutions-menu__link:hover,
.solutions-menu__link:focus-visible,
.solutions-menu__link.is-active {
  color: #ffffff;
}

/* Explore pane — one .solutions-pane per industry, stacked and crossfaded.
   Grid-stacking keeps the panel height stable so it never jumps on swap. */
.solutions-menu__explore {
  display: grid;
  /* Row 1 holds the "Explore" label; row 2 is the shared cell every pane
     stacks into, so swapping panes never changes the panel's height. */
  grid-template-rows: auto 1fr;
  gap: 20px;
  padding: 32px 28px;
  min-height: 0;
}

.solutions-menu__explore > .solutions-menu__eyebrow {
  grid-row: 1;
  grid-column: 1;
  margin-bottom: 0;
}

.solutions-pane {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s step-end;
  pointer-events: none;
}

/* Scoped to the dropdown actually being open — not just unconditionally on
   .is-active. visibility and pointer-events are inheritable, so a
   descendant CAN override an ancestor's visibility:hidden/pointer-events:
   none, which the unscoped version of this rule did unconditionally for
   whichever pane starts active (Creative Services). That made it genuinely
   hoverable/clickable even while .solutions-menu was fully closed and
   invisible — confirmed via elementFromPoint() finding it as the hit-tested
   element at its resting screen position. Harmless on its own, but it could
   make the whole menu spontaneously pop open if the cursor ever rested in
   that region for any reason, and became directly observable once the
   dismiss-then-scroll fix (js/header.js) started holding the cursor still
   over exactly that spot. Opacity isn't part of the fix — it already
   correctly compounds with the parent's opacity:0 when closed. */
.dropdown--solutions:hover .solutions-pane.is-active,
.dropdown--solutions:focus-within .solutions-pane.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s;
}

.solutions-pane__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-bottom: 12px;
}

.solutions-pane__title .arw {
  transition: transform 0.2s ease;
}

.solutions-pane__title:hover .arw {
  transform: translateX(4px);
}

.solutions-pane__body {
  max-width: 46ch;
  color: #898989;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.001em;
}

.solutions-pane__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  list-style: none;
}

.solutions-pane__pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 100px;
  background-color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-size: 13px;
  letter-spacing: -0.001em;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.solutions-pane__pill:hover,
.solutions-pane__pill:focus-visible {
  background-color: #1c1c1c;
  border-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 991px) {
  .solutions-menu {
    width: 95vw;
    grid-template-columns: 1fr;
  }

  .solutions-menu__rail {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px;
  }

  .solutions-menu__explore {
    padding: 32px;
    min-height: 0;
  }

  /* No hover on touch, so the crossfade pane is unhelpful — show every
     industry's pills inline instead of hiding nine of them. */
  .solutions-pane {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .solutions-pane:not(.is-active) {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   Pane swapping — pure CSS via :has(), no JavaScript.
   Deliberate: marketing.html and website.html load no script at all, and the
   production CSP is script-src 'self' with no inline handlers. Doing this in
   CSS means the menu behaves identically on every page with nothing to wire
   up. :has() is already used elsewhere in this project (style.css,
   .grow-carousel__card).

   Rule 1 hides the default pane the moment any rail item is engaged;
   the generated pairs below then reveal the matching one.
   -------------------------------------------------------------------------- */

.solutions-menu:has(.solutions-menu__link:hover) .solutions-pane,
.solutions-menu:has(.solutions-menu__link:focus-visible) .solutions-pane {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.solutions-menu:has(.solutions-menu__link[data-industry="creative-services"]:hover) .solutions-pane[data-pane="creative-services"],
.solutions-menu:has(.solutions-menu__link[data-industry="creative-services"]:focus-visible) .solutions-pane[data-pane="creative-services"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="professional-services"]:hover) .solutions-pane[data-pane="professional-services"],
.solutions-menu:has(.solutions-menu__link[data-industry="professional-services"]:focus-visible) .solutions-pane[data-pane="professional-services"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="education-training"]:hover) .solutions-pane[data-pane="education-training"],
.solutions-menu:has(.solutions-menu__link[data-industry="education-training"]:focus-visible) .solutions-pane[data-pane="education-training"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="beauty"]:hover) .solutions-pane[data-pane="beauty"],
.solutions-menu:has(.solutions-menu__link[data-industry="beauty"]:focus-visible) .solutions-pane[data-pane="beauty"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="sports-fitness"]:hover) .solutions-pane[data-pane="sports-fitness"],
.solutions-menu:has(.solutions-menu__link[data-industry="sports-fitness"]:focus-visible) .solutions-pane[data-pane="sports-fitness"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="health-wellness"]:hover) .solutions-pane[data-pane="health-wellness"],
.solutions-menu:has(.solutions-menu__link[data-industry="health-wellness"]:focus-visible) .solutions-pane[data-pane="health-wellness"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="home-services"]:hover) .solutions-pane[data-pane="home-services"],
.solutions-menu:has(.solutions-menu__link[data-industry="home-services"]:focus-visible) .solutions-pane[data-pane="home-services"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="events-experiences"]:hover) .solutions-pane[data-pane="events-experiences"],
.solutions-menu:has(.solutions-menu__link[data-industry="events-experiences"]:focus-visible) .solutions-pane[data-pane="events-experiences"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="charities-nonprofits"]:hover) .solutions-pane[data-pane="charities-nonprofits"],
.solutions-menu:has(.solutions-menu__link[data-industry="charities-nonprofits"]:focus-visible) .solutions-pane[data-pane="charities-nonprofits"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.solutions-menu:has(.solutions-menu__link[data-industry="personal"]:hover) .solutions-pane[data-pane="personal"],
.solutions-menu:has(.solutions-menu__link[data-industry="personal"]:focus-visible) .solutions-pane[data-pane="personal"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.solutions-menu:has(.solutions-menu__link:hover) .solutions-menu__link.is-active,
.solutions-menu:has(.solutions-menu__link:focus-visible) .solutions-menu__link.is-active {
  color: #898989;
}

.page-invert .solutions-menu:has(.solutions-menu__link:hover) .solutions-menu__link.is-active,
.page-invert .solutions-menu:has(.solutions-menu__link:focus-visible) .solutions-menu__link.is-active {
  color: #6b6b6b;
}

/* Light-header pages (.page-invert) — same treatment as .products-menu */
.page-invert .solutions-menu {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
}

.page-invert .solutions-menu__rail {
  border-right-color: rgba(0, 0, 0, 0.1);
}

.page-invert .solutions-menu__eyebrow,
.page-invert .solutions-pane__body {
  color: #6b6b6b;
}

.page-invert .solutions-menu__link {
  color: #6b6b6b;
}

.page-invert .solutions-menu__link:hover,
.page-invert .solutions-menu__link:focus-visible,
.page-invert .solutions-menu__link.is-active {
  color: #111111;
}

.page-invert .solutions-pane__title {
  color: #111111;
}

.page-invert .solutions-pane__pill {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  color: #111111;
}

.page-invert .solutions-pane__pill:hover,
.page-invert .solutions-pane__pill:focus-visible {
  background-color: #f2f2f2;
  border-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 991px) {
  .page-invert .solutions-menu__rail {
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }
}

/* ==========================================================================
   APPLICATIONS DROPDOWN
   Compact single-column menu — four sections on one page, so this is a
   wayfinder, not a mega-menu. Same open/dismiss mechanics as .solutions-menu
   (:hover + :focus-within to open, .is-dismissed from js/header.js to close
   on click), sized down since there's no second pane.
   ========================================================================== */

.apps-menu {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 280px;
  max-width: 90vw;
  padding: 24px;
  background-color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s step-end;
  z-index: 999;
}

.dropdown--apps:hover .apps-menu,
.dropdown--apps:focus-within .apps-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.apps-menu__eyebrow {
  color: #898989;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.apps-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}

.apps-menu__list a {
  display: block;
  padding: 6px 0;
  color: #ffffff;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-size: 15px;
  letter-spacing: -0.001em;
  /* Stated here, not inherited. header.css is shared by every page and must
     not depend on each page stylesheet resetting anchors — style.css has no
     global `a` rule at all, so without this the links rendered underlined on
     index.html and enquire.html while looking fine everywhere else.
     .products-menu__list a and .solutions-menu__link already do the same. */
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

.apps-menu__list a:hover,
.apps-menu__list a:focus-visible {
  color: #d9d9d9;
  transform: translateX(2px);
}

.page-invert .apps-menu {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
}

.page-invert .apps-menu__eyebrow { color: #6b6b6b; }
.page-invert .apps-menu__list a { color: #111111; }
.page-invert .apps-menu__list a:hover,
.page-invert .apps-menu__list a:focus-visible { color: #555555; }

.contact-btn {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
  color: #111111;
  border: none;
  border-radius: 4px;
  padding: 19px 24px;
  font-family: 'Clarkson', 'Helvetica', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
    background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.contact-btn__label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ==========================================================================
   LIGHT HEADER VARIANT
   Any page whose <body> carries .page-invert gets a white masthead with
   dark artwork. Used by services.html and website.html; index.html keeps
   the default black bar.
   ========================================================================== */

.page-invert .site-header {
  background-color: #ffffff;
}

/* Logo artwork is a fixed white-ink raster (images/logo/shantha-logo.png);
   inverting it flips the white ink to near-black for the light masthead
   instead of swapping in a second asset. */
.page-invert .logo { filter: invert(1); }

.page-invert .logo-link:focus-visible {
  outline-color: #111111;
}

.page-invert .site-nav .dropdown > a {
  color: #111111;
}

.page-invert .contact-btn {
  background-color: #111111;
  color: #ffffff;
}

.page-invert .contact-btn:hover {
  background-color: #000000;
}

.page-invert .products-menu {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
}

.page-invert .products-menu__eyebrow {
  color: #6b6b6b;
}

.page-invert .products-menu__list a {
  color: #111111;
}

.page-invert .products-menu__list a:hover {
  color: #555555;
}

/* ==========================================================================
   OVERLAY HEADER VARIANT
   Pages carrying .header-overlay on <body> lift the masthead out of flow
   and float it over the first frame, so that frame gets the whole viewport
   rather than viewport-minus-header. The frame is responsible for padding
   its own content clear of the bar (see --header-h).
   ========================================================================== */

.header-overlay .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
}

/* ==========================================================================
   MOBILE NAV
   Below 991px the primary nav has nowhere to go — Products/Solutions/
   Applications/Enquire don't fit the bar. This collapses them behind a
   hamburger toggle that opens a full-screen panel, with the three mega-menus
   flattened into tap-to-expand accordions in place of hover.

   .nav-toggle is hidden on desktop and is the only extra header child at
   that width (position: fixed on .site-nav/.contact-btn-in-panel takes them
   out of grid flow below 991px, so the grid still balances at two columns).
   ========================================================================== */

.nav-toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  z-index: 901;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-invert .nav-toggle__bar {
  background-color: #111111;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav__cta {
  display: none;
}

@media (max-width: 991px) {
  .site-header {
    grid-template-columns: 1fr auto;
    padding: 28px 24px;
  }

  .logo {
    height: 48px;
  }

  .nav-toggle {
    display: flex;
  }

  /* Scoped to the header's own top-bar button only (a direct child of
     .site-header) — .contact-btn is reused by page CTAs elsewhere (e.g.
     .conversion__cta, .hero .contact-btn) that must stay visible on mobile.
     A bare `.contact-btn` selector here previously hid all of them too. */
  .site-header > .contact-btn {
    display: none;
  }

  .site-nav {
    grid-column: 1 / -1;
    justify-self: stretch;
    position: fixed;
    inset: 0;
    background-color: #000000;
    padding: calc(var(--header-h) - 40px) 24px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s step-end;
    z-index: 900;
  }

  .page-invert .site-nav {
    background-color: #ffffff;
  }

  .site-header.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }

  .site-nav > ul {
    flex-direction: column;
    gap: 0;
  }

  .site-nav .dropdown {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .page-invert .site-nav .dropdown {
    border-bottom-color: rgba(0, 0, 0, 0.12);
  }

  .site-nav .dropdown > a {
    width: 100%;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 15px;
  }

  /* Mega-menus become static, stacked accordion content instead of
     absolutely-positioned hover panels. Shown only once js/header.js marks
     the parent <li> .is-expanded — see the click handler there. */
  .products-menu,
  .solutions-menu,
  .apps-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    display: none;
    grid-template-columns: 1fr;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 24px;
  }

  .dropdown.is-expanded > .products-menu,
  .dropdown.is-expanded > .solutions-menu,
  .dropdown.is-expanded > .apps-menu {
    display: grid;
  }

  /* The desktop :hover/:focus-within open-state rules (higher specificity
     than a plain .solutions-menu selector) still apply at this width —
     tapping a trigger focuses it, which satisfies :focus-within — and their
     translateX(-50%) carries the panel off-screen. Neutralise with the same
     selectors so source order (not specificity) decides here. */
  .dropdown--products:hover .products-menu,
  .dropdown--products:focus-within .products-menu,
  .dropdown--solutions:hover .solutions-menu,
  .dropdown--solutions:focus-within .solutions-menu,
  .dropdown--apps:hover .apps-menu,
  .dropdown--apps:focus-within .apps-menu {
    position: static;
    transform: none;
  }

  .solutions-menu__rail {
    border-right: 0;
    padding: 0 0 20px;
  }

  /* No hover on touch to drive the :has() pane-swap — show the industry
     list only and send taps straight to solutions.html#industry rather
     than trying to reproduce the crossfade pane inline. */
  .solutions-menu__explore {
    display: none;
  }

  .products-menu {
    row-gap: 28px;
    padding: 0 0 24px;
  }

  .products-menu__column {
    gap: 20px;
  }

  .apps-menu {
    padding: 0 0 24px;
  }

  /* Duplicate Enquire entry, shown only inside the mobile panel — the real
     .contact-btn in the top bar is display:none at this width. */
  .site-nav__cta {
    display: block;
    margin-top: 28px;
  }

  .site-nav__cta .contact-btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}

body.nav-open {
  overflow: hidden;
}