.brand { display: inline-flex; flex-direction: column; line-height: .9; text-decoration: none; font-weight: 800; letter-spacing: -.055em; font-size: 2rem; }
.brand .brand-image { display: block; inline-size: auto; max-inline-size: 100%; max-block-size: 2.75rem; object-fit: contain; }
.brand small { font-size: .75rem; letter-spacing: 0; }
.brand-dot { color: var(--mk-red); }
.site-header { padding-block: var(--mk-3); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mk-6); }
.site-nav ul, .footer-links { padding: 0; margin: 0; list-style: none; }
.site-nav > ul { display: flex; flex-wrap: wrap; gap: var(--mk-4); align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.site-nav a:hover { text-decoration: none; }
.site-header .desktop-nav { display: none; }
.fallback-nav { flex-basis: 100%; }
.fallback-nav summary { padding-block: var(--mk-3); }
.fallback-nav .site-nav > ul { display: block; padding-block: var(--mk-4); }
.eyebrow { font-size: var(--mk-meta); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; inline-size: var(--mk-6); block-size: 2px; margin-inline-end: var(--mk-3); background: var(--mk-blue); vertical-align: middle; }
.hero-title { font-size: var(--mk-display); }
.text-blue { color: var(--mk-blue); }
.lead { font-size: var(--mk-body-lg); }
.muted { color: var(--mk-muted); }
.surface-dark .muted { color: var(--mk-white); opacity: .8; }
.button { display: inline-flex; gap: var(--mk-3); align-items: center; justify-content: center; min-block-size: 48px; padding: var(--mk-3) var(--mk-6); border: 2px solid transparent; border-radius: var(--mk-pill); background: var(--mk-action-blue); color: var(--mk-white); font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; transition: box-shadow var(--mk-motion), transform var(--mk-motion); }
.button:hover { box-shadow: var(--mk-shadow); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button-secondary { border-color: currentColor; background: transparent; color: inherit; }
.button:disabled { background: var(--mk-line); color: var(--mk-muted); cursor: not-allowed; box-shadow: none; transform: none; }
/* Opt-in public CTA variants. ServiceDetail identity buttons do not consume these. */
.button-primary-blue { --button-background: var(--mk-action-blue); --button-hover: var(--mk-red); }
.button-primary-red { --button-background: var(--mk-red); --button-hover: var(--mk-action-blue); }
.button-hover-red { --button-hover: var(--mk-red); }
.public-site .button:is(.button-primary-blue,.button-primary-red):not(:disabled) {
    background: var(--button-background); color: var(--mk-white);
}
.public-site .button:is(.button-primary-blue,.button-primary-red,.button-hover-red):not(:disabled):is(:hover,:focus-visible) {
    background: var(--button-hover); color: var(--mk-white);
}
/* Heading links only: preserve semantic anchors and existing geometry. */
.public-site .title-link:is(:link,:visited,:hover,:focus-visible,:active) { color: inherit; text-decoration: none; }
.public-site .title-link.title-link-on-light:is(:link,:visited) { color: var(--mk-ink); }
.public-site .title-link.title-link-on-light:is(:hover,:focus-visible) { color: var(--mk-blue); }
.card { padding: var(--mk-6); border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: var(--mk-white); box-shadow: var(--mk-shadow); }
.pillar-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--mk-4); padding: var(--mk-6); min-block-size: 19rem; border: 1px solid color-mix(in srgb, var(--pillar-accent) 45%, var(--mk-ink)); border-radius: var(--mk-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--pillar-accent) 20%, var(--mk-ink)), var(--mk-ink) 75%); color: var(--mk-white); box-shadow: var(--mk-shadow); }
.pillar-card::before { content: ""; inline-size: var(--mk-12); block-size: var(--mk-12); border: 2px solid var(--pillar-accent); border-radius: var(--mk-radius); background: url("../images/technical-grid.svg") center / cover; }
.pillar-card h3 { font-size: var(--mk-h4); }
.pillar-card a { margin-block-start: auto; min-block-size: 44px; display: inline-flex; align-items: center; }
.pillar-card .eyebrow { opacity: .8; }
.pillar-card .eyebrow::before { display: none; }
/* Approved hue names; the accent does not carry meaning without the title/number. */
.pillar-1 { --pillar-accent: cyan; }
.pillar-2 { --pillar-accent: var(--mk-green); }
.pillar-3 { --pillar-accent: orange; }
.pillar-4 { --pillar-accent: violet; }
.pillar-5 { --pillar-accent: magenta; }
.pillar-6 { --pillar-accent: var(--mk-blue); }
.pillar-7 { --pillar-accent: turquoise; }
.pillar-8 { --pillar-accent: gold; }
.cta-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mk-8); padding: var(--mk-8); border: 1px solid rgb(255 255 255 / 15%); border-radius: var(--mk-radius); }
.cta-panel > div { flex: 1 1 25rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; gap: var(--mk-3); padding: 0; font-size: var(--mk-small); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--mk-3); }
.field { display: grid; gap: var(--mk-2); }
.field input, .field select, .field textarea { inline-size: 100%; min-block-size: 48px; padding: var(--mk-3); border: 1px solid var(--mk-muted); border-radius: var(--mk-1); color: var(--mk-ink); background: var(--mk-white); }
.field label { font-weight: 600; }
.field [aria-invalid="true"] { border: 2px solid var(--mk-red); }
.field small { font-size: var(--mk-small); }
.field-error { color: var(--mk-ink); border-inline-start: 3px solid var(--mk-red); padding-inline-start: var(--mk-3); }
.demo-fields { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.demo-fields legend { margin-block-end: var(--mk-6); font-size: var(--mk-h3); font-weight: 700; }
.status-note { padding: var(--mk-4); border-inline-start: 4px solid var(--mk-blue); background: var(--mk-light); }
.site-footer { padding-block: var(--mk-16) var(--mk-8); }
.site-footer h2 { font-size: var(--mk-body); margin-block-end: var(--mk-4); }
.footer-links a { display: inline-block; padding-block: var(--mk-2); font-size: var(--mk-small); }
.footer-bottom { border-block-start: 1px solid rgb(255 255 255 / 20%); margin-block-start: var(--mk-12); padding-block-start: var(--mk-6); font-size: var(--mk-small); }
.drawer { position: fixed; inset: 0 auto 0 0; margin: 0; border: 0; inline-size: min(86vw, 360px); max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; padding: var(--mk-6); background: var(--mk-ink); color: var(--mk-white); overflow-y: auto; }
.drawer::backdrop { background: var(--mk-overlay); }
.drawer-heading { display: flex; justify-content: space-between; gap: var(--mk-4); align-items: center; margin-block-end: var(--mk-8); }
.drawer-close { inline-size: 48px; min-block-size: 48px; border: 1px solid currentColor; border-radius: var(--mk-radius); background: transparent; color: inherit; }
.drawer .site-nav > ul { display: grid; gap: var(--mk-3); }
.drawer .site-nav details ul { padding-inline-start: var(--mk-4); }
.drawer summary { padding-block: var(--mk-3); }
.drawer .button { margin-block-start: var(--mk-8); }
.flow-drawer { inset-inline: auto 0; inline-size: min(100vw, 50rem); }
html.drawer-open { overflow: hidden; scrollbar-gutter: stable; }
@media (min-width: 64rem) {
    .site-header .desktop-nav { display: block; }
    .fallback-nav, .nav-toggle { display: none; }
}