/*
Theme Name: mr-gates
Theme URI: https://mrgates.co.uk
Author: DC Digital
Author URI: https://dcdigital.uk
Description: Custom theme for Mr Gates (Mr Gates Fabrication Specialists Ltd), built from the approved design system in 04-brand/assets/design-system/README.md. Tokens, layouts, components, interactions and responsive rules reproduced as specified.
Version: 1.4.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: mr-gates
WPVibe: yes
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth. Mapped one for one from the design system README.
   Semantic role names; the design's own token name is given in the comment.
   Contrast adjustments are marked ADJUSTED and recorded in 07-build/build-log.md.
   ========================================================================== */

:root {
  /* REBRAND 2026-09-20. Anchors come from the approved brand pack
     (MR-GATES-Social-Media-Pack): Deep Navy #071B35, Safety Orange #F05A16,
     White, Cool Grey #F4F6F8. Every derived token below was recomputed against
     the new anchors and re-measured for WCAG 2.2 AA; each replacement meets or
     beats the contrast of the value it replaces. */

  /* Surfaces */
  --c-base:            #FFFFFF; /* White */
  --c-surface-alt:     #F4F6F8; /* Cool Grey, brand palette */
  --c-surface-subtle:  #F8F9FB; /* Grey 50 */
  --c-contrast:        #071B35; /* Deep Navy, brand palette. 17.25:1 on white (was 16.45) */
  --c-contrast-deep:   #051226; /* Navy deep, footer */
  --c-contrast-alert:  #061730; /* Navy alert bar */
  --c-contrast-tint:   #0C2847; /* Navy tint */
  --c-contrast-tint-2: #0A223C; /* Navy tint 2 */

  /* Accents */
  --c-accent:          #F05A16; /* Safety Orange, brand palette. On white 3.40:1 (was 3.35), large-text roles only */
  --c-accent-strong:   #C54A12; /* Orange hover: same hue darkened until white-on-it is 4.81:1 (predecessor was 4.75). Hover fills and focus outlines */
  /* Text-orange, re-derived for the 2026-09 Safety Orange exactly as QA cycle 1
     item 9 derived the original: same hue, darkened until it clears 4.5:1 on
     every surface the design actually places behind it. Measured: white 5.25,
     cool grey #F4F6F8 4.85, grey 50 #F8F9FB 4.99, orange tint #FEF6F2 4.92,
     orange tint 2 #FEEFE9 4.69. Worst case 4.69:1 (predecessor 4.66). Text roles only. */
  --c-accent-text:     #BB4611;
  --c-accent-warm:     #F2A02C; /* Amber, supporting accent, decorative and on-dark roles only */
  --c-accent-tint:     #FEF6F2; /* Orange tint, white + 5.5% Safety Orange */
  --c-accent-tint-2:   #FEEFE9; /* Orange tint 2, white + 9.5% Safety Orange */

  /* Text on light */
  --c-text:            #2E3346; /* Body, 12.5:1 */
  --c-text-muted:      #5D6377; /* Muted, 5.97:1 */
  --c-text-meta:       #5D6377; /* ADJUSTED from #7C8399 (3.77:1 fails AA) */

  /* Text on dark */
  --c-on-dark:         #C3CADF; /* 10.1:1 on navy */
  --c-on-dark-muted:   #9FAAD0; /* 7.2:1 on navy */
  --c-on-dark-faint:   #8F9AC0; /* 5.9:1 on navy */
  --c-on-dark-legal:   #8F9AC0; /* ADJUSTED from #6E7BA8 (4.39:1 fails AA) */

  /* Lines */
  --c-border:          #E2E5EA;
  --c-border-light:    #E4E7EE;
  --c-border-input:    #DCE0E8;
  --c-border-hover:    #C9CFDD;
  --c-border-dark:     rgba(255,255,255,.14);

  /* Type */
  --f-head: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --w-content: 1240px;
  --pad-x: 32px;

  /* Radius */
  --r-sm: 6px;
  --r-btn: 7px;
  --r-md: 10px;
  --r-card: 12px;
  --r-panel: 14px;
  --r-pill: 100px;

  /* Shadow */
  --sh-cta:       0 6px 16px rgba(240,90,22,.28);
  --sh-cta-lg:    0 10px 26px rgba(240,90,22,.34);
  --sh-cta-hover: 0 12px 26px rgba(240,90,22,.38);
  --sh-card:      0 18px 40px rgba(7,27,53,.10);
  --sh-card-lg:   0 20px 44px rgba(7,27,53,.12);
  --sh-panel:     0 22px 48px rgba(7,27,53,.10);
  --sh-drop:      0 26px 60px rgba(5,18,38,.18);
  --sh-form:      0 26px 60px rgba(5,18,38,.12);
  --sh-badge:     0 18px 40px rgba(3,13,26,.32);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Dark band glow */
  --glow: radial-gradient(900px 500px at 80% 8%, rgba(240,90,22,.32), rgba(7,27,53,0) 62%);
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

/* scroll-padding-top clears the 83px sticky header so an anchored heading, and
   the skip link's own target, land below it rather than under it. QA cycle 2,
   S4 (SC 2.4.11). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-base);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, never hidden: hidden makes this a scroll container and kills
     animation-timeline: view() on every reveal. Design README, rule 2. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-head);
  color: var(--c-contrast);
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  font-weight: 800;
}
h1 { font-size: 56px; line-height: 1.04; }
h2 { font-size: 41px; line-height: 1.08; }
h3 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .2s var(--ease); }
a:hover { color: var(--c-contrast); }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--c-contrast); }

hr { border: 0; border-top: 1px solid var(--c-border-light); margin: 40px 0; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1.05em; font-size: 16px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-border-light); vertical-align: top; }
th { font-family: var(--f-head); font-weight: 700; color: var(--c-contrast); font-size: 15px; }

/*
 * Table reflow. QA cycle 3, accessibility finding S1.
 *
 * A table cannot be shrunk below the min-content width of its cells, so
 * width: 100% does not save it on a narrow viewport: the three column tables
 * on /privacy-policy/ forced 331px inside a 280px content box at 320px, and
 * body { overflow-x: clip } then made the overspill UNREACHABLE rather than
 * scrollable. Twelve to fifteen text runs were being cut off at the viewport
 * edge with no way to scroll to them.
 *
 * There was no overflow wrapper for tables anywhere in this stylesheet, so
 * this is a GENERAL RULE for every table this site renders, not a patch on
 * one page. mg_wrap_content_tables() in functions.php puts every table in
 * page content inside .mg-tablewrap. The focus ring comes from the global
 * :focus-visible rule below, which is why there is no separate rule here.
 */
.mg-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
  margin: 0 0 1.05em;
}
.mg-tablewrap > table { margin-bottom: 0; }

/*
 * ...and make the tables FIT rather than merely scroll.
 *
 * The wrapper above stops content being LOST. On its own it does not stop a
 * column being sliced at the viewport edge when the region sits at rest, which
 * looks identical to the original defect until the reader discovers that the
 * table scrolls. Measured at 320px: the five tables on /privacy-policy/ needed
 * 287, 331, 371, 307 and 299px inside a 280px box.
 *
 * Three changes, all scoped to narrow viewports only, bring all ten tables on
 * the site inside the content box at 320, 360 and 375px:
 *
 *   - table-layout: fixed, which is what actually does the work. Column widths
 *     stop being a function of content, so a table can no longer demand more
 *     width than its container and the overflow cannot arise in the first
 *     place. Measured after: 0px overflow on all five tables at both 320 and
 *     375px.
 *   - tighter cell padding, which is chrome rather than content, and which
 *     buys back the room fixed columns give away.
 *   - overflow-wrap: break-word with hyphens, so that the few genuinely long
 *     tokens (email addresses, "homeowners") break instead of spilling. This
 *     is deliberately break-word and NOT anywhere: anywhere was tried first
 *     and, on the auto layout, starved the middle column badly enough to snap
 *     ordinary words like "commercial" in half. Fixed columns plus break-word
 *     leaves normal prose intact.
 *
 * The font size is NOT reduced and no column is hidden, both of which the
 * accessibility audit ruled out. Desktop is untouched.
 *
 * The scroll region therefore does not engage on any current page. It stays
 * because it is the general rule: the next table anybody adds, in a blog post
 * or a new service page, is caught by it rather than repeating this defect.
 */
@media (max-width: 480px) {
  .mg-tablewrap table {
    table-layout: fixed;
  }
  .mg-tablewrap th,
  .mg-tablewrap td {
    padding: 9px 5px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/*
 * Row headers on the two column key/value tables. QA cycle 3, finding S2.
 * The label column is a row header and is now marked up as one. Held to the
 * body face at the inherited size so that promoting the cell does not drop
 * the display face into the middle of a value pair; the bold is the only
 * visual change.
 */
th[scope="row"] {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
  color: var(--c-contrast);
}

:focus-visible {
  outline: 3px solid var(--c-accent-strong);
  outline-offset: 2px;
  border-radius: 3px;
}

.mg-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.mg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-contrast); color: #fff;
  padding: 14px 22px; font-family: var(--f-head); font-weight: 700; font-size: 16px;
  text-decoration: none; border-radius: 0 0 var(--r-btn) 0;
}
.mg-skip:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.mg-wrap { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 var(--pad-x); }
.mg-wrap--narrow { max-width: 860px; }

.mg-section { padding: 80px 0; }
.mg-section--tight { padding: 56px 0; }
.mg-section--alt { background: var(--c-surface-alt); }
.mg-section--last { padding-bottom: 84px; }

main { display: block; }

/* Dark band */
.mg-band {
  position: relative;
  background: var(--c-contrast);
  color: var(--c-on-dark);
  padding: 72px 0;
  overflow: clip;
}
.mg-band::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--glow);
  pointer-events: none;
}
.mg-band > * { position: relative; }
.mg-band h2, .mg-band h3, .mg-band h4 { color: #fff; }
.mg-band p, .mg-band li { color: var(--c-on-dark); }
.mg-band strong { color: #fff; }
.mg-band a { color: #fff; }
.mg-band--glow-left::before { background: radial-gradient(900px 500px at 15% 10%, rgba(240,90,22,.32), rgba(7,27,53,0) 62%); }
.mg-band--glow-centre::before { background: radial-gradient(900px 500px at 50% 0%, rgba(240,90,22,.30), rgba(7,27,53,0) 62%); }

/* ==========================================================================
   4. TYPOGRAPHIC HELPERS
   ========================================================================== */

.mg-eyebrow {
  display: block;
  font-family: var(--f-head);
  font-size: 12px; font-weight: 700; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent-text); /* ADJUSTED from the raw accent orange. Now 4.69:1 at worst surface, 12px */
  margin: 0 0 14px;
}
.mg-band .mg-eyebrow, .mg-panel .mg-eyebrow { color: var(--c-accent-warm); }

.mg-lede { font-size: 19px; line-height: 1.58; color: var(--c-text-muted); }
.mg-band .mg-lede { color: var(--c-on-dark); }

.mg-meta { font-size: 14px; line-height: 1.5; color: var(--c-text-meta); }

.mg-h2 { font-size: 41px; }
.mg-h3 { font-size: 32px; line-height: 1.12; }

.mg-section-head { max-width: 780px; margin: 0 0 40px; }
.mg-section-head--centre { margin-left: auto; margin-right: auto; text-align: center; }
.mg-section-head p:last-child { margin-bottom: 0; }

/* ==========================================================================
   5. BUTTONS
   Primary CTA label is 19px/700 so the Safety Orange #F05A16 + white pairing
   (3.40:1) clears WCAG 2.2 AA at the large-text threshold. Flagged for David.
   ========================================================================== */

.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  /* QA cycle 1, item 12. White on #F05A16 is 3.40:1, which clears AA only at
     the large-text threshold. At 19px bold that threshold (14pt = 18.667px)
     was met by 0.33px, so any future type-scale nudge would silently drop the
     primary CTA below AA. 20px puts 1.33px between the button and the cliff
     edge. The brand orange fill is unchanged; the margin is what was hardened,
     and no breakpoint reduces .mg-btn below this size. */
  font-family: var(--f-head); font-size: 20px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  background: var(--c-accent); color: #FFFFFF;
  box-shadow: var(--sh-cta);
  transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.mg-btn:hover { background: var(--c-accent-strong); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-cta-hover); }
.mg-btn--lg { padding: 17px 30px; box-shadow: var(--sh-cta-lg); }

.mg-btn--secondary {
  background: transparent; color: var(--c-contrast);
  border-color: var(--c-border-input); box-shadow: none;
  font-size: 17px;
}
.mg-btn--secondary:hover { background: var(--c-surface-alt); color: var(--c-contrast); border-color: var(--c-border-hover); box-shadow: none; }

.mg-btn--ghost {
  background: rgba(255,255,255,.06); color: #fff;
  border-color: rgba(255,255,255,.22); box-shadow: none;
  font-size: 17px;
}
.mg-btn--ghost:hover { background: rgba(255,255,255,.09); color: #fff; transform: translateY(-3px); box-shadow: none; }

.mg-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.mg-actions--tight { margin-top: 20px; }

/* Text link with arrow */
.mg-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-weight: 700; font-size: 16px;
  color: var(--c-accent-text); text-decoration: none;
  border-bottom: 2px solid rgba(240,90,22,.32);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.mg-link::after { content: "\2192"; transition: transform .2s var(--ease); }
.mg-link:hover { color: var(--c-contrast); border-color: var(--c-contrast); }
.mg-link:hover::after { transform: translateX(3px); }
.mg-band .mg-link { color: #fff; border-color: rgba(242,160,44,.55); }
.mg-band .mg-link:hover { color: var(--c-accent-warm); border-color: var(--c-accent-warm); }

.mg-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-weight: 700; font-size: 17px;
  color: var(--c-contrast); text-decoration: none;
  min-height: 48px; padding: 6px 2px;
}
.mg-tel:hover { color: var(--c-accent-text); }
.mg-band .mg-tel { color: #fff; }
.mg-band .mg-tel:hover { color: var(--c-accent-warm); }
.mg-tel small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 13px; color: var(--c-text-meta); letter-spacing: 0; }
.mg-band .mg-tel small { color: var(--c-on-dark-faint); }

/* ==========================================================================
   6. HEADER
   ========================================================================== */

.mg-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, #F2A02C, #F05A16);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@keyframes mg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  [data-scroll-progress] { animation: mg-progress linear both; animation-timeline: scroll(root); }
}

.mg-alert {
  background: var(--c-contrast-alert);
  color: var(--c-on-dark);
  font-size: 14px;
  padding: 9px 0;
}
.mg-alert .mg-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.mg-alert__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent-warm); flex: none;
}
@keyframes mg-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(242,160,44,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(242,160,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,160,44,0); }
}
@media (prefers-reduced-motion: no-preference) {
  .mg-alert__dot { animation: mg-pulse 2.4s infinite; }
}
.mg-alert__msg { color: var(--c-on-dark); }
.mg-alert a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.mg-alert a:hover { color: var(--c-accent-warm); border-color: var(--c-accent-warm); }

.mg-header {
  position: sticky; top: 0; z-index: 120;
  background: #fff;
  border-bottom: 1px solid var(--c-border-light);
}
.mg-header__inner { display: flex; align-items: center; gap: 26px; min-height: 82px; }

.mg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
/* REBRAND 2026-09-20: the approved pack finally supplied a transparent badge,
   so the JPEG mix-blend-mode workaround is gone. */
.mg-brand img { height: 46px; width: auto; }
.mg-brand__accent { color: var(--c-accent); }
.mg-brand__text { font-family: var(--f-head); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: var(--c-contrast); }

.mg-nav { margin-left: auto; }
.mg-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mg-nav__list > li { margin: 0; position: relative; }
.mg-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-head); font-weight: 600; font-size: 16px;
  color: var(--c-contrast); text-decoration: none;
  padding: 12px 12px; border-radius: var(--r-sm);
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease);
  background: none; cursor: pointer;
}
.mg-nav__link:hover { color: var(--c-accent-text); }
.mg-nav__item.is-active > .mg-nav__link { border-bottom-color: var(--c-accent); }
.mg-nav__caret { font-size: 11px; line-height: 1; transition: transform .2s var(--ease); }
.mg-nav__item[data-open="true"] .mg-nav__caret { transform: rotate(180deg); }

@keyframes mg-drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mg-drop {
  position: absolute; top: 100%; left: 0; min-width: 288px;
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: var(--r-card); box-shadow: var(--sh-drop);
  padding: 10px; margin: 0; list-style: none;
  display: none;
}
.mg-nav__item[data-open="true"] > .mg-drop { display: block; animation: mg-drop-in .22s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .mg-nav__item[data-open="true"] > .mg-drop { animation: none; } }
.mg-drop li { margin: 0; }
.mg-drop a {
  display: block; padding: 11px 14px; border-radius: var(--r-md);
  font-family: var(--f-body); font-weight: 500; font-size: 16px;
  color: var(--c-text); text-decoration: none;
  transition: background .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.mg-drop a:hover { background: var(--c-surface-alt); color: var(--c-contrast); transform: translateX(3px); }

.mg-header__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.mg-burger, .mg-callbtn { display: none; }

.mg-burger {
  align-items: center; justify-content: center; gap: 6px;
  width: 52px; height: 48px; border: 1px solid var(--c-border-input);
  background: #fff; border-radius: var(--r-btn); cursor: pointer;
  flex-direction: column;
}
.mg-burger span { display: block; width: 22px; height: 2px; background: var(--c-contrast); transition: transform .2s var(--ease), opacity .2s var(--ease); }
.mg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mg-callbtn {
  align-items: center; justify-content: center;
  min-width: 52px; height: 48px; padding: 0 16px;
  background: var(--c-contrast); color: #fff;
  border-radius: var(--r-btn); text-decoration: none;
  font-family: var(--f-head); font-weight: 700; font-size: 16px;
}
.mg-callbtn:hover { background: var(--c-contrast-tint); color: #fff; }

.mg-mobile {
  display: none;
  background: #fff; border-top: 1px solid var(--c-border-light);
  max-height: calc(100vh - 140px); overflow-y: auto;
  padding: 14px 0 22px;
}
.mg-mobile[data-open="true"] { display: block; animation: mg-drop-in .22s var(--ease) both; }
.mg-mobile ul { list-style: none; margin: 0; padding: 0; }
.mg-mobile li { margin: 0; }
.mg-mobile a {
  display: block; padding: 13px 4px; min-height: 48px;
  font-family: var(--f-head); font-weight: 600; font-size: 17px;
  color: var(--c-contrast); text-decoration: none;
  border-bottom: 1px solid var(--c-border-light);
}
.mg-mobile a:hover { color: var(--c-accent-text); }
.mg-mobile .mg-mobile__child a {
  padding-left: 26px; font-family: var(--f-body); font-weight: 500; font-size: 16px; color: var(--c-text);
}
.mg-mobile__actions { display: grid; gap: 12px; margin-top: 20px; }
.mg-mobile__actions .mg-btn { width: 100%; }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.mg-prefooter { background: var(--c-contrast); color: var(--c-on-dark); padding: 66px 0; position: relative; overflow: clip; }
.mg-prefooter::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.mg-prefooter > * { position: relative; }
.mg-prefooter h2 { color: #fff; font-size: 38px; }
.mg-prefooter__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.mg-prefooter p { color: var(--c-on-dark); }
.mg-prefooter .mg-actions { justify-content: flex-end; }

/* QA cycle 1, item 1. .mg-prefooter is a navy band that never carried the
   .mg-band class, so none of the on-dark colour overrides in section 3 reached
   it. .mg-tel therefore kept its light-surface navy and rendered #101C46 on
   #101C46 at 1.00:1: the office and emergency numbers, the client's stated
   preferred enquiry channel, were invisible on 33 of 39 pages. The whole
   on-dark override set is mirrored here rather than only .mg-tel, so any
   component later dropped into the prefooter inherits correct colours. */
.mg-prefooter h3, .mg-prefooter h4 { color: #fff; }
.mg-prefooter li { color: var(--c-on-dark); }
.mg-prefooter strong { color: #fff; }
.mg-prefooter a { color: #fff; }
.mg-prefooter .mg-eyebrow { color: var(--c-accent-warm); }
.mg-prefooter .mg-lede { color: var(--c-on-dark); }
.mg-prefooter .mg-meta { color: var(--c-on-dark-faint); }
.mg-prefooter .mg-link { color: #fff; border-color: rgba(242,160,44,.55); }
.mg-prefooter .mg-link:hover { color: var(--c-accent-warm); border-color: var(--c-accent-warm); }
.mg-prefooter .mg-tel { color: #fff; }
.mg-prefooter .mg-tel:hover { color: var(--c-accent-warm); }
.mg-prefooter .mg-tel small { color: var(--c-on-dark-faint); }
.mg-prefooter .mg-num { background: rgba(242,160,44,.16); color: var(--c-accent-warm); }
.mg-prefooter .mg-stat { border-left-color: var(--c-accent-warm); }
.mg-prefooter .mg-stat__figure { color: #fff; }
.mg-prefooter .mg-stat__label { color: var(--c-on-dark-muted); }
.mg-prefooter .mg-source { color: var(--c-on-dark-faint); border-left-color: var(--c-border-dark); }
.mg-prefooter .mg-chip { background: rgba(255,255,255,.05); border-color: var(--c-border-dark); color: var(--c-on-dark); }
.mg-prefooter a.mg-chip:hover { border-color: var(--c-accent-warm); background: rgba(255,255,255,.09); color: #fff; }
/* The primary CTA keeps its own orange fill and white label. */
.mg-prefooter a.mg-btn { color: #FFFFFF; }
.mg-prefooter a.mg-btn--secondary { color: #fff; border-color: rgba(255,255,255,.28); }

.mg-footer { background: var(--c-contrast-deep); color: var(--c-on-dark-muted); padding: 64px 0 0; font-size: 15px; }
.mg-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.mg-footer h3 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-on-dark-faint); font-weight: 700; margin: 0 0 16px;
}
.mg-footer ul { list-style: none; margin: 0; padding: 0; }
.mg-footer li { margin: 0 0 9px; }
.mg-footer a { color: var(--c-on-dark-muted); text-decoration: none; display: inline-block; transition: color .2s var(--ease), transform .2s var(--ease); }
.mg-footer a:hover { color: #fff; transform: translateX(3px); }

.mg-footer__brand { font-family: var(--f-head); font-weight: 800; font-size: 22px; color: #fff; letter-spacing: -0.03em; margin: 0 0 14px; display: block; }
/* QA cycle 1, found by the render sweep after item 4 was fixed.
   .mg-nap was written for the footer and given on-dark colours, but the same
   class is used in the /contact/ "Where we are" block, which sits on a white
   panel. The address paragraph there was #9FAAD0 on white at 2.30:1. It went
   unnoticed because until this cycle the only thing in that paragraph was the
   address token, which carried its own colour and tinted chip and hid the
   parent's colour completely. Resolving the token exposed it. The class now
   defaults to light-surface colours and the footer scopes its own. */
.mg-nap { font-style: normal; }
.mg-nap p { margin: 0 0 9px; color: var(--c-text); }
.mg-nap a { text-decoration: none; }
.mg-nap__label { color: var(--c-text-meta); }
.mg-footer .mg-nap p { color: var(--c-on-dark-muted); }
.mg-footer .mg-nap__label { color: var(--c-on-dark-faint); }

.mg-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.mg-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--c-border-dark); border-radius: var(--r-btn);
  font-family: var(--f-head); font-weight: 600; font-size: 14px;
}
.mg-footer__social a:hover { border-color: var(--c-accent); transform: translateY(-2px); }

.mg-footer__areas { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--c-border-dark); }
.mg-footer__areas h3 { margin-bottom: 14px; }
.mg-footer__areas ul { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-footer__areas li { margin: 0; }
.mg-footer__areas a {
  display: inline-block; padding: 9px 15px; min-height: 40px; line-height: 22px;
  border: 1px solid var(--c-border-dark); border-radius: var(--r-pill); font-size: 14px;
}
.mg-footer__areas a:hover { border-color: var(--c-accent); transform: translateY(-2px); }

.mg-legal { margin-top: 40px; border-top: 1px solid var(--c-border-dark); padding: 26px 0 34px; }
.mg-legal__text { color: var(--c-on-dark-legal); font-size: 14px; line-height: 1.6; margin: 0 0 12px; max-width: 900px; }
.mg-legal__links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.mg-legal__links li { margin: 0; }
.mg-legal__links a { color: var(--c-on-dark-legal); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.mg-legal__links a:hover { color: #fff; }

/* ==========================================================================
   8. BREADCRUMBS
   ========================================================================== */

.mg-crumbs { padding: 20px 0 0; font-size: 14px; }
.mg-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; align-items: center; }
.mg-crumbs li { margin: 0; color: var(--c-text-meta); display: flex; align-items: center; gap: 6px; }
.mg-crumbs li:not(:last-child)::after { content: "\203A"; color: var(--c-text-meta); }
.mg-crumbs a { color: var(--c-text-muted); text-decoration: none; }
.mg-crumbs a:hover { color: var(--c-accent-text); text-decoration: underline; }
.mg-crumbs [aria-current="page"] { color: var(--c-contrast); font-weight: 600; }

/* ==========================================================================
   9. HEROES
   ========================================================================== */

.mg-hero { padding: 62px 0 76px; }
.mg-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.mg-hero h1 { font-size: 62px; line-height: 1.03; letter-spacing: -0.035em; }
.mg-hero--interior h1 { font-size: 56px; letter-spacing: -0.025em; line-height: 1.05; }
/* ADJUSTED. The design's amber to orange gradient (#F2A02C to #E8641F) puts
   the amber end at 2.1:1 on white, which fails WCAG 2.2 AA even at the large
   text threshold of 3:1. The gradient is kept, in the same direction and the
   same brand family, but runs orange to orange hover instead: the lightest
   point is now #F05A16 at 3.40:1, which clears 3:1 for text this size.
   Flagged for David in 07-build/build-log.md. */
.mg-hero__gradient {
  background: linear-gradient(96deg, #F05A16, #C54A12);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  display: block;
}
.mg-hero p { font-size: 20px; line-height: 1.6; color: var(--c-text-muted); max-width: 62ch; }
.mg-hero__note { font-size: 16px; color: var(--c-text-meta); }

/* Page header, used where there is no hero image slot */
.mg-pagehead { padding: 46px 0 18px; }
.mg-pagehead h1 { max-width: 20ch; }
.mg-pagehead p { font-size: 19px; color: var(--c-text-muted); max-width: 70ch; }

/* ==========================================================================
   10. FALLBACK PATTERN B: TYPOGRAPHIC PANEL
   Replaces a hero image slot where removing it would break the layout.
   A designed element in its own right. No striped fill, no placeholder caption.
   ========================================================================== */

.mg-panel {
  position: relative;
  background: var(--c-contrast);
  border-radius: var(--r-card);
  padding: 44px 40px;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: clip;
  box-shadow: var(--sh-panel);
}
.mg-panel::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.mg-panel::after {
  content: ""; position: absolute; left: 40px; top: 44px; width: 46px; height: 3px;
  background: linear-gradient(90deg, #F2A02C, #F05A16); border-radius: 2px;
}
.mg-panel > * { position: relative; }
.mg-panel .mg-eyebrow { color: var(--c-accent-warm); margin-bottom: 12px; }
/* QA cycle 1, item 2. Both were written at specificity (0,1,0) and were silently
   beaten by .mg-hero p and .mg-band p at (0,1,1), which replaced the white and
   on-dark colours with grey #5D6377 on navy (2.75:1) and dropped the head to
   18px. Scoped to .mg-panel for (0,2,0) so the panel owns its own type again. */
.mg-panel .mg-panel__head {
  font-family: var(--f-head); font-weight: 800; font-size: 34px; line-height: 1.12;
  letter-spacing: -0.03em; color: #fff; margin: 0 0 14px; max-width: none;
}
.mg-panel .mg-panel__proof { color: var(--c-on-dark); font-size: 16px; line-height: 1.55; margin: 0; max-width: none; }
.mg-panel--short { min-height: 300px; }
.mg-panel--wide { min-height: 260px; }

/* Pattern B inside a dark band. A navy panel on a navy band would disappear,
   so the same designed element is rendered as a lifted surface instead. */
.mg-panel--on-dark {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--c-border-dark);
  box-shadow: none;
}
.mg-panel--on-dark::before { background: none; }
.mg-panel--on-dark .mg-panel__proof { color: var(--c-on-dark-muted); }
.mg-panel--on-dark .mg-panel__head { color: #fff; }

/* ==========================================================================
   11. CARDS AND GRIDS
   ========================================================================== */

.mg-grid { display: grid; gap: 20px; }
.mg-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mg-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mg-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mg-grid--6 { grid-template-columns: repeat(3, 1fr); gap: 20px; }

.mg-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mg-card h3 { font-size: 21px; margin-bottom: .5em; }
.mg-card p { font-size: 16px; line-height: 1.6; color: var(--c-text-muted); }
.mg-card p:last-child { margin-bottom: 0; }
a.mg-card { display: block; text-decoration: none; color: inherit; }
a.mg-card:hover, .mg-card--hover:hover { transform: translateY(-5px); box-shadow: var(--sh-card); border-color: var(--c-border-hover); }
a.mg-card:hover h3 { color: var(--c-accent-text); }
.mg-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--f-head); font-weight: 700; font-size: 15px; color: var(--c-accent-text); }
.mg-card__more::after { content: "\2192"; transition: transform .2s var(--ease); }
a.mg-card:hover .mg-card__more::after { transform: translateX(3px); }

.mg-card--compact { padding: 24px; }
.mg-card--feature { padding: 34px; }
.mg-card--panel { padding: 42px; border-radius: var(--r-panel); }

.mg-card--dark {
  background: rgba(255,255,255,.05);
  border-color: var(--c-border-dark);
}
.mg-card--dark h3 { color: #fff; }
.mg-card--dark p { color: var(--c-on-dark-muted); }
a.mg-card--dark:hover { background: rgba(255,255,255,.08); transform: translateY(-4px); box-shadow: none; border-color: rgba(255,255,255,.24); }
a.mg-card--dark:hover h3 { color: var(--c-accent-warm); }

/* Audience router cards */
.mg-router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mg-router .mg-card { border-top: 3px solid var(--c-accent); }

/* Numbered cards */
.mg-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-accent-tint-2); color: var(--c-accent-text);
  font-family: var(--f-head); font-weight: 800; font-size: 17px;
  margin-bottom: 16px; flex: none;
}
.mg-band .mg-num { background: rgba(242,160,44,.16); color: var(--c-accent-warm); }

/* ==========================================================================
   12. PROOF STRIP (stats)
   ========================================================================== */

.mg-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mg-stat { border-left: 2px solid var(--c-accent); padding: 4px 0 4px 18px; }
.mg-stat__figure {
  display: block; font-family: var(--f-head); font-weight: 800;
  font-size: 30px; line-height: 1.08; letter-spacing: -0.04em; color: var(--c-contrast);
}
.mg-stat__label { display: block; font-size: 14px; line-height: 1.4; color: var(--c-text-muted); margin-top: 6px; }
.mg-band .mg-stat { border-left-color: var(--c-accent-warm); }
.mg-band .mg-stat__figure { color: #fff; }
.mg-band .mg-stat__label { color: var(--c-on-dark-muted); }

/* ==========================================================================
   13. LIST ROWS (numbered service index)
   ========================================================================== */

.mg-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border-light); }
.mg-rows > li { margin: 0; border-bottom: 1px solid var(--c-border-light); }
.mg-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 22px; align-items: baseline;
  padding: 26px 12px; text-decoration: none; color: inherit;
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.mg-row:hover { background: var(--c-surface-alt); padding-left: 22px; }
.mg-row__n { font-family: var(--f-head); font-weight: 800; font-size: 18px; color: var(--c-accent-text); letter-spacing: -0.02em; }
.mg-rows--plain .mg-row { grid-template-columns: 1fr auto; }
.mg-row__body h3 { font-size: 24px; margin-bottom: .3em; }
.mg-row__body p { font-size: 16px; color: var(--c-text-muted); margin: 0; }
.mg-row:hover h3 { color: var(--c-accent-text); }
.mg-row__go { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: var(--c-accent-text); align-self: center; }
.mg-row:hover .mg-row__go { transform: translateX(3px); }

/* ==========================================================================
   14. PROCESS STEPS
   ========================================================================== */

.mg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr); counter-reset: mgstep; }
.mg-steps--4 { grid-template-columns: repeat(4, 1fr); }
.mg-steps > li { margin: 0; padding: 26px 22px; border: 1px solid var(--c-border); border-radius: var(--r-card); background: #fff; }
.mg-steps > li::before {
  counter-increment: mgstep; content: counter(mgstep);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-accent-tint-2); color: var(--c-accent-text);
  font-family: var(--f-head); font-weight: 800; font-size: 15px; margin-bottom: 14px;
}
.mg-steps h3 { font-size: 19px; margin-bottom: .4em; }
.mg-steps p { font-size: 15px; line-height: 1.55; color: var(--c-text-muted); margin: 0; }
.mg-steps--flow { grid-template-columns: 1fr; gap: 0; counter-reset: none; }
.mg-steps--flow > li { border: 0; border-radius: 0; padding: 0; }

/* Ordered narrative list (numbered track) */
.mg-track { list-style: none; counter-reset: mgtrack; margin: 0; padding: 0; display: grid; gap: 18px; }
.mg-track > li {
  margin: 0; position: relative; padding: 0 0 0 62px;
}
.mg-track > li::before {
  counter-increment: mgtrack; content: counter(mgtrack);
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-accent-tint-2); color: var(--c-accent-text);
  font-family: var(--f-head); font-weight: 800; font-size: 17px;
}
.mg-track h3 { font-size: 20px; margin-bottom: .3em; }
.mg-track p { font-size: 16px; color: var(--c-text-muted); margin: 0; }
.mg-band .mg-track > li::before { background: rgba(242,160,44,.16); color: var(--c-accent-warm); }

/* ==========================================================================
   15. EDITORIAL TWO COLUMN
   ========================================================================== */

.mg-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mg-editorial--wide { grid-template-columns: 1.15fr .85fr; }
.mg-editorial--full { grid-template-columns: 1fr; max-width: 860px; }
.mg-editorial p { font-size: 17px; line-height: 1.7; }

/* ==========================================================================
   16. PROSE (rich body copy inside a section)
   ========================================================================== */

.mg-prose { max-width: 74ch; }
.mg-prose h3 { font-size: 24px; margin-top: 1.5em; }
.mg-prose h3:first-child { margin-top: 0; }
.mg-prose h4 { font-size: 19px; margin-top: 1.4em; }
.mg-prose > *:first-child { margin-top: 0; }
.mg-prose ul { list-style: none; padding-left: 0; }
.mg-prose ul > li { position: relative; padding-left: 28px; }
.mg-prose ul > li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent);
}
.mg-prose--wide { max-width: none; }
.mg-band .mg-prose ul > li::before { background: var(--c-accent-warm); }

.mg-ticks { list-style: none; padding-left: 0; }
.mg-ticks > li { position: relative; padding-left: 32px; margin-bottom: .7em; }
.mg-ticks > li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--c-accent-text); font-weight: 700; font-size: 17px;
}
.mg-band .mg-ticks > li::before { color: var(--c-accent-warm); }

/* Source note */
.mg-source { font-size: 14px; color: var(--c-text-meta); border-left: 2px solid var(--c-border); padding-left: 16px; margin-top: 26px; }
.mg-band .mg-source { color: var(--c-on-dark-faint); border-left-color: var(--c-border-dark); }

/* Callout */
.mg-callout {
  background: var(--c-accent-tint); border: 1px solid #F6D9C6;
  border-radius: var(--r-card); padding: 26px 28px;
}
.mg-callout p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. FAQ ACCORDIONS
   ========================================================================== */

.mg-faqs { display: grid; gap: 12px; max-width: 900px; }
.mg-faq {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color .25s var(--ease);
}
.mg-faq[open] { border-color: var(--c-border-hover); }
.mg-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 24px; min-height: 48px;
  font-family: var(--f-head); font-weight: 700; font-size: 19px; line-height: 1.35;
  letter-spacing: -0.02em; color: var(--c-contrast);
}
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary:hover { color: var(--c-accent-text); }
.mg-plus {
  flex: none; width: 26px; height: 26px; position: relative; margin-top: 2px;
  transition: transform .25s var(--ease);
}
.mg-plus::before, .mg-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-accent);
  transform: translate(-50%, -50%);
}
.mg-plus::before { width: 15px; height: 2px; }
.mg-plus::after  { width: 2px; height: 15px; }
.mg-faq[open] .mg-plus { transform: rotate(45deg); }
.mg-faq__body { padding: 0 24px 22px; }
.mg-faq__body p { font-size: 16px; line-height: 1.7; color: var(--c-text-muted); }
.mg-faq__body p:last-child { margin-bottom: 0; }
.mg-faq__body a { font-weight: 600; }

/* ==========================================================================
   18. CHIPS AND AREA STRIPS
   ========================================================================== */

.mg-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.mg-chips li { margin: 0; }
.mg-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 17px; border: 1px solid var(--c-border-input);
  border-radius: var(--r-pill); background: var(--c-surface-subtle);
  font-family: var(--f-body); font-weight: 500; font-size: 15px;
  color: var(--c-text); text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
a.mg-chip:hover { transform: translateY(-2px); border-color: var(--c-accent); background: var(--c-accent-tint); color: var(--c-contrast); }
.mg-chip--static { background: #fff; color: var(--c-text-muted); }
.mg-band .mg-chip { background: rgba(255,255,255,.05); border-color: var(--c-border-dark); color: var(--c-on-dark); }
.mg-band a.mg-chip:hover { border-color: var(--c-accent-warm); background: rgba(255,255,255,.09); color: #fff; }

.mg-areastrip { border-top: 1px solid var(--c-border-light); padding-top: 34px; margin-top: 8px; }

/* ==========================================================================
   19. CREDENTIAL AND PLAN CARDS (fallback pattern C: proof substitution)
   ========================================================================== */

.mg-cred {
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: 28px; background: #fff;
  border-left: 3px solid var(--c-accent);
}
.mg-cred h3 { font-size: 20px; margin-bottom: .4em; }
.mg-cred p { font-size: 15px; line-height: 1.6; color: var(--c-text-muted); }
.mg-cred__ref {
  display: inline-block; margin-top: 14px; font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-meta); background: var(--c-surface-alt);
  padding: 7px 12px; border-radius: var(--r-sm);
}
.mg-band .mg-cred { background: rgba(255,255,255,.05); border-color: var(--c-border-dark); border-left-color: var(--c-accent-warm); }
.mg-band .mg-cred p { color: var(--c-on-dark-muted); }
.mg-band .mg-cred__ref { background: rgba(255,255,255,.07); color: var(--c-on-dark-faint); }

.mg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mg-plan {
  border: 1px solid var(--c-border); border-radius: var(--r-panel);
  padding: 34px 30px; background: #fff;
  display: flex; flex-direction: column;
}
.mg-plan--featured { border-color: var(--c-accent); box-shadow: var(--sh-card); }
.mg-plan__name { font-family: var(--f-head); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--c-contrast); margin: 0 0 10px; }
.mg-plan p { font-size: 16px; color: var(--c-text-muted); }
.mg-plan__tag {
  display: inline-block; align-self: flex-start; margin-bottom: 16px;
  font-family: var(--f-head); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent-text); background: var(--c-accent-tint-2);
  padding: 7px 13px; border-radius: var(--r-pill);
}

/* ==========================================================================
   20. NAP PANEL
   ========================================================================== */

.mg-nappanel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  border: 1px solid var(--c-border); border-radius: var(--r-panel);
  padding: 42px; background: #fff; box-shadow: var(--sh-panel);
}
.mg-nappanel h3 { font-size: 20px; }
.mg-nappanel dl { margin: 0; }
.mg-nappanel dt { font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-meta); margin-top: 22px; }
.mg-nappanel dt:first-child { margin-top: 0; }
.mg-nappanel dd { margin: 6px 0 0; font-size: 17px; color: var(--c-text); }
.mg-nappanel dd a { font-family: var(--f-head); font-weight: 700; font-size: 19px; text-decoration: none; }
.mg-nappanel dd small { display: block; font-size: 14px; color: var(--c-text-meta); margin-top: 3px; }

/* ==========================================================================
   21. FORMS
   ========================================================================== */

.mg-form-shell { position: relative; }
.mg-formcard {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-panel); padding: 40px; box-shadow: var(--sh-form);
}
/* QA cycle 2, S1. A fieldset carries a user agent default of
   min-width: min-content that no author rule overrides, so it cannot shrink
   below its widest child. The widest child here is select#timescale, whose
   min-content contribution Chrome sizes to its longest <option> ("Emergency,
   the gate is unsafe or blocking access", 342px). That propagated a 348px
   fieldset into a 295px content box, and because body uses overflow-x: clip
   the excess was CLIPPED RATHER THAN SCROLLABLE, cutting the right edge off
   every Step 2 control at 375px and below.

   Fixed at all three links in the chain rather than only the fieldset, so a
   long option, a long word or a wide child added later cannot reopen it.
   The copy is approved and is not shortened to suit the layout. */
.mg-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mg-fieldset + .mg-fieldset { margin-top: 34px; }
.mg-grid-fields > * { min-width: 0; }
.mg-field { min-width: 0; }
.mg-legend {
  font-family: var(--f-head); font-weight: 800; font-size: 24px;
  letter-spacing: -0.025em; color: var(--c-contrast);
  margin: 0 0 6px; padding: 0; display: block;
}
.mg-steplabel { font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-text); display: block; margin-bottom: 10px; }
.mg-field { margin-top: 20px; }
.mg-field > label, .mg-fieldlabel {
  display: block; font-family: var(--f-body); font-weight: 600; font-size: 15px;
  color: var(--c-contrast); margin-bottom: 8px;
}
.mg-req { color: var(--c-accent-text); }
.mg-hint { display: block; font-size: 14px; color: var(--c-text-meta); margin-bottom: 8px; font-weight: 400; }

.mg-input, .mg-select, .mg-textarea {
  /* width: 100% does not constrain a min-content contribution, so min-width
     is what actually lets these shrink inside a 1fr track. QA cycle 2, S1. */
  width: 100%; min-width: 0;
  font-family: var(--f-body); font-size: 17px; line-height: 1.5;
  color: var(--c-text); background: #fff;
  border: 1px solid var(--c-border-input); border-radius: var(--r-btn);
  padding: 13px 15px; min-height: 50px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mg-textarea { min-height: 140px; resize: vertical; }
/* Options and the file input inherit a transparent background from the user
   agent, which leaves an automated contrast check with nothing to measure
   against. Both are given an explicit pair. */
.mg-select option { background: #fff; color: var(--c-text); }
.mg-input:focus, .mg-select:focus, .mg-textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(240,90,22,.12);
}
.mg-input:focus-visible, .mg-select:focus-visible, .mg-textarea:focus-visible { outline: 2px solid var(--c-accent-strong); outline-offset: 1px; }
.mg-input[aria-invalid="true"], .mg-textarea[aria-invalid="true"], .mg-select[aria-invalid="true"] { border-color: #B3261E; }

.mg-grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Segmented control */
.mg-segment { display: flex; gap: 10px; flex-wrap: wrap; }
.mg-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mg-segment label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px; cursor: pointer;
  border: 1px solid var(--c-border-input); border-radius: var(--r-btn);
  font-family: var(--f-head); font-weight: 700; font-size: 17px;
  color: var(--c-text); background: #fff;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mg-segment label:hover { border-color: var(--c-accent); }
.mg-segment input:checked + label { background: var(--c-contrast); color: #fff; border-color: var(--c-contrast); }
.mg-segment input:focus-visible + label { outline: 3px solid var(--c-accent-strong); outline-offset: 2px; }

/* Multi select chips */
.mg-chipset { display: flex; flex-wrap: wrap; gap: 10px; }
.mg-chipset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mg-chipset label {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 11px 18px; cursor: pointer;
  border: 1px solid var(--c-border-input); border-radius: var(--r-pill);
  font-size: 16px; color: var(--c-text); background: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.mg-chipset label:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.mg-chipset input:checked + label { background: var(--c-accent-tint); border-color: var(--c-accent); color: var(--c-contrast); font-weight: 600; }
.mg-chipset input:focus-visible + label { outline: 3px solid var(--c-accent-strong); outline-offset: 2px; }

/* Consent checkbox */
.mg-check { display: flex; gap: 13px; align-items: flex-start; margin-top: 22px; }
.mg-check input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--c-accent); }
.mg-check label { font-size: 16px; line-height: 1.55; color: var(--c-text); }

/* Upload zone */
.mg-upload {
  border: 2px dashed var(--c-border-input); border-radius: 9px;
  background: var(--c-surface-subtle);
  padding: 30px; text-align: center;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.mg-upload:hover, .mg-upload.is-drag { border-color: var(--c-accent); background: var(--c-accent-tint); transform: translateY(-2px); }
/* The browser's default file input button is styled by the user agent and its
   default grey-on-grey fails contrast. Styled explicitly instead. */
.mg-upload input[type="file"] { display: block; margin: 14px auto 0; font-size: 15px; max-width: 100%; color: var(--c-text); background: var(--c-surface-subtle); }
.mg-upload input[type="file"]::file-selector-button {
  font-family: var(--f-head); font-weight: 700; font-size: 15px;
  background: var(--c-contrast); color: #fff;
  border: 0; border-radius: var(--r-btn);
  padding: 12px 18px; margin-right: 12px; min-height: 44px; cursor: pointer;
}
.mg-upload input[type="file"]::file-selector-button:hover { background: var(--c-contrast-tint); }
.mg-upload__title { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: var(--c-contrast); margin: 0 0 6px; }
.mg-upload__note { font-size: 14px; color: var(--c-text-meta); margin: 0; }
.mg-upload__files { list-style: none; padding: 0; margin: 14px 0 0; font-size: 14px; color: var(--c-text-muted); }

/* Errors and messages */
.mg-error { display: block; font-size: 14px; font-weight: 600; color: #B3261E; margin-top: 7px; }
.mg-formnote { font-size: 15px; color: var(--c-text-muted); margin: 0 0 4px; }
.mg-alertbox {
  border-radius: var(--r-card); padding: 22px 24px; margin: 0 0 26px;
  border: 1px solid var(--c-border);
}
.mg-alertbox--error { background: #FDF3F2; border-color: #F0C9C5; }
.mg-alertbox--ok { background: var(--c-accent-tint); border-color: #F6D9C6; }
.mg-alertbox h2 { font-size: 26px; margin-bottom: .4em; }
.mg-alertbox ul { margin-bottom: 0; }

.mg-honey { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* .mg-challenge and .mg-challenge__note removed 2026-08-20 with Turnstile.
   Nothing on the site carries either class any more. */

/* ==========================================================================
   22. SCROLL REVEALS
   Native CSS scroll-driven animations only. Never set opacity anywhere in
   these: transform only, so no text can ever rest below full opacity.
   ========================================================================== */

/* QA cycle 1, item 3. opacity has been removed from every from keyframe.
   These are scroll-driven, not time-driven: the user's scroll position holds
   the animation at an arbitrary progress indefinitely, so an intermediate
   opacity is a resting state, not a transient one. At alpha 0.757 the muted
   body colour #5D6377 composited to #848998 over white and measured 3.49:1,
   failing SC 1.4.3 on every page at 375px while passing every static computed
   style check. The designed motion is the translate and the scale; both are
   kept in full, and nothing on the page is ever rendered below full opacity. */
@keyframes mg-in       { from { transform: translateY(22px); } to { transform: none; } }
@keyframes mg-in-soft  { from { transform: translateY(12px); } to { transform: none; } }
@keyframes mg-in-left  { from { transform: translateX(-26px); } to { transform: none; } }
@keyframes mg-in-right { from { transform: translateX(26px); } to { transform: none; } }
@keyframes mg-in-scale { from { transform: scale(.965); } to { transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: mg-in .9s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    [data-reveal="soft"]  { animation-name: mg-in-soft; }
    [data-reveal="left"]  { animation-name: mg-in-left; }
    [data-reveal="right"] { animation-name: mg-in-right; }
    [data-reveal="scale"] { animation-name: mg-in-scale; }
  }
}

/* ==========================================================================
   23. UTILITIES
   ========================================================================== */

.mg-mt-0 { margin-top: 0; }
.mg-mt-s { margin-top: 20px; }
.mg-mt-m { margin-top: 34px; }
.mg-mt-l { margin-top: 48px; }
.mg-centre { text-align: center; }
.mg-maxw { max-width: 780px; }
.mg-divider { border-top: 1px solid var(--c-border-light); margin: 48px 0; }

/* Blog index */
.mg-empty {
  border: 1px dashed var(--c-border-input); border-radius: var(--r-card);
  padding: 46px 40px; background: var(--c-surface-subtle); max-width: 760px;
}
.mg-empty h2 { font-size: 26px; }
.mg-empty p:last-child { margin-bottom: 0; }

.mg-postcard h3 { font-size: 22px; }
.mg-postcard time { display: block; font-size: 14px; color: var(--c-text-meta); margin-bottom: 10px; }

/* Legal pages */
.mg-legalpage { padding: 34px 0 84px; }
.mg-legalpage .mg-prose { max-width: 76ch; }
.mg-legalpage h1 { font-size: 44px; margin-bottom: .3em; }
.mg-legalpage h2 { font-size: 30px; margin-top: 1.6em; }
.mg-legalpage h3 { font-size: 21px; margin-top: 1.5em; }
.mg-legalpage table { font-size: 15px; }
.mg-updated { font-size: 15px; color: var(--c-text-meta); margin-bottom: 30px; }

/* Unresolved build token, rendered visibly so QA can find it. */
.mg-token {
  font-family: var(--f-mono); font-size: .92em;
  /* Navy rather than orange: #C24F12 on the orange tint is 4.49:1, which is
     under AA by a hair. Navy on the same tint is 15.5:1. */
  background: var(--c-accent-tint); color: var(--c-contrast);
  border: 1px dashed var(--c-accent-strong);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Consent banner. Dormant: renders only when something non-essential is
   actually registered. Reject sits beside accept at the same level. */
.mg-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--c-contrast); color: var(--c-on-dark);
  border-top: 3px solid var(--c-accent);
  padding: 22px 0;
  box-shadow: 0 -12px 40px rgba(5,18,38,.28);
}
.mg-consent__inner { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.mg-consent h2 { color: #fff; font-size: 20px; margin-bottom: .3em; }
.mg-consent p { font-size: 15px; margin: 0; color: var(--c-on-dark); }
.mg-consent a { color: #fff; }
.mg-consent__actions { display: flex; gap: 12px; }
.mg-consent .mg-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.mg-consent .mg-btn--secondary:hover { background: rgba(255,255,255,.09); color: #fff; }
/* The dormant footer "Cookie settings" control. Styled as a link so it matches
   the legal bar, but it is a button because it performs an action. */
.mg-legal__prefs {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-body); font-size: 14px; line-height: inherit;
  color: var(--c-on-dark-legal); text-decoration: underline; text-underline-offset: 2px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.mg-legal__prefs:hover { color: #fff; }
@media (max-width: 780px) {
  .mg-consent__inner { grid-template-columns: 1fr; gap: 16px; }
  .mg-consent__actions .mg-btn { flex: 1; }
}

/* ==========================================================================
   24. RESPONSIVE
   Design README breakpoints: 1180, 1080, 1024, 780, 640, 620.
   ========================================================================== */

@media (max-width: 1180px) {
  .mg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mg-stats { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .mg-steps { grid-template-columns: repeat(3, 1fr); }
  .mg-hero__grid { gap: 40px; }
}

@media (max-width: 1080px) {
  .mg-nav, .mg-header__cta .mg-tel, .mg-header__cta .mg-btn { display: none; }
  .mg-burger, .mg-callbtn { display: inline-flex; }
  .mg-header__cta { margin-left: auto; }
  .mg-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 34px 30px; }
  .mg-prefooter__grid { grid-template-columns: 1fr; gap: 26px; }
  .mg-prefooter .mg-actions { justify-content: flex-start; }
}

@media (max-width: 1024px) {
  :root { --pad-x: 24px; }
  h1, .mg-hero h1, .mg-hero--interior h1 { font-size: 42px; letter-spacing: -0.03em; }
  h2, .mg-h2 { font-size: 32px; }
  .mg-h3 { font-size: 28px; }
  .mg-grid--3, .mg-grid--6, .mg-router, .mg-plans { grid-template-columns: repeat(2, 1fr); }
  .mg-section { padding: 64px 0; }
  .mg-band, .mg-prefooter { padding: 60px 0; }
  .mg-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .mg-panel { min-height: 320px; padding: 36px 32px; }
  .mg-editorial, .mg-editorial--wide { gap: 36px; }
  .mg-nappanel { padding: 34px; }
  .mg-formcard { padding: 30px; }
}

@media (max-width: 780px) {
  :root { --pad-x: 20px; }
  h1, .mg-hero h1, .mg-hero--interior h1 { font-size: 33px; letter-spacing: -0.025em; }
  h2, .mg-h2, .mg-prefooter h2 { font-size: 26px; }
  h3, .mg-h3, .mg-row__body h3 { font-size: 21px; }
  body { font-size: 16px; }
  .mg-hero p { font-size: 18px; }
  .mg-grid--2, .mg-grid--3, .mg-grid--4, .mg-grid--6,
  .mg-router, .mg-plans, .mg-steps, .mg-steps--4,
  .mg-editorial, .mg-editorial--wide, .mg-nappanel, .mg-grid-fields {
    grid-template-columns: 1fr;
  }
  .mg-stats { grid-template-columns: repeat(2, 1fr); }
  .mg-section { padding: 52px 0; }
  .mg-section--last { padding-bottom: 60px; }
  .mg-band, .mg-prefooter { padding: 50px 0; }
  .mg-hero { padding: 36px 0 52px; }
  .mg-panel { min-height: 240px; padding: 28px 24px; }
  .mg-panel::after { left: 24px; top: 28px; }
  .mg-panel .mg-panel__head { font-size: 26px; }
  .mg-row { grid-template-columns: 40px 1fr; padding: 20px 6px; }
  .mg-row__go { display: none; }
  .mg-row:hover { padding-left: 12px; }
  .mg-faq summary { font-size: 17px; padding: 18px 18px; }
  .mg-faq__body { padding: 0 18px 18px; }
  .mg-formcard { padding: 24px 20px; }
  .mg-track > li { padding-left: 54px; }
  .mg-legalpage h2 { font-size: 24px; }
}

@media (max-width: 640px) {
  .mg-alert__msg { display: none; }
  .mg-alert .mg-wrap { justify-content: center; gap: 10px; }
}

@media (max-width: 620px) {
  .mg-footer__cols { grid-template-columns: 1fr; }
  .mg-stats { grid-template-columns: 1fr; }
  .mg-actions .mg-btn, .mg-actions .mg-tel { width: 100%; }
  .mg-actions { gap: 12px; }
}

/* QA cycle 2, S2. Below roughly 350px the header ran 8px past the viewport
   (scrollWidth 328 against clientWidth 320), and body's overflow-x: clip made
   that excess unreachable rather than scrollable, so the right edge of the
   hamburger was cut off. .mg-brand was flex: none, so it could not give ground
   to the CTA cluster.

   Scoped to 374px and below on purpose: 375px and 360px were measured clean in
   the cycle 2 re-audit and are left exactly as they are, so this cannot
   regress the widths that already pass. */
@media (max-width: 374px) {
  .mg-header__inner { gap: 14px; }
  .mg-brand { flex: 0 1 auto; min-width: 0; }
  /* Make the wordmark FIT rather than letting it be clipped. Allowing
     .mg-brand to shrink alone stops the overflow but truncates "Mr Gates" to
     "Mr Gate", which is worse than the bug it fixes: a clipped brand name is a
     brand problem, not just a layout one. Reducing the mark and the wordmark
     at this width buys back the ~14px needed for the full name. The overflow
     rule stays underneath as a guard so nothing can push past the edge again,
     but at 320px it no longer has anything to trim. */
  .mg-brand img { height: 38px; }
  .mg-brand__text { font-size: 18px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
}

@media print {
  .mg-header, .mg-alert, .mg-prefooter, .mg-footer__areas, .mg-progress, .mg-mobile { display: none; }
}

/* ==========================================================================
   PHOTOGRAPHY  (added 2026-08-31 when the client photography arrived)
   Placed by [mg_img] / [mg_gallery] in inc/media.php. Intrinsic width/height
   from wp_get_attachment_image keeps CLS at 0; object-fit cover crops the
   fixed-ratio variants without distortion.
   ========================================================================== */
.mg-figure { margin: 0; line-height: 0; }
.mg-figure__img, .mg-figure img { display: block; width: 100%; height: auto; }
.mg-figure__cap,
.mg-gallery__cap {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  line-height: 1.55; color: var(--c-text-meta); margin: 10px 2px 0; text-align: left;
}

/* A natural-ratio image inside a page body */
.mg-figure--content {
  border-radius: var(--r-card); overflow: clip; box-shadow: var(--sh-card); margin: 30px 0;
}

/* Fixed-ratio, cover-cropped tile */
.mg-figure--cover { border-radius: var(--r-card); overflow: clip; background: var(--c-contrast); }
.mg-figure--cover .mg-figure__img { height: 100%; object-fit: cover; object-position: center 42%; }

/* Hero image: takes the place of the typographic panel in a hero grid */
.mg-figure--hero {
  border-radius: var(--r-card); overflow: clip; background: var(--c-contrast);
  box-shadow: var(--sh-panel); aspect-ratio: 4 / 5; min-height: 420px; max-height: 600px;
}
.mg-figure--hero .mg-figure__img { height: 100%; object-fit: cover; object-position: center 42%; }

/* Image on a dark band: takes the place of .mg-panel--on-dark */
.mg-figure--onband {
  border-radius: var(--r-card); overflow: clip;
  border: 1px solid var(--c-border-dark); box-shadow: var(--sh-badge); aspect-ratio: 4 / 3;
}
.mg-figure--onband .mg-figure__img { height: 100%; object-fit: cover; object-position: center 42%; }

/* Galleries */
.mg-gallery { display: grid; gap: 16px; }
.mg-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.mg-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.mg-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.mg-gallery .mg-figure {
  border-radius: var(--r-card); overflow: clip; background: var(--c-contrast);
  box-shadow: var(--sh-card); aspect-ratio: 4 / 3;
}
.mg-gallery .mg-figure__img { height: 100%; object-fit: cover; object-position: center 42%; transition: transform .5s var(--ease); }
.mg-gallery a.mg-figure:hover .mg-figure__img,
.mg-gallery .mg-figure:hover .mg-figure__img { transform: scale(1.045); }
.mg-gallery__cap { margin-top: 14px; }

@media (max-width: 900px) {
  .mg-gallery--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .mg-gallery--2, .mg-gallery--3, .mg-gallery--4 { grid-template-columns: repeat(2, 1fr); }
  .mg-figure--hero { aspect-ratio: 3 / 2; min-height: 0; max-height: 460px; }
}
@media (max-width: 520px) {
  .mg-gallery--2, .mg-gallery--3, .mg-gallery--4 { grid-template-columns: 1fr; }
}

/* Cover slideshow: crossfading slides inside a hero figure. mg.js drives the
   timing and the dots; with JS off the first slide stays shown. */
.mg-slideshow { position: relative; display: block; }
.mg-slideshow .mg-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity 1s var(--ease); border-radius: inherit; overflow: clip;
  background: var(--c-contrast);
}
.mg-slideshow .mg-slide.is-active { opacity: 1; }
.mg-slideshow .mg-slide .mg-figure__img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.mg-slideshow__dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; gap: 9px; justify-content: center; z-index: 3; }
.mg-slideshow__dot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.65); background: rgba(255,255,255,.35);
  cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease);
}
.mg-slideshow__dot:hover { transform: scale(1.15); }
.mg-slideshow__dot.is-active { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .mg-slideshow .mg-slide { transition: none; }
}

/* Footer brand lockup: reversed MG badge plus the two-tone wordmark and the
   approved strapline, per the 2026-09-20 brand pack. */
.mg-footer__brandrow { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.mg-footer__badge { height: 46px; width: auto; }
.mg-footer__brand { display: block; }
.mg-footer__strap {
  display: block; font-family: var(--f-head); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-on-dark-muted);
  margin-top: 2px;
}