:root {
    --navy: #ffffff;
    --surface: #f2f5fa;
    --cyan: #1d3b8d;
    --white: #172b4b;
    --muted: #526278;
    --rule: #d5dce6;
    color-scheme: light;
}
html { scrollbar-color: #8c9cb6 #f2f5fa; }
body { background: #fff; color: #172b4b; }
::selection { background: #1d3b8d; color: #fff; }
.shell { width: min(1480px, calc(100% - 80px)); }
.concept-switch { justify-content: flex-start; padding-inline: 32px; background: #f2f5fa; }
.site-header { min-height: 86px; border-bottom: 0; padding-block: 8px; }
.identity img { width: 154px; }
.identity span { padding-left: 18px; border-left: 1px solid var(--rule); color: var(--white); font-size: 13px; }
.site-header nav { gap: 32px; }
.nav-enquire { border-color: var(--cyan); padding-inline: 18px; }
.intro { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; gap: 100px; padding-block: 50px 64px; }
h1 { font-size: clamp(50px, 6vw, 88px); letter-spacing: -.04em; line-height: 1.02; font-weight: 560; margin-bottom: 24px; }
h1 span { color: var(--cyan); }
.intro-copy > p { max-width: 66ch; font-size: 17px; line-height: 1.55; margin-bottom: 26px; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.intro-actions > .button { display: inline-flex; gap: 24px; padding: 14px 20px; }
@media (max-width: 768px) { .intro-artwork:empty { display: none; } }
.intro-reference { padding-top: 8px; align-self: center; }
.intro-reference h2 { font-size: 30px; line-height: 1.15; margin-bottom: 18px; }
.intro-reference > p { max-width: 35ch; font-size: 14px; margin-bottom: 26px; }
.intro-reference nav { display: flex; flex-direction: column; }
.intro-reference nav a { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 13px; border-top: 1px solid var(--rule); font-size: 14px; }
.intro-reference nav a:hover { color: var(--cyan); }
.intro-reference nav .icon { color: var(--cyan); }
.button-primary { background: var(--cyan); color: #fff; }
.button-primary:hover { background: #142b6b; }
.button-light { color: var(--cyan); border-color: #a6b5d0; }
.button-light:hover { background: #eef2fa; border-color: var(--cyan); }
.supplier-section { background: #f8faff; padding-block: 34px 52px; border-top: 0; }
/* The manufacturers section keeps the same width as the rest of the page. */
.supplier-section > .shell { width: min(1480px, calc(100% - 80px)); }
.section-heading { padding-bottom: 24px; }
.section-heading h2 { font-size: 34px; margin-bottom: 8px; }
.section-heading p { font-size: 14px; max-width: 70ch; }
.explorer-tools { border-block: 0; gap: 32px; padding-block: 0 22px; }
.search { background: #fff; width: 430px; border-color: #b7c5dc; }
.search input { min-height: 46px; }
::placeholder { color: #596b85; }
.filters button { color: #465a78; }
.filters button:hover { color: var(--cyan); background: #eaf0fa; }
.network-layout { margin-top: 0; gap: 0; }
.network { height: clamp(600px, 66vw, 850px); background: #fff; border: 1px solid var(--rule); }
.graph-toolbar { padding-block: 4px 14px; }
.graph-view-controls button { background: #fff; border-color: #c1cce0; }
.graph-layers label { font-size: 13px; }
.graph-edge-distribution { stroke: #7b92b8; opacity: .38; }
.graph-edge-distribution.selected { stroke: #1d3b8d; opacity: .85; }
.graph-edge-family { stroke: #1d3b8d; opacity: .6; }
.graph-edge-product { stroke: #526b93; opacity: .6; }
.graph-family-labels text { fill: #1d3b8d; stroke: #fff; font-weight: 550; }
.graph-centre circle { fill: white; stroke: #1d3b8d; }
.graph-centre text { fill: #172b4b; }
.graph-logo-plate { fill: #fff; stroke: #c3cfe0; }
.graph-wordmark { fill: #172b4b; }
.graph-node-label { fill: #172b4b; stroke: #fff; font-weight: 500; }
.graph-node.muted .graph-node-label { fill: #526278; }
.graph-card-surface { fill: #fff; stroke: #1d3b8d; stroke-width: 1.5; }
.graph-card-title { fill: #172b4b; }
.graph-card-annotation { fill: #1d3b8d; }
.graph-card-category, .graph-card-hint { fill: #526278; }
.product-key { border-color: #526b93; }
.graph-help, .graph-note { max-width: 100%; font-size: 12px; }
.graph-help { margin-top: 15px; }
.line-detail { margin-top: 28px; padding: 28px 0 34px; grid-template-columns: minmax(180px, .65fr) minmax(260px, 1fr) minmax(350px, 1.6fr); gap: 48px; }
.detail-plate { color: #172b4b; background: #fff; border: 1px solid var(--rule); }
.detail-plate:has(.wordmark) { display: flex; }
.detail-plate .wordmark { font-weight: 600; }
.line-detail h3 { font-size: 26px; }
.detail-connections { padding-left: 28px; }
.connection-members button { border-color: #b2bed2; }
.directory-heading { padding-block: 27px 22px; }
.directory-heading h3 { font-size: 26px; }
.supplier-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.supplier-row:nth-child(n) { border-top: 0; margin-top: 0; }
.supplier-link { min-height: 80px; padding: 12px 0; gap: 12px; }
.supplier-plate { width: 84px; min-width: 84px; height: 40px; color: #172b4b; }
.supplier-name { font-size: 13px; }
.supplier-link:has(.wordmark) .supplier-name { font-size: 15px; }
.supplier-link:hover { background: #edf2fb; }
.qualification-tooltip { background: #172b4b; color: #fff; border-color: #172b4b; }
.line-footnote { gap: 20px; margin-block: 24px 38px; }
.support-section { grid-template-columns: 1fr; gap: 40px; border-top: 0; padding-block: 72px; }
.support-copy { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0 70px; }
.support-copy h2 { grid-row: 1 / 4; font-size: 38px; }
.support-copy > p { font-size: 16px; max-width: 66ch; margin-bottom: 14px; }
.support-copy .button { grid-column: 2; justify-self: start; margin-top: 8px; }
.support-flow { grid-template-columns: repeat(3, 1fr) minmax(160px, .7fr); gap: 36px; padding: 32px; background: #f2f5fa; }
.support-flow > div { padding-block: 0; }
.support-flow h3 { font-size: 21px; color: var(--cyan); }
.support-flow .quality { grid-column: auto; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid #c9d3e3; gap: 10px; align-items: flex-start; }
.quality strong { font-size: 17px; }
.quality-symbol { width: 22px; height: 22px; }
.about-section { display: block; border-top: 0; padding-block: 62px 72px; }
.about-section h2 { font-size: 42px; margin-bottom: 32px; }
.company-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.company-columns p { font-size: 16px; margin: 0; }
.contact-section { background: #f2f5fa; border-top: 0; padding-block: 68px; }
.contact-layout { grid-template-columns: 1fr 1.5fr; gap: 80px; }
.contact-layout h2 { font-size: 40px; }
.contact-layout form { background: transparent; }
form input, form textarea { background: #fff; border-color: #b4c0d3; color: #172b4b; }
.field-error { color: #a82323; }
[aria-invalid='true'] { border-color: #a82323; }
.form-status.success { color: #185d3d; }
.site-footer { border-top: 0; padding-block: 28px; }
.site-footer img { width: 115px; height: auto; }
@media (max-width: 1200px) {
    .intro { gap: 64px; }
    .supplier-directory { grid-template-columns: repeat(3, 1fr); }
    .line-detail { gap: 28px; grid-template-columns: 180px minmax(230px, 1fr) minmax(300px, 1.3fr); }
    .support-flow { gap: 24px; }
}
@media (max-width: 1024px) {
    .shell, .supplier-section > .shell { width: calc(100% - 48px); }
    .intro { grid-template-columns: 1.5fr 1fr; gap: 40px; }
    h1 { font-size: 62px; }
    .intro-reference h2 { font-size: 25px; }
    .explorer-tools { align-items: start; flex-direction: column; gap: 10px; }
    .search { width: 100%; }
    .network { height: 670px; }
    .line-detail { grid-template-columns: 200px 1fr; }
    .detail-connections { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); padding: 22px 0 0; }
    .support-copy { gap: 0 35px; }
    .support-flow { grid-template-columns: repeat(3, 1fr); }
    .support-flow .quality { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); padding: 20px 0 0; }
    .company-columns { gap: 28px; }
    .contact-layout { gap: 40px; }
}
@media (max-width: 768px) {
    .concept-switch { justify-content: center; overflow-x: auto; padding-inline: 8px; gap: 1px; }
    .concept-switch a { padding-inline: 9px; font-size: 11px; }
    .site-header { min-height: 72px; }
    .identity img { width: 120px; }
    .site-header nav { gap: 20px; }
    .site-header nav > a:nth-child(2) { display: none; }
    .nav-enquire { padding: 8px 12px; }
    .intro { grid-template-columns: 1fr; padding-block: 36px 42px; gap: 36px; }
    h1 { font-size: clamp(47px, 9vw, 66px); }
    .intro-copy > p { font-size: 16px; }
    .intro-reference { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0 26px; border-top: 1px solid var(--rule); padding-top: 24px; }
    .intro-reference h2 { font-size: 25px; grid-row: 1 / 3; }
    .intro-reference > p { font-size: 13px; margin-bottom: 16px; }
    .intro-reference nav a { font-size: 12px; gap: 8px; }
    .section-heading h2 { font-size: 29px; }
    .network { height: 580px; }
    .graph-toolbar { gap: 5px; }
    .line-detail { grid-template-columns: 160px 1fr; gap: 24px; }
    .detail-plate { width: 160px; }
    .line-detail h3 { font-size: 23px; }
    .supplier-directory { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
    .supplier-plate { width: 76px; min-width: 76px; }
    .supplier-link { min-height: 76px; }
    .directory-heading h3 { font-size: 22px; }
    .support-copy { display: block; }
    .support-copy h2, .about-section h2, .contact-layout h2 { font-size: 34px; }
    .support-section { padding-block: 46px; gap: 28px; }
    .support-flow { padding: 24px; gap: 20px; }
    .support-flow h3 { font-size: 17px; }
    .support-flow p { font-size: 12px; }
    .about-section { padding-block: 44px; }
    .company-columns { grid-template-columns: 1fr; gap: 18px; }
    .company-columns p { max-width: 70ch; font-size: 15px; }
    .contact-layout { grid-template-columns: 1fr; gap: 30px; }
    .contact-section { padding-block: 44px; }
}
@media (max-width: 480px) {
    .shell, .supplier-section > .shell { width: calc(100% - 32px); }
    .site-header nav > a:first-child { display: none; }
    .intro-reference { grid-template-columns: 1fr; gap: 0; }
    .intro-reference h2 { grid-row: auto; margin-bottom: 12px; }
    .intro-reference nav { margin-top: 6px; }
    .network { height: 460px; }
    .graph-layers { gap: 5px 12px; }
    .graph-view-controls { gap: 5px; }
    .graph-view-controls button { min-width: 40px; }
    .graph-view-controls > span { min-width: 34px; }
    .line-detail { grid-template-columns: 1fr; gap: 16px; }
    .detail-identity { display: grid; grid-template-columns: 112px 1fr; gap: 0 18px; align-items: center; }
    .detail-plate { width: 112px; height: 65px; padding: 10px; grid-row: 1 / 3; margin: 0; }
    .line-detail h3 { font-size: 21px; }
    .detail-connections { grid-column: auto; }
    .directory-heading { align-items: start; flex-direction: column; gap: 6px; }
    .supplier-directory { grid-template-columns: 1fr; }
    .supplier-plate { width: 96px; min-width: 96px; }
    .supplier-name { font-size: 14px; }
    .line-footnote { display: block; }
    .line-footnote span { display: block; margin-top: 8px; }
    .support-flow { grid-template-columns: 1fr; gap: 24px; }
    .support-flow h3 { font-size: 21px; }
    .support-flow p { font-size: 14px; }
    .support-flow .quality { grid-column: auto; }
    .site-footer { align-items: start; flex-wrap: wrap; }
    .site-footer p { order: 3; width: 100%; }
}

@media (max-width: 600px) { .network { height: 420px; } .graph-view-controls button { min-height: 44px; } }

/* Keep discovery focused on the map. */
.graph-toolbar { align-items: center; }
.graph-layers > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.graph-view-controls button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
.graph-view-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.graph-info { margin-top: 12px; font-size: 12px; color: var(--muted); }
.graph-info summary { cursor: pointer; width: fit-content; }
.graph-info p { max-width: 65ch; margin-top: 10px; line-height: 1.6; }
.explorer-tools { justify-content: flex-start; }
@media (max-width: 600px) { .graph-toolbar { gap: 10px; } .graph-view-controls { width: auto; } }

/* Atlas typography and self contained supplier cards. */
body, a, button, input, textarea, summary { font-family: 'JetBrains Mono', monospace; }
h1, h2, h3, h4 { font-family: Geist, sans-serif; }
.identity span { font-family: Geist, sans-serif; font-style: normal; font-weight: 560; font-size: 20px; white-space: nowrap; font-synthesis: none; line-height: 1.15; color: #000; letter-spacing: -.02em; }
.identity { flex-shrink: 0; }
.site-header { gap: 32px; flex-wrap: wrap; }
.site-header nav { gap: 24px; font-size: 12px; }
.graph-node-label, .graph-family-labels text, .graph-wordmark { font-family: 'JetBrains Mono', monospace; }
.graph-node.family-related .graph-logo-plate { stroke: #2361c9; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.graph-edge-product.selected { stroke-width: 2px; }
.graph-edge-family { stroke: #2361c9; }
.supplier-card { height: 270px; padding: 16px; border: 2px solid #2361c9; border-radius: 12px; background: #fff; color: #172b4b; display: flex; flex-direction: column; gap: 9px; font-size: 11px; line-height: 1.35; box-sizing: border-box; }
.supplier-card img { width: 100%; height: 44px; object-fit: contain; }
.supplier-card h3 { margin: 0; font-size: 18px; line-height: 1.15; }
.supplier-card p { margin: 0; }
.supplier-card-products { color: #526278; font-size: 10px; }
.supplier-card-actions { display: flex; flex-direction: column; margin-top: auto; gap: 6px; }
.supplier-card-actions a { min-height: 38px; display: flex; align-items: center; padding: 8px 10px; border: 1px solid #a6b5d0; color: #1d3b8d; }
.supplier-card-actions a:last-child { background: #1d3b8d; border-color: #1d3b8d; color: #fff; }
.supplier-card-actions a:hover { border-color: #1d3b8d; }
.supplier-card-qualification { color: #526278; font-size: 10px; }
@media (max-width: 600px) { .identity { gap: 10px; } .identity img { width: 82px; } .identity span { font-size: clamp(10px, 3.2vw, 15px); padding-left: 10px; } .site-header { gap: 18px; } }

.graph-expanded { transform-box: view-box; transform-origin: 0 0; }
.graph-layers .family-key { border-color: #2361c9; }
.identity span { display: block; }

.support-stage { display: flex; flex-direction: column; align-items: flex-start; }
.support-illustration { width: 100%; height: clamp(160px, 16vw, 230px); object-fit: contain; object-position: center; margin-bottom: 24px; }
.form-bottom p { max-width: none; white-space: nowrap; }
.form-bottom { gap: 16px; }
@media (max-width: 600px) {
    .support-illustration { height: 230px; }
    .form-bottom { flex-wrap: wrap; }
    .form-bottom p { font-size: 10px; }
}

/* Four matching support columns, with the original certification mark. */
.support-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.support-stage, .support-flow .quality { flex-direction: column; align-items: center; text-align: center; }
.support-flow .quality { grid-column: auto; border: 0; padding: 0; gap: 0; margin-top: 0; }
.support-flow h3 { margin-top: 0; }
.support-stage p { max-width: 32ch; }
.iso-logo { padding: 14px; }
@media (max-width: 1000px) { .support-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 600px) { .support-flow { grid-template-columns: 1fr; } }

/* Isometric control faces echo the technical illustrations. */
:is(.button, .nav-enquire, .supplier-card-actions a, .graph-view-controls button) {
    transform-origin: center;
    border-color: #1d3b8d;
    box-shadow: 1px 1px 0 #c8d7ef;
    text-decoration: none;
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 160ms, border-color 160ms;
}
:is(.site-header nav a:not(.nav-enquire):not(.button), .intro-reference nav a, .text-link, .contact-email, .graph-info a) {
    position: relative;
    transition: color 160ms;
}
@media (hover: hover) and (pointer: fine) {
    :is(.button, .nav-enquire, .supplier-card-actions a, .graph-view-controls button):not(:disabled):is(:hover, :focus-visible) {
        transform: translate(-3px, -3px);
        box-shadow: 3px 3px 0 #173474, 6px 6px 0 #c8d7ef;
    }
    :is(.button, .nav-enquire, .supplier-card-actions a, .graph-view-controls button):not(:disabled):active {
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0 #173474;
        transition-duration: 80ms;
    }
    :is(.site-header nav a:not(.nav-enquire):not(.button), .intro-reference nav a, .text-link, .contact-email, .graph-info a):is(:hover, :focus-visible) {
        color: #1d3b8d;
        text-decoration: none;
    }
    :is(.button, .nav-enquire, .text-link, .contact-email) .icon {
        transition: transform 180ms var(--ease);
    }
    :is(.button, .nav-enquire, .text-link, .contact-email):hover .icon {
        transform: translate(2px, -2px);
    }
}
@media (prefers-reduced-motion: reduce) {
    :is(.button, .nav-enquire, .supplier-card-actions a, .graph-view-controls button, .site-header nav a, .intro-reference nav a, .text-link, .contact-email, .graph-info a),
    :is(.button, .nav-enquire, .text-link, .contact-email) .icon {
        transition: none;
        transform: none !important;
    }
}

/* A circuit trace draws under text links while the lettering stays still. */
:is(.site-header nav a:not(.nav-enquire):not(.button), .intro-reference nav a, .text-link, .contact-email, .graph-info a)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 2px;
    background: linear-gradient(90deg, #1d3b8d calc(100% - 8px), #fa7628 0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 280ms var(--ease);
    pointer-events: none;
}
.graph-info a { display: inline-block; }
:is(.text-link, .contact-email) { border-bottom-color: transparent; }
:is(.intro-reference nav a, .text-link, .contact-email) .icon { transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
    :is(.site-header nav a:not(.nav-enquire):not(.button), .intro-reference nav a, .text-link, .contact-email, .graph-info a):hover::after { transform: scaleX(1); }
    :is(.intro-reference nav a, .text-link, .contact-email):hover .icon { transform: translateX(4px); }
}
:is(.site-header nav a:not(.nav-enquire):not(.button), .intro-reference nav a, .text-link, .contact-email, .graph-info a):focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    :is(.site-header nav a:not(.nav-enquire):not(.button), .intro-reference nav a, .text-link, .contact-email, .graph-info a)::after,
    .intro-reference nav a .icon { transition: none; }
    .intro-reference nav a .icon { transform: none !important; }
}
.text-link:hover { border-bottom-color: transparent; }

/* A short response to hover, tap or keyboard activation. */
.illustration-trigger { position: relative; display: block; width: 100%; padding: 0; margin: 0 0 24px; border: 0; background: transparent; color: inherit; cursor: pointer; perspective: 900px; -webkit-tap-highlight-color: transparent; }
.illustration-trigger .support-illustration { margin-bottom: 0; }
.illustration-trigger:focus-visible { outline: 2px solid #2361c9; outline-offset: 6px; border-radius: 8px; }
.iso-trigger::after { content: ''; position: absolute; inset: 14px; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .8) 48%, transparent 58%); background-size: 300% 100%; background-position: 100% 0; mask-image: url('/images/iso.png'); mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
.iso-trigger.is-animating::after { animation: badge-gleam 1000ms ease-in-out; }
@keyframes badge-gleam {
    0% { opacity: 0; background-position: 100% 0; }
    15%, 80% { opacity: 1; }
    100% { opacity: 0; background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .illustration-trigger.is-animating img, .iso-trigger.is-animating::after { animation: none; }
}

/* Only equipment internals move; the full illustration remains anchored. */
.equipment-drawing { display: block; width: 100%; height: clamp(160px, 16vw, 230px); }
.live-display, .machine-light { opacity: 0; }
.is-animating .live-display { opacity: 1; }
.is-animating .display-trace { animation: trace-flow 600ms linear 3; }
.is-animating .display-pulse { animation: trace-flow 900ms linear 2; }
.is-animating .display-scan { animation: display-scan 900ms linear 2; }
.is-animating .assembly-head { animation: assembly-cycle 600ms ease-in-out 3; }
.is-animating .machine-light { animation: status-light 600ms ease-in-out 3; }
.is-animating .machine-screen { animation: status-light 900ms ease-in-out 2; }
@keyframes trace-flow { to { transform: translateX(-80px); } }
@keyframes display-scan { from { transform: translateX(0); } to { transform: translateX(370px); } }
@keyframes assembly-cycle { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-12px,18px); } }
@keyframes status-light { 0%, 100% { opacity: 0; } 30%, 70% { opacity: .85; } }
@media (max-width: 600px) { .equipment-drawing { height: 230px; } }
@media (prefers-reduced-motion: reduce) {
    .illustration-trigger .equipment-drawing * { animation: none !important; }
    .live-display, .machine-light, .machine-screen { opacity: 0 !important; }
}

.live-validation { opacity: 0; }
.is-animating .live-validation { opacity: 1; }
.is-animating .validation-scan { animation: validation-test 1800ms ease-in-out; }
.is-animating .validation-point, .is-animating .validation-status { animation: validation-indicator 1800ms ease-in-out; }
.validation-point:nth-of-type(2) { animation-delay: 120ms; }
.validation-point:nth-of-type(3) { animation-delay: 240ms; }
@keyframes validation-test { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .3; } 85% { opacity: .3; } 100% { transform: translateY(245px); opacity: 0; } }
@keyframes validation-indicator { 0%, 100% { opacity: 0; } 40%, 65% { opacity: .65; } }
.illustration-trigger.is-looping .equipment-drawing * { animation-iteration-count: infinite; }
@media (prefers-reduced-motion: reduce) { .live-validation { opacity: 0 !important; } }

/* Equal extrusion on small controls and wide call to action buttons. */
:is(.button, .nav-enquire, .supplier-card-actions a, .graph-view-controls button):not(:disabled):focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: 3px 3px 0 #173474, 6px 6px 0 #c8d7ef;
}
:is(.button, .nav-enquire, .supplier-card-actions a, .graph-view-controls button):not(:disabled):active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #173474;
    transition-duration: 80ms;
}
:is(.button, .nav-enquire):hover .icon { transform: none; }
:is(.button, .graph-view-controls button):disabled { transform: none; box-shadow: none; }

/* Catalogue capabilities stay legible inside the expanded map card. */
.supplier-card-products { margin: 0; padding: 0 0 0 14px; color: #344966; font-size: 11px; line-height: 1.5; }
.supplier-card-products li { margin: 0 0 2px; }
p.supplier-card-products { padding: 0; }
.graph-info { margin: 0 0 20px; }
.graph-info p { max-width: 95ch; }

/* Circuit Board by Steve Schoger (Hero Patterns), CC BY 4.0. */
.partner-lines { position: relative; isolation: isolate; overflow: hidden; margin-top: 24px; padding: 28px clamp(22px, 5vw, 72px); border: 0; border-radius: 16px; background: transparent; }
@media (max-width: 600px) {
    .partner-lines { padding: 24px; }
}

.graph-layers { flex-wrap: wrap; gap: 12px 24px; }
.outline-key { display: inline-block; width: 18px; height: 13px; border: 2px solid; border-radius: 3px; }
.family-outline { border-color: #2361c9; }
.graph-centre[role="button"] { cursor: pointer; }
.graph-centre:focus-visible circle { stroke: #ff7020; stroke-width: 3px; }

.partner-lines > .partner-copy { max-width: none; padding: 0; }
.partner-copy h2 { color: #173e35; }
.partner-copy > p { color: #304f46; }
.partner-copy > p:last-child { margin-bottom: 0; }

.network-wrap > .line-footnote { display: block; margin: 8px 0 0; text-align: right; }

/* Both editorial sections share the same centred content width and columns. */
.partner-lines { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-inline: 0; padding: 28px 0; border-radius: 0; }
.partner-lines > .partner-copy { width: min(1480px, calc(100% + 2px)); margin-inline: 0; }
@media (max-width: 480px) {
    .partner-lines { padding-block: 24px; }
}

/* Static manufacturer labels share the site's blue and monospace palette. */
.partner-copy > p { max-width: none; }
.partner-copy > .partner-brands { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; min-width: 0; }
.partner-brands li { padding: 5px 10px; border: 1px solid #c9d3e3; border-radius: 4px; background: #edf1f8; color: #203d8f; font-size: 14px; line-height: 1.5; white-space: nowrap; }
.partner-brands .partner-more { border-color: transparent; background: transparent; color: var(--muted); }

/* A full width header fixed to the top edge. At the top of the page it is clear; once the page scrolls under it, it turns
   solid and stands on the same two layer isometric extrusion as the buttons. */
:root { --header-height: 102px; }
html { scroll-padding-top: calc(var(--header-height) + 24px); }
.header-space { height: var(--header-height); }
.header-dock { position: fixed; inset: 0 0 auto; z-index: 50; background: rgb(248 250 255 / 0); box-shadow: 0 0 0 #1d3b8d, 0 0 0 #c8d7ef; transition: background-color 200ms ease-out, box-shadow 200ms var(--ease); }
.header-dock.is-scrolled { background: #fff; box-shadow: 0 2px 0 #1d3b8d, 0 5px 0 #c8d7ef; }
.header-dock .site-header { position: relative; width: min(1536px, 100%); margin-inline: auto; padding: 12px 28px; gap: 20px 32px; }
.header-dock .site-header .identity span { border-left: 0; padding-left: 0; }
@media (max-width: 768px) {
    .header-dock .site-header { padding: 12px 16px; gap: 12px; }
    .header-dock .site-header nav { justify-content: space-between; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .header-dock { transition: none; } }

/* Equal pauses around the company introduction. */
:root { --company-space: 64px; }
.support-section { padding-bottom: 0; }
.about-section { padding-block: var(--company-space); }
.about-section h2 { margin-bottom: var(--company-space); }
.about-section .company-columns p { margin-bottom: 0; }
@media (max-width: 768px) { :root { --company-space: 40px; } }

.header-dock .identity span { font-size: 30px; }
@media (max-width: 1100px) { .header-dock .identity span { font-size: 26px; } }
@media (max-width: 768px) { .header-dock .identity span { font-size: 21px; } }
@media (max-width: 600px) { .header-dock .identity span { font-size: clamp(12px, 3.8vw, 18px); } }
@media (max-width: 360px) { .header-dock .identity img { width: 64px; } }

.header-dock .site-header nav { gap: 12px; }
.header-dock .site-header nav .button { display: inline-flex; justify-content: center; min-height: 44px; padding: 10px 16px; font-size: 12px; }
.header-dock .site-header nav .button-light { background: rgb(255 255 255 / .35); border-color: #1d3b8d; color: #1d3b8d; }
.header-dock .site-header nav .button-primary { background: #1d3b8d; color: #fff; }
.header-dock .site-header nav .button-primary .icon { color: inherit; }
.header-dock .site-header nav .button-primary:hover { background: #142b6b; }
@media (max-width: 600px) {
    .header-dock .site-header nav { display: grid; grid-template-columns: 1.1fr .85fr 1fr; gap: 6px; }
    .header-dock .site-header nav .button { padding: 8px 5px; font-size: clamp(8.5px, 2.65vw, 11px); }
    .header-dock .site-header nav .icon { display: none; }
}

/* Manufacturer discovery: stable map, focused relationships and accessible details. */
.explorer-tools { display: grid; gap: 14px; }
.explorer-tools .search { width: min(100%, 640px); max-width: none; }
.product-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.product-filters button { min-height: 44px; padding: 9px 13px; border: 1px solid #a6b5d0; border-radius: 0; background: #fff; color: #1d3b8d; font: inherit; font-size: 13px; cursor: pointer; }
.product-filters button[aria-pressed="true"] { background: #203c90; border-color: #203c90; color: #fff; }
.product-filters button:hover { border-color: #203c90; }
.product-filters button:focus-visible, .manufacturer-sheet a:focus-visible { outline: 2px solid #e66a20; outline-offset: 3px; }
.discovery-count { margin: 12px 0; font-size: 13px; color: #344966; }
.graph-edge-distribution { opacity: .16; }
.graph-node.filtered-out { opacity: .2; }
.graph-node.filtered-out:focus-visible, .graph-node.filtered-out:hover { opacity: .7; }
.graph-family-labels text { font-size: 19px; paint-order: stroke; stroke-width: 6px; fill: #344966; }
.supplier-card { overflow: auto; font-size: 12px; line-height: 1.45; }
.supplier-card-summary { color: #344966; }
.supplier-card-products { font-size: 12px; line-height: 1.45; display: grid; gap: 7px; }
.supplier-card-actions a { min-height: 44px; }
.supplier-card-actions a:first-child { color: #fff; background: #203c90; border-color: #203c90; }
.supplier-card-actions a:last-child { color: #203c90; background: #fff; border-color: #a6b5d0; }
.supplier-card-qualification { padding-top: 4px; font-size: 12px; }
.manufacturer-sheet { display: none; }
.empty-results { color: #172b4b; padding: 22px 0; }
.empty-results .button { display: flex; width: fit-content; margin-top: 16px; padding: 12px 18px; border: 1px solid #203c90; color: #fff; background: #203c90; text-decoration: none; }
.empty-results .button:hover { background: #142b6b; color: #fff; }
.sourcing-hint { display: block; margin-top: 12px; font-size: 13px; }
@media (max-width: 600px) {
    .product-filters { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 10px; }
    .product-filters button { flex: 0 0 auto; }
    .explorer-tools { min-width: 0; }
    .explorer-tools .search { width: 100%; }
    .graph-node.expanded .graph-expanded { display: none; }
    .graph-node.expanded > .graph-mark, .graph-node.expanded > .graph-node-label { display: block; }
    .manufacturer-sheet:not([hidden]) { display: block; position: fixed; inset: auto 10px max(10px, env(safe-area-inset-bottom)); z-index: 80; max-height: 42dvh; overflow: auto; border-radius: 14px; box-shadow: 0 -8px 28px #00000026; background: #fff; }
    .manufacturer-sheet .supplier-card { height: auto !important; min-height: 0; border-width: 1px; border-radius: 14px; padding: 16px; font-size: 13px; }
    .manufacturer-sheet .supplier-card-products { font-size: 13px; }
    .manufacturer-sheet .supplier-card img { height: 36px; }
    .manufacturer-sheet .supplier-card-actions { flex-direction: row; }
    .manufacturer-sheet .supplier-card-actions a { flex: 1; font-size: 12px; }
}

.mobile-manufacturer-picker { display: none; }
@media (max-width: 600px) {
    .mobile-manufacturer-picker { display: grid; gap: 7px; margin: 12px 0 18px; font-size: 13px; color: #344966; }
    .mobile-manufacturer-picker select { min-height: 44px; width: 100%; border: 1px solid #a6b5d0; border-radius: 4px; background: #fff; color: #172b4b; padding: 8px; font: inherit; }
    .mobile-manufacturer-picker select:focus-visible { outline: 2px solid #e66a20; outline-offset: 3px; }
}

/* Shared spacing wherever section headings sit above their body copy. */
.about-section h2, .contact-layout h2 { margin-bottom: 24px; }
.contact-layout > div > p { margin-top: 0; }
@media (max-width: 768px) {
    .support-copy h2 { margin-bottom: 24px; }
    .support-copy > h2 + p { margin-top: 0; }
}

/* Supplier map: zoom controls, search matches and the selection trace. */
.search:focus-within { outline: 2px solid #e66a20; outline-offset: 3px; }
.search input:focus-visible { outline: none; }
.graph-info summary { padding-block: 9px; }
.graph-layers .outline-key { margin-left: -1px; }
.network-stage { position: relative; }
.network-stage .graph-view-controls { position: absolute; right: 12px; bottom: 12px; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.network-stage .graph-view-controls button { color: #1d3b8d; }
.graph-hint { position: absolute; left: 12px; bottom: 12px; max-width: min(48ch, calc(100% - 92px)); margin: 0; padding: 7px 11px; border: 1px solid var(--rule); border-radius: 4px; background: rgb(255 255 255 / .94); color: #344966; font-size: 12px; line-height: 1.45; pointer-events: none; transition: opacity 240ms ease-out, transform 240ms var(--ease); }
.graph-hint.is-dismissed { opacity: 0; transform: translateY(6px); }
.graph-node-label { transition: transform 160ms var(--ease); }
.graph-node:focus-visible > .graph-mark { transform: scale(1.3); }
.graph-node:focus-visible > .graph-node-label { transform: translateY(9px); }
.graph-match { fill: #e4ebf8; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.8); transition: opacity 200ms ease-out, transform 280ms var(--ease); pointer-events: none; }
.supplier-graph.is-narrowed .graph-node.is-match .graph-match { opacity: 1; transform: none; }
.graph-ping { fill: none; stroke: #2361c9; stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.graph-logo-plate { transition: stroke 180ms ease-out; }
.graph-node.awaiting .graph-logo-plate { stroke: #c3cfe0; stroke-width: 1px; }
.graph-signal { fill: #fa7628; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.graph-card-motion { transform-box: view-box; transform-origin: 0 0; }
.supplier-card { height: auto; max-height: 440px; }
.supplier-card-actions { margin-top: 4px; }
@media (pointer: coarse) {
    .supplier-graph { touch-action: pan-y; }
    .supplier-graph.is-zoomed { touch-action: none; }
}

/* Tablet and small laptop widths keep the header on one row with the stacked lockup. */
@media (min-width: 769px) and (max-width: 1099px) {
    .header-dock .site-header { flex-wrap: nowrap; gap: 20px; }
    .header-dock .identity { gap: 16px; }
    .header-dock .identity img { width: 120px; }
    .header-dock .identity span { max-width: 9em; font-size: 21px; line-height: 1.1; white-space: normal; }
    .header-dock .site-header nav { gap: 8px; flex-shrink: 0; }
    .header-dock .site-header nav .button { padding-inline: 12px; }
}
@media (min-width: 769px) and (max-width: 900px) {
    .header-dock .site-header nav .button-light[href="#support"] { display: none; }
}

/* Phones: one header row, a shorter opening and a filter row that shows it scrolls. */
@media (max-width: 600px) {
    .header-dock .site-header { flex-wrap: nowrap; padding: 10px 12px 10px 14px; gap: 10px; }
    .header-dock .site-header nav { display: flex; width: auto; flex-shrink: 0; }
    .header-dock .site-header nav .button-light { display: none; }
    .header-dock .site-header nav .button-primary { padding: 10px 12px; font-size: 12px; }
    .header-dock .identity { gap: 8px; min-width: 0; }
    .header-dock .identity img { width: clamp(56px, 17vw, 72px); }
    .header-dock .identity span { max-width: 8em; padding-left: 9px; font-size: 16px; line-height: 1.1; white-space: normal; }
    h1 { font-size: clamp(36px, 10.6vw, 47px); }
    .intro { padding-block: 20px 36px; }
    .intro-copy > p { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
    .intro-actions { margin-top: 26px; gap: 12px; }
    .product-filters { --gutter: 24px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
    .product-filters::-webkit-scrollbar { display: none; }
    .product-filters button { scroll-snap-align: start; padding-inline: 12px; font-size: 12px; }
    .product-filters.has-after { mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
    .product-filters.has-before { mask-image: linear-gradient(90deg, transparent, #000 64px); }
    .product-filters.has-before.has-after { mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
    .graph-info summary { padding-block: 12px; }
    .network-stage .graph-view-controls { flex-direction: row; }
    .graph-hint { top: 12px; bottom: auto; max-width: calc(100% - 24px); }
    .manufacturer-sheet:not([hidden]) { animation: sheet-rise 280ms var(--ease); }
    .manufacturer-sheet .supplier-card img { padding-inline: 44px; }
    .manufacturer-sheet .supplier-card h3 { padding-right: 44px; }
    .manufacturer-sheet .supplier-card-actions a { flex: 1 1 auto; white-space: nowrap; }
    .form-bottom p { font-size: 12px; white-space: normal; }
    .sheet-close { position: absolute; top: 4px; right: 4px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #1d3b8d; }
    .sheet-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
    .sheet-close:focus-visible { outline: 2px solid #e66a20; outline-offset: -4px; }
}
@media (max-width: 480px) { .product-filters { --gutter: 16px; } }
@keyframes sheet-rise { from { transform: translateY(18px); opacity: 0; } }

/* Infinite canvas. The map runs edge to edge on a dot grid that moves with the camera, and fades into the page at its edges. */
.supplier-section { container-type: inline-size; --map-gutter: 40px; }
@media (max-width: 1024px) { .supplier-section { --map-gutter: 24px; } }
@media (max-width: 480px) { .supplier-section { --map-gutter: 16px; } }
.network-stage { width: 100cqw; margin-inline: calc(50% - 50cqw); }
.network { border: 0; background: transparent; mask-image: linear-gradient(to right, transparent, #000 var(--map-gutter), #000 calc(100% - var(--map-gutter)), transparent), linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-composite: intersect; }
.graph-grid-dot { fill: #c3cee3; }
.network-stage .graph-view-controls { right: var(--map-gutter); }
.graph-hint { left: var(--map-gutter); }
#graph-expand .icon-collapse, #graph-expand.is-active .icon-expand { display: none; }
#graph-expand.is-active .icon-collapse { display: block; }
@media (max-width: 600px) { .graph-hint { max-width: calc(100% - 2 * var(--map-gutter)); } }

/* Full screen map: a fixed layer over the page where the wheel pans and one finger drags. */
html.is-map-expanded { overflow: hidden; }
.network-stage.is-expanded { position: fixed; inset: 0; z-index: 90; width: auto; margin: 0; background: #f8faff; overscroll-behavior: none; }
.network-stage.is-expanded .network { height: 100%; mask-image: none; }
.network-stage.is-expanded .graph-view-controls { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.network-stage.is-expanded .graph-hint { left: 16px; }
.supplier-graph.is-canvas { touch-action: none; }

/* Category islands. Each broad product area has one hue, shared by its island, the plate dots and its filter. */
.area-switching { --area: #2f6fd6; }
.area-power { --area: #df7426; }
.area-sensors { --area: #8a5cc9; }
.area-protection { --area: #cf3f36; }
.area-timing { --area: #12919f; }
.area-opto { --area: #c99312; }
.area-passives { --area: #33935a; }
.area-semiconductors { --area: #1d3b8d; }
.area-enclosures { --area: #6b7280; }
/* Isometric islands: flat faces tinted from the area hue, neutral metal, exact outlines at every zoom. */
.graph-island { transition: opacity 200ms ease-out; }
.graph-island.is-dimmed { opacity: .35; }
.graph-island > * { stroke: color-mix(in srgb, var(--area) 62%, #0d1f45); stroke-width: 1.25px; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 220ms ease-out, stroke 220ms ease-out; }
.graph-island .face-top { fill: color-mix(in srgb, var(--area) 8%, #fff); }
.graph-island .face-left { fill: color-mix(in srgb, var(--area) 19%, #fff); }
.graph-island .face-right { fill: color-mix(in srgb, var(--area) 31%, #fff); }
.graph-island .metal { fill: #dfe4ec; }
.graph-island .metal-top { fill: #eef1f5; }
.graph-island .hole { fill: color-mix(in srgb, var(--area) 58%, #0d1f45); }
.graph-island .lens { fill: #fff; }
.graph-island :is(.groove, .ray, .element) { fill: none; }
.graph-island :is(.ray, .element) { stroke: var(--area); stroke-width: 2px; stroke-linecap: round; }
.graph-island.is-lit:not(.awaiting) .face-top { fill: color-mix(in srgb, var(--area) 22%, #fff); }
.graph-island.is-lit:not(.awaiting) .face-left { fill: color-mix(in srgb, var(--area) 34%, #fff); }
.graph-island.is-lit:not(.awaiting) .face-right { fill: color-mix(in srgb, var(--area) 46%, #fff); }
.graph-island.is-lit:not(.awaiting) > * { stroke: var(--area); }
.graph-family-labels text.is-lit { fill: var(--area); font-weight: 700; }
.graph-edge-product[class*="area-"] { stroke: var(--area); }
.graph-edge-product[class*="area-"].selected { stroke: var(--area); }
.graph-layers .product-key { border-color: #526b93; }
.graph-area-dot { fill: var(--area); stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.product-filters [class^="area-"]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--area); vertical-align: 1px; }
.product-filters [class^="area-"][aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px #fff; }

/* Isometric component icons on plates without a supplied logo, in the island style. */
.graph-icon > * { stroke: color-mix(in srgb, var(--area) 62%, #0d1f45); stroke-width: .8px; stroke-linejoin: round; }
.graph-icon .face-top { fill: color-mix(in srgb, var(--area) 10%, #fff); }
.graph-icon .face-left { fill: color-mix(in srgb, var(--area) 26%, #fff); }
.graph-icon .face-right { fill: color-mix(in srgb, var(--area) 40%, #fff); }
.graph-icon .metal { fill: #e6eaf0; }
.graph-icon .metal-dark { fill: #c4ccd9; }
.graph-icon .hole { fill: color-mix(in srgb, var(--area) 58%, #0d1f45); }
.graph-icon .lens { fill: #fff; }
.graph-icon :is(.lead, .lever, .ray, .seam, .glint) { fill: none; stroke-linecap: round; }
.graph-icon .lead { stroke: #8e99ad; stroke-width: 1.3px; }
.graph-icon .lever { stroke: #8e99ad; stroke-width: 3px; }
.graph-icon .ray { stroke: var(--area); stroke-width: 1.3px; }
.graph-icon .glint { stroke: #fff; stroke-width: 1.2px; opacity: .55; }

/* Product filters share the header buttons' isometric extrusion, lifted in their own category's colour. */
.product-filters button {
    --lift: #173474;
    --lift-light: #c8d7ef;
    border-color: #1d3b8d;
    box-shadow: 1px 1px 0 var(--lift-light);
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 160ms, border-color 160ms;
}
.product-filters button[class^="area-"] {
    --lift: color-mix(in srgb, var(--area) 80%, #0d1f45);
    --lift-light: color-mix(in srgb, var(--area) 30%, #fff);
}
.product-filters button:focus-visible,
.product-filters button:active,
.product-filters button[aria-pressed="true"] { border-color: var(--lift); }
.product-filters button:focus-visible { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--lift), 6px 6px 0 var(--lift-light); }
@media (hover: hover) and (pointer: fine) {
    .product-filters button:hover { transform: translate(-3px, -3px); border-color: var(--lift); box-shadow: 3px 3px 0 var(--lift), 6px 6px 0 var(--lift-light); }
}
/* The chosen filter sits pressed in. */
.product-filters button[aria-pressed="true"],
.product-filters button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--lift); transition-duration: 80ms; }
/* Selected categories darken their hue enough to keep white text above 4.5:1. */
.product-filters button[class^="area-"][aria-pressed="true"] { background: color-mix(in srgb, var(--area) 55%, #0d1f45); }
@media (max-width: 600px) { .product-filters { padding-top: 6px; } }
@media (prefers-reduced-motion: reduce) {
    .product-filters button { transition: none; transform: none !important; }
}

/* The list is the default view. Manufacturers group by main area; the map card opens the full screen map. */
.mobile-manufacturer-picker { display: none !important; }
.directory-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; margin-top: 8px; }
.directory-main { min-width: 0; }
.directory-main > .line-footnote { display: block; margin: 4px 0 0; text-align: right; }
.directory-group { margin-bottom: 30px; }
.directory-title { display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid #172b4b; font-size: 19px; line-height: 1.2; }
.directory-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--area); flex: none; }
.directory-count { margin-left: auto; font: 12px 'JetBrains Mono', monospace; color: var(--muted); }
.directory-rows { margin: 0; padding: 0; list-style: none; }
.directory-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.row-logo { display: block; width: 112px; height: 40px; }
.row-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.row-logo.is-icon { display: grid; place-items: center; }
.row-logo.is-icon svg { width: 80px; height: 40px; }
.row-name { margin: 0; font-family: Geist, sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: #172b4b; }
/* The distribution tag is 12px tall and sits on the name's baseline. */
.row-tag { box-sizing: border-box; display: inline-flex; align-items: center; height: 12px; margin-left: 7px; padding: 0 4.5px; border: 1px solid #a6b5d0; border-radius: 2px; color: #3f5170; font: 600 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1.8px; }
.row-ranges { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.row-more { margin: -4px 0; padding: 4px 6px; border: 0; border-radius: 3px; background: none; color: #1d3b8d; font: inherit; white-space: nowrap; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
.row-more:hover { background: #eef2fa; text-decoration-style: solid; }
.row-more:focus-visible { outline: 2px solid #e66a20; outline-offset: 1px; }
.row-areas { margin: 0; }
.row-dots { display: inline-flex; gap: 4px; }
.row-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--area); }
.row-actions { display: flex; gap: 16px; font-size: 13px; white-space: nowrap; }
.row-actions .text-link { display: inline-flex; align-items: center; gap: 4px; color: #1d3b8d; }
.row-actions .icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.map-card { position: sticky; top: calc(var(--header-height, 96px) + 24px); background: #fff; border: 1px solid var(--rule); }
.map-card-preview { height: 220px; border-bottom: 1px solid var(--rule); background: #f8faff; overflow: hidden; }
.map-card-preview svg { display: block; width: 100%; height: 100%; pointer-events: none; cursor: default; }
.map-card-body { padding: 20px 22px 22px; }
.map-card h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; }
.map-card-body > p { margin: 0 0 20px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.map-card .button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; font-size: 12.5px; }
.map-card .button .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-card .graph-info { margin: 16px 0 0; }

/* The map only appears full screen. Its legend sits top left inside it. */
.network-stage:not(.is-expanded) { display: none; }
.network-stage.is-expanded .graph-toolbar { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; z-index: 2; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: rgb(255 255 255 / .94); }
.network-stage.is-expanded .graph-toolbar .graph-layers { gap: 16px; }
@media (max-width: 600px) { .network-stage.is-expanded .graph-hint { top: 64px; } }

@media (max-width: 1024px) {
    .directory-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
    .directory-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
    .directory-row .row-areas { display: none; }
    .row-logo { width: 96px; }
}
/* On phones the component map is hidden; the list stands alone. */
@media (max-width: 760px) {
    .directory-layout { grid-template-columns: 1fr; gap: 20px; }
    .map-card { display: none; }
    .directory-row { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; }
    .row-logo { width: 76px; height: 30px; }
    .row-logo.is-icon svg { width: 60px; height: 30px; }
    .row-actions { grid-column: 2; gap: 20px; }
    .directory-main > .line-footnote { text-align: left; }
}

/* Partner lines carry the component each is best known for, drawn like the map's islands. */
.partner-brands li[data-icon] { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.partner-icon { width: 40px; height: 22px; flex: none; }

/* The open map sits under the site header, which stays solid on top, with Close map floating bottom centre. */
html.is-map-expanded .header-dock { z-index: 95; background: #fff; box-shadow: 0 2px 0 #1d3b8d, 0 5px 0 #c8d7ef; }
.network-stage.is-expanded { top: var(--header-height); }
.network-stage .map-footer { display: none; }
.network-stage.is-expanded .map-footer { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 3; display: flex; transform: translateX(-50%); }
.map-footer .button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; font-size: 13px; white-space: nowrap; }
.map-footer .button .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 600px) {
    .network-stage.is-expanded .graph-view-controls { bottom: 84px; }
}

/* The hero illustration runs to the right edge of the window, about as tall as the copy beside it. Its drawing climbs
   from bottom left to top right, so its empty top left corner can sit beside the heading. */
.intro-artwork img { display: block; width: 100%; height: auto; }
@media (min-width: 1025px) {
    .intro { --art: min(44vw, 700px); position: relative; grid-template-columns: minmax(0, 1fr); }
    .intro-copy { position: relative; z-index: 1; max-width: calc(100% - var(--art) + 40px); }
    .intro-artwork { position: absolute; top: 50%; right: 0; width: var(--art); transform: translateY(-50%); pointer-events: none; }
}
@media (max-width: 1024px) {
    .intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .intro-artwork { margin-inline: -8px; }
}

/* Partner lines sit on their own full width band in a pale green, matching their green heading and closing the manufacturers section. */
.supplier-section { padding-bottom: 0; }
.supplier-section .partner-lines { margin: 40px calc(50% - 50cqw) 0; padding: 56px calc(50cqw - 50%) 60px; background: #eef6f1; border-top: 1px solid #d3e6db; overflow: visible; }
.supplier-section .partner-lines > .partner-copy { width: 100%; }
.partner-brands li { background: #fff; border-color: #cfe0d6; }
@media (max-width: 760px) { .supplier-section .partner-lines { margin-top: 28px; padding-block: 36px 40px; } }

/* Full width sections open with a faint line in a deeper shade of their own background. */
.supplier-section { border-top: 1px solid #e0e7f4; }
.contact-section { border-top: 1px solid #dbe2ee; }