/* MethodSense NG base: layout primitives and the design-system components,
   translated from the design project's inline styles into real CSS so the
   front end ships no framework. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-core);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--text-primary);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
h1, h2, h3 { letter-spacing: 0; text-wrap: pretty; }
p { text-wrap: pretty; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ---------- layout primitives ---------- */
.mx { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter-page); }
.sec { padding: var(--section-y) 0; }
.sec-tight { padding: var(--section-y-tight) 0; }
.sec--tint { background: var(--surface-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.sec--cream { background: var(--surface-tint); }
.sec--ink { position: relative; background: var(--ink-900); color: var(--white); overflow: hidden; }
/* The NextGen band runs in the blue scope, so it reads as the product speaking
   rather than a second gold section. */
.sec--nextgen { background: var(--brand-tint); border-top: 1px solid var(--border-subtle); }
.sec--surface { background: var(--surface-50); border-top: 1px solid var(--border-subtle); }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 1080px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .g3 { grid-template-columns: minmax(0, 1fr); } .g2 { grid-template-columns: 1fr; } }

/* Dot field and gradient washes used by the ink hero and the mastheads. */
.hero-dots {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.22) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: linear-gradient(100deg, transparent 12%, #000 78%);
    -webkit-mask-image: linear-gradient(100deg, transparent 12%, #000 78%);
}
.mh-wash {
    position: absolute; inset: 0; pointer-events: none;
    background: var(--gradient-cover); opacity: .16;
    mask-image: linear-gradient(105deg, transparent 34%, #000 100%);
    -webkit-mask-image: linear-gradient(105deg, transparent 34%, #000 100%);
}
.mh-cap { position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none; background: var(--gradient-cover); }

/* ---------- eyebrow ---------- */
.eyebrow {
    font-family: var(--font-core); font-weight: var(--weight-bold);
    text-transform: uppercase; font-size: var(--text-micro);
    letter-spacing: var(--tracking-eyebrow); line-height: 1.2;
    color: var(--text-eyebrow);
}
.eyebrow--lg { letter-spacing: var(--tracking-eyebrow-wide); }
.hero .eyebrow--lg { letter-spacing: 0.42em; }
.eyebrow--sm { font-size: 10px; }
.eyebrow--muted { color: var(--ink-500); }
.eyebrow--ink { color: var(--ink-700); }
.eyebrow--inverse { color: var(--white); }

.accent-rule { width: var(--rule-accent-w); height: var(--rule-accent-h); background: var(--brand-primary); }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font-family: var(--font-core); font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; border-radius: 0; cursor: pointer;
    transition: var(--transition-control);
    font-size: 12px; padding: 13px 24px;
}
.btn--sm { font-size: 11px; padding: 9px 16px; }
.btn--lg { font-size: 13px; padding: 17px 32px; }
.btn--full { width: 100%; }

.btn--primary { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); }
.btn--primary:hover { background: var(--brand-primary-deep); color: var(--white); border-color: var(--brand-primary-deep); }

.btn--ink { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
.btn--ink:hover { background: var(--ink-700); color: var(--white); border-color: var(--ink-700); }

.btn--outline { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn--outline:hover { background: var(--ink-900); color: var(--white); }

.btn--outline-inverse { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline-inverse:hover { background: var(--white); color: var(--ink-900); }

.btn--ghost {
    background: transparent; color: var(--brand-primary-deep); border-color: transparent;
    padding-left: 0; padding-right: 0; box-shadow: inset 0 -1px 0 var(--brand-primary);
}
.btn--ghost:hover { color: var(--ink-900); box-shadow: inset 0 -1px 0 var(--ink-900); }

.btn__trail { font-size: 1.1em; line-height: 1; }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- section mark ---------- */
.smark { display: grid; grid-template-columns: 1fr; gap: var(--space-9); align-items: start; }
.smark--aside { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
@media (max-width: 900px) { .smark--aside { grid-template-columns: 1fr; } }
.smark__top { display: flex; align-items: baseline; gap: var(--space-4); }
.smark__num { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-eyebrow); }
.smark__title {
    margin: 18px 0 0; font-size: var(--text-display-sm); font-weight: 700;
    line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch;
}
.smark__lead { margin: 20px 0 0; font-size: var(--text-body-lg); line-height: 1.6; max-width: 58ch; color: var(--text-secondary); }
.smark__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-7); }
.smark__aside { padding-top: var(--space-6); }
.smark--inverse .smark__title { color: var(--white); }
.smark--inverse .smark__lead { color: rgba(255,255,255,.74); }

/* ---------- panel grid ---------- */
.pgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0; margin-top: var(--space-8); }
@media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.panel {
    background: var(--white); box-shadow: 0 0 0 1px var(--border-subtle);
    padding: var(--space-7);
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.panel:hover { box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-card); transform: translateY(-2px); position: relative; z-index: 1; }
.panel__head { display: flex; align-items: center; justify-content: space-between; }
.panel__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-eyebrow); }
.panel__num { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-500); }
.panel__rule { width: var(--rule-accent-w); height: var(--rule-accent-h); background: var(--brand-primary); margin-top: var(--space-5); }
.panel__title { margin: var(--space-5) 0 0; font-size: var(--text-h4); font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; }
.panel__body { margin: var(--space-3) 0 0; font-size: var(--text-body-sm); line-height: 1.6; color: var(--text-secondary); }
.panel--link { cursor: pointer; color: inherit; text-decoration: none; }

.pgrid--inverse .panel { background: var(--brand-primary-darkest); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.pgrid--inverse .panel:hover { transform: none; }
.pgrid--inverse .panel__eyebrow { color: var(--brand-secondary); }
.pgrid--inverse .panel__num { color: rgba(255,255,255,.4); }
.pgrid--inverse .panel__rule { background: var(--brand-secondary); }
.pgrid--inverse .panel__title { color: var(--white); }
.pgrid--inverse .panel__body { color: rgba(255,255,255,.7); }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--space-6); border-top: 1px solid var(--border-subtle); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }
.stat { padding-top: var(--space-5); }
.stats--center .stat { text-align: center; }
.stat__value { font-size: 46px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.stat__unit { color: var(--text-eyebrow); }
.stat__label { margin-top: var(--space-4); font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-primary); }
.stat__caption { margin-top: var(--space-2); font-size: var(--text-caption); line-height: 1.5; color: var(--text-muted); }
.stats--inverse { border-top-color: rgba(255,255,255,.18); }
.stats--inverse .stat__value { color: var(--white); }
.stats--inverse .stat__label { color: rgba(255,255,255,.7); }
.stats--inverse .stat__caption { color: rgba(255,255,255,.55); }

/* ---------- check list ---------- */
.checks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); gap: var(--space-4) var(--space-6); }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); font-size: var(--text-body); line-height: 1.55; color: var(--text-secondary); }
.checks svg { width: 18px; height: 18px; color: var(--brand-primary); flex: 0 0 auto; }
.checks--inverse li { color: rgba(255,255,255,.78); }
.checks__heading { margin: 0 0 var(--space-5); font-size: var(--text-body-lg); font-weight: 700; color: var(--text-primary); }
.checks-wrap--inverse .checks__heading { color: var(--white); }

/* ---------- testimonial ---------- */
.tm {
    display: flex; flex-direction: column; gap: var(--space-4);
    background: var(--white); border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--brand-primary); padding: var(--space-6);
}
.tm__company { font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.tm__quote { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-secondary); }
.tm__foot {
    margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
    display: grid; grid-template-columns: minmax(64px, 96px) minmax(0, 1fr); gap: var(--space-5); align-items: center;
}
.tm__avatar {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
    background: var(--surface-100); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-h4); font-weight: 700;
}
.tm__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm__name { font-size: var(--text-body-sm); font-weight: 700; color: var(--text-primary); }
.tm__role { margin-top: 2px; font-size: var(--text-caption); line-height: 1.45; color: var(--text-muted); }

/* ---------- quote band ---------- */
.pullquote { margin: 0; border-left: 3px solid var(--brand-primary); background: var(--surface-tint); padding: var(--space-6) var(--space-7); font-size: var(--text-body-lg); line-height: 1.6; }
.pullquote__attr { display: block; margin-top: var(--space-4); font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em; color: var(--text-secondary); }

/* Full-width quote separator, ported from LuminLogic's cust-quote--spotlight.
   It exists to break up a long page, so it runs edge to edge and stays centred. */
.qband { background: var(--surface-page); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: var(--space-9) 0; }
.qband__in { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); max-width: 820px; text-align: center; }
.qband__text { margin: 0; font-size: clamp(22px, 2.5vw, 28px); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--text-primary); text-wrap: balance; }
.qband__mark { color: var(--brand-primary); font-weight: 700; }
.qband__attrib { display: flex; align-items: center; gap: var(--space-4); }
.qband__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.qband__name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.qband__role { margin: 0; font-size: 14px; color: var(--text-secondary); }
@media (max-width: 600px) { .qband { padding: var(--space-7) 0; } }

/* ---------- image plate and shot ---------- */
.plate { position: relative; background: var(--surface-100); color: var(--text-secondary); }
.plate--fill { position: absolute; inset: 0; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5); background: var(--scrim-ink); pointer-events: none; font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255,255,255,.85); }

.shot { margin: 0; position: relative; box-shadow: 0 0 0 1px var(--border-subtle); background: var(--white); }
.shot img { display: block; width: 100%; height: auto; }
.shot--inverse { box-shadow: 0 0 0 1px rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-5); background: var(--scrim-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.88); }

/* ---------- cta band ---------- */
.ctaband { position: relative; overflow: hidden; }
.ctaband::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule-accent-h);
    background: var(--brand-primary); z-index: 2;
}
/* The band sits above a flat ink footer. Matching it made the page end in one
   dark mass, going darker read as brown, and going light collided on pages
   whose previous band is already cream. The LuminLogic site solves the same
   adjacency with a diagonal gradient in its brand darks plus a soft accent
   glow; this is that treatment in MethodSense's palette. */
.ctaband--gradient {
    background-image:
        radial-gradient(circle at 85% 12%, rgba(247, 148, 29, 0.30) 0%, rgba(247, 148, 29, 0) 55%),
        linear-gradient(135deg, var(--slate-600) 0%, var(--ink-900) 62%);
    color: var(--white);
}
.ctaband--ink { background: var(--ink-900); }
.ctaband--cream {
    background: var(--surface-tint); color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}
.ctaband--cream .ctaband__title { color: var(--text-primary); }
.ctaband--cream .ctaband__lead { color: var(--text-secondary); }
/* Vertical padding as longhand: this element is also .mx, and the shorthand
   reset the page gutter to zero, pushing the band's copy to the very edge. */
.ctaband__in { position: relative; padding-top: var(--section-y); padding-bottom: var(--section-y); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-9); align-items: end; }
@media (max-width: 900px) { .ctaband__in { grid-template-columns: 1fr; } }
.ctaband__title { margin: 18px 0 0; color: var(--white); font-size: var(--text-display-sm); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.ctaband__lead { margin: 18px 0 0; color: rgba(255,255,255,.72); font-size: var(--text-body-lg); max-width: 50ch; line-height: 1.6; }

/* ---------- launch bar ---------- */
.lbar { background: var(--brand-primary); color: var(--ink-900); box-shadow: inset 0 -1px 0 rgba(31,41,51,.18); }
.lbar__in { display: flex; align-items: center; gap: var(--space-5); min-height: 56px; padding-top: 10px; padding-bottom: 10px; flex-wrap: nowrap; }
.lbar__badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: var(--ink-900); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; flex: 0 0 auto; }
.lbar__msg { min-width: 0; flex: 1 1 auto; font-size: 15px; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbar__msg strong { font-weight: 700; }
.lbar__msg span { color: rgba(31,41,51,.72); }
.lbar__link {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 16px; background: var(--ink-900); color: var(--white);
    font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.lbar__link:hover { background: var(--brand-primary-deep); color: var(--white); }
@media (max-width: 880px) { .lbar__msg span { display: none; } }

/* ---------- header ---------- */
/* Sticky, mirroring luminlogic.com: translucent white over a blur so content
   reads through it, on a hairline rule. */
.hdr-wrap {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-subtle);
}
/* The launch bar scrolls away above it, so the header cannot use a fixed
   offset; sticky inside the normal flow lands it against the viewport edge. */
@supports not (backdrop-filter: blur(8px)) {
    .hdr-wrap { background: var(--white); }
}
/* A sticky element only travels inside its parent's box, and the header's
   template-part wrapper is only as tall as the header itself, so it scrolled
   away immediately. Collapsing the wrapper hands the header the page's
   scroll length. Same fix luminlogic.com uses. */
.wp-block-template-part:has(.hdr-wrap) { display: contents; }
.hdr { height: 80px; display: flex; align-items: center; gap: var(--space-7); } /* shared with staging3 .site-header__inner */
.hdr__logo { display: inline-block; line-height: 0; }
.hdr__logo img { height: 52px; width: auto; display: block; }
/* Groups anchored from the left with the actions pushed right, as on
   luminlogic.com. Right-aligning the whole row instead meant that hiding the
   actions for search pulled every nav group 404px across, under the field. */
.hdr__nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; }
.hdr__group { position: relative; }
.navbtn {
    background: none; border: none; cursor: pointer; padding: 30px 0; white-space: nowrap;
    font-family: var(--font-core); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-secondary); transition: var(--transition-control);
}
/* Dropdown affordance, mirroring staging3.luminlogic.com's
   .site-nav__item--has-menu > a::after so both headers read the same. */
.hdr__nav .navbtn { display: inline-flex; align-items: center; gap: 6px; }
.hdr__nav .navbtn::after {
    content: "";
    display: block;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    flex-shrink: 0;
}
.navbtn[aria-expanded="true"], .hdr__group--active .navbtn { color: var(--ink-900); box-shadow: inset 0 -3px 0 var(--brand-primary); }
.hdr__menu {
    position: absolute; top: 100%; left: -16px; min-width: 280px; background: var(--white);
    border: 1px solid var(--border-subtle); border-top: 3px solid var(--brand-primary);
    box-shadow: var(--shadow-card); padding: var(--space-3) 0; margin: 0; list-style: none;
}
.hdr__menu[hidden] { display: none; }
.hdr__menu a { display: block; padding: 11px 20px; font-size: var(--text-body-sm); color: var(--text-secondary); text-decoration: none; }
.hdr__menu a:hover { background: var(--surface-50); color: var(--ink-900); }
.hdr__menu .accent > a { color: var(--brand-primary-deep); }
.hdr__menu .menu-item__desc { display: block; margin-top: 2px; font-size: var(--text-caption); color: var(--text-muted); }
.hdr__col-head { padding: 11px 20px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.hdr__platform {
    padding: 30px 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brand-primary-deep); text-decoration: none;
}
.hdr__cta { margin-left: var(--space-2); display: flex; align-items: center; }

/* Header search, mirroring luminlogic.com: a magnifier that expands into a
   320px field and hides the platform link and CTA while it is open. */
.hdr__actions { position: relative; display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
/* Icon only, unlike luminlogic.com's icon + "Search": this header carries five
   nav groups plus the NextGen link, and the word left just 32px of slack. */
.hdr__search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    color: var(--text-secondary); background: transparent; border: 0;
    transition: var(--transition-control);
}
.hdr__search-toggle span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hdr__search-toggle:hover { color: var(--brand-primary-deep); background: var(--surface-50); }
.hdr__search {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    display: flex; align-items: center; width: 0; opacity: 0; overflow: hidden;
    pointer-events: none; transition: width var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.hdr__actions.is-searching .hdr__search { width: 320px; opacity: 1; overflow: visible; pointer-events: auto; }
.hdr__actions.is-searching :is(.hdr__search-toggle, .hdr__platform, .hdr__cta) { display: none; }
.hdr__search-icon { position: absolute; left: 12px; display: inline-flex; color: var(--text-muted); pointer-events: none; }
.hdr__search-input {
    flex: 1 1 0; min-width: 0; padding: 8px 38px 8px 36px;
    font-family: var(--font-core); font-size: var(--text-body-sm); color: var(--text-primary);
    background: var(--white); border: 1px solid var(--border-subtle);
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.hdr__search-input::placeholder { color: var(--text-muted); }
.hdr__search-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-tint); }
.hdr__search-close {
    position: absolute; right: 8px; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; cursor: pointer; color: var(--text-muted); background: transparent; border: 0;
    transition: var(--transition-control);
}
.hdr__search-close:hover { color: var(--brand-primary-deep); background: var(--surface-50); }
.hdr__search-submit {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hdr__burger { display: none; }

@media (max-width: 1160px) { .hdr__nav { gap: var(--space-4); } }
@media (max-width: 1080px) {
    .hdr { height: auto; flex-wrap: wrap; gap: 0; padding-top: 20px; padding-bottom: 0; }
    .hdr__logo { margin-right: auto; }
    .hdr__burger {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
        background: none; border: 1px solid var(--border-subtle); cursor: pointer; color: var(--ink-900);
    }
    .hdr__nav { margin-left: 0; justify-content: flex-start; flex-basis: 100%; flex-wrap: wrap;
        border-top: 1px solid var(--border-subtle); margin-top: 18px; padding-bottom: 10px; }
    .hdr__burger[aria-expanded="false"] + .hdr__nav { display: none; }
    .hdr__group { width: 100%; }
    .navbtn, .hdr__platform { padding: 14px 0; width: 100%; text-align: left; }
    .hdr__menu { position: static; left: auto; min-width: 0; border: none; border-top: none; box-shadow: none; padding: 0 0 var(--space-4) var(--space-4); }
    .hdr__cta { margin-left: 0; padding: var(--space-4) 0; }
    /* The nav becomes a stacked panel here, so the absolutely positioned
       search has nothing to anchor to; drop it and let the rest stack. */
    .hdr__actions { position: static; display: block; width: 100%; }
    .hdr__search, .hdr__search-toggle { display: none; }
}

/* ---------- masthead ---------- */
.mhead { position: relative; background: var(--surface-50); color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); overflow: hidden; }
.mhead--ink { background: var(--brand-primary-darkest); color: var(--white); border-bottom: none; }
.mhead__in { position: relative; padding-top: var(--section-y); padding-bottom: var(--space-10); }
.mhead__in--plate { padding-bottom: 0; }
.mhead__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-9); align-items: end; }
.mhead__grid--plate { grid-template-columns: 1.05fr 0.95fr; }
@media (max-width: 900px) { .mhead__grid--plate { grid-template-columns: 1fr; } }
.mhead__body--plate { padding-bottom: var(--space-10); }
.mhead__title { margin: 20px 0 0; font-size: var(--text-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; max-width: 22ch; }
.mhead__lead { margin: 22px 0 0; font-size: var(--text-lead); line-height: 1.55; max-width: 52ch; color: var(--text-secondary); }
.mhead--ink .mhead__lead { color: rgba(255,255,255,.78); }
.mhead__actions { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.mhead__logo { margin: 22px 0 0; background: var(--white); display: inline-block; padding: 12px 16px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-7); padding: 0; list-style: none; font-size: var(--text-body-sm); }
.crumbs li { display: flex; align-items: center; gap: var(--space-2); }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs [aria-current] { color: var(--text-secondary); }
.crumbs__sep { color: var(--ink-500); }
.mhead--ink .crumbs a { color: rgba(255,255,255,.7); }
.mhead--ink .crumbs [aria-current] { color: rgba(255,255,255,.9); }
.mhead--ink .crumbs__sep { color: rgba(255,255,255,.4); }

/* ---------- home hero ---------- */
.hero { position: relative; background: var(--ink-900); color: var(--white); overflow: hidden; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr); gap: var(--space-10); align-items: stretch; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__body { padding-top: var(--space-9); padding-bottom: var(--space-10); }
.hero__title { margin: 26px 0 0; font-size: var(--text-hero); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.hero__title em { font-style: normal; color: var(--brand-primary); }
.hero__lead { margin: 28px 0 0; font-size: var(--text-body-lg); line-height: 1.65; color: rgba(255,255,255,.76); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.hero__plate { position: relative; margin-right: calc(-1 * max(var(--gutter-page), (100vw - var(--page-max)) / 2 + var(--gutter-page))); }
@media (max-width: 900px) { .hero__plate { display: none; } }
.hero__art { position: absolute; inset: 0; overflow: hidden; }
.hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 680px) { .hero__title { font-size: 44px; } }

/* ---------- footer ---------- */
.ftr { background: var(--ink-900); color: rgba(255,255,255,0.72); font-family: var(--font-core); }
.ftr__top { max-width: var(--page-max); margin: 0 auto; padding: var(--space-10) var(--gutter-page) var(--space-6); display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-8); }
@media (max-width: 1080px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .ftr__top { grid-template-columns: 1fr; } }
.ftr__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.ftr__brand img { align-self: flex-start; width: auto; max-width: 100%; height: 30px; flex: 0 0 auto; }
.ftr__addr { font-size: var(--text-body-sm); line-height: var(--leading-body); font-style: normal; }
.ftr__contact { font-size: var(--text-body-sm); }
.ftr__contact a { color: var(--brand-primary); text-decoration: none; }
.ftr__col { display: flex; flex-direction: column; gap: var(--space-3); }
.ftr__col h2 { margin: 0; font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--white); }
.ftr__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.ftr__col a { font-size: var(--text-body-sm); color: rgba(255,255,255,0.72); text-decoration: none; }
.ftr__col a:hover { color: var(--white); }
.ftr__legal { border-top: 1px solid rgba(255,255,255,0.12); }
.ftr__legal-in { max-width: var(--page-max); margin: 0 auto; padding: var(--space-5) var(--gutter-page); display: flex; gap: var(--space-5); font-size: 11px; letter-spacing: 0.04em; flex-wrap: wrap; }
/* Mirrors luminlogic.com's .footer-social: 34px bordered squares, accent on
   hover. Tuned for the ink footer rather than LL's light one. */
.ftr__social { display: flex; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.ftr__social a {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.72);
    transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.ftr__social a:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.ftr__social svg { width: 18px; height: 18px; display: block; }
.ftr__legal-in :last-child { margin-left: auto; }

/* ---------- carousel (peeking cards) ---------- */
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; gap: var(--space-5); transition: transform var(--dur-slow) var(--ease-standard); }
.carousel__slide { flex: 0 0 88%; background: var(--white); box-shadow: 0 0 0 1px var(--border-subtle); opacity: .5; transition: opacity var(--dur-base) var(--ease-standard); }
.carousel__slide[data-active="true"] { opacity: 1; }
.carousel__controls { margin-top: var(--space-7); display: flex; align-items: center; gap: var(--space-6); }
.carousel__pills { display: flex; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cpill {
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--white);
    font-family: var(--font-core); transition: var(--transition-control);
}
.cpill:hover { border-color: var(--ink-900); }
.cpill__num { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-500); }
.cpill__label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; color: var(--text-secondary); }
.cpill[aria-selected="true"] { background: var(--ink-900); border-color: var(--ink-900); }
.cpill[aria-selected="true"] .cpill__num { color: var(--brand-primary); }
.cpill[aria-selected="true"] .cpill__label { color: var(--white); }
.carousel__arrows { margin-left: auto; display: flex; gap: var(--space-2); flex: 0 0 auto; }
.carr {
    width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; background: var(--white); border: 1px solid var(--border-subtle);
    color: var(--text-primary); font-size: 15px; line-height: 1; transition: var(--transition-control);
}
.carr:hover:not(:disabled) { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.carr:disabled { color: var(--ink-500); opacity: .4; cursor: default; }
.carousel__slide-in { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); min-height: 400px; }
@media (max-width: 900px) { .carousel__slide-in { grid-template-columns: 1fr; } .carousel__slide { flex-basis: 96%; } }
.carousel__why { background: var(--surface-tint); border-right: 1px solid var(--border-subtle); padding: var(--space-8); }
.carousel__main { padding: var(--space-9); }
.carousel__kicker { margin-top: var(--space-6); font-size: var(--text-h2); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; max-width: 22ch; }
.carousel__body { margin: var(--space-6) 0 0; font-size: var(--text-body-lg); line-height: 1.65; color: var(--text-secondary); max-width: 46ch; }

/* No-JS and print: stack the slides instead of hiding four of five. */
.no-js .carousel__track, .carousel--stack .carousel__track { display: block; transform: none !important; }
.no-js .carousel__slide, .carousel--stack .carousel__slide { opacity: 1; margin-bottom: var(--space-6); }
.no-js .carousel__controls { display: none; }

/* ---------- number rail / process rail ---------- */
.rail { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); }
@media (max-width: 780px) { .rail { grid-template-columns: 1fr; } }
.rail__step {
    cursor: pointer; text-align: left; border: none; border-right: 1px solid var(--border-subtle);
    border-top: 3px solid transparent; margin-top: -1px; background: transparent;
    padding: var(--space-5); display: flex; align-items: baseline; gap: var(--space-3);
    font-family: var(--font-core); transition: var(--transition-control);
}
.rail__step:last-child { border-right: none; }
.rail__step:hover { background: var(--surface-50); }
.rail__step[aria-selected="true"] { border-top-color: var(--brand-primary); background: var(--surface-tint); }
.rail__num { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-500); }
.rail__step[aria-selected="true"] .rail__num { color: var(--brand-primary); }
.rail__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; color: var(--text-secondary); }
.rail__step[aria-selected="true"] .rail__label { color: var(--text-primary); }
.rail__desc { display: block; margin-top: 4px; font-size: var(--text-caption); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }

/* ---------- resource index ---------- */
.rfilter { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rfilter button {
    cursor: pointer; font-family: var(--font-core); font-size: 11px; font-weight: 700;
    letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 10px 16px;
    border: 1px solid var(--border-subtle); background: var(--white); color: var(--text-secondary);
    transition: var(--transition-control);
}
.rfilter button[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.rlist { margin-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.rrow {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: var(--space-7);
    align-items: center; padding: var(--space-6) var(--space-4) var(--space-6) 0;
    border-bottom: 1px solid var(--border-subtle); transition: background-color var(--dur-fast) var(--ease-standard);
}
.rrow:hover { background: var(--surface-50); }
.rrow[hidden] { display: none; }
@media (max-width: 780px) { .rrow { grid-template-columns: 1fr; gap: var(--space-4); } }
.rrow__cover { position: relative; height: 112px; }
.rrow__title { margin-top: var(--space-3); font-size: var(--text-h4); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.rrow__desc { margin: 8px 0 0; font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.6; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; background: var(--surface-100); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }

/* ---------- cover art plate ---------- */
.cover { position: absolute; inset: 0; overflow: hidden; background: var(--surface-100); }
.cover__wash { position: absolute; inset: 0; background: var(--gradient-cover); opacity: .55; }
.cover__lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(31,41,51,.09) 1px, transparent 1px); background-size: 34px 100%; }
.cover__cap { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ink-900); opacity: .14; }
.cover__in { position: absolute; inset: 0; padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; color: var(--ink-900); }
.cover__meta { display: flex; align-items: baseline; gap: var(--space-4); }
.cover__num { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.cover__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.cover__title { font-size: clamp(15px, 2.2vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; max-width: 18ch; }
.cover--ink { background: var(--ink-900); }
.cover--ink .cover__wash { opacity: .22; }
.cover--ink .cover__lines { background-image: linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); }
.cover--ink .cover__cap { background: var(--brand-primary); opacity: 1; }
.cover--ink .cover__in { color: var(--white); }
.cover--ink .cover__title { color: var(--brand-primary); }

/* ---------- people grid ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-7); }
.person__photo { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--surface-100); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__name { margin-top: var(--space-4); font-size: var(--text-body); font-weight: 700; }
.person__role { margin-top: 4px; font-size: var(--text-caption); color: var(--text-secondary); line-height: 1.5; }

/* ---------- article ---------- */
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-9); align-items: start; }
@media (max-width: 900px) { .article__grid { grid-template-columns: 1fr; } }
.article__body { max-width: 68ch; }
.article__aside { display: flex; flex-direction: column; gap: var(--space-7); position: sticky; top: var(--space-6); }
.article__aside-sec { border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
.article__promo { padding: var(--space-6); background: var(--brand-primary-darkest); }
.article__promo p { margin: 12px 0 var(--space-5); font-size: var(--text-body-sm); line-height: 1.6; color: rgba(255,255,255,.78); }

/* ---------- Pardot form embeds ----------
   The form is a cross-origin iframe, so the page cannot style it. Brand styling
   lives in the Pardot Layout Template; see docs/pardot-setup.md. What the theme
   owns is the frame: the card around it and the height before the resize
   message arrives. site.js listens for {formHeight} and sizes it to content. */
.pardot-form { background: var(--white); border: 1px solid var(--border-subtle); border-top: 4px solid var(--brand-primary); padding: var(--space-6); }
.pardot-form__head { margin-bottom: var(--space-5); }
.pardot-form__title { margin: 0; font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.015em; }
.pardot-form__sub { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.6; }
.pardot-form iframe { display: block; width: 100%; min-height: 420px; border: 0; }
/* Termly holds the src in data-src until cookies are accepted; without this the
   visitor who declines just sees blank space. */
.pardot-form__consent { padding: var(--space-6); background: var(--surface-50); border: 1px dashed var(--border-subtle); font-size: var(--text-body-sm); color: var(--text-secondary); line-height: 1.6; }

/* ---------- feature split ----------
   The workhorse layout inherited from the existing site: copy one side, a
   checklist or an image the other. Two source blocks collapse into this one. */
.fsplit { padding: var(--section-y) 0; }
.fsplit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); align-items: start; }
.fsplit--single .fsplit__grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .fsplit__grid { grid-template-columns: minmax(0, 1fr); } }
.fsplit--flip .fsplit__copy { order: 2; }
.fsplit--flip .fsplit__side { order: 1; }
@media (max-width: 900px) { .fsplit--flip .fsplit__copy, .fsplit--flip .fsplit__side { order: 0; } }
.fsplit__title { margin: 18px 0 0; font-size: var(--text-display-sm); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.fsplit__text { margin-top: var(--space-5); font-size: var(--text-body-lg); line-height: 1.7; color: var(--text-secondary); max-width: 58ch; }
.fsplit__text p { margin: 0 0 var(--space-4); }
.fsplit__text p:last-child { margin-bottom: 0; }
.fsplit__actions { margin-top: var(--space-7); }
.fsplit__side { display: flex; flex-direction: column; gap: var(--space-6); }
.fsplit__side .plate { min-height: 260px; }

.fsplit--tint { background: var(--surface-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.fsplit--cream { background: var(--surface-tint); }
.fsplit--ink { background: var(--ink-900); color: var(--white); }
.fsplit--ink .fsplit__title { color: var(--white); }
.fsplit--ink .fsplit__text { color: rgba(255,255,255,.76); }
.fsplit__section-title { margin: 0 0 var(--space-8); font-size: var(--text-display-sm); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.fsplit--ink .fsplit__section-title { color: var(--white); }

/* ---------- credential bar ----------
   Phrases of standing, divided on hairlines. Sits directly under the hero, so
   the ink variant reads as the last line of it rather than a new band. */
.credbar--ink { background: var(--ink-900); color: rgba(255,255,255,.72); }
.credbar--tint { background: var(--surface-50); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.credbar--white { background: var(--white); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.credbar__in {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-top: var(--space-5); padding-bottom: var(--space-5);
    font-size: var(--text-micro); font-weight: 700;
    letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.credbar--ink .credbar__in { border-top: 1px solid rgba(255,255,255,.16); }
.credbar__item { position: relative; padding-left: var(--space-6); }
.credbar__item:first-child { padding-left: 0; }
/* A gold tick of a rule instead of a bullet, matching the accent rule elsewhere. */
.credbar__item::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 14px; height: var(--rule-accent-h); background: var(--brand-primary);
}
.credbar__item:first-child::before { display: none; }
@media (max-width: 680px) {
    .credbar__in { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .credbar__item { padding-left: var(--space-6); }
    .credbar__item:first-child { padding-left: var(--space-6); }
    .credbar__item:first-child::before { display: block; }
}

/* ---------- spotlight ----------
   One timely thing, given a band of its own. */
.spot { padding: var(--section-y-tight) 0; }
.spot__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; }
@media (max-width: 780px) { .spot__in { grid-template-columns: 1fr; } }
.spot__copy { min-width: 0; }
.spot__action { flex: 0 0 auto; }
@media (max-width: 780px) { .spot__action { justify-self: start; } }
.spot__title { margin: 14px 0 0; font-size: var(--text-h2); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; max-width: 26ch; }
.spot__body { margin: var(--space-3) 0 0; font-size: var(--text-body-lg); line-height: 1.6; color: var(--text-secondary); max-width: 56ch; }

.spot--tint { background: var(--surface-tint); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
/* Regulatory red runs as a left-edge flag on a tinted band, not a full red
   fill: the scope is for signalling, and a solid red section shouts. */
/* The accent is painted rather than bordered: a real left border shifted this
   band's content 6px right of the gutter every other band sits on. */
.spot--regulatory { position: relative; background: var(--brand-tint); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.spot--regulatory::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: var(--brand-primary);
}
.spot--ink { background: var(--ink-900); }
.spot--ink .spot__title { color: var(--white); }
.spot--ink .spot__body { color: rgba(255,255,255,.72); }

/* ---------- signpost row ---------- */
.signposts { padding: var(--section-y-tight) 0; }
.signposts__heading { margin: 0 0 var(--space-7); font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.015em; }
.signposts__row { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); }
@media (max-width: 900px) { .signposts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .signposts__row { grid-template-columns: minmax(0, 1fr); } }
.signpost {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    border-right: 1px solid var(--border-subtle); border-top: 3px solid transparent;
    margin-top: -1px; text-decoration: none; color: inherit;
    transition: var(--transition-control), border-color var(--dur-fast) var(--ease-standard);
}
.signpost:last-child { border-right: none; }
a.signpost:hover { border-top-color: var(--brand-primary); color: inherit; }
.signpost__title { font-size: var(--text-h4); font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: var(--text-primary); }
.signpost__body { font-size: var(--text-body-sm); line-height: 1.6; color: var(--text-secondary); }
.signpost__cue {
    margin-top: auto; padding-top: var(--space-4);
    font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--tracking-label);
    text-transform: uppercase; color: var(--brand-primary-deep);
    display: inline-flex; align-items: center; gap: 6px;
}
a.signpost:hover .signpost__cue { color: var(--ink-900); }
@media (max-width: 900px) { .signpost { border-right: none; border-bottom: 1px solid var(--border-subtle); } }

/* ---------- block gap ----------
   theme.json sets blockGap so prose inside post content spaces itself. WordPress
   applies it as margin-block-start on every sibling, which is right for
   paragraphs and wrong for our bands: each already carries its own vertical
   rhythm, so the gap was additive. Two sections read 96 + 32 + 96 instead of
   96 + 96, and the bands that are meant to butt against their neighbour (the
   credential bar under the hero, the CTA band above the footer) floated clear
   of it.

   Zeroing it per component rather than globally keeps the gap where it earns
   its place. WordPress emits these inside :where(), which has no specificity,
   so a single class is enough to win. */
.wp-site-blocks > * { margin-block-start: 0; }

.hero,
.mhead,
.sec,
.sec-tight,
.credbar,
.spot,
.signposts,
.ctaband,
.fsplit,
.qband,
.rindex,
.refposts,
.lbar,
.hdr-wrap,
.ftr { margin-block-start: 0; }


/* On a dark band the bright gold is the readable one, so put it back there.
   Light surfaces keep the deep gold set on --text-eyebrow. */
.hero,
.sec--ink,
.fsplit--ink,
.spot--ink,
.credbar--ink,
.ctaband--ink,
.ctaband--gradient,
.pgrid--inverse,
.stats--inverse { --text-eyebrow: var(--brand-primary); }

/* ---------- post content measure ----------
   Interior pages put the page's own content inside .sec, where it is a mix of
   prose migrated from the old site and full-bleed bands that carry their own
   .mx. The prose had no constraint and ran the full width of the viewport with
   no gutter. Give it the page measure; let the bands opt out. */
.entry-content > * {
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter-page);
    padding-right: var(--gutter-page);
}
.entry-content > :is(
    .fsplit, .spot, .signposts, .credbar, .rindex, .refposts,
    .ctaband, .hero, .mhead, .sec, .sec-tight, .alignfull, .alignwide
) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* Wide content scrolls inside itself rather than pushing the page sideways. */
.entry-content > :is(table, pre, .wp-block-table) { overflow-x: auto; display: block; }

/* alignleft/alignright are floats, and a float ignores the auto margins that
   put every other child in the measure, so they sat on the viewport edge while
   the prose beside them started 152px in. Offset them by hand instead. The
   element keeps its own gutter padding, so the margin is the centring half
   only, and max() collapses it once the viewport is narrower than the measure. */
.entry-content > .alignleft  { margin-left:  max(0px, calc((100% - var(--page-max)) / 2)); }
.entry-content > .alignright { margin-right: max(0px, calc((100% - var(--page-max)) / 2)); }

/* The wrapper's padding doubled with a band's own at the edges: bands met each
   other at zero but stood 96px clear of the masthead and the CTA. */
.sec:has(> .entry-content > :first-child:is(.fsplit, .spot, .signposts, .credbar, .rindex, .refposts)) { padding-top: 0; }
.sec:has(> .entry-content > :last-child:is(.fsplit, .spot, .signposts, .credbar, .rindex, .refposts)) { padding-bottom: 0; }

/* ---------- masthead to content ----------
   The masthead ends on 80px of its own padding, inside its tinted band. A full
   96 on top read as a void; zero left the first heading sitting hard on the
   line where the tint stops. Half a section separates the two. */
.mhead + .sec { padding-top: var(--space-8); }

/* Prose running into a tinted band collided: the tint began the moment the
   paragraph ended. Only bands that paint a background need this. One that is
   white on white already has its own section padding. */
.entry-content > :not(.fsplit, .spot, .signposts, .credbar, .rindex, .refposts, .ctaband, .hero, .mhead, .sec, .sec-tight)
  + :is(.fsplit--tint, .fsplit--cream, .fsplit--ink, .spot, .credbar) {
    margin-block-start: var(--space-9);
}

/* ---------- resource index heading ---------- */
.rindex__heading { margin: 0 0 var(--space-7); font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.015em; }
.rindex__empty { margin: 0; font-size: var(--text-body); color: var(--text-secondary); }

/* A carousel slide can lead with a picture instead of the claim list. */
.carousel__plate { position: relative; overflow: hidden; background: var(--surface-100); border-right: 1px solid var(--border-subtle); }
.carousel__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .carousel__plate { min-height: 220px; border-right: none; border-bottom: 1px solid var(--border-subtle); } }

/* ---------- referenced posts ----------
   Two layouts over the same data. People get a square plate and read as a team;
   resources get a landscape cover and read as a library. */
.refposts { padding: var(--section-y) 0; }
.refposts__heading { margin: 0 0 var(--space-8); font-size: var(--text-display-sm); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.refposts__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-7); }
@media (max-width: 1000px) { .refposts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .refposts__grid { grid-template-columns: minmax(0, 1fr); } }

.refpost { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.refpost__media {
    position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
    background: var(--surface-100); box-shadow: 0 0 0 1px var(--border-subtle);
    display: flex; align-items: center; justify-content: center;
}
.refpost__media--portrait { aspect-ratio: 1 / 1; }
.refpost__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-standard); }
.refpost:hover .refpost__media img { transform: scale(1.03); }
.refpost__initials { font-size: var(--text-h2); font-weight: 700; color: var(--ink-500); }
.refpost__title { margin: var(--space-4) 0 0; font-size: var(--text-h4); font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; }
.refpost__summary { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); line-height: 1.6; color: var(--text-secondary); }
.refpost__cue {
    margin-top: var(--space-4); padding-top: var(--space-3);
    font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--tracking-label);
    text-transform: uppercase; color: var(--brand-primary-deep);
    display: inline-flex; align-items: center; gap: 6px;
}
.refpost:hover .refpost__cue { color: var(--ink-900); }

/* People follow the design's grid: it sizes itself to the number of faces
   rather than a fixed column count, and carries a name and role only, so every
   cell is the same height and the faces line up. */
.refposts--people .refposts__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-7); }
.refposts--people .refpost__media { box-shadow: none; }
.refposts--people .refpost__title { margin-top: var(--space-4); font-size: var(--text-body); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.refpost__role { margin: 4px 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--text-secondary); }
a.refpost:hover .refpost__title { color: var(--brand-primary-deep); }

/* A section mark is a heading block: whatever follows it needs air. The check
   list zeroes its own margin to kill the browser's list indent, which also
   killed the block gap, so its buttons and the next block were touching. */
.smark + * { margin-top: var(--space-8); }

/* A stat strip in a narrow aside wraps to its own rows, so each stat needs the
   rule above it rather than one rule across the top of a single row. */
.smark__aside .stats { border-top: none; gap: var(--space-6) var(--space-7); }
.smark__aside .stat { border-top: 1px solid var(--border-subtle); }
.smark--inverse .smark__aside .stat { border-top-color: rgba(255, 255, 255, 0.18); }

/* A panel card can carry a partner logo. Contained and left aligned on a fixed
   band so logos of different proportions still line up across the row. */
.panel__logo { height: 56px; margin-bottom: var(--space-5); display: flex; align-items: center; }
.panel__logo img { max-height: 100%; max-width: 70%; width: auto; object-fit: contain; display: block; }
.fsplit__list { margin-top: var(--space-6); }
.fsplit__list .checks { max-width: 58ch; }

/* ---------- breadcrumb ----------
   Breadcrumb NavXT emits its own spans rather than the list the design drew,
   so the .crumbs rules never matched and the trail sat unstyled and flush
   against the eyebrow below it. */
.crumbs-wrap {
    display: block;
    margin-bottom: var(--space-7);
    font-size: var(--text-body-sm);
    line-height: 1.5;
    color: var(--ink-500);
}
.crumbs-wrap a { color: var(--link); text-decoration: none; }
.crumbs-wrap a:hover { color: var(--link-hover); text-decoration: underline; }
.crumbs-wrap .current-item { color: var(--text-secondary); }
.mhead--ink .crumbs-wrap { color: rgba(255, 255, 255, 0.45); }
.mhead--ink .crumbs-wrap a { color: rgba(255, 255, 255, 0.72); }
.mhead--ink .crumbs-wrap .current-item { color: rgba(255, 255, 255, 0.9); }

/* The resource index had no vertical padding of its own, so on a page that
   opens with it the filter rail sat hard against the masthead. */
.rindex { padding: var(--section-y) 0; }

/* An index that opens the page sits straight under a masthead that already
   supplies the break, so a full section's worth of padding reads as a hole. */
.sec:has(> .entry-content > :first-child.rindex) .rindex { padding-top: var(--space-8); }

/* .rlist's top margin clears the heading and filter rail. With neither above
   it, the margin is dead space. */
.rlist:first-child { margin-top: 0; }

/* Empty heading/paragraph blocks left by a migration are invisible but still
   count as :first-child, which defeats the edge-collapse rules above. */
.entry-content > :is(h1, h2, h3, h4, h5, h6, p):empty { display: none; }

/* Raw media pasted straight into post content is inline-level, so the auto
   margins that centre everything else in the measure do nothing and it sits
   against the left edge. Make it block so it centres like the prose. */
.entry-content > :is(iframe, img, video, embed, object, audio) {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* A masthead carrying only a breadcrumb and a title does not need the full
   section rhythm; at 96/80 it read as a large empty band. The gradient wash is
   also lifted a little so the band has something in it. */
.mhead--compact .mhead__in { padding-top: var(--space-9); padding-bottom: var(--space-8); }
.mhead--compact .mh-wash { opacity: 0.26; }