/* Island Marine Repair — Design tokens. Single source of truth for all CSS custom properties. */
:root {
  /* ═══ S&S Marine Repair — final palette ═══════════════════════════════
     These eleven values are the ONLY colours in the design. Navy is a
     background in exactly three places — header, hero, footer. Everything
     else is cream or white with gold CTAs. Cyan is reserved for numeric and
     small decorative highlights; it never appears in a CTA.
     Every older token below is an alias onto one of these, so the ~5,000
     lines of rules written against the previous names keep working. */

  /* Core palette */
  --navy: #183060;
  --gold: #F0C030;
  --gold-light: #F4D24F;
  --gold-dark: #D8A830;
  --cyan: #60D8F0;
  --cream: #FAF3DB;
  --cream-alt: #F1E4BF;
  --white: #FFFFFF;
  --ink: #2A2210;
  --ink-body: #33414F;
  --link: #B8780A;
  --border-card: #E7D8AB;

  /* Legacy aliases — remap so existing rules don't break */
  --bg: var(--cream);
  --bg-dark: var(--navy);
  --surface: var(--navy);
  --surface-2: #1F3970;
  --text: var(--ink);
  --text-muted: var(--ink-body);
  --text-subtle: #6B7A8A;
  --accent: var(--gold);
  --accent-hover: var(--gold-dark);
  --accent-light: var(--gold-light);
  --accent-deep: var(--link);
  --highlight: var(--cyan);
  --card: var(--white);
  --card-white: var(--white);
  --card-ink: var(--ink);
  --border-light: var(--border-card);
  --section-light: var(--cream);
  --section-light-alt: var(--cream-alt);
  --on-accent: var(--navy);

  /* Text on dark sections */
  --text-on-dark: var(--white);
  --text-muted-on-dark: rgba(255,255,255,0.85);

  /* Effects */
  --shadow-card: 0 4px 24px rgba(24,48,96,0.08);
  --shadow-card-hover: 0 8px 32px rgba(24,48,96,0.12);
  --focus-ring: rgba(240,192,48,0.65);
  --border-on-dark: rgba(255,255,255,0.10);

  /* ── Second-order aliases (referenced by existing rules) ───────────── */
  --ink-muted: var(--ink-body);
  --ink-subtle: #6B7A8A;
  --card-muted: var(--ink-body);
  --text-subtle-on-dark: rgba(255,255,255,0.72);
  --accent-soft: rgba(240,192,48,0.16);
  --btn-primary: var(--gold);
  --btn-primary-hover: var(--gold-dark);
  --highlight-hover: #0B485C;
  --highlight-light: var(--cyan);
  --tint: var(--cream-alt);
  --border: rgba(42,34,16,0.12);
  --border-strong: rgba(42,34,16,0.22);
  --border-strong-on-dark: rgba(255,255,255,0.20);
  --shadow-card-on-dark: 0 18px 40px -22px rgba(0,0,0,0.65);

  /* Gold gradient — the single CTA treatment, used everywhere a primary
     button or CTA band appears. No blue, cyan or teal stop, ever. */
  --grad-gold: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  --grad-gold-135: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);

  /* RGB channel versions for rgba() transparency (design used --*-rgb) */
  --surface-rgb: 24, 48, 96;
  --surface-2-rgb: 31, 57, 112;
  --bg-rgb: 24, 48, 96;
  --accent-rgb: 240, 192, 48;

  /* Poppins — homepage (Claude Design) display face */
  --font-poppins: "Poppins", system-ui, sans-serif;

  --success: #34C796;
  --warning: #F2B23C;
  --danger: #F2615C;

  /* Typography, spacing, radius, shadow, easing */
  --font-display:"Archivo",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif;
  --fs-hero:clamp(2.4rem,5vw,3.8rem); --fs-h1:2.25rem; --fs-h2:1.75rem; --fs-h3:1.25rem; --fs-body:1.0625rem; --fs-sm:0.9rem;
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.65;
  --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --container:1180px; --container-pad:28px; --content-measure:70ch;
  --radius-md:12px; --radius-lg:16px; --radius-btn:11px; --radius-pill:999px;
  --glow-accent:0 0 0 1px rgba(240,192,48,0.22),0 24px 60px -30px rgba(240,192,48,0.35);
  --ease:0.18s ease;
}

/*
 * Island Marine Repair — main.css
 * Dark nautical design. All colors via CSS custom properties (tokens.css).
 * No hardcoded hex values below this comment.
 * WCAG AA: --text on --bg ≈ 15:1 ✓  --text-muted on --bg ≈ 6:1 ✓
 *          --on-accent on --accent ≈ 3.8:1 ✓ (large/bold UI elements only)
 *          --text-subtle is AA for large text only — used decoratively.
 */

/* ── Structural tokens (z-index, not design tokens) ─────────────────── */
:root {
  --z-header:       100;
  --z-mega:         200;
  --z-floating-cta: 250; /* above header/mega/content, below the mobile nav drawer */
  --z-post-sidebar: 275; /* single-post sidebar drawer: above global CTA, below mega-menu drawer */
  --z-mobile-nav:   300;

  /* Legacy spacing aliases so inline template styles (var(--sp-*)) keep working */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: var(--space-4); --sp-5: 1.25rem;
  --sp-6: var(--space-5); --sp-8: var(--space-6);
  --sp-10: 2.5rem;  --sp-12: var(--space-7);
  --sp-16: var(--space-8); --sp-20: 5rem; --sp-24: var(--space-9);
}

/* ═══════════════════════════════════════════════════════════════════════
   1. Reset / Base
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

/* overflow-x: clip on BOTH html and body so nothing can create a horizontal
   scroll region. clip (not hidden) does not establish a scroll container, so
   the sticky header keeps working. This is the defensive guard; the real fix
   for the reported overflow is containing the Trustindex widget below. */
html { scroll-behavior: smooth; overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}

body {
  font-family:      var(--font-body);
  font-size:        var(--fs-body);
  line-height:      var(--lh-body);
  color:            var(--ink-body);
  background:       var(--cream);
  /* Defensive: no element should ever push the page wider than the viewport on
     mobile. `clip` (not `hidden`) does NOT create a scroll container, so the
     sticky header keeps working; `hidden` here would break it. */
  overflow-x:       clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
/* Any iframe (Google Maps embeds, oEmbeds, plugin widgets) stays within its
   box — a hardcoded width="600" can never force horizontal overflow. */
iframe { max-width: 100%; }

a {
  color:           var(--link);
  text-decoration: underline;
  transition:      color var(--ease);
}
/* Hover DARKENS rather than going to --gold-dark. --gold-dark on --cream is
   1.98:1 — a hover state that erases the link. Gold-on-hover is kept where it
   works: the on-dark scopes below flip hover to bright --gold (7.6:1 on navy). */
a:hover { color: var(--ink); text-decoration: underline; }

a:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius:  4px;
}

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family:   var(--font-display);
  line-height:   var(--lh-snug);
  color:         var(--ink);
  font-weight:   700;
  margin-bottom: var(--space-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.1rem; }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   2. Layout
   ═══════════════════════════════════════════════════════════════════════ */
.imr-container {
  width:          100%;
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
}
.imr-container--narrow { max-width: var(--content-measure); }

.imr-section     { padding-block: var(--space-8); background: var(--bg); }
.imr-section--sm { padding-block: var(--space-6); }
.imr-section--lg { padding-block: var(--space-9); }
.imr-section--alt { background: var(--surface); }

.imr-grid {
  display:               grid;
  gap:                   var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.imr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.imr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.imr-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .imr-grid--2,
  .imr-grid--3,
  .imr-grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .imr-grid--3,
  .imr-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. Skip link
   ═══════════════════════════════════════════════════════════════════════ */
.imr-skip-link {
  position:        absolute;
  top:             -100%;
  left:            var(--space-4);
  z-index:         9999;
  padding:         0.5rem 1.25rem;
  background:      var(--accent);
  color:           var(--on-accent);
  font-family:     var(--font-body);
  font-weight:     600;
  text-decoration: none;
  border-radius:   0 0 var(--radius-md) var(--radius-md);
  transition:      top var(--ease);
}
.imr-skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   4. Header
   ═══════════════════════════════════════════════════════════════════════ */
/* Sticky header.
   Two states, driven by the .is-stuck class that main.js toggles past the
   scroll offset in the header's data-sticky-offset:
     • normal   — solid surface, full-size logo, contained max-width
     • is-stuck — translucent + backdrop blur, compact height, smaller logo
   Sizes are custom properties so both states animate the same declarations. */
.imr-site-header {
  --header-h:    84px;
  --logo-h:      56px;
  position:      sticky;
  top:           0;
  z-index:       var(--z-header);
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  transition:    background-color 250ms ease, box-shadow 250ms ease,
                 border-color 250ms ease, backdrop-filter 250ms ease;
}

.imr-site-header.is-stuck {
  --header-h:        60px;
  --logo-h:          30px; /* ~54% of normal */
  background:        color-mix(in srgb, var(--surface) 72%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow:        0 6px 24px rgb(0 0 0 / 0.28);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter:         saturate(180%) blur(14px);
}

/* Browsers without backdrop-filter keep a solid bar rather than an
   unreadable translucent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .imr-site-header.is-stuck { background: var(--surface); }
}

.imr-header-inner {
  display:               grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | actions */
  align-items:           center;
  gap:                   2rem;
  min-height:            var(--header-h);
  transition:            min-height 250ms ease;
}

.imr-header-logo { min-width: 0; }
.imr-header-logo a { display: flex; align-items: center; text-decoration: none; }

/* Logo scales via height; width follows the intrinsic ratio. */
.imr-header-logo__img {
  height:     var(--logo-h);
  width:      auto;
  max-width:  100%;
  display:    block;
  transition: height 250ms ease;
}

.imr-site-name {
  font-family: var(--font-display);
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--text);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .imr-site-header,
  .imr-header-inner,
  .imr-header-logo__img { transition: none; }
}

.imr-site-nav {
  display:         flex;
  justify-content: center; /* center the nav list within its grid cell */
  min-width:       0;
}

.imr-header-actions {
  display:      flex;
  align-items:  center;
  gap:          0.75rem;
  justify-self: end;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. Primary nav — desktop
   ═══════════════════════════════════════════════════════════════════════ */
.imr-nav-list {
  display:     flex;
  align-items: center;
  gap:         0.25rem; /* additional gap; main spacing lives in link padding */
  list-style:  none;
}

/* Each item is a flex row — link label and caret toggle sit on the same line */
.imr-nav-item {
  position:    relative;
  display:     flex;
  align-items: stretch;
}

.imr-nav-link {
  display:         flex;
  align-items:     center;
  padding:         0.5rem 0.875rem;  /* ~28 px visual gap between adjacent items */
  white-space:     nowrap;           /* never wrap label to a second line */
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     500;
  color:           var(--text-muted);
  text-decoration: none;
  border-radius:   var(--radius-md);
  transition:      color var(--ease), background var(--ease);
}

/* Reduce right gap when a caret button follows — the two form one visual pill */
.imr-has-sub > .imr-nav-link,
.imr-has-mega > .imr-nav-link {
  padding-right: 0.25rem;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.imr-nav-link:hover,
.imr-nav-item--current > .imr-nav-link {
  color:      var(--accent-light);
  background: var(--accent-soft);
}
.imr-nav-link:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Toggle button — snug against the label, completes the pill shape */
.imr-sub-toggle,
.imr-mega-toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0 0.625rem 0 0.25rem;
  background:      none;
  border:          none;
  border-radius:   0 var(--radius-md) var(--radius-md) 0;
  cursor:          pointer;
  color:           var(--text-muted);
  transition:      color var(--ease), background var(--ease);
}

/* Hovering anywhere in the item highlights both link and toggle as a unit */
.imr-nav-item:hover > .imr-sub-toggle,
.imr-nav-item:hover > .imr-mega-toggle,
.imr-nav-item--current > .imr-sub-toggle,
.imr-nav-item--current > .imr-mega-toggle {
  color:      var(--accent-light);
  background: var(--accent-soft);
}

.imr-sub-toggle:focus-visible,
.imr-mega-toggle:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius:  var(--radius-md);
}

.imr-chevron {
  display:       block;
  width:         6px;
  height:        6px;
  border-right:  1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform:     rotate(45deg);
  transition:    transform var(--ease);
}
[aria-expanded="true"] .imr-chevron { transform: rotate(-135deg); }

/* ═══════════════════════════════════════════════════════════════════════
   6. Normal dropdown
   ═══════════════════════════════════════════════════════════════════════ */
.imr-sub-menu {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  z-index:       var(--z-mega);
  min-width:     200px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-card);
  padding:       0.5rem 0;
  opacity:       0;
  visibility:    hidden;
  transform:     translateY(6px);
  transition:    opacity var(--ease), transform var(--ease), visibility var(--ease);
  list-style:    none;
}
.imr-has-sub:hover > .imr-sub-menu,
.imr-has-sub:focus-within > .imr-sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.imr-sub-link {
  display:         block;
  padding:         0.5rem 1rem;
  color:           var(--text-muted);
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  transition:      background var(--ease), color var(--ease);
}
.imr-sub-link:hover { background: var(--accent-soft); color: var(--text); }
.imr-sub-link:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: -3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. Mega panel
   ═══════════════════════════════════════════════════════════════════════ */
.imr-mega-panel {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          50%;
  transform:     translateX(-50%) translateY(6px);
  z-index:       var(--z-mega);
  width:         min(900px, 90vw);
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-card);
  padding:       var(--space-5);
  opacity:       0;
  visibility:    hidden;
  transition:    opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.imr-has-mega:hover > .imr-mega-panel,
.imr-has-mega:focus-within > .imr-mega-panel {
  opacity:    1;
  visibility: visible;
  transform:  translateX(-50%) translateY(0);
}

.imr-mega-cols {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--space-5);
}

.imr-mega-col-title {
  display:         block;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     600;
  color:           var(--text-muted);
  text-transform:  uppercase;
  letter-spacing:  0.06em;
  margin-bottom:   0.75rem;
  text-decoration: none;
}
a.imr-mega-col-title:hover { color: var(--accent-light); }

/* Category title as a disclosure button (services mega). On desktop it is a
   plain, non-interactive heading — the chevron is hidden and the links are
   always shown; the accordion only engages in the mobile drawer. */
.imr-mega-col-toggle {
  width:      100%;
  background: none;
  border:     0;
  padding:    0;
  cursor:     default;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  gap:        0.5rem;
  text-align: left;
}
.imr-mega-col-chevron { display: none; }

/* Auto panels (Services / Brands) — wider than a menu-built mega, since they
   carry icon+blurb rows and logo tiles. */
.imr-mega-panel--services { width: min(1080px, 94vw); }
.imr-mega-panel--brands   { width: min(760px, 94vw); }

/* Auto panels are wide, so centring them under their trigger overflowed the
   viewport (Brands sits on the right — its centred panel spilled past the edge
   and collided with the Location item). Anchor each to its own side of the
   trigger instead, and never let a panel exceed the viewport width. */
.imr-mega-panel--services,
.imr-mega-panel--brands {
  max-width: calc(100vw - 2rem);
}
.imr-mega-panel--services {
  left:      0;
  right:     auto;
  transform: translateY(6px);
}
.imr-has-mega:hover > .imr-mega-panel--services,
.imr-has-mega:focus-within > .imr-mega-panel--services,
.imr-mega-panel--services.is-open { transform: translateY(0); }

.imr-mega-panel--brands {
  left:      auto;
  right:     0;
  transform: translateY(6px);
}
.imr-has-mega:hover > .imr-mega-panel--brands,
.imr-has-mega:focus-within > .imr-mega-panel--brands,
.imr-mega-panel--brands.is-open { transform: translateY(0); }
.imr-mega-cols--services  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Narrow desktop / tablet: 4 columns of service rows stop fitting. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .imr-mega-cols--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imr-mega-panel--services { width: min(720px, 94vw); }
}

/* Service row: icon + name + 8-word blurb */
.imr-mega-svc {
  display:         flex;
  gap:             0.6rem;
  align-items:     flex-start;
  padding:         0.4rem 0.5rem;
  border-radius:   var(--radius-sm);
  text-decoration: none;
  transition:      background-color var(--ease);
}
.imr-mega-svc:hover,
.imr-mega-svc:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.imr-mega-svc__icon {
  color:      var(--accent);
  font-size:  0.95rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  width:      1.1rem;
  text-align: center;
}
.imr-mega-svc__body { display: block; min-width: 0; }
.imr-mega-svc__name {
  display:     block;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  font-weight: 600;
  color:       var(--text);
  line-height: 1.3;
}
.imr-mega-svc__desc {
  display:     block;
  font-size:   0.75rem;
  color:       var(--text-muted);
  line-height: 1.35;
  margin-top:  0.1rem;
}

/* Brand logo tiles */
.imr-mega-brandgrid {
  list-style:            none;
  margin:                0;
  padding:               0;
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   var(--space-4);
}
.imr-mega-brandtile {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  padding:         var(--space-4);
  min-height:      88px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  background:      var(--surface);
  text-decoration: none;
  transition:      border-color var(--ease), transform var(--ease);
}
.imr-mega-brandtile:hover,
.imr-mega-brandtile:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.imr-mega-brandtile img { max-height: 30px; width: auto; max-width: 100%; object-fit: contain; }
.imr-mega-brandtile__name {
  font-size: 0.7rem;
  color:     var(--text-muted);
  text-align: center;
}

/* Shared panel footer ("View All …") */
.imr-mega-foot {
  margin-top:  var(--space-5);
  padding-top: var(--space-4);
  border-top:  1px solid var(--border);
  text-align:  right;
}
.imr-mega-viewall {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     600;
  color:           var(--accent-light);
  text-decoration: none;
}
.imr-mega-viewall:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .imr-mega-svc, .imr-mega-brandtile { transition: none; }
  .imr-mega-brandtile:hover { transform: none; }
}

.imr-mega-links { list-style: none; margin: 0; padding: 0; }
.imr-mega-links li + li { margin-top: 2px; }

.imr-mega-link {
  display:         block;
  padding:         0.35rem 0;
  color:           var(--text-muted);
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  transition:      color var(--ease);
}
.imr-mega-link:hover { color: var(--accent-light); }
.imr-mega-link:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius:  4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. Hamburger
   ═══════════════════════════════════════════════════════════════════════ */
.imr-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           40px;
  height:          40px;
  padding:         0.5rem;
  background:      none;
  border:          1px solid var(--border-strong);
  border-radius:   var(--radius-md);
  cursor:          pointer;
}
.imr-hamburger:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
}

.imr-hamburger__bar {
  display:       block;
  width:         100%;
  height:        2px;
  background:    var(--text);
  border-radius: var(--radius-pill);
  transition:    transform var(--ease), opacity var(--ease);
}
.imr-hamburger[aria-expanded="true"] .imr-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.imr-hamburger[aria-expanded="true"] .imr-hamburger__bar:nth-child(2) { opacity: 0; }
.imr-hamburger[aria-expanded="true"] .imr-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════════════
   9. Mobile nav (≤ 1024 px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .imr-hamburger { display: flex; }

  /* Sticky still applies on small screens, just with a shorter bar; the nav
     itself lives behind the hamburger drawer. The logo is a square badge, so
     it reads smaller than a wordmark at the same height — keep it a clear
     medium (52px, ~93% of the 56px desktop logo) and only ease to 42px when
     stuck rather than shrinking it to a thumbnail. */
  .imr-site-header          { --header-h: 72px; --logo-h: 52px; }
  .imr-site-header.is-stuck { --header-h: 60px; --logo-h: 42px; }

  /* Switch grid to 2-column so hamburger sits right-aligned against the logo */
  .imr-header-inner {
    grid-template-columns: auto 1fr; /* logo | actions — nav is fixed offscreen */
    gap:                   1rem;
  }
  .imr-header-actions { justify-self: end; }

  .imr-site-nav {
    /* Reset flex centering — the drawer doesn't need it */
    display:     block;
    justify-content: initial;
    /* Drawer styles */
    position:    fixed;
    inset:       0 0 0 auto;
    z-index:     var(--z-mobile-nav);
    width:       min(320px, 85vw);
    background:  var(--surface);
    box-shadow:  var(--shadow-card);
    padding:     4rem var(--space-5) var(--space-7);
    overflow-y:  auto;
    /* Contain scroll so reaching the drawer's top/bottom never chains to the
       page (a known iOS scroll-freeze trigger). */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform:   translateX(100%);
    /* When closed the drawer sits just off the right edge but is STILL a live
       fixed layer; a touch starting there was being routed to it instead of
       the page, which read as a random scroll freeze. Take it out of the hit-
       testing and a11y tree entirely until it opens. */
    visibility:     hidden;
    pointer-events: none;
    transition:  transform var(--ease), visibility var(--ease);
    border-left: 1px solid var(--border);
  }
  .imr-site-nav.is-open {
    transform:      translateX(0);
    visibility:     visible;
    pointer-events: auto;
  }

  /* Dark overlay behind the drawer */
  .imr-site-nav::before {
    content:        '';
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,0.65);
    z-index:        -1;
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--ease);
  }
  .imr-site-nav.is-open::before { opacity: 1; pointer-events: auto; }

  .imr-nav-list { flex-direction: column; align-items: stretch; gap: 0; }

  /* Each top-level row gets a divider so items are visually distinct.
     flex-wrap is the fix for the accordion overlap: in the drawer the mega /
     sub panels become position:static (in-flow), so they are flex siblings of
     the link + toggle. Without wrapping they were crammed onto the same row as
     the label ("Our Services" overlapping the category buttons). Wrapping drops
     the full-width panel onto its own row below; align-content:flex-start keeps
     the two rows tight with no gap. */
  .imr-nav-item {
    align-items:   center;
    flex-wrap:     wrap;
    align-content: flex-start;
    border-bottom: 1px solid var(--border);
  }

  .imr-has-sub > .imr-nav-link,
  .imr-has-mega > .imr-nav-link {
    padding-right: 0.25rem; /* keep caret tight in drawer too */
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  .imr-nav-link {
    flex:        1;       /* stretch to fill available width minus the toggle */
    display:     flex;
    align-items: center;
    font-size:   var(--fs-body);
    min-height:  48px;    /* ≥44px tap target */
    padding:     0.6rem 0.5rem 0.6rem 0.75rem;
    white-space: normal;  /* allow wrapping in the narrow drawer */
  }

  .imr-sub-toggle,
  .imr-mega-toggle {
    align-self: stretch;
    min-width:  48px;     /* ≥44px tap target */
    padding:    0 0.875rem;
  }

  /* Flatten mega + sub menus into inline disclosure panels. flex-basis:100%
     (paired with the nav-item's flex-wrap) forces the panel onto its own row
     below the link + toggle rather than sharing their row. */
  .imr-mega-panel,
  .imr-sub-menu {
    position:      static;
    opacity:       1;
    visibility:    visible;
    transform:     none;
    box-shadow:    none;
    border:        none;
    border-top:    1px solid var(--border);
    border-radius: 0;
    background:    transparent;
    display:       none;
    padding:       0.5rem 0 0.5rem 1rem;
    width:         100%;
    flex-basis:    100%;
    order:         1;      /* always after the link + toggle, whatever the source order */
  }
  .imr-mega-panel.is-open,
  .imr-sub-menu.is-open { display: block; }

  .imr-mega-cols { grid-template-columns: 1fr; gap: 0.5rem; }
  .imr-mega-col-title { margin-bottom: 0.5rem; }

  /* Auto panels flatten with the rest: full width, single column, and the
     blurbs drop so the drawer stays scannable on a phone. */
  .imr-mega-panel--services,
  .imr-mega-panel--brands       { width: 100%; max-width: none; left: auto; right: auto; }
  .imr-mega-cols--services      { grid-template-columns: 1fr; gap: 0; }
  .imr-mega-svc__desc           { display: none; }
  .imr-mega-brandgrid           { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .imr-mega-brandtile           { min-height: 64px; padding: 0.5rem; }

  /* Services categories become an independent accordion: each title is a
     tappable disclosure and its links collapse until opened. Keeps the panel
     from being one giant list. */
  .imr-mega-cols--services .imr-mega-col { border-top: 1px solid var(--border); }
  .imr-mega-col-toggle {
    cursor:      pointer;
    min-height:  48px;                 /* comfortable tap target */
    margin:      0;
    padding:     0.5rem 0.25rem;
    color:       var(--text);          /* brighter than desktop's muted heading */
  }
  .imr-mega-col-chevron { display: block; }
  .imr-mega-col-toggle[aria-expanded='true'] .imr-mega-col-chevron { transform: rotate(180deg); }

  /* Links inside a services category are hidden until that category opens.
     Brand tiles are not an accordion — 9 tiles in a 3-up grid is fine. */
  .imr-mega-cols--services .imr-mega-links { display: none; padding-bottom: 0.5rem; }
  .imr-mega-cols--services .imr-mega-col.is-open .imr-mega-links { display: block; }

  /* Every service row is a full-width ≥44px tap target in the drawer. */
  .imr-mega-svc { padding: 0.6rem 0.5rem; min-height: 44px; }
  .imr-mega-brandtile__name     { display: none; }
  .imr-mega-foot                { text-align: left; }

  /* Hide phone button in header on mobile — it's in the footer */
  .imr-header-phone { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   10. Buttons
   ═══════════════════════════════════════════════════════════════════════ */
.imr-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  padding:         0.75rem 1.5rem;
  font-family:     var(--font-body);
  font-size:       var(--fs-body);
  font-weight:     600;
  line-height:     1;
  text-decoration: none;
  border:          2px solid transparent;
  border-radius:   var(--radius-btn);
  cursor:          pointer;
  transition:      background var(--ease), color var(--ease), border-color var(--ease);
}
.imr-btn:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 3px;
}

.imr-btn--primary {
  background:   var(--btn-primary);
  color:        var(--on-accent);
  border-color: var(--btn-primary);
}
.imr-btn--primary:hover {
  background:   var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color:        var(--on-accent);
}

.imr-btn--outline {
  background:   transparent;
  color:        var(--text);
  border-color: var(--border-strong);
}
.imr-btn--outline:hover {
  border-color: var(--accent-light);
  color:        var(--accent-light);
}

/* Named style: Outline — transparent with an accent border */
.imr-btn--outline-accent {
  background:   transparent;
  color:        var(--accent-light);
  border-color: var(--accent);
}
.imr-btn--outline-accent:hover {
  background:   var(--accent-soft);
  border-color: var(--accent-light);
  color:        var(--accent-light);
}

/* Named style: Ghost — subtle low-contrast background, no border */
.imr-btn--ghost {
  background:   var(--surface-2);
  color:        var(--text-muted);
  border-color: transparent;
}
.imr-btn--ghost:hover {
  background: var(--surface);
  color:      var(--text);
}

.imr-btn--lg { padding: 1rem 2rem; }
.imr-btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════════════════════════════════
   11. Hero
   ═══════════════════════════════════════════════════════════════════════ */
.imr-hero {
  position:      relative;
  display:       flex;
  align-items:   center;
  min-height:    520px;
  padding-block: var(--space-9);
  background:    var(--bg);
  overflow:      hidden;
}

/* Ambient accent glow pulsing up from behind the content */
.imr-hero::before {
  content:        '';
  position:       absolute;
  bottom:         -10%;
  left:           50%;
  transform:      translateX(-50%);
  width:          70%;
  height:         60%;
  background:     radial-gradient(ellipse, rgba(43,143,224,0.18) 0%, transparent 68%);
  pointer-events: none;
  z-index:        0;
}

.imr-hero__bg {
  position:   absolute;
  inset:      0;
  object-fit: cover;
  width:      100%;
  height:     100%;
  z-index:    0;
  opacity:    0.16;
}

.imr-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to bottom, rgba(7,22,44,0.72) 0%, rgba(7,22,44,0.45) 100%);
  z-index:    1;
}

.imr-hero__inner {
  position:       relative;
  z-index:        2;
  max-width:      var(--container);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
}

.imr-hero__heading {
  font-family:   var(--font-display);
  font-size:     var(--fs-hero);
  line-height:   var(--lh-tight);
  color:         var(--text);
  margin-bottom: var(--space-5);
  max-width:     26ch;
}

.imr-hero__subtext {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  line-height:   var(--lh-body);
  color:         var(--text-muted);
  margin-bottom: var(--space-6);
  max-width:     54ch;
}

.imr-hero__actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         1rem;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. Trust bar
   ═══════════════════════════════════════════════════════════════════════ */
.imr-trust-bar {
  background:    var(--surface);
  border-block:  1px solid var(--border);
  padding-block: var(--space-4);
}

.imr-trust-bar__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-6);
}

.imr-trust-bar__brand-name {
  font-family:    var(--font-display);
  font-size:      var(--fs-sm);
  font-weight:    600;
  color:          var(--text-muted);
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. Cards
   ═══════════════════════════════════════════════════════════════════════ */
.imr-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  transition:    background var(--ease), box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.imr-card:hover {
  background:   var(--surface-2);
  box-shadow:   var(--shadow-card);
  border-color: var(--border-strong);
  transform:    translateY(-2px);
}

.imr-card__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.75rem;
}
.imr-card__title a { color: var(--text); text-decoration: none; }
.imr-card__title a:hover { color: var(--accent-light); }

.imr-card__text {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  line-height:   var(--lh-body);
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. Section headings
   ═══════════════════════════════════════════════════════════════════════ */
.imr-section-heading {
  text-align:    center;
  margin-bottom: var(--space-7);
}
.imr-section-heading__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin-bottom: 0.75rem;
}
.imr-section-heading__sub {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--text-muted);
  max-width:     54ch;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. Services grid + Why us + Service area
   ═══════════════════════════════════════════════════════════════════════ */
.imr-services-grid { background: var(--bg); }

/* Services — category filter tabs */
.imr-svc-tabs {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             0.75rem;
  margin-bottom:   var(--space-6);
}
.imr-svc-tab {
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     600;
  padding:         0.55rem 1.15rem;
  border-radius:   var(--radius-pill);
  background:      transparent;
  color:           var(--text-muted);
  border:          1px solid var(--border-strong);
  cursor:          pointer;
  transition:      background var(--ease), color var(--ease), border-color var(--ease);
}
.imr-svc-tab:hover { color: var(--text); border-color: var(--accent); }
.imr-svc-tab.is-active {
  background:   var(--accent);
  color:        var(--on-accent);
  border-color: var(--accent);
}
.imr-svc-tab:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Hide cards filtered out by the active tab */
.imr-svc-card.is-hidden { display: none; }

/* Plain "Learn more →" text link (no box) with arrow slide on hover */
.imr-link-arrow {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     600;
  color:           var(--accent);
  text-decoration: none;
}
.imr-link-arrow:hover { color: var(--accent-light); }
.imr-link-arrow__icon {
  display:    inline-block;
  transition: transform var(--ease);
}
.imr-link-arrow:hover .imr-link-arrow__icon,
.imr-link-arrow:focus-visible .imr-link-arrow__icon {
  transform: translateX(5px);
}
.imr-link-arrow:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius:  4px;
}
@media (prefers-reduced-motion: reduce) {
  .imr-link-arrow__icon { transition: none; }
  .imr-link-arrow:hover .imr-link-arrow__icon,
  .imr-link-arrow:focus-visible .imr-link-arrow__icon { transform: none; }
}

.imr-why-us { background: var(--surface); }

.imr-why-us__item  { padding: var(--space-5); }
.imr-why-us__icon  { font-size: 2rem; margin-bottom: 0.75rem; }
.imr-why-us__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.5rem;
}
.imr-why-us__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
}

.imr-service-area { background: var(--surface); }

/* ═══════════════════════════════════════════════════════════════════════
   16. CTA band
   ═══════════════════════════════════════════════════════════════════════ */
.imr-cta-band {
  background:    var(--accent);
  text-align:    center;
  padding-block: var(--space-8);
}
.imr-cta-band__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  line-height:   var(--lh-snug);
  color:         var(--on-accent);
  margin-bottom: 0.75rem;
}
.imr-cta-band__sub {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         rgba(255,255,255,0.82);
  margin-bottom: var(--space-6);
  max-width:     54ch;
  margin-inline: auto;
}
.imr-cta-band__actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1rem;
  justify-content: center;
  align-items:     center;
}

/* Button overrides inside the accent-colored band */
.imr-cta-band .imr-btn--primary {
  background:   var(--on-accent);
  color:        var(--accent);
  border-color: var(--on-accent);
}
.imr-cta-band .imr-btn--primary:hover {
  background:   rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.88);
}
.imr-cta-band .imr-btn--outline {
  color:        var(--on-accent);
  border-color: rgba(255,255,255,0.5);
}
.imr-cta-band .imr-btn--outline:hover {
  border-color: var(--on-accent);
  color:        var(--on-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   17. FAQ accordion
   ═══════════════════════════════════════════════════════════════════════ */
.imr-faq { background: var(--bg); }

.imr-faq-list {
  max-width:     var(--content-measure);
  margin-inline: auto;
}

.imr-faq-item { border-bottom: 1px solid var(--border); }
.imr-faq-item:first-child { border-top: 1px solid var(--border); }

.imr-faq-trigger {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
  padding:         1.25rem 0;
  background:      none;
  border:          none;
  text-align:      left;
  font-family:     var(--font-display);
  font-size:       var(--fs-body);
  font-weight:     600;
  cursor:          pointer;
  color:           var(--text);
  transition:      color var(--ease);
}
.imr-faq-trigger:hover { color: var(--accent-light); }
.imr-faq-trigger:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius:  4px;
}

.imr-faq-trigger__icon {
  flex-shrink:   0;
  width:         16px;
  height:        16px;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:     rotate(45deg);
  transition:    transform var(--ease);
}
.imr-faq-trigger[aria-expanded="true"] .imr-faq-trigger__icon { transform: rotate(-135deg); }

.imr-faq-body {
  overflow:   hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.imr-faq-body.is-open { max-height: 800px; }

.imr-faq-body__inner {
  padding-bottom: 1.25rem;
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  color:          var(--text-muted);
  line-height:    var(--lh-body);
}

/* ═══════════════════════════════════════════════════════════════════════
   18. Reviews
   ═══════════════════════════════════════════════════════════════════════ */
.imr-reviews { background: var(--surface); }

.imr-reviews-grid {
  display:               grid;
  gap:                   var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.imr-review-card {
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  transition:    box-shadow var(--ease), border-color var(--ease);
}
.imr-review-card:hover {
  box-shadow:   var(--shadow-card);
  border-color: var(--border-strong);
}

.imr-review-card__author {
  font-family:   var(--font-display);
  font-weight:   600;
  color:         var(--text);
  margin-bottom: 0.5rem;
}
.imr-review-card__text {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--text-muted);
  font-style:    italic;
  line-height:   var(--lh-body);
  margin-bottom: 0.75rem;
}
.imr-stars { color: var(--warning); letter-spacing: 2px; margin-bottom: 0.75rem; display: block; }
.imr-star--empty { color: var(--border-strong); }

.imr-review-attribution {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-subtle); /* AA for this small supplementary text */
  margin-top:  0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. Contact page
   ═══════════════════════════════════════════════════════════════════════ */
.imr-contact-section { background: var(--bg); }

.imr-contact-layout {
  display:               grid;
  grid-template-columns: 1fr 1.4fr;
  gap:                   var(--space-8);
  align-items:           start;
}
@media (max-width: 768px) { .imr-contact-layout { grid-template-columns: 1fr; } }

.imr-contact-info h2 {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  color:         var(--text);
  margin-bottom: var(--space-5);
}

.imr-contact-details { margin-top: var(--space-5); }
.imr-contact-details li {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--text-muted);
  margin-bottom: 0.75rem;
}
.imr-contact-details strong { color: var(--text); }

.imr-map-placeholder {
  margin-top:      var(--space-7);
  min-height:      260px;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--radius-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-subtle);
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
}

/* Contact Form 7 dark-theme overrides */
.imr-contact-form .wpcf7-form p { margin-bottom: var(--space-4); }

.imr-contact-form .wpcf7-form input[type="text"],
.imr-contact-form .wpcf7-form input[type="email"],
.imr-contact-form .wpcf7-form input[type="tel"],
.imr-contact-form .wpcf7-form textarea,
.imr-contact-form .wpcf7-form select {
  display:       block;
  width:         100%;
  padding:       0.75rem 1rem;
  background:    var(--surface);
  color:         var(--text);
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  transition:    border-color var(--ease);
}
.imr-contact-form .wpcf7-form input::placeholder,
.imr-contact-form .wpcf7-form textarea::placeholder { color: var(--text-subtle); }

.imr-contact-form .wpcf7-form input:focus,
.imr-contact-form .wpcf7-form textarea:focus {
  outline:      3px solid var(--focus-ring);
  border-color: var(--accent);
}

.imr-contact-form .wpcf7-form label {
  display:       block;
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  font-weight:   500;
  color:         var(--text-muted);
  margin-bottom: 0.375rem;
}

.imr-contact-form .wpcf7-submit {
  display:       inline-block;
  padding:       0.875rem 2rem;
  background:    var(--accent);
  color:         var(--on-accent);
  border:        none;
  border-radius: var(--radius-btn);
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  font-weight:   600;
  cursor:        pointer;
  transition:    background var(--ease);
}
.imr-contact-form .wpcf7-submit:hover { background: var(--accent-hover); }
.imr-contact-form .wpcf7-submit:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Homepage contact block — phone / email / hours cards */
.imr-contact-cta .imr-contact-cards { margin-top: var(--space-6); }
.imr-contact-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            0.4rem;
}
.imr-contact-card__icon {
  font-size:     1.75rem;
  color:         var(--accent);
  margin-bottom: 0.5rem;
}
.imr-contact-card__label {
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-muted);
  margin:         0;
}
.imr-contact-card__value {
  font-family:     var(--font-display);
  font-size:       var(--fs-h3);
  color:           var(--text);
  text-decoration: none;
}
a.imr-contact-card__value:hover { color: var(--accent-light); }

/* Portfolio post card — small category/tag label */
.imr-post-card__label {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      var(--fs-xs, 0.75rem);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--accent-light);
  margin-bottom:  0.5rem;
}

/* Reviews widget wrapper (Trustindex) */
/* Contain the third-party Trustindex widget. It injects a review carousel
   whose cards render in a horizontal row wider than the viewport (measured
   ~694px at a 400px width), and its async load makes the width vary between
   renders — that intermittently widened the page and split the fixed CTA bar's
   buttons across a >100vw width so only one showed. max-width + overflow-x keep
   the widget's content inside its box; the page can never overflow from it. */
.imr-reviews-widget {
  margin-top: var(--space-6);
  max-width:  100%;
  /* auto (not hidden) so a review carousel wider than the box scrolls WITHIN
     the widget instead of being clipped or pushing the page — content stays
     reachable, the document never overflows. */
  overflow-x: auto;
  overscroll-behavior-x: contain; /* horizontal swipe here doesn't chain to the page */
}

/* Contact — two-column split (form | coverage map) */
.imr-contact-split__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-7);
  align-items:           start;
}
.imr-contact-split__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin:        0.5rem 0 0.5rem;
}
.imr-contact-split__lead {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--text-muted);
  margin-bottom: var(--space-6);
}

/* Placeholder map box */
.imr-map-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          320px;
  background:      var(--surface);
  border:          1px dashed var(--border-strong);
  border-radius:   var(--radius-lg);
}
.imr-map-placeholder__text {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-subtle);
}

/* Map embed wrapper (admin-pasted iframe) */
.imr-map-embed {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--radius-lg);
  border:        1px solid var(--border);
  min-height:    320px;
}
.imr-map-embed iframe,
.imr-map-embed > * {
  display:    block;
  width:      100%;
  min-height: 320px;
  border:     0;
}

/* Trust badges under the map */
.imr-contact-badges {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.75rem;
  margin-top:  var(--space-5);
}
.imr-contact-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.5rem 1rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  font-weight:   600;
  color:         var(--text-muted);
}
.imr-contact-badge i { color: var(--accent); }

/* Contact details list */
.imr-contact-details {
  list-style: none;
  margin:     var(--space-5) 0 0;
  padding:    0;
  display:    grid;
  gap:        0.75rem;
}
.imr-contact-details__item {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--text-muted);
}
.imr-contact-details__item i { color: var(--accent); width: 1.25rem; text-align: center; }
.imr-contact-details__item a { color: var(--text); text-decoration: none; }
.imr-contact-details__item a:hover { color: var(--accent-light); }

@media (max-width: 768px) {
  .imr-contact-split__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   20. Entry content (editor output)
   ═══════════════════════════════════════════════════════════════════════ */
.imr-entry-content {
  max-width:   var(--content-measure);
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--text);
}

.imr-entry-content h2 { font-size: var(--fs-h2); margin-top: var(--space-7); color: var(--text); }
.imr-entry-content h3 { font-size: var(--fs-h3); margin-top: var(--space-6); color: var(--text); }
.imr-entry-content h4 { font-size: 1.1rem;       margin-top: var(--space-5); color: var(--text); }

.imr-entry-content a { color: var(--accent-light); }
.imr-entry-content a:hover { color: var(--accent-hover); }

.imr-entry-content ul,
.imr-entry-content ol {
  padding-left:  1.5rem;
  margin-bottom: var(--space-5);
}
.imr-entry-content ul { list-style: disc; }
.imr-entry-content ol { list-style: decimal; }
.imr-entry-content li { margin-bottom: 0.5rem; color: var(--text-muted); }

.imr-entry-content blockquote {
  border-left:   3px solid var(--accent);
  margin-block:  var(--space-6);
  padding:       1rem var(--space-5);
  background:    var(--surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color:         var(--text-muted);
  font-style:    italic;
}

.imr-entry-content code {
  background:    var(--surface-2);
  color:         var(--accent-light);
  border-radius: 4px;
  padding:       0.15em 0.4em;
  font-size:     0.88em;
}

/* Figures + captions */
.imr-entry-content figure { margin-block: var(--space-6); }
.imr-entry-content img { border-radius: var(--radius-md); }
.imr-entry-content figcaption,
.imr-entry-content .wp-caption-text {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-subtle);
  text-align:    center;
  margin-top:    0.6rem;
  font-style:    italic;
}

/* Pull-quote — larger, centered, no italic (distinct from blockquote) */
.imr-entry-content .wp-block-pullquote {
  border:        0;
  border-top:    2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  background:    transparent;
  padding:       var(--space-6) var(--space-4);
  margin-block:  var(--space-7);
  text-align:    center;
}
.imr-entry-content .wp-block-pullquote p,
.imr-entry-content .wp-block-pullquote blockquote {
  border:      0;
  background:  transparent;
  padding:     0;
  margin:      0;
  font-family: var(--font-display);
  font-size:   var(--fs-h3);
  font-style:  normal;
  line-height: var(--lh-snug);
  color:       var(--text);
}
.imr-entry-content .wp-block-pullquote cite {
  display:     block;
  margin-top:  var(--space-4);
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  font-style:  normal;
  color:       var(--accent-light);
}

/* ═══════════════════════════════════════════════════════════════════════
   21. Footer
   ═══════════════════════════════════════════════════════════════════════ */
.imr-site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  color:      var(--text-muted);
}

/* Six columns: brand | quick links | services | locations | brands | contact.
   The brand and contact columns are wider (logo/blurb, and the map embed). */
.imr-footer-inner {
  display:               grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1fr 1.4fr;
  gap:                   var(--space-6);
  padding-block:         var(--space-8);
}
@media (max-width: 1200px) {
  .imr-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (max-width: 768px) {
  .imr-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .imr-footer-col--brand,
  .imr-footer-col--contact { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .imr-footer-inner { grid-template-columns: 1fr; }
}

/* Footer menu columns (assigned menu or auto fallback share this markup) */
.imr-footer-menu { list-style: none; margin: 0; padding: 0; }
.imr-footer-menu li + li { margin-top: 0.5rem; }
.imr-footer-menu a {
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  color:           var(--text-muted);
  text-decoration: none;
  display:         inline-block;
  padding:         2px 0;
}
.imr-footer-menu a:hover { color: var(--text); }
.imr-footer-menu a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.imr-footer-phone {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  margin-top:      var(--space-4);
  font-family:     var(--font-display);
  font-size:       var(--fs-h3);
  color:           var(--accent-light);
  text-decoration: none;
}
.imr-footer-phone:hover { text-decoration: underline; }
.imr-footer-phone i { font-size: 0.8em; }

/* Footer map embed — responsive box; the iframe's own width/height are ignored */
.imr-footer-map {
  margin-top:    var(--space-5);
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        1px solid var(--border);
  line-height:   0;
}
.imr-footer-map iframe {
  width:   100%;
  height:  200px;
  border:  0;
  display: block;
}

.imr-footer-logo { text-decoration: none; display: inline-block; }
.imr-footer-logo__img { height: 64px; width: auto; max-width: 100%; display: block; }

.imr-footer-site-name {
  font-family: var(--font-display);
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--text);
}
.imr-footer-blurb {
  margin-top:  0.75rem;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
}

.imr-social-list { display: flex; gap: 0.75rem; margin-top: 1rem; }

.imr-social-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      var(--surface);
  border:          1px solid var(--border);
  color:           var(--text-muted);
  border-radius:   var(--radius-md);
  text-decoration: none;
  font-size:       var(--fs-sm);
  font-weight:     700;
  transition:      background var(--ease), color var(--ease), border-color var(--ease);
}
.imr-social-link:hover {
  background:   var(--accent);
  color:        var(--on-accent);
  border-color: var(--accent);
}
.imr-social-link:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
}

.imr-footer-col-title {
  font-family:    var(--font-display);
  font-size:      var(--fs-sm);
  font-weight:    700;
  color:          var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  1rem;
}

.imr-footer-nav-list li + li { margin-top: 0.5rem; }
.imr-footer-nav-list a {
  color:           var(--text-muted);
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  transition:      color var(--ease);
}
.imr-footer-nav-list a:hover { color: var(--text); }

.imr-footer-contact-list li {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  margin-bottom: 0.5rem;
}
.imr-footer-contact-list a {
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--ease);
}
.imr-footer-contact-list a:hover { color: var(--text); }

.imr-footer-bottom { border-top: 1px solid var(--border); padding-block: 1.25rem; }
.imr-footer-bottom__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}
.imr-footer-copy,
.imr-footer-credit {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-subtle);
  margin:      0;
}
.imr-footer-legal {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  font-size:   var(--fs-sm);
}
.imr-footer-legal a,
.imr-footer-credit a {
  color:           var(--text-subtle);
  text-decoration: none;
}
.imr-footer-legal a:hover,
.imr-footer-credit a:hover { color: var(--text); text-decoration: underline; }
.imr-footer-legal a:focus-visible,
.imr-footer-credit a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.imr-footer-legal span { color: var(--text-subtle); opacity: 0.5; }

@media (max-width: 768px) {
  .imr-footer-bottom__inner { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   22. Blog post cards
   ═══════════════════════════════════════════════════════════════════════ */
.imr-latest-posts { background: var(--bg); }

.imr-post-card {
  display:        flex;
  flex-direction: column;
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  transition:     box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.imr-post-card:hover {
  box-shadow:   var(--shadow-card);
  border-color: var(--border-strong);
  transform:    translateY(-2px);
}

.imr-post-card__thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }

.imr-post-card__body { padding: var(--space-5); flex: 1; }

.imr-post-card__meta {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-subtle);
  margin-bottom: 0.5rem;
}

.imr-post-card__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  line-height:   var(--lh-snug);
  margin-bottom: 0.5rem;
}
.imr-post-card__title a { color: var(--text); text-decoration: none; }
.imr-post-card__title a:hover { color: var(--accent-light); }

.imr-post-card__excerpt {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
}

.imr-post-card__footer {
  padding:    var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   23. Single post / long-form pages
   ═══════════════════════════════════════════════════════════════════════ */
.imr-single-header {
  padding-block: var(--space-8);
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
}
.imr-single-header__title {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  color:       var(--text);
  line-height: var(--lh-snug);
}
.imr-single-header__meta {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-subtle);
  margin-top:  0.75rem;
}

.imr-single-thumb { background: var(--surface); padding-block: var(--space-5); }
.imr-single-thumb__img { border-radius: var(--radius-lg); width: 100%; }

/* Location / brand / service intra-page sections */
.imr-location-intro { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }

.imr-landmark-list { list-style: disc; padding-left: 1.5rem; color: var(--text-muted); font-size: var(--fs-body); }
.imr-landmark-list li { margin-bottom: 0.4rem; }

.imr-landmarks { background: var(--surface); }

.imr-brand-engines  { background: var(--surface); }
.imr-brand-services { background: var(--bg); }

.imr-brand-service-list { list-style: disc; padding-left: 1.5rem; color: var(--text-muted); font-size: var(--fs-body); }
.imr-brand-service-list li { margin-bottom: 0.4rem; }

.imr-service-symptoms { background: var(--surface); }
.imr-service-included { background: var(--bg); }

.imr-symptom-list,
.imr-included-list {
  list-style:   disc;
  padding-left: 1.5rem;
  color:        var(--text-muted);
  font-size:    var(--fs-body);
  line-height:  var(--lh-body);
}
.imr-symptom-list li, .imr-included-list li { margin-bottom: 0.4rem; }

.imr-service-pricing { background: var(--surface); }
.imr-pricing-note {
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
}
.imr-pricing-note h2 { color: var(--text); }
.imr-pricing-note p  { color: var(--text-muted); font-family: var(--font-body); }

/* Process steps */
.imr-process { background: var(--surface); }

.imr-process-list {
  list-style: none;
  padding:    0;
  display:    grid;
  gap:        var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.imr-process-step { display: flex; gap: 1rem; align-items: flex-start; }

.imr-process-step__num {
  flex-shrink:     0;
  width:           2.5rem;
  height:          2.5rem;
  background:      var(--accent-soft);
  color:           var(--accent-light);
  border:          1px solid var(--border-strong);
  border-radius:   var(--radius-pill);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-weight:     700;
  font-size:       var(--fs-sm);
}

.imr-process-step__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.4rem;
}
.imr-process-step__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
}

/* ═══════════════════════════════════════════════════════════════════════
   24. Search
   ═══════════════════════════════════════════════════════════════════════ */
.imr-search-form {
  display:       flex;
  gap:           0.5rem;
  max-width:     560px;
  margin-inline: auto;
}
.imr-search-form input[type="search"] {
  flex:          1;
  padding:       0.75rem 1rem;
  background:    var(--surface);
  color:         var(--text);
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  transition:    border-color var(--ease);
}
.imr-search-form input[type="search"]::placeholder { color: var(--text-subtle); }
.imr-search-form input[type="search"]:focus {
  outline:      3px solid var(--focus-ring);
  border-color: var(--accent);
}

.imr-search-result { border-bottom: 1px solid var(--border); }
.imr-search-result__title a { color: var(--text); text-decoration: none; }
.imr-search-result__title a:hover { color: var(--accent-light); }

/* ═══════════════════════════════════════════════════════════════════════
   25. 404
   ═══════════════════════════════════════════════════════════════════════ */
.imr-404 { text-align: center; padding-block: var(--space-9); background: var(--bg); }

.imr-404__code {
  font-family:   var(--font-display);
  font-size:     8rem;
  font-weight:   700;
  color:         var(--surface-2);
  line-height:   1;
  margin-bottom: 1rem;
}
.imr-404__title   { font-family: var(--font-display); font-size: var(--fs-h1); color: var(--text); }
.imr-404__message { font-family: var(--font-body); color: var(--text-muted); font-size: var(--fs-body); }
.imr-404__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.imr-404__search  { max-width: 400px; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   26. Pagination
   ═══════════════════════════════════════════════════════════════════════ */
.imr-pagination { margin-top: var(--space-7); }
.imr-pagination .nav-links { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.imr-pagination .page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.5rem 0.875rem;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  color:           var(--text-muted);
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  transition:      background var(--ease), color var(--ease), border-color var(--ease);
}
.imr-pagination .page-numbers:hover,
.imr-pagination .page-numbers.current {
  background:   var(--accent);
  color:        var(--on-accent);
  border-color: var(--accent);
}
.imr-pagination .page-numbers:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   27. Misc / utilities
   ═══════════════════════════════════════════════════════════════════════ */
.imr-notice {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--text-muted);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       1rem 1.25rem;
}

.imr-breadcrumbs { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.imr-breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.imr-breadcrumbs a:hover { color: var(--accent-light); }

.imr-text-center { text-align: center; }
.imr-text-muted  { color: var(--text-muted); }

.imr-sr-only {
  position:   absolute;
  width:      1px;  height: 1px;
  padding:    0;    margin: -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ═══════════════════════════════════════════════════════════════════════
   28. Homepage — Hero Split (2-col)
   ═══════════════════════════════════════════════════════════════════════ */
.imr-hero-split {
  background:    var(--bg);
  padding:       var(--space-9) 0 var(--space-8);
  position:      relative;
  overflow:      hidden;
}
.imr-hero-split::before {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(43,143,224,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.imr-hero-split__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-8);
  align-items:           center;
}

/* Copy */
.imr-hero-split__badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.45rem;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    600;
  color:          var(--accent-light);
  background:     var(--accent-soft);
  border:         1px solid rgba(43,143,224,0.25);
  border-radius:  var(--radius-pill);
  padding:        0.35rem 0.9rem;
  margin-bottom:  var(--space-5);
  letter-spacing: 0.02em;
}
.imr-hero-split__h1 {
  font-family:    var(--font-display);
  font-size:      var(--fs-hero);
  font-weight:    700;
  line-height:    var(--lh-tight);
  color:          var(--text);
  margin-bottom:  var(--space-5);
}
.imr-hero-split__sub {
  font-family:    var(--font-body);
  font-size:      clamp(1rem, 1.5vw, 1.125rem);
  line-height:    var(--lh-body);
  color:          var(--text-muted);
  max-width:      52ch;
  margin-bottom:  var(--space-6);
}
.imr-hero-split__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;
  margin-bottom: var(--space-6);
}
.imr-hero-split__rating {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}
.imr-hero-split__rating-stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.05em; }
.imr-hero-split__rating-text  { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); }

/* Visual column */
.imr-hero-split__visual {
  position: relative;
}
.imr-hero-split__img {
  width:         100%;
  height:        520px;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  display:       block;
  box-shadow:    var(--glow-accent);
}
.imr-hero-split__img-placeholder {
  width:            100%;
  height:           520px;
  background:       var(--surface);
  border-radius:    var(--radius-lg);
  border:           1px solid var(--border);
}

/* Floating stat cards */
.imr-hero-split__stat-card {
  position:      absolute;
  background:    var(--surface);
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding:       0.75rem 1.1rem;
  display:       flex;
  flex-direction: column;
  gap:           0.15rem;
  backdrop-filter: blur(12px);
  box-shadow:    var(--shadow-card);
  min-width:     130px;
}
.imr-hero-split__stat-card--tl { top: -1rem;    left: -1.5rem; }
.imr-hero-split__stat-card--br { bottom: 1.5rem; right: -1.5rem; }
.imr-stat-card__num   { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); }
.imr-stat-card__label { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-muted); }

/* Live / pulse dot */
.imr-hero-split__live {
  position:    absolute;
  top:         1rem;
  right:       1rem;
  background:  var(--surface);
  border:      1px solid var(--border);
  border-radius: var(--radius-pill);
  padding:     0.35rem 0.8rem;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  display:     flex;
  align-items: center;
  gap:         0.45rem;
}
.imr-hero-split__pulse {
  width:            9px;
  height:           9px;
  border-radius:    50%;
  background:       var(--success);
  display:          inline-block;
  flex-shrink:      0;
  animation:        imr-pulse 2s ease-in-out infinite;
}
@keyframes imr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,150,0.6); }
  50%       { box-shadow: 0 0 0 6px rgba(52,199,150,0); }
}
@media (prefers-reduced-motion: reduce) {
  .imr-hero-split__pulse { animation: none; }
}

/* Responsive: stack on tablet/mobile */
@media (max-width: 900px) {
  .imr-hero-split__grid { grid-template-columns: 1fr; }
  .imr-hero-split__img,
  .imr-hero-split__img-placeholder { height: 340px; }
  .imr-hero-split__stat-card--tl { top: -0.5rem; left: 0; }
  .imr-hero-split__stat-card--br { bottom: 0.75rem; right: 0; }
}
@media (max-width: 480px) {
  .imr-hero-split { padding: var(--space-7) 0; }
  .imr-hero-split__img,
  .imr-hero-split__img-placeholder { height: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   29. Homepage — Stats Strip
   ═══════════════════════════════════════════════════════════════════════ */
.imr-stats-strip {
  background:     var(--surface);
  border-top:     1px solid var(--border);
  border-bottom:  1px solid var(--border);
  padding:        var(--space-6) 0;
}
.imr-stats-strip__inner {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
}
.imr-stats-strip__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            0.4rem;
  padding:        var(--space-4);
}
.imr-stats-strip__icon {
  font-size:  1.5rem;
  color:      var(--accent);
  margin-bottom: 0.25rem;
}
.imr-stats-strip__num {
  font-family: var(--font-display);
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--text);
  line-height: 1;
}
.imr-stats-strip__label {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
}
/* Card variant: bold label + short description (not number + label). */
.imr-stats-strip--cards .imr-stats-strip__num {
  font-family: var(--font-display);
  font-size:   var(--fs-lg, 1.15rem);
  line-height: 1.25;
}
.imr-stats-strip--cards .imr-stats-strip__label {
  line-height: 1.4;
}
@media (max-width: 700px) {
  .imr-stats-strip__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .imr-stats-strip__inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   30. Homepage — About Snippet
   ═══════════════════════════════════════════════════════════════════════ */
.imr-hp-about { background: var(--bg); }
.imr-hp-about__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-8);
  align-items:           center;
}

.imr-hp-about__photo-wrap { position: relative; }
.imr-hp-about__photo {
  width:         100%;
  height:        500px;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  display:       block;
}
.imr-hp-about__photo-placeholder {
  width:         100%;
  height:        500px;
  background:    var(--surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--border);
}
.imr-hp-about__quote {
  position:      absolute;
  bottom:        1.5rem;
  left:          -1.5rem;
  right:         1.5rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent);
  border-radius: var(--radius-md);
  padding:       1rem 1.25rem;
}
.imr-hp-about__quote p {
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-style:     italic;
  color:          var(--text);
  margin-bottom:  0.35rem;
}
.imr-hp-about__quote cite {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  font-style:  normal;
}

.imr-section-label {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    600;
  color:          var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom:  0.6rem;
}
.imr-hp-about__h2 {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  font-weight:   700;
  color:         var(--text);
  line-height:   var(--lh-snug);
  margin-bottom: var(--space-4);
}
.imr-hp-about__lead {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  font-weight:   500;
  color:         var(--text);
  line-height:   var(--lh-body);
  margin-bottom: var(--space-4);
}
.imr-hp-about__body {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--text-muted);
  line-height:   var(--lh-body);
  margin-bottom: var(--space-5);
}
.imr-hp-about__credentials {
  list-style:    none;
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.6rem 1.5rem;
  padding:       0;
  margin-bottom: var(--space-6);
}
.imr-hp-about__credentials li {
  font-family:  var(--font-body);
  font-size:    var(--fs-sm);
  color:        var(--text-muted);
  display:      flex;
  align-items:  center;
  gap:          0.4rem;
}
.imr-hp-about__credentials li i { color: var(--success); font-size: 0.85rem; }

@media (max-width: 860px) {
  .imr-hp-about__grid { grid-template-columns: 1fr; }
  .imr-hp-about__photo,
  .imr-hp-about__photo-placeholder { height: 320px; }
  .imr-hp-about__quote { left: 0; right: 0; position: relative; bottom: auto; margin-top: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   31. Homepage — Tech + Trust Cards
   ═══════════════════════════════════════════════════════════════════════ */
.imr-hp-tech-trust { background: var(--surface); }
.imr-hp-tech-trust__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-6);
  align-items:           start;
}

/* Bio card */
.imr-hp-tech-trust__bio-card {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.imr-hp-tech-trust__photo-wrap { overflow: hidden; }
.imr-hp-tech-trust__photo {
  width:      100%;
  height:     260px;
  object-fit: cover;
  display:    block;
}
.imr-hp-tech-trust__photo-placeholder {
  width:           100%;
  height:          260px;
  background:      var(--surface);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-subtle);
  font-size:       3rem;
}
.imr-hp-tech-trust__bio-body { padding: var(--space-5) var(--space-5) var(--space-6); }
.imr-hp-tech-trust__name {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 0.25rem;
}
.imr-hp-tech-trust__title {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--accent);
  font-weight:   600;
  margin-bottom: var(--space-4);
}
.imr-hp-tech-trust__bio {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--text-muted);
  line-height: var(--lh-body);
}

/* Credentials card */
.imr-hp-tech-trust__cred-card {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
}
.imr-hp-tech-trust__cred-h2 {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  font-weight:   700;
  color:         var(--text);
  margin-bottom: var(--space-5);
}
.imr-hp-tech-trust__checklist {
  list-style:    none;
  padding:       0;
  margin-bottom: var(--space-6);
  display:       flex;
  flex-direction: column;
  gap:           0.85rem;
}
.imr-hp-tech-trust__checklist li {
  display:     flex;
  align-items: center;
  gap:         0.7rem;
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--text);
}
.imr-hp-tech-trust__check-icon { color: var(--success); font-size: 1rem; flex-shrink: 0; }

@media (max-width: 860px) {
  .imr-hp-tech-trust__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   32. Homepage — Why Mobile (2-card)
   ═══════════════════════════════════════════════════════════════════════ */
.imr-why-mobile { background: var(--bg); }
.imr-why-mobile__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-8);
  align-items:           center;
}

/* Copy card */
.imr-why-mobile__copy-card { }
.imr-why-mobile__h2 {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  font-weight:   700;
  color:         var(--text);
  line-height:   var(--lh-snug);
  margin-bottom: var(--space-5);
}
.imr-why-mobile__intro {
  font-family:   var(--font-body);
  color:         var(--text-muted);
  line-height:   var(--lh-relaxed, 1.7);
  margin-bottom: var(--space-5);
}
.imr-why-mobile__reasons {
  list-style:    none;
  padding:       0;
  margin-bottom: var(--space-6);
  display:       flex;
  flex-direction: column;
  gap:           1.25rem;
}
.imr-why-mobile__reason {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}
.imr-why-mobile__reason-icon {
  flex-shrink:     0;
  width:           2.5rem;
  height:          2.5rem;
  border-radius:   var(--radius-md);
  background:      var(--accent-soft);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--accent);
  font-size:       1.1rem;
  margin-top:      0.1rem;
}
.imr-why-mobile__reason-title {
  display:       block;
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  font-weight:   600;
  color:         var(--text);
  margin-bottom: 0.25rem;
}
.imr-why-mobile__reason-desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
}

/* Image card */
.imr-why-mobile__img-card { position: relative; }
.imr-why-mobile__img {
  width:         100%;
  height:        480px;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  display:       block;
  box-shadow:    var(--shadow-card);
}
.imr-why-mobile__img-placeholder {
  width:           100%;
  height:          480px;
  border-radius:   var(--radius-lg);
  background:      var(--surface);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
  color:           var(--text-subtle);
}

@media (max-width: 860px) {
  .imr-why-mobile__grid { grid-template-columns: 1fr; }
  .imr-why-mobile__img,
  .imr-why-mobile__img-placeholder { height: 300px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   33. Homepage — Portfolio Grid
   ═══════════════════════════════════════════════════════════════════════ */
.imr-hp-portfolio { background: var(--surface); }
.imr-hp-portfolio__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   var(--space-4);
}
.imr-hp-portfolio__item {
  overflow:      hidden;
  border-radius: var(--radius-md);
  aspect-ratio:  4/3;
}
.imr-hp-portfolio__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s ease;
}
.imr-hp-portfolio__item:hover .imr-hp-portfolio__img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .imr-hp-portfolio__img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   34. Trust Bar — Brand Section variant
   ═══════════════════════════════════════════════════════════════════════ */
.imr-trust-bar--section {
  background:    var(--bg);
  padding:       var(--space-7) 0;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.imr-trust-bar__eyebrow {
  text-align:     center;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom:  var(--space-5);
}
.imr-trust-bar--section .imr-trust-bar__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4) var(--space-6);
}
.imr-trust-bar--section .imr-trust-bar__item {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  padding:         0.6rem 1.25rem;
  min-width:       110px;
  min-height:      60px;
  transition:      border-color var(--ease), background var(--ease);
  text-decoration: none;
}
.imr-trust-bar--section .imr-trust-bar__item:hover {
  border-color: var(--accent);
  background:   var(--accent-soft);
}
.imr-trust-bar__logo {
  max-width:  110px;
  max-height: 50px;
  object-fit: contain;
  display:    block;
  filter:     brightness(0) invert(1);
  opacity:    0.75;
  transition: opacity var(--ease);
}
.imr-trust-bar__item:hover .imr-trust-bar__logo { opacity: 1; }
.imr-trust-bar--section .imr-trust-bar__brand-name {
  font-family: var(--font-display);
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   34b. Brand logo strip (reusable — homepage, service/location/brand, mega)

   Every one of the 9 logos is treated IDENTICALLY: same white chip, same
   fixed height, same padding, same grid cell. The <img> fills the chip with
   object-fit:contain so native size/aspect ratio never affects the layout.
   ═══════════════════════════════════════════════════════════════════════ */
.imr-brand-strip {
  --imr-chip-h:   88px;   /* fixed chip height — identical for all 9 */
  --imr-chip-pad: 17px;   /* internal padding — identical for all 9 */
  --imr-chip-cols: 5;     /* logos per row on desktop */
}
/* Intro block above the grid — centered, paragraph width-constrained. */
.imr-brand-strip__intro {
  text-align:    center;
  max-width:     var(--content-measure); /* keeps the block tidy */
  margin:        0 auto var(--space-6);
}
.imr-brand-strip__eyebrow {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    600;
  color:          var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin:         0 0 0.6rem;
}
.imr-brand-strip__heading {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin:        0 0 0.75rem;
}
.imr-brand-strip__lead {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  line-height:   var(--lh-body);
  color:         var(--text-muted);
  max-width:     54ch;      /* readable measure */
  margin:        0 auto;
}
.imr-brand-strip__row {
  list-style:            none;
  margin:                0 auto;
  padding:               0;
  display:               grid;
  grid-template-columns: repeat(var(--imr-chip-cols), 1fr);
  gap:                   var(--space-4);
  justify-content:       center;
  /* Cap width so 5 equal columns stay logo-sized, not stretched full-bleed. */
  max-width:             calc(var(--imr-chip-cols) * 190px);
}
.imr-brand-strip__item {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          var(--imr-chip-h);
  padding:         var(--imr-chip-pad);
  background:      var(--white);
  border:          1px solid var(--border-strong);
  border-radius:   var(--radius-md);
  transition:      border-color var(--ease), transform var(--ease);
}
.imr-brand-strip__link {
  display:         block;
  width:           100%;
  height:          100%;
  text-decoration: none;
}
.imr-brand-strip__logo {
  display:          block;
  width:            100%;
  height:           100%;
  object-fit:       contain;
  object-position:  center;
}
.imr-brand-strip__item:hover {
  border-color: var(--accent);
  transform:    translateY(-2px);
}
/* Text fallback when a logo attachment can't be resolved. */
.imr-brand-strip__name {
  font-family: var(--font-display);
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--bg);
  text-align:  center;
}
/* Full-width band placements (homepage, service, brand, location). */
.imr-brands-band { background: var(--bg); }

/* Responsive: 5 → 4 → 3 → 2 columns, rows stay centered and even. */
@media (max-width: 1024px) { .imr-brand-strip { --imr-chip-cols: 4; } }
@media (max-width: 760px)  { .imr-brand-strip { --imr-chip-cols: 3; } }
@media (max-width: 480px)  {
  .imr-brand-strip { --imr-chip-cols: 2; --imr-chip-h: 76px; --imr-chip-pad: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .imr-brand-strip__item { transition: none; }
  .imr-brand-strip__item:hover { transform: none; }
}

/* Mega-menu variant — same uniform chips, slightly shorter, sits below the
   link columns in the panel. */
.imr-mega-brands {
  margin-top:  var(--space-5);
  padding-top: var(--space-5);
  border-top:  1px solid var(--border);
}
.imr-brand-strip--mega {
  --imr-chip-h:   64px;
  --imr-chip-pad: 12px;
}
/* Mega panel is tight — keep only a compact left-aligned eyebrow; hide the
   H2/paragraph even if a caller passes them, so the intro never overflows. */
.imr-brand-strip--mega .imr-brand-strip__intro {
  text-align:    left;
  max-width:     none;
  margin:        0 0 var(--space-4);
}
.imr-brand-strip--mega .imr-brand-strip__eyebrow {
  margin-bottom: 0;
}
.imr-brand-strip--mega .imr-brand-strip__heading,
.imr-brand-strip--mega .imr-brand-strip__lead {
  display: none;
}
.imr-brand-strip--mega .imr-brand-strip__row {
  margin:    0;
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   35. CTA Band — Gradient variant
   ═══════════════════════════════════════════════════════════════════════ */
.imr-cta-band--gradient {
  background:  var(--grad-gold-135);
  padding:     var(--space-8) 0;
  text-align:  center;
}
.imr-cta-band--gradient .imr-cta-band__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h1);
  font-weight:   700;
  color:         var(--on-accent);
  margin-bottom: var(--space-4);
}
.imr-cta-band--gradient .imr-cta-band__sub {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         rgba(255,255,255,0.85);
  margin-bottom: var(--space-6);
}
.imr-cta-band--gradient .imr-cta-band__actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.75rem;
  justify-content: center;
}
.imr-cta-band--gradient .imr-btn--primary {
  background: var(--white);
  color:      var(--accent-hover);
  border-color: var(--white);
}
.imr-cta-band--gradient .imr-btn--primary:hover {
  background: rgba(255,255,255,0.9);
}
.imr-cta-band--gradient .imr-btn--outline {
  border-color: rgba(255,255,255,0.55);
  color:        var(--white);
}
.imr-cta-band--gradient .imr-btn--outline:hover {
  background:   rgba(255,255,255,0.12);
  border-color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════
   36. Service template (template-service.php)
   All colors via tokens. Reuses .imr-card, .imr-grid, .imr-faq*, .imr-cta-band.
   ═══════════════════════════════════════════════════════════════════════ */

/* (1) Emergency bar */
.imr-svc-emergency {
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
}
.imr-svc-emergency__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem 0.75rem;
  padding-block:   0.6rem;
  text-align:      center;
}
.imr-svc-emergency__dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    var(--on-accent);
  flex-shrink:   0;
  animation:     imr-pulse 2s ease-in-out infinite;
}
.imr-svc-emergency__text {
  margin:         0;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--on-accent);
}
.imr-svc-emergency__cta {
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     800;
  color:           var(--on-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space:     nowrap;
}
.imr-svc-emergency__cta:hover { color: var(--on-accent); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .imr-svc-emergency__dot { animation: none; }
}

/* (2) Hero */
.imr-svc-hero {
  position:      relative;
  overflow:      hidden;
  padding:       var(--space-6) 0 var(--space-8);
  background:    var(--bg);
}
.imr-svc-hero::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 60% 80% at 70% 40%, rgba(43,143,224,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.imr-svc-hero > .imr-container { position: relative; z-index: 1; }
.imr-svc-hero__crumbs { margin-bottom: var(--space-6); }
.imr-breadcrumbs__current { color: var(--text); }

/* Optional editable hero background image (from the Page Hero metabox). */
.imr-svc-hero__bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}
.imr-svc-hero__bg-overlay {
  position:       absolute;
  inset:          0;
  z-index:        0;
  background:     linear-gradient(180deg, rgba(7,22,44,0.82) 0%, rgba(7,22,44,0.92) 100%);
  pointer-events: none;
}

.imr-svc-hero__grid {
  display:               grid;
  grid-template-columns: 1.6fr 1fr;
  gap:                   var(--space-8);
  align-items:           center;
}
.imr-svc-hero__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--accent-light);
  background:     var(--accent-soft);
  border:         1px solid rgba(43,143,224,0.25);
  border-radius:  var(--radius-pill);
  padding:        0.35rem 0.9rem;
  margin-bottom:  var(--space-5);
}
.imr-svc-hero__eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  animation: imr-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .imr-svc-hero__eyebrow-dot { animation: none; } }
.imr-svc-hero__h1 {
  font-family:   var(--font-display);
  font-size:     var(--fs-hero);
  line-height:   var(--lh-tight);
  color:         var(--text);
  margin-bottom: var(--space-5);
}
.imr-svc-hero__sub {
  font-family:   var(--font-body);
  font-size:     clamp(1rem, 1.4vw, 1.125rem);
  line-height:   var(--lh-body);
  color:         var(--text-muted);
  max-width:     58ch;
  margin-bottom: var(--space-6);
}
.imr-svc-hero__actions {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.75rem;
  margin-bottom: var(--space-6);
}
.imr-svc-hero__chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.6rem;
  list-style: none;
  padding:    0;
  margin:     0;
}
.imr-svc-hero__chips li {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  font-weight:   600;
  color:         var(--text);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       0.4rem 0.75rem;
}
.imr-svc-hero__chips li i { color: var(--accent); font-size: 0.8rem; }

.imr-svc-hero__card {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             0.4rem;
  background:      var(--surface);
  border:          1px solid var(--border-strong);
  border-radius:   var(--radius-lg);
  padding:         var(--space-6);
  box-shadow:      var(--glow-accent);
}
.imr-svc-hero__card-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           3rem;
  height:          3rem;
  border-radius:   var(--radius-md);
  background:      var(--accent-soft);
  color:           var(--accent);
  font-size:       1.4rem;
  margin-bottom:   0.5rem;
}
.imr-svc-hero__card-label {
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-muted);
}
.imr-svc-hero__card-value {
  font-family: var(--font-display);
  font-size:   var(--fs-h2);
  font-weight: 700;
  color:       var(--text);
}
.imr-svc-hero__card-tag {
  margin-top:    0.4rem;
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  font-weight:   700;
  color:         var(--accent-light);
  background:    var(--accent-soft);
  border:        1px solid rgba(43,143,224,0.25);
  border-radius: var(--radius-md);
  padding:       0.25rem 0.7rem;
}
@media (max-width: 900px) {
  .imr-svc-hero__grid { grid-template-columns: 1fr; }
  .imr-svc-hero__card { align-self: stretch; }
}

/* (3) Intro / overview — heading + paragraphs + optional feature image.
   With an image: 55% copy / 45% image, image on the right, ~60px gap, image
   fills the full height of the copy column. Without: full-width copy. */
.imr-svc-intro__grid {
  display:               grid;
  grid-template-columns: 55fr 45fr;
  gap:                   var(--space-8); /* ~60px */
  align-items:           stretch;
}
.imr-svc-intro__grid--no-img { grid-template-columns: 1fr; }
.imr-svc-intro__grid--no-img .imr-svc-intro__copy { max-width: var(--content-measure); }
.imr-svc-intro__media { min-height: 0; }
.imr-svc-intro__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin-bottom: var(--space-5);
}
.imr-svc-intro__copy {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--text-muted);
}
.imr-svc-intro__copy p + p { margin-top: var(--space-4); }
.imr-svc-intro__copy strong { color: var(--text); font-weight: 600; }
.imr-svc-intro__img {
  width:         100%;
  height:        100%;
  min-height:    340px;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  box-shadow:    var(--glow-accent);
  display:       block;
}
@media (max-width: 860px) {
  .imr-svc-intro__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* Image stacks BELOW the copy on mobile (no order override). */
  .imr-svc-intro__img { height: 280px; min-height: 0; }
}

/* Shared left-aligned section lead (brands / catalog / area) */
.imr-svc-lead { max-width: 60ch; margin-bottom: var(--space-7); }
.imr-svc-lead__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin-bottom: 0.75rem;
}
.imr-svc-lead__sub {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}

/* (5) Service catalog cards */
.imr-svc-catalog-card { padding: var(--space-6); }
.imr-svc-catalog-card__title {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.6rem;
}
.imr-svc-catalog-card__title i { color: var(--accent); flex-shrink: 0; }
.imr-svc-catalog-card__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}

/* (6) Common problems grid */
.imr-svc-problems__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
}
.imr-svc-problem {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  padding:       var(--space-5);
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text);
  line-height:   var(--lh-snug);
}
.imr-svc-problem i { color: var(--accent); margin-top: 0.15rem; flex-shrink: 0; }
@media (max-width: 900px) { .imr-svc-problems__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .imr-svc-problems__grid { grid-template-columns: 1fr; } }

/* (7) Diagnostics deep section */
.imr-svc-diag__grid {
  display:               grid;
  grid-template-columns: 1.5fr 1fr;
  gap:                   var(--space-7);
  align-items:           start;
}
.imr-svc-diag__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin-bottom: var(--space-5);
}
.imr-svc-diag__copy p {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--text-muted);
  line-height:   var(--lh-body);
  margin-bottom: var(--space-4);
}
.imr-svc-diag__panel {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
}
.imr-svc-diag__panel-title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: var(--space-5);
}

/* Shared checklist (diagnostics + preventive) */
.imr-svc-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.imr-svc-checklist li {
  display:     flex;
  align-items: flex-start;
  gap:         0.7rem;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text);
  line-height: var(--lh-snug);
}
.imr-svc-checklist li i { color: var(--accent); margin-top: 0.2rem; flex-shrink: 0; }
@media (max-width: 900px) { .imr-svc-diag__grid { grid-template-columns: 1fr; } }

/* (8) Process steps */
.imr-svc-steps {
  list-style:            none;
  padding:               0;
  margin:                0;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
}
.imr-svc-step { text-align: center; }
.imr-svc-step__num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           3.25rem;
  height:          3.25rem;
  border-radius:   var(--radius-md);
  background:      var(--accent-soft);
  border:          1px solid var(--border-strong);
  color:           var(--accent-light);
  font-family:     var(--font-display);
  font-weight:     700;
  font-size:       var(--fs-h3);
  margin-bottom:   var(--space-4);
}
.imr-svc-step__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.4rem;
}
.imr-svc-step__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}
@media (max-width: 860px) { .imr-svc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .imr-svc-steps { grid-template-columns: 1fr; } }

/* (9) Preventive care */
.imr-svc-prevent__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-6);
  align-items:           start;
}
.imr-svc-prevent__card { padding: var(--space-6); }
.imr-svc-prevent__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin:        0.4rem 0 var(--space-4);
}
.imr-svc-prevent__lead {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  line-height:   var(--lh-body);
  margin-bottom: var(--space-5);
}
@media (max-width: 860px) { .imr-svc-prevent__grid { grid-template-columns: 1fr; } }

/* (10) Why choose us */
.imr-svc-why-card { padding: var(--space-6); }
.imr-svc-why-card__icon { color: var(--accent); font-size: 1.5rem; margin-bottom: 0.75rem; }
.imr-svc-why-card__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.5rem;
}
.imr-svc-why-card__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}

/* Optional sections ─────────────────────────────────────────────────────── */

/* Numbered list — Warning Signs + Numbered Checklist */
.imr-svc-numlist {
  list-style:    none;
  padding:       0;
  margin:        0 auto;
  max-width:     52rem;
  display:       grid;
  gap:           var(--space-5);
}
.imr-svc-numlist__item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-5);
  padding:       var(--space-5) var(--space-6);
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
}
.imr-svc-numlist__num {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2.75rem;
  height:          2.75rem;
  border-radius:   var(--radius-md);
  background:      var(--accent-soft);
  border:          1px solid var(--border-strong);
  color:           var(--accent-light);
  font-family:     var(--font-display);
  font-weight:     700;
  font-size:       var(--fs-h3);
}
.imr-svc-numlist__body { min-width: 0; }
.imr-svc-numlist__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.35rem;
}
.imr-svc-numlist__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}
@media (max-width: 560px) {
  .imr-svc-numlist__item { gap: var(--space-4); padding: var(--space-5); }
  .imr-svc-numlist__num  { width: 2.25rem; height: 2.25rem; font-size: var(--fs-body); }
}

/* Category grid cards */
.imr-svc-catgrid-card { padding: var(--space-6); }
.imr-svc-catgrid-card__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.5rem;
}
.imr-svc-catgrid-card__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}

/* About / Why choose us — homepage About layout: copy left, optional image right.
   Reuses the homepage typography (.imr-hp-about__h2/__lead/__body/__credentials). */
.imr-svc-about__grid {
  display:               grid;
  grid-template-columns: 55fr 45fr;
  gap:                   var(--space-8);
  align-items:           center;
}
.imr-svc-about__grid--no-img { grid-template-columns: 1fr; }
.imr-svc-about__grid--no-img .imr-svc-about__copy { max-width: var(--content-measure); }
.imr-svc-about__bullets-title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin:        var(--space-5) 0 var(--space-4);
}
.imr-svc-about__img {
  width:         100%;
  height:        100%;
  min-height:    340px;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  box-shadow:    var(--glow-accent);
  display:       block;
}
@media (max-width: 860px) {
  .imr-svc-about__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .imr-svc-about__img  { height: 280px; min-height: 0; }
}

/* Our Work / portfolio — optional H3 subheading under the section H2 */
.imr-svc-portfolio__sub {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--accent-light);
  margin:        0 0 0.6rem;
}

/* Two-column split — sub-items (reuses .imr-svc-prevent__grid / __card / __title) */
.imr-svc-twocraft__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.imr-svc-twocraft__heading {
  font-family:   var(--font-body);
  font-weight:   600;
  font-size:     var(--fs-body);
  color:         var(--text);
  margin-bottom: 0.25rem;
}
.imr-svc-twocraft__desc {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}

/* (5c) Pricing — rate headline card, size examples, add-on price table */
.imr-svc-pricing__rate-card {
  text-align:    center;
  padding:       var(--space-7) var(--space-6);
  margin-bottom: var(--space-7);
  border-color:  var(--accent);
}
.imr-svc-pricing__rate {
  font-family:   var(--font-display);
  font-size:     var(--fs-h2);
  color:         var(--accent-light);
  line-height:   1.15;
  margin:        0;
}
.imr-svc-pricing__examples {
  list-style:      none;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-4) var(--space-7);
  padding:         0;
  margin:          var(--space-5) 0 0;
}
.imr-svc-pricing__ex-size {
  display:        block;
  font-size:      var(--fs-sm);
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.imr-svc-pricing__ex-rate {
  font-family: var(--font-display);
  font-size:   var(--fs-h3);
  color:       var(--text);
}
.imr-svc-pricing__table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--fs-sm);
}
.imr-svc-pricing__table th,
.imr-svc-pricing__table td {
  padding:       0.55rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.imr-svc-pricing__table tr:last-child th,
.imr-svc-pricing__table tr:last-child td { border-bottom: 0; }
.imr-svc-pricing__table th {
  text-align:  left;
  font-weight: 500;
  color:       var(--text-muted);
  padding-right: var(--space-4);
}
.imr-svc-pricing__table td {
  text-align:  right;
  font-weight: 600;
  color:       var(--text);
  white-space: nowrap;
}
.imr-svc-pricing__addon-intro {
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  line-height:   var(--lh-body);
  margin:        0 0 var(--space-4);
}
.imr-svc-pricing__closing {
  max-width:   70ch;
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      var(--space-6) 0 var(--space-5);
}

/* Mid-section CTA button (catalog / warning signs / checklist / two-column split) */
.imr-svc-seccta { margin-top: var(--space-6); }

/* Contact page — call + business-hours blocks */
.imr-contact-block { margin: var(--space-6) 0; }
.imr-contact-block__title {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  font-family: var(--font-display);
  font-size:   var(--fs-h3);
  color:       var(--text);
  margin:      0 0 var(--space-3);
}
.imr-contact-block__title i { color: var(--accent); }
.imr-contact-block__phone {
  font-family:     var(--font-display);
  font-size:       var(--fs-h2);
  color:           var(--accent-light);
  text-decoration: none;
}
.imr-contact-block__phone:hover,
.imr-contact-block__phone:focus-visible { text-decoration: underline; }
.imr-contact-hours {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  gap:        0.35rem;
}
.imr-contact-hours li {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--text-muted);
}
.imr-contact-afterhours {
  margin:      var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
}

/* About page — quick facts, owner quote, mission, trust credentials */
.imr-about-quickfacts__list,
.imr-about-trust__list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  gap:        var(--space-4);
}
.imr-about-quickfacts__list li,
.imr-about-trust__list li {
  display:     flex;
  gap:         0.7rem;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--text-muted);
  line-height: var(--lh-body);
}
.imr-about-quickfacts__list i,
.imr-about-trust__list i { color: var(--accent); margin-top: 0.25em; flex-shrink: 0; }
.imr-about-quickfacts__list strong,
.imr-about-trust__list strong { color: var(--text); }

.imr-about-owner__grid {
  display:               grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap:                   var(--space-7);
  align-items:           start;
}
.imr-about-owner__grid--no-img { grid-template-columns: 1fr; max-width: 70ch; }
.imr-about-owner__photo {
  width:         100%;
  border-radius: var(--radius-lg);
  box-shadow:    var(--glow-accent);
  display:       block;
}
.imr-about-owner__quote {
  border-left: 3px solid var(--accent);
  padding:     0 0 0 var(--space-5);
  margin:      0 0 var(--space-5);
}
.imr-about-owner__quote p {
  font-family: var(--font-body);
  font-size:   var(--fs-h3);
  font-style:  italic;
  color:       var(--text);
  line-height: 1.5;
  margin:      0;
}
.imr-about-owner__attrib {
  margin-top: var(--space-4);
  font-style: normal;
}
.imr-about-owner__attrib cite {
  display:     block;
  font-family: var(--font-display);
  font-style:  normal;
  color:       var(--accent-light);
}
.imr-about-owner__attrib span { font-size: var(--fs-sm); color: var(--text-muted); }
.imr-about-owner__body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0 0 var(--space-4);
}
.imr-about-trust__photos { margin-top: var(--space-6); }
.imr-about-trust__photo { margin: 0; }
.imr-about-trust__photo img {
  width:         100%;
  border-radius: var(--radius-lg);
  display:       block;
}
@media (max-width: 860px) {
  .imr-about-owner__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Location template — two-fleet split + nearby areas */
.imr-loc-twofleet__text {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0 0 var(--space-3);
}
.imr-loc-twofleet__text:last-child { margin-bottom: 0; }
.imr-loc-twofleet__bridge { margin-top: var(--space-5); }
.imr-loc-nearby__subheading {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin:        0 0 var(--space-5);
}

/* (9c) Prose sections — reuse the two-craft list; cap line length, space the CTA */
.imr-svc-prose__list { max-width: 70ch; }
.imr-svc-prose__list + .imr-btn,
.imr-svc-prose .imr-svc-lead + .imr-btn { margin-top: var(--space-5); }

/* (12) Service area — .imr-location-card, used by template-location.php,
   template-brand.php, and page-about-us.php's Where We Work cards. */

/* (13) Related services */
.imr-svc-related__title {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--text);
  margin-bottom:  var(--space-6);
}
.imr-svc-related-card {
  display:        flex;
  flex-direction: column;
  padding:        var(--space-5);
}
.imr-svc-related-card__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-body);
  margin-bottom: 0.35rem;
}
.imr-svc-related-card__title a { color: var(--text); text-decoration: none; }
.imr-svc-related-card__title a:hover { color: var(--accent-light); }
.imr-svc-related-card__desc {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  line-height:   var(--lh-body);
  margin:        0 0 var(--space-4);
}
.imr-svc-related-card__cta { margin-top: auto; align-self: flex-start; }

/* (14) Final CTA band — bold page-closer.
   Extends .imr-cta-band--gradient with extra padding, a heavier headline,
   an urgency line, and an ambient glow so it visibly closes the page. */
.imr-svc-finalcta {
  position:      relative;
  overflow:      hidden;
  padding-block: var(--space-9);
}
.imr-svc-finalcta::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 55% 90% at 50% 0%, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.imr-svc-finalcta__inner {
  position:      relative;
  max-width:     46rem;
  margin-inline: auto;
  text-align:    center;
}
.imr-svc-finalcta__eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  color:           var(--on-accent);
  background:      rgba(255,255,255,0.16);
  border:          1px solid rgba(255,255,255,0.35);
  border-radius:   var(--radius-pill);
  padding:         0.4rem 1rem;
  margin-bottom:   var(--space-5);
}
.imr-svc-finalcta__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--on-accent); flex-shrink: 0;
  animation: imr-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .imr-svc-finalcta__dot { animation: none; } }
.imr-svc-finalcta__title {
  font-family:   var(--font-display);
  font-size:     clamp(2rem, 4.2vw, 3.1rem);
  font-weight:   700;
  line-height:   var(--lh-tight);
  color:         var(--on-accent);
  margin-bottom: var(--space-4);
}
.imr-svc-finalcta__urgency {
  font-family:   var(--font-body);
  font-size:     clamp(1rem, 1.6vw, 1.2rem);
  line-height:   var(--lh-body);
  color:         rgba(255,255,255,0.92);
  max-width:     40rem;
  margin:        0 auto var(--space-7);
}
.imr-svc-finalcta__actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1rem;
  justify-content: center;
}
.imr-svc-finalcta__btn {
  font-size:  1.05rem;
  padding:    1.05rem 2.25rem;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.55);
}
/* The solid (phone) button is the priority action — give it extra lift. */
.imr-svc-finalcta .imr-btn--primary { font-weight: 700; }
.imr-svc-finalcta .imr-btn--primary:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .imr-svc-finalcta .imr-btn--primary:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Global floating CTA (site-wide, rendered in footer.php)
   One component, two responsive faces:
     ≤900px  → fixed bottom bar (Call Now + Contact Us)
     ≥901px  → single floating pill, bottom-right (phone number = trust signal)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mobile + tablet: fixed bottom bar ─────────────────────────────────── */
.imr-floating-cta__bar {
  position:        fixed;
  left:            0;
  right:           0;
  bottom:          0;
  width:           100%;
  box-sizing:      border-box;
  z-index:         var(--z-floating-cta);
  display:         flex;
  background:      var(--surface);
  border-top:      1px solid var(--border);
  box-shadow:      0 -8px 24px -12px rgba(0, 0, 0, 0.55);
  /* Clear the iOS home indicator (bottom) and, in landscape, the notch on the
     left/right so the buttons never sit under it. */
  padding-bottom:  env(safe-area-inset-bottom);
  padding-left:    env(safe-area-inset-left);
  padding-right:   env(safe-area-inset-right);
}

.imr-floating-cta__btn {
  flex:            1 1 0;                /* two equal buttons */
  min-width:       0;                    /* let flex split 50/50 — content can't force overflow */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  min-height:      56px;                 /* comfortable tap target */
  padding:         0.6rem 1rem;
  font-family:     var(--font-body);
  font-size:       var(--fs-body);
  font-weight:     600;
  line-height:     1.15;
  /* Labels are short ("Call Now" / "Contact Us"); if one is ever longer it
     wraps to a second line (min-height + line-height absorb it) rather than
     clipping — text-overflow:ellipsis does nothing on a flex container, so it
     was removed. min-width:0 above still lets the buttons hold a 50/50 split. */
  text-align:      center;
  text-decoration: none;
  transition:      background var(--ease), color var(--ease);
}
/* The two buttons meet with a hairline divider rather than touching flat. */
.imr-floating-cta__btn--contact { border-left: 1px solid var(--border); }
.imr-floating-cta__btn i { font-size: 1.05em; }

.imr-floating-cta__btn--call {
  background: var(--accent);
  color:      var(--on-accent);
}
.imr-floating-cta__btn--call:hover { background: var(--accent-hover); color: var(--on-accent); }

.imr-floating-cta__btn--contact {
  background: var(--surface);
  color:      var(--text);
}
.imr-floating-cta__btn--contact:hover { background: var(--surface-2); color: var(--text); }

.imr-floating-cta__btn:focus-visible {
  outline:         3px solid var(--focus-ring);
  outline-offset: -3px;                  /* inset so it stays visible in the bar */
}

/* ── Desktop: single floating pill, bottom-right ───────────────────────── */
.imr-floating-cta__pill {
  position:        fixed;
  right:           24px;
  bottom:          24px;
  z-index:         var(--z-floating-cta);
  display:         inline-flex;
  align-items:     center;
  gap:             0.6rem;
  padding:         0.85rem 1.4rem;
  background:      var(--accent);
  color:           var(--on-accent);
  font-family:     var(--font-body);
  font-size:       var(--fs-body);
  font-weight:     700;
  line-height:     1;
  text-decoration: none;
  border-radius:   var(--radius-pill);
  box-shadow:      0 12px 30px -10px rgba(0, 0, 0, 0.55);
  transition:      background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.imr-floating-cta__pill i { font-size: 1.05em; }
.imr-floating-cta__pill:hover {
  background:  var(--accent-hover);
  color:       var(--on-accent);
  transform:   translateY(-3px);
  box-shadow:  0 18px 38px -12px rgba(0, 0, 0, 0.6);
}
.imr-floating-cta__pill:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .imr-floating-cta__pill:hover { transform: none; }
}

/* ── Responsive toggle: exactly one face shows at a time ────────────────── */
/* Default (desktop, ≥1025px): pill only.
   The switch matches the hamburger breakpoint (≤1024px) so the bottom bar and
   the mobile menu appear together — no 901–1024px zone with the hamburger menu
   but the desktop pill. */
.imr-floating-cta__bar  { display: none; }

@media (max-width: 1024px) {
  .imr-floating-cta__bar  { display: flex; }
  .imr-floating-cta__pill { display: none; }
}

/* Keep the fixed bottom bar from covering the footer / last section. */
@media (max-width: 1024px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Blog listing (home.php + archive.php) — shared design
   Hero band, category chips, featured spotlight, post-card grid.
   All colors/spacing via existing tokens (navy/blue, Archivo + Inter).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared blog / archive hero ────────────────────────────────────────── */
.imr-blog-hero {
  padding-block: var(--space-8);
  background:    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.imr-blog-hero__inner { max-width: 60ch; }
.imr-blog-hero__eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--accent-light);
  margin-bottom:  0.75rem;
}
.imr-blog-hero__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-hero);
  line-height:   var(--lh-tight);
  color:         var(--text);
  margin-bottom: var(--space-4);
}
.imr-blog-hero__subtitle {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--text-muted);
}
.imr-blog-hero__subtitle p:last-child { margin-bottom: 0; }

/* ── Category filter chips ─────────────────────────────────────────────── */
.imr-blog-chips {
  background:    var(--bg);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-4);
}
.imr-blog-chips__inner {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.6rem;
}
.imr-chip {
  display:         inline-flex;
  align-items:     center;
  padding:         0.5rem 1rem;
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     600;
  line-height:     1;
  text-decoration: none;
  color:           var(--text-muted);
  background:      transparent;
  border:          1px solid var(--border-strong);
  border-radius:   var(--radius-pill);
  transition:      background var(--ease), color var(--ease), border-color var(--ease);
}
.imr-chip:hover {
  color:        var(--accent-light);
  border-color: var(--accent-light);
  text-decoration: none;
}
.imr-chip--active,
.imr-chip[aria-current="page"] {
  color:        var(--on-accent);
  background:   var(--accent);
  border-color: var(--accent);
}
.imr-chip--active:hover,
.imr-chip[aria-current="page"]:hover {
  color:        var(--on-accent);
  background:   var(--accent-hover);
  border-color: var(--accent-hover);
}
.imr-chip:focus-visible {
  outline:        3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Featured post spotlight (most recent, large) ──────────────────────── */
.imr-spotlight {
  display:               grid;
  grid-template-columns: 1.15fr 1fr;
  gap:                   var(--space-6);
  align-items:           center;
  margin-bottom:         var(--space-8);
  padding-bottom:        var(--space-8);
  border-bottom:         1px solid var(--border);
}
.imr-spotlight__media {
  display:       block;
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.imr-spotlight__media img {
  width:      100%;
  height:     100%;
  max-height: 420px;
  object-fit: cover;
  transition: transform var(--ease);
}
.imr-spotlight__media:hover img { transform: scale(1.03); }
.imr-spotlight__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h1);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin-block:  0.5rem 0.75rem;
}
.imr-spotlight__title a { color: var(--text); text-decoration: none; }
.imr-spotlight__title a:hover { color: var(--accent-light); }
.imr-spotlight__excerpt {
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  line-height:   var(--lh-body);
  color:         var(--text-muted);
  margin-bottom: var(--space-4);
}
.imr-spotlight__meta {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-subtle);
  display:       flex;
  gap:           0.5rem;
  margin-bottom: var(--space-4);
}
.imr-spotlight__link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  font-family:     var(--font-body);
  font-weight:     700;
  color:           var(--accent-light);
  text-decoration: none;
}
.imr-spotlight__link:hover { color: var(--accent-hover); gap: 0.65rem; }

@media (prefers-reduced-motion: reduce) {
  .imr-spotlight__media:hover img { transform: none; }
  .imr-spotlight__link:hover { gap: 0.4rem; }
}
@media (max-width: 768px) {
  .imr-spotlight { grid-template-columns: 1fr; }
}

/* ── Post card — link label + footer meta with read time ───────────────── */
a.imr-post-card__label {
  text-decoration: none;
  transition:      color var(--ease);
}
a.imr-post-card__label:hover { color: var(--accent); }

.imr-post-card__body { display: flex; flex-direction: column; }

.imr-post-card__footer .imr-post-card__meta {
  display:       flex;
  align-items:   center;
  gap:           0.4rem;
  margin-bottom: 0;
}
.imr-post-card__dot { color: var(--text-subtle); }

/* ═══════════════════════════════════════════════════════════════════════
   Single blog post (single.php) — header byline, two-column body,
   sidebar (desktop) / left drawer (mobile), author box, more-guides.
   All colors/spacing via existing tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header: category label + byline ───────────────────────────────────── */
.imr-single-header .imr-post-card__label { margin-bottom: 0.75rem; }

.imr-byline {
  display:     flex;
  align-items: center;
  gap:         0.85rem;
  margin-top:  var(--space-5);
}
.imr-byline__avatar {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  flex:            0 0 48px;
  border-radius:   var(--radius-pill);
  background:      var(--surface-2);
  color:           var(--accent-light);
  font-size:       1.15rem;
}
.imr-byline__author { margin: 0; line-height: 1.3; }
.imr-byline__name {
  font-family: var(--font-display);
  font-weight: 700;
  color:       var(--text);
}
.imr-byline__role {
  display:     block;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--accent-light);
}
.imr-byline__meta {
  margin:      0.15rem 0 0;
  display:     flex;
  gap:         0.4rem;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-subtle);
}

/* ── Two-column layout ─────────────────────────────────────────────────── */
.imr-single-layout {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:                   var(--space-7);
  align-items:           start;
}
.imr-single-main { min-width: 0; }
.imr-single-main .imr-entry-content { max-width: none; } /* fill the column */

/* ── Author box (after content) ────────────────────────────────────────── */
.imr-author-box {
  display:       flex;
  gap:           var(--space-4);
  margin-top:    var(--space-7);
  padding:       var(--space-5);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
}
.imr-author-box__avatar {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           64px;
  height:          64px;
  flex:            0 0 64px;
  border-radius:   var(--radius-pill);
  background:      var(--surface-2);
  color:           var(--accent-light);
  font-size:       1.5rem;
}
.imr-author-box__kicker {
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-subtle);
  margin:         0 0 0.25rem;
}
.imr-author-box__name {
  font-family: var(--font-display);
  font-size:   var(--fs-h3);
  color:       var(--text);
  margin:      0;
}
.imr-author-box__title {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--accent-light);
  margin:      0 0 0.5rem;
}
.imr-author-box__bio {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: var(--lh-body);
  margin:      0;
}

/* ── Sidebar cards ─────────────────────────────────────────────────────── */
.imr-single-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}
.imr-side-card {
  padding:       var(--space-5);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
}
.imr-side-card__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  color:         var(--text);
  margin-bottom: 0.75rem;
}
.imr-side-card--cta {
  background:  linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
  border-color: var(--border-strong);
}
.imr-side-card--cta .imr-side-card__text {
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  margin-bottom: var(--space-4);
}
.imr-side-card--cta .imr-btn { width: 100%; }

/* Browse by category */
.imr-side-cats li + li { border-top: 1px solid var(--border); }
.imr-side-cats a {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
  padding:         0.6rem 0;
  font-family:     var(--font-body);
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--ease);
}
.imr-side-cats a:hover { color: var(--accent-light); }
.imr-side-cats__count {
  font-size:     var(--fs-sm);
  color:         var(--text-subtle);
  background:    var(--surface-2);
  border-radius: var(--radius-pill);
  padding:       0.1rem 0.55rem;
  flex:          0 0 auto;
}

/* Related posts (sidebar) */
.imr-side-related__item {
  display:     flex;
  gap:         0.75rem;
  align-items: center;
}
.imr-side-related__item + .imr-side-related__item {
  margin-top:  0.85rem;
  padding-top: 0.85rem;
  border-top:  1px solid var(--border);
}
.imr-side-related__thumb {
  flex:          0 0 60px;
  width:         60px;
  height:        60px;
  border-radius: var(--radius-md);
  overflow:      hidden;
}
.imr-side-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.imr-side-related__link {
  font-family:     var(--font-body);
  font-size:       var(--fs-sm);
  font-weight:     600;
  line-height:     var(--lh-snug);
  color:           var(--text);
  text-decoration: none;
}
.imr-side-related__link:hover { color: var(--accent-light); }

/* ── More guides grid ──────────────────────────────────────────────────── */
.imr-more-guides { border-top: 1px solid var(--border); }
.imr-more-guides__title {
  font-size:     var(--fs-h2);
  margin-bottom: var(--space-6);
  text-align:    left;
}

/* ── Sidebar mobile controls (hidden on desktop) ───────────────────────── */
.imr-sidebar-toggle,
.imr-sidebar-close,
.imr-sidebar-backdrop { display: none; }

/* ── Mobile: sidebar becomes a left drawer ─────────────────────────────── */
@media (max-width: 900px) {
  .imr-single-layout { grid-template-columns: 1fr; }

  /* Floating open button, fixed top-left */
  .imr-sidebar-toggle {
    position:        fixed;
    top:             84px;              /* clear of the sticky header */
    left:            16px;
    z-index:         var(--z-post-sidebar);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           48px;
    height:          48px;
    border:          0;
    border-radius:   var(--radius-pill);
    background:      var(--accent);
    color:           var(--on-accent);
    font-size:       1.1rem;
    cursor:          pointer;
    box-shadow:      0 10px 26px -10px rgba(0, 0, 0, 0.6);
    transition:      background var(--ease);
  }
  .imr-sidebar-toggle:hover { background: var(--accent-hover); }
  .imr-sidebar-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

  /* Backdrop */
  .imr-sidebar-backdrop {
    display:    block;
    position:   fixed;
    inset:      0;
    z-index:    calc(var(--z-post-sidebar) - 1);
    background: rgba(4, 12, 24, 0.6);
  }
  .imr-sidebar-backdrop[hidden] { display: none; }

  /* Drawer slides in from the left */
  .imr-single-sidebar {
    position:    fixed;
    inset:       0 auto 0 0;
    z-index:     var(--z-post-sidebar);
    width:       min(340px, 88vw);
    background:  var(--surface);
    border-right: 1px solid var(--border);
    box-shadow:  var(--shadow-card);
    padding:     4rem var(--space-5) var(--space-6);
    overflow-y:  auto;
    transform:   translateX(-100%);
    transition:  transform var(--ease);
  }
  .imr-single-sidebar.is-open { transform: translateX(0); }

  .imr-sidebar-close {
    position:        absolute;
    top:             1rem;
    right:           1rem;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border:          0;
    border-radius:   var(--radius-pill);
    background:      var(--surface-2);
    color:           var(--text);
    font-size:       1.1rem;
    cursor:          pointer;
  }
  .imr-sidebar-close:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Portfolio listing (template-portfolio.php)
   Hero, trust stats, area filter (reuses .imr-chip), job cards.
   All colors/spacing via existing tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filter chips are <button>s here — reset default button chrome */
.imr-portfolio-filter .imr-chip {
  cursor:     pointer;
  appearance: none;
}

/* ── Trust stats row ───────────────────────────────────────────────────── */
.imr-portfolio-stats {
  padding-block: var(--space-6);
  background:    var(--bg);
  border-bottom: 1px solid var(--border);
}
.imr-stat-row {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
  text-align:            center;
}
.imr-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.imr-stat__value {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  font-weight: 700;
  color:       var(--accent-light);
  line-height: 1;
}
.imr-stat__label {
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--text-muted);
}
@media (max-width: 640px) {
  .imr-stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
}

/* ── Job card ──────────────────────────────────────────────────────────── */
.imr-job-card {
  display:        flex;
  flex-direction: column;
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  transition:     box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.imr-job-card:hover {
  box-shadow:   var(--shadow-card);
  border-color: var(--border-strong);
  transform:    translateY(-2px);
}
.imr-job-card.is-hidden { display: none; }

.imr-job-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background:   var(--surface-2);
}
.imr-job-card__media img,
.imr-job-card__media a {
  display: block;
  width:   100%;
  height:  100%;
}
.imr-job-card__media img { object-fit: cover; }
.imr-job-card__media-fallback {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  font-size:       2.5rem;
  color:           var(--text-subtle);
}

/* Location pill — real crawlable text, overlaid top-left */
.imr-job-card__pin {
  position:      absolute;
  top:           0.75rem;
  left:          0.75rem;
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  padding:       0.35rem 0.75rem;
  background:    rgba(7, 22, 44, 0.85); /* --bg @ 85% for legibility over photos */
  color:         var(--text);
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  font-weight:   600;
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.imr-job-card__pin i { color: var(--accent-light); }

.imr-job-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--space-5);
}
.imr-job-card__type {
  font-family:    var(--font-body);
  font-size:      var(--fs-xs, 0.75rem);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--accent-light);
  margin-bottom:  0.5rem;
}
.imr-job-card__title {
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  line-height:   var(--lh-snug);
  color:         var(--text);
  margin-bottom: 0.5rem;
}
.imr-job-card__title a { color: var(--text); text-decoration: none; }
.imr-job-card__title a:hover { color: var(--accent-light); }
.imr-job-card__excerpt {
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  line-height:   var(--lh-body);
  margin-bottom: var(--space-4);
}
.imr-job-card__link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  margin-top:      auto;
  font-family:     var(--font-body);
  font-weight:     700;
  color:           var(--accent-light);
  text-decoration: none;
}
.imr-job-card__link:hover { color: var(--accent-hover); gap: 0.65rem; }
@media (prefers-reduced-motion: reduce) {
  .imr-job-card__link:hover { gap: 0.4rem; }
}
.imr-job-card__brand {
  display:     flex;
  align-items: center;
  gap:         0.45rem;
  margin:      0;
  padding:     var(--space-4) var(--space-5);
  border-top:  1px solid var(--border);
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-subtle);
}
.imr-job-card__brand i { color: var(--text-muted); }

.imr-portfolio-empty {
  text-align: center;
  color:      var(--text-muted);
  padding-block: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════════
   Single portfolio (case study) — single-portfolio.php
   Header tag row, case-study story styling, customer quote, spec card,
   services-used. Reuses the single-post two-column + drawer scaffolding.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header: service-type + location pill ──────────────────────────────── */
.imr-pf-tags {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           0.6rem;
  margin-bottom: var(--space-4);
}
.imr-pf-tags__type {
  font-family:    var(--font-body);
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--accent-light);
}
.imr-pf-tags__pin {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  padding:       0.3rem 0.7rem;
  background:    var(--surface-2);
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-family:   var(--font-body);
  font-size:     var(--fs-sm);
  font-weight:   600;
  color:         var(--text);
}
.imr-pf-tags__pin i { color: var(--accent-light); }
.imr-pf-intro {
  max-width:   62ch;
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--text-muted);
  margin-top:  var(--space-4);
}

/* ── Case-study story: numbered h2 chips + checkmark lists + result box ─── */
.imr-pf-story { counter-reset: imr-pf-step; }
.imr-pf-story h2 {
  counter-increment: imr-pf-step;
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}
.imr-pf-story h2::before {
  content:         counter(imr-pf-step);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 2rem;
  width:           2rem;
  height:          2rem;
  border-radius:   var(--radius-md);
  background:      var(--accent-soft);
  color:           var(--accent-light);
  font-size:       1rem;
  font-weight:     700;
  font-family:     var(--font-body);
}

/* Checkmark-style unordered lists inside the story */
.imr-pf-story ul { list-style: none; padding-left: 0; }
.imr-pf-story ul li {
  position:     relative;
  padding-left: 1.9rem;
  color:        var(--text-muted);
}
.imr-pf-story ul li::before {
  content:      "\f00c"; /* Font Awesome check */
  font-family:  "Font Awesome 6 Free";
  font-weight:  900;
  position:     absolute;
  left:         0;
  top:          0.15em;
  color:        var(--success);
  font-size:    0.85em;
}

/* Result callout — add the CSS class "imr-result" to a paragraph/group in the
   editor (Block → Advanced → Additional CSS class). Green highlight box. */
.imr-pf-story .imr-result,
.imr-entry-content .imr-result {
  border-left:   4px solid var(--success);
  background:    rgba(52, 199, 150, 0.10); /* --success @ 10% */
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding:       var(--space-5);
  margin-block:  var(--space-6);
  color:         var(--text);
}
.imr-pf-story .imr-result::before,
.imr-entry-content .imr-result::before {
  content:        "\f058"; /* FA circle-check */
  font-family:    "Font Awesome 6 Free";
  font-weight:    900;
  color:          var(--success);
  margin-right:   0.5rem;
}

/* ── Customer quote ────────────────────────────────────────────────────── */
.imr-pf-quote {
  margin:        var(--space-7) 0 0;
  padding:       var(--space-6);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align:    center;
}
.imr-pf-quote__stars { margin-bottom: var(--space-4); color: var(--warning); font-size: 1.05rem; }
.imr-pf-quote__stars i { margin: 0 0.05rem; }
.imr-pf-quote__star--off { color: var(--text-subtle); }
.imr-pf-quote__text {
  border:      0;
  padding:     0;
  margin:      0 auto;
  max-width:   60ch;
  font-family: var(--font-display);
  font-size:   var(--fs-h3);
  font-style:  normal;
  line-height: var(--lh-snug);
  color:       var(--text);
}
.imr-pf-quote__author {
  margin-top:  var(--space-4);
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--accent-light);
}

/* ── Sidebar: Project at a Glance spec list ────────────────────────────── */
.imr-pf-spec__row {
  display:         flex;
  justify-content: space-between;
  gap:             0.75rem;
  padding:         0.55rem 0;
}
.imr-pf-spec__row + .imr-pf-spec__row { border-top: 1px solid var(--border); }
.imr-pf-spec dt {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  color:       var(--text-subtle);
  flex:        0 0 auto;
}
.imr-pf-spec dd {
  margin:      0;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  font-weight: 600;
  color:       var(--text);
  text-align:  right;
}

/* ── Sidebar: Services Used ────────────────────────────────────────────── */
.imr-pf-services li + li { margin-top: 0.35rem; }
.imr-pf-services a {
  display:         flex;
  align-items:     center;
  gap:             0.55rem;
  padding:         0.5rem 0;
  font-family:     var(--font-body);
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--ease), gap var(--ease);
}
.imr-pf-services a:hover { color: var(--accent-light); gap: 0.8rem; }
.imr-pf-services a i { color: var(--accent-light); font-size: 0.8em; }
@media (prefers-reduced-motion: reduce) {
  .imr-pf-services a:hover { gap: 0.55rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   === Homepage === (Claude Design integration — Poppins, gold-dominant)

   Design CSS vars mapped to theme tokens:
   --primary->--surface  --primary-dark->--bg  --gold->--accent
   design --accent(cyan)->--highlight  --cta-text->--surface

   SECTION GROUNDS (2026-07-29). Every homepage <section> carries
   data-section-bg="dark|ink|light|light-alt|gold" and the rules below resolve
   it. Most of the page sits on a light ground — that is what lets gold read as
   an accent instead of drowning in navy-on-navy. Markup never names a colour.

   Gold-on-light note: bright gold is ~1.9:1 on cream, far
   below AA, so gold BARS/BUTTONS/RULES stay --accent (graphics, 3:1) while gold
   TEXT on a light ground uses --accent-deep (4.66:1, AA).
   ═══════════════════════════════════════════════════════════════════════ */
.ss-home{font-family:var(--font-poppins);color:var(--text);background:var(--section-light);line-height:1.6;font-size:18px}
.ss-home h1,.ss-home h2,.ss-home h3,.ss-home h4{font-family:var(--font-poppins)}
.ss-container{max-width:1200px;margin:0 auto;padding:0 24px}
.ss-section{padding:clamp(60px,8vw,104px) 0}

/* ── Section grounds ─────────────────────────────────────────────────────
   Moved to GLOBAL scope (see "Section grounds — global" near the end of this
   file) so every template gets the same treatment, not just the homepage.
   Nothing homepage-specific remains here. */
/* Legacy aliases — older markup used modifier classes for the same two grounds. */
.ss-section--bg{background:var(--bg)}
.ss-section--alt{background:var(--surface-2)}

/* ── Shared type ─────────────────────────────────────────────────────── */
.ss-eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.ss-eyebrow--center{justify-content:center}
.ss-eyebrow__bar{width:30px;height:3px;background:var(--accent);border-radius:2px;flex:none}
.ss-eyebrow__label{color:var(--accent);font-weight:700;font-size:14px;letter-spacing:2.5px;text-transform:uppercase}
.ss-h2{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.5px;margin:0 0 22px;color:var(--text)}
.ss-h2--tight{margin-bottom:12px}
.ss-lead{color:var(--text-muted);font-size:18px;max-width:70ch}
.ss-lead--gap{margin-bottom:34px}
/* Centered eyebrow + H2 + subtext block that opens most sections. */
.ss-intro{max-width:780px;margin:0 auto clamp(34px,4.5vw,52px);text-align:center}
.ss-intro .ss-eyebrow{justify-content:center;margin-bottom:14px}
.ss-intro .ss-h2{margin:0 0 16px}
.ss-intro .ss-lead{margin:0 auto;max-width:64ch}
.ss-section__foot{margin:38px 0 0;text-align:center}
.ss-empty{margin:0;padding:36px 0;text-align:center;font-weight:600;color:var(--ink-subtle)}

/* ── CTA buttons ─────────────────────────────────────────────────────── */
.ss-cta{background:var(--accent);color:var(--surface);text-decoration:none;font-weight:700;font-size:18px;padding:0 34px;min-height:58px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;border:none;cursor:pointer;box-shadow:0 6px 16px rgba(var(--accent-rgb),.28),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s,filter .2s}
.ss-cta:hover{filter:brightness(.96);transform:translateY(-1px);color:var(--surface)}
.ss-cta--sm{font-size:15px;padding:0 22px;min-height:48px}
.ss-cta__badge{width:30px;height:30px;border-radius:50%;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ss-cta__badge svg{color:var(--white)}
.ss-btn-ghost{background:rgba(255,255,255,.12);color:var(--text);text-decoration:none;font-weight:700;font-size:18px;padding:0 30px;min-height:58px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;border:2px solid rgba(255,255,255,.85);transition:transform .2s,background .2s,color .2s}
.ss-btn-ghost:hover{background:var(--card);color:var(--surface);transform:translateY(-1px)}
.ss-link{color:var(--accent);font-weight:700;font-size:16px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.ss-link--lg{font-size:18px}
.ss-link .ss-ar{display:inline-block;transition:transform .2s}
.ss-link:hover{color:var(--accent-light)}
.ss-link:hover .ss-ar{transform:translateX(5px)}

/* ── Hero (centered; background photo + gradient scrim) ──────────────── */
.ss-hero{position:relative;background:var(--bg);color:var(--text);overflow:hidden;isolation:isolate}
/* center right — keeps the photo's subject clear of the left-aligned copy. */
.ss-hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center right}
.ss-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(var(--bg-rgb),.96) 0%,rgba(var(--bg-rgb),.85) 34%,rgba(var(--surface-rgb),.5) 100%)}
/* Left-aligned, as in the design mockup: copy column pinned to the container's
   left edge, capped at 720px, everything inside flush-left at every width. */
.ss-hero__inner,.ss-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:clamp(54px,7vw,96px) 24px clamp(64px,8vw,104px);min-height:clamp(520px,66vh,720px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left}
.ss-hero__content{max-width:720px;margin-left:0;margin-right:auto;width:100%}
.ss-hero-eyebrow{justify-content:flex-start}
/* The mockup's centered layout put a bar on each side of the eyebrow; only the
   leading one belongs in the left-aligned treatment. */
.ss-hero-eyebrow .ss-eyebrow__bar:last-child{display:none}
.ss-hero__h1{font-size:clamp(38px,5.6vw,64px);font-weight:800;line-height:1.04;letter-spacing:-.5px;margin:0 0 20px;text-shadow:0 2px 18px rgba(var(--bg-rgb),.5);color:var(--text)}
.ss-hero__sub{font-size:clamp(18px,2.1vw,21px);line-height:1.6;max-width:56ch;margin:0 0 32px;color:rgba(255,255,255,.95);text-shadow:0 1px 10px rgba(var(--bg-rgb),.4)}
.ss-hero__cts,.ss-hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px;justify-content:flex-start}
.ss-hero__stats{display:inline-flex;flex-wrap:wrap;justify-content:flex-start;gap:22px 40px;background:rgba(var(--bg-rgb),.42);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:20px 28px;margin:0;align-self:flex-start;max-width:720px}
.ss-hero__stat-num{font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--accent);line-height:1;letter-spacing:-.5px}
.ss-hero__stat-label{font-size:15px;font-weight:600;color:rgba(255,255,255,.92);margin-top:5px}

/* ── Trust bar ───────────────────────────────────────────────────────── */
.ss-trust__row{max-width:1200px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:center}
.ss-trust__item{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--text)}
.ss-trust__item svg{color:var(--accent)}

/* ── Cards (generic white) ───────────────────────────────────────────── */
.ss-card{background:var(--card);border-radius:16px;border:1px solid var(--border-card);transition:transform .2s,box-shadow .2s,border-color .2s}
.ss-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.ss-pad{padding:32px 30px}
.ss-card h3{margin:0 0 10px;font-size:22px;font-weight:700;color:var(--card-ink)}
.ss-card p{margin:0;color:var(--card-muted);font-size:17px}

/* ── About ───────────────────────────────────────────────────────────────
   Four flat children (head / media / body / quote) placed by grid-template-
   areas. Mobile-first: single column, DOM order (heading, photo, copy,
   quote), quote fully unpinned. ≥768px (below) = even 1fr/1fr split, photo
   left, copy right, quote overhanging the photo's bottom-right corner. No
   photo = one left-aligned column with the quote as a normal card. */
.ss-about__grid{display:grid;grid-template-columns:1fr;grid-template-areas:"head" "media" "body" "quote";gap:28px;align-items:center}
.ss-about__head{grid-area:head}
.ss-about__body{grid-area:body}
.ss-about__media{grid-area:media;position:relative;aspect-ratio:4/3}
.ss-about__photo{position:absolute;inset:0;width:100%;height:100%;border-radius:18px;overflow:hidden;object-fit:cover;box-shadow:var(--shadow-card-hover);background:var(--navy)}
.ss-about__quote{grid-area:quote;position:static;width:auto;background:var(--white);border-left:4px solid var(--gold);border-radius:0 16px 16px 0;padding:20px 22px;box-shadow:var(--shadow-card)}
.ss-about__quote-mark{font-size:46px;line-height:.5;color:var(--navy);font-weight:800;margin-bottom:6px}
.ss-about__quote blockquote{margin:0}
.ss-about__quote p{margin:0 0 14px;font-size:16px;font-weight:600;line-height:1.5;font-style:italic;color:var(--navy)}
.ss-about__quote figcaption{margin:0}
.ss-about__quote cite{font-weight:700;color:var(--gold-dark);font-size:14px;font-style:normal}
.ss-about__p{margin:0 0 16px;color:var(--ink-body)}
/* No usable photo: one full-width left-aligned column; quote joins the flow. */
.ss-about__grid--noimg{grid-template-areas:"head" "body" "quote";gap:0}
.ss-about__grid--noimg .ss-about__body{max-width:74ch}
.ss-about__grid--noimg .ss-about__quote{max-width:640px;margin:8px 0 0}
.ss-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ss-badge-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--text);font-weight:700;font-size:15px;padding:10px 18px;border-radius:999px}
.ss-badge-pill svg{color:var(--accent)}

/* ── Grid helpers ────────────────────────────────────────────────────── */
.ss-grid{display:grid;gap:24px}
.ss-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ss-grid--fill{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ss-grid--services{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* Recent Work + Free Guides: 3 up on desktop, 2 on tablet, 1 on phone. */
.ss-grid--cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){ .ss-grid--cards3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .ss-grid--cards3{grid-template-columns:1fr} }

/* ── Why cards ───────────────────────────────────────────────────────── */
.ss-why__icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(140deg,var(--surface),var(--highlight));display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 8px 18px rgba(var(--surface-rgb),.3)}
.ss-why__icon svg{color:var(--white)}

/* ── Service cards ───────────────────────────────────────────────────── */
.ss-svc-card{display:flex;flex-direction:column;padding:26px}
.ss-svc-card__icon{width:56px;height:56px;border-radius:14px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ss-svc-card__icon svg{color:var(--surface)}
.ss-svc-card h3{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--card-ink)}
.ss-svc-card p{margin:0 0 18px;color:var(--card-muted);font-size:16px;flex:1}

/* ── Reviews (Trustindex widget + rating badge) ──────────────────────── */
.ss-reviews__rating{margin:20px 0 0;color:var(--text-muted);font-weight:700;font-size:17px;display:inline-flex;align-items:center;gap:10px}
.ss-stars{display:inline-flex;gap:2px;color:var(--accent)}
.ss-trustindex-wrap{max-width:1200px;margin:0 auto;width:100%}
.ss-trustindex-wrap img,.ss-trustindex-wrap iframe{max-width:100%}

/* ── Recent Work cards ───────────────────────────────────────────────── */
.ss-portfolio-card{overflow:hidden;display:flex;flex-direction:column}
.ss-portfolio-card__media{position:relative;display:block;line-height:0}
.ss-portfolio-card__img{display:block;width:100%;height:200px;object-fit:cover;background:var(--surface-2)}
.ss-portfolio-card__loc{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--surface);font-size:12px;font-weight:800;letter-spacing:1.2px;padding:6px 13px;border-radius:999px;line-height:1.4;box-shadow:0 4px 12px rgba(20,33,58,.22)}
.ss-portfolio-card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.ss-portfolio-card h3{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.3;color:var(--card-ink)}
.ss-portfolio-card p{margin:0 0 18px;color:var(--card-muted);font-size:16px;flex:1}

/* ── Brands — 12 logos, 4 across on desktop (3 rows × 4 columns) ─────── */
.ss-brands__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:900px){ .ss-brands__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} }
@media(max-width:560px){ .ss-brands__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ss-brand-chip{background:var(--card);border:1px solid var(--border-card);border-radius:14px;min-height:104px;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.ss-brand-chip:hover{border-color:var(--accent);transform:translateY(-2px)}
.ss-brand-chip a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none}
/* Beat .imr-brand-strip__logo's width/height:100%, which stretched these square
   source logos across the full chip and shrank the artwork. */
.ss-brand-chip img{width:auto;height:auto;max-width:100%;max-height:76px;object-fit:contain;display:block}
.ss-brand-chip .imr-brand-strip__name{font-family:var(--font-poppins);font-size:16px;font-weight:700;color:var(--ink);text-align:center}

/* ── Guide cards ─────────────────────────────────────────────────────── */
.ss-guide-card{overflow:hidden;display:flex;flex-direction:column}
.ss-guide-card__media{display:block;line-height:0}
.ss-guide-card__img{display:block;width:100%;height:190px;object-fit:cover;background:var(--surface-2)}
.ss-guide-card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.ss-guide-card__date{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-subtle)}
.ss-guide-card h3{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.35;color:var(--card-ink)}
.ss-guide-card p{margin:0 0 18px;color:var(--card-muted);font-size:16px;flex:1}
/* Gradient stand-in when a post has no featured image. */
.ss-media-ph{background:linear-gradient(140deg,var(--surface),var(--highlight))}
/* Card titles are links; they take the card's text colour, gold on hover. */
.ss-portfolio-card h3 a,.ss-guide-card h3 a{color:inherit;text-decoration:none}
.ss-portfolio-card h3 a:hover,.ss-guide-card h3 a:hover{color:var(--accent-deep)}

/* ── Get Started (contact form + Google Business panel) ──────────────── */
.ss-contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;align-items:start}
.ss-contact__aside{display:flex;flex-direction:column;gap:20px}
.ss-form-wrap{background:var(--card);border-radius:18px;padding:30px;border:1px solid var(--border-card)}
.ss-form-wrap label{display:block;font-weight:700;font-size:16px;margin-bottom:8px;color:var(--card-ink)}
.ss-form-wrap input,.ss-form-wrap textarea,.ss-form-wrap select{width:100%;min-height:52px;padding:0 16px;font-size:18px;font-family:inherit;border:2px solid var(--border-card);border-radius:11px;color:var(--card-ink);background:var(--white);margin-bottom:6px}
.ss-form-wrap textarea{min-height:120px;padding:12px 16px;resize:vertical}
.ss-form-wrap input:focus,.ss-form-wrap textarea:focus,.ss-form-wrap select:focus{border-color:var(--surface);outline:none}
/* Google Business Profile embed */
.ss-gmb-embed{border-radius:18px;overflow:hidden;border:1px solid var(--border-strong);box-shadow:0 10px 26px rgba(0,0,0,.28);line-height:0}
.ss-gmb-embed iframe{display:block;width:100%;min-height:340px;border:0}
.ss-gmb-placeholder{border-radius:18px;border:2px dashed var(--border-strong);background:rgba(255,255,255,.04);padding:40px 28px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.ss-gmb-placeholder svg{color:var(--accent)}
.ss-gmb-placeholder p{margin:0;color:var(--text-muted);font-weight:600;font-size:17px}
.ss-gmb-placeholder .ss-hint{font-size:14px;font-weight:500;color:var(--text-subtle);max-width:36ch}
/* Name / address / phone block */
.ss-nap-block{background:var(--card-white);border:1px solid var(--border-light);border-radius:18px;padding:26px 28px;box-shadow:0 4px 24px rgba(20,33,58,.06)}
.ss-nap-block h3{margin:0 0 16px;font-size:21px;font-weight:800;color:var(--ink)}
.ss-nap-block p{margin:0 0 12px;display:flex;align-items:flex-start;gap:11px;color:var(--ink-muted);font-size:16px}
.ss-nap-block p:last-child{margin-bottom:0}
.ss-nap-block svg{flex:none;margin-top:3px;color:var(--accent-deep)}
.ss-nap-block p.ss-nap-phone{display:block;margin-bottom:10px}
.ss-nap-phone a{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:var(--accent-deep);font-weight:800;font-size:20px;text-decoration:none}
.ss-nap-phone a:hover{color:var(--ink)}
.ss-nap-phone a svg{margin-top:0}
.ss-nap-address{line-height:1.5}
.ss-nap-hours{font-weight:600}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.ss-faq{max-width:900px;margin:0 auto;padding:0 24px}
.ss-faq__list{display:flex;flex-direction:column;gap:12px}
.ss-faq__item{background:var(--card);border-radius:14px;border:1px solid var(--border-card);overflow:hidden}
.ss-faq__q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:18px;color:var(--card-ink);padding:20px 24px;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ss-faq__sign{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.ss-faq__item[open] .ss-faq__plus{display:none}
.ss-faq__plus-open{display:none}
.ss-faq__item[open] .ss-faq__plus-open{display:inline}
.ss-faq__a{margin:0;padding:0 24px 22px;color:var(--card-muted);font-size:17px;line-height:1.6}

/* ── Where We Work cards ─────────────────────────────────────────────── */
.ss-area-card{padding:26px;display:flex;flex-direction:column}
.ss-area-card__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ss-area-card__head svg{color:var(--accent)}
.ss-area-card h3{margin:0;font-size:20px;font-weight:700;color:var(--card-ink)}
.ss-area-card p{margin:0 0 18px;color:var(--card-muted);font-size:16px;flex:1}

/* ── Final CTA band (gold ground, navy type) ─────────────────────────── */
.ss-finalcta{text-align:center}
.ss-finalcta .ss-h2{color:var(--surface);margin:0 auto 14px;max-width:22ch}
.ss-finalcta__sub{margin:0 auto 30px;max-width:62ch;color:var(--surface);font-size:18px;font-weight:600}
.ss-finalcta__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ss-cta--onGold{background:var(--card-white);color:var(--surface);box-shadow:0 6px 18px rgba(20,33,58,.2),inset 0 1px 0 rgba(255,255,255,.6)}
.ss-cta--onGold:hover{background:var(--card-white);color:var(--surface);filter:brightness(.97)}
.ss-btn-onGold{background:transparent;color:var(--surface);text-decoration:none;font-weight:700;font-size:18px;padding:0 30px;min-height:58px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;border:2px solid rgba(20,33,58,.55);transition:transform .2s,background .2s,color .2s,border-color .2s}
.ss-btn-onGold:hover{background:var(--surface);color:var(--accent);border-color:var(--surface);transform:translateY(-1px)}

/* ═══ LIGHT SECTIONS ═══════════════════════════════════════════════════
   [data-section-bg^="light"] matches both "light" and "light-alt". Everything
   below re-grounds the shared components for a light background. Dark sections
   keep the base rules above untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.ss-home [data-section-bg^="light"] h2,
.ss-home [data-section-bg^="light"] h3,
.ss-home [data-section-bg^="light"] h4,
.ss-home [data-section-bg^="light"] .ss-h2{color:var(--ink)}
.ss-home [data-section-bg^="light"] p,
.ss-home [data-section-bg^="light"] .ss-lead,
.ss-home [data-section-bg^="light"] .ss-about__p{color:var(--ink-muted)}
/* Gold is the section signature: bars stay full gold, gold text goes deep. */
.ss-home [data-section-bg^="light"] .ss-eyebrow__label{color:var(--accent-deep)}
.ss-home [data-section-bg^="light"] .ss-eyebrow__bar{background:var(--accent)}
/* Cards: white on the tinted ground, soft shadow, gold edge on hover. */
.ss-home [data-section-bg^="light"] .ss-card{background:var(--card-white);border:1px solid var(--border-light);box-shadow:0 4px 24px rgba(20,33,58,.06)}
.ss-home [data-section-bg^="light"] .ss-card:hover{box-shadow:0 14px 34px rgba(20,33,58,.13);border-color:var(--accent)}
.ss-home [data-section-bg^="light"] .ss-link{color:var(--accent-deep)}
.ss-home [data-section-bg^="light"] .ss-link:hover{color:var(--ink)}
.ss-home [data-section-bg^="light"] .ss-badge-pill{background:var(--card-white);color:var(--ink);border:1px solid var(--border-light)}
.ss-home [data-section-bg^="light"] .ss-badge-pill svg{color:var(--accent-deep)}
.ss-home [data-section-bg^="light"] .ss-area-card__head svg{color:var(--accent-deep)}
/* Service-card icon chips carry gold too, not just navy. */
.ss-home [data-section-bg^="light"] .ss-svc-card__icon{background:var(--accent-soft)}
.ss-home [data-section-bg^="light"] .ss-svc-card__icon svg{color:var(--accent-deep)}
.ss-home [data-section-bg^="light"] .ss-guide-card__date{color:var(--ink-subtle)}
.ss-home [data-section-bg^="light"] .ss-faq__item{background:var(--card-white);border-color:var(--border-light);box-shadow:0 4px 24px rgba(20,33,58,.05)}
.ss-home [data-section-bg^="light"] .ss-faq__q{color:var(--ink)}
.ss-home [data-section-bg^="light"] .ss-faq__a{color:var(--ink-muted)}
.ss-home [data-section-bg^="light"] .ss-brand-chip{background:var(--card-white);border-color:var(--border-light);box-shadow:0 4px 24px rgba(20,33,58,.06)}
/* Rating badge: gold stars need a dark ground to stay legible, so the whole
   line becomes a navy pill instead of floating gold-on-near-white. */
.ss-home [data-section-bg^="light"] .ss-reviews__rating{background:var(--surface);color:var(--white);border-radius:999px;padding:11px 22px;box-shadow:0 6px 18px rgba(20,33,58,.16)}

/* ── Responsive ──────────────────────────────────────────────────────── */
/* Desktop (≥768px): photo/copy side by side, even 1fr/1fr split. The quote
   card lifts back onto the photo's bottom-right corner, overlapping into the
   gutter as in the reference. */
@media(min-width:768px){
  .ss-about__grid{grid-template-columns:1fr 1fr;grid-template-areas:"media head" "media body";gap:4rem;align-items:center}
  .ss-about__head{align-self:end}
  .ss-about__body{align-self:start}
  .ss-about__grid--noimg{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "quote";gap:0}
  .ss-about__grid--noimg .ss-about__head,.ss-about__grid--noimg .ss-about__body{align-self:auto}
  .ss-about__grid--noimg .ss-about__body{max-width:74ch}
  .ss-about__quote{position:absolute;bottom:-20px;right:-20px;width:min(320px,88%);box-shadow:0 18px 40px rgba(24,48,96,.18)}
  .ss-about__grid--noimg .ss-about__quote{position:static;width:auto;max-width:640px;margin:8px 0 0;box-shadow:var(--shadow-card)}
}
@media(max-width:640px){
  .ss-home{font-size:16px}
  .ss-hero__stats{gap:18px 26px;padding:16px 20px}
  .ss-nap-block,.ss-gmb-placeholder{padding:22px 20px}
}


/* ═══════════════════════════════════════════════════════════════════════
   === S&S Marine Repair — final palette lockdown === (2026-07-29)

   Navy is a BACKGROUND in exactly three places: header, hero, footer.
   Everything else is cream or cream-alt with white cards and gold CTAs.
   Cyan is numeric/decorative only and never touches a CTA.

   Structure:
     A. Body ground, pinned above theme.json's global styles
     B. On-dark scopes — header / hero / footer only
     C. Section grounds — the global [data-section-bg] API
     D. Section classes re-grounded to cream (templates already alternate)
     E. CTA buttons — one gold gradient, everywhere
     F. CTA band — gold gradient, navy type
     G. Cards — white on --border-card
     H. Cyan: stats + pins only
     I. Prose, forms, homepage specifics
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A. Body ground, pinned ──────────────────────────────────────────────
   theme.json's styles.color values are printed as `body{…}` in
   global-styles-inline-css. `html body` (0,0,2) beats it regardless of the
   order WordPress happens to enqueue in. */
html body{background:var(--cream);color:var(--ink-body)}

/* ── B. ON-DARK SCOPES — header, hero, footer (and page chrome) ──────────
   Re-declaring the tokens locally re-grounds each whole subtree, so no rule
   inside them needs a per-property edit. This list is deliberately short:
   the trust bar, single-header, sidebar CTA and every inner section were
   removed from it and are now cream. */
.imr-site-header,
.imr-site-nav,
.imr-sub-menu,
.imr-mega-panel,
.imr-site-footer,
.imr-floating-cta__bar,
.imr-hero,
.imr-hero-split,
.imr-svc-hero,
.imr-blog-hero,
.ss-hero,
.ss-page-hero,
section[data-section-bg="dark"],
[data-section-bg="dark"]{
  --bg:            var(--navy);
  --text:          var(--white);
  --text-muted:    var(--text-muted-on-dark);
  --text-subtle:   var(--text-subtle-on-dark);
  --border:        var(--border-on-dark);
  --border-strong: var(--border-strong-on-dark);
  --shadow-card:   var(--shadow-card-on-dark);
  --link:          var(--gold);
  color:           var(--white);
}
/* Phase 11 — header + footer + hero */
.imr-site-header,.imr-header{background:var(--navy);color:var(--white)}
.imr-site-header a,.imr-header a{color:var(--white)}
.imr-site-header a:hover:not(.imr-btn),.imr-header a:hover:not(.imr-btn){color:var(--gold)}
/* Header CTA (.imr-header-phone) hover: solid navy fill, white label — the
   client's requested "primary blue" hover treatment. A thin white border is
   added on hover only (border-box sizing means it doesn't shift layout)
   because the header itself is navy — without an edge, a navy-on-navy fill
   would have no visible boundary even though the label stays legible. */
.imr-site-header .imr-btn--primary:hover,.imr-header .imr-btn--primary:hover{background:var(--navy);color:var(--white);border:2px solid var(--white)}
.imr-site-footer,.imr-footer{background:var(--navy);color:var(--white)}
.imr-site-footer a,.imr-footer a{color:var(--white)}
.imr-site-footer a:hover,.imr-footer a:hover{color:var(--gold)}
.imr-hero,.imr-hero-split,.imr-svc-hero,.imr-blog-hero,.ss-hero,.ss-page-hero{background:var(--navy)}
/* Sticky-header translucency + mobile drawer keep the navy ground. */
.imr-site-header.is-stuck{background:color-mix(in srgb, var(--navy) 82%, transparent)}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .imr-site-header.is-stuck{background:var(--navy)}
}
.imr-sub-menu,.imr-mega-panel{background:var(--surface-2)}
@media (max-width:1024px){ .imr-site-nav{background:var(--navy)} }
/* Floating phone CTA — page chrome, stays navy with a gold primary. */
.imr-floating-cta__bar{background:var(--navy);color:var(--white)}
.imr-floating-cta__btn--contact{background:var(--navy);color:var(--white)}
.imr-floating-cta__btn--contact:hover{background:var(--surface-2)}
/* Headings + links on any dark ground. */
section[data-section-bg="dark"] h1,
section[data-section-bg="dark"] h2,
section[data-section-bg="dark"] h3,
.imr-hero h1,.imr-hero h2,.imr-svc-hero h1,.imr-svc-hero h2,
.imr-blog-hero h1,.ss-hero h1{color:var(--white)}
[data-section-bg="dark"] a:hover:not(.imr-btn),.imr-hero a:hover:not(.imr-btn),.ss-hero a:hover:not(.imr-btn){color:var(--gold)}
/* Hero's primary CTA (e.g. "Contact Us") is a gold-gradient .imr-btn--primary
   pill — the ambient gold link-hover above would turn its label gold-on-gold
   on hover. Pin it to navy, matching the outline phone-link's hover state
   (white pill / navy label) so both hero buttons stay legible on hover. */
[data-section-bg="dark"] .imr-btn--primary:hover,.imr-hero .imr-btn--primary:hover,.ss-hero .imr-btn--primary:hover{color:var(--navy)}

/* ── C. Section grounds — global ─────────────────────────────────────── */
section[data-section-bg="light"]{background:var(--cream);color:var(--ink-body)}
section[data-section-bg="light-alt"]{background:var(--cream-alt);color:var(--ink-body)}
section[data-section-bg="dark"]{background:var(--navy);color:var(--white)}
section[data-section-bg="gold"]{background:var(--grad-gold-135);color:var(--navy)}
section[data-section-bg="gold"] h1,
section[data-section-bg="gold"] h2,
section[data-section-bg="gold"] h3{color:var(--navy)}
/* Non-<section> elements carrying the same attribute (the homepage trust bar
   is a <div>) get the identical treatment. */
[data-section-bg="light"]{background:var(--cream);color:var(--ink-body)}
[data-section-bg="light-alt"]{background:var(--cream-alt);color:var(--ink-body)}
[data-section-bg="gold"]{background:var(--grad-gold-135);color:var(--navy)}
/* Eyebrows: gold on dark, link-gold on light (bright gold is 1.9:1 on cream). */
section[data-section-bg="light"] .eyebrow,
section[data-section-bg="light-alt"] .eyebrow,
[data-section-bg="light"] .imr-section-label,
[data-section-bg="light-alt"] .imr-section-label,
[data-section-bg="light"] .ss-eyebrow__label,
[data-section-bg="light-alt"] .ss-eyebrow__label{color:var(--link)}
section[data-section-bg="dark"] .eyebrow,
[data-section-bg="dark"] .imr-section-label,
[data-section-bg="dark"] .ss-eyebrow__label,
.imr-hero .imr-section-label,
.imr-svc-hero .imr-section-label,
.imr-svc-hero__eyebrow,
.imr-blog-hero__eyebrow{color:var(--gold)}
/* Accent bars stay bright gold on every ground — they are graphics. */
.ss-eyebrow__bar{background:var(--gold)}
.imr-section-heading .imr-section-label::before{content:"";display:inline-block;width:26px;height:3px;border-radius:2px;background:var(--gold);vertical-align:middle;margin-right:10px}

/* ── D. Section classes re-grounded to cream ─────────────────────────────
   The templates already alternate .imr-section / .imr-section--alt, so these
   two rules convert every service / brand / location / about / contact
   section at once. */
.imr-section{background:var(--cream)}
.imr-section--alt{background:var(--cream-alt)}
.imr-services-grid,
.imr-faq,
.imr-contact-section,
.imr-latest-posts,
.imr-brand-services,
.imr-service-included,
.imr-404,
.imr-hp-about,
.imr-why-mobile,
.imr-trust-bar--section,
.imr-brands-band,
.imr-blog-chips,
.imr-portfolio-stats,
.imr-single-header,
.ss-section--bg{background:var(--cream)}
.imr-why-us,
.imr-service-area,
.imr-reviews,
.imr-process,
.imr-service-symptoms,
.imr-service-pricing,
.imr-landmarks,
.imr-brand-engines,
.imr-hp-portfolio,
.imr-hp-tech-trust,
.imr-svc-problem,
.imr-trust-bar,
.ss-section--alt{background:var(--cream-alt)}
/* single-header + sidebar CTA were dark; Phase 3 moves them to light. */
.imr-single-header{color:var(--ink-body)}
.imr-single-header h1,.imr-single-header h2{color:var(--ink)}
.imr-side-card--cta{background:var(--white);border:1px solid var(--border-card);color:var(--ink-body)}
.imr-side-card--cta h3{color:var(--ink)}

/* ── E. CTA buttons — one gold gradient everywhere ───────────────────── */
.imr-btn--primary,
.ss-cta,
.wpcf7-submit,
input[type="submit"].wpcf7-submit{
  background:var(--grad-gold);
  color:var(--navy);
  font-weight:700;
  border:none;
  border-radius:999px;
  padding:14px 32px;
  box-shadow:0 6px 16px rgba(216,168,48,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
  transition:transform .2s, box-shadow .2s;
  text-decoration:none;
}
.imr-btn--primary:hover,
.ss-cta:hover,
.wpcf7-submit:hover,
input[type="submit"].wpcf7-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(216,168,48,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  color:var(--navy);
  background:var(--grad-gold);
}
/* Secondary on LIGHT: white pill, navy 2px border, navy label. */
.imr-btn--outline,.imr-btn--ghost,.ss-btn-ghost{
  background:var(--white);
  color:var(--navy);
  border:2px solid var(--navy);
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}
.imr-btn--outline:hover,.imr-btn--ghost:hover,.ss-btn-ghost:hover{
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
}
/* Secondary on DARK (hero): translucent white, white border, white label. */
[data-section-bg="dark"] .imr-btn--outline,
[data-section-bg="dark"] .imr-btn--ghost,
.imr-hero .imr-btn--outline,
.imr-svc-hero .imr-btn--outline,
.imr-hero-split .imr-btn--outline,
.ss-hero .ss-btn-ghost{
  background:rgba(255,255,255,0.12);
  color:var(--white);
  border:2px solid rgba(255,255,255,0.85);
}
/* Hero secondary/outline CTA hover: solid navy fill, white label — same
   "primary blue" treatment as the header CTA above. Border stays white so
   the pill keeps a visible edge against the hero's own navy background. */
[data-section-bg="dark"] .imr-btn--outline:hover,
[data-section-bg="dark"] .imr-btn--ghost:hover,
.imr-hero .imr-btn--outline:hover,
.imr-svc-hero .imr-btn--outline:hover,
.imr-hero-split .imr-btn--outline:hover,
.ss-hero .ss-btn-ghost:hover{background:var(--navy);color:var(--white);border-color:var(--white)}
/* The dark disc inside a gold CTA pill. */
.ss-cta__badge{background:var(--navy)}
.ss-cta__badge svg{color:var(--white)}

/* ── F. CTA band — gold gradient, navy type ─────────────────────────────
   The old .imr-cta-band--gradient ended on a light-blue stop left over from
   the pre-gold accent, which washed blue across the closer on every inner
   page. That stop is deleted at source; the band is now pure gold on every
   template, and no blue/cyan/teal appears in any CTA gradient. */
.imr-cta-band,
.imr-cta-band--gradient,
.imr-svc-finalcta{
  background:var(--grad-gold-135);
  color:var(--navy);
  padding:64px 24px;
  text-align:center;
}
.imr-cta-band h2,.imr-cta-band h3,
.imr-cta-band__title,
.imr-cta-band--gradient .imr-cta-band__title,
.imr-svc-finalcta__title{color:var(--navy)}
.imr-cta-band p,
.imr-cta-band__sub,
.imr-cta-band--gradient .imr-cta-band__sub,
.imr-svc-finalcta__urgency{color:var(--navy);opacity:0.9}
.imr-svc-finalcta__eyebrow{color:var(--navy)}
.imr-svc-finalcta__dot{background:var(--navy)}
/* Primary on gold: white pill, navy label (7.6:1). */
.imr-cta-band .imr-btn--primary,
.imr-cta-band--gradient .imr-btn--primary,
.imr-svc-finalcta .imr-btn--primary,
[data-section-bg="gold"] .imr-btn--primary,
[data-section-bg="gold"] .ss-cta{
  background:var(--white);
  color:var(--navy);
  box-shadow:0 6px 16px rgba(24,48,96,0.22);
}
.imr-cta-band .imr-btn--primary:hover,
.imr-cta-band--gradient .imr-btn--primary:hover,
.imr-svc-finalcta .imr-btn--primary:hover,
[data-section-bg="gold"] .imr-btn--primary:hover,
[data-section-bg="gold"] .ss-cta:hover{background:var(--cream);color:var(--navy)}
.imr-cta-band .imr-btn--outline,
.imr-cta-band--gradient .imr-btn--outline,
.imr-svc-finalcta .imr-btn--outline,
[data-section-bg="gold"] .imr-btn--outline{background:transparent;color:var(--navy);border-color:rgba(24,48,96,0.55)}
.imr-cta-band .imr-btn--outline:hover,
.imr-cta-band--gradient .imr-btn--outline:hover,
.imr-svc-finalcta .imr-btn--outline:hover,
[data-section-bg="gold"] .imr-btn--outline:hover{background:var(--navy);color:var(--gold);border-color:var(--navy)}

/* ── G. Cards — white on --border-card ──────────────────────────────── */
.imr-card,.ss-card,
[data-section-bg="light"] .card,
[data-section-bg="light-alt"] .card,
.imr-review-card,
.imr-post-card,
.imr-job-card,
.imr-side-card,
.imr-author-box,
.imr-notice,
.imr-contact-badge,
.imr-map-placeholder,
.imr-pricing-note,
.imr-svc-diag__panel,
.imr-svc-numlist__item,
.imr-pf-quote,
.imr-hp-about__quote,
.imr-trust-bar--section .imr-trust-bar__item,
.imr-hp-tech-trust__bio-card,
.imr-hp-tech-trust__cred-card,
.imr-svc-hero__card{
  background:var(--white);
  border:1px solid var(--border-card);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  color:var(--ink-body);
}
.imr-card h2,.imr-card h3,.imr-card h4,
.ss-card h3,
.imr-review-card h3,.imr-post-card h2,.imr-post-card h3,
.imr-job-card h3,.imr-side-card h3,.imr-author-box h3,
.imr-svc-diag__panel h3,.imr-svc-numlist__item h3,
.imr-hp-tech-trust__bio-card h3,.imr-hp-tech-trust__cred-card h3,
.imr-svc-hero__card h3{color:var(--ink)}
.imr-card p,.ss-card p,.imr-review-card p,.imr-post-card p,.imr-job-card p,
.imr-side-card p,.imr-author-box p,.imr-svc-diag__panel p,
.imr-svc-numlist__item p,.imr-pf-quote p,.imr-hp-about__quote p{color:var(--ink-body)}
.imr-card a.imr-link,.ss-card a.imr-link,
.imr-card .imr-link,.ss-card .ss-link{color:var(--link);font-weight:600}
.imr-card:hover,.ss-card:hover,
.imr-post-card:hover,.imr-job-card:hover,.imr-review-card:hover{
  background:var(--white);
  border-color:var(--gold);
  box-shadow:var(--shadow-card-hover);
}
/* Media placeholders keep navy so they read as "image goes here". */
.imr-job-card__media,
.imr-single-thumb,
.imr-hp-about__photo-placeholder,
.imr-hp-tech-trust__photo-placeholder,
.imr-why-mobile__img-placeholder,
.imr-hero-split__img-placeholder,
.ss-about__photo,
.ss-portfolio-card__img,
.ss-guide-card__img,
.ss-media-ph{background:var(--navy)}
/* Small navy chips sitting on a cream page — keep their labels white. */
.imr-stats-strip,
.imr-byline__avatar,
.imr-author-box__avatar,
.imr-side-cats__count,
.imr-sidebar-close,
.imr-pf-tags__pin,
.imr-mega-brandtile{
  --text:var(--white); --text-muted:var(--text-muted-on-dark);
  color:var(--white);
}
@media (max-width:900px){
  .imr-single-sidebar{--text:var(--white);--text-muted:var(--text-muted-on-dark);--border:var(--border-on-dark);color:var(--white)}
  .imr-single-sidebar .imr-side-card,.imr-single-sidebar .imr-side-card--cta{background:var(--surface-2);border-color:var(--border-on-dark);color:var(--white)}
  .imr-single-sidebar .imr-side-card h3{color:var(--white)}
}

/* ── H. Cyan — stat numbers, map pins, small highlights ONLY ─────────── */
.imr-stats-strip__num,
.ss-hero__stat-num,
.imr-hero-split__stat-num,
.imr-portfolio-stats__num,
.imr-hp-stats__num{color:var(--cyan)}
.imr-service-area__pin,
.imr-map__pin,
.ss-map__tag svg,
.imr-area-card__pin{color:var(--cyan)}
/* Cyan pins read on navy; on cream they need the darker navy for contrast. */
[data-section-bg="light"] .imr-service-area__pin,
[data-section-bg="light-alt"] .imr-service-area__pin{color:var(--navy)}

/* ── I1. Forms — white fields, gold focus ring ──────────────────────── */
.imr-contact-form .wpcf7-form input[type="text"],
.imr-contact-form .wpcf7-form input[type="email"],
.imr-contact-form .wpcf7-form input[type="tel"],
.imr-contact-form .wpcf7-form textarea,
.imr-contact-form .wpcf7-form select,
.imr-search-form input[type="search"],
.imr-pagination .page-numbers,
.ss-form-wrap input,.ss-form-wrap textarea,.ss-form-wrap select{
  background:var(--white);
  border:1px solid var(--border-card);
  color:var(--ink);
}
.imr-contact-form .wpcf7-form input:focus,
.imr-contact-form .wpcf7-form textarea:focus,
.imr-contact-form .wpcf7-form select:focus,
.imr-search-form input[type="search"]:focus,
.ss-form-wrap input:focus,.ss-form-wrap textarea:focus,.ss-form-wrap select:focus{
  border-color:var(--gold);
  outline:2px solid var(--focus-ring);
  outline-offset:1px;
}
.imr-pagination .page-numbers.current,
.imr-pagination .page-numbers:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* ── I2. Editor output + .ss-prose on a cream ground ─────────────────── */
.imr-entry-content{color:var(--ink-body)}
.imr-entry-content h2,.imr-entry-content h3,.imr-entry-content h4{color:var(--ink)}
.imr-entry-content li{color:var(--ink-body)}
.imr-entry-content a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.imr-entry-content a:hover{color:var(--ink)}
.imr-entry-content blockquote{background:var(--white);border-left:4px solid var(--gold);color:var(--ink-body)}
.imr-entry-content code{background:var(--cream-alt);color:var(--ink)}
.ss-prose{color:var(--ink-body);font-size:17px;line-height:1.7;max-width:74ch}
.ss-prose > *:first-child{margin-top:0}
.ss-prose > *:last-child{margin-bottom:0}
.ss-prose h2{color:var(--ink);font-family:var(--font-poppins);font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.2;letter-spacing:-.4px;margin:2em 0 .6em;position:relative;padding-top:.5em}
.ss-prose h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;border-radius:2px;background:var(--gold)}
.ss-prose h3{color:var(--ink);font-family:var(--font-poppins);font-size:clamp(19px,2.2vw,23px);font-weight:700;line-height:1.3;margin:1.6em 0 .5em}
.ss-prose h4{color:var(--ink);font-weight:700;font-size:18px;margin:1.4em 0 .4em}
.ss-prose p{color:var(--ink-body);margin:0 0 1.1em}
.ss-prose ul,.ss-prose ol{color:var(--ink-body);margin:0 0 1.2em;padding-left:1.35em}
.ss-prose li{margin:0 0 .5em}
.ss-prose li::marker{color:var(--link)}
.ss-prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.ss-prose a:hover{color:var(--ink)}
.ss-prose strong{color:var(--ink);font-weight:700}
.ss-prose blockquote{margin:1.4em 0;padding:18px 22px;background:var(--white);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;box-shadow:var(--shadow-card)}
.ss-prose blockquote p{margin:0;font-style:italic;color:var(--ink)}
.ss-prose img{border-radius:14px}
.ss-prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em}
.ss-prose th,.ss-prose td{border:1px solid var(--border-card);padding:10px 14px;text-align:left}
.ss-prose th{background:var(--cream-alt);color:var(--ink);font-weight:700}
.ss-prose table,.ss-prose pre{display:block;max-width:100%;overflow-x:auto}
.imr-container.ss-prose{max-width:var(--content-measure);margin-inline:auto}

/* ── I3. Homepage — trust bar (Phase 7) ─────────────────────────────── */
.ss-trust{background:var(--white);border-bottom:1px solid var(--border-card)}
.ss-trust__item{color:var(--ink);font-weight:700}
.ss-trust__item svg{color:var(--gold)}

/* ── I4. Homepage — Get Started (Phase 8) ───────────────────────────── */
.ss-form-wrap{background:var(--white);border:1px solid var(--border-card);box-shadow:var(--shadow-card)}
.ss-form-wrap label{color:var(--ink)}
.ss-gmb-embed{background:var(--white);border:1px solid var(--border-card);box-shadow:var(--shadow-card)}
.ss-gmb-placeholder{background:var(--white);border:2px dashed var(--border-card);box-shadow:var(--shadow-card)}
.ss-gmb-placeholder svg{color:var(--cyan)}
.ss-gmb-placeholder p{color:var(--ink-body)}
.ss-gmb-placeholder .ss-hint{color:var(--ink-subtle)}
.ss-nap-block{background:var(--white);border:1px solid var(--border-card);box-shadow:var(--shadow-card)}
.ss-nap-block h3{color:var(--ink)}
.ss-nap-block p{color:var(--ink-body)}
.ss-nap-block svg{color:var(--gold)}
.ss-nap-phone a{color:var(--link)}
.ss-nap-phone a:hover{color:var(--ink)}

/* ── I5. Homepage — misc on cream ───────────────────────────────────── */
.ss-home{background:var(--cream)}
.ss-h2{color:var(--ink)}
.ss-lead{color:var(--ink-body)}
.ss-link{color:var(--link)}
.ss-link:hover{color:var(--ink)}
.ss-eyebrow__label{color:var(--link)}
.ss-hero .ss-eyebrow__label{color:var(--gold)}
.ss-hero__h1{color:var(--white)}
.ss-badge-pill{background:var(--white);color:var(--ink);border:1px solid var(--border-card)}
.ss-badge-pill svg{color:var(--gold)}
.ss-svc-card__icon{background:var(--navy)}
.ss-svc-card__icon svg{color:var(--gold)}
.ss-why__icon{background:var(--navy)}
.ss-why__icon svg{color:var(--gold)}
.ss-area-card__head svg{color:var(--cyan)}
.ss-faq__item{background:var(--white);border:1px solid var(--border-card);box-shadow:var(--shadow-card)}
.ss-faq__q{color:var(--ink)}
.ss-faq__a{color:var(--ink-body)}
.ss-faq__sign{background:var(--accent-soft);color:var(--link)}
.ss-brand-chip{background:var(--white);border:1px solid var(--border-card);box-shadow:var(--shadow-card)}
.ss-brand-chip:hover{border-color:var(--gold)}
.ss-portfolio-card__loc{background:var(--gold);color:var(--navy)}
.ss-guide-card__date{color:var(--ink-subtle)}
.ss-portfolio-card h3 a,.ss-guide-card h3 a{color:inherit;text-decoration:none}
.ss-portfolio-card h3 a:hover,.ss-guide-card h3 a:hover{color:var(--link)}
.ss-reviews__rating{background:var(--navy);color:var(--white);border-radius:999px;padding:11px 22px;box-shadow:0 6px 18px rgba(24,48,96,.16)}
.ss-stars{color:var(--gold)}
/* Homepage final CTA band — same gold as every other template's band. */
.ss-finalcta .ss-h2,.ss-finalcta__sub{color:var(--navy)}
.ss-cta--onGold{background:var(--white);color:var(--navy);box-shadow:0 6px 16px rgba(24,48,96,.22)}
.ss-cta--onGold:hover{background:var(--cream);color:var(--navy)}
.ss-btn-onGold{background:transparent;color:var(--navy);border:2px solid rgba(24,48,96,.55)}
.ss-btn-onGold:hover{background:var(--navy);color:var(--gold);border-color:var(--navy)}

/* ── I6. Focus visibility ───────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
[data-section-bg="dark"] :focus-visible,
.imr-site-header :focus-visible,
.imr-site-footer :focus-visible,
.imr-hero :focus-visible,
.ss-hero :focus-visible{outline-color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════════════
   === Internal Pages — Hub grids & brand cards ===
   Added for the /services/, /brands/, /service-area/ hub pages and the new
   part-brands-grid.php / part-portfolio-strip.php / part-testimonials.php.
   Reuses the locked palette (cream/gold/navy/cyan) and the existing
   .imr-card / .imr-grid / .imr-section system above — no new color tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* Brand card — logo, name, blurb, link. Reuses .imr-card (white on
   --border-card, see section G above) and the <img> from imr_brand_logo_img()
   (class .imr-brand-strip__logo), re-scoped here so it doesn't stretch to
   fill the taller card the way it fills the compact logo-strip chip. */
.imr-brand-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.imr-brand-card__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:84px;
}
.imr-brand-card__logo .imr-brand-strip__logo,
.imr-brand-card__logo .imr-brand-strip__name{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.imr-brand-card__title{margin:0}
.imr-brand-card .imr-card__text{margin:0}
.imr-brand-card__cta{margin-top:auto}

/* Hub-page "bigger card" variant — larger padding/type on the overview grids
   (page-services.php, page-service-area.php) so the primary grid on each hub
   page reads as a showcase rather than a compact cross-link list. Responsive
   column counts are inherited from .imr-grid--3/--4 (3-col desktop → 2-col
   tablet → 1-col mobile, declared earlier in this file). */
.imr-services-grid--hub .imr-card,
.imr-service-area--hub .imr-card{
  padding:var(--space-7);
}
.imr-services-grid--hub .imr-card__title,
.imr-service-area--hub .imr-card__title{
  font-size:1.2em;
}
@media (max-width:640px){
  .imr-services-grid--hub .imr-card,
  .imr-service-area--hub .imr-card{
    padding:var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   === Service Pages ===
   template-service.php's structured sections. Every section already sets
   its own background via [data-section-bg="light|light-alt|gold"] (styled
   globally above — section C), so nothing here sets background-color; this
   block is layout/typography only, on the locked cream/gold/navy palette.
   ═══════════════════════════════════════════════════════════════════════ */

.ss-container--narrow{max-width:var(--content-measure);margin-inline:auto}

/* ── Intro — optional 2-col layout when an intro image is set ─────────── */
.ss-service-intro__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:center}
.ss-service-intro__grid--no-img{grid-template-columns:1fr;max-width:var(--content-measure);margin-inline:auto}
.ss-service-intro__img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
@media (max-width:900px){
  .ss-service-intro__grid{grid-template-columns:1fr}
}

/* ── Scope of work — sub-cards ─────────────────────────────────────────
   3-col desktop → 2-col tablet → 1-col mobile. */
.ss-scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:var(--space-6)}
.ss-scope-card{
  background:var(--white);
  border:1px solid var(--border-card);
  border-left:3px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.ss-scope-card:hover{border-left-color:var(--gold);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.ss-scope-card h3{font-family:var(--font-poppins);font-size:19px;font-weight:700;color:var(--ink);margin:0 0 10px}
.ss-scope-card .ss-prose{font-size:15px}
@media (max-width:1024px){ .ss-scope-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .ss-scope-grid{grid-template-columns:1fr} }

/* ── Process — numbered step cards ─────────────────────────────────────
   3-col desktop → 2-col tablet → 1-col mobile. */
.ss-process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:var(--space-6) 0 0;padding:0;list-style:none}
.ss-process-step{
  position:relative;
  background:var(--white);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  padding-top:calc(var(--space-6) + 20px);
  box-shadow:var(--shadow-card);
}
.ss-step-num{
  position:absolute;top:-20px;left:24px;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--grad-gold);
  color:var(--navy);
  font-family:var(--font-poppins);font-weight:800;font-size:19px;
  box-shadow:0 6px 14px rgba(216,168,48,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.ss-process-step h3{font-family:var(--font-poppins);font-size:19px;font-weight:700;color:var(--ink);margin:0 0 10px}
.ss-process-step .ss-prose{font-size:15px}
@media (max-width:1024px){ .ss-process-steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .ss-process-steps{grid-template-columns:1fr} }

/* ── Brand pages — 2-col scope + process grids ─────────────────────────
   .ss-scope-grid and .ss-process-steps are SHARED with template-service.php,
   so these overrides are scoped to the brand section wrappers
   (.ss-brand-scope / .ss-brand-process, template-brand.php) and leave the
   service pages on their 3-col layout.

   Brand copy runs longer than the service equivalent — scope cards carry a
   full paragraph of rich text and the process items are horizontal rows
   (number chip beside the body, .imr-svc-numlist__item) rather than stacked
   cards — so 3 columns read as cramped at the 1180px container.

   NOTE on the cascade: these selectors are specificity 0,2,0 and therefore
   beat the plain .ss-scope-grid / .ss-process-steps media-query rules above
   (0,1,0) at EVERY viewport, no matter the source order. The narrow-viewport
   steps below must be restated here or brand pages would stay 2-col all the
   way down to mobile. Breakpoints reuse the 1024/640 values already used
   throughout this file rather than introducing new ones. */
.ss-brand-scope .ss-scope-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){ .ss-brand-scope .ss-scope-grid{grid-template-columns:1fr} }

/* max-width:none clears the 52rem cap inherited from .imr-svc-numlist: the
   brand process <ol> carries both classes, and .ss-process-steps declares no
   max-width of its own, so without this the 2-col grid is squeezed into
   832px instead of filling the container. Process rows drop to a single
   column at 1024px — two horizontal number-rows side by side leave too
   little room for the body text on a tablet. */
.ss-brand-process .ss-process-steps{grid-template-columns:repeat(2,1fr);max-width:none}
@media (max-width:1024px){ .ss-brand-process .ss-process-steps{grid-template-columns:1fr} }

/* ── Related services / Service areas — card grids ─────────────────────
   3-col desktop → 2-col tablet → 1-col mobile. Reuses .ss-card's white/
   border-card treatment (section G above) via these dedicated classes so
   the whole card — including the heading — is one clickable link. */
.ss-related-grid,.ss-areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:var(--space-6)}
.ss-related-card,.ss-area-card{
  display:block;
  background:var(--white);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
  text-decoration:none;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.ss-related-card:hover,.ss-area-card:hover{border-color:var(--gold);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.ss-related-card h3,.ss-area-card h3{font-family:var(--font-poppins);font-size:19px;font-weight:700;color:var(--ink);margin:0 0 8px}
.ss-related-card p,.ss-area-card p{color:var(--ink-body);font-size:15px;margin:0 0 12px}
.ss-related-card .ss-link,.ss-area-card .ss-link{font-weight:600;color:var(--link)}
.ss-related-card:hover .ss-link,.ss-area-card:hover .ss-link{color:var(--ink)}
@media (max-width:1024px){ .ss-related-grid,.ss-areas-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .ss-related-grid,.ss-areas-grid{grid-template-columns:1fr} }

/* ── FAQ block (part-faq-block.php) ─────────────────────────────────────
   Same accessible <details> pattern as the homepage FAQ (.ss-faq__item),
   under its own class so it can be dropped into any template. */
.ss-faq-block .ss-faq-list{display:flex;flex-direction:column;gap:14px;max-width:var(--content-measure);margin:var(--space-6) auto 0}
.ss-faq-item{background:var(--white);border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:4px 24px}
.ss-faq-item__q{
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;
  font-family:var(--font-poppins);font-weight:700;font-size:17px;
  color:var(--ink);
}
.ss-faq-item__q::-webkit-details-marker{display:none}
.ss-faq-item__q::after{
  content:"+";
  flex:0 0 auto;
  font-size:22px;font-weight:700;color:var(--link);
  transition:transform .2s;
}
.ss-faq-item[open] .ss-faq-item__q::after{content:"\2212";color:var(--gold-dark)}
.ss-faq-item__a{padding:0 0 20px;color:var(--ink-body)}
.ss-faq-item__a.ss-prose{font-size:15px}

/* ═══════════════════════════════════════════════════════════════════════
   Location pages — template-location.php (strict 12-section rewrite)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero — centered, wider text measure ────────────────────────────────
   Scoped to .ss-location (the <main> wrapper in template-location.php) so
   brand/service pages, which share the same part-hero.php markup, are
   unaffected. .imr-hero__heading/__subtext ship narrow max-widths (17ch /
   54ch) tuned for left-aligned text; centering them at that width wraps
   far too early, so both are widened here alongside the center-align. */
.ss-location .imr-hero__inner  { text-align: center; }
.ss-location .imr-hero__heading{ max-width: 32ch; margin-inline: auto; }
.ss-location .imr-hero__subtext{ max-width: 68ch; margin-inline: auto; }
.ss-location .imr-hero__actions{ justify-content: center; }

/* ── Reusable 2-column split — Intro, About, Why Mobile ─────────────────
   Text left, image/map right; collapses to 1 column on mobile. Same
   1.1fr/.9fr ratio as .ss-service-intro__grid, generalised to a shared name
   since three location sections now need the identical layout. */
.ss-split-layout{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-8);
  align-items: center;
}
.ss-split-layout--no-media{
  grid-template-columns: 1fr;
  max-width: var(--content-measure);
  margin-inline: auto;
}
.ss-split-layout__subhead{
  font-family: var(--font-poppins);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: var(--space-5) 0 10px;
}
.ss-split-layout__copy .imr-btn{ margin-top: var(--space-5); }
.ss-split-layout__img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* The About section's media slot: a Google Maps <iframe> instead of an
   <img>. Maps ship a fixed width/height attribute pair, not an intrinsic
   aspect ratio, so it needs an explicit ratio box to stay responsive. */
.ss-split-layout__media--map iframe{
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
@media (max-width: 900px){
  .ss-split-layout{ grid-template-columns: 1fr; }
}

/* ── Our Process — forced to 4 columns / 1 row on desktop ───────────────
   .imr-svc-numlist is shared across service/brand/location (problems,
   warnsigns, checklist, process sections), so this override is scoped to
   the process section wrapper (.ss-location-process) rather than the
   shared class directly — the same wrapper-scoping pattern already used
   for the brand-page grid overrides above (.ss-brand-scope, .ss-brand-
   process). max-width:none clears the base rule's 52rem cap so 4 columns
   actually get room in the 1180px container. Each item's default layout is
   a horizontal flex row (number chip beside the text); squeezed into a
   ~270px-wide card that reads badly, so it's switched to a stacked column
   at the 4-col and 2-col widths and only reverts to a row at the single-
   column mobile breakpoint, where the item is full-width again. */
.ss-location-process .imr-svc-numlist{
  max-width: none;
  grid-template-columns: repeat(4, 1fr);
}
.ss-location-process .imr-svc-numlist__item{
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 1024px){
  .ss-location-process .imr-svc-numlist{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .ss-location-process .imr-svc-numlist{ grid-template-columns: 1fr; }
  .ss-location-process .imr-svc-numlist__item{ flex-direction: row; }
}

/* ── Neighboring Service Areas — two-button footer row ──────────────────
   Both buttons already carry their own margin-top via .imr-svc-seccta; the
   wrapper only needs to lay them out side by side and wrap on narrow
   viewports. */
.ss-location-nearby__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── Brands section intro (grid itself comes from part-brands-grid.php) ─ */
.ss-service-brands .imr-section-heading{margin-bottom:var(--space-6)}

/* ═══════════════════════════════════════════════════════════════════════
   About page — page-about-us.php
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero — centered, same widened measure as the location hero ─────────
   Scoped to .ss-about (the <main> wrapper) so brand/service/location pages,
   which share the same part-hero.php markup, are unaffected. */
.ss-about .imr-hero__inner  { text-align: center; }
.ss-about .imr-hero__heading{ max-width: 32ch; margin-inline: auto; }
.ss-about .imr-hero__subtext{ max-width: 68ch; margin-inline: auto; }
.ss-about .imr-hero__actions{ justify-content: center; }

/* ── Contact — media slot reused from .ss-split-layout, but with the map
   placed FIRST in markup so it lands on the left / copy on the right
   (every other .ss-split-layout caller keeps copy left / media right). No
   grid-order override needed: plain DOM order already achieves this. ──── */
.ss-about-contact .ss-split-layout{ align-items: start; }

/* ═══════════════════════════════════════════════════════════════════════
   Hub pages — template-hub.php (Services / Brands / Service Area)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Category intro — paragraph breaks from imr_the_paragraphs(). ──────── */
.ss-hub-category__intro p + p{ margin-top: var(--space-3); }

/* ── Card grid: 3-col desktop, 2-col tablet, 1-col mobile. ──────────────── */
.ss-hub-grid{
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  margin-top:            var(--space-6);
}
@media (max-width: 1024px){
  .ss-hub-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .ss-hub-grid{ grid-template-columns: 1fr; }
}

/* ── Card: white on cream border, rounded, padded, subtle shadow; gold
   border + lift on hover. Works as either <a> (linked item) or <div>
   (an item left without a link — see template-hub.php). ─────────────── */
.ss-hub-card{
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:              var(--space-3);
  background:      var(--white);
  border:          1px solid var(--border-card);
  border-radius:   var(--radius-lg);
  padding:         var(--space-6);
  box-shadow:      var(--shadow-card);
  color:           var(--ink-body);
  text-decoration: none;
  transition:      transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.ss-hub-card:hover,
a.ss-hub-card:focus-visible{
  transform:     translateY(-4px);
  border-color:  var(--gold);
  box-shadow:    var(--shadow-card-hover);
}
.ss-hub-card__title{
  font-family: var(--font-poppins);
  font-size:   19px;
  font-weight: 700;
  color:       var(--ink);
  margin:      0;
}
.ss-hub-card__desc{
  color:  var(--ink-body);
  margin: 0;
}
.ss-hub-card__more{
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  margin-top:    auto;
  padding-top:   var(--space-2);
  font-weight:   700;
  color:         var(--link);
}
a.ss-hub-card:hover .ss-hub-card__more,
a.ss-hub-card:focus-visible .ss-hub-card__more{ color: var(--gold-dark); }