/* Clean/Corporate Theme — Generated by TurboDemand */
:root {
  --color-primary: #d8443c;
  --color-secondary: #1a1d21;
  --color-accent: #1f3a5f;
  --color-cta: #d8443c;
  --color-cta-text: #ffffff;
  --color-cta-alt: transparent;
  --color-cta-alt-text: #ffffff;
  --color-cta-alt-border: #ffffff;
  --color-cta-alt-hover: transparent;
  --color-cta-alt-hover-text: #ffffff;
  --color-surface: #f6f7f8;
  --color-page-bg: #ffffff;
  --color-heading-text: #1a1d21;
  --color-body-text: #1a1d21;
  --color-link-text: #1f3a5f;
  --color-divider: #d8dce1;
  --color-header-bg: #ffffff;
  --color-header-nav-text: #1a1d21;
  --color-header-nav-hover: #1f3a5f;
  --color-footer-bg: #f6f7f8;
  --color-footer-text: #1a1d21;
  --color-article-nav-bg: #ffffff;
  --color-article-nav-text: #1a1d21;
  --color-article-nav-active-bg: #f6f7f8;
  --color-article-nav-active-text: #1a1d21;
  --color-author-card-bg: #ffffff;
  --radius-button: 6px;
  --radius-input: 5px;
  --radius-label: 4px;
  --radius-card: 4px;
  --radius-panel: 8px;
  --border-subtle: var(--color-divider, #e2e8f0);
  --text-muted: var(--color-muted, #4a5568);
  --font-heading: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif, system-ui, sans-serif;
  --max-width: 1200px;
  --content-width: 720px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
}

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

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body-text, #1a202c);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-page-bg, white);
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading-text, var(--color-primary));
}

h1 { font-size: 2.5rem; margin-bottom: var(--spacing-lg); }
h2 { font-size: 1.875rem; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); }
h3 { font-size: 1.5rem; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); }
h4 { font-size: 1.25rem; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); }

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-link-text, var(--color-accent));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Header */
.site-header {
  background: var(--color-header-bg, white);
  border-bottom: 1px solid #e2e8f0;
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Auto-hiding header (header-auto-hide.js): slides up on scroll-down to give
     reading room, back down on scroll-up / at-top / idle. transform-based, so
     hiding never shifts page layout. */
  transition: transform 0.25s ease;
  will-change: transform;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.header-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  position: relative; /* anchor for the mobile nav panel */
}

/* Collapsible header region (nav + CTA): a right-aligned cluster on desktop, a
   toggled dropdown panel on mobile (see the responsive block below). */
.header-collapse {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-left: auto;
}
.header-collapse .main-nav {
  margin-left: 0;
}

/* Hamburger — hidden on desktop, shown at the mobile breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.site-header.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header[data-placement="center"] .header-container {
  flex-direction: column;
}

.site-header[data-placement="center"] .main-nav {
  margin-left: 0;
  justify-content: center;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Wordmark text beside a mark-only logo image (logo lockup). */
.brand-wordmark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  line-height: 1;
}

/* Constrain the header logo so a square/large source (e.g. a favicon) renders
   as a small icon at a fixed height instead of being stretched by the img's
   hardcoded width/height attributes or the global img border-radius. */
.logo img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  border-radius: 0;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Wrap the nav so long pillar labels flow onto a second row instead of
   overflowing the header; keep each individual label on one line. */
.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  justify-content: flex-end;
  margin-left: auto;
}

.nav-link {
  color: var(--color-header-nav-text, #1a202c);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--color-header-nav-hover, var(--color-accent));
  text-decoration: none;
}

/* Top-level nav dropdowns (Products / Services / Insights). The parent may
   be a <button> (no url) or an <a> (has url) — reset button styling so both
   look like nav links. Menu visibility is CSS-driven so it works without JS. */
.main-nav .nav-item {
  position: relative;
}

.main-nav .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.nav-caret {
  font-size: 0.7em;
  line-height: 1;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 220px;
  padding: var(--spacing-sm);
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  display: block;
}

.nav-dropdown-group {
  padding: var(--spacing-xs) 0;
}

.nav-dropdown-group + .nav-dropdown-group {
  border-top: 1px solid #edf2f7;
  margin-top: var(--spacing-xs);
}

.nav-dropdown-heading {
  margin: 0 0 var(--spacing-xs);
  padding: 0 var(--spacing-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #718096;
}

.nav-dropdown-link {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-input);
  color: var(--color-body-text, #1a202c);
  font-weight: 500;
  white-space: nowrap;
}

.nav-dropdown-link:hover {
  background: #f7fafc;
  color: var(--color-accent);
  text-decoration: none;
}

.cta-button {
  /* I7: filled primary CTA follows the brand's CTA role (falls back to
     --color-primary); --color-accent stays reserved for links/dividers. */
  background: var(--color-cta, var(--color-primary));
  color: var(--color-cta-text, white);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-button);
  flex: 0 0 auto;
  font-weight: 600;
  transition: opacity 0.2s;
}

.cta-button:hover {
  background: var(--color-cta-hover, var(--color-cta, var(--color-primary)));
  color: var(--color-cta-hover-text, var(--color-cta-text, white));
  text-decoration: none;
}

/* Footer.
   Every value below is taken from --footer-fg, so a captured light client
   footer stays legible. Both custom properties are absent unless the client's
   own footer was measured.

   B158 — an UNMEASURED footer is a neutral dark, not the brand's CTA colour.
   Defaulting to --color-primary made every uncaptured footer a saturated brand
   panel: it looked deliberate, but white on a representative brand blue is
   only ~5.2:1, so there was no headroom and a darker brand colour failed
   outright. The neutral is ~17.7:1, which is honest about not knowing the
   client's footer and leaves room for anything derived on top of it.

   Footer TEXT is never faded — it is the full --footer-fg. Fading it was the
   original bug in a subtler form: readableForegroundOn guarantees the ink
   clears 4.5:1 on the captured surface, and any mix toward transparent gives
   that guarantee straight back. Even 92% dropped the worst grey footer to
   4.13:1, and no single percentage can be safe, because an ink that only just
   clears the floor has nothing to give away. Taking the ink whole makes the
   footer's contrast follow from the derivation's own guarantee instead of from
   a second argument that has to be re-checked. Only the dividers stay faint;
   they are decorative, not text. Hierarchy comes from size, weight and
   letter-spacing. */
.site-footer {
  --footer-fg: var(--color-footer-text, white);
  background: var(--color-footer-bg, #111827);
  color: var(--footer-fg);
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-xl);
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(160px, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: var(--footer-fg);
}

.footer-wordmark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--footer-fg);
  white-space: nowrap;
  line-height: 1;
}

.footer-logo img {
  max-height: 40px;
  width: auto;
  border-radius: 0;
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--footer-fg);
}

.footer-tagline,
.footer-contact p,
.footer-menu,
.copyright {
  color: var(--footer-fg);
  font-size: 0.9375rem;
}

.footer-section h3 {
  margin: 0 0 var(--spacing-md);
  color: var(--footer-fg);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-resource-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu a,
.footer-contact a,
.footer-social a,
.footer-view-all {
  color: var(--footer-fg);
}

.footer-menu a:hover,
.footer-contact a:hover,
.footer-social a:hover,
.footer-view-all:hover {
  color: var(--footer-fg);
  text-decoration: none;
}

.footer-view-all {
  display: inline-flex;
  margin-top: var(--spacing-md);
  font-weight: 600;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid color-mix(in srgb, var(--footer-fg) 18%, transparent);
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
}

.footer-links a {
  color: var(--footer-fg);
}

.footer-links a:hover {
  color: var(--footer-fg);
}

.copyright {
  color: var(--footer-fg);
  font-size: 0.875rem;
  margin: 0;
}

/* Article layout */
.article-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-xl);
}

.article-content {
  min-width: 0;
  max-width: var(--content-width);
}

.article-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

.hero-image {
  width: 100%;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-card);
}

.article-meta {
  color: #718096;
  font-size: 0.875rem;
  margin-bottom: var(--spacing-lg);
}

/* FAQ section */
.faq-section {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: #f7fafc;
  border-radius: var(--radius-card);
}

.faq-item {
  margin-bottom: var(--spacing-lg);
}

.faq-item h3 {
  font-size: 1.125rem;
  margin-top: 0;
  color: var(--color-primary);
}

/* Key takeaways */
.key-takeaways {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-card);
  margin-bottom: var(--spacing-lg);
}

.key-takeaways h3 {
  color: white;
  margin-top: 0;
}

.key-takeaways ul {
  padding-left: var(--spacing-lg);
}

.key-takeaways li {
  margin-bottom: var(--spacing-sm);
}

/* Stat highlights */
.stat-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-highlight {
  flex: 1 1 160px;
  padding: var(--spacing-md);
  border-radius: var(--radius-card);
  background: var(--color-stat-card-bg, var(--color-surface, #f7f7f8));
  border-left: 4px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.stat-highlight-stat {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stat-highlight-context {
  font-size: 0.875rem;
  color: var(--color-muted, #4a5568);
}

/* Pull quotes */
.pull-quote {
  border-left: 4px solid var(--color-accent);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-primary);
}

/* Article comparison table */
.article-comparison {
  margin-top: var(--spacing-xl);
}

.article-comparison h2 {
  margin-top: 0;
}

.article-comparison-scroll {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-panel);
}

.article-comparison-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: white;
}

.article-comparison-table th,
.article-comparison-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.article-comparison-table thead th {
  background: #f7fafc;
  color: var(--color-primary);
}

.article-comparison-table tbody tr:last-child th,
.article-comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Related articles */
.related-articles {
  margin-bottom: var(--spacing-lg);
}

.related-articles h3 {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
}

.related-articles ul {
  list-style: none;
  padding: 0;
}

.related-article {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid #e2e8f0;
}

.related-article a {
  text-decoration: none;
}

.related-article h4 {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-xs);
}

.related-article p {
  font-size: 0.875rem;
  color: #718096;
  margin: 0;
}

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: var(--spacing-lg);
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: #718096;
}

.breadcrumbs li::after {
  content: '›';
  margin-left: var(--spacing-xs);
}

.breadcrumbs li:last-child::after {
  content: '';
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.cookie-banner-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md) var(--spacing-lg);
  flex-wrap: wrap;
}

/* The notice text has to be allowed to SHRINK rather than claim its own flex
   line. Flex line-breaking sizes each item by its max-content width, so an
   unsized <p> (~740px max-content for the default consent copy) pushes the
   actions onto a second line below ~1090px, and below ~800px wraps to a ragged
   two-liner with the buttons orphaned under it — before the 768px column
   media query can take over. A small flex-basis keeps text and actions on one
   row down to ~640px and lets the copy wrap inside its own column instead.
   "margin-bottom: 0" drops the global paragraph margin, which otherwise
   stacks on top of the row gap. */
.cookie-banner-content p {
  flex: 1 1 320px;
  min-width: 0;
  margin-bottom: 0;
}

.cookie-banner-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  font-weight: 600;
}

.btn-primary {
  background: var(--color-cta, var(--color-primary));
  color: var(--color-cta-text, white);
}

/* The captured secondary role drives this button in the clean theme only: the
   editorial theme's cookie banner sits on a --color-primary band, where its
   white-alpha outline is bound to that surface rather than to the brand's own
   secondary button. The hairline is drawn with an inset shadow, not a border,
   so it costs no layout and stays invisible (transparent) until captured. */
.btn-secondary {
  background: var(--color-cta-alt, #e2e8f0);
  color: var(--color-cta-alt-text, #4a5568);
  box-shadow: inset 0 0 0 1px var(--color-cta-alt-border, transparent);
}

/* Keyboard focus gets the captured hover treatment too. The extractor reads a
   client's :focus / :focus-visible rules into these same tokens and the editor
   describes them as covering focus, so consuming them under :hover alone would
   leave keyboard users on the theme default. */
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-cta-alt-hover, var(--color-cta-alt, #e2e8f0));
  color: var(--color-cta-alt-hover-text, var(--color-cta-alt-text, #4a5568));
}

/* Category / Index pages */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

/* Insights-hub filter rails (Topic + Format) */
.hub-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.hub-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm) var(--spacing-md);
}

.hub-filter-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #718096;
}

.hub-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.hub-filter-chip {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-body-text, #1a202c);
  background: white;
  transition: border-color 0.2s, color 0.2s;
}

.hub-filter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.article-card {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.article-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-card-media {
  aspect-ratio: 1448 / 1086;
  width: 100%;
  overflow: hidden;
  background: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
}

.article-card-media-placeholder {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
}

.article-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.article-card-image-placeholder {
  opacity: 0.88;
}

.article-card-body {
  padding: var(--spacing-md);
}

.article-card h3 {
  font-size: 1.125rem;
  margin-top: 0;
}

.article-card .article-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card .article-card-title a {
  color: var(--color-heading-text, var(--color-link-text, var(--color-accent)));
}

.article-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  color: #718096;
  margin-bottom: var(--spacing-xs);
}

.article-card-read-more {
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
}

.article-card time {
  display: block;
  margin-top: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  .article-container {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
  }

  /* Mobile nav: hamburger reveals the collapsible panel (nav + CTA). */
  .nav-toggle {
    display: flex;
  }
  .header-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    margin-left: 0;
    padding: var(--spacing-md);
    background: white;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
  .site-header.nav-open .header-collapse {
    display: flex;
  }
  .header-collapse .main-nav {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    width: 100%;
    margin-left: 0;
  }
  .header-collapse .cta-button {
    align-self: flex-start;
    margin-top: var(--spacing-xs);
  }
  /* Dropdowns stack inline inside the panel (no hover on touch). */
  .main-nav .nav-item {
    width: 100%;
    position: static;
  }
  .main-nav .nav-dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .main-nav .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .cookie-banner-content {
    flex-direction: column;
    text-align: center;
  }

  /* flex-basis resolves along the MAIN axis, so the row-layout basis below
     (flex: 1 1 320px, which stops the notice claiming its own flex line by
     max-content width) becomes a 320px HEIGHT once this container turns into a
     column — three lines of text in a 320px-tall box, and a banner covering
     half a phone screen. Reset it to content height here.
     NOTE: no backticks in this file — the CSS is a JS template literal. */
  .cookie-banner-content p {
    flex: 0 1 auto;
  }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* --- GEO enhancements (shared) --- */
.article-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-xs) var(--spacing-sm); margin-top: var(--spacing-sm); font-size: 0.8125rem; color: var(--text-muted, #6b7280); }
.article-card-meta-sep { color: var(--border-subtle, #d1d5db); }
.article-card-type { display: inline-flex; align-items: center; border-radius: var(--radius-label); padding: 0.2em 0.45em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: var(--color-label-text, var(--color-link-text, var(--color-accent))); background: var(--color-label-bg, transparent); }

/* Category index pagination — static, crawlable links for /category/{slug}/page/N. */
.category-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-sm); margin: var(--spacing-xl) 0 0; }
.category-pagination-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-xs); margin: 0; padding: 0; list-style: none; }
.category-pagination-link,
.category-pagination-page { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0.45rem 0.75rem; border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-button); color: var(--color-body-text, #1a202c); background: var(--color-page-bg, #ffffff); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.category-pagination-link:hover,
.category-pagination-page:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.category-pagination-page.is-current { border-color: var(--color-accent); color: var(--color-cta-text, #ffffff); background: var(--color-cta, var(--color-primary)); }

/* Featured post promoted into the hub hero slot (benchmark parity — the page
   leads with the featured article, not a lead-capture form). */
.hub-intro-band { background: var(--color-surface, var(--color-page-bg, #ffffff)); }
.hub-intro { padding-bottom: var(--spacing-xl); }
.hub-intro .hub-featured { margin-bottom: 0; }
.hub-subtitle { color: var(--text-muted, #6b7280); font-size: 1.125rem; margin-top: var(--spacing-xs); margin-bottom: var(--spacing-lg); }
.hub-featured { margin: var(--spacing-lg) 0 var(--spacing-xl); }
.hub-featured-media { display: block; border-radius: var(--radius-card); overflow: hidden; }
.hub-featured-media .article-card-media { margin: 0; aspect-ratio: 16 / 9; }
.hub-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-featured-label { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-link-text, var(--color-accent)); }
.hub-featured-title { font-size: 1.75rem; line-height: 1.2; margin: var(--spacing-xs) 0 var(--spacing-sm); }
.hub-featured-title a { color: var(--color-primary); text-decoration: none; }
.hub-featured-title a:hover { color: var(--color-accent); }
.hub-featured-excerpt { color: var(--text-muted, #6b7280); font-size: 1rem; line-height: 1.6; margin: 0 0 var(--spacing-md); }
.hub-featured-author { display: flex; align-items: center; gap: var(--spacing-sm); }
.hub-featured-author-photo { width: 32px; height: 32px; border-radius: 9999px; object-fit: cover; flex: 0 0 auto; }
.hub-featured-author-photo--empty { position: relative; background: var(--border-subtle, #e5e7eb); }
.hub-featured-author-photo--empty::before { content: ""; position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; background-color: var(--text-muted, #9ca3af); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.hub-featured-author-name { font-size: 0.9rem; font-weight: 600; color: var(--color-primary); }
.hub-lead { margin-top: var(--spacing-xl); }
@media (min-width: 760px) {
  .hub-featured { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--spacing-xl); }
  .hub-featured-title { font-size: 2rem; }
}

/* Related articles — a below-content continuation path rather than a narrow
   sidebar list. All surfaces and text use functional brand roles so dark
   client sites and authored foreground/background pairings remain valid. */
.related-articles { margin: var(--spacing-xl) 0; }
.related-articles > h2 { margin: 0 0 var(--spacing-lg); }
.related-articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-md); margin: 0; padding: 0; list-style: none; }
.related-article-card { min-width: 0; margin: 0; padding: 0; border: 0; }
.related-article-link { display: flex; height: 100%; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg); border: 1px solid var(--color-divider, var(--border-subtle, #e5e7eb)); border-radius: var(--radius-card); background: var(--color-author-card-bg, var(--color-surface, var(--color-page-bg, #ffffff))); color: var(--color-body-text, #1a202c); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.related-article-link:hover { border-color: var(--color-link-text, var(--color-accent)); color: var(--color-body-text, #1a202c); text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09); }
.related-article-label { align-self: flex-start; border-radius: var(--radius-label); padding: 0.2em 0.5em; background: var(--color-label-bg, transparent); color: var(--color-label-text, var(--color-link-text, var(--color-accent))); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.related-article-link h3 { margin: 0; color: var(--color-heading-text, var(--color-primary)); font-size: 1.05rem; line-height: 1.35; }
.related-article-link p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-body-text, #1a202c); font-size: 0.875rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.related-article-action { margin-top: auto; color: var(--color-link-text, var(--color-accent)); font-size: 0.875rem; font-weight: 700; }
@media (max-width: 900px) {
  .related-articles-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .related-article-link { transition: none; }
  .related-article-link:hover { transform: none; }
}

/* Lead capture — functional form surfaces shared by hub, article, service,
   category, pillar, product, contact, and the sitewide popup. */
.page-lead-capture { margin-top: var(--spacing-xl); }
.lead-form-block { margin-top: var(--spacing-xl); }
.gf-lead-form { margin: var(--spacing-lg) 0; }
.gf-lead-form:not(.gf-lead-form--sidebar):not(.gf-lead-form--popup) .gf-lead-form__inner { max-width: none; }
.gf-lead-form__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1fr); align-items: stretch; gap: clamp(1.25rem, 4vw, 3rem); background: var(--color-cta, var(--color-primary)); border: 0; border-radius: var(--radius-panel); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); }
.gf-lead-form__intro { display: flex; flex-direction: column; }
.gf-lead-form__intro-copy { border-left: 4px solid var(--color-label-bg, var(--color-cta-text, #ffffff)); padding-left: clamp(1rem, 2.5vw, 1.5rem); }
.gf-lead-form__headline { margin: 0 0 0.6rem; color: var(--color-cta-text, #ffffff); font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.18; }
.gf-lead-form__description { max-width: 34rem; margin: 0; color: var(--color-cta-text, #ffffff); line-height: 1.6; opacity: 0.86; }
.gf-lead-form__intro-note { max-width: 34rem; margin: auto 0 0; padding-top: var(--spacing-md); border-top: 1px solid color-mix(in srgb, var(--color-cta-text, #ffffff) 28%, transparent); color: var(--color-cta-text, #ffffff); font-size: 0.8125rem; line-height: 1.5; opacity: 0.72; }
.gf-lead-form__form { display: grid; grid-template-columns: 1fr; align-content: start; gap: var(--spacing-sm); padding: clamp(1rem, 2.5vw, 1.5rem); border: 0; border-radius: var(--radius-panel); background: var(--color-page-bg, #ffffff); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
.gf-lead-form__field { min-width: 0; }
.gf-lead-form__field label { display: block; margin: 0 0 0.3rem; color: var(--color-body-text, #1a202c); font-size: 0.875rem; font-weight: 700; }
.gf-lead-form__field input,
.gf-lead-form__field textarea,
.gf-lead-form__field select { width: 100%; min-height: 2.5rem; border: 1px solid var(--border-subtle, #d1d5db); border-radius: var(--radius-input); padding: 0.55rem 0.7rem; color: var(--color-body-text, #1a202c); background: var(--color-page-bg, #ffffff); font: inherit; }
.gf-lead-form__field textarea { min-height: 4.75rem; resize: vertical; }
.gf-lead-form__field:has(textarea),
.gf-lead-form__field--checkbox,
.gf-lead-form__optional,
.gf-lead-form__consent,
.gf-lead-form__submit,
.gf-lead-form__status { grid-column: 1 / -1; }
.gf-lead-form__optional { margin: 0; }
.gf-lead-form__optional summary { color: var(--color-link-text, var(--color-accent)); cursor: pointer; font-size: 0.875rem; font-weight: 700; }
.gf-lead-form__optional summary span { color: var(--text-muted, #6b7280); font-weight: 400; }
.gf-lead-form__optional-fields { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); padding-top: var(--spacing-sm); }
.gf-lead-form__optional-fields .gf-lead-form__field:has(textarea),
.gf-lead-form__optional-fields .gf-lead-form__field--checkbox { grid-column: 1 / -1; }
.gf-checkbox-label { display: flex; align-items: flex-start; gap: var(--spacing-sm); color: var(--color-body-text, #1a202c); font-size: 0.8125rem; line-height: 1.45; }
.gf-checkbox-label input { width: auto; min-height: 0; margin-top: 0.18rem; flex: 0 0 auto; }
.gf-checkbox-label a { color: var(--color-link-text, var(--color-accent)); font-weight: 700; }
.gf-required { color: var(--color-accent); margin-left: 0.15rem; }
.gf-lead-form__submit { justify-self: stretch; min-height: 2.7rem; border: none; border-radius: var(--radius-button); padding: 0.65rem 1rem; background: var(--color-cta, var(--color-primary)); color: var(--color-cta-text, #ffffff); font: inherit; font-weight: 800; cursor: pointer; text-align: center; }
.gf-lead-form__submit:disabled { opacity: 0.65; cursor: not-allowed; }
.gf-lead-form__status { font-size: 0.9rem; font-weight: 700; }
.gf-status--success { color: #166534; }
.gf-status--error { color: #b91c1c; }
.gf-lead-form--popup { position: fixed; inset: 0; z-index: 1100; align-items: center; justify-content: center; padding: var(--spacing-lg); margin: 0; }
.gf-popup-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.64); }
.gf-lead-form--sidebar .gf-lead-form__inner,
.gf-lead-form--popup .gf-lead-form__inner { grid-template-columns: 1fr; }
.gf-lead-form--popup .gf-lead-form__inner { position: relative; z-index: 1; width: min(580px, 100%); max-height: calc(100vh - 3rem); overflow: auto; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28); }
.gf-lead-form--popup .gf-lead-form__intro-note { margin-top: var(--spacing-lg); }
.gf-popup-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 36px; height: 36px; border: none; border-radius: 999px; background: var(--color-page-bg, #ffffff); color: var(--color-primary); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.22); }
@media (max-width: 760px) {
  .gf-lead-form__inner { grid-template-columns: 1fr; padding: var(--spacing-md); }
  .gf-lead-form__intro-note { margin-top: var(--spacing-lg); }
  .gf-lead-form__form { padding: var(--spacing-sm); }
  .gf-lead-form__submit { width: 100%; }
}

.hub-filter-chip { display: inline-flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; }
.hub-filter-chip.is-active { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
.hub-filter-count { font-size: 0.7rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.article-card[hidden] { display: none; }

/* Table of contents — a self-contained floating card in the sidebar. The
   heading carries a light list glyph; each entry is separated by a hairline
   rule and prefixed with a low-opacity accent chevron (both are CSS mask
   pseudo-elements, so the anchor text a crawler / answer engine reads stays
   clean — no glyph characters leak into the link text). */
.article-sidebar { --gf-sticky-sidebar-gap: var(--spacing-md); top: calc(var(--gf-visible-header-offset, 64px) + var(--gf-sticky-sidebar-gap, var(--spacing-md))); transition: top 0.25s ease; }
.article-toc { margin-bottom: var(--spacing-xl); padding: var(--spacing-md) 0; background: var(--color-article-nav-bg, #ffffff); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-panel); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); }
.article-toc-heading { display: flex; align-items: center; gap: var(--spacing-xs); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-article-nav-text, #1a202c); margin: 0 0 var(--spacing-sm); padding: 0 var(--spacing-lg) var(--spacing-sm); border: none; border-bottom: 1px solid var(--border-subtle, #e5e7eb); }
.article-toc-heading::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; }
.article-toc-list { list-style: none; padding: 0; margin: 0; max-height: min(60vh, calc(100dvh - var(--gf-visible-header-offset, 64px) - var(--gf-sticky-sidebar-gap, var(--spacing-md)) - var(--spacing-md))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, 0.18) transparent; }
.article-toc-list::-webkit-scrollbar { width: 8px; }
.article-toc-list::-webkit-scrollbar-track { background: transparent; }
.article-toc-list::-webkit-scrollbar-thumb { background-color: rgba(16, 24, 40, 0.18); border-radius: 4px; }
.article-toc-list li { margin: 0; }
.article-toc-list li + li { border-top: 1px solid var(--border-subtle, #e5e7eb); }
.article-toc-list a { display: flex; align-items: baseline; gap: var(--spacing-xs); color: var(--color-article-nav-text, #1a202c); text-decoration: none; font-size: 0.9rem; line-height: 1.4; padding: 0.4rem var(--spacing-lg); transition: background-color 0.15s ease, color 0.15s ease; }
.article-toc-list a::before { content: ""; flex: 0 0 auto; width: 0.8em; height: 0.8em; align-self: center; background-color: var(--color-accent); opacity: 0.45; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity 0.15s ease, transform 0.15s ease; }
.article-toc-list a:hover { color: var(--color-article-nav-text, #1a202c); background: var(--color-article-nav-active-bg, #f7fafc); }
.article-toc-list a:hover::before { opacity: 1; transform: translateX(2px); }
/* Scroll-spy: the section currently at the top of the viewport (set by article-scroll.js). */
.article-toc-list a.is-active { color: var(--color-article-nav-active-text, var(--color-article-nav-text, #1a202c)); background: var(--color-article-nav-active-bg, #f7fafc); font-weight: 600; }
.article-toc-list a.is-active::before { opacity: 1; transform: translateX(2px); }
/* Reading progress — a thin brand-colored bar pinned to the top of the viewport. */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; background: transparent; pointer-events: none; }
.reading-progress-bar { display: block; height: 100%; width: 0; background: var(--color-accent, var(--color-primary)); transition: width 0.08s linear; }
@media (prefers-reduced-motion: reduce) { .article-sidebar, .reading-progress-bar { transition: none; } }

/* FAQ accordion — native <details name> (one open at a time), collapsed by
   default so the answers don't elongate the page. Hairline separators divide
   the rows; a chevron marker rotates when a row opens. Answers stay in the DOM
   when collapsed, so they remain crawlable and the FAQPage JSON-LD (built
   separately from faq_structured) is unaffected — this is purely display.
   Overrides the per-theme .faq-item rules (appended after the theme CSS).
   Applies to both the article FAQ (summary > h3) and the landing/product-page
   FAQ (summary text). */
.faq-section { margin-bottom: var(--spacing-xl); }
.faq-section .faq-item { margin: 0; border-bottom: 1px solid var(--border-subtle, #e5e7eb); }
.faq-section .faq-item:first-of-type { border-top: 1px solid var(--border-subtle, #e5e7eb); }
.faq-section .faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin: 0; padding: var(--spacing-md) 0; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 700; color: var(--color-primary); transition: color 0.15s ease; }
.faq-section .faq-question::-webkit-details-marker { display: none; }
.faq-section .faq-question:hover { color: var(--color-accent); }
.faq-section .faq-question h3 { margin: 0; border: none; display: inline; font-size: inherit; line-height: 1.4; color: inherit; }
.faq-section .faq-question::after { content: ""; flex: 0 0 auto; width: 1.1em; height: 1.1em; background-color: var(--color-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.2s ease; }
.faq-section .faq-item[open] .faq-question::after { transform: rotate(180deg); }
.faq-section .faq-answer { padding: 0 0 var(--spacing-md); color: var(--color-body-text, #1a202c); }
.faq-section .faq-answer p { margin: 0; }

/* Author bio box — a themed card closing the article. Avatar (real photo, or a
   neutral gray-circle person placeholder when brand knowledge has no photo) on
   the left; eyebrow / name / role / bio / links on the right. Uses var(--x, …)
   fallbacks so it renders in themes that don't declare --color-surface etc. */
.author-bio-box { display: flex; align-items: flex-start; gap: var(--spacing-lg); margin: var(--spacing-xl) 0; padding: var(--spacing-lg); background: var(--color-author-card-bg, #f7f7f8); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-card); }
.author-bio-photo { display: block; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; }
.author-bio-photo--empty { position: relative; background: var(--border-subtle, #e5e7eb); }
.author-bio-photo--empty::before { content: ""; position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; background-color: var(--text-muted, #9ca3af); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.author-bio-body { min-width: 0; }
.author-bio-eyebrow { margin: 0 0 var(--spacing-xs); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #6b7280); }
.author-bio-name { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--color-primary); }
.author-bio-title { margin: 0.1rem 0 var(--spacing-sm); font-size: 0.9rem; color: var(--text-muted, #6b7280); }
.author-bio-text { margin: 0 0 var(--spacing-sm); color: var(--color-body-text, #1a202c); font-size: 0.95rem; line-height: 1.6; }
.author-bio-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); margin: 0; padding: 0; }
.author-bio-links a { display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--color-accent); text-decoration: none; border: none; }
.author-bio-links a:hover { text-decoration: underline; }
/* Per-link brand/link icon before the label — currentColor mask, no image assets. */
.author-bio-icon { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4em; flex: 0 0 auto; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.author-bio-icon--linkedin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z'/%3E%3C/svg%3E"); }
.author-bio-icon--twitter { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
.author-bio-icon--website { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
/* M81c — dedicated author page (/authors/{slug}). Reuses .author-bio-photo /
   --empty for the avatar and .author-bio-links for social links; adds the
   page-header layout, the knowsAbout expertise chips, and the published-article
   index heading. */
.author-page-header { display: flex; align-items: flex-start; gap: var(--spacing-lg); margin: 0 0 var(--spacing-xl); }
.author-page-header .author-bio-photo { width: 96px; height: 96px; }
.author-page-identity { min-width: 0; }
.author-page-role { margin: 0.25rem 0 var(--spacing-sm); font-size: 1rem; color: var(--text-muted, #6b7280); }
.author-page-bio { margin: 0 0 var(--spacing-md); color: var(--color-body-text, #1a202c); font-size: 1rem; line-height: 1.65; max-width: 60ch; }
.author-page-expertise { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-sm); margin: 0 0 var(--spacing-md); padding: 0; }
.author-page-expertise li { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; font-size: 0.8rem; font-weight: 600; color: var(--color-author-chip-text, #1a202c); background: var(--color-author-chip-bg, #f7f7f8); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 9999px; }
.author-page-articles-heading { margin: var(--spacing-xl) 0 var(--spacing-md); font-size: 1.25rem; }

/* Markdown tables written inline in the article body (body_html). The
   structured comparison_table component has its own .article-comparison-table
   styles, but a table authored in the draft markdown renders as a bare <table>
   and would otherwise be unstyled. Give it the same formatted treatment
   (bordered grid, tinted header, padded cells). GitHub's responsive pattern
   (block + max-content + overflow-x) keeps columns aligned and lets a wide
   table scroll on narrow screens instead of breaking the layout. Uses
   var(--x, …) fallbacks so it renders in themes that don't declare the tokens. */
.article-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--spacing-lg) 0; font-size: 0.95rem; }
.article-body th, .article-body td { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-subtle, #e2e8f0); text-align: left; vertical-align: top; }
.article-body thead th { background: var(--color-article-table-header-bg, #f7fafc); color: var(--color-article-table-header-text, #1a202c); font-weight: 600; }

/* ── Commercial sections: tokens ─────────────────────────────────────────── */
:root {
  --ms-ink: var(--color-heading, var(--color-secondary, #1a1d21));
  --ms-action: var(--color-primary, #d8443c);
  --ms-deep: var(--color-accent, #1f3a5f);
  --ms-band: var(--color-surface, #f6f7f8);
  --ms-card: #ffffff;
  --ms-line: var(--border-subtle, #d8dce1);
  --ms-muted: var(--text-muted, #4a5568);
  --ms-radius: var(--radius-card, 4px);
  --ms-radius-lg: 12px;
  --ms-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  --ms-rhythm: clamp(3rem, 2rem + 4vw, 5.5rem);
  --ms-measure: 68ch;
}

/* Full-bleed escape from ".page-container". Half the content box is
   (max-width - 2 * container padding) / 2; the max() keeps the gutter on
   narrow viewports where the container is already edge-to-edge. */
.ms-bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(2rem, calc(50vw - (var(--max-width, 1200px) / 2) + 2rem));
}

/* ── Section rhythm + headings ───────────────────────────────────────────── */
.page-container > section { margin-block: var(--ms-rhythm); }
.page-container > section:first-of-type { margin-top: var(--spacing-lg, 2rem); }

.ms-section > h2,
.ms-section > .ms-section-header > h2,
.faq-section > h2,
.industries-carousel-section > h2,
.process-steps-section > h2,
.comparison-table-section > h2 {
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ms-ink);
  margin: 0 0 1.25rem;
  padding-top: 0.9rem;
  position: relative;
}
/* Accent rule above every section heading — the cheapest way to make a stack of
   sections read as a designed sequence rather than a document outline. */
.ms-section > h2::before,
.ms-section > .ms-section-header > h2::before,
.faq-section > h2::before,
.industries-carousel-section > h2::before,
.process-steps-section > h2::before,
.comparison-table-section > h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.5rem; height: 3px;
  background: var(--ms-action);
  border-radius: 2px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.ms-hero {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(2rem, calc(50vw - (var(--max-width, 1200px) / 2) + 2rem));
  padding-block: clamp(2.75rem, 1.75rem + 4vw, 5rem);
  margin-top: 0 !important;
  background: var(--ms-band);
  border-bottom: 1px solid var(--ms-line);
}
/* When the subhead was dropped as a duplicate of the body, the band holds only
   a headline and a button — the full height then reads as empty space. */
.ms-hero:not(:has(.ms-hero__subhead)) { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.ms-hero:not(:has(.ms-hero__subhead)) .ms-hero__headline { margin-bottom: 1.5rem; }
/* Two columns ONLY when there is media to fill the second one. */
.ms-hero__inner:has(.ms-hero__media) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
/* Most commercial entities have no hero image. A one-column GRID still applies
   its row gap between headline, subhead and CTA, which tore the hero apart
   vertically — so lay it out in normal flow and let the elements' own margins
   set the rhythm. */
.ms-hero__inner:not(:has(.ms-hero__media)) { display: block; max-width: 48rem; }
/* The copy column. Without a wrapper each of eyebrow/headline/subhead/CTAs
   would be its own grid ITEM and the two-column hero would shred them. */
.ms-hero__copy { min-width: 0; }
.ms-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ms-action);
  margin-bottom: 0.75rem;
}
.ms-hero__headline {
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ms-ink);
  margin: 0 0 1rem;
}
.ms-hero__subhead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ms-muted);
  margin: 0 0 1.75rem;
  max-width: 42rem;
}
.ms-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ms-hero__media img { width: 100%; height: auto; border-radius: var(--ms-radius); border: 1px solid var(--ms-line); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ms-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.8em 1.5em;
  border-radius: var(--ms-radius);
  font-weight: 650; font-size: 0.9375rem; line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid var(--ms-action);
  color: var(--ms-action);
  background: transparent;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ms-cta:hover { background: var(--ms-action); color: #fff; }
.ms-cta--primary {
  background: var(--ms-action); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
}
.ms-cta--primary:hover { filter: brightness(.92); color: #fff; transform: translateY(-1px); }
/* The subordinate CTA. Declared AFTER `.ms-cta:hover` because the two have
   equal specificity and source order decides. Every fallback resolves to the
   base outline treatment, so an uncaptured secondary renders exactly as it
   did before this role existed. */
.ms-cta--secondary {
  background: var(--color-cta-alt, transparent);
  color: var(--color-cta-alt-text, var(--ms-action));
  border-color: var(--color-cta-alt-border, var(--color-cta-alt-text, var(--ms-action)));
}
/* Same fallback chain as `.btn-secondary:hover`, cell for cell, so one
   captured secondary cannot hover two different ways on one page: an authored
   hover wins, else the base fill (`transparent` for an outline, so a
   text-only authored hover stays text-only), else the theme's own action
   colour — which is what an uncaptured secondary did before this role. */
.ms-cta--secondary:hover,
.ms-cta--secondary:focus-visible {
  background: var(--color-cta-alt-hover, var(--color-cta-alt, var(--ms-action)));
  color: var(--color-cta-alt-hover-text, var(--color-cta-alt-text, #fff));
}
.ms-cta:focus-visible { outline: 2px solid var(--ms-deep); outline-offset: 2px; }

/* ── Body prose ──────────────────────────────────────────────────────────── */
.ms-commercial-body__content { max-width: var(--ms-measure); }
.ms-commercial-body__content p { line-height: 1.75; margin: 0 0 1rem; color: var(--ms-muted); font-size: 1.0625rem; }
.ms-commercial-body__content > p:first-child { color: var(--ms-ink); font-size: 1.15rem; line-height: 1.6; }
/* M89c — structured subheaded parts (lede is the leading <p> above). */
.ms-commercial-body__part { margin-top: 1.5rem; }
.ms-commercial-body__subhead { margin: 0 0 0.5rem; color: var(--ms-ink); font-size: 1.15rem; line-height: 1.35; font-weight: 600; }
.ms-commercial-body__part p:last-child { margin-bottom: 0; }

/* ── Key specs — a spec sheet, not a list ────────────────────────────────── */
.key-specs-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  background: var(--ms-card);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  overflow: hidden;
  list-style: none;
  padding: 0;
}
.key-spec {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--ms-line);
}
.key-spec:last-child { border-right: 0; }
.key-spec-label {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ms-muted);
}
.key-spec-value {
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  color: var(--ms-ink);
}
.key-spec-unit { font-size: .85em; font-weight: 500; color: var(--ms-muted); margin-left: .25em; }

/* ── Stats — full-bleed dark band ────────────────────────────────────────── */
.ms-stats-bar {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(2rem, calc(50vw - (var(--max-width, 1200px) / 2) + 2rem));
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background: var(--ms-ink);
}
.ms-stats-bar__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ms-gap); list-style: none; padding: 0; margin: 0;
}
.ms-stats-bar__stat {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ms-action);
}
/* Stats wrap to different heights ("50+" vs "Family-run since the 1970s"), and
   a reversed column anchored each block to the bottom of its row — so the
   numbers sat on three different baselines. Normal order, top-aligned. */
.ms-stats-bar__list { align-items: start; }
.ms-stats-bar__value {
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  color: #fff;
}
.ms-stats-bar__label {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* ── Brands rail ─────────────────────────────────────────────────────────── */
.ms-brands-carousel__list {
  display: flex; flex-wrap: wrap; gap: 0.625rem;
  list-style: none; padding: 0; margin: 0;
}
.ms-brands-carousel__item {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ms-line);
  border-radius: 999px;
  background: var(--ms-card);
  font-size: 0.9375rem;
}
.ms-brands-carousel__name { font-weight: 650; color: var(--ms-ink); }
.ms-brands-carousel__note { color: var(--ms-muted); font-size: .82em; }
.ms-brands-carousel__logo { max-height: 22px; width: auto; }

/* ── Card surfaces ───────────────────────────────────────────────────────── */
.ms-card, .ms-item-card, .ms-why-choose__reason, .ms-services-grid__item,
.ms-testimonials__item, .industry-card, .process-step,
.ms-feature-spotlight__feature {
  background: var(--ms-card);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  padding: 1.5rem;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.ms-card:hover, .ms-item-card:hover, .ms-services-grid__item:hover, .industry-card:hover {
  box-shadow: 0 6px 20px rgba(16,24,40,.08);
  border-color: color-mix(in srgb, var(--ms-action) 35%, var(--ms-line));
  transform: translateY(-2px);
}
.ms-card h3, .ms-item-card__title, .ms-why-choose__title,
.ms-services-grid__name, .industry-name, .process-step-title {
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: 1.0625rem; font-weight: 650; line-height: 1.35;
  margin: 0 0 0.4rem;
  color: var(--ms-ink);
}

/* ── Why choose — check-marked cards ─────────────────────────────────────── */
.ms-why-choose__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--ms-gap); list-style: none; padding: 0; margin: 0;
}
.ms-why-choose__reason { position: relative; }
.ms-why-choose__body { margin: 0; color: var(--ms-muted); line-height: 1.65; font-size: 0.9375rem; }

/* ── Grids + cards ───────────────────────────────────────────────────────── */
.ms-services-grid__list, .ms-item-grid__list,
.ms-content-grid__list, .ms-related-items__list,
.ms-testimonials__list, .ms-awards-strip__list,
.ms-feature-spotlight__list, .process-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--ms-gap); list-style: none; padding: 0; margin: 0;
}
.ms-services-grid__blurb, .ms-card__excerpt, .ms-related-items__summary,
.industry-description, .process-step-description, .ms-feature-spotlight__feature-body {
  margin: 0; color: var(--ms-muted); font-size: 0.9375rem; line-height: 1.65;
}
.ms-card__image, .ms-item-card__media img, .ms-related-items__image {
  width: 100%; height: auto; border-radius: var(--ms-radius); margin-bottom: 0.875rem;
}
.ms-item-card__media--placeholder {
  aspect-ratio: 16/9; background: var(--ms-band);
  border-radius: var(--ms-radius); margin-bottom: 0.875rem;
}
.ms-card__bullets, .ms-item-card__bullets {
  margin: 0.75rem 0 0; padding-left: 1.15rem;
  color: var(--ms-muted); font-size: 0.9rem; line-height: 1.7;
}
.ms-card__meta { font-size: 0.8rem; color: var(--ms-muted); }
.ms-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.75rem 0 0; }
.ms-tag {
  display: inline-block; padding: 0.2em 0.6em; border-radius: 999px;
  background: var(--ms-band); color: var(--ms-muted);
  font-size: 0.75rem; font-weight: 600;
}
.ms-card__inquire, .ms-item-card__inquire {
  display: inline-flex; align-items: center; gap: 0.3em;
  margin-top: 0.875rem; font-weight: 650; font-size: 0.9375rem;
  color: var(--ms-action); text-decoration: none;
}
.ms-card__inquire::after, .ms-item-card__inquire::after { content: "\2192"; transition: transform .15s ease; }
.ms-card__inquire:hover::after, .ms-item-card__inquire:hover::after { transform: translateX(3px); }

/* ── Coverage + industries chips ─────────────────────────────────────────── */
.ms-service-coverage__list, .industries-carousel {
  display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; padding: 0; margin: 0;
}
.ms-service-coverage__location {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ms-line); border-radius: 999px;
  background: var(--ms-card); font-size: 0.9375rem;
}
.ms-service-coverage__name { font-weight: 650; color: var(--ms-ink); }
.ms-service-coverage__region { color: var(--ms-muted); font-size: .85em; }
.industry-card { flex: 0 1 auto; }
.industry-card:not(:has(.industry-description)) {
  padding: 0.55rem 1.1rem; border-radius: 999px;
}
.industry-card:not(:has(.industry-description)) .industry-name {
  margin: 0; font-size: 0.9375rem; font-weight: 650;
}

/* ── Process steps — numbered ────────────────────────────────────────────── */
.process-steps { counter-reset: ms-step; }
.process-step { position: relative; padding-top: 3.25rem; counter-increment: ms-step; }
.process-step-number, .process-step:not(:has(.process-step-number))::before {
  position: absolute; top: 1.5rem; left: 1.5rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--ms-action); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem;
}
.process-step:not(:has(.process-step-number))::before { content: counter(ms-step); }

/* ── Comparison table ────────────────────────────────────────────────────── */
.comparison-table-section { overflow-x: auto; }
.comparison-table {
  width: 100%; border-collapse: collapse; font-size: 0.9375rem;
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden;
}
.comparison-table th, .comparison-table td {
  border-bottom: 1px solid var(--ms-line); padding: 0.8rem 1rem; text-align: left;
}
.comparison-table thead th {
  background: var(--ms-band); font-weight: 700; color: var(--ms-ink);
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-spec-label { font-weight: 650; color: var(--ms-ink); }

/* ── Testimonials / takeaways ────────────────────────────────────────────── */
.ms-testimonials__quote { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ms-ink); }
.ms-testimonials__quote::before { content: "\201C"; color: var(--ms-action); font-size: 2rem; line-height: 0; vertical-align: -0.35em; margin-right: .15em; }
.ms-testimonials__meta { display: flex; align-items: center; gap: 0.7rem; }
.ms-testimonials__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ms-testimonials__name { font-weight: 650; color: var(--ms-ink); }
.ms-testimonials__source, .ms-awards-strip__year { color: var(--ms-muted); font-size: 0.85rem; }
.ms-key-takeaways {
  background: var(--ms-band);
  border-left: 3px solid var(--ms-action);
  border-radius: var(--ms-radius);
  padding: 1.5rem 1.75rem;
}
.ms-key-takeaways__list { margin: 0; padding-left: 1.15rem; }
.ms-key-takeaways__bullet { margin-bottom: 0.5rem; line-height: 1.65; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-section { background: var(--ms-band); border-radius: var(--ms-radius); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.faq-item { border-bottom: 1px solid var(--ms-line); }
.faq-item:last-child { border-bottom: 0; }
.faq-question { font-weight: 650; color: var(--ms-ink); }

/* ── Final CTA — full-bleed band ─────────────────────────────────────────── */
.ms-final-cta {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(2rem, calc(50vw - (var(--max-width, 1200px) / 2) + 2rem));
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--ms-deep);
}
.ms-final-cta__inner { max-width: 46rem; margin: 0 auto; text-align: center; padding: 0; background: none; }
.ms-final-cta__headline {
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 0.75rem; color: #fff;
}
.ms-final-cta__body { margin: 0 auto 2rem; max-width: 34rem; color: rgba(255,255,255,.75); line-height: 1.65; font-size: 1.0625rem; }
.ms-final-cta__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.ms-final-cta__ctas .ms-cta { border-color: rgba(255,255,255,.55); color: #fff; }
/* The final-CTA band is a dark full-bleed panel that owns its own contrast
   contract: the rules above force white ink and a white hairline on every CTA
   in it. The captured secondary FILL was designed for the page surface, so
   letting it through here paints a light button that those rules then write
   white text onto. The band keeps its outline treatment instead — the same
   call as the editorial cookie banner (B154). */
.ms-final-cta__ctas .ms-cta--secondary { background: transparent; }
.ms-final-cta__ctas .ms-cta:not(.ms-cta--primary):hover,
.ms-final-cta__ctas .ms-cta:not(.ms-cta--primary):focus-visible { background: #fff; color: var(--ms-deep); border-color: #fff; }
.ms-final-cta__ctas .ms-cta--primary { background: var(--ms-action); border-color: var(--ms-action); }

/* ── Contact form ────────────────────────────────────────────────────────── */
.ms-contact-form__heading { font-family: var(--font-heading, system-ui, sans-serif); margin: 0 0 0.35rem; color: var(--ms-ink); }
.ms-contact-form__body { margin: 0 0 1.25rem; color: var(--ms-muted); }

/* ── Pagination / filters ────────────────────────────────────────────────── */
.ms-pagination__list { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 2rem 0 0; justify-content: center; }
.ms-pagination__link {
  display: inline-block; padding: 0.45em 0.85em;
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
  text-decoration: none; color: var(--ms-ink); font-size: 0.9375rem;
}
.ms-pagination__link[aria-current="page"] { background: var(--ms-action); border-color: var(--ms-action); color: #fff; }
.ms-filter-tabs__group { margin-bottom: 1rem; border: 0; padding: 0; }
.ms-filter-tabs__legend { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-muted); }
.ms-filter-tabs__values { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ms-item-grid__count, .ms-item-grid__facet-count { color: var(--ms-muted); font-size: 0.85rem; }
.ms-icon { width: 1.5rem; height: 1.5rem; }

/* ── Card grids: a DETERMINISTIC column count ────────────────────────────── */
/* auto-fit chooses a column count from the viewport, so the composer cannot
   know how many cards fill a row and a ragged last row is unavoidable. The
   composer trims the card count to one that divides by 3 (or 2), and stamps
   the matching column count here, so the two always agree. */
.ms-why-choose__list[data-cols="3"],
.ms-feature-spotlight__list[data-cols="3"],
.ms-services-grid__list[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-why-choose__list[data-cols="2"],
.ms-feature-spotlight__list[data-cols="2"],
.ms-services-grid__list[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-why-choose__list[data-cols="1"],
.ms-feature-spotlight__list[data-cols="1"],
.ms-services-grid__list[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .ms-why-choose__list[data-cols],
  .ms-feature-spotlight__list[data-cols],
  .ms-services-grid__list[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ms-why-choose__list[data-cols],
  .ms-feature-spotlight__list[data-cols],
  .ms-services-grid__list[data-cols] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Section header: eyebrow pill + heading + subtitle ───────────────────── */
.ms-section-header { margin: 0 0 1.75rem; }
.ms-section-header > h2 { margin-bottom: 0; }
.ms-section-header__subtitle {
  margin: 0.7rem 0 0; max-width: var(--ms-measure);
  color: var(--ms-muted); font-size: 1rem; line-height: 1.6;
}
.ms-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0 0 0.9rem; padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border: 1px solid var(--ms-line); border-radius: 999px;
  background: var(--ms-card); color: var(--ms-ink);
  font-size: 0.8125rem; font-weight: 600; line-height: 1;
}
.ms-eyebrow__icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--ms-action); }
/* The pill already separates this section from the one above, so the accent
   rule that does that job on bare headings would be a second, redundant mark. */
.ms-section-header:has(.ms-eyebrow) > h2 { padding-top: 0; }
.ms-section-header:has(.ms-eyebrow) > h2::before { content: none; }

/* ── Card icons ──────────────────────────────────────────────────────────── */
.ms-icon { display: block; width: 2rem; height: 2rem; color: var(--ms-action); }
.ms-why-choose__reason > .ms-icon,
.ms-feature-spotlight__feature > .ms-icon,
.ms-services-grid__item > .ms-icon { margin: 0 0 0.9rem; }

/* ── Sub-offering cards ──────────────────────────────────────────────────── */
.ms-services-grid__item,
.ms-feature-spotlight__feature {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem;
  background: var(--ms-card);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
}
.ms-services-grid__cta {
  /* margin-top:auto pins the button to the card floor so a row of cards with
     uneven copy still has its buttons on one line. */
  margin-top: auto; width: 100%; text-align: center;
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.ms-services-grid__item > .ms-services-grid__blurb { margin-bottom: 1.25rem; }

@media (max-width: 640px) {
  .key-spec { border-right: 0; border-bottom: 1px solid var(--ms-line); }
  .key-spec:last-child { border-bottom: 0; }
}