/* Safety net: a <svg><use> with no width/height and no CSS rule falls back to the
   replaced-element default (300x150) and blows its container apart. :where() carries
   zero specificity, so every explicit rule below still wins. */
:where(svg:not([width]):not([height]):not([class])) { width: 1em; height: 1em; flex: none; }

/* ==========================================================================
   pages.css - components layered on the shared system for the vertical
   pillar pages (healthcare, and next behavioral health + ABA clinics).
   Zero hex outside primitives: everything below uses tokens.
   ========================================================================== */

/* ---------- Shared heading rhythm: H1 capped, H2s stepped down ---------- */
.hc-h1 { font-family: var(--t-font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 45px); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--text-on-dark); margin: 0; text-wrap: pretty; }
.hc-h2 { font-family: var(--t-font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--text-heading); margin: var(--space-4) 0 0; max-width: 75%; text-wrap: pretty; }
.hc-h3 { font-family: var(--t-font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.3; color: var(--text-heading); margin: 0; }
.hl { color: var(--accent-main); }
.hc-lead { font-size: var(--t-body-lg); line-height: 1.65; color: var(--text-muted); margin: var(--space-6) 0 0; max-width: 75%; text-wrap: pretty; }
[data-theme="dark-section"] .hc-h2, .hc-dark .hc-h2 { color: var(--text-on-dark); }
[data-theme="dark-section"] .hc-lead, .hc-dark .hc-lead { color: var(--text-on-dark-muted); }

/* ---------- Block 1: hero ---------- */
.hc-hero { position: relative; background: linear-gradient(135deg, var(--secondary-900) 0%, var(--secondary-800) 62%, var(--secondary-600) 100%); padding: calc(var(--section-padding-y) + var(--space-8)) 0; overflow: hidden; }
.hc-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; }
/* the desktop grid is defined once, in the hero balance block further down */
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--white-50); margin-bottom: var(--space-4); }
.hc-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--white-50); text-decoration: none; }
.hc-crumbs a:hover { color: var(--primary-300); }
.hc-crumbs span[aria-current] { color: var(--text-on-dark); }
.hc-hero__sub { font-size: var(--t-body-lg); line-height: 1.6; color: var(--text-on-dark-muted); margin: var(--space-6) 0 0; max-width: 75%; text-wrap: pretty; }

/* Audit input - the low-friction path. Deliberately lighter than the form. */
.hc-audit { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-on-dark); max-width: 34rem; }
.hc-audit__label { display: block; font-size: var(--t-small); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--primary-300); margin-bottom: var(--space-3); }
.hc-audit__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }
.hc-audit__input { flex: 1 1 15rem; min-width: 0; height: 52px; padding: 0 var(--space-8); font-family: var(--t-font-body); font-size: 16px; color: var(--text-on-dark); background: var(--white-10); border: 1.5px solid var(--white-40); border-radius: var(--btn-radius); transition: border-color var(--transition-base), background var(--transition-base); }
.hc-audit__input::placeholder { color: var(--white-50); }
.hc-audit__input:hover { background: rgba(255,255,255,.14); }
/* Visible focus on navy: solid light ring, not a faint accent glow */
.hc-audit__input:focus-visible { outline: 3px solid var(--gray-0); outline-offset: 2px; border-color: var(--gray-0); background: rgba(255,255,255,.16); }
.hc-audit__btn { flex: 0 0 auto; min-height: 52px; }
.hc-audit__note { font-size: var(--t-small); line-height: 1.6; color: var(--text-on-dark-muted); margin: var(--space-4) 0 0; }
.hc-audit__note strong { color: var(--text-on-dark); font-weight: var(--weight-semibold); }
.hc-audit__err { display: none; align-items: center; gap: var(--space-2); font-size: var(--t-small); font-weight: var(--weight-semibold); color: var(--text-error); background: var(--bg-error); border: 1px solid var(--border-error); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.hc-audit.is-invalid .hc-audit__err { display: inline-flex; }
.hc-audit.is-invalid .hc-audit__input { border-color: var(--gray-0); }
.hc-audit.is-loading .hc-audit__btn { pointer-events: none; opacity: .75; }

/* Hero contact form - the high-intent path, presented as a solid card.
   Colours are pinned, not inherited: both hosts carry data-theme="dark-section",
   which re-declares --bg-surface and --text-heading for every descendant. */
.hc-formcard { background: var(--gray-0); border: 1px solid var(--gray-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-10); }
.hc-formcard .eyebrow { color: var(--primary-400); }
.hc-formcard__h { font-family: var(--t-font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; color: var(--gray-900); margin: var(--space-3) 0 0; text-wrap: pretty; }
.hc-formcard__sub { font-size: var(--t-small); line-height: 1.6; color: var(--gray-600); margin: var(--space-4) 0 var(--space-8); }
.hc-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.hc-form .span-2 { grid-column: 1 / -1; }
.hc-form .form-label { color: var(--gray-900); }
/* Field look now comes from shared.css so both pages match. Page keeps only the
   16px floor (stops iOS Safari auto-zoom) and the textarea height. */
.hc-form .form-input, .hc-form .form-textarea { font-size: 16px; }
.hc-form .form-textarea { min-height: 104px; padding: var(--space-5) var(--space-8); }
.hc-fine { font-size: var(--t-caption); line-height: 1.6; color: var(--gray-600); margin: var(--space-5) 0 0; }
@media (max-width: 480px) { .hc-form { grid-template-columns: 1fr; } }

/* ---------- Block 2: proof bar ---------- */
.hc-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
@media (min-width: 900px) { .hc-proof { grid-template-columns: repeat(4, 1fr); } }
.hc-proof__item { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); border-left: 2px solid var(--accent-main); }
.hc-proof__v { font-family: var(--t-font-display); font-weight: 800; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: var(--tracking-tighter); color: var(--accent-main); }
.hc-proof__l { font-size: var(--t-small); line-height: 1.45; color: var(--text-muted); }

/* ---------- Block 3: client logos ---------- */
.hc-logos .band-label { font-family: var(--t-font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-6); }
.hc-logogrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  align-items: stretch;
}
@media (min-width: 560px)  { .hc-logogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .hc-logogrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hc-logogrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hc-logos .client-logo-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: var(--space-5) var(--space-6);
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
}
.hc-logos .client-logo-pill img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.hc-logos a.client-logo-pill { text-decoration: none; transition: transform var(--transition-base), border-color var(--transition-base); }
.hc-logos a.client-logo-pill:hover { transform: translateY(-2px); border-color: var(--accent-main); }
.hc-logos .client-wordmark { font-size: 14px; }

/* ---------- Block 4: practice router - DOORS. Big tiles, icon, arrow. ---------- */
.hc-doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-12); }
@media (min-width: 700px) { .hc-doors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .hc-doors { grid-template-columns: repeat(4, 1fr); } }
.hc-door { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-height: 200px; padding: var(--space-8) var(--space-6) var(--space-6); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-surface); text-decoration: none; overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.hc-door::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-main); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); }
.hc-door:hover { transform: translateY(-4px); border-color: var(--accent-main); box-shadow: var(--shadow-raised); }
.hc-door:hover::before { transform: scaleX(1); }
.hc-door:focus-visible { outline: 2px solid var(--accent-main); outline-offset: 3px; }
.hc-door__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--accent-main); }
.hc-door__ico svg { width: 26px; height: 26px; }
.hc-door__name { font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-base); line-height: 1.25; color: var(--text-heading); }
.hc-door__sub { font-size: var(--t-caption); line-height: 1.5; color: var(--text-muted); }
.hc-door__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-5); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-400); }
.hc-door__go svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.hc-door:hover .hc-door__go svg { transform: translateX(4px); }
.hc-also { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.hc-also__h { font-size: var(--t-small); font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0 0 var(--space-4); }
.hc-also__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); list-style: none; margin: 0; padding: 0; }
.hc-also__list li { font-size: var(--t-caption); color: var(--text-muted); background: var(--bg-section-alt); border-radius: var(--radius-full); padding: var(--space-2) var(--space-5); }

/* ---------- Block 4B: skinny services strip ---------- */
.hc-strip { padding: var(--space-12) 0; }
.hc-strip__h { font-family: var(--t-font-display); font-weight: 700; font-size: var(--text-base); color: var(--text-heading); margin: 0 0 var(--space-6); }
.hc-strip__items { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.hc-chip { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-5); font-size: var(--t-caption); font-weight: var(--weight-semibold); color: var(--text-heading); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-full); text-decoration: none; transition: border-color var(--transition-base), color var(--transition-base); }
.hc-chip:hover { border-color: var(--primary-400); color: var(--primary-400); }
.hc-strip__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); font-weight: 700; color: var(--accent-main); }

/* ---------- Block 5: audits, orange full-bleed. Navy text for contrast. ---------- */
.hc-audits { background: var(--accent-main); }
.hc-audits .eyebrow { color: #fff; }
.hc-audits .hc-h2 { color: #fff; max-width: 75%; }
.hc-audits .hl { color: #fff; }
.hc-audits .hc-lead { color: #fff; max-width: 75%; }
.hc-audits__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-10) 0 var(--space-12); }
@media (min-width: 760px) { .hc-audits__chips { grid-template-columns: repeat(4, 1fr); } }
.hc-achip { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: var(--space-5) var(--space-4); background: var(--gray-0); border-radius: var(--radius-lg); }
.hc-achip__v { font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1; color: var(--primary-400); }
.hc-achip__l { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.hc-acards { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .hc-acards { grid-template-columns: 1fr 1fr; } }
.hc-acard { display: flex; flex-direction: column; gap: var(--space-5); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-10); }
.hc-acard__bullets { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; }
.hc-acard__bullets li { position: relative; padding-left: var(--space-8); font-size: var(--t-small); line-height: 1.55; color: var(--text-muted); }
.hc-acard__bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-main); }
.hc-acard .btn { margin-top: auto; }
/* ABA fork reads as an aside, not a third card */
.hc-aba { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8); margin-top: var(--space-10); padding: var(--space-6) var(--space-8); background: rgba(0,0,0,.14); border-radius: var(--radius-sm); }
.hc-aba__t { flex: 1 1 24rem; font-size: var(--t-small); line-height: 1.6; color: var(--gray-0); margin: 0; }

/* ---------- Block 6: case tiles ---------- */
.hc-cases { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-12); }
@media (min-width: 700px) { .hc-cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hc-cases { grid-template-columns: repeat(3, 1fr); } }
.hc-case { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; padding: var(--space-8); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-surface); text-decoration: none; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.hc-case:hover { transform: translateY(-3px); border-color: var(--accent-main); box-shadow: var(--shadow-raised); }
.hc-case__client { font-family: var(--t-font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--primary-400); }
.hc-case__head { font-family: var(--t-font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.4; color: var(--text-heading); margin: 0; }
.hc-case__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-4); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-400); }
.hc-case__go svg { width: 14px; height: 14px; flex: none; transition: transform var(--transition-base); }
.hc-case:hover .hc-case__go svg { transform: translateX(4px); }
.hc-case--browse { align-items: flex-start; justify-content: center; background: var(--secondary-900); border-color: var(--secondary-900); }
.hc-case--browse .hc-case__go { color: var(--primary-300); }
.hc-case--browse .hc-case__head { color: var(--text-on-dark); }

/* ---------- Block 7: service router - a LIST, deliberately unlike the doors ---------- */
.hc-svcs { display: grid; grid-template-columns: 1fr; margin-top: var(--space-12); border-top: 1px solid var(--border-default); }
@media (min-width: 900px) { .hc-svcs { grid-template-columns: 1fr 1fr; column-gap: var(--space-16); } }
.hc-svc { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-6); row-gap: var(--space-2); align-items: start; padding: var(--space-8) 0; border-bottom: 1px solid var(--border-default); text-decoration: none; transition: background var(--transition-base); }
.hc-svc:hover { background: var(--bg-section-alt); }
.hc-svc:focus-visible { outline: 2px solid var(--accent-main); outline-offset: 2px; }
.hc-svc__n { grid-row: 1 / span 3; font-family: var(--t-font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; color: var(--text-muted); padding-top: 4px; }
.hc-svc__name { font-family: var(--t-font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.3; color: var(--text-heading); }
.hc-svc__body { font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); margin: 0; }
.hc-svc__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-400); }
.hc-svc__go svg { width: 13px; height: 13px; transition: transform var(--transition-base); }
.hc-svc:hover .hc-svc__go svg { transform: translateX(4px); }

/* ---------- Block 8: how the work happens (dark) ---------- */
.hc-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-12); }
@media (min-width: 860px) { .hc-cols { grid-template-columns: repeat(3, 1fr); } }
.hc-col { padding: var(--space-8); background: var(--white-5); border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); }
.hc-col__h { font-family: var(--t-font-display); font-weight: 700; font-size: var(--text-base); color: var(--text-on-dark); margin: 0 0 var(--space-4); }
.hc-col__b { font-size: var(--t-small); line-height: 1.65; color: var(--text-on-dark-muted); margin: 0; }
.hc-flows { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-10); }
@media (min-width: 760px) { .hc-flows { grid-template-columns: 1fr 1fr; } }
.hc-flow { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-6); border-left: 2px solid var(--accent-main); }

.hc-flow__b { font-size: var(--t-small); line-height: 1.6; color: var(--text-on-dark-muted); margin: 0; }
.hc-note { margin-top: var(--space-10); font-size: var(--t-small); font-weight: var(--weight-semibold); color: var(--text-on-dark); }

/* ---------- Block 9: people ---------- */
.hc-people { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
@media (min-width: 760px) { .hc-people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .hc-people { grid-template-columns: repeat(5, 1fr); } }
.hc-person { display: flex; flex-direction: column; text-decoration: none; }
.hc-person img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block; border-radius: var(--radius-md); background: var(--bg-section-alt); transition: transform var(--transition-base); }
.hc-person:hover img { transform: translateY(-3px); }
.hc-person__n { font-family: var(--t-font-display); font-weight: 700; font-size: var(--t-body); color: var(--text-heading); margin-top: var(--space-5); position: relative; padding-bottom: 6px; align-self: flex-start; }
.hc-person__n::after { content: ""; position: absolute; left: 0; bottom: 0; width: 75%; height: 2px; background: var(--accent-main); }
.hc-person__r { font-size: var(--t-caption); color: var(--primary-400); font-weight: var(--weight-semibold); margin-top: var(--space-3); }
.hc-person__l { font-size: var(--t-caption); line-height: 1.55; color: var(--text-muted); margin: var(--space-3) 0 0; }
.hc-close-line { margin-top: var(--space-12); font-size: var(--t-body); font-weight: var(--weight-semibold); color: var(--text-heading); }

/* ---------- Block 11: closing band ---------- */
.hc-closeband { background: linear-gradient(135deg, var(--secondary-900) 0%, var(--secondary-800) 100%); padding: var(--space-20) 0; }
.hc-closeband__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: start; }
@media (min-width: 1024px) { .hc-closeband__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.hc-escape { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-8); font-size: var(--t-small); font-weight: 700; color: var(--primary-300); }
.hc-escape:hover { color: var(--gray-0); }

/* ---------- Mobile progressive disclosure ---------- */
.hc-more { display: none; }
@media (max-width: 767px) {
  .hc-more { display: inline-flex; margin-top: var(--space-8); }
  /* Hide-only, never restore. A `:not(.is-open)` hide rule means the open state
     declares no display at all, so each child keeps its authored box type
     (grid, flex, block) on its own. The previous form set `display:flex` on open
     and needed a per-host override for every non-flex child, which silently
     broke any new collapse host. The three vertical pages after this one
     inherit this file, so the trap is removed rather than patched. */
  [data-collapse]:not(.is-open) > [data-hidden-mobile] { display: none; }
}

/* Any tappable element clears 44px */
.hc-audit__btn, .hc-chip, .hc-strip__link, .hc-escape, .hc-more { min-height: 44px; }
.faq-q { min-height: 44px; }

/* ==========================================================================
   Step 2 · Block 7 (Find your service) is now DARK and Block 8 (How the work
   happens) is now LIGHT, per the Aug 18 brief. Each block's parts were
   authored for the opposite surface, so both are re-toned here, scoped by
   section id so nothing else inherits it.
   ========================================================================== */

/* ---- Block 7 · service list on dark ---- */
#services .hc-svcs { border-top-color: var(--border-on-dark); }
#services .hc-svc { border-bottom-color: var(--border-on-dark); }
#services .hc-svc:hover { background: var(--white-5); }
#services .hc-svc__n { color: var(--white-50); }
#services .hc-svc__name { color: var(--text-on-dark); }
#services .hc-svc__body { color: var(--text-on-dark-muted); }
#services .hc-svc__go { color: var(--primary-300); }
#services .hc-svc:focus-visible { outline-color: var(--primary-300); }

/* ---- Block 8 · three columns + named workflows on light ---- */
#how-ai-works .hc-col { background: var(--gray-0); border-color: var(--border-default); box-shadow: var(--shadow-surface); }
#how-ai-works .hc-col__h { color: var(--text-heading); }
#how-ai-works .hc-col__b { color: var(--text-muted); }

#how-ai-works .hc-flow__b { color: var(--text-muted); }
#how-ai-works .hc-note { color: var(--text-heading); }

/* Eyebrows on light sections. The base .eyebrow is --primary-500, which measures
   ~3.2:1 on these surfaces and fails 4.5:1 at 14px. Keyed off the theme attribute
   rather than an ID list: the list silently missed any new light section, which is
   exactly how #how-we-help fell through to the failing colour. The orange audit
   bands opt out (they set their own navy eyebrow); dark sections keep the lighter
   step, which measures 6.13:1 on navy. */
main > section:not([data-theme="dark-section"]):not(.hc-audits):not(.audit-band) .eyebrow { color: var(--primary-400); }

/* ==========================================================================
   Step 4 · keyword anchors, centred case-studies CTA, equal card heights
   ========================================================================== */

/* The door anchor is now a full keyword phrase, not "See what we do", so it
   wraps. Let it, and keep the arrow tied to the last word. */
.hc-door__go { align-items: flex-start; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.hc-door__go svg { margin-top: 2px; }

/* Equal card heights across a row: stretch every grid item, then let the
   card fill it, so stat lines and CTAs align even when titles differ in length. */
.hc-doors, .hc-cases, .hc-people, .hc-cols, .hc-acards, .hc-audits__chips { align-items: stretch; }
.hc-doors > .hc-door, .hc-cases > .hc-case, .hc-cols > .hc-col, .hc-acards > .hc-acard { height: 100%; }
.hc-door__name, .hc-case__head { text-wrap: pretty; }

/* Centred CTA under the case grid, replacing the browse tile */
.hc-cases-cta { display: flex; justify-content: center; margin-top: var(--space-12); }

/* Contrast, measured against rendered values (not assumed hex):
   1. .hc-person__r is --primary-500 on the bare section background rgb(251,251,252)
      = 4.48:1, failing 4.5:1 by 0.02. The same token passes inside .hc-case only
      because that card paints itself white. These labels sit on no card, so they
      take the darker step: 6.20:1.
   2. .hc-crumbs is white-50 over the hero gradient. Against the gradient's
      LIGHTEST stop (--secondary-600 #033748) that is 4.35:1, not 4.5:1.
      white-60 measures 5.59:1 at the same worst-case stop. */
#people .hc-crumbs { color: var(--white-60); }
.hc-crumbs a { color: var(--white-60); min-width: 44px; justify-content: center; }

/* ==========================================================================
   Contrast rule of thumb, learned the hard way over four passes:
   13px/700 accent text needs --primary-700 on ANY light surface. --primary-500
   fails on white (3.48:1) and --primary-500 passes on pure white (4.63:1) but
   FAILS on --bg-section-alt (4.25:1). Only use the lighter steps on dark.
   ========================================================================== */

/* The hero audit button must match the input beside it. Authored min-height:52px
   was dead code: the later 44px group rule reset it and components.css
   .btn--md { height: 48px } is an explicit height that beats min-height and
   defeats the row's align-items:stretch. Fix the constraint with equal specificity. */
.hc-audit .hc-audit__btn { height: 52px; min-height: 52px; }


/* The 13 text wordmarks inherit white-space:nowrap from the marquee, which the
   static grid cannot accommodate. Let them wrap, scoped to .hc-logos so the
   homepage marquee keeps nowrap. min-height becomes a floor, not a fixed look. */
.hc-logos .client-logo-pill { min-height: 84px; height: auto; padding: var(--space-4) var(--space-4); }
.hc-logos .client-wordmark {
  white-space: normal;
  text-wrap: balance;
  line-height: 1.25;
  font-size: 14px;
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Athenahealth and OMRON ship pure-white art, so they need inverting to read on
   the white pill. shared.css keys this off the substring "athena-health", but this
   page's file is "...-athenahealth.png" with no hyphen, so it never matched and the
   logo rendered as an empty link. Scoped here and keyed on this block's real
   filenames rather than relying on the shared substring list. */


/* The 14px font floor now lives in tokens.css so every page in the cluster gets
   it. It was here, and index-v2.html does not load pages.css, so identical
   components rendered 13px there and 14px on the vertical pages. */

/* 28 of the 34 clients have no logo art yet, so the band carries a link out to the
   full client list until the real files and MANIFEST.json land. */
.hc-logohead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.hc-logohead .band-label { margin-bottom: 0; }
.hc-logolink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-small); font-weight: 700; color: var(--accent-main); text-decoration: none; }
.hc-logolink svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.hc-logolink:hover svg { transform: translateX(4px); }

/* ==========================================================================
   ABA vertical prototype. This block is the template the remaining three
   vertical pages inherit, so every component here is generic, not ABA-only.
   ========================================================================== */

/* Block 3 - static logo band. Flex, not grid, so an odd count centres. */
.logo-static { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin-top: var(--space-10); }
.logo-tile { display: flex; align-items: center; justify-content: center; min-height: 88px; padding: var(--space-6) var(--space-8); background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-surface); text-decoration: none; flex: 0 1 220px; transition: transform var(--transition-base), border-color var(--transition-base); }
a.logo-tile:hover { transform: translateY(-2px); border-color: var(--primary-400); }
.logo-tile img { max-height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.logo-tile__name { font-family: var(--t-font-display); font-weight: 700; font-size: var(--t-small); line-height: 1.3; color: var(--secondary-800); text-align: center; text-wrap: balance; }

/* Block 4 · the five friction points, as a diagnostic table
   The card grid repeated the same two field labels ten times, which was the
   real noise: five cards x "What breaks" + "What it looks like on your P&L".
   The labels now appear once, as column headers on the first row, and stay in
   the DOM but visually hidden on the rest. The result reads as the numbered
   five-step sequence the heading promises, in the same editorial language as
   the ledger and FAQ index. No copy is added, removed or reworded. */


@media (min-width: 900px) {

}

/* the step number is generated, so the markup carries no extra copy */



/* the label pair reads as column headers, shown on the first row only */

@media (min-width: 900px) {

}

/* every row after the first keeps the labels for screen readers only */




@media (min-width: 900px) {


}
/* the closing line lands as a statement, not another paragraph */
.prob-close {
  margin-top: var(--space-12);
  padding-left: var(--space-6);
  border-left: 3px solid var(--accent-main);
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--text-heading);
  max-width: 62ch;
}
.prob-close strong { color: var(--accent-main); }




/* the healthcare page names these blocks .hc-col and .hc-flow rather than
   .col-light and .wf-item, so the shared photo layout and the card treatment are
   restated for them; one design, two markup vocabularies */
.aiw__roles .hc-cols { display: contents; }
.aiw__flows .hc-flows { margin-top: 0; }
@media (min-width: 1024px) { .aiw__flows .hc-flows { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.hc-flows { counter-reset: hcf; }
.hc-flow {
  counter-increment: hcf;
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  height: 100%;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-surface);
  overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.hc-flow::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent-main); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base);
}
.hc-flow:hover { transform: translateY(-3px); border-color: var(--accent-main); box-shadow: var(--shadow-raised); }
.hc-flow:hover::before { transform: scaleX(1); }
.hc-flow::after {
  content: counter(hcf);
  position: absolute; top: var(--space-6); right: var(--space-6);
  font-family: var(--t-font-mono); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .1em; color: var(--border-default);
  transition: color var(--transition-base);
}
.hc-flow:hover::after { color: var(--accent-main); }
.hc-flow__n {
  font-family: var(--t-font-display); font-weight: 800;
  font-size: var(--text-base); line-height: 1.25;
  letter-spacing: var(--tracking-tight); text-transform: none;
  color: var(--text-heading); padding-right: var(--space-8);
}
.hc-flow__b { font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); margin: 0; }


/* ==========================================================================
   RESTORED · rhythm, chapter breaks, heading spacing
   ========================================================================== */
@media (min-width: 768px)  { main > section[data-chapter="open"] { padding-top: calc(var(--section-padding-y) + var(--space-16)); } }
@media (min-width: 1024px) { main > section[data-chapter="open"] { padding-top: calc(var(--section-padding-y) + var(--space-24)); } }
@media (min-width: 1280px) { main > section[data-chapter="open"] { padding-top: calc(var(--section-padding-y) + var(--space-32)); } }
main > section .eyebrow { display: block; margin-bottom: var(--space-4); }
main > section > .container > .hc-h2 { margin-bottom: var(--space-6); }
main > section > .container > .hc-lead { margin-bottom: var(--space-12); }
@media (min-width: 1024px) {
  .hc-doors { gap: var(--space-6); }
  .hc-cases, .case3 { gap: var(--space-6); }
  .svcd-grid { gap: var(--space-6); }
}

/* ==========================================================================
   RESTORED · audit cards differentiated
   The CTA fill is a separate token: the rule, label block and icon keep the
   card accent, but a white button label needs --primary-500 for 4.5:1.
   ========================================================================== */
.hc-acard, .audit-v5-card { position: relative; overflow: hidden; }
.hc-acard::before, .audit-v5-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--ac-accent, var(--accent-main));
}
.hc-acards .hc-acard:nth-child(1) { --ac-accent: var(--accent-main); }
.hc-acards .hc-acard:nth-child(2) { --ac-accent: var(--primary-400); }
.hc-acards .hc-acard {
  padding-top: calc(var(--space-10) + 6px);
  border: 2px solid color-mix(in srgb, var(--ac-accent) 55%, transparent);
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--ac-accent) 65%, transparent);
}
.hc-acards .hc-acard .ac-label {
  display: flex; width: 100%;
  padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-2);
  border-radius: var(--radius-md); border: none;
  background: color-mix(in srgb, var(--ac-accent) 12%, transparent);
  color: var(--ac-accent);
}
.hc-acards .hc-acard .ac-ico { background: var(--ac-accent); color: #fff; }
.hc-acards .hc-acard .hc-acard__bullets li::before { background: var(--ac-accent); }
.hc-acards .hc-acard { --ac-cta: var(--ac-accent); }
.hc-acards .hc-acard:nth-child(1) { --ac-cta: var(--primary-400); }
.hc-acards .hc-acard .btn--primary { background: var(--ac-cta); border-color: var(--ac-cta); }
.hc-acards .hc-acard .btn--primary:hover {
  background: color-mix(in srgb, var(--ac-cta) 82%, #000);
  border-color: color-mix(in srgb, var(--ac-cta) 82%, #000);
}

/* ==========================================================================
   RESTORED · audit stats outlined, so nothing tints the orange band
   ========================================================================== */
.hc-audits__chips { gap: var(--space-4); }
.hc-achip {
  align-items: flex-start; text-align: left; gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  background: none; border: 1.5px solid rgba(255,255,255,.55);
  border-radius: var(--radius-lg); box-shadow: none;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.hc-achip:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.hc-achip__v {
  font-family: var(--t-font-display); font-weight: 900;
  font-size: clamp(2rem, 3.1vw, 3rem); line-height: 1;
  letter-spacing: -.035em; color: #fff;
}
.hc-achip__l {
  font-size: var(--t-caption); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: #fff; opacity: .9;
}
@media (max-width: 700px) { .hc-achip { padding: var(--space-6) var(--space-5); } }

/* ==========================================================================
   RESTORED · FAQ index, numbered by counter so the markup is untouched
   ========================================================================== */
.hc-faq { counter-reset: hcfaq; border-top: 1px solid var(--border-default); }
.hc-faq__item { counter-increment: hcfaq; border-bottom: 1px solid var(--border-default); }
.hc-faq__q {
  display: grid; grid-template-columns: 3.2ch 1fr auto;
  align-items: baseline; gap: var(--space-5);
  padding: calc(var(--space-6) + 2px) var(--space-2);
  background: none; border: none; border-radius: 0;
  transition: padding-left var(--transition-base), background var(--transition-base);
}
.hc-faq__q::before {
  content: counter(hcfaq);
  font-family: var(--t-font-mono); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .1em; color: var(--text-muted);
  transition: color var(--transition-base);
}
.hc-faq__q:hover {
  background: linear-gradient(90deg, rgba(245, 101, 56,.06), transparent 60%);
  color: var(--accent-main); padding-left: var(--space-6);
}
.hc-faq__q:hover::before { color: var(--accent-main); }
.hc-faq__q[aria-expanded="true"] {
  background: var(--secondary-800); border-radius: var(--radius-md);
  padding-left: var(--space-6); color: var(--text-on-dark);
}
.hc-faq__q[aria-expanded="true"]::before { color: var(--primary-300); }
.hc-faq__q[aria-expanded="true"] .hc-faq__ico::before,
.hc-faq__q[aria-expanded="true"] .hc-faq__ico::after { background: var(--primary-300); }
.hc-faq__item:has(.hc-faq__q[aria-expanded="true"]) { border-bottom-color: transparent; }
.hc-faq__a { padding-top: var(--space-5); }

/* ==========================================================================
   RESTORED · closing-band form restated for the navy surface
   ========================================================================== */
.hc-closeband .hc-formcard { background: var(--gray-0); border: 1px solid var(--gray-0); }
.hc-closeband .hc-formcard .form-label { color: var(--gray-900); }
.hc-closeband .hc-formcard .form-input,
.hc-closeband .hc-formcard .form-textarea {
  background: var(--gray-0); color: var(--gray-900); border: 1px solid var(--gray-300);
}
.hc-closeband .hc-formcard .form-input::placeholder,
.hc-closeband .hc-formcard .form-textarea::placeholder { color: var(--gray-500); }
.hc-closeband .hc-formcard .form-input:focus-visible,
.hc-closeband .hc-formcard .form-textarea:focus-visible {
  outline: 2px solid var(--accent-main); outline-offset: 1px; border-color: var(--accent-main);
}
.hc-closeband .hc-formcard .hc-fine { color: var(--gray-600); }

/* ==========================================================================
   RESTORED · one hover language for every card-like surface
   ========================================================================== */
a.hc-case, a.hc-door, a.svcd-card, a.logo-tile { position: relative; overflow: hidden; }
a.hc-case::after, a.hc-door::after, a.svcd-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-main); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base);
}
a.hc-case:hover::after, a.hc-door:hover::after, a.svcd-card:hover::after { transform: scaleX(1); }
a.hc-case:hover, a.hc-door:hover, a.svcd-card:hover, a.logo-tile:hover { transform: translateY(-4px); }
.logo-tile, .client-logo-pill { transition: transform var(--transition-base), border-color var(--transition-base); }
a.logo-tile:hover, a.client-logo-pill:hover { border-color: var(--accent-main); }
.hc-person img { filter: saturate(.92); transition: transform var(--transition-base), filter var(--transition-base); }
.hc-person:hover img { transform: translateY(-3px); filter: saturate(1); }

/* ==========================================================================
   RESTORED · hero balance: equal columns, real gutter, CTA under the field
   ========================================================================== */
@media (min-width: 1024px) {
  .hc-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-32);
    align-items: start;
  }
  .hc-hero__grid > div:first-child { align-self: start; display: flex; flex-direction: column; }
  .hc-hero__sub { max-width: 100%; margin-top: var(--space-8); }
  .hc-audit { max-width: 100%; margin-top: var(--space-12); padding-top: var(--space-10); }
  .hc-audit__row { flex-wrap: wrap; }
  .hc-audit__input { flex: 1 1 100%; }
  .hc-audit__row > .btn { flex: 0 0 auto; white-space: nowrap; margin-top: var(--space-3); }
  .hc-crumbs { margin-bottom: var(--space-6); }
}
@media (min-width: 1280px) {
  .hc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-40); }
}

/* ==========================================================================
   RESTORED · proof bar as one orange-keyed strip on white
   ========================================================================== */
#trust-bar { background: var(--gray-0); padding-top: var(--space-16); padding-bottom: var(--space-16); }
#trust-bar .hc-proof {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 2px solid color-mix(in srgb, var(--accent-main) 40%, transparent);
  border-radius: var(--radius-lg); overflow: hidden;
  background: color-mix(in srgb, var(--accent-main) 5%, transparent);
}
#trust-bar .hc-proof__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
  padding: var(--space-10) var(--space-8);
  border-left: none;
  border-right: 1px solid color-mix(in srgb, var(--accent-main) 25%, transparent);
  transition: background var(--transition-base);
}
#trust-bar .hc-proof__item:last-child { border-right: none; }
#trust-bar .hc-proof__item:hover { background: color-mix(in srgb, var(--accent-main) 10%, transparent); }
#trust-bar .hc-proof__v { font-size: clamp(2.1rem, 3.1vw, 3.1rem); letter-spacing: -.035em; color: var(--accent-main); }
#trust-bar .hc-proof__l {
  font-size: var(--t-caption); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted); line-height: 1.4;
}
@media (max-width: 899px) {
  #trust-bar .hc-proof__item { flex: 1 1 50%; padding: var(--space-8) var(--space-6); }
  #trust-bar .hc-proof__item:nth-child(2) { border-right: none; }
  #trust-bar .hc-proof__item:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--accent-main) 25%, transparent); }
}

/* the logo band heading is a section heading like the rest */
.hc-logos__h { max-width: none; margin: 0; }

/* ==========================================================================
   RESTORED · practice doors, icon beside the title
   ========================================================================== */
.hc-door {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr;
  align-items: start; gap: var(--space-3) var(--space-5);
  min-height: 0; padding: var(--space-8) var(--space-6);
}
.hc-door__ico { grid-column: 2; grid-row: 1; width: 56px; height: 56px; align-self: start; }
.hc-door__ico svg { width: 46px; height: 46px; }
.hc-door__name { grid-column: 1; grid-row: 1; font-size: var(--text-lg); align-self: center; }
.hc-door__sub { grid-column: 1 / -1; grid-row: 2; }
.hc-door__go { grid-column: 1 / -1; grid-row: 3; align-self: end; padding-top: var(--space-6); }
@media (max-width: 699px) {
  .hc-door__ico { width: 44px; height: 44px; }
  .hc-door__ico svg { width: 36px; height: 36px; }
  .hc-door__name { font-size: var(--text-base); }
}

/* ==========================================================================
   RESTORED · case tiles with a reserved 30% logo column
   ========================================================================== */
.hc-case {
  display: grid; grid-template-columns: 1fr 30%; grid-template-rows: auto 1fr auto;
  column-gap: var(--space-6); align-items: start;
}
.hc-case__logo {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; align-items: flex-start; justify-content: flex-end; min-width: 0;
}
.hc-case__logo img {
  max-width: 100%; max-height: 56px; width: auto; height: auto;
  object-fit: contain; object-position: top right; opacity: .9;
  transition: opacity var(--transition-base);
}
.hc-case:hover .hc-case__logo img { opacity: 1; }
.hc-case__client { grid-column: 1; grid-row: 1; }
.hc-case__head   { grid-column: 1; grid-row: 2; }
.hc-case__go     { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 699px) {
  .hc-case { grid-template-columns: 1fr 26%; }
  .hc-case__logo img { max-height: 40px; }
}

/* ==========================================================================
   RESTORED · services as the homepage card grid on this label
   ========================================================================== */
[data-screen-label="find-your-service"] .grid-cards .card:hover {
  background: var(--accent-main) !important;
  border-color: var(--accent-main) !important;
  cursor: pointer; transform: translateY(-4px);
}
[data-screen-label="find-your-service"] .grid-cards .card:hover h4,
[data-screen-label="find-your-service"] .grid-cards .card:hover p { color: #fff !important; }
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-muted { color: rgba(255,255,255,.8) !important; }
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-accent { color: #fff !important; }
[data-screen-label="find-your-service"] .grid-cards .card:hover .svc-ico { color: #fff; }
@media (max-width: 767px) {
  #hc-svcs.grid-cards > [data-hidden-mobile] { display: none; }
  #hc-svcs.grid-cards.is-open > [data-hidden-mobile] { display: flex; }
}

/* ==========================================================================
   RESTORED · services strip: navy band, equal orange buttons
   ========================================================================== */
.hc-strip { background: var(--bg-section-dark); padding: var(--space-16) 0; }
.hc-strip .hc-strip__h { color: var(--text-on-dark); }
.hc-strip .hc-strip__items {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
}
@media (min-width: 700px)  { .hc-strip .hc-strip__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1024px) { .hc-strip .hc-strip__items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }
.hc-strip .hc-strip__items > li { display: flex; }
.hc-strip .hc-chip {
  background: var(--primary-400); border: 2px solid var(--primary-400); color: #fff;
  font-size: var(--t-body); font-weight: var(--weight-bold);
  width: 100%; justify-content: center; text-align: center; line-height: 1.3;
  padding: var(--space-5) var(--space-6);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.hc-strip .hc-chip:hover {
  background: var(--primary-400); border-color: var(--primary-400); color: #fff;
  transform: translateY(-2px);
}
.hc-strip .hc-chip:focus-visible { outline: 3px solid var(--gray-0); outline-offset: 2px; }
.hc-strip .hc-strip__link { color: var(--primary-300); }
.hc-strip .hc-strip__link:hover { color: #fff; }

/* ==========================================================================
   RESTORED · audit band copy in white, highlight in white
   ========================================================================== */
.hc-audits .eyebrow { color: #fff; }
.hc-audits .hc-h2 { color: #fff; max-width: 75%; }
.hc-audits .hc-lead { color: #fff; opacity: .95; max-width: 75%; }
.hc-audits .hl { color: #fff; }
.hc-aba { border-left: none; }


/* ==========================================================================
   RESTORED · eight-step infinity ribbon (ABA)
   One Gerono lemniscate that genuinely crosses itself; the eight steps are eight
   stroked pieces of that single curve in path order. viewBox is 1:1 with the
   rendered 720x400 box, so the 14px numerals render at 14px; the svg is never
   scaled, it is swapped for a list instead.
   ========================================================================== */
.lem { margin-top: var(--space-10); }
.lem__svg { display: block; width: 720px; height: 400px; margin: 0 auto; }
.lem__ghost path { fill: none; stroke: var(--border-default); stroke-width: 66; stroke-linecap: round; opacity: .35; }
.lem-seg { cursor: pointer; outline: none; }
.lem-seg__hit { fill: none; stroke: transparent; stroke-width: 74; stroke-linecap: round; }
.lem-seg__band {
  fill: none; stroke: var(--secondary-800); stroke-width: 64; stroke-linecap: round;
  transition: stroke var(--transition-base), stroke-width var(--transition-base);
}
.lem-seg:nth-of-type(even) .lem-seg__band { stroke: var(--secondary-600); }
.lem-seg:hover .lem-seg__band, .lem-seg.is-on .lem-seg__band {
  stroke: var(--accent-main); stroke-width: 70;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-main) 55%, transparent));
}
.lem-seg:focus-visible .lem-seg__band { stroke: var(--accent-main); stroke-width: 70; }


.lem-seg__ico { display: block; width: 24px; height: 24px; color: rgba(255,255,255,.9); pointer-events: none; }
.lem-seg__ico svg { width: 100%; height: 100%; }
.lem__panel {
  max-width: 46rem; margin: var(--space-8) auto 0; padding: var(--space-8);
  text-align: center; background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-surface);
}
.lem__n { font-family: var(--t-font-mono); font-size: var(--t-caption); font-weight: 700; letter-spacing: .12em; color: var(--accent-main); }
.lem__name {
  font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-xl);
  line-height: 1.2; letter-spacing: -.02em; color: var(--text-heading);
  margin: var(--space-3) 0 var(--space-4); max-width: none;
}
.lem__body { font-size: 17px; line-height: 1.65; color: var(--text-muted); margin: 0; }
.lem__data { display: none; }
@media (max-width: 759px) {
  .lem__svg, .lem__panel { display: none; }
  .lem__data { display: flex; flex-direction: column; }
  .lem__data span {
    display: block; padding: var(--space-5) 0;
    border-bottom: 1px solid var(--border-default);
    font-size: var(--t-small); line-height: 1.6; color: var(--text-muted);
  }
  .lem__data span::before {
    content: attr(data-n) "  " attr(data-name);
    display: block; font-family: var(--t-font-display); font-weight: 700;
    font-size: var(--t-body); line-height: 1.25; color: var(--text-heading);
    margin-bottom: var(--space-2);
  }
}

/* ==========================================================================
   RESTORED · how-the-work-happens photo layout, both pages
   Explicit aspect ratios rather than min-height: below 1024px .aiw is
   display:block, so a figure has no definite height and image-slot falls back to
   full-width 3:2 - which is what produced two 861x574 placeholders.
   ========================================================================== */
.aiw { display: grid; grid-template-columns: 1fr; gap: var(--space-10); margin-top: var(--space-12); }
@media (min-width: 1024px) {
  .aiw { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-16); align-items: start; }
}
.aiw__roles { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.aiw__roles .hc-cols { display: contents; }
.aiw__shot { margin: 0; }
.aiw__shot--tall { aspect-ratio: 4 / 5; }
.aiw__shot--wide { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .aiw__shot--tall { aspect-ratio: auto; min-height: 420px; height: 100%; }
  .aiw__shot--wide { aspect-ratio: auto; min-height: 260px; }
}
.aiw__flows { display: grid; grid-template-columns: 1fr; gap: var(--space-10); margin-top: var(--space-16); }
@media (min-width: 1024px) {
  .aiw__flows { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-16); align-items: center; }
}
.aiw__flows .wf-grid, .aiw__flows .hc-flows { margin-top: 0; }
@media (min-width: 1024px) {
  .aiw__flows .wf-grid, .aiw__flows .hc-flows { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* ==========================================================================
   RESTORED · the four named workflows as cards (ABA uses .wf-item)
   ========================================================================== */
.wf-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-10); counter-reset: wf; }
@media (min-width: 560px) { .wf-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.wf-item {
  counter-increment: wf; position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  height: 100%; padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-surface); overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.wf-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent-main); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base);
}
.wf-item:hover { transform: translateY(-3px); border-color: var(--accent-main); box-shadow: var(--shadow-raised); }
.wf-item:hover::before { transform: scaleX(1); }
.wf-item::after {
  content: counter(wf);
  position: absolute; top: var(--space-6); right: var(--space-6);
  font-family: var(--t-font-mono); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .1em; color: var(--border-default);
  transition: color var(--transition-base);
}
.wf-item:hover::after { color: var(--accent-main); }
.wf-item__n {
  font-family: var(--t-font-display); font-weight: 800;
  font-size: var(--text-base); line-height: 1.25;
  letter-spacing: var(--tracking-tight); text-transform: none;
  color: var(--text-heading); padding-right: var(--space-8);
}
.wf-item__b { font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); margin: 0; }


/* ==========================================================================
   RESTORED · three-up case grid and the video frame
   .case3 was left with only a gap rule, so the tiles stacked at full width, and
   .video-frame was lost entirely, so the iframe had no box to fill.
   ========================================================================== */
.case3 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-12); }
@media (min-width: 760px) { .case3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.sec-foot { display: flex; justify-content: center; margin-top: var(--space-12); }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-12);
  background: var(--white-5);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-cap { margin-top: var(--space-5); font-size: var(--t-caption); color: var(--text-on-dark-muted); }


/* ==========================================================================
   RESTORED · text inside the role cards, service cards and FAQ questions
   These five class names had no rule left anywhere after the truncation, so the
   copy inside them fell back to browser defaults.
   ========================================================================== */
.col-light__h {
  font-family: var(--t-font-display); font-weight: 700;
  font-size: var(--text-base); line-height: 1.3;
  color: var(--gray-900); margin: 0 0 var(--space-4);
}
.col-light__b { font-size: var(--t-small); line-height: 1.65; color: var(--gray-600); margin: 0; }

.svcd-card__name {
  font-family: var(--t-font-display); font-weight: 700;
  font-size: var(--text-base); line-height: 1.3;
  color: var(--text-on-dark); margin: 0;
}
.svcd-card__body { font-size: var(--t-small); line-height: 1.6; color: var(--text-on-dark-muted); margin: 0; }

.faq-q-text {
  font-family: var(--t-font-body); font-size: var(--t-body);
  font-weight: var(--weight-semibold); line-height: 1.45; color: var(--text-heading);
}


/* ==========================================================================
   RESTORED · the eight service cards on the dark section (ABA)
   .svcd-grid was left with only a gap and .svcd-card had no base rule at all,
   so the cards had neither columns nor a surface.
   ========================================================================== */
.svcd-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-12); }
@media (min-width: 700px)  { .svcd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svcd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }
.svcd-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  height: 100%; padding: var(--space-8);
  background: var(--white-5);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.svcd-card:hover { border-color: var(--primary-300); background: rgba(255,255,255,.09); }
.svcd-card:focus-visible { outline: 2px solid var(--gray-0); outline-offset: 3px; }
.svcd-card__go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: var(--space-5); min-height: 44px;
  font-size: var(--t-caption); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--primary-300);
}
.svcd-card__go svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.svcd-card:hover .svcd-card__go svg { transform: translateX(4px); }

/* ==========================================================================
   RESTORED · homepage v2 leftovers with no rule left
   .film-foot is the filmstrip caption row; .f3/.f4/.f5 are committee file cards.
   ========================================================================== */
.film-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); margin-top: var(--space-8);
  font-size: var(--t-small); line-height: 1.6; color: var(--text-on-dark-muted);
}
.film-foot b { color: var(--text-on-dark); font-weight: var(--weight-bold); }


/* ==========================================================================
   Block 4 · five steps as a progress track
   These are the five steps between a first call and a booked assessment, so the
   section reads as a walked sequence: a continuous rail down the left, a
   numbered node per step, and the two field labels shown once as column headers.
   Later rows keep the labels for screen readers only. No copy changes.
   ========================================================================== */



@media (min-width: 900px) {

}





@media (min-width: 900px) {

}




@media (min-width: 900px) {

}
@media (max-width: 599px) {


}


/* ==========================================================================
   Block 4 · step track, corrected geometry
   Two faults: the 48px node was offset by only 32px of padding, so it sat on top
   of the copy; and because the field labels are visually hidden on steps 2-5,
   row 1 collapsed there while the right column still targeted row 2, so the two
   columns drifted apart. Rows are now placed explicitly and the rail gets real
   clearance.
   ========================================================================== */




/* labels on row 1, content on row 2, in both columns, so nothing can drift */


@media (min-width: 900px) {


}
/* steps 2-5 hide the labels, so row 1 must still hold its place */



@media (max-width: 899px) {




}
@media (max-width: 599px) {


}


/* ==========================================================================
   Block 4 · step track, settled interaction and rhythm
   Three faults: the hover moved the node, which made the column look like it was
   jumping between 1-2 and 3-4-5; the copy sat flush against the rail with no
   breathing room; and the steps were spaced by their own content height, so the
   nodes were unevenly pitched. Every step now has the same minimum height, so
   the nodes are evenly spaced, and hover only fills the number.
   ========================================================================== */


/* the node no longer scales, so nothing shifts on hover */


/* the row tint is gone; only the number and the title respond */


@media (max-width: 899px) { }
@media (max-width: 599px) { }


/* node centred on the rail regardless of the card's own padding



/* ==========================================================================
   Block 4 · step track, rebuilt as a real grid
   Every previous fix positioned the node absolutely against the card's own box,
   so each padding change moved it back onto the copy. The node is now a grid
   column of its own: nothing overlaps by construction, and the rail sits on that
   column's centre line. No negative offsets anywhere.
   ========================================================================== */




@media (min-width: 900px) {

}


/* the node is a grid item in column 1, not an absolute overlay */



/* labels row 1, title row 2, detail row 3 (or column 3 on desktop) */



@media (min-width: 900px) {


}
/* steps 2-5 hide the labels, so row 1 collapses but keeps its place */


@media (max-width: 599px) {



}


/* ==========================================================================
   RESTORED · the three role cards (.col-light)
   Only the inner text rules survived the truncation, so the cards had no
   surface, padding or border at all.
   ========================================================================== */
.col-light {
  padding: var(--space-8);
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-surface);
}


/* ==========================================================================
   ONE IMAGE HOVER LANGUAGE
   Three different image hovers had accumulated: portraits lifted and saturated,
   case logos only changed opacity, and the photo slots had none at all. They now
   share one behaviour: a 3px lift, full saturation and a warm shadow.
   ========================================================================== */
.hc-person img,
.hc-case__logo img,
.aiw__shot image-slot,
.logo-tile img {
  transition: transform var(--transition-base), filter var(--transition-base),
              box-shadow var(--transition-base), opacity var(--transition-base);
}
.aiw__shot { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.aiw__shot image-slot { display: block; width: 100%; height: 100%; filter: saturate(.92); }
.aiw__shot:hover image-slot {
  transform: translateY(-3px) scale(1.02);
  filter: saturate(1);
}
.aiw__shot:hover { box-shadow: 0 16px 36px -22px rgba(35,31,32,.4); }
.hc-person:hover img { transform: translateY(-3px); filter: saturate(1); box-shadow: 0 16px 36px -22px rgba(35,31,32,.4); }
.hc-case:hover .hc-case__logo img { opacity: 1; transform: translateY(-3px); }


/* ==========================================================================
   FAQ · active question, text restated
   The active row is navy, but .faq-q-text carries its own --text-heading colour,
   which wins over the colour inherited from the row, so the question rendered
   navy on navy. The active state now sets the child colour explicitly rather
   than relying on inheritance.
   ========================================================================== */
.faq-q.active,
.faq-q.active .faq-q-text,
.faq-q[aria-expanded="true"],
.faq-q[aria-expanded="true"] .faq-q-text { color: var(--text-on-dark); }
.faq-q.active .faq-a-inline,
.faq-q[aria-expanded="true"] .faq-a-inline { color: rgba(255,255,255,.85); }
.faq-q.active .faq-a-inline a { color: var(--primary-300); }
/* the vertical pages' accordion uses hc-faq */
.hc-faq__q[aria-expanded="true"],
.hc-faq__q[aria-expanded="true"] .hc-faq__qt { color: var(--text-on-dark); }


/* ==========================================================================
   Photo slots · the tall/wide distinction only exists side by side
   4/5 was authored for the narrow 0.85fr column of the >=1024px grid. Stacked,
   there is no column to bound it, so a portrait ratio at full container width
   produced a taller box (861 -> 1076px) than the 3:2 fallback it replaced.
   Both slots are landscape when stacked; 4/5 applies only inside the two-column
   grid, where it is bounded.
   ========================================================================== */
@media (max-width: 1023px) {
  .aiw__shot--tall,
  .aiw__shot--wide { aspect-ratio: 16 / 9; }
}


/* ==========================================================================
   Filmstrip footer · aligned to the section content
   .film-foot sits outside the section's .container, so its copy ran to the
   viewport edge. It now carries the container's own width and padding, plus real
   separation from the photo collage above and between the line and its button.
   ========================================================================== */
.film-foot {
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-16) auto 0;
  padding: 0 var(--container-padding-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}
.film-foot .l { max-width: 68ch; }
@media (min-width: 1024px) {
  .film-foot { margin-top: var(--space-20); }
}


/* ==========================================================================
   Logo band heading · a section heading, not a label
   ABA still carried the small mono .band-label here while healthcare used an h2,
   so the two pages disagreed. Both are h2 now; the label rule is left for any
   other use but no longer applies to this heading.
   ========================================================================== */
.hc-logos__h { max-width: none; margin: 0; text-align: left; }

/* ==========================================================================
   Practice doors · bigger icons, fewer per row
   Eight tiles four-across left each one narrow enough that the name wrapped
   against a 46px icon, which is what read as cramped. Three per row gives the
   name room and lets the icon carry real weight on the right.
   ========================================================================== */
@media (min-width: 1100px) {
  .hc-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
.hc-door { padding: var(--space-8) var(--space-8) var(--space-6); column-gap: var(--space-6); }
.hc-door__ico { width: 72px; height: 72px; }
.hc-door__ico svg { width: 60px; height: 60px; }
.hc-door__name { font-size: var(--text-xl); }
@media (max-width: 699px) {
  .hc-door__ico { width: 52px; height: 52px; }
  .hc-door__ico svg { width: 44px; height: 44px; }
  .hc-door__name { font-size: var(--text-base); }
}


/* ==========================================================================
   Practice doors · breakpoints made to agree with the intent
   The column change was scoped to >=1100px, but 3 columns already applied from
   700px, so between 700-1099px only the icon and the heading grew: the icon plus
   its gap took 30% of a 280px card and left 162px for a 24px display name, which
   is less room than before. The enlarged icon and name are now scoped to the
   width that actually has the room; tablet drops to 2 columns and keeps the
   original sizes. The gap moves out of the 1100px block so tablet gets it too.
   ========================================================================== */
@media (min-width: 700px) and (max-width: 1099px) {
  .hc-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-door__ico { width: 56px; height: 56px; }
  .hc-door__ico svg { width: 46px; height: 46px; }
  .hc-door__name { font-size: var(--text-lg); }
}
.hc-doors { gap: var(--space-6); align-items: stretch; }
.hc-door { min-height: 208px; }
@media (max-width: 699px) { .hc-door { min-height: 0; } }


/* ==========================================================================
   STEP 2 · NEW COMPONENT FOUNDATION (2026-08-20 pack)
   Block A  #audits    AI Visibility Audit, orange
   Block B  #audits2   AI Readiness Audit, navy, mirrored
   Block C  #team-band full bleed team photograph grid

   Ported from the pack's dap-new-components.css. Every token it asks for
   already exists in this project, so nothing new is introduced. Two changes
   from the source: .pill is scoped to the audit sections, because .client-logo-pill
   also contains the substring and an unscoped rule invites future collisions,
   and .team-line is left as authored since neither page uses that name yet.
   ========================================================================== */

/* ---- the eyebrow pill, with its pulsing dot ---- */
#audits .pill, #audits2 .pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 13px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 16px; border: 1px solid;
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; position: relative; background: currentColor; }
.pill-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: dapPulse 2s cubic-bezier(.23,1,.32,1) infinite;
}
@keyframes dapPulse { 0% { transform: scale(1); opacity: .85 } 70% { transform: scale(4.6); opacity: 0 } 100% { opacity: 0 } }
/* second, offset ring so the pulse reads as a continuous beacon rather than one
   faint ripple, and the pill itself breathes with it */
.pill-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: dapPulse 2s cubic-bezier(.23,1,.32,1) 1s infinite;
}
@keyframes dapPillGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,101,56,0); }
  50%      { box-shadow: 0 0 0 6px rgba(245,101,56,.22); }
}
#audits .pill, #audits2 .pill { animation: dapPillGlow 2s cubic-bezier(.23,1,.32,1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .pill-dot::after, .pill-dot::before { animation: none }
  #audits .pill, #audits2 .pill { animation: none }
}
#audits .pill { background: rgba(255,255,255,.94); border-color: transparent; color: var(--primary-400); }
#audits2 .pill { background: rgba(245, 101, 56,.14); border-color: rgba(245, 101, 56,.45); color: var(--primary-400); }

/* the H2 highlight flips per band: navy-on-orange would read as no highlight */
#audits h2 span { color: #fff !important; }
#audits2 h2 span { color: var(--primary-400) !important; }

/* ---- the four chips ---- */
.aud-chips { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.aud-chip b { font-family: var(--font-display); font-size: 26px; font-weight: 800; display: block; line-height: 1; }
.aud-chip span { font-size: 14px; opacity: .85; }

/* ---- the two column split, mirrored on the navy band ---- */
.aud-split { display: grid; gap: 32px; margin-top: 38px; align-items: start; }
@media (min-width: 1024px) {
  .aud-split { grid-template-columns: .86fr 1.14fr; gap: 44px; }
  #audits2 .aud-split { grid-template-columns: 1.14fr .86fr; }
  #audits2 .aud-left { order: 2; }
  #audits2 .aud-right { order: 1; }
}

/* ---- the accordion ---- */
.acc {
  width: 100%; display: flex; align-items: flex-start; gap: 14px;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.28);
  padding: 18px 0; cursor: pointer; text-align: left; color: #fff;
  font-family: var(--font-display);
}
.acc-n { font-family: var(--font-mono); font-size: 14px; font-weight: 700; opacity: .6; padding-top: 3px; }
.acc-t { font-size: 19px; font-weight: 700; line-height: 1.32; flex: 1; letter-spacing: -.01em; }
.acc-x { width: 22px; height: 22px; flex: 0 0 22px; position: relative; margin-top: 3px; }
.acc-x::before, .acc-x::after { content: ""; position: absolute; background: #fff; transition: transform .25s cubic-bezier(.23,1,.32,1); }
.acc-x::before { left: 0; top: 10px; width: 22px; height: 2px; }
.acc-x::after { left: 10px; top: 0; width: 2px; height: 22px; }
.acc[aria-expanded="true"] .acc-x::after { transform: scaleY(0); }
.acc[aria-expanded="true"] { border-bottom-color: transparent; }
.acc[aria-expanded="true"] .acc-n { opacity: 1; }
.acc-b { border-bottom: 1px solid rgba(255,255,255,.28); padding: 0 0 20px 34px; }
.acc-b p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.88); max-width: 52ch; }
#audits2 .acc, #audits2 .acc-b { border-bottom-color: rgba(255,255,255,.18); }
#audits2 .acc[aria-expanded="true"] { border-bottom-color: transparent; }
#audits2 .acc-b p { color: rgba(255,255,255,.78); }
#audits2 .acc-x::before, #audits2 .acc-x::after { background: var(--primary-400); }

/* ---- CTA and note: white button on orange, primary orange on navy ---- */
.aud-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.aud-ctas .btn { white-space: nowrap; }
#audits .aud-ctas .btn--primary { background: #fff; color: var(--secondary-800); border-color: #fff; }
#audits .aud-ctas .btn--primary:hover { background: var(--gray-100); color: var(--secondary-800); border-color: var(--gray-100); }
.aud-note { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 16px; line-height: 1.55; max-width: 56ch; }
#audits2 .aud-note { color: rgba(255,255,255,.6); }

/* ---- the report screen ---- */
.pane-img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 4px 6px rgba(0,0,0,.05), 0 24px 48px -12px rgba(4,28,44,.28);
}
#audits2 .pane-img { box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); }
.pane-cap { font-size: 14px; color: rgba(255,255,255,.82); margin-top: 14px; line-height: 1.5; }
#audits2 .pane-cap { color: rgba(255,255,255,.62); }

/* ---- Block C, the team band ---- */
.team-sec { padding-block: 0 8px !important; padding-inline: 0 !important; overflow-x: clip; }
.team-sec .container { padding-bottom: 0; }
.team-line { margin: 0 0 22px; font-size: 19px; line-height: 1.6; color: var(--gray-500); max-width: 640px; width: 100%; }
.team-line strong { color: var(--secondary-800); font-weight: 700; }
.team-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 4px;
  position: relative; left: 50%; margin-left: -50vw; width: 100vw;
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-grid figure { margin: 0; overflow: hidden; position: relative; background: var(--secondary-800); aspect-ratio: 3/2; }
.team-grid img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) contrast(1.05);
  transition: filter .45s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1);
}
.team-grid figure:hover img { filter: none; transform: scale(1.05); }
@media (min-width: 768px) { .team-grid .lg { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; } }




/* ==========================================================================
   FIX · pane images reserve their height, and the navy band paints itself
   ========================================================================== */

/* attr() inside aspect-ratio validates by grammar but computes to auto, so the
   previous rule and its @supports guard were both no-ops. Real numbers, keyed on
   the attributes, so any pane image added later is covered by pattern. Three
   distinct ratios across the eight screens. */
.pane-img[width="1520"][height="920"] { aspect-ratio: 1520 / 920; }
.pane-img[width="1520"][height="956"] { aspect-ratio: 1520 / 956; }
.pane-img[width="1520"][height="952"] { aspect-ratio: 1520 / 952; }

/* In this codebase data-theme="dark-section" is a signal, not a paint: every
   genuinely dark section paints itself (#services via .hc-dark plus an inline
   background, #hero via .hc-hero, #cta-band via .hc-closeband). The pack's
   markup assumed the attribute paints, so #audits2 rendered white on white.
   Painted here rather than inline, so the step 2 stylesheet owns it. */
#audits2 { background: var(--bg-section-dark); }


/* ==========================================================================
   #audits2 · the navy surface, stated plainly
   data-theme="dark-section" is a signal in this codebase, not a paint. Every
   other dark section paints itself, so this one does too. Emitted last so no
   earlier rule can win, and with the on-dark text colours restated because the
   component was authored for a dark surface it was never given.
   ========================================================================== */
#audits2 {
  background: var(--secondary-800);
  color: var(--text-on-dark);
}
#audits2 h2 { color: #fff; }
#audits2 .lead { color: rgba(255,255,255,.9); }
#audits2 .aud-chip b { color: #fff; }
#audits2 .aud-chip span { color: rgba(255,255,255,.85); }
#audits2 .acc { color: #fff; }
#audits2 .acc-t { color: #fff; }


/* ==========================================================================
   #audits · white copy on the orange band
   The component's own H2 and lead colours come from the light-mode tokens, which
   render navy on orange. Restated white so the band reads at full contrast.
   The highlight span already flips to white via the step 2 rule.
   ========================================================================== */
#audits h2 { color: #fff; }
#audits .lead { color: #fff; }
#audits .aud-chip b { color: #fff; }
#audits .aud-chip span { color: #fff; }
#audits .acc, #audits .acc-t { color: #fff; }
#audits .acc-b p { color: #fff; }
#audits .aud-note { color: #fff; }
#audits .pane-cap { color: #fff; }


/* ==========================================================================
   #audits2 · the chip row sits in its own framed panel
   Boxed at 10% white with a hairline border, and given the same width as the
   report screen panel below it so the two align down the left edge.
   ========================================================================== */
#audits2 .aud-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding: var(--space-8);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  width: 100%;
}
@media (min-width: 700px) {
  #audits2 .aud-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   #audits · band darkened one step, highlight distinguished without colour
   White copy on --accent-main #F56538 measures 3.48:1, so the five small-text
   elements failed 4.5:1 and no text tweak could fix it. --primary-500 #F56538
   is still unmistakably orange and clears 4.63:1 for all of them. Same
   precedent this codebase already set for #main-content .btn--primary.
   The H2 is now white, so a white highlight span would read as no highlight at
   all, which the prompt forbids. The span gets a solid navy chip instead, a
   distinction that survives a white H2.
   ========================================================================== */
#audits { background: var(--primary-400); }
#audits h2 span {
  color: #fff !important;
  background: var(--secondary-800);
  padding: 0 .28em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* ==========================================================================
   #audits · the chip row framed, matching the navy band
   Same panel treatment already applied to #audits2: 10% white, hairline border,
   14px radius to match the pane below, full container width.
   ========================================================================== */
#audits .aud-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding: var(--space-8);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  width: 100%;
}
@media (min-width: 700px) {
  #audits .aud-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   #aba-steps · the ribbon runs 80% of the container width
   The box was pinned at 720px so the 14px numerals stayed 14px. Widening it
   scales the viewBox, so the numerals scale down with it: the font-size is
   raised to compensate and land back above the 14px floor. Aspect ratio is
   preserved by the viewBox, so the figure of eight is not distorted.
   ========================================================================== */
@media (min-width: 900px) {
  .lem__svg { width: 70%; height: auto; aspect-ratio: 720 / 400; }
  /* at 80% of a 1360px container the box is ~1088px, a 1.51x scale, so a
     declared 14px lands near 21px on screen; 10px declared reads as ~15px */

}
@media (min-width: 1200px) {
  /* wider containers scale further, so the declared size drops again */

}



.lem-seg__ico { width: 26px; height: 26px; }
.lem-seg__ico svg { width: 100%; height: 100%; }


/* the team band zeroes its own padding so the grid can run edge to edge; that
   also removed its top separation, so the copy line carries it instead */
.team-sec .container { padding-top: var(--section-padding-y); }


/* the four named workflows read as one row, matching the role cards above.
   The wide photo slot moves above them rather than sharing their row, so the
   four cards get the full container width. */
@media (min-width: 1024px) {
  /* the photo stays where it was; the four cards stack one per row beside it */
  .aiw__flows .wf-grid,
  .aiw__flows .hc-flows { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  /* the photo stretches to the height of the four stacked cards, plus a little */
  .aiw__flows { align-items: stretch; }
  .aiw__flows .aiw__shot--wide {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
  .aiw__flows .aiw__shot--wide image-slot,
  .aiw__flows .aiw__shot--wide img { height: 100%; object-fit: cover; }
}


/* the tall photo matches the height of the three role cards beside it */
@media (min-width: 1024px) {
  .aiw { align-items: stretch; }
  .aiw__shot--tall { aspect-ratio: auto; height: 100%; min-height: 0; }
  .aiw__shot--tall image-slot,
  .aiw__shot--tall img { height: 100%; object-fit: cover; }
}


/* ==========================================================================
   SECTION RHYTHM · one spacing rule for every band
   Four sections carried their own block padding, so the page had four different
   gaps: .hc-strip at space-12 then space-16, .hc-audits at space-20, #trust-bar
   split 16 top and 16 bottom outside the scale, and .team-sec zeroed with a
   separate top on its container. They all take --section-padding-y now, which
   scales 40/48/64/80 across the breakpoints, so top always equals bottom.
   The team band keeps zero inline padding, because its grid runs edge to edge;
   its vertical rhythm lives on the container instead.
   ========================================================================== */
.hc-strip { padding: var(--section-padding-y) 0; }
#audits { padding: var(--section-padding-y) 0; }
#audits2 { padding: var(--section-padding-y) 0; }
#trust-bar { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.team-sec { padding-block: 0 !important; }
.team-sec .container { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }


/* the two audit bands are the heaviest blocks on the page, so they take the
   section rhythm plus a step, the same treatment the hero already gets */
#audits, #audits2 { padding: calc(var(--section-padding-y) + var(--space-12)) 0; }


/* ==========================================================================
   Audit CTAs · the label wraps at phone width instead of overflowing
   The pack's rule sets white-space: nowrap on .aud-ctas .btn, and btn--lg adds
   64px of horizontal padding at 18px type, so the intrinsic width is ~420-431px
   against a 342px content box at 390px viewport. The parent's flex-wrap only
   wraps BETWEEN items, never inside a nowrap button, so the label has to be
   allowed to break. Height goes auto because btn--lg pins a fixed height a
   two-line label would spill out of.
   ========================================================================== */
@media (max-width: 480px) {
  .aud-ctas .btn {
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 48px;
    padding: var(--space-4) var(--space-6);
    line-height: 1.35;
  }
}

/* the ribbon's base rule pins 720px, which is exactly flush inside the ~720px
   content box between 760 and 899px; a cap removes that zero tolerance */
.lem__svg { max-width: 100%; }


/* ==========================================================================
   QA step 2 · #problem compacted to fit inside one viewport
   Reviewed at 1728x1117 where the section took the full scroll. Five rows at
   132px minimum plus a space-16 top margin and a space-12 closing line came to
   roughly 1090px of content. The rows now size to their copy, the badge and the
   heading step down, and the closing line tightens: the whole section lands
   near 620px, which is inside two thirds of a 1117px viewport.
   ========================================================================== */
@media (min-width: 900px) {


  /* the base rule sets position:static on this pseudo-element, so no offset here */



  .prob-close { margin-top: var(--space-8); font-size: var(--t-body); }

  /* DEFECT 2: rows were never the dominant cost. Section padding runs 160px at
     >=1280px and the heading block another ~201px, so trimming rows alone could
     not clear 745px. Both are cut for this section only. */
  #problem { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  #problem > .container > .hc-lead {
    font-size: var(--t-body);
    line-height: 1.55;
    max-width: 62ch;
    margin-bottom: var(--space-8);
  }
  #problem > .container > .hc-h2 { margin-bottom: var(--space-4); }
}


/* ==========================================================================
   QA step 3 · services strip compacted
   Reviewed at 1728x1117. Eight chips at space-5 padding on a 4-column grid gave
   two tall rows, and the band carried the full section rhythm on top. The chips
   step down, the grid tightens, and the band takes a reduced pad, so the strip
   drops from roughly 400px to about 250px.
   ========================================================================== */
@media (min-width: 900px) {
  .hc-strip { padding: var(--space-12) 0; }
  .hc-strip .hc-strip__h { margin-bottom: var(--space-6); }
  .hc-strip .hc-strip__items { gap: var(--space-4); margin-bottom: var(--space-6); }
  .hc-strip .hc-chip {
    padding: var(--space-4) var(--space-5);
    font-size: var(--t-small);
    line-height: 1.25;
  }
}


/* ==========================================================================
   QA step 4 · both audit bands compacted
   Reviewed at 1728x1117. Each band carried the section rhythm plus a space-12
   step, 160px of chip panel, 18px accordion rows at 19px type, and a report
   screen with no height ceiling, so neither fit one viewport. The band takes a
   flat pad, the chip panel and accordion rows step down, and the screen is
   capped so it cannot drive the band past two thirds of the viewport.
   ========================================================================== */
@media (min-width: 900px) {
  #audits, #audits2 { padding: var(--space-16) 0; }
  #audits .pill, #audits2 .pill { margin-bottom: 12px; }
  #audits h2, #audits2 h2 { margin-bottom: var(--space-4); }
  #audits .lead, #audits2 .lead { font-size: var(--t-body); line-height: 1.55; max-width: 66ch; }
  #audits .aud-chips, #audits2 .aud-chips { padding: var(--space-5); gap: var(--space-4); margin-top: var(--space-6); }
  .aud-chip b { font-size: 21px; }
  .aud-split { margin-top: var(--space-8); gap: var(--space-10); }
  .acc { padding: 12px 0; }
  .acc-t { font-size: 16px; line-height: 1.3; }
  .acc-b { padding-bottom: 14px; }
  .acc-b p { font-size: var(--t-caption); line-height: 1.55; }
  .aud-ctas { margin-top: var(--space-6); }
  .aud-note { margin-top: 10px; font-size: var(--t-caption); }
  /* the screen had no ceiling, so a 1520x956 asset set the band height */
  /* width stays definite: width:auto on a lazy image computes 0x0 and never loads */
  .pane-cap { margin-top: 10px; font-size: var(--t-caption); }
}


/* the screen column is capped too, so a tall asset cannot set the band height */
@media (min-width: 900px) {
  #audits .acc-b p, #audits2 .acc-b p { max-width: 46ch; }
}


/* ==========================================================================
   QA step 5 · case studies compacted
   Reviewed at 1728x1117. Three tiles at space-8 padding plus a space-12 CTA gap
   and the full section rhythm pushed the band past one viewport. The tiles step
   down, the CTA tightens, and the section takes a reduced pad.
   ========================================================================== */
@media (min-width: 900px) {
  #cases { padding: var(--space-16) 0; }
  #cases > .container > .hc-h2 { margin-bottom: var(--space-4); }
  .case3 { gap: var(--space-5); margin-top: var(--space-8); }
  .hc-case { padding: var(--space-6); gap: var(--space-3); }
  .hc-case__head { font-size: var(--t-body); line-height: 1.35; }
  .hc-case__logo img { max-height: 44px; }
  .sec-foot { margin-top: var(--space-8); }
}


/* ==========================================================================
   QA step 6 · #how-we-help compacted
   Reviewed at 1728x1117. The ribbon ran 70% of the container on a 720/400
   ratio, so at 1360px it drew ~530px tall on its own, plus the heading block
   and the detail panel. The ribbon comes down to 52%, the panel tightens, and
   the section takes the reduced pad the other bands now use.
   ========================================================================== */
@media (min-width: 900px) {
  #how-we-help { padding: var(--space-16) 0; }
  #how-we-help > .container > .hc-h2 { margin-bottom: var(--space-4); }
  #how-we-help > .container > .hc-lead { font-size: var(--t-body); line-height: 1.55; margin-bottom: var(--space-6); }
  .lem { margin-top: var(--space-6); gap: var(--space-10); }
  .lem__svg { width: 52%; }
  .lem__panel { padding: var(--space-6); }
  .lem__name { font-size: var(--text-lg); margin: var(--space-2) 0 var(--space-3); }
  .lem__body { font-size: var(--t-caption); line-height: 1.55; }
}


/* ==========================================================================
   QA step 7 · ribbon detail moves beside the diagram
   The panel sat under the ribbon and read as a caption rather than a linked
   detail, and nothing looked selected until the JS ran. The panel now sits in
   a second column at desktop, left-aligned, and the first segment is marked
   active in the markup so 01 is loaded on arrival.
   ========================================================================== */
@media (min-width: 1024px) {
  .lem {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: center;
    gap: var(--space-12);
  }
  .lem__svg { width: 100%; margin: 0; }
  .lem__panel {
    margin: 0;
    max-width: none;
    text-align: left;
  }
}

/* the slide exports fill their figure the same way the slots did */
.aiw__shot img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }


/* ==========================================================================
   QA step 8 fix · the reporting slides get their own full-width band
   A 2646x1486 information-dense slide was dropped into a figure built for
   portrait team photography: object-fit: cover cropped 56% away, and the render
   scale of 0.29 put body copy near 8.8px, well under the 14px floor. The slides
   now sit one per row at full container width on a 16:9 figure, so nothing is
   cropped and the scale reaches roughly 0.51, which puts source 30px body copy
   near 15px on screen.
   ========================================================================== */
.slide-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
.slide-shot { margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--secondary-900); }
.slide-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* the photo slots keep contain too, so a non-photo asset can never be cropped */
.aiw__shot img { object-fit: contain; }


/* the band is its own section now, so it spans the container rather than taking
   a 1.15fr track inside .aiw__flows. One slide per row at full width, and the
   pair sits outside #how-ai-works so neither section breaks the two-thirds rule. */
#reporting { padding: var(--space-16) 0; }
#reporting .slide-band { margin-top: 0; }
.slide-band { grid-column: 1 / -1; }
/* the stale desktop override outranked the contain rule by specificity */
@media (min-width: 1024px) {
  .aiw__flows .aiw__shot--wide img { object-fit: contain; }
}


/* ==========================================================================
   QA step 8 final · thumbnails in page, full size on click
   A full-container 16:9 figure is 765px tall before padding, so a readable
   in-page slide and the 745px section cap cannot both hold. The slides render
   as a two-up thumbnail row, which keeps #reporting near 540px, and open at
   full viewport size on click, where the source renders at scale 1.0.
   ========================================================================== */
#reporting { padding: var(--space-16) 0; }
.slide-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: 0; }
@media (min-width: 900px) { .slide-band { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.slide-shot {
  margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--secondary-900); border: 1px solid var(--border-default);
  cursor: zoom-in; position: relative;
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.slide-shot:hover { transform: translateY(-3px); border-color: var(--accent-main); }
.slide-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slide-shot::after {
  content: "Click to enlarge";
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: var(--t-font-mono); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(4,28,44,.82); padding: 6px 12px; border-radius: var(--radius-full);
  pointer-events: none;
}
/* the lightbox: the slide at full viewport size, where it is genuinely readable */
.slide-lb {
  position: fixed; inset: 0; z-index: 2000; display: none;
  place-items: center; padding: var(--space-8);
  background: rgba(4,28,44,.94);
}
.slide-lb[open] { display: grid; }
.slide-lb img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; }
.slide-lb__x {
  position: absolute; top: var(--space-6); right: var(--space-6);
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 2px solid rgba(255,255,255,.5); color: #fff;
  font-size: var(--text-lg); cursor: pointer;
}
.slide-lb__x:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ROOT CAUSE 2: .aud-right was capped at 430px but .aud-left had no ceiling, so
   the accordion column set the 873px row height. Both columns are capped now. */
@media (min-width: 900px) {
  #audits .aud-left, #audits2 .aud-left { max-height: 430px; overflow: hidden; }
  #audits .acc-b, #audits2 .acc-b { padding-bottom: 10px; }
  #audits .acc-b p, #audits2 .acc-b p { font-size: var(--t-caption); line-height: 1.5; max-width: 44ch; }
  #audits .aud-split, #audits2 .aud-split { align-items: start; }
}


/* ==========================================================================
   QA sizing pass, final · height taken out of the content, not clamped
   The previous round capped .aud-left with overflow: hidden, which silently cut
   the default-open body by 8px and would swallow any future copy edit. The
   ceiling is removed. Instead the four remaining costs come down: the heading
   block, the chip panel, the accordion type, and the section padding. Same for
   #problem and #how-ai-works, which were 750px and 946px.
   ========================================================================== */
@media (min-width: 900px) {
  /* no clamp on a variable-height column: nothing can be lost */
  #audits .aud-left, #audits2 .aud-left { max-height: none; overflow: visible; }

  /* the heading block and chip panel carry the rest of the reduction */
  #audits, #audits2 { padding: var(--space-12) 0; }
  #audits .lead, #audits2 .lead { font-size: var(--t-small); line-height: 1.5; max-width: 62ch; }
  #audits .aud-chips, #audits2 .aud-chips { padding: var(--space-4); gap: var(--space-3); margin-top: var(--space-5); }
  .aud-chip b { font-size: 18px; }
  .aud-chip span { font-size: var(--t-caption); }
  .aud-split { margin-top: var(--space-6); }
  .acc { padding: 9px 0; }
  .acc-t { font-size: 15px; line-height: 1.28; }
  .acc-b { padding: 0 0 10px 30px; }
  .acc-b p { font-size: var(--t-caption); line-height: 1.45; max-width: 46ch; }
  .aud-ctas { margin-top: var(--space-5); }

  /* #problem was 750px: the closing line and the last row carry the 5px */
  #problem { padding: var(--space-12) 0; }
  .prob-close { margin-top: var(--space-6); font-size: var(--t-small); }

  /* #how-ai-works was 946px: the roles column and the flow cards step down */
  #how-ai-works { padding: var(--space-12) 0; }
  #how-ai-works > .container > .hc-lead { font-size: var(--t-small); line-height: 1.5; margin-bottom: var(--space-6); }
  .aiw { margin-top: var(--space-8); gap: var(--space-10); }
  .aiw__flows { margin-top: var(--space-10); }
  .col-light, .hc-col { padding: var(--space-5); }
  .col-light__h, .hc-col__h { font-size: var(--t-body); margin-bottom: var(--space-3); }
  .col-light__b, .hc-col__b { font-size: var(--t-caption); line-height: 1.5; }
  .wf-item, .hc-flow { padding: var(--space-5) var(--space-5) var(--space-4); }
  .wf-item__n, .hc-flow__n { font-size: var(--t-small); }
  .wf-item__b, .hc-flow__b { font-size: var(--t-caption); line-height: 1.45; }
}


/* ==========================================================================
   #how-ai-works · single column now that the slide figures are gone
   The two-column rules existed to place a photo beside the content. The step-8
   rework removed those figures, so col 2 rendered empty in both rows and the
   four flow cards were squeezed into a 345px track. Both rows go single column
   and the cards spread across the full container.
   ========================================================================== */
@media (min-width: 1024px) {
  /* only where the photo figure is absent, which is aba after the slides moved
     to #reporting; healthcare still has both figures and keeps photo-left */
  .aiw:not(:has(.aiw__shot)) { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .aiw:not(:has(.aiw__shot)) .aiw__roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .aiw__flows:not(:has(.aiw__shot)) { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .aiw__flows:not(:has(.aiw__shot)) .wf-grid,
  .aiw__flows:not(:has(.aiw__shot)) .hc-flows { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  /* the stretched-row height only makes sense next to a sibling column */
  .aiw:not(:has(.aiw__shot)) .aiw__shot--tall { aspect-ratio: 16 / 9; height: auto; }
}

/* #audits was 811px: the h2 ran two lines at display scale and the default-open
   accordion body set the split. Both step down; nothing is clamped. */
@media (min-width: 900px) {
  #audits h2, #audits2 h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; max-width: 30ch; }
  #audits .acc-b p, #audits2 .acc-b p { max-width: 42ch; }
}


/* ==========================================================================
   healthcare #how-ai-works · the roles column goes multi-column in its track
   The 3-up rule was scoped to the figure-absent case, so healthcare kept a
   single stack of three cards and the tall photo inherited that height through
   height:100%. The roles now sit 3-up inside their own track, the photo takes a
   ratio instead of the stack height, and the closing note spans the row.
   ========================================================================== */
@media (min-width: 1024px) {
  /* The figure-present case keeps its two columns: photo right of the roles in
     .aiw, photo left of one-per-row cards in .aiw__flows. The height driver was
     the role-card CONTENT, so that is what comes down, inside its own track. */
  .aiw:has(.aiw__shot) .col-light,
  .aiw:has(.aiw__shot) .hc-col { padding: var(--space-4); }
  .aiw:has(.aiw__shot) .col-light__h,
  .aiw:has(.aiw__shot) .hc-col__h { font-size: var(--t-small); margin-bottom: var(--space-2); }
  .aiw:has(.aiw__shot) .col-light__b,
  .aiw:has(.aiw__shot) .hc-col__b { font-size: var(--t-caption); line-height: 1.45; }
  .aiw:has(.aiw__shot) .aiw__roles { gap: var(--space-3); }
  /* the closing note spans the row instead of falling into the photo track */
  .aiw__flows .hc-note { grid-column: 1 / -1; }
}


/* ==========================================================================
   healthcare #how-ai-works · card groups go multi-column inside their tracks
   Each row pairs a photo with a single-track card stack, so the photo inherits
   the stack height via height:100% and both rows are tall by construction. The
   groups now use their track width: roles 3-up, flows 2-up, which takes the two
   rows from 307+416 to roughly 150+200 without collapsing the paired columns.
   ========================================================================== */
@media (min-width: 1024px) {
  .aiw:has(.aiw__shot) .aiw__roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  /* one card per line, at the same specificity as the aba 4-up rule so it wins */
  .aiw__flows:has(.aiw__shot) .hc-flows { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}


/* with the wide photo gone, the flows row is a single full-width column */
@media (min-width: 1024px) {
  .aiw__flows:not(:has(.aiw__shot)) { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   QA step 10 · body copy stops competing with the titles
   Every line in these blocks sat at 700/800 display weight, so nothing read as
   body text. Titles keep their weight; the supporting lines drop to regular so
   there is a hierarchy to read against.
   ========================================================================== */
.acc-b p,
.col-light__b, .hc-col__b,
.wf-item__b, .hc-flow__b,

/* the eyebrow-style labels stay uppercase but lose the heavy weight */



/* ==========================================================================
   QA step 11 · practice door icons move above the title
   The icon sat in column 2 beside the name, so the two competed for one row and
   the tile read as crowded. The icon takes its own row at the top, the title and
   sub line follow, and the go label stays pinned to the bottom.
   ========================================================================== */
.hc-door {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  row-gap: var(--space-3);
}
.hc-door__ico { grid-column: 1; grid-row: 1; }
.hc-door__name { grid-column: 1; grid-row: 2; }
.hc-door__sub { grid-column: 1; grid-row: 3; }
.hc-door__go { grid-column: 1; grid-row: 4; align-self: end; }


/* ==========================================================================
   QA step 14 · FAQ becomes a single-column inline accordion
   The split panel left a large empty column until a question was clicked, which
   is what read as unfinished. The answer now opens in place beneath its own
   question, using the .faq-a-inline element already in the markup for mobile,
   so no copy moves and the sticky panel is retired.
   ========================================================================== */
.faq-split { display: block !important; }
.faq-panel { display: none !important; }
.faq-q-list { max-width: 76ch; }
.faq-a-inline {
  display: none;
  padding: 0 var(--space-6) var(--space-6) 3.2ch;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 72ch;
}
.faq-q.active + .faq-a-inline,
.faq-q[aria-expanded="true"] + .faq-a-inline { display: block; }
.faq-q.active + .faq-a-inline a { color: var(--accent-main); font-weight: var(--weight-semibold); }
/* the active row is a plain rule now, not a filled navy block, so the answer
   beneath it reads as one unit with its question */
.faq-q.active {
  background: none;
  color: var(--text-heading);
  border-radius: 0;
  padding-left: var(--space-6);
}
.faq-q.active .faq-q-text { color: var(--accent-main); }
.faq-q.active::before { color: var(--accent-main); }
.faq-item-wrap:has(.faq-q.active) { border-bottom-color: var(--border-default); }


/* ==========================================================================
   Accent text on the light surfaces
   Pulling the greys back restored the headroom --gray-500 body copy needed, but
   --accent-main #F56538 still measures 2.91 on the alt band and 3.15 on the page
   grey, so small accent text and the H2 highlight both fail. Those uses move to
   --primary-700, which is the same step this codebase already uses for accent
   text on white. The accent stays untouched on dark surfaces and on fills, so
   the strong DAP orange still carries the buttons and the bands.
   ========================================================================== */
.faq-q.active .faq-q-text,
.faq-q[aria-expanded="true"] .faq-q-text { color: var(--primary-400) !important; }
.hc-person__r { color: var(--primary-400); }
main > section:not([data-theme="dark-section"]):not(.hc-audits) .hl { color: var(--primary-400); }

/* the audit chips sat on a 10% WHITE panel, which lightened the orange band
   underneath and dropped white-on-panel to 4.06. A dark tint deepens it instead,
   so the same framed panel now helps the text rather than fighting it. */


/* the last two accent labels on light surfaces: the logo-band link, which no
   earlier pass covered, and the audit pill, marginal at 4.25 on its near-white
   chip. Both take the same step every other accent label on light now uses. */
.hc-logolink { color: var(--primary-400); }
#audits .pill { color: var(--primary-400); }


/* ==========================================================================
   Audit band · the strong DAP orange, and the report screen at full width
   The band was darkened to --primary-500 for small-text contrast, which reads
   brick. Back to --primary-500 per instruction; the small copy is solid white
   rather than alpha-white so it keeps as much headroom as the brand orange
   allows. The report screen was rendering at roughly half its column because
   the earlier aspect-ratio reservation left the img without an explicit width.
   ========================================================================== */
#audits { background: var(--primary-400); }

.aud-right .pane-img,
#audits .pane-img,
#audits2 .pane-img { width: 100%; max-width: none; height: auto; }


/* ==========================================================================
   Audit screens · the height ceilings removed
   The scroll-budget step capped .aud-right at 300px and .pane-img at 270px with
   object-fit: contain. With a 1520x920 screen that ceiling decides the width,
   so the image rendered at roughly a third of its column. The section is allowed
   to be as tall as its content again, and the screen fills its column.
   ========================================================================== */
#audits .aud-right, #audits2 .aud-right { max-height: none; }
#audits .pane-img, #audits2 .pane-img { max-height: none; width: 100%; height: auto; }


/* The accordion column still carried a 430px ceiling with overflow: hidden from
   the scroll-budget round. That silently clips whichever answer is open and
   would swallow any future copy edit without warning, which is the same failure
   as the crushed report screen. The column is allowed to be as tall as its copy. */
#audits .aud-left, #audits2 .aud-left { max-height: none; overflow: visible; }


/* the proof numbers take the brand orange explicitly, so no inherited or
   hover-state value can pull them toward the brick step again */
#trust-bar .hc-proof__v { color: var(--primary-400); }
.hc-proof__v { color: var(--primary-400); }


/* The chip panel used a black tint to buy text contrast, but black over #F56538
   composites to a brick tone, which is what still read as the old darkened
   orange. A white tint lightens the panel instead, so nothing on the band
   leaves the orange family. */
#audits .aud-chips { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.40); }


/* #F56538 reads red-leaning at full-band scale, which is what kept looking like
   the old brick. The bands and the accent text move up one step to
   --primary-400 #F56538, the brightest orange in the scale that is still brand. */
#audits { background: var(--primary-400); }
#trust-bar .hc-proof__v, .hc-proof__v { color: var(--primary-400); }


/* the base eyebrow and the accent text on dark sections were pinned at
   --primary-500, so they kept the red-leaning tone after the accent moved up.
   Both follow the token now. */
.eyebrow { color: var(--accent-main); }
[data-theme="dark-section"] .eyebrow, [data-theme="dark-section"] .hl { color: var(--accent-main); }
.hc-formcard .eyebrow { color: var(--accent-main); }
.text-accent { color: var(--accent-main); }


/* the Meet the Full Team button sits below the people grid on all three pages */
.team-cta { margin-top: var(--space-12); }


/* ==========================================================================
   Client logo band · continuous marquee, no cards, no borders
   A bordered cell reads as one item in a countable set; a continuous strip reads
   as a sample of many. No dots, no arrows: those announce a finite length. The
   track holds its contents twice and translates -50%, so it loops seamlessly
   with no JavaScript. Pauses on hover and keyboard focus so a visitor can read a
   mark they recognise, and degrades to a scrollable row when the visitor has
   asked for reduced motion, which on an ABA page is a real requirement.
   ========================================================================== */
.logo-strip {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-10);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-strip:focus-visible { outline: 3px solid var(--accent-main); outline-offset: 4px; }
.logo-strip__track {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: max-content;
  animation: logo-scroll 120s linear infinite;
}
.logo-strip:hover .logo-strip__track,
.logo-strip:focus-within .logo-strip__track { animation-play-state: paused; }

/* no cell, no border, no surface: just the mark */
.logo-strip .client-logo-pill,
.logo-strip .logo-tile {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  flex: 0 0 auto;
  transform: none;
}
.logo-strip img {
  height: 46px;
  width: auto;
  max-height: none;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--transition-base), opacity var(--transition-base);
}
.logo-strip a:hover img,
.logo-strip a:focus-visible img { filter: none; opacity: 1; }
.logo-strip a:hover, .logo-strip a:focus-visible { transform: none; border-color: transparent; }

/* text-only clients get a monogram lockup rather than raw text beside real marks */
.logo-lockup { display: inline-flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; text-decoration: none; }
.logo-lockup__mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--secondary-800); color: #fff;
  font-family: var(--t-font-display); font-weight: 800; font-size: var(--t-small);
  letter-spacing: .02em; flex: none;
}
.logo-lockup__name {
  font-family: var(--t-font-display); font-weight: 700; font-size: var(--t-small);
  line-height: 1.25; color: var(--secondary-800); white-space: nowrap;
  opacity: .62; transition: opacity var(--transition-base);
}
.logo-lockup:hover .logo-lockup__name, .logo-lockup:focus-visible .logo-lockup__name { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .logo-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-strip__track { animation: none; }
  /* the duplicate run is noise once it no longer scrolls */
  .logo-strip__track > [data-dup] { display: none; }
}


/* ==========================================================================
   Case tiles · the client logo leads the card
   The logo sat in a reserved 30% right column, which pushed the headline into a
   narrow measure and left dead space on tiles whose art is small. It now sits
   above the text at a fixed height, so every tile reads top to bottom and the
   headline gets the full width.
   ========================================================================== */
.hc-case {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hc-case__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  margin-bottom: var(--space-2);
}
.hc-case__logo img {
  max-height: 40px;
  max-width: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
.hc-case__client, .hc-case__head, .hc-case__go { grid-column: auto; grid-row: auto; }
.hc-case__go { margin-top: auto; }


/* ==========================================================================
   Committee chips · receipts, not disabled tags
   The chips were a pale grey fill with grey text, which reads as something
   switched off rather than a claim that has been verified. The section calls
   them receipts, so they look like receipts: no fill, an accent hairline, navy
   text at weight, and a check mark carrying the accent. Nothing muted.
   ========================================================================== */
[data-screen-label="committee"] .file .chip,
.file .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1.5px solid color-mix(in srgb, var(--accent-main) 45%, transparent);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
  font-family: var(--t-font-body);
  font-size: var(--t-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  color: var(--secondary-800);
  transition: border-color var(--transition-base), background var(--transition-base);
}
[data-screen-label="committee"] .file .chip::before,
.file .chip::before {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent-main);
  border-bottom: 2px solid var(--accent-main);
  transform: rotate(-45deg) translateY(-2px);
  flex: none;
}
[data-screen-label="committee"] .file:hover .chip,
.file:hover .chip {
  border-color: var(--accent-main);
  background: color-mix(in srgb, var(--accent-main) 8%, transparent);
}


/* ==========================================================================
   Logo marquee · the missing keyframe, and the card treatment beaten
   .logo-strip__track animated "logo-scroll", but that keyframe was never
   defined, so the strip sat still. The track duplicates its own contents, so
   translating -50% lands exactly on the copy and loops with no visible seam and
   no JavaScript. The .hc-logos card rules are declared later in this file than
   the strip reset, so the pills kept their borders; scoped inside .logo-strip
   they lose them for good.
   ========================================================================== */


.logo-strip .client-logo-pill,
.logo-strip .logo-tile,
.hc-logos .logo-strip .client-logo-pill,
.hc-logos .logo-strip .logo-tile {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
}
/* the pill rule is (0,3,0) and carries height:auto, which beat the strip's
   height:46px; lifting its max-height then removed the only remaining cap, so
   the logos rendered full size. The height is restated at the same specificity. */
.hc-logos .logo-strip .client-logo-pill img,
.hc-logos .logo-strip .logo-tile img { height: 46px; width: auto; max-height: 46px; }
.hc-logos .logo-strip a.client-logo-pill:hover,
.hc-logos .logo-strip a.logo-tile:hover { transform: none; border-color: transparent; }
/* text-only clients keep a monogram lockup rather than raw text beside real art */
.logo-strip .logo-tile__name {
  font-family: var(--t-font-display);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--secondary-800);
  white-space: nowrap;
  opacity: .62;
  transition: opacity var(--transition-base);
}
.logo-strip a:hover .logo-tile__name { opacity: 1; }


/* ==========================================================================
   Healthcare · the audits and the surrounding blocks scaled down
   Same note as the ABA page: the bands and their type were set for a wider
   canvas, so every element read oversized. The audit type, chips, accordion and
   the report screens all come down a step; nothing is capped in height, so no
   copy can be clipped the way the earlier ceilings clipped it.
   ========================================================================== */
#audits .hc-h2, #audits2 .hc-h2 { font-size: clamp(22px, 2vw, 30px); }
#audits .hc-lead, #audits2 .hc-lead { font-size: var(--t-body); }
.aud-chip b { font-size: 21px; }
.aud-chip span { font-size: var(--t-caption); }
.acc-t { font-size: var(--t-body); }
.acc-b p { font-size: var(--t-caption); line-height: 1.6; }
.pane-cap { font-size: var(--t-caption); }
.aud-note { font-size: var(--t-caption); }
@media (min-width: 1024px) {
  .aud-split { gap: var(--space-12); }
  #audits, #audits2 { padding: calc(var(--section-padding-y) + var(--space-6)) 0; }
}
/* the report slides sit as thumbnails, click to enlarge */
.slide-shot { margin: 0; }
.slide-shot__btn { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.slide-shot__btn img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 18px 40px -22px rgba(4,28,44,.45); }
.slide-shot__btn:focus-visible { outline: 3px solid var(--accent-main); outline-offset: 3px; }
.slide-shot__cap { margin-top: var(--space-3); font-size: var(--t-caption); color: var(--text-muted); line-height: 1.5; }
.slide-lightbox { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: var(--space-10); background: rgba(4,28,44,.92); }
.slide-lightbox[hidden] { display: none; }
.slide-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; }
.slide-lightbox__close { position: absolute; top: var(--space-8); right: var(--space-8); width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.slide-lightbox__close:hover { border-color: #fff; }


/* ==========================================================================
   Eight-step ribbon · the diagram stays put, the panel picks its side
   The panel always sat to the right of a centred ribbon, so selecting a segment
   on the left half sent the eye across the whole figure to read it. The ribbon
   is now centred in a three-column grid and the panel occupies the column on
   the same side as the active segment: JS sets data-side on the container, so
   selecting 05 to 08 (the left loop) puts the copy on the left.
   Body and subhead type both come up two points.
   ========================================================================== */
@media (min-width: 1100px) {
  .lem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
  }
  .lem__svg { grid-column: 2; grid-row: 1; margin: 0; }
  .lem__panel { grid-column: 3; grid-row: 1; margin: 0; max-width: none; text-align: left; }
  .lem[data-side="left"] .lem__panel { grid-column: 1; }
}
/* two points up on the panel copy and the section subhead */
.lem__name { font-size: calc(var(--text-xl) + 2px); }
.lem__body { font-size: calc(var(--t-small) + 2px); line-height: 1.7; }
#how-we-help .hc-lead { font-size: calc(var(--t-body) + 2px); }


/* ==========================================================================
   Card bodies read as body copy, and the logo sits above the text
   .hc-case__head is the result sentence, not a title, so 700 made a whole grid
   of unreadable bold. Same for the .hc-svc and .svcd bodies. The client logo
   moves out of its reserved right column and sits above the copy, so nothing is
   squeezed into a narrow measure beside it.
   ========================================================================== */

.hc-case__head { font-size: var(--t-small); line-height: 1.6; color: var(--text-muted); }

/* single column, logo first */
.hc-case { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; row-gap: var(--space-3); }
.hc-case__logo {
  grid-column: 1; grid-row: 1;
  justify-content: flex-start; align-items: center;
  height: 34px; margin-bottom: var(--space-2);
}
.hc-case__logo img { max-height: 34px; max-width: 150px; object-position: left center; }
.hc-case__client { grid-column: 1; grid-row: 2; }
.hc-case__head   { grid-column: 1; grid-row: 3; }
.hc-case__go     { grid-column: 1; grid-row: 4; }


/* the strip reset was scoped to .hc-logos, so the ABA strip kept the base
   .logo-tile card and its 220px flex basis, which pushed one tile out as a
   full-width white block. Scoped to the strip, both pages get the same reset. */
.logo-strip .logo-tile,
.logo-strip .client-logo-pill {
  flex: 0 0 auto !important;
  width: auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.logo-strip .logo-tile img,
.logo-strip .client-logo-pill img { height: 46px !important; width: auto !important; max-height: 46px !important; max-width: 180px !important; }


/* the track is width:max-content but never declared nowrap, so the last tile
   wrapped to a second line and stretched full width below the strip */
.logo-strip { overflow: hidden; }


/* ==========================================================================
   V3 · DARK CONSOLE
   The whole section on navy so the two reports read as lit screens rather than
   pictures on a page. Roles run as a three-up strip above them, workflows as a
   four-up rail below. The most striking of the three, and it doubles as a
   chapter break in the page's rhythm.
   ========================================================================== */
#how-ai-works { background: var(--gray-0); border-top-color: transparent; }
.aiw-roles { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 900px) { .aiw-roles { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.aiw-role {
  padding: var(--space-8);
  background: rgba(255,255,255,.05); border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
}
.aiw-role h3 {
  font-family: var(--t-font-display); font-weight: 700; font-size: var(--text-base);
  line-height: 1.3; color: var(--text-heading); margin: 0 0 var(--space-3); max-width: none;
}
.aiw-role p { font-size: var(--t-small); line-height: 1.65; color: var(--text-muted); margin: 0; }
.aiw-screens { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-12); }
@media (min-width: 1024px) { .aiw-screens { grid-template-columns: 1fr 1fr; } }
.aiw-screens figure { margin: 0; }
.aiw-img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--border-on-dark);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
}
.aiw-screens figcaption {
  margin-top: var(--space-4);
  font-family: var(--t-font-mono); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--primary-300);
}
.aiw-flows { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-16); padding-top: var(--space-10); border-top: 1px solid var(--black-15); }
@media (min-width: 700px) { .aiw-flows { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .aiw-flows { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
.aiw-flow { padding: var(--space-6); }
.aiw-flow span:not(.aiw-flow__n) {
  display: block; font-family: var(--t-font-mono); font-size: var(--t-caption);
  font-weight: 700; letter-spacing: .1em; color: var(--primary-500); margin-bottom: var(--space-2);
}
.aiw-flow h4 {
  font-family: var(--t-font-display); font-weight: 700; font-size: var(--t-body);
  line-height: 1.3; color: var(--text-heading); margin: 0 0 var(--space-2); max-width: none;
}
.aiw-flow p { font-size: var(--t-caption); line-height: 1.6; color: var(--text-muted); margin: 0; }



/* ==========================================================================
   Methodology ribbon · text follows the lit loop, diagram never moves
   Three tracks with the ribbon pinned to the middle one, so it holds its
   position in every state. The panel takes the side column matching the lit
   loop: 01-04 light the right loop and the text sits right, 05-08 light the
   left loop and it sits left. align-items: start rather than center, because
   the panel drives the row height and centring would slide the ribbon
   vertically as each step's copy length changes.
   ========================================================================== */
@media (min-width: 900px) {
  .lem {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, .7fr);
    align-items: start;
    gap: var(--space-10);
  }
  .lem__svg { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
  .lem__panel { grid-row: 1; margin: 0; max-width: none; text-align: left; }
  /* data-side names the lit loop, and the text follows it */
  .lem[data-side="right"] .lem__panel { grid-column: 3; }
  .lem[data-side="left"]  .lem__panel { grid-column: 1; text-align: right; }
}


/* the four workflow cards sat directly under the screens row, so the section
   read as one dense block; a real gap separates the two groups */
#how-ai-works .aiw-flows { margin-top: var(--space-20); }
@media (min-width: 1024px) { #how-ai-works .aiw-flows { margin-top: var(--space-24); } }


/* the screens ran edge to edge while the copy sat inside the container, so the
   photographs looked bled and the two rows read as unrelated. The screens take
   the container width too, and the section gets its bottom rhythm back. */
#how-ai-works .aiw-screens { width: 100%; margin-left: 0; }
#how-ai-works { padding-bottom: var(--section-padding-y); }


/* ==========================================================================
   FAQ · a finished two-column index
   The single tall stack beside an empty panel is what read as unfinished. The
   questions now flow in two columns, the answer opens under its own question,
   and the open row carries a left rule instead of a filled block.
   ========================================================================== */
@media (min-width: 900px) {
  .faq-q-list { columns: 2; column-gap: var(--space-16); }
  .faq-item-wrap { break-inside: avoid; }
}
.faq-item-wrap { border-bottom: 1px solid var(--border-default); }
.faq-q { padding: var(--space-5) 0 !important; border-left: 3px solid transparent !important; padding-left: var(--space-5) !important; }
.faq-q.active { border-left-color: var(--accent-main) !important; background: none !important; }
.faq-q.active .faq-q-text { color: var(--accent-main) !important; }
.faq-q.active + .faq-a-inline { padding: 0 0 var(--space-5) var(--space-5) !important; border-left: 3px solid var(--accent-main) !important; }


/* ==========================================================================
   FAQ · Option A, full-width inline accordion
   The split panel put the answer in a column that was not visually tied to the
   row that produced it, and the two-column index left the section unbalanced.
   One list at full width: the answer opens directly under its question,
   indented to the text column, with a round toggle that turns orange when open.
   ========================================================================== */
.faq-split { display: block !important; }
.faq-panel { display: none !important; }
.faq-q-list { columns: auto !important; column-gap: normal !important; max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border-default); }
.faq-item-wrap { border-bottom: 1px solid var(--border-default); break-inside: auto; }
.faq-q {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) 0 !important;
  border: none !important;
  border-left: none !important;
  background: none !important;
  text-align: left;
}
.faq-q-text { font-size: var(--t-body); font-weight: 700; color: var(--text-heading); }
.faq-q:hover .faq-q-text { color: var(--accent-main); }
.faq-q.active .faq-q-text { color: var(--text-heading) !important; }
/* the round toggle: grey plus, orange x when open */
.faq-q::after {
  content: "";
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-section-alt);
  background-image: linear-gradient(var(--text-muted), var(--text-muted)), linear-gradient(var(--text-muted), var(--text-muted));
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-color var(--transition-base), background-size var(--transition-base), transform var(--transition-base);
}
.faq-q.active::after {
  background-color: var(--accent-main);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 12px 2px, 2px 12px;
  transform: rotate(45deg);
}
.faq-q.active + .faq-a-inline,
.faq-q[aria-expanded="true"] + .faq-a-inline {
  display: block;
  border: none !important;
  background: none !important;
  color: var(--text-muted) !important;
  font-size: var(--t-small);
  line-height: 1.75;
  padding: 0 var(--space-16) var(--space-6) var(--space-8) !important;
  max-width: 74ch;
}

/* the accordion runs the container width, not a 900px column */
.faq-q-list { max-width: none !important; margin: 0 !important; }


/* the five person cards are anchors; the photo takes an orange ring on hover so
   the link is unmistakable, matching the homepage treatment */
a.hc-person:hover img, a.hc-person:focus-visible img {
  outline: 3px solid var(--accent-main);
  outline-offset: -3px;
}
a.hc-person:hover .hc-person__n, a.hc-person:focus-visible .hc-person__n { color: var(--accent-main); }
a.hc-person:focus-visible { outline: none; }


/* Case tiles · the logo sits above the claim, not beside it
   With the logo in a right-hand column the claim was squeezed and the tiles read
   as unfinished. The logo now leads the card on its own line, left aligned, so
   the bold claim gets the full width and the six tiles balance.
   ========================================================================== */
.hc-case { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.hc-case__logo {
  grid-column: 1; grid-row: 1;
  justify-content: flex-start; align-items: center;
  height: 34px; margin-bottom: var(--space-4);
}
.hc-case__logo img { max-height: 34px; object-position: left center; }
.hc-case__client { grid-column: 1; grid-row: 2; }
.hc-case__head   { grid-column: 1; grid-row: 3; }
.hc-case__go     { grid-column: 1; grid-row: 4; }


/* the client name on a case tile is a label, not an accent: navy keeps the
   orange for the claim and the read-the-case-study cue */
.hc-case__client { color: var(--secondary-800) !important; }


/* the closing line and the team button share one row, matching the homepage */
.team-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-12); }
.team-foot .hc-close-line { flex: 1 1 32rem; max-width: 62ch; margin: 0; }
.team-foot .btn { flex: 0 0 auto; }


/* ==========================================================================
   Team band · the section must contain its own grid
   overflow-x: clip is required for the full-bleed grid, but it coerces the y
   axis to clip too, so the 24px offset between the container and the grid was
   slicing the bottom of the photographs. display: flow-root makes the section
   establish its own block formatting context and account for the full height.
   ========================================================================== */
.team-sec { display: flow-root; padding-bottom: var(--space-6); }

/* ==========================================================================
   Marquee loop · translate the real distance, not a bare percentage
   One half is content plus (n-1) inner gaps, but the two halves are joined by
   one more gap, so -50% falls short by exactly gap/2 and the strip snapped
   16px every cycle. The gap is tokenised so the travel stays correct if it
   ever changes.
   ========================================================================== */
.logo-strip__track { --logo-gap: 32px; column-gap: var(--logo-gap); }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--logo-gap) / 2)); }
}


/* The width/height attributes I added for loop-width reservation also became the
   rendered size, so each logo drew at its full file dimensions and the strip
   became one grey slab. CSS reclaims the size: the attributes still give the
   browser an intrinsic ratio, but height is pinned and width follows it. */
.logo-strip__track img,
.logo-strip .logo-tile img {
  height: 46px !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 46px !important;
  object-fit: contain;
  aspect-ratio: auto !important;
}
.logo-strip .logo-tile { flex: 0 0 auto; }


/* ==========================================================================
   AWARDS · 11 recognitions on three lines
   Four across gives rows of 4, 4, 3 at desktop. Badge left, name and line
   right, matching the live page. Hairline dividers rather than cards, so the
   band stays quiet next to the case studies above it. Motion and hover follow
   the cluster's language: grayscale badge at rest, full colour on hover.
   ========================================================================== */
.hc-awards .aw-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0; margin-top: var(--space-12);
  border-top: 1px solid var(--border-default);
}
@media (min-width: 620px)  { .hc-awards .aw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hc-awards .aw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aw-item {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  transition: background var(--transition-base);
}
.aw-item:hover { background: var(--gray-0); }
/* only inner dividers show, so the band reads as one table */
@media (min-width: 1024px) { .aw-item:nth-child(4n) { border-right: none; } }
@media (min-width: 620px) and (max-width: 1023px) { .aw-item:nth-child(2n) { border-right: none; } }
@media (max-width: 619px) { .aw-item { border-right: none; } }
.aw-item__badge {
  flex: 0 0 62px; display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px;
}
.aw-item__badge img {
  max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .78;
  transition: filter var(--transition-base), opacity var(--transition-base);
}
.aw-item:hover .aw-item__badge img { filter: none; opacity: 1; }
.aw-item__text { min-width: 0; }
.aw-item__name {
  display: block; font-family: var(--t-font-display); font-weight: 800;
  font-size: var(--t-body-lg); line-height: 1.15; color: var(--accent-main);
  letter-spacing: var(--tracking-tight);
}
.aw-item__line {
  margin: 4px 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--text-muted);
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .aw-item, .aw-item__badge img { transition: none; }
}


/* case tile logos at double size, with equal breathing room above and below.
   Emitted last: six earlier rules stack on this selector, so stating the final
   size here is the only way it is not overridden by a superseded one. */
.hc-case__logo {
  /* 68px of logo + 6px above + 6px below. With border-box, height includes the
     padding, so the box must be 80px or the image overflows the gaps. */
  height: 80px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: var(--space-4);
}
.hc-case__logo img { max-height: 68px; max-width: 100%; object-position: left center; }
@media (max-width: 699px) {
  .hc-case__logo { height: 68px; }
  .hc-case__logo img { max-height: 56px; }
}

/* the source block carries no headline; only its own nav anchor label, "AWARDS".
   Set at eyebrow scale so it reads as a label, not an authored headline. */
.hc-awards__h {
  font-family: var(--t-font-body); font-size: var(--t-small); font-weight: 700;
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--accent-main); max-width: none; margin: 0;
}
/* "3 linii" holds from 620px up: four across needs the wider tracks, so the
   mid range goes three across, which is 4 rows, and 620-767 stays two. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hc-awards .aw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aw-item:nth-child(3n) { border-right: none; }
  .aw-item:nth-child(2n) { border-right: 1px solid var(--border-default); }
}


/* the services grid hovers to the same #F56538 fill as the case cards, so it
   takes the same navy inversion. Alphas dropped: 0.8 white composites to 2.48
   and 0.7 to 2.21 on this orange, where solid navy is 5.63. */
[data-screen-label="services"] .grid-cards .card:hover h4,
[data-screen-label="services"] .grid-cards .card:hover p,
[data-screen-label="services"] .grid-cards .card:hover .text-muted,
[data-screen-label="services"] .grid-cards .card:hover .text-accent,
[data-screen-label="services"] .grid-cards .card:hover .mono-tag,
[data-screen-label="services"] .grid-cards .card:hover .svc-ico,
[data-screen-label="find-your-service"] .grid-cards .card:hover h4,
[data-screen-label="find-your-service"] .grid-cards .card:hover p,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-muted,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-accent,
[data-screen-label="find-your-service"] .grid-cards .card:hover .mono-tag,
[data-screen-label="find-your-service"] .grid-cards .card:hover .svc-ico {
  color: var(--secondary-800) !important;
  opacity: 1;
}


/* Services hover: white text and icon on the orange fill, per instruction.
   This reverses the navy inversion for the services grids only; the case cards
   and testimonials keep navy. Solid white, no alpha, so the small copy holds as
   much contrast as the bright orange allows (3.09:1). */
[data-screen-label="services"] .grid-cards .card:hover h4,
[data-screen-label="services"] .grid-cards .card:hover p,
[data-screen-label="services"] .grid-cards .card:hover .text-muted,
[data-screen-label="services"] .grid-cards .card:hover .text-accent,
[data-screen-label="services"] .grid-cards .card:hover .mono-tag,
[data-screen-label="services"] .grid-cards .card:hover .svc-ico,
[data-screen-label="find-your-service"] .grid-cards .card:hover h4,
[data-screen-label="find-your-service"] .grid-cards .card:hover p,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-muted,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-accent,
[data-screen-label="find-your-service"] .grid-cards .card:hover .mono-tag,
[data-screen-label="find-your-service"] .grid-cards .card:hover .svc-ico {
  color: #fff !important;
  opacity: 1;
}


/* ==========================================================================
   FIVE STEPS · each row reads as one unit
   The title and its P&L line were two tracks with a wide gutter and no shared
   surface, so they read as two lists side by side. Every row now carries one
   banded strip across both columns: shared padding, one divider under the whole
   row, and a hover that lights the entire band, so a title and its detail are
   visibly the same row.
   ========================================================================== */



/* the accent rail belongs to the row, not to the number column */



/* the title and its detail share one baseline, so the pairing is unmistakable */


@media (min-width: 900px) {


}


/* the number moves inside the band, so the row is one object: no external
   gutter, no rail running behind the cards */




/* the report slides open in the lightbox, so they must look clickable */
.aiw-screens figure { cursor: zoom-in; }
.aiw-screens figure:focus-visible { outline: 3px solid var(--accent-main); outline-offset: 3px; }

/* the ABA services grid now uses .grid-cards like the other two pages, so the
   mobile disclosure and the hover language follow that class, not .svcd-grid */
@media (max-width: 767px) {
  #aba-svcs.grid-cards > [data-hidden-mobile] { display: none; }
  #aba-svcs.grid-cards.is-open > [data-hidden-mobile] { display: flex; }
}
[data-screen-label="services"] .grid-cards .card:hover { background: var(--accent-main) !important; border-color: var(--accent-main) !important; cursor: pointer; transform: translateY(-4px); }
[data-screen-label="services"] .grid-cards .card:hover h4,
[data-screen-label="services"] .grid-cards .card:hover p,
[data-screen-label="services"] .grid-cards .card:hover .text-muted,
[data-screen-label="services"] .grid-cards .card:hover .text-accent { color: #fff !important; }
[data-screen-label="services"] .grid-cards .card:hover .svc-ico { color: #fff !important; }

/* the 01-style numbering is gone from every block, so the tracks that existed
   only to hold it collapse and the content starts at the card edge */

@media (min-width: 900px) { }

@media (min-width: 900px) {

}
/* the workflow cards and the FAQ rows no longer reserve room for a numeral */
.wf-item__n, .hc-flow__n { padding-right: 0; }
.hc-faq__q { grid-template-columns: 1fr auto; }


/* ==========================================================================
   Step numbers · single digit in a circle, one treatment everywhere
   Two-digit 01-style read as machine-generated, so every counter is plain
   decimal and every numeral sits in the same circular chip: the five step
   bands, the named workflows, the FAQ rows and the audit accordions.
   ========================================================================== */
.num-chip,

/* on light surfaces the chip keeps the accent; inside a dark card it needs the
   same fill so the pages stay consistent */

.wf-item::after, .hc-flow::after { position: absolute; top: var(--space-6); right: var(--space-6); }
.hc-faq__q::before { flex: 0 0 30px; }

/* the ribbon numeral is a circular chip like every other step number */




/* ==========================================================================
   Step bands · the number chip needs its own track
   Removing the numerals collapsed the track that held them; restoring the
   numerals put the chip back into column 1 on top of the label and the title.
   The chip gets a dedicated 30px track and the content shifts right, so
   nothing overlaps at any width.
   ========================================================================== */

@media (min-width: 900px) {

}




@media (min-width: 900px) {

}


/* ==========================================================================
   The dark-console workflow cards and the FAQ rows · numbers restored
   Every counter edit aimed at .wf-item and .hc-flow was inert: the AI section
   rebuild renamed the cards to .aiw-flow, and those classes no longer exist on
   any page. The FAQ counters were restored into homepage-v2.css, which the two
   vertical pages never load. Both are targeted here, in the sheet all three
   pages share, so one rule set covers the whole cluster.
   ========================================================================== */
.aiw-flow__n {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-main); color: #fff;
  font-family: var(--t-font-display); font-weight: 800;
  font-size: 19px; line-height: 1; letter-spacing: 0;
  margin-bottom: var(--space-3);
}

/* the FAQ rows, for the vertical pages */
.faq-q-list { counter-reset: faq; }
.faq-item-wrap { counter-increment: faq; }
.faq-q::before {
  content: counter(faq);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-main); color: #fff;
  font-family: var(--t-font-display); font-weight: 800;
  font-size: 19px; line-height: 1;
  margin-right: var(--space-5);
}


/* ==========================================================================
   Ribbon numerals · sized against the viewBox scale, in ONE block
   The svg is 720 user units rendered at ~403px, a 0.559 factor, so a declared
   px is not a screen px. 34px declared lands 19px on screen, matching every
   other step chip, and the 54px box keeps the digit centred. Consolidated from
   five competing declarations so no later append can silently win again.
   ========================================================================== */
.lem-seg__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff; color: var(--secondary-800);
  font-family: var(--t-font-display); font-weight: 800;
  font-size: 34px; line-height: 1; letter-spacing: 0;
  pointer-events: none;
}
.lem-seg.is-on .lem-seg__n, .lem-seg:hover .lem-seg__n { background: var(--secondary-800); color: #fff; }


/* the ribbon panel numeral takes the same circled treatment as the numbers on
   the other sections: plain digit, orange disc, white ink */
.lem__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-main); color: #fff;
  font-family: var(--t-font-mono); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: 0;
}


/* ==========================================================================
   FIVE STEPS · editorial rows, no card boxes
   Boxing each step made five identical containers fighting for attention. The
   steps are a sequence, so they read as an ordered list: an oversized numeral
   anchoring each row, the headline at display scale beside it, the P&L line in
   a quieter second column, and hairlines between. Same language as the industry
   ledger and the FAQ index elsewhere on the site.
   ========================================================================== */





/* the numeral is the anchor, not a chip: display scale, accent, no disc */











@media (min-width: 900px) {







}
@media (max-width: 599px) {



}
.prob-close {
  margin-top: var(--space-10);
  padding-left: var(--space-6);
  border-left: 3px solid var(--accent-main);
  font-size: var(--t-body-lg); line-height: 1.55; color: var(--text-heading);
  max-width: 62ch;
}




/* ==========================================================================
   ABA ROUND 1 · items 2 + 3 · form parity with the homepage top form
   The page had visible labels but bare inputs, and the locations field was free
   text. The select reuses .form-input so the box matches exactly, with the
   native arrow suppressed and a chevron drawn in the brand colour instead.
   ========================================================================== */
.hc-form .form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-12);
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-main) 50%),
                    linear-gradient(135deg, var(--accent-main) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 13px) center;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.hc-form .form-select:invalid,
.hc-form .form-select option[disabled] { color: var(--gray-500); }
.hc-form .form-select:focus-visible {
  outline: 2px solid var(--accent-main);
  outline-offset: 1px;
  border-color: var(--accent-main);
}


/* ==========================================================================
   ABA ROUND 1 · item 7 · the video embed is capped
   .video-frame had no max-width, so the locked 16:9 ratio resolved its height
   off the full 1360px container and the player ran taller than the viewport.
   860px centred keeps the whole player plus the section heading visible on a
   1440x900 screen; below that the container width is already the constraint.
   ========================================================================== */
#video .video-frame { max-width: 860px; margin-left: auto; margin-right: auto; }


/* ==========================================================================
   LOGO TILE OPTICAL WEIGHT
   The strip sizes every logo to a fixed height, so a wide mark like Advancing
   Beyond the Spectrum (2.49:1) renders far broader than a compact one. A width
   cap equalises the optical weight without altering any file or its ratio.
   ========================================================================== */


/* ==========================================================================
   AI SECTION · one focal point, not three variations (item 9)
   The three role cards were identical dark surfaces, so nothing led the eye.
   The middle card takes an orange keyline and one step up the navy scale; the
   outer two stay flat. Body text moves to the readable dark-muted token.
   ========================================================================== */
.aiw-role:nth-child(2) {
  background: rgba(255,255,255,.12);
  border-color: var(--accent-main);
  border-width: 2px;
}


/* ==========================================================================
   PRICING BAND (item 11) · the homepage pattern, ported to this sheet
   The homepage band's styles live in homepage-v2.css, which the vertical pages
   do not load, so the pattern is restated here. The price chips are new to this
   page and take the proof-bar chip treatment.
   ========================================================================== */
.pricing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
@media (min-width: 1024px) {
  .pricing { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-16); align-items: center; }
}
.pricing__left .lead { margin-top: var(--space-6); }
.pricing__card {
  padding: var(--space-8); background: var(--gray-0);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-surface);
}
.pricing__card h3 {
  font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-lg);
  line-height: 1.25; color: var(--text-heading); margin: 0;
}
.hs-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); min-height: 420px; margin-top: var(--space-6);
  background: var(--bg-section-alt); border: 1px dashed var(--border-default);
  border-radius: var(--radius-md); text-align: center; padding: var(--space-8);
}
.hs-slot p {
  margin: 0; font-family: var(--t-font-display); font-weight: 700;
  font-size: var(--t-body-lg); color: var(--secondary-800);
}
.hs-slot__note {
  font-family: var(--t-font-body) !important; font-weight: 400 !important;
  font-size: var(--t-caption) !important; color: var(--text-muted) !important;
}
/* the three price chips, same treatment as the proof bar */
.pricing__chips {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none;
}
.pricing__chips li {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-5) var(--space-4);
  background: var(--gray-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.pricing__chips b {
  font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-2xl);
  line-height: 1; letter-spacing: -.02em; color: var(--accent-main);
}
.pricing__chips span {
  font-size: var(--t-caption); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 599px) {
  .pricing__chips { grid-template-columns: minmax(0, 1fr); }
  .hs-slot { min-height: 280px; }
}


/* ==========================================================================
   Wrappers that had no rules
   .pricing__right is the band's second column, .acc-wrap groups an accordion
   item with its body, .v1-agg is the ledger's aggregate row. Each was carrying
   layout intent that no rule expressed, so they fell back to plain blocks.
   ========================================================================== */
.pricing__right { min-width: 0; }
.acc-wrap { display: block; }
.v1-agg { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); }


/* ==========================================================================
   People grid · fills the container whatever the card count
   The grid was repeat(5, 1fr), so ABA's four cards occupied four of five tracks
   and left the fifth empty. A flex row with flex:1 children divides the full
   container width by however many cards a page actually has.
   ========================================================================== */
@media (min-width: 760px) {
  .hc-people {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    grid-template-columns: none;
  }
  .hc-people > * { flex: 1 1 0; min-width: 0; }
}


/* ==========================================================================
   FIVE STEPS · the only rules for this section
   Every earlier .prob-* block is deleted rather than overridden, so one
   authoritative declaration owns the selector and a future append cannot
   silently strip the numbered disc again.
   ========================================================================== */
.prob-grid { counter-reset: prob; display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-12); }
.prob-card {
  counter-increment: prob;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: start;
  padding: var(--space-6);
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.prob-card:hover { border-color: color-mix(in srgb, var(--accent-main) 55%, transparent); box-shadow: var(--shadow-surface); }
.prob-card::before {
  content: counter(prob);
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-main);
  color: #fff;
  font-family: var(--t-font-mono);
  font-size: var(--t-body);
  font-weight: 700;
}
.prob-card__tag {
  grid-column: 2; grid-row: 1;
  font-family: var(--t-font-mono); font-size: var(--t-caption);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--accent-main);
}
.prob-card__tag--pl { color: var(--text-muted); }
.prob-card:not(:first-of-type) .prob-card__tag {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.prob-card:not(:first-of-type) { grid-template-rows: 0 auto auto; }
.prob-card__break {
  grid-column: 2; grid-row: 2;
  font-family: var(--t-font-display); font-weight: 800;
  font-size: var(--text-lg); line-height: 1.25;
  letter-spacing: var(--tracking-tight); color: var(--text-heading);
  margin: 0; max-width: none;
}
.prob-card__pl {
  grid-column: 2; grid-row: 3;
  font-size: var(--t-small); line-height: 1.65; color: var(--text-muted); margin: 0;
}
@media (min-width: 900px) {
  .prob-card { grid-template-columns: 44px minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto auto; column-gap: var(--space-8); padding: var(--space-6) var(--space-8); }
  .prob-card__tag--pl { grid-column: 3; grid-row: 1; }
  .prob-card__pl { grid-column: 3; grid-row: 2; padding-left: var(--space-8); border-left: 1px solid var(--border-default); }
  .prob-card:not(:first-of-type) { grid-template-rows: 0 auto; }
}
@media (max-width: 599px) {
  .prob-card { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-5); padding: var(--space-5); }
  .prob-card::before { width: 36px; height: 36px; font-size: var(--t-small); }
  .prob-card__break { font-size: var(--text-base); }
}


/* ==========================================================================
   Card hover · white type, stated last
   A later rule set navy text on hover for both the case cards and the
   testimonial cards, overriding the white one, so the copy went dark on the
   orange fill. Emitted last so white owns the hover state.
   ========================================================================== */
.case:hover, .case:hover *,
.tg-card:hover, .tg-card:hover * { color: #fff !important; }
.case:hover .c-mono, .tg-card:hover .c-mono {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
.case:hover .tg-foot, .tg-card:hover .tg-foot { border-top-color: rgba(255,255,255,.28) !important; }
.case:hover .btn--primary, .tg-card:hover .btn--primary {
  background: #fff !important; border-color: #fff !important; color: var(--secondary-800) !important;
}
.case:hover .c-badge {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.45) !important;
  color: #fff !important;
}

/* the monogram sits centred in the card's top-right corner on every card */
#cases .case { position: relative; }
#cases .c-logo {
  position: absolute; top: var(--space-6); right: var(--space-6);
  display: grid; place-items: center;
  width: 44px; height: 44px; max-width: none; flex: none;
}
#cases .c-mono {
  display: grid; place-items: center;
  width: 44px; height: 44px; line-height: 1; text-align: center;
}
#cases .c-logo img { max-height: 32px; max-width: 44px; }
#cases .case .client, #cases .case h4 { padding-right: 56px; }


/* ==========================================================================
   ABA client logo strip · static, and legible
   Two faults reported five times. First, grayscale at 62% opacity turned a
   colourful mark like Advancing Beyond the Spectrum into an indistinct grey
   shape that reads as a broken placeholder, not a logo. Second, with only five
   clients on record an auto-scrolling marquee hides them rather than showing
   them. The strip is static and centred, and the marks keep their own colour.
   ========================================================================== */
#logos .logo-strip__track {
  animation: none !important;
  width: 100% !important;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: var(--space-6);
}
/* the duplicated half exists only to make a loop seamless; with no loop it is
   just five repeated logos, so it comes out */
#logos .logo-strip .logo-tile[data-dup] { display: none !important; }
#logos .logo-strip {
  -webkit-mask-image: none;
  mask-image: none;
}
#logos .logo-strip img {
  filter: none;
  opacity: 1;
  height: 44px;
  max-width: 150px;
}
#logos .logo-strip img[src*="advancing-beyond"] { height: 52px; max-width: 170px; }
#logos .logo-strip img[src*="cst-academy"] { height: 48px; max-width: 60px; }
@media (max-width: 599px) {
  #logos .logo-strip img { height: 34px; max-width: 116px; }
  #logos .logo-strip img[src*="advancing-beyond"] { height: 40px; max-width: 132px; }
}


/* the two supplied files: ABS is a wide horizontal lockup, Breaking News is a
   near-square badge, so each is sized to read at the same optical weight */
#logos .logo-strip img[src*="advancing-beyond"] { height: 46px; max-width: 160px; }
#logos .logo-strip img[src*="breaking-news"] { height: 46px; max-width: 96px; }
@media (max-width: 599px) {
  #logos .logo-strip img[src*="advancing-beyond"] { height: 36px; max-width: 124px; }
  #logos .logo-strip img[src*="breaking-news"] { height: 36px; max-width: 76px; }
}

@media (max-width: 599px) {
  #how-ai-works .aiw-roles { padding: var(--space-10) var(--space-5); }
}


/* the strip is static, so the row wraps and each logo is budgeted to fit six
   across a 1200px container with room to spare at 876px */
#logos .logo-strip { overflow: visible; }
#logos .logo-strip__track { column-gap: var(--space-10); }
#logos .logo-strip .logo-tile { flex: 0 0 auto; }
#logos .logo-strip img { height: 40px; max-width: 124px; max-height: 40px; }
#logos .logo-strip img[src*="advancing-beyond"] { height: 42px; max-width: 132px; max-height: 42px; }
#logos .logo-strip img[src*="breaking-news"] { height: 42px; max-width: 78px; max-height: 42px; }
#logos .logo-strip img[src*="cst-academy"] { height: 44px; max-width: 46px; max-height: 44px; }
@media (max-width: 599px) {
  #logos .logo-strip img { height: 32px; max-width: 100px; max-height: 32px; }
  #logos .logo-strip img[src*="advancing-beyond"] { height: 34px; max-width: 108px; max-height: 34px; }
  #logos .logo-strip img[src*="breaking-news"] { height: 34px; max-width: 62px; max-height: 34px; }
  #logos .logo-strip img[src*="cst-academy"] { height: 36px; max-width: 38px; max-height: 36px; }
}


/* ==========================================================================
   "How an ABA agency should use AI" · a light band inside a dark section
   The section carries data-theme="dark-section", and that theme re-declares the
   semantic tokens for every descendant: inside it --bg-page IS navy and
   --text-heading IS white. A light sub-band therefore cannot just set a light
   background, because all its text tokens are still dark-themed.
   The theme is neutralised on the band itself, restoring each token to its
   root light value, so every rule inside keeps working unchanged and any rule
   added later inherits the right colours automatically.
   ========================================================================== */
#how-ai-works .aiw-roles {
  margin-top: var(--space-16);
  padding: 0;
  background: none;
  border-radius: 0;
}
#how-ai-works .aiw-role {
  background: var(--gray-0);
  border: 1px solid var(--black-15);
  box-shadow: var(--shadow-surface);
}
#how-ai-works .aiw-roles { background: none; }
#how-ai-works .aiw-role:nth-child(2) { border: 2px solid var(--primary-500); }
@media (max-width: 599px) {
  #how-ai-works .aiw-roles { padding: var(--space-10) var(--space-5); }
}


/* ==========================================================================
   "How an ABA agency should use AI" · the whole section is light now
   Three white cards on navy was the only contrast in the block, which read as
   an unfinished band rather than a designed one. The section drops the dark
   theme entirely, so it alternates against the navy section above it, and its
   own copy takes the light-surface colours.
   ========================================================================== */
#how-ai-works .eyebrow { color: var(--primary-500); }
#how-ai-works .hc-h2, #how-ai-works > .container > h2 { color: var(--text-heading); }
#how-ai-works .hc-h2 .hl, #how-ai-works .hl { color: var(--primary-500); }
#how-ai-works .hc-lead, #how-ai-works > .container > .lead { color: var(--text-muted); }
#how-ai-works .aiw-flow {
  background: var(--gray-0);
  border: 1px solid var(--black-15);
  box-shadow: var(--shadow-surface);
}
#how-ai-works .aiw-flow__go, #how-ai-works .aiw-flow a { color: var(--primary-500); }
#how-ai-works .aiw-screens figcaption { color: var(--text-muted); }


/* the workflow cards and the role cards are one component family, so they take
   the same surface, border, radius and padding. The workflow cards previously
   had no radius at all, just a left rail, which is why they read as a different
   thing sitting next to the role cards. */
#how-ai-works .aiw-flow,
#how-ai-works .aiw-role {
  padding: var(--space-6);
  background: var(--gray-0);
  border: 1px solid var(--black-15);
  border-radius: 12px;
  box-shadow: var(--shadow-surface);
}
#how-ai-works .aiw-role:nth-child(2) { border: 2px solid var(--primary-500); }
#how-ai-works .aiw-flow h4 { color: var(--text-heading); }
#how-ai-works .aiw-flow p { color: var(--text-muted); }
#how-ai-works .aiw-flow span:not(.aiw-flow__n) { color: var(--primary-500); }

/* the rule above the workflow row was a divider for the navy layout; the cards
   now read as their own group, so it comes out */
#how-ai-works .aiw-flows { border-top: none; padding-top: 0; }


/* ==========================================================================
   Pricing · the booking card goes navy and compact
   The white card with a border framing a white HubSpot iframe read as two
   stacked boxes. Navy makes the card the frame and the calendar the content,
   and the iframe height comes down so the band is not taller than the copy
   beside it.
   ========================================================================== */
#pricing .pricing__card {
  background: var(--secondary-800);
  border: none;
  box-shadow: var(--shadow-lg, 0 18px 40px -18px rgba(4,28,44,.45));
  padding: var(--space-6) var(--space-6) var(--space-12);
}
#pricing .pricing__card h3 { color: #fff; font-size: var(--t-body); text-align: center; padding-top: var(--space-12); padding-bottom: var(--space-6); margin: 0; }
#pricing .meetings-iframe-container {
  margin-top: 0;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  min-height: 0 !important;
  height: auto !important;
}
#pricing .meetings-iframe-container iframe {
  display: block; width: 100%; border: 0;
  height: 592px !important;
  min-height: 0 !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 1024px) {
  #pricing .pricing__card { padding: var(--space-6) var(--space-6) var(--space-12); }
  #pricing .meetings-iframe-container iframe { height: 592px !important; min-height: 0 !important; }
}
@media (max-width: 599px) {
  #pricing .pricing__card { padding: var(--space-5) var(--space-5) var(--space-12); }
  #pricing .meetings-iframe-container iframe { height: 580px !important; min-height: 0 !important; }
}




/* ==========================================================================
   Approver companion action, beside every conversion CTA
   44 of 111 evidence-bearing lost deals died above the champion, so each CTA
   carries a way to arm that champion. Colour is keyed to the SECTION that
   paints the surface, never to a modifier on the block: an earlier pass set the
   on-dark flag by assumption and put white text on three white surfaces.
   All copy here is 14px, so every pair below clears 4.5:1.
   ========================================================================== */
.approver {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
}
.approver__send, .approver__file {
  min-height: 44px; display: inline-flex; align-items: center;
  font-family: var(--t-font-body); font-size: var(--t-small);
}
.approver__send { font-weight: var(--weight-semibold); text-decoration: none; }
.approver__send:hover { text-decoration: underline; text-underline-offset: 3px; }
.approver__file { text-decoration: underline; text-underline-offset: 3px; }

/* default: light surfaces. primary-700 clears 5.5 on #F2F4F7 and 6.5 on white,
   where the brand orange only reaches 2.6 */
.approver__send { color: var(--primary-700); }
.approver__file { color: var(--gray-600); }
.approver__file:hover { color: var(--primary-700); }

/* the orange audit band: white 14px reaches only 3.09 on #F56538, so the pair
   goes navy, which clears 6.9 without darkening the band the brand asked for */
#audits .approver__send { color: var(--secondary-900); }
#audits .approver__file { color: var(--secondary-800); }
#audits .approver__file:hover { color: var(--secondary-900); }

/* the navy readiness band: white and the light orange step both clear easily */
#audits2 .approver__send { color: #fff; }
#audits2 .approver__file { color: var(--primary-300); }
#audits2 .approver__file:hover { color: #fff; }




/* item 3 · the trust line sits under the hero subhead, one step quieter, on the
   on-dark muted token so it clears 4.5:1 against the navy hero */
.hc-hero__trust {
  margin: var(--space-5) 0 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  max-width: 62ch;
}


/* ==========================================================================
   Audit CTAs on phones · release the nowrap
   .aud-ctas .btn is nowrap with no mobile release, so "Get your FREE practice
   readiness audit →" is 431px intrinsic against 327px of inner width at 375px
   and 272px at 320px. The label is 18px by design, so the line wraps instead of
   shrinking, and the button takes the full column. pages.css is shared, so this
   covers the same two CTAs on aba.html.
   ========================================================================== */
@media (max-width: 767px) {
  .aud-ctas { flex-direction: column; align-items: stretch; }
  .aud-ctas .btn {
    white-space: normal;
    height: auto;
    min-height: 48px;
    padding: var(--space-5) var(--space-6);
    line-height: 1.3;
    text-align: center;
    width: 100%;
  }
  #cases .btn, .hc-cases-cta .btn, .sec-foot .btn {
    white-space: normal;
    height: auto;
    min-height: 48px;
    padding: var(--space-5) var(--space-6);
    line-height: 1.3;
    width: 100%;
  }
}


/* ==========================================================================
   Dense logo wall on phones · shorter, more per row
   The strip is static and wraps, so 34 logos at 34px with a 20px column gap
   land two per row: about 17 rows, roughly 780px tall at 375px. Smaller marks
   and tighter gaps put four per row, which is about nine rows.
   Scoped with :has() to tracks that actually carry a crowd, so the five-logo
   strip on the ABA page keeps its current size.
   ========================================================================== */
@media (max-width: 767px) {
  #logos .logo-strip__track:has(> :nth-child(12)) {
    column-gap: 10px;
    row-gap: 10px;
    justify-content: center;
  }
  #logos .logo-strip__track:has(> :nth-child(12)) img {
    height: 22px !important;
    max-height: 22px !important;
    max-width: 76px !important;
  }
  /* the marks that were given their own sizing follow the same reduction */
  #logos .logo-strip__track:has(> :nth-child(12)) img[src*="advancing-beyond"] { height: 24px !important; max-height: 24px !important; max-width: 84px !important; }
  #logos .logo-strip__track:has(> :nth-child(12)) img[src*="breaking-news"] { height: 24px !important; max-height: 24px !important; max-width: 48px !important; }
  #logos .logo-strip__track:has(> :nth-child(12)) img[src*="cst-academy"] { height: 26px !important; max-height: 26px !important; max-width: 28px !important; }
  /* the heading block above it carries the rest of the height */
  #logos .hc-logohead { margin-bottom: var(--space-8); }
  #logos.section { padding-block: var(--section-padding-y); }
}


/* ==========================================================================
   Logo wall on phones · three across, shorter cells
   Two columns across 16 logos is eight rows, and each cell carries the 68px
   touch minimum, so the band ran roughly 640px tall on a 375px screen. Three
   columns halves the rows; the cell keeps a 44px tap target, which is the real
   accessibility floor, and the logo scales to fit the narrower cell.
   ========================================================================== */
@media (max-width: 599px) {
  .hc-logogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .hc-logocell { min-height: 44px; padding: var(--space-3) var(--space-2); }
  .hc-logocell img { max-height: 26px; max-width: 100%; }
  .hc-logocell .logo-wordmark, .hc-logocell span { font-size: 14px; line-height: 1.2; }
}
@media (max-width: 359px) {
  .hc-logogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   People grid on phones · horizontal rail, matching the homepage
   The vertical pages stacked two per row and ran several screens tall. Below
   760 this becomes the same scroll rail the homepage uses: nowrap flex, x-snap,
   fixed-basis cards, a 2px thumb and a trailing spacer so the last card clears
   the edge. Above 760 the existing flex-fill row is untouched.
   ========================================================================== */
@media (max-width: 759px) {
  .hc-people {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: var(--space-5);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    align-items: start;
    justify-content: flex-start;
    padding: var(--space-2) var(--container-padding-x) var(--space-6) 0;
    scroll-padding-left: 0;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .hc-people::-webkit-scrollbar { height: 2px; }
  .hc-people::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }
  .hc-people::-webkit-scrollbar-track { background: transparent; }
  .hc-people::after { content: ""; flex: 0 0 var(--space-4); }
  .hc-people > .hc-person {
    flex: 0 0 200px;
    min-width: 0;
    scroll-snap-align: start;
  }
  .hc-person img { aspect-ratio: 2/3; object-fit: cover; object-position: center top; }
}


/* ==========================================================================
   Healthcare logo marquee · identical to the homepage band
   pages.css loads after shared.css, so .hc-logos .client-logo-pill was
   overriding the homepage pill with its own min-height, padding and radius.
   Inside a marquee row the page-level treatment is withdrawn so the shared
   pill governs, and the duration scales with pill count so the linear speed
   matches the homepage: 52s for 16 pills, so 34 pills need ~110s.
   ========================================================================== */
.hc-logos .logo-marquee-track .client-logo-pill {
  min-height: 0;
  height: auto;
  padding: 24px 40px;
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  box-shadow: var(--shadow-surface);
  flex: none;
  transform: none;
}
.hc-logos .logo-marquee-track .client-logo-pill img {
  height: 23px;
  width: auto;
  max-height: none;
  max-width: none;
  object-fit: contain;
}
.hc-logos .logo-marquee-track .client-logo-pill img[src*="tidewater"] { height: 30px; }
.hc-logos .logo-marquee-track .client-logo-pill img[src*="socioh"] { height: 28px; }
.hc-logos a.client-logo-pill:hover { transform: none; border-color: var(--accent-main); }
/* same pixels per second as the homepage, not the same duration */
.hc-logos .logo-marquee-track--ltr { animation-duration: 110s; }
.hc-logos .logo-marquee-track--rtl { animation-duration: 110s; }


/* ABA logo band · six logos in one row, same pixels per second as the others.
   The .hc-logos marquee withdrawal above already gives it the shared pill, so
   only the duration needs scaling: 12 pills against the homepage's 16 at 52s. */
.hc-logos #logos .logo-marquee-track--ltr,
#logos .logo-marquee-track--ltr { animation-duration: 39s; }


/* ==========================================================================
   Five steps · column labels as a header row
   The labels used to live inside card 1, occupying its first grid row, so its
   title dropped a row and stopped lining up with the numbered disc that every
   other card aligns to. They are a header for the list now, so all five cards
   share one geometry and every title sits on the same line as its disc.
   ========================================================================== */
.prob-head {
  display: none;
  font-family: var(--t-font-mono);
  font-size: var(--t-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-main);
}
@media (min-width: 900px) {
  .prob-head {
    display: grid;
    grid-template-columns: 44px minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: var(--space-8);
    padding: 0 var(--space-8) var(--space-3);
  }
  .prob-head__k { grid-column: 2; }
  .prob-head__v { grid-column: 3; padding-left: var(--space-8); color: var(--text-muted); }
}
/* with the labels gone, every card has the same two content rows */
.prob-card, .prob-card:not(:first-of-type) { grid-template-rows: auto auto; }
@media (min-width: 900px) {
  .prob-card, .prob-card:not(:first-of-type) { grid-template-rows: auto; }
  .prob-card__break { grid-column: 2; grid-row: 1; }
  .prob-card__pl { grid-column: 3; grid-row: 1; }
}


/* the methodology panel sat on var(--space-8), which is 16px: card-tight for a
   block this size, and with the right-aligned variant the copy touched the
   border. Positioning is untouched, only the inner breathing room. */
.lem__panel { padding: var(--space-16); }
@media (max-width: 899px) { .lem__panel { padding: var(--space-12); } }


/* the disc, the title and the P&L line now share one grid row, so the row's
   alignment governs all three: centre them together instead of pinning each to
   the top, which left short titles riding high against taller P&L copy */
.prob-card { align-items: center; }
.prob-card::before { align-self: center; }
.prob-card__break, .prob-card__pl { align-self: center; }