/*!
Theme Name: Metal Roof Factory
Theme URI: https://wordpress-1570348-6617697.cloudwaysapps.com
Template: kadence
Author: Metal Roof Factory
Description: Child theme of Kadence for the Metal Roof Factory site. Custom styles go in this file.
Version: 1.20.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Self-hosted Archivo and Inter, round 12. Replaces the
   fonts.googleapis.com stylesheet and the fonts.gstatic.com files it
   pulled, which disclosed every visitor's IP address to Google. Only the
   weights the site actually renders are here: Kadence was requesting
   Inter 200/800 and Archivo 200/600, none of which appear on any page.
   latin and latin-ext subsets only. Both families are SIL OFL 1.1.
   Each file is a variable font covering the whole weight axis, so one file
   serves every weight of a family; the per-weight blocks below pin the axis. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   METAL ROOF FACTORY - DESIGN SYSTEM
   ========================================================================== */

:root {
  --mrf-charcoal:   #161A1D;
  --mrf-graphite:   #343A3E;
  --mrf-bone:       #F3F1EA;
  --mrf-galv:       #A7ADB0;
  --mrf-cedar:      #A9653F;
  --mrf-oxide:      #C85F32;
  --mrf-oxide-dark: #A94C25;
  --mrf-line:       #D9D6CC;
  --mrf-line-dark:  rgba(167,173,176,.22);
  --mrf-ink-soft:   #4A5155;
  /* Galvanized grey fails contrast as text on bone; use this for labels on
     light surfaces and keep --mrf-galv for labels on charcoal/graphite. */
  /* Brand oxide is unchanged and stays the brand colour. It is simply no
     longer used for small text: 3.62 on bone, 2.82 on graphite. These two
     carry text instead. */
  --mrf-oxide-ink: #B3503B;   /* small text + button fills on light ground */
  --mrf-oxide-lite: #E0906E;  /* small text on charcoal or graphite */
  --mrf-label: #656C70;       /* was #6A7175 — 4.39 on bone, now 4.73 */

  --mrf-max: 1280px;
  --mrf-gut: clamp(20px, 5vw, 48px);

  /* Vertical rhythm: one system, not per-section guesses */
  --mrf-pad:      clamp(60px, 7vw, 112px); /* standard section */
  --mrf-pad-lg:   clamp(80px, 10vw, 160px); /* hero-adjacent + final CTA */
  --mrf-head-gap: clamp(2.25rem, 4vw, 3.5rem); /* heading block -> content */

  /* Body sizes: nothing important below 15px on mobile */
  --mrf-body:  clamp(1rem, .5vw + .9rem, 1.075rem);
  --mrf-small: clamp(.9375rem, .35vw + .86rem, 1rem);
}

/* Sticky header: anchor targets must clear the fixed row */
html { scroll-padding-top: 96px; }
@media (max-width: 767px) { html { scroll-padding-top: 78px; } }

/* ---------- Base ---------- */
body { background: var(--mrf-bone); }
.mrf, .mrf *, .mrf *::before, .mrf *::after { box-sizing: border-box; }
.mrf img { max-width: 100%; height: auto; display: block; }
/* Nothing in a section may push the page sideways */
.mrf-sec, .mrf-hero { max-width: 100%; overflow-x: clip; }

.mrf-wrap {
  max-width: var(--mrf-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mrf-gut);
  padding-right: var(--mrf-gut);
  width: 100%;
}

/* ---------- Section shells ---------- */
.mrf-sec { padding-top: var(--mrf-pad); padding-bottom: var(--mrf-pad); position: relative; }
/* Opt-in 12% tightening for editorial pages whose sections are short enough
   that the standard rhythm reads as disconnected rather than spacious.
   Deliberately a modifier, not a change to --mrf-pad, which every other page
   depends on. */
.mrf-sec--tight { padding-top: calc(var(--mrf-pad) * .88); padding-bottom: calc(var(--mrf-pad) * .88); }
.mrf-sec--bone     { background: var(--mrf-bone);     color: var(--mrf-charcoal); }
.mrf-sec--charcoal { background: var(--mrf-charcoal); color: var(--mrf-bone); }
.mrf-sec--graphite { background: var(--mrf-graphite); color: var(--mrf-bone); }
.mrf-sec--charcoal h2, .mrf-sec--charcoal h3, .mrf-sec--charcoal h4,
.mrf-sec--graphite h2, .mrf-sec--graphite h3, .mrf-sec--graphite h4 { color: var(--mrf-bone); }

/* ---------- Type ---------- */
.mrf-eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mrf-oxide);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mrf-eyebrow::after {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: var(--mrf-oxide);
  opacity: .55;
}

.mrf-h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.mrf-lede {
  font-size: var(--mrf-body);
  line-height: 1.68;
  max-width: 62ch;
  margin: 0 0 2rem;
}
.mrf-sec--bone .mrf-lede { color: var(--mrf-ink-soft); }
.mrf-sec--charcoal .mrf-lede, .mrf-sec--graphite .mrf-lede { color: rgba(243,241,234,.8); }

/* ---------- Buttons ---------- */
.mrf-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mrf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
  line-height: 1;
}
.mrf-btn--primary { background: var(--mrf-oxide); color: #fff; }
.mrf-btn--primary:hover, .mrf-btn--primary:focus-visible { background: var(--mrf-oxide-dark); color: #fff; }
.mrf-btn--dark { background: var(--mrf-charcoal); color: var(--mrf-bone); }
.mrf-btn--dark:hover, .mrf-btn--dark:focus-visible { background: var(--mrf-graphite); color: #fff; }
.mrf-btn--light { background: var(--mrf-bone); color: var(--mrf-charcoal); }
.mrf-btn--light:hover, .mrf-btn--light:focus-visible { background: #fff; color: var(--mrf-charcoal); }
.mrf-btn--ghost-light { background: transparent; color: var(--mrf-bone); border-color: rgba(243,241,234,.45); }
.mrf-btn--ghost-light:hover, .mrf-btn--ghost-light:focus-visible { background: var(--mrf-bone); color: var(--mrf-charcoal); border-color: var(--mrf-bone); }
.mrf-btn--ghost-dark { background: transparent; color: var(--mrf-charcoal); border-color: rgba(22,26,29,.35); }
.mrf-btn--ghost-dark:hover, .mrf-btn--ghost-dark:focus-visible { background: var(--mrf-charcoal); color: var(--mrf-bone); border-color: var(--mrf-charcoal); }

.mrf-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(128,128,128,.4);
  padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease;
}
.mrf-link:hover, .mrf-link:focus-visible { color: var(--mrf-oxide); border-color: var(--mrf-oxide); }

/* ==========================================================================
   HERO
   ========================================================================== */
.mrf-hero {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: clamp(560px, 86vh, 850px);
  overflow: hidden;
}
.mrf-hero__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; }
.mrf-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.mrf-hero__scrim {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,18,20,.93) 0%, rgba(15,18,20,.84) 26%, rgba(15,18,20,.52) 50%, rgba(15,18,20,.12) 72%, rgba(15,18,20,0) 88%),
    linear-gradient(180deg, rgba(15,18,20,.7) 0%, rgba(15,18,20,0) 32%);
}
/* Sit the copy below the sticky header and a touch past centre, so it reads
   as a composed block rather than pinned into the top-left corner. */
.mrf-hero__inner {
  max-width: 700px;
  padding-top: clamp(150px, 22vh, 250px);
  padding-bottom: clamp(72px, 12vh, 130px);
}
.mrf-hero h1 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: clamp(2.35rem, 5.2vw, 4.35rem);
  line-height: .99;
  letter-spacing: -.028em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.mrf-hero__sub {
  color: rgba(255,255,255,.92);
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.25rem);
  line-height: 1.62;
  max-width: 54ch;
  margin: 0 0 2.5rem;
}
.mrf-hero .mrf-eyebrow { color: #E9AF92; }
.mrf-hero .mrf-eyebrow::after { background: #E9AF92; }
.mrf-hero__tertiary { margin-top: 1.75rem; }
.mrf-hero__tertiary .mrf-link { color: rgba(255,255,255,.9); border-bottom-color: rgba(255,255,255,.4); }

/* ==========================================================================
   THREE BUYER PATHS
   ========================================================================== */
.mrf-paths__head { max-width: 48ch; margin-bottom: var(--mrf-head-gap); }
.mrf-paths__grid { display: grid; gap: clamp(22px, 2.6vw, 34px); grid-template-columns: repeat(3, 1fr); }
/* Two-up card grid (Resources core guides). A class, not an inline style, so
   the mobile stack below actually wins. */
.mrf-paths__grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .mrf-paths__grid--2 { grid-template-columns: 1fr; } }

/* Photography-led, not a floating UI card: no shadow, no fill, one hairline
   rule under the image and the type sitting directly on the page. */
.mrf-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mrf-card__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--mrf-graphite);
  border-radius: 2px;
  margin-bottom: clamp(1.4rem, 1.8vw, 1.9rem);
}
.mrf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mrf-card:hover .mrf-card__media img { transform: scale(1.04); }
.mrf-card__body { padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.mrf-card__num {
  font-family: Inter, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--mrf-label);
  margin: 0 0 .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--mrf-line);
}
.mrf-card h3 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .8rem;
  color: var(--mrf-charcoal);
}
.mrf-card p { font-size: var(--mrf-small); line-height: 1.62; color: var(--mrf-ink-soft); margin: 0 0 1.6rem; }
.mrf-card .mrf-link { margin-top: auto; align-self: flex-start; color: var(--mrf-charcoal); }

/* ==========================================================================
   SPLIT SECTIONS
   ========================================================================== */
.mrf-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.mrf-split--flip .mrf-split__media { order: 2; }
.mrf-split__media img { width: 100%; border-radius: 2px; aspect-ratio: 4 / 3; object-fit: cover; }
/* Installation: let the finished roof carry more horizontal weight */
.mrf-split--wide-media { grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 4.5vw, 64px); }
.mrf-split--wide-media .mrf-split__media img { aspect-ratio: 3 / 2; }

/* Contractor spec list - scannable term/definition pairs, not bullets */
.mrf-specs { margin: 0 0 2.25rem; padding: 0; display: grid; gap: 0; }
.mrf-specs > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.4fr) 1fr;
  gap: clamp(12px, 2vw, 28px);
  padding: .95rem 0;
  border-top: 1px solid var(--mrf-line);
  align-items: baseline;
}
.mrf-specs > div:last-child { border-bottom: 1px solid var(--mrf-line); }
.mrf-specs dt {
  font-family: Inter, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mrf-charcoal);
  margin: 0;
}
.mrf-specs dd { margin: 0; font-size: var(--mrf-small); line-height: 1.55; color: var(--mrf-ink-soft); }

.mrf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--mrf-line);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
}
.mrf-sec--charcoal .mrf-stats, .mrf-sec--graphite .mrf-stats { border-color: var(--mrf-line-dark); }
.mrf-stat__k {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .4rem;
}
.mrf-stat__v {
  font-size: clamp(.9375rem, .25vw + .88rem, 1rem);
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mrf-label);
  margin: 0;
}
.mrf-sec--charcoal .mrf-stat__v, .mrf-sec--graphite .mrf-stat__v { color: var(--mrf-galv); }

/* ==========================================================================
   SEAM DETAIL BAND
   ========================================================================== */
.mrf-detail { position: relative; isolation: isolate; overflow: hidden; }
.mrf-detail__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; }
.mrf-detail__img img { width: 100%; height: 100%; object-fit: cover; }
.mrf-detail__scrim {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(15,18,20,.93) 0%, rgba(15,18,20,.8) 38%, rgba(15,18,20,.3) 70%, rgba(15,18,20,.08) 100%);
}
.mrf-detail__inner { max-width: 560px; }
.mrf-detail h2 { color: #fff; }
/* This band is dark but is not .mrf-sec--charcoal, so the dark-surface text
   rules do not reach it. Set them explicitly or body copy renders
   charcoal-on-charcoal and disappears. */
.mrf-detail { color: var(--mrf-bone); }
.mrf-detail .mrf-lede { color: rgba(243,241,234,.86); }
.mrf-detail .mrf-stats { border-color: var(--mrf-line-dark); }
.mrf-detail .mrf-stat__k { color: #fff; }
.mrf-detail .mrf-stat__v { color: var(--mrf-galv); }
.mrf-detail .mrf-note {
  background: rgba(200,95,50,.12);
  color: rgba(243,241,234,.88);
}
.mrf-detail .mrf-note strong { color: var(--mrf-bone); }
/* Keep captions on one baseline when a stat value wraps to two lines */
.mrf-stat__k { min-height: 2.3em; }
@media (max-width: 700px) { .mrf-stat__k { min-height: 0; } }
.mrf-ticks { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.mrf-ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: rgba(255,255,255,.9);
  font-size: 1rem;
  line-height: 1.5;
}
.mrf-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 12px;
  height: 1px;
  background: var(--mrf-oxide);
}

/* ==========================================================================
   DIY STEPS
   ========================================================================== */
/* Steps read as a proper stage list, not footnotes */
.mrf-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.8vw, 40px);
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-top: clamp(2rem, 3vw, 2.75rem);
  border-top: 1px solid var(--mrf-line-dark);
}
.mrf-step { padding-top: 0; border: 0; }
.mrf-step__n {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--mrf-oxide);
  margin: 0 0 .9rem;
}
.mrf-step p { margin: 0; font-size: var(--mrf-small); line-height: 1.6; color: rgba(243,241,234,.88); }

/* Step-count modifiers.
   These replace inline grid-template-columns, which out-specified the
   responsive rules below and left five 67px columns of body copy at 375px. */
.mrf-steps--5 { grid-template-columns: repeat(5, 1fr); }
.mrf-steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) { .mrf-steps--5 { grid-template-columns: repeat(3, 1fr); row-gap: clamp(28px,4vw,44px); } }
@media (max-width: 1024px) {
  .mrf-steps--5 { grid-template-columns: repeat(2, 1fr); }
  /* .mrf-steps--3 deliberately stays 3-up down to the mobile break: these are
     six short scannable benefit items, not process copy, and they read fine at
     tablet thirds. Long-form step groups use --5 and still drop to 2. */
}
@media (max-width: 700px) {
  .mrf-steps--5, .mrf-steps--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
/* Editorial two-column: statement left, plain typographic lists right.
   No chips, no pills, no interface furniture. */
.mrf-area__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.mrf-area__intro .mrf-lede { margin-bottom: 0; }
.mrf-area__lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.5vw, 48px); }
.mrf-area h3 {
  font-family: Inter, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mrf-label);
  margin: 0 0 1.2rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--mrf-line);
}
.mrf-area__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .72rem; }
.mrf-area__list li {
  font-size: var(--mrf-small);
  line-height: 1.4;
  color: var(--mrf-charcoal);
  font-weight: 500;
}
/* Town links, full width under the whole service-area grid. Inside the 330px
   Installation column they stacked one per line and every line ended on a
   separator.
   No separator character at all: a "·" after a link strands at the end of a
   wrapped line, and a "·" before one strands at the start. Flex wrapping with
   a gap is the only arrangement where neither can happen, and the links are
   underlined so they still read as a list. Same typographic weight as the
   footer service-area line from Round 09, re-grounded for bone; 3px block
   padding keeps every link clear of the 24px target minimum.
   Scoped to .mrf-area rather than used bare: Kadence emits inline CSS late in
   the document that zeroes paragraph margins at the same specificity, so a
   single-class selector here loses on source order. */
.mrf-area .mrf-area__towns {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.5rem;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  font-size: var(--mrf-small);
  line-height: 1.9;
  color: var(--mrf-ink-soft);
}
.mrf-area .mrf-area__towns a { display: inline-block; padding-top: 3px; padding-bottom: 3px; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.mrf-gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.2vw, 30px); }
.mrf-gal__item { overflow: hidden; border-radius: 2px; background: var(--mrf-graphite); }
.mrf-gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mrf-gal__item:hover img { transform: scale(1.03); }
.mrf-gal__item--a { grid-column: span 7; aspect-ratio: 16 / 11; }
.mrf-gal__item--b { grid-column: span 5; aspect-ratio: 4 / 5; }
.mrf-gal__item--c { grid-column: span 12; aspect-ratio: 21 / 8; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.mrf-final { padding-top: var(--mrf-pad-lg); padding-bottom: var(--mrf-pad-lg); }
.mrf-final h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0 0 1.4rem;
  color: #fff;
}
.mrf-final p {
  color: rgba(243,241,234,.85);
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.25rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 2.75rem;
}

/* ==========================================================================
   ROOF KITS PAGE
   Built from the same tokens as the homepage - no new palette, no new type.
   ========================================================================== */

/* ---- Split hero: copy beside the image so the kit stays fully visible ---- */
.mrf-shero { background: var(--mrf-charcoal); color: var(--mrf-bone); overflow: hidden; }
.mrf-shero__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  min-height: clamp(520px, 74vh, 720px);
}
.mrf-shero__copy { padding-top: clamp(130px, 16vh, 180px); padding-bottom: clamp(56px, 8vh, 96px); }
.mrf-shero h1 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 1.0;
  letter-spacing: -.028em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.mrf-shero__sub {
  color: rgba(243,241,234,.86);
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.2rem);
  line-height: 1.62;
  max-width: 46ch;
  margin: 0 0 2.25rem;
}
.mrf-shero__note {
  margin: 1.6rem 0 0;
  font-size: var(--mrf-small);
  line-height: 1.55;
  color: rgba(243,241,234,.6);
  max-width: 44ch;
}
.mrf-shero__media { position: relative; align-self: stretch; min-height: 320px; }
.mrf-shero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 78%;
}

/* ---- Inventory list (what you get) ---- */
.mrf-inv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 4vw, 64px); }
.mrf-inv__item { padding: clamp(1.4rem, 2vw, 1.8rem) 0; border-top: 1px solid var(--mrf-line); }
.mrf-sec--graphite .mrf-inv__item, .mrf-sec--charcoal .mrf-inv__item { border-color: var(--mrf-line-dark); }
.mrf-inv__k {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: Inter, sans-serif;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mrf-charcoal);
  margin: 0 0 .55rem;
}
.mrf-sec--graphite .mrf-inv__k, .mrf-sec--charcoal .mrf-inv__k { color: var(--mrf-bone); }
.mrf-inv__k span { color: var(--mrf-oxide); font-size: .7rem; letter-spacing: .1em; }
.mrf-inv__item p { margin: 0; font-size: var(--mrf-small); line-height: 1.6; color: var(--mrf-ink-soft); }
.mrf-sec--graphite .mrf-inv__item p, .mrf-sec--charcoal .mrf-inv__item p { color: rgba(243,241,234,.8); }

/* ---- Two-panel comparison (fit / complexity / kit vs install) ---- */
.mrf-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); }
.mrf-panel { padding: clamp(26px, 3vw, 40px); border-radius: 2px; }
.mrf-panel--pos { background: #fff; border: 1px solid var(--mrf-line); }
.mrf-panel--neu { background: transparent; border: 1px solid var(--mrf-line); }
.mrf-panel--dark { background: var(--mrf-charcoal); color: var(--mrf-bone); border: 1px solid transparent; }
.mrf-panel--graph { background: var(--mrf-graphite); color: var(--mrf-bone); border: 1px solid transparent; }
.mrf-panel__label {
  font-family: Inter, sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 1.1rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--mrf-line);
}
.mrf-panel--pos .mrf-panel__label { color: var(--mrf-oxide); }
.mrf-panel--neu .mrf-panel__label { color: var(--mrf-label); }
.mrf-panel--dark .mrf-panel__label, .mrf-panel--graph .mrf-panel__label {
  color: var(--mrf-oxide); border-color: var(--mrf-line-dark);
}
.mrf-panel h3 {
  font-family: Archivo, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.15;
  letter-spacing: -.012em; margin: 0 0 1rem;
}
.mrf-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .72rem; }
.mrf-panel li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--mrf-small); line-height: 1.55; color: var(--mrf-ink-soft);
}
.mrf-panel--dark li, .mrf-panel--graph li { color: rgba(243,241,234,.85); }
.mrf-panel li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 9px; height: 1px; background: var(--mrf-oxide);
}
.mrf-panel .mrf-btn, .mrf-panel .mrf-link { margin-top: 1.75rem; }
.mrf-panel p { font-size: var(--mrf-small); line-height: 1.6; color: var(--mrf-ink-soft); margin: 0 0 1rem; }
.mrf-panel--dark p, .mrf-panel--graph p { color: rgba(243,241,234,.82); }

/* ---- Safety / qualification note ---- */
.mrf-note {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.3rem, 2vw, 1.8rem);
  border-left: 2px solid var(--mrf-oxide);
  background: rgba(200,95,50,.06);
  font-size: var(--mrf-small);
  line-height: 1.62;
  color: var(--mrf-ink-soft);
}
.mrf-sec--graphite .mrf-note, .mrf-sec--charcoal .mrf-note {
  background: rgba(200,95,50,.1); color: rgba(243,241,234,.86);
}
.mrf-note strong { color: var(--mrf-charcoal); font-weight: 700; }
.mrf-sec--graphite .mrf-note strong, .mrf-sec--charcoal .mrf-note strong { color: var(--mrf-bone); }

/* ---- Three-up (pickup & delivery, tools) ---- */
.mrf-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.mrf-three__item { border-top: 1px solid var(--mrf-line); padding-top: 1.4rem; }
.mrf-sec--graphite .mrf-three__item, .mrf-sec--charcoal .mrf-three__item { border-color: var(--mrf-line-dark); }
.mrf-three__item h3 {
  font-family: Inter, sans-serif;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mrf-oxide); margin: 0 0 .8rem;
}
.mrf-three__item p { margin: 0; font-size: var(--mrf-small); line-height: 1.62; color: var(--mrf-ink-soft); }
.mrf-sec--graphite .mrf-three__item p, .mrf-sec--charcoal .mrf-three__item p { color: rgba(243,241,234,.82); }

/* ---- Tool columns ---- */
.mrf-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem clamp(28px, 4vw, 56px); list-style: none; margin: 0; padding: 0; }
.mrf-tools li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--mrf-small); line-height: 1.5; color: var(--mrf-ink-soft);
}
.mrf-tools li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 9px; height: 1px; background: var(--mrf-galv);
}

/* ---- FAQ: native disclosure, no JS ---- */
.mrf-faq { border-top: 1px solid var(--mrf-line); }
.mrf-faq details { border-bottom: 1px solid var(--mrf-line); }
.mrf-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.15rem, 1.8vw, 1.5rem) 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: -.008em;
  color: var(--mrf-charcoal);
  transition: color .18s ease;
}
.mrf-faq summary::-webkit-details-marker { display: none; }
.mrf-faq summary:hover, .mrf-faq summary:focus-visible { color: var(--mrf-oxide); }
.mrf-faq summary::after {
  content: ""; flex: 0 0 14px; height: 14px; margin-top: .35em;
  background:
    linear-gradient(var(--mrf-oxide), var(--mrf-oxide)) center/14px 1.5px no-repeat,
    linear-gradient(var(--mrf-oxide), var(--mrf-oxide)) center/1.5px 14px no-repeat;
  transition: transform .2s ease;
}
.mrf-faq details[open] summary::after { transform: rotate(45deg); }
.mrf-faq__a { padding: 0 0 clamp(1.3rem, 2vw, 1.7rem); max-width: 78ch; }
.mrf-faq__a p { margin: 0 0 .8rem; font-size: var(--mrf-small); line-height: 1.68; color: var(--mrf-ink-soft); }
.mrf-faq__a p:last-child { margin-bottom: 0; }
.mrf-faq__a a { color: var(--mrf-oxide); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Roof-kits responsive ---- */
@media (max-width: 1024px) {
  .mrf-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .mrf-shero__grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .mrf-shero__copy { padding-top: clamp(120px, 18vh, 160px); padding-bottom: clamp(40px, 6vh, 64px); }
  .mrf-shero__media { min-height: 0; aspect-ratio: 16 / 10; }
  .mrf-shero__media img { position: relative; inset: auto; }
}
@media (max-width: 860px) {
  .mrf-inv, .mrf-cmp, .mrf-three { grid-template-columns: 1fr; }
  .mrf-inv { gap: 0; }
}
@media (max-width: 700px) {
  .mrf-tools { grid-template-columns: 1fr; }
  .mrf-shero__media { aspect-ratio: 4 / 3; }
  .mrf-shero__media img { object-position: 50% 68%; }
  /* Buttons stack at this width, so the micro-copy needs more separation
     from the last button than it does on desktop. */
  .mrf-shero__note { margin-top: 2.35rem; }
  .mrf-faq summary { font-size: 1.05rem; padding: 1.1rem 0; }
}

/* ==========================================================================
   EDITORIAL ARTICLE (resource pages)
   Same tokens as the rest of the site, but a narrow reading measure with
   deliberate breakouts for data.
   ========================================================================== */

.mrf-art { --read: 780px; }
.mrf-read {
  max-width: var(--read);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Breakout: wider than the reading column, still inside the page gutter */
.mrf-break { max-width: 1040px; margin-left: auto; margin-right: auto; width: 100%; }

.mrf-art p, .mrf-art li { font-size: var(--mrf-body); line-height: 1.72; }
/* Body prose only. Restricting to unclassed paragraphs matters: this selector
   out-specifies .mrf-lede / .mrf-eyebrow / .mrf-statement, and without the
   :not() it paints them charcoal on the dark bands where they disappear. */
.mrf-art .mrf-read > p:not([class]) { margin: 0 0 1.35em; color: var(--mrf-ink-soft); }
.mrf-art .mrf-read > p:not([class]) strong { color: var(--mrf-charcoal); font-weight: 700; }
.mrf-art h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0 0 1rem;
  color: var(--mrf-charcoal);
  text-wrap: balance;
}
.mrf-art h3 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 2.5rem 0 .9rem;
  color: var(--mrf-charcoal);
}
.mrf-art__rule { border: 0; border-top: 1px solid var(--mrf-line); margin: clamp(3rem,6vw,5rem) auto; max-width: var(--read); }

/* ---- Editorial hero ---- */
.mrf-ahero { background: var(--mrf-bone); padding-top: clamp(140px, 18vh, 200px); padding-bottom: clamp(48px, 6vw, 76px); }
.mrf-ahero h1 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 0 0 1.5rem;
  color: var(--mrf-charcoal);
  text-wrap: balance;
}
.mrf-ahero__answer {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--mrf-oxide);
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--mrf-oxide);
}
.mrf-ahero__intro { font-size: clamp(1.05rem, .5vw + .95rem, 1.2rem); line-height: 1.68; color: var(--mrf-ink-soft); margin: 0 0 2rem; }
.mrf-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--mrf-line);
}
.mrf-meta__v {
  font-family: Inter, sans-serif; font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mrf-charcoal);
}
.mrf-meta__n { font-size: var(--mrf-small); color: var(--mrf-label); margin: 0; }

/* ---- Table of contents ---- */
.mrf-toc { border-top: 1px solid var(--mrf-line); border-bottom: 1px solid var(--mrf-line); padding: 1.4rem 0; }
.mrf-toc__t {
  font-family: Inter, sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mrf-label); margin: 0 0 .9rem;
}
.mrf-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem 2rem; counter-reset: toc; }
.mrf-toc li { counter-increment: toc; }
.mrf-toc a {
  font-size: var(--mrf-small); color: var(--mrf-charcoal); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease;
}
.mrf-toc a::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--mrf-galv); font-weight: 700; font-size: .8em; }
.mrf-toc a:hover { color: var(--mrf-oxide); border-bottom-color: var(--mrf-oxide); }

/* ---- Two-panel short answer ---- */
.mrf-answer { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); margin: 2.5rem 0; }
.mrf-answer__box { padding: clamp(22px, 2.6vw, 32px); border-radius: 2px; }
.mrf-answer__box--no { background: var(--mrf-charcoal); color: var(--mrf-bone); }
.mrf-answer__box--yes { background: #fff; border: 1px solid var(--mrf-line); }
.mrf-answer__l {
  font-family: Inter, sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .9rem;
}
.mrf-answer__box--no .mrf-answer__l { color: var(--mrf-oxide); }
.mrf-answer__box--yes .mrf-answer__l { color: var(--mrf-label); }
.mrf-answer__box p { margin: 0; font-size: var(--mrf-small); line-height: 1.6; }
.mrf-answer__box--no p { color: rgba(243,241,234,.88); }
.mrf-answer__box--yes p { color: var(--mrf-ink-soft); }

/* ---- Data table ---- */
.mrf-tablewrap { margin: 2rem 0 1rem; }
table.mrf-table { width: 100%; border-collapse: collapse; font-family: Inter, sans-serif; }
table.mrf-table caption { text-align: left; font-size: var(--mrf-small); color: var(--mrf-label); padding-bottom: .9rem; }
table.mrf-table th, table.mrf-table td {
  text-align: left; padding: .95rem 1rem .95rem 0;
  border-bottom: 1px solid var(--mrf-line); vertical-align: top;
}
table.mrf-table thead th {
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mrf-label); border-bottom: 1px solid var(--mrf-charcoal); padding-bottom: .7rem;
}
table.mrf-table tbody td { font-size: var(--mrf-small); line-height: 1.45; color: var(--mrf-ink-soft); }
table.mrf-table tbody th { font-size: var(--mrf-small); font-weight: 600; color: var(--mrf-charcoal); line-height: 1.45; padding-right: 1.5rem; }
table.mrf-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mrf-table tr.is-key th, table.mrf-table tr.is-key td { background: rgba(200,95,50,.07); color: var(--mrf-charcoal); font-weight: 700; }
table.mrf-table tr.is-key th { box-shadow: inset 3px 0 0 var(--mrf-oxide); padding-left: 1rem; }

/* ---- Editorial callout ---- */
.mrf-call {
  margin: 2.25rem 0;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--mrf-line);
  border-left: 3px solid var(--mrf-oxide);
  border-radius: 2px;
}
.mrf-call__l {
  font-family: Inter, sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mrf-oxide); margin: 0 0 .8rem;
}
.mrf-call p { margin: 0 0 .75rem; font-size: var(--mrf-small); line-height: 1.65; color: var(--mrf-ink-soft); }
.mrf-call p:last-child { margin-bottom: 0; }
.mrf-call strong { color: var(--mrf-charcoal); }

/* ---- Numbered "things people get wrong" ---- */
.mrf-wrong { display: grid; gap: 0; margin: 2rem 0; counter-reset: wrong; }
.mrf-wrong__i { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.3rem 0; border-top: 1px solid var(--mrf-line); }
.mrf-wrong__i:last-child { border-bottom: 1px solid var(--mrf-line); }
.mrf-wrong__n { font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--mrf-oxide); line-height: 1.3; }
.mrf-wrong__i h4 { font-family: Inter, sans-serif; font-size: var(--mrf-small); font-weight: 700; color: var(--mrf-charcoal); margin: 0 0 .4rem; line-height: 1.4; }
.mrf-wrong__i p { margin: 0; font-size: var(--mrf-small); line-height: 1.6; color: var(--mrf-ink-soft); }

/* ---- Disqualification rules ---- */
.mrf-rules { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: rule; }
.mrf-rules li {
  counter-increment: rule;
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem;
  padding: 1.35rem 0; border-top: 1px solid var(--mrf-line);
}
.mrf-rules li:last-child { border-bottom: 1px solid var(--mrf-line); }
.mrf-rules li::before {
  content: counter(rule, decimal-leading-zero);
  font-family: Archivo, sans-serif; font-weight: 800; font-size: .95rem;
  color: var(--mrf-galv); padding-top: .15em;
}
.mrf-rules strong { display: block; color: var(--mrf-charcoal); font-weight: 700; margin-bottom: .3rem; }
.mrf-rules span { display: block; font-size: var(--mrf-small); line-height: 1.62; color: var(--mrf-ink-soft); }

/* ---- Dark statement band ---- */
/* .mrf-art p sets a body font-size at (0,1,1); the statement needs to beat it,
   hence the doubled class rather than a bare .mrf-statement. */
.mrf-statement, .mrf-art .mrf-statement, .mrf-statement.mrf-statement {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #fff;
  margin: 1.75rem 0 2rem;
  text-transform: uppercase;
}
.mrf-disclose {
  margin-top: 2.25rem; padding: clamp(1.2rem, 2vw, 1.7rem);
  border: 1px solid rgba(167,173,176,.3); border-left: 3px solid var(--mrf-oxide);
  border-radius: 2px; background: rgba(0,0,0,.18);
}
.mrf-disclose p { margin: 0; font-size: var(--mrf-small); line-height: 1.65; color: rgba(243,241,234,.9); }
.mrf-disclose strong { color: #fff; }

/* ---- Benefit rows ---- */
.mrf-benefits { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: ben; }
.mrf-benefits li {
  counter-increment: ben;
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem;
  padding: 1.3rem 0; border-top: 1px solid var(--mrf-line);
}
.mrf-benefits li:last-child { border-bottom: 1px solid var(--mrf-line); }
.mrf-benefits li::before {
  content: counter(ben, decimal-leading-zero);
  font-family: Archivo, sans-serif; font-weight: 800; font-size: .95rem; color: var(--mrf-galv); padding-top: .2em;
}
.mrf-benefits strong { display: block; color: var(--mrf-charcoal); font-weight: 700; margin-bottom: .3rem; }
.mrf-benefits span { display: block; font-size: var(--mrf-small); line-height: 1.62; color: var(--mrf-ink-soft); }

/* ---- Sources ---- */
.mrf-sources { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.mrf-sources li {
  font-size: var(--mrf-small); line-height: 1.55; color: var(--mrf-ink-soft);
  padding-left: 1.4rem; position: relative;
}
.mrf-sources li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--mrf-galv); }

/* ---- Article responsive ---- */
@media (max-width: 860px) {
  .mrf-answer { grid-template-columns: 1fr; }
  .mrf-toc ol { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Stack the data table into labelled rows rather than shrinking type */
  table.mrf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.mrf-table tbody tr {
    display: block; padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--mrf-line);
  }
  table.mrf-table tbody tr.is-key { padding-left: .9rem; box-shadow: inset 3px 0 0 var(--mrf-oxide); background: rgba(200,95,50,.07); }
  table.mrf-table tbody th, table.mrf-table tbody td { display: block; border: 0; padding: 0; }
  table.mrf-table tbody th { font-size: 1.0625rem; font-weight: 700; margin-bottom: .7rem; padding-right: 0; }
  table.mrf-table tbody tr.is-key th { box-shadow: none; padding-left: 0; }
  table.mrf-table tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
  table.mrf-table tbody td::before {
    content: attr(data-label);
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mrf-label); flex: 0 0 auto; padding-top: .18em;
  }
  .mrf-wrong__i, .mrf-rules li, .mrf-benefits li { grid-template-columns: 2.25rem 1fr; gap: .8rem; }
}

/* ==========================================================================
   CONTACT FORM
   Visual treatment only. The Kadence form block, its fields and its (empty)
   recipient configuration are untouched.
   ========================================================================== */
.mrf-contact-form .kadence-blocks-form-field { margin-bottom: 1.1rem; }
.mrf-contact-form input[type="text"],
.mrf-contact-form input[type="email"],
.mrf-contact-form input[type="tel"],
.mrf-contact-form select,
.mrf-contact-form textarea {
  width: 100%;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mrf-charcoal);
  background: #fff;
  border: 1px solid var(--mrf-line);
  border-radius: 2px;
  padding: .95rem 1.05rem;
  min-height: 52px;
  transition: border-color .18s ease, box-shadow .18s ease;
  appearance: none;
  -webkit-appearance: none;
}
.mrf-contact-form textarea { min-height: 170px; resize: vertical; padding-top: 1rem; }
.mrf-contact-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mrf-charcoal) 50%),
                    linear-gradient(135deg, var(--mrf-charcoal) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.mrf-contact-form ::placeholder { color: #6A7175; opacity: 1; }
.mrf-contact-form input:focus,
.mrf-contact-form select:focus,
.mrf-contact-form textarea:focus {
  outline: none;
  border-color: var(--mrf-oxide);
  box-shadow: 0 0 0 3px rgba(200, 95, 50, .16);
}
/* Kadence styles its own submit button with higher specificity, so these need
   !important to land. Appearance only - the form action is untouched. */
.mrf-contact-form .kb-forms-submit,
.mrf-contact-form button.kb-forms-submit,
.mrf-contact-form button[type="submit"],
.mrf-contact-form input[type="submit"] {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  background: var(--mrf-oxide-ink) !important;
  background-color: var(--mrf-oxide-ink) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  padding: 1.05rem 1.9rem !important;
  min-height: 52px;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color .18s ease;
}
.mrf-contact-form .kb-forms-submit:hover,
.mrf-contact-form button.kb-forms-submit:hover,
.mrf-contact-form button[type="submit"]:hover,
.mrf-contact-form input[type="submit"]:hover {
  background: var(--mrf-oxide-dark) !important;
  background-color: var(--mrf-oxide-dark) !important;
  color: #fff !important;
}
.mrf-contact-form label { font-size: var(--mrf-small); color: var(--mrf-charcoal); font-weight: 600; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Footer shell: charcoal end-to-end, left aligned, sane spacing */
#colophon, .site-footer, .site-footer-row-container, .site-bottom-footer-wrap,
.site-top-footer-wrap, .site-middle-footer-wrap { background-color: var(--mrf-charcoal) !important; }
.site-top-footer-inner-wrap { padding-top: clamp(48px, 6vw, 80px) !important; padding-bottom: clamp(32px, 4vw, 48px) !important; }
.site-bottom-footer-inner-wrap { padding-top: 0 !important; padding-bottom: clamp(28px, 3vw, 40px) !important; border-top: 1px solid var(--mrf-line-dark); margin-top: clamp(28px, 3vw, 40px); }
.site-footer .widget-area, .site-footer .footer-widget-area, .mrf-f { text-align: left !important; }
.site-footer .footer-widget-area.content-align-center { text-align: left !important; }

.mrf-f { max-width: var(--mrf-max); margin: 0 auto; width: 100%; }
.mrf-f__grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
/* 1772 is a 6.5:1 lockup where the old mark was 3.6:1, so the same 180px
   read half the height. 240 restores the footer mark to header scale. */
.mrf-f__brand img { width: 240px; max-width: 80%; height: auto; margin-bottom: 1.6rem; }
.mrf-f__brand p {
  color: rgba(243,241,234,.7);
  font-size: var(--mrf-small); line-height: 1.7; max-width: 42ch; margin: 0;
}
.mrf-f__col h4 {
  font-family: Inter, sans-serif;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mrf-galv);
  margin: 0 0 1.3rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--mrf-line-dark);
}
.mrf-f__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.mrf-f__col a {
  color: rgba(243,241,234,.88);
  font-size: var(--mrf-small); line-height: 1.45; text-decoration: none;
  transition: color .18s ease;
}
.mrf-f__col a:hover, .mrf-f__col a:focus-visible { color: var(--mrf-oxide); }
/* Bottom bar copyright. Kadence renders this with the inherited base font from
   the old starter template (Open Sans), so set the family explicitly. */
.site-bottom-footer-wrap .site-footer-row,
.site-bottom-footer-wrap .footer-html-inner,
.site-bottom-footer-wrap .footer-html-inner p {
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--mrf-small);
  color: rgba(243,241,234,.55);
}

@media (max-width: 860px) {
  .mrf-f__grid { grid-template-columns: 1fr 1fr; }
  .mrf-f__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .mrf-f__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Sticky row: transparent over the hero, near-solid charcoal once stuck.
   Enforced here because the transparent-header mode otherwise keeps the
   stuck row see-through over the light sections below. */
#masthead .site-header-row-container.item-is-fixed,
#masthead .site-header-main-section-left ~ .item-is-fixed,
.site-header-row-container.item-is-fixed,
.item-is-fixed.item-is-stuck {
  background-color: rgba(22, 26, 29, .96) !important;
  border-bottom: 1px solid rgba(167, 173, 176, .18);
  transition: background-color .2s ease, border-color .2s ease;
  backdrop-filter: saturate(120%) blur(2px);
}
.item-is-fixed .header-navigation .nav-link,
.item-is-fixed .site-title { color: var(--mrf-bone) !important; }
.item-is-fixed .header-navigation .nav-link:hover { color: var(--mrf-oxide) !important; }
/* Never let the stuck row cast a heavy shadow */
#masthead .item-is-fixed { box-shadow: none !important; }

/* Kadence off-by-one: its mobile header styles stop at 1023px and the desktop
   sticky script starts at 1025px, so a viewport of exactly 1024px (iPad
   landscape) gets no sticky header at all. Pin it here as a CSS-only
   fallback for that single width. */
@media (min-width: 1024px) and (max-width: 1024px) {
  #masthead .site-main-header-wrap {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 499;
    background-color: rgba(22, 26, 29, .96) !important;
    border-bottom: 1px solid rgba(167, 173, 176, .18);
  }
  /* Header is opaque at this width, so start the hero below it. */
  .mrf-hero { margin-top: 102px; }
  .mrf-hero__inner { padding-top: clamp(80px, 12vh, 130px); }
}

/* Kadence applies transparent-header + mobile-transparent-header to EVERY page
   regardless of the per-page setting, so the header simply shows whatever
   section sits beneath it. On pages that open with a bone article hero
   (Resources, Rebates, Contact) that left the light logo on a bone field and
   effectively invisible.
   Fix is one global state rather than per-page overrides: below the desktop
   breakpoint the header is always charcoal, so the light logo always reads.
   The transparent-over-hero treatment is kept on desktop where every hero is
   dark. Hero top padding already exceeds header height, so nothing is covered. */
@media (max-width: 1024px) {
  #masthead .site-main-header-wrap,
  #masthead .site-header-row-container,
  .site-header-row-container.item-is-fixed {
    background-color: var(--mrf-charcoal) !important;
  }
}
/* Desktop: any article-hero page still needs a solid header behind the logo. */
.mrf-ahero { margin-top: 0; }
/* Drawer toggle + nav must read on charcoal in every state */
#masthead .drawer-toggle .menu-toggle-icon,
#masthead .drawer-toggle .menu-toggle-open-icon { color: var(--mrf-bone); }

.site-branding img { max-height: 54px; width: auto; }
/* Every homepage anchor link is flagged current-menu-item + menu-item-home, so
   Kadence painted four simultaneous "you are here" underlines. Kadence drives
   that rule with transform: scaleX(), so reset the transform (not opacity) and
   give the underline back to hover/focus only. */
.header-navigation .menu > li.current-menu-item > a::after,
.header-navigation .menu > li.current_page_item > a::after,
.header-navigation .menu > li.menu-item-home > a::after {
  transform: scaleX(0) !important;
}
.header-navigation .menu > li > a:hover::after,
.header-navigation .menu > li > a:focus-visible::after {
  transform: scaleX(1) !important;
}
#masthead .header-button, .header-navigation .header-button {
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .mrf-paths__grid { grid-template-columns: repeat(2, 1fr); }
  .mrf-steps { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px, 4vw, 44px); }
  /* Must come after the generic .mrf-steps rule above, which otherwise wins on
     source order. Six short benefit items stay 3-up through tablet. */
  .mrf-steps--3 { grid-template-columns: repeat(3, 1fr); }
  .mrf-hero__img img { object-position: 68% 50%; }
  .mrf-split--wide-media { grid-template-columns: 1.15fr 1fr; }
}
@media (max-width: 860px) {
  .mrf-split, .mrf-split--wide-media, .mrf-area__grid { grid-template-columns: 1fr; }
  .mrf-split--flip .mrf-split__media { order: 0; }
  .mrf-gal__item--a, .mrf-gal__item--b, .mrf-gal__item--c { grid-column: span 12; }
  .mrf-gal__item--a { aspect-ratio: 16 / 10; }
  .mrf-gal__item--b { aspect-ratio: 4 / 3; }
  .mrf-gal__item--c { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .mrf-paths__grid { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 48px); }
  .mrf-stats { grid-template-columns: 1fr; gap: 1.5rem; }
  .mrf-steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .mrf-area__lists { grid-template-columns: 1fr; gap: 32px; }
  /* Spec pairs stack: label above value so neither gets squeezed */
  .mrf-specs > div { grid-template-columns: 1fr; gap: .4rem; padding: 1rem 0; }
  .mrf-card__media { aspect-ratio: 16 / 10; }
  .mrf-hero { min-height: 0; }
  .mrf-hero__inner { padding-top: clamp(120px, 20vh, 170px); padding-bottom: clamp(56px, 10vh, 80px); }
  .mrf-hero__img img { object-position: 62% 50%; }
  .mrf-hero__scrim {
    background: linear-gradient(180deg, rgba(15,18,20,.85) 0%, rgba(15,18,20,.68) 45%, rgba(15,18,20,.8) 100%);
  }
  .mrf-btn { width: 100%; padding: 1.1rem 1.5rem; }
  .mrf-detail__scrim { background: linear-gradient(180deg, rgba(15,18,20,.9) 0%, rgba(15,18,20,.72) 60%, rgba(15,18,20,.9) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .mrf-card, .mrf-card__media img, .mrf-gal__item img { transition: none !important; }
  .mrf-card:hover { transform: none; }
  .mrf-card:hover .mrf-card__media img, .mrf-gal__item:hover img { transform: none; }
}

/* ==========================================================================
   ROUND 04 FIXES
   ========================================================================== */

/* Header phone: WCAG 2.5.8 target size.
   The tel link measured 111x20, under the 24x24 minimum, and it is the primary
   CTA on mobile. Padding lifts the hit area without touching the header row,
   which is 100px tall and has the room. Kadence's header items are flex
   children, so inline-block is needed for the padding to apply vertically. */
.header-html a[href^="tel:"],
.mobile-html a[href^="tel:"] {
  display: inline-block;
  padding: 7px 4px;
}

/* Footer links: win back the design token.
   Kadence emits
     .site-footer .site-top-footer-wrap a:not(.button):not(.wp-block-button__link):not(.wp-element-button)
   which scores (0,5,1) — three :not() classes on top of two ancestor classes —
   so the plain .mrf-f__col a rule above never applied and every footer link
   rendered pure white. Scoping to the #colophon id gives (1,1,1); an id beats
   any number of classes, so this wins without !important. */
#colophon .mrf-f__col a { color: rgba(243, 241, 234, .88); }
#colophon .mrf-f__col a:hover,
#colophon .mrf-f__col a:focus-visible { color: var(--mrf-oxide); }

/* Footer service-area links, inline.
   Built first as a fifth grid column, which wrapped to a second row and added
   ~358px to the footer on every page — on a 4,000px location page that is a
   fifth of the document, and the mobile stack made it worse rather than
   better. As a wrapped sentence inside the Installation column the same six
   links cost two lines. Anchors inherit their colour from the
   #colophon .mrf-f__col a rule above. */
#colophon .mrf-f__areas {
  margin: 1.15rem 0 0;
  font-size: var(--mrf-small);
  line-height: 1.7;
  color: rgba(243, 241, 234, .55);
}

/* ==========================================================================
   GROUND-AWARE COMPONENT COLOURS
   --------------------------------------------------------------------------
   Several components hard-coded a colour for the ground they were first built
   on. Used on the opposite ground they rendered near-invisible: .mrf-statement
   and .mrf-ticks are light-on-light at 1.12 on bone, .mrf-rules / .mrf-specs /
   .mrf-tools are dark-on-dark at 1.43 on graphite.

   Fixed at the component level, scoped by ground class, following the pattern
   already used for .mrf-note and .mrf-inv above. No inline styles, no
   per-instance patches.
   ========================================================================== */

/* Built for dark grounds, corrected on light ones. */
.mrf-sec--bone .mrf-statement { color: var(--mrf-charcoal); }
.mrf-sec--bone .mrf-ticks li { color: var(--mrf-ink-soft); }
.mrf-sec--bone .mrf-ticks li strong { color: var(--mrf-charcoal); }

/* Built for light grounds, corrected on dark ones.
   .mrf-detail is a photograph behind a scrim, so it counts as dark. */
.mrf-sec--graphite .mrf-rules strong,
.mrf-sec--charcoal .mrf-rules strong,
.mrf-detail .mrf-rules strong,
.mrf-sec--graphite .mrf-specs dt,
.mrf-sec--charcoal .mrf-specs dt,
.mrf-detail .mrf-specs dt { color: var(--mrf-bone); }

.mrf-sec--graphite .mrf-rules span,
.mrf-sec--charcoal .mrf-rules span,
.mrf-detail .mrf-rules span,
.mrf-sec--graphite .mrf-specs dd,
.mrf-sec--charcoal .mrf-specs dd,
.mrf-detail .mrf-specs dd,
.mrf-sec--graphite .mrf-tools li,
.mrf-sec--charcoal .mrf-tools li,
.mrf-detail .mrf-tools li { color: rgba(243, 241, 234, .82); }

.mrf-sec--graphite .mrf-rules li,
.mrf-sec--charcoal .mrf-rules li,
.mrf-detail .mrf-rules li,
.mrf-sec--graphite .mrf-rules li:last-child,
.mrf-sec--charcoal .mrf-rules li:last-child,
.mrf-detail .mrf-rules li:last-child,
.mrf-sec--graphite .mrf-specs > div,
.mrf-sec--charcoal .mrf-specs > div,
.mrf-detail .mrf-specs > div { border-color: var(--mrf-line-dark); }

/* Graphite panel sitting inside a light section: Kadence styles h3 directly,
   so it does not inherit the panel's bone colour. */
.mrf-panel--graph h3, .mrf-panel--dark h3 { color: var(--mrf-bone); }

/* ==========================================================================
   TEXT-CARRYING OXIDE
   --------------------------------------------------------------------------
   #C85F32 measures 3.62 on bone and 2.82 on graphite, so it fails AA for
   normal text on both and fails even the large-text threshold on graphite.
   The brand colour itself is unchanged — rules, bars, borders, dashes and
   fills below still use it. These rules move the *text* uses onto the two
   readable variants, scoped by ground.
   ========================================================================== */

/* Light ground */
.mrf-eyebrow,
.mrf-step__n,
.mrf-inv__k span,
.mrf-panel--pos .mrf-panel__label,
.mrf-three__item h3,
.mrf-faq__a a,
.mrf-answer__box--no .mrf-answer__l,
.mrf-call__l,
.mrf-wrong__n { color: var(--mrf-oxide-ink); }

.mrf-link:hover, .mrf-link:focus-visible,
.mrf-faq summary:hover, .mrf-faq summary:focus-visible,
.mrf-toc a:hover { color: var(--mrf-oxide-ink); border-color: var(--mrf-oxide-ink); }

/* Dark ground */
.mrf-sec--graphite .mrf-eyebrow,
.mrf-sec--charcoal .mrf-eyebrow,
.mrf-detail .mrf-eyebrow,
.mrf-hero .mrf-eyebrow,
.mrf-shero .mrf-eyebrow,
.mrf-sec--graphite .mrf-step__n,
.mrf-sec--charcoal .mrf-step__n,
.mrf-detail .mrf-step__n,
.mrf-sec--graphite .mrf-inv__k span,
.mrf-sec--charcoal .mrf-inv__k span,
.mrf-sec--graphite .mrf-three__item h3,
.mrf-sec--charcoal .mrf-three__item h3,
.mrf-panel--dark .mrf-panel__label,
.mrf-panel--graph .mrf-panel__label { color: var(--mrf-oxide-lite); }

.mrf-sec--graphite .mrf-link:hover, .mrf-sec--graphite .mrf-link:focus-visible,
.mrf-sec--charcoal .mrf-link:hover, .mrf-sec--charcoal .mrf-link:focus-visible,
#colophon .mrf-f__col a:hover, #colophon .mrf-f__col a:focus-visible,
.item-is-fixed .header-navigation .nav-link:hover { color: var(--mrf-oxide-lite) !important; }

/* Button fills: white on #B3503B is 5.09, against 4.09 on brand oxide. */
.mrf-btn--primary { background: var(--mrf-oxide-ink); color: #fff; }
.mrf-btn--primary:hover, .mrf-btn--primary:focus-visible { background: var(--mrf-oxide-dark); color: #fff; }
.mrf-contact-form input[type="submit"],
.mrf-contact-form button[type="submit"],
.mrf-contact-form .kb-forms-submit {
  background: var(--mrf-oxide-ink) !important;
  background-color: var(--mrf-oxide-ink) !important;
}

/* Kadence sets a { color: var(--global-palette-highlight) }, which is brand
   oxide, so every prose link and the skip link measured 3.62 on bone. */
.mrf-art .mrf-read a:not(.mrf-btn):not(.mrf-link),
.mrf-faq__a a,
.mrf-ahero__answer,
.skip-link { color: var(--mrf-oxide-ink); }

.mrf-sec--graphite .mrf-read a:not(.mrf-btn):not(.mrf-link),
.mrf-sec--charcoal .mrf-read a:not(.mrf-btn):not(.mrf-link),
.mrf-sec--charcoal .mrf-answer__box--no .mrf-answer__l,
.mrf-sec--graphite .mrf-answer__box--no .mrf-answer__l,
.mrf-final a:not(.mrf-btn) { color: var(--mrf-oxide-lite); }

/* Default link colour, rather than chasing individual selectors. Anything with
   its own colour — nav, footer, buttons, .mrf-link — sets it at higher
   specificity and is unaffected; this only catches links that fall through to
   Kadence's palette-highlight. */
a { color: var(--mrf-oxide-ink); }
.mrf-sec--graphite a:not(.mrf-btn),
.mrf-sec--charcoal a:not(.mrf-btn),
.mrf-final a:not(.mrf-btn),
.mrf-answer__box--no .mrf-answer__l,
.mrf-answer__box--no a:not(.mrf-btn) { color: var(--mrf-oxide-lite); }

/* Current-page item in the mobile drawer: brand oxide on charcoal is 4.28. */
#mobile-drawer .current-menu-item > a,
#mobile-drawer .current_page_item > a,
.mobile-navigation .current-menu-item > a { color: var(--mrf-oxide-lite); }

/* ==========================================================================
   TARGET SIZE (WCAG 2.5.8, 24 x 24)
   Nav links, footer links and the scroll-to-top button measured 20px or less.
   Padding on an inline element does not grow its box, so these become
   inline-block first — the same fix used for the header phone in round 04.
   ========================================================================== */
.main-navigation .nav-link,
.header-navigation .nav-link,
#mobile-drawer .menu-item > a {
  display: inline-block;
  padding-top: 6px;
  padding-bottom: 6px;
}
#colophon .mrf-f__col a,
#colophon .mrf-f__areas a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
}
#kt-scroll-up, .kadence-scroll-to-top {
  min-width: 24px;
  min-height: 24px;
}

/* Table-of-contents links are a navigation list rather than inline prose, so
   2.5.8's inline exception does not cover them. */
.mrf-toc a { display: inline-block; padding-top: 2px; padding-bottom: 2px; }

/* Instant Quote CTA slot.
   The button exists in the homepage hero but stays hidden until the quote tool
   is switched on in its settings page, which adds .mrf-iq-live to <body>. */
.mrf-instant-quote-cta { display: none; }
body.mrf-iq-live .mrf-instant-quote-cta { display: block; }