body {
  background: var(--mdw-lavender);
  color: var(--mdw-ink);
  font-family: var(--mdw-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--mdw-font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1, .elementor-widget-heading h1.elementor-heading-title { font-weight: 800; line-height: 1.05; }
h2, .elementor-widget-heading h2.elementor-heading-title { font-weight: 800; line-height: 1.1; }
h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }

/* Headings and text pasted into Elementor text editors carry inline Arial and grey; only !important beats inline styles. */
.elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6)[style] {
  font-family: var(--mdw-font-display) !important;
  letter-spacing: -0.02em !important;
}
/* Only headings that carry their own inline colour are recoloured, so inherited colours (white on navy) survive. */
.elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6)[style*="color"] {
  color: var(--mdw-ink) !important;
}
.elementor-widget-text-editor :is(p, span, li, div)[style*="font-family"] {
  font-family: var(--mdw-font-body) !important;
}

/* Yellow highlight: add the CSS class "mdw-mark" to a heading or a <mark> inside it */
.mdw-mark, .elementor-heading-title mark {
  background: linear-gradient(transparent 58%, var(--mdw-yellow) 58% 92%, transparent 92%);
  color: inherit;
}

a { color: var(--mdw-indigo); }
a:hover, a:focus-visible { color: var(--mdw-indigo-dark); }
:focus-visible { outline: 3px solid var(--mdw-yellow); outline-offset: 2px; }

/* Links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1). */
:is(.mdw-prose, .elementor-widget-text-editor) a:not(.elementor-button):not(.mdw-btn):not(.wp-block-button__link) {
  color: var(--mdw-indigo);
  text-decoration: underline;
  text-decoration-color: rgb(59 46 176 / .35);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
:is(.mdw-prose, .elementor-widget-text-editor) a:not(.elementor-button):not(.mdw-btn):not(.wp-block-button__link):is(:hover, :focus-visible) {
  color: var(--mdw-indigo-dark);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Buttons: Elementor, Neve, Contact Form 7 */
.elementor-button,
.button, .button-primary,
.wp-block-button__link,
input[type="submit"], .wpcf7-submit {
  background: var(--mdw-indigo);
  color: #fff;
  border: 0;
  border-radius: var(--mdw-radius-pill);
  padding: 0.8em 1.5em;
  font-family: var(--mdw-font-body);
  font-weight: 700;
  transition: background-color .15s ease;
}
/* Elementor sets border-radius per button widget with a higher-specificity selector. */
.elementor-button { border-radius: var(--mdw-radius-pill) !important; }
.elementor-button:hover, .button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover, .wpcf7-submit:hover {
  background: var(--mdw-indigo-dark);
  color: #fff;
}

/* Cards: Elementor icon boxes, image boxes, posts, testimonials */
.elementor-widget-icon-box > .elementor-widget-container,
.elementor-widget-image-box > .elementor-widget-container,
.elementor-widget-testimonial > .elementor-widget-container,
.elementor-post, .elementor-price-table {
  background: var(--mdw-surface);
  border-radius: var(--mdw-radius-card);
  padding: 22px;
}
.elementor-post__thumbnail, .elementor-image-box-img img {
  border-radius: calc(var(--mdw-radius-card) - 6px);
}

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select,
:is(input, textarea, select).wpcf7-form-control:not(.wpcf7-submit) {
  background: var(--mdw-surface);
  border: 2px solid var(--mdw-line);
  border-radius: 14px;
  padding: 0.7em 0.9em;
  font-family: var(--mdw-font-body);
  color: var(--mdw-ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--mdw-indigo); outline: none; }

/* Bricolage Grotesque is wider than the Roboto sizes set in Elementor; cap headings on phones. */
/* Inline colours typed into Elementor headings: navy becomes indigo, the orange accent becomes the yellow highlight. */
.elementor-widget-heading [style*="#000b77" i], .elementor-widget-heading [style*="#000b78" i] { color: var(--mdw-indigo) !important; }
.elementor-widget-heading [style*="#EF7A1A" i] {
  color: inherit !important;
  background: linear-gradient(transparent 58%, var(--mdw-yellow) 58% 92%, transparent 92%);
}

@media (max-width: 767px) {
  .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2rem, 9vw, 2.5rem) !important; }
  .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Homepage logos saved as JPG/PNG on a white background (client carousel, partners): blend the white
   into the lavender page instead of showing white boxes. Scoped to these blocks: on dark sections the
   same blend would darken photos. */
.elementor-element-7e35fa8 img,
.elementor-element-737239e .elementor-widget-image img,
.elementor-element-fb54205 .elementor-widget-image img {
  mix-blend-mode: multiply;
}
/* Swiper's transformed wrapper isolates the blend: give the slides the page colour to blend against. */
.elementor-element-7e35fa8 .swiper-slide { background: var(--mdw-lavender); }
/* Some client logos carry a thin grey frame baked into the image: trim the edge. */
.elementor-element-7e35fa8 .swiper-slide-image { clip-path: inset(3px); }

/* Elementor wave dividers default to white (the old page background): match the lavender page.
   All three dividers on the site (homepage) use that default. */
html body .elementor-shape .elementor-shape-fill { fill: var(--mdw-lavender); }