/*
 Theme Name:   McFadden Utilities
 Theme URI:    https://tonymcfadden.com
 Description:  Custom child theme for McFadden Utilities Limited. Built by OmniFound.
 Author:       OmniFound Limited
 Author URI:   https://omnifound.co.uk
 Template:     hello-elementor
 Version:      1.1.0
 Text Domain:  mcfadden
*/

/* ============================================
   DESIGN SYSTEM — scoped to .mcf-template
   Nothing here touches Elementor pages.
   ============================================ */

:root {
  --mcf-green: #1C3D2F;
  --mcf-green-mid: #2B5E47;
  --mcf-green-bright: #3A7D5E;
  --mcf-cream: #F5F0E8;
  --mcf-cream-dark: #EAE3D6;
  --mcf-stone: #D4CCBD;
  --mcf-gold: #D4A843;
  --mcf-gold-light: #E2BE60;
  /* Darker gold for body text — meets WCAG AA 4.5:1 contrast on cream
     and white backgrounds. Use for eyebrow labels, small caps text,
     anywhere gold serves as TEXT colour (not button/badge backgrounds). */
  --mcf-gold-text: #8B6914;
  --mcf-charcoal: #2A2622;
  --mcf-warm-grey: #6B6358;
  --mcf-text: #3B3630;
  --mcf-white: #FDFCFA;
  --mcf-border: rgba(107,99,88,0.15);
  --mcf-serif: 'Playfair Display', Georgia, serif;
  --mcf-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mcf-pad: 5.5vw;
  --mcf-v-space: clamp(72px, 10vw, 120px);
}

/* ============================================
   RESET — scoped
   ============================================ */
.mcf-template *, .mcf-template *::before, .mcf-template *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.mcf-template {
  font-family: var(--mcf-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--mcf-text);
  -webkit-font-smoothing: antialiased;
  /* overflow-x intentionally NOT set here — any non-visible overflow
     on an ancestor breaks position: sticky on descendants (TOC sidebar
     on insight articles relies on this). If horizontal overflow ever
     becomes a problem, set overflow-x on the body element instead,
     which is the document scroll container and doesn't affect sticky. */
}
body {
  overflow-x: hidden;
}
.mcf-template img {
  max-width: 100%;
  height: auto;
  display: block;
}
.mcf-template a {
  color: var(--mcf-green);
  text-decoration: none;
}

/* ============================================
   HERO
   ============================================ */
.mcf-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.mcf-hero-bg {
  position: absolute;
  inset: 0;
}
.mcf-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.mcf-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Horizontal gradient keeps the left side (where headline and
     subtitle sit) reliably dark regardless of the underlying photo,
     while the right side stays lighter so the accreditation badge
     area still shows some of the project image behind. Layered with
     the original vertical gradient for bottom-weighted depth. */
  background:
    linear-gradient(
      to right,
      rgba(28,61,47,0.9) 0%,
      rgba(28,61,47,0.75) 45%,
      rgba(28,61,47,0.5) 75%,
      rgba(28,61,47,0.4) 100%
    ),
    linear-gradient(
      to top,
      rgba(28,61,47,0.6) 0%,
      rgba(28,61,47,0.3) 50%,
      rgba(28,61,47,0) 100%
    );
}
.mcf-hero-inner {
  position: relative;
  z-index: 1;
  /* The heroes are bottom-aligned boxes with only a MINIMUM height, so
     whenever the content stack renders taller than that minimum (long
     standfirst wrapping at laptop widths + a big clamped h1), the
     section grows to fit and the first line used to sit flush against
     whatever is above. The 56px top padding is invisible while content
     is shorter than the minimum (it falls inside the empty space above
     the bottom-aligned block) and becomes a guaranteed air gap in the
     overflow case. Matches the --pattern variant's existing 56px. */
  padding: 56px var(--mcf-pad) 64px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}
.mcf-hero h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.05;
  margin-bottom: 24px;
}
.mcf-hero h1 em {
  font-style: italic;
  color: var(--mcf-gold-light);
}
.mcf-hero-sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(253,252,250,0.92);
  line-height: 1.65;
  max-width: 600px;
  margin-bottom: 36px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* The homepage hero is the one hero with nothing above it in flow: it
   underlaps the fixed nav for the seamless full-bleed look, so its
   first 72px sit behind the bar. The generic 56px guard above is not
   enough there - when the content stack outgrows the min-height (tall
   laptop stacks), the badge slid underneath the nav. Guard = nav
   height + breathing room at each nav size; absorbed invisibly while
   content is shorter than the min-height, same as the base guard. */
body.home .mcf-hero-inner {
  padding-top: 128px; /* 72 nav + 56 gap */
}
@media (max-width: 1024px) {
  body.home .mcf-hero-inner { padding-top: 104px; } /* 64 nav + 40 gap */
}
@media (max-width: 640px) {
  body.home .mcf-hero-inner { padding-top: 96px; } /* 60 nav + 36 gap */
}
.mcf-hero-badge {
  display: inline-block;
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  background: var(--mcf-green);
  border: 1px solid rgba(212,168,67,0.4);
  border: 1px solid rgba(253,252,250,0.12);
  padding: 8px 20px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.mcf-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.mcf-hero-email {
  font-size: 14px;
  color: rgba(253,252,250,0.5);
  margin-top: 12px;
}
.mcf-hero-email strong {
  color: var(--mcf-white);
  font-weight: 600;
}

/* Hero accreditation card */
.mcf-hero-accred {
  background: rgba(253,252,250,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(253,252,250,0.12);
  border-radius: 8px;
  padding: 28px 32px;
  text-align: center;
  min-width: 180px;
  /* Force bottom-alignment even when parent grid uses align-items:
     center (e.g. .mcf-hero--pattern variant on industry pages without
     a hero image). Matches the service page's end-aligned position. */
  align-self: end;
}
.mcf-hero-accred-badge {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(253,252,250,0.4);
  margin-bottom: 8px;
}
.mcf-hero-accred-main {
  font-family: var(--mcf-serif);
  font-size: 32px;
  color: var(--mcf-white);
  line-height: 1;
  margin-bottom: 4px;
}
.mcf-hero-accred-sub {
  font-size: 13px;
  color: rgba(253,252,250,0.5);
}

/* ============================================
   BUTTONS
   ============================================ */
.mcf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 0.3px;
  text-decoration: none;
}
.mcf-template .mcf-btn-fill {
  background: var(--mcf-gold);
  color: var(--mcf-green);
}
.mcf-template .mcf-btn-fill:hover {
  background: var(--mcf-gold-light);
  color: var(--mcf-green);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(212,168,67,0.3);
}
.mcf-template .mcf-btn-outline {
  background: transparent;
  color: var(--mcf-white);
  border: 1.5px solid rgba(253,252,250,0.3);
}
.mcf-template .mcf-btn-outline:hover {
  border-color: rgba(253,252,250,0.6);
  background: rgba(253,252,250,0.05);
  color: var(--mcf-white);
}

/* ============================================
   STATS BAR
   ============================================ */
.mcf-stats-bar {
  background: var(--mcf-green);
  margin: 0 var(--mcf-pad);
  margin-top: -40px;
  position: relative;
  z-index: 2;
  border-radius: 8px;
  border-top: 2px solid var(--mcf-gold);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mcf-stat-item {
  padding: 32px 28px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.mcf-stat-item:last-child { border-right: none; }
.mcf-stat-number {
  font-family: var(--mcf-serif);
  font-size: 32px;
  color: var(--mcf-white);
  line-height: 1;
  margin-bottom: 6px;
}
.mcf-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.88); /* was 0.5 — too low contrast on dark green for WCAG AA */
  font-weight: 500;
}

/* ============================================
   SECTION LABEL — reusable
   ============================================ */
.mcf-label {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mcf-gold-text); /* darker gold — meets WCAG AA on cream/white */
  margin-bottom: 20px;
  display: block;
}

/* ============================================
   SERVICES GRID
   ============================================ */
.mcf-services {
  margin-top: -80px;
  padding: calc(var(--mcf-v-space) + 80px) var(--mcf-pad) var(--mcf-v-space);
  background: var(--mcf-cream);
  position: relative;
  z-index: 1;
}
.mcf-services-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
}
.mcf-services-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.12;
}
.mcf-services-top p {
  color: var(--mcf-warm-grey);
  font-size: 17px;
  max-width: 400px;
  text-align: right;
  line-height: 1.65;
}
.mcf-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mcf-service-card {
  display: block;
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-radius: 6px;
  padding: 28px 24px;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
.mcf-service-card:hover {
  border-color: var(--mcf-gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.mcf-service-card h3 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 8px 0;
}
.mcf-service-card p {
  font-size: 14px;
  color: var(--mcf-warm-grey);
  line-height: 1.6;
  margin: 0;
}
.mcf-service-card-arrow {
  position: absolute;
  top: 24px;
  right: 20px;
  color: var(--mcf-stone);
  font-size: 20px;
  transition: color 0.3s;
}
.mcf-service-card:hover .mcf-service-card-arrow {
  color: var(--mcf-gold);
}

/* ============================================
   OVERVIEW / ABOUT
   ============================================ */
.mcf-overview {
  padding: var(--mcf-v-space) var(--mcf-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.mcf-overview h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.12;
  margin-bottom: 32px;
}
.mcf-overview-text p {
  margin-bottom: 20px;
  line-height: 1.85;
  color: var(--mcf-text);
}
.mcf-overview-text strong {
  color: var(--mcf-charcoal);
  font-weight: 600;
}

/* Pull quote */
.mcf-pull-quote {
  border-left: 3px solid var(--mcf-gold);
  padding: 24px 0 24px 28px;
  margin: 36px 0;
}
.mcf-pull-quote p {
  font-family: var(--mcf-serif);
  font-size: 21px;
  font-style: italic;
  color: var(--mcf-charcoal);
  line-height: 1.5;
  margin-bottom: 0 !important;
}
.mcf-pull-quote cite {
  display: block;
  font-family: var(--mcf-sans);
  font-style: normal;
  font-size: 13px;
  color: var(--mcf-warm-grey);
  margin-top: 12px;
  font-weight: 600;
}

/* Checklist card */
.mcf-checklist-card {
  background: var(--mcf-cream);
  border-radius: 8px;
  padding: clamp(28px, 3vw, 44px);
  position: sticky;
  top: 100px;
}
.mcf-checklist-card h3 {
  font-family: var(--mcf-serif);
  font-size: 24px;
  color: var(--mcf-charcoal);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mcf-stone);
}
.mcf-checklist {
  list-style: none;
}
.mcf-checklist li {
  padding: 12px 0;
  border-bottom: 1px solid var(--mcf-border);
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.5;
  color: var(--mcf-text);
}
.mcf-checklist li:last-child { border-bottom: none; }
.mcf-check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: var(--mcf-green-bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mcf-check svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   PHOTO GRID
   ============================================ */
.mcf-photo-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4px;
  height: clamp(280px, 35vw, 440px);
}
.mcf-photo-grid-cell {
  overflow: hidden;
  position: relative;
}
.mcf-photo-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s;
}
.mcf-photo-grid-cell:hover img {
  transform: scale(1.03);
}

/* ============================================
   INDUSTRIES
   ============================================ */
.mcf-industries {
  background: var(--mcf-green);
  padding: var(--mcf-v-space) var(--mcf-pad);
  padding-bottom: calc(var(--mcf-v-space) + 20px);
}
.mcf-industries-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
}
.mcf-industries-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.12;
}
.mcf-industries-top p {
  color: rgba(253,252,250,0.6);
  font-size: 17px;
  max-width: 400px;
  text-align: right;
  line-height: 1.65;
}
.mcf-industries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.mcf-industry-card {
  display: block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 28px 24px;
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
}
.mcf-industry-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--mcf-gold);
}
.mcf-industry-card h3 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mcf-white);
  margin: 0 0 8px 0;
}
.mcf-industry-card p {
  font-size: 14px;
  color: rgba(253,252,250,0.55);
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   CLIENT LOGOS
   ============================================ */
.mcf-logos {
  padding: 52px var(--mcf-pad);
  border-top: 1px solid var(--mcf-border);
  border-bottom: 1px solid var(--mcf-border);
  display: flex;
  align-items: center;
  gap: 28px;
}
.mcf-logos-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.mcf-logos-track {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.mcf-logo-item {
  padding: 22px 10px;
  background: var(--mcf-cream);
  border-radius: 6px;
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--mcf-charcoal);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  min-width: 0;
  line-height: 1.25;
}
.mcf-logo-item img {
  height: 40px;
  width: auto;
  object-fit: contain;
  max-width: 100%;
}

/* ============================================
   PROJECTS
   ============================================ */
.mcf-projects {
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-projects-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.mcf-projects-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  color: var(--mcf-charcoal);
}
.mcf-projects-top p {
  color: var(--mcf-warm-grey);
  font-size: 17px;
  max-width: 400px;
  text-align: right;
  line-height: 1.65;
}
.mcf-projects-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 24px;
}
/* Adapt when fewer case studies are populated so cards don't stretch
   awkwardly into a 3-track grid. Homepage uses the same grid class
   (always 3 items) so only the archive/service variants with fewer
   items trigger these overrides via data-count. */
.mcf-projects-grid[data-count="1"] {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.mcf-projects-grid[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.mcf-proj-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  text-decoration: none;
  display: block;
}
.mcf-proj-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(42,38,34,0.1);
}
.mcf-proj-card-img {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.mcf-proj-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcf-proj-card {
  /* Flex column so the body fills remaining card height, letting the
     footer row (tag + View case study link) pin to the bottom. Keeps
     all three cards in a row visually consistent regardless of how
     long each description is. */
  display: flex;
  flex-direction: column;
}
.mcf-proj-card-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mcf-proj-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
}
.mcf-template .mcf-proj-card-footer .mcf-proj-link { margin-top: 0; }
.mcf-proj-card-client {
  font-size: 12px;
  font-weight: 600;
  color: var(--mcf-gold-text); /* darker gold — meets WCAG AA contrast */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.mcf-proj-card h3 {
  font-family: var(--mcf-serif);
  font-size: 21px;
  color: var(--mcf-charcoal);
  line-height: 1.3;
  margin-bottom: 10px;
  font-weight: 400;
}
.mcf-proj-card p {
  font-size: 15px;
  color: var(--mcf-warm-grey);
  line-height: 1.6;
  margin-bottom: 16px;
}
.mcf-proj-card-tag {
  display: inline-block;
  background: var(--mcf-cream);
  color: var(--mcf-green);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 100px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============================================
   AREAS
   ============================================ */
.mcf-areas {
  background: var(--mcf-cream);
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-areas-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.mcf-areas h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin-bottom: 20px;
}
.mcf-areas-content > p {
  color: var(--mcf-text);
  line-height: 1.8;
  margin-bottom: 28px;
}
.mcf-area-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.mcf-template .mcf-area-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mcf-charcoal);
  text-decoration: none;
  transition: all 0.2s;
}
.mcf-template .mcf-area-pill:hover {
  background: var(--mcf-green);
  color: var(--mcf-white);
  border-color: var(--mcf-green);
}

/* ============================================
   FAQ
   ============================================ */
.mcf-faq {
  background: var(--mcf-cream);
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-faq-top {
  text-align: center;
  margin-bottom: 48px;
}
.mcf-faq-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin-bottom: 12px;
}
.mcf-faq-top p {
  color: var(--mcf-warm-grey);
  font-size: 17px;
}
.mcf-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mcf-faq-item {
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.mcf-faq-item:hover {
  border-color: var(--mcf-stone);
}
.mcf-template .mcf-faq-q {
  padding: 22px 28px;
  font-family: var(--mcf-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mcf-charcoal);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
  transition: color 0.2s;
}
.mcf-template .mcf-faq-q:hover,
.mcf-template .mcf-faq-q:focus {
  color: var(--mcf-green);
  background: transparent;
  box-shadow: none;
  outline: none;
}
.mcf-faq-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--mcf-warm-grey);
  transition: transform 0.3s;
}
.mcf-faq-item.open .mcf-faq-icon {
  transform: rotate(45deg);
}
.mcf-faq-a {
  display: none;
  padding: 0 28px 24px;
  font-size: 16px;
  color: var(--mcf-text);
  line-height: 1.8;
}
.mcf-faq-item.open .mcf-faq-a {
  display: block;
}
/* Inline links in FAQ answers — Elementor's Theme Style paints all
   anchors white by default, which makes them invisible on the white
   FAQ background. Force the green + underline we use elsewhere. */
.mcf-template .mcf-faq-a a {
  color: var(--mcf-green) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.mcf-template .mcf-faq-a a:hover,
.mcf-template .mcf-faq-a a:focus-visible {
  color: var(--mcf-gold) !important;
}

/* ============================================
   CTA
   ============================================ */
.mcf-cta {
  background: var(--mcf-green);
  padding: var(--mcf-v-space) var(--mcf-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.mcf-cta::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212,168,67,0.08), transparent 60%);
  pointer-events: none;
}
.mcf-cta-left {
  position: relative;
  z-index: 1;
}
.mcf-cta-left h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.1;
  margin-bottom: 20px;
}
.mcf-cta-left h2 em {
  font-style: italic;
  color: var(--mcf-gold);
}
.mcf-cta-left p {
  font-size: 18px;
  color: rgba(253,252,250,0.6);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
}
.mcf-cta-contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mcf-cta-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.mcf-cta-contact-row span {
  color: rgba(253,252,250,0.4);
}
.mcf-cta-contact-row a {
  color: var(--mcf-white);
  font-weight: 600;
  font-size: 18px;
}

/* Shared CTA contact links used on the About page + 15 other templates
   (service, industry, hubs, archives, single-insight/project, etc).
   Markup: "Phone: <strong><a>01707…</a></strong>". These never had an
   explicit link colour, so they relied on the default <a> colour. A
   plugin/WP-core update changed that default to a dark value, rendering
   the links invisible on the dark-green CTA. Set an explicit colour, the
   same way .mcf-cta-contact-row a (homepage CTA) does — that one was
   never affected precisely because its colour was explicit. */
.mcf-cta-phone a,
.mcf-cta-email a {
  color: var(--mcf-white);
}
.mcf-cta-phone a:hover,
.mcf-cta-email a:hover {
  color: var(--mcf-gold-light);
}

/* CTA Form */
.mcf-cta-form {
  background: rgba(253,252,250,0.06);
  border: 1px solid rgba(253,252,250,0.1);
  border-radius: 10px;
  padding: clamp(28px, 3vw, 44px);
  position: relative;
  z-index: 1;
}
.mcf-cta-form h3 {
  font-family: var(--mcf-serif);
  font-size: 26px;
  color: var(--mcf-white);
  margin-bottom: 28px;
}
.mcf-field {
  margin-bottom: 18px;
}
.mcf-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(253,252,250,0.5);
  margin-bottom: 7px;
  letter-spacing: 0.5px;
}
.mcf-field input,
.mcf-field textarea,
.mcf-field select {
  width: 100%;
  padding: 14px 18px;
  background: rgba(253,252,250,0.05);
  border: 1px solid rgba(253,252,250,0.14);
  border-radius: 6px;
  color: var(--mcf-white);
  font-family: var(--mcf-sans);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.mcf-field input::placeholder,
.mcf-field textarea::placeholder {
  color: rgba(253,252,250,0.25);
}
.mcf-field input:focus,
.mcf-field textarea:focus {
  border-color: var(--mcf-gold-light);
}
.mcf-field select option {
  background: var(--mcf-green);
}
.mcf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mcf-btn-submit {
  width: 100%;
  margin-top: 8px;
  background: var(--mcf-gold);
  color: var(--mcf-green);
  font-family: var(--mcf-sans);
  font-size: 16px;
  font-weight: 600;
  padding: 17px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.mcf-btn-submit:hover {
  background: var(--mcf-gold-light);
  color: var(--mcf-green);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .mcf-template { --mcf-pad: 32px; }
  .mcf-hero-inner { grid-template-columns: 1fr; }
  .mcf-hero-accred { display: none; }
  .mcf-overview { grid-template-columns: 1fr; }
  .mcf-checklist-card { position: static; }
  .mcf-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .mcf-services-top,
  .mcf-industries-top,
  .mcf-projects-top { flex-direction: column; gap: 16px; align-items: flex-start; }
  .mcf-services-top p,
  .mcf-industries-top p,
  .mcf-projects-top p { text-align: left; max-width: 100%; }
  .mcf-services-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-industries-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-projects-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-cta { grid-template-columns: 1fr; }
  .mcf-areas-content { max-width: none; }
  .mcf-photo-grid { grid-template-columns: 1fr; height: auto; }
  .mcf-photo-grid-cell { aspect-ratio: 21/9; }
  .mcf-photo-grid-cell:nth-child(2),
  .mcf-photo-grid-cell:nth-child(3) { display: none; }
  .mcf-logos {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 44px var(--mcf-pad);
  }
  .mcf-logos-label {
    text-align: center;
    width: 100%;
  }
  .mcf-logos-track {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }
}

@media (max-width: 640px) {
  .mcf-template { --mcf-pad: 20px; --mcf-v-space: 56px; }

  .mcf-hero { min-height: 85vh; }
  .mcf-hero h1 { font-size: 30px; line-height: 1.12; margin-bottom: 16px; }
  .mcf-hero h1 br { display: none; }
  .mcf-hero-sub { font-size: 15px; margin-bottom: 28px; }
  .mcf-hero-badge { font-size: 11px; padding: 5px 14px; margin-bottom: 20px; }
  .mcf-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .mcf-btn { text-align: center; justify-content: center; padding: 16px 24px; font-size: 15px; }

  .mcf-stats-bar { grid-template-columns: 1fr 1fr; margin: 0; border-radius: 0; }
  .mcf-stat-item { padding: 24px 16px; }
  .mcf-stat-item:nth-child(3),
  .mcf-stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.08); }
  .mcf-stat-number { font-size: 24px; }
  .mcf-stat-label { font-size: 11px; }

  .mcf-services-grid { grid-template-columns: 1fr; gap: 14px; }
  .mcf-industries-grid { grid-template-columns: 1fr; gap: 14px; }
  .mcf-projects-grid { grid-template-columns: 1fr; gap: 20px; }

  .mcf-overview h2 { font-size: 24px; }
  .mcf-pull-quote { padding: 16px 0 16px 20px; margin: 24px 0; }
  .mcf-pull-quote p { font-size: 17px; }

  .mcf-photo-grid-cell { aspect-ratio: 16/9; }

  .mcf-areas h2 { font-size: 24px; }
  .mcf-area-pills { gap: 8px; }
  .mcf-area-pill { padding: 10px 16px; font-size: 14px; }

  .mcf-faq-top h2 { font-size: 24px; }
  .mcf-faq-q { padding: 18px 20px; font-size: 15px; }
  .mcf-faq-a { padding: 0 20px 18px; font-size: 14px; }

  .mcf-cta-left h2 { font-size: 26px; }
  .mcf-cta-left p { font-size: 15px; }
  .mcf-cta-form { padding: 24px; }
  .mcf-cta-form h3 { font-size: 20px; margin-bottom: 20px; }
  .mcf-field-row { grid-template-columns: 1fr; }

  .mcf-logos { padding: 36px 20px; gap: 16px; }
  .mcf-logos-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .mcf-logo-item {
    padding: 16px 8px;
    font-size: 13px;
    min-height: 56px;
  }

  .mcf-proj-card-body { padding: 20px; }
  .mcf-proj-card h3 { font-size: 18px; }
}

/* ============================================
   MCFADDEN NAVBAR (loaded via header.php)
   Scoped to .mcf-nav-* classes so it only
   affects pages using the custom header.
   Relies on Elementor Theme Style being
   configured to match our design system.
   ============================================ */
.mcf-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--mcf-pad);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--mcf-green);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: var(--mcf-sans);
}
/* When the WordPress admin toolbar is visible (logged-in users),
   push the fixed nav down so it doesn't sit behind the toolbar and
   leave a gap above the first section of the page. */
.admin-bar .mcf-nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .mcf-nav {
    top: 46px;
  }
}

.mcf-nav *,
.mcf-nav *::before,
.mcf-nav *::after {
  box-sizing: border-box;
}

.mcf-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.mcf-nav-logo-img {
  display: block;
  height: 56px;
  width: auto;
}

/* Absolutely centered on the viewport so the logo and right-hand
   cluster (which are different widths) don't pull the nav items
   off-centre. Using full-inset + flex center (NOT transform) so that
   descendants with position: fixed (like the mega menu panel) are
   positioned relative to the viewport, not this container. */
.mcf-nav-primary {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mcf-nav-primary > * { pointer-events: auto; }
.mcf-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcf-nav-links li {
  margin: 0;
}
.mcf-nav .mcf-nav-links a {
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 500;
  color: rgba(253, 252, 250, 0.75);
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.mcf-nav .mcf-nav-links a:hover,
.mcf-nav .mcf-nav-links a:focus-visible {
  color: var(--mcf-white);
  background: rgba(253, 252, 250, 0.08);
  outline: none;
}
.mcf-nav .mcf-nav-links .current-menu-item a,
.mcf-nav .mcf-nav-links .mcf-nav-active a {
  color: var(--mcf-white);
  background: rgba(253, 252, 250, 0.10);
}

/* Plant Hire standalone CTA — visually distinct from nav items,
   sits in the right section before the phone number. Gold pill
   with a small truck icon. Hidden below 1024px (no room). */
.mcf-nav .mcf-nav-plant-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--mcf-green);
  background: var(--mcf-gold);
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.mcf-nav .mcf-nav-plant-btn:hover,
.mcf-nav .mcf-nav-plant-btn:focus-visible {
  background: var(--mcf-gold-light);
  color: var(--mcf-green);
  transform: translateY(-1px);
  outline: none;
}
/* Keep the truck icon green on hover too (Elementor can otherwise
   flip SVG currentColor paths to its hover colour). */
.mcf-nav .mcf-nav-plant-btn:hover .mcf-nav-plant-icon,
.mcf-nav .mcf-nav-plant-btn:focus-visible .mcf-nav-plant-icon {
  color: var(--mcf-green);
}
.mcf-nav .mcf-nav-plant-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--mcf-green);
}

.mcf-nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.mcf-nav .mcf-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 600;
  color: rgba(253, 252, 250, 0.75);
  text-decoration: none;
  transition: color 0.2s;
}
.mcf-nav .mcf-nav-phone:hover,
.mcf-nav .mcf-nav-phone:focus-visible {
  color: var(--mcf-white);
  outline: none;
}
.mcf-nav .mcf-nav-phone-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--mcf-gold);
  transition: color 0.2s;
}
.mcf-nav .mcf-nav-phone:hover .mcf-nav-phone-icon,
.mcf-nav .mcf-nav-phone:focus-visible .mcf-nav-phone-icon {
  color: var(--mcf-gold-light);
}
.mcf-nav .mcf-nav-cta {
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--mcf-green);
  background: var(--mcf-gold);
  padding: 13px 26px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.mcf-nav .mcf-nav-cta:hover,
.mcf-nav .mcf-nav-cta:focus-visible {
  background: var(--mcf-gold-light);
  color: var(--mcf-green);
  outline: none;
}

.mcf-nav .mcf-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  padding: 10px;
  margin-left: 8px;
  color: inherit;
}
.mcf-nav .mcf-nav-toggle:hover,
.mcf-nav .mcf-nav-toggle:focus,
.mcf-nav .mcf-nav-toggle:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}
.mcf-nav .mcf-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mcf-white);
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .mcf-nav {
    height: 64px;
    padding: 0 20px;
  }
  .mcf-nav-logo-img {
    height: 48px;
  }
  .mcf-nav .mcf-nav-links,
  .mcf-nav .mcf-nav-phone,
  .mcf-nav .mcf-nav-plant-btn {
    display: none;
  }
  .mcf-nav .mcf-nav-cta {
    padding: 10px 20px;
    font-size: 14px;
  }
  .mcf-nav .mcf-nav-toggle {
    display: flex;
  }
}

@media (max-width: 640px) {
  .mcf-nav {
    height: 60px;
    padding: 0 16px;
  }
  .mcf-nav-logo-img {
    height: 40px;
  }
  .mcf-nav .mcf-nav-cta {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* Laptop band (1025px to 1919px): the viewport-centred menu above needs
   roughly 1920px before it clears the right-hand cluster, so on anything
   narrower — every laptop, and any desktop with Windows display scaling —
   the links physically overlap the Plant Hire / phone / quote buttons.
   Inside this band the menu goes back into the flex flow (overlap becomes
   impossible: the three clusters share the row and the menu centres in the
   space that is actually free), with progressive trims as the row narrows.
   The mega menu panel is position: fixed to the viewport, so it is
   unaffected by the container switching to static. */
@media (min-width: 1025px) and (max-width: 1919px) {
  .mcf-nav-primary {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
  }
  .mcf-nav-links {
    gap: 4px;
  }
  /* Top-level bar links only (direct children): the mega menu panels
     live inside .mcf-nav-links too, and their links must stay free to
     wrap — a blanket nowrap here sent "Independent Connection Provider"
     overflowing into the Plant Hire promo card. */
  .mcf-nav .mcf-nav-links > li > a {
    padding: 10px 12px;
    white-space: nowrap;
  }
  .mcf-nav-right {
    gap: 16px;
  }
}

/* Narrower laptops: the phone drops to icon-only (the aria-label and the
   tel: link keep it usable and keep GA4 phone_click tracking intact). */
@media (min-width: 1025px) and (max-width: 1480px) {
  .mcf-nav .mcf-nav-links > li > a {
    font-size: 14px;
    padding: 10px 10px;
  }
  .mcf-nav-right {
    gap: 14px;
  }
  .mcf-nav .mcf-nav-phone span {
    display: none;
  }
  .mcf-nav .mcf-nav-phone-icon {
    width: 20px;
    height: 20px;
  }
  .mcf-nav .mcf-nav-cta {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* Smallest desktop band before the hamburger takes over at 1024px: the
   Plant Hire pill bows out (it stays reachable via the Services mega menu
   promo card and the footer). */
@media (min-width: 1025px) and (max-width: 1220px) {
  .mcf-nav .mcf-nav-plant-btn {
    display: none;
  }
}

/* ============================================
   SERVICES MEGA MENU
   Desktop: hover/focus reveals a full-width panel below the nav.
   Mobile: renders as an accordion inside the mobile drawer.
   ============================================ */
.mcf-nav-has-dropdown { position: relative; }

/* Invisible hover bridge below the nav item that extends down to the
   top of the mega menu panel. Keeps :hover active on the <li> as the
   cursor moves between the trigger text and the panel, so the panel
   doesn't flicker closed in the gap between them. */
.mcf-nav-has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 32px;
  pointer-events: auto;
}
/* Bridge only needed when the panel is visible (and reachable via
   :hover), so neutralise on mobile drawer layout. */
@media (max-width: 1024px) {
  .mcf-nav-has-dropdown::after { display: none; }
}

/* Chevron indicator next to "Services" label */
.mcf-nav-chev {
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-left: 6px;
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.2s;
  vertical-align: middle;
}
.mcf-nav-has-dropdown:hover .mcf-nav-chev,
.mcf-nav-has-dropdown:focus-within .mcf-nav-chev {
  transform: rotate(-180deg);
  opacity: 1;
}

/* The panel itself — positioned fixed below the nav, spans viewport.
   Hidden by default, shown on :hover / :focus-within of the parent
   (pure CSS interaction, no JS required on desktop). */
.mcf-megamenu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--mcf-green);
  border-top: 1px solid rgba(212, 168, 67, 0.25);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 999;
  pointer-events: none;
}
.admin-bar .mcf-megamenu { top: 104px; }
.mcf-nav-has-dropdown:hover .mcf-megamenu,
.mcf-nav-has-dropdown:focus-within .mcf-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.mcf-megamenu-inner {
  /* Full-width minus the site's horizontal pad — matches other
     section widths on the page. Top padding kept tight so the panel
     content sits directly under the nav bar. */
  margin: 0;
  padding: 18px var(--mcf-pad) clamp(32px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.1fr;
  gap: clamp(28px, 3vw, 48px);
}
/* Industries dropdown desktop only: 3 columns horizontal like
   Services (2 industry groups + Capabilities promo). Tighter
   max-width + constrained column widths so it doesn't spread
   thin across the full viewport. Wrapped in min-width: 1025px
   so it doesn't override the mobile single-column rule (which
   uses lower specificity and would otherwise lose the cascade
   battle to .mcf-megamenu--industries .mcf-megamenu-inner). */
@media (min-width: 1025px) {
  /* Match services' fr-based grid so the 3 industry slots
     (Utility group / Dev group / Capabilities promo) spread
     evenly across the full viewport width — no max-width, no
     justify-content: start. Promo column slightly wider so it
     reads like a card, not just another link list. */
  .mcf-megamenu--industries .mcf-megamenu-inner {
    grid-template-columns: 1fr 1fr 1.4fr;
  }
}

/* Column of service links */
.mcf-megamenu-col { min-width: 0; }
.mcf-megamenu-col-title {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 168, 67, 0.25);
}
.mcf-megamenu-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcf-megamenu-col li { margin: 0; }
.mcf-nav .mcf-megamenu-col a {
  display: block;
  padding: 9px 0;
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 500;
  color: rgba(253, 252, 250, 0.8);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -10px;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
  background: none;
  border-radius: 0;
}
.mcf-nav .mcf-megamenu-col a:hover,
.mcf-nav .mcf-megamenu-col a:focus-visible {
  color: var(--mcf-white);
  border-left-color: var(--mcf-gold);
  transform: translateX(2px);
  outline: none;
}

/* Promo card on the right side of the mega menu */
.mcf-nav .mcf-megamenu-promo {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  background: linear-gradient(140deg, rgba(212, 168, 67, 0.12), rgba(212, 168, 67, 0.02));
  border: 1px solid rgba(212, 168, 67, 0.25);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
  color: var(--mcf-white);
}
.mcf-nav .mcf-megamenu-promo:hover,
.mcf-nav .mcf-megamenu-promo:focus-visible {
  background: linear-gradient(140deg, rgba(212, 168, 67, 0.2), rgba(212, 168, 67, 0.06));
  border-color: var(--mcf-gold);
  transform: translateY(-2px);
  outline: none;
}
.mcf-megamenu-promo-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 12px;
}
.mcf-megamenu-promo-title {
  font-family: var(--mcf-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--mcf-white);
  margin: 0 0 10px;
  line-height: 1.1;
}
.mcf-megamenu-promo-body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(253, 252, 250, 0.7);
  margin: 0 0 18px;
  flex: 1;
}
.mcf-megamenu-promo-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--mcf-gold);
  transition: color 0.2s;
}
.mcf-nav .mcf-megamenu-promo:hover .mcf-megamenu-promo-link {
  color: var(--mcf-gold-light);
}

/* ============================================
   MOBILE NAV DRAWER — triggered by hamburger
   Same markup (.mcf-nav-primary), CSS transforms it into a slide-in
   drawer at ≤1024px. Mega menu Services item becomes an inline
   accordion toggled by JS inside the drawer.
   ============================================ */
@media (max-width: 1024px) {
  body.mcf-nav-open { overflow: hidden; }
  .mcf-nav.mcf-nav-open .mcf-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mcf-nav.mcf-nav-open .mcf-nav-toggle span:nth-child(2) { opacity: 0; }
  .mcf-nav.mcf-nav-open .mcf-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mcf-nav-toggle span { transition: transform 0.25s, opacity 0.2s; transform-origin: center; }

  /* Primary nav becomes a fixed full-height drawer that slides in
     from the right. Hidden by default; .mcf-nav-open on the parent
     header reveals it. */
  .mcf-nav-primary {
    position: fixed;
    top: 64px; /* matches tablet nav height */
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    display: block;
    justify-content: initial;
    pointer-events: auto;
    background: var(--mcf-green);
    padding: 24px 20px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.3s ease;
    z-index: 998;
  }
  .mcf-nav.mcf-nav-open .mcf-nav-primary { transform: translateX(0); }
  /* Logged-in editors only: the WP admin toolbar pushes the nav bar
     down (32px, or 46px at <=782px), so the drawer must start below
     toolbar + nav or it covers the bar and its close button. The old
     value here was 64px - identical to the default, a no-op - which
     is why the drawer overlapped the header whenever the toolbar was
     visible. Public visitors never have body.admin-bar. */
  .admin-bar .mcf-nav-primary { top: 96px; } /* 32 toolbar + 64 nav */

  .mcf-nav .mcf-nav-links,
  .mcf-nav.mcf-nav-open .mcf-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .mcf-nav .mcf-nav-links > li {
    border-bottom: 1px solid rgba(253, 252, 250, 0.08);
  }
  .mcf-nav .mcf-nav-links > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--mcf-white);
    background: none;
    border-radius: 0;
  }

  /* Mobile mega menu: rendered inline inside the drawer, hidden until
     the Services item is tapped (toggled by .is-open class via JS). */
  .mcf-megamenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(0, 0, 0, 0.18);
    border-top: none;
    box-shadow: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    z-index: auto;
  }
  .mcf-nav-has-dropdown.is-open .mcf-megamenu { max-height: 1600px; }
  .mcf-megamenu-inner {
    padding: 8px 4px 16px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mcf-megamenu-col-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .mcf-nav .mcf-megamenu-col a {
    font-size: 15px;
    padding: 10px 0 10px 10px;
  }
  .mcf-nav .mcf-megamenu-promo {
    padding: 20px 22px;
  }
  /* Services chevron rotates on open — visual signal for accordion */
  .mcf-nav-has-dropdown.is-open .mcf-nav-chev {
    transform: rotate(-180deg);
    opacity: 1;
  }
  /* On mobile, hover doesn't apply — clear desktop hover rules */
  .mcf-nav-has-dropdown:hover .mcf-megamenu,
  .mcf-nav-has-dropdown:focus-within .mcf-megamenu {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 782px) {
  .admin-bar .mcf-nav-primary { top: 110px; } /* 46 toolbar + 64 nav */
}

@media (max-width: 640px) {
  .mcf-nav-primary { top: 60px; }
  .admin-bar .mcf-nav-primary { top: 106px; } /* 46 toolbar + 60 nav */
}

/* ============================================
   MCFADDEN FOOTER (loaded via footer.php)
   Scoped to .mcf-footer-* classes so nothing
   leaks into pages using the parent footer.
   ============================================ */
.mcf-footer {
  background: var(--mcf-green);
  color: rgba(253, 252, 250, 0.75);
  font-family: var(--mcf-sans);
  font-size: 14px;
  line-height: 1.7;
  padding: 88px var(--mcf-pad) 0;
}

.mcf-footer *,
.mcf-footer *::before,
.mcf-footer *::after {
  box-sizing: border-box;
}

.mcf-footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 56px 48px;
  padding-bottom: 72px;
}

.mcf-footer-col {
  min-width: 0;
}

/* Brand column */
.mcf-footer-brand {
  max-width: 340px;
}
.mcf-footer-logo-link {
  display: inline-block;
  margin-bottom: 24px;
  text-decoration: none;
}
.mcf-footer-logo-img {
  display: block;
  height: 44px;
  width: auto;
}
.mcf-footer-tagline {
  color: rgba(253, 252, 250, 0.72);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 20px;
}
.mcf-footer-accred {
  color: var(--mcf-gold);
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0;
}

/* Column headings */
.mcf-footer-heading {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--mcf-white);
  margin: 0 0 22px;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.mcf-footer-heading--sub {
  font-size: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(253, 252, 250, 0.08);
}

/* Link lists */
.mcf-footer-links,
.mcf-footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcf-footer-links li,
.mcf-footer-contact-list li {
  margin-bottom: 10px;
}
.mcf-footer .mcf-footer-links a,
.mcf-footer .mcf-footer-contact-list a {
  color: rgba(253, 252, 250, 0.75);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 14px;
}
.mcf-footer .mcf-footer-links a:hover,
.mcf-footer .mcf-footer-links a:focus-visible,
.mcf-footer .mcf-footer-contact-list a:hover,
.mcf-footer .mcf-footer-contact-list a:focus-visible {
  color: var(--mcf-gold);
  outline: none;
}
.mcf-footer .mcf-footer-link-all {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(253, 252, 250, 0.1);
}
.mcf-footer .mcf-footer-link-all a {
  color: var(--mcf-gold);
  font-weight: 600;
}
.mcf-footer .mcf-footer-logo-link {
  text-decoration: none;
}

/* Contact column */
.mcf-footer-address {
  font-style: normal;
  color: rgba(253, 252, 250, 0.72);
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 22px;
}

/* Bottom bar */
.mcf-footer-bar {
  border-top: 1px solid rgba(253, 252, 250, 0.1);
  padding: 26px 0;
}
.mcf-footer-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.mcf-footer-copy,
.mcf-footer-legal {
  color: rgba(253, 252, 250, 0.55);
  font-size: 13px;
  margin: 0;
}
/* Small "Website by OmniFound" credit on its own line at the bottom
   of the footer bar — deliberately subtle, right-aligned at desktop,
   centered on small viewports. */
.mcf-footer-credit {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(253, 252, 250, 0.08);
  text-align: right;
  font-size: 12px;
  color: rgba(253, 252, 250, 0.7); /* was 0.4 — too low for WCAG AA on dark green */
  letter-spacing: 0.3px;
}
.mcf-footer .mcf-footer-credit a {
  color: rgba(253, 252, 250, 0.7);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.mcf-footer .mcf-footer-credit a:hover,
.mcf-footer .mcf-footer-credit a:focus-visible {
  color: var(--mcf-gold);
}
@media (max-width: 640px) {
  .mcf-footer-credit { text-align: center; }
}
.mcf-footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
}
.mcf-footer .mcf-footer-legal-links a {
  color: rgba(253, 252, 250, 0.55);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.mcf-footer .mcf-footer-legal-links a:hover,
.mcf-footer .mcf-footer-legal-links a:focus-visible {
  color: var(--mcf-gold);
  outline: none;
}

/* Tablet */
@media (max-width: 1024px) {
  .mcf-footer {
    padding: 72px 32px 0;
  }
  .mcf-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
    padding-bottom: 56px;
  }
  .mcf-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .mcf-footer-bar-inner {
    justify-content: flex-start;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .mcf-footer {
    padding: 56px 20px 0;
  }
  .mcf-footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 48px;
  }
  .mcf-footer-brand {
    max-width: none;
  }
  .mcf-footer-heading {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .mcf-footer-bar {
    padding: 20px 0 24px;
  }
  .mcf-footer-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .mcf-footer-legal-links {
    gap: 16px;
    flex-wrap: wrap;
  }
}


/* ============================================
   SERVICE PAGE — breadcrumb, overview, process,
   related services, service areas variant.
   Sections that reuse homepage classes (hero,
   stats, photo-grid, logos, projects, faq, cta)
   don't need additional CSS.
   ============================================ */

/* Breadcrumb */
.mcf-crumbs {
  background: var(--mcf-green);
  padding: 12px var(--mcf-pad);
  font-family: var(--mcf-sans);
  font-size: 13px;
  color: rgba(253, 252, 250, 0.5);
  margin-top: 72px; /* offset for fixed nav */
}
.mcf-crumbs a {
  color: rgba(253, 252, 250, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.mcf-crumbs a:hover {
  color: var(--mcf-white);
}
.mcf-crumbs-sep {
  margin: 0 8px;
  opacity: 0.4;
}
.mcf-crumbs span[aria-current] {
  color: rgba(253, 252, 250, 0.8);
}

/* Service hero variant — hero follows breadcrumb so no extra margin */
.mcf-hero--service {
  margin-top: 0;
  /* Shorter than the homepage 85vh because the breadcrumb sits above
     this hero and was making the total vertical footprint feel huge. */
  min-height: clamp(460px, 62vh, 640px);
}
/* Gradient/overlay inherited from the base .mcf-hero so it matches
   the homepage hero exactly — no service-specific override. */

/* Pattern-fallback hero variant — used when no hero image is uploaded.
   Shows an SVG "infrastructure blueprint" background on dark green:
   engineering dot grid + sweeping pipe curves + junction nodes + a
   warm gold glow over the headline area. Softer overlay than the
   photo variant because there's no busy photo to darken. Shorter and
   centre-aligned (vs bottom-aligned 85vh) because there's no
   immersive photo to fill that vertical space. */
.mcf-hero--pattern {
  min-height: clamp(440px, 62vh, 620px);
  align-items: center;
}
.mcf-hero--pattern .mcf-hero-inner {
  align-items: center;
  padding: 56px var(--mcf-pad);
}
.mcf-hero--pattern .mcf-hero-bg {
  background-color: var(--mcf-green);
  background-image: url('assets/hero-pattern.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mcf-hero--pattern .mcf-hero-bg::after {
  /* much lighter overlay — the SVG itself already provides depth and
     directional light via its glow gradient, so this only needs to
     ensure text-area contrast */
  background: linear-gradient(
    to right,
    rgba(28, 61, 47, 0.35) 0%,
    rgba(28, 61, 47, 0.15) 55%,
    rgba(28, 61, 47, 0) 100%
  );
}

/* Overview: editorial 2-column with sticky sidebar checklist */
.mcf-svc-overview {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-svc-overview-text h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin-bottom: 32px;
}
.mcf-svc-body p {
  margin-bottom: 20px;
  line-height: 1.85;
  color: var(--mcf-text);
  font-size: 16px;
}
.mcf-svc-body strong {
  color: var(--mcf-charcoal);
  font-weight: 600;
}

/* Pull quote */
.mcf-pull-quote {
  border-left: 3px solid var(--mcf-gold);
  padding: 20px 0 20px 28px;
  margin: 36px 0;
}
.mcf-pull-quote p {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--mcf-charcoal);
  line-height: 1.5;
  margin-bottom: 8px;
}
.mcf-pull-quote cite {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-style: normal;
  color: var(--mcf-warm-grey);
  letter-spacing: 0.5px;
}

/* Sidebar wrapper — sticky positioning is applied here (not on the
   card) so it has room to slide within the tall grid row. The card
   itself would collapse its parent's height to its own and prevent
   sticky from working. align-self: start keeps the sidebar hugging
   the top of the grid cell so sticky can then take over on scroll. */
.mcf-svc-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
}
/* Sidebar checklist card */
.mcf-checklist-card {
  background: var(--mcf-cream);
  border-radius: 8px;
  padding: clamp(28px, 3vw, 44px);
}
.mcf-checklist-card h3 {
  font-family: var(--mcf-serif);
  font-size: 24px;
  color: var(--mcf-charcoal);
  margin-bottom: 28px;
  font-weight: 400;
  line-height: 1.2;
}
.mcf-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcf-checklist li {
  padding: 13px 0;
  border-bottom: 1px solid var(--mcf-border);
  font-size: 15px;
  color: var(--mcf-text);
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}
.mcf-checklist li:last-child {
  border-bottom: none;
}
.mcf-checklist li::before {
  content: '\2713';
  color: var(--mcf-green-bright);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

/* Photo grid label overlay */
.mcf-photo-grid-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--mcf-white);
  background: rgba(28, 61, 47, 0.75);
  padding: 6px 14px;
  border-radius: 4px;
}
.mcf-photo-grid-cell {
  position: relative;
}

/* Process timeline — dark green section, gold accents, light text */
.mcf-process {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-green);
}
.mcf-process-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
}
.mcf-process-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.12;
}
.mcf-process-top > p {
  color: rgba(253, 252, 250, 0.7);
  font-size: 16px;
  max-width: 380px;
  text-align: right;
  line-height: 1.65;
}
.mcf-process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
/* Connector line through the step dots — subtle gold on green */
.mcf-process-track::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: rgba(212, 168, 67, 0.25);
  z-index: 0;
}
.mcf-process-step {
  position: relative;
  text-align: center;
  padding: 0 clamp(12px, 2vw, 32px);
}
.mcf-step-dot {
  width: 48px;
  height: 48px;
  background: var(--mcf-green);
  border: 2px solid var(--mcf-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
}
.mcf-step-dot span {
  font-family: var(--mcf-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--mcf-gold);
}
.mcf-process-step h3 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  color: var(--mcf-white);
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 1.25;
}
.mcf-process-step p {
  font-size: 15px;
  color: rgba(253, 252, 250, 0.7);
  line-height: 1.65;
}

/* Related services grid */
.mcf-related {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-related-top {
  text-align: center;
  margin-bottom: 48px;
}
.mcf-related-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
}
.mcf-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mcf-template .mcf-related-card {
  background: var(--mcf-white, #fff);
  border: 1px solid var(--mcf-border);
  border-radius: 8px;
  padding: 32px 28px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mcf-template .mcf-related-card:hover {
  border-color: var(--mcf-gold);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}
.mcf-related-card h3 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin-bottom: 12px;
  line-height: 1.25;
}
.mcf-related-card p {
  font-size: 15px;
  color: var(--mcf-warm-grey);
  line-height: 1.65;
  flex: 1;
}
.mcf-related-arrow {
  display: inline-block;
  margin-top: 20px;
  font-size: 18px;
  color: var(--mcf-gold);
  transition: transform 0.2s;
}
.mcf-related-card:hover .mcf-related-arrow {
  transform: translateX(4px);
}

/* Service areas — single column, centre aligned, white bg.
   Matches the homepage Areas We Cover pattern. Optional image is
   hidden by default since we're going full-width centred; bring it
   back with display: block if we ever want the 2-col variant. */
.mcf-svc-areas {
  background: var(--mcf-white, #fff);
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-svc-areas-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.mcf-svc-areas h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin-bottom: 20px;
}
.mcf-svc-areas-image {
  display: none;
}

/* Projects section — service page variant: cream bg,
   top-right block with description + View all link,
   clickable cards with arrow animation on hover. */
.mcf-projects--service {
  background: var(--mcf-cream);
}
.mcf-projects--service .mcf-projects-top {
  align-items: flex-end;
}
.mcf-projects--service .mcf-projects-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 12px;
  max-width: 420px;
}
.mcf-projects--service .mcf-projects-top-right p {
  color: var(--mcf-warm-grey);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

/* Projects "View all" link — scoped under .mcf-template so we beat
   Elementor's .elementor-kit-N a rule, which was painting it white. */
.mcf-template .mcf-projects-all {
  font-family: var(--mcf-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mcf-gold);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.mcf-template .mcf-projects-all:hover,
.mcf-template .mcf-projects-all:focus-visible {
  color: var(--mcf-gold-light);
}

/* Project card "View case study" link text (inside the clickable card) */
.mcf-template .mcf-proj-link {
  font-family: var(--mcf-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mcf-gold);
  text-decoration: none;
  margin-top: 16px;
  display: inline-block;
  transition: color 0.2s, transform 0.2s;
}
.mcf-template .mcf-proj-card:hover .mcf-proj-link {
  color: var(--mcf-gold-light);
  transform: translateX(3px);
}

/* On the service variant, cards sit on cream, so give them a
   white fill with gold border tint on hover for contrast */
.mcf-projects--service .mcf-proj-card {
  background: var(--mcf-white, #fff);
  border: 1px solid var(--mcf-border);
  cursor: pointer;
}
.mcf-projects--service .mcf-proj-card:hover {
  border-color: var(--mcf-gold);
}

@media (max-width: 1024px) {
  .mcf-projects--service .mcf-projects-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .mcf-projects--service .mcf-projects-top-right {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }
}

/* ============================================
   INDUSTRY PAGE — "Industry Services" widget.
   4-card grid on dark green, numbered gold circles,
   clickable cards linking to matching service pages.
   Conceptually sits where the service page's Process
   Timeline would go, but shows services not steps.
   ============================================ */
.mcf-isvcs {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-green);
}
.mcf-isvcs-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 32px;
}
.mcf-isvcs-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.12;
}
.mcf-isvcs-top > p {
  color: rgba(253, 252, 250, 0.7);
  font-size: 16px;
  max-width: 380px;
  text-align: right;
  line-height: 1.65;
}
.mcf-isvcs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* Adapt column count to populated card count so the grid never
   leaves empty slots. data-count is set by page-industry.php. */
.mcf-isvcs-grid[data-count="1"] { grid-template-columns: minmax(0, 360px); justify-content: center; }
.mcf-isvcs-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.mcf-isvcs-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mcf-isvcs-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.mcf-isvcs-grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.mcf-template .mcf-isvc-card {
  /* Flex column so the arrow can pin to the bottom of every card via
     margin-top: auto, keeping all 5 arrows on the same baseline
     regardless of how long each description is. Grid items already
     stretch to equal row height by default, giving flex room to work. */
  display: flex;
  flex-direction: column;
  background: rgba(253, 252, 250, 0.06);
  border: 1px solid rgba(253, 252, 250, 0.1);
  border-radius: 6px;
  padding: 32px 28px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  position: relative;
}
.mcf-template .mcf-isvc-card:hover {
  background: rgba(253, 252, 250, 0.1);
  border-color: var(--mcf-gold);
  transform: translateY(-3px);
}
.mcf-isvc-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mcf-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.mcf-isvc-num span {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--mcf-green);
}
.mcf-isvc-card h3 {
  font-family: var(--mcf-serif);
  font-size: 22px;
  color: var(--mcf-white);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 12px;
}
.mcf-isvc-card p {
  color: rgba(253, 252, 250, 0.7);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.mcf-isvc-arrow {
  display: inline-block;
  font-size: 18px;
  color: var(--mcf-gold);
  transition: transform 0.2s;
  /* Push to the bottom of the card body so every arrow across the
     5-card row sits on the same baseline. align-self keeps the arrow
     hugging the left edge rather than stretching full-width. */
  margin-top: auto;
  align-self: flex-start;
}
.mcf-template .mcf-isvc-card:hover .mcf-isvc-arrow {
  transform: translateX(4px);
}

/* Section label variant — for use on dark/green backgrounds */
.mcf-label--on-green {
  /* inherits .mcf-label gold colour which already reads on green */
}

@media (max-width: 1024px) {
  .mcf-isvcs-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mcf-isvcs-top > p {
    text-align: left;
    max-width: 100%;
  }
  .mcf-isvcs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mcf-isvcs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mcf-isvc-card {
    padding: 24px 20px;
  }
}

/* ============================================
   SERVICE PAGE — responsive overrides
   ============================================ */
@media (max-width: 1024px) {
  .mcf-svc-overview {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mcf-svc-sidebar {
    position: static;
  }
  .mcf-process-top {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .mcf-process-top > p {
    text-align: left;
    max-width: 100%;
  }
  .mcf-process-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .mcf-process-track::before {
    display: none;
  }
  .mcf-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mcf-svc-areas-content {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .mcf-crumbs {
    margin-top: 60px;
    font-size: 12px;
    padding: 10px var(--mcf-pad);
  }
  .mcf-svc-overview-text h2 {
    font-size: 24px;
  }
  .mcf-pull-quote p {
    font-size: 17px;
  }
  .mcf-process-track {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .mcf-process-step {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0;
  }
  .mcf-step-dot {
    margin: 0;
    width: 40px;
    height: 40px;
  }
  .mcf-process-step h3 {
    font-size: 18px;
    margin-bottom: 0;
  }
  .mcf-process-step p {
    font-size: 14px;
    width: 100%;
    margin-top: 4px;
  }
  .mcf-related-grid {
    grid-template-columns: 1fr;
  }
  .mcf-related-card {
    padding: 24px 20px;
  }
}


/* ============================================
   INSIGHTS / BLOG — archive page layout
   ============================================ */
.mcf-page-header {
  background: var(--mcf-green);
  padding: clamp(96px, 11vw, 150px) var(--mcf-pad) clamp(56px, 7vw, 96px);
  margin-top: 72px; /* clear fixed nav */
  text-align: left;
}
.mcf-page-header > * { max-width: 880px; }
.admin-bar .mcf-page-header { /* nav offset already on .mcf-nav, no extra needed */ }
.mcf-page-header h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.1;
  margin: 16px 0 20px;
}
.mcf-page-header .mcf-label { color: var(--mcf-gold); }
.mcf-page-header-intro {
  color: rgba(253, 252, 250, 0.78);
  font-size: 17px;
  line-height: 1.65;
  max-width: 660px;
}
.mcf-page-header-intro p { margin-bottom: 12px; }
.mcf-template .mcf-page-header-intro a {
  color: var(--mcf-gold);
  text-decoration: underline;
}

/* Category filter pills — sits on white strip under green header */
.mcf-filter-bar-wrap {
  background: var(--mcf-white);
  border-bottom: 1px solid var(--mcf-border);
}
.mcf-filter-bar {
  padding: 28px var(--mcf-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Mobile-only toggle, hidden on desktop */
.mcf-template .mcf-filter-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--mcf-pad);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mcf-border);
  font-family: var(--mcf-sans);
  font-size: 14px;
  color: var(--mcf-charcoal);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: none;
}
.mcf-filter-toggle strong { color: var(--mcf-green); font-weight: 700; }
.mcf-filter-toggle-chev {
  transition: transform 0.2s ease;
  color: var(--mcf-warm-grey);
  font-size: 16px;
}
.mcf-filter-toggle[aria-expanded="true"] .mcf-filter-toggle-chev { transform: rotate(180deg); }
.mcf-template .mcf-filter-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mcf-charcoal);
  background: transparent;
  border: 1px solid var(--mcf-border);
  border-radius: 99px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mcf-template .mcf-filter-pill:hover {
  background: var(--mcf-cream);
  color: var(--mcf-charcoal);
  border-color: var(--mcf-charcoal);
}
.mcf-template .mcf-filter-pill--active,
.mcf-template .mcf-filter-pill--active:hover {
  background: var(--mcf-green);
  color: var(--mcf-white) !important;
  border-color: var(--mcf-green);
}

/* Featured post (full-width hero card) */
.mcf-featured-post {
  padding: 32px var(--mcf-pad) 64px;
}
.mcf-template .mcf-featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--mcf-cream);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid var(--mcf-border);
}
.mcf-template .mcf-featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.mcf-featured-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--mcf-green);
}
.mcf-featured-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcf-featured-card-body {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mcf-featured-card-cat {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--mcf-warm-grey);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.mcf-featured-badge {
  display: inline-block;
  background: var(--mcf-gold);
  color: var(--mcf-green);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-right: 4px;
}
.mcf-featured-card-body h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.2;
  margin-bottom: 16px;
}
.mcf-featured-card-body p {
  color: var(--mcf-warm-grey);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 20px;
}
.mcf-featured-card-meta {
  font-size: 13px;
  color: var(--mcf-warm-grey);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mcf-featured-card-meta strong {
  color: var(--mcf-charcoal);
  font-weight: 600;
}

/* Posts grid section */
.mcf-posts-section {
  padding: 32px var(--mcf-pad) 80px;
  background: var(--mcf-cream);
}
.mcf-posts-section-top {
  margin-bottom: 40px;
}
.mcf-posts-section-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin-top: 8px;
}
.mcf-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mcf-template .mcf-post-card {
  background: var(--mcf-white, #fff);
  border: 1px solid var(--mcf-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.2s;
}
.mcf-template .mcf-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
  border-color: var(--mcf-gold);
}
.mcf-post-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--mcf-green);
}
.mcf-post-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcf-post-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mcf-post-card-cat {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--mcf-gold);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  margin-bottom: 10px;
}
.mcf-post-card h3 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.25;
  margin-bottom: 10px;
}
.mcf-post-card p {
  font-size: 14px;
  color: var(--mcf-warm-grey);
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
}
.mcf-post-card-meta {
  font-size: 12px;
  color: var(--mcf-warm-grey);
}
.mcf-post-card-meta strong {
  color: var(--mcf-charcoal);
  font-weight: 600;
}

/* Pagination */
.mcf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px var(--mcf-pad) 80px;
  background: var(--mcf-cream);
}
.mcf-template .mcf-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--mcf-white, #fff);
  border: 1px solid var(--mcf-border);
  color: var(--mcf-charcoal);
  font-family: var(--mcf-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.mcf-template .mcf-page-btn:hover {
  background: var(--mcf-green);
  color: var(--mcf-white);
  border-color: var(--mcf-green);
}
.mcf-template .mcf-page-btn--active {
  background: var(--mcf-green);
  color: var(--mcf-white);
  border-color: var(--mcf-green);
  cursor: default;
}


/* ============================================
   INSIGHTS / BLOG — single post layout
   ============================================ */
.mcf-article-header {
  padding: clamp(48px, 7vw, 80px) var(--mcf-pad) 0;
}
.mcf-template .mcf-article-category {
  display: inline-block;
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  background: var(--mcf-cream);
  padding: 6px 16px;
  border-radius: 99px;
  text-decoration: none;
  margin-bottom: 24px;
  transition: background 0.2s, color 0.2s;
}
.mcf-template .mcf-article-category:hover {
  background: var(--mcf-green);
  color: var(--mcf-white);
}
.mcf-article-header h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.1;
  margin-bottom: 32px;
}
.mcf-article-header h1 em {
  font-style: italic;
  color: var(--mcf-green);
}

/* Article meta strip (author + dates + read time + share) */
.mcf-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--mcf-border);
  border-bottom: 1px solid var(--mcf-border);
}
.mcf-meta-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mcf-meta-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mcf-green);
  color: var(--mcf-white);
  font-family: var(--mcf-serif);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mcf-meta-author-info { line-height: 1.3; }
.mcf-template .mcf-meta-author-name {
  font-family: var(--mcf-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--mcf-charcoal);
  text-decoration: none;
}
.mcf-template .mcf-meta-author-name:hover {
  color: var(--mcf-green);
}
.mcf-meta-author-role {
  font-size: 12px;
  color: var(--mcf-warm-grey);
}
.mcf-meta-sep {
  width: 1px;
  height: 32px;
  background: var(--mcf-border);
}
.mcf-meta-item {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.mcf-meta-item-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mcf-warm-grey);
  font-weight: 600;
}
.mcf-meta-item-value {
  font-size: 14px;
  color: var(--mcf-charcoal);
  font-weight: 600;
}
.mcf-meta-updated { color: var(--mcf-green-bright); }
.mcf-meta-share {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.mcf-template .mcf-share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mcf-cream);
  color: var(--mcf-warm-grey);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.mcf-template .mcf-share-btn:hover,
.mcf-template .mcf-share-btn:focus-visible {
  background: var(--mcf-green);
  color: #ffffff;
  outline: none;
}
.mcf-template .mcf-share-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* Force the SVG fill to pure white on hover too — some browsers
   don't repaint currentColor on transition reliably */
.mcf-template .mcf-share-btn:hover svg,
.mcf-template .mcf-share-btn:focus-visible svg {
  fill: #ffffff;
}

/* Featured image — floats right at the top of the article body so
   the first paragraphs flow around it, magazine-style. */
.mcf-article-content .mcf-article-featured-img {
  float: right;
  width: 45%;
  max-width: 460px;
  /* left margin is the gutter between the floated image and the text
     wrapping beside it. NOTE: do NOT add shape-outside here — it makes
     text wrap to the padding box and IGNORE this margin, so the gutter
     silently stops working (the bug this rule had). With no shape-outside,
     the margin controls the wrap gap normally. Right margin stays 0 so the
     image sits flush to the content's right edge. Mobile rule below
     unfloats to full width. */
  margin: 6px 0 24px 40px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}
.mcf-article-content .mcf-article-featured-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}
.mcf-article-content .mcf-article-featured-img figcaption {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-style: italic;
  color: var(--mcf-warm-grey);
  background: var(--mcf-cream);
  padding: 10px 14px;
  line-height: 1.5;
  border-radius: 0 0 8px 8px;
}

/* Article body + sidebar layout — full width up to the TOC sidebar */
.mcf-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(48px, 6vw, 80px) var(--mcf-pad);
}
.mcf-article-content {
  font-family: var(--mcf-sans);
  font-size: 17px;
  line-height: 1.85;
  color: var(--mcf-text);
  min-width: 0;
}
/* Clear any floats (featured image float-right) at the end of the
   article so the reviewer credit, tags and share bar below sit
   cleanly against the bottom edge */
.mcf-article-content::after {
  content: '';
  display: table;
  clear: both;
}
.mcf-article-content > p {
  margin-bottom: 22px;
}
.mcf-article-content h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 48px 0 18px;
  line-height: 1.2;
  scroll-margin-top: 100px;
  /* H2s deliberately do NOT clear floats — they continue wrapping
     next to the floated featured image like the body paragraphs.
     Only .callout blocks force a full-width break. */
}
.mcf-article-content h3 {
  font-family: var(--mcf-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  color: var(--mcf-charcoal);
  margin: 36px 0 14px;
  line-height: 1.25;
  scroll-margin-top: 100px;
}
.mcf-article-content strong {
  color: var(--mcf-charcoal);
  font-weight: 600;
}
.mcf-template .mcf-article-content a {
  color: var(--mcf-green);
  text-decoration: underline;
  text-decoration-color: var(--mcf-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.mcf-template .mcf-article-content a:hover {
  color: var(--mcf-green-bright);
  text-decoration-color: var(--mcf-green-bright);
}
.mcf-article-content ul,
.mcf-article-content ol {
  margin: 0 0 22px 24px;
  padding: 0;
}
.mcf-article-content li {
  margin-bottom: 10px;
}
.mcf-article-content blockquote {
  border-left: 3px solid var(--mcf-gold);
  padding: 12px 0 12px 24px;
  margin: 32px 0;
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-style: italic;
  color: var(--mcf-charcoal);
  line-height: 1.45;
}

/* Callout box (custom .callout class for editorial highlights) */
.mcf-article-content .callout {
  background: var(--mcf-cream);
  border-left: 4px solid var(--mcf-gold);
  padding: 20px 24px;
  margin: 32px 0;
  border-radius: 8px;
  clear: both;
}
.mcf-article-content .callout-title {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mcf-charcoal);
  margin-bottom: 8px;
}
.mcf-article-content .callout p { margin-bottom: 0; }

/* Reviewer credit */
.mcf-article-reviewer {
  margin-top: 48px;
  padding: 16px 20px;
  background: var(--mcf-cream);
  border-radius: 6px;
  font-size: 14px;
  color: var(--mcf-warm-grey);
  font-style: italic;
}
.mcf-article-reviewer strong {
  color: var(--mcf-charcoal);
  font-style: normal;
}

/* Tags */
.mcf-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.mcf-template .mcf-article-tags .mcf-article-tag {
  display: inline-block;
  background: var(--mcf-cream);
  color: var(--mcf-charcoal) !important;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
}
.mcf-template .mcf-article-tags .mcf-article-tag:hover,
.mcf-template .mcf-article-tags .mcf-article-tag:focus-visible {
  background: var(--mcf-green);
  color: #ffffff !important;
  outline: none;
}

/* Bottom share bar */
.mcf-article-share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
}
.mcf-article-share-bar > span {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mcf-warm-grey);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Sidebar: TOC + related */
.mcf-article-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  font-family: var(--mcf-sans);
}
.mcf-toc {
  background: var(--mcf-cream);
  padding: 24px 24px 12px;
  border-radius: 8px;
  margin-bottom: 24px;
}
/* Toggle button: styled like the original .mcf-toc-title so it
   reads as a label on desktop, but functions as a tappable
   accordion control on mobile. */
.mcf-template .mcf-toc-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mcf-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 14px;
  margin-bottom: 14px;
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mcf-gold) !important;
  text-align: left;
  cursor: default;
}
.mcf-toc-icon {
  display: none; /* hidden on desktop, shown on mobile */
  font-size: 22px;
  line-height: 1;
  color: var(--mcf-gold);
  font-weight: 400;
}
.mcf-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcf-toc-list li {
  border-bottom: 1px solid var(--mcf-border);
  margin: 0;
}
.mcf-toc-list li:last-child {
  border-bottom: none;
}
.mcf-template .mcf-toc-list a {
  font-size: 14px;
  color: var(--mcf-charcoal);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  padding: 12px 0;
  transition: color 0.2s, padding-left 0.2s;
}
.mcf-template .mcf-toc-list a:hover {
  padding-left: 4px;
}
.mcf-template .mcf-toc-list a:hover {
  color: var(--mcf-gold);
}
.mcf-template .mcf-toc-sub a {
  padding-left: 16px;
  font-size: 13px;
  color: var(--mcf-warm-grey);
}
.mcf-template .mcf-toc-sub a:hover {
  color: var(--mcf-gold);
}

.mcf-sidebar-related {
  background: var(--mcf-white, #fff);
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--mcf-border);
}
.mcf-sidebar-related-title {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mcf-border);
}
.mcf-template .mcf-sidebar-related a {
  display: block;
  text-decoration: none;
  color: var(--mcf-charcoal);
  padding: 12px 0;
  border-bottom: 1px solid var(--mcf-border);
  transition: padding-left 0.2s;
}
.mcf-template .mcf-sidebar-related a:last-child { border-bottom: none; }
.mcf-template .mcf-sidebar-related a:hover { padding-left: 4px; }
.mcf-template .mcf-sidebar-related a:hover h4 { color: var(--mcf-gold); }
.mcf-sidebar-related h4 {
  font-family: var(--mcf-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--mcf-charcoal);
  line-height: 1.3;
  margin-bottom: 4px;
  transition: color 0.2s;
}
.mcf-sidebar-related span {
  font-size: 12px;
  color: var(--mcf-warm-grey);
}

/* Author bio (full-width card below article) */
.mcf-author-bio {
  padding: 0 var(--mcf-pad) 72px; /* bottom space before service card */
  background: var(--mcf-white); /* break from the cream article layout above */
}
.mcf-author-bio-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: var(--mcf-cream);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 12px;
}
.mcf-author-bio-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mcf-green);
  color: var(--mcf-white);
  font-family: var(--mcf-serif);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mcf-author-bio-role {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 6px;
}
.mcf-author-bio-name {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--mcf-charcoal);
  margin-bottom: 12px;
}
.mcf-template .mcf-author-bio-name a {
  color: var(--mcf-charcoal);
  text-decoration: none;
}
.mcf-template .mcf-author-bio-name a:hover {
  color: var(--mcf-green);
}
.mcf-author-bio-text {
  color: var(--mcf-warm-grey);
  line-height: 1.65;
  margin-bottom: 12px;
  font-size: 15px;
}
.mcf-template .mcf-author-bio-link {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mcf-gold);
  text-decoration: none;
}
.mcf-template .mcf-author-bio-link:hover { color: var(--mcf-gold-light); }

/* Author archive page — header card sits inside .mcf-page-header
   and presents the writer's role + bio above their post grid. Uses
   the same avatar / role styling cues as the per-article bio card
   (above) but at archive-page scale so it reads like a profile,
   not a footer note. */
.mcf-author-archive-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 24px auto 0;
  max-width: 760px;
  text-align: left;
  background: var(--mcf-cream);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 12px;
}
.mcf-author-archive-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mcf-green);
  color: var(--mcf-white);
  font-family: var(--mcf-serif);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mcf-author-archive-role {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 8px;
}
.mcf-author-archive-bio {
  color: var(--mcf-warm-grey);
  line-height: 1.65;
  margin-bottom: 12px;
  font-size: 15px;
}
.mcf-template .mcf-author-archive-back a {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mcf-gold);
  text-decoration: none;
}
.mcf-template .mcf-author-archive-back a:hover { color: var(--mcf-gold-light); }
@media (max-width: 640px) {
  .mcf-author-archive-card { flex-direction: column; }
}

/* Related articles section (full grid below author bio) */
.mcf-related-articles {
  padding: 64px var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-related-articles-top {
  text-align: center;
  margin-bottom: 40px;
}
.mcf-related-articles-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin-top: 8px;
}
.mcf-related-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Capability-page variant: scoped overrides so 1, 2, 3, or 4 cards all
   render gracefully on desktop. The data-count attribute is set in
   single-capability.php from the WP_Query post_count. Insights singles
   always serve 4 (top-up query) so the default rule above still wins
   for them. Below 1025px the existing responsive rules take over and
   collapse to 2-up / 1-up like on insight singles. */
@media (min-width: 1025px) {
  .mcf-cap-related-articles-grid {
    max-width: 1280px;
    margin: 0 auto;
    justify-content: center;
  }
  .mcf-cap-related-articles-grid[data-count="1"] {
    grid-template-columns: minmax(280px, 360px);
  }
  .mcf-cap-related-articles-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(280px, 360px));
  }
  .mcf-cap-related-articles-grid[data-count="3"] {
    grid-template-columns: repeat(3, minmax(260px, 320px));
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .mcf-template .mcf-featured-card { grid-template-columns: 1fr; }
  .mcf-featured-card-img { aspect-ratio: 16/9; }
  .mcf-posts-grid { grid-template-columns: repeat(2, 1fr); }

  /* Article layout: sidebar moves above the content and becomes a
     compact sticky TOC accordion. Related-articles sidebar block
     hides entirely (the bottom-of-page Related Articles grid still
     shows so users have a way to discover other posts). */
  .mcf-article-layout { grid-template-columns: 1fr; }
  .mcf-article-sidebar {
    order: -1;
    position: sticky;
    top: 70px;
    z-index: 50;
    align-self: start;
  }
  .admin-bar .mcf-article-sidebar { top: calc(70px + 32px); }
  .mcf-sidebar-related { display: none; }

  .mcf-toc {
    margin-bottom: 16px;
    padding: 16px 18px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
  .mcf-template .mcf-toc-toggle {
    cursor: pointer;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none !important;
  }
  .mcf-toc-icon { display: block; }
  .mcf-toc-list {
    display: none;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mcf-border);
  }
  .mcf-toc-toggle[aria-expanded="true"] + .mcf-toc-list {
    display: block;
  }

  .mcf-related-articles-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-meta-share { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .mcf-page-header { padding-top: 64px; margin-top: 60px; }
  .mcf-page-header h1 { font-size: 28px; }
  .mcf-posts-grid { grid-template-columns: 1fr; }
  .mcf-article-header h1 { font-size: 26px; }
  .mcf-article-meta { gap: 12px; }
  .mcf-meta-sep { display: none; }
  .mcf-article-content { font-size: 16px; }
  .mcf-article-content .mcf-article-featured-img {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
  }
  .mcf-author-bio-card { flex-direction: column; }
  .mcf-related-articles-grid { grid-template-columns: 1fr; }
  .mcf-pagination { padding: 24px var(--mcf-pad) 56px; }

  /* Filter bar becomes an accordion on mobile */
  .mcf-template .mcf-filter-toggle { display: flex; }
  .mcf-filter-bar {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px var(--mcf-pad) 20px;
  }
  .mcf-filter-toggle[aria-expanded="true"] + .mcf-filter-bar { display: flex; }
  .mcf-template .mcf-filter-pill { width: auto; }
}


/* ============================================
   SINGLE PROJECT / CASE STUDY — single-project.php
   All rules prefixed .mcf-cs- to stay namespaced.
   ============================================ */
.mcf-cs-crumbs {
  padding: 12px var(--mcf-pad);
  font-size: 13px;
  color: rgba(253, 252, 250, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--mcf-green);
  margin-top: 72px;
}
.mcf-template .mcf-cs-crumbs a {
  color: rgba(253, 252, 250, 0.55);
  text-decoration: none;
}
.mcf-template .mcf-cs-crumbs a:hover { color: rgba(253, 252, 250, 0.9); }
.mcf-cs-crumbs-sep { margin: 0 6px; opacity: 0.3; }

/* Hero */
.mcf-cs-hero {
  position: relative;
  min-height: clamp(400px, 50vh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--mcf-green);
}
.mcf-cs-hero-bg { position: absolute; inset: 0; }
.mcf-cs-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.mcf-cs-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 61, 47, 0.95) 0%,
    rgba(28, 61, 47, 0.6) 50%,
    rgba(28, 61, 47, 0.35) 100%
  );
}
.mcf-cs-hero-inner {
  position: relative; z-index: 1;
  padding: 0 var(--mcf-pad) 48px;
  width: 100%;
}
.mcf-cs-hero-tags {
  display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
}
.mcf-cs-tag {
  display: inline-block;
  font-family: var(--mcf-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
}
.mcf-cs-tag-service {
  background: var(--mcf-gold);
  color: var(--mcf-green);
}
.mcf-cs-tag-capability {
  background: rgba(253, 252, 250, 0.1);
  color: rgba(253, 252, 250, 0.75);
  border: 1px solid rgba(253, 252, 250, 0.15);
}
.mcf-cs-hero h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.1;
  margin: 0 0 12px;
  max-width: 800px;
}
.mcf-cs-hero-client {
  font-size: 16px;
  color: rgba(253, 252, 250, 0.6);
  margin: 0;
}
.mcf-cs-hero-client strong {
  color: var(--mcf-gold-light);
  font-weight: 600;
}

/* Project Details Bar
   Framed by a top + bottom gold rail. Subtle gold verticals between
   cells at lower opacity so the outer rails dominate. Previously the
   separators were white at 0.06/0.08 opacity — invisible on green. */
.mcf-cs-details {
  background: var(--mcf-green);
  padding: 0 var(--mcf-pad);
  border-top: 1px solid rgba(212, 168, 67, 0.55);
  border-bottom: 1px solid rgba(212, 168, 67, 0.55);
}
.mcf-cs-details-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.mcf-cs-details-inner[data-cols="1"] { grid-template-columns: 1fr; }
.mcf-cs-details-inner[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.mcf-cs-details-inner[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.mcf-cs-details-inner[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.mcf-cs-detail {
  padding: 28px 24px;
  border-right: 1px solid rgba(212, 168, 67, 0.2);
}
.mcf-cs-detail:last-child { border-right: none; }
.mcf-cs-detail-label {
  font-family: var(--mcf-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(253, 252, 250, 0.4);
  margin-bottom: 6px;
}
.mcf-cs-detail-value {
  font-family: var(--mcf-serif);
  font-size: 18px;
  color: var(--mcf-white);
  line-height: 1.3;
}

/* Body (content + sidebar) */
.mcf-cs-body {
  padding: var(--mcf-v-space) var(--mcf-pad);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.mcf-cs-content h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.2;
  margin: 48px 0 20px;
}
.mcf-cs-content h2:first-child { margin-top: 0; }
.mcf-cs-content h3 {
  font-family: var(--mcf-serif);
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.25;
  margin: 32px 0 14px;
}
.mcf-cs-content p {
  margin-bottom: 20px;
  line-height: 1.85;
  color: var(--mcf-text);
}
.mcf-cs-content strong { color: var(--mcf-charcoal); font-weight: 600; }
.mcf-cs-content ul, .mcf-cs-content ol {
  margin: 0 0 24px 24px;
  line-height: 1.85;
}
.mcf-cs-content li {
  margin-bottom: 8px;
  color: var(--mcf-text);
}
.mcf-template .mcf-cs-content a {
  color: var(--mcf-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.mcf-template .mcf-cs-content a:hover,
.mcf-template .mcf-cs-content a:focus-visible {
  color: var(--mcf-gold);
}
.mcf-cs-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
}

/* Pull quote — Gutenberg blockquote rendered inside the body.
   Editors use the Quote block in the WYSIWYG and it picks up this
   styling automatically. Covers both the core Quote block (wraps the
   whole thing in <blockquote class="wp-block-quote">) and a plain
   <blockquote>. */
.mcf-cs-content blockquote,
.mcf-cs-content .wp-block-quote {
  border-left: 3px solid var(--mcf-gold);
  padding: 24px 0 24px 28px;
  margin: 36px 0;
  background: transparent;
}
.mcf-cs-content blockquote p,
.mcf-cs-content .wp-block-quote p {
  font-family: var(--mcf-serif);
  font-size: 21px;
  font-style: italic;
  color: var(--mcf-charcoal);
  line-height: 1.5;
  margin-bottom: 0;
}
.mcf-cs-content blockquote cite,
.mcf-cs-content .wp-block-quote cite {
  display: block;
  font-family: var(--mcf-sans);
  font-style: normal;
  font-size: 13px;
  color: var(--mcf-warm-grey);
  margin-top: 12px;
  font-weight: 600;
}

/* Results card — sidebar variant */
.mcf-cs-sidebar-results { padding: 24px 28px; }
.mcf-cs-sidebar-result {
  padding: 14px 0;
  border-bottom: 1px solid rgba(107, 99, 88, 0.15);
}
.mcf-cs-sidebar-result:last-child { border-bottom: none; }
.mcf-cs-sidebar-result-number {
  font-family: var(--mcf-serif);
  font-size: 32px;
  color: var(--mcf-green);
  line-height: 1;
  margin-bottom: 4px;
}
.mcf-cs-sidebar-result-label {
  font-size: 13px;
  color: var(--mcf-warm-grey);
  line-height: 1.4;
}

/* Sidebar */
.mcf-cs-sidebar { position: sticky; top: 96px; }
.mcf-cs-sidebar-cta {
  display: block;
  text-align: center;
  padding: 16px 24px;
  background: var(--mcf-gold);
  color: var(--mcf-green);
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-bottom: 24px;
  text-decoration: none;
}
.mcf-template .mcf-cs-sidebar-cta:hover,
.mcf-template .mcf-cs-sidebar-cta:focus-visible {
  background: var(--mcf-gold-light);
  color: var(--mcf-green);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(212, 168, 67, 0.3);
}
.mcf-cs-sidebar-card {
  background: var(--mcf-cream);
  border-radius: 8px;
  padding: 28px;
  margin-bottom: 24px;
}
.mcf-cs-sidebar-card h3 {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 20px;
}
.mcf-cs-sidebar-card dl { margin: 0; }
.mcf-cs-sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(107, 99, 88, 0.15);
  font-size: 14px;
}
.mcf-cs-sidebar-row:last-child { border-bottom: none; }
.mcf-cs-sidebar-row dt {
  color: var(--mcf-warm-grey);
  font-weight: 500;
  min-width: 90px;
  margin: 0;
}
.mcf-cs-sidebar-row dd {
  color: var(--mcf-charcoal);
  font-weight: 600;
  text-align: right;
  margin: 0;
}
/* Photo Gallery — horizontal scroll carousel
   Every uploaded project image shown, scroll/swipe to navigate.
   CSS scroll-snap for smooth touch UX, prev/next buttons for desktop,
   scroll-shadow fade on right edge as "more →" affordance.            */
.mcf-cs-carousel {
  position: relative;
  background: var(--mcf-green);
  padding: clamp(32px, 4vw, 48px) 0;
}
.mcf-cs-carousel-track {
  display: flex;
  gap: 12px;
  padding: 0 var(--mcf-pad);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.mcf-cs-carousel-track::-webkit-scrollbar { display: none; }
.mcf-cs-carousel-track:focus-visible {
  outline: 2px solid var(--mcf-gold);
  outline-offset: -2px;
}

.mcf-cs-carousel-slide {
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 460px);
  aspect-ratio: 4/3;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: rgba(253, 252, 250, 0.06);
  overflow: hidden;
  border-radius: 2px;
}
.mcf-cs-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.mcf-cs-carousel-slide:hover img { transform: scale(1.04); }

/* Cloned slides (added by JS for the seamless infinite loop) are
   visually identical to originals. The aria-hidden attribute keeps
   screen readers from announcing them twice. */
.mcf-cs-carousel-slide[aria-hidden="true"] img { pointer-events: none; }

/* Honour reduced-motion preferences: we set data-autoscroll="off"
   via JS if the user prefers reduced motion, which CSS can also key off
   for any additional safety. No intrinsic motion in this stylesheet. */

/* Related Projects Grid */
.mcf-cs-related {
  padding: var(--mcf-v-space) var(--mcf-pad);
  border-top: 1px solid rgba(107, 99, 88, 0.15);
}
.mcf-cs-related-top { margin-bottom: 44px; }
.mcf-cs-related-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0;
}
.mcf-cs-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mcf-cs-rp-card {
  border: 1px solid rgba(107, 99, 88, 0.15);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: block;
  background: var(--mcf-white);
}
.mcf-cs-rp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(42, 38, 34, 0.08);
}
.mcf-cs-rp-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  background: var(--mcf-green);
}
.mcf-cs-rp-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mcf-cs-rp-card-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(28, 61, 47, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 1;
}
.mcf-cs-rp-card-body { padding: 24px; }
.mcf-cs-rp-card-client {
  font-size: 12px;
  font-weight: 600;
  color: var(--mcf-gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.mcf-cs-rp-card h3 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.3;
  margin: 0 0 8px;
}
.mcf-cs-rp-card:hover h3 { color: var(--mcf-green); }
.mcf-cs-rp-card p {
  font-size: 14px;
  color: var(--mcf-warm-grey);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .mcf-cs-crumbs { margin-top: 64px; padding: 12px 20px; font-size: 12px; }
  .mcf-cs-details-inner,
  .mcf-cs-details-inner[data-cols="5"],
  .mcf-cs-details-inner[data-cols="4"] { grid-template-columns: repeat(3, 1fr); }
  /* When details wrap to a second row, add a horizontal gold line
     between the rows so the rails still feel continuous. */
  .mcf-cs-detail:nth-child(n+4) { border-top: 1px solid rgba(212, 168, 67, 0.2); }
  /* 5 cells in a 3-col grid leaves one empty slot. Stretch the last
     cell across the gap so the bottom row fills properly. */
  .mcf-cs-details-inner[data-cols="5"] .mcf-cs-detail:last-child {
    grid-column: span 2;
    border-right: none;
  }
  /* Same treatment for 4-cell layouts landing on 3 cols: last cell fills row. */
  .mcf-cs-details-inner[data-cols="4"] .mcf-cs-detail:last-child {
    grid-column: 1 / -1;
    border-right: none;
  }
  .mcf-cs-body { grid-template-columns: 1fr; }
  .mcf-cs-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .mcf-cs-sidebar-cta { grid-column: 1 / -1; }
  .mcf-cs-carousel-slide { width: 78vw; } /* one-ish slide per viewport on tablet */
  .mcf-cs-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mcf-cs-hero { min-height: 50vh; }
  .mcf-cs-hero h1 { font-size: 26px; }
  .mcf-cs-hero-client { font-size: 14px; }
  /* On phones, single-column stack so every detail has its own full-
     width row. Avoids orphan cells / half-row gold lines that happen
     with odd counts in a 2-col grid. Specificity has to match the
     1024px data-cols rules above or the 3-col layout sticks. */
  .mcf-cs-details-inner,
  .mcf-cs-details-inner[data-cols="5"],
  .mcf-cs-details-inner[data-cols="4"],
  .mcf-cs-details-inner[data-cols="3"],
  .mcf-cs-details-inner[data-cols="2"] { grid-template-columns: 1fr; }
  .mcf-cs-detail {
    padding: 18px 16px;
    border-right: none;
    border-top: 1px solid rgba(212, 168, 67, 0.2);
  }
  .mcf-cs-detail:first-child { border-top: none; }
  .mcf-cs-detail-value { font-size: 16px; }
  /* Reset any tablet "last cell spans" rules — not needed in 1-col. */
  .mcf-cs-details-inner[data-cols="5"] .mcf-cs-detail:last-child,
  .mcf-cs-details-inner[data-cols="4"] .mcf-cs-detail:last-child,
  .mcf-cs-details-inner[data-cols="3"] .mcf-cs-detail:last-child {
    grid-column: auto;
  }
  .mcf-cs-content h2 { font-size: 24px; margin-top: 36px; }
  .mcf-cs-content h3 { font-size: 20px; }
  .mcf-cs-results-grid { grid-template-columns: 1fr; gap: 20px; }
  .mcf-cs-result-item {
    text-align: left;
    display: flex; align-items: center; gap: 16px;
  }
  .mcf-cs-result-number { font-size: 28px; min-width: 60px; margin-bottom: 0; }
  .mcf-cs-quote p { font-size: 18px; }
  .mcf-cs-sidebar { grid-template-columns: 1fr; }
  .mcf-cs-related-grid { grid-template-columns: 1fr; }
}


/* ============================================
   PROJECTS ARCHIVE — page-projects.php
   Namespaced .mcf-pa-* (projects archive) to avoid collision
   with the homepage .mcf-proj-card classes, which have a
   different image-tag arrangement.
   ============================================ */

/* Header stats row inside the green page header */
.mcf-pa-header-stats {
  display: flex;
  gap: 40px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.mcf-pa-header-stat { min-width: 120px; }
.mcf-pa-header-stat-number {
  font-family: var(--mcf-serif);
  font-size: 32px;
  color: var(--mcf-white);
  line-height: 1;
  margin-bottom: 4px;
}
.mcf-pa-header-stat-label {
  font-size: 13px;
  color: rgba(253, 252, 250, 0.45);
  font-weight: 500;
}

/* Featured project hero card */
.mcf-pa-featured {
  padding: var(--mcf-v-space) var(--mcf-pad) 0;
}
.mcf-pa-featured-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(107, 99, 88, 0.15);
  transition: box-shadow 0.3s;
  text-decoration: none;
  background: var(--mcf-white);
}
.mcf-pa-featured-card:hover {
  box-shadow: 0 20px 48px rgba(42, 38, 34, 0.08);
}
.mcf-pa-featured-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--mcf-green);
}
.mcf-pa-featured-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mcf-pa-featured-card-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(28, 61, 47, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px; font-weight: 600;
  padding: 5px 14px;
  border-radius: 100px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 1;
}
.mcf-pa-featured-card-body {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--mcf-cream);
}
.mcf-pa-featured-card-client {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 12px;
}
.mcf-pa-featured-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #3A7D5E;
  background: rgba(58, 125, 94, 0.08);
  padding: 4px 12px;
  border-radius: 100px;
  margin-right: 8px;
}
.mcf-pa-featured-card h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.2;
  margin: 0 0 16px;
}
.mcf-pa-featured-card:hover h2 { color: var(--mcf-green); }
.mcf-pa-featured-card p {
  font-size: 16px;
  color: var(--mcf-warm-grey);
  line-height: 1.7;
  margin: 0 0 24px;
}
.mcf-pa-featured-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--mcf-warm-grey);
  margin-top: auto;
}
.mcf-pa-featured-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mcf-pa-featured-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(107, 99, 88, 0.7);
}
.mcf-pa-featured-detail-value {
  color: var(--mcf-text);
  font-weight: 500;
}

/* Grid section */
.mcf-pa-section {
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-pa-section-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
}
.mcf-pa-section-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0;
}
.mcf-pa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Grid card */
.mcf-pa-card {
  border: 1px solid rgba(107, 99, 88, 0.15);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: block;
  background: var(--mcf-white);
}
.mcf-pa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(42, 38, 34, 0.08);
}
.mcf-pa-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  background: var(--mcf-green);
}
.mcf-pa-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mcf-pa-card-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(28, 61, 47, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 1;
}
.mcf-pa-card-body {
  padding: 24px 28px 28px;
}
.mcf-pa-card-client {
  font-size: 12px;
  font-weight: 600;
  color: var(--mcf-gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.mcf-pa-card h3 {
  font-family: var(--mcf-serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.3;
  margin: 0 0 10px;
}
.mcf-pa-card:hover h3 { color: var(--mcf-green); }
.mcf-pa-card p {
  font-size: 15px;
  color: var(--mcf-warm-grey);
  line-height: 1.6;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcf-pa-card-meta {
  font-size: 13px;
  color: var(--mcf-warm-grey);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(107, 99, 88, 0.15);
  flex-wrap: wrap;
}
.mcf-pa-card-meta-sep { opacity: 0.5; }

/* "Read case study" affordance at the bottom of each card. The whole
   card remains the anchor — this is a visual CTA only. */
.mcf-pa-read-more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--mcf-gold);
  transition: color 0.2s, transform 0.2s;
}
.mcf-pa-card:hover .mcf-pa-read-more,
.mcf-pa-featured-card:hover .mcf-pa-read-more {
  color: var(--mcf-green);
  transform: translateX(3px);
}
.mcf-pa-read-more--featured {
  margin-top: 24px;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
  .mcf-pa-featured-card { grid-template-columns: 1fr; }
  .mcf-pa-featured-card-img { aspect-ratio: 21/9; }
  .mcf-pa-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-pa-header-stats { gap: 28px; }
}
@media (max-width: 640px) {
  .mcf-pa-header-stats { flex-wrap: wrap; gap: 20px; }
  .mcf-pa-header-stat-number { font-size: 26px; }
  .mcf-pa-featured-card h2 { font-size: 22px; }
  .mcf-pa-featured-card p { font-size: 14px; }
  .mcf-pa-featured-card-body { padding: 24px; }
  .mcf-pa-featured-card-details { gap: 12px; }
  .mcf-pa-grid { grid-template-columns: 1fr; gap: 20px; }
  .mcf-pa-card-body { padding: 20px; }
  .mcf-pa-card h3 { font-size: 18px; }
  .mcf-pa-card p { font-size: 14px; }
  .mcf-pa-section-top h2 { font-size: 24px; }
}


/* ============================================
   SINGLE CAPABILITY — single-capability.php
   Editorial "reference" aesthetic: dark green hero with no photo,
   3-col article layout (Quick Facts sticky | prose | TOC sticky),
   inline cream spec card, italic highlight, "How we apply this"
   green section, related-services grid, FAQ reuse, soft CTA.
   All rules namespaced .mcf-cap-*.
   ============================================ */

/* --------- HERO --------- */
/* Uses the same SVG blueprint-pattern background as the industry
   pattern-fallback hero, with a light green gradient overlay so the
   reference header has depth without needing a photo. */
.mcf-cap-hero {
  background-color: var(--mcf-green);
  background-image: url('assets/hero-pattern.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--mcf-white);
  padding: clamp(64px, 7vw, 96px) var(--mcf-pad);
  position: relative;
  overflow: hidden;
}
/* Soft left-side green overlay to guarantee H1/lede legibility over
   the pattern, plus a warm gold glow in the top-right for depth. */
.mcf-cap-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(212, 168, 67, 0.10), transparent 55%),
    linear-gradient(
      to right,
      rgba(28, 61, 47, 0.55) 0%,
      rgba(28, 61, 47, 0.2) 55%,
      rgba(28, 61, 47, 0) 100%
    );
  pointer-events: none;
  z-index: 0;
}
.mcf-cap-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.mcf-cap-hero-label-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(212, 168, 67, 0.3);
  /* Items sit on the left by default; the reviewed date appears next
     to the optional eyebrow rather than pushed to the far right. */
  justify-content: flex-start;
}
.mcf-cap-hero-eyebrow {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mcf-gold);
}
.mcf-cap-hero-ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mcf-sans);
  font-size: 12px;
  color: rgba(253, 252, 250, 0.55);
  letter-spacing: 0.5px;
}
.mcf-cap-hero-ref-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mcf-gold);
  box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.5);
  animation: mcf-cap-dot-pulse 2.4s ease-out infinite;
}
@keyframes mcf-cap-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(212, 168, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0); }
}
.mcf-cap-hero-h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(42px, 6vw, 80px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.mcf-cap-hero-h1 em {
  font-style: italic;
  color: var(--mcf-gold-light);
}
.mcf-cap-hero-lede {
  font-family: var(--mcf-sans);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: rgba(253, 252, 250, 0.8);
  max-width: 720px;
  margin: 0 0 40px;
}
.mcf-cap-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(212, 168, 67, 0.25);
  border-bottom: 1px solid rgba(212, 168, 67, 0.25);
  margin-bottom: 40px;
}
.mcf-cap-hero-meta[data-count="1"] { grid-template-columns: 1fr; }
.mcf-cap-hero-meta[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.mcf-cap-hero-meta[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mcf-cap-hero-meta-cell {
  padding: 20px 24px 20px 0;
  border-right: 1px solid rgba(212, 168, 67, 0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mcf-cap-hero-meta-cell:nth-child(n+2) { padding-left: 24px; }
.mcf-cap-hero-meta-cell:last-child { border-right: none; }
.mcf-cap-hero-meta-cell strong {
  font-family: var(--mcf-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
}
.mcf-cap-hero-meta-cell span {
  font-family: var(--mcf-serif);
  font-size: 16px;
  color: rgba(253, 252, 250, 0.88);
  line-height: 1.4;
}
.mcf-cap-hero-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* Capability buttons — more restrained than the service hero's
   filled gold CTA. Ghost (outlined) + text-arrow secondary. */
.mcf-template .mcf-cap-btn {
  font-family: var(--mcf-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
}
.mcf-template .mcf-cap-btn--ghost {
  color: var(--mcf-white);
  border: 1px solid rgba(253, 252, 250, 0.4);
  padding: 14px 28px;
  border-radius: 2px;
  background: transparent;
}
.mcf-template .mcf-cap-btn--ghost:hover,
.mcf-template .mcf-cap-btn--ghost:focus-visible {
  background: var(--mcf-gold);
  border-color: var(--mcf-gold);
  color: var(--mcf-green);
  outline: none;
}
.mcf-template .mcf-cap-btn--text {
  color: var(--mcf-gold);
  padding: 14px 0;
  border-bottom: 1px solid transparent;
}
.mcf-template .mcf-cap-btn--text:hover,
.mcf-template .mcf-cap-btn--text:focus-visible {
  color: var(--mcf-gold-light);
  border-bottom-color: var(--mcf-gold-light);
  outline: none;
}
.mcf-template .mcf-cap-btn--fill {
  background: var(--mcf-gold);
  color: var(--mcf-green);
  padding: 16px 32px;
  border-radius: 2px;
}
.mcf-template .mcf-cap-btn--fill:hover,
.mcf-template .mcf-cap-btn--fill:focus-visible {
  background: var(--mcf-gold-light);
  color: var(--mcf-green);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(212, 168, 67, 0.25);
  outline: none;
}

/* --------- ARTICLE: 3-col grid --------- */
.mcf-cap-article {
  padding: clamp(56px, 7vw, 96px) var(--mcf-pad);
  display: grid;
  /* Same full-width approach as the other templates — no hard cap on
     the container, just pad-to-pad. The prose column takes the lion's
     share with flanking facts + TOC sidebars sized to their contents. */
  grid-template-columns: 280px minmax(0, 1fr) 240px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* --------- LEFT: Quick Facts sticky sidebar ---------
   Sticky pins the card below the fixed nav as the reader scrolls.
   max-height + overflow-y: auto keeps the full card reachable even
   when it's taller than the available viewport — readers scroll
   inside the card to reach the last facts. Prevents the old
   clipping-off-the-bottom problem on laptop-height viewports. */
.mcf-cap-facts {
  background: var(--mcf-cream);
  border-radius: 4px;
  border-top: 2px solid var(--mcf-gold);
  padding: 28px 26px;
  position: sticky;
  top: 96px;
  align-self: start;
  font-family: var(--mcf-sans);
  max-height: calc(100vh - 132px); /* nav 72 + sticky top 112 - small buffer */
  overflow-y: auto;
  /* Branded scrollbar: McFadden gold thumb, brightens to gold-light
     on hover. Matches every other accent on the page (eyebrow labels,
     links, section markers, dots). Arrows explicitly hidden. Firefox
     uses the two-token scrollbar-color, WebKit the pseudo-elements. */
  scrollbar-width: thin;
  scrollbar-color: var(--mcf-gold) rgba(245, 240, 232, 0.6);
}
.mcf-cap-facts::-webkit-scrollbar { width: 8px; }
.mcf-cap-facts::-webkit-scrollbar-track {
  background: rgba(245, 240, 232, 0.6); /* cream at 60% */
  border-radius: 4px;
}
.mcf-cap-facts::-webkit-scrollbar-thumb {
  background: var(--mcf-gold);
  border-radius: 4px;
  transition: background 0.2s;
}
.mcf-cap-facts::-webkit-scrollbar-thumb:hover {
  background: var(--mcf-gold-light);
}
/* Hide the up/down scrollbar buttons on browsers that still render
   them (some Windows themes). Keeps the thumb-only aesthetic. */
.mcf-cap-facts::-webkit-scrollbar-button { display: none; }
/* Admin-bar adds 32px to the nav offset. */
.admin-bar .mcf-cap-facts { max-height: calc(100vh - 164px); }
/* Stack title on top, note directly below as a small subtitle.
   Previously they were side-by-side via flex with align-items: baseline,
   which looked broken when either piece wrapped (which happens in this
   narrow 280px column). Vertical stack is cleaner and matches the
   eyebrow/label pattern used elsewhere in the theme. */
.mcf-cap-facts-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(107, 99, 88, 0.18);
}
.mcf-cap-facts-title {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--mcf-charcoal);
  margin: 0;
  line-height: 1.1;
}
.mcf-cap-facts-note {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mcf-warm-grey);
}
.mcf-cap-facts-list {
  margin: 0;
  padding: 0;
}
.mcf-cap-fact {
  padding: 14px 0;
  border-bottom: 1px solid rgba(107, 99, 88, 0.12);
}
.mcf-cap-fact:last-child { border-bottom: none; }
.mcf-cap-fact dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mcf-warm-grey);
  margin-bottom: 4px;
}
.mcf-cap-fact dd {
  font-size: 14px;
  color: var(--mcf-charcoal);
  line-height: 1.5;
  margin: 0;
}
.mcf-cap-fact dd strong {
  color: var(--mcf-green);
  font-weight: 700;
}
.mcf-cap-facts-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(107, 99, 88, 0.18);
}
.mcf-template .mcf-cap-facts-footer a {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--mcf-green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s, transform 0.2s;
}
.mcf-template .mcf-cap-facts-footer a:hover {
  color: var(--mcf-gold);
  transform: translateX(2px);
}

/* --------- CENTER: Article body / prose --------- */
.mcf-cap-article-body {
  min-width: 0; /* allow grid child to shrink below content width */
}
.mcf-cap-prose {
  font-family: var(--mcf-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--mcf-text);
}
.mcf-cap-prose > * + * { margin-top: 1.2em; }
.mcf-cap-prose h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.6em;
  position: relative;
  padding-left: 0;
}
.mcf-cap-prose h2:first-child { margin-top: 0; }
.mcf-cap-prose h3 {
  font-family: var(--mcf-serif);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.25;
  margin: 1.8em 0 0.5em;
}
.mcf-cap-prose p,
.mcf-cap-prose ul,
.mcf-cap-prose ol {
  margin: 0 0 1.2em;
  line-height: 1.75;
}
.mcf-cap-prose ul,
.mcf-cap-prose ol {
  padding-left: 24px;
}
.mcf-cap-prose li { margin-bottom: 0.6em; }
.mcf-cap-prose li::marker { color: var(--mcf-gold); }
.mcf-cap-prose strong {
  color: var(--mcf-charcoal);
  font-weight: 700;
}
.mcf-template .mcf-cap-prose a {
  color: var(--mcf-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.mcf-template .mcf-cap-prose a:hover,
.mcf-template .mcf-cap-prose a:focus-visible {
  color: var(--mcf-gold);
}
/* Gutenberg Quote blocks inside prose render as "terminology
   callouts" — soft cream panel with gold-left edge. Matches the
   insight article callout. */
.mcf-cap-prose blockquote,
.mcf-cap-prose .wp-block-quote {
  background: var(--mcf-cream);
  border-left: 3px solid var(--mcf-gold);
  padding: 24px 28px;
  margin: 2em 0;
  border-radius: 0 4px 4px 0;
}
.mcf-cap-prose blockquote p {
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-style: normal;
  color: var(--mcf-charcoal);
  line-height: 1.65;
  margin: 0 0 0.6em;
}
.mcf-cap-prose blockquote p:last-child { margin-bottom: 0; }
.mcf-cap-prose blockquote cite {
  display: block;
  font-family: var(--mcf-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 8px;
}

/* --------- Spec Summary block (inline cream card via [mcf_spec]) --------- */
.mcf-cap-spec {
  background: var(--mcf-cream);
  border-left: 3px solid var(--mcf-gold);
  padding: 28px 32px;
  border-radius: 0 4px 4px 0;
  margin: 2em 0;
}
/* Prose is flow-content, so the spec block needs to behave like a
   block-level paragraph in the vertical rhythm. */
.mcf-cap-prose .mcf-cap-spec { display: block; }
.mcf-cap-spec-title {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 20px;
}
.mcf-cap-spec dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px 20px;
  margin: 0;
}
.mcf-cap-spec dt {
  font-family: var(--mcf-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--mcf-green);
  line-height: 1.4;
  margin: 0;
}
.mcf-cap-spec dd {
  font-family: var(--mcf-sans);
  font-size: 14px;
  color: var(--mcf-charcoal);
  line-height: 1.55;
  margin: 0;
}

/* --------- Highlight callout --------- */
.mcf-cap-highlight {
  font-family: var(--mcf-serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  font-style: italic;
  color: var(--mcf-charcoal);
  line-height: 1.35;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--mcf-gold);
  margin: 48px 0;
}
.mcf-cap-highlight strong {
  font-style: normal;
  color: var(--mcf-green);
  font-weight: 700;
}

/* --------- Data table ([mcf_table]) ---------
   Multi-column tabular block for standards tables, spec comparisons,
   and classification grids. Different from [mcf_spec] (which is a
   2-col dl-based key/value card). Caption sits above the table in
   gold uppercase, matching the rest of the editorial labelling. */
.mcf-cap-table-wrap {
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Pure-CSS scroll-shadow (Lea Verou pattern):
     Four layered backgrounds on the scrollable container:
       1 + 2. Cover gradients (white → transparent) at each edge,
              `background-attachment: local` so they scroll WITH
              the content.
       3 + 4. Shadow gradients (green-at-opacity → transparent) at
              each edge, `background-attachment: scroll` so they
              stay fixed relative to the viewport.
     When the content is at scroll=0, the left cover sits over the
     left shadow (hiding it), while the right shadow is visible
     because the right cover is scrolled off to the right. As you
     scroll right, the left cover moves off, revealing the left
     shadow; the right cover moves into view, hiding the right
     shadow. Result: the fade only appears on the edge where there's
     more content to scroll toward. */
  background-color: var(--mcf-white);
  background-image:
    linear-gradient(to right, var(--mcf-white) 30%, rgba(253, 252, 250, 0)),
    linear-gradient(to left,  var(--mcf-white) 30%, rgba(253, 252, 250, 0)),
    radial-gradient(farthest-side at 0% 50%, rgba(28, 61, 47, 0.2), rgba(28, 61, 47, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(28, 61, 47, 0.2), rgba(28, 61, 47, 0));
  background-position: left center, right center, left center, right center;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* Real <h3> element — explicit margin reset so browser default heading
   spacing doesn't fight the table. Styling matches the editorial h3
   used in the prose column (serif) but sized down a touch to sit
   well above tabular data. */
.mcf-cap-table-caption {
  font-family: var(--mcf-serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mcf-green);
  line-height: 1.25;
  margin: 0 0 14px;
}
.mcf-cap-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mcf-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mcf-text);
  /* Transparent so the wrapper's scroll-shadow layers are visible at
     the edges when content overflows. Header + zebra cell bgs stay
     because they're set on thead / tbody td directly. */
  background: transparent;
  border: 1px solid rgba(107, 99, 88, 0.15);
}
.mcf-cap-table thead {
  background: var(--mcf-green);
}
.mcf-cap-table thead th {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mcf-white);
  text-align: left;
  padding: 14px 16px;
  line-height: 1.3;
  border-right: 1px solid rgba(253, 252, 250, 0.15);
}
.mcf-cap-table thead th:last-child { border-right: none; }
.mcf-cap-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid rgba(107, 99, 88, 0.12);
  border-right: 1px solid rgba(107, 99, 88, 0.08);
  vertical-align: top;
}
.mcf-cap-table tbody td:last-child { border-right: none; }
.mcf-cap-table tbody tr:nth-child(even) td {
  background: rgba(245, 240, 232, 0.4); /* very light cream zebra */
}
.mcf-cap-table tbody td strong {
  color: var(--mcf-green);
  font-weight: 700;
}
.mcf-template .mcf-cap-table a {
  color: var(--mcf-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.mcf-template .mcf-cap-table a:hover {
  color: var(--mcf-gold);
}

/* --------- Inline callout ([mcf_callout]) --------- */
/* Cream-panel "terminology note" / disambiguation callout. Can
   contain a [mcf_compare] 2-column block for side-by-side contrasts.
   Visually distinct from [mcf_spec] via the darker cream tone and
   top-heavy label + title layout. */
.mcf-cap-callout {
  background: var(--mcf-cream);
  border-left: 3px solid var(--mcf-gold);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 0 4px 4px 0;
  margin: 2em 0;
}
.mcf-cap-callout-label {
  display: inline-block;
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 14px;
}
.mcf-cap-callout-title {
  font-family: var(--mcf-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.25;
  margin: 0 0 16px;
}
.mcf-cap-callout-body {
  font-family: var(--mcf-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--mcf-text);
}
.mcf-cap-callout-body > *:first-child { margin-top: 0; }
.mcf-cap-callout-body > *:last-child { margin-bottom: 0; }

/* --------- 2-column compare ([mcf_compare] / [mcf_col]) --------- */
.mcf-cap-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(107, 99, 88, 0.2);
}
.mcf-cap-col h4 {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mcf-green);
  margin: 0 0 8px;
}
.mcf-cap-col p {
  font-family: var(--mcf-sans);
  font-size: 14px;
  color: var(--mcf-text);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 640px) {
  .mcf-cap-compare { grid-template-columns: 1fr; gap: 20px; }
}

/* --------- Delivery section ("How McFadden applies this") --------- */
.mcf-cap-delivery {
  background: var(--mcf-green);
  color: var(--mcf-white);
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 48px);
  margin: 56px 0 0;
  border-radius: 4px;
  position: relative;
}
.mcf-cap-delivery::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--mcf-gold);
}
.mcf-cap-delivery-pretitle {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 20px;
}
.mcf-cap-delivery-h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.15;
  margin: 0 0 20px;
}
.mcf-cap-delivery-body {
  font-size: 16px;
  color: rgba(253, 252, 250, 0.82);
  line-height: 1.7;
  margin: 0 0 32px;
}
.mcf-cap-delivery-cols {
  display: grid;
  /* Auto-fit: up to 4 cols on wide screens, each col at least ~200px
     wide. Grid wraps naturally on narrower widths (e.g. 4 cols on
     desktop → 2×2 on tablet → 1-col on phone). data-count also hard-
     overrides for 1 / 2 / 3 / 4 specifically so editors always get
     an even split rather than auto-fit's uneven last row. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(253, 252, 250, 0.15);
}
.mcf-cap-delivery-cols[data-count="1"] { grid-template-columns: 1fr; }
.mcf-cap-delivery-cols[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.mcf-cap-delivery-cols[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mcf-cap-delivery-cols[data-count="4"] { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.mcf-cap-delivery-col h4 {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin: 0 0 10px;
}
.mcf-cap-delivery-col-body,
.mcf-cap-delivery-col-body p {
  font-size: 14px;
  color: rgba(253, 252, 250, 0.8);
  line-height: 1.65;
}
.mcf-cap-delivery-col-body p { margin: 0 0 12px; }
.mcf-cap-delivery-col-body p:last-child { margin-bottom: 0; }
.mcf-cap-delivery-col-body strong {
  color: var(--mcf-white);
  font-weight: 700;
}
.mcf-cap-delivery-col-body ul,
.mcf-cap-delivery-col-body ol {
  margin: 0 0 12px 18px;
  padding: 0;
}
.mcf-cap-delivery-col-body li {
  font-size: 14px;
  color: rgba(253, 252, 250, 0.8);
  line-height: 1.6;
  margin-bottom: 4px;
}
.mcf-cap-delivery-col-body li::marker { color: var(--mcf-gold); }
.mcf-template .mcf-cap-delivery-col-body a {
  color: var(--mcf-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.mcf-template .mcf-cap-delivery-col-body a:hover {
  color: var(--mcf-gold-light);
}

/* --------- RIGHT: TOC sticky sidebar --------- */
.mcf-cap-toc {
  position: sticky;
  /* Fixed nav is 72px; the admin-bar adds another 32px on top. Giving
     enough breathing room below so the "ON THIS PAGE" label isn't
     clipped behind the nav. */
  top: 112px;
  align-self: start;
  font-family: var(--mcf-sans);
}
.admin-bar .mcf-cap-toc { top: 136px; }
/* Same treatment for the Quick Facts sticky sidebar on the left. */
.mcf-cap-facts { top: 112px; }
.admin-bar .mcf-cap-facts { top: 136px; }
.mcf-cap-toc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-warm-grey);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(107, 99, 88, 0.2);
}
.mcf-cap-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcf-cap-toc-list li { margin: 0; }
.mcf-template .mcf-cap-toc-list a {
  display: block;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mcf-warm-grey);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: color 0.2s, border-color 0.2s;
}
.mcf-template .mcf-cap-toc-list a:hover,
.mcf-template .mcf-cap-toc-list a:focus-visible {
  color: var(--mcf-charcoal);
}
.mcf-template .mcf-cap-toc-list a.is-active {
  color: var(--mcf-green);
  border-left-color: var(--mcf-gold);
  font-weight: 600;
}
/* H3 sub-items in the TOC: indent and prepend a small gold dot via
   ::before so we don't need an em-dash prefix in the JS-built text. */
.mcf-cap-toc-list li.mcf-cap-toc-sub a {
  padding-left: 28px;
  margin-left: -12px;
  font-size: 12px;
  color: rgba(107, 99, 88, 0.85);
  position: relative;
}
.mcf-cap-toc-list li.mcf-cap-toc-sub a::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mcf-gold);
  transform: translateY(-50%);
  opacity: 0.6;
}
.mcf-cap-toc-list li.mcf-cap-toc-sub a:hover::before,
.mcf-cap-toc-list li.mcf-cap-toc-sub a.is-active::before {
  opacity: 1;
}

/* --------- RELATED services/industries grid --------- */
.mcf-cap-related {
  background: var(--mcf-cream);
  padding: clamp(64px, 8vw, 112px) var(--mcf-pad);
}
.mcf-cap-related-inner {
  width: 100%;
}
.mcf-cap-related-head {
  margin-bottom: 48px;
  max-width: 720px;
}
.mcf-cap-related-pretitle {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 14px;
}
.mcf-cap-related-title {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.mcf-cap-related-intro {
  font-family: var(--mcf-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mcf-warm-grey);
  margin: 0;
}
.mcf-cap-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.mcf-cap-related-card {
  background: var(--mcf-white);
  border: 1px solid rgba(107, 99, 88, 0.1);
  padding: 28px 28px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
}
.mcf-cap-related-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mcf-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.mcf-cap-related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 168, 67, 0.4);
  box-shadow: 0 16px 40px rgba(42, 38, 34, 0.08);
}
.mcf-cap-related-card:hover::before {
  transform: scaleX(1);
}
.mcf-cap-related-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mcf-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  padding: 5px 12px;
  background: rgba(212, 168, 67, 0.1);
  border-radius: 2px;
  margin-bottom: 20px;
}
.mcf-cap-related-card h3 {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.25;
  margin: 0 0 12px;
  transition: color 0.2s;
}
.mcf-cap-related-card:hover h3 { color: var(--mcf-green); }
.mcf-cap-related-card p {
  font-family: var(--mcf-sans);
  font-size: 14px;
  color: var(--mcf-warm-grey);
  line-height: 1.6;
  margin: 0 0 20px;
}
.mcf-cap-related-card-link {
  margin-top: auto;
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--mcf-gold);
  transition: color 0.2s, transform 0.2s;
}
.mcf-cap-related-card:hover .mcf-cap-related-card-link {
  color: var(--mcf-green);
  transform: translateX(2px);
}

/* --------- Soft CTA (no form) --------- */
.mcf-cap-cta {
  background: var(--mcf-green);
  color: var(--mcf-white);
  padding: clamp(56px, 7vw, 96px) var(--mcf-pad);
  position: relative;
  overflow: hidden;
}
.mcf-cap-cta::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(212, 168, 67, 0.08), transparent 60%);
  pointer-events: none;
}
.mcf-cap-cta-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* Explicit text-align: center — Elementor's Theme Style was winning
   on specificity and leaving the paragraph left-aligned even though
   the .mcf-cap-cta-inner parent is text-align: center. */
.mcf-template .mcf-cap-cta-body {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.mcf-cap-cta-actions { justify-content: center; }
.mcf-cap-cta-label {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 16px;
}
.mcf-cap-cta-title {
  font-family: var(--mcf-serif);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.mcf-cap-cta-title em {
  font-style: italic;
  color: var(--mcf-gold-light);
}
.mcf-cap-cta-body {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(253, 252, 250, 0.75);
  margin: 0 0 32px;
  max-width: 580px;
}
.mcf-cap-cta-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.mcf-template .mcf-cap-cta-phone {
  font-family: var(--mcf-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--mcf-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s;
}
.mcf-template .mcf-cap-cta-phone:hover,
.mcf-template .mcf-cap-cta-phone:focus-visible {
  color: var(--mcf-gold);
  outline: none;
}
.mcf-template .mcf-cap-cta-phone span {
  color: var(--mcf-gold);
  font-size: 20px;
}

/* --------- Responsive --------- */
@media (max-width: 1180px) {
  .mcf-cap-article {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
  }
  /* Hide the right-hand TOC on tablet; left Quick Facts stays. */
  .mcf-cap-toc { display: none; }
}
@media (max-width: 1024px) {
  .mcf-cap-hero { padding-top: 56px; }
  .mcf-cap-hero-meta { grid-template-columns: repeat(2, 1fr); }
  .mcf-cap-hero-meta-cell:nth-child(even) { border-right: none; }
  .mcf-cap-hero-meta-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(212, 168, 67, 0.15); }
  .mcf-cap-article {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Quick Facts loses sticky on stacked layout; rendered below prose. */
  .mcf-cap-facts {
    position: static;
    order: 2;
  }
  .mcf-cap-article-body { order: 1; }
  .mcf-cap-delivery { max-width: 100%; }
  /* 4-col delivery grid wraps to 2×2 on tablet for readability. */
  .mcf-cap-delivery-cols[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mcf-cap-hero { padding-top: 48px; padding-bottom: 48px; }
  .mcf-cap-hero-label-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mcf-cap-hero-ref { margin-left: 0; }
  .mcf-cap-hero-meta { grid-template-columns: 1fr; }
  .mcf-cap-hero-meta-cell {
    border-right: none;
    border-bottom: 1px solid rgba(212, 168, 67, 0.15);
    padding-left: 0 !important;
  }
  .mcf-cap-hero-meta-cell:last-child { border-bottom: none; }
  .mcf-cap-hero-actions { flex-direction: column; align-items: stretch; }
  .mcf-template .mcf-cap-btn--ghost { text-align: center; }
  .mcf-cap-prose h2 { margin-top: 1.8em; }
  .mcf-cap-spec dl { grid-template-columns: 1fr; gap: 4px 0; }
  .mcf-cap-spec dt { margin-top: 14px; }
  .mcf-cap-spec dt:first-child { margin-top: 0; }

  /* --------- Data tables: stacked cards on phone ---------
     Horizontal scroll fails on ≤640px viewports when the table has
     4+ columns with prose cells (cells crunch to letter-width). Hide
     the header row, unwrap each <tr> into a block-level card, and
     show the column label before every cell value via data-label.
     Editor writes the table normally — mobile transform is pure CSS. */
  .mcf-cap-table-wrap {
    background: none;
    overflow: visible;
    padding: 0;
  }
  .mcf-cap-table {
    border: none;
    display: block;
  }
  .mcf-cap-table thead { display: none; }
  .mcf-cap-table tbody,
  .mcf-cap-table tr,
  .mcf-cap-table td {
    display: block;
    width: 100%;
  }
  .mcf-cap-table tr {
    background: var(--mcf-white);
    border: 1px solid rgba(107, 99, 88, 0.15);
    border-radius: 4px;
    padding: 8px 16px 12px;
    margin-bottom: 12px;
  }
  /* Neutralise zebra-striping on mobile — each row is its own card */
  .mcf-cap-table tbody tr:nth-child(even) td,
  .mcf-cap-table tbody tr:nth-child(odd) td {
    background: transparent;
  }
  .mcf-cap-table td {
    padding: 10px 0;
    border: none;
    border-bottom: 1px dashed rgba(107, 99, 88, 0.1);
    font-size: 15px;
    line-height: 1.5;
  }
  .mcf-cap-table td:last-child { border-bottom: none; }
  .mcf-cap-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mcf-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mcf-gold);
    margin-bottom: 4px;
  }
  .mcf-cap-table td:empty { display: none; }
  /* Match the attribute-selector specificity of the data-count rules
     above so the 1-col stack actually wins at phone widths. */
  .mcf-cap-delivery-cols,
  .mcf-cap-delivery-cols[data-count="2"],
  .mcf-cap-delivery-cols[data-count="3"],
  .mcf-cap-delivery-cols[data-count="4"] { grid-template-columns: 1fr; gap: 24px; }
  .mcf-cap-related-grid { grid-template-columns: 1fr; }
  /* Stack button + phone vertically; each sits at its natural width,
     centered in the column. Previously align-items: stretch made
     the button fill the full width with left-anchored text. */
  .mcf-cap-cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .mcf-template .mcf-cap-btn--fill { justify-content: center; }
}


/* ============================================
   INSIGHT (blog post) add-ons
   FAQ accordion renders inline inside the article column (below the
   body, before the reviewer credit). Service card renders AFTER the
   author bio as a final "call-to-service" beat.
   ============================================ */
/* FAQ sits inside the article column — no section-level padding or
   background, just a vertical rhythm break from the prose above. */
.mcf-article-content .mcf-ins-faq {
  margin: 40px 0 0;
  padding: 0;
  background: transparent;
}
.mcf-article-content .mcf-ins-faq .mcf-faq-top {
  padding: 0;
  margin-bottom: 20px;
}
.mcf-article-content .mcf-ins-faq .mcf-faq-top h2 {
  margin: 0;
}

/* "More about this service" card — green panel with optional image,
   body text, and gold CTA link. Rendered AFTER the FAQ (when both are
   present) as the final "call-to-service" beat of the article. */
/* Service card sits in its own cream band with clear vertical
   separation from the author bio above (which has a white bg + 72px
   bottom padding as the breathing room). */
.mcf-ins-service {
  padding: clamp(40px, 5vw, 72px) var(--mcf-pad);
  background: var(--mcf-cream);
  border-top: 1px solid rgba(107, 99, 88, 0.1);
}
.mcf-ins-service-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  background: var(--mcf-green);
  border-radius: 6px;
  overflow: hidden;
  color: var(--mcf-white);
}
.mcf-ins-service--has-image .mcf-ins-service-inner {
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
}
.mcf-ins-service-img {
  min-height: 100%;
  background: var(--mcf-green);
}
.mcf-ins-service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 260px;
}
.mcf-ins-service-body {
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mcf-ins-service-label {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 12px;
}
.mcf-ins-service-title {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.2;
  margin: 0 0 16px;
}
.mcf-ins-service-text {
  font-family: var(--mcf-sans);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(253, 252, 250, 0.82);
  margin-bottom: 24px;
}
.mcf-ins-service-text p { margin: 0 0 12px; }
.mcf-ins-service-text p:last-child { margin-bottom: 0; }
.mcf-ins-service-text strong { color: var(--mcf-white); font-weight: 700; }
.mcf-template .mcf-ins-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--mcf-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--mcf-green);
  background: var(--mcf-gold);
  padding: 14px 24px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.mcf-template .mcf-ins-service-cta:hover,
.mcf-template .mcf-ins-service-cta:focus-visible {
  background: var(--mcf-gold-light);
  color: var(--mcf-green);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 168, 67, 0.25);
  outline: none;
}

/* Mobile: stack image above body, drop image when space is very tight */
@media (max-width: 1024px) {
  .mcf-ins-service--has-image .mcf-ins-service-inner {
    grid-template-columns: 1fr;
  }
  .mcf-ins-service-img img { min-height: 220px; }
  /* Related articles: 4 cols → 2x2 on tablet */
  .mcf-related-articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mcf-ins-service-img { display: none; }
}

/* ============================================
   PLANT HIRE PAGES
   Hub + grab hire + mini digger hire. Reuses
   .mcf-hero, .mcf-stats-bar, .mcf-faq, .mcf-cta
   from the service template. Adds content
   blocks + equipment cards.
   ============================================ */
.mcf-plant-block {
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-plant-block--cream {
  background: var(--mcf-cream);
}
.mcf-plant-block--coverage {
  background: var(--mcf-green);
  color: var(--mcf-white);
}
/* All plant sections use the same 1280px content width as the
   hero so the vertical rhythm of the page reads consistent. */
.mcf-plant-block-inner {
  /* No max-width: matches the service / capability / insight
     templates which fill viewport minus --mcf-pad. */
}
.mcf-plant-block .mcf-label {
  display: inline-block;
  margin-bottom: 14px;
}
.mcf-plant-block--coverage .mcf-label {
  color: var(--mcf-gold);
}
.mcf-plant-block h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 28px 0;
}
.mcf-plant-block--coverage h2 {
  color: var(--mcf-white);
}
.mcf-plant-block-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mcf-warm-grey);
  margin: 0 0 18px 0;
}
.mcf-plant-block-body p:last-child { margin-bottom: 0; }
.mcf-plant-block-body strong { color: var(--mcf-charcoal); }
.mcf-plant-block-body ul {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mcf-warm-grey);
  padding-left: 20px;
  margin: 0 0 18px 0;
}
.mcf-plant-block-body li { margin-bottom: 8px; }
.mcf-plant-block--coverage .mcf-plant-block-body p,
.mcf-plant-block--coverage .mcf-plant-block-body ul { color: rgba(255,255,255,0.88); }
.mcf-plant-block--coverage .mcf-plant-block-body strong { color: var(--mcf-gold); }

/* ---- EQUIPMENT CARDS (hub page) ---- */
.mcf-plant-cards {
  padding: 0 var(--mcf-pad) var(--mcf-v-space);
}
.mcf-plant-cards-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.mcf-plant-card {
  display: flex;
  flex-direction: column;
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.mcf-plant-card:hover {
  border-color: var(--mcf-gold);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.mcf-plant-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mcf-cream);
}
.mcf-plant-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcf-plant-card-body {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mcf-plant-card h3 {
  font-family: var(--mcf-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 12px 0;
}
.mcf-plant-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mcf-warm-grey);
  margin: 0 0 20px 0;
  flex: 1;
}
.mcf-template .mcf-plant-card-link {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-top: auto;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .mcf-plant-cards-inner { grid-template-columns: 1fr; }
}

/* ============================================
   PLANT HIRE — PRODUCT-CATALOGUE CHILD PAGES
   Split hero + equipment grid + 4-card why
   strip + slim phone CTA band. Used on grab
   hire and mini digger hire pages only.
   ============================================ */

/* ---- Split hero: dark green, copy left + quote form right ---- */
.mcf-plant-hero {
  background: var(--mcf-green);
  color: var(--mcf-white);
  padding: clamp(64px, 8vw, 104px) var(--mcf-pad) clamp(64px, 8vw, 104px);
  position: relative;
  overflow: hidden;
}
/* Subtle glow behind the form card so the green doesn't feel flat */
.mcf-plant-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(ellipse at center, rgba(212, 168, 67, 0.18) 0%, rgba(28, 61, 47, 0) 70%);
  pointer-events: none;
}

/* Optional background image variant — used on the plant hire holding
   template where the hero needs imagery rather than flat green.
   Image sits behind the inner content with a dark green/gold overlay
   so the text + form remain WCAG-AA legible regardless of photo. */
.mcf-plant-hero--with-bg .mcf-plant-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.mcf-plant-hero--with-bg .mcf-plant-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcf-plant-hero--with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(28, 61, 47, 0.92) 0%, rgba(28, 61, 47, 0.72) 60%, rgba(28, 61, 47, 0.55) 100%);
  pointer-events: none;
}
.mcf-plant-hero--with-bg .mcf-plant-hero-inner { z-index: 2; }
.mcf-plant-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  z-index: 1;
}
.mcf-plant-hero-label {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--mcf-gold);
}
.mcf-plant-hero-copy h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--mcf-white);
  margin: 0 0 22px 0;
}
.mcf-plant-hero-copy h1 em {
  font-style: italic;
  color: var(--mcf-gold);
}
.mcf-plant-hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 32px 0;
  max-width: 560px;
}
.mcf-plant-hero-badges {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  max-width: 560px;
}
.mcf-plant-hero-badges li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mcf-white);
}
.mcf-plant-hero-badges svg { color: var(--mcf-gold); flex: 0 0 auto; }
.mcf-plant-hero-phone {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}
.mcf-template .mcf-plant-hero-phone a {
  color: var(--mcf-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: color 0.2s, border-color 0.2s;
}
.mcf-template .mcf-plant-hero-phone a:hover,
.mcf-template .mcf-plant-hero-phone a:focus-visible {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
}

/* Hero form card — white on the green hero */
.mcf-plant-hero-form-wrap {
  background: var(--mcf-white);
  border-radius: 8px;
  padding: 16px 20px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  border-top: 3px solid var(--mcf-gold);
}
.mcf-plant-hero-form h2 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 2px 0;
  line-height: 1.2;
}
.mcf-plant-hero-form-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--mcf-warm-grey);
  letter-spacing: 0.02em;
  margin: 0 0 14px 0;
}
/* Tight, light styling for the fields when they sit on a white
   card (default form styles assume dark green background). */
.mcf-plant-hero-form .mcf-field {
  margin-bottom: 8px;
}
.mcf-plant-hero-form .mcf-field:last-of-type {
  margin-bottom: 10px;
}
.mcf-plant-hero-form .mcf-field label {
  color: var(--mcf-charcoal);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
  opacity: 0.75;
}
.mcf-plant-hero-form .mcf-field input,
.mcf-plant-hero-form .mcf-field textarea,
.mcf-plant-hero-form .mcf-field select {
  background: var(--mcf-cream);
  border: 1px solid transparent;
  color: var(--mcf-charcoal);
  font-size: 14px;
  padding: 8px 11px;
  border-radius: 4px;
}
.mcf-plant-hero-form .mcf-field textarea {
  resize: vertical;
  min-height: 54px;
}
.mcf-plant-hero-form .mcf-field input::placeholder,
.mcf-plant-hero-form .mcf-field textarea::placeholder {
  color: rgba(42, 38, 34, 0.35);
}
.mcf-plant-hero-form .mcf-field input:focus,
.mcf-plant-hero-form .mcf-field textarea:focus,
.mcf-plant-hero-form .mcf-field select:focus {
  background: var(--mcf-white);
  border-color: var(--mcf-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
/* Native select styling — replace default chevron with a gold one */
.mcf-plant-hero-form .mcf-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23D4A843' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
/* Override the global dark-green option background — on the
   white hero card we want light options with charcoal text. */
.mcf-plant-hero-form .mcf-field select option {
  background: var(--mcf-white);
  color: var(--mcf-charcoal);
}
.mcf-plant-hero-form .mcf-field-row {
  gap: 8px;
  margin-bottom: 8px;
}
.mcf-plant-hero-form .mcf-field-row .mcf-field {
  margin-bottom: 0;
}
.mcf-plant-hero-form .mcf-btn-submit {
  width: 100%;
  margin-top: 4px;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---- Equipment card grid ---- */
.mcf-eq-grid {
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-eq-grid-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.mcf-eq-grid-head h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 14px 0;
}
.mcf-eq-grid-head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mcf-warm-grey);
  margin: 0;
}
.mcf-eq-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mcf-eq-card {
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.mcf-eq-card:hover {
  border-color: var(--mcf-gold);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.mcf-eq-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mcf-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mcf-eq-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 12px;
}
.mcf-eq-card-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--mcf-stone);
}
.mcf-eq-card-placeholder span {
  font-family: var(--mcf-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.mcf-eq-card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mcf-eq-card h3 {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 14px 0;
}
.mcf-eq-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mcf-eq-specs li {
  background: var(--mcf-cream);
  color: var(--mcf-charcoal);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 4px;
}
.mcf-template .mcf-eq-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: var(--mcf-green);
  color: var(--mcf-white);
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  margin-top: auto;
  transition: background 0.2s;
}
.mcf-template .mcf-eq-cta:hover {
  background: var(--mcf-gold);
  color: var(--mcf-white);
}

/* ---- Why-us 4-card strip ---- */
.mcf-whycards {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-whycards-inner {
  /* Fills viewport minus --mcf-pad like the rest of the site. */
}
.mcf-whycards-heading {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 40px 0;
  text-align: center;
}
.mcf-whycards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mcf-whycard {
  background: var(--mcf-white);
  border-radius: 8px;
  padding: 28px 24px 26px;
  border-top: 3px solid var(--mcf-gold);
}
.mcf-whycard-num {
  font-family: var(--mcf-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--mcf-gold);
  margin-bottom: 12px;
}
.mcf-whycard h3 {
  font-family: var(--mcf-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 10px 0;
  line-height: 1.25;
}
.mcf-whycard p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mcf-warm-grey);
  margin: 0;
}

/* ---- Slim phone CTA band (replaces full CTA form on hire pages) ---- */
.mcf-plant-ctaband {
  background: var(--mcf-green);
  color: var(--mcf-white);
  padding: clamp(36px, 4vw, 56px) var(--mcf-pad);
  /* Gold hairline separators top + bottom so the dark-green band
     doesn't blend into the dark-green footer or the preceding
     section. */
  border-top: 2px solid var(--mcf-gold);
  border-bottom: 2px solid var(--mcf-gold);
}
.mcf-plant-ctaband-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.mcf-plant-ctaband h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  color: var(--mcf-white);
  margin: 0 0 8px 0;
  line-height: 1.2;
}
.mcf-plant-ctaband p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.mcf-plant-ctaband-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .mcf-plant-hero-inner { grid-template-columns: 1fr; }
  .mcf-plant-hero-form-wrap { max-width: 560px; margin: 0 auto; width: 100%; }
  .mcf-eq-cards { grid-template-columns: repeat(2, 1fr); }
  .mcf-whycards-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-plant-ctaband-inner { grid-template-columns: 1fr; text-align: center; }
  .mcf-plant-ctaband-actions { justify-content: center; }
}
@media (max-width: 640px) {
  .mcf-eq-cards { grid-template-columns: 1fr; }
  .mcf-whycards-grid { grid-template-columns: 1fr; }
  .mcf-plant-hero-badges { grid-template-columns: 1fr; }
  .mcf-plant-hero-form-wrap { padding: 24px; }
}

/* ============================================
   SERVICE HERO — QUOTE FORM VARIANT
   On by default, off per service page via
   sp_hero_form. Copy on the left, quote form
   card on the right. The card reuses the plant
   hero form classes for its white-card field
   styling and for the AJAX success swap, which
   looks for .mcf-plant-hero-form-wrap. Lives
   down here so it follows the plant rules it
   overrides.
   ============================================ */
.mcf-hero--form {
  align-items: center;
}
.mcf-hero--form .mcf-hero-inner {
  /* The stats bar overlaps the hero's last 40px, so 96px leaves the
     card 56px clear of it. */
  padding-bottom: 96px;
  align-items: center;
}
/* min-width, not a bare rule: at 0,2,0 this would otherwise beat the
   single-column stack the base hero applies at 1024px and below. */
@media (min-width: 1025px) {
  .mcf-hero--form .mcf-hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: clamp(40px, 5vw, 80px);
  }
  /* The column keeps growing with the viewport; the card stops at a
     comfortable form width and sits against the right-hand margin. Just
     above 1024px the column, not the cap, is what limits it, so the
     heading is not squeezed into a sliver beside a full-size card. */
  .mcf-hero-form-wrap {
    width: 100%;
    max-width: 460px;
    justify-self: end;
  }
}
/* Smaller than the base hero h1 because the heading only has the left
   column. Editor <br>s are dropped: they are placed for the full-width
   hero and leave one-word lines in the narrower one. */
.mcf-hero--form h1 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.1;
  margin-bottom: 20px;
  text-wrap: balance;
}
.mcf-hero--form h1 br { display: none; }
.mcf-hero--form .mcf-hero-sub { margin-bottom: 28px; }

.mcf-hero-form-wrap {
  padding: 26px 28px 28px;
}
/* The form also carries .mcf-cta-form for the AJAX handler, which brings
   the bottom CTA's translucent panel styling with it. The card is the
   panel here. */
.mcf-hero-form-wrap .mcf-cta-form {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.mcf-hero-form-wrap .mcf-plant-hero-form h2 { font-size: 24px; }
.mcf-hero-form-wrap .mcf-plant-hero-form-sub {
  font-size: 13px;
  margin-bottom: 18px;
}
.mcf-hero-form-wrap .mcf-field label { font-size: 11px; }
.mcf-hero-form-wrap .mcf-field input,
.mcf-hero-form-wrap .mcf-field textarea {
  font-size: 15px;
  padding: 10px 12px;
}
.mcf-hero-form-wrap .mcf-plant-hero-form .mcf-btn-submit {
  margin-top: 6px;
  padding: 14px 20px;
  font-size: 15px;
  letter-spacing: 0.02em;
}
/* The success panel replaces the card's contents, so the card already
   supplies the white ground, gold top edge and shadow. */
.mcf-hero-form-wrap .mcf-form-success {
  padding: 12px 0;
  border-top: 0;
  box-shadow: none;
}

@media (max-width: 1024px) {
  .mcf-hero--form .mcf-hero-inner { gap: 32px; }
  /* Lines up with the copy above it rather than centring. */
  .mcf-hero-form-wrap { margin: 0; }
}
@media (max-width: 640px) {
  /* No stats bar overlap at this size, so no need to clear it. */
  .mcf-hero--form .mcf-hero-inner { padding-bottom: 40px; }
  .mcf-hero-form-wrap {
    max-width: none;
    padding: 22px 20px 24px;
  }
  /* iOS Safari zooms the page when a focused field is under 16px. */
  .mcf-hero-form-wrap .mcf-field input,
  .mcf-hero-form-wrap .mcf-field textarea { font-size: 16px; }
}

/* ============================================
   VACANCIES — ARCHIVE + SINGLE
   Card grid on /vacancies/, plus dark-green
   header + 2-col body/apply layout on each
   single vacancy.
   ============================================ */

/* ---- Archive: card grid ---- */
.mcf-vacancies {
  padding: clamp(48px, 6vw, 80px) var(--mcf-pad) var(--mcf-v-space);
}
.mcf-vacancies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.mcf-vac-card {
  display: flex;
  flex-direction: column;
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-top: 3px solid var(--mcf-gold);
  border-radius: 8px;
  padding: 26px 28px 24px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mcf-vac-card:hover {
  border-color: rgba(212, 168, 67, 0.5);
  box-shadow: 0 10px 30px rgba(28, 61, 47, 0.08);
  transform: translateY(-2px);
}
.mcf-vac-card-cat {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 10px;
}
.mcf-vac-card-title {
  font-family: var(--mcf-serif);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.25;
  margin: 0 0 14px 0;
}
.mcf-vac-card-meta {
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.mcf-vac-card-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mcf-warm-grey);
  line-height: 1.4;
}
.mcf-vac-card-meta svg {
  color: var(--mcf-gold);
  flex-shrink: 0;
}
.mcf-template .mcf-vac-card-link {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mcf-green);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--mcf-border);
}
.mcf-vac-card:hover .mcf-vac-card-link { color: var(--mcf-gold); }

.mcf-vacancies-empty {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 32px;
  background: var(--mcf-cream);
  border-radius: 8px;
}
.mcf-vacancies-empty h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 12px 0;
}
.mcf-vacancies-empty p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mcf-warm-grey);
  margin: 0 0 20px 0;
}

/* ---- Single vacancy: dark green header ---- */
.mcf-vac-header {
  background: var(--mcf-green);
  color: var(--mcf-white);
  padding: clamp(48px, 6vw, 80px) var(--mcf-pad);
}
.mcf-vac-header-inner {
  /* No max-width: lets the hero content stretch to viewport
     minus --mcf-pad on each side, matching service / capability
     / insight templates on wide monitors. */
}
.mcf-vac-header .mcf-label {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--mcf-gold);
}
.mcf-vac-header h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--mcf-white);
  margin: 0 0 28px 0;
  max-width: 880px;
}
.mcf-vac-header-meta {
  list-style: none;
  margin: 0 0 28px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 28px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 22px 0;
}
.mcf-vac-meta-label {
  display: block;
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 4px;
}
.mcf-vac-meta-value {
  display: block;
  font-family: var(--mcf-serif);
  font-size: 18px;
  color: var(--mcf-white);
  line-height: 1.3;
}
.mcf-vac-header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Single vacancy: 2-col body + apply form ---- */
.mcf-vac-main {
  padding: clamp(48px, 6vw, 80px) var(--mcf-pad);
}
.mcf-vac-main-inner {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
  /* No max-width: matches the hero, services, capabilities and
     insight templates which fill viewport minus --mcf-pad. */
}
.mcf-vac-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mcf-warm-grey);
}
.mcf-vac-body h2,
.mcf-vac-body h3 {
  font-family: var(--mcf-serif);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.2;
  margin: 32px 0 14px 0;
}
.mcf-vac-body h2 { font-size: clamp(22px, 2.2vw, 28px); }
.mcf-vac-body h3 { font-size: clamp(18px, 1.6vw, 22px); }
.mcf-vac-body h2:first-child,
.mcf-vac-body h3:first-child { margin-top: 0; }
.mcf-vac-body p {
  margin: 0 0 16px 0;
}
.mcf-vac-body ul,
.mcf-vac-body ol {
  padding-left: 22px;
  margin: 0 0 20px 0;
}
.mcf-vac-body li { margin-bottom: 6px; }
.mcf-vac-body strong { color: var(--mcf-charcoal); }
.mcf-template .mcf-vac-body a {
  color: var(--mcf-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mcf-template .mcf-vac-body a:hover { color: var(--mcf-gold); }
.mcf-vac-body-foot {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--mcf-cream);
  border-left: 3px solid var(--mcf-gold);
  border-radius: 4px;
  font-size: 14px;
}
.mcf-vac-body-foot p { margin: 0; }

/* Apply card (sticky on desktop). Top offset has to clear the
   72px fixed nav PLUS leave breathing room so the gold top trim
   doesn't tuck under the nav edge. Admin-bar adds 32px more. */
.mcf-vac-aside {
  position: sticky;
  top: 108px;
}
.admin-bar .mcf-vac-aside {
  top: 140px;
}
.mcf-vac-apply-card {
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-top: 3px solid var(--mcf-gold);
  border-radius: 8px;
  padding: 24px 26px 24px;
  box-shadow: 0 10px 30px rgba(28, 61, 47, 0.06);
}
.mcf-vac-apply-card h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 6px 0;
  line-height: 1.2;
}
.mcf-vac-apply-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mcf-warm-grey);
  margin: 0 0 16px 0;
}
.mcf-vac-apply-contacts {
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mcf-vac-apply-contacts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--mcf-cream);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.mcf-vac-apply-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.18);
  color: var(--mcf-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mcf-template .mcf-vac-apply-contacts a {
  color: var(--mcf-charcoal);
  text-decoration: none;
  word-break: break-word;
  border-bottom: 1px solid rgba(28, 61, 47, 0.15);
  transition: color 0.2s, border-color 0.2s;
}
.mcf-template .mcf-vac-apply-contacts a:hover {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
}
.mcf-vac-apply-meta {
  font-size: 12px;
  line-height: 1.55;
  color: var(--mcf-warm-grey);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--mcf-border);
}
.mcf-vac-apply-meta strong { color: var(--mcf-charcoal); }
/* Field overrides — global form styles assume dark green bg */
.mcf-vac-apply-form .mcf-field {
  margin-bottom: 10px;
}
.mcf-vac-apply-form .mcf-field label {
  color: var(--mcf-charcoal);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin-bottom: 4px;
}
.mcf-vac-apply-form .mcf-field input,
.mcf-vac-apply-form .mcf-field textarea {
  background: var(--mcf-cream);
  border: 1px solid transparent;
  color: var(--mcf-charcoal);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 4px;
}
.mcf-vac-apply-form .mcf-field input:focus,
.mcf-vac-apply-form .mcf-field textarea:focus {
  background: var(--mcf-white);
  border-color: var(--mcf-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
.mcf-vac-apply-form .mcf-field-row {
  gap: 10px;
  margin-bottom: 10px;
}
.mcf-vac-apply-form .mcf-btn-submit {
  width: 100%;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---- Related vacancies block ---- */
.mcf-vac-related {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-vac-related-top {
  max-width: 1280px;
  margin: 0 auto 32px;
  text-align: center;
}
.mcf-vac-related-top .mcf-label {
  display: inline-block;
  margin-bottom: 10px;
}
.mcf-vac-related-top h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0;
}
.mcf-vac-related .mcf-vacancies-grid {
  grid-template-columns: repeat(3, 1fr);
}
.mcf-vac-related-foot {
  text-align: center;
  margin-top: 32px;
}
/* Outline button override for the cream "More vacancies" block.
   The global .mcf-btn-outline assumes a dark hero background
   (white text + translucent border), which renders invisible
   on cream. Force green on light. */
.mcf-template .mcf-vac-related .mcf-btn-outline {
  color: var(--mcf-green);
  border-color: rgba(28, 61, 47, 0.3);
  background: transparent;
}
.mcf-template .mcf-vac-related .mcf-btn-outline:hover {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
  background: transparent;
}

/* When the breadcrumb is followed directly by the page header
   block (Insights, Projects, Vacancies archives), the page
   header's own margin-top: 72px gets ADDED to the crumb's
   bottom edge — leaving a white gap between the dark green
   crumb and the dark green header. Cancel the second offset. */
.mcf-crumbs + .mcf-page-header {
  margin-top: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .mcf-vacancies-grid { grid-template-columns: 1fr; }
  .mcf-vac-main-inner { grid-template-columns: 1fr; }
  .mcf-vac-aside { position: static; }
  .mcf-vac-related .mcf-vacancies-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-vac-header-meta { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
}
@media (max-width: 640px) {
  .mcf-vac-related .mcf-vacancies-grid { grid-template-columns: 1fr; }
  .mcf-vac-header-meta { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================
   CONTACT PAGE
   Hero + 4 contact cards + inline form (right),
   optional map, trust strip.
   ============================================ */
.mcf-contact-hero {
  background: var(--mcf-green);
  color: var(--mcf-white);
  padding: clamp(64px, 8vw, 104px) var(--mcf-pad) clamp(56px, 6vw, 80px);
  text-align: center;
}
.mcf-contact-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.mcf-contact-hero .mcf-label {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--mcf-gold);
}
.mcf-contact-hero h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--mcf-white);
  margin: 0 0 22px 0;
}
.mcf-contact-hero h1 em {
  font-style: italic;
  color: var(--mcf-gold);
}
.mcf-contact-hero p {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

/* Main block: details on the left, form on the right */
.mcf-contact-main {
  padding: clamp(56px, 7vw, 96px) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-contact-main-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* Form sits left (0.85fr — narrower), details grid sits right (1fr —
     wider, fits the 2x2 card layout). DOM order is form-first so mobile
     (collapses to 1fr single column) also leads with the form. */
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.mcf-contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* Force all rows to match the tallest card so the 2x2 grid
     always reads as even, regardless of per-card content length. */
  grid-auto-rows: 1fr;
}
.mcf-contact-card {
  position: relative;
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-top: 3px solid var(--mcf-gold);
  border-radius: 8px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mcf-contact-card:hover {
  border-color: rgba(212, 168, 67, 0.35);
  box-shadow: 0 8px 24px rgba(28, 61, 47, 0.06);
}
/* Emergency card keeps the white base so the grid rhythm stays
   consistent, but gets an accent ring + pinned "24/7" badge to
   signal urgency without breaking the visual pattern. */
.mcf-contact-card--emergency {
  border-top-width: 3px;
  border-top-color: #B94A3A; /* warm red for emergency */
}
.mcf-contact-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #B94A3A;
  color: var(--mcf-white);
  font-family: var(--mcf-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  border-radius: 3px;
  line-height: 1;
}
/* Icon: 44px gold-tinted circle with the icon inside, so each
   card has a clearer visual anchor than a naked SVG. */
.mcf-contact-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.14);
  color: var(--mcf-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.mcf-contact-card--emergency .mcf-contact-card-icon {
  background: rgba(185, 74, 58, 0.12);
  color: #B94A3A;
}
.mcf-contact-card h2 {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mcf-warm-grey);
  margin: 0 0 8px 0;
}
.mcf-contact-card-lead {
  font-family: var(--mcf-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  font-style: normal;
  line-height: 1.35;
  color: var(--mcf-charcoal);
  margin: 0 0 12px 0;
  word-break: break-word;
}
.mcf-template .mcf-contact-card-lead a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 61, 47, 0.15);
  transition: border-color 0.2s, color 0.2s;
}
.mcf-template .mcf-contact-card-lead a:hover {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
}
.mcf-contact-card-meta {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mcf-warm-grey);
  margin: 0;
  /* Pin meta to the bottom so cards with short content still
     align their meta line visually. */
  margin-top: auto;
  padding-top: 4px;
}

/* Form card on the right of the main block */
.mcf-contact-form-wrap {
  background: var(--mcf-white);
  border-radius: 8px;
  padding: 28px 28px 26px;
  border-top: 3px solid var(--mcf-gold);
  box-shadow: 0 10px 30px rgba(28, 61, 47, 0.06);
  position: sticky;
  top: 96px;
}
.mcf-contact-form h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.mcf-contact-form-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mcf-warm-grey);
  margin: 0 0 18px 0;
}
/* Light-field overrides (same logic as plant hero form — the
   global .mcf-cta-form styles assume a dark green bg) */
.mcf-contact-form .mcf-field label {
  color: var(--mcf-charcoal);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin-bottom: 4px;
}
.mcf-contact-form .mcf-field {
  margin-bottom: 10px;
}
.mcf-contact-form .mcf-field input,
.mcf-contact-form .mcf-field textarea,
.mcf-contact-form .mcf-field select {
  background: var(--mcf-cream);
  border: 1px solid transparent;
  color: var(--mcf-charcoal);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 4px;
}
.mcf-contact-form .mcf-field input:focus,
.mcf-contact-form .mcf-field textarea:focus,
.mcf-contact-form .mcf-field select:focus {
  background: var(--mcf-white);
  border-color: var(--mcf-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
.mcf-contact-form .mcf-field select option {
  background: var(--mcf-white);
  color: var(--mcf-charcoal);
}
.mcf-contact-form .mcf-field-row {
  gap: 10px;
  margin-bottom: 10px;
}
.mcf-contact-form .mcf-btn-submit {
  width: 100%;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* Optional map block */
.mcf-contact-map {
  padding: 0 var(--mcf-pad) clamp(56px, 7vw, 96px);
  background: var(--mcf-cream);
}
.mcf-contact-map-inner {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(28, 61, 47, 0.08);
}
.mcf-contact-map-inner iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* Accreditations trust strip */
.mcf-contact-trust {
  padding: clamp(48px, 5vw, 72px) var(--mcf-pad);
  background: var(--mcf-white);
  border-top: 1px solid var(--mcf-border);
}
.mcf-contact-trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.mcf-contact-trust .mcf-label {
  display: inline-block;
  margin-bottom: 12px;
}
.mcf-contact-trust h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 10px 0;
  line-height: 1.2;
}
.mcf-contact-trust p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mcf-warm-grey);
  margin: 0;
}
.mcf-contact-trust-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/* Global .mcf-btn-outline sets white text for dark hero
   contexts. Override inside the trust strip (white bg) so the
   "About McFadden" outline button is visible. */
.mcf-template .mcf-contact-trust .mcf-btn-outline {
  color: var(--mcf-green);
  border-color: rgba(28, 61, 47, 0.3);
  background: transparent;
}
.mcf-template .mcf-contact-trust .mcf-btn-outline:hover {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
  background: transparent;
}

/* Responsive */
@media (max-width: 1024px) {
  .mcf-contact-main-inner { grid-template-columns: 1fr; }
  .mcf-contact-form-wrap { position: static; }
  .mcf-contact-trust-inner { grid-template-columns: 1fr; text-align: center; }
  .mcf-contact-trust-actions { justify-content: center; }
}
@media (max-width: 640px) {
  .mcf-contact-details { grid-template-columns: 1fr; }
  .mcf-contact-form-wrap { padding: 22px 20px 20px; }
}

/* ============================================
   COOKIE CONSENT BANNER
   Bottom-right slide-in. Small, on-brand, two
   equal-weight buttons (Reject / Accept) per
   UK ICO guidance.
   ============================================ */
/* Backdrop overlay — dims the rest of the page and blocks pointer
   events so visitors must engage with the banner before they can
   interact with site content. Compliant with UK GDPR / ICO guidance
   because the banner offers an equally-prominent Reject all button
   (visitors can refuse as easily as accept). */
.mcf-consent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  z-index: 9998; /* one below the banner */
  animation: mcf-consent-backdrop-in 0.28s ease-out;
}
.mcf-consent-backdrop[hidden] { display: none; }
@keyframes mcf-consent-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mcf-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--mcf-green);
  color: var(--mcf-white);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
  border-top: 3px solid var(--mcf-gold);
  z-index: 9999;
  font-family: var(--mcf-sans);
  animation: mcf-consent-in 0.32s ease-out;
}
@keyframes mcf-consent-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.mcf-consent[hidden] { display: none; }
.mcf-consent-inner {
  padding: 20px var(--mcf-pad);
  max-width: 1400px;
  margin: 0 auto;
}
/* Default view: side-by-side copy + buttons. Customise view keeps
   its native stacked layout so the category toggles list reads
   vertically. */
.mcf-consent-inner[data-mcf-consent-view="default"] {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) {
  .mcf-consent-inner[data-mcf-consent-view="default"] {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px var(--mcf-pad);
  }
}
.mcf-consent-inner[hidden] { display: none; }
.mcf-consent-copy strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 6px;
  font-weight: 700;
}
.mcf-consent-copy p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.mcf-consent-copy a {
  color: var(--mcf-white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}
.mcf-consent-copy a:hover {
  color: var(--mcf-gold);
}
.mcf-consent-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
/* Three-button layout: Reject / Customise / Accept.
   On the full-width strip, Accept gets visual primacy via its solid
   fill (already styled by .mcf-consent-btn--accept). Reject and
   Customise stay as ghost (outlined) buttons — present and equally
   accessible per ICO guidance, but less visually dominant than the
   filled Accept CTA. */
@media (max-width: 900px) {
  .mcf-consent-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .mcf-consent-actions .mcf-consent-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .mcf-consent-actions { flex-direction: column-reverse; gap: 8px; }
  .mcf-consent-actions .mcf-consent-btn { width: 100%; }
}
/* Specificity deliberately pushed with .mcf-consent prefix so
   Elementor's .elementor-kit-N button rule (0,1,1) doesn't win
   and force oversized padding + uppercase sizing. Also resets
   several properties that Elementor's kit typically sets. */
.mcf-consent .mcf-consent-btn {
  flex: 1;
  display: inline-block;
  padding: 8px 10px;
  min-height: 0;
  height: auto;
  width: auto;
  font-family: var(--mcf-sans);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border: 1px solid transparent;
  box-shadow: none;
  white-space: nowrap;
}
.mcf-consent .mcf-consent-btn--ghost {
  background: transparent;
  color: var(--mcf-white);
  border-color: rgba(255, 255, 255, 0.3);
}
.mcf-consent .mcf-consent-btn--ghost:hover,
.mcf-consent .mcf-consent-btn--ghost:focus-visible {
  border-color: var(--mcf-gold);
  color: var(--mcf-gold);
  background: transparent;
}
.mcf-consent .mcf-consent-btn--accept {
  background: var(--mcf-gold);
  color: var(--mcf-green);
  border-color: var(--mcf-gold);
}
.mcf-consent .mcf-consent-btn--accept:hover,
.mcf-consent .mcf-consent-btn--accept:focus-visible {
  background: var(--mcf-white);
  border-color: var(--mcf-white);
  color: var(--mcf-green);
}
/* Small text-link "← Back" in the customise panel header */
.mcf-consent .mcf-consent-back {
  background: transparent;
  border: 0;
  padding: 0 0 8px 0;
  margin: 0;
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  box-shadow: none;
}
.mcf-consent .mcf-consent-back:hover { color: var(--mcf-gold); }

/* Subtle text-link "Reject all cookies" under the main buttons
   in the customise panel. Visible + clickable, not buried, but
   intentionally less shouty than the primary CTAs. */
.mcf-consent-reject-wrap {
  margin-top: 10px;
  text-align: center;
}
.mcf-consent .mcf-consent-reject {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin: 0;
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
}
.mcf-consent .mcf-consent-reject:hover,
.mcf-consent .mcf-consent-reject:focus-visible {
  color: var(--mcf-white);
  text-decoration-color: var(--mcf-gold);
}

/* ---- Customise panel: category toggles ---- */
.mcf-consent-cats {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mcf-consent-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mcf-consent-cat-label span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mcf-white);
  margin-bottom: 2px;
}
.mcf-consent-cat-label small {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
}
.mcf-consent-cat-status {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  font-weight: 700;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Toggle switch */
.mcf-consent-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
}
.mcf-consent-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mcf-consent-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  transition: background 0.2s;
}
.mcf-consent-toggle-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--mcf-white);
  border-radius: 50%;
  transition: transform 0.2s;
}
.mcf-consent-toggle input:checked + .mcf-consent-toggle-track {
  background: var(--mcf-gold);
}
.mcf-consent-toggle input:checked + .mcf-consent-toggle-track::before {
  transform: translateX(16px);
}
.mcf-consent-toggle input:focus-visible + .mcf-consent-toggle-track {
  outline: 2px solid var(--mcf-gold);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .mcf-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
  .mcf-consent-inner { padding: 14px 16px 12px; }
}

/* ============================================
   PRIVACY POLICY PAGE
   Long-form readable layout — centred narrow
   column, generous line-height, clear headings.
   ============================================ */
.mcf-policy {
  padding: clamp(64px, 8vw, 120px) var(--mcf-pad);
  background: var(--mcf-white);
}
.mcf-policy-inner {
  max-width: 760px;
  margin: 0 auto;
}
.mcf-policy-header {
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--mcf-border);
}
.mcf-policy-header .mcf-label {
  display: inline-block;
  margin-bottom: 14px;
}
.mcf-policy-header h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--mcf-charcoal);
  margin: 0 0 14px 0;
}
.mcf-policy-updated {
  font-size: 13px;
  color: var(--mcf-warm-grey);
  letter-spacing: 0.04em;
}
.mcf-policy-body h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.2;
  margin: 40px 0 14px 0;
}
.mcf-policy-body h3 {
  font-family: var(--mcf-sans);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mcf-charcoal);
  margin: 28px 0 10px 0;
}
.mcf-policy-body p,
.mcf-policy-body li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mcf-warm-grey);
  margin: 0 0 16px 0;
}
.mcf-policy-body ul,
.mcf-policy-body ol {
  padding-left: 22px;
  margin: 0 0 20px 0;
}
.mcf-policy-body li { margin-bottom: 8px; }
.mcf-policy-body strong { color: var(--mcf-charcoal); }
/* Specificity deliberately bumped via .mcf-template .mcf-policy-body
   so Elementor's .elementor-kit-N a rule (0,1,1) doesn't override
   and force links to white on the white page background. */
.mcf-template .mcf-policy-body a {
  color: var(--mcf-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mcf-template .mcf-policy-body a:hover,
.mcf-template .mcf-policy-body a:focus-visible {
  color: var(--mcf-gold);
}
.mcf-policy-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px 0;
  font-size: 14px;
}
.mcf-policy-body th,
.mcf-policy-body td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--mcf-border);
  vertical-align: top;
}
.mcf-policy-body th {
  background: var(--mcf-cream);
  font-family: var(--mcf-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mcf-charcoal);
}

/* ============================================
   INLINE FORM SUCCESS + ERROR
   Replaces the whole form card (on plant hero forms) or the
   form wrap (on standard CTA forms) with a confirmation panel
   when the AJAX submit succeeds. Matches the brand palette.
   ============================================ */
.mcf-form-success {
  text-align: center;
  padding: 24px 20px;
  background: var(--mcf-white);
  border-radius: 8px;
  border-top: 3px solid var(--mcf-gold);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}
/* When the success panel is inside a bottom-CTA form wrapper, it
   sits on the dark green CTA background — adjust to read on green */
.mcf-cta-form-wrap .mcf-form-success {
  box-shadow: none;
}
.mcf-form-success-tick {
  color: var(--mcf-green);
  margin-bottom: 12px;
  display: inline-flex;
}
.mcf-form-success h3 {
  font-family: var(--mcf-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 10px 0;
}
.mcf-form-success p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mcf-warm-grey);
  margin: 0 0 12px 0;
}
.mcf-form-success p:last-child { margin-bottom: 0; }
.mcf-form-success-meta {
  padding-top: 14px;
  border-top: 1px solid var(--mcf-border);
  font-size: 13px;
}
.mcf-template .mcf-form-success-meta a {
  color: var(--mcf-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 61, 47, 0.25);
}
.mcf-template .mcf-form-success-meta a:hover {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
}

.mcf-form-error {
  background: #fdf4f4;
  color: #9b2c2c;
  border: 1px solid #f4c7c7;
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================
   404 NOT FOUND
   On-brand dead-end page with 4 routing cards,
   site search, and an emergency contact band.
   ============================================ */
.mcf-404 {
  padding: clamp(64px, 8vw, 120px) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-404-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.mcf-404-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.mcf-404-header .mcf-label {
  display: inline-block;
  margin-bottom: 16px;
}
.mcf-404-header h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.08;
  margin: 0 0 18px 0;
}
.mcf-404-header h1 em {
  font-style: italic;
  color: var(--mcf-gold);
}
.mcf-404-lead {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--mcf-warm-grey);
  margin: 0 auto;
  max-width: 600px;
}

/* Routing cards — 2x2 on desktop, stacks on mobile */
.mcf-404-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.mcf-404-card {
  display: flex;
  flex-direction: column;
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-top: 3px solid var(--mcf-gold);
  border-radius: 8px;
  padding: 26px 28px 24px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mcf-404-card:hover {
  border-color: rgba(212, 168, 67, 0.5);
  box-shadow: 0 8px 24px rgba(28, 61, 47, 0.06);
  transform: translateY(-2px);
}
.mcf-404-card--cta {
  background: var(--mcf-green);
  color: var(--mcf-white);
  border-color: var(--mcf-gold);
}
.mcf-404-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.14);
  color: var(--mcf-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.mcf-404-card--cta .mcf-404-card-icon {
  background: rgba(212, 168, 67, 0.2);
}
.mcf-404-card h2 {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 10px 0;
}
.mcf-404-card--cta h2 { color: var(--mcf-white); }
.mcf-404-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mcf-warm-grey);
  margin: 0 0 16px 0;
  flex: 1;
}
.mcf-404-card--cta p { color: rgba(255, 255, 255, 0.85); }
.mcf-template .mcf-404-card-link {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mcf-green);
  margin-top: auto;
}
.mcf-404-card--cta .mcf-404-card-link { color: var(--mcf-gold); }
.mcf-404-card:hover .mcf-404-card-link { color: var(--mcf-gold); }

/* Search box */
.mcf-404-search {
  background: var(--mcf-white);
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 28px;
  text-align: center;
}
.mcf-404-search h3 {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mcf-warm-grey);
  margin: 0 0 14px 0;
}
.mcf-404-search form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}
.mcf-404-search input[type="search"] {
  flex: 1;
  padding: 12px 16px;
  background: var(--mcf-cream);
  border: 1px solid transparent;
  color: var(--mcf-charcoal);
  font-family: var(--mcf-sans);
  font-size: 14px;
  border-radius: 4px;
}
.mcf-404-search input[type="search"]:focus {
  background: var(--mcf-white);
  border-color: var(--mcf-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
.mcf-template .mcf-404-search button {
  padding: 12px 22px;
  background: var(--mcf-green);
  color: var(--mcf-white);
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.mcf-template .mcf-404-search button:hover {
  background: var(--mcf-gold);
}

/* Emergency contact foot */
.mcf-404-foot {
  text-align: center;
  font-size: 14px;
  color: var(--mcf-warm-grey);
  padding-top: 12px;
}
.mcf-template .mcf-404-foot a {
  color: var(--mcf-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 61, 47, 0.2);
}
.mcf-template .mcf-404-foot a:hover {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
}

/* Responsive */
@media (max-width: 640px) {
  .mcf-404-grid { grid-template-columns: 1fr; }
  .mcf-404-search form { flex-direction: column; }
  .mcf-404-search button { width: 100%; }
}

/* ============================================
   THANK YOU PAGE
   Landed on after a successful enquiry submission.
   Centred narrow column, big green tick, trust
   copy and next-step links.
   ============================================ */
.mcf-thankyou {
  padding: clamp(64px, 8vw, 120px) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-thankyou-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.mcf-thankyou-tick {
  color: var(--mcf-green);
  margin: 0 auto 20px;
  display: inline-flex;
}
.mcf-thankyou .mcf-label {
  display: inline-block;
  margin-bottom: 16px;
}
.mcf-thankyou h1 {
  font-family: var(--mcf-serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.1;
  margin: 0 0 20px 0;
}
.mcf-thankyou h1 em {
  font-style: italic;
  color: var(--mcf-gold);
}
.mcf-thankyou-lead {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.65;
  color: var(--mcf-warm-grey);
  margin: 0 0 28px 0;
}
.mcf-thankyou-contacts {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mcf-warm-grey);
  margin: 0 0 36px 0;
}
.mcf-template .mcf-thankyou-contacts a {
  color: var(--mcf-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 61, 47, 0.2);
}
.mcf-template .mcf-thankyou-contacts a:hover {
  color: var(--mcf-gold);
  border-color: var(--mcf-gold);
}
.mcf-thankyou-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   TOP-LEVEL HUBS
   /services/, /industries/, /capabilities/
   Uses .mcf-services-grid + .mcf-service-card for cards
   (shared with the homepage services grid). This block
   controls the outer hub layout and group headings.
   ============================================ */
.mcf-hub {
  padding: clamp(56px, 7vw, 96px) var(--mcf-pad) var(--mcf-v-space);
}

/* ============================================
   ABOUT US PAGE
   Story / accreditations / coverage / group /
   logos. Hero + stats bar + CTA are shared with
   the service template.
   ============================================ */

/* ---- OUR STORY (two-column, image right) ---- */
.mcf-story {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-story-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.mcf-story-text .mcf-label {
  margin-bottom: 14px;
}
.mcf-story-text h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 28px 0;
}
.mcf-story-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mcf-warm-grey);
  margin: 0 0 18px 0;
}
.mcf-story-body p:last-child { margin-bottom: 0; }
.mcf-story-quote {
  margin: 40px 0 0 0;
  padding: 24px 28px;
  border-left: 4px solid var(--mcf-gold);
  background: var(--mcf-white);
  border-radius: 4px;
}
.mcf-story-quote p {
  font-family: var(--mcf-serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  color: var(--mcf-charcoal);
  font-style: italic;
  margin: 0 0 10px 0;
}
.mcf-story-quote cite {
  font-family: var(--mcf-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mcf-green);
  font-style: normal;
  display: block;
}
.mcf-story-img {
  position: sticky;
  top: 100px;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.mcf-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- OUR TEAM ---- */
.mcf-team {
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-team-intro {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.mcf-team-intro .mcf-label {
  display: inline-block;
  margin-bottom: 14px;
}
.mcf-team-intro h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 16px 0;
}
.mcf-team-intro p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mcf-warm-grey);
  margin: 0;
}
.mcf-team-featured {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.mcf-team-card {
  background: var(--mcf-cream);
  border-radius: 6px;
  padding: 36px;
}
.mcf-team-card--featured {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: start;
}
/* Text-only team cards — compact 5-up grid for the 10 managers
   under Tony's featured card. Cards read close to square because
   content is just name + role + contact icons (bios stay blank
   for most team members). */
.mcf-team-card--text {
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
}
.mcf-team-card--text h3 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.mcf-team-card--text .mcf-team-card-role {
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  line-height: 1.3;
}
.mcf-team-card--text p {
  font-size: 13px;
  line-height: 1.55;
}
.mcf-team-card--text .mcf-team-contacts {
  margin-top: auto;
  padding-top: 12px;
  gap: 8px;
}
.mcf-team-card--text .mcf-team-contacts a {
  width: 30px;
  height: 30px;
}
.mcf-team-card--text .mcf-team-contacts svg {
  width: 13px;
  height: 13px;
}
.mcf-team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.mcf-team-card-img {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
}
.mcf-team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcf-team-card-body h3 {
  font-family: var(--mcf-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 4px 0;
}
.mcf-team-card-role {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  margin-bottom: 18px;
}
.mcf-team-card-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mcf-warm-grey);
  margin: 0;
}
/* Contact icon row — LinkedIn / email / phone */
.mcf-team-contacts {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.mcf-team-contacts li { margin: 0; }
.mcf-template .mcf-team-contacts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mcf-white);
  color: var(--mcf-green);
  border: 1px solid var(--mcf-border);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mcf-template .mcf-team-contacts a:hover,
.mcf-template .mcf-team-contacts a:focus-visible {
  background: var(--mcf-gold);
  border-color: var(--mcf-gold);
  color: var(--mcf-white);
}
.mcf-team-contacts svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---- VISION & VALUES ---- */
.mcf-vision {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-cream);
}
.mcf-vision-inner {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}
.mcf-vision-statement {
  max-width: 780px;
  text-align: center;
  margin: 0 auto;
}
.mcf-vision-statement .mcf-label {
  display: inline-block;
  margin-bottom: 14px;
}
.mcf-vision-statement h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 24px 0;
}
.mcf-vision-statement p {
  font-family: var(--mcf-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--mcf-charcoal);
  margin: 0;
}
.mcf-values-heading {
  font-family: var(--mcf-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  text-align: center;
  margin: 0 0 36px 0;
}
.mcf-values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.mcf-value-card {
  background: var(--mcf-white);
  border-radius: 6px;
  padding: 28px 24px 26px;
  border-top: 3px solid var(--mcf-gold);
}
.mcf-value-num {
  font-family: var(--mcf-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--mcf-gold);
  margin-bottom: 12px;
}
.mcf-value-name {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 12px 0;
}
.mcf-value-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mcf-warm-grey);
  margin: 0;
}

/* ---- ACCREDITATIONS GRID ---- */
.mcf-accreds {
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-accreds-intro {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.mcf-accreds-intro .mcf-label {
  display: inline-block;
  margin-bottom: 14px;
}
.mcf-accreds-intro h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 20px 0;
}
.mcf-accreds-intro p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mcf-warm-grey);
  margin: 0;
}
.mcf-accreds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.mcf-accred-card {
  background: var(--mcf-white);
  border: 1px solid var(--mcf-border);
  border-radius: 6px;
  padding: 28px 20px 24px;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.mcf-accred-card:hover {
  border-color: var(--mcf-gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.mcf-accred-badge {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.mcf-accred-badge img {
  max-height: 72px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mcf-accred-placeholder {
  display: inline-block;
  padding: 12px 16px;
  border: 1px dashed var(--mcf-border);
  border-radius: 4px;
  font-family: var(--mcf-serif);
  font-size: 15px;
  color: var(--mcf-stone);
  letter-spacing: 0.02em;
}
.mcf-accred-name {
  font-family: var(--mcf-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 8px 0;
}
.mcf-accred-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mcf-warm-grey);
  margin: 0;
}

/* ---- WHERE WE WORK (coverage) ---- */
.mcf-coverage {
  padding: var(--mcf-v-space) var(--mcf-pad);
  background: var(--mcf-green);
  color: var(--mcf-white);
}
.mcf-coverage-intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 72px);
  margin-bottom: 48px;
  align-items: start;
}
.mcf-coverage-intro-head .mcf-label {
  color: var(--mcf-gold);
  margin-bottom: 14px;
  display: inline-block;
}
.mcf-coverage-intro h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-white);
  line-height: 1.15;
  margin: 0;
}
/* Body paragraphs flow in two columns so the block doesn't look
   lopsided next to the heading on the left. */
.mcf-coverage-body {
  columns: 2;
  column-gap: clamp(24px, 3vw, 40px);
}
.mcf-coverage-body p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  margin: 0 0 16px 0;
  break-inside: avoid;
}
.mcf-coverage-body p:last-child { margin-bottom: 0; }

/* Hero subheading below the H1 (used on About Us). Flip the
   default margin-bottom to margin-top so spacing works around
   the reversed order. */
.mcf-hero-sub--below {
  margin-top: 20px;
  margin-bottom: 36px;
}
.mcf-coverage-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
}
.mcf-coverage-item {
  background: var(--mcf-green);
  padding: 24px 22px;
}
.mcf-coverage-item h3 {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--mcf-gold);
  margin: 0 0 8px 0;
}
.mcf-coverage-item p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  margin: 0;
}

/* ---- OUR GROUP (two cards) ---- */
.mcf-group {
  padding: var(--mcf-v-space) var(--mcf-pad);
}
.mcf-group-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.mcf-group-intro .mcf-label {
  display: inline-block;
  margin-bottom: 14px;
}
.mcf-group-intro h2 {
  font-family: var(--mcf-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  line-height: 1.15;
  margin: 0 0 16px 0;
}
.mcf-group-intro p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mcf-warm-grey);
  margin: 0;
}
.mcf-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.mcf-group-card {
  background: var(--mcf-cream);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mcf-group-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.mcf-group-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcf-group-card-body {
  padding: 28px 28px 30px;
}
.mcf-group-card-body h3 {
  font-family: var(--mcf-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 12px 0;
}
.mcf-group-card-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mcf-warm-grey);
  margin: 0;
}

/* ---- HERO MODIFIER ---- */
/* Subtle — same layout as service hero, no accreditation card */
.mcf-hero--about .mcf-hero-inner {
  justify-content: flex-start;
}

/* ---- RESPONSIVE BREAKPOINTS ---- */
@media (max-width: 1024px) {
  .mcf-story-inner,
  .mcf-coverage-intro { grid-template-columns: 1fr; }
  .mcf-story-img {
    position: static;
    max-width: 520px;
    margin: 0 auto;
  }
  .mcf-accreds-grid  { grid-template-columns: repeat(3, 1fr); }
  .mcf-coverage-grid { grid-template-columns: repeat(2, 1fr); }
  .mcf-coverage-body { columns: 1; }
  .mcf-group-grid    { grid-template-columns: 1fr; }
  .mcf-values-grid   { grid-template-columns: repeat(3, 1fr); }
  .mcf-team-grid     { grid-template-columns: repeat(3, 1fr); }
  .mcf-team-card--featured { grid-template-columns: 200px 1fr; gap: 28px; padding: 28px; }
}
@media (max-width: 640px) {
  .mcf-accreds-grid  { grid-template-columns: repeat(2, 1fr); }
  .mcf-coverage-grid { grid-template-columns: 1fr; }
  .mcf-story-quote   { padding: 20px 22px; }
  .mcf-values-grid   { grid-template-columns: 1fr; }
  .mcf-team-grid     { grid-template-columns: 1fr; }
  .mcf-team-card--featured {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px;
  }
  .mcf-team-card-img {
    max-width: 220px;
    margin: 0 auto;
  }
  /* Centre the LinkedIn/email/phone row under Tony's bio on mobile
     so it sits visually on the card's centreline like the rest of
     the copy. Desktop keeps the default left-aligned start. */
  .mcf-team-card--featured .mcf-team-contacts {
    justify-content: center;
  }
}
.mcf-hub-group + .mcf-hub-group {
  margin-top: clamp(48px, 6vw, 80px);
}
.mcf-hub-group-title {
  font-family: var(--mcf-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--mcf-charcoal);
  margin: 0 0 24px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mcf-border);
}
/* Override the homepage services-grid cap of 4 so hubs can grow
   to many cards cleanly. 3-up at desktop reads better for long lists. */
.mcf-hub-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .mcf-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mcf-hub-grid { grid-template-columns: 1fr; }
}


/* ============================================
   HOMEPAGE — LIVE ROADWORKS PANEL

   Sits in the areas section, full width and underneath the copy.

   It was briefly a right hand column instead. That was wrong twice over: it
   squeezed the panel to 430px when the rows want room, and it pushed the
   copy off centre. The section reads top to bottom now, which is how every
   other section on this page reads.

   The copy above it is untouched: still the centred 820px column it has
   always been, because nothing here overrides it.

   Everything below is scoped to .mcf-areas.has-live, a class the template only
   prints when the feed actually answered, so a missing panel leaves the
   section exactly as it was before any of this existed.
   ============================================ */

/* The section stays a plain block, as it was. The panel is simply the second
   child and takes the full content width, so there is no grid to fall back
   from at small sizes and no second layout to keep in step with this one. */
.mcf-areas.has-live .mcf-rwp {
  margin-top: clamp(36px, 4vw, 56px);
}

/* --- The panel --------------------------------------------------------- */

/* Dark green rather than another white card. It echoes the page header band,
   it reads as an instrument rather than as more content, and it gives the
   gold label somewhere to sit. */
.mcf-rwp {
  background: var(--mcf-green);
  border: 1px solid rgba(253, 252, 250, 0.14);
}
.mcf-rwp-head,
.mcf-rwp-item,
.mcf-rwp-foot {
  border-bottom: 1px solid rgba(253, 252, 250, 0.12);
}
.mcf-rwp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}
/* The whose-works-these-are line. Quieter than a row but louder than the
   licence line, because its job is to catch a skimmer. */
.mcf-rwp-strap {
  margin: 0;
  padding: 10px 20px;
  font-family: var(--mcf-sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(253, 252, 250, 0.6);
  border-bottom: 1px solid rgba(253, 252, 250, 0.12);
}
.mcf-rwp-title {
  margin: 0;
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcf-gold);
}
.mcf-rwp-count {
  font-family: var(--mcf-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, 0.58);
  font-variant-numeric: tabular-nums;
}

.mcf-rwp-list { margin: 0; padding: 0; list-style: none; }

/* Three columns and two rows: dot, text, pill. The pill spans both rows so it
   sits centred against the pair rather than against the street name alone. */
.mcf-rwp-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 12px;
  padding: 13px 20px;
}
.mcf-rwp-list .mcf-rwp-item:last-child { border-bottom: 0; }

.mcf-rwp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: start;
  margin-top: 6px;
}
/* Lifted from the tracker's rail colours, but lightened: #9a3412 and the
   green are close to invisible on this background. Same meanings, so somebody
   who clicks through is not learning a second colour language. */
.mcf-rwp-dot.is-closure   { background: var(--mcf-gold); }
.mcf-rwp-dot.is-emergency { background: #e8a33d; }
.mcf-rwp-dot.is-progress  { background: #7fb069; }
.mcf-rwp-dot.is-planned,
.mcf-rwp-dot.is-done      { background: rgba(253, 252, 250, 0.35); }

/* Truncated rather than wrapped. A panel of one line rows stays scannable;
   the same panel with some rows two lines and some three does not. */
.mcf-rwp-street {
  margin: 0;
  font-family: var(--mcf-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mcf-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcf-rwp-meta {
  margin: 2px 0 0;
  font-family: var(--mcf-sans);
  font-size: 0.75rem;
  color: rgba(253, 252, 250, 0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcf-rwp-pill {
  grid-row: span 2;
  font-family: var(--mcf-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid rgba(253, 252, 250, 0.22);
  border-radius: 999px;
  color: rgba(253, 252, 250, 0.72);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mcf-rwp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 0;
  border-top: 1px solid rgba(253, 252, 250, 0.12);
}
.mcf-rwp-stamp {
  font-family: var(--mcf-sans);
  font-size: 11px;
  color: rgba(253, 252, 250, 0.58);
  font-variant-numeric: tabular-nums;
}
/* Both anchors are prefixed with .mcf-rwp on purpose, and the reason is a
   trap: .mcf-template a is 0,1,1, so a bare class on a link inside the
   template wrapper loses and the link renders green on the green panel.
   Staging cannot catch this: it still enqueues a leftover Elementor kit
   stylesheet whose own a rule painted these links white, so the bug only
   showed on live. Any anchor styled inside .mcf-template needs 0,2,0. */
.mcf-rwp .mcf-rwp-all {
  font-family: var(--mcf-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mcf-gold);
  text-decoration: none;
}
.mcf-rwp .mcf-rwp-all:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The OGL attribution. Quiet but present: a licence condition, so it cannot
   be display:none or moved off the page that uses the data. */
.mcf-rwp-licence {
  margin: 0;
  padding: 10px 20px 14px;
  font-family: var(--mcf-sans);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(253, 252, 250, 0.45);
}
.mcf-rwp .mcf-rwp-licence a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Nothing responsive to do for the layout: the panel is full width at every
   size, so it needs no breakpoint to collapse at. */