/* ============================================================
   Forward Konnect Consulting — brand system v3
   Palette restricted to WHITE, BLACK and the logo blue, per the
   client's brief. Neutral greys are tints of the logo black, not
   a second hue. Red survives only for form error states, where
   colour carries a usability meaning (never used decoratively).

   Logo colours sampled from the supplied asset:
     blue  #24BCEC     black #1C1C1C
   #24BCEC scores 3.39:1 on white — fine for large text, marks and
   UI edges, but below AA for body text. --brand-blue-ink is the
   same hue darkened to 4.85:1 and is what links and solid buttons
   use on light surfaces. On black, the logo blue is used directly.
   ============================================================ */

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/instrument-sans-variable.woff2') format('woff2-variations');
}

:root {
  --brand-blue: #348ca4;
  --brand-blue-bright: #6ec0d6;
  --brand-blue-ink: #2a7387;
  --brand-blue-deep: #1c3c54;

  --black: #1c1c1c;
  --ink-950: #0e0e10;
  --ink-900: #1c1c1c;
  --ink-800: #2c2c31;
  --ink-700: #3f3f46;

  --white: #ffffff;
  --grey-050: #f7f7f8;
  --grey-100: #eeeef1;
  --grey-200: #e2e2e6;

  --line-light: rgba(28, 28, 28, 0.14);
  --line-faint: rgba(28, 28, 28, 0.08);
  --line-dark: rgba(255, 255, 255, 0.16);

  --text-main: #1c1c1c;
  --text-muted: #5a5a62;
  --text-inverse: #f2f2f4;
  --text-inverse-muted: #a9a9b2;

  --err-600: #b42318;
  --err-050: #fdecea;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-soft: 0 18px 60px -34px rgba(14, 14, 16, 0.28);
  --shadow-float: 0 28px 80px -38px rgba(14, 14, 16, 0.42);

  --container: 1280px;
  --prose: 760px;
  --font-head: 'Instrument Sans Variable', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter Variable', 'Segoe UI', system-ui, sans-serif;

  /* Back-compat aliases so existing rules keep resolving. */
  --blue-600: var(--brand-blue-ink);
  --blue-700: var(--brand-blue-deep);
  --navy-900: var(--ink-900);
  --navy-950: var(--ink-950);
  --ink-500: var(--text-muted);
  --ivory-050: var(--grey-050);
  --ivory-100: var(--grey-100);
  --mist-100: var(--grey-100);
  --metal: var(--brand-blue);
  --success: var(--brand-blue-ink);
  --line-200: var(--line-light);
  --bg-white: var(--white);
  --bg-warm: var(--grey-050);
  --bg-bluegray: var(--grey-100);
  --bg-blue-050: #eef5ff;
  --ok-600: var(--brand-blue-ink);
  --radius-s: var(--radius-sm);
  --radius-m: var(--radius-md);
  --radius-l: var(--radius-lg);
  --shadow-1: 0 1px 2px rgba(14, 14, 16, 0.05), 0 1px 3px rgba(14, 14, 16, 0.08);
  --shadow-2: var(--shadow-soft);
  --shadow-3: var(--shadow-float);
  --w-content: var(--container);
  --w-prose: var(--prose);
  --amber-500: var(--brand-blue-ink);
  --amber-600: var(--brand-blue-deep);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 156px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.65;
  color: var(--text-main);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--mist-100); }         /* never a blank white frame while loading */
img[src$='.png'] { background: transparent; } /* logo & transparent assets */
input, button, textarea, select { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.12;
  color: var(--ink-900);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.9rem); font-weight: 720; letter-spacing: -0.04em; line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.9rem); font-weight: 690; letter-spacing: -0.032em; line-height: 1.08; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); font-weight: 680; letter-spacing: -0.015em; }
h4 { font-size: 1.1rem; font-weight: 700; }
p { overflow-wrap: break-word; }
a { color: var(--brand-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-blue-deep); }
ul, ol { padding-left: 1.4em; }
strong { color: var(--ink-900); font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink-950);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container { max-width: var(--container); margin: 0 auto; padding-inline: clamp(18px, 3.2vw, 32px); }
.prose-width { max-width: var(--prose); }

/* ---------- Overlines & eyebrows ---------- */
.kicker, .overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.kicker::before, .overline::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--metal);
  flex-shrink: 0;
}
.on-dark .kicker, .on-dark .overline, .section-dark .kicker { color: var(--brand-blue-bright); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 26px;
  border-radius: 13px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(36, 188, 236, 0.55);
}
.btn-primary:hover { background: var(--brand-blue-deep); color: #fff; box-shadow: 0 14px 30px -14px rgba(36, 188, 236, 0.6); }
.btn-secondary { background: var(--brand-blue); color: #fff; }
.btn-secondary:hover { background: var(--brand-blue-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--ink-900); border-color: rgba(14, 14, 16, 0.35); }
.btn-outline:hover { border-color: var(--ink-900); background: rgba(14, 14, 16, 0.04); color: var(--ink-900); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.8); color: #fff; }
.btn-ivory { background: var(--ivory-050); color: var(--ink-900); border-color: var(--line-light); }
.btn-ivory:hover { background: var(--ivory-100); color: var(--ink-900); }

/* Editorial arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--brand-blue);
  text-decoration: none;
}
.link-arrow::after {
  content: '\2192';
  transition: transform 0.18s ease;
}
.link-arrow:hover { color: var(--brand-blue-deep); }
.link-arrow:hover::after { transform: translateX(4px); }
.on-dark .link-arrow, .link-arrow.light { color: #fff; }
.on-dark .link-arrow:hover, .link-arrow.light:hover { color: var(--brand-blue-bright); }
.card .card-more { margin-top: auto; }
.card-more {
  display: inline;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-blue);
  text-decoration: none;
}
.card-more::after { content: '\2192'; display: inline-block; margin-left: 8px; transition: transform 0.18s ease; }
.card-more:hover::after { transform: translateX(4px); }

/* ---------- Utility bar ---------- */
.utility-bar {
  background: var(--ink-950);
  color: rgba(232, 237, 245, 0.75);
  font-size: 0.82rem;
}
.utility-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 32px;
  flex-wrap: wrap;
  padding-block: 3px;
}
.utility-bar a { color: rgba(255, 255, 255, 0.92); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.utility-bar a:hover { text-decoration: underline; color: #fff; }
.utility-bar svg { width: 13px; height: 13px; flex-shrink: 0; }
.utility-bar .u-contact { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.utility-bar .u-hours { color: rgba(167, 180, 201, 0.85); }
@media (max-width: 640px) {
  .utility-bar .u-hours { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line-faint);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
body.scrolled .site-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(14, 14, 16, 0.25);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 80px;
}
.logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-link img { width: auto; height: 86px; background: transparent; }
.main-nav { margin-left: auto; }
.main-nav > ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 2px;
  align-items: center;
}
.main-nav a, .main-nav button.nav-toggle-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: var(--ink-900);
  font-family: var(--font-head);
  font-weight: 650;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.main-nav a:hover, .main-nav button.nav-toggle-sub:hover { background: var(--mist-100); color: var(--ink-950); }
.nav-item-sub { position: relative; }
.nav-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.16s ease; }
.nav-item-sub.open .nav-caret { transform: rotate(225deg) translateY(-1px); }
.nav-sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: 10px;
  list-style: none;
  display: none;
  z-index: 110;
}
.nav-item-sub.open .nav-sub { display: block; }
.nav-sub a { display: block; padding: 10px 14px; font-weight: 600; border-radius: var(--radius-sm); }
.nav-sub a .nav-desc {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.nav-sub a:hover .nav-desc { color: var(--ink-800); }
/* Solid brand CTA in the header. The selector must out-specify `.main-nav a`
   above, which otherwise resets background and colour and leaves the button
   looking like a stray white card on the white header. */
.main-nav a.header-cta,
.main-nav a.btn-primary,
.mobile-nav-ctas a.btn-primary {
  margin-left: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--brand-blue);
  border-radius: 11px;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.94rem;
  box-shadow: 0 10px 24px -14px rgba(36, 188, 236, 0.75);
}
.main-nav a.header-cta:hover,
.main-nav a.btn-primary:hover,
.mobile-nav-ctas a.btn-primary:hover {
  border-color: var(--brand-blue-deep);
  background: var(--brand-blue-deep);
  color: #fff;
  transform: translateY(-1px);
}
.mobile-nav-ctas a.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--line-light);
  color: var(--ink-900);
  border-radius: 11px;
  font-family: var(--font-head);
  font-weight: 700;
}
.mobile-nav-ctas a.btn-secondary:hover { background: var(--mist-100); color: var(--ink-950); }
@media (prefers-reduced-motion: reduce) {
  .main-nav a.header-cta:hover { transform: none; }
}

/* Mobile nav */
.nav-burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--ink-900);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (max-width: 1119px) {
  .nav-burger { display: block; }
  .header-cta { display: none; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line-light);
    box-shadow: var(--shadow-float);
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
  }
  body.nav-open .main-nav { display: block; }
  body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .main-nav > ul { flex-direction: column; align-items: stretch; padding: 12px 16px 20px; gap: 0; }
  .main-nav a, .main-nav button.nav-toggle-sub { width: 100%; justify-content: space-between; padding: 14px 10px; font-size: 1.05rem; min-height: 48px; }
  .nav-sub { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--mist-100); border-radius: 0; margin: 0 0 8px 10px; padding: 0; min-width: 0; }
  .mobile-nav-ctas { display: grid; gap: 10px; padding: 10px 10px 4px; }
  .mobile-nav-ctas .btn { width: 100%; }
}
@media (min-width: 1120px) {
  .mobile-nav-ctas { display: none; }
}


/* ---------- Solutions mega menu ---------- */
.nav-item-mega { position: static; }
.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 1px solid var(--line-faint);
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 3.2vw, 32px) 20px;
}
.nav-mega-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
}
.nav-group-head {
  display: block;
  font-family: var(--font-head);
  font-weight: 750;
  font-size: 0.98rem;
  color: var(--ink-900) !important;
  padding: 0 0 10px !important;
  border-bottom: 2px solid var(--brand-blue);
  margin-bottom: 10px;
  background: none !important;
}
.nav-group-head:hover { color: var(--brand-blue-ink) !important; }
.nav-group ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.nav-group ul a {
  display: block;
  padding: 7px 0 !important;
  font-weight: 500;
  font-size: 0.93rem;
  color: var(--text-muted) !important;
  background: none !important;
}
.nav-group ul a:hover { color: var(--brand-blue-ink) !important; }
.nav-mega-all {
  display: block;
  max-width: var(--container);
  margin: 20px auto 0;
  padding-top: 16px !important;
  border-top: 1px solid var(--line-faint);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand-blue-ink) !important;
  background: none !important;
}
@media (max-width: 1119px) {
  .nav-mega { position: static; padding: 4px 0 8px; border-top: 0; border-radius: 0; box-shadow: none; }
  .nav-mega-grid { grid-template-columns: 1fr; gap: 14px; }
  .nav-group-head { padding: 10px 0 8px !important; }
  .nav-group ul { padding-left: 10px; border-left: 2px solid var(--grey-100); }
  .nav-group ul a { padding: 10px 8px !important; min-height: 44px; }
  .nav-mega-all { margin-top: 12px; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 8.5vw, 124px); }
.section-tight { padding-block: clamp(48px, 6vw, 88px); }
.section-warm { background: var(--ivory-050); }
.section-ivory { background: var(--ivory-100); }
.section-bluegray { background: var(--mist-100); }
.section-dark, .section-navy { background: var(--ink-950); color: var(--text-inverse); }
.section-dark h2, .section-dark h3, .section-navy h2, .section-navy h3 { color: #fff; }
.section-head { max-width: 780px; margin-bottom: clamp(30px, 4vw, 56px); }
.section-head .kicker { display: inline-flex; margin-bottom: 14px; }
.section-head p { color: var(--text-muted); margin-top: 14px; font-size: 1.1rem; max-width: 62ch; }
.section-dark .section-head p, .section-navy .section-head p { color: var(--text-inverse-muted); }
.section-navy .section-head .kicker, .section-dark .section-head .kicker { color: var(--brand-blue-bright); }

/* ---------- Connection-line motif (decorative) ---------- */
.motif-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  overflow: hidden;
}
.motif-lines svg { width: 100%; height: 100%; }

/* ---------- HERO (dark editorial) ---------- */
.hero-dark {
  position: relative;
  background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-900) 58%, var(--ink-800) 120%);
  color: var(--text-inverse);
}
.hero-dark .container { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px);
  min-height: 640px;
}
.hero-eyebrow-dark {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue-bright);
  margin-bottom: 26px;
}
.hero-eyebrow-dark::before { content: ''; width: 7px; height: 7px; margin-top: 0.42em; border-radius: 50%; background: var(--metal); flex-shrink: 0; }
/* AT&T Preferred Dealer badge in the solution hero (sits on the dark panel,
   so it gets its own white plate). */
img.hero-badge {
  display: block;
  width: 150px;
  height: auto;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.hero-dark h1 {
  color: #fff;
  font-size: clamp(2.5rem, 1.5rem + 3.9vw, 4.35rem);
  font-weight: 710;
  letter-spacing: -0.045em;
  line-height: 1.02;
  max-width: 15ch;
}
.hero-dark .hero-lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.24rem);
  line-height: 1.58;
  color: var(--text-inverse-muted);
  margin: 26px 0 34px;
  max-width: 620px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-assure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--text-inverse-muted);
}
.hero-assure svg { width: 15px; height: 15px; color: var(--metal); flex-shrink: 0; }
/* Hero diagnostic panel — the conversion module that replaced the stock
   photograph. Glass-on-navy, never a bright white lead-gen box. */
.hero-audit-panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
  box-shadow: 0 36px 90px -44px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  color: #fff;
  max-width: 540px;
  margin-left: auto;
}
.hero-audit-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.hap-head { padding: 26px 26px 18px; }
.hap-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-blue-bright);
}
.hap-overline::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--metal); flex-shrink: 0; }
.hap-head h2 {
  color: #fff;
  font-size: clamp(1.55rem, 1.3rem + 0.9vw, 2rem);
  font-weight: 680;
  letter-spacing: -0.03em;
  margin-top: 12px;
}
.hap-rows { list-style: none; padding: 0; margin: 0; }
.hap-rows li { border-top: 1px solid rgba(255, 255, 255, 0.11); }
.hap-rows a {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 15px;
  min-height: 88px;
  padding: 15px 26px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 3px 0 0 rgba(36, 188, 236, 0);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.hap-rows a:hover, .hap-rows a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--brand-blue-bright);
}
.hap-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  color: var(--brand-blue-bright);
  flex-shrink: 0;
}
.hap-ic svg { width: 19px; height: 19px; }
.hap-rows .hap-t { display: block; font-family: var(--font-head); font-weight: 680; font-size: 1.04rem; letter-spacing: -0.015em; }
.hap-rows .hap-d { display: block; color: var(--text-inverse-muted); font-size: 0.86rem; margin-top: 2px; line-height: 1.4; }
.hap-rows .hap-a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brand-blue-bright);
}
.hap-arrow { display: inline-block; line-height: 1; transition: transform 0.2s ease; }
.hap-rows a:hover .hap-a, .hap-rows a:focus-visible .hap-a { color: #fff; }
.hap-rows a:hover .hap-arrow, .hap-rows a:focus-visible .hap-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .hap-rows a:hover .hap-arrow, .hap-rows a:focus-visible .hap-arrow { transform: none; }
}
.hap-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(36, 188, 236, 0.16);
  padding: 18px 26px 20px;
}
.hap-foot .hap-q { display: block; color: var(--text-inverse-muted); font-size: 0.88rem; margin-bottom: 7px; }
.hap-foot .link-arrow { color: #fff; font-size: 1rem; }
.hap-foot .link-arrow:hover { color: var(--brand-blue-bright); }
.hap-assure {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: rgba(167, 180, 201, 0.9);
}
.hap-assure svg { width: 14px; height: 14px; color: var(--metal); flex-shrink: 0; }
@media (max-width: 980px) {
  .hero-audit-panel { margin-left: 0; max-width: 560px; }
}
@media (max-width: 420px) {
  .hap-head { padding: 22px 19px 16px; }
  .hap-rows a { padding: 15px 19px; grid-template-columns: 36px 1fr; gap: 12px; }
  .hap-ic { width: 36px; height: 36px; }
  .hap-foot { padding: 16px 19px 18px; }
}
.trust-rail {
  border-top: 1px solid var(--line-dark);
}
.trust-rail ul {
  list-style: none;
  margin: 0;
  padding: 22px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 28px;
}
.trust-rail li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-inverse);
  padding-left: 20px;
  border-left: 1px solid var(--line-dark);
}
.trust-rail li:first-child { border-left: 0; padding-left: 0; }
.trust-rail li svg { width: 17px; height: 17px; color: var(--brand-blue); flex-shrink: 0; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 48px; }
  .hero-media { max-width: 560px; }
  .trust-rail ul { grid-template-columns: 1fr 1fr; }
  .trust-rail li:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .trust-rail ul { grid-template-columns: 1fr; }
  .trust-rail li { border-left: 0; padding-left: 0; }
}

/* ---------- Two pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 2.5vw, 32px);
  position: relative;
}
.pillar-panel {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(30px, 3.6vw, 52px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pillar-telecom {
  background: linear-gradient(150deg, var(--ink-900) 0%, var(--ink-800) 70%, #16407e 130%);
  color: var(--text-inverse);
  box-shadow: var(--shadow-float);
}
.pillar-automation {
  background: var(--ivory-100);
  color: var(--text-main);
  border: 1px solid rgba(14, 14, 16, 0.08);
}
.pillar-num {
  font-family: var(--font-head);
  font-size: clamp(3rem, 4vw, 4.4rem);
  font-weight: 250;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.pillar-telecom .pillar-num { color: rgba(255, 255, 255, 0.28); }
.pillar-automation .pillar-num { color: rgba(14, 14, 16, 0.22); }
.pillar-panel h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; }
.pillar-telecom h3 { color: #fff; }
.pillar-panel .pillar-lede { margin: 14px 0 24px; max-width: 52ch; }
.pillar-telecom .pillar-lede { color: var(--text-inverse-muted); }
.pillar-automation .pillar-lede { color: var(--text-muted); }
.pillar-links { list-style: none; padding: 0; margin: 0 0 30px; }
.pillar-links li { border-top: 1px solid var(--line-dark); }
.pillar-automation .pillar-links li { border-top-color: rgba(14, 14, 16, 0.1); }
.pillar-links li:last-child { border-bottom: 1px solid var(--line-dark); }
.pillar-automation .pillar-links li:last-child { border-bottom-color: rgba(14, 14, 16, 0.1); }
.pillar-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  font-family: var(--font-head);
  font-weight: 650;
  font-size: 1.02rem;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.18s ease, color 0.18s ease;
}
.pillar-telecom .pillar-links a { color: var(--text-inverse); }
.pillar-links a::after { content: '\2192'; opacity: 0.55; transition: transform 0.18s ease, opacity 0.18s ease; }
.pillar-links a:hover { padding-left: 10px; }
.pillar-telecom .pillar-links a:hover { color: #fff; }
.pillar-automation .pillar-links a:hover { color: var(--brand-blue); }
.pillar-links a:hover::after { transform: translateX(4px); opacity: 1; }
.pillar-panel .btn { align-self: flex-start; margin-top: auto; }
.pillars-connector {
  position: absolute;
  top: 50%;
  left: calc(58.333% - 24px);
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, rgba(36, 188, 236, 0.0), var(--brand-blue), rgba(36, 188, 236, 0.0));
  z-index: 2;
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar-panel { min-height: 0; }
  .pillars-connector { display: none; }
}

/* ---------- Bento service grid ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.bento-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.bento-feature { grid-column: span 3; grid-row: span 2; background: var(--ink-900); color: var(--text-inverse); min-height: 460px; }
.bento-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.bento-feature .bento-body { position: relative; margin-top: auto; background: linear-gradient(180deg, rgba(14, 14, 16, 0) 0%, rgba(14, 14, 16, 0.88) 42%); padding-top: 90px; }
.bento-feature h3 { color: #fff; }
.bento-feature p { color: var(--text-inverse-muted); }
.bento-medium { grid-column: span 3; background: var(--white); border: 1px solid var(--line-faint); }
.bento-small { grid-column: span 2; background: var(--ivory-050); border: 1px solid var(--line-faint); }
.bento-audit { background: var(--brand-blue); color: #fff; border: 0; }
.bento-body { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bento-label {
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bento-feature .bento-label { color: var(--brand-blue-bright); }
.bento-tile h3 { font-size: 1.22rem; }
.bento-tile p { font-size: 0.95rem; color: var(--text-muted); }
/* Must follow `.bento-tile p` / `.bento-label` — equal specificity, so source
   order decides. Without this the audit tile renders grey text on cobalt. */
.bento-tile.bento-audit h3,
.bento-tile.bento-audit .bento-label,
.bento-tile.bento-audit .card-more { color: #fff; }
.bento-tile.bento-audit p { color: rgba(255, 255, 255, 0.88); }
.bento-medium .bento-diagram { padding: 18px 26px 0; }
.bento-tile .card-more { margin-top: auto; padding-top: 8px; }
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-feature, .bento-medium, .bento-small { grid-column: span 2; grid-row: auto; }
  .bento-feature { min-height: 380px; }
  .bento-small { grid-column: span 1; }
}
@media (max-width: 620px) {
  .bento-small { grid-column: span 2; }
}

/* Mini diagrams inside tiles */
.mini-diagram { display: flex; align-items: center; gap: 0; }
.mini-diagram .nd {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--brand-blue); background: var(--white); flex-shrink: 0;
}
.mini-diagram .nd.solid { background: var(--brand-blue); }
.mini-diagram .lk { height: 2px; flex: 1; background: linear-gradient(90deg, var(--brand-blue), rgba(36, 188, 236, 0.25)); }

/* ---------- Dark proof section ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.proof-rows { list-style: none; padding: 0; margin: 0; }
.proof-rows li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--line-dark);
}
.proof-rows li:last-child { border-bottom: 1px solid var(--line-dark); }
.proof-rows .pr-ic {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-dark);
  display: grid; place-items: center;
  color: var(--brand-blue);
}
.proof-rows .pr-ic svg { width: 20px; height: 20px; }
.proof-rows h3 { color: #fff; font-size: 1.12rem; margin-bottom: 5px; }
.proof-rows p { color: var(--text-inverse-muted); font-size: 0.96rem; }
.proof-loc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  color: var(--text-inverse);
  font-size: 0.93rem;
  font-weight: 600;
}
.proof-loc svg { width: 16px; height: 16px; color: var(--metal); }
@media (max-width: 880px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* ---------- Workflow visualization ---------- */
.wf-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}
.wf-map {
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 2.6vw, 34px);
}
.wf-stage { margin-bottom: 6px; }
.wf-stage-label {
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.wf-nodes { display: flex; align-items: center; gap: 0; margin-bottom: 16px; flex-wrap: wrap; }
.wf-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mist-100);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-800);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.wf-node svg { width: 15px; height: 15px; color: var(--brand-blue); }
.wf-link { width: 26px; height: 2px; background: linear-gradient(90deg, var(--brand-blue), rgba(36, 188, 236, 0.3)); flex-shrink: 0; }
.wf-stage.active .wf-node { border-color: var(--brand-blue); background: var(--bg-blue-050); }
.wf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.wf-tabs button {
  border: 1.5px solid var(--line-light);
  background: var(--white);
  color: var(--ink-800);
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.wf-tabs button[aria-pressed='true'] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.wf-list { list-style: none; padding: 0; display: grid; gap: 13px; }
.wf-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.99rem; color: var(--ink-700); }
.wf-list li strong { display: inline; }
.wf-list li svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; margin-top: 4px; }
.wf-group[hidden] { display: none; }
@media (max-width: 920px) {
  .wf-grid { grid-template-columns: 1fr; }
}

/* ---------- Process rail ---------- */
.rail { position: relative; counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2.5vw, 34px); }
.rail::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 3%;
  right: 3%;
  height: 2px;
  background: linear-gradient(90deg, rgba(36, 188, 236, 0.1), rgba(36, 188, 236, 0.5) 50%, rgba(36, 188, 236, 0.1));
}
.rail-step { position: relative; padding-top: 56px; }
.rail-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand-blue);
  color: var(--brand-blue);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 750;
  font-size: 0.92rem;
}
.rail-step h3 { font-size: 1.1rem; margin-bottom: 7px; }
.rail-step p { font-size: 0.93rem; color: var(--text-muted); }
@media (max-width: 920px) {
  .rail { grid-template-columns: 1fr; gap: 0; }
  .rail::before { top: 4%; bottom: 4%; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(36, 188, 236, 0.1), rgba(36, 188, 236, 0.5) 50%, rgba(36, 188, 236, 0.1)); }
  .rail-step { padding: 0 0 34px 68px; }
  .rail-step::before { left: 0; top: -2px; }
}

/* ---------- Industry tiles ---------- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.industry-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  text-decoration: none;
  color: #fff;
  background: var(--ink-900);
}
.industry-tile:nth-child(1) { grid-column: span 7; }
.industry-tile:nth-child(2) { grid-column: span 5; }
.industry-tile:nth-child(3) { grid-column: span 5; }
.industry-tile:nth-child(4) { grid-column: span 7; }
.industry-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95) saturate(1.06);
  transition: transform 0.4s ease;
}
.industry-tile:hover img { transform: scale(1.04); }
.industry-tile .it-body {
  position: relative;
  margin-top: auto;
  width: 100%;
  padding: 90px 26px 24px;
  background: linear-gradient(180deg, rgba(14, 14, 16, 0) 0%, rgba(14, 14, 16, 0.68) 28%, rgba(14, 14, 16, 0.96) 100%);
}
.industry-tile h3 { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.35rem; margin-bottom: 6px; }
.industry-tile p { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); color: var(--text-inverse-muted); font-size: 0.94rem; max-width: 52ch; margin-bottom: 10px; }
.industry-tile .link-arrow { color: #fff; font-size: 0.93rem; }
.industry-tile:hover .link-arrow::after { transform: translateX(4px); }
@media (max-width: 880px) {
  .industry-grid { grid-template-columns: 1fr; }
  .industry-tile { grid-column: span 1 !important; min-height: 260px; }
}

/* ---------- Editorial insights ---------- */
.insights-editorial {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.feature-article {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  text-decoration: none;
  color: #fff;
  background: var(--ink-900);
}
.feature-article img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-article .fa-body {
  position: relative;
  margin-top: auto;
  width: 100%;
  padding: 120px 30px 28px;
  background: linear-gradient(180deg, rgba(14, 14, 16, 0) 0%, rgba(14, 14, 16, 0.72) 30%, rgba(14, 14, 16, 0.97) 100%);
}
.feature-article .ac-cat { color: var(--brand-blue-bright); }
.feature-article h3 { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin: 8px 0 10px; }
.feature-article p { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); color: var(--text-inverse-muted); font-size: 0.97rem; max-width: 58ch; }
.stack-articles { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-rows: 1fr 1fr; }
.stack-article {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.stack-article:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.stack-article img { width: 100%; height: 100%; object-fit: cover; }
.stack-article .sa-body { padding: 20px 20px 20px 0; display: flex; flex-direction: column; gap: 7px; }
.stack-article h3 { font-size: 1.05rem; line-height: 1.35; }
.stack-article:hover h3 { color: var(--brand-blue); }
.stack-article p { font-size: 0.88rem; color: var(--text-muted); }
@media (max-width: 920px) {
  .insights-editorial { grid-template-columns: 1fr; }
  .feature-article { min-height: 360px; }
}
@media (max-width: 560px) {
  .stack-article { grid-template-columns: 1fr; }
  .stack-article .sa-body { padding: 18px 20px; }
  .stack-article img { aspect-ratio: 16/9; }
}

/* ---------- Cards (generic, still used on internal pages) ---------- */
.card-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.card {
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  padding: clamp(22px, 2.5vw, 30px);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-soft); }
.card h3 a { color: var(--ink-900); text-decoration: none; }
.card h3 a:hover { color: var(--brand-blue); }
.card p { color: var(--text-muted); font-size: 0.98rem; }
.card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--mist-100);
  color: var(--brand-blue);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.card-icon svg { width: 23px; height: 23px; }
.section-dark .card, .section-navy .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
  box-shadow: none;
}
.section-dark .card h3, .section-navy .card h3,
.section-dark .card h3 a, .section-navy .card h3 a { color: #fff; }
.section-dark .card p, .section-navy .card p { color: var(--text-inverse-muted); }

/* Legacy pillar class (interior pages may reference) */
.pillar {
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-top: 3px solid var(--brand-blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3vw, 36px);
}
.pillar.pillar-amber { border-top-color: var(--metal); }
.pillar ul { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.pillar ul li { padding-left: 26px; position: relative; color: var(--ink-700); }
.pillar ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--success);
  border-bottom: 2.5px solid var(--success);
  transform: rotate(-45deg);
}

/* Steps (legacy grid used on interior pages) */
.steps { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: step; }
.step { position: relative; padding: 24px; background: var(--white); border: 1px solid var(--line-faint); border-radius: var(--radius-md); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.9rem;
  color: var(--brand-blue);
  margin-bottom: 8px;
}
.step h3 { font-size: 1.08rem; }
.step p { font-size: 0.93rem; color: var(--text-muted); margin-top: 6px; }

.check-cols { display: grid; gap: 12px 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; padding: 0; }
.check-cols li { padding-left: 28px; position: relative; }
/* 5 or 6 items would orphan on a 4-column auto-fit row — cap those counts at
   3 columns; 7+ items fill 4 columns cleanly again. */
@media (min-width: 980px) {
  .check-cols:has(> li:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
  .check-cols:has(> li:nth-child(7)) { grid-template-columns: repeat(4, 1fr); }
}
.check-cols li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--success);
  border-bottom: 2.5px solid var(--success);
  transform: rotate(-45deg);
}

/* ---------- Page hero (interior) ---------- */
.page-hero {
  position: relative;
  background: linear-gradient(165deg, var(--ink-950) 0%, var(--ink-900) 75%, var(--ink-800) 130%);
  color: var(--text-inverse);
}
.page-hero .container { padding-block: clamp(40px, 5vw, 72px); position: relative; }
.page-hero h1 { color: #fff; max-width: 22ch; }
.page-hero .page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.page-hero .page-hero-grid img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 11;
}
.page-hero p.intro { font-size: 1.13rem; color: var(--text-inverse-muted); margin-top: 18px; max-width: 60ch; line-height: 1.6; }
.page-hero .hero-ctas { margin-top: 30px; }
.page-hero .hero-reassure { margin-top: 16px; font-size: 0.9rem; color: var(--text-inverse-muted); }
.page-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-blue-bright);
  margin-bottom: 20px;
}
.page-hero .hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--metal); }
.page-hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.page-hero .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.8); color: #fff; }
@media (max-width: 860px) {
  .page-hero .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero .page-hero-grid img { max-height: 320px; }
}

/* Light article header variant */
.page-hero.page-hero-light { background: var(--ivory-050); color: var(--text-main); }
.page-hero-light h1 { color: var(--ink-900); }
.page-hero-light p.intro { color: var(--text-muted); }
.page-hero-light .hero-eyebrow { color: var(--brand-blue); }
.page-hero-light .breadcrumbs a { color: var(--text-muted); }

/* ---------- Breadcrumbs (quiet) ---------- */
.breadcrumbs { font-size: 0.82rem; color: var(--text-inverse-muted); margin-bottom: 22px; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumbs li + li::before { content: '/'; margin: 0 7px; opacity: 0.4; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.page-hero-light .breadcrumbs { color: var(--text-muted); }

/* ---------- Prose ---------- */
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2em; font-size: clamp(1.55rem, 1.3rem + 0.9vw, 2.05rem); }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { display: grid; gap: 0.5em; }
.prose blockquote {
  border-left: 3px solid var(--brand-blue);
  background: var(--ivory-050);
  padding: 16px 22px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-700);
}
.prose img { border-radius: var(--radius-md); }
.table-wrap { overflow-x: auto; margin-top: 1.15em; border: 1px solid var(--line-faint); border-radius: var(--radius-sm); }
/* Comparison tables are wider than a phone screen; without a cue the hidden
   columns read as a broken layout. The bar sticks while the table scrolls. */
@media (max-width: 700px) {
  .table-wrap::before {
    content: 'Swipe sideways to see the full table \2192';
    display: block;
    position: sticky;
    left: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-700);
    background: var(--ivory-050);
    padding: 8px 16px;
    border-bottom: 1px solid var(--line-faint);
  }
}
.prose table, .table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  min-width: 560px;
}
.prose th, .prose td, .table-wrap th, .table-wrap td {
  border-bottom: 1px solid var(--line-faint);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.prose th, .table-wrap th {
  background: var(--ink-950);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 650;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.prose tbody tr:nth-child(even), .table-wrap tbody tr:nth-child(even) { background: var(--ivory-050); }

.answer-box {
  background: var(--ivory-050);
  border: 1px solid rgba(14, 14, 16, 0.08);
  border-left: 3px solid var(--metal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 34px 0;
}
.answer-box p { color: var(--text-main); font-size: 1.04rem; }
.answer-box .answer-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue-deep);
  margin-bottom: 7px;
}

.toc {
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 34px 0;
  font-size: 0.95rem;
  box-shadow: var(--shadow-1);
}
.toc strong { display: block; margin-bottom: 10px; font-family: var(--font-head); font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 5px; }
.toc a { text-decoration: none; color: var(--ink-800); }
.toc a:hover { color: var(--brand-blue); text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 0; max-width: var(--prose); border-top: 1px solid var(--line-light); }
.faq-item { border-bottom: 1px solid var(--line-light); background: transparent; }
.faq-item summary {
  cursor: pointer;
  padding: 20px 8px;
  font-family: var(--font-head);
  font-weight: 680;
  font-size: 1.05rem;
  color: var(--ink-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand-blue);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-a { padding: 0 8px 22px; color: var(--ink-700); max-width: 68ch; }
.faq-item .faq-a > * + * { margin-top: 0.8em; }

/* ---------- CTA band → three-column conversion section ---------- */
.cta-band { background: var(--ink-950); color: var(--text-inverse); }
.cta-band .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(52px, 6vw, 88px);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--text-inverse-muted); margin-top: 12px; max-width: 58ch; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cta-band .container { grid-template-columns: 1fr; }
}

.cta-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cta-col {
  padding: clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 38px);
  border-left: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-col:first-child { border-left: 0; padding-left: 0; }
.cta-col .cc-ic { width: 40px; height: 40px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--brand-blue); }
.cta-col .cc-ic svg { width: 19px; height: 19px; }
.cta-col h3 { color: #fff; font-size: 1.18rem; }
.cta-col p { color: var(--text-inverse-muted); font-size: 0.95rem; }
.cta-col .link-arrow { color: #fff; margin-top: auto; }
.cta-col .link-arrow:hover { color: var(--brand-blue-bright); }
@media (max-width: 860px) {
  .cta-columns { grid-template-columns: 1fr; }
  .cta-col { border-left: 0; border-top: 1px solid var(--line-dark); padding-left: 0; padding-right: 0; }
  .cta-col:first-child { border-top: 0; }
}

/* ---------- Forms ---------- */
.form-panel {
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 3.5vw, 44px);
  max-width: 800px;
}
.form-grid { display: grid; gap: 22px 20px; grid-template-columns: 1fr 1fr; }
.form-grid .form-field-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}
.form-field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 7px; color: var(--ink-900); }
.form-field .field-hint { font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }
.form-field input[type='text'],
.form-field input[type='email'],
.form-field input[type='tel'],
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 15px;
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-main);
  transition: border-color 0.15s ease;
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--brand-blue);
  outline: 2px solid var(--brand-blue);
  outline-offset: 0;
}
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--err-600); }
.field-error { display: none; color: var(--err-600); font-size: 0.87rem; margin-top: 6px; font-weight: 600; }
.form-field.has-error .field-error { display: block; }
.form-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-700); }
.form-consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-blue); }
.form-status { display: none; border-radius: var(--radius-sm); padding: 15px 19px; font-weight: 600; margin-top: 18px; }
.form-status.is-success { display: block; background: var(--bg-blue-050); color: var(--success); border: 1px solid rgba(36, 188, 236, 0.35); }
.form-status.is-error { display: block; background: var(--err-050); color: var(--err-600); border: 1px solid #f3c1bb; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Insights index ---------- */
.insights-toolbar { display: grid; gap: 18px; margin-bottom: clamp(30px, 4vw, 48px); max-width: 760px; }
.search-wrap { position: relative; }
.search-wrap input[type='search'] {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px 12px 50px;
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  background: var(--white);
}
.search-wrap .search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 20px; height: 20px; pointer-events: none; }
.search-suggest {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  list-style: none;
  padding: 6px;
  margin: 0;
  z-index: 60;
  display: none;
  max-height: 340px;
  overflow-y: auto;
}
.search-suggest.open { display: block; }
.search-suggest li { border-radius: var(--radius-sm); }
.search-suggest li a { display: block; padding: 10px 13px; text-decoration: none; color: var(--text-main); }
.search-suggest li.active, .search-suggest li:hover { background: var(--mist-100); }
.search-suggest .suggest-cat { font-size: 0.78rem; color: var(--text-muted); display: block; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chips button {
  border: 1.5px solid var(--line-light);
  background: var(--white);
  color: var(--ink-700);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  min-height: 44px;
}
.filter-chips button[aria-pressed='true'] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }

.cluster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-top: 2px solid var(--ink-950);
  padding-top: 18px;
  margin: clamp(36px, 5vw, 60px) 0 22px;
}
.cluster-head:first-of-type { margin-top: 0; }
.cluster-head h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); }
.cluster-head .cluster-count { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

.article-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* Exactly 4 cards would render 3+1 on wide screens — a lone orphan card.
   A 2×2 grid reads as deliberate instead. */
@media (min-width: 980px) {
  .article-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
/* Any other count that is one past a full row (7, 10, 13, 16) strands the last
   card at the left edge of an otherwise empty row. Pin the grid to three
   columns and centre that card under the row above, the same treatment the
   card grids give a 5th card. */
@media (min-width: 1024px) {
  .article-grid:has(> :nth-child(7):last-child),
  .article-grid:has(> :nth-child(10):last-child),
  .article-grid:has(> :nth-child(13):last-child),
  .article-grid:has(> :nth-child(16):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .article-grid:has(> :nth-child(7):last-child) > :last-child,
  .article-grid:has(> :nth-child(10):last-child) > :last-child,
  .article-grid:has(> :nth-child(13):last-child) > :last-child,
  .article-grid:has(> :nth-child(16):last-child) > :last-child { grid-column: 2 / span 1; }
}
.article-card {
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.article-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.article-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.article-card .ac-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.article-card .ac-cat, .ac-cat {
  font-family: var(--font-head);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue-deep);
}
.article-card h3 { font-size: 1.08rem; line-height: 1.35; }
.article-card h3 a { color: var(--ink-900); text-decoration: none; }
.article-card h3 a:hover { color: var(--brand-blue); }
.article-card p { font-size: 0.92rem; color: var(--text-muted); }
.no-results { background: var(--ivory-050); border: 1px dashed var(--line-light); border-radius: var(--radius-md); padding: 40px; text-align: center; color: var(--ink-700); display: none; }
.no-results.show { display: block; }

/* Article page */
.article-header { max-width: var(--prose); }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-muted); font-size: 0.88rem; margin-top: 16px; }
.article-hero-img { max-width: var(--prose); margin-top: 32px; }
.article-hero-img img { border-radius: var(--radius-lg); width: 100%; box-shadow: var(--shadow-soft); }
.sources-list { font-size: 0.92rem; color: var(--ink-700); }
.sources-list li + li { margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-950); color: var(--text-inverse-muted); font-size: 0.94rem; }
.site-footer a { color: var(--text-inverse-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-main {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(150px, 1fr));
  padding-block: clamp(56px, 6vw, 84px) clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line-dark);
}
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; } }
.footer-brand img { width: 186px; background: var(--ivory-050); padding: 12px 16px; border-radius: var(--radius-sm); }
.footer-brand p { margin-top: 18px; max-width: 36ch; line-height: 1.7; }
.footer-brand .footer-nap { margin-top: 18px; font-style: normal; line-height: 1.9; }
.site-footer h4 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(167, 180, 201, 0.7);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- Misc ---------- */
.eyebrow-note { font-size: 0.9rem; color: var(--text-muted); }
.two-col { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); align-items: start; }
.stat-note {
  background: var(--ivory-050);
  border: 1px solid rgba(14, 14, 16, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: 0.94rem;
  color: var(--ink-700);
}
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span, .pagination button {
  min-width: 44px;
  min-height: 48px;
}
.err-404 { text-align: center; padding-block: clamp(80px, 10vw, 140px); }
.err-404 .err-code { font-family: var(--font-head); font-size: 5.5rem; font-weight: 250; color: var(--brand-blue); line-height: 1; letter-spacing: -0.04em; }

/* ---------- Custom diagrams (used instead of stock photography) ---------- */
.dg {
  margin: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 36px 90px -48px rgba(0, 0, 0, 0.7);
  color: #fff;
}
.dg-title {
  display: block;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue-bright);
  margin-bottom: 20px;
}
.dg-chain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.dg-node { display: flex; align-items: center; gap: 14px; }
.dg-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(36, 188, 236, 0.18);
  display: grid;
  place-items: center;
  color: var(--brand-blue-bright);
  flex-shrink: 0;
}
.dg-ic svg { width: 18px; height: 18px; }
.dg-txt strong { display: block; font-family: var(--font-head); font-weight: 680; font-size: 1rem; color: #fff; }
.dg-txt span { display: block; font-size: 0.85rem; color: var(--text-inverse-muted); margin-top: 2px; }
.dg-link { width: 2px; height: 20px; margin-left: 19px; background: linear-gradient(180deg, rgba(36, 188, 236, 0.7), rgba(36, 188, 236, 0.2)); }
.dg-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.87rem;
  color: var(--text-inverse-muted);
  line-height: 1.6;
}
/* Light-background variant for interior body sections.
   `.dg-light` is added by the build to any diagram rendered inside a content
   band (sectioned.mjs), which is always a light surface — so the rule must not
   be scoped to `.section`, or the diagram keeps its dark-surface white text and
   disappears against the band. */
.section-warm .dg, .section-ivory .dg, .dg.dg-light {
  background: var(--white);
  border-color: var(--line-faint);
  box-shadow: var(--shadow-soft);
  color: var(--text-main);
}
.section-warm .dg-title, .section-ivory .dg-title, .dg.dg-light .dg-title { color: var(--brand-blue); }
.section-warm .dg-ic, .section-ivory .dg-ic, .dg.dg-light .dg-ic { background: var(--mist-100); border-color: var(--line-light); color: var(--brand-blue); }
.section-warm .dg-txt strong, .section-ivory .dg-txt strong, .dg.dg-light .dg-txt strong { color: var(--ink-900); }
.section-warm .dg-txt span, .section-ivory .dg-txt span, .dg.dg-light .dg-txt span { color: var(--text-muted); }
.section-warm .dg-note, .section-ivory .dg-note, .dg.dg-light .dg-note { color: var(--text-muted); border-top-color: var(--line-faint); }

/* Layered service map */
.dg-layers { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dg-layer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}
.dg-layer-lead { background: rgba(36, 188, 236, 0.2); border-color: rgba(36, 188, 236, 0.4); }
.dg-layer-base { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.28); }
.dg-layer-base .dg-ic { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.section-warm .dg-layer, .section-ivory .dg-layer, .dg.dg-light .dg-layer {
  border-color: var(--line-faint);
  background: var(--ivory-050);
}
.section-warm .dg-layer-lead, .dg.dg-light .dg-layer-lead { background: var(--bg-blue-050); border-color: rgba(36, 188, 236, 0.35); }
.section-warm .dg-layer-base, .dg.dg-light .dg-layer-base { background: var(--grey-100); border-color: var(--line-light); }

/* The model sits inside a narrow hero panel, so it only earns three columns
   on a genuinely wide viewport — below that the labels wrap word by word. */
.dg-model-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; }
@media (min-width: 1200px) {
  .dg-model-grid { grid-template-columns: 1fr auto 1fr; gap: 18px; }
}
.dg-pillar { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-md); padding: 18px; }
.dg-pillar-num { font-family: var(--font-head); font-size: 1.6rem; font-weight: 250; color: rgba(255, 255, 255, 0.35); display: block; }
.dg-pillar strong { display: block; font-family: var(--font-head); font-size: 1.05rem; margin: 4px 0 10px; color: #fff; }
.dg-pillar ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 0.87rem; color: var(--text-inverse-muted); }
.dg-core { text-align: center; padding: 0 6px; }
.dg-core-ring {
  width: 54px; height: 54px; margin: 0 auto 10px;
  border-radius: 50%; border: 1px solid rgba(36, 188, 236, 0.5);
  background: rgba(36, 188, 236, 0.22);
  display: grid; place-items: center; color: var(--brand-blue-bright);
}
.dg-core-ring svg { width: 22px; height: 22px; }
.dg-core strong { display: block; font-family: var(--font-head); font-size: 0.98rem; color: #fff; }
.dg-core span { display: block; font-size: 0.8rem; color: var(--text-inverse-muted); margin-top: 4px; }
.dg-core { padding: 6px 0; }
@media (min-width: 1200px) {
  .dg-core { padding: 0 6px; }
  .dg-core span { max-width: 20ch; margin-inline: auto; }
}

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Solution page (client flow) ---------- */
.sol-hero .container { padding-block: clamp(40px, 5vw, 76px); }
.sol-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.sol-hero-grid h1 { color: #fff; max-width: 18ch; }
.sol-hero-tags { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: center; }
.sol-hero-tags li {
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  padding: 14px 18px;
  font-family: var(--font-head);
  font-weight: 650;
  font-size: 0.97rem;
  color: var(--text-inverse);
}
@media (max-width: 880px) {
  .sol-hero-grid { grid-template-columns: 1fr; }
  .sol-hero-tags { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sol-hero-tags { grid-template-columns: 1fr; }
}

.problem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.problem-list li {
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid var(--line-faint);
  position: relative;
  color: var(--ink-700);
}
.problem-list li:first-child { border-top: 1px solid var(--line-faint); }
.problem-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 22px;
  width: 12px;
  height: 2px;
  background: var(--brand-blue);
}
.problem-close {
  margin-top: clamp(24px, 3vw, 40px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.rail-4 { grid-template-columns: repeat(4, 1fr); }
.rail-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 920px) {
  .rail-4, .rail-5 { grid-template-columns: 1fr; }
}

/* ---------- Homepage: four-solution model visual ---------- */
.model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  position: relative;
}
.model-node {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.045);
  padding: clamp(18px, 2vw, 26px);
  text-align: center;
  text-decoration: none;
  color: var(--text-inverse);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.model-node:hover { background: rgba(36, 188, 236, 0.14); border-color: var(--brand-blue); transform: translateY(-2px); color: #fff; }
.model-node .mn-ic {
  width: 46px; height: 46px; margin: 0 auto 12px;
  border-radius: 12px; border: 1px solid var(--line-dark);
  display: grid; place-items: center; color: var(--brand-blue);
}
.model-node .mn-ic svg { width: 22px; height: 22px; }
.model-node .mn-verb {
  display: block;
  font-family: var(--font-head);
  font-size: 0.74rem; font-weight: 750;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 6px;
}
.model-node strong { display: block; font-family: var(--font-head); font-size: 1.02rem; color: #fff; }
.model-node span.mn-sub { display: block; font-size: 0.85rem; color: var(--text-inverse-muted); margin-top: 5px; }
@media (max-width: 900px) { .model-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .model-grid { grid-template-columns: 1fr; } }

/* Four solution cards on light ground */
.sol-card {
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-top: 3px solid var(--brand-blue);
  border-radius: var(--radius-md);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sol-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.sol-card h3 { font-size: 1.2rem; }
.sol-card h3 a { color: var(--ink-900); text-decoration: none; }
.sol-card h3 a:hover { color: var(--brand-blue-ink); }
.sol-card > p { color: var(--text-muted); font-size: 0.97rem; }
.sol-card ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 7px; }
.sol-card ul li { padding-left: 22px; position: relative; font-size: 0.92rem; color: var(--ink-700); }
.sol-card ul li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--brand-blue); border-bottom: 2px solid var(--brand-blue);
  transform: rotate(-45deg);
}
.sol-card .card-more { margin-top: auto; padding-top: 10px; }

/* Interest checkbox group ("I'm interested in") */
.interest-set { border: 0; padding: 0; margin: 0; }
.interest-set legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; color: var(--ink-900); padding: 0; }
.interest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.interest-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.94rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.interest-opt:hover { border-color: var(--brand-blue); background: var(--bg-blue-050); }
.interest-opt input { width: 19px; height: 19px; flex-shrink: 0; accent-color: var(--brand-blue-ink); }
.interest-opt:has(input:checked) { border-color: var(--brand-blue-ink); background: var(--bg-blue-050); }

/* Four-solution model diagram */
.dg-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-quad-cell {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.dg-quad-cell:hover { background: rgba(36, 188, 236, 0.14); border-color: var(--brand-blue); }
.dg-quad-verb {
  display: block;
  font-family: var(--font-head);
  font-size: 0.7rem; font-weight: 750;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 5px;
}
.dg-quad-cell strong { display: block; font-family: var(--font-head); font-size: 0.98rem; color: #fff; }
.dg-quad-cell span:last-child { display: block; font-size: 0.82rem; color: var(--text-inverse-muted); margin-top: 3px; }
.dg-core-inline { margin-top: 14px; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.section-warm .dg-quad-cell, .dg.dg-light .dg-quad-cell { border-color: var(--line-faint); background: var(--grey-050); }
.section-warm .dg-quad-cell strong, .dg.dg-light .dg-quad-cell strong { color: var(--ink-900); }
@media (max-width: 520px) { .dg-quad { grid-template-columns: 1fr; } }

/* ---------- Content bands (markdown pages) ----------
   Each `##` section is its own surface with a numbered eyebrow, so a service
   page reads as designed sections rather than one column of text on white. */
.content-band { padding-block: clamp(48px, 5.5vw, 88px); background: var(--white); }
.content-band-alt { background: var(--grey-050); }
.content-band-lead { padding-block: clamp(40px, 4.5vw, 64px) clamp(24px, 3vw, 40px); }
.content-band-lead .prose > p:first-child {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink-700);
}
.content-band-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 18px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-faint);
  max-width: 900px;
}
.cb-num {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--brand-blue-ink);
  padding: 5px 11px;
  border: 1px solid rgba(36, 188, 236, 0.35);
  border-radius: 999px;
  background: var(--bg-blue-050);
  white-space: nowrap;
}
.content-band-head h2 { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); }
.content-band .prose { max-width: 74ch; }
.content-band .prose h3 { margin-top: 1.6em; }
.content-band .prose > *:first-child { margin-top: 0; }

/* Bold-led bullet lists become cards */
.content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin: clamp(22px, 2.6vw, 32px) 0;
}
.content-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  padding: 24px 24px 26px;
  box-shadow: var(--shadow-1);
}
.content-band-alt .content-card { background: var(--white); }
.content-card .cc-num {
  display: block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  color: var(--brand-blue);
  margin-bottom: 10px;
}
.content-card h3 { font-size: 1.08rem; margin: 0 0 8px; letter-spacing: -0.015em; }
.content-card p { color: var(--text-muted); font-size: 0.96rem; margin: 0; }
.content-card a { color: var(--brand-blue-ink); }

/* Short plain lists become a compact checked grid */
.content-checks { margin: clamp(20px, 2.4vw, 28px) 0; }
.content-checks li { color: var(--ink-700); }

/* Tables break out of the prose column inside a band */
.content-band .table-wrap { margin: clamp(22px, 2.6vw, 32px) 0; max-width: 100%; }

/* Dark sections: card icons must not become white squares */
.section-dark .card .card-icon,
.section-navy .card .card-icon,
.section-dark .card-icon {
  background: rgba(36, 188, 236, 0.16);
  color: var(--brand-blue);
  border: 1px solid var(--line-dark);
}

/* Footer logo: reversed lockup on the dark surface, no white plate */
.footer-brand img {
  width: 176px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* ---------- Stat band (client-supplied figures) ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.section-dark .stat-band { border-color: var(--line-dark); }
.stat-item {
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2.4vw, 32px);
  border-left: 1px solid var(--line-light);
}
.section-dark .stat-item { border-left-color: var(--line-dark); }
.stat-item:first-child { border-left: 0; padding-left: 0; }
.stat-item dt {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brand-blue-ink);
}
.section-dark .stat-item dt { color: var(--brand-blue); }
.stat-item dd {
  margin: 12px 0 0;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 24ch;
}
.section-dark .stat-item dd { color: var(--text-inverse-muted); }
@media (max-width: 860px) {
  .stat-item { border-left: 0; border-top: 1px solid var(--line-light); padding-left: 0; }
  .section-dark .stat-item { border-top-color: var(--line-dark); }
  .stat-item:first-child { border-top: 0; }
}
/* Standing attribution under every stat band — the figures are ranges from the
   client brief, so the band never presents them as measured outcomes. It reuses
   the shared `.stat-note` box (see Misc) and only needs the spacing and a
   dark-surface fallback. */
.stat-band + .stat-note { margin-top: 24px; max-width: 82ch; }
.section-dark .stat-note {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-dark);
  color: var(--text-inverse-muted);
}

/* ---------- Icon beside the heading, not floating above it ----------
   The boxed badge read as a chip stuck on top of a half-empty card. Setting
   the icon in the first column ties it to the title and tightens the card.
   Applied only where an icon exists, so icon-less cards keep a single column. */
.card:has(.card-icon) {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
}
.card:has(.card-icon) > .card-icon { grid-column: 1; grid-row: 1; }
.card:has(.card-icon) > h3 { grid-column: 2; grid-row: 1; }
.card:has(.card-icon) > *:not(.card-icon):not(h3) { grid-column: 2; }

.card-icon {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--brand-blue-ink);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.card-icon svg { width: 26px; height: 26px; stroke-width: 1.9; }
.section-dark .card .card-icon,
.section-navy .card .card-icon,
.section-dark .card-icon {
  background: none;
  border: 0;
  color: var(--brand-blue);
}
.card:has(.card-icon) > h3 { align-self: center; min-height: 30px; display: flex; align-items: center; }

/* Hero model nodes: same treatment — icon beside the label, left aligned. */
.model-node { text-align: left; }
.model-node .mn-ic {
  width: 28px; height: 28px; margin: 0 0 12px;
  border: 0; background: none; border-radius: 0;
  color: var(--brand-blue);
  display: flex; align-items: center; justify-content: flex-start;
}
.model-node .mn-ic svg { width: 26px; height: 26px; stroke-width: 1.9; }

/* ---------- Grid balance: never strand a lone card on its own row ----------
   auto-fit packs as many columns as will fit, which leaves 5 cards as 4+1 and
   7 as 4+3-with-a-gap. Choosing the column count from the item count gives
   even rows: 4→2+2, 5→3+2, 6→3+3, 7→4+3, 8→4+4. */
@media (min-width: 1024px) {
  .content-cards:has(> :nth-child(2):last-child),
  .card-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .content-cards:has(> :nth-child(3):last-child),
  .card-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .content-cards:has(> :nth-child(4):last-child),
  .card-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .content-cards:has(> :nth-child(5):last-child),
  .content-cards:has(> :nth-child(6):last-child),
  .card-grid:has(> :nth-child(5):last-child),
  .card-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .content-cards:has(> :nth-child(7):last-child),
  .content-cards:has(> :nth-child(8):last-child),
  .card-grid:has(> :nth-child(7):last-child),
  .card-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* A 5th or 8th card centres itself rather than hugging the left edge. */
  .content-cards:has(> :nth-child(5):last-child) > :last-child,
  .card-grid:has(> :nth-child(5):last-child) > :last-child { grid-column: 2 / span 1; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .content-cards, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-cards > :last-child:nth-child(odd),
  .card-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .content-cards, .card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Icon and heading sit on the same optical baseline in every card */
.card:has(.card-icon) > .card-icon,
.card:has(.card-icon) > h3 { min-height: 30px; align-self: start; }
.card:has(.card-icon) > h3 { display: flex; align-items: center; margin: 0; }

/* ---------- Cross-solution ladder ---------- */
.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: rung; }
.ladder-step a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  color: var(--text-inverse);
  transition: background-color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}
.ladder-step a::before {
  counter-increment: rung;
  content: counter(rung, decimal-leading-zero);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-blue);
  flex-shrink: 0;
}
.ladder-step .ls-txt {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px 18px;
  flex-wrap: wrap;
  min-width: 0;
}
.ladder-step a::after {
  content: '\2192';
  color: var(--brand-blue);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ladder-step a:hover { background: rgba(36, 188, 236, 0.12); border-color: var(--brand-blue); padding-left: 28px; }
.ladder-step a:hover::after { transform: translateX(4px); }
.ladder-step strong { font-family: var(--font-head); font-weight: 650; font-size: 1.05rem; color: #fff; }
.ladder-step .ls-txt > span { font-size: 0.92rem; color: var(--text-inverse-muted); }
@media (max-width: 620px) {
  .ladder-step a { gap: 12px; padding: 15px 16px; }
  .ladder-step .ls-txt { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ladder-step a::after { display: none; }
}

/* =====================================================================
   Round 5 — visual structure per the client's tear sheet: a green
   secondary accent, navy banner bands, consistent bold key statements,
   section colour rotation, the customer-journey diagram and step ladders.
   Concatenated after main.css by the build.
   ===================================================================== */
:root {
  --accent-green: #22a55b;
  --accent-green-ink: #15803d;
  --accent-green-050: #e9f8ef;
  --navy-deep: #14293a;
  --success: var(--accent-green-ink);
}

/* Section surfaces rotate white → grey → accent */
.content-band-accent {
  background: linear-gradient(180deg, var(--bg-blue-050) 0, var(--white) 320px);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand-blue) 0%, var(--accent-green) 100%) 1;
}
/* The section number is a neutral index, so it looks the same in every band.
   Filling it on the accent band made "03" read as a stuck active step next to
   four pale outlines — and white on the client cyan is only 2.2:1 besides. The
   accent band is already distinguished by its tint and gradient rule. */
.content-band-accent .cb-num, .content-band-alt .cb-num { background: var(--white); }

/* Key statement — the bold takeaway under every section */
.key-statement {
  font-family: var(--font-head);
  font-weight: 650;
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.45;
  color: var(--ink-900);
  margin: 1.5em 0 0.4em;
  padding: 14px 0 14px 20px;
  border-left: 4px solid var(--brand-blue);
  max-width: 62ch;
}
.key-statement strong { font-weight: inherit; }
.content-band-alt .key-statement { border-left-color: var(--accent-green); }

/* Figures and photographs inside a band */
.band-figure { margin: clamp(22px, 2.6vw, 34px) 0; }
.band-photo { margin: clamp(22px, 2.6vw, 34px) 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.band-photo img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }

/* Step ladder (::steps + ordered list) */
.step-ladder { list-style: none; padding: 0; margin: clamp(22px, 2.6vw, 32px) 0; display: grid; gap: 0; max-width: 860px; }
.step-rung { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 18px 0 22px; }
.step-rung + .step-rung { border-top: 1px dashed var(--line-light); }
.step-rung::before { content: ''; position: absolute; left: 23px; top: 62px; bottom: -4px; width: 2px; background: linear-gradient(180deg, var(--brand-blue), var(--accent-green)); opacity: 0.35; }
.step-rung:last-child::before { display: none; }
.sr-num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-blue); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; position: relative; z-index: 1; }
.step-rung:nth-child(n+4) .sr-num { background: var(--accent-green-ink); }
.step-rung h3 { margin: 8px 0 6px; font-size: 1.15rem; }
.step-rung p { margin: 0; color: var(--ink-700); }

/* AT&T partner banner */
.att-banner { background: var(--navy-deep); color: var(--text-inverse); padding-block: clamp(44px, 5vw, 72px); position: relative; overflow: hidden; }
.att-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 50%, rgba(52, 140, 164, 0.22), transparent 70%); pointer-events: none; }
.att-banner-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; position: relative; }
.att-banner-eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-blue-bright); margin-bottom: 12px; }
.att-banner h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem); margin-bottom: 12px; }
.att-banner p { color: var(--text-inverse-muted); max-width: 58ch; font-size: 1.02rem; }
.att-banner-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.att-banner-list li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; color: #fff; }
.att-banner-list svg { width: 18px; height: 18px; color: var(--brand-blue-bright); }
.att-banner-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); display: grid; justify-items: center; gap: 22px; text-align: center; box-shadow: var(--shadow-float); }
.att-banner-card img { width: 200px; height: auto; }
@media (max-width: 860px) {
  .att-banner-grid { grid-template-columns: 1fr; }
  .att-banner-card { justify-items: start; text-align: left; }
}

/* Customer journey diagram */
.dg-journey { margin: 0; }
.journey { list-style: none; padding: 0; margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.journey-step { flex: 1 1 0; display: grid; justify-items: center; text-align: center; gap: 8px; min-width: 0; }
.js-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--brand-blue) calc(100% - var(--i) * 20%), var(--accent-green)); box-shadow: 0 10px 24px -12px rgba(14, 14, 16, 0.45); }
.js-ic svg { width: 28px; height: 28px; }
.journey-step strong { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink-900); margin-top: 4px; }
.js-sub { font-size: 0.84rem; color: var(--text-muted); line-height: 1.45; max-width: 18ch; }
.journey-arrow { flex: 0 0 26px; height: 64px; display: grid; place-items: center; }
.journey-arrow::before { content: '\2192'; font-size: 1.3rem; color: var(--brand-blue); opacity: 0.55; }
@media (max-width: 860px) {
  .journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 10px; }
  .journey-arrow { display: none; }
  .js-ic { width: 56px; height: 56px; }
}
@media (max-width: 420px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
}
.journey-band { padding-block: clamp(48px, 5.5vw, 84px); background: var(--white); }
.journey-band .section-head { text-align: center; margin-inline: auto; max-width: 720px; }
.journey-band .journey-note { text-align: center; margin: 30px auto 0; max-width: 60ch; font-family: var(--font-head); font-weight: 650; font-size: 1.08rem; color: var(--ink-900); }

/* Staggered reveal for grids */
.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
.content-card:nth-child(2), .step-rung:nth-child(2) { --i: 1; }
.content-card:nth-child(3), .step-rung:nth-child(3) { --i: 2; }
.content-card:nth-child(4), .step-rung:nth-child(4) { --i: 3; }
.content-card:nth-child(5), .step-rung:nth-child(5) { --i: 4; }
.content-card:nth-child(6), .step-rung:nth-child(6) { --i: 5; }

/* Hero growth graphic (homepage) */
.hero-growth { position: absolute; right: max(16px, calc((100% - 1216px) / 2)); top: 100px; height: 540px; width: min(36vw, 500px); pointer-events: none; opacity: 0.95; }
.hero-growth svg { width: 100%; height: 100%; }
.hero-growth .hg-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: hg-draw 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s forwards; }
.hero-growth .hg-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: hg-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.hero-growth .hg-bar:nth-child(2) { animation-delay: 0.15s; }
.hero-growth .hg-bar:nth-child(3) { animation-delay: 0.3s; }
.hero-growth .hg-bar:nth-child(4) { animation-delay: 0.45s; }
.hero-growth .hg-bar:nth-child(5) { animation-delay: 0.6s; }
.hero-growth .hg-bar:nth-child(6) { animation-delay: 0.75s; }
.hero-growth .hg-dot { opacity: 0; animation: hg-pop 0.5s ease 2.4s forwards; }
@keyframes hg-draw { to { stroke-dashoffset: 0; } }
@keyframes hg-rise { to { transform: scaleY(1); } }
@keyframes hg-pop { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-growth .hg-line { stroke-dashoffset: 0; animation: none; }
  .hero-growth .hg-bar { transform: none; animation: none; }
  .hero-growth .hg-dot { opacity: 1; animation: none; }
}
@media (max-width: 1199px) { .hero-growth { display: none; } }

/* Telecom hero: the AT&T badge sits in the right-hand column, above the tags */
.sol-hero-aside { display: grid; gap: 18px; align-content: start; }
.hero-badge-wrap { display: flex; justify-content: flex-end; }
img.hero-badge { margin: 0; }
@media (max-width: 980px) { .hero-badge-wrap { justify-content: flex-start; } }

/* Utility bar: under 400px the e-mail wraps the bar to two lines — keep the
   phone (tap target) and drop the e-mail, which is repeated in the footer. */
@media (max-width: 400px) {
  .utility-bar .u-contact a[data-email] { display: none; }
}

/* Solution-page closing statements share the key-statement treatment so the
   bold takeaway looks the same on every page type. */
.problem-close { padding: 14px 0 14px 20px; border-left: 4px solid var(--brand-blue); font-weight: 650; font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); max-width: 62ch; }
.section-dark .problem-close, .hero-dark .problem-close { border-left-color: var(--brand-blue-bright); }

/* Solution hero: the right column lines up with the title, not the vertical centre */
.sol-hero-grid { align-items: start; }
.sol-hero-aside { margin-top: clamp(24px, 4vw, 64px); }
/* Process rail: the connector stops at the last node instead of running to the edge */
.rail::before { left: 21px; right: calc(20% - 21px); }
@media (max-width: 920px) { .rail::before { right: auto; } }

/* Stacked logo (client signature version): header sizes by height */
@media (max-width: 1119px) { .logo-link img { height: 74px; } }
@media (max-width: 640px) { .logo-link img { height: 62px; } }

/* Header grows with the stacked logo: 12px breathing room above and below */
.site-header .container { min-height: 0; padding-block: 12px; }

/* =====================================================================
   Round 6 — client design notes (24 Aug): brand cyan from her logo,
   bold in-text links instead of blue underlines, smooth step gradient,
   hero link cards, coloured problem rows, lighter "why" band, CTA banner.
   ===================================================================== */

/* In-text links: bold, no underline (client: "make them bold instead of the
   traditional blue and underlined — this is throughout the website") */
main .prose p a:not(.btn), main .prose li a:not(.btn),
main .content-band p a:not(.btn), main .content-band li a:not(.btn),
main .stat-note a:not(.btn), main .key-statement a:not(.btn),
main .faq-a a:not(.btn), main .section p a:not(.btn):not(.card-more) {
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--brand-blue);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
main .prose p a:not(.btn):hover, main .prose li a:not(.btn):hover,
main .content-band p a:not(.btn):hover, main .content-band li a:not(.btn):hover,
main .stat-note a:hover, main .key-statement a:hover, main .faq-a a:hover {
  color: var(--brand-blue-ink);
  border-bottom-color: var(--brand-blue-ink);
}
.section-dark main p a:not(.btn), .hero-dark p a:not(.btn),
.att-banner p a:not(.btn), .pb-copy p a:not(.btn), .proof-rows p a:not(.btn) { color: #fff; border-bottom-color: var(--brand-blue-bright); }

/* Step ladder: one smooth cyan → green progression across the rungs
   (client: the hard light-blue-to-green jump "is not nice") */
.step-rung:nth-child(1) .sr-num { background: #348CA4; }
.step-rung:nth-child(2) .sr-num { background: #1fb4c9; }
.step-rung:nth-child(3) .sr-num { background: #1aac9f; }
.step-rung:nth-child(4) .sr-num { background: #1da77c; }
.step-rung:nth-child(5) .sr-num { background: #22a55b; }
.step-rung:nth-child(6) .sr-num { background: #1f9450; }
.step-rung:nth-child(n+7) .sr-num { background: #1c8446; }

/* Hero side links → icon cards (client slide 3: "boxes with icons, remove the
   underlines but keep them linked, maybe add some animation") */
.sol-hero-tags { display: grid; gap: 12px; }
.tag-card { list-style: none; }
.tag-card > a, .tag-card.tag-plain {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 650;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.22s ease, border-color 0.22s ease;
}
.tag-card > a:hover { transform: translateX(6px); background: rgba(52, 140, 164, 0.14); border-color: var(--brand-blue); color: #fff; }
.tc-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(52, 140, 164, 0.16); color: var(--brand-blue-bright); }
.tc-ic svg { width: 19px; height: 19px; }
.tc-label { flex: 1; font-size: 0.98rem; }
.tc-arrow { opacity: 0; transform: translateX(-6px); transition: opacity 0.22s ease, transform 0.22s ease; color: var(--brand-blue-bright); }
.tag-card > a:hover .tc-arrow { opacity: 1; transform: none; }

/* Problem points → numbered cards with colour (client slide 4) */
.problem-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.problem-cards li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  padding: 18px 20px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(52, 140, 164, 0.07), rgba(34, 165, 91, 0.05));
  border: 1px solid var(--line-faint);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.problem-cards li:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pc-num {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: #fff;
  background: color-mix(in srgb, var(--brand-blue) calc(100% - var(--i) * 16%), var(--accent-green));
}
.problem-cards h3 { margin: 2px 0 4px; font-size: 1.04rem; }
.problem-cards p { margin: 0; color: var(--ink-700); font-size: 0.97rem; }

/* "Why" band on a light tint with a capability chart (client slide 5) */
.section-tint { background: linear-gradient(180deg, var(--bg-blue-050), var(--white) 70%); }
.section-tint .proof-rows li { border-color: var(--line-faint); }
.section-tint .proof-rows h3 { color: var(--ink-900); }
.section-tint .proof-rows p { color: var(--ink-700); }
.section-tint .pr-ic { background: rgba(52, 140, 164, 0.12); color: var(--brand-blue-ink); border: 1px solid rgba(52, 140, 164, 0.28); }
.why-chart { margin: 28px 0 4px; display: grid; gap: 14px; max-width: 460px; }
.wc-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: center; font-size: 0.92rem; }
.wc-label { color: var(--ink-700); font-weight: 600; }
.wc-track { height: 10px; border-radius: 999px; background: rgba(14, 14, 16, 0.07); overflow: hidden; }
.wc-fill {
  display: block; height: 100%; width: var(--w); border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--accent-green));
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 120ms);
}
.why-chart.in .wc-fill, .no-js .wc-fill { transform: scaleX(1); }
.wc-val { font-family: var(--font-head); font-weight: 700; color: var(--brand-blue-ink); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .wc-fill { transform: scaleX(1); transition: none; } }

/* Proof note → CTA banner with media (client slide 6: "make this like a banner") */
.proof-banner {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(24px, 3vw, 48px);
  background: linear-gradient(120deg, var(--navy-deep), #123a5c);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(28px, 3.2vw, 44px);
}
.pb-copy h3 { color: #fff; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); margin-bottom: 12px; }
.pb-copy p { color: rgba(255, 255, 255, 0.82); margin-bottom: 22px; max-width: 52ch; }
.pb-copy p a { color: #fff; border-bottom-color: var(--brand-blue-bright); }
.pb-media img { display: block; width: 100%; height: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-md); }
.pb-media-chart .dg { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
@media (max-width: 860px) { .proof-banner { grid-template-columns: 1fr; } .pb-media-chart { display: none; } }
.wc-cap { font-family: var(--font-head); font-weight: 650; font-size: 0.86rem; letter-spacing: 0.02em; color: var(--text-muted); margin-bottom: 4px; }
/* The old bordered <li> would double up with the new card inside it */
.sol-hero-tags li.tag-card { border: 0; background: none; padding: 0; }
/* Cards and dark panels keep the bold treatment but invert the colour */
.pb-copy p a:not(.btn), .section-dark p a:not(.btn), .att-banner p a:not(.btn) { color: #fff; border-bottom-color: var(--brand-blue-bright); font-weight: 700; text-decoration: none; }
.content-card p a:not(.btn), .card p a:not(.btn) { font-weight: 700; text-decoration: none; color: var(--ink-900); border-bottom: 2px solid var(--brand-blue); }

/* ---------------------------------------------------------------------
   Accessibility of the client's cyan. #348CA4 is her logo colour and is
   perfect for graphics, icons and anything on a dark surface, but it only
   reaches 2.2:1 against white — far below AA — so TEXT on light surfaces
   uses the darker cyan, and the primary button pairs cyan with near-black
   (7.3:1), which is exactly the logo's own colour pair.
   --------------------------------------------------------------------- */
a { color: var(--brand-blue-ink); }
.kicker, .hero-eyebrow, .cb-num, .cc-num, .card-more, .ac-cat,
.page-hero-light .hero-eyebrow, .toc a:hover, .card h3 a:hover,
.stack-article:hover h3, .trust-rail li svg, .cta-col .cc-ic,
.wf-node svg, .content-card .cc-num, .section-tint .kicker { color: var(--brand-blue-ink); }
.card-icon, .pr-ic { color: var(--brand-blue-ink); }

.btn-primary {
  background: var(--brand-blue-ink);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 26px -14px rgba(52, 140, 164, 0.6);
}
.btn-primary:hover { background: var(--brand-blue-deep); color: #fff; }
/* On dark panels the same button keeps its punch */
.hero-dark .btn-primary, .section-dark .btn-primary, .cta-band .btn-primary,
.att-banner .btn-primary, .pb-copy .btn-primary { background: var(--brand-blue); color: #fff; }

/* ---------------------------------------------------------------------
   Hero solutions panel — the client called the plain underlined link list
   "like Wikipedia text". It is now one panel of icon rows that lift and
   glow on hover, with a labelled header rule.
   --------------------------------------------------------------------- */
.sol-hero-aside { position: relative; }
.sol-hero-tags {
  position: relative;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 90px -55px rgba(0, 0, 0, 0.9);
  gap: 8px;
}
.sol-hero-tags::before {
  content: 'What we handle';
  display: block;
  font-family: var(--font-head); font-weight: 750;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-blue-bright);
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sol-hero-tags li.tag-card { border: 0; background: none; padding: 0; }
.tag-card > a, .tag-card.tag-plain {
  border: 1px solid transparent;
  background: transparent;
  padding: 13px 14px;
  color: #fff;
}
.tag-card > a { position: relative; }
.tag-card > a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.tag-card:last-child > a::after { display: none; }
.tag-card > a:hover {
  transform: none;
  background: rgba(52, 140, 164, 0.12);
  border-color: rgba(52, 140, 164, 0.4);
  box-shadow: 0 0 0 1px rgba(52, 140, 164, 0.16), 0 14px 30px -20px rgba(52, 140, 164, 0.8);
}
.tag-card > a .tc-label { color: #fff; font-weight: 650; border: 0; }
.tag-card > a:hover .tc-ic { background: var(--brand-blue); color: var(--ink-950); }
.tc-ic { transition: background-color 0.2s ease, color 0.2s ease; }

/* Breadcrumbs must not inherit the bold in-text link treatment */
.breadcrumbs a { font-weight: 500; border-bottom: 0; color: var(--text-inverse-muted); }
.page-hero-light .breadcrumbs a, .content-band .breadcrumbs a { color: var(--text-muted); }

/* ---------------------------------------------------------------------
   "One partner, four solutions" diagram — the client likes the block but
   asked for it to look better: coloured verbs, lifting cells and a centre
   node that actually reads as the hub.
   --------------------------------------------------------------------- */
.dg-quad { gap: 12px; }
.dg-quad-cell {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  padding: 16px 18px;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.dg-quad-cell::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--brand-blue), var(--accent-green));
  opacity: 0.85;
}
.dg-quad-cell:nth-child(2)::before { background: linear-gradient(180deg, #348CA4, #1aac9f); }
.dg-quad-cell:nth-child(3)::before { background: linear-gradient(180deg, #1aac9f, #1da77c); }
.dg-quad-cell:nth-child(4)::before { background: linear-gradient(180deg, #1da77c, #22a55b); }
.dg-quad-cell:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.9); }
.dg-quad-verb { color: var(--brand-blue-bright); }
.dg-quad-cell:nth-child(4) .dg-quad-verb { color: #4ade80; }

/* The inline hub spans the whole figure, so it does not inherit the 20ch cap
   the three-column model layout needs — that broke "Assess → identify →
   implement → optimize" across two ragged lines. */
.dg-core-inline { position: relative; padding-top: 22px; }
.dg-core-inline span { max-width: none; }
.dg-core-ring {
  width: 62px; height: 62px;
  border: 0;
  background: linear-gradient(140deg, var(--brand-blue), var(--accent-green));
  color: var(--ink-950);
  box-shadow: 0 0 0 6px rgba(52, 140, 164, 0.12), 0 18px 36px -18px rgba(52, 140, 164, 0.75);
}
.dg-core-ring svg { width: 26px; height: 26px; stroke-width: 2.2; }
.dg-core strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.dg-core span { color: rgba(255, 255, 255, 0.72); }
.dg-model .dg-note { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 16px; margin-top: 18px; }

/* The same diagram on a light content band. Without these the cell titles, the
   hub label and its caption are white-on-white — the block rendered as four
   coloured bars, a gap, and an unattached circle. */
.dg.dg-light .dg-quad-cell { background: var(--grey-050); }
.dg.dg-light .dg-quad-cell strong { color: var(--ink-900); }
.dg.dg-light .dg-quad-cell span:last-child { color: var(--text-muted); }
.dg.dg-light .dg-quad-verb { color: var(--brand-blue-ink); }
.dg.dg-light .dg-quad-cell:nth-child(4) .dg-quad-verb { color: var(--accent-green-ink); }
.dg.dg-light .dg-quad-cell:hover { background: var(--bg-blue-050); box-shadow: 0 20px 40px -26px rgba(10, 29, 55, 0.35); }
.dg.dg-light .dg-core-ring { color: #fff; box-shadow: 0 0 0 6px rgba(52, 140, 164, 0.14), 0 18px 36px -20px rgba(52, 140, 164, 0.6); }
.dg.dg-light .dg-core strong { color: var(--ink-900); }
.dg.dg-light .dg-core span { color: var(--text-muted); }
.dg.dg-light .dg-core-inline { border-top-color: var(--line-faint); }
.dg.dg-light.dg-model .dg-note { border-top-color: var(--line-faint); }

/* ---------------------------------------------------------------------
   Branded hero visuals (scripts/lib/hero-visuals.mjs) — replace generic
   stock photography on the service pages with scenes built from the page's
   own subject. Everything animates once, on reveal, and stands still under
   reduced-motion.
   --------------------------------------------------------------------- */
.hero-viz { margin: 0; }
.hero-viz svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55)); }
.hero-viz .hv-scene-title {
  font-family: var(--font-head); font-weight: 750; font-size: 17px;
  letter-spacing: 0.14em; text-transform: uppercase; fill: var(--brand-blue-bright);
}
.hero-viz .hv-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; fill: rgba(255, 255, 255, 0.68); }
.hero-viz .hv-label { font-family: var(--font-head); font-weight: 650; font-size: 18px; fill: #fff; }
.hero-viz .hv-sub { font-family: var(--font-body); font-size: 15.5px; fill: rgba(255, 255, 255, 0.62); }
.hero-viz .hv-val { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; fill: var(--brand-blue-bright); }
.hero-viz .hv-ic { stroke: var(--brand-blue-bright); stroke-width: 2; fill: none; }
.hero-viz .hv-core .hv-ic { stroke: #fff; }

.hero-viz .hv-chip { opacity: 0; animation: hv-fade 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.hero-viz .hv-panel { opacity: 0; animation: hv-fade 0.7s ease forwards 0.1s; }
.hero-viz .hv-core { opacity: 0; animation: hv-fade 0.7s ease forwards 0.45s; }
.hero-viz .hv-link { stroke-dasharray: 320; stroke-dashoffset: 320; animation: hv-draw 1.1s ease forwards; animation-delay: calc(var(--d, 0ms) + 400ms); }
.hero-viz .hv-dot { opacity: 0; animation: hv-fade 0.4s ease forwards; animation-delay: calc(var(--d, 0ms) + 700ms); }
.hero-viz .hv-meter .hv-fill { transform-origin: left; transform: scaleX(0); animation: hv-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 140ms + 600ms); }
@keyframes hv-in { to { opacity: 1; transform: none; } }
@keyframes hv-fade { to { opacity: 1; } }
@keyframes hv-pop { to { opacity: 1; transform: scale(1); } }
@keyframes hv-draw { to { stroke-dashoffset: 0; } }
@keyframes hv-grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-viz .hv-chip, .hero-viz .hv-panel, .hero-viz .hv-core, .hero-viz .hv-dot { opacity: 1; transform: none; animation: none; }
  .hero-viz .hv-link { stroke-dashoffset: 0; animation: none; }
  .hero-viz .hv-meter .hv-fill { transform: scaleX(1); animation: none; }
}
/* Dark panels sit inside .section, whose in-text link rule is more specific —
   raise these so the link is not dark-on-dark. */
main .section .pb-copy p a:not(.btn),
main .section .att-banner p a:not(.btn),
main .section-dark p a:not(.btn),
main .proof-rows p a:not(.btn) {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--brand-blue-bright);
}

/* ---------------------------------------------------------------------
   Round 6 corrections found in visual review
   --------------------------------------------------------------------- */

/* Header CTA was the only primary button left with white-on-cyan (2.2:1) */
.main-nav a.header-cta, .mobile-nav-ctas a.btn-primary {
  background: var(--brand-blue-ink);
  color: #fff;
  font-weight: 700;
}
.main-nav a.header-cta:hover, .mobile-nav-ctas a.btn-primary:hover { background: var(--brand-blue-deep); color: #fff; }

/* FAQ +/− markers were bright cyan on white */
.faq-item summary::after { color: var(--brand-blue-ink); }

/* The consent line kept the old blue-underline link style */
.form-consent a { font-weight: 700; color: var(--ink-900); text-decoration: none; border-bottom: 2px solid var(--brand-blue); }
.form-consent a:hover { color: var(--brand-blue-ink); border-bottom-color: var(--brand-blue-ink); }
.form-consent { gap: 14px; }
.form-consent input { margin-top: 3px; }

/* The panel label is a ::before, i.e. a grid item — the tablet 2-column rule
   pushed the first row up beside it. Make the label span the full grid. */
.sol-hero-tags::before { grid-column: 1 / -1; }

/* Process rail numbers follow the same cyan→green ramp as the step ladder */
.rail-step:nth-child(1)::before { border-color: #348CA4; color: #348CA4; }
.rail-step:nth-child(2)::before { border-color: #1fb4c9; color: #1fb4c9; }
.rail-step:nth-child(3)::before { border-color: #1aac9f; color: #1aac9f; }
.rail-step:nth-child(4)::before { border-color: #1da77c; color: #1da77c; }
.rail-step:nth-child(5)::before { border-color: #22a55b; color: #22a55b; }

/* Numbered content cards get the same filled badge as the problem cards, so
   the two components read as one family */
.content-card .cc-num {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-green));
  color: var(--ink-950); font-weight: 750;
}

/* A card with no link kept its siblings' footer space */
.card:not(:has(.card-more)) p:last-child { margin-bottom: 0; }

/* Breadcrumb separators must not start a line on small screens */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.breadcrumbs li { white-space: nowrap; }

/* Section heading rules should match the width of the content they introduce */
.content-band-head { max-width: none; }
.content-band-head h2 { max-width: 30ch; }

@media (max-width: 700px) {
  /* Insights category headings were flush against the previous card */
  .insights-group + .insights-group, .section-head + .article-grid { margin-top: 26px; }
  .article-grid + .section-head, .card-grid + .section-head { margin-top: 34px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  /* The contact column kept its desktop width after the form stacked below */
  .two-col > * { max-width: none; }
  .two-col .card-grid { max-width: none !important; }
}

/* Table cells were slicing words at the scroll edge on phones */
@media (max-width: 700px) {
  .table-wrap table { min-width: 640px; }
  .table-wrap th, .table-wrap td { padding: 12px 14px; word-break: normal; overflow-wrap: anywhere; }
}
/* A hero with no panel or photo left half the row empty; centre the column
   instead of leaving a hole beside it. */
.page-hero-grid:not(:has(img)):not(:has(figure)):not(:has(.dg)) { grid-template-columns: 1fr; }
.page-hero-grid:not(:has(img)):not(:has(figure)):not(:has(.dg)) > * { max-width: 62ch; }
/* A long current-page breadcrumb pushed the layout wider than a 320px screen */
.breadcrumbs li { white-space: normal; overflow-wrap: anywhere; }
.breadcrumbs li:not(:last-child) { white-space: nowrap; }
@media (max-width: 420px) {
  .breadcrumbs li[aria-current] { display: none; }
  .breadcrumbs li:nth-last-child(2)::after { content: ''; }
}

/* ---------------------------------------------------------------------
   Hero visuals, corrected sizing.
   A previous attempt scaled the scene group, which does nothing: the group
   scale cancels against the viewBox, so rendered px = fontSize × boxWidth ÷
   760 (the authored canvas). The type was therefore ~11px on desktop and
   ~8px on a phone. Fix: give the visual a wider column and raise the type
   in authored units, and drop the panel-inside-a-panel framing.
   --------------------------------------------------------------------- */
.page-hero-grid:has(.hero-viz) { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 3vw, 56px); }
.sol-hero-grid:has(.hero-viz) { grid-template-columns: 1fr 1fr; }

.hero-viz .hv-scene-title { font-size: 22px; letter-spacing: 0.12em; }
.hero-viz .hv-title { font-size: 19px; }
.hero-viz .hv-label { font-size: 25px; font-weight: 600; }
.hero-viz .hv-sub { font-size: 20px; }
.hero-viz .hv-val { font-size: 20px; }
.hero-viz .hv-ic { stroke-width: 2.4; }

/* One frame, not three: inner panels lose their box and keep only a rule. */
.hero-viz .hv-panel > rect { fill: rgba(255, 255, 255, 0.025); stroke: transparent; }
.hero-viz .hv-chip > rect:first-child { stroke-width: 1.2; }

@media (max-width: 980px) {
  .page-hero-grid:has(.hero-viz), .sol-hero-grid:has(.hero-viz) { grid-template-columns: 1fr; }
}
/* Chip labels are dense UI text and need to fit a ~250u box; the larger
   .hv-label size is for standalone labels under a node. */
.hero-viz .hv-chip-label { font-family: var(--font-head); font-weight: 600; font-size: 21px; fill: #fff; }