:root {
  color-scheme: light;

  --brand-primary:    #1A3E6E;
  --brand-accent:     #4FA3DC;
  --brand-neutral:    #1F2C3C;
  --brand-bg:         #FFFFFF;
  --brand-on-primary: #FFFFFF;

  --brand-ink:        #16324F;
  --brand-field:      #F4F8FC;
  --brand-soft:       #E7EFF8;
  --brand-gold:       #F5B301;

  --color-primary:       var(--brand-primary);
  --color-primary-hover: #122E53;
  --color-accent:        var(--brand-accent);

  --color-accent-text:    #1D6699;  /* 5.30:1 on #E7EFF8 worst case; white label on it 6.15:1 */
  --color-accent-on-dark: #7FC0EC;  /* 5.44:1 on #1A3E6E */
  --focus-ring:           #1A3E6E;  /* 10.05:1 on #F4F8FC */

  --color-text:         var(--brand-neutral);
  --color-text-muted:   #4A5C70;    /* 6.44:1 on #F4F8FC */
  --color-text-on-dark: #D6E4F2;    /* 8.29:1 on #1A3E6E */
  --color-heading:      var(--brand-ink);

  --color-bg:      var(--brand-bg);
  --color-bg-alt:  var(--brand-field);
  --color-bg-soft: var(--brand-soft);
  --color-border:  #748DAA;         /* 3.21:1 on #F4F8FC */
  --color-hairline: #D5E2F0;

  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-label:   "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
  --sp-12: 3rem;  --sp-16: 4rem;  --sp-20: 5rem;  --sp-24: 6rem;
  --content-max: 75rem;
  --reading-max: 40rem;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-arch: 999px 999px 3px 3px;

  --mullion: rgba(255,255,255,.10);  /* #D6E4F2 body text 4.79:1 at a line crossing */
  --mullion-dark: rgba(26,62,110,.10);

  --shadow-card: 0 1px 2px rgba(22,50,79,.06), 0 8px 24px rgba(22,50,79,.07);
  --shadow-lift: 0 2px 4px rgba(22,50,79,.08), 0 18px 40px rgba(22,50,79,.13);

  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 700ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.1rem, 3.4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.7rem, 2.2vw + .9rem, 2.6rem); }
h3 { font-size: clamp(1.15rem, .6vw + .95rem, 1.4rem); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }

.h-xl { font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem); font-weight: 900; }

p { max-width: var(--reading-max); }
p + p { margin-top: var(--sp-4); }
.lead + p, p + ul, p + .mw-hero__actions, ul + p { margin-top: var(--sp-5); }
h1 + p, h2 + p, h3 + p, h2 + .lead, h1 + .lead { margin-top: var(--sp-4); }
p + h2, ul + h2, ol + h2 { margin-top: var(--sp-12); }
p + h3, ul + h3, ol + h3 { margin-top: var(--sp-8); }
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose a, p a { text-decoration: underline; text-underline-offset: 3px; }

strong { font-weight: 600; color: var(--color-heading); }

.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { max-width: 56rem; margin-inline: auto; padding-inline: var(--sp-5); }

section { padding-block: var(--sp-20); }
@media (max-width: 700px) { section { padding-block: var(--sp-12); } }

.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--sp-3);
}
.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--color-text-muted); max-width: 46rem; }
.section-title { margin-bottom: var(--sp-4); }
.section-head { margin-bottom: var(--sp-10); max-width: 48rem; }

.mw-tick-rule {
  height: 3px;
  background: var(--brand-primary);
  position: relative;
}
.mw-tick-rule::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 96px;
  background: var(--brand-accent);
}

.mw-archchip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-arch);
  background: var(--brand-soft);
  color: var(--color-accent-text);
  font-family: var(--font-label);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mw-droplets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.mw-droplets li { position: relative; padding-left: var(--sp-8); }
.mw-droplets li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 10px; height: 10px;
  background: var(--brand-accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.mw-droplets--dark li::before { background: var(--color-accent-on-dark); }

.mw-glass { position: relative; }
.mw-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--mullion) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(to bottom, var(--mullion) 0 1px, transparent 1px 33.333%);
}

.mw-ticks::before,
.mw-ticks::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px; height: 18px;
  border: 2px solid #FFFFFF;
  pointer-events: none;
}
.mw-ticks::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.mw-ticks::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.mw-arch-frame {
  position: relative;
  overflow: hidden;
  border-radius: 46% 46% 3px 3px / 26% 26% 3px 3px;
  background: var(--brand-soft);
}
.mw-arch-frame img { width: 100%; height: 100%; object-fit: cover; }
.mw-arch-frame > .mw-slot, .mw-figure > .mw-slot { height: 100%; }

.mw-figure { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--brand-soft); }
.mw-figure img { width: 100%; height: 100%; object-fit: cover; }
.mw-figure picture, .mw-arch-frame picture, .mw-hero__media picture { display: block; width: 100%; height: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  font-family: var(--font-label);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-indent: .1em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary { background: var(--color-accent-text); color: #FFFFFF; }
.btn-primary:hover { background: var(--color-primary); }

.btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--brand-soft); border-color: var(--color-primary); }

.btn-on-dark { background: #FFFFFF; color: var(--brand-primary); }
.btn-on-dark:hover { background: var(--color-text-on-dark); }

.btn-ghost-dark { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.12); border-color: #FFFFFF; }

.btn-lg { padding: var(--sp-5) var(--sp-10); font-size: .875rem; }

@media (max-width: 400px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-hairline);
  position: sticky; top: 0; z-index: 500;
}
.site-header__inner {
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--brand-primary); font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand__name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; letter-spacing: -.01em; }

.nav-desktop ul { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
.nav-desktop a {
  color: var(--brand-primary);
  font-family: var(--font-label);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding-block: var(--sp-2);
  position: relative;
}
.nav-desktop a:hover { text-decoration: none; }
.nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--brand-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }

.nav-desktop a.cta {
  background: var(--color-accent-text);
  color: #FFFFFF;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.nav-desktop a.cta:hover { background: var(--color-primary); }
.nav-desktop a.cta::after { display: none; }

.nav-mobile a[aria-current="page"] { color: var(--color-accent-on-dark); }
.nav-mobile li:last-child a {
  margin-top: var(--sp-5);
  background: #FFFFFF;
  color: var(--brand-primary);
  border-bottom: 0;
  border-radius: var(--radius-sm);
  text-align: center;
}
.nav-mobile li:last-child a:hover { background: var(--color-text-on-dark); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 2px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--brand-primary); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brand-primary); }

@media (max-width: 940px) {
  .nav-desktop { display: none; }
  .nav-toggle  { display: inline-flex; }
  .site-header__cta { display: none; }
}

.nav-mobile {
  padding: var(--sp-16) var(--sp-6) var(--sp-6);
  background: var(--brand-primary);
  border-left: 4px solid var(--brand-accent);
  color: #FFFFFF;
}
.nav-mobile__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: transparent; border: 2px solid rgba(255,255,255,.5);
  border-radius: var(--radius-sm); color: #FFFFFF;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.nav-mobile__close:hover { border-color: #FFFFFF; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.nav-mobile a {
  display: block; padding: var(--sp-4);
  color: #FFFFFF;
  font-family: var(--font-label);
  font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.nav-mobile a:hover { text-decoration: none; background: rgba(255,255,255,.1); }
.nav-mobile a[aria-current="page"] { color: var(--color-accent-on-dark); }
.nav-mobile .btn { margin-top: var(--sp-6); width: 100%; }

.skip-link { background: var(--brand-primary); color: #FFFFFF; border-radius: var(--radius-sm); }

.mw-hero {
  position: relative;
  background: var(--brand-primary);
  color: #FFFFFF;
  overflow: hidden;
  padding-block: 0;
}
.mw-hero__media { position: absolute; inset: 0; }
.mw-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* A portrait source in a wide hero band: the default centre crop takes the
   middle of the frame, which on the residential photo cuts the technician's
   head off. Bias the crop upward so the subject survives. Wide viewports only -
   narrow ones crop horizontally and already keep the whole height. */
@media (min-width: 901px) {
  .mw-hero--focus-upper .mw-hero__media img { object-position: center 10%; }
}
.mw-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(22,50,79,.94) 0%, rgba(26,62,110,.86) 42%, rgba(26,62,110,.40) 100%);
}
.mw-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.13) 0 1px, transparent 1px 20%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.13) 0 1px, transparent 1px 25%);
}
.mw-hero__inner {
  position: relative;
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-24) var(--sp-5) var(--sp-20);
}
@media (max-width: 700px) { .mw-hero__inner { padding-block: var(--sp-16) var(--sp-12); } }
/* Phones and tablets: the photo sits above the headline, uncovered, and the
   text sits on solid navy. Over the photo the subhead measured 2.58:1. */
@media (max-width: 900px) {
  .mw-hero__media { position: relative; inset: auto; aspect-ratio: 16 / 9; overflow: hidden; }
  .mw-hero__media::after, .mw-hero__grid { display: none; }
  .mw-hero__inner { padding-block: var(--sp-10) var(--sp-12); }
}

.mw-hero h1 { color: #FFFFFF; max-width: 18ch; }
.mw-hero .eyebrow { color: var(--color-accent-on-dark); }
.mw-hero__sub { font-size: 1.1875rem; color: var(--color-text-on-dark); max-width: 44ch; margin-top: var(--sp-5); }
.hero__actions, .mw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.hero__highlight, .mw-hero__highlight { color: var(--color-accent-on-dark); }
/* Once the pair stacks, content-width buttons read as a mistake. Stretch them. */
@media (max-width: 620px) {
  .hero__actions, .mw-hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions > .btn, .mw-hero__actions > .btn { width: 100%; }
}

.mw-hero__frost {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(233,242,250,.55) 0%, rgba(214,232,246,.42) 60%, rgba(255,255,255,.30) 100%);
  animation: mw-wipe var(--dur-slow) 240ms var(--ease-out) forwards;
}
.mw-hero__squeegee {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 120px; z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, rgba(126,192,236,.55) 60%, rgba(255,255,255,0) 100%);
  transform: translateX(-140px) skewX(-10deg);
  animation: mw-squeegee calc(var(--dur-slow) + 240ms) 240ms var(--ease-out) forwards;
}
@keyframes mw-wipe {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
@keyframes mw-squeegee {
  from { transform: translateX(-140px) skewX(-10deg); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: translateX(102vw) skewX(-10deg); opacity: 0; }
}

.mw-doors {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--sp-5);
  transform: translateY(-52px);
}
@media (max-width: 820px) { .mw-doors { grid-template-columns: 1fr; transform: translateY(-32px); } }

.mw-door {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background: #FFFFFF;
  border-top: 5px solid var(--brand-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  color: var(--color-text);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mw-door:hover { text-decoration: none; transform: translateY(-6px); }
.mw-door h2 { font-size: 1.45rem; margin-bottom: var(--sp-3); }
.mw-door p { color: var(--color-text-muted); font-size: 1rem; margin-bottom: var(--sp-5); }
.mw-door__go {
  font-family: var(--font-label);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-text);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: auto;
}
.mw-door__go::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.mw-door:hover .mw-door__go::after { transform: rotate(-45deg) translate(3px, 3px); }
.mw-door__icon { width: 44px; height: 44px; color: var(--color-accent-text); margin-bottom: var(--sp-5); }

.mw-proof {
  background: var(--brand-field);
  border-block: 1px solid var(--color-hairline);
  padding-block: var(--sp-10);
}
.mw-proof__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8);
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5);
  text-align: center;
}
@media (max-width: 820px) { .mw-proof__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.mw-proof__item { position: relative; }
.mw-proof__item + .mw-proof__item::before {
  content: ""; position: absolute; left: calc(var(--sp-8) / -2); top: 10%; bottom: 10%;
  width: 1px; background: var(--color-hairline);
}
@media (max-width: 820px) { .mw-proof__item + .mw-proof__item::before { display: none; } }
.mw-proof__num { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--brand-primary); line-height: 1; }
.mw-proof__label {
  font-family: var(--font-label); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-muted);
  margin-top: var(--sp-2);
}

.mw-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.mw-split--wide-left { grid-template-columns: 1.25fr 1fr; }
.mw-split--wide-right { grid-template-columns: 1fr 1.25fr; }
/* Centering is right when one side is a photo. When BOTH sides are text, it
   floats the list off the heading it belongs to - top-align those instead. */
.mw-split--top { align-items: start; }
@media (max-width: 900px) { .mw-split, .mw-split--wide-left, .mw-split--wide-right { grid-template-columns: 1fr; gap: var(--sp-10); } }
.mw-split__media { position: relative; aspect-ratio: 4 / 3; }
.mw-split--flip .mw-split__media { order: -1; }
@media (max-width: 900px) { .mw-split--flip .mw-split__media { order: 0; } }

.mw-panel-dark {
  background: var(--brand-primary);
  color: var(--color-text-on-dark);
  position: relative;
  overflow: hidden;
}
.mw-panel-dark h2, .mw-panel-dark h3 { color: #FFFFFF; }
.mw-panel-dark .eyebrow {
  color: var(--color-accent-on-dark);
  background: var(--brand-primary);  /* 5.44:1 wherever it lands */
  padding: .35em .6em;
  margin-left: -.6em;
}
.mw-panel-dark p { color: var(--color-text-on-dark); }
.mw-panel-dark a:not(.btn) { color: var(--color-accent-on-dark); }
.mw-panel-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--mullion) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to bottom, var(--mullion) 0 1px, transparent 1px 25%);
}
.mw-panel-dark > * { position: relative; }
.mw-panel-dark__shine {
  position: absolute; top: -20%; bottom: -20%; left: 8%; width: 220px;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.10) 50%, rgba(255,255,255,0));
  transform: skewX(-12deg);
  pointer-events: none;
}

.mw-soft { background: var(--brand-field); }

.cards, .mw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.mw-cards--3 { grid-template-columns: repeat(3, 1fr); }
.mw-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .mw-cards--3, .mw-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mw-cards--3, .mw-cards--4 { grid-template-columns: 1fr; } }

.card, .mw-card {
  position: relative;
  padding: var(--sp-8) var(--sp-6);
  background: #FFFFFF;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease);
}
.mw-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-accent);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.mw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.mw-card:hover::before { transform: scaleX(1); }
.mw-card h3 { margin-bottom: var(--sp-3); }
.mw-card p { color: var(--color-text-muted); font-size: 1rem; max-width: none; }
.card__icon, .mw-card__icon { width: 40px; height: 40px; color: var(--color-accent-text); margin-bottom: var(--sp-5); }

/* Headings that wrap to different line counts push the body copy out of line
   across a row. Subgrid pins icon / heading / body to shared tracks so every
   card in a row starts its paragraph on the same baseline. Cards carry either
   icon+h3+p (3 tracks) or h3+p (2), never mixed inside one grid. */
@supports (grid-template-rows: subgrid) {
  .mw-cards--3 > .mw-card,
  .mw-cards--4 > .mw-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
  .mw-cards--3 > .mw-card:not(:has(> .mw-card__icon)),
  .mw-cards--4 > .mw-card:not(:has(> .mw-card__icon)) { grid-row: span 2; }
}

.mw-card--dark { background: var(--brand-primary); border-color: transparent; color: var(--color-text-on-dark); }
.mw-card--dark h3 { color: #FFFFFF; }
.mw-card--dark p { color: var(--color-text-on-dark); }
.mw-card--dark .mw-card__icon { color: var(--color-accent-on-dark); }

.mw-card--muted { background: var(--brand-soft); border-color: transparent; }

.mw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); counter-reset: mw-step; }
@media (max-width: 860px) { .mw-steps { grid-template-columns: 1fr; gap: var(--sp-6); } }
.mw-step { position: relative; padding-top: var(--sp-8); counter-increment: mw-step; }
.mw-step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-hairline);
}
.mw-step::after {
  content: "";
  position: absolute; top: 0; left: 0; width: 56px; height: 3px;
  background: var(--brand-accent);
}
.mw-step__num {
  font-family: var(--font-display); font-size: .8rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-text);
  margin-bottom: var(--sp-3); display: block;
}
.mw-step h3 { margin-bottom: var(--sp-2); }
.mw-step p { color: var(--color-text-muted); font-size: 1rem; max-width: none; }

.mw-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 760px) { .mw-compare { grid-template-columns: 1fr; } }
.mw-compare__col { padding: var(--sp-8); border-radius: var(--radius-md); }
.mw-compare__col--hard { background: var(--brand-primary); color: var(--color-text-on-dark); }
.mw-compare__col--hard h3 { color: #FFFFFF; }
.mw-compare__col--hard p { color: var(--color-text-on-dark); }
.mw-compare__col--soft { background: var(--brand-soft); }
.mw-compare__col--soft p { color: var(--color-text-muted); }
.mw-compare__col h3 { margin-bottom: var(--sp-3); }
.mw-compare__col p { max-width: none; }

.mw-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (max-width: 800px) { .mw-reviews { grid-template-columns: 1fr; } }
.mw-review {
  position: relative;
  padding: var(--sp-8);
  background: #FFFFFF;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
.mw-review__stars { display: flex; gap: 3px; margin-bottom: var(--sp-4); }
.mw-review__stars svg { width: 18px; height: 18px; color: var(--brand-gold); }
.mw-review blockquote { font-size: 1.0625rem; line-height: 1.6; color: var(--color-text); margin-bottom: var(--sp-5); }
.mw-review__by {
  font-family: var(--font-label); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted);
}

/* The accordion capped at 52rem left ~330px of dead container to its right on
   every page that carries an FAQ. Pairing it with the section head in two
   columns fills that column with the thing it belongs to. */
.mw-faqwrap {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.9fr);
  gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 900px) { .mw-faqwrap { grid-template-columns: 1fr; gap: var(--sp-8); } }
.mw-faqwrap > .section-head { margin-bottom: 0; }
/* Side-by-side only: the head rides along while the accordion scrolls past.
   top clears the 79px sticky .site-header with a little air. */
@media (min-width: 901px) {
  .mw-faqwrap > .section-head { position: sticky; top: calc(79px + var(--sp-6)); }
}

.mw-faq { display: grid; gap: var(--sp-3); max-width: none; }
.mw-faq details {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  overflow: hidden;
}
.mw-faq details[open] { border-color: var(--brand-accent); }
.mw-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 700; color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}
.mw-faq summary::-webkit-details-marker { display: none; }
.mw-faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease);
}
.mw-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mw-faq__body { padding: 0 var(--sp-6) var(--sp-6); }
.mw-faq__body p { color: var(--color-text-muted); max-width: none; }

.cta-band, .mw-cta {
  position: relative;
  overflow: hidden;
  background: var(--brand-primary);
  color: #FFFFFF;
  padding-block: var(--sp-20);
}
.mw-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--mullion) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(to bottom, var(--mullion) 0 1px, transparent 1px 33.333%);
}
.mw-cta > * { position: relative; }
.mw-cta h2 { color: #FFFFFF; }
.mw-cta p { color: var(--color-text-on-dark); }
.mw-cta__phone { font-family: var(--font-label); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-on-dark); margin-top: var(--sp-5); }
.mw-cta__phone a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }

/* Was a wrapping row of arch-topped chips. They read as tombstones and the last
   row always wrapped ragged. A multi-column droplet list fills the width evenly,
   scans far faster for "is my town on here", and matches the Reach us list that
   already sits on the same page. */
.mw-arealist {
  list-style: none; margin: 0; padding: 0;
  columns: 4; column-gap: var(--sp-10);
}
@media (max-width: 900px) { .mw-arealist { columns: 3; } }
@media (max-width: 620px) { .mw-arealist { columns: 2; column-gap: var(--sp-6); } }
.mw-arealist li {
  position: relative;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-3);
  break-inside: avoid;
  color: var(--color-text);
}
.mw-arealist li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px;
  background: var(--brand-accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.mw-panel-dark .mw-arealist li { color: var(--color-text-on-dark); }
.mw-panel-dark .mw-arealist li::before { background: var(--color-accent-on-dark); }

.mw-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .mw-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mw-values { grid-template-columns: 1fr; } }
.mw-value__letter {
  font-family: var(--font-display); font-size: 3rem; font-weight: 900; line-height: 1;
  color: var(--brand-accent);
  display: block; margin-bottom: var(--sp-3);
}
.mw-panel-dark .mw-value__letter { color: var(--color-accent-on-dark); }

.breadcrumbs { font-size: .8125rem; color: var(--color-text-muted); padding-block: var(--sp-4); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs a:hover { color: var(--color-accent-text); }

.form { display: grid; gap: var(--sp-5); max-width: 42rem; }
.form-row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form label {
  font-family: var(--font-label);
  font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-heading);
  display: block; margin-bottom: var(--sp-2);
}
.form input, .form textarea, .form select {
  width: 100%;
  padding: var(--sp-4);
  font-size: 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease);
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--brand-primary); }
.form textarea { min-height: 10rem; resize: vertical; }
.form-help { font-size: .875rem; color: var(--color-text-muted); }
.form-status { font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .06em; }
.hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }
.field-error { color: #B3261E; font-weight: 500; margin-top: var(--sp-2); }

.mw-formwrap {
  background: #FFFFFF;
  border: 1px solid var(--color-hairline);
  border-top: 5px solid var(--brand-accent);
  border-radius: var(--radius-md);
  padding: var(--sp-10);
  box-shadow: var(--shadow-card);
}
@media (max-width: 620px) { .mw-formwrap { padding: var(--sp-6); } }

/* ---------------------------------------------------------------- service map
   Inline SVG, so it costs no request and themes off the brand tokens. Dots are
   at real geocoded positions; only the hub and the four extremes carry labels,
   because the metro cluster sits inside ~15 viewBox units. The prose beside it
   names all fourteen towns, which is also the text alternative for the graphic. */
.mw-mapwrap { position: relative; }
.mw-map { display: block; width: 100%; height: auto; }
.mw-map__field    { fill: #FFFFFF; }
.mw-map__mullion line { stroke: var(--color-hairline); stroke-width: 1; }
.mw-map__glow-in  { stop-color: var(--brand-accent); stop-opacity: .16; }
.mw-map__glow-out { stop-color: var(--brand-accent); stop-opacity: 0; }
.mw-map__rings circle {
  fill: none; stroke: var(--brand-accent); stroke-width: 1;
  stroke-dasharray: 3 7; opacity: .34;
}
.mw-map__spokes line { stroke: var(--brand-accent); stroke-width: 1; opacity: .42; }
.mw-map__dot circle  { fill: var(--color-accent-text); }
.mw-map__hub circle  { fill: var(--brand-primary); }
.mw-map__hub-ring    { fill: none; stroke: var(--brand-primary); stroke-width: 1.5; opacity: .38; }
.mw-map__labels text {
  font-family: var(--font-label);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  fill: var(--color-text-muted);
  paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round;  /* 6.87:1 over the glow */
}
.mw-map__labels .mw-map__label--hero { fill: var(--brand-primary); font-size: 15px; }
/* The SVG scales with its column, so at phone widths 13 viewBox units lands at
   about 7.6 CSS px. Scale the type up in viewBox units to hold it readable. */
@media (max-width: 700px) {
  .mw-map__labels text { font-size: 18px; }
  .mw-map__labels .mw-map__label--hero { font-size: 20px; }
}
.mw-map__ticks path { fill: none; stroke: var(--color-accent-text); stroke-width: 1.5; opacity: .5; }

/* ------------------------------------------------------ before/after slider
   Homepage only. Fixed aspect ratio so it cannot shift layout, panes are
   aria-hidden because the figcaption carries the meaning, and the control is a
   real range input so it works from the keyboard. --mw-ba-pos is written by JS
   and defaults to 50% so the thing still reads correctly with no script. */
.mw-ba { max-width: 56rem; margin: 0 auto; }
.mw-ba__stage {
  --mw-ba-pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--brand-soft);
  box-shadow: var(--shadow-card);
  /* pan-y keeps the page scrollable on touch while a sideways drag moves the handle */
  touch-action: pan-y;
  cursor: ew-resize;
}
.mw-ba__defs { position: absolute; width: 0; height: 0; }
.mw-ba__pane { position: absolute; inset: 0; }
.mw-ba__scene, .mw-ba__grime { position: absolute; inset: 0; }
.mw-ba__scene svg, .mw-ba__grime svg { width: 100%; height: 100%; display: block; }
/* the "before" side is the base layer; the "after" is clipped over the top of it */
.mw-ba__scene--hazed { filter: blur(1.1px) saturate(.72) contrast(.88); }
.mw-ba__pane--after { clip-path: inset(0 0 0 var(--mw-ba-pos)); }
.mw-ba__mullions {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right,  rgba(22,50,79,.30) 0 3px, transparent 3px 33.333%),
    repeating-linear-gradient(to bottom, rgba(22,50,79,.30) 0 3px, transparent 3px 50%);
  box-shadow: inset 0 0 0 3px rgba(22,50,79,.30);
}
.mw-ba__tag {
  position: absolute; top: var(--sp-4);
  padding: 5px 11px; border-radius: var(--radius-sm);
  background: rgba(26,62,110,.88); color: #FFFFFF;
  font-family: var(--font-label); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none;
}
.mw-ba__tag--before { left: var(--sp-4); }
.mw-ba__tag--after  { right: var(--sp-4); }
.mw-ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--mw-ba-pos);
  width: 3px; margin-left: -1.5px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(22,50,79,.28);
  pointer-events: none;
}
.mw-ba__grip {
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(22,50,79,.34);
}
/* the two chevrons that say "this drags" */
.mw-ba__grip::before, .mw-ba__grip::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  margin-top: -4px;
  border-top: 2.5px solid var(--color-accent-text);
  border-right: 2.5px solid var(--color-accent-text);
}
.mw-ba__grip::before { left: 11px;  transform: rotate(-135deg); }
.mw-ba__grip::after  { right: 11px; transform: rotate(45deg); }
/* The range is the real control. It is transparent and covers the stage, so the
   visible handle above is decoration and the focus ring lands on the input. */
.mw-ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; border: 0;
  -webkit-appearance: none; appearance: none; cursor: ew-resize;
}
.mw-ba__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 0; cursor: ew-resize;
}
.mw-ba__range::-moz-range-thumb {
  width: 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 0; cursor: ew-resize;
}
.mw-ba__range::-moz-range-track { background: transparent; border: 0; }
.mw-ba__range:focus { outline: none; }
.mw-ba__range:focus-visible ~ .mw-ba__divider .mw-ba__grip {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}
.mw-ba__cap {
  margin: var(--sp-5) 0 0;
  font-size: .86rem; color: var(--color-text-muted); text-align: center;
}
@media (max-width: 620px) {
  .mw-ba__stage { aspect-ratio: 4 / 3; }
  .mw-ba__grip { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .mw-ba__tag { font-size: .6rem; padding: 4px 9px; }
}

/* --------------------------------------------------------------- photo slot
   Stands in for a photograph we do not have yet. Sits inside the same
   .mw-figure / .mw-arch-frame wrapper the image used, and carries the image's
   own aspect ratio inline, so swapping a real <picture> back in shifts nothing.
   It states what it is rather than pretending to be artwork - the preview then
   doubles as a shot brief. Must not survive the domain cutover. */
.mw-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-6);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--brand-soft);
  background-image:
    repeating-linear-gradient(to right,  rgba(26,62,110,.07) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(to bottom, rgba(26,62,110,.07) 0 1px, transparent 1px 33.333%);
  box-shadow: inset 0 0 0 1px rgba(26,62,110,.12);
}
.mw-slot__icon { width: 34px; height: 34px; color: var(--color-accent-text); opacity: .75; }
/* Two classes deep on purpose. A slot can sit inside .mw-panel-dark, and
   `.mw-panel-dark p` (0,0,1,1) otherwise wins and paints near-white text on this
   near-white box - measured 1.09:1 before this rule existed. */
.mw-slot .mw-slot__label {
  margin: 0; max-width: none;
  font-family: var(--font-label); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-text);          /* 5.30:1 on the #E7EFF8 tint */
}
.mw-slot .mw-slot__note {
  margin: 0; max-width: 26ch; font-size: .84rem; line-height: 1.45;
  color: var(--color-text-muted);           /* 5.92:1 on the #E7EFF8 tint */
}
.mw-slot .mw-slot__icon { color: var(--color-accent-text); }
/* Hero variant. A hero slot must not paint a light panel across the band - the
   hero type is white and would vanish. It is a small marker sitting over the
   navy the hero already has, so the headline keeps its contrast and the missing
   photograph is still obvious. */
.mw-slot--hero {
  /* the hero media's ::after scrim is a later-painted sibling box, so without
     this the gradient lands on top of the marker and dims it out */
  z-index: 2;
  position: absolute; right: var(--sp-8); bottom: var(--sp-8);
  width: auto; max-width: 21rem; height: auto;
  align-items: flex-start; text-align: left;
  padding: var(--sp-4) var(--sp-5);
  /* a DARK panel, not a light tint. A white tint lifted this box to rgb(55,87,128)
     and dropped the sky label to 3.75:1; sitting it darker than the hero field
     takes the label to 7.4:1 and the note to 13.9:1. Measured off the render. */
  background: rgba(9, 24, 42, .48);
  background-image: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
}
.mw-slot--hero .mw-slot__icon { width: 26px; height: 26px; color: var(--color-accent-on-dark); opacity: 1; }
.mw-slot--hero .mw-slot__label { color: var(--color-accent-on-dark); }
.mw-slot--hero .mw-slot__note  { color: #FFFFFF; max-width: none; }
@media (max-width: 860px) {
  .mw-slot--hero { right: var(--sp-5); bottom: var(--sp-5); left: var(--sp-5); max-width: none; }
}

@media (max-width: 620px) {
  .mw-slot__icon { width: 28px; height: 28px; }
  .mw-slot__note { font-size: .8rem; }
}

.site-footer {
  background: var(--brand-primary);
  color: var(--color-text-on-dark);
  padding-block: var(--sp-16) var(--sp-8);
  border-top: 0;
  position: relative;
}
.site-footer__grid {
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5);
  /* Four columns, not three. Legal used to wrap onto a second row on its own,
     stranded under the brand block with the whole right side empty. */
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--sp-10);
}
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h2 {
  font-family: var(--font-label);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--color-accent-on-dark); margin-bottom: var(--sp-5); font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.site-footer a { color: var(--color-text-on-dark); }
.site-footer a:hover { color: #FFFFFF; }
.site-footer__tagline, .site-footer__address { color: var(--color-text-on-dark); margin-top: var(--sp-4); font-size: .95rem; }
.site-footer__logo {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  background: #FFFFFF;
  border-radius: 999px 999px var(--radius-sm) var(--radius-sm);
}
.site-footer__logo img { height: 52px; width: auto; }
.site-footer__bottom {
  max-width: var(--content-max); margin: var(--sp-10) auto 0; padding: var(--sp-6) var(--sp-5) 0;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: .85rem; color: var(--color-text-on-dark);
}
.site-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__social { flex-direction: row; gap: var(--sp-3); margin-top: var(--sp-6); }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); color: var(--color-text-on-dark);
}
.site-footer__social a:hover { border-color: #FFFFFF; color: #FFFFFF; }
.site-footer__social svg { width: 18px; height: 18px; }
/* Sized to the 436x396 viewBox aspect so the mark is not squashed. */
.spark-mark { width: 38px; height: 35px; display: inline-block; vertical-align: -12px; margin-left: 7px; color: #f15924; }

.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--brand-ink); color: #FFFFFF;
  border-top: 3px solid var(--brand-accent);
}
.consent-banner[hidden] { display: none; }
.consent-banner__text { max-width: 60ch; font-size: .9rem; margin: 0; color: #FFFFFF; }
.consent-banner__text a { color: #FFFFFF; text-decoration: underline; }
.consent-banner__actions { display: flex; gap: var(--sp-3); }
.consent-banner .btn-primary { background: #FFFFFF; color: var(--brand-ink); border-color: #FFFFFF; }
.consent-banner .btn-primary:hover { background: var(--color-text-on-dark); }

/* ==========================================================================
   MOTION LAYER

   Everything here is transform / opacity / clip-path only, so it runs on the
   compositor and cannot move layout - CLS stays at ~0. Every effect sits inside
   `prefers-reduced-motion: no-preference` or is unwound in the reduce block at
   the bottom, which is the last word.

   The organising idea is the squeegee. The hero already wipes a frosted overlay
   away on load; the same gesture now reveals every photo on the page, sweeps
   the dark panels, and lights the buttons. One move, used everywhere, instead
   of a pile of unrelated animations.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.99);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 90ms; }
.reveal-d2 { transition-delay: 180ms; }
.reveal-d3 { transition-delay: 270ms; }
.reveal-d4 { transition-delay: 360ms; }
.reveal-d5 { transition-delay: 450ms; }

@media (prefers-reduced-motion: no-preference) {

  /* -- 1. the squeegee pass ------------------------------------------------
     Photos do not fade in, they are wiped in by a raked edge travelling left
     to right. Top-right and bottom-right corners both travel the same distance
     so the 30% shear stays constant for the whole pass. */
  .mw-figure.reveal,
  .mw-arch-frame.reveal {
    clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%);
    transition: opacity 500ms var(--ease-out),
                transform 900ms var(--ease-out),
                clip-path 1000ms var(--ease-out);
  }
  .mw-figure.reveal.is-in,
  .mw-arch-frame.reveal.is-in {
    clip-path: polygon(0 0, 160% 0, 130% 100%, -30% 100%);
  }
  /* the photo settles back from a slight push-in as the wipe passes over it */
  .mw-figure.reveal img,
  .mw-arch-frame.reveal img {
    transform: scale(1.08);
    transition: transform 1400ms var(--ease-out);
  }
  .mw-figure.reveal.is-in img,
  .mw-arch-frame.reveal.is-in img { transform: scale(1); }

  /* -- 2. dark panels catch the light -------------------------------------
     The shine bar was static. Now it sweeps once when the panel arrives. */
  .mw-panel-dark__shine {
    opacity: 0;
    transform: translateX(-40%) skewX(-12deg);
  }
  .mw-panel-dark.is-lit .mw-panel-dark__shine {
    animation: mw-shine 2200ms var(--ease-out) 120ms forwards;
  }
  @keyframes mw-shine {
    0%   { opacity: 0;   transform: translateX(-40%) skewX(-12deg); }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0;   transform: translateX(1100%) skewX(-12deg); }
  }

  /* -- 3. proof numbers rise out of the baseline --------------------------- */
  .mw-proof__item .mw-proof__num {
    clip-path: inset(0 0 105% 0);
    transform: translateY(.42em);
    transition: clip-path 800ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .mw-proof__item.is-in .mw-proof__num {
    clip-path: inset(-25% 0 -25% 0);
    transform: none;
  }
  .mw-proof__item .mw-proof__label {
    opacity: 0; transform: translateY(8px);
    transition: opacity 600ms var(--ease-out) 220ms, transform 600ms var(--ease-out) 220ms;
  }
  .mw-proof__item.is-in .mw-proof__label { opacity: 1; transform: none; }
  /* the hairline divider draws down after its number lands */
  .mw-proof__item + .mw-proof__item::before {
    transform: scaleY(0); transform-origin: top;
    transition: transform 700ms var(--ease-out) 300ms;
  }
  .mw-proof__item.is-in + .mw-proof__item::before,
  .mw-proof__item + .mw-proof__item.is-in::before { transform: scaleY(1); }

  /* -- 4. scroll-linked depth ---------------------------------------------
     Native scroll-driven animation, no JS and no scroll listener. Browsers
     without it simply get the static composition. */
  @supports (animation-timeline: view()) {
    .mw-hero__media img {
      animation: mw-hero-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes mw-hero-drift {
      from { transform: scale(1.1) translateY(-2.2%); }
      to   { transform: scale(1.1) translateY(2.2%); }
    }
    /* the mullion grids slide against the panel behind them - the glass moves
       at a different rate to what is behind it */
    .mw-panel-dark::before,
    .mw-cta::before {
      animation: mw-mullion-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes mw-mullion-drift {
      from { transform: translateY(-2.5%); }
      to   { transform: translateY(2.5%); }
    }
    .mw-hero__grid {
      animation: mw-mullion-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }

  /* -- 5. buttons take a highlight ---------------------------------------- */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 42px;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
    transform: translateX(-120px) skewX(-14deg);
    pointer-events: none;
  }
  .btn:hover::after, .btn:focus-visible::after { animation: mw-btn-sheen 720ms var(--ease-out); }
  @keyframes mw-btn-sheen { to { transform: translateX(420px) skewX(-14deg); } }
  /* on a white button a white sheen is invisible - tint it instead */
  .btn-on-dark::after, .consent-banner .btn-primary::after {
    background: linear-gradient(100deg, rgba(29,102,153,0), rgba(29,102,153,.20), rgba(29,102,153,0));
  }

  /* -- 6. cards and links ------------------------------------------------- */
  .mw-card .mw-card__icon {
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease);
  }
  .mw-card:hover .mw-card__icon { transform: translateY(-4px) scale(1.06); }
  .mw-door__go svg { transition: transform var(--dur-base) var(--ease-out); }
  .mw-door:hover .mw-door__go svg { transform: translateX(6px); }
  .mw-door__icon { transition: transform var(--dur-base) var(--ease-out); }
  .mw-door:hover .mw-door__icon { transform: translateY(-4px) scale(1.06); }

  /* -- 7. the section eyebrow draws its rule ------------------------------
     Scoped to .section-head only. Every eyebrow on the site would be too much,
     and it would change spacing inside the hero and the door cards. */
  /* :has(+ h2) picks every eyebrow that introduces a section, whether it sits
     in a .section-head or at the top of a split column. Hero eyebrows precede an
     h1 and door-card eyebrows precede nothing, so both are correctly skipped. */
  .eyebrow:has(+ h2)::after {
    content: ""; display: block; height: 2px; width: 46px; margin-top: var(--sp-3);
    background: currentColor; opacity: .45;
    transform: scaleX(0); transform-origin: left;
    transition: transform 900ms var(--ease-out) 160ms;
  }
  .is-in .eyebrow:has(+ h2)::after,
  .is-in.eyebrow:has(+ h2)::after { transform: scaleX(1); }

  /* -- 8. the service map assembles --------------------------------------- */
  .mw-map__spokes line {
    stroke-dasharray: 400; stroke-dashoffset: 400;
    transition: stroke-dashoffset 1200ms var(--ease-out) 260ms;
  }
  .is-in .mw-map__spokes line { stroke-dashoffset: 0; }
  .mw-map__dot circle {
    opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center;
    transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
  }
  .is-in .mw-map__dot circle { opacity: 1; transform: none; }
  .is-in .mw-map__dot circle:nth-child(1)  { transition-delay: 620ms; }
  .is-in .mw-map__dot circle:nth-child(2)  { transition-delay: 680ms; }
  .is-in .mw-map__dot circle:nth-child(3)  { transition-delay: 740ms; }
  .is-in .mw-map__dot circle:nth-child(4)  { transition-delay: 800ms; }
  .is-in .mw-map__dot circle:nth-child(5)  { transition-delay: 860ms; }
  .is-in .mw-map__dot circle:nth-child(6)  { transition-delay: 920ms; }
  .is-in .mw-map__dot circle:nth-child(7)  { transition-delay: 980ms; }
  .is-in .mw-map__dot circle:nth-child(8)  { transition-delay: 1040ms; }
  .is-in .mw-map__dot circle:nth-child(9)  { transition-delay: 1100ms; }
  .is-in .mw-map__dot circle:nth-child(10) { transition-delay: 1160ms; }
  .is-in .mw-map__dot circle:nth-child(11) { transition-delay: 1220ms; }
  .is-in .mw-map__dot circle:nth-child(12) { transition-delay: 1280ms; }
  .is-in .mw-map__dot circle:nth-child(13) { transition-delay: 1340ms; }
  .mw-map__rings circle {
    opacity: 0;
    transform: scale(.72); transform-box: fill-box; transform-origin: center;
    transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out);
  }
  .is-in .mw-map__rings circle { opacity: .34; transform: none; }
  .is-in .mw-map__rings circle:nth-child(2) { transition-delay: 120ms; }
  .is-in .mw-map__rings circle:nth-child(3) { transition-delay: 240ms; }
  .mw-map__labels text {
    opacity: 0; transition: opacity 700ms var(--ease-out) 900ms;
  }
  .is-in .mw-map__labels text { opacity: 1; }
  .mw-map__hub circle {
    transform: scale(.4); transform-box: fill-box; transform-origin: center;
    transition: transform 700ms var(--ease-out) 160ms;
  }
  .is-in .mw-map__hub circle { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .mw-hero__frost, .mw-hero__squeegee { display: none; }
  /* nothing below the motion layer may leave content clipped or invisible */
  .mw-figure.reveal, .mw-arch-frame.reveal { clip-path: none; }
  .mw-proof__num { clip-path: none; transform: none; }
  .mw-proof__label { opacity: 1; transform: none; }
  .mw-map__dot circle, .mw-map__labels text, .mw-map__hub circle { opacity: 1; transform: none; }
  .mw-map__rings circle { opacity: .34; transform: none; }
  .mw-map__spokes line { stroke-dashoffset: 0; }
  .mw-panel-dark__shine { display: none; }
}

.mw-stack-6 > * + * { margin-top: var(--sp-6); }
.mw-stack-4 > * + * { margin-top: var(--sp-4); }
.mw-center { text-align: center; margin-inline: auto; }
.mw-center p { margin-inline: auto; }

/* The navy ring is 1.0:1 on navy. Dark areas get white: 10.72:1 on navy,
   4.61:1 at a mullion crossing, 3.34:1 on the brightest hero pixel. */
.mw-hero, .mw-panel-dark, .mw-cta, .mw-card--dark, .mw-compare__col--hard,
.site-footer, .nav-mobile, .consent-banner { --focus-ring: #FFFFFF; }

.mw-cards.mw-cards--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .mw-cards.mw-cards--pair { grid-template-columns: 1fr; } }

.mw-droplets a { overflow-wrap: anywhere; }