/* ==========================================================================
   Ability Smart — global stylesheet
   Brand colours: Navy #18298C, Yellow #F2CF1D
   ========================================================================== */

:root {
  --navy: #18298c;
  --navy-dark: #101d63;
  --yellow: #f2cf1d;
  --yellow-dark: #d9b900;
  --grey-bg: #f7f7f7;
  --text: #212121;
  --text-light: #5a5a5a;
  --white: #ffffff;
  --max-width: 1200px;
  --sticker-shadow: 7px 7px 0 var(--navy);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--navy);
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1em;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 64px 0;
}

.section--grey {
  background: var(--grey-bg);
}

.section--navy {
  background: var(--navy);
  color: var(--white);
}

.section--navy h1, .section--navy h2, .section--navy h3 {
  color: var(--white);
}

.section--yellow {
  background: var(--yellow);
}

.text-center {
  text-align: center;
}

.lede {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 780px;
}

.blog-intro {
  color: var(--navy);
  font-weight: 700;
  width: min(980px, calc(100vw - 48px));
  max-width: min(980px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}

.section--navy .lede {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Two-tone headings ---- */
.headline {
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  letter-spacing: 0.01em;
}

.headline .accent {
  color: var(--yellow);
}

.section--navy .headline,
.headline {
  color: var(--navy);
}

/* ---- Buttons: bold text links, no fill (matches the live site) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--navy);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 0;
}

.btn::after {
  content: "\2192";
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  line-height: 1;
  transition: opacity 0.2s ease, width 0.2s ease, margin-left 0.2s ease;
}

.btn:hover {
  color: var(--yellow-dark);
}

.btn:hover::after {
  opacity: 1;
  width: 1em;
  margin-left: 8px;
}

.btn--white {
  color: var(--white);
}

.btn--white:hover {
  color: var(--yellow);
}

.btn--yellow-link {
  color: var(--yellow);
}

.btn--yellow-link:hover {
  color: var(--white);
}

/* ==========================================================================
   Header / Navigation (static white bar — used on every page except Home)
   ========================================================================== */

.site-header {
  background: var(--white);
  border-bottom: 1px solid #eee;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 40px;
  max-width: 1440px;
}

.site-header .logo {
  flex-shrink: 0;
}

.site-header .logo img {
  height: 50px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.main-nav > ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.main-nav a {
  display: inline-block;
  padding: 10px 8px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--yellow-dark);
}

.main-nav li.has-dropdown {
  position: relative;
}

.main-nav .dropdown {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 190px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: all 0.15s ease;
  z-index: 50;
}

.main-nav li.has-dropdown:hover .dropdown,
.main-nav li.has-dropdown.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.main-nav .dropdown a {
  display: block;
  color: var(--text);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav .dropdown a:hover,
.main-nav .dropdown a.active {
  background: var(--grey-bg);
  color: var(--yellow-dark);
}

.shop-link {
  color: var(--yellow-dark) !important;
  white-space: nowrap;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding-left: 12px !important;
}

.shop-link:hover {
  color: var(--navy) !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  position: relative;
  z-index: 310;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
}

/* ==========================================================================
   Home hero — full-bleed photo with the nav overlaid on top (no white bar)
   ========================================================================== */

.section--decor {
  position: relative;
  overflow: hidden;
}

.section--decor .container {
  position: relative;
  z-index: 1;
}

.decor-circle {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--yellow);
  pointer-events: none;
  animation: float-bubble 10s ease-in-out infinite;
}

@keyframes float-bubble {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -18px); }
}

.decor-circle--1 { animation-duration: 12s; }
.decor-circle--2 { animation-duration: 9s; animation-delay: -2s; }
.decor-circle--3 { animation-duration: 10s; animation-delay: -4s; }
.decor-circle--4 { animation-duration: 7s; animation-delay: -1s; }
.decor-circle--5 { animation-duration: 11s; animation-delay: -6s; }
.decor-circle--6 { animation-duration: 8s; animation-delay: -3s; }
.decor-circle--7 { animation-duration: 14s; animation-delay: -5s; }
.decor-circle--8 { animation-duration: 13s; animation-delay: -7s; }
.decor-circle--9 { animation-duration: 15s; animation-delay: -8s; }
.decor-circle--10 { animation-duration: 11s; animation-delay: -4s; }

@media (prefers-reduced-motion: reduce) {
  .decor-circle {
    animation: none;
  }
}

.decor-circle--1 {
  width: 260px;
  height: 260px;
  top: -100px;
  left: -100px;
  opacity: 0.25;
}

.decor-circle--2 {
  width: 180px;
  height: 180px;
  bottom: -70px;
  right: 6%;
  opacity: 0.2;
}

.decor-circle--3 {
  width: 100px;
  height: 100px;
  top: 45%;
  right: -50px;
  opacity: 0.18;
}

.decor-circle--4 {
  width: 60px;
  height: 60px;
  top: 12%;
  right: 12%;
  opacity: 0.3;
}

.decor-circle--5 {
  width: 140px;
  height: 140px;
  bottom: 8%;
  left: 18%;
  opacity: 0.16;
}

.decor-circle--6 {
  width: 44px;
  height: 44px;
  top: 8%;
  left: 38%;
  opacity: 0.22;
}

.decor-circle--7 {
  width: 360px;
  height: 360px;
  bottom: -160px;
  right: -120px;
  background: var(--navy);
  opacity: 0.07;
}

.decor-circle--8 {
  width: 220px;
  height: 220px;
  top: -60px;
  right: 12%;
  background: var(--navy);
  opacity: 0.09;
}

.decor-circle--9 {
  width: 280px;
  height: 280px;
  top: 58%;
  left: -100px;
  opacity: 0.2;
}

.decor-circle--10 {
  width: 180px;
  height: 180px;
  top: 82%;
  right: -60px;
  background: var(--navy);
  opacity: 0.08;
}

@media (max-width: 640px) {
  .decor-circle--3,
  .decor-circle--4,
  .decor-circle--5,
  .decor-circle--6,
  .decor-circle--7,
  .decor-circle--8,
  .decor-circle--9,
  .decor-circle--10 {
    display: none;
  }
}

/* Home page sits on a light wash of the brand navy (8% navy over white).
   Grey sections take the same tint so the page reads as one colour. */
body.home,
body.home .section--grey {
  background: #eceef6;
}

/* Floating bubbles behind the whole home page. One layer for the full
   page height, so bubbles drift across section edges rather than being
   clipped by each section. The photo hero and footer sit on top of it. */
body.home {
  position: relative;
}

body.home .home-intro,
body.home main,
body.home .site-footer {
  position: relative;
  z-index: 1;
}

/* Keep nav dropdowns above the content below */
body.home .home-intro {
  z-index: 2;
}

.home-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.home-bubbles span:nth-child(1)  { width: 260px; height: 260px; top: 11%; left: -110px; opacity: 0.22; animation-duration: 12s; }
.home-bubbles span:nth-child(2)  { width: 60px;  height: 60px;  top: 13%; right: 12%;  opacity: 0.3;  animation-duration: 7s;  animation-delay: -1s; }
.home-bubbles span:nth-child(3)  { width: 44px;  height: 44px;  top: 17%; left: 30%;   opacity: 0.22; animation-duration: 8s;  animation-delay: -3s; }
.home-bubbles span:nth-child(4)  { width: 180px; height: 180px; top: 20%; right: -60px; opacity: 0.2;  animation-duration: 9s;  animation-delay: -2s; }
.home-bubbles span:nth-child(5)  { width: 140px; height: 140px; top: 27%; left: 14%;   opacity: 0.16; animation-duration: 11s; animation-delay: -6s; }
.home-bubbles span:nth-child(6)  { width: 360px; height: 360px; top: 32%; right: -150px; background: var(--navy); opacity: 0.06; animation-duration: 14s; animation-delay: -5s; }
.home-bubbles span:nth-child(7)  { width: 100px; height: 100px; top: 38%; left: -40px; opacity: 0.18; animation-duration: 10s; animation-delay: -4s; }
.home-bubbles span:nth-child(8)  { width: 50px;  height: 50px;  top: 43%; left: 46%;   opacity: 0.25; animation-duration: 9s;  animation-delay: -7s; }
.home-bubbles span:nth-child(9)  { width: 280px; height: 280px; top: 49%; left: -120px; opacity: 0.18; animation-duration: 15s; animation-delay: -8s; }
.home-bubbles span:nth-child(10) { width: 220px; height: 220px; top: 55%; right: 8%;   background: var(--navy); opacity: 0.07; animation-duration: 13s; animation-delay: -7s; }
.home-bubbles span:nth-child(11) { width: 70px;  height: 70px;  top: 61%; left: 22%;   opacity: 0.28; animation-duration: 8s;  animation-delay: -2s; }
.home-bubbles span:nth-child(12) { width: 160px; height: 160px; top: 66%; right: -50px; opacity: 0.2;  animation-duration: 11s; animation-delay: -4s; }
.home-bubbles span:nth-child(13) { width: 40px;  height: 40px;  top: 71%; right: 30%;  opacity: 0.3;  animation-duration: 7s;  animation-delay: -5s; }
.home-bubbles span:nth-child(14) { width: 240px; height: 240px; top: 75%; left: -90px; background: var(--navy); opacity: 0.06; animation-duration: 14s; animation-delay: -3s; }
.home-bubbles span:nth-child(15) { width: 120px; height: 120px; top: 80%; left: 40%;   opacity: 0.16; animation-duration: 10s; animation-delay: -6s; }
.home-bubbles span:nth-child(16) { width: 200px; height: 200px; top: 83%; right: -70px; opacity: 0.2;  animation-duration: 12s; animation-delay: -1s; }

.home-intro {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.home-intro .home-hero,
.home-intro .value-band {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-intro .home-hero {
  flex: 2 0 auto;
}

.home-intro .value-band {
  flex: 1 0 auto;
  padding: 28px 0;
  background: none;
}

.home-intro .value-band h2 {
  color: var(--navy);
}

.home-intro .value-band .lede {
  margin: 12px auto 16px !important;
}

/* Tighter first screen so the quotes make it above the fold */
.home-intro .home-hero {
  padding: 28px 0 clamp(48px, 7vw, 100px);
}

.home-intro .home-hero .logo-lockup {
  width: 400px;
  margin-bottom: 8px;
}

.home-intro .home-hero .hero-tagline {
  margin-bottom: 12px;
}

/* Client quotes — sits inside the first screen so it shows above the fold */
.home-intro .quote-band {
  padding: 28px 0 16px;
  background: none;
}

.quote-band .quote-block p {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-bottom: 0;
}

.quote-band .quote-carousel__controls {
  margin-top: 8px;
}

/* Faded-yellow organic blob behind the quotes so they stand out */
.quote-band .quote-carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(32px, 9vw, 120px);
  background: rgba(242, 207, 29, 0.3);
  border-radius: 38% 62% 45% 55% / 62% 40% 60% 38%;
}

/* Tall narrow box on phones: gentler curves so corners don't clip the text */
@media (max-width: 600px) {
  .quote-band .quote-carousel {
    border-radius: 48px 72px 56px 80px / 64px 48px 80px 56px;
    padding: 44px 28px;
  }
}

.quote-band .quote-block h4 {
  color: var(--navy);
}

.home-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 56px 0 40px;
  text-align: center;
}

.home-hero .container {
  position: relative;
  z-index: 1;
}

/* Curved yellow + white wave that softens the photo-to-white transition */
.hero-wave {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: clamp(40px, 7vw, 100px);
  z-index: 0;
  pointer-events: none;
}

.hero-wave__accent {
  fill: var(--yellow);
}

.hero-wave__fill {
  fill: var(--white);
}

body.home .hero-wave__fill {
  fill: #eceef6;
}

.home-hero .eyebrow-lg {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.2em;
}

.home-hero .logo-lockup {
  width: 480px;
  max-width: 100%;
  margin: 0 auto 16px;
}

.home-hero .hero-tagline {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 700;
  max-width: 760px;
  margin: 0 auto 28px;
}

.home-hero .main-nav {
  display: block;
  position: relative;
}

.home-hero .main-nav > ul {
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

.home-hero .shop-link {
  font-size: 1.15rem !important;
  margin-left: 8px;
}

.home-hero .main-nav a {
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 10px;
}

.home-hero .main-nav a:hover,
.home-hero .main-nav a.active {
  color: var(--yellow);
}

.home-hero .main-nav .dropdown a {
  color: var(--text);
}

.home-hero .main-nav .dropdown a:hover {
  color: var(--yellow-dark);
}

.home-hero .shop-link {
  color: var(--yellow) !important;
}

.home-hero .nav-toggle span {
  background: var(--white);
}

/* ---- "We Value [word]" typewriter section ---- */
.value-band {
  padding: 56px 0;
  text-align: center;
}

.value-band h2 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  margin-bottom: 0;
}

.value-band .lede {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  max-width: 900px;
}

.value-band .highlight {
  color: var(--yellow);
}

.value-band .typewriter {
  color: var(--yellow);
  display: inline-block;
}

.value-band .typewriter::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--yellow);
  margin-left: 4px;
  vertical-align: -0.1em;
  animation: blink 0.9s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ==========================================================================
   Inner page headers (white bg, two-tone heading, decorative background)
   ========================================================================== */

.page-intro {
  background-image: url('../assets/images/ability-smart-new-banner-5.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 56px 0 48px;
}

.page-intro.section--decor {
  background-image: none;
  padding-bottom: 64px;
}

.page-intro h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase;
  color: var(--navy);
}

.page-intro .accent {
  color: var(--yellow);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.grid {
  display: grid;
  gap: 28px;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.highlight-stat {
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 600;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .grid--3, .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Flat columns — used for "What We Offer" / plain listings */
.flat-col {
  background: var(--navy);
  border-radius: 28px;
  box-shadow: 0 16px 30px -10px rgba(24, 41, 140, 0.35);
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.flat-col h3 {
  font-size: 1.5rem;
  color: var(--white);
}

.flat-col p {
  color: rgba(255, 255, 255, 0.85);
}

.flat-col .btn {
  color: var(--yellow);
  margin-top: auto;
  align-self: center;
}

.flat-col .btn:hover {
  color: var(--white);
}

/* Soft rounded card — blog posts, About Us values */
.card-soft {
  background: var(--grey-bg);
  border-radius: 20px;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
  padding: 30px 26px;
  height: 100%;
}

.card-soft h3 {
  font-size: 1.1rem;
}

.card-soft--row {
  display: flex;
  align-items: center;
  gap: 36px;
}

.card-soft--row h3 {
  flex: 0 0 220px;
  font-size: 1.8rem;
  color: var(--navy);
  margin: 0;
}

.card-soft--row p {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text-light);
  margin: 0;
}

@media (max-width: 640px) {
  .card-soft--row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-soft--row h3 {
    flex-basis: auto;
  }
}

/* Sticker card — hard offset navy shadow, square corners: FAQ, forms, downloads */
.card-sticker {
  background: var(--white);
  border: 1px solid #d9d9d9;
  box-shadow: var(--sticker-shadow);
  padding: 26px;
}

/* Photo tile — Training / Assistive Technology grids */
.tile {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 26px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(24, 41, 140, 0.18);
}

.tile__body h3 {
  color: var(--yellow);
  font-size: 1.2rem;
  margin-bottom: 0.4em;
}

.tile__body p {
  color: var(--white);
  font-size: 0.95rem;
}

/* Light variant — product logo tiles (e.g. Zoned In) */
.tile--light {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: var(--white);
  border: 1px solid #eee;
  color: var(--text);
}

.tile--light .tile__logo {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

.tile--light .tile__body h3 {
  color: var(--navy);
}

.tile--light .tile__body p {
  color: var(--text-light);
}

/* Icon-badge (kept for any leftover use) */
.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grey-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 1.5rem;
}

/* Blog / resource cards */
.post-card {
  background: var(--grey-bg);
  border-radius: 20px;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.post-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.post-card__body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card__body h3 {
  font-size: 1.05rem;
}

.post-card__body p {
  color: var(--text-light);
  font-size: 0.95rem;
  flex: 1;
}

.read-more {
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* Logos strip */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 42px;
}

.logo-strip img {
  max-height: 56px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.75;
}

/* Quote */
.quote-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.quote-block p {
  font-size: 1.25rem;
  font-style: italic;
}

/* Bulleted content list — training pages, "Including:" / "Sessions could cover:" */
.content-list {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  display: grid;
  gap: 10px;
}

.content-list li {
  position: relative;
  padding-left: 24px;
}

.content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow-dark);
}

/* Text + photo split — training pages "What is it?" section */
.content-media {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}

.content-media img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 20px -10px rgba(24, 41, 140, 0.3);
}

@media (max-width: 800px) {
  .content-media {
    grid-template-columns: 1fr;
  }
}

.quote-block h4 {
  color: var(--yellow-dark);
  font-size: 1rem;
  margin-top: 0.6em;
}

/* Quote carousel — home page. Slides share one grid cell so the box is
   always the height of the longest quote and nothing jumps as they change. */
.quote-carousel__slides {
  display: grid;
}

.quote-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.quote-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.quote-carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.quote-carousel__dots {
  display: flex;
  gap: 4px;
}

.quote-carousel__dot,
.quote-carousel__pause {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.quote-carousel__dot::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  transition: background 0.2s ease;
}

.quote-carousel__dot[aria-current="true"]::before {
  background: var(--navy);
}

.quote-carousel__pause {
  color: var(--navy);
  font-size: 0.75rem;
  letter-spacing: -2px;
}

.quote-carousel__dot:focus-visible,
.quote-carousel__pause:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .quote-carousel__slide {
    transition: none;
  }
}

/* Numbered / plain steps (flat, bold lead-in — matches the live site) */
.steps-flat {
  max-width: 780px;
  margin: 0;
  font-size: 1.15rem;
}

.steps-flat p {
  margin-bottom: 1.1em;
}

.steps-flat strong {
  color: var(--text);
}

.steps-flat strong.step-label {
  color: var(--yellow-dark);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
  text-align: center;
}

.step-box {
  position: relative;
  background: var(--yellow);
  border-radius: 16px;
  box-shadow: 0 12px 20px -10px rgba(24, 41, 140, 0.3);
  padding: 34px 20px 24px;
}

.step-num {
  display: block;
  margin: 0 0 18px;
  color: var(--navy);
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
}

.step-box strong {
  display: block;
  color: rgba(24, 41, 140, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  font-style: italic;
}

.steps-grid .step-box:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -36px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 9.5H13.5V4L22 12L13.5 20V14.5H2Z' fill='%2318298C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 900px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 44px;
  }

  .steps-grid .step-box:not(:last-child)::after {
    display: none;
  }

  .steps-grid .step-box:nth-child(odd)::after {
    display: block;
  }
}

@media (max-width: 640px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid .step-box::after {
    display: none !important;
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.field {
  margin-bottom: 22px;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--navy);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--yellow-dark);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 14px;
}

.form-status {
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.9rem;
}

.form-status.success {
  color: #1a7a3c;
}

.form-status.error {
  color: #b3261e;
}

/* ---- Form card — soft rounded navy card (replaces the boxy sticker-shadow look) ---- */
.form-card {
  background: var(--navy);
  border-radius: 28px;
  padding: 48px;
  box-shadow: 0 24px 48px rgba(24, 41, 140, 0.22);
}

.form-card--decor {
  position: relative;
  overflow: hidden;
}

.form-card--decor form {
  position: relative;
  z-index: 1;
}

.decor-circle-soft {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: float-bubble 10s ease-in-out infinite;
}

.decor-circle-soft--1 {
  width: 220px;
  height: 220px;
  top: -90px;
  right: -70px;
  background: var(--yellow);
  opacity: 0.12;
  animation-duration: 12s;
}

.decor-circle-soft--2 {
  width: 130px;
  height: 130px;
  bottom: -50px;
  left: -40px;
  background: var(--yellow);
  opacity: 0.1;
  animation-duration: 9s;
  animation-delay: -3s;
}

.decor-circle-soft--3 {
  width: 70px;
  height: 70px;
  bottom: 15%;
  right: 8%;
  background: rgba(255, 255, 255, 0.15);
  animation-duration: 8s;
  animation-delay: -1s;
}

@media (max-width: 640px) {
  .form-card {
    padding: 32px 24px;
    border-radius: 20px;
  }
}

.form-card .field label {
  color: var(--yellow);
  font-size: 1rem;
}

.form-card .field input,
.form-card .field textarea,
.form-card .field select {
  font-size: 1.05rem;
}

.form-card .field input,
.form-card .field textarea,
.form-card .field select {
  border: none;
  border-radius: 12px;
  box-shadow: none;
}

.form-card .field input:focus,
.form-card .field textarea:focus,
.form-card .field select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--yellow);
}

.form-card .form-note {
  color: rgba(255, 255, 255, 0.75);
}

.form-card .form-note a {
  color: var(--yellow);
}

.form-card .btn-submit {
  display: block;
  margin: 55px auto 0;
}

.form-card .form-status {
  text-align: center;
}

.form-card .form-status.success {
  color: var(--yellow);
}

.form-card .form-status.error {
  color: #ffb3ab;
}

.btn-submit {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 15px 38px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-submit:hover {
  background: var(--yellow-dark);
  transform: translateY(-1px);
}

.btn-pill {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 34px;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(242, 207, 29, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-pill:hover {
  background: var(--yellow-dark);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ---- Contact split layout: form card + info panel ---- */
.contact-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .contact-split {
    grid-template-columns: 1fr;
  }
}

.contact-split .form-card {
  margin: 0;
}

.contact-panel {
  background: var(--yellow);
  border-radius: 28px;
  padding: 48px 40px;
  box-shadow: 0 24px 48px rgba(242, 207, 29, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

@media (max-width: 640px) {
  .contact-panel {
    padding: 32px 24px;
    border-radius: 20px;
  }
}

.contact-panel__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.contact-panel__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-panel__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--yellow);
}

.contact-panel__item .label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.contact-panel__item p,
.contact-panel__item a {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.1rem;
}

.contact-panel__item a:hover {
  text-decoration: underline;
}

/* FAQ accordion — sticker-shadow style */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 4px 10px rgba(24, 41, 140, 0.08), 0 20px 40px rgba(24, 41, 140, 0.16);
  margin-bottom: 28px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.faq-item:hover {
  box-shadow: 0 6px 14px rgba(24, 41, 140, 0.1), 0 26px 48px rgba(24, 41, 140, 0.2);
  transform: translateY(-2px);
}

.faq-item__question {
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, #1d3099 0%, var(--navy) 55%, #101d63 100%);
  border: none;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.2px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  color: var(--white);
}

.faq-item__question::after {
  content: "+";
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.faq-item__question:hover::after {
  background: rgba(255, 255, 255, 0.24);
}

.faq-item.open .faq-item__question::after {
  transform: rotate(45deg);
  background: rgba(24, 41, 140, 0.1);
}

.faq-item.open .faq-item__question {
  background: linear-gradient(135deg, #ffd943 0%, var(--yellow) 60%, #e0ba13 100%);
  color: var(--navy);
}

.faq-item__answer {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: linear-gradient(180deg, #ffd943 0%, var(--yellow) 100%);
}

.faq-answer-inner {
  position: relative;
  z-index: 1;
}

.faq-bubble {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: float-bubble 9s ease-in-out infinite;
}

.faq-bubble--1 {
  width: 70px;
  height: 70px;
  top: 40px;
  right: -30px;
  background: var(--navy);
  opacity: 0.1;
}

.faq-bubble--2 {
  width: 44px;
  height: 44px;
  bottom: 18px;
  left: 10%;
  background: var(--white);
  opacity: 0.45;
  animation-delay: -3s;
  animation-duration: 7s;
}

.faq-bubble--3 {
  width: 36px;
  height: 36px;
  top: 46px;
  left: 42%;
  background: var(--white);
  opacity: 0.3;
  animation-delay: -5s;
  animation-duration: 8s;
}

.faq-bubble--4 {
  width: 56px;
  height: 56px;
  bottom: 10%;
  right: 28%;
  background: var(--navy);
  opacity: 0.08;
  animation-delay: -2s;
  animation-duration: 10s;
}

.faq-item.open .faq-item__answer {
  max-height: 800px;
  padding: 22px;
}

.faq-item__answer p {
  color: var(--navy);
}

.faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* Download list */
.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .download-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .download-grid {
    grid-template-columns: 1fr;
  }
}

.download-card {
  background: var(--white);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(24, 41, 140, 0.14);
}

.download-card h3 {
  font-size: 1.2rem;
  color: var(--text);
}

.download-card p {
  color: var(--text-light);
  font-size: 1.05rem;
  flex: 1;
}

/* Contact details list */
.contact-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin-top: 32px;
}

.contact-methods div {
  text-align: center;
}

.contact-methods .label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--yellow-dark);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer h4 {
  color: var(--yellow);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
  color: var(--yellow);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 10px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 0;
  font-size: 0.85rem;
}

.footer-bottom img {
  height: 70px;
}

/* ==========================================================================
   Cookie banner
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner p {
  margin: 0;
  font-size: 0.85rem;
  max-width: 760px;
}

.cookie-banner p a {
  color: var(--yellow);
  text-decoration: underline;
}

.cookie-banner p a:hover {
  color: var(--white);
}

.cookie-banner .btn-accept {
  font-family: inherit;
  font-weight: 400;
  font-size: 1.1rem;
  font-style: normal;
  background: var(--yellow);
  color: var(--navy);
  border: none;
  padding: 10px 22px;
  cursor: pointer;
}

.cookie-banner .btn-accept:hover {
  background: var(--yellow-dark);
}

.cookie-banner[hidden] {
  display: none;
}

/* ==========================================================================
   Scroll reveal — sections/cards fade and rise into view as you scroll
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */

@media (max-width: 1240px) {
  .nav-toggle {
    display: block;
  }

  .home-hero .nav-toggle {
    position: absolute;
    top: 18px;
    right: 20px;
  }

  .home-hero .nav-toggle.is-active span {
    background: var(--navy);
  }

  /* Homepage hero nav: use the same slide-in menu as other pages on small screens */
  .home-hero .main-nav {
    position: fixed;
    display: flex;
    text-align: left;
  }

  .home-hero .main-nav a {
    font-size: 0.95rem;
    padding: 10px 8px;
  }

  .home-hero .main-nav > ul {
    padding-right: 0;
  }

  .home-hero .shop-link {
    position: static;
    transform: none;
    font-size: 1.2rem !important;
  }

  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 90px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    z-index: 300;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .main-nav li {
    border-bottom: 1px solid #eee;
  }

  .main-nav a,
  .home-hero .main-nav a {
    color: var(--text) !important;
  }

  .main-nav .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
    padding-left: 16px;
  }

  .main-nav li.open .dropdown {
    display: block;
  }

  .shop-link {
    margin-top: 12px;
  }
}


/* ---- Cookie banner: equal Reject / Accept choice ---- */
.cookie-banner .cookie-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Related links (service pages and blog posts) ---- */
.related-links {
  list-style: none;
  padding: 0;
  margin: 24px auto 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
}

.related-links a {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-weight: 700;
  color: var(--navy);
}

.related-links a:hover,
.related-links a:focus-visible {
  background: var(--navy);
  color: var(--white);
}

/* Tiles whose titles line up across a row (services overview) */
.tile--aligned {
  align-items: stretch;
}

.tile--aligned .tile__body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tile--aligned .tile__body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* "At a glance" panel on product pages */
.flat-col .content-list {
  text-align: left;
  margin-bottom: 24px;
}

.flat-col .content-list li {
  color: var(--white);
}

/* Product logo above the "At a glance" panel */
.content-media img.product-logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 24px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(24, 41, 140, 0.12);
}

/* Inner-page header: logo on the left, menu aligned to the right */
@media (min-width: 1241px) {
  .site-header .main-nav {
    justify-content: flex-end;
  }
}