/* ==========================================================================
   Masera & Co — site.css  (design system "v2", extracted from Lab D)
   --------------------------------------------------------------------------
   Load AFTER main.css. Every rule is scoped under body.v2 and every class
   uses the mc- prefix, so nothing here can reach .header or .hero (which stay
   on main.css exactly as they are). Add class "v2" to <body> to opt a page in
   (keep the page's existing body classes).

   Page edge: wrap section content in  <div class="container-fluid hero-gutter">
   (the hero's own side margins from main.css), never .container.

   COMPONENTS (class — intended use)
   Sections
     .mc-section            Paper (#FDFBF7) chapter with generous vertical padding.
     .mc-section--stone     Warm stone band; use once or twice per page for rhythm.
     .mc-section--dark      Navy "cinematic" chapter. Tokens flip, so every
                            component inside recolours itself. One per page.
     .mc-section--flush     No top padding (when a .mc-band opens the section).
     .mc-section--tight     Smaller bottom padding (when the next section continues).
     .mc-pagehead           Navy page opener for inner pages (sits under the
                            fixed header): .mc-eyebrow + h1.mc-h1 + .mc-lead.
                            Optional photo: .mc-pagehead-media > picture plus
                            .mc-pagehead-shade, add .mc-pagehead--photo.
   Grid
     .mc-grid               12-column grid with the system gap.
     .mc-head               Section head row: H2 left (6 cols), intro right
                            (.mc-head-intro, cols 7-12). .mc-head--wide: 7 + 8-12.
     .mc-split              Equal columns >=1200px: text 1-6 + media 7-12.
       .mc-split--even      Explicit equal split; --media-first reverses content.
   Type
     .mc-h1 .mc-h2 .mc-h3   Playfair headings; wrap the tail in <em> for the
                            gold italic accent ("Our model is <em>straightforward.</em>").
     .mc-lead .mc-body      Inter lead / body copy (max ~34em / 38em measure).
     .mc-prose              Long-form copy block (story pages): spaced paragraphs.
     .mc-statement          Large italic serif statement (one per chapter).
     .mc-label (--gold)     Montserrat tracked caps label.
     .mc-eyebrow            Caps label with the short gold rule (as the hero).
     .mc-num (--sm)         Oversized serif numeral (01, 02...). Decorative:
                            add aria-hidden="true".
     .mc-roman              Small italic gold roman numeral (i., ii.).
     .mc-role               Caps meta label (job level, date, place).
   Folio line (opens every chapter)
     .mc-folio > .mc-folio-num + .mc-folio-rule + .mc-folio-label + .mc-folio-line
   Plates (images)
     .mc-plate              <figure> wrapper for a framed image.
     .mc-frame              Square-edged crop box; ratio modifiers
                            .mc-frame--4x5 --3x2 --16x10 --21x9 --1x1.
                            Put the <picture> inside; the image covers the box.
     .mc-reveal             On a .mc-frame: image settles in on scroll (CSS only).
     .mc-tag                Place label laid on a Boston plate (<figcaption>).
     .mc-caption            Caption under a plate.
     .mc-diptych            Two plates side by side.
     .mc-band               Full-bleed photo band (<figure>) + .mc-band-caption.
   Lists
     .mc-ledger             <dl> of 4 italic words + caps labels on hairlines.
     .mc-reasons/.mc-reason Hairline-topped items (roman + h3 + body).
     .mc-entries            Numbered plates grid (<ol>, 4 cols; --3 for 3 cols;
                            legacy --stagger now aligns items). Items: .mc-entry
                            (.mc-frame + .mc-entry-text with .mc-num/.mc-h3/.mc-body).
     .mc-steps              Numbered hairline list (<ol>): .mc-step > .mc-num--sm +
                            .mc-step-text > .mc-step-top (h3 + .mc-role) + .mc-body.
     .mc-roster             People/structure grid: .mc-roster-item > .mc-h3 + .mc-role + .mc-body.
     .mc-nav-list           Rows that link to other pages (<ul>): li > a.mc-nav-row >
                            .mc-frame.mc-nav-thumb + .mc-nav-text (h3.mc-nav-title with
                            i.mc-nav-arrow-inline, p.mc-nav-desc) + i.mc-nav-arrow.
                            The whole row is the link; nothing else looks clickable.
     .mc-faq                Native <details>/<summary> accordion (no JS).
     .mc-details            <dl> of contact facts: .mc-details-row > dt + dd.
   Quotes
     .mc-quote              <figure> > blockquote (.mc-quote-mark + p) +
                            figcaption.mc-quote-cite. --solo widens it; --sm is
                            the compact size for lists; .mc-quotes is a 2-col list.
   Actions
     .mc-btn                Navy button (gold automatically inside dark/CTA).
     .mc-btn--gold          Gold button on navy or photos.
     .mc-link               Underlined text link with arrow (light on dark).
     .mc-actions            Row of buttons/links.   .mc-after  Spacing before a
                            closing link under a list.
   Results (numbers + map; markup generated by scripts/results-map)
     .mc-reach              12-col split >=1200px: .mc-reach-text (cols 1-5:
                            .mc-reach-figure + ul.mc-states) + figure.mc-map (6-12).
     .mc-reach-figure       Large serif .mc-stat-num (+ .mc-stat-plus) over a label.
     .mc-states             Caps list of states; hovering an item lights its
                            state on the map and vice versa (same order).
     .mc-map                Inline SVG map (aria-hidden; the list carries it).
     .mc-stats/.mc-stat     Figures on hairlines (<ul>, 4 cols): h3.mc-stat-title >
                            .mc-stat-num + .mc-stat-head, optional p.mc-body.
     .mc-levels/.mc-level   Savings on a navy chapter: one figure per full-width
                            band; bands alternate navy/stone and the photo swaps
                            sides. li > figure.mc-frame.mc-level-photo +
                            .mc-level-body > .mc-level-top (.mc-level-fig +
                            .mc-level-icon) + .mc-level-text (h3 + p).
   Closing CTA
     .mc-cta > .mc-cta-media (picture) + .mc-cta-shade + .container-fluid.hero-gutter
       .mc-cta-body > .mc-cta-inner > .mc-eyebrow + h2.mc-cta-title + .mc-cta-lead +
       .mc-actions + .mc-cta-fine
   Forms (keep class "php-email-form" and the validate.js elements)
     .mc-form               Form skin. .mc-form-grid (2 cols >=768px),
                            .mc-field (--full spans both), .mc-field-label,
                            .mc-input (input/textarea), .mc-form-note,
                            .mc-form-status (wraps .loading/.error-message/.sent-message).
   Footer
     .mc-footer             Shared navy footer (markup in footer-v2.html):
                            .mc-wordmark, .mc-foot-grid, .mc-foot-about, .mc-social,
                            .mc-foot-nav, .mc-foot-label, .mc-foot-contact,
                            .mc-foot-kv, .mc-foot-bar.
   Utilities
     .mc-stack (children spaced 20px)  .mc-measure (38em)  .mc-rule (hairline)
     .mc-divide (hairline + space above a closing block, e.g. a quote)
     .mc-mt-0 .mc-mt-s .mc-mt-m .mc-mt-l   .mc-center
   Motion: CSS only (scroll-driven where supported), always off under
   prefers-reduced-motion. No component depends on JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
body.v2 {
  --mc-navy: #0B192C;
  --mc-navy-2: #14284A;
  --mc-paper: #FDFBF7;
  --mc-stone: #F4EFE6;
  --mc-white: #FFFFFF;
  --mc-gold: #E2B75A;            /* on navy / photos only */
  --mc-gold-ink: #9C7629;        /* large gold type on paper */
  --mc-gold-ink-strong: #7D5F1C; /* small gold type, rules, focus on paper */
  --mc-ink: #0B192C;             /* headings */
  --mc-lead: #2A3445;
  --mc-body: #3D4656;
  --mc-muted: rgba(11, 25, 44, 0.66);
  --mc-hair: rgba(11, 25, 44, 0.14);
  --mc-hair-strong: rgba(11, 25, 44, 0.32);
  --mc-frame: #E9E3D8;           /* image placeholder while loading */
  --mc-on-dark: rgba(255, 255, 255, 0.86);
  --mc-on-dark-muted: rgba(255, 255, 255, 0.70);
  --mc-hair-dark: rgba(255, 255, 255, 0.16);

  --mc-gap: clamp(20px, 2vw, 32px);
  --mc-pad: clamp(56px, 5.5vw, 96px);
  --mc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mc-serif: "Playfair Display", Georgia, serif;
  --mc-sans: "Inter", system-ui, -apple-system, sans-serif;
  --mc-caps: "Montserrat", "Inter", sans-serif;
  --mc-grade: saturate(0.88) contrast(1.03); /* one grade for every photo */
}

/* Programmatic scrolling stays instant (as in Lab D, whose glide on in-page
   anchors came from lab-d.js). A site.js can restore an anchor-only glide. */
html:has(> body.v2) { scroll-behavior: auto; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body.v2 .mc-section {
  position: relative;
  padding: var(--mc-pad) 0;
  background: var(--mc-paper);
  color: var(--mc-body);
  overflow: clip;
}

/* Keep the reading grid composed on large displays, with the same page edge
   as the hero until the content reaches its comfortable maximum width. */
body.v2 :is(.mc-section, .mc-pagehead, .mc-cta, .mc-footer) > .container-fluid.hero-gutter {
  width: calc(100% - max(3rem, 10vw));
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0;
}

@media (min-width: 992px) {
  body.v2 :is(.mc-section, .mc-pagehead, .mc-cta, .mc-footer) > .container-fluid.hero-gutter {
    width: calc(100% - max(6rem, 15vw));
  }
}

body.v2 .mc-section--stone {
  background: var(--mc-stone);
  --mc-gold-ink: #8E6B24;
}

body.v2 .mc-section--dark,
body.v2 .mc-pagehead,
body.v2 .mc-cta,
body.v2 .mc-footer {
  --mc-ink: #FFFFFF;
  --mc-lead: rgba(255, 255, 255, 0.92);
  --mc-body: var(--mc-on-dark);
  --mc-muted: var(--mc-on-dark-muted);
  --mc-hair: var(--mc-hair-dark);
  --mc-hair-strong: rgba(255, 255, 255, 0.4);
  --mc-gold-ink: var(--mc-gold);
  --mc-gold-ink-strong: var(--mc-gold);
  --mc-frame: #13233A;
}

body.v2 .mc-section--dark {
  background: var(--mc-navy);
  color: var(--mc-on-dark);
}

body.v2 .mc-section--flush { padding-top: 0; }
body.v2 .mc-section--tight { padding-bottom: clamp(48px, 4vw, 72px); }

/* Zero-specificity resets so every mc- rule below wins without a fight */
body.v2 :where(.mc-section, .mc-pagehead, .mc-cta, .mc-footer) :where(h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd) {
  margin: 0;
  padding: 0;
}

body.v2 :where(.mc-section, .mc-pagehead, .mc-footer) :where(ol, ul) {
  list-style: none;
}

body.v2 .mc-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--mc-gap);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
body.v2 .mc-h1,
body.v2 .mc-h2 {
  font-family: var(--mc-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mc-ink);
  text-wrap: balance;
}

body.v2 .mc-h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 1.3rem + 3.8vw, 5.5rem);
  line-height: 1.03;
}

body.v2 .mc-h2 {
  font-size: clamp(2rem, 1.25rem + 2vw, 3.5rem);
  line-height: 1.12;
}

body.v2 .mc-h1 em,
body.v2 .mc-h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--mc-gold-ink);
}

body.v2 .mc-h3 {
  font-family: var(--mc-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 0.9vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--mc-ink);
  text-wrap: balance;
}

body.v2 .mc-lead {
  font-family: var(--mc-sans);
  font-size: clamp(1.15rem, 0.95rem + 0.45vw, 1.4rem);
  line-height: 1.6;
  color: var(--mc-lead);
  max-width: 34em;
  text-wrap: pretty;
}

body.v2 .mc-body,
body.v2 .mc-prose p {
  font-family: var(--mc-sans);
  font-size: clamp(1.02rem, 0.95rem + 0.25vw, 1.18rem);
  line-height: 1.7;
  color: var(--mc-body);
  max-width: 38em;
  text-wrap: pretty;
}

body.v2 .mc-prose > * + * { margin-top: 1.1em; }
body.v2 .mc-prose .mc-h3 { margin-top: 1.8em; }

body.v2 .mc-statement {
  max-width: 26em;
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  line-height: 1.45;
  color: var(--mc-lead);
  text-wrap: pretty;
}

body.v2 .mc-label,
body.v2 .mc-eyebrow,
body.v2 .mc-folio,
body.v2 .mc-role,
body.v2 .mc-foot-label {
  font-family: var(--mc-caps);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body.v2 .mc-label {
  font-size: clamp(0.78rem, 0.85vw, 0.95rem);
  color: var(--mc-ink);
}

body.v2 .mc-label--gold { color: var(--mc-gold-ink-strong); }

body.v2 .mc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  letter-spacing: 0.22em;
  color: var(--mc-gold-ink-strong);
}

body.v2 .mc-eyebrow::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 2px;
  background: currentColor;
}

body.v2 .mc-caption {
  margin-top: 12px;
  font-family: var(--mc-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mc-muted);
}

body.v2 .mc-num {
  display: block;
  font-family: var(--mc-serif);
  font-weight: 400;
  font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--mc-gold-ink);
}

body.v2 .mc-num--sm {
  font-size: clamp(1.75rem, 1.3rem + 1vw, 2.5rem);
  line-height: 1;
}

body.v2 .mc-roman {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--mc-gold-ink);
}

body.v2 .mc-role {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--mc-muted);
}

/* --------------------------------------------------------------------------
   Folio line: number, short gold rule, caps label, hairline to the gutter
   -------------------------------------------------------------------------- */
body.v2 .mc-folio {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(24px, 2.5vw, 36px);
  font-size: clamp(0.78rem, 0.85vw, 0.95rem);
  line-height: 1;
}

body.v2 .mc-folio-num {
  color: var(--mc-gold-ink-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

body.v2 .mc-folio-rule {
  flex: none;
  width: 2.5rem;
  height: 2px;
  background: var(--mc-gold-ink-strong);
}

body.v2 .mc-folio-label {
  color: var(--mc-ink);
  white-space: nowrap;
}

body.v2 .mc-folio-line {
  flex: 1;
  height: 1px;
  background: var(--mc-hair);
  transform-origin: left center;
}

body.v2 .mc-section--dark .mc-folio-line { background: rgba(226, 183, 90, 0.4); }

/* --------------------------------------------------------------------------
   Grid patterns
   -------------------------------------------------------------------------- */
body.v2 .mc-head {
  align-items: center;
  row-gap: 24px;
}

body.v2 .mc-head > :first-child { grid-column: 1 / span 6; }
body.v2 .mc-head > .mc-head-intro { grid-column: 7 / -1; }
body.v2 .mc-head--wide > :first-child { grid-column: 1 / span 7; }
body.v2 .mc-head--wide > .mc-head-intro { grid-column: 8 / -1; }

body.v2 .mc-split {
  row-gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
}

body.v2 .mc-split > :first-child { grid-column: 1 / span 6; }
body.v2 .mc-split > :last-child { grid-column: 7 / -1; }
body.v2 .mc-split--even > :first-child { grid-column: 1 / span 6; }
body.v2 .mc-split--even > :last-child { grid-column: 7 / -1; }
body.v2 .mc-split--media-first > :first-child { grid-column: 1 / span 6; }
body.v2 .mc-split--media-first > :last-child { grid-column: 7 / -1; }

/* --------------------------------------------------------------------------
   Plates: square-edged frames, one unifying grade
   -------------------------------------------------------------------------- */
body.v2 .mc-plate { position: relative; margin: 0; }

body.v2 .mc-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mc-frame);
  border-radius: 0;
}

body.v2 .mc-frame--4x5 { aspect-ratio: 4 / 5; }
body.v2 .mc-frame--3x2 { aspect-ratio: 3 / 2; }
body.v2 .mc-frame--16x10 { aspect-ratio: 16 / 10; }
body.v2 .mc-frame--21x9 { aspect-ratio: 21 / 9; }
body.v2 .mc-frame--1x1 { aspect-ratio: 1 / 1; }

body.v2 .mc-frame picture,
body.v2 .mc-band picture,
body.v2 .mc-cta-media picture,
body.v2 .mc-pagehead-media picture {
  position: absolute;
  inset: 0;
  display: block;
}

body.v2 .mc-frame img,
body.v2 .mc-band img,
body.v2 .mc-cta-media img,
body.v2 .mc-pagehead-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: var(--mc-grade);
}

/* Place label laid on a Boston plate (only places get a label) */
body.v2 .mc-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 16px 14px;
  font-family: var(--mc-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(180deg, rgba(11, 25, 44, 0) 0%, rgba(11, 25, 44, 0.72) 100%);
  pointer-events: none;
}

body.v2 .mc-diptych {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* Full-bleed photo band */
body.v2 .mc-band {
  position: relative;
  margin: 0;
  width: 100%;
  height: clamp(220px, 29vh, 340px);
  overflow: hidden;
  background: var(--mc-navy);
}

body.v2 .mc-band img {
  object-position: 50% 58%;
  transform-origin: 55% 60%;
  animation: mcDrift 30s ease-in-out infinite alternate;
}

@keyframes mcDrift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* Fades into the navy chapter below; on paper add nothing else */
body.v2 .mc-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 25, 44, 0.18) 0%, rgba(11, 25, 44, 0) 22%, rgba(11, 25, 44, 0) 55%, #0B192C 100%);
  pointer-events: none;
}

body.v2 .mc-band-caption {
  position: absolute;
  inset: auto 0 clamp(14px, 1.6vw, 24px) 0;
  z-index: 1;
  font-family: var(--mc-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

body.v2 .mc-band-caption > span { display: block; }

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
body.v2 .mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1em 1.8em;
  border: 0;
  border-radius: 4px;
  background: var(--mc-navy);
  color: var(--mc-paper);
  font-family: var(--mc-sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.v2 .mc-btn:hover,
body.v2 .mc-btn:focus-visible {
  background: var(--mc-navy-2);
  color: var(--mc-paper);
  transform: translateY(-1px);
}

body.v2 .mc-btn--gold,
body.v2 :is(.mc-section--dark, .mc-pagehead, .mc-cta) .mc-btn {
  background: var(--mc-gold);
  color: var(--mc-navy);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.v2 .mc-btn--gold:hover,
body.v2 .mc-btn--gold:focus-visible,
body.v2 :is(.mc-section--dark, .mc-pagehead, .mc-cta) .mc-btn:hover,
body.v2 :is(.mc-section--dark, .mc-pagehead, .mc-cta) .mc-btn:focus-visible {
  background: color-mix(in srgb, var(--mc-gold), white 15%);
  color: var(--mc-navy);
}

body.v2 .mc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--mc-hair-strong);
  color: var(--mc-ink);
  font-family: var(--mc-sans);
  font-weight: 500;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.v2 .mc-link:hover,
body.v2 .mc-link:focus-visible {
  color: var(--mc-gold-ink-strong);
  border-color: var(--mc-gold-ink-strong);
}

body.v2 :is(.mc-btn, .mc-link) i { transition: transform 0.2s ease; }
body.v2 :is(.mc-btn, .mc-link):hover i { transform: translateX(3px); }

body.v2 .mc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
}

body.v2 .mc-after { margin-top: clamp(28px, 3vw, 40px); }

/* Focus: always visible, gold-ink on paper, gold on navy */
body.v2 :is(.mc-section, .mc-pagehead, .mc-cta, .mc-footer) :is(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--mc-gold-ink-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
/* Ledger: four italic words on hairlines */
body.v2 .mc-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--mc-gap);
  row-gap: 32px;
  margin-top: clamp(32px, 3vw, 44px);
}

body.v2 .mc-ledger > div {
  padding-top: 20px;
  border-top: 1px solid var(--mc-hair);
}

body.v2 .mc-ledger dt {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 2.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--mc-gold-ink);
}

body.v2 .mc-ledger dd {
  margin-top: 10px;
  font-family: var(--mc-caps);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--mc-muted);
}

/* Reasons */
body.v2 .mc-reasons {
  display: grid;
  gap: 32px;
}

body.v2 .mc-reason {
  padding-top: 24px;
  border-top: 1px solid var(--mc-hair);
}

body.v2 .mc-reason .mc-body { margin-top: 12px; }

/* Entries: numbered plates */
body.v2 .mc-entries {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--mc-gap);
  row-gap: 56px;
  margin-top: clamp(32px, 3vw, 48px);
}

body.v2 .mc-entries--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.v2 .mc-entries--stagger > :nth-child(even) { margin-top: 0; }

body.v2 .mc-entry-text {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--mc-hair);
}

body.v2 .mc-entry > .mc-entry-text:first-child { margin-top: 0; }
body.v2 .mc-entry-text .mc-h3 { margin-top: 12px; }

body.v2 .mc-entry-text .mc-body {
  margin-top: 10px;
  max-width: 22em;
}

/* Steps */
body.v2 .mc-steps { margin-top: 20px; }

body.v2 .mc-step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 18px;
  border-top: 1px solid var(--mc-hair);
}

body.v2 .mc-step:last-child { border-bottom: 1px solid var(--mc-hair); }

body.v2 .mc-step-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

body.v2 .mc-step .mc-h3 { font-size: clamp(1.25rem, 0.95rem + 0.7vw, 1.6rem); }

body.v2 .mc-step .mc-role { white-space: nowrap; }

body.v2 .mc-step .mc-body {
  margin-top: 6px;
  font-size: clamp(0.98rem, 0.92rem + 0.2vw, 1.08rem);
  line-height: 1.6;
}

/* Roster: structure without portraits */
body.v2 .mc-roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--mc-gap);
  row-gap: 40px;
  margin-top: clamp(40px, 4vw, 64px);
}

body.v2 .mc-roster-item {
  padding-top: 20px;
  border-top: 1px solid var(--mc-hair);
}

body.v2 .mc-roster-item .mc-role { display: block; margin-top: 8px; }
body.v2 .mc-roster-item .mc-body { margin-top: 12px; }

/* Nav list: whole-row links to other pages */
body.v2 .mc-nav-list { margin-top: clamp(40px, 4vw, 64px); }
body.v2 .mc-nav-list > li { border-top: 1px solid var(--mc-hair); }
body.v2 .mc-nav-list > li:last-child { border-bottom: 1px solid var(--mc-hair); }

body.v2 .mc-nav-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 32px);
  align-items: center;
  padding-block: clamp(24px, 2.4vw, 36px);
  color: var(--mc-ink);
  text-decoration: none;
}

body.v2 .mc-nav-thumb { aspect-ratio: 3 / 2; }
body.v2 .mc-nav-thumb img { transition: transform 600ms var(--mc-ease); }

body.v2 .mc-nav-title {
  font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem);
  line-height: 1.15;
  transition: color 0.3s ease;
}

body.v2 .mc-nav-desc {
  margin-top: 6px;
  max-width: 30em;
}

body.v2 .mc-nav-arrow {
  justify-self: end;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mc-ink);
  transition: transform 0.3s var(--mc-ease), color 0.3s ease;
}

body.v2 .mc-nav-arrow-inline { display: none; }

body.v2 .mc-nav-row:hover .mc-nav-title,
body.v2 .mc-nav-row:focus-visible .mc-nav-title { color: var(--mc-gold-ink); }

body.v2 .mc-nav-row:hover .mc-nav-arrow,
body.v2 .mc-nav-row:focus-visible .mc-nav-arrow {
  transform: translateX(4px);
  color: var(--mc-gold-ink-strong);
}

body.v2 .mc-nav-row:hover .mc-nav-thumb img,
body.v2 .mc-nav-row:focus-visible .mc-nav-thumb img { transform: scale(1.03); }

/* Image navigation becomes a compact set of equally weighted destinations.
   Small screens keep the practical image-and-text rows below. */
@media (min-width: 768px) {
  body.v2 .mc-nav-list--cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--mc-gap);
    margin-top: 32px;
  }
  body.v2 .mc-nav-list--cards > li,
  body.v2 .mc-nav-list--cards > li:last-child { border: 0; }
  body.v2 .mc-nav-list--cards .mc-nav-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: 100%;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--mc-hair-strong);
  }
  body.v2 .mc-nav-list--cards .mc-nav-thumb { width: 100%; aspect-ratio: 16 / 9; }
  body.v2 .mc-nav-list--cards .mc-nav-text { display: block; padding-top: 20px; }
  body.v2 .mc-nav-list--cards .mc-nav-title { padding-right: 28px; font-size: clamp(1.35rem, 1rem + .6vw, 1.75rem); }
  body.v2 .mc-nav-list--cards .mc-nav-desc { margin-top: 10px; font-size: 1rem; line-height: 1.6; }
  body.v2 .mc-nav-list--cards .mc-nav-arrow { position: absolute; top: auto; bottom: 22px; right: 0; font-size: 1.2rem; }
  body.v2 .mc-nav-list--cards .mc-nav-text { padding-bottom: 20px; }
}

@media (min-width: 1200px) {
  body.v2 .mc-nav-row {
    grid-template-columns: clamp(220px, 16vw, 320px) minmax(0, 5fr) minmax(0, 5fr) auto;
    column-gap: var(--mc-gap);
  }
  body.v2 .mc-nav-text { display: contents; }
  body.v2 .mc-nav-desc { margin-top: 0; }
}

/* FAQ: native disclosure, no JS */
body.v2 .mc-faq { margin-top: clamp(32px, 3vw, 48px); }

body.v2 .mc-faq details { border-top: 1px solid var(--mc-hair); }
body.v2 .mc-faq details:last-child { border-bottom: 1px solid var(--mc-hair); }

body.v2 .mc-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  list-style: none;
  cursor: pointer;
  font-family: var(--mc-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.55rem);
  line-height: 1.3;
  color: var(--mc-ink);
}

body.v2 .mc-faq summary::-webkit-details-marker { display: none; }

body.v2 .mc-faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--mc-sans);
  font-weight: 300;
  font-size: 1.6em;
  line-height: 0.8;
  color: var(--mc-gold-ink-strong);
  transition: transform 0.25s var(--mc-ease);
}

body.v2 .mc-faq details[open] summary::after { transform: rotate(45deg); }
body.v2 .mc-faq summary:hover { color: var(--mc-gold-ink-strong); }
body.v2 .mc-faq details > :not(summary) { padding-bottom: 24px; }

/* Contact facts */
body.v2 .mc-details { display: grid; }

body.v2 .mc-details-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 18px;
  border-top: 1px solid var(--mc-hair);
}

body.v2 .mc-details-row:last-child { border-bottom: 1px solid var(--mc-hair); }

body.v2 .mc-details dt {
  font-family: var(--mc-caps);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-muted);
}

body.v2 .mc-details dd {
  font-family: var(--mc-sans);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--mc-ink);
}

body.v2 .mc-details dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--mc-hair-strong);
}

body.v2 .mc-details dd a:hover { color: var(--mc-gold-ink-strong); border-color: currentColor; }

/* --------------------------------------------------------------------------
   Quotes
   -------------------------------------------------------------------------- */
body.v2 .mc-quote { position: relative; margin: 0; }
body.v2 .mc-quote blockquote { position: relative; margin: 0; }

body.v2 .mc-quote-mark {
  display: block;
  height: 0.6em;
  margin-bottom: 0.15em;
  font-family: var(--mc-serif);
  font-weight: 400;
  font-size: 5rem;
  line-height: 0.85;
  color: var(--mc-gold-ink);
}

body.v2 .mc-quote blockquote p {
  max-width: 28em;
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem);
  line-height: 1.35;
  color: var(--mc-ink);
  text-wrap: pretty;
}

body.v2 .mc-quote-cite {
  margin-top: clamp(24px, 2.4vw, 36px);
  font-family: var(--mc-caps);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--mc-muted);
}

body.v2 .mc-quote--solo blockquote p { max-width: 32em; }

body.v2 .mc-quote--sm .mc-quote-mark { font-size: 3.5rem; }

body.v2 .mc-quote--sm blockquote p {
  font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.6rem);
  line-height: 1.45;
}

body.v2 .mc-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mc-gap);
  row-gap: clamp(48px, 5vw, 72px);
  margin-top: clamp(40px, 4vw, 64px);
}

body.v2 .mc-quotes > * {
  padding-top: 28px;
  border-top: 1px solid var(--mc-hair);
}

@media (min-width: 1200px) {
  /* Hang the opening mark into the gutter on the large quote */
  body.v2 .mc-quote:not(.mc-quote--sm) .mc-quote-mark {
    position: absolute;
    left: -0.5em;
    top: 0.18em;
    height: auto;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Page head (inner pages) and closing CTA
   -------------------------------------------------------------------------- */
body.v2 .mc-pagehead,
body.v2 .mc-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--mc-navy);
}

body.v2 .mc-pagehead {
  padding: clamp(72px, 8vw, 136px) 0 clamp(64px, 7vw, 112px);
  border-bottom: 1px solid rgba(226, 183, 90, 0.35);
}

body.v2 .mc-pagehead .mc-h1 { margin-top: clamp(16px, 2vw, 28px); max-width: 18em; }
body.v2 .mc-pagehead .mc-lead { margin-top: clamp(20px, 2.2vw, 32px); }
body.v2 .mc-pagehead--photo { min-height: clamp(420px, 62vh, 680px); display: flex; align-items: flex-end; }
body.v2 .mc-pagehead--photo > .container-fluid { width: 100%; }

body.v2 .mc-pagehead-media,
body.v2 .mc-cta-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

body.v2 .mc-pagehead-shade,
body.v2 .mc-cta-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 25, 44, 0.86) 0%, rgba(11, 25, 44, 0.74) 34%, rgba(11, 25, 44, 0.38) 62%, rgba(11, 25, 44, 0.2) 100%),
    linear-gradient(180deg, rgba(11, 25, 44, 0.55) 0%, rgba(11, 25, 44, 0) 22%, rgba(11, 25, 44, 0) 70%, rgba(11, 25, 44, 0.75) 100%);
}

body.v2 .mc-cta {
  display: flex;
  align-items: center;
  min-height: clamp(400px, 52vh, 560px);
  padding: clamp(64px, 6vw, 96px) 0;
}

body.v2 .mc-cta-body { width: 100%; }
body.v2 .mc-cta-inner { max-width: min(46rem, 88vw); }

body.v2 :is(.mc-cta, .mc-pagehead--photo) :is(.mc-eyebrow, .mc-cta-lead, .mc-lead, .mc-cta-fine) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(11, 25, 44, 0.9);
}

body.v2 .mc-cta .mc-eyebrow,
body.v2 .mc-pagehead .mc-eyebrow { color: var(--mc-gold); }

body.v2 .mc-cta-title {
  margin: clamp(0.9rem, 2vh, 1.4rem) 0;
  font-family: var(--mc-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6), 0 0 24px rgba(11, 25, 44, 0.8), 0 0 60px rgba(11, 25, 44, 0.55);
}

body.v2 .mc-cta-title em,
body.v2 .mc-pagehead--photo .mc-h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--mc-gold);
}

body.v2 .mc-pagehead--photo .mc-h1 {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6), 0 0 24px rgba(11, 25, 44, 0.8);
}

body.v2 .mc-cta-lead {
  max-width: 32em;
  font-family: var(--mc-sans);
  font-size: clamp(1.1rem, min(1.75vw, 2.75vh), 1.9rem);
  line-height: 1.55;
  color: #fff;
  text-wrap: pretty;
}

body.v2 .mc-cta .mc-actions { margin-top: clamp(1.25rem, 3.4vh, 2.25rem); }

body.v2 .mc-cta .mc-btn { font-size: clamp(1.1rem, 1.3vw, 1.45rem); }

body.v2 .mc-cta-fine {
  margin-top: clamp(1.25rem, 2.6vh, 1.75rem);
  font-family: var(--mc-sans);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

body.v2 .mc-cta-fine a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.v2 .mc-cta-fine a:hover { color: var(--mc-gold); }

/* --------------------------------------------------------------------------
   Forms (skin for .php-email-form; validate.js toggles .d-block)
   -------------------------------------------------------------------------- */
body.v2 .mc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px var(--mc-gap);
}

body.v2 .mc-field { display: grid; gap: 8px; align-content: start; }
body.v2 .mc-field--full { grid-column: 1 / -1; }

body.v2 .mc-field-label {
  font-family: var(--mc-caps);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-ink);
}

body.v2 .mc-field-label .mc-optional {
  font-family: var(--mc-sans);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mc-muted);
}

body.v2 .mc-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--mc-hair-strong);
  border-radius: 2px;
  background: #fff;
  color: var(--mc-navy);
  font-family: var(--mc-sans);
  font-size: 1.05rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.v2 textarea.mc-input { min-height: 200px; resize: vertical; }

body.v2 .mc-input::placeholder { color: rgba(11, 25, 44, 0.5); }

body.v2 .mc-input:hover { border-color: rgba(11, 25, 44, 0.5); }

body.v2 .mc-input:focus,
body.v2 .mc-input:focus-visible {
  border-color: var(--mc-gold-ink-strong);
  box-shadow: 0 0 0 1px var(--mc-gold-ink-strong);
  outline: none;
}

body.v2 .mc-form-note {
  font-family: var(--mc-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mc-muted);
}

body.v2 .mc-form-status { grid-column: 1 / -1; }

body.v2 .mc-form .loading,
body.v2 .mc-form .error-message,
body.v2 .mc-form .sent-message {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-left: 3px solid;
  border-radius: 0;
  font-family: var(--mc-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

body.v2 .mc-form .loading { background: var(--mc-stone); border-color: var(--mc-gold-ink-strong); color: var(--mc-navy); }
body.v2 .mc-form .error-message { background: #FBECEA; border-color: #B42318; color: #7A1A12; }
body.v2 .mc-form .sent-message { background: #EAF3EC; border-color: #1E6B45; color: #14442C; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
body.v2 .mc-footer {
  position: relative;
  padding: clamp(48px, 4.5vw, 72px) 0 28px;
  background: var(--mc-navy);
  border-top: 1px solid rgba(226, 183, 90, 0.35);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--mc-sans);
}

body.v2 .mc-wordmark {
  margin: 0 0 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--mc-hair-dark);
  font-family: var(--mc-serif);
  font-weight: 500;
  font-size: clamp(3rem, 1.5rem + 4vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

body.v2 .mc-wordmark a { color: #fff; text-decoration: none; }
body.v2 .mc-wordmark em { font-style: italic; color: var(--mc-gold); }

body.v2 .mc-foot-grid { row-gap: 40px; }
body.v2 .mc-foot-about { grid-column: 1 / span 5; }
body.v2 .mc-foot-nav { grid-column: 6 / span 3; }
body.v2 .mc-foot-contact { grid-column: 9 / -1; }

body.v2 .mc-foot-about p {
  max-width: 26em;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

body.v2 .mc-social { display: flex; gap: 12px; margin-top: 20px; }

body.v2 .mc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.v2 .mc-social a:hover { color: var(--mc-gold); border-color: var(--mc-gold); }
body.v2 .mc-footer .mc-social a:focus-visible { border-radius: 50%; }

body.v2 .mc-foot-label {
  margin-bottom: 16px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--mc-gold);
}

body.v2 .mc-foot-nav ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(28px, 3vw, 48px);
}

body.v2 .mc-foot-nav a {
  font-size: 1rem;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.v2 .mc-foot-nav a:hover { color: #fff; border-bottom-color: var(--mc-gold); }
body.v2 .mc-foot-nav a[aria-current="page"] { color: #fff; border-bottom-color: rgba(226, 183, 90, 0.6); }

body.v2 .mc-foot-contact p {
  font-size: 1rem;
  line-height: 1.8;
  color: #fff;
}

body.v2 .mc-foot-contact p + p { margin-top: 12px; }
body.v2 .mc-foot-contact .mc-foot-kv + .mc-foot-kv { margin-top: 0; }
body.v2 .mc-foot-kv span { color: rgba(255, 255, 255, 0.64); }

body.v2 .mc-foot-contact a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.v2 .mc-foot-contact a:hover { color: var(--mc-gold); border-bottom-color: var(--mc-gold); }

body.v2 .mc-foot-bar {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--mc-hair-dark);
}

body.v2 .mc-foot-bar p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.64); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
body.v2 .mc-stack > * + * { margin-top: 20px; }
body.v2 .mc-measure { max-width: 38em; }
body.v2 .mc-center { text-align: center; margin-inline: auto; }
body.v2 .mc-rule { height: 1px; margin: clamp(48px, 5vw, 80px) 0; border: 0; background: var(--mc-hair); opacity: 1; }
body.v2 .mc-divide { margin-top: 40px; padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--mc-hair); }
body.v2 .mc-mt-0 { margin-top: 0; }
body.v2 .mc-mt-s { margin-top: 20px; }
body.v2 .mc-mt-m { margin-top: clamp(24px, 2.6vw, 40px); }
body.v2 .mc-mt-l { margin-top: clamp(48px, 5vw, 80px); }

/* --------------------------------------------------------------------------
   Results: the reach figure, the state list, the map, and the savings figures.
   Figures are real text (h3), never counted up; the map is decoration for the
   list beside it. States follow the same order in the list and the map.
   -------------------------------------------------------------------------- */
body.v2 .mc-reach {
  margin-top: clamp(40px, 4.5vw, 72px);
  row-gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

body.v2 .mc-reach-text { grid-column: 1 / span 5; }
body.v2 .mc-map { grid-column: 6 / -1; }

body.v2 .mc-stat-num {
  font-family: var(--mc-serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variant-numeric: lining-nums;
  color: var(--mc-gold-ink);
}

body.v2 .mc-reach-figure {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.v2 .mc-reach-figure .mc-stat-num {
  font-size: clamp(4.5rem, 2.4rem + 5vw, 7.5rem);
  color: var(--mc-ink);
}

body.v2 .mc-stat-plus {
  margin-left: 0.03em;
  font-size: 0.55em;
  vertical-align: 0.4em;
  color: var(--mc-gold-ink);
}

body.v2 .mc-reach-label {
  font-family: var(--mc-serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 0.9vw, 1.85rem);
  line-height: 1.2;
  color: var(--mc-ink);
}

/* Lining figures so "7" sits at full height inside italic tails */
body.v2 .mc-reach :is(.mc-h2, .mc-reach-label) em { font-variant-numeric: lining-nums; }

body.v2 .mc-reach-label em {
  font-style: italic;
  color: var(--mc-gold-ink);
}

body.v2 .mc-states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mc-gap);
  margin-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--mc-hair);
}

body.v2 .mc-states li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mc-hair);
  font-family: var(--mc-caps);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-ink);
  transition: color 0.25s ease;
}

body.v2 .mc-states li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: currentColor;
}

/* The map. Colours come from tokens; --mc-map-bg is the section colour, so
   state borders read as cuts in the paper. */
body.v2 .mc-map {
  --mc-map-bg: var(--mc-paper);
  margin: 0;
  container-type: inline-size;
}

body.v2 .mc-section--stone .mc-map { --mc-map-bg: var(--mc-stone); }

body.v2 .mc-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

body.v2 .mc-map-ctx {
  fill: none;
  stroke: var(--mc-hair-strong);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

body.v2 .mc-map-st {
  color: var(--mc-navy);
  fill: currentColor;
  stroke: var(--mc-map-bg);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: color 0.25s ease;
}

body.v2 .mc-map text {
  font-family: var(--mc-caps);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
}

body.v2 .mc-map-lab text { fill: #FFFFFF; pointer-events: none; }
body.v2 .mc-map-lab--out text { fill: var(--mc-ink); }
body.v2 .mc-map-lab--out path { fill: none; stroke: var(--mc-gold-ink-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
body.v2 .mc-map-lab--out circle { fill: var(--mc-gold); }
body.v2 .mc-map-abbr { display: none; }

body.v2 .mc-map-dot { fill: var(--mc-gold); stroke: var(--mc-map-bg); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
body.v2 .mc-map-ring { fill: none; stroke: var(--mc-gold-ink-strong); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
body.v2 .mc-map-lead { fill: none; stroke: var(--mc-gold-ink-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }

body.v2 .mc-map .mc-map-city {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 0;
  fill: var(--mc-gold-ink);
}

body.v2 .mc-map .mc-map-home { font-size: 13px; fill: var(--mc-muted); }

/* Narrow maps: postal codes, set larger so they stay readable when scaled. */
@container (max-width: 560px) {
  body.v2 .mc-map-full { display: none; }
  body.v2 .mc-map-abbr { display: inline; }
  body.v2 .mc-map text { font-size: 34px; letter-spacing: 0.06em; }
  body.v2 .mc-map .mc-map-city { font-size: 44px; }
  body.v2 .mc-map .mc-map-home { display: none; }
}

/* List and map light each other up (pointer only; nothing here is a link). */
body.v2 .mc-reach:has(.mc-states li:nth-child(1):hover, .mc-map-st:nth-of-type(1):hover) :is(.mc-states li:nth-child(1), .mc-map-st:nth-of-type(1)),
body.v2 .mc-reach:has(.mc-states li:nth-child(2):hover, .mc-map-st:nth-of-type(2):hover) :is(.mc-states li:nth-child(2), .mc-map-st:nth-of-type(2)),
body.v2 .mc-reach:has(.mc-states li:nth-child(3):hover, .mc-map-st:nth-of-type(3):hover) :is(.mc-states li:nth-child(3), .mc-map-st:nth-of-type(3)),
body.v2 .mc-reach:has(.mc-states li:nth-child(4):hover, .mc-map-st:nth-of-type(4):hover) :is(.mc-states li:nth-child(4), .mc-map-st:nth-of-type(4)),
body.v2 .mc-reach:has(.mc-states li:nth-child(5):hover, .mc-map-st:nth-of-type(5):hover) :is(.mc-states li:nth-child(5), .mc-map-st:nth-of-type(5)),
body.v2 .mc-reach:has(.mc-states li:nth-child(6):hover, .mc-map-st:nth-of-type(6):hover) :is(.mc-states li:nth-child(6), .mc-map-st:nth-of-type(6)),
body.v2 .mc-reach:has(.mc-states li:nth-child(7):hover, .mc-map-st:nth-of-type(7):hover) :is(.mc-states li:nth-child(7), .mc-map-st:nth-of-type(7)),
body.v2 .mc-reach:has(.mc-states li:nth-child(8):hover, .mc-map-st:nth-of-type(8):hover) :is(.mc-states li:nth-child(8), .mc-map-st:nth-of-type(8)),
body.v2 .mc-reach:has(.mc-states li:nth-child(9):hover, .mc-map-st:nth-of-type(9):hover) :is(.mc-states li:nth-child(9), .mc-map-st:nth-of-type(9)),
body.v2 .mc-reach:has(.mc-states li:nth-child(10):hover, .mc-map-st:nth-of-type(10):hover) :is(.mc-states li:nth-child(10), .mc-map-st:nth-of-type(10)) {
  color: var(--mc-gold-ink-strong);
}

/* Savings figures */
body.v2 .mc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--mc-gap);
  row-gap: clamp(40px, 4vw, 56px);
  margin-top: clamp(48px, 5vw, 80px);
}

body.v2 .mc-stat {
  position: relative;
  padding-top: clamp(22px, 2.2vw, 30px);
  border-top: 1px solid var(--mc-hair-strong);
}

body.v2 .mc-stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--mc-gold-ink-strong);
  transform-origin: left center;
}

body.v2 .mc-stat-title {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.v2 .mc-stat-title .mc-stat-num { font-size: clamp(3.5rem, 2rem + 3vw, 5.25rem); }

body.v2 .mc-stat-head {
  font-family: var(--mc-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 0.45vw, 1.5rem);
  line-height: 1.25;
  color: var(--mc-ink);
  text-wrap: balance;
}

/* Savings levels: one figure per full-width band, each an editorial spread
   (photo + figure). Bands alternate navy and stone and the photo swaps
   sides, so the four levels read as a rhythm rather than a list. Stone
   bands restore the paper tokens, so every component recolours itself. */
body.v2 .mc-levels {
  --mc-level-grad: linear-gradient(180deg, #F4D896 0%, #E2B75A 52%, #C08E37 100%);
  margin-top: clamp(8px, 1vw, 16px);
}

body.v2 .mc-level {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 5.5vw, 104px);
  align-items: center;
  padding-block: clamp(56px, 5.5vw, 96px);
}

body.v2 .mc-level:nth-child(even) {
  --mc-ink: #0B192C;
  --mc-lead: #2A3445;
  --mc-body: #3D4656;
  --mc-muted: rgba(11, 25, 44, 0.66);
  --mc-hair: rgba(11, 25, 44, 0.14);
  --mc-hair-strong: rgba(11, 25, 44, 0.32);
  --mc-gold-ink: #8E6B24;
  --mc-gold-ink-strong: #7D5F1C;
  --mc-frame: #E9E3D8;
  --mc-level-grad: linear-gradient(180deg, #B98F40 0%, #9C7629 50%, #6E5318 100%);
  color: var(--mc-body);
  background: var(--mc-stone);
  box-shadow: 0 0 0 100vmax var(--mc-stone);
  clip-path: inset(0 -100vmax);
}

body.v2 .mc-level:nth-child(even) .mc-level-photo { order: 2; }

body.v2 .mc-level-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
}

body.v2 .mc-level-photo img { filter: var(--mc-grade); }
body.v2 .op-level-energy { object-position: 55% 60%; }
body.v2 .op-level-telecom { object-position: 50% 45%; }
body.v2 .op-level-card { object-position: 60% 55%; }

body.v2 .mc-level-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body.v2 .mc-level-fig {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 24px);
}

body.v2 .mc-level-index {
  padding-top: 1.1em;
  font-family: var(--mc-caps);
  font-weight: 600;
  font-size: clamp(0.78rem, 0.85vw, 0.95rem);
  letter-spacing: 0.2em;
  color: var(--mc-gold-ink-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

body.v2 .mc-level-num {
  font-family: var(--mc-serif);
  font-weight: 400;
  font-size: clamp(4.5rem, 2.6rem + 4.6vw, 8.5rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  color: var(--mc-gold-ink);
}

body.v2 .mc-level-pct {
  margin-left: 0.04em;
  font-size: 0.5em;
  vertical-align: 0.72em;
}

/* Gold gradient on the figures where text clipping is supported */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.v2 :is(.mc-level-num, .mc-level-pct) {
    background: var(--mc-level-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

body.v2 .mc-level-text { margin-top: clamp(24px, 2.4vw, 36px); }

body.v2 .mc-level-head {
  font-family: var(--mc-serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.05rem + 1vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--mc-ink);
  text-wrap: balance;
}

body.v2 .mc-level-text .mc-body { margin-top: 14px; max-width: 34em; }

body.v2 .mc-level-icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(84px, 7vw, 120px);
  aspect-ratio: 1;
}

body.v2 .mc-level-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

body.v2 .mc-level-ring circle {
  fill: rgba(226, 183, 90, 0.07);
  stroke: var(--mc-gold-ink);
  stroke-opacity: 0.55;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* Savings icons: small gold line drawings that loop quietly in each ring
   (CSS only, transform/opacity, static under reduced motion). Each loop has
   its own length so they never pulse in step. */
body.v2 .mc-ico {
  position: relative;
  display: block;
  width: 58%;
  height: auto;
  overflow: visible;
  color: var(--mc-gold-ink);
}

body.v2 .mc-ico :is(.mc-ico-line, .mc-ico-wave) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.v2 .mc-ico-glow { fill: currentColor; opacity: 0.32; }
body.v2 .mc-ico-track { fill: none; stroke: var(--mc-hair-strong); stroke-width: 1.4; stroke-linecap: round; }
body.v2 .mc-ico-dot { fill: currentColor; }
body.v2 .mc-ico-dot--1x { fill-opacity: 0.45; transform: translateX(18px); }
body.v2 .mc-ico-dot--2x { transform: translateX(36px); }
body.v2 .mc-ico-shine { fill: currentColor; opacity: 0.28; transform: translateX(30px); }
body.v2 .mc-ico-wave--2 { opacity: 0.55; }

@media (prefers-reduced-motion: no-preference) {
  body.v2 .mc-ico-glow { animation: mcIcoGlow 3.6s ease-in-out infinite; }
  body.v2 .mc-ico-dot--1x { animation: mcIcoRun 3.2s linear infinite; }
  body.v2 .mc-ico-dot--2x { animation: mcIcoRun 1.6s linear infinite; }
  body.v2 .mc-ico-wave { animation: mcIcoWave 2.8s ease-out infinite; }
  body.v2 .mc-ico-wave--2 { animation-delay: 0.35s; }
  body.v2 .mc-ico-shine { animation: mcIcoShine 5.2s var(--mc-ease) infinite; }
}

@keyframes mcIcoGlow { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.55; } }
@keyframes mcIcoRun {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(52px); opacity: 0; }
}
@keyframes mcIcoWave { 0%, 15% { opacity: 0; } 40% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes mcIcoShine { 0%, 45% { transform: translateX(0); } 85%, 100% { transform: translateX(84px); } }

/* --------------------------------------------------------------------------
   Motion: CSS only. Folio hairlines draw and plates settle as they scroll in
   (scroll-driven animations where supported; static everywhere else).
   -------------------------------------------------------------------------- */
@keyframes mcDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mcSettle { from { transform: scale(1.05); } to { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body.v2 .mc-folio-line {
      animation: mcDraw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    body.v2 .mc-reveal img {
      animation: mcSettle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    /* Results map: states ink in from Boston outward (--i is the distance
       rank) while the map rises into view, then labels appear and the Boston
       ring draws. Every range ends by "entry 100%", so the map is finished
       the moment it is fully on screen; the start frame is a pale but
       complete map, never an empty one. */
    body.v2 .mc-map { view-timeline: --mc-map block; }
    body.v2 .mc-map-st {
      animation: mcInk var(--mc-ease) both;
      animation-timeline: --mc-map;
      animation-range: entry calc(var(--i) * 9%) entry calc(46% + var(--i) * 9%);
    }
    body.v2 .mc-map-lab {
      animation: mcFadeIn ease-out both;
      animation-timeline: --mc-map;
      animation-range: entry calc(50% + var(--i) * 6%) entry calc(64% + var(--i) * 6%);
    }
    body.v2 .mc-map-ring {
      stroke-dasharray: 1;
      animation: mcRing var(--mc-ease) both;
      animation-timeline: --mc-map;
      animation-range: entry 40% entry 100%;
    }
    body.v2 .mc-stat::before {
      animation: mcDraw var(--mc-ease) both;
      animation-timeline: view();
      animation-range: entry 40% entry 100%;
    }
    body.v2 .mc-level-num {
      animation: mcLevelIn var(--mc-ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    body.v2 .mc-level-text {
      animation: mcRise var(--mc-ease) both;
      animation-timeline: view();
      animation-range: entry 10% entry 100%;
    }
    body.v2 .mc-level-ring circle {
      stroke-dasharray: 1;
      animation: mcRing var(--mc-ease) both;
      animation-timeline: view();
      animation-range: entry 10% entry 100%;
    }
    body.v2 .mc-stat {
      animation: mcRise var(--mc-ease) both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 12%) entry calc(64% + var(--i, 0) * 12%);
    }
  }
}

@keyframes mcInk { from { opacity: 0.14; } to { opacity: 1; } }
@keyframes mcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcRing { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mcRise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes mcLevelIn { from { transform: translateY(24%); opacity: 0.2; } to { transform: none; opacity: 1; } }

/* SVG children keep their transform attributes, so only stop the motion. */
@media (prefers-reduced-motion: reduce) {
  body.v2 .mc-map *,
  body.v2 .mc-level-ring circle { animation: none !important; }
}

@media print {
  body.v2 .mc-level *,
  body.v2 .mc-map *,
  body.v2 .mc-stat,
  body.v2 .mc-stat::before { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.v2 .mc-band img,
  body.v2 .mc-reveal img,
  body.v2 .mc-folio-line,
  body.v2 .mc-stat,
  body.v2 .mc-stat::before,
  body.v2 .mc-level-num,
  body.v2 .mc-level-text,
  body.v2 .mc-nav-thumb img {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  body.v2 .mc-head > :first-child,
  body.v2 .mc-head > .mc-head-intro,
  body.v2 .mc-split > :first-child,
  body.v2 .mc-split > :last-child {
    grid-column: 1 / -1;
  }

  body.v2 .mc-head > .mc-head-intro { max-width: 34em; }

  body.v2 .mc-reach-text,
  body.v2 .mc-map { grid-column: 1 / -1; }
  body.v2 .mc-map { width: 100%; max-width: 760px; justify-self: center; }
  body.v2 .mc-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.v2 .mc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v2 .mc-level { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vw, 40px); }
  body.v2 .mc-level:nth-child(even) .mc-level-photo { order: 0; }
  body.v2 .mc-level-photo { aspect-ratio: 16 / 9; }

  body.v2 .mc-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v2 .mc-reasons { grid-template-columns: 1fr 1fr; column-gap: var(--mc-gap); }
  body.v2 .mc-band { height: clamp(220px, 30vw, 320px); }
  body.v2 .mc-entries,
  body.v2 .mc-entries--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v2 .mc-entries--stagger > :nth-child(even) { margin-top: 0; }
  body.v2 .mc-entries .mc-frame--4x5 { aspect-ratio: 3 / 2; }
  body.v2 .mc-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.v2 .mc-foot-about { grid-column: 1 / -1; }
  body.v2 .mc-foot-nav { grid-column: 1 / span 6; }
  body.v2 .mc-foot-contact { grid-column: 7 / -1; }
}

@media (max-width: 991px) {
  body.v2 .mc-cta-shade,
  body.v2 .mc-pagehead-shade {
    background: linear-gradient(180deg, rgba(11, 25, 44, 0.62) 0%, rgba(11, 25, 44, 0.45) 30%, rgba(11, 25, 44, 0.5) 60%, rgba(11, 25, 44, 0.82) 100%);
  }
}

@media (max-width: 767px) {
  body.v2 .mc-grid { column-gap: 0; }
  body.v2 .mc-folio { gap: 12px; }
  body.v2 .mc-diptych { gap: 12px; }

  body.v2 .mc-ledger { column-gap: 20px; row-gap: 28px; }
  body.v2 .mc-ledger dt { font-size: 1.6rem; }
  body.v2 .mc-ledger dd { font-size: 0.72rem; letter-spacing: 0.14em; }

  body.v2 .mc-band { height: clamp(180px, 50vw, 240px); }
  body.v2 .mc-reasons { grid-template-columns: 1fr; }
  body.v2 .mc-quote-mark { font-size: 4rem; }
  body.v2 .mc-quotes { grid-template-columns: 1fr; }

  body.v2 .mc-entries,
  body.v2 .mc-entries--3 { grid-template-columns: 1fr; row-gap: 48px; }

  body.v2 .mc-entry-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;
  }

  body.v2 .mc-entry-text .mc-num { font-size: 3rem; grid-row: 1; }
  body.v2 .mc-entry-text .mc-h3 { margin-top: 0; grid-row: 1; }
  body.v2 .mc-entry-text .mc-body { grid-column: 1 / -1; margin-top: 12px; max-width: none; }

  body.v2 .mc-step { grid-template-columns: 3.25rem minmax(0, 1fr); }
  body.v2 .mc-step-top { flex-direction: column; align-items: flex-start; }

  body.v2 .mc-roster { grid-template-columns: 1fr; }

  body.v2 .mc-states { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  body.v2 .mc-states li { font-size: 0.72rem; letter-spacing: 0.12em; white-space: nowrap; }
  body.v2 .mc-stats { grid-template-columns: 1fr; row-gap: 0; }
  body.v2 .mc-stat { padding-block: 20px; }
  body.v2 .mc-stat-title {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;
  }
  body.v2 .mc-stat-title .mc-stat-num { font-size: 2.6rem; }
  body.v2 .mc-stat-head { font-size: 1.15rem; }

  body.v2 .mc-level { padding-block: 40px; row-gap: 24px; }
  body.v2 .mc-level-photo { aspect-ratio: 3 / 2; }
  body.v2 .mc-level-num { font-size: 4.25rem; }
  body.v2 .mc-level-index { padding-top: 0.6em; }
  body.v2 .mc-level-icon { width: 72px; }
  body.v2 .mc-level-text { margin-top: 18px; }
  body.v2 .mc-level-head { font-size: 1.4rem; }
  body.v2 .mc-level-text .mc-body { margin-top: 10px; font-size: 1rem; }
  body.v2 .mc-details-row { grid-template-columns: 1fr; gap: 4px; }
  body.v2 .mc-form-grid { grid-template-columns: 1fr; }

  body.v2 .mc-nav-row {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  body.v2 .mc-nav-thumb { aspect-ratio: 1 / 1; }
  body.v2 .mc-nav-arrow { display: none; }

  body.v2 .mc-nav-arrow-inline {
    display: inline-block;
    margin-left: 0.45em;
    font-size: 0.8em;
    vertical-align: 0.02em;
    color: var(--mc-ink);
    transition: transform 0.3s var(--mc-ease), color 0.3s ease;
  }

  body.v2 .mc-nav-row:hover .mc-nav-arrow-inline { transform: translateX(4px); color: var(--mc-gold-ink-strong); }
  body.v2 .mc-nav-title { font-size: 1.4rem; }
  body.v2 .mc-nav-desc { font-size: 0.98rem; line-height: 1.6; }

  body.v2 .mc-cta { padding: 64px 0; min-height: 0; }
  body.v2 .mc-pagehead--photo { min-height: 0; padding-top: 160px; }

  body.v2 .mc-wordmark { font-size: 3.25rem; }
  body.v2 .mc-foot-nav,
  body.v2 .mc-foot-contact { grid-column: 1 / -1; }
}

@media (max-width: 399px) {
  body.v2 .mc-states li { gap: 9px; font-size: 0.68rem; letter-spacing: 0.08em; }
}

/* Very wide screens: the hero keeps scaling with the viewport, so the
   reading type below it steps up too instead of stalling at laptop size. */
@media (min-width: 1800px) {
  body.v2 .mc-h2 { font-size: 3.5rem; }
  body.v2 .mc-h3 { font-size: 2.1rem; }
  body.v2 .mc-step .mc-h3 { font-size: 1.8rem; }
  body.v2 .mc-lead { font-size: 1.6rem; }
  body.v2 .mc-body,
  body.v2 .mc-prose p { font-size: 1.3rem; }
  body.v2 .mc-step .mc-body { font-size: 1.2rem; }
  body.v2 .mc-folio,
  body.v2 .mc-label { font-size: 1.05rem; }
  body.v2 .mc-caption,
  body.v2 .mc-tag,
  body.v2 .mc-band-caption { font-size: 0.95rem; }
  body.v2 .mc-ledger dt { font-size: 3rem; }
  body.v2 .mc-states li { font-size: 0.9rem; }
  body.v2 .mc-stat-head { font-size: 1.7rem; }
  body.v2 .mc-level-head { font-size: 2.3rem; }
  body.v2 .mc-ledger dd,
  body.v2 .mc-quote-cite,
  body.v2 .mc-details dt { font-size: 0.95rem; }
  body.v2 .mc-role,
  body.v2 .mc-field-label { font-size: 0.88rem; }
  body.v2 .mc-statement { font-size: 2.3rem; }
  body.v2 .mc-quote blockquote p { font-size: 3rem; }
  body.v2 .mc-quote--sm blockquote p { font-size: 1.9rem; }
  body.v2 .mc-num--sm { font-size: 2.9rem; }
  body.v2 .mc-step { grid-template-columns: 5.5rem minmax(0, 1fr); }
  body.v2 .mc-btn,
  body.v2 .mc-link { font-size: 1.3rem; }
  body.v2 .mc-nav-title { font-size: 2.8rem; }
  body.v2 .mc-nav-arrow { font-size: 1.9rem; }
  body.v2 .mc-input { font-size: 1.2rem; }
  body.v2 .mc-details dd { font-size: 1.4rem; }
  body.v2 .mc-cta-fine { font-size: 1.2rem; }
  body.v2 .mc-foot-about p,
  body.v2 .mc-foot-nav a,
  body.v2 .mc-foot-contact p { font-size: 1.2rem; }
  body.v2 .mc-foot-label { font-size: 0.95rem; }
  body.v2 .mc-foot-bar p { font-size: 1rem; }
  body.v2 .mc-social a { width: 48px; height: 48px; font-size: 1.2rem; }
}