/* Shared color roles/control, plus the user-approved service H1 fit correction below. */
:root,
:root[data-theme="dark"] {
  --bb-surface: #0E1015;
  --bb-surface-rgb: 14, 16, 21;
  --bb-panel: #17191F;
  --bb-panel-rgb: 23, 25, 31;
  --bb-inset: #101217;
  --bb-inset-rgb: 16, 18, 23;
  --bb-ink: #FFF7EF;
  --bb-ink-rgb: 255, 247, 239;
  --bb-muted: #C6BFB5;
  --bb-muted-rgb: 198, 191, 181;
  --bb-line: rgba(255, 247, 239, .16);
  --bb-line-rgb: 255, 247, 239;
  --bb-accent: #FF6B2B;
  --bb-accent-rgb: 255, 107, 43;
  --bb-accent-mid: #FF8B36;
  --bb-accent-mid-rgb: 255, 139, 54;
  --bb-accent-end: #FFAA50;
  --bb-accent-end-rgb: 255, 170, 80;
  --bb-on-accent: #17181C;
  --bb-on-accent-rgb: 23, 24, 28;
  --bb-focus: #FFC178;
  --bb-focus-rgb: 255, 193, 120;
  --bb-paper: #FFF7EF;
  --bb-paper-rgb: 255, 247, 239;
  --bb-fixed-ink: #17181C;
  --bb-fixed-ink-rgb: 23, 24, 28;
  --bb-shadow-rgb: 0, 0, 0;
  --bb-action-start: #FF6B2B;
  --bb-action-end: #FFAA50;
  --bb-action-gradient: linear-gradient(90deg, var(--bb-action-start), var(--bb-action-end));
  --bb-error: #FF9BBB;
  --bb-success: #95F0C2;
  --bb-paper-accent: #C74712;
  --bb-paper-accent-end: #B04E12;
  --bb-color-scheme: dark;
  --bb-glow-blend: screen;
  --bb-canvas-blend: screen;
  --bb-particle-0: #FF6B2B;
  --bb-particle-1: #FF7830;
  --bb-particle-2: #FF8B36;
  --bb-particle-3: #FF9843;
  --bb-particle-4: #FFAA50;
  --bb-particle-5: #FFBC72;
  --bb-scroll-0-rgb: 14, 16, 21;
  --bb-scroll-1-rgb: 21, 18, 22;
  --bb-scroll-2-rgb: 16, 17, 22;
  --bb-scroll-3-rgb: 27, 20, 24;
  --bb-scroll-4-rgb: 31, 22, 25;
  --bb-scroll-5-rgb: 17, 18, 23;
  --mf-blue: var(--bb-accent);
  --mf-violet: var(--bb-accent-mid);
  --mf-pink: var(--bb-accent-end);
  --mf-gold: var(--bb-accent-end);
  --blue: var(--bb-accent);
  --magenta: var(--bb-accent-end);
}

:root[data-theme="light"] {
  --bb-surface: #FFFBF5;
  --bb-surface-rgb: 255, 251, 245;
  --bb-panel: #FFFFFF;
  --bb-panel-rgb: 255, 255, 255;
  --bb-inset: #F5EEE5;
  --bb-inset-rgb: 245, 238, 229;
  --bb-ink: #17181C;
  --bb-ink-rgb: 23, 24, 28;
  --bb-muted: #5F5A54;
  --bb-muted-rgb: 95, 90, 84;
  --bb-line: rgba(23, 24, 28, .16);
  --bb-line-rgb: 23, 24, 28;
  --bb-accent: #C74712;
  --bb-accent-rgb: 199, 71, 18;
  --bb-accent-mid: #B56A0C;
  --bb-accent-mid-rgb: 181, 106, 12;
  --bb-accent-end: #A77706;
  --bb-accent-end-rgb: 167, 119, 6;
  --bb-on-accent: #FFFFFF;
  --bb-on-accent-rgb: 255, 255, 255;
  --bb-focus: #98410A;
  --bb-focus-rgb: 152, 65, 10;
  --bb-action-start: #C74712;
  --bb-action-end: #B04E12;
  --bb-error: #A6173B;
  --bb-success: #147A4A;
  --bb-color-scheme: light;
  --bb-glow-blend: multiply;
  --bb-canvas-blend: multiply;
  --bb-particle-0: #C74712;
  --bb-particle-1: #C65312;
  --bb-particle-2: #B85D0F;
  --bb-particle-3: #B56A0C;
  --bb-particle-4: #AC7109;
  --bb-particle-5: #A77706;
  --bb-scroll-0-rgb: 255, 251, 245;
  --bb-scroll-1-rgb: 253, 247, 239;
  --bb-scroll-2-rgb: 255, 252, 247;
  --bb-scroll-3-rgb: 250, 243, 234;
  --bb-scroll-4-rgb: 249, 240, 230;
  --bb-scroll-5-rgb: 254, 250, 244;
}

html, body { background-color: var(--bb-surface); color: var(--bb-ink); }

/* Standalone footers retained a faint .4 foreground (below4.5:1).
   Match the existing shared-footer .5 treatment without lifting element
   opacity, touching Light mode, or changing any layout/reveal behavior. */
:root[data-theme="dark"] #dc-root .mf-footer nav span,
:root[data-theme="dark"] #dc-root .mf-footer-bottom {
  color: rgba(var(--bb-ink-rgb), .5) !important;
}

[data-bb-theme-control] {
  position: fixed;
  inset: auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto;
  z-index: 90;
  margin: 0;
  padding: 0;
  color: var(--bb-ink);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
}

[data-bb-theme-control],
[data-bb-theme-control] * { box-sizing: border-box; }

[data-bb-theme-control] > .bb-appearance-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  background: var(--bb-panel);
  color: var(--bb-muted);
  box-shadow: 0 4px 18px rgba(var(--bb-shadow-rgb), .12);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

[data-bb-theme-control] > .bb-appearance-trigger::-webkit-details-marker { display: none; }
[data-bb-theme-control] > .bb-appearance-trigger::marker { content: ""; }
[data-bb-theme-control] > .bb-appearance-trigger svg { flex: none; }
[data-bb-theme-control] > .bb-appearance-trigger:hover,
[data-bb-theme-control][open] > .bb-appearance-trigger { color: var(--bb-ink); border-color: var(--bb-focus); }

[data-bb-theme-control] .bb-appearance-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(264px, calc(100vw - 32px));
  max-height: calc(100dvh - 92px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--bb-line);
  border-radius: 14px;
  background: var(--bb-panel);
  box-shadow: 0 12px 40px rgba(var(--bb-shadow-rgb), .2);
}

[data-bb-theme-control]:not([open]) > .bb-appearance-panel { display: none; }
[data-bb-theme-control] .bb-appearance-heading { display: block; margin-bottom: 10px; color: var(--bb-ink); font-size: 13px; font-weight: 700; }
[data-bb-theme-control] .bb-appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--bb-inset); border-radius: 10px; }
[data-bb-theme-control] [data-bb-theme-choice] {
  appearance: none;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--bb-muted);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
[data-bb-theme-control] [data-bb-theme-choice]:hover { color: var(--bb-ink); border-color: var(--bb-line); }
[data-bb-theme-control] [data-bb-theme-choice][aria-pressed="true"] { background: var(--bb-accent); color: var(--bb-on-accent); }
[data-bb-theme-control] :is(summary, button):focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 3px; }
[data-bb-theme-control] .bb-appearance-status { display: block; margin-top: 10px; color: var(--bb-muted); font-size: 11px; font-weight: 400; }

/* Keep the closed control in the gutter beside compact pinned stages. */
@media (max-width: 1100px), (max-height: 820px) {
  [data-bb-theme-control] > .bb-appearance-trigger { width: 44px; padding: 10px; }
  [data-bb-theme-control] .bb-appearance-label { display: none; }
}

/* Service-title fit repair: preserve copy, emphasis, line-reveal wrappers and motion.
   Deliberately excludes home/pricing/blog/tool headings. Specificity defeats both
   shared normalization and the two direct renderers' oversized runtime overrides. */
#dc-root .mf-hero #mf-hero-content h1,
#dc-root #top #mf-hero-content h1 {
  max-width: 100%;
  font-size: clamp(2.75rem, 4vw, 3.5rem) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere;
}
#dc-root .mf-hero #mf-hero-content > div:has(> h1),
#dc-root #top #mf-hero-content > div:has(> h1) {
  min-width: 0 !important;
  max-width: 100%;
}
@media (max-width: 600px) {
  #dc-root .mf-hero #mf-hero-content h1,
  #dc-root #top #mf-hero-content h1 { font-size: 2.125rem !important; }
  #dc-root .mf-hero .mf-hero-actions .mf-button { white-space: normal !important; text-align: center; }
}
@media (max-width: 360px) {
  #dc-root .mf-hero #mf-hero-content h1,
  #dc-root #top #mf-hero-content h1 { font-size: 1.875rem !important; }
}

/* Reserve the approved service canvas before lazy/eager images decode. `auto`
   retains the decoded intrinsic ratio; no crop, motion or loaded-size change. */
#dc-root img[src^="/images/brandblasting/services/"] {
  aspect-ratio: auto 1003 / 1568 !important;
}
#dc-root img[src="/images/brandblasting/services/software-development/product-build-system-2026-10-22.webp"],
#dc-root img[src="/images/brandblasting/services/seo/seo-growth-system-board-2026-10-22.webp"],
#dc-root img[src="/images/brandblasting/services/crm-strategy/crm-lead-handling-system-2026-10-22.webp"],
#dc-root img[src^="/images/brandblasting/services/content-writing/"] {
  aspect-ratio: auto 1122 / 1402 !important;
}
#dc-root img[src="/images/brandblasting/services/seo/seo-organic-growth-engine-2026-10-22.webp"] {
  aspect-ratio: auto 977 / 1610 !important;
}
@media (min-width: 681px) {
  #dc-root .media-panel > img[src^="/images/brandblasting/services/social-media/"] { width: min(100%, 500px); }
  #dc-root .media-panel.engagement-panel > img[src^="/images/brandblasting/services/social-media/"] { width: min(100%, 520px); }
}

/* Compact chapter labels must not paint across page content. Retain their
   accessible text and line-height, and never clip the service dot spans. */
@media (max-width: 1200px) {
  #mf-rail { right: 8px !important; }
  :is(.mf-rail, #mf-rail) a > span:not(.mf-chap-dot) {
    inline-size: 1px !important;
    max-inline-size: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

/* Chapter dots stay clear of content at every desktop width. Keep label text
   available to named links without painting it over cards or contact details. */
@media (min-width: 0px) {
  #mf-rail { right: 8px !important; }
  :is(.mf-rail, #mf-rail) a > span:not(.mf-chap-dot) {
    inline-size: 1px !important;
    max-inline-size: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}