/* ==========================================================================
   Click On Screens — site navigation
   Shared by the homepage and every page in solutions/: the floating nav pill,
   the mobile menu and the Products & Services mega menu. Everything is scoped
   to .nav so it renders the same next to either page stylesheet.
   ========================================================================== */

:root {
  --nav-top: clamp(12px, 1.875vw, 27px);
  --nav-h: 58px;
}

.nav {
  --nav-red: #dc4f35;
  --nav-red-hover: #e8624a;
  --nav-panel: rgba(9, 16, 38, .94);
  --nav-border: rgba(124, 136, 168, .22);
  --nav-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  top: var(--nav-top);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-inline: clamp(20px, 4.1667vw, 60px);
  pointer-events: none;
  color: #fff;
  font: 400 16px/1.625 var(--nav-font);
}
.nav :focus-visible {
  outline: 2px solid var(--nav-red);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nav__pill {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 1101px);
  height: var(--nav-h);
  padding: 0 9px 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
}
/* The glass is painted on a layer behind the pill rather than on the pill itself: an element
   with backdrop-filter stops its children blurring the page, and the dropdowns below need to. */
.nav__pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(9, 16, 38, .74);
  border: 1px solid var(--nav-border);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .6);
}
.nav__logo {
  position: relative;
  justify-self: start;
  display: block;
  line-height: 0;
}
.nav__logo::before { content: ""; position: absolute; inset: -12px -6px; }
.nav__logo img { height: 42px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 31px;
  font: 400 14px/1 var(--nav-font);
}
.nav__links > a,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  opacity: .96;
}
.nav__item { display: flex; }

/* Animated underline: draws in from the left on hover / focus, retracts to the right on leave */
.nav .u-line {
  background: linear-gradient(currentColor, currentColor) right 100% / 0 1px no-repeat;
  background-origin: content-box;
  transition: background-size .38s var(--nav-ease);
}
.nav__links > a:hover .u-line,
.nav__links > a:focus-visible .u-line,
.nav__trigger:hover .u-line,
.nav__trigger:focus-visible .u-line,
.nav__trigger[aria-expanded="true"] .u-line { background-size: 100% 1px; background-position-x: left; }
/* Solution pages: Products & Services is the current section */
.nav__trigger[aria-current] .u-line {
  background-image: linear-gradient(var(--nav-red), var(--nav-red));
  background-size: 100% 1px;
}

.nav__plus {
  position: relative;
  width: 10px; height: 10px;
}
.nav__plus::before,
.nav__plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 1.4px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--nav-ease);
}
.nav__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.nav__links > a:hover .nav__plus::after,
.nav__trigger:hover .nav__plus::after,
.nav__trigger[aria-expanded="true"] .nav__plus::after { transform: translate(-50%, -50%) rotate(180deg); }

.nav__cta {
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 0 10.5px;
  border-radius: 6px;
  background: var(--nav-red);
  color: #fff;
  font: 500 14px/1 var(--nav-font);
  white-space: nowrap;
  transition: background-color .25s, translate .25s var(--nav-ease);
}
.nav__cta:hover { background: var(--nav-red-hover); }
.nav__cta:active { translate: 0 1px; }
/* 44px-tall hit area regardless of the visual button height */
.nav__cta::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px); }

.nav__toggle {
  display: none;
  justify-self: end;
  width: 44px; height: 44px;
  border-radius: 8px;
  place-items: center;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 18px; height: 1.6px;
  background: #fff;
  border-radius: 2px;
  transition: transform .35s var(--nav-ease), opacity .2s;
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Products & Services mega menu ---------- */
.mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--nav-panel);
  border: 1px solid var(--nav-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s, transform .4s var(--nav-ease), visibility 0s .4s;
}
/* Bridges the gap under the pill so the pointer can travel down without closing the menu */
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.nav__trigger[aria-expanded="true"] + .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s, transform .4s var(--nav-ease);
}
/* One photo card per solution page, each a tile tinted in the brand's orange-red so it reads as its own clickable item.
   --c is the tint colour, --c-text a lighter shade of it for the full stop after each name. */
.mega__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega__grid > li { display: flex; --c: 220, 79, 53; --c-text: #f28b74; }
.mega__link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 8px 18px;
  border-radius: 10px;
  border: 1px solid rgba(var(--c), .34);
  background: linear-gradient(180deg, rgba(var(--c), .26) 0%, rgba(var(--c), .07) 70%);
  transition: border-color .25s, transform .4s var(--nav-ease), box-shadow .3s;
}
/* hover: the tile brightens (a second, stronger gradient fades in), lifts and glows in its colour */
.mega__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--c), .42) 0%, rgba(var(--c), .13) 75%);
  opacity: 0;
  transition: opacity .3s;
}
.mega__link:hover,
.mega__link:focus-visible { border-color: rgba(var(--c), .85); transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(var(--c), .7); }
.mega__link:hover::before,
.mega__link:focus-visible::before { opacity: 1; }
.mega__link[aria-current="page"] { border-color: rgba(var(--c), .85); }
.mega__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: #15162b;
}
.mega__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--nav-ease); }
/* a wash of the tile's colour at the foot of the photo ties the two together */
.mega__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--c), 0) 50%, rgba(var(--c), .35)); mix-blend-mode: screen; pointer-events: none; }
.mega__link:hover .mega__media img,
.mega__link:focus-visible .mega__media img { transform: scale(1.06); }
.mega__here {
  position: absolute;
  left: 8px; top: 8px;
  z-index: 1;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(9, 16, 38, .84);
  font: 500 11px/20px var(--nav-font);
}
.mega__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-inline: 4px;
}
.mega__name {
  font: 500 15px/1.35 var(--nav-font);
  letter-spacing: -.005em;
}
.mega__name .dot { color: var(--c-text); }
.mega__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgb(var(--c));
  transition: transform .4s var(--nav-ease);
}
.mega__go svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mega__link:hover .mega__go,
.mega__link:focus-visible .mega__go { transform: rotate(45deg); }
.mega__desc {
  margin-top: 6px;
  padding-inline: 4px;
  font: 400 13px/1.5 var(--nav-font);
  color: #c3c5d1;
}

/* Short landscape screens: let the open menu scroll instead of running off the bottom */
@media (min-width: 901px) and (max-height: 520px) {
  .mega { max-height: calc(100vh - var(--nav-top) - var(--nav-h) - 16px); overflow-y: auto; }
  .mega__desc { display: none; }
}

/* ---------- Phones & small tablets: dropdown panel, mega menu folds into an accordion ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 54px; }
  .nav__logo img { height: 38px; }
  .nav__pill { grid-template-columns: 1fr auto auto; gap: 8px; padding-right: 7px; }
  .nav__toggle { display: grid; }
  .nav__cta { height: 36px; font-size: 13px; }
  .nav__links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - var(--nav-top) - var(--nav-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--nav-panel);
    border: 1px solid var(--nav-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s, transform .4s var(--nav-ease), visibility 0s .4s;
  }
  .nav__item { display: block; }
  .nav__links > a,
  .nav__trigger { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav__links > :last-child { border-bottom: 0; }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--nav-ease); }

  .mega,
  .nav__trigger[aria-expanded="true"] + .mega {
    position: static;
    display: none;
    padding: 4px 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__trigger[aria-expanded="true"] + .mega { display: block; }
  .mega::before { content: none; }
  .mega__grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* rows keep the tint: it fades to the right */
  .mega__link,
  .mega__link:hover,
  .mega__link:focus-visible,
  .mega__link[aria-current="page"] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 8px 12px 8px 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(var(--c), .24), rgba(var(--c), .06));
    transform: none;
    box-shadow: none;
  }
  .mega__link::before { background: linear-gradient(90deg, rgba(var(--c), .38), rgba(var(--c), .12)); }
  .mega__media::after { content: none; }
  .mega__media { flex: none; width: 64px; border-radius: 4px; }
  .mega__link[aria-current="page"] .mega__media { box-shadow: 0 0 0 1px rgb(var(--c)); }
  .mega__here,
  .mega__desc { display: none; }
  .mega__head { align-items: center; margin: 0; padding: 0; }
  .mega__name { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .86); }
  .mega__link[aria-current="page"] .mega__name { color: #fff; }
}
@media (max-width: 420px) {
  .nav__cta { display: none; }
}

/* Touch devices: 44px targets */
@media (pointer: coarse) {
  .nav__links > a,
  .nav__trigger { padding-block: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav *,
  .nav *::before,
  .nav *::after { transition-duration: .01ms !important; }
}