/* ============================================================
   ADI site header (navy wave) and accreditations trust bar, for inner pages.

   The same header and trust bar as the homepage. Everything here is scoped
   to body.wave-header or uses its own trust-bar class names, so the shared
   rules in /css/style.css and /css/pages.css keep working unchanged on every
   page that has not adopted it.

   Load after /css/style.css and /css/pages.css, with site-header.js.
   This folder is content-addressed: never edit a file in place, publish a
   new folder and point the page at it.
   ============================================================ */

/* ---------- Header ---------- */

.wave-header .nav-menu a:focus-visible,
.wave-header .logo-link:focus-visible,
.wave-header .call-button:focus-visible {
  outline: 3px solid #80eff7;
  outline-offset: 3px;
}

/* Sticky header at every width: clear over the photo, solid navy once the
   page scrolls. site-header.js adds .has-sticky-header and sets --stick on the
   header from 0 (top of page) to 1 (scrolled 160px), and everything below
   follows that value, so the change tracks the scroll instead of snapping. */

/* The old hero curves, redrawn as a shallow wave behind the header:
   solid navy in front, a see-through navy-to-cyan layer behind it. It
   flattens up into the bar and fades as the bar goes solid. */

.wave-header header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0.25'%3E%3Cstop offset='0' stop-color='%23153a8a'/%3E%3Cstop offset='0.55' stop-color='%230a7fcb'/%3E%3Cstop offset='1' stop-color='%2305bdf9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' fill-opacity='0.72' d='M0 0H1440V178C1330 150 1240 148 1100 160C900 176 760 112 560 130C360 148 200 152 0 134Z'/%3E%3Cpath fill='%23181f6f' d='M0 0H1440V150C1330 126 1220 116 1080 128C880 144 740 94 540 106C340 118 180 124 0 110Z'/%3E%3C/svg%3E")
    top center / 100% 100% no-repeat;
  pointer-events: none;
  transform-origin: top;
  transform: scaleY(calc(1 - var(--stick, 0) * 0.55));
  /* stays solid for most of the travel, then fades over the last third */
  opacity: clamp(0, calc((1 - var(--stick, 0)) * 3.3), 1);
}

.wave-header.has-sticky-header header {
  position: fixed;
  /* solid by the halfway point, so the bar is never see-through while
     the wave is still pulling up */
  background-color: rgba(22, 30, 111, min(1, calc(var(--stick, 0) * 2)));
  box-shadow: 0 6px 20px rgba(9, 16, 58, calc(var(--stick, 0) * 0.25));
}

/* Desktop: one bar - logo, menu, phone.
   Sizes step up with the screen so everything is as large as the row allows:
   base 1025px, then 1140px, 1280px and 1440px. */

@media (min-width: 1025px) {
  .wave-header header {
    padding: 0;
  }

  .wave-header .header-container {
    height: calc(100px - var(--stick, 0) * 24px);
    justify-content: flex-start;
    padding: 0 16px;
    gap: 12px;
  }

  .wave-header .logo-image {
    width: 132px;
    height: auto;
  }

  /* Auto margins centre the menu in the space between logo and phone */

  .wave-header nav {
    position: static;
    margin: 0 auto;
  }

  .wave-header .nav-menu {
    align-items: center;
    gap: 12px;
  }

  .wave-header .nav-menu > li > a {
    position: relative;
    padding: 8px 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Chevron drawn in CSS in place of the text arrow */

  .wave-header .dropdown .arrow {
    width: 7px;
    height: 7px;
    margin: -4px 0 0 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    font-size: 0;
    transform: rotate(45deg);
  }

  .wave-header .dropdown:hover .arrow {
    transform: rotate(45deg);
  }

  .wave-header .header-right {
    max-width: none;
    gap: 0;
  }

  .wave-header .phone-icon,
  .wave-header .call-label {
    display: none;
  }

  .wave-header .phone-icon {
    background: #80eff7;
  }

  /* navy handset so it reads on the light cyan circle */

  .wave-header .phone-icon svg {
    fill: #161e6f;
  }

  .wave-header .phone-number {
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
  }
}

@media (min-width: 1140px) {
  .wave-header .header-container {
    padding: 0 20px;
    gap: 16px;
  }

  .wave-header .logo-image {
    width: 150px;
  }

  .wave-header .nav-menu {
    gap: 14px;
  }

  .wave-header .nav-menu > li > a {
    font-size: 13.5px;
  }

  .wave-header .phone-number {
    font-size: 20px;
  }
}

@media (min-width: 1280px) {
  .wave-header .header-container {
    padding: 0 28px;
    gap: 18px;
  }

  .wave-header .logo-image {
    width: 170px;
  }

  .wave-header .nav-menu {
    gap: 16px;
  }

  .wave-header .nav-menu > li > a {
    font-size: 14px;
    letter-spacing: 0.01em;
  }

  .wave-header .phone-icon {
    display: flex;
    width: 40px;
    height: 40px;
  }

  .wave-header .call-label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }

  .wave-header .call-button {
    gap: 10px;
  }

  .wave-header .phone-number {
    font-size: 22px;
  }
}

@media (min-width: 1440px) {
  .wave-header .header-container {
    gap: 20px;
  }

  .wave-header .logo-image {
    width: 200px;
  }

  .wave-header .nav-menu {
    gap: 20px;
  }

  .wave-header .nav-menu > li > a {
    font-size: 15px;
    letter-spacing: 0.02em;
  }

  .wave-header .phone-icon {
    width: 46px;
    height: 46px;
  }

  .wave-header .call-label {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .wave-header .call-button {
    gap: 12px;
  }

  .wave-header .phone-number {
    font-size: 25px;
  }

  .wave-header .header-container {
    height: calc(100px - var(--stick, 0) * 16px);
  }
}

/* Tablet: logo and phone on top, menu on a single row beneath */

@media (min-width: 769px) and (max-width: 1024px) {
  .wave-header header {
    padding: calc(18px - var(--stick, 0) * 6px) 0
      calc(18px + var(--stick, 0) * 26px);
  }

  .wave-header .logo-image {
    width: 170px;
  }

  .wave-header nav {
    top: calc(84px - var(--stick, 0) * 12px);
  }

  .wave-header .nav-menu {
    align-items: center;
  }

  /* Two-row header here, so the wave runs deeper to sit behind the menu */

  .wave-header header::before {
    height: 215px;
  }
}

/* Phones: the same navy wave header as desktop - white logo, white phone
   number, white menu button. Fixed here even before the script runs, with a
   solid navy fallback, so nothing jumps when the script kicks in. */

@media (max-width: 768px) {
  .wave-header header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #161e6f;
  }

  /* Only the right-hand stretch of the wave is shown, so the curve stays
     gentle on a narrow screen */

  .wave-header header::before {
    height: 150%;
    background-size: 250% 100%;
    background-position: right top;
  }

  .wave-header .logo-image {
    filter: none;
  }

  .wave-header .phone-number,
  .wave-header .call-label {
    color: #fff;
  }

  .wave-header .menu-toggle span {
    background: #fff;
  }

  /* "Call us today" sits above the number, as on desktop, which frees
     enough width for a bigger logo */

  .wave-header .call-info {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .wave-header .logo-image {
    width: 120px;
  }
}

@media (max-width: 360px) {
  .wave-header .logo-image {
    width: 104px;
  }
}

/* ---------- Trust bar ---------- */

/* Trust bar: accreditations and Trustpilot.
   Desktop and tablet: two logos, Trustpilot in the middle, two logos.
   Phones: Trustpilot on top, then the four logos. */
.trust-bar {
  background: #fff;
  /* extra room underneath for the raised Trustpilot tile and its shadow */
  padding: 18px 28px 30px;
}

.trust-bar-inner {
  max-width: 1344px;
  margin: 0 auto;
}

.trust-bar-logos {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr) 236px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
}

/* Each accreditation is its own linked block. The block has two faces: the
   logo, and a line saying what ADI holds, which it flips to on hover. */
.trust-bar-logo {
  display: block;
  height: 78px;
  min-width: 0;
  border-radius: 12px;
  perspective: 700px;
  text-decoration: none;
}

.trust-bar-logo:focus-visible {
  outline: 3px solid #161e6f;
  outline-offset: 3px;
}

.trust-bar-logo-flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.trust-bar-logo-front,
.trust-bar-logo-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.trust-bar-logo-flip,
.trust-bar-logo-front,
.trust-bar-logo-back {
  border-radius: 12px;
}

.trust-bar-logo-front {
  padding: 14px 18px;
  background: #f4f7fb;
  border: 1.5px solid #80eff7;
}

.trust-bar-logo-back {
  flex-direction: column;
  padding: 8px 10px;
  background: #161e6f;
  border: 1.5px solid #161e6f;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  transform: rotateX(180deg);
}

.trust-bar-logo-back strong {
  display: block;
  color: #80eff7;
  font-weight: 700;
}

.trust-bar-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
  /* lets logos saved on a white background sit cleanly on the tinted block */
  mix-blend-mode: multiply;
}

.trust-bar-logo:focus-visible .trust-bar-logo-flip {
  transform: rotateX(180deg);
}

@media (hover: hover) {
  .trust-bar-logo:hover .trust-bar-logo-flip {
    transform: rotateX(180deg);
  }
}

/* Trustpilot is the one raised tile in the row. It is taller than the logo
   blocks, so it borrows the bar's padding rather than making the bar taller. */
.trust-bar-reviews {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 236px;
  height: 104px;
  margin: -13px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 30, 111, 0.1),
    0 8px 22px -6px rgba(22, 30, 111, 0.28);
}

/* A glint that sweeps across the stars every few seconds. It lies over the
   widget and ignores the pointer, so clicks still reach Trustpilot. */
.trust-bar-reviews {
  position: relative;
}

.trust-bar-reviews::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 44px;
  width: 178px;
  height: 32px;
  background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 62%
    )
    no-repeat;
  background-size: 200% 100%;
  background-position: 125% 0;
  pointer-events: none;
  animation: trust-bar-glint 8s linear infinite;
}

/* rests off the left edge, then crosses the stars in about a second and a half */
@keyframes trust-bar-glint {
  0%,
  81% {
    background-position: 125% 0;
  }

  100% {
    background-position: -25% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-bar-reviews::after {
    display: none;
  }
}

/* The widget is a fixed-size frame, so it is scaled up rather than resized */
.trust-bar-reviews .trustpilot-widget {
  flex: none;
  width: 174px;
  transform: scale(1.14);
}

@media (max-width: 768px) {
  .trust-bar {
    padding: 6px 12px 10px;
  }

  /* Trustpilot first, then the four logos in one row. Kept short so the
     page content starts as high up a phone screen as it can. */
  .trust-bar-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
  }

  /* A much smaller tile on phones.
     The widget frame cannot be resized, so the tile, the widget scale and the
     glint are each brought down to match. */
  .trust-bar-reviews {
    order: -1;
    grid-column: 1 / -1;
    width: 170px;
    height: 72px;
    margin: 0;
    border-radius: 10px;
  }

  .trust-bar-reviews .trustpilot-widget {
    transform: scale(0.82);
  }

  .trust-bar-reviews::after {
    left: 18px;
    top: 30px;
    width: 128px;
    height: 23px;
  }

  .trust-bar-logo {
    height: 42px;
  }

  .trust-bar-logo-flip,
  .trust-bar-logo-front,
  .trust-bar-logo-back {
    border-radius: 10px;
  }

  .trust-bar-logo-front {
    padding: 6px 8px;
  }

  .trust-bar-logo-back {
    padding: 2px 4px;
    font-size: 10px;
    line-height: 1.15;
  }
}

/* Tablets get narrow blocks, so the line on the back is set smaller */
@media (min-width: 769px) and (max-width: 1100px) {
  .trust-bar-logo-back {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.25;
  }
}

/* No spinning for people who have asked for less motion: swap the faces */
@media (prefers-reduced-motion: reduce) {
  .trust-bar-logo-flip {
    transition: none;
  }
}

/* The bar's own text size on phones, the same as the homepage section it sits in */
@media (max-width: 480px) {
  .trust-bar {
    font-size: 14px;
  }
}

/* ---------- Hero under the fixed header ---------- */

/* The bar is fixed and floats over the top of the hero photo on phones, as it
   does on the homepage, so the hero is taller by the height of the bar and
   its heading starts below the wave. Desktop and tablet heroes already leave
   room for a header that overlays the photo. */
@media (max-width: 768px) {
  .wave-header .hero {
    min-height: 478px;
    padding-top: 138px;
  }
}

@media (max-width: 480px) {
  .wave-header .hero {
    min-height: 366px;
    padding-top: 112px;
  }
}

/* This page's hero photo has a grey band baked into its right-hand edge. The
   old header curves used to cover it; with them gone it showed on wide
   screens. The photo box is made 2% wider than the hero, and the hero clips
   the overhang, so the band always falls outside. Opt in per image. */
.hero-image.hero-image-trim-right {
  width: 102%;
  max-width: none;
}