/* ============================================================
   ADI inner-page hero extras: tick points, call button and founding strip.

   The same three pieces as the homepage hero and the bar under its
   accreditations, for the Services and Our Technology pages. Everything here
   is scoped to body.wave-header, so the shared rules in /css/style.css and
   /css/pages.css keep working unchanged on every other page.

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

/* ---------- Hero tick points ---------- */

/* One centred row on desktop, wrapping when it runs out of room.
   Phones: one point per line, ticks lined up. */
.wave-header .hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  max-width: 1110px;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
  font-family: "Raleway", sans-serif;
  /* the opening hours carry digits; Raleway's default figures dip below the line */
  font-variant-numeric: lining-nums;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.wave-header .hero-points li {
  position: relative;
  padding-left: 26px;
  text-align: left;
}

/* The tick is drawn here, so the list stays plain text in the page */
.wave-header .hero-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.28em;
  width: 6px;
  height: 12px;
  border: solid #80eff7;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

@media (max-width: 1200px) {
  .wave-header .hero-points {
    gap: 8px 24px;
    font-size: 17px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .wave-header .hero-points {
    max-width: 560px;
  }
}

@media (max-width: 768px) {
  .wave-header .hero-points {
    display: grid;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 16.5px;
  }
}

@media (max-width: 480px) {
  .wave-header .hero-points {
    font-size: 15.5px;
  }
}

/* ---------- Hero call button ---------- */

.wave-header .hero-actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.wave-header .hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 42px;
  border-radius: 8px;
  background: #80eff7;
  color: #161e6f;
  font-family: "Raleway", sans-serif;
  font-variant-numeric: lining-nums;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}

.wave-header .hero-cta:hover {
  background: #fff;
}

.wave-header .hero-cta:active {
  transform: translateY(1px);
}

.wave-header .hero-cta:focus-visible {
  outline: 3px solid #80eff7;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .wave-header .hero-actions {
    margin-top: 14px;
  }

  .wave-header .hero-cta {
    min-height: 54px;
    padding: 0 30px;
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-header .hero-cta {
    transition: none;
  }
}

/* ---------- Founding strip ---------- */

/* The cyan bar under the accreditations */
.wave-header .founding-strip {
  background: #80eff7;
  padding: 9px 20px;
  text-align: center;
}

.wave-header .founding-strip-title {
  margin: 0;
  color: #161e6f;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
}

@media (max-width: 600px) {
  .wave-header .founding-strip {
    padding: 6px 10px;
  }

  .wave-header .founding-strip-title {
    font-size: 11.5px;
    line-height: 1.3;
    letter-spacing: 0.05em;
  }
}