.mp-page {
  --mp-space: clamp(52px, 7vw, 108px);
  --mp-sage: #e1ede8;
}

.mp-wrap { padding: var(--mp-space) var(--gutter); }
.mp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(590px, 78svh, 760px);
  color: white;
  background: var(--dark);
}
.mp-hero-copy { padding: clamp(50px, 6vw, 96px) 26px clamp(50px, 6vw, 96px) var(--gutter); }
.mp-hero .ct-kicker { color: var(--mint); }
.mp-hero h1 { max-width: 11ch; font-size: clamp(50px, 6.7vw, 108px); }
.mp-remate {
  max-width: 22ch;
  margin-top: 20px;
  color: var(--mint);
  font: italic 400 clamp(25px, 3.05vw, 45px)/1.03 Georgia, 'Times New Roman', serif;
  letter-spacing: -.045em;
}
.mp-hero-support {
  max-width: 42ch;
  margin: 20px 0 25px;
  color: #e3eff4;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
}
.mp-hero-photo { position: relative; align-self: stretch; overflow: hidden; }
.mp-hero-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.mp-hero-photo::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, #062a4442, transparent 32%);
}
.mp-hero :focus-visible, .mp-close :focus-visible { outline-color: var(--mint); }

.mp-section-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 18px clamp(26px, 6vw, 96px); }
.mp-section-intro > p, .mp-measure-intro p, .mp-stage-copy p, .mp-measure-list dd, .mp-close p {
  max-width: 52ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.62;
  color: var(--muted);
}

.mp-index { margin: clamp(25px, 4vw, 52px) 0 17px; }
.mp-index ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.mp-index a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  height: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .23s, color .23s, border-color .23s;
}
.mp-index a span, .mp-letter {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dcece9;
  color: var(--dark);
  font-size: 13px;
  font-weight: 700;
}
.mp-index a:hover { background: #eaf2f3; border-color: var(--accent); }
.mp-index a[aria-current] { background: var(--dark); border-color: var(--dark); color: white; }

.mp-route {
  display: grid;
  gap: clamp(24px, 4.7vw, 72px);
}
.mp-stages { padding: 0; margin: 0; list-style: none; min-width: 0; }
.mp-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3.5vw, 48px);
  padding-block: clamp(26px, 4.3vw, 63px);
  border-bottom: 1px solid var(--line);
}
.mp-stage:last-child { border-bottom: 0; padding-bottom: 0; }
.mp-letter { width: 40px; height: 40px; margin-bottom: 13px; font-size: 16px; }
.mp-stage h3 { font-size: clamp(31px, 3.45vw, 57px); line-height: 1.01; letter-spacing: -.052em; text-wrap: balance; }
.mp-stage-copy p { margin-top: 14px; }
.mp-stage-copy .mp-stage-summary { color: var(--ink); font-weight: 700; }
.mp-stage-photo, .mp-visual { overflow: hidden; border-radius: 5px 46px 5px 5px; background: #dae7eb; }
.mp-stage-photo { aspect-ratio: 1.5; }
.mp-stage-photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-visual {
  position: sticky;
  top: 107px;
  align-self: start;
  height: clamp(310px, calc(100svh - 158px), 570px);
  margin-top: clamp(26px, 4.3vw, 63px);
}
.mp-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .42s var(--ease);
}
.mp-visual .mp-current { opacity: 1; }
.mp-route-enhanced { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.mp-route-enhanced .mp-stage { display: block; min-height: clamp(335px, 48svh, 420px); }
.mp-route-enhanced .mp-stage-photo { display: none; }

.mp-measure {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 6vw, 95px);
  background: var(--mp-sage);
}
.mp-measure-intro h2 { font-size: clamp(39px, 5vw, 74px); }
.mp-measure-intro p, .mp-close p { margin-top: 19px; }
.mp-measure-list { margin: 0; }
.mp-measure-list > div { border-top: 1px solid #a5bcba; padding: 19px 0; }
.mp-measure-list > div:last-child { border-bottom: 1px solid #a5bcba; }
.mp-measure-list dt { font-size: clamp(23px, 2.3vw, 36px); font-weight: 700; letter-spacing: -.035em; }
.mp-measure-list dd { margin: 8px 0 0; }

.mp-comparison { background: #f4efe6; }
.mp-comparison h2 { max-width: 16ch; }
.mp-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(23px, 4vw, 52px);
  background: #a9bdbf;
  border: 1px solid #a9bdbf;
  border-radius: 5px 34px 5px 5px;
  overflow: hidden;
}
.mp-compare > div { background: #fffaf3; padding: clamp(22px, 3.5vw, 48px); }
.mp-compare > div:last-child { background: #edf5f1; }
.mp-compare h3 { font-size: clamp(23px, 2.7vw, 39px); letter-spacing: -.045em; }
.mp-compare ul { margin: 17px 0 0; padding-left: 19px; color: var(--muted); line-height: 1.55; }
.mp-compare li + li { margin-top: 10px; }

.mp-close {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .65fr);
  align-items: center;
  gap: clamp(24px, 7vw, 96px);
  color: white;
  background: var(--dark);
}
.mp-close h2 { max-width: 16ch; }
.mp-close h2 em { color: var(--mint); }
.mp-close p { color: #e3eff4; }
.mp-close-links { display: grid; justify-items: start; }
.mp-close-links .ct-button { margin-bottom: 12px; }
.mp-close-links a:not(.ct-button) {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid #d5ecf46b;
  font-weight: 700;
  text-decoration: none;
}
.mp-close-links a:not(.ct-button):hover { color: var(--mint); }

.mp-enter { animation: mp-reveal .6s var(--ease) both; }
@keyframes mp-reveal {
  from { opacity: .75; transform: translateY(13px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 850px) {
  .mp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mp-hero-copy { padding: 46px var(--gutter) 33px; }
  .mp-hero h1 { font-size: clamp(43px, 9vw, 74px); }
  .mp-hero-photo { height: clamp(245px, 54vw, 440px); }
  .mp-hero-photo::after { background: linear-gradient(180deg, #062a444d, transparent 28%); }
  .mp-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-section-intro, .mp-measure, .mp-close { grid-template-columns: minmax(0, 1fr); }
  .mp-close-links { max-width: 420px; }
}
@media (max-width: 600px) {
  .mp-stage, .mp-compare { grid-template-columns: minmax(0, 1fr); }
  .mp-index a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-enter { animation: none; }
  .mp-visual img, .mp-index a { transition: none; }
}