/* ============================================
   CPL Lawyers - Design System
   Slate Blue + Champagne Gold Palette
   ============================================ */

/* --- SVG Icon Utilities --- */
.icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.icon--sm  { width: 0.85em; height: 0.85em; }
.icon--lg  { width: 1.4em;  height: 1.4em;  }
.icon--xl  { width: 2em;    height: 2em;    }
.icon--accent { color: var(--color-accent); }
.icon--white  { color: var(--color-white);  }
.icon--muted  { color: var(--color-text-muted); }
.icon--primary{ color: var(--color-primary); }

/* Circle container (used in USP cards, footer contact, etc.) */
.icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-accent);
  flex-shrink: 0;
}
.icon-circle--sm { width: 28px; height: 28px; }
.icon-circle--accent { background: var(--color-accent); color: var(--color-white); }
.icon-circle--primary { background: var(--color-primary); color: var(--color-accent); }

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  background: var(--color-bg);
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  font-size: 16px;
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  width: 100%;
  min-width: 0;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.35; color: var(--color-primary); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; }

p { margin-bottom: 1rem; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.5rem; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 90px 0; }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-primary); color: var(--color-white); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-white); }

.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--transition);
  text-decoration: none; line-height: 1.2;
}
.btn--primary {
  background: var(--color-dark-blue); color: var(--color-white);
  box-shadow: 0 4px 12px rgba(7, 46, 80, 0.15);
}
.btn--primary:hover {
  background: var(--color-primary); color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(7, 46, 80, 0.25);
}
.btn--accent {
  background: var(--color-accent); color: var(--on-accent);
  box-shadow: 0 4px 12px rgba(29, 168, 238, 0.2);
}
.btn--accent:hover {
  background: var(--color-accent-hover); color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(29, 168, 238, 0.35);
}
.btn--outline {
  background: transparent; color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary); color: var(--color-white);
  transform: translateY(-2px);
}
.btn--outline-white {
  background: transparent; color: var(--color-white);
  border: 1.5px solid var(--color-white);
}
.btn--outline-white:hover {
  background: var(--color-white); color: var(--color-primary);
  transform: translateY(-2px);
}
.btn--white {
  background: var(--color-white); color: var(--color-primary); border: 1.5px solid var(--color-white);
  box-shadow: var(--shadow-md);
}
.btn--white:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); transform: translateY(-2px); }
.btn--lg { padding: 15px 36px; font-size: 1rem; }
.btn svg, .btn i { font-size: 1.1em; }
.btn--hero-quote {
  min-height: 60px;
  padding: 16px 24px 16px 28px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 1.12rem;
  font-weight: 800;
  box-shadow: 0 16px 36px rgba(18, 11, 92, 0.18);
}
.btn--hero-quote .icon {
  width: 24px;
  height: 24px;
  stroke-width: 3;
}
.btn--hero-quote:hover {
  background: var(--color-accent-hover);
  color: var(--color-white);
}

/* --- Top Bar --- */
.top-bar {
  background: var(--color-primary);  /* Deep navy from logo */
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  padding: 8px 0;
  font-family: var(--font-body);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.top-bar .container {
  display: flex; justify-content: space-between; align-items: center;
}
.top-bar a { color: rgba(255,255,255,0.85); }
.top-bar a:hover { color: var(--color-accent); }
.top-bar__left { display: flex; gap: 24px; align-items: center; }
.top-bar__left span { display: flex; align-items: center; gap: 6px; }
.top-bar__right a {
  display: flex; align-items: center; gap: 6px;
  color: var(--color-white); font-weight: 600;
}

/* --- Header / Navigation --- */
.header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: all var(--transition);
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(213, 230, 240, 0.4);
  box-shadow: 0 2px 8px rgba(3, 11, 54, 0.03);
}
.header .container {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; padding-bottom: 14px;
}
.header__logo img, .header__logo svg { height: 56px; width: auto; }
.header__logo { display: flex; align-items: center; text-decoration: none; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav__link {
  padding: 8px 16px; color: var(--color-primary); font-weight: 500; font-size: 0.88rem;
  border-radius: var(--radius-sm); transition: all var(--transition);
  text-decoration: none; position: relative;
}
.nav__link:hover, .nav__link--active {
  color: var(--color-accent);
}
.nav__link--active {
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* Dropdown */
.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.nav__dropdown-toggle::after {
  content: '\25BE'; font-size: 0.7em; transition: transform var(--transition);
}
.nav__dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--color-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--transition);
  border: 1px solid var(--color-border);
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown.active .nav__dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__dropdown-menu a {
  display: block; padding: 10px 16px; color: var(--color-text);
  border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 500;
  transition: all var(--transition);
}
.nav__dropdown-menu a:hover { background: var(--color-bg); color: var(--color-primary); }

.header__cta { display: flex; align-items: center; gap: 20px; }

/* Mobile Nav Toggle */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 24px; position: relative; z-index: 1001;
}
.nav-toggle span {
  display: block; width: 100%; height: 2.5px; background: var(--color-primary);
  border-radius: 2px; transition: all var(--transition);
  position: absolute; left: 0;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle span:nth-child(3) { bottom: 0; }
.nav-toggle.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* --- Hero Sections --- */
/* Live site uses a light overlay gradient from left, photo shows on right */
.hero {
  position: relative; padding: 100px 0 80px;
  background: var(--color-bg);
  overflow: hidden; min-height: 420px;
  display: flex; align-items: center;
}
.hero--home { min-height: 610px; padding: 95px 0 82px; }
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center right;
  opacity: 1;
}
.hero__overlay {
  position: absolute; inset: 0;
  /* Light wash from left - logo colours show through, photo visible on right */
  background: linear-gradient(110deg,
    rgba(236,246,253,0.96) 0%,
    rgba(236,246,253,0.92) 35%,
    rgba(236,246,253,0.75) 58%,
    rgba(236,246,253,0.35) 100%);
}
/* Inner pages use a slightly darker overlay so text stays readable */
.hero:not(.hero--home) .hero__overlay {
  background: linear-gradient(110deg,
    rgba(14,12,83,0.85) 0%,
    rgba(14,12,83,0.65) 60%,
    rgba(14,12,83,0.4) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: 600px; }
/* Home hero - dark text on light gradient background */
.hero--home .hero__content { color: var(--color-primary); }
.hero--home .hero__content h1 { color: var(--color-primary); margin-bottom: 16px; }
.hero--home .hero__subtitle {
  font-size: 1.15rem; color: var(--color-text);
  margin-bottom: 32px; line-height: 1.7;
}
/* Inner pages - white text on dark overlay */
.hero:not(.hero--home) .hero__content { color: var(--color-white); }
.hero:not(.hero--home) .hero__content h1 { color: var(--color-white); margin-bottom: 16px; }
.hero__subtitle {
  font-size: 1.1rem;
  margin-bottom: 28px; line-height: 1.6;
}
.hero__label {
  display: inline-block; font-size: 0.8rem; font-weight: 700;
  color: var(--color-primary); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 10px; opacity: 0.7;
}
.hero--home .hero__label { color: var(--color-primary-light); opacity: 0.9; letter-spacing: 3px; }
.top-bar { display: none; }
.header {
  position: fixed;
  top: 20px;
  left: 50%;
  width: min(1320px, calc(100% - 56px));
  transform: translateX(-50%);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(3, 11, 54, 0.06);
}
.header .container {
  /* The base .container utility caps at --max-width (1140px), which left
     90px of dead space on each side inside the 1320px floating header -
     that's what was squeezing the nav into wrapping. The header manages
     its own width via the outer .header rule, so its container needs to
     fill it, not the page's default prose width. */
  max-width: none;
  padding: 14px 24px;
}
.header .container .nav__link,
.header .container .nav__dropdown-toggle {
  white-space: nowrap;
}
.hero--quote {
  min-height: 680px;
  padding-top: 158px;
  padding-bottom: 86px;
  background: var(--color-bg-alt);
}
.hero-motion-line {
  position: absolute;
  z-index: 0;
  top: 104px;
  left: 0;
  width: 100%;
  height: 620px;
  overflow: visible;
  pointer-events: none;
}
.hero-motion-line__path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.72;
}
.hero-motion-line__endpoint {
  fill: #f3755d;
  transform-box: fill-box;
  transform-origin: center;
}
.hero--quote > .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 1000px), (prefers-reduced-motion: reduce) {
  .hero-motion-line { display: none; }
}
.hero--quote .hero__bg {
  opacity: 1;
  filter: saturate(1.02) contrast(0.98) brightness(1.04);
  background-position: center right;
}
.hero--quote .hero__overlay {
  background: linear-gradient(105deg,
    rgba(238,248,253,0.98) 0%,
    rgba(238,248,253,0.94) 34%,
    rgba(238,248,253,0.76) 55%,
    rgba(238,248,253,0.28) 100%);
}
.hero--quote > .container {
  width: min(1320px, 100%);
  max-width: none;
}
.hero--quote .hero__content {
  max-width: 720px;
  margin: 0;
  text-align: left;
}
.hero--quote h1 {
  font-size: clamp(3rem, 5.5vw, 4.7rem);
  line-height: 1.08;
  font-weight: 760;
}
.hero--quote .hero__content h1 {
  color: var(--color-primary);
  text-shadow: none;
}
.hero--quote .hero__label {
  color: var(--color-primary);
  opacity: 1;
}
.hero--quote .hero__subtitle {
  max-width: 680px;
  color: var(--color-text);
}
.hero--quote .hero__actions {
  justify-content: flex-start;
}
.quote-mode-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 22px auto 28px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 42px rgba(3, 11, 54, 0.18);
}
.quote-mode-toggle button {
  min-width: 132px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-primary);
  font-weight: 800;
  cursor: pointer;
}
.quote-mode-toggle button.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}

.feature-cards {
  margin-top: 0;
  padding: 72px 0;
  position: relative;
  z-index: 4;
}
.feature-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.bold-feature-card {
  min-width: 0;
  min-height: 330px;
  padding: 34px;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(3, 11, 54, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bold-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.bold-feature-card h2,
.bold-feature-card h3 {
  margin-bottom: 16px;
  color: inherit;
  max-width: 100%;
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  line-height: 1.04;
}
.bold-feature-card p {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  color: inherit;
  opacity: 0.86;
}
.bold-feature-card a {
  display: inline-flex;
  margin-top: 16px;
  color: inherit;
  font-weight: 800;
}
.bold-feature-card--navy {
  background: var(--color-primary);
  color: var(--color-white);
}
.bold-feature-card--blue {
  background: linear-gradient(145deg, #1da8ee, var(--color-accent-cta));
  color: var(--color-white);
}
.bold-feature-card--mint {
  background: #d9f4ea;
  color: var(--color-primary);
}

.quote-simulator-section {
  background: linear-gradient(180deg, #f5fafd, var(--color-white));
}
.quote-simulator-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 46px;
  align-items: center;
}
.quote-simulator-layout h2 {
  max-width: 520px;
}
.quote-simulator-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 24px 58px rgba(3, 11, 54, 0.1);
}
.quote-simulator-card__form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.quote-simulator-card__form label {
  grid-row: 1;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.quote-simulator-card__form select {
  grid-row: 2;
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}
.quote-simulator-card__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 24px;
  border-radius: 14px;
  background: var(--color-bg);
  text-align: center;
}
.quote-simulator-card__result span,
.quote-simulator-card__result small {
  color: var(--color-text-muted);
  font-weight: 600;
}
.quote-simulator-card__result strong {
  margin: 6px 0 2px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 2.5rem;
  line-height: 1;
}
.quote-simulator-card__result .btn {
  margin-top: 16px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 16px 40px rgba(3, 11, 54, 0.06);
}
.stat-row div {
  padding: 26px 24px;
  border-right: 1px solid var(--color-border);
}
.stat-row div:last-child {
  border-right: 0;
}
.stat-row strong {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 2rem;
}
.stat-row span {
  color: var(--color-text-muted);
  font-weight: 700;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.motion-trust-strip {
  position: relative;
  z-index: 3;
  margin-top: -34px;
}
.motion-trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  box-shadow: 0 18px 40px rgba(3, 11, 54, 0.16);
}
.motion-trust-strip__inner span {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 18px 22px;
  color: var(--color-white);
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.motion-trust-strip__inner span:last-child {
  border-right: 0;
}
.motion-trust-strip__inner span::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(29,168,238,0.14);
  flex: 0 0 auto;
}

/* --- Service Cards Grid --- */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.services-section {
  padding: 104px 0 84px;
}
.services-section .text-center {
  margin-bottom: 38px !important;
}
/* Centre the lone 7th card on desktop */
.services-grid .service-card:last-child:nth-child(3n+1) {
  grid-column: 2;
}

.service-card {
  background: var(--color-white); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  text-decoration: none; color: var(--color-text);
  border: 1px solid var(--color-border);
  position: relative;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,11,54,0) 45%, rgba(3,11,54,0.10) 100%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.service-card:hover::before { opacity: 1; }
.service-card__img {
  height: 172px; overflow: hidden;
  background: var(--color-bg-alt);
}
.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.08) brightness(0.94);
  transition: transform var(--transition), filter var(--transition);
}
.service-card:hover .service-card__img img { transform: scale(1.05); }
/* Matches live site: title + blue bottom border, arrow circle on right */
.service-card__body { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--color-accent); }
.service-card__title { font-size: 1rem; font-family: var(--font-body); font-weight: 600; color: var(--color-primary); margin-bottom: 0; }
.service-card__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-white);
  flex-shrink: 0; transition: all var(--transition);
}
.service-card:hover .service-card__arrow { background: var(--color-primary); transform: translateX(4px); }

/* --- Journey Section --- */
.journey-section {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
}
.journey-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 56px;
  align-items: start;
}
.journey-layout__intro {
  position: sticky;
  top: 120px;
}
.journey-layout__intro h2 {
  margin-bottom: 16px;
}
.journey-rail {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 32px;
}
.journey-rail__line {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 8px;
  width: 2px;
  transform-origin: top;
  background: linear-gradient(180deg, var(--color-accent), rgba(29,168,238,0.12));
}
.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 22px;
  align-items: start;
  padding: 24px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 32px rgba(3, 11, 54, 0.06);
}
.journey-step::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 34px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 8px rgba(29,168,238,0.14);
}
.journey-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 800;
  letter-spacing: 0.5px;
}
.journey-step h3 {
  grid-column: 2;
  margin-bottom: 4px;
  font-size: 1.1rem;
}
.journey-step p {
  grid-column: 2;
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* --- About / Split Section --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split__content h2 { margin-bottom: 16px; }
.split__content p { color: var(--color-text-muted); }
.split__media {
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-lg); position: relative;
}
.split__media img, .split__media video { width: 100%; display: block; }

/* Video Play Button */
.video-wrapper { position: relative; cursor: pointer; }
.video-wrapper--peter {
  background: var(--color-primary);
}
.video-wrapper--peter img {
  min-height: 310px;
}
.video-wrapper__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: var(--shadow-lg);
  transition: all var(--transition);
}
.video-wrapper:hover .video-wrapper__play { background: var(--color-accent-hover); transform: translate(-50%, -50%) scale(1.1); }

/* --- Quote Preview --- */
.quote-preview {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
.quote-preview__bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.quote-preview__bar span {
  height: 6px;
  border-radius: 99px;
  background: var(--color-accent-light);
}
.quote-preview__bar span:first-child {
  background: var(--color-accent);
}
.quote-preview__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-weight: 600;
}
.quote-preview__step::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}
.quote-preview__step.is-active {
  border-color: var(--color-accent);
  background: var(--color-bg);
}
.quote-preview__step.is-active::after {
  background: var(--color-accent);
}
.quote-preview__footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.phase2-tight-section {
  padding: 72px 0;
}
.quote-teaser-section {
  background:
    linear-gradient(90deg, rgba(236,246,253,0.96) 0%, rgba(236,246,253,0.86) 100%),
    var(--color-bg-alt);
}
.quote-teaser-section .split {
  gap: 48px;
}
.quote-teaser-section .split__content p {
  max-width: 560px;
}
.peter-section {
  background: var(--color-bg-alt);
  border-top: 1px solid rgba(3, 11, 54, 0.06);
}
.peter-section .split {
  gap: 54px;
}
.peter-section .split__media {
  box-shadow: 0 18px 42px rgba(3, 11, 54, 0.12);
}
.usp-section {
  padding: 78px 0 82px;
}

/* --- USP Feature Cards --- */
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.usp-card {
  background: var(--color-white); border-radius: var(--radius-md);
  padding: 32px 24px; text-align: center;
  border: 1px solid var(--color-border);
  transition: all var(--transition);
}
.usp-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.usp-card__icon {
  width: 60px; height: 60px; margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  font-size: 1.5rem;
  transition: all var(--transition);
}
.usp-card:hover .usp-card__icon {
  background: var(--color-accent);
  color: var(--color-white);
  transform: scale(1.05);
}
.usp-card__icon .icon { width: 28px; height: 28px; }
.usp-card__title { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: var(--color-primary); }
.usp-card__text { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; }

/* --- Quote / Contact Forms --- */
.quote-section { background: var(--color-bg-alt); }
.quote-section__label { color: var(--color-accent); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.quote-section h2 { margin-bottom: 32px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; }
.form-group--full { grid-column: 1 / -1; }
.form-group label {
  font-size: 0.85rem; font-weight: 600; color: var(--color-primary);
  margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
  padding: 12px 16px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-family: var(--font-body);
  font-size: 0.95rem; background: var(--color-white);
  transition: border-color var(--transition);
  color: var(--color-text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(29, 168, 238, 0.15);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-text-light); }

.form-submit { margin-top: 8px; }

/* Quote with phone CTA */
.quote-layout { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.quote-phone {
  background: var(--color-primary); border-radius: var(--radius-md);
  padding: 32px; color: var(--color-white); text-align: center;
  min-width: 220px;
}
.quote-phone__icon { font-size: 2rem; color: var(--color-accent); margin-bottom: 12px; }
.quote-phone__label { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.quote-phone__number {
  font-size: 1.5rem; font-weight: 700; color: var(--color-white);
  text-decoration: none; display: block;
}
.quote-phone__number:hover { color: var(--color-accent); }
.quote-or { display: flex; align-items: center; font-size: 1.2rem; font-weight: 600; color: var(--color-text-muted); }

/* --- Quote CTA Banner (replaces inline form on homepage) --- */
.quote-cta-section {
  background: var(--color-primary);
  padding: 72px 0;
}
.quote-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.quote-cta-text { flex: 1; min-width: 280px; }
.quote-cta-text h2 { margin-bottom: 12px; }
.quote-cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.quote-cta-or {
  font-size: 0.9rem; font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
}

/* --- Testimonials --- */
.testimonials-section h2 { margin-bottom: 8px; }
.testimonials-section .section-label { margin-bottom: 4px; }

.google-rating {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
}
.google-rating__score { font-size: 3rem; font-weight: 700; color: var(--color-accent); line-height: 1; }
.google-rating__stars { color: var(--color-google-yellow); font-size: 1.2rem; }
.google-rating__text { font-size: 0.85rem; color: var(--color-text-muted); }
.google-rating__logo { height: 28px; }

.review-carousel {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--color-white); border-radius: var(--radius-md);
  padding: 28px; border: 1px solid var(--color-border);
  transition: all var(--transition);
}
.review-card:hover { box-shadow: var(--shadow-md); }
.review-card__stars { color: var(--color-google-yellow); font-size: 1rem; margin-bottom: 12px; }
.review-card__text { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.review-card__author { font-weight: 600; color: var(--color-primary); font-size: 0.9rem; }
.review-card__source { font-size: 0.8rem; color: var(--color-text-light); }
.review-card__quote {
  font-size: 3rem; color: var(--color-accent-light); line-height: 1;
  margin-bottom: 8px; font-family: Georgia, serif;
}
.embed-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.embed-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* Homepage Google proof band.
   Lives inside .hero-google-proof, itself a grid row of .hero--quote's
   own container — see the Stage 8 block for placement and dark-ground styling. */
.google-proof-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.45fr);
  gap: 28px;
  align-items: stretch;
  border: 1px solid rgba(29, 168, 238, 0.22);
  border-radius: 20px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 70px rgba(7, 28, 99, 0.08);
}
.google-proof-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 8px 10px 8px 4px;
}
.google-proof-summary h2 {
  max-width: 400px;
  margin-bottom: 14px;
  color: var(--color-primary);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.18;
}
.google-proof-summary p {
  max-width: 500px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 22px;
}
.google-proof-score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(29, 168, 238, 0.24);
  border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 12px 30px rgba(7, 28, 99, 0.08);
}
.google-proof-score strong {
  grid-row: span 2;
  color: var(--color-accent);
  font-size: 2.55rem;
  line-height: 0.95;
}
.google-proof-stars {
  color: var(--color-google-yellow);
  letter-spacing: 2px;
  line-height: 1;
}
.google-proof-score span:last-child {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 700;
}
.google-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
}
.google-proof-link:hover {
  color: var(--color-accent);
}
.google-proof-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.google-proof-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(7, 28, 99, 0.1);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 18px 40px rgba(7, 28, 99, 0.08);
}
.google-proof-card__top {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.google-proof-card__top > div {
  min-width: 0;
}
.google-proof-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #c2410c;
  color: var(--color-white);
  font-weight: 800;
  line-height: 1;
  margin: 0;
}
.google-proof-card__avatar--blue {
  background: var(--color-accent);
}
.google-proof-card__avatar--green {
  background: #1f8a63;
}
.google-proof-card h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1.15;
}
.google-proof-card__top span {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.google-proof-card__top .google-proof-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1;
}
.google-proof-card__top strong {
  font-family: Arial, sans-serif;
  color: var(--color-google-blue);
  font-size: 1.5rem;
}
.google-proof-card__stars {
  margin-bottom: 10px;
  color: var(--color-google-yellow);
  letter-spacing: 1px;
  line-height: 1;
}
.google-proof-card p {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* --- Callback Sidebar --- */
.page-layout { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
.sidebar { position: sticky; top: 100px; }
.callback-card {
  background: var(--color-white); border-radius: var(--radius-md);
  padding: 32px; box-shadow: var(--shadow-md); border: 1px solid var(--color-border);
}
.callback-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.callback-card p { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 20px; }
.callback-card .form-group { margin-bottom: 16px; }
.callback-card .btn { width: 100%; justify-content: center; }

.phone-banner {
  background: var(--color-primary); border-radius: var(--radius-md);
  padding: 24px; text-align: center; margin-bottom: 24px;
  color: var(--color-white);
}
.phone-banner__number {
  font-size: 1.5rem; font-weight: 700; color: var(--color-white);
  text-decoration: none; display: block;
}
.phone-banner__number:hover { color: var(--color-accent); }
.phone-banner__label { font-size: 0.85rem; color: rgba(255,255,255,0.7); }

/* --- FAQ Accordions --- */
.faq-list { max-width: 700px; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
  width: 100%; padding: 20px 0; background: none; border: none;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  color: var(--color-primary); text-align: left;
  transition: color var(--transition);
}
.faq-item__question:hover { color: var(--color-accent); }
.faq-item__icon {
  font-size: 1.2rem; transition: transform var(--transition);
  color: var(--color-accent); flex-shrink: 0; margin-left: 16px;
}
.faq-item.active .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-item__answer-inner {
  padding: 0 0 20px; color: var(--color-text-muted);
  font-size: 0.95rem; line-height: 1.7;
}

/* --- Step-by-Step Guide --- */
.steps-list { counter-reset: step; }
.step-item {
  position: relative; padding-left: 60px; margin-bottom: 32px;
}
.step-item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
.step-item h3 { margin-bottom: 8px; font-size: 1.15rem; }
.step-item p, .step-item ul { color: var(--color-text-muted); font-size: 0.95rem; }

/* --- Footer --- */
/* Live site footer: light #ecf6fd background, dark navy text (NOT dark bg) */
.footer {
  background: var(--color-bg);
  color: var(--color-text);
  padding: 24px 0 0;
  border-top: none;
}
.footer a { color: var(--color-text); }
.footer a:hover { color: var(--color-primary); }
.footer__grid {
  display: grid; grid-template-columns: 200px 1fr 280px;
  gap: 48px; padding-bottom: 48px;
}
.footer__logo img, .footer__logo svg { height: 60px; margin-bottom: 16px; }
.footer__heading {
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  color: var(--color-primary); margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}
.footer__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__links li { margin-bottom: 0; }
.footer__links a { font-size: 0.9rem; }
.footer__contact-item {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px; font-size: 0.9rem;
}
.footer__contact-item i, .footer__contact-item svg { color: var(--color-primary); flex-shrink: 0; margin-top: 3px; }
.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: 24px 0; text-align: center; font-size: 0.8rem;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
}
.footer__bottom a { color: var(--color-primary); }
.footer__bottom p { margin-bottom: 8px; }

/* --- Scroll to Top --- */
.scroll-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; font-size: 1.2rem;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all var(--transition); z-index: 999;
}
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--color-accent); transform: translateY(-2px); }

/* --- Section Labels --- */
.section-label {
  display: block; font-size: 0.75rem; font-weight: 700;
  color: var(--color-primary); letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 8px;
}

/* --- CTA Banner (legacy) --- */
.quote-cta-section .cta-banner {
  background: var(--color-primary);
  padding: 48px; border-radius: var(--radius-md);
  text-align: center; color: var(--color-white);
}
.quote-cta-section .cta-banner h2 { color: var(--color-white); margin-bottom: 16px; }
.quote-cta-section .cta-banner p { color: rgba(255,255,255,0.75); margin-bottom: 24px; }

/* --- Video Testimonials --- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.video-card {
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--color-white);
}
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
.video-card__title { padding: 16px; font-weight: 600; font-size: 0.95rem; color: var(--color-primary); }

/* --- Contact Page Specifics --- */
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; }
.contact-info-card { }
.contact-info-item {
  margin-bottom: 28px;
}
.contact-info-item h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--color-accent); font-family: var(--font-heading); }
.contact-info-item a { color: var(--color-primary); font-weight: 600; font-size: 1.1rem; }
.contact-info-item a:hover { color: var(--color-accent); }
.contact-info-item p { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: 4px; }
.map-container {
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md); height: 350px;
}
.map-container iframe { width: 100%; height: 100%; border: none; }

/* --- Page Intro Text --- */
.page-intro { max-width: 700px; margin-bottom: 48px; }
.page-intro p { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.8; }

/* --- Commercial Services Categories --- */
.commercial-category { margin-bottom: 32px; }
.commercial-category h3 { margin-bottom: 12px; color: var(--color-accent-cta); }
.commercial-category ul { color: var(--color-text-muted); }

/* ============================================
   Responsive Design
   ============================================ */

/* ============================================
   Quote Wizard - Multi-Step Form
   ============================================ */

.quote-wizard-section {
  padding: 60px 0 80px;
  background: var(--color-bg);
}

/* --- Trust Bar --- */
.qw-trust-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.qw-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}
.qw-trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* --- Progress Bar --- */
.qw-progress {
  max-width: 560px;
  margin: 0 auto 40px;
}
.qw-progress__track {
  height: 4px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.qw-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.qw-progress__steps {
  display: flex;
  justify-content: space-between;
}
.qw-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  transition: all 0.3s ease;
}
.qw-progress__step.active,
.qw-progress__step.completed {
  opacity: 1;
}
.qw-progress__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}
.qw-progress__step.active .qw-progress__dot {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(201, 169, 110, 0.35);
  transform: scale(1.1);
}
.qw-progress__step.completed .qw-progress__dot {
  background: var(--color-primary);
  color: var(--color-white);
}
.qw-progress__step span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qw-progress__step.active span {
  color: var(--color-primary);
}

/* --- Wizard Card --- */
.qw-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  padding: 48px;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

/* --- Steps --- */
.qw-step {
  display: none;
}
.qw-step.active {
  display: block;
  animation: qwFadeIn 0.3s ease;
}

@keyframes qwFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.qw-step__header {
  text-align: center;
  margin-bottom: 32px;
}
.qw-step__header h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.qw-step__header p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.qw-step__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* --- Transaction Type Cards --- */
.qw-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.qw-type-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: var(--color-white);
}
.qw-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.qw-type-card:hover {
  border-color: var(--color-accent-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.qw-type-card.selected {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(29, 168, 238, 0.06) 0%, rgba(29, 168, 238, 0.02) 100%);
  box-shadow: 0 4px 20px rgba(29, 168, 238, 0.15);
}
.qw-type-card.selected::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qw-type-card.selected::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 20px;
  width: 7px;
  height: 11px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg);
  z-index: 1;
}
.qw-type-card__icon {
  font-size: 2rem;
  margin-bottom: 8px;
}
.qw-type-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.qw-type-card__desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* --- Form Fields (wizard specific) --- */
.qw-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.qw-price-input {
  position: relative;
}
.qw-price-prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
}
.qw-price-input input {
  padding-left: 32px !important;
  font-size: 1.1rem !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* --- Toggle Switches --- */
.qw-toggle-group {
  display: flex;
  gap: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qw-toggle {
  flex: 1;
  cursor: pointer;
  position: relative;
}
.qw-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.qw-toggle__label {
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  background: var(--color-white);
  transition: all 0.25s ease;
}
.qw-toggle input:checked + .qw-toggle__label {
  background: var(--color-primary);
  color: var(--color-white);
}
.qw-toggle:first-child .qw-toggle__label {
  border-right: 1px solid var(--color-border);
}

/* --- Checkboxes --- */
.qw-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.qw-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  background: var(--color-white);
}
.qw-checkbox:hover {
  border-color: var(--color-accent-light);
  background: var(--color-bg);
}
.qw-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.qw-checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
}
.qw-checkbox input:checked ~ .qw-checkbox__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.qw-checkbox input:checked ~ .qw-checkbox__box::after {
  content: "";
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg) translateY(-1px);
}
.qw-checkbox input:checked ~ span:last-child {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Validation --- */
.qw-invalid {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1) !important;
}

@keyframes qwShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.qw-shake {
  animation: qwShake 0.4s ease;
}

/* --- Review Section --- */
.qw-review {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qw-review__section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}
.qw-review__section:last-child {
  border-bottom: none;
}
.qw-review__section h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-weight: 700;
}
.qw-review__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
}
.qw-review__row span {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.qw-review__row strong {
  font-size: 0.9rem;
  color: var(--color-primary);
  text-align: right;
  max-width: 60%;
}

.qw-consent {
  margin-top: 20px;
  padding: 16px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.qw-consent p { margin: 0; }

/* --- Success State --- */
.qw-success {
  text-align: center;
  padding: 40px 20px;
  animation: qwFadeIn 0.5s ease;
}
.qw-success__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-success), #2ecc71);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
}
.qw-success h2 {
  margin-bottom: 8px;
}
.qw-success__subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}
.qw-success__ref {
  display: inline-block;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 20px;
}
.qw-success__ref strong {
  color: var(--color-accent);
  font-size: 1.15rem;
  margin-left: 4px;
}
.qw-success p {
  color: var(--color-text-muted);
  max-width: none;
  margin: 0 auto 24px;
}
.qw-success__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Error State --- */
.qw-error {
  text-align: center;
  padding: 40px 20px;
  animation: qwFadeIn 0.5s ease;
}
.qw-error__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 16px;
}
.qw-error h3 {
  margin-bottom: 8px;
}
.qw-error p {
  color: var(--color-text-muted);
  max-width: 400px;
  margin: 0 auto;
}

/* --- Spinner --- */
.qw-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: qwSpin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes qwSpin {
  to { transform: rotate(360deg); }
}

/* --- Responsive --- */

/* ============================================
   Concept E2 - Embedded Quote Iteration
   ============================================ */

.hero--quote .hero__bg {
  opacity: 1;
  filter: saturate(1.02) contrast(0.98) brightness(1.06);
}
.hero--quote .hero__overlay {
  background: linear-gradient(105deg,
    rgba(238,248,253,0.99) 0%,
    rgba(238,248,253,0.96) 36%,
    rgba(238,248,253,0.82) 58%,
    rgba(238,248,253,0.34) 100%);
}
.motion-trust-strip__inner {
  grid-template-columns: repeat(3, 1fr);
}

.homepage-quote-section {
  padding: 96px 0;
  scroll-margin-top: 120px;
}
.homepage-quote-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}
.homepage-quote-intro {
  position: static;
  padding-top: 0;
}
.homepage-quote-intro h2 {
  margin-bottom: 0;
  color: var(--color-text);
  
}
.home-quote-card .qw-type-card__title,
.home-quote-card .qw-type-card__desc {
  display: block;
}
.home-quote-fields .form-field {
  min-width: 0;
}
.home-quote-fields .form-field--full {
  grid-column: 1 / -1;
}
.home-quote-fields label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-primary);
  font-weight: 800;
}
.home-quote-fields input,
.home-quote-fields textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid rgba(3,11,54,0.14);
  border-radius: 18px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.home-quote-fields input:focus,
.home-quote-fields textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(29,168,238,0.12);
}
.home-quote-fields textarea {
  resize: vertical;
}
.home-quote-card .qw-toggle-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.home-quote-card .qw-toggle {
  min-width: 0;
}
.home-quote-card .qw-toggle__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 15px 18px;
  border: 1.5px solid rgba(7, 28, 99, 0.14);
  border-radius: 16px;
  line-height: 1.18;
  background: #fafaf8;
  cursor: pointer;
}
.home-quote-card .qw-toggle:hover .qw-toggle__label {
  border-color: var(--color-accent);
  background: #eff8fc;
}
.home-quote-card .qw-toggle:focus-within .qw-toggle__label {
  outline: 3px solid rgba(32, 168, 232, 0.2);
  outline-offset: 2px;
}
.home-quote-card .qw-toggle input:checked + .qw-toggle__label {
  border-color: var(--color-primary);
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-white);
}

/* Purchase details are multi-select, but visually match the radio-card choices. */
.home-quote-card .qw-purchase-flags .qw-checkbox {
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1.5px solid rgba(7, 28, 99, 0.14);
  border-radius: 16px;
  background: #fafaf8;
  text-align: center;
  line-height: 1.18;
}
.home-quote-card .qw-purchase-flags .qw-checkbox__box {
  display: none;
}
.home-quote-card .qw-purchase-flags .qw-checkbox:hover {
  border-color: var(--color-accent);
  background: #eff8fc;
}
.home-quote-card .qw-purchase-flags .qw-checkbox:focus-within {
  outline: 3px solid rgba(32, 168, 232, 0.2);
  outline-offset: 2px;
}
.home-quote-card .qw-purchase-flags .qw-checkbox:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}
.home-quote-card .qw-purchase-flags .qw-checkbox:has(input:checked) > span:last-child {
  color: var(--color-white);
}
.qw-radio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.qw-radio-grid .qw-checkbox {
  min-height: 58px;
}

/* --- Concept E4: premium split hero --- */
.hero--quote {
  min-height: 720px;
  padding-top: 160px;
  padding-bottom: 84px;
  background:
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 48%, var(--color-white) 100%);
}
.hero--quote .hero__bg,
.hero--quote .hero__overlay {
  display: none;
}
.hero--quote > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(400px, 1fr);
  gap: clamp(56px, 6vw, 96px);
  align-items: center;
}
.hero--quote .hero__content {
  max-width: 600px;
}
.hero--quote h1 {
  color: var(--color-primary);
  font-size: clamp(3.25rem, 5.35vw, 4.85rem);
  line-height: 1.04;
  font-weight: 720;
  letter-spacing: 0;
}
.hero--quote .hero__subtitle {
  max-width: 610px;
  color: #28445a;
  font-size: 1.18rem;
}
.btn--hero-quote {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 18px 36px rgba(29, 168, 238, 0.25);
}
.hero__media {
  position: relative;
}
.hero__media::before {
  content: "";
  position: absolute;
  inset: -28px -28px auto auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 42px;
  background: #d6effd;
  z-index: 0;
}
.hero__media-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(7, 28, 99, 0.18);
}
.hero__media-card img {
  width: 100%;
  aspect-ratio: 1.08 / 1;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
}
.hero__proof-chip {
  position: absolute;
  z-index: 2;
  left: -28px;
  bottom: 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  max-width: 270px;
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 22px 48px rgba(7, 28, 99, 0.16);
}
.hero__proof-chip span {
  font-size: 2.4rem;
  font-weight: 780;
  color: #1da8ee;
  line-height: 1;
}
.hero__proof-chip strong {
  font-size: 0.95rem;
  line-height: 1.3;
}
.personal-touch-section--intro {
  color: var(--color-primary);
}
.personal-touch-section--intro .section-label {
  color: var(--color-primary);
}
.personal-touch-section--intro .personal-touch-heading h2,
.personal-touch-section--intro .personal-touch-heading p {
  color: var(--color-primary);
}
.personal-touch-section--intro .personal-touch-heading p {
  color: var(--color-text-muted);
  opacity: 1;
}
.feature-card-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.personal-touch-section .bold-feature-card {
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 280px;
  padding: 30px 28px 26px;
  border-bottom: 4px solid var(--color-accent);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-primary);
  text-align: left;
  box-shadow: 0 20px 44px rgba(7, 28, 99, 0.10);
}
.personal-touch-section .bold-feature-card__icon {
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  margin-left: 0;
  margin-right: 0;
  color: var(--color-accent);
  background: none;
}
.personal-touch-section .bold-feature-card__icon .icon { width: 54px; height: 54px; }
.personal-touch-section .bold-feature-card h2,
.bold-feature-card h3 {
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 1.22rem;
  line-height: 1.18;
  text-align: left;
}
.personal-touch-section .bold-feature-card p {
  max-width: none;
  margin: 0;
  text-align: left;
  color: #28445a;
  line-height: 1.66;
}

.home-quote-card .qw-checkbox {
  min-height: 50px;
  border-radius: 16px;
  background: var(--color-bg);
}

.personal-touch-section {
  padding: 88px 0 96px;
}
.personal-touch-section--intro {
  padding-top: 84px;
  position: relative;
  overflow: hidden;
}
.personal-touch-section--intro > .container { position: relative; z-index: 1; }
.personal-touch-heading {
  margin-bottom: 40px;
}
.personal-touch-heading .section-label {
  /* True brand cyan, same accepted trade-off as the quote section's eyebrow -
     only 2.66:1 against this near-white background, below 4.5:1 AA. Small
     decorative eyebrow directly above an unambiguous heading; do not reuse
     this colour for anything contrast-sensitive. */
  color: var(--color-accent);
}
.personal-touch-heading h2 {
  max-width: none;
  white-space: nowrap;
  margin: 0 auto;
}
.personal-touch-heading p {
  max-width: 980px;
  margin: 18px auto 0;
  color: var(--color-text);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
}

.journey-section {
  padding: 84px 0;
}
.journey-layout {
  display: block;
}
.journey-layout__intro {
  position: static;
  max-width: 780px;
  margin: 0 auto 32px;
  text-align: center;
}
.journey-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-left: 0;
}
.journey-rail__line {
  top: 32px;
  left: 56px;
  right: 56px;
  bottom: auto;
  width: auto;
  height: 2px;
  transform-origin: left;
  background: linear-gradient(90deg, var(--color-accent), rgba(29,168,238,0.12));
}
.journey-step {
  grid-template-columns: 1fr;
  min-height: 236px;
  padding: 28px 24px;
}
.journey-step::before {
  left: 32px;
  top: 27px;
}
.journey-step__number {
  margin-bottom: 24px;
}
.journey-step h3,
.journey-step p {
  grid-column: 1;
}

/* --- Skip link (keyboard accessibility) --- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  background: var(--color-primary); color: var(--color-white);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================
   Tonal rhythm - one continuous light gradient runs
   from the top of the page down to the dark CTA block.
   .gradient-zone wraps hero -> services-section; the CTA
   keeps its own solid dark background below it.
   ============================================ */

.gradient-zone {
  background: linear-gradient(180deg, var(--color-border) 0%, var(--color-bg) 100%);
}

.hero--quote {
  background: transparent;
  color: var(--color-text);
}
.hero--quote .hero__content h1,
.hero--quote h1 { color: var(--color-primary); }
.hero--quote .hero-title__line--accent { color: var(--color-accent); }
.hero--quote .hero__subtitle { color: var(--color-text); }
.hero--quote .hero__label { color: var(--color-accent-cta); opacity: 1; }

/* Media card shadow still reads as depth on a light ground */
/* Transparent illustration — remove photo-card framing */
.hero--quote .hero__media-card {
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.hero--quote .hero__media-card img {
  object-fit: contain;
  filter: none;
  transform: scale(1.19) translateY(5%) translateX(5%);
}
.hero--quote .hero__media::before {
  display: none;
}

/* Phone link and secondary action back to standard link colour */
.hero--quote .hero__phone-link,
.hero--quote .hero__actions a:not(.btn) { color: var(--color-primary); }

/* CTA banner — cyan */
.quote-cta-section {
  background: var(--color-accent);
}

/* --- Per-section gradients — visual rhythm instead of one flat wash --- */
.gradient-zone {
  background: linear-gradient(180deg, var(--color-border) 0%, var(--color-bg-alt) 12%, var(--color-bg) 30%, var(--color-bg) 100%);
}

/* Quote section: transparent — inherits warm white from gradient-zone--quote */
.homepage-quote-section {
  background: transparent;
}

/* Personal touch: transparent — inherits from hero gradient-zone */
.personal-touch-section {
  background: transparent;
}

/* Second gradient zone: starts at quote section */
.gradient-zone--quote {
  background: #FCFBF8;
}

/* Journey / process: subtle warm-to-cool horizontal shift */
.journey-section {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(214,239,253,0.35) 0%, transparent 50%),
    linear-gradient(140deg, var(--color-bg) 0%, var(--color-bg-alt) 45%, var(--color-bg-alt) 100%);
}

/* Services: light ice-white with a centred radial glow */
.services-section {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(214,239,253,0.4) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 50%, var(--color-white) 100%);
}

/* --- Header CTA cluster --- */
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__quote { white-space: nowrap; }
.header__quote .icon { width: 1em; height: 1em; margin-left: 6px; }

/* --- Accent: brighter, more deliberate use of brand blue --- */
.btn--primary {
  background: var(--color-accent);
  box-shadow: 0 4px 14px rgba(29, 168, 238, 0.28);
}
.btn--primary:hover {
  background: var(--color-accent-cta);
  box-shadow: 0 8px 22px rgba(18, 121, 176, 0.34);
}
/* Section eyebrows and card icons carry the accent */
.section-label { color: var(--color-accent); }
.bold-feature-card__icon { color: var(--color-accent); }
.service-card .icon-circle,
.journey-step__number { background: var(--color-accent); color: var(--color-white); }
.homepage-quote-benefits .icon { color: var(--color-accent); }
.google-proof-link { color: var(--color-accent-cta); }

/* --- Contrast corrections: accent is decorative, not body text --- */
/* Nav reads navy on the white header (also matches the reference) */
.nav__link { color: var(--color-primary); }
.nav__link:hover,
.nav__link--active { color: var(--color-accent-cta); }

/* Eyebrows: deep accent on light ground, bright accent on dark.
   The Google Reviews eyebrow lives inside .hero--quote but sits on the
   white review shell, not the dark ground, so it keeps the deep accent -
   .hero--quote is deliberately not in this list. */
.section-label { color: var(--color-accent-cta); }
.quote-cta-section .section-label,
.section--ink .section-label { color: var(--color-accent); }

/* Inline links on tinted panels */
.google-proof-link { color: var(--color-accent-cta); }

/* Footer links: navy body, accent on hover */
.footer a { color: var(--color-text); }
.footer a:hover { color: var(--color-accent-cta); }

/* ============================================
   RESPONSIVE
   All breakpoints live at the end so they always
   win over the component rules above.
   ============================================ */

@media (max-width: 1180px) {
  .hero--quote > .container {
    grid-template-columns: 1fr;
  }
  .hero__media {
    max-width: 680px;
  }
  .feature-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .homepage-quote-intro {
    max-width: 760px;
  }
  .home-quote-card .qw-type-grid,
  .journey-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journey-rail__line {
    display: none;
  }
  .journey-step::before {
    display: none;
  }
}

@media (max-width: 1180px) {
  .header__cta { gap: 12px; }
}

@media (max-width: 1024px) {
  .header { top: 10px; width: calc(100% - 24px); }
  .header .container { padding: 12px 18px; }
  .header__logo img, .header__logo svg { height: 50px; }
  .nav__link { padding: 8px 10px; font-size: 0.82rem; }
  .hero--quote { min-height: 640px; padding-top: 132px; }
  .hero--quote h1 { font-size: clamp(2.6rem, 8vw, 4.2rem); }
  .feature-card-row { grid-template-columns: 1fr; }
  .bold-feature-card { min-height: 260px; }
  .bold-feature-card__icon { margin-bottom: 26px; }
  .quote-simulator-layout { grid-template-columns: 1fr; }
  .quote-simulator-card { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .motion-trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .journey-layout { grid-template-columns: 1fr; gap: 34px; }
  .journey-layout__intro { position: static; max-width: 680px; }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .review-carousel { grid-template-columns: repeat(2, 1fr); }
  .google-proof-shell { grid-template-columns: 1fr; }
  .google-proof-summary { max-width: 760px; }
  .google-proof-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-testimonials-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .page-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .quote-layout { grid-template-columns: 1fr; }
  .quote-cta-inner { flex-direction: column; text-align: center; }
  .quote-cta-text p { margin: 0 auto 0; }
}

@media (max-width: 768px) {
  .header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    transform: none;
    border-radius: 0;
  }
  .header .container { padding: 10px 18px; }
  .header__logo img, .header__logo svg { height: 46px; }
  .hero--quote {
    min-height: auto;
    padding: 86px 0 116px;
  }
  .hero--quote .hero__content { max-width: 620px; }
  .hero--quote h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .quote-mode-toggle {
    grid-template-columns: 1fr;
    width: 100%;
    border-radius: 18px;
  }
  .quote-mode-toggle button { width: 100%; }
  .feature-cards { margin-top: 0; padding-top: 48px; }
  .quote-simulator-card__form { grid-template-columns: 1fr; }
  .quote-simulator-card__form label,
  .quote-simulator-card__form select { grid-row: auto; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-row div { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .section { padding: 56px 0; }
  .hero { padding: 80px 0 60px; min-height: 360px; }
  .hero--home { padding: 80px 0 60px; min-height: 400px; }

  .top-bar__left { display: none; }

  .nav { 
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-white);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 8px; z-index: 1000; padding: 20px;
  }
  .nav.active { display: flex; }
  .nav__link { font-size: 1.1rem; padding: 12px 24px; }
  .nav__dropdown-menu {
    position: static; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    padding-left: 16px;
  }
  .nav-toggle { display: block; }
  .header__cta .btn { display: none; }

  .services-grid { grid-template-columns: 1fr; }
  .services-section { padding-top: 72px; }
  .motion-trust-strip { margin-top: 0; }
  .motion-trust-strip__inner { grid-template-columns: 1fr; border-radius: 0; }
  .motion-trust-strip .container { padding: 0; }
  .journey-section { padding: 58px 0; }
  .journey-rail { padding-left: 22px; }
  .journey-step { grid-template-columns: 1fr; row-gap: 14px; padding: 22px; }
  .journey-step h3,
  .journey-step p { grid-column: auto; }
  .journey-step::before { left: -23px; }
  .usp-grid { grid-template-columns: 1fr; }
  .review-carousel { grid-template-columns: 1fr; }
  .google-proof-shell {
    padding: 20px;
    border-radius: 18px;
  }
  .google-proof-reviews { grid-template-columns: 1fr; }
  .google-proof-card { min-height: auto; }
  .google-proof-score { width: 100%; }
  .trustindex-badge { margin-left: 0; }
  .video-testimonials-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .quote-cta-section { padding: 48px 0; }
  .quote-cta-actions { justify-content: center; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .quote-layout { grid-template-columns: 1fr; }
  .quote-or { display: none; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .qw-card {
    padding: 28px 20px;
    border-radius: var(--radius-md);
  }
  .qw-type-grid {
    grid-template-columns: 1fr;
  }
  .qw-fields {
    grid-template-columns: 1fr;
  }
  .qw-checkbox-grid {
    grid-template-columns: 1fr;
  }
  .qw-trust-bar {
    gap: 16px;
  }
  .qw-trust-item {
    font-size: 0.8rem;
  }
  .qw-step__header h2 {
    font-size: 1.3rem;
  }
  .qw-step__footer {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .qw-step__footer .btn {
    width: 100%;
    justify-content: center;
  }
  .qw-progress__step span {
    font-size: 0.65rem;
  }
  .qw-review__row {
    flex-direction: column;
    gap: 2px;
  }
  .qw-review__row strong {
    text-align: left;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero--quote {
    padding: 84px 0 58px;
  }
  .hero--quote h1 {
    font-size: clamp(2.9rem, 14vw, 4rem);
  }
  .hero__media {
    display: none;
  }
  .feature-card-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .homepage-quote-section,
  .personal-touch-section {
    padding: 64px 0;
  }
  .homepage-quote-panel {
    margin-left: -4px;
    margin-right: -4px;
    padding: 14px;
    border-radius: 24px;
  }


  .homepage-quote-layout {
    grid-template-columns: 1fr;
    padding-right: clamp(28px, 3.4vw, 52px);
    overflow: hidden;
  }
  .home-quote-card.qw-card {
    min-height: auto;
    padding: 24px 18px;
    border-radius: 20px;
  }
  .home-quote-card .qw-type-grid,
  .home-quote-card .qw-toggle-group,
  .qw-radio-grid,
  .journey-rail,
  .motion-trust-strip__inner {
    grid-template-columns: 1fr;
  }
  .homepage-quote-panel .qw-progress__steps {
    gap: 8px;
  }
  .homepage-quote-panel .qw-progress__step span:last-child {
    display: none;
  }
  .journey-step {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .header__cta { display: none; }
  .header .container { grid-template-columns: auto 1fr; }
  .nav-toggle {
    justify-self: end;
    width: 44px; height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  }
}

@media (max-width: 480px) {
  .qw-trust-bar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}


/* Hero grid must be able to shrink below its content's min-width */
@media (max-width: 768px) {
  .hero--quote > .container { grid-template-columns: minmax(0, 1fr); }
  .hero--quote .hero__content { max-width: 100%; min-width: 0; }
  .hero--quote h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); overflow-wrap: break-word; }
}

/* ============================================
   Quote section - reference layout
   Pale panel, intro column left, white wizard card right.
   ============================================ */

.homepage-quote-section { padding: 88px 0; }

.homepage-quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: 22px;
  background: var(--color-bg);
  position: relative;
  overflow: visible;
}

/* Side illustration — sits on the far right, full colour */
.homepage-quote-side-illustration {
  position: absolute;
  right: -260px;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  z-index: 2;
  pointer-events: none;
}
.homepage-quote-side-illustration img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1500px) {
  .homepage-quote-side-illustration { right: -200px; width: 200px; }
}
@media (max-width: 1300px) {
  .homepage-quote-side-illustration { display: none; }
}




/* --- Left: intro column --- */
.homepage-quote-intro {
  position: relative; z-index: 1; padding-top: clamp(12px, 2vw, 24px);
  display: flex; flex-direction: column; }
.homepage-quote-intro .section-label {
  display: block; margin-bottom: 14px;
  /* True brand cyan, per explicit request - only reaches 2.45:1 against this
     panel's lightest gradient stop, below the 4.5:1 AA text minimum. Accepted
     deliberately for this small decorative eyebrow; do not reuse this colour
     for body text or anything contrast-sensitive elsewhere. */
  color: var(--color-accent);
}
.homepage-quote-intro h2 {
  margin: 0 0 18px;
  
  
  color: var(--color-primary);
}

.homepage-quote-benefits { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.homepage-quote-benefits li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.97rem; font-weight: 500; color: var(--color-text);
}
.quote-benefit__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 30px; color: var(--color-accent);
}
.quote-benefit__icon .icon { width: 30px; height: 30px; }

/* Quote illustration below benefits */
.homepage-quote-illustration {
  margin-top: auto; margin-left: -30%; margin-bottom: -10%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.homepage-quote-illustration img {
  width: 105%;
  max-width: none;
  height: auto;
  display: block;
}

.homepage-quote-callout {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 14px 20px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(7, 28, 99, 0.08);
  text-decoration: none;
}
.homepage-quote-callout span { font-size: 0.78rem; color: var(--color-text-muted); }
.homepage-quote-callout strong { font-size: 1.15rem; color: var(--color-primary); }
.homepage-quote-callout:hover { background: var(--color-white); }

/* --- Right: wizard card --- */
.homepage-quote-panel { min-width: 0; position: relative; z-index: 1; }
.home-quote-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 38px);
  box-shadow:
    0 2px 6px rgba(3, 11, 54, 0.04),
    0 22px 54px rgba(3, 11, 54, 0.11);
  border: 1px solid rgba(3, 11, 54, 0.04);
}

/* --- Step rail: numbered circles on a connector line --- */
.homepage-quote-panel .qw-progress { margin-bottom: 30px; }

.homepage-quote-panel .qw-progress__track { display: none; }
.homepage-quote-panel .qw-progress__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.homepage-quote-panel .qw-progress__steps::before {
  display: none;
}
.homepage-quote-panel .qw-progress__step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center;
  font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted);
}
.homepage-quote-panel .qw-progress__dot {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem; font-weight: 700;
  transition: all var(--transition);
}

/* --- Step content --- */
.home-quote-card .qw-step__header { margin-bottom: 22px; }
.home-quote-card .qw-step__header h2 {
  margin: 0 0 6px; font-size: 1.32rem; color: var(--color-primary);
}
.home-quote-card .qw-step__header p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }

.form-field__legend {
  display: block; margin-bottom: 9px;
  font-size: 0.88rem; font-weight: 600; color: var(--color-text);
}

/* Transaction type as reference-style pills */
.qw-type-grid--pills {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.qw-type-grid--pills .qw-type-card {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 120px; padding: 20px 12px;
  border: 1.5px solid var(--color-border); border-radius: 12px;
  background: var(--color-white);
  cursor: pointer; text-align: center;
  transition: all var(--transition);
}
.qw-type-grid--pills .qw-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.qw-type-card__icon {
  width: 32px; height: 32px;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.qw-type-grid--pills .qw-type-card__title {
  font-size: 0.92rem; font-weight: 700; color: var(--color-primary);
}
.qw-type-card__sub {
  font-size: 0.76rem; color: var(--color-text-muted); font-weight: 400;
}
.qw-type-grid--pills .qw-type-card:hover { border-color: var(--color-accent); }
.qw-type-grid--pills .qw-type-card.selected,
.qw-type-grid--pills .qw-type-card:has(input:checked) {
  border-color: var(--color-accent-cta);
  background: rgba(29, 168, 238, 0.09);
}
.qw-type-grid--pills .qw-type-card.selected .qw-type-card__title,
.qw-type-grid--pills .qw-type-card:has(input:checked) .qw-type-card__title {
  color: var(--color-accent-cta);
}
.qw-type-grid--pills .qw-type-card:focus-within {
  outline: 2px solid var(--color-accent-cta); outline-offset: 2px;
}
/* The selected-state checkmark badge (.qw-type-card.selected::after/::before)
   was sized for the old, much taller icon+title+description card
   (24px badge, inset 12px). On a 44px-tall pill that badge covered the
   label text. Resized and moved to sit on the corner, like a notification
   badge, instead of inside the pill. */
.qw-type-grid--pills .qw-type-card.selected::after {
  top: -7px; right: -7px;
  width: 18px; height: 18px;
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 4px rgba(3, 11, 54, 0.25);
}
.qw-type-grid--pills .qw-type-card.selected::before {
  top: -3px; right: 1px;
  width: 5px; height: 8px;
}

/* Footer: Next Step sits bottom right as in the reference */
.home-quote-card .qw-step__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 26px;
}
.home-quote-card .qw-btn-next .icon { width: 1em; height: 1em; margin-left: 7px; }

@media (max-width: 980px) {
  .homepage-quote-layout { grid-template-columns: minmax(0, 1fr); }
  .homepage-quote-illustration { display: none; }
}
@media (max-width: 620px) {
  .homepage-quote-panel .qw-progress__step { font-size: 0.62rem; }
  .homepage-quote-panel .qw-progress__dot { width: 28px; height: 28px; font-size: 0.75rem; }
  .homepage-quote-panel .qw-progress__steps::before { top: 14px; }
  .qw-type-grid--pills { grid-template-columns: repeat(2, 1fr); }
}

/* Quote card: match the .home-quote-card.qw-card specificity that sets 28px */
.home-quote-card.qw-card {
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 38px);
  box-shadow: 0 22px 54px rgba(3, 11, 54, 0.10);
}
@media (max-width: 768px) {
  .home-quote-card.qw-card { border-radius: 14px; }
}

/* Quote section aligns with the header width, as in the reference */
.homepage-quote-section > .container {
  width: min(1320px, 100%);
  max-width: none;
}

/* ============================================
   Quote rail state - single source of truth.
   Must sit after every base .qw-progress rule.
   ============================================ */
.homepage-quote-panel .qw-progress__step.active,
.homepage-quote-panel .qw-progress__step.completed { color: var(--color-primary); }

/* Keep future dots opaque so their white fill masks the progress line. */
.homepage-quote-panel .qw-progress__step { opacity: 1; }

.homepage-quote-panel .qw-progress__step.active > .qw-progress__dot,
.homepage-quote-panel .qw-progress__step.completed > .qw-progress__dot {
  background: var(--color-accent-cta) !important;
  border-color: var(--color-accent-cta) !important;
  color: var(--color-white);
  box-shadow: none;
  transform: none;
}

@media (max-width: 620px) {
  .homepage-quote-layout { padding: 18px 14px; border-radius: 16px; }
  .homepage-quote-section > .container { padding-left: 14px; padding-right: 14px; }
  .home-quote-card.qw-card { padding: 20px 16px; }
}

/* ============================================
   Stage 6 - reference alignment
   ============================================ */

/* --- Hero headline: one line per span, accent on the last --- */
.hero-title { display: block; }
.hero-title__line { display: block; }
.hero-title__line--accent { color: var(--color-accent); }

/* --- How We Work: six-step process row --- */
.journey-heading { max-width: 760px; margin: 0 auto 52px; }
.journey-heading h2 { margin-bottom: 14px; }

.journey-section .journey-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  padding-left: 0;
  position: relative;
}

/* connector line runs behind the icons */
.journey-section .journey-rail__line {
  position: absolute;
  top: 34px;
  left: 8.33%;
  right: 8.33%;
  bottom: auto;
  width: auto;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--color-border) 0 6px, transparent 6px 12px);
  transform: none;
  z-index: 0;
}

.journey-section .journey-step {
  position: relative;
  z-index: 1;
  display: block;
  grid-template-columns: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.journey-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 26px rgba(3, 11, 54, 0.07);
  color: var(--color-accent-cta);
}
.journey-step__icon .icon { width: 1.6em; height: 1.6em; }

.journey-section .journey-step__number {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-cta);
}
.journey-section .journey-step h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--color-primary);
}
.journey-section .journey-step p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 1100px) {
  .journey-section .journey-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .journey-section .journey-rail__line { display: none; }
}
@media (max-width: 640px) {
  .journey-section .journey-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; gap: 16px; }
  .journey-step__icon { width: 56px; height: 56px; margin-bottom: 12px; }
}

/* --- Homepage sections share the header width (1320px).
       Inner pages keep the narrower 1140px measure for prose. --- */
.personal-touch-section > .container,
.journey-section > .container,
.services-section > .container,
.quote-cta-section > .container,
.testimonials-section > .container {
  width: min(1320px, 100%);
  max-width: none;
}

/* --- Contrast: accent used as text or as a fill behind white text --- */
/* Large rating figure - deep accent clears AA-large comfortably */
.google-proof-score strong { color: var(--color-accent-cta); }

/* Review avatars carry white initials, so the fill must be dark enough */
.google-proof-card__avatar--blue { background: var(--color-accent-cta); }
.google-proof-card__avatar--green { background: #17694a; }

/* Google gold is the brand rating colour; give the stars a darker tone
   on light ground so the rating is legible, not just decorative */
.google-proof-stars { color: #b07d00; }

/* --- Contrast round 2 --- */
/* In the six-step process the number is a plain label, not a filled chip.
   The accent pass had given it a blue fill, leaving blue text on blue. */
.journey-section .journey-step__number {
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--color-accent-cta);
}

/* Rating stars must be legible, not just decorative */
.google-proof-stars { color: #8f6500; }

/* The callout anchor inherited white; its children set their own colours,
   but the anchor itself must not be invisible text on a light panel */
.homepage-quote-callout { color: var(--color-text); }

/* Testimonial avatar + link */

/* --- Contrast round 3: accent text on tinted grounds --- */
/* #1279b0 clears 4.5 on white but only 4.37 on the pale blue sections */
.journey-section .journey-step__number,
.quote-section__label,
.faq-item__icon { color: var(--color-accent-cta); }

/* Large rating figure on the testimonials page */
.google-rating__score { color: var(--color-accent-cta); }

/* Inner-page heroes use a dark overlay, so the eyebrow must be light.
   It was navy at 0.7 opacity on dark navy - effectively invisible. */
.hero:not(.hero--home) .hero__label {
  color: var(--color-accent);
  opacity: 1;
}

/* --- FAQs page --- */
.faq-jump {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 auto 48px; max-width: 900px; justify-content: center;
}
.faq-jump a {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-white);
  font-size: 0.86rem; font-weight: 600; color: var(--color-primary); text-decoration: none;
  transition: all var(--transition);
}
.faq-jump a:hover { border-color: var(--color-accent-cta); color: var(--color-accent-cta); }

.faq-group { max-width: 900px; margin: 0 auto 52px; scroll-margin-top: 130px; }
.faq-group h2 { margin-bottom: 20px; font-size: 1.5rem; color: var(--color-primary); }

/* --- Why CPL page --- */
.why-cpl-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.personal-touch-lead {
  max-width: 780px; margin: 0 auto 14px;
  font-size: 1.08rem; font-weight: 500; color: var(--color-primary);
}

/* ============================================
   Stage 8 - reviews merged into the hero
   The Google reviews band now lives inside .hero--quote's own
   container as a third grid row, instead of a separate section
   below it. Same dark background runs through with no seam;
   the white shell pops directly against it.
   ============================================ */

.hero-google-proof {
  grid-column: 1 / -1;
  margin-top: 40px;
}

.hero-google-proof .google-proof-shell {
  background: var(--color-white);
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* The hero needs more room at the bottom now it holds the reviews too */
.hero--quote { padding-bottom: clamp(48px, 5vw, 72px); }

@media (max-width: 768px) {
  .hero-google-proof { margin-top: 16px; }
}

/* --- Step 2: one or two property blocks --- */
.qw-property-block + .qw-property-block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--color-border);
}
.qw-property-block__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-cta);
}

@media (max-width: 720px) {
  .personal-touch-heading h2 { white-space: normal; }
}

/* ============================================
   Postcode Lookup
   ============================================ */
.qw-postcode-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.qw-postcode-row .qw-postcode-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  text-transform: uppercase;
  background: var(--color-bg);
}
.qw-postcode-row .qw-postcode-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(29,168,238,0.12);
}
.qw-postcode-btn {
  white-space: nowrap;
  font-size: 0.88rem !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
}
.qw-address-dropdown {
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(3,11,54,0.08);
}
.qw-address-dropdown__count {
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.qw-address-dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--color-text);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(213,230,240,0.4);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  transition: background 0.15s;
}
.qw-address-dropdown__item:last-child { border-bottom: none; }
.qw-address-dropdown__item:hover {
  background: rgba(29,168,238,0.05);
}
.qw-address-dropdown__error {
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--color-error);
}
.qw-manual-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-accent-cta);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qw-manual-toggle:hover { color: var(--color-accent); }
.qw-selected-address {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qw-selected-address__change {
  background: none;
  border: none;
  color: var(--color-accent-cta);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.qw-postcode-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ============================================
   Dedicated Solicitor Section
   ============================================ */
.dedicated-solicitor-section {
  background: var(--color-bg);
  padding: clamp(60px, 8vw, 100px) 0;
}
.dedicated-solicitor__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.dedicated-solicitor__image img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}
.dedicated-solicitor__content .section-label {
  margin-bottom: 12px;
}
.dedicated-solicitor__content h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--color-primary);
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 20px;
}
.dedicated-solicitor__lead {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: none;
}
.dedicated-solicitor__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dedicated-solicitor__checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 500;
}
.dedicated-solicitor__checklist .icon {
  width: 22px;
  height: 22px;
  color: var(--color-coral);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .dedicated-solicitor__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .dedicated-solicitor__image img {
    margin: 0 auto;
  }
  .dedicated-solicitor__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .dedicated-solicitor__checklist {
    align-items: center;
  }
}

/* ============================================
   Journey V2 — Card-Based Process Section
   ============================================ */
.journey-v2 {
  background: var(--color-bg);
  padding: clamp(60px, 8vw, 100px) 0;
  overflow: hidden;
}
.journey-v2__heading {
  margin-bottom: clamp(48px, 6vw, 72px);
}
.journey-v2__heading h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
}
.journey-v2__heading p {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Rail — horizontal strip holding cards + connector */
.journey-v2__rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  align-items: end;
  position: relative;
}

/* Connector removed */

/* Step cards — arch/tombstone shape */
.journey-v2__card {
  text-align: center;
  padding: 24px 14px 28px;
  border-radius: 80px 80px 16px 16px;
  position: relative;
  z-index: 2;
  margin: 0 6px;
}
.journey-v2__card--coral {
  background: var(--color-coral-soft);
}
.journey-v2__card--sand {
  background: rgba(222, 216, 207, 0.3);
}
.journey-v2__card--sage {
  background: var(--color-coral-soft);
}

/* Number */
.journey-v2__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  color: var(--color-coral);
  line-height: 1;
  margin-bottom: 16px;
}

/* Icon area */
.journey-v2__icon-area {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
}
.journey-v2__icon-area .icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

/* Text */
.journey-v2__card h3 {
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.journey-v2__card p {
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Woman illustration — floats between steps 3 and 4 */
.journey-v2__woman {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.journey-v2__woman img {
  width: 160px;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 1100px) {
  .journey-v2__rail {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    row-gap: 28px;
  }
  .journey-v2__woman {
    order: 7;
    grid-column: 2;
  }
  .journey-v2__connector { display: none; }
}
@media (max-width: 600px) {
  .journey-v2__rail {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .journey-v2__woman { display: none; }
}
/* ============================================
   Journey V3 — Card Grid Variant
   ============================================ */
/* ============================================
   Journey V3 — How We Work Cards
   ============================================ */
.journey-v3 {
  background: var(--color-bg);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  isolation: isolate;
}

/* Shallow organic handoff from the quote area into How We Work. This uses
   the same restrained sweep as the hero/Why CPL transition. */
.journey-v3::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -47px;
  left: 0;
  width: 100%;
  height: 48px;
  background: var(--color-bg);
  clip-path: polygon(
    0 10%,
    13% 22%,
    29% 46%,
    45% 70%,
    58% 82%,
    73% 68%,
    88% 36%,
    100% 16%,
    100% 100%,
    0 100%
  );
  pointer-events: none;
}

.journey-v3 > .container {
  position: relative;
  z-index: 1;
}

/* Top — heading left, image right */
.journey-v3__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
  position: relative;
  overflow: visible;
  min-height: 320px;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.journey-v3__text .section-label {
  margin-bottom: 12px;
}
.journey-v3__text h2 {
  
  color: var(--color-primary);
  
  
  margin-bottom: 20px;
}
.journey-v3__text p {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 440px;
}
.journey-v3__image {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.journey-v3__image img {
  width: 61vw;
  max-width: 773px;
  height: auto;
  transform: translateY(25%);
}

/* Card grid — 3-column with S-path SVG behind */
.journey-v3__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  width: 100%;
}

/* S-path line SVG — positioned behind the cards */
.journey-v3__line {
  position: absolute;
  top: 0;
  left: -90px;
  width: calc(100% + 180px);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Individual card */
.journey-v3__card {
  background: var(--color-white);
  border-radius: 18px;
  padding: 28px 30px 28px;
  border: 1px solid rgba(7, 28, 99, 0.06);
  box-shadow: 0 2px 12px rgba(7, 28, 99, 0.05), 0 8px 24px rgba(7, 28, 99, 0.03);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Card header: number + divider + icon */
.journey-v3__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Number group: number + vertical divider */
.journey-v3__num-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.journey-v3__num {
  font-family: var(--font-heading);
  font-size: clamp(42px, 3.5vw, 52px);
  font-weight: 800;
  color: var(--color-coral);
  line-height: 0.95;
}
.journey-v3__num-divider {
  display: block;
  width: 1px;
  height: 46px;
  background: rgba(232, 120, 97, 0.25);
}

/* Icon badge */
.journey-v3__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.journey-v3__badge svg {
  width: 38px;
  height: 38px;
}
.journey-v3__badge--sage {
  background: #d3e5d0;
}
.journey-v3__badge--navy {
  background: var(--color-primary);
}
.journey-v3__badge--cyan {
  background: #1da8ee;
}
.journey-v3__badge--coral {
  background: #e87861;
}
.journey-v3__badge--coral-bg {
  background: #fbe2da;
}

/* Badge icon images (legacy PNGs) */
.badge-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

/* Card typography */
.journey-v3__card h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
  line-height: 1.2;
}
.journey-v3__card p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .journey-v3__top {
    grid-template-columns: 1fr;
  }
  .journey-v3__image { display: none; }
  .journey-v3__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .journey-v3__line { display: none; }
}
@media (max-width: 600px) {
  .journey-v3__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .journey-v3__card {
    padding: 24px;
  }
  .journey-v3__num {
    font-size: 42px;
  }
}
/* ============================================
   Services V2 — Left heading + 2x2 grid
   ============================================ */
.services-v2 {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.services-v2__intro {
  padding-top: 0;
}
.services-v2__intro .section-label {
  margin-bottom: 14px;
}
.services-v2__intro h2 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}
.services-v2__rule {
  width: 48px;
  height: 4px;
  background: var(--color-coral);
  border-radius: 2px;
  margin-bottom: 24px;
}
.services-v2__intro p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* 2x2 card grid */
.services-v2__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Service card */
.services-v2__card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 0 0 24px;
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.services-v2__card:hover {
  box-shadow: 0 8px 24px rgba(3, 11, 54, 0.08);
  transform: translateY(-2px);
}
.services-v2__card-img {
  background: var(--color-white);
  padding: 20px 20px 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 200px;
  border-radius: 12px 12px 0 0;
}
.services-v2__card-img img {
  width: 100%;
  max-width: 336px;
  height: auto;
  display: block;
}
.services-v2__card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 20px 24px 8px;
}
.services-v2__card p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 24px;
  flex: 1;
}
.services-v2__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  margin: 16px 0 0 24px;
  color: var(--color-accent);
  transition: background 0.2s, color 0.2s;
}
.services-v2__card:hover .services-v2__arrow {
  background: var(--color-accent);
  color: var(--color-white);
}
.services-v2__arrow .icon {
  width: 16px;
  height: 16px;
}

/* Responsive */
@media (max-width: 900px) {
  .services-v2 {
    grid-template-columns: 1fr;
  }
  .services-v2__intro {
    text-align: center;
  }
  .services-v2__rule {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 600px) {
  .services-v2__grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   Services V3 — Arch Cards
   ============================================ */
.services-v3 {
  background: var(--color-bg);
  padding: clamp(60px, 8vw, 100px) 0;
}

/* Header — centred */
.services-v3__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(48px, 5vw, 72px);
}
.services-v3__header .section-label {
  margin-bottom: 12px;
}
.services-v3__header h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}
.services-v3__header p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Wrap — holds line + grid */
.services-v3__wrap {
  position: relative;
  overflow: visible;
}
.services-v3__line {
  position: absolute;
  left: -3%;
  width: 106%;
  bottom: 38%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* Grid — 4 columns */
.services-v3__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  position: relative;
  z-index: 1;
}

/* Card */
.services-v3__card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}
.services-v3__card:hover {
  transform: translateY(-4px);
}

/* Arch — contains image + text + arrow */
.services-v3__card-arch {
  border-radius: 120px 120px 8px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.services-v3__card--coral .services-v3__card-arch {
  background: var(--color-coral-soft);
}
.services-v3__card--sand .services-v3__card-arch {
  background: rgba(220, 215, 205, 0.45);
}
.services-v3__card--sage .services-v3__card-arch {
  background: rgba(180, 195, 180, 0.35);
}
.services-v3__card-arch img {
  width: 100%;
  height: auto;
  display: block;
}

/* Body — text below arch */
.services-v3__card-body {
  padding: 16px 20px 20px;
  text-align: center;
}
.services-v3__card-body h3 {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.services-v3__card-body p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Arrow */
.services-v3__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  transition: background 0.2s, color 0.2s;
}
.services-v3__card:hover .services-v3__arrow {
  background: var(--color-primary);
  color: var(--color-white);
}
.services-v3__arrow .icon {
  width: 16px;
  height: 16px;
}

/* Responsive */
@media (max-width: 900px) {
  .services-v3__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-v3__line { display: none; }
}
@media (max-width: 600px) {
  .services-v3__grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
  }
}
/* ============================================
   Reviews V2 — Client Stories
   ============================================ */
.reviews-v2 {
  background: var(--color-bg);
  padding: clamp(60px, 8vw, 100px) 0 clamp(44px, 5vw, 64px);
}

/* Prevent a first-paint flash before the homepage motion controller has
   applied its inline start states. The small head guard is removed as soon as
   setup completes, with a timed HTML fallback if scripting ever fails. */


/* Top layout: intro left, cards right */
.reviews-v2__top {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(30px, 3vw, 40px);
}

/* Intro column */
.reviews-v2__intro h2 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}

/* Google badge */
.reviews-v2__google {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.reviews-v2__g-icon {
  width: 36px;
  height: 36px;
}
.reviews-v2__google-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-primary);
}
.reviews-v2__google-count {
  font-weight: 700;
}
.reviews-v2__stars {
  color: #f5b400;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

/* Illustration */
.reviews-v2__illustration img {
  width: 100%;
  max-width: 360px;
  height: auto;
}

/* Review cards — widget container */
.reviews-v2__cards-motion {
  min-width: 0;
  width: 100%;
}

.reviews-v2__cards {
  min-width: 0;
  width: 100%;
}

/* Featured card spans full width */
.reviews-v2__card--featured {
  grid-column: 1 / -1;
}

/* Card styling */
.reviews-v2__card {
  background: var(--color-white);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--color-border);
}
.reviews-v2__quote-mark {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--color-coral);
  line-height: 0.5;
  display: block;
  margin-bottom: 16px;
}
.reviews-v2__review-text {
  font-size: 1.05rem;
  color: var(--color-primary);
  line-height: 1.6;
  margin-bottom: 16px;
  font-weight: 500;
}
.reviews-v2__card--featured .reviews-v2__review-text {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}
.reviews-v2__reviewer strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.reviews-v2__reviewer .reviews-v2__stars {
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.reviews-v2__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Video testimonials */
.reviews-v2__videos {
  border-top: 1px solid var(--color-border);
  padding-top: clamp(20px, 2.5vw, 30px);
  display: grid;
  grid-template-columns: 1fr 3.125fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.reviews-v2__videos-intro h2 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 12px;
}
.reviews-v2__videos-intro p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.reviews-v2__videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
12px;
  border: none;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.reviews-v2__videos-grid .embed-card iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive */
@media (max-width: 900px) {
  .reviews-v2__top {
    grid-template-columns: 1fr;
  }
  .reviews-v2__illustration { display: none; }
  .reviews-v2__videos {
  border-top: 1px solid var(--color-border);
  padding-top: clamp(20px, 2.5vw, 30px);
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .reviews-v2__cards {
    grid-template-columns: 1fr;
  }
  .reviews-v2__videos-grid {
    grid-template-columns: 1fr;
  }
}
.reviews-v2 .embed-card { border: none !important; box-shadow: none !important; }

/* Widen reviews section to match header */
.reviews-v2 > .container { max-width: 1320px; }

/* Align Google trustindex badge to the left */
.reviews-v2__google { text-align: left; }
.reviews-v2__google [src*='trustindex'] { margin: 0 !important; }
.reviews-v2__google div, .reviews-v2__google iframe { margin-left: 0 !important; margin-right: auto !important; }

/* Force trustindex Google badge left-aligned */
.reviews-v2__google .ti-widget-container,
.reviews-v2__google .ti-widget,
.reviews-v2__google .ti-review-header,
.reviews-v2__google > div {
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  display: flex !important;
  justify-content: flex-start !important;
}
.reviews-v2__google * {
  margin-left: 0 !important;
}
/* ============================================
   Video Testimonials — Hero Style
   ============================================ */
.reviews-v2__videos-hero {
  border-top: 1px solid var(--color-border);
  padding-top: clamp(40px, 5vw, 60px);
}

/* Centred header */
.reviews-v2__videos-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
.reviews-v2__videos-header .section-label {
  margin-bottom: 12px;
}
.reviews-v2__videos-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
}
.reviews-v2__videos-header p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Google badge bar */
.reviews-v2__videos-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-primary);
}
.reviews-v2__videos-badge strong {
  letter-spacing: 1px;
}
.reviews-v2__videos-badge .reviews-v2__stars {
  color: #f5b400;
  font-size: 1rem;
  letter-spacing: 1px;
}
.reviews-v2__badge-sep {
  color: var(--color-border);
  font-weight: 300;
}
.reviews-v2__g-sm {
  width: 20px;
  height: 20px;
}

/* Video row — centre video is larger */
.reviews-v2__videos-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
}
.reviews-v2__videos-row .embed-card {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: none !important;
  box-shadow: 0 4px 20px rgba(3, 11, 54, 0.08);
}
.reviews-v2__videos-row .embed-card--side {
  aspect-ratio: 16 / 9;
}
.reviews-v2__videos-row .embed-card--centre {
  aspect-ratio: 16 / 9;
}
.reviews-v2__videos-row .embed-card iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Name label overlay */
.embed-card__label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(7, 28, 99, 0.85);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  z-index: 2;
}
.embed-card__label span {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 700px) {
  .reviews-v2__videos-row {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  .reviews-v2__videos-row .embed-card--side,
  .reviews-v2__videos-row .embed-card--centre {
    aspect-ratio: 16 / 9;
  }
}
.reviews-v2__videos-row .embed-card { background: transparent !important; }

/* House page break */
.reviews-v2__page-break { text-align: center; margin-top: clamp(32px, 4vw, 48px); }
.reviews-v2__page-break img { width: 100%; max-width: 100%; height: auto; }


/* ============================================
   Personal Touch V2 — Redesigned
   ============================================ */
.personal-touch-v2 {
  background: var(--color-bg);
  padding: clamp(60px, 8vw, 100px) 0;
}
.personal-touch-v2 > .container {
  max-width: 1320px;
}

/* Two-column layout: left intro, right features */
.pt-v2__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  align-items: stretch;
}

/* Left column */
.pt-v2__left {
  padding-right: clamp(40px, 5vw, 70px);
}
.pt-v2__left .section-label {
  margin-bottom: 16px;
}
.pt-v2__left h2 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 20px;
}
.text-coral {
  color: var(--color-coral);
}
.pt-v2__sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 28px;
}
.pt-v2__illustration {
  margin-bottom: 24px;
}
.pt-v2__illustration img {
  width: 100%;
  max-width: 420px;
  height: auto;
}
.pt-v2__stars {
  color: #f5b400;
  font-size: 1.4rem;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
.pt-v2__stars-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Right column: 2x2 feature grid with subtle background */
.pt-v2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: rgba(240, 237, 232, 0.45);
  border-radius: 12px;
}

/* Feature cells with subtle divider lines */
.pt-v2__feature {
  padding: clamp(28px, 3.5vw, 44px);
  position: relative;
}
/* Vertical divider: right border on left column cells */
.pt-v2__feature:nth-child(odd) {
  border-right: 1px solid rgba(7, 28, 99, 0.08);
}
/* Horizontal divider: bottom border on top row cells */
.pt-v2__feature:nth-child(-n+2) {
  border-bottom: 1px solid rgba(7, 28, 99, 0.08);
}

/* Icon — no CSS circle, use PNG as-is */
.pt-v2__icon {
  margin-bottom: 20px;
}
.pt-v2__icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Feature heading */
.pt-v2__feature h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Feature description */
.pt-v2__feature p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 900px) {
  .pt-v2__layout {
    grid-template-columns: 1fr;
  }
  .pt-v2__left {
    padding-right: 0;
    margin-bottom: 40px;
  }
}
@media (max-width: 500px) {
  .pt-v2__grid {
    grid-template-columns: 1fr;
  }
  .pt-v2__feature:nth-child(odd) {
    border-right: none;
  }
  .pt-v2__feature:not(:last-child) {
    border-bottom: 1px solid rgba(7, 28, 99, 0.08);
  }
}



/* ============================================
   Why Choose CPL — Trust Strip + Facts Block
   ============================================ */
.why-cpl-section {
  background: var(--color-bg);
  padding: 0 0 clamp(60px, 8vw, 100px);
}
.why-cpl-section > .container,
.why-cpl__strip > .container {
  max-width: 1400px;
}

/* ---- Reassurance Strip ---- */
.why-cpl__strip {
  padding: clamp(20px, 3vw, 28px) 0;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.why-cpl__badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 52px);
  flex-wrap: nowrap;
  background: #fff;
  border-radius: 16px;
  min-height: 110px;
  padding: 0 clamp(32px, 4vw, 56px);
  box-shadow: 0 4px 24px rgba(3, 11, 54, 0.07);
  max-width: 100%;
}
.why-cpl__badge {
  display: flex;
  align-items: center;
  gap: 14px;
}
.why-cpl__badge + .why-cpl__badge {
  border-left: 1px solid var(--color-border);
  padding-left: clamp(28px, 4vw, 52px);
}
.why-cpl__badge strong {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.3;
}
.why-cpl__badge--coral strong {
  color: var(--color-coral);
}
.why-cpl__badge-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-cpl__badge-icon svg {
  width: 28px;
  height: 28px;
}
.why-cpl__badge-icon--cyan {
  background: var(--color-accent);
  color: #fff;
}
.why-cpl__badge-icon--navy {
  background: var(--color-primary);
  color: #fff;
}
.why-cpl__badge-icon--coral {
  background: var(--color-coral);
  color: #fff;
}
.why-cpl__disclaimer {
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 20px;
}

/* ---- Main Layout ---- */
.why-cpl__layout {
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 80px;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---- Illustration — centred within full-height left column ---- */
.why-cpl__image {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  overflow: visible;
}
.why-cpl__artwork {
  position: relative;
  width: 100%;
  max-width: 527px;
  aspect-ratio: 2 / 3;
  flex: 0 1 527px;
  overflow: visible;
}
.why-cpl__image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---- Right Content ---- */
.why-cpl__content .section-label {
  margin-bottom: 12px;
  font-size: 0.88rem;
  letter-spacing: 0.28em;
  font-weight: 700;
}
.why-cpl__content h2 {
  
  color: var(--color-primary);
  
  
  margin-bottom: 18px;
  max-width: 650px;
}
.why-cpl__lead {
  font-size: 1.12rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: none;
}

/* ---- 2x2 Facts Grid — compact ---- */
.why-cpl__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 30px;
}
.why-cpl__fact {
  display: flex;
  gap: 14px;
  padding: 16px 22px;
  align-items: flex-start;
}
.why-cpl__fact:nth-child(odd) {
  border-right: 1px solid var(--color-border);
}
.why-cpl__fact:nth-child(-n+2) {
  border-bottom: 1px solid var(--color-border);
}
.why-cpl__fact-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}
.why-cpl__fact h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}
.why-cpl__fact p {
  font-size: 0.94rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ---- Rating Row ---- */
.why-cpl__review-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.95rem;
  color: var(--color-primary);
}
.why-cpl__review-bar strong {
  letter-spacing: 1.5px;
  font-size: 1.06rem;
  font-weight: 700;
}
.why-cpl__review-stars {
  color: #f5b400;
  font-size: 1.45rem;
  letter-spacing: 5px;
}

.why-cpl__live-review {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 22px;
}

.why-cpl__live-review > div,
.why-cpl__live-review iframe {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .why-cpl__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .why-cpl__image {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .why-cpl__badges {
    border-radius: 16px;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    padding: 24px 28px;
    min-height: auto;
  }
  .why-cpl__badge + .why-cpl__badge {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
  }
  .why-cpl__facts {
    grid-template-columns: 1fr;
  }
  .why-cpl__fact:nth-child(odd) {
    border-right: none;
  }
  .why-cpl__fact:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
  }
}

/* Why CPL alt — white bg, banner straddles stone/white boundary */
.why-cpl-section--alt {
  background: #fff;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}
.why-cpl-section--alt .why-cpl__strip {
  position: relative;
  z-index: 2;
  transform: translateY(-30%);
  margin-bottom: 0;
  padding: 0;
}
/* Quote section gets the stone background */

/* ============================================
   Quote Section — Soft Cyan Stage Redesign
   ============================================ */

/* Outer page area: warm white */
.gradient-zone--quote {
  background: #FCFBF8;
}

/* Section: pale cyan surface with generous radius */
.homepage-quote-section {
  padding: 88px 0;
}
.homepage-quote-layout {
  background: #F0F9FC !important;
  border-radius: 28px !important;
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr) !important;
}

/* Pale-coral semicircle behind illustration */
.homepage-quote-intro::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -60px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: #FBE2DA;
  z-index: 0;
  pointer-events: none;
}

/* Form card: white, navy-tinted shadow */
.home-quote-card {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 12px rgba(7, 28, 99, 0.05),
    0 20px 48px rgba(7, 28, 99, 0.09) !important;
  border: 1px solid rgba(7, 28, 99, 0.04) !important;
  position: relative;
  z-index: 2;
}

/* Illustration positioned toward bottom */
.homepage-quote-illustration {
  position: relative;
  z-index: 1;
}

/* --- Progress indicator: line behind circles --- */
.homepage-quote-panel .qw-progress__steps::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: 17px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

/* Active step */
.homepage-quote-panel .qw-progress__step.active .qw-progress__dot {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}
.homepage-quote-panel .qw-progress__step.active {
  color: var(--color-primary) !important;
}

/* Completed steps */
.homepage-quote-panel .qw-progress__step.completed .qw-progress__dot {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}

/* Future steps — slightly stronger label contrast */
.homepage-quote-panel .qw-progress__step {
  color: rgba(7, 28, 99, 0.5) !important;
}

/* --- Transaction card states --- */

/* Default */
.qw-type-grid--pills .qw-type-card {
  background: #FAFAF8 !important;
  border: 1.5px solid rgba(7, 28, 99, 0.1) !important;
  transition: all 180ms ease !important;
}
.qw-type-card__icon {
  color: var(--color-accent) !important;
}

/* Hover */
.qw-type-grid--pills .qw-type-card:hover {
  background: #EFF8FC !important;
  border-color: var(--color-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(7, 28, 99, 0.06);
}

/* Selected — coral theme */
.qw-type-grid--pills .qw-type-card.selected,
.qw-type-grid--pills .qw-type-card:has(input:checked) {
  background: #FFF0EB !important;
  border: 2px solid #F47761 !important;
  transform: translateY(-2px);
}
.qw-type-grid--pills .qw-type-card.selected .qw-type-card__icon,
.qw-type-grid--pills .qw-type-card:has(input:checked) .qw-type-card__icon {
  color: var(--color-coral) !important;
}
.qw-type-grid--pills .qw-type-card.selected .qw-type-card__title,
.qw-type-grid--pills .qw-type-card:has(input:checked) .qw-type-card__title {
  color: var(--color-coral) !important;
}

/* Selected check badge — coral circle */
.qw-type-grid--pills .qw-type-card.selected::after {
  background: var(--color-coral) !important;
  border-color: #fff !important;
}

/* --- Form controls: warm fill, cyan focus --- */
.home-quote-card .qw-input,
.home-quote-card select {
  background: #FAF8F5 !important;
  border: 1.5px solid rgba(7, 28, 99, 0.1);
  transition: all 180ms ease;
}
.home-quote-card .qw-input:focus,
.home-quote-card select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 168, 238, 0.12) !important;
  outline: none;
}
.home-quote-card .qw-label {
  color: var(--color-primary);
}
/* Wider quote section container */
.homepage-quote-section > .container { max-width: 1320px; }

/* Benefits horizontal row below quote form */
.homepage-quote-benefits--horizontal {
  display: flex !important;
  justify-content: center;
  gap: clamp(24px, 3vw, 48px);
  margin: 0 !important;
  padding: 20px 0 8px !important;
  list-style: none;
  grid-column: 1 / -1;
  border-top: 1px solid rgba(7, 28, 99, 0.06);}
@media (max-width: 600px) {
  .homepage-quote-benefits--horizontal {
  display: flex !important;
  justify-content: center;
  gap: clamp(24px, 3vw, 48px);
  margin: 0 !important;
  padding: 20px 0 8px !important;
  list-style: none;
  grid-column: 1 / -1;
  border-top: 1px solid rgba(7, 28, 99, 0.06);}
}
/* Journey V3 — wider container and tighter card sizing */
.journey-v3 .container {
  max-width: 1320px;
}
.journey-v3__grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.journey-v3__card {
  padding: 28px 28px 28px !important;
  min-height: 220px;
}
/* Journey cards — larger icons + constrained body text */
.journey-v3__badge {
  width: 112px !important;
  height: 112px !important;
}
.journey-v3__badge svg {
  width: 70px !important;
  height: 70px !important;
}
.journey-v3__card p {
  max-width: 60% !important;
}
/* Icon absolutely positioned top-right — does not push down content */
.journey-v3__card {
  position: relative !important;
  overflow: visible !important;
}
.journey-v3__card-head {
  position: static !important;
}
.journey-v3__badge {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0;
}
.journey-v3__badge svg {
  width: 50px !important;
  height: 50px !important;
}
/* Number group no longer needs to flex against the icon */
.journey-v3__num-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Ensure card head only contains the number group now */
.journey-v3__card-head {
  display: block !important;
  margin-bottom: 12px !important;
}
/* Body text wider, numbers bigger */
.journey-v3__card p {
  max-width: 86% !important;
}
.journey-v3__num {
  font-size: clamp(63px, 5.25vw, 78px) !important;
}
/* Number font: thinner weight, 15% smaller */
.journey-v3__num {
  font-size: clamp(54px, 4.5vw, 66px) !important;
  font-weight: 600 !important;
}
/* Journey grid 15% narrower, centred, shifted down */
.journey-v3__grid { max-width: 85%; margin: 10% auto 0; }

/* ============================================
   Services V4 — 2x2 Illustration Cards
   ============================================ */
.services-v4 {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
  padding: clamp(72px, 8vw, 112px) 0 clamp(80px, 9vw, 120px);
  position: relative;
  isolation: isolate;
}

/* Continue the same wave language into Our Services, reversed so the two
   adjoining transitions form a natural visual rhythm. */
.services-v4::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -47px;
  left: 0;
  width: 100%;
  height: 48px;
  background: var(--color-white);
  clip-path: polygon(
    0 16%,
    12% 36%,
    27% 68%,
    42% 82%,
    55% 70%,
    71% 46%,
    87% 22%,
    100% 10%,
    100% 100%,
    0 100%
  );
  pointer-events: none;
}

.services-v4 > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .journey-v3::before,
  .services-v4::before {
    top: -18px;
    height: 19px;
  }
}
.services-v4__container {
  max-width: 1440px;
}

/* Header — centred text block */
.services-v4__header {
  text-align: center;
  margin-bottom: clamp(40px, 4vw, 56px);
}
.services-v4__header .section-label {
  display: block;
  margin-bottom: 20px;
  color: var(--color-accent);
}
.services-v4__header h2 {
  
  
  color: var(--color-primary);
  
  max-width: 720px;
  margin: 0 auto 20px;
}
.services-v4__header p {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 700px;
  margin: 0 auto;
}

/* Card grid — 2x2 */
.services-v4__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Individual card */
.services-v4__card {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-radius: 20px;
  border: 1px solid rgba(7, 28, 99, 0.06);
  box-shadow: 0 2px 12px rgba(7, 28, 99, 0.04), 0 8px 28px rgba(7, 28, 99, 0.03);
  overflow: hidden;
  text-decoration: none;
  min-height: 300px;
  transition: box-shadow 200ms ease, border-color 200ms ease;
  position: relative;
}
.services-v4__card:hover {
  box-shadow: 0 4px 16px rgba(7, 28, 99, 0.08), 0 12px 36px rgba(7, 28, 99, 0.06);
  border-color: rgba(1, 160, 233, 0.25);
}
.services-v4__card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Copy area — left 40% */
.services-v4__card-copy {
  flex: 0 0 42%;
  padding: 42px 24px 42px 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}
.services-v4__card-copy h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
  margin: 0 0 12px;
}
.services-v4__card-copy p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 300px;
}

/* Arrow control */
.services-v4__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: transparent;
  margin-top: auto;
  padding-top: 20px;
  flex-shrink: 0;
  transition: all 200ms ease;
}
.services-v4__arrow .icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  transition: color 200ms ease;
}
.services-v4__card:hover .services-v4__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.services-v4__card:hover .services-v4__arrow .icon {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .services-v4__card:hover .services-v4__arrow {
    transform: none;
  }
}

/* Image area — right 58% */
.services-v4__card-img {
  flex: 1 1 58%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px 12px 0 0;
  min-height: 0;
}
.services-v4__card-img img {
  width: 100%;
  max-height: 92%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
}

/* Responsive */
@media (max-width: 980px) {
  .services-v4__grid {
    grid-template-columns: 1fr;
  }
  .services-v4__card {
    min-height: 240px;
  }
}
@media (max-width: 600px) {
  .services-v4__card {
    flex-direction: column;
    min-height: auto;
  }
  .services-v4__card-copy {
    flex: none;
    padding: 28px 24px 16px;
  }
  .services-v4__card-copy h3 {
    font-size: 1.3rem;
  }
  .services-v4__card-copy p {
    font-size: 0.95rem;
    max-width: none;
  }
  .services-v4__card-img {
    flex: none;
    height: 200px;
    padding: 0 16px;
    justify-content: center;
  }
  .services-v4__arrow {
    padding-top: 12px;
  }
}
/* Hide old services V3 */
.services-v3 { display: none; }

/* ============================================
   CTA Banner — Compact Navy Conversion Strip
   ============================================ */
.cta-banner-section {
  padding: 40px 0;
  background: transparent;
}

/* Desktop: let the CTA bridge the services and reviews sections 50/50. */
@media (min-width: 901px) {
  .cta-banner-section {
    position: relative;
    z-index: 5;
    height: 0;
    padding: 0;
  }

  .cta-banner-section > .container {
    transform: translateY(-50%);
  }

  .cta-banner-section + .reviews-v2 {
    padding-top: clamp(124px, 10vw, 152px);
  }

  .cta-banner-section--footer {
    height: auto;
    padding: 24px 0 44px;
    background: var(--color-white);
  }

  .cta-banner-section--footer > .container {
    transform: none;
  }

  .inner-page.inner-page--contact .section.section--contact-form {
    padding-bottom: 64px;
  }

  .inner-page--contact .footer__grid > div:not(:first-child) {
    padding-top: 18px;
  }
}
.cta-banner {
  background: var(--color-primary);
  border-radius: 20px;
  padding: 28px clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 34% 34% 32%;
  align-items: center;
  gap: 0;
  position: relative;
  box-shadow: 0 8px 32px rgba(7, 28, 99, 0.18);
}

/* Vertical separators via pseudo-elements on middle column */
.cta-banner__copy {
  position: relative;
  padding: 0 clamp(24px, 3vw, 40px);
}
.cta-banner__copy::before,
.cta-banner__copy::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(255, 255, 255, 0.18);
}
.cta-banner__copy::before { left: 0; }
.cta-banner__copy::after { right: 0; }

/* Column 1: Headline */
.cta-banner__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}
.cta-banner__sparkle {
  color: var(--color-coral);
  margin-right: 6px;
  font-size: 0.85rem;
}
.cta-banner__headline h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}

/* Column 2: Supporting copy */
.cta-banner__copy p {
  font-size: clamp(0.9rem, 1vw, 1rem);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin: 0;
}

/* Column 3: Actions */
.cta-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.cta-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
  white-space: nowrap;
}
.cta-banner__btn .icon {
  width: 16px;
  height: 16px;
}
.cta-banner__btn:hover {
  background: #0192d4;
  transform: translateY(-1px);
}
.cta-banner__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cta-banner__phone {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  white-space: nowrap;
}
.cta-banner__phone a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}
.cta-banner__phone a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
  .cta-banner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .cta-banner__headline {
    grid-column: 1 / -1;
  }
  .cta-banner__copy::before { display: none; }
  .cta-banner__copy::after { display: none; }
  .cta-banner__copy {
    padding: 0;
  }
  .cta-banner__actions {
    align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .cta-banner {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 20px;
    text-align: left;
  }
  .cta-banner__actions {
    align-items: stretch;
  }
  .cta-banner__btn {
    justify-content: center;
    width: 100%;
  }
  .cta-banner__phone {
    text-align: center;
  }
}
/* CTA banner — match header width (1320px) */
.cta-banner-section .container {
  max-width: min(1320px, calc(100% - 56px));
  padding: 0;
}
.cta-banner__copy p { text-align: left; }

/* CTA banner alignment fixes */
.cta-banner__headline {
  text-align: left !important;
}
.cta-banner__actions {
  align-items: center !important;
}
.cta-banner__phone {
  text-align: center !important;
}
/* House page-break belongs to the footer zone, not the white video canvas. */
.reviews-v2__page-break {
  width: 100vw;
  margin-top: clamp(48px, 5vw, 72px) !important;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0 !important;
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: 0 !important;
  background: var(--color-bg);
}
.reviews-v2__page-break img {
  display: block;
  width: min(1320px, calc(100% - 56px));
  margin: 0 auto -4px;
}
/* Remove bottom padding from the reviews section */
section:has(.reviews-v2__page-break) {
  padding-bottom: 0 !important;
}
/* Remove top padding from footer so house image meets it */
.footer {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Fix arrow centering in service cards */
.services-v4__arrow {
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 20px;
}
/* ============================================
   Client Stories — Single Montage Video
   ============================================ */
.client-stories {
  position: relative;
  isolation: isolate;
  background: #fff;
  padding: clamp(60px, 5vw, 78px) 0 clamp(58px, 5vw, 78px);
  margin: 0;
  clip-path: polygon(
    0 3.5%,
    20% 1.4%,
    47% 0,
    74% 1.8%,
    100% 3%,
    100% 96.5%,
    78% 98.3%,
    50% 100%,
    23% 98.2%,
    0 96.8%
  );
}
.client-stories .container {
  max-width: min(1320px, calc(100% - 56px));
  padding: 0;
}

/* Client-story artwork is built from independent PNG layers so each piece can
   respond to the scroll without moving the video or heading. */
.client-stories__panel {
  position: relative;
  background-color: transparent;
  border-radius: 0;
  border: 0;
  overflow: visible;
  padding: 0 clamp(24px, 5vw, 72px);
  text-align: center;
}
.client-stories__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.client-stories__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.client-stories__route-path {
  fill: none;
  stroke: #1767c7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.client-stories__decor-piece {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  will-change: transform, opacity;
}
.client-stories__decor-piece--contract {
  left: -0.5%;
  top: 38%;
  width: clamp(104px, 10.5%, 142px);
  z-index: 2;
  transform-origin: 50% 75%;
}
.client-stories__decor-piece--tick {
  right: 7%;
  top: 16%;
  width: clamp(69px, 6.9%, 95px);
  z-index: 2;
  transform-origin: 50% 50%;
}
.client-stories__decor-piece--leaves {
  right: 6%;
  bottom: 8%;
  width: clamp(132px, 14.375%, 196px);
  z-index: 3;
  transform-origin: 50% 100%;
}

/* Header */
.client-stories__header {
  position: relative;
  z-index: 4;
  max-width: 760px;
  margin: 0 auto 32px;
}
.client-stories__header .section-label {
  display: block;
  margin-bottom: 12px;
}
.client-stories__header h2 {
  
  
  color: var(--color-primary);
  
  margin: 0 0 20px;
}
.client-stories__header p {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto;
}

/* Video wrapper */
.client-stories__video-wrap {
  position: relative;
  z-index: 5;
  isolation: isolate;
  background: #fff;
  border-radius: 20px;
  max-width: 1100px;
  width: 74%;
  margin: 0 auto;
}
.client-stories__video {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(7, 28, 99, 0.15), 0 2px 8px rgba(7, 28, 99, 0.08);
  aspect-ratio: 16 / 9;
}
.client-stories__video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Duration label */
.client-stories__duration {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}

/* Proof bar */
.client-stories__proof {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(7, 28, 99, 0.06);
  margin-top: 24px;
}
.client-stories__stars {
  color: #f5a623;
  font-size: 1.15rem;
  letter-spacing: 2px;
}
.client-stories__sep {
  width: 1px;
  height: 20px;
  background: rgba(7, 28, 99, 0.12);
}
.client-stories__rated {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary);
}
.client-stories__count {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* Hide old reviews-v2 section */
.reviews-v2__videos-hero { display: none; }

/* Responsive */
@media (max-width: 980px) {
  .client-stories__video-wrap {
    width: 90%;
  }
  .client-stories__panel {
    padding: 48px 24px 44px;
  }
  .client-stories__decor-piece--contract {
    left: -2%;
    top: 44%;
    width: 106px;
  }
  .client-stories__decor-piece--tick {
    right: 5%;
    top: 20%;
    width: 70px;
  }
  .client-stories__decor-piece--leaves {
    right: 3%;
    bottom: 3%;
    width: 137px;
  }
}
@media (max-width: 600px) {
  .client-stories__video-wrap {
    width: 100%;
  }
  .client-stories__panel {
    padding: 36px 16px 32px;
    border-radius: 20px;
    background-color: var(--color-accent-light);
  }
  .client-stories__decor {
    display: none;
  }
  .client-stories__header h2 {
    
  }
  .client-stories__video {
    border-radius: 14px;
  }
  .client-stories__proof {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    padding: 12px 20px;
  }
}
/* Testimonials heading on one line */
.client-stories__header {
  max-width: 900px !important;
}
.client-stories__header h2 {
  
}
/* Testimonials panel — full-width white treatment matching Why Choose CPL. */
.client-stories__panel {
  background-color: transparent !important;
}
.client-stories__header .section-label {
  color: var(--color-accent) !important;
}
.client-stories__header h2 {
  color: var(--color-primary) !important;
}
.client-stories__header p {
  color: var(--color-text-muted) !important;
}

/* The homepage now ends with the full-width testimonial band. */
main:has(.client-stories) + .footer {
  padding-top: clamp(48px, 5vw, 72px) !important;
}

/* Trustindex's supplied solid-background badge bridges the testimonial and
   footer zones. Keep the positioning only; the widget provides its own card. */
.footer-trust-bridge {
  position: relative;
  z-index: 6;
  height: 0;
  display: flex;
  justify-content: center;
}

.footer-trust-bridge > div,
.footer-trust-bridge > iframe {
  width: min(860px, calc(100% - 56px));
  max-width: 100%;
  transform: translateY(-50%);
}

@media (max-width: 700px) {
  .footer-trust-bridge {
    height: auto;
    padding: 24px 0;
    background: var(--color-bg);
  }

  .footer-trust-bridge > div,
  .footer-trust-bridge > iframe {
    width: min(100% - 32px, 560px);
    transform: none;
  }
}
/* Push hero content down 10% — banner barely visible on first load */
.hero--home {
  padding-top: 140px !important;
  padding-bottom: 50px !important;
}
/* Trust strip — stop pulling it up into the hero viewport */
.why-cpl-section--alt .why-cpl__strip {
  transform: none !important;
  margin-top: 0 !important;
}

/* Desktop polish: separate the hero artwork from the floating header. */
@media (min-width: 1181px) {
  .hero--home .hero__media {
    transform: translateY(18px);
  }
}

/* ============================================
   Homepage section handoff
   Give Why CPL its own breathing room and attach the reassurance strip to
   the quote experience, where its pricing promises are most relevant.
   ============================================ */
.why-cpl-section--alt {
  padding: clamp(84px, 7.5vw, 116px) 0 clamp(80px, 7vw, 108px);
}

.why-motion-line {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.why-motion-line__path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.72;
  /* Keep the route fully concealed from the first browser paint. GSAP
     replaces these approximate values with the path's exact measured length
     before ScrollTrigger begins drawing it. */
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

@media (max-width: 1000px), (prefers-reduced-motion: reduce) {
  .why-motion-line {
    display: none;
  }
}

/* A single shallow organic sweep softens the stone-to-white handoff without
   introducing a decorative repeating wave. */
.why-cpl-section--alt::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -47px;
  left: 0;
  width: 100%;
  height: 48px;
  background: #fff;
  clip-path: polygon(
    0 10%,
    13% 22%,
    29% 46%,
    45% 70%,
    58% 82%,
    73% 68%,
    88% 36%,
    100% 16%,
    100% 100%,
    0 100%
  );
  pointer-events: none;
}

.why-cpl-section--alt > .container {
  position: relative;
  z-index: 1;
}

.quote-reassurance-strip {
  position: relative;
  z-index: 3;
  margin: 0;
  transform: translateY(-50%);
}

.quote-reassurance-strip > .container {
  max-width: 1400px;
}

.quote-reassurance-section {
  background: #fcfbf8;
  position: relative;
  min-height: 55px;
  padding: 0;
}

.quote-reassurance-section + .homepage-quote-section {
  padding-top: clamp(24px, 2vw, 32px);
}

.homepage-quote-disclaimer {
  margin: 16px 0 0;
  padding: 0;
  text-align: center;
}

@media (max-width: 1179px) {
  .why-cpl-section--alt {
    padding-top: clamp(64px, 8vw, 88px);
  }

  .quote-reassurance-strip {
    margin: 0;
  }

  .quote-reassurance-section {
    padding-bottom: 0;
  }
}

@media (max-width: 600px) {
  .why-cpl-section--alt::before {
    top: -18px;
    height: 19px;
  }

  .quote-reassurance-strip {
    padding: 0 14px;
    transform: none;
  }

  .quote-reassurance-strip > .container {
    padding: 0;
  }

  .quote-reassurance-section {
    min-height: 0;
    padding: 24px 0;
  }

  .quote-reassurance-section + .homepage-quote-section {
    padding-top: 30px;
  }
}
/* ============================================
   INNER PAGE DESIGN REFRESH
   Match homepage warm CPL design language
   ============================================ */

/* --- Inner Page Hero: Warm stone, navy text --- */
.hero:not(.hero--home) {
  background: var(--color-bg) !important;
  min-height: auto !important;
  padding: clamp(120px, 14vw, 180px) 0 clamp(48px, 5vw, 72px) !important;
}
.hero:not(.hero--home) .hero__bg {
  display: none !important;
}
.hero:not(.hero--home) .hero__overlay {
  display: none !important;
}
.hero:not(.hero--home) .hero__content {
  color: var(--color-primary) !important;
}
.hero:not(.hero--home) .hero__content h1 {
  color: var(--color-primary) !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 16px;
}
.hero:not(.hero--home) .hero__label {
  color: var(--color-accent) !important;
  opacity: 1 !important;
}
.hero:not(.hero--home) .hero__subtitle {
  color: var(--color-text-muted) !important;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  max-width: 560px;
}
.hero:not(.hero--home) .btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.hero:not(.hero--home) .btn--primary:hover {
  background: #0192d4;
  border-color: #0192d4;
}

/* --- Section Alt: Warm stone (inner pages only) --- */
.hero:not(.hero--home) ~ .section--alt {
  background: #f7f5f1 !important;
}

/* --- Page Intro --- */
.page-intro {
  max-width: 720px;
}
.page-intro p {
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* --- Split Layouts: Rounded image cards --- */
.split img {
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(7, 28, 99, 0.08);
}

/* --- USP Grid: Modern card treatment --- */
.usp-grid {
  gap: 20px;
}
.usp-card {
  background: var(--color-white) !important;
  border-radius: 18px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 32px 28px !important;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.usp-card:hover {
  box-shadow: 0 6px 20px rgba(7, 28, 99, 0.08) !important;
  transform: translateY(-2px);
}
.usp-card h3 {
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.usp-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.usp-card .icon {
  color: var(--color-accent);
}

/* --- Steps List: Clean navy numbered circles --- */
.steps-list {
  counter-reset: step;
}
.step-item {
  position: relative;
  padding-left: 64px;
  margin-bottom: 32px;
  min-height: 48px;
}
.step-item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.step-item h3 {
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.step-item p {
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- FAQ Items: White card treatment --- */
.faq-item {
  background: var(--color-white);
  border-radius: 14px;
  border: none;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
.faq-item:hover {
  box-shadow: 0 2px 12px rgba(7, 28, 99, 0.06);
}
.faq-item button {
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item button::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.faq-item.active button::after {
  transform: rotate(-135deg);
}
.faq-item .faq-answer {
  padding: 0 24px 18px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* --- FAQ Jump Nav: Horizontal pills --- */
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.faq-jump a {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-white);
  border: 1px solid rgba(7, 28, 99, 0.1);
  border-radius: 30px;
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 200ms ease;
}
.faq-jump a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* --- FAQ Group spacing --- */
.faq-group {
  margin-bottom: 48px;
}
.faq-group h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(7, 28, 99, 0.06);
}

/* --- Contact Grid: Warm cards --- */
.contact-grid {
  gap: 32px;
}
.contact-grid form {
  background: var(--color-white);
  border-radius: 20px;
  border: none;
  box-shadow: none;
  padding: 36px;
}
.contact-info-card {
  background: var(--color-primary) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  color: #fff !important;
}
.contact-info-card h2,
.contact-info-card h3 {
  color: #fff !important;
}
.contact-info-item {
  color: rgba(255, 255, 255, 0.85) !important;
}
.contact-info-item a {
  color: #fff !important;
}
.contact-info-item .icon {
  color: var(--color-accent) !important;
}

/* --- Map Container: Rounded --- */
.map-container {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(7, 28, 99, 0.06);
}
.map-container iframe {
  border-radius: 20px;
}

/* --- Phone Banner: Navy --- */
.phone-banner {
  background: var(--color-primary) !important;
  border-radius: 16px !important;
  color: #fff !important;
  padding: 28px !important;
  text-align: center;
}
.phone-banner a {
  color: var(--color-accent) !important;
  font-weight: 700;
}
.phone-banner h3,
.phone-banner strong {
  color: #fff !important;
}

/* --- Callback Card: Warm white --- */
.callback-card {
  background: var(--color-white) !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 28px !important;
}
.callback-card h3 {
  color: var(--color-primary);
  font-weight: 700;
}
.callback-card input,
.callback-card select,
.callback-card textarea {
  border-radius: 10px;
  border: 1px solid rgba(7, 28, 99, 0.12);
  padding: 12px 14px;
  font-size: 0.92rem;
  background: #FAF8F5;
  transition: border-color 200ms ease;
}
.callback-card input:focus,
.callback-card select:focus,
.callback-card textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* --- Quote Section (inner pages): Warm cyan panel --- */
section.quote-section:not(.homepage-quote-section) {
  background: var(--color-accent-light) !important;
  border-radius: 0;
}
.quote-section .container {
  max-width: 900px;
}
.quote-section h2 {
  color: var(--color-primary);
}
.quote-section p {
  color: var(--color-text-muted);
}
.quote-section .quote-layout {
  background: var(--color-white);
  border-radius: 20px;
  border: none;
  box-shadow: none;
  padding: 36px;
}

/* --- In-page CTA Banner --- */
.page-layout .cta-banner {
  background: var(--color-primary) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  text-align: left !important;
}
.page-layout .cta-banner h2 {
  color: #fff !important;
  font-size: 1.4rem;
  font-weight: 700;
}
.page-layout .cta-banner p {
  color: rgba(255, 255, 255, 0.8) !important;
}
.page-layout .cta-banner .btn {
  background: var(--color-accent);
  border-color: var(--color-accent);
  border-radius: 8px;
}

/* --- Form Inputs (global inner page) --- */
.form-grid input,
.form-grid select,
.form-grid textarea {
  border-radius: 10px;
  border: 1px solid rgba(7, 28, 99, 0.12);
  padding: 12px 14px;
  font-size: 0.95rem;
  background: #FAF8F5;
  transition: border-color 200ms ease;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 160, 233, 0.1);
}

/* --- Personal Touch Section (why-cpl.html) --- */
.personal-touch-section {
  background: #f7f5f1 !important;
}
.personal-touch-section .bold-feature-card {
  background: var(--color-white) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}
.personal-touch-section .bold-feature-card h3 {
  color: var(--color-primary);
}
.personal-touch-section .bold-feature-card p {
  color: var(--color-text-muted);
}

/* --- Tips Box (service pages) --- */
[style*="--color-bg-alt"] {
  border-radius: 16px !important;
  border: 1px solid rgba(7, 28, 99, 0.06);
  padding: 24px !important;
}

/* --- Sidebar refinement --- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Scroll Top Button --- */
.scroll-top {
  background: var(--color-primary) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(7, 28, 99, 0.15) !important;
}
.scroll-top:hover {
  background: var(--color-accent) !important;
}

/* --- Inner page responsive --- */
@media (max-width: 768px) {
  .hero:not(.hero--home) {
    padding: 120px 0 40px !important;
  }
  .faq-jump {
    gap: 8px;
  }
  .faq-jump a {
    padding: 6px 14px;
    font-size: 0.8rem;
  }
  .contact-grid form {
    padding: 24px;
  }
  .contact-info-card {
    padding: 24px !important;
  }
}

/* ============================================
   SITE V3 INNER PAGE SYSTEM
   Homepage-derived colour, card and motion language
   ============================================ */
.inner-page {
  background: #fff;
  color: var(--color-primary);
}

.inner-page main {
  overflow: hidden;
}

.inner-page .hero:not(.hero--home) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 24%, rgba(1, 160, 233, 0.10), transparent 29%),
    linear-gradient(180deg, #f7f5f1 0%, #fbfaf8 100%) !important;
  padding: clamp(138px, 12vw, 176px) 0 clamp(78px, 7vw, 108px) !important;
}

.inner-page .hero:not(.hero--home)::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(270px, 34vw, 520px);
  aspect-ratio: 1;
  right: clamp(-80px, -4vw, -24px);
  top: clamp(90px, 10vw, 145px);
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.045;
}

/* About page: the story belongs here; service proof remains on Why CPL. */
.inner-page--about .hero__content h1 {
  max-width: 700px;
  font-size: clamp(3.25rem, 5vw, 5.15rem) !important;
  line-height: 0.98 !important;
}

.inner-page--about .hero {
  padding-bottom: clamp(132px, 10vw, 164px) !important;
}

.about-hero__review {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(28px, 3vw, 42px);
  display: flex;
  min-height: 60px;
  width: min(440px, calc(100% - 40px));
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.about-hero__review > div,
.about-hero__review iframe {
  margin-inline: auto !important;
}

.about-story__content {
  position: relative;
  z-index: 5;
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(380px, 0.88fr) minmax(430px, 1.12fr);
  column-gap: clamp(44px, 4.5vw, 68px);
  align-items: start;
  text-align: left;
}

.about-story {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 0;
  align-items: center;
  padding-block: clamp(16px, 1.6vw, 24px);
  background: var(--color-bg-alt);
}

.about-story__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(670px, 48vw, 720px);
  padding: clamp(68px, 5.5vw, 78px) clamp(48px, 5.8vw, 84px) 52px;
  border: 0;
  border-radius: 34px;
  background:
    radial-gradient(circle at 95% 0%, rgba(31, 168, 230, 0.13), transparent 31%),
    linear-gradient(135deg, #f5fbfe 0%, #eef8fc 62%, #e9f5fa 100%);
  box-shadow: 0 26px 70px rgba(8, 34, 99, 0.09);
  will-change: transform;
}

.about-story__panel::before {
  position: absolute;
  right: -100px;
  bottom: -185px;
  display: block;
  width: 470px;
  height: 470px;
  border: 2px solid rgba(9, 36, 109, 0.09);
  border-radius: 50%;
  content: "";
}

.about-story__content .section-label {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 18px;
  color: var(--color-accent) !important;
}

.inner-page--about .about-story__content h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 680px;
  margin: 0;
  color: var(--color-primary) !important;
  font-size: clamp(2.85rem, 4.4vw, 4.4rem);
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.inner-page--about .about-story__content h2 span {
  color: var(--color-accent-cta);
}

.about-story__body {
  position: relative;
  z-index: 4;
  grid-column: 2;
  grid-row: 1 / span 4;
  max-width: 620px;
  margin-top: 20px;
  padding: 0;
}

.about-story__content p {
  max-width: 590px;
  margin: 0;
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.58;
}

.about-story__content p + p {
  margin-top: 18px;
}

.about-story__art {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 20px;
  width: 117.5%;
  max-height: 356px;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 20px rgba(7, 38, 92, 0.08));
}

.about-story__content,
.about-story > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 1000px) {
  .about-story__content {
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 0.86fr);
    column-gap: 46px;
  }

  .inner-page--about .about-story__content h2 {
    font-size: clamp(2.45rem, 5vw, 3.55rem);
  }

  .about-story__art { width: 90%; }
}

@media (max-width: 820px) {
  .about-story__content {
    display: block;
    max-width: 620px;
    text-align: left;
  }

  .inner-page--about .about-story__content h2 {
    max-width: 570px;
    margin-bottom: 30px;
  }

  .about-story__content p {
    max-width: none;
  }

  .about-story__body { padding-top: 0; }

  .about-story__art {
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    width: min(100%, 650px);
    max-height: none;
    margin: 38px auto 0;
    transform: none;
  }
}

@media (max-width: 768px) {
  .about-story {
    min-height: auto;
    padding-block: 72px;
  }

  .about-story__panel {
    min-height: 0;
    padding: 56px 24px 28px;
    border-radius: 24px;
  }

  .inner-page--about .about-story__content h2 { margin-bottom: 26px; }
  .about-story__content p + p { margin-top: 16px; }
  .inner-page--about .hero {
    padding-bottom: 122px !important;
  }

  .about-hero__review {
    bottom: 24px;
  }
}

.about-director .split {
  align-items: center;
}

@media (min-width: 901px) {
  .about-director > .container {
    max-width: 1420px;
  }

  .about-director .split {
    grid-template-columns: 220px minmax(420px, 1fr) minmax(480px, 516px);
    gap: clamp(40px, 3.4vw, 54px);
  }

  .about-director__quote {
    width: 100%;
    max-width: 516px;
    min-height: clamp(560px, 44vw, 676px);
    justify-self: end;
    padding: 52px 60px;
  }

  .about-director__quote blockquote {
    font-size: clamp(1.55rem, 1.8vw, 2rem);
  }
}

.about-director .split__content {
  align-self: center;
}

.about-director__quote {
  position: relative;
  display: flex;
  min-height: 420px;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  padding: clamp(42px, 5vw, 72px);
  border-radius: 30px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 24px 55px rgba(7, 28, 99, 0.16);
}

.about-director .about-director__portrait {
  display: block;
  width: min(225px, 100%);
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.about-director__portrait-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-director__quote::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -82px;
  bottom: -96px;
  border: 2px solid rgba(2, 159, 231, 0.48);
  border-radius: 50%;
}

.about-director__mark {
  position: relative;
  z-index: 1;
  color: #f3755d;
  font-family: Georgia, serif;
  font-size: 6.5rem;
  line-height: 0.55;
  margin-bottom: 28px;
}

.about-director__quote blockquote {
  position: relative;
  z-index: 1;
  margin: 0 0 32px;
  max-width: 680px;
  color: #fff;
  font-size: clamp(1.55rem, 2.25vw, 2.25rem);
  line-height: 1.25;
  font-weight: 700;
}

.about-director__quote p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.about-director__quote strong {
  color: #27aee4;
}

.about-values .text-center h2 {
  max-width: 860px;
  margin-inline: auto;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.about-value {
  position: relative;
  min-height: 300px;
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(7, 28, 99, 0.08);
}

.about-value:nth-child(2) {
  background: #eef8fc;
}

.about-value__number {
  display: block;
  margin-bottom: 56px;
  color: #f3755d;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
}

.about-value h3 {
  margin-bottom: 12px;
  color: var(--color-primary);
  font-size: 1.35rem;
}

.about-value p {
  margin: 0;
}

.about-values__link {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

.about-values__cta {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(7, 28, 99, 0.22);
}

.about-values__cta:hover {
  background: #0b2a7a;
  border-color: #0b2a7a;
  color: var(--color-white);
  box-shadow: 0 8px 22px rgba(7, 28, 99, 0.3);
}

.about-testimonials {
  background: #fff !important;
  padding-top: clamp(72px, 8vw, 118px);
}

@media (max-width: 900px) {
  .inner-page--about .hero__content h1 {
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
  }

  .about-values__grid {
    grid-template-columns: 1fr;
  }

  .about-value {
    min-height: 0;
  }

  .about-value__number {
    margin-bottom: 28px;
  }

  .about-director__quote {
    min-height: 0;
    padding: 42px 30px;
  }

  .about-director .split__content {
    order: 1;
  }

  .about-director__portrait-wrap {
    order: 2;
  }

  .about-director__quote {
    order: 3;
  }

  .about-director__portrait {
    width: min(205px, 62vw);
  }
}

.inner-page .hero__split {
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr) !important;
  gap: clamp(48px, 7vw, 104px) !important;
}

.inner-page .hero__content {
  max-width: 620px !important;
}

.inner-page .hero:not(.hero--home) .hero__label,
.inner-page .section-label,
.inner-page .quote-section__label {
  color: var(--color-accent) !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.inner-page .hero:not(.hero--home) .hero__content h1 {
  font-size: clamp(3rem, 5.2vw, 5rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.inner-page .hero__subtitle {
  max-width: 590px !important;
  font-size: clamp(1.04rem, 1.25vw, 1.2rem) !important;
}

.inner-page .hero__illustration {
  position: relative;
  z-index: 2;
  min-height: 370px;
}

.inner-page .hero__illustration img {
  max-width: 590px;
  max-height: 480px;
  filter: none;
}

.inner-page--about .hero__illustration img,
.inner-page--quote .hero__illustration img {
  max-height: 500px;
}

/* About hero: the wide team artwork needs more canvas than the generic
   inner-page illustration, otherwise five people read as a small badge. */
@media (min-width: 1100px) {
  .inner-page--about .hero > .container {
    /* Match the standard inner-page container used by the FAQs hero. */
    max-width: 1140px;
  }

  .inner-page--about .hero__split {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr) !important;
    gap: clamp(30px, 3.25vw, 52px) !important;
  }

  .inner-page--about .hero__illustration {
    min-height: 500px;
    justify-content: center;
  }

  .inner-page--about .hero__illustration img {
    width: min(711px, 40vw);
    flex: 0 0 auto;
    max-width: none !important;
    max-height: 504px;
  }
}

.inner-proof-strip {
  position: relative;
  z-index: 4;
  height: 0;
  background: #fff;
}

.inner-proof-strip__grid {
  position: relative;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1320px;
  padding: 18px 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(7, 28, 99, 0.11);
}

.inner-proof-strip__item {
  min-height: 54px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-right: 1px solid rgba(7, 28, 99, 0.13);
  color: var(--color-primary);
  white-space: nowrap;
}

.inner-proof-strip__item:last-child { border-right: 0; }
.inner-proof-strip__item strong { font-size: 0.98rem; }
.inner-proof-strip__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.inner-proof-strip__icon .icon { width: 21px; height: 21px; }
.inner-proof-strip__item--cyan .inner-proof-strip__icon { background: #20a9e8; }
.inner-proof-strip__item--navy .inner-proof-strip__icon { background: var(--color-primary); }
.inner-proof-strip__item--coral .inner-proof-strip__icon { background: #f3755d; }

.inner-page .inner-content-section {
  position: relative;
  padding: clamp(88px, 8vw, 126px) 0;
  background: #fff;
}

.inner-page .inner-content-section--stone,
.inner-page .section--alt.inner-content-section {
  background: #f7f5f1 !important;
}

.inner-page .inner-proof-strip + .inner-content-section {
  padding-top: clamp(118px, 10vw, 150px);
}

.inner-page .inner-content-section h2 {
  color: var(--color-primary);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.inner-page .page-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(48px, 6vw, 88px);
}

.inner-page .page-intro {
  max-width: 840px;
  margin-bottom: 58px;
  padding-left: 24px;
  border-left: 3px solid #f3755d;
}

.inner-page .page-intro p:first-child {
  font-size: clamp(1.08rem, 1.4vw, 1.24rem);
  color: var(--color-primary);
}

.inner-page .steps-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 52px;
}

.inner-page .step-item {
  position: relative;
  min-height: 182px;
  margin: 0;
  padding: 72px 28px 28px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid rgba(7, 28, 99, 0.08);
  box-shadow: 0 8px 24px rgba(7, 28, 99, 0.06);
  overflow: hidden;
}

.inner-page .step-item::before {
  top: 20px;
  left: 26px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #f3755d;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
}

.inner-page .step-item::after {
  content: "";
  position: absolute;
  top: 31px;
  left: 82px;
  width: 42px;
  height: 1px;
  background: rgba(243, 117, 93, 0.42);
}

.inner-page .step-item:nth-child(3n + 2) { background: var(--color-accent-light); }
.inner-page .step-item:nth-child(3n) { background: #fff4ef; }

.inner-page .inner-tip-card {
  position: relative;
  margin: 52px 0 !important;
  padding: 38px 40px !important;
  background: var(--color-primary) !important;
  color: #fff;
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden;
}

.inner-page .inner-tip-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -62px;
  bottom: -92px;
  border-radius: 50%;
  border: 34px solid rgba(1, 160, 233, 0.28);
}

.inner-page .inner-tip-card h2,
.inner-page .inner-tip-card p,
.inner-page .inner-tip-card ul { color: #fff !important; }
.inner-page .inner-tip-card li::marker { color: #f3755d; }

.inner-page .faq-list { max-width: none; }
.inner-page .faq-item { border: 1px solid rgba(7, 28, 99, 0.08); }
.inner-page .faq-item__question { padding: 22px 28px; }
.inner-page .faq-item__answer-inner { padding: 0 28px 24px; }
.inner-page .faq-item .faq-answer { padding: 0 28px 24px; }
.inner-page .faq-item.active { border-color: rgba(1, 160, 233, 0.38); }
.inner-page .faq-item.active .faq-item__question { color: var(--color-accent); }

.inner-page .sidebar { position: sticky; top: 118px; }
.inner-page .callback-card { box-shadow: 0 10px 30px rgba(7, 28, 99, 0.08) !important; }

/* Buying guide: a quiet, editorial route rather than a generic pastel grid. */
.inner-page--buying .buying-journey-section,
.service-journey-page .buying-journey-section {
  overflow: hidden;
  background: #f7f5f1 !important;
}

.inner-page--buying .buying-journey__header,
.service-journey-page .buying-journey__header {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-bottom: clamp(42px, 5vw, 68px);
}

.inner-page--buying .buying-journey__header h2,
.service-journey-page .buying-journey__header h2 {
  margin: 14px 0 18px;
  color: #071c63;
  font-size: clamp(2.7rem, 4.6vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.inner-page--buying .buying-journey__header h2 span,
.service-journey-page .buying-journey__header h2 span {
  color: #e87861;
}

.inner-page--buying .buying-journey__header p,
.service-journey-page .buying-journey__header p {
  max-width: 580px;
  margin: 0;
  color: #52647a;
  font-size: 1.08rem;
  line-height: 1.6;
}

.inner-page--buying .buying-journey__grid,
.service-journey-page .buying-journey__grid {
  isolation: isolate;
  gap: 24px;
  margin: 0;
}

.buying-journey__route {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.buying-journey__route path {
  fill: none;
  stroke: #20a8e8;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
}

.inner-page--buying .buying-journey__grid .step-item,
.service-journey-page .buying-journey__grid .step-item {
  z-index: 1;
  min-height: 204px;
  padding: 78px 32px 30px;
  border: 1px solid rgba(7, 28, 99, 0.10);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(7, 28, 99, 0.07);
}

.inner-page--buying .buying-journey__grid .step-item:nth-child(3n + 2),
.inner-page--buying .buying-journey__grid .step-item:nth-child(3n),
.service-journey-page .buying-journey__grid .step-item:nth-child(3n + 2),
.service-journey-page .buying-journey__grid .step-item:nth-child(3n) {
  background: #fff;
}

.inner-page--buying .buying-journey__grid .step-item::before,
.service-journey-page .buying-journey__grid .step-item::before {
  top: 22px;
  left: 30px;
  color: #e87861;
  font-size: 2.45rem;
}

.inner-page--buying .buying-journey__grid .step-item::after,
.service-journey-page .buying-journey__grid .step-item::after {
  top: 35px;
  left: 91px;
  width: 52px;
  background: rgba(32, 168, 232, 0.60);
}

.inner-page--buying .buying-journey__grid .step-item h3,
.service-journey-page .buying-journey__grid .step-item h3 {
  margin-bottom: 11px;
  color: #071c63;
  font-size: 1.25rem;
}

.inner-page--buying .buying-journey__grid .step-item p,
.service-journey-page .buying-journey__grid .step-item p {
  color: #52647a;
  line-height: 1.58;
}

@media (max-width: 768px) {
  .buying-journey__route { display: none; }
  .inner-page--buying .buying-journey__header h2,
  .service-journey-page .buying-journey__header h2 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .inner-page--buying .buying-journey__grid .step-item,
  .service-journey-page .buying-journey__grid .step-item { padding: 74px 26px 28px; }
}

.inner-page .usp-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.inner-page .usp-card,
.inner-page .bold-feature-card {
  position: relative;
  min-height: 230px;
  padding: 32px 28px 28px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(7, 28, 99, 0.07) !important;
  box-shadow: 0 9px 26px rgba(7, 28, 99, 0.06) !important;
  overflow: hidden;
}

.inner-page .usp-card::after,
.inner-page .bold-feature-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #20a9e8;
}

.inner-page .usp-card:nth-child(3n + 2)::after,
.inner-page .bold-feature-card:nth-child(3n + 2)::after { background: #f3755d; }
.inner-page .usp-card:nth-child(3n)::after,
.inner-page .bold-feature-card:nth-child(3n)::after { background: #8aa287; }

.inner-page .usp-card__icon,
.inner-page .bold-feature-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #20a9e8;
  color: #fff !important;
  margin-bottom: 22px;
}
.inner-page .usp-card:nth-child(3n + 2) .usp-card__icon,
.inner-page .bold-feature-card:nth-child(3n + 2) .bold-feature-card__icon { background: #f3755d; }
.inner-page .usp-card:nth-child(3n) .usp-card__icon,
.inner-page .bold-feature-card:nth-child(3n) .bold-feature-card__icon { background: #8aa287; }

.inner-page section.quote-section:not(.homepage-quote-section) {
  background: var(--color-accent-light) !important;
  padding: clamp(92px, 8vw, 124px) 0;
}
.inner-page section.quote-section:not(.homepage-quote-section)::before {
  content: "";
  position: absolute;
  top: -31px;
  left: 0;
  width: 100%;
  height: 32px;
  background: var(--color-accent-light);
  clip-path: polygon(0 70%, 18% 38%, 37% 56%, 55% 14%, 74% 42%, 100% 8%, 100% 100%, 0 100%);
}
.inner-page .quote-section .quote-layout { box-shadow: 0 16px 42px rgba(7, 28, 99, 0.10); }

.inner-page--quote .homepage-quote-section {
  background: #fff;
  padding: clamp(80px, 7vw, 110px) 0;
}
.inner-page--quote .homepage-quote-layout {
  padding: clamp(26px, 3vw, 44px);
  border-radius: 26px;
  background: #f7f5f1;
}

.inner-page--contact .contact-grid form { box-shadow: 0 12px 34px rgba(7, 28, 99, 0.08); }
.inner-page--contact .contact-info-card { background: var(--color-primary) !important; }

.inner-page--testimonials .review-carousel,
.inner-page--testimonials .video-grid { gap: 18px; }
.inner-page--testimonials .review-card,
.inner-page--testimonials .video-card { border-radius: 18px; overflow: hidden; }

.inner-page--faqs .faq-jump {
  position: sticky;
  top: 96px;
  z-index: 8;
  padding: 12px;
  border-radius: 16px;
  background: #071c63;
  box-shadow: 0 8px 24px rgba(7, 28, 99, 0.18);
  backdrop-filter: blur(12px);
}

/* Let the warm hero background reach toward the FAQ topic menu with one
   shallow, organic handoff rather than a hard horizontal break. */
.faq-hero-wave {
  height: clamp(72px, 6vw, 100px);
  margin-top: -1px;
  background: #fbfaf8;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 34%,
    88% 48%,
    73% 66%,
    57% 78%,
    42% 74%,
    27% 57%,
    13% 42%,
    0 30%
  );
}

.inner-page--faqs .faq-hero-wave + .section {
  padding-top: clamp(32px, 3.5vw, 52px);
  padding-bottom: 0;
}

.inner-page--faqs .faq-group:last-child {
  margin-bottom: clamp(16px, 1.5vw, 24px);
}

@media (min-width: 769px) {
  .inner-page--faqs .hero__split {
    transform: translateY(15%);
  }
}

@media (max-width: 1120px) {
  .inner-page .inner-proof-strip__grid {
    width: calc(100% - 48px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 0;
    padding: 18px 22px;
  }
  .inner-proof-strip__item {
    padding-inline: 16px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .inner-proof-strip__item:nth-child(2) { border-right: 0; }
  .inner-page .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inner-page .page-layout { grid-template-columns: 1fr; }
  .inner-page .sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .inner-page .hero:not(.hero--home) { padding: 116px 0 66px !important; }
  .inner-page .hero__split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .inner-page .hero__illustration { min-height: 0; }
  .inner-page .hero__illustration img { max-height: 320px; }
  .inner-proof-strip { height: auto; padding: 18px 0; }
  .inner-page .inner-proof-strip__grid {
    width: calc(100% - 32px);
    transform: none;
    grid-template-columns: 1fr 1fr;
    padding: 14px;
  }
  .inner-proof-strip__item {
    min-height: 46px;
    padding: 0 10px;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  .inner-proof-strip__item strong { font-size: 0.8rem; }
  .inner-proof-strip__icon { width: 34px; height: 34px; flex-basis: 34px; }
  .inner-page .inner-proof-strip + .inner-content-section { padding-top: 72px; }
  .inner-page .steps-list,
  .inner-page .usp-grid,
  .inner-page .sidebar { grid-template-columns: 1fr; }
  .inner-page .step-item { min-height: 0; }
  .inner-page--faqs .faq-jump { position: static; }
  .faq-hero-wave { height: 56px; }
  .inner-page--faqs .faq-hero-wave + .section { padding-top: 28px; }
}

@media (max-width: 480px) {
  .inner-page .inner-proof-strip__grid {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 14px;
  }

  .inner-proof-strip__item,
  .inner-proof-strip__item:nth-child(2),
  .inner-page--buying .inner-proof-strip__item:last-child,
  .service-journey-page .inner-proof-strip__item:last-child {
    grid-column: auto;
    min-height: 52px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(7, 28, 99, 0.11);
  }

  .inner-proof-strip__item:last-child,
  .inner-page--buying .inner-proof-strip__item:last-child,
  .service-journey-page .inner-proof-strip__item:last-child {
    border-bottom: 0;
  }
}
/* Hide old FAQ + icons — replaced by CSS chevron */
.faq-item__icon {
  display: none !important;
}
/* ============================================
   Inner Page Hero: Split layout with illustration
   ============================================ */
.hero:not(.hero--home) .hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.hero__illustration {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__illustration img {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(7, 28, 99, 0.08));
}

/* Responsive — stack on mobile */
@media (max-width: 768px) {
  .hero:not(.hero--home) .hero__split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__illustration img {
    max-width: 280px;
    margin: 0 auto;
  }
  .hero:not(.hero--home) .hero__content {
    max-width: 100%;
  }
}

/* Final inner-page specificity guards. */
@media (min-width: 769px) {
  .inner-page .hero:not(.hero--home) .hero__split {
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    gap: clamp(48px, 7vw, 104px);
  }
  .inner-page .hero__illustration img {
    max-width: 590px;
  }
}

/* Three supported quote journeys: buying, selling, and buying + selling. */
@media (min-width: 701px) {
  .qw-type-grid--pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Dedicated quote page: one focused composition rather than a second hero. */
.inner-page--quote .homepage-quote-section {
  padding-top: clamp(150px, 13vw, 190px);
  min-height: 100vh;
}
.inner-page--quote .homepage-quote-layout {
  align-items: start;
}
.inner-page--quote .homepage-quote-intro {
  position: sticky;
  top: 130px;
  align-self: start;
  width: 100%;
  min-width: 0;
}
.inner-page--quote .homepage-quote-intro h1 {
  max-width: 520px;
  margin: 12px 0 18px;
  font-size: clamp(2.75rem, 4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.inner-page--quote .homepage-quote-intro > p {
  max-width: 430px;
  color: var(--color-text-muted);
}
.quote-page-illustration {
  width: min(100%, 510px);
  margin: 28px auto 0;
  display: block;
  filter: drop-shadow(0 20px 32px rgba(7, 28, 99, 0.08));
}

.inner-page--quote .homepage-quote-intro::before {
  display: none;
}

.inner-page--quote .homepage-quote-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inner-page--quote .homepage-quote-callout {
  align-self: center;
  text-align: center;
}

/* Keep the short introductory statement close to the next proof section. */
.inner-page--why .inner-proof-strip + .inner-content-section {
  padding-top: 56px;
  padding-bottom: 52px;
}
.inner-page--why .personal-touch-section {
  padding-top: 76px;
}

.hero-google-proof__mobile {
  display: none;
}

@media (max-width: 900px) {
  .inner-page--quote .homepage-quote-section { padding-top: 118px; }
  .inner-page--quote .homepage-quote-intro { position: static; }
}

/* ============================================
   HOMEPAGE MOBILE EDITION
   A deliberate phone composition, not a compressed desktop layout.
   Everything in this block is isolated below 768px so the signed-off
   desktop presentation remains unchanged.
   ============================================ */
@media (max-width: 767px) {
  :root {
    --phone-gutter: clamp(15px, 5.15vw, 22px);
  }

  html {
    scroll-padding-top: 76px;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .container,
  .hero--quote > .container,
  .why-cpl-section > .container,
  .homepage-quote-section > .container,
  .journey-v3 > .container,
  .services-v4 > .container,
  .reviews-v2 > .container,
  .client-stories .container {
    width: 100%;
    max-width: none;
    padding-left: var(--phone-gutter);
    padding-right: var(--phone-gutter);
  }

  .section-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.22em !important;
  }

  /* Header */
  .header {
    position: sticky;
    min-height: 72px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 6px 22px rgba(7, 28, 99, 0.07);
    backdrop-filter: blur(14px);
  }

  .header .container {
    min-height: 72px;
    padding: 10px var(--phone-gutter);
  }

  .header__logo img,
  .header__logo svg {
    width: auto;
    height: 49px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f0f9fc;
  }

  /* Hero: text, real artwork, then live Google proof */
  .gradient-zone {
    background: #f7f5f1;
  }

  .hero--home,
  .hero--quote {
    min-height: 0;
    padding: 38px 0 48px !important;
    background:
      radial-gradient(circle at 82% 38%, rgba(1, 160, 233, 0.10), transparent 32%),
      #f7f5f1;
  }

  .hero--quote > .container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hero--quote .hero__content {
    max-width: none;
    text-align: left;
  }

  .hero--quote h1,
  .hero--quote .hero-title {
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 10.15vw, 2.82rem);
    line-height: 0.98;
    letter-spacing: -0.048em;
    font-weight: 800;
  }

  .hero--quote .hero-title__line {
    display: block;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero--quote .hero-title__line--accent {
    color: var(--color-accent);
  }

  .hero--quote .hero__subtitle {
    max-width: 355px;
    margin: 0 0 22px;
    color: #52677b;
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero--quote .hero__actions {
    margin-bottom: 14px;
  }

  .btn--hero-quote {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
  }

  .hero__media {
    display: block !important;
    order: 2;
    width: clamp(232px, 72vw, 306px);
    margin: 8px auto 0;
  }

  .hero__media::before {
    display: none;
  }

  .hero__media-card {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  .hero__media-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    filter: none;
  }

  .hero-motion-line {
    display: none;
  }

  .hero-google-proof {
    order: 3;
    width: 100%;
    max-width: 350px;
    min-height: 58px;
    margin: 16px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(7, 28, 99, 0.10);
  }

  .hero-google-proof__mobile {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.5vw, 7px);
    color: var(--color-primary);
    font-size: clamp(0.65rem, 2.75vw, 0.78rem);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  .hero-google-proof__google {
    display: inline-flex;
    font-family: Arial, sans-serif;
    font-size: clamp(1.05rem, 4.7vw, 1.28rem);
    letter-spacing: -0.08em;
    font-weight: 500;
  }

  .hero-google-proof__google span:nth-child(1),
  .hero-google-proof__google span:nth-child(4) { color: #4285f4; }
  .hero-google-proof__google span:nth-child(2),
  .hero-google-proof__google span:nth-child(6) { color: #ea4335; }
  .hero-google-proof__google span:nth-child(3) { color: #fbbc05; }
  .hero-google-proof__google span:nth-child(5) { color: #34a853; }

  .hero-google-proof__stars {
    color: #f9b400;
    font-size: clamp(0.78rem, 3.5vw, 0.94rem);
    letter-spacing: 0.01em;
  }

  .hero-google-proof__score,
  .hero-google-proof__mobile strong {
    font-weight: 800;
  }

  .hero-google-proof__divider {
    width: 1px;
    height: 16px;
    margin: 0 1px;
    background: rgba(7, 28, 99, 0.20);
  }

  .hero-google-proof > :not(.hero-google-proof__mobile):not(script) {
    display: none !important;
  }

  /* On phones the live hero widget becomes a concise proof pill. The same
     Trustindex data remains live; only the long desktop review carousel is
     withheld here so it does not delay the quote journey. */
  .hero-google-proof .ti-reviews-container,
  .hero-google-proof .ti-controls {
    display: none !important;
  }

  .hero-google-proof .ti-widget,
  .hero-google-proof .ti-widget-container,
  .hero-google-proof .ti-footer,
  .hero-google-proof .ti-fade-container {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-google-proof .ti-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .hero-google-proof .ti-fade-container {
    width: 100% !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .hero-google-proof .ti-fade-container > .ti-rating-text:first-child {
    display: none !important;
  }

  .hero-google-proof .ti-large-logo {
    order: 1;
  }

  .hero-google-proof .ti-stars {
    order: 2;
    white-space: nowrap !important;
  }

  .hero-google-proof .ti-fade-container > .ti-rating-text:nth-of-type(2) {
    order: 3;
    white-space: nowrap !important;
    font-size: 0.74rem !important;
  }

  .hero-google-proof .ti-large-logo img {
    width: 76px !important;
    height: auto !important;
  }

  .hero-google-proof .ti-stars img {
    width: 17px !important;
    height: 17px !important;
  }

  .hero-google-proof .ti-rating-text,
  .hero-google-proof .ti-stars,
  .hero-google-proof .ti-large-logo {
    margin: 0 !important;
  }

  /* Why CPL follows the hero immediately, using the real illustration/icons */
  .why-cpl-section--alt {
    padding: 58px 0 48px !important;
    background: #fff;
  }

  .why-cpl-section--alt::before {
    top: -22px;
    height: 23px;
  }

  .why-cpl__layout {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .why-cpl__image {
    order: 1;
  }

  .why-cpl__artwork {
    width: clamp(180px, 54vw, 232px);
    max-width: 235px;
    flex-basis: auto;
    aspect-ratio: 2 / 3;
  }

  .why-motion-line {
    display: none !important;
  }

  .why-cpl__content {
    order: 2;
  }

  .why-cpl__content .section-label {
    margin-bottom: 10px;
  }

  .why-cpl__content h2 {
    max-width: 370px;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    
    
    
  }

  .why-cpl__lead {
    margin-bottom: 24px;
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .why-cpl__facts {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
  }

  .why-cpl__fact {
    min-width: 0;
    min-height: 0;
    padding: 18px;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    border: 1px solid rgba(7, 28, 99, 0.09) !important;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(7, 28, 99, 0.055);
  }

  .why-cpl__fact:nth-child(2),
  .why-cpl__fact:nth-child(3) {
    background: #f7fbfd;
  }

  .why-cpl__fact-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 0;
  }

  .why-cpl__fact h3 {
    margin-bottom: 6px;
    font-size: 1.08rem;
    line-height: 1.18;
  }

  .why-cpl__fact p {
    font-size: 0.92rem;
    line-height: 1.48;
  }

  .why-cpl__live-review {
    display: none;
  }

  /* Four promises become one bold, compact 2x2 banner */
  .quote-reassurance-section {
    padding: 0 var(--phone-gutter) 28px;
    background: #fff;
  }

  .quote-reassurance-strip {
    padding: 0;
    transform: none;
  }

  .quote-reassurance-strip > .container {
    padding: 0;
  }

  .quote-reassurance-strip .why-cpl__badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(7, 28, 99, 0.08);
    box-shadow: 0 12px 28px rgba(7, 28, 99, 0.10);
  }

  .quote-reassurance-strip .why-cpl__badge,
  .quote-reassurance-strip .why-cpl__badge + .why-cpl__badge {
    min-width: 0;
    min-height: 92px;
    padding: 15px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 0;
  }

  .quote-reassurance-strip .why-cpl__badge:nth-child(odd) {
    border-right: 1px solid rgba(7, 28, 99, 0.12);
  }

  .quote-reassurance-strip .why-cpl__badge:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(7, 28, 99, 0.12);
  }

  .quote-reassurance-strip .why-cpl__badge-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .quote-reassurance-strip .why-cpl__badge-icon svg {
    width: 21px;
    height: 21px;
  }

  .quote-reassurance-strip .why-cpl__badge strong {
    font-size: 0.83rem;
    line-height: 1.22;
  }

  /* Quote is the primary mobile task */
  .quote-reassurance-section + .homepage-quote-section,
  .homepage-quote-section {
    padding: 34px 0 54px !important;
    background: #fcfbf8;
  }

  .homepage-quote-layout {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px 16px 18px !important;
    overflow: hidden;
    border-radius: 22px !important;
    background: var(--color-accent-light) !important;
  }

  .homepage-quote-intro {
    text-align: left;
  }

  .homepage-quote-intro::before {
    width: 260px;
    height: 260px;
    left: -105px;
    bottom: -20px;
    opacity: 0.7;
  }

  .homepage-quote-intro h2 {
    max-width: 330px;
    margin: 8px 0 12px;
    font-family: 'Montserrat', sans-serif;
    
    
    
  }

  .homepage-quote-intro > p {
    margin-bottom: 10px !important;
    font-size: 0.95rem;
  }

  .homepage-quote-illustration {
    display: block !important;
    width: min(92%, 310px);
    margin: -4px auto -20px;
  }

  .homepage-quote-illustration img {
    width: 100%;
    height: auto;
  }

  .homepage-quote-panel {
    margin: 0;
    padding: 0;
    border-radius: 17px;
  }

  .home-quote-card.qw-card {
    min-height: 0;
    padding: 22px 15px;
    border-radius: 17px !important;
    box-shadow: 0 14px 34px rgba(7, 28, 99, 0.10) !important;
  }

  .homepage-quote-panel .qw-progress {
    margin-bottom: 24px;
  }

  .homepage-quote-panel .qw-progress__steps {
    gap: 4px;
  }

  .homepage-quote-panel .qw-progress__dot {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }

  .homepage-quote-panel .qw-progress__steps::before {
    top: 14px;
  }

  .home-quote-card .qw-step__header h2 {
    font-size: 1.4rem;
  }

  .home-quote-card .qw-step__header p {
    font-size: 0.88rem;
  }

  .home-quote-card .qw-type-grid--pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .home-quote-card .qw-type-card {
    min-width: 0;
    min-height: 112px;
    padding: 14px 7px !important;
    border-radius: 12px;
  }

  .home-quote-card .qw-type-card__title {
    font-size: 0.74rem;
    line-height: 1.2;
  }

  .homepage-quote-benefits--horizontal {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    width: 100%;
    padding: 12px 0 0 !important;
  }

  .homepage-quote-benefits--horizontal li {
    padding: 10px 8px;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .homepage-quote-disclaimer {
    margin-top: 12px;
    padding: 0 12px;
    font-size: 0.7rem;
    line-height: 1.4;
  }

  /* How We Work retains the beloved card rhythm and real family artwork */
  .journey-v3 {
    padding: 64px 0 58px;
  }

  .journey-v3::before {
    top: -22px;
    height: 23px;
  }

  .journey-v3__top {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 32px;
    gap: 22px;
  }

  .journey-v3__text h2 {
    margin: 10px 0 16px;
    
    
    
  }

  .journey-v3__text p {
    font-size: 0.98rem;
  }

  .journey-v3__image {
    position: relative;
    right: auto;
    bottom: auto;
    display: flex !important;
    width: 100%;
    justify-content: center;
  }

  .journey-v3__image img {
    width: min(116%, 450px);
    max-width: none;
    transform: none;
  }

  .journey-v3__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: none;
    margin: 0;
    padding-left: 16px;
  }

  .journey-v3__grid::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 1px;
    top: 30px;
    bottom: 30px;
    width: 3px;
    border-radius: 99px;
    background: var(--color-accent);
  }

  .journey-v3__line {
    display: none;
  }

  .journey-v3__card {
    min-height: 0;
    padding: 19px 18px !important;
    border-radius: 16px;
  }

  .journey-v3__card::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 28px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px #f7f5f1;
  }

  .journey-v3__card-head {
    margin-bottom: 12px;
  }

  .journey-v3__num {
    font-size: 2.5rem;
  }

  .journey-v3__num-divider {
    height: 36px;
  }

  .journey-v3__badge {
    width: 48px;
    height: 48px;
  }

  .journey-v3__badge svg {
    width: 31px;
    height: 31px;
  }

  .journey-v3__card p {
    max-width: none;
    font-size: 0.9rem;
  }

  /* Services: generous landscape cards with the existing CPL illustrations */
  .services-v4 {
    padding: 66px 0 74px;
  }

  .services-v4::before {
    top: -22px;
    height: 23px;
  }

  .services-v4__header {
    margin-bottom: 30px;
    text-align: left;
  }

  .services-v4__header h2 {
    margin: 10px 0 14px;
    
    
    
  }

  .services-v4__header h2 br {
    display: none;
  }

  .services-v4__header p {
    margin: 0;
    text-align: left;
    font-size: 0.96rem;
  }

  .services-v4__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .services-v4__card {
    min-height: 220px;
    flex-direction: row;
    border-radius: 18px;
  }

  .services-v4__card-copy {
    flex: 0 0 49%;
    padding: 22px 8px 20px 20px;
  }

  .services-v4__card-copy h3 {
    font-size: 1.2rem;
  }

  .services-v4__card-copy p {
    font-size: 0.82rem;
    line-height: 1.42;
  }

  .services-v4__card-img {
    flex: 1;
    height: auto;
    min-width: 0;
    padding: 12px 10px 8px 0;
  }

  .services-v4__card-img img {
    width: 100%;
    max-height: 190px;
    object-fit: contain;
  }

  /* Compact high-contrast conversion banner */
  .cta-banner-section {
    padding: 26px var(--phone-gutter);
  }

  .cta-banner-section .container {
    max-width: none;
    padding: 0;
  }

  .cta-banner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px;
    border-radius: 18px;
  }

  .cta-banner__headline h2 {
    font-size: 1.75rem;
    line-height: 1.16;
  }

  .cta-banner__copy {
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.16);
    border-bottom: 1px solid rgba(255,255,255,0.16);
  }

  .cta-banner__actions {
    align-items: stretch !important;
  }

  /* Live reviews remain the evidence layer, without invented cards */
  .reviews-v2 {
    padding: 64px 0 54px;
  }

  .reviews-v2__top {
    display: block;
  }

  .reviews-v2__intro {
    margin-bottom: 24px;
  }

  .reviews-v2__intro h2 {
    margin: 9px 0 14px;
    
    
    
  }

  .reviews-v2__intro p {
    font-size: 0.96rem;
  }

  .reviews-v2__illustration {
    display: none;
  }

  .reviews-v2__cards {
    display: block;
    width: 100%;
    min-height: 260px;
  }

  .reviews-v2__cards > div,
  .reviews-v2__cards > iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* One strong client film, using the supplied decorative assets */
  .client-stories {
    padding: 58px 0 64px;
    clip-path: polygon(0 1.2%, 50% 0, 100% 1.2%, 100% 98.8%, 50% 100%, 0 98.8%);
  }

  .client-stories__panel {
    padding: 0;
  }

  .client-stories__header {
    max-width: none !important;
    margin-bottom: 26px;
    text-align: left;
  }

  .client-stories__header h2 {
    max-width: 360px;
    margin: 9px 0 14px;
    
    
    
    
  }

  .client-stories__header p {
    margin: 0;
    font-size: 0.94rem;
  }

  .client-stories__video-wrap {
    width: 100%;
  }

  .client-stories__video,
  .client-stories__video-wrap {
    border-radius: 15px;
  }

  .client-stories__duration {
    left: 10px;
    bottom: 10px;
    padding: 6px 9px;
    font-size: 0.57rem;
    letter-spacing: 0.09em;
  }

  .client-stories__decor {
    display: none;
  }

  .footer-trust-bridge {
    height: auto;
    padding: 14px 0;
    background: #f7f5f1;
  }

  .footer-trust-bridge > div,
  .footer-trust-bridge > iframe {
    width: calc(100% - (var(--phone-gutter) * 2));
    max-width: 520px;
    transform: none;
  }

  .footer {
    padding: 34px 0 22px;
  }

  .footer__grid {
    gap: 20px;
    padding-bottom: 28px;
  }

  .footer__logo img,
  .footer__logo svg {
    height: 54px;
  }

  .footer__links {
    gap: 2px 18px;
  }

  .footer__heading {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .footer__contact-item {
    margin-bottom: 8px;
  }

  .footer__bottom {
    padding: 18px 0 16px;
  }

  .footer__bottom p {
    margin-bottom: 6px;
  }

  .scroll-top {
    right: 14px !important;
    bottom: 14px !important;
  }
}

@media (max-width: 359px) {
  :root {
    --phone-gutter: 14px;
  }

  .container,
  .hero--quote > .container,
  .why-cpl-section > .container,
  .homepage-quote-section > .container,
  .journey-v3 > .container,
  .services-v4 > .container,
  .reviews-v2 > .container,
  .client-stories .container {
    padding-left: var(--phone-gutter);
    padding-right: var(--phone-gutter);
  }

  .hero--quote h1,
  .hero--quote .hero-title {
    font-size: clamp(1.9rem, 10vw, 2.15rem);
  }

  .hero__media {
    width: min(72vw, 230px);
  }

  .hero-google-proof__mobile {
    gap: 4px;
    padding-inline: 9px;
  }

  .quote-reassurance-strip .why-cpl__badge strong {
    font-size: 0.76rem;
  }

  .quote-reassurance-strip .why-cpl__badge {
    padding-inline: 10px;
  }

  .home-quote-card .qw-type-card__title {
    font-size: 0.68rem;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  .hero--quote .hero__subtitle {
    max-width: 375px;
  }

  .hero__media {
    width: clamp(282px, 72vw, 306px);
  }

  .why-cpl__artwork {
    width: clamp(210px, 54vw, 232px);
  }
}

@media (max-width: 767px) {
  .why-cpl-section--alt .why-cpl__image {
    display: none !important;
  }

  .why-cpl-section--alt .why-cpl__layout {
    gap: 0;
  }
}

/* ============================================
   WHY CPL — dedicated page composition
   Mirrors the finished homepage language without
   reusing its generic inner-page hero decoration.
   ============================================ */


.inner-page--why .why-page-hero::before,
.inner-page--why .why-page-hero::after {
  display: none !important;
}

.inner-page.inner-page--why .hero.why-page-hero:not(.hero--home) {
  min-height: 820px;
  padding: clamp(104px, 8.5vw, 138px) 0 101px !important;
  overflow: visible;
  z-index: 2;
  background: #f7f5f1 !important;
}

.inner-page--why .why-page-hero .hero__split {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  grid-template-areas:
    "art art"
    "title statement"
    "support support";
  align-items: end;
  gap: clamp(14px, 1.5vw, 24px) clamp(30px, 5vw, 88px) !important;
}

.inner-page--why .why-page-hero__title {
  grid-area: title;
  text-align: right;
}

.inner-page--why .why-page-hero__title h1 {
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(3.25rem, 4.2vw, 4.8rem);
  line-height: 0.98;
}

.inner-page--why .why-page-hero__statement {
  grid-area: statement;
  margin: 0;
  color: #ed765e;
  font-family: var(--font-heading);
  font-size: clamp(3.25rem, 4.2vw, 4.8rem);
  font-weight: 800;
  line-height: 0.98;
  text-align: left;
}

.inner-page--why .why-page-hero__support {
  grid-area: support;
  width: min(100%, 780px);
  justify-self: center;
  text-align: center;
}

.inner-page--why .why-page-hero__support .hero__subtitle {
  margin: 0 auto;
  color: #66748a;
  max-width: 680px !important;
  line-height: 1.65;
}

.inner-page--why .why-page-hero__review-badge {
  position: absolute;
  bottom: -33px;
  left: 50%;
  z-index: 3;
  min-width: 352px;
  min-height: 66px;
  padding: 14px 24px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(7, 28, 99, 0.12);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transform: translateX(-50%);
}

.inner-page--why .why-page-hero__review-badge:hover { color: var(--color-primary); transform: translateX(-50%) translateY(-1px); }
.why-page-hero__google {
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: 1px;
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  transform: scaleX(1.04);
  transform-origin: left center;
}
.why-page-hero__google span:nth-child(1), .why-page-hero__google span:nth-child(4) { color: #4285f4; }
.why-page-hero__google span:nth-child(2), .why-page-hero__google span:nth-child(6) { color: #ea4335; }
.why-page-hero__google span:nth-child(3) { color: #fbbc05; }
.why-page-hero__google span:nth-child(5) { color: #34a853; }
.why-page-hero__stars { color: #f9b400; font-size: 1rem; letter-spacing: 0.04em; }
.why-page-hero__review-divider { width: 1px; height: 20px; margin: 0 2px; background: rgba(7, 28, 99, 0.2); }

.inner-page--why .why-page-hero .hero__illustration {
  grid-area: art;
  position: relative;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.inner-page--why .why-page-hero .hero__illustration img {
  display: block;
  width: min(100%, 920px);
  max-width: 920px;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  filter: none;
}

.inner-page--why .why-page-difference.inner-content-section,
.inner-page--why .why-page-difference {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 8vw, 132px) 0;
  background: #ffffff !important;
}

.why-page-difference__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.75fr);
  align-items: center;
  gap: clamp(58px, 7vw, 112px);
}

.why-page-difference__content h2 {
  margin: 14px 0 24px;
  color: var(--color-primary);
  font-size: clamp(3rem, 4.4vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.why-page-difference__lead {
  margin-bottom: 14px;
  color: #44536a;
  font-size: 1.12rem;
  line-height: 1.65;
}

.why-page-difference__content > p:not(.why-page-difference__lead) {
  color: #66748a;
  line-height: 1.65;
}

.why-page-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.why-page-fact {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-height: 136px;
  padding: 22px 20px;
  border: 1px solid rgba(7, 28, 99, 0.09);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(7, 28, 99, 0.055);
}

.why-page-fact:nth-child(2),
.why-page-fact:nth-child(3) {
  background: #f7fbfd;
}

.why-page-fact img {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  object-fit: contain;
}

.why-page-fact h3 {
  margin: 1px 0 6px;
  color: var(--color-primary);
  font-size: 1.05rem;
  line-height: 1.2;
}

.why-page-fact p {
  margin: 0;
  color: #66748a;
  font-size: 0.92rem;
  line-height: 1.48;
}

.why-page-tailored {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 21px 23px;
  border-radius: 18px;
  background: #eef9fe;
}

.why-page-tailored__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: var(--color-coral);
  color: #ffffff;
}

.why-page-tailored h3 {
  margin: 0 0 4px;
  color: var(--color-primary);
  font-size: 1.08rem;
}

.why-page-tailored p {
  margin: 0;
  color: #66748a;
  line-height: 1.5;
}

.why-page-difference__cta { margin-top: 26px; }

.why-page-difference__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 700px;
}

.why-page-difference__art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 9% 0 7%;
  border-radius: 48% 52% 44% 56%;
  background: #eef9fe;
}

.why-page-difference__art img {
  position: relative;
  z-index: 1;
  width: min(100%, 510px);
  max-height: 720px;
  object-fit: contain;
}

.why-page-inline-cta {
  padding: 0 0 24px;
  background: #ffffff;
}

.why-page-inline-cta__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  padding: 34px 42px;
  border-radius: 24px;
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(7, 28, 99, 0.15);
}

.why-page-inline-cta .section-label { color: var(--color-accent) !important; }

.why-page-inline-cta h2 {
  max-width: 780px;
  margin: 8px 0 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 2.5vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.inner-page--why .why-page-journey.inner-content-section,
.inner-page--why .why-page-journey {
  padding-top: 110px;
  background: #f7f3ee !important;
}

.inner-page--why .why-page-journey > .container {
  max-width: 1080px;
}

.inner-page--why .why-page-journey .journey-v3__top {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  min-height: 0;
  margin-bottom: clamp(40px, 4vw, 52px);
}

.inner-page--why .why-page-journey .journey-v3__image {
  position: relative;
  right: auto;
  bottom: auto;
  justify-content: flex-end;
}

.inner-page--why .why-page-journey .journey-v3__image img {
  width: min(120%, 672px);
  max-width: 672px;
  max-height: none;
  height: auto;
  transform: none;
}

.inner-page--why .cta-banner-section--footer {
  padding-top: 72px;
  background: #ffffff;
}

/* Inner-page footer breathing room.
   A legacy page-break rule above intentionally removed this spacing when a
   large house illustration met the footer. That illustration is no longer
   used, so retain a considered gap before the footer content on desktop. */
@media (min-width: 901px) {
  .inner-page .footer {
    padding-top: clamp(56px, 4.5vw, 72px) !important;
  }
}

@media (max-width: 980px) {
  .why-page-difference__layout {
    grid-template-columns: 1fr;
  }

  .why-page-difference__art {
    min-height: 0;
  }

  .why-page-difference__art img {
    max-height: 600px;
  }
}

@media (max-width: 768px) {
  .inner-page.inner-page--why .hero.why-page-hero:not(.hero--home) {
    min-height: 0;
    padding: 98px 0 52px !important;
    overflow: visible;
  }

  .inner-page--why .why-page-hero .hero__split {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "art"
      "title"
      "statement"
      "support";
    gap: 22px !important;
    text-align: left;
  }

  .inner-page--why .why-page-hero__title,
  .inner-page--why .why-page-hero__statement,
  .inner-page--why .why-page-hero__support {
    width: 100%;
    justify-self: stretch;
    text-align: left;
  }

  .inner-page--why .why-page-hero__title h1,
  .inner-page--why .why-page-hero__statement {
    font-size: clamp(2.65rem, 12vw, 3.55rem);
  }

  .inner-page--why .why-page-hero__support .hero__subtitle { margin-left: 0; }

  .inner-page--why .why-page-hero__review-badge {
    width: calc(100% - 36px);
    max-width: 360px;
    min-width: 0;
    bottom: -31px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .inner-page--why .why-page-hero .hero__illustration img {
    max-width: 100%;
    max-height: 340px;
  }

  .inner-page--why .why-page-journey .journey-v3__image { justify-content: center; }
  .inner-page--why .why-page-journey .journey-v3__image img {
    width: min(100%, 450px);
    max-width: 450px;
  }

  .why-page-facts { grid-template-columns: 1fr; }

  .why-page-fact { min-height: 0; }

  .why-page-difference__art::before { inset: 8% 4%; }

  .why-page-inline-cta__panel {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
  }
}
/* Privacy policy */
.footer__legal-links {
  margin-top: 0.65rem;
}

.footer__legal-links a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.privacy-hero {
  padding: 11.5rem 0 5rem;
  background: var(--color-bg);
}

.privacy-hero__inner {
  max-width: 52rem;
}

.privacy-hero h1 {
  margin: 0.45rem 0 1rem;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.98;
}

.privacy-hero p {
  max-width: 43rem;
  font-size: 1.1rem;
}

.privacy-hero__date {
  margin-top: 1.35rem;
  font-size: 0.9rem !important;
  font-weight: 600;
}

.privacy-content {
  background: #fff;
}

.privacy-content__layout {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 47rem);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.privacy-summary {
  position: sticky;
  top: 8.75rem;
  padding: 2rem;
  border-radius: 1.25rem;
  color: #fff;
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.inner-page--privacy .privacy-summary h2 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: 1.5rem;
}

.privacy-summary p {
  margin: 0 0 0.85rem;
  color: rgba(255, 255, 255, 0.86);
}

.inner-page--privacy .privacy-summary a {
  color: var(--color-accent);
  font-weight: 700;
}

.privacy-copy section + section {
  margin-top: 2.75rem;
}

.privacy-copy h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
}

.privacy-copy p,
.privacy-copy li {
  line-height: 1.75;
}

.privacy-copy ul {
  margin: 0.75rem 0 1.1rem;
  padding-left: 1.25rem;
}

@media (max-width: 900px) {
  .privacy-hero {
    padding: 9rem 0 4rem;
  }

  .privacy-content__layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .privacy-summary {
    position: static;
  }
}

/* Contact delivery states and unobtrusive anti-spam controls */
.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-consent p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.contact-consent a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.contact-captcha {
  min-height: 0;
}

.contact-captcha:not([hidden]) {
  min-height: 65px;
}

.contact-form__status {
  min-height: 1.5em;
  margin: 0;
  font-weight: 650;
}

.contact-form__status:empty {
  min-height: 0;
}

.contact-form__status[data-state="success"] { color: #21661f; }
.contact-form__status[data-state="error"] { color: #9f2525; }

/* Compact mobile menu control: accessible target, restrained icon. */
@media (max-width: 768px) {
  /* The legacy page-break footer rule removes top padding globally. Restore
     one consistent mobile breathing space above the CPL logo on every page. */
  .footer.footer.footer {
    padding-top: 34px !important;
  }

  .header .nav {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    gap: 0;
    padding: 94px 24px 120px;
    background: var(--color-bg, #faf8f5);
  }

  /* Keep the real CPL mark in view when the full-screen menu is open. */
  .header__logo {
    position: relative;
    z-index: 1002;
  }

  .header .nav::before {
    content: "Make your\A move.";
    display: block;
    width: 100%;
    max-width: 430px;
    margin: 22px auto 30px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.85rem, 14vw, 4rem);
    font-weight: 750;
    line-height: 0.96;
    letter-spacing: -0.045em;
    white-space: pre-line;
  }

  .header .nav > .nav__link,
  .header .nav > .nav__dropdown {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .header .nav > .nav__link,
  .header .nav .nav__dropdown-toggle {
    min-height: 62px;
    padding: 16px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(34, 167, 226, 0.42);
    box-shadow: none;
    color: var(--color-primary);
    font-size: clamp(1.25rem, 5.4vw, 1.55rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
  }

  .header .nav .nav__dropdown-toggle {
    justify-content: space-between;
  }

  .header .nav .nav__dropdown-toggle::after {
    margin-left: 12px;
    font-size: 0.7em;
  }

  .header .nav .nav__dropdown-menu {
    display: none;
    width: 100%;
    margin: 12px 0 14px;
    padding: 5px 18px;
    box-sizing: border-box;
    border: 1px solid rgba(7, 28, 99, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 30px rgba(7, 28, 99, 0.08);
  }

  .header .nav .nav__dropdown.active .nav__dropdown-menu {
    display: block;
  }

  .header .nav .nav__dropdown-menu a {
    padding: 14px 0;
    border-radius: 0;
    color: var(--color-primary);
    font-size: 0.98rem;
    font-weight: 650;
  }

  .header .nav .nav__dropdown-menu a + a {
    border-top: 1px solid rgba(7, 28, 99, 0.1);
  }

  /* Reuse the existing quote link as the menu's strong closing action. */
  .header .nav.active + .header__cta {
    display: block;
    position: absolute;
    top: calc(100dvh - 82px);
    right: 24px;
    bottom: auto;
    left: 24px;
    z-index: 1002;
  }

  .header .nav.active + .header__cta .header__quote {
    display: flex;
    width: 100%;
    min-height: 58px;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 1.05rem;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(7, 28, 99, 0.14);
    border-radius: 11px;
    z-index: 1003;
    background: rgba(255, 255, 255, 0.9);
  }

  .nav-toggle span {
    left: 50%;
    width: 21px;
    height: 2px;
    margin-left: -10.5px;
  }

  .nav-toggle span:nth-child(1) { top: 14px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { bottom: 14px; }

  .nav-toggle.active span:nth-child(1) { top: 50%; }
  .nav-toggle.active span:nth-child(3) { bottom: 50%; }

  .footer__links a,
  .footer__legal-links a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
  }
}

/* Preserve the same hierarchy on shorter phones without forcing the closed
   menu to extend beyond the visible screen. The open services panel can still
   scroll naturally when its four destinations are revealed. */
@media (max-width: 768px) and (max-height: 760px) {
  .header .nav {
    padding-top: 78px;
    padding-bottom: 96px;
  }

  .header .nav::before {
    margin-top: 12px;
    margin-bottom: 18px;
    font-size: clamp(2.35rem, 12vw, 3rem);
  }

  .header .nav > .nav__link,
  .header .nav .nav__dropdown-toggle {
    min-height: 52px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: clamp(1.12rem, 5vw, 1.35rem);
  }

  .header .nav .nav__dropdown-menu {
    margin-top: 8px;
    margin-bottom: 10px;
  }

  .header .nav .nav__dropdown-menu a {
    padding: 10px 0;
  }

  .header .nav.active + .header__cta {
    top: calc(100dvh - 70px);
  }

  .header .nav.active + .header__cta .header__quote {
    min-height: 50px;
  }
}

@media (max-width: 768px) and (max-height: 640px) {
  .header .nav {
    padding: 66px 20px 72px;
  }

  .header .nav::before {
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: clamp(2.05rem, 11vw, 2.35rem);
  }

  .header .nav > .nav__link,
  .header .nav .nav__dropdown-toggle {
    min-height: 46px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: clamp(1.02rem, 4.8vw, 1.2rem);
  }

  .header .nav.active + .header__cta {
    top: calc(100dvh - 62px);
    right: 20px;
    left: 20px;
  }

  .header .nav.active + .header__cta .header__quote {
    min-height: 46px;
  }
}

/* ============================================
   CPL polish — shared component rhythm
   These definitions own the refined heading and component treatments.
   Existing page-specific layout and quote behaviour remain above.
   ============================================ */
html { scroll-padding-top: 112px; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--color-accent-cta);
  outline-offset: 4px;
}
.why-cpl__content h2,
.journey-v3__text h2,
.services-v4__header h2,
.reviews-v2__intro h2,
.client-stories__header h2 {
  font-size: var(--type-section);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.homepage-quote-intro h2 {
  font-size: clamp(2.15rem, 3vw, 2.8rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.section-label,
.why-cpl__content .section-label,
.services-v4__header .section-label,
.client-stories__header .section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.5;
  margin-bottom: 16px;
  color: var(--color-accent-cta) !important;
}
.section--ink .section-label,
.quote-cta-section .section-label,
.why-page-inline-cta .section-label { color: var(--color-accent) !important; }
.why-cpl__lead,
.journey-v3__text p,
.services-v4__header p,
.reviews-v2__intro > p,
.client-stories__header p { line-height: 1.65; }

/* One quiet action style, with no floating or bouncing controls. */
.btn--primary,
.header__quote,
.cta-banner__btn {
  border-radius: var(--radius-button);
  background: var(--color-accent-cta);
  color: #fff;
  box-shadow: 0 4px 12px rgba(7, 28, 99, 0.1);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.btn--primary:hover,
.header__quote:hover,
.cta-banner__btn:hover {
  background: var(--color-primary);
  box-shadow: 0 5px 15px rgba(7, 28, 99, 0.13);
  transform: none;
  color: #fff;
}
.cta-banner__btn:hover { background: #0c3a83; }
.header {
  border: 1px solid rgba(7, 28, 99, 0.045);
  box-shadow: 0 3px 16px rgba(7, 28, 99, 0.04);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.header.scrolled { box-shadow: 0 3px 16px rgba(7, 28, 99, 0.055); }
@media (min-width: 1001px) {
  .header .container { padding-block: 10px; }
  .header__logo img { height: 52px; }
  .nav__link--active { box-shadow: none; background: var(--color-accent-light); }
  .nav__link { border-radius: 7px; }
}

/* Retain the artwork, with fewer extra lines competing around it. */
.hero-motion-line,
.why-motion-line { display: none; }
.hero--quote .hero__subtitle { max-width: 540px; }
.why-cpl-section--alt { padding-block: var(--space-section); }
.why-cpl__content h2 { max-width: 620px; }
.why-cpl__fact { padding-block: 20px; }
.why-cpl__fact p { line-height: 1.6; }
.homepage-quote-panel .qw-card { box-shadow: var(--shadow-card); }
.homepage-quote-panel .qw-btn--primary { background: var(--color-accent-cta); }

.journey-v3 { padding-block: var(--space-section); }
.journey-v3__top { min-height: 280px; margin-bottom: 48px; }
.journey-v3__text h2 { max-width: 560px; }
.journey-v3__grid { max-width: 94%; margin: 48px auto 0; gap: 24px !important; }
.journey-v3__line { left: -20px; width: calc(100% + 40px); opacity: 0; }
.journey-v3__line path { stroke: var(--color-accent); stroke-width: 2; }
.journey-v3__line circle { fill: var(--color-primary); }
.journey-v3__card {
  padding: 28px !important;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.journey-v3__num {
  font-size: 2.75rem !important;
  font-weight: 600 !important;
  color: var(--color-primary);
}
.journey-v3__badge { width: 54px !important; height: 54px !important; }
.journey-v3__badge svg { width: 32px !important; height: 32px !important; }
.journey-v3__card p { max-width: none !important; line-height: 1.65; }
.journey-v3__num-divider { height: 36px; }

.services-v4 { padding: var(--space-section) 0 96px; background: var(--color-white); }
.services-v4__container { max-width: 1320px; }
.services-v4__header { margin-bottom: 40px; }
.services-v4__card { min-height: 292px; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.services-v4__card-copy { flex: 0 0 54%; padding: 30px 12px 28px 30px; min-width: 0; }
.services-v4__card-copy h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.25; text-wrap: balance; }
.services-v4__card-copy p { font-size: 0.98rem; line-height: 1.65; }
.services-v4__card-img { flex: 1 1 46%; min-width: 0; padding: 16px 16px 12px 0; }
.services-v4__arrow {
  width: 40px; height: 40px; border-width: 1px;
  margin-top: auto; align-self: flex-start;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.services-v4__card-copy p { margin-bottom: 24px; }
.services-v4__card:hover .services-v4__arrow,
.services-v4__card:focus-visible .services-v4__arrow {
  background: var(--color-accent-cta); border-color: var(--color-accent-cta); transform: none;
}
.services-v4__card:focus-visible .services-v4__arrow .icon { color: #fff; }
.services-v4__card:hover { box-shadow: 0 8px 24px rgba(7, 28, 99, 0.08); }
.cta-banner { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.cta-banner__headline h2 { line-height: 1.3; }
.reviews-v2 { padding-top: 72px; }
.reviews-v2__top { grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr); gap: 48px; margin-bottom: 0; }
.reviews-v2__intro h2 { font-size: clamp(2.35rem, 3.3vw, 2.9rem); }
.client-stories { padding-top: 64px; }
.client-stories__header { max-width: 820px !important; margin-bottom: 32px; }
.client-stories__header h2 { white-space: normal; }
.client-stories__header h2 span { color: var(--color-primary) !important; }
.client-stories__header p { max-width: 660px; margin-inline: auto; }
.client-stories__route-path { stroke: var(--color-primary); opacity: 0.22; }
.client-stories__decor-piece { will-change: auto; }
.client-stories__decor-piece--tick { top: 28%; right: 4%; }
.client-stories__video { box-shadow: var(--shadow-card); border-radius: var(--radius-card); }

/* Inner pages share the same heading scale and settled motion language. */
.inner-page .inner-content-section > .container > h2,
.inner-page .inner-content-section .split__content > h2,
.inner-page .inner-content-section > .container > .text-center > h2,
.inner-page .about-story__content > h2,
.service-journey-page .buying-journey__header h2,
.why-page-difference__content > h2 {
  font-size: var(--type-section);
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.inner-page .faq-group h2,
.inner-page .contact-grid h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.inner-page .cta-banner h2 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); letter-spacing: -0.02em; }
.inner-page .inner-tip-card { box-shadow: none; }
.inner-page .usp-card { box-shadow: var(--shadow-card) !important; }
.about-story__panel,
.about-director__quote { transform: none; }

@media (min-width: 769px) and (max-width: 1000px) {
  .journey-v3__grid { max-width: 100%; gap: 16px !important; }
  .journey-v3__card { padding: 22px !important; }
  .journey-v3__badge { width: 44px !important; height: 44px !important; right: 16px !important; }
  .journey-v3__badge svg { width: 27px !important; height: 27px !important; }
  .reviews-v2__top { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 90px; }
  .why-cpl__content h2,
  .journey-v3__text h2,
  .services-v4__header h2,
  .reviews-v2__intro h2,
  .client-stories__header h2,
  .inner-page .inner-content-section > .container > h2,
.inner-page .inner-content-section .split__content > h2,
.inner-page .inner-content-section > .container > .text-center > h2,
.inner-page .about-story__content > h2,
  .service-journey-page .buying-journey__header h2,
  .why-page-difference__content > h2 { font-size: var(--type-section-mobile); line-height: 1.12; }
  .homepage-quote-intro h2 { font-size: clamp(1.85rem, 8vw, 2.2rem); }
  .inner-page .faq-group h2,
  .inner-page .contact-grid h2 { font-size: 1.35rem; }
  .inner-page .cta-banner h2 { font-size: 1.65rem; }
  .section-label,
  .why-cpl__content .section-label,
  .services-v4__header .section-label,
  .client-stories__header .section-label { font-size: 0.7rem; letter-spacing: 0.16em; margin-bottom: 12px; }
  .journey-v3 { padding-block: 56px; }
  .journey-v3__top { min-height: 0; margin-bottom: 32px; }
  .journey-v3__grid { max-width: none; margin: 0; gap: 16px !important; }
  .journey-v3__card { padding: 22px !important; }
  .journey-v3__num { font-size: 2.25rem !important; }
  .journey-v3__badge { width: 44px !important; height: 44px !important; }
  .journey-v3__badge svg { width: 27px !important; height: 27px !important; }
  .services-v4 { padding: 56px 0 76px; }
  .services-v4__header { margin-bottom: 28px; }
  .services-v4__card { min-height: 236px; }
  .services-v4__card-copy { flex-basis: 58%; padding: 24px 8px 24px 22px; }
  .services-v4__card-copy h3 { font-size: 1.2rem; text-wrap: pretty; }
  .services-v4__card-copy p { font-size: 0.9rem; line-height: 1.55; margin-bottom: 20px; }
  .services-v4__card-img { flex: 1 1 42%; padding: 12px 10px 12px 0; }
  .reviews-v2 { padding-top: 48px; }
  .reviews-v2__top { grid-template-columns: 1fr; gap: 28px; }
  .client-stories { padding-top: 48px; }
  .client-stories__header { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .qw-step, .qw-success, .qw-error, .qw-field-error { animation: none !important; }
}
@media (min-width: 1001px) {
  .hero--quote .hero-title {
    font-size: clamp(3.25rem, 5.35vw, 4.85rem);
    line-height: 1.04;
    letter-spacing: 0;
  }
}
@media (min-width: 769px) {
  body:not(.inner-page) .homepage-quote-illustration { margin: 12px 0 0 -12px; }
  body:not(.inner-page) .homepage-quote-illustration img { width: 100%; max-width: 430px; }
  .journey-v3__top { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 16px; min-height: 0; max-width: 1180px; margin-inline: auto; }
  .journey-v3__image { display: flex; position: relative; right: auto; bottom: auto; width: 100%; justify-content: flex-start; }
  .journey-v3__image img { width: 112%; max-width: 660px; flex-shrink: 0; transform: none; }
}
@media (max-width: 768px) {
  .header .nav .nav__dropdown-toggle { width: 100%; }
  body:not(.inner-page) .homepage-quote-illustration { margin: 18px auto 0; width: 100%; justify-content: center; }
  body:not(.inner-page) .homepage-quote-illustration img { width: auto; max-width: 100%; height: 190px; object-fit: contain; }
}
.homepage-quote-panel .btn--primary { background: var(--color-accent-cta); }
.homepage-quote-panel .btn--primary:hover { background: var(--color-primary); }
/* Tablet navigation keeps the logo and a useful touch target in view. */
@media (min-width: 769px) and (max-width: 1000px) {
  .header .container { display: flex; gap: 20px; }
  .header__logo { display: flex; }
  .header__logo img { display: block; height: 48px; }
  .header__cta { margin-left: auto; }
  .nav-toggle { display: block; flex: 0 0 28px; }
  .header .nav {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: 18px; box-shadow: var(--shadow-card); padding: 20px;
    flex-direction: column; align-items: stretch; gap: 4px;
    max-height: calc(100dvh - 130px); overflow-y: auto;
  }
  .header .nav.active { display: flex; }
  .header .nav__link { display: flex; min-height: 46px; align-items: center; }
  .header .nav__dropdown-toggle { width: 100%; }
  .header .nav__dropdown-menu { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .header .nav__dropdown.active .nav__dropdown-menu { display: block; }
  .hero--quote { min-height: 0; padding: 132px 0 48px !important; }
  .hero--quote > .container { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 28px; align-items: center; }
  .hero--quote .hero-title { font-size: clamp(2.1rem, 4.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.035em; }
  .hero--quote .hero__subtitle { font-size: 1rem; }
  .hero--quote .hero__media { max-width: none; width: 100%; }
  .hero--quote .hero__media-card img { transform: none; }
  .hero-google-proof { grid-column: 1 / -1; }
}
.inner-page .hero .btn--primary { background: var(--color-accent-cta); box-shadow: 0 4px 12px rgba(7,28,99,0.1); }
.inner-page .hero .btn--primary:hover { background: var(--color-primary); }
@media (min-width: 769px) and (max-width: 1000px) {
  .nav-toggle { flex-basis: 44px; width: 44px; height: 44px; }
  .nav-toggle span { left: 10px; width: 24px; height: 2px; }
  .nav-toggle span:nth-child(1) { top: 13px; }
  .nav-toggle span:nth-child(3) { bottom: 13px; }
  .nav-toggle.active span:nth-child(1) { top: 50%; }
  .nav-toggle.active span:nth-child(3) { bottom: 50%; }
  .why-cpl__layout { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 28px; }
  .why-cpl__artwork { max-width: 260px; }
  .why-cpl__content h2 { font-size: 2.35rem; }
  .why-cpl__facts { grid-template-columns: 1fr; }
  .why-cpl__fact { padding: 14px 0; border-right: 0; }
}
/* Form headings have a functional scale independent of editorial sections. */
.inner-page .home-quote-card .qw-step__header h2 {
  font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance;
}
/* Bright brand accents remain in artwork; text uses readable companion tones. */
.hero--quote .hero-title__line--accent,
h1 span[style*="--color-accent"],
h2 span[style*="--color-accent"] { color: var(--color-accent-text) !important; }
h2 .text-coral,
h2 span[style*="--color-coral"] { color: var(--color-coral-text) !important; }
.client-stories__header h2 span { color: var(--color-primary) !important; }
.inner-page .hero__label { color: var(--color-accent-cta) !important; }
.qw-type-card:has(input:focus-visible) { outline: 3px solid var(--color-accent-cta); outline-offset: 4px; }

/* Expressive scroll pass: CPL's exact cyan and artwork-led movement. */
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .hero-motion-line, .why-motion-line { display: block; }
  .hero-motion-line__path { stroke: var(--color-accent); stroke-dasharray: 3000; stroke-dashoffset: 3000; }
  .why-motion-line__path { stroke: var(--color-accent); opacity: 0.65; }
}
.client-stories__route-path { stroke: var(--color-accent); opacity: 0.65; }
.client-stories__header h2 span { color: var(--color-coral) !important; }
.btn--primary:hover,
.header__quote:hover,
.cta-banner__btn:hover,
.homepage-quote-panel .btn--primary:hover,
.inner-page .hero .btn--primary:hover { background: var(--color-accent-hover); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary .icon, .cta-banner__btn .icon { transition: transform 220ms ease; }
  .btn--primary:hover .icon, .cta-banner__btn:hover .icon { transform: translateX(4px); }
}

/* Keep paired artwork and copy together as a single composition. */
@media (min-width: 1001px) {
  .why-cpl__layout { gap: 40px; }
  .reviews-v2__top { gap: 28px; }
  .inner-page--why .why-page-journey .journey-v3__top { gap: 16px; }
  .inner-page--why .why-page-journey .journey-v3__image { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .journey-v3__top { gap: 12px; }
}


@media (min-width: 769px) and (max-width: 1000px) {
  .journey-v3__image img { width: 100%; }
}


/* Match v4's illustration ink; preserve CPL cyan on the process route. */
.hero-motion-line__path, .why-motion-line__path { stroke: #071a5f; opacity: 0.72; }
.journey-v3__line path { stroke-width: 4.5; }
@media (min-width: 769px) {
  .journey-v3__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1080px; gap: 8px; }
  .inner-page--service .hero:not(.hero--home) .hero__split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 24px !important; max-width: 1180px;
  }
  .inner-page--service .hero__illustration { justify-content: flex-start; }
  .inner-page--service .hero__illustration img { width: 112%; max-width: 660px; max-height: none; flex-shrink: 0; }
}
@media (min-width: 769px) and (max-width: 1000px) {
  .inner-page--service .hero__illustration img { width: 100%; }
}




/* Testimonials: tighten the gap between hero and Client Stories. */
.inner-page--testimonials .hero:not(.hero--home) {
  padding-bottom: 50px !important;
}
.inner-page--testimonials .testimonials-page-reviews {
  padding-top: 60px;
}
@media (max-width: 768px) {
  .inner-page--testimonials .hero:not(.hero--home) { padding-bottom: 50px !important; }
}


.why-cpl__badge-icon .fee-pound, .inner-proof-strip__icon .fee-pound { font-family: Arial, sans-serif; font-size: 32px; font-weight: 600; line-height: 1; }




/* Give the service introduction and its coral rule room below the heading. */
.inner-page--service h2 + .page-intro {
  margin-top: clamp(24px, 2vw, 32px);
}

/* Quote presentation: clean currency, roomier opening choices, one success action. */
.home-quote-card .qw-type-card__pound { display: inline-flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: 32px; font-weight: 600; line-height: 1; }
.home-quote-card .qw-success__actions { display: flex; justify-content: center; }
@media (min-width: 769px) {
  body:not(.inner-page) .home-quote-card .qw-type-card { min-height: 150px; }
}

/* Dedicated quote page: reassurance around the existing five-step form. */
.inner-page--quote .homepage-quote-section { padding-bottom: 56px; min-height: 0; }
.inner-page--quote .homepage-quote-layout { background: transparent !important; padding: 0 !important; overflow: visible; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr) !important; gap: clamp(30px, 5vw, 76px); }
.inner-page--quote .homepage-quote-intro { position: static; }
.inner-page--quote .homepage-quote-intro h1 { font-size: clamp(2.4rem, 3.6vw, 3.65rem); line-height: 1.06; margin-top: 10px; }
.inner-page--quote .homepage-quote-intro > p { max-width: 490px; font-size: 1.08rem; }
.quote-intro-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--color-primary); font-size: .8rem; font-weight: 600; margin: 20px 0 26px; }
.quote-intro-meta span::before { content: '\2713'; color: var(--color-sage-dark); margin-right: 6px; }
.quote-page-benefits { list-style: none; padding: 0; display: grid; gap: 17px; }
.quote-page-benefits li { display: flex; gap: 14px; align-items: center; margin: 0; }
.quote-page-benefits img { width: 43px; height: 46px; object-fit: contain; flex-shrink: 0; }
.quote-page-benefits strong { display: block; color: var(--color-primary); font-size: 1rem; }
.quote-page-benefits span { display: block; font-size: .89rem; }
.quote-page-rating { margin-top: 25px; max-width: 100%; }
.quote-page-privacy { font-size: .78rem; text-align: center; margin: 0; }
.quote-page-privacy a { text-decoration: underline; }
.quote-next { background: var(--color-white); padding: 54px 0 60px; }
.quote-next > .container, .quote-page-support > .container { max-width: 1320px; }
.inner-page--quote .quote-next h2, .inner-page--quote .quote-page-support h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.15; margin: 10px 0 24px; }
.quote-next__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; list-style: none; padding: 0; margin-top: 30px; }
.quote-next__steps li { border-top: 1px solid var(--color-border); padding-top: 20px; margin: 0; }
.quote-next__number { color: var(--color-coral-dark); font-size: .85rem; font-weight: 700; }
.quote-next__steps h3 { font-size: 1.15rem; margin: 10px 0; }
.quote-next__steps p { margin: 0; }
.quote-page-support { padding: 65px 0; background: #fff; }
.quote-page-support > .quote-page-support__grid { max-width: 900px; }
.quote-page-faq { min-width: 0; }
.quote-page-faq details { border-bottom: 1px solid var(--color-border); padding: 18px 0; }
.quote-page-faq summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.quote-page-faq details p { margin: 14px 0 0; font-size: .95rem; }
@media (max-width: 1000px) {
  .inner-page--quote .homepage-quote-layout { display: flex; flex-direction: column; gap: 28px; }
  .inner-page--quote .homepage-quote-panel { width: 100%; }
  .inner-page--quote .homepage-quote-intro > p { max-width: 680px; }
  .quote-page-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .inner-page--quote .homepage-quote-section { padding-bottom: 36px !important; }
  .inner-page--quote .homepage-quote-intro h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .quote-intro-meta { gap: 5px 14px; margin: 15px 0; font-size: .73rem; }
  .quote-page-benefits { gap: 12px; }
  .quote-page-benefits li { gap: 7px; align-items: flex-start; }
  .quote-page-benefits img { width: 28px; height: 32px; }
  .quote-page-benefits strong { font-size: .8rem; line-height: 1.4; }
  .quote-page-benefits span { display: none; }
  .quote-page-rating { margin-top: 16px; }
  .quote-next, .quote-page-support { padding: 38px 0; }
  .quote-next__steps { grid-template-columns: 1fr; gap: 25px; }
}

/* Artwork and process cards carry the homepage's character into the quote journey. */
.inner-page--quote .homepage-quote-intro h1 { font-size: clamp(2.4rem, 3.1vw, 3.1rem); max-width: 530px; }
.quote-page-artwork { position: relative; isolation: isolate; width: min(100%, 350px); margin: 18px auto 0; }
.quote-page-artwork::before { content: ''; position: absolute; inset: 18% 9% 2% -7%; z-index: -1; background: #f9ddd2; border-radius: 50% 45% 48% 42%; transform: rotate(-12deg); }
.quote-page-artwork img { width: 100%; height: auto; }
.inner-page--quote .homepage-quote-panel .quote-page-rating { margin-top: 10px; }
.inner-page--quote .quote-page-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 26px; margin-top: 30px; border-top: 1px solid var(--color-border); }
.inner-page--quote .quote-page-benefits img { width: 40px; height: 44px; }
.inner-page--quote .quote-page-benefits strong { font-size: .94rem; }
.inner-page--quote .quote-page-benefits span { font-size: .82rem; }
.quote-next { background: #f0f9fc; }
.quote-next__steps { gap: 26px; position: relative; isolation: isolate; }
.quote-next__steps::before { content: ''; position: absolute; left: -10px; right: -10px; top: 78px; height: 4px; background: var(--color-accent); z-index: -1; border-radius: 4px; }
.quote-next__steps li { border: 0; border-radius: 20px; padding: 26px 28px 30px; background: #fff; box-shadow: 0 8px 26px rgba(7,28,99,.045); }
.quote-next__card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.quote-next__number { font-size: 2.65rem; font-weight: 500; line-height: 1; color: var(--color-primary); border-right: 1px solid #f9ddd2; padding-right: 18px; }
.quote-next__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--color-accent); color: #fff; }
.quote-next__icon .icon { width: 22px; height: 22px; }
.quote-next__steps li:nth-child(2) .quote-next__icon { background: var(--color-coral); }
.quote-next__steps li:nth-child(3) .quote-next__icon { background: var(--color-primary); }
.quote-next__steps h3 { margin: 8px 0 12px; }
@media (max-width: 1000px) {
  .inner-page--quote .homepage-quote-intro { display: grid; grid-template-columns: minmax(0,1fr) 220px; column-gap: 22px; }
  .inner-page--quote .homepage-quote-intro > :not(.quote-page-artwork) { grid-column: 1; }
  .quote-page-artwork { grid-column: 2; grid-row: 1 / 5; align-self: center; margin: 0; }
  .inner-page--quote .quote-page-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .inner-page--quote .homepage-quote-intro { display: block; }
  .inner-page--quote .homepage-quote-intro h1 { font-size: clamp(2rem,8.5vw,2.8rem); }
  .quote-page-artwork { width: 170px; margin: 8px auto 0; }
  .inner-page--quote .quote-page-benefits { gap: 18px 12px; padding-top: 22px; margin-top: 22px; }
  .inner-page--quote .quote-page-benefits strong { font-size: .8rem; }
  .inner-page--quote .quote-page-benefits img { width: 30px; height: 34px; }
  .quote-next__steps::before { left: 26px; top: 0; bottom: 0; width: 4px; height: auto; }
  .quote-next__steps li { padding: 22px; }
}

/* Balance the form against the full introduction and artwork on desktop. */
@media (min-width: 1001px) {
  .inner-page--quote .homepage-quote-panel { align-self: center; }
}

/* Use the homepage's unified pale-blue stage for the dedicated quote page. */
body.inner-page--quote { background: #fff; }
.quote-page-stage { background: #f0f9fc; border-radius: 28px; padding: clamp(28px, 3.6vw, 52px); overflow: hidden; }
.inner-page--quote .quote-page-stage .homepage-quote-layout { grid-template-columns: minmax(0, .64fr) minmax(0, 1fr) !important; gap: clamp(28px, 3.6vw, 52px); }
.inner-page--quote .quote-page-stage .homepage-quote-intro h1 { font-size: clamp(2.1rem, 3.2vw, 3rem); line-height: 1.12; letter-spacing: -.035em; }
.inner-page--quote .quote-page-stage .homepage-quote-intro > p { font-size: 1rem; }
.quote-page-stage .quote-page-artwork { width: min(115%, 440px); max-width: none; margin: 32px 0 0 -25px; }
.quote-page-stage .quote-page-artwork::before { inset: 15% 12% 0 -5%; }
.inner-page--quote .quote-page-stage .quote-page-benefits { margin-top: 26px; border-top-color: rgba(7,28,99,.09); }
.inner-page--quote .quote-page-stage .quote-page-benefits span { display: none; }
.inner-page--quote .quote-page-stage .quote-page-benefits strong { font-weight: 500; font-size: .88rem; }
@media (max-width: 1000px) and (min-width: 601px) {
  .quote-page-stage .quote-page-artwork { width: 100%; margin: 0; }
}
@media (max-width: 600px) {
  .quote-page-stage { padding: 24px 16px; border-radius: 22px; }
  .inner-page--quote .quote-page-stage .homepage-quote-intro h1 { font-size: clamp(1.8rem, 7.8vw, 2.5rem); }
  .quote-page-stage .quote-page-artwork { width: 190px; margin: 16px auto 0; }
  .inner-page--quote .quote-page-stage .quote-page-benefits strong { font-size: .78rem; }
}

/* Match the homepage reassurance strip's simple cyan symbols. */
.quote-page-benefit-icon { width: 28px; height: 28px; color: var(--color-accent); flex-shrink: 0; }
.inner-page--quote .quote-page-stage .quote-page-benefits li { justify-content: center; align-items: center; gap: 12px; }
@media (max-width: 600px) {
  .quote-page-benefit-icon { width: 24px; height: 24px; }
  .inner-page--quote .quote-page-stage .quote-page-benefits li { justify-content: flex-start; gap: 8px; }
}

/* The opening screen includes timeframe so its space has a useful purpose. */
.home-quote-card .qw-opening-timing { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.qw-opening-timing .form-field__legend { display: block; margin-bottom: 14px; color: var(--color-primary); font-weight: 600; }
.qw-opening-timing .qw-toggle-group { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.qw-opening-timing .qw-toggle__label { width: 100%; text-align: center; justify-content: center; }
@media (max-width: 480px) {
  .home-quote-card .qw-opening-timing { margin-top: 22px; padding-top: 20px; }
  .qw-opening-timing .qw-toggle-group { grid-template-columns: 1fr; }
}

/* Timing choices use the same coral selected state as transaction choices. */
.home-quote-card .qw-opening-timing .qw-toggle__label {
  display: flex; align-items: center; justify-content: center;
  min-height: 76px; padding: 15px 12px;
  border: 2px solid rgba(7, 28, 99, .14); border-radius: 12px;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  line-height: 1.3; text-align: center; color: var(--color-primary);
}
.home-quote-card .qw-opening-timing .qw-toggle input:checked + .qw-toggle__label {
  background: #fff0eb; border: 2px solid #f47761;
  border-radius: 12px; color: var(--color-coral);
}
.home-quote-card .qw-opening-timing .qw-toggle:has(input:checked)::after {
  content: '\2713'; position: absolute; top: -5px; right: -5px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50%; background: var(--color-coral);
  color: #fff; font: 700 11px/1 var(--font-body); box-shadow: 0 1px 4px rgba(7,28,99,.18);
  pointer-events: none;
}
.home-quote-card .qw-opening-timing .qw-toggle:focus-within .qw-toggle__label { outline: none; }
.home-quote-card .qw-opening-timing .qw-toggle input:focus-visible + .qw-toggle__label {
  outline: 3px solid rgba(32,168,232,.45); outline-offset: 3px;
}
.home-quote-card .qw-type-card__title { width: 100%; text-align: center; font-size: .9rem; line-height: 1.3; }

/* Shared quote selection: CPL blue with a pale-blue fill and corner tick. */
.home-quote-card .qw-type-grid--pills .qw-type-card.selected,
.home-quote-card .qw-type-grid--pills .qw-type-card:has(input:checked) {
  background: #eff8fc !important;
  border-color: var(--color-accent) !important;
}
.home-quote-card .qw-type-grid--pills .qw-type-card:has(input:checked) .qw-type-card__icon,
.home-quote-card .qw-type-grid--pills .qw-type-card:has(input:checked) .qw-type-card__title {
  color: var(--color-accent) !important;
}
.home-quote-card .qw-type-grid--pills .qw-type-card.selected::after {
  background: var(--color-accent) !important;
}
.home-quote-card .qw-opening-timing .qw-toggle input:checked + .qw-toggle__label {
  background: #eff8fc;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.home-quote-card .qw-opening-timing .qw-toggle:has(input:checked)::after {
  background: var(--color-accent);
}

/* Keep pointer selection to one border; reserve the outer ring for keyboard focus. */
.home-quote-card .qw-type-grid--pills .qw-type-card.selected::before,
.home-quote-card .qw-type-grid--pills .qw-type-card.selected::after,
.home-quote-card .qw-opening-timing .qw-toggle:has(input:checked)::after {
  content: none;
  display: none;
}
.home-quote-card .qw-type-grid--pills .qw-type-card:focus-within { outline: none; }
.home-quote-card .qw-type-grid--pills .qw-type-card:has(input:focus-visible) {
  outline: 3px solid rgba(32,168,232,.45);
  outline-offset: 3px;
}

/* Homepage compact quote layout: introduction followed directly by the form. */
@media (max-width: 980px) {
  body:not(.inner-page) .homepage-quote-illustration,
  body:not(.inner-page) .homepage-quote-intro::before { display: none !important; }
  body:not(.inner-page) .homepage-quote-layout { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Dedicated quote page: plain artwork on desktop, text then form when stacked. */
.inner-page--quote .quote-page-artwork::before { display: none; }
@media (max-width: 1000px) {
  .inner-page--quote .quote-page-stage .quote-page-artwork { display: none; }
  .inner-page--quote .quote-page-stage .homepage-quote-intro { display: block; }
}

/* Compact quote introduction: small artwork at the top right on both pages. */
@media (max-width: 1000px) {
  body:not(.inner-page) .homepage-quote-intro,
  .inner-page--quote .quote-page-stage .homepage-quote-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(82px, 26vw, 140px);
    column-gap: 10px; align-items: start;
  }
  body:not(.inner-page) .homepage-quote-intro > .section-label,
  .inner-page--quote .quote-page-stage .homepage-quote-intro > .section-label { grid-column: 1; grid-row: 1; }
  body:not(.inner-page) .homepage-quote-intro > h2,
  .inner-page--quote .quote-page-stage .homepage-quote-intro > h1 { grid-column: 1; grid-row: 2; font-size: clamp(1.45rem, 5.7vw, 2rem); line-height: 1.15; }
  body:not(.inner-page) .homepage-quote-intro > p,
  .inner-page--quote .quote-page-stage .homepage-quote-intro > p { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
  body:not(.inner-page) .homepage-quote-illustration,
  .inner-page--quote .quote-page-stage .quote-page-artwork {
    display: block !important; grid-column: 2; grid-row: 1 / 3; align-self: center;
    width: 100%; max-width: 140px; margin: 0; position: relative;
  }
  body:not(.inner-page) .homepage-quote-illustration img,
  .inner-page--quote .quote-page-stage .quote-page-artwork img { width: 100%; max-width: 100%; height: auto; margin: 0; }
  body:not(.inner-page) .homepage-quote-intro::before,
  .inner-page--quote .quote-page-artwork::before { display: none !important; }
}

/* Property flags: match tenure typography and centre the label within each choice. */
.home-quote-card .qw-purchase-flags label.qw-checkbox {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  line-height: 1.3; text-align: center; margin-bottom: 0;
}
.home-quote-card .qw-purchase-flags .qw-checkbox > span:last-child {
  display: block; width: 100%; margin: 0;
  font: inherit; line-height: inherit; text-align: center;
}

/* Give the quote introduction label more prominence. */
.homepage-quote-intro > .section-label { font-size: 1.125rem; }
@media (max-width: 768px) {
  .homepage-quote-intro > .section-label { font-size: 1.05rem; }
}

/* Remove the decorative coral backdrop from the homepage quote at every size. */
body:not(.inner-page) .homepage-quote-intro::before { display: none !important; }

.mobile-quote-shortcut { display: none; }
@media (max-width: 768px) {
  .mobile-quote-shortcut:not([hidden]) {
    display: inline-flex; position: fixed; z-index: 990;
    left: max(16px, env(safe-area-inset-left));
    bottom: calc(18px + env(safe-area-inset-bottom));
    min-height: 48px; padding: 13px 22px; gap: 14px;
    border-radius: 999px; background: var(--color-accent); color: #fff;
    font-size: 1rem; font-weight: 700;
    box-shadow: 0 5px 18px rgba(7,28,99,.18);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mobile-quote-shortcut:not([hidden]) {
    transform-origin: center;
    animation: quote-shortcut-enter 450ms cubic-bezier(.2,.8,.2,1) both,
      quote-shortcut-pulse 4s ease-in-out 1s infinite;
  }
  .mobile-quote-shortcut:hover,
  .mobile-quote-shortcut:focus-visible { animation: none; }
}
@keyframes quote-shortcut-enter {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes quote-shortcut-pulse {
  0%, 65%, 100% { transform: scale(1); }
  80% { transform: scale(1.025); }
}

/* === Mobile quote page: eliminate nested padding so card fills width === */
@media (max-width: 1000px) {
  .inner-page--quote .quote-page-stage {
    padding: 20px 0 0;
    border-radius: 0;
    background: transparent;
  }
  .inner-page--quote .homepage-quote-layout {
    padding: 0 !important;
    gap: 20px !important;
  }
  .inner-page--quote .homepage-quote-panel {
    margin: 0;
    padding: 0;
  }
  .inner-page--quote .home-quote-card.qw-card {
    padding: 28px 22px;
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 480px) {
  .inner-page--quote .home-quote-card.qw-card {
    padding: 24px 18px;
  }
}

/* === Journey grid: 2-col on mobile instead of 1-col === */
@media (max-width: 600px) {
  .journey-v3__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding-left: 0 !important;
  }
  .journey-v3__grid::before {
    display: none !important;
  }
  .journey-v3__card::before {
    display: none !important;
  }
  .journey-v3__line {
    display: none !important;
  }
  .journey-v3__card {
    padding: 18px !important;
  }
  .journey-v3__num {
    font-size: 1.8rem !important;
  }
  .journey-v3__badge {
    width: 36px !important;
    height: 36px !important;
  }
  .journey-v3__badge svg {
    width: 22px !important;
    height: 22px !important;
  }
  .journey-v3__card h3 {
    font-size: 0.9rem !important;
  }
  .journey-v3__card p {
    font-size: 0.82rem !important;
  }
}
/* === Service card images: larger on mobile === */
@media (max-width: 767px) {
  .services-v4__card-img {
    flex: 1 1 55% !important;
  }
  .services-v4__card-img img {
    max-height: none !important;
    width: 130% !important;
    max-width: 130% !important;
  }
}