/* HSD Engineering. One stylesheet. Tokens first, then base, chrome, components, pages.
   Colour: navy bands (D13), orange accent for graphics and rules only, never text or a button fill;
   blue for links and the main button. Type: Source Serif 4 titles, Open Sans body (owner, 2026-09-25). */

@font-face { font-family: "Source Serif 4"; src: url(/assets/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/open-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/open-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url(/assets/fonts/open-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #21273C;
  --navy-2: #2C3452;
  --navy-line: #3B4466;
  --accent: #DD6B2C;
  --link: #1C4587;
  --link-hover: #13306A;
  --ink: #1B1F2A;
  --ink-2: #3A4050;
  --muted: #5E6472;
  --line: #DCDFE5;
  --panel: #F3F4F6;
  --paper: #FFFFFF;
  --on-navy: #FFFFFF;
  --on-navy-2: #C9CEDB;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: 16px;
  --radius: 6px;
  --shadow: 0 1px 2px rgb(20 26 45 / .06), 0 6px 18px rgb(20 26 45 / .07);
  --shadow-up: 0 2px 4px rgb(20 26 45 / .08), 0 14px 32px rgb(20 26 45 / .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: inherit; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.15rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .15s var(--ease); }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 600; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.eyebrow { font: 600 .75rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6em; }
.section { padding-block: clamp(48px, 7vw, 96px); }
.section-tight { margin-block: 40px; }
.section-title { position: relative; padding-top: 18px; }
.section-title::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--accent); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { top: 8px; }

/* Placeholders: quiet on purpose, so the design around them can be judged (owner, 2026-09-25). */
.ph { text-decoration: underline dotted #9AA1AD 1.5px; text-underline-offset: 4px; }
.ph::after { content: "sample"; margin-left: 6px; padding: 0 5px; border: 1px solid #C9CED6; border-radius: 3px; font: 600 10px/16px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #7A808C; vertical-align: 2px; white-space: nowrap; text-decoration: none; display: inline-block; }
.ph-empty::after { content: "to confirm"; }
.ph-q { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.4; color: #8A909B; }
.ph-q::before { content: "Needs from HSD: "; }

/* Header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { color: var(--navy); display: block; flex: none; }
.brand svg { width: 76px; height: auto; }
.nav-desktop { display: none; margin-left: auto; }
.nav-desktop ul, .nav-phone ul { list-style: none; margin: 0; padding: 0; }
.nav-desktop ul { display: flex; gap: 4px; }
.nav-desktop a { display: block; padding: 8px 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .2s var(--ease); }
.nav-desktop a:hover { color: var(--navy); border-bottom-color: var(--line); }
.nav-desktop a[aria-current] { color: var(--navy); border-bottom-color: var(--accent); }
.header-phone { display: none; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav-phone { margin-left: auto; }
.nav-phone summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-weight: 600; color: var(--navy); }
.nav-phone summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .2s var(--ease), opacity .2s; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; } .burger::after { top: 6px; }
.nav-phone[open] .burger { background: transparent; }
.nav-phone[open] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-phone[open] .burger::after { transform: translateY(-6px) rotate(-45deg); }
.nav-phone nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px var(--gutter) 16px; animation: drop .22s var(--ease); }
.nav-phone nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--panel); color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-phone nav a[aria-current] { color: var(--navy); box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
/* Desktop menu from 1160px: below that the seven labels wrap (measured 2026-10-01). */
@media (min-width: 1160px) {
  .nav-desktop a { white-space: nowrap; }
  .nav-desktop, .header-phone { display: block; }
  .nav-phone { display: none; }
  .header-phone { margin-left: 8px; padding-left: 20px; border-left: 1px solid var(--line); }
}

/* Breadcrumbs: full trail on wide screens, parent only on phones */
.crumbs { padding-block: 12px; font-size: .85rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; color: #A0A6B2; margin: 0 8px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.crumbs .here { color: var(--ink-2); font-weight: 600; }
@media (max-width: 719px) {
  .crumbs li.far:not(:nth-last-child(2)), .crumbs .here { display: none; }
  .crumbs li:nth-last-child(2)::before { content: "\2190"; margin: 0 6px 0 0; color: var(--muted); }
}

/* Hero bands */
.hero { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); }
.hero .subhead { font: 600 1.05rem/1.4 var(--sans); color: var(--on-navy-2); letter-spacing: .01em; margin-bottom: 1.1em; }
.hero .lede { font-size: 1.12rem; color: #E6E9F1; max-width: 40em; }
.hero a { color: #fff; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 32px; padding-block: 44px 52px; }

/* Buttons are the ask's own links: blue, never orange (D13) */
.ask-line a, .btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; margin: 2px 0; border-radius: var(--radius); font-weight: 600; text-decoration: none; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .15s; }
.ask-line a[href^="tel:"] { background: var(--link); color: #fff; font-variant-numeric: tabular-nums; }
.ask-line a[href^="tel:"]:hover { background: var(--link-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.ask-line a[href^="mailto:"] { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1.5px currentColor; }
.ask-line a[href^="mailto:"]:hover { transform: translateY(-1px); }
.hero .ask-line a[href^="tel:"] { background: #fff; color: var(--navy); }
.hero .ask-line a[href^="mailto:"] { color: #fff; }

/* Home hero */
.hero-home .hero-photo { position: absolute; inset: 0 0 0 auto; width: 100%; opacity: .22; }
.hero-home .hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.hero-home .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 5%, rgb(33 39 60 / .7) 55%, rgb(33 39 60 / .35)); }
.ask-hero { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--navy-line); max-width: 36em; }
.ask-title { font: 600 .78rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--on-navy-2); margin-bottom: 10px; }
.ask-hero .ask-line { color: #E6E9F1; }
.vendor-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 18px 40px rgb(0 0 0 / .28); border-top: 4px solid var(--accent); align-self: start; }
.vendor-card a { color: var(--link); }
.vendor-card dl { margin: 0; display: grid; gap: 10px; }
.vendor-card dl div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; border-bottom: 1px solid var(--panel); padding-bottom: 8px; }
.vendor-card dt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.vendor-card dd { margin: 0; font-size: .98rem; }
.vendor-more { margin: 12px 0 0; font-weight: 600; }
@media (min-width: 900px) {
  .hero-home .hero-photo { width: 62%; opacity: 1; }
  .hero-home .hero-photo::after { background: linear-gradient(90deg, var(--navy) 0%, rgb(33 39 60 / .82) 38%, rgb(33 39 60 / .5) 100%); }
  .hero-home .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; padding-block: 72px 80px; align-items: center; }
}

/* Identity strip */
.identity { background: var(--panel); border-bottom: 1px solid var(--line); }
.identity-row { display: flex; align-items: center; gap: 20px; padding-block: 22px; }
.year { font: 600 clamp(2.6rem, 2rem + 3vw, 4.4rem)/1 var(--serif); color: var(--navy); margin: 0; letter-spacing: -.02em; position: relative; padding-right: 22px; }
.year::after { content: ""; position: absolute; right: 0; top: 12%; bottom: 12%; width: 3px; background: var(--accent); }
.identity-text { margin: 0; font-size: 1.08rem; color: var(--ink-2); max-width: 44em; }
.identity-link a { font-weight: 600; white-space: nowrap; }

/* Home route cards: one lead card, three companions */
.route-grid { display: grid; gap: 16px; margin-top: 28px; }
.route-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.route-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); border-color: #C7CCD6; }
.route-link { display: grid; grid-template-columns: 112px 1fr; color: inherit; text-decoration: none; flex: 1; }
.route-photo { position: relative; overflow: hidden; background: var(--panel); }
.route-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.route-card:hover .route-photo img { transform: scale(1.04); }
.route-body { padding: 16px 18px; }
.route-body h3 { color: var(--navy); margin-bottom: .25em; }
.route-link:hover h3 { color: var(--link); }
.route-body p { margin: 0; color: var(--ink-2); }
.route-body .long { display: none; }
.route-sub { margin: 0; padding: 12px 18px; border-top: 1px dashed var(--line); background: #FAFAFB; font-size: .95rem; }
.route-sub a { font-weight: 600; }
.route-sub a::before { content: "#"; display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 3px; background: var(--navy); color: #fff; font: 600 .8rem/1.5 var(--sans); }
@media (min-width: 560px) { .route-body .long { display: inline; } .route-body .short { display: none; } }
@media (min-width: 900px) {
  .route-grid { grid-template-columns: 5fr 4fr 4fr; grid-template-rows: auto auto; }
  .route-lead { grid-row: span 2; }
  .route-lead .route-link { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 1fr) auto; }
  .route-lead .route-body { padding: 22px 24px 18px; }
  .route-lead .route-body h3 { font-size: 1.65rem; }
  .route-lead .route-sub { padding: 14px 24px 18px; }
  .route-card:not(.route-lead) .route-link { grid-template-columns: 1fr; grid-template-rows: 150px auto; }
  .route-grid > :nth-child(4) { grid-column: 2 / span 2; }
  .route-grid > :nth-child(4) .route-link { grid-template-columns: 2fr 3fr; grid-template-rows: none; }
}

/* Home proof and reach */
.proof-reach { background: linear-gradient(180deg, var(--paper), var(--panel)); padding-top: 0; }
.proof-grid { display: grid; gap: 32px; align-items: center; }
.proof { display: block; position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 12px; text-decoration: none; color: var(--navy); transition: box-shadow .25s var(--ease), transform .2s var(--ease); }
.proof:hover { box-shadow: var(--shadow-up); transform: translateY(-2px); }
.proof-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); margin: 0; }
.proof-title::after { content: " \2192"; font-family: var(--sans); font-weight: 400; color: var(--accent); }
.proof-img { width: min(100%, 360px); margin: 8px auto 0; }
.reach p { max-width: 34em; }
.links a { font-weight: 600; }
.sep { color: #A0A6B2; margin: 0 10px; }
@media (min-width: 900px) { .proof-grid { grid-template-columns: 5fr 6fr; gap: 72px; } .proof { padding: 32px 32px 16px; } }

/* Repair & Rebuild */
.hero-dept .hero-grid { padding-block: 48px 56px; }
@media (min-width: 900px) { .hero-dept .hero-grid { padding-block: 64px 72px; } .hero-dept .hero-main { max-width: 760px; } }
.group-grid { display: grid; gap: 28px; margin-top: 28px; }
.group { display: flex; flex-direction: column; gap: 0; }
.group-head { position: relative; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--navy); min-height: 120px; display: flex; align-items: flex-end; }
.group-photo { position: absolute; inset: 0; }
.group-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.group-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(33 39 60 / .95), rgb(33 39 60 / .2)); }
.group-label { position: relative; color: #fff; margin: 0; padding: 18px 20px; font-size: 1.45rem; }
.line-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); }
.line-list li + li { border-top: 1px solid var(--line); }
.line { display: grid; gap: 4px; padding: 16px 20px 16px 20px; text-decoration: none; color: var(--ink-2); position: relative; transition: background-color .15s, padding-left .2s var(--ease); }
.line::after { content: "\2192"; position: absolute; right: 18px; top: 16px; color: var(--muted); transition: transform .2s var(--ease), color .15s; }
.line:hover { background: #F8F9FB; padding-left: 26px; }
.line:hover::after { transform: translateX(3px); color: var(--link); }
.line-title { font: 600 1.08rem/1.3 var(--serif); color: var(--navy); padding-right: 28px; }
.line:hover .line-title { color: var(--link); }
.line-text { font-size: .95rem; }
.depth { margin-top: 16px; background: var(--panel); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px 6px; }
.depth h3 { font-size: 1.15rem; color: var(--navy); }
.depth-lead { font-weight: 600; color: var(--ink-2); }
.depth p { font-size: .96rem; }
@media (min-width: 900px) { .group-grid { grid-template-columns: 5fr 7fr; gap: 36px; align-items: start; } .group-head { min-height: 170px; } }
.pair-band { background: var(--navy); color: #fff; }
.pair-row { display: grid; gap: 16px 28px; padding-block: 32px; align-items: center; }
.pair-row h2 { font-size: 1.5rem; margin-bottom: .2em; }
.pair-row p { margin: 0; color: #E6E9F1; }
.pair-icon { width: 110px; fill: none; stroke: #fff; stroke-width: 2.5; }
.pair-icon path { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 5; animation: flow 1.6s linear infinite; }
.pair-icon .fill { fill: var(--accent); stroke: none; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.inline-route a { font-weight: 600; }
.pair-band .inline-route { color: var(--on-navy-2); font-size: .95rem; }
@media (min-width: 900px) { .pair-row { grid-template-columns: auto 1fr minmax(0, 360px); } .pair-band .inline-route { border-left: 1px solid var(--navy-line); padding-left: 28px; } }
.helium-grid { display: grid; gap: 24px; }
.lede-dark { font-size: 1.12rem; font-weight: 600; color: var(--ink-2); }
.models { color: var(--ink-2); }
.helium-side { background: var(--panel); border-radius: var(--radius); padding: 22px 24px 8px; }
.plain { margin: 0 0 1em; padding-left: 1.1em; }
.plain li { margin-bottom: .35em; }
@media (min-width: 900px) { .helium-grid { grid-template-columns: 6fr 5fr; gap: 56px; align-items: start; } }
.ask-band { background: var(--panel); border-top: 1px solid var(--line); }
.ask-band-row { padding-block: 44px 36px; display: grid; gap: 4px 32px; }
.ask-band h2 { margin: 0; }
.ask-terms { color: var(--muted); font-size: .95rem; }
@media (min-width: 900px) { .ask-band-row { grid-template-columns: auto 1fr; align-items: center; } .ask-band h2 { grid-row: span 2; padding-right: 32px; border-right: 3px solid var(--accent); } .ask-band .ask-line { margin: 0; } }

/* Model pages */
.hero-model .wrap { padding-block: 32px 40px; }
.hero-model h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); }
.siblings { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.siblings a { display: inline-flex; gap: 8px; align-items: baseline; padding: 9px 14px; border: 1px solid var(--navy-line); border-radius: 999px; text-decoration: none; color: #E6E9F1; background: rgb(255 255 255 / .04); transition: background-color .15s, border-color .15s; }
.siblings a:hover { background: rgb(255 255 255 / .1); border-color: var(--on-navy-2); }
.siblings strong { color: #fff; }
.model-grid { display: grid; gap: 8px 48px; padding-block: 36px 64px; }
.pn-panels { display: grid; gap: 16px; }
.pn-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 12px; background: var(--paper); scroll-margin-top: 16px; }
.pn-panel:target { border-color: var(--link); box-shadow: 0 0 0 3px rgb(28 69 135 / .15); }
.pn-panel h2 { font-size: 1.2rem; color: var(--navy); }
.pn-row { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pn { display: inline-block; font: 600 .98rem/1.2 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .03em; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; user-select: all; }
.drive-map { width: 100%; max-width: 560px; margin: 8px 0 4px; }
.drive-map .unit rect { fill: var(--navy); }
.drive-map .unit text { fill: #fff; }
.drive-map .pump rect { fill: var(--paper); stroke: var(--navy); stroke-width: 2; }
.drive-map .pump text { fill: var(--navy); }
.drive-map text { font: 600 15px var(--sans); text-anchor: middle; dominant-baseline: middle; }
.drive-map .wire { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.faults { padding-left: 1.1em; }
.faults li { margin-bottom: .4em; }
.up-route { border-top: 1px solid var(--line); padding-top: 18px; color: var(--ink-2); }
.model-aside { display: grid; gap: 16px; align-content: start; }
.ask-card { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 22px 22px 14px; border-top: 4px solid var(--accent); }
.ask-card h2 { font-size: 1.5rem; }
.ask-card .ask-line { color: #E6E9F1; }
.ask-card .ask-line a[href^="tel:"] { background: #fff; color: var(--navy); }
.ask-card .ask-line a[href^="mailto:"] { color: #fff; }
.vendor-mini { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px 6px; font-size: .96rem; }
.vendor-mini .terms { border-top: 1px solid var(--panel); padding-top: 10px; color: var(--ink-2); }
@media (min-width: 900px) {
  .model-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .pn-panels { grid-template-columns: 1fr 1.5fr; }
  .model-aside { position: sticky; top: 20px; }
}
@media (min-width: 1080px) { .pn-panels { grid-template-columns: 1fr 1.35fr; } }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-navy-2); margin-top: 0; }
.footer-grid { display: grid; gap: 28px; padding-block: 44px 24px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer .eyebrow { color: #9CA3B8; }
.brand-foot { color: #fff; margin-bottom: 14px; }
.brand-foot svg { width: 88px; }
.f-phone { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.f-more { margin-top: 14px !important; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .92rem; }
.f-legal { border-top: 1px solid var(--navy-line); padding-block: 16px 20px; font-size: .85rem; color: #9CA3B8; }
.f-legal p { margin: 0; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1.2fr; gap: 48px; } }

/* Phone contact bar */
.contact-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); box-shadow: 0 -4px 16px rgb(0 0 0 / .2); padding-bottom: env(safe-area-inset-bottom); }
.contact-bar a { display: flex; align-items: center; justify-content: center; min-height: 52px; color: #fff; font-weight: 700; text-decoration: none; }
.contact-bar a + a { border-left: 1px solid var(--navy-line); }
body { padding-bottom: 52px; }
@media (min-width: 720px) { .contact-bar { display: none; } body { padding-bottom: 0; } }

/* Motion: sections rise in once as they enter, only where supported and wanted */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .route-card, .group, .proof, .pn-panel, .helium-side, .depth { animation: rise both var(--ease); animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes rise { from { transform: translateY(14px); } }
  }
}
/* P3 (owner "do p3", 2026-10-01): for people who turn on Reduce Motion, nothing moves, slides or zooms,
   but short colour and border fades stay so states do not snap. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, opacity, box-shadow, text-decoration-color !important;
    transition-duration: .15s !important; }
  *:hover, *:focus { transform: none !important; }
}

/* Links on navy bands are white */
.pair-band a, .ask-card a:not([href^="tel:"]):not([href^="mailto:"]) { color: #fff; }
/* Department hero: photo on the right on wide screens */
.hero-dept .hero-photo { position: absolute; inset: 0 0 0 auto; width: 100%; opacity: .18; }
.hero-dept .hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); }
.hero-dept .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 10%, rgb(33 39 60 / .55)); }
@media (min-width: 900px) { .hero-dept .hero-photo { width: 48%; opacity: 1; } .hero-dept .hero-photo::after { background: linear-gradient(90deg, var(--navy) 0%, rgb(33 39 60 / .6) 45%, rgb(33 39 60 / .25)); } }

/* Accessibility fixes (review 2026-09-25) */
.hero :focus-visible, .pair-band :focus-visible, .ask-card :focus-visible, .site-footer :focus-visible, .contact-bar :focus-visible { outline-color: #fff; }
@media (max-width: 719px) {
  html { scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) and (max-width: 1159px) { .header-phone { display: block; margin-left: auto; } .nav-phone { margin-left: 16px; } }
.site-footer li a, .crumbs a, .vendor-card dd a, .vendor-mini a, .f-more a { display: inline-block; padding-block: 4px; }
.ph::after { color: #5E6472; border-color: #AEB4BF; }
.ph-q { color: #5E6472; }

/* Reconciled review fixes, 2026-09-26 */
.section { padding-block: clamp(40px, 5vw, 72px); }
/* 1: R&R first service row above the fold */
.hero-dept .hero-grid { padding-block: 36px 40px; }
@media (min-width: 900px) { .hero-dept .hero-grid { padding-block: 40px 44px; } }
.routes-dept { padding-top: 36px; }
.group-head { min-height: 72px; }
@media (min-width: 900px) { .group-head { min-height: 96px; } }
/* 2: models route as a row at the foot of the first group */
.line-note { display: block; color: var(--ink-2); font-size: .98rem; background: #FAFAFB; }
.line-note::after { content: none; }
.line-note:hover { padding-left: 20px; background: #FAFAFB; }
.line-note a { font-weight: 600; }
/* 3 and 4: Home hero tighter, company card compact on phones */
@media (min-width: 900px) { .hero-home .hero-grid { padding-block: 48px 52px; } }
.identity-row { padding-block: 16px; }
@media (max-width: 719px) {
  .vendor-card { padding: 16px; }
  .vendor-card dl { gap: 6px; }
  .vendor-card dl div { grid-template-columns: 72px 1fr; padding-bottom: 6px; }
  .hero-home .hero-grid { padding-block: 32px 36px; gap: 24px; }
}
/* 5: TV phone pills and hero */
@media (max-width: 559px) {
  .siblings li { width: 100%; }
  .siblings a { display: block; border-radius: 8px; padding: 8px 12px; }
  .hero-model .wrap { padding-block: 22px 26px; }
  .hero-model h1 { font-size: 1.8rem; }
  .hero-model .lede { font-size: 1rem; margin-bottom: .6em; }
}
/* 6: stacked drive map on phones */
.drive-map-tall { display: none; max-width: 320px; }
.drive-map-tall text { font-size: 14px; }
@media (max-width: 559px) { .drive-map:not(.drive-map-tall) { display: none; } .drive-map-tall { display: block; } }
/* 7: grounds that tell blocks apart, one faint grid */
.band-grid { background-color: var(--panel); background-image: linear-gradient(rgb(33 39 60 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(33 39 60 / .045) 1px, transparent 1px); background-size: 24px 24px; }
.proof-reach.band-grid { padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.pn-panels.band-grid { padding: 16px; border-radius: var(--radius); }
/* 8: furnace fills its card */
.proof { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.proof-title { padding: 20px 24px 4px; }
.proof-img { width: 100%; max-width: none; margin: 0; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 60%; }
/* 9: ask lines stay inline (a flex row orphaned the full stop); looser leading keeps the button links apart */
.ask-line { line-height: 2.4; }
/* 10 */
.pn-panels { align-items: start; }
/* 11: 1993 strip spans the width, with a tick-scale rule */
.identity-row { justify-content: flex-start; }
.ticks { flex: 1; align-self: center; height: 12px; min-width: 40px; order: 3; background: repeating-linear-gradient(90deg, rgb(221 107 44 / .45) 0 1px, transparent 1px 12px); display: none; }
@media (min-width: 900px) { .ticks { display: block; } .identity-text { order: 2; } }
/* 12 */
.pair-icon { width: 120px; }
.faults.ruled { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.faults.ruled li { position: relative; padding: 12px 0 12px 18px; margin: 0; border-bottom: 1px solid var(--line); }
.faults.ruled li::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; background: var(--accent); }

.route-grid > :nth-child(4) .route-body { align-self: center; }
/* Furnace as a cut-out standing on the grid band (owner, 2026-09-26: remove the white background) */
.proof { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.proof:hover { box-shadow: none; }
.proof-title { padding: 0 0 8px; }
.proof-img { aspect-ratio: auto; object-fit: contain; width: min(100%, 440px); margin: 0 auto; filter: drop-shadow(0 18px 18px rgb(20 26 45 / .22)); transition: transform .3s var(--ease); }
.proof:hover .proof-img { transform: translateY(-4px); }
/* Browser check 2026-09-26: photo visible on wide screens; even tick scale */
@media (min-width: 900px) {
  .hero-home .hero-photo::after { background: linear-gradient(90deg, var(--navy) 0%, rgb(33 39 60 / .78) 30%, rgb(33 39 60 / .35) 70%, rgb(33 39 60 / .2) 100%); }
  .hero-dept .hero-photo::after { background: linear-gradient(90deg, var(--navy) 0%, rgb(33 39 60 / .5) 40%, rgb(33 39 60 / .2)); }
}
@media (min-width: 1400px) { .hero-home .hero-photo, .hero-dept .hero-photo { width: calc(50% + 60px); } }
.ticks { background: linear-gradient(90deg, rgb(221 107 44 / .5) 1px, transparent 1px) 0 0 / 12px 100% repeat-x; }
/* Browser check 2026-09-26, round 2 */
/* Ask lines: the sentence flows; phone and email are bold inline links with a small icon, not boxes */
.ask-line { line-height: 1.7; }
.ask-line a, .ask-line a[href^="tel:"], .ask-line a[href^="mailto:"], .hero .ask-line a[href^="tel:"], .hero .ask-line a[href^="mailto:"], .ask-card .ask-line a[href^="tel:"], .ask-card .ask-line a[href^="mailto:"] {
  display: inline; min-height: 0; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; transform: none;
  font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: rgb(28 69 135 / .35); white-space: nowrap; }
.ask-line a:hover { text-decoration-color: currentColor; background: none; color: var(--link-hover); transform: none; box-shadow: none; }
.ask-line a[href^="tel:"]::before, .ask-line a[href^="mailto:"]::before { content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .3em; vertical-align: -.12em; background: currentColor; }
.ask-line a[href^="tel:"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ask-line a[href^="mailto:"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2.2V17h16V7.2l-8 5.3z M5.2 7l6.8 4.5L18.8 7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2.2V17h16V7.2l-8 5.3z M5.2 7l6.8 4.5L18.8 7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.hero .ask-line, .ask-card .ask-line { font-size: 1.08rem; }
.hero .ask-line a, .ask-card .ask-line a, .hero .ask-line a[href^="tel:"], .hero .ask-line a[href^="mailto:"], .ask-card .ask-line a[href^="tel:"], .ask-card .ask-line a[href^="mailto:"] { color: #fff; text-decoration-color: var(--accent); }
.hero .ask-line a:hover, .ask-card .ask-line a:hover { color: #fff; text-decoration-color: #fff; }
.ask-band .ask-line { font-size: 1.08rem; margin: 0; }
/* Pump and controller callout sits under the pumps column */
.pair-card { margin-top: 16px; display: flex; gap: 18px; align-items: center; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px 22px; }
.pair-card h3 { font-size: 1.2rem; margin-bottom: .25em; }
.pair-card p { margin: 0; color: #E6E9F1; font-size: .98rem; }
.pair-card .pair-icon { width: 96px; flex: none; }
/* Footer divider aligned to the content */
.f-legal { border-top: 0; padding-block: 0 20px; }
.f-legal p { border-top: 1px solid var(--navy-line); padding-top: 16px; }

/* Browser issues batch, 2026-09-26 (reports/browser-issues.md) */
/* 6: one rhythm in the footer link columns */
.site-footer li { margin-bottom: 0; }
.site-footer .f-nav li a, .f-more li a { padding-block: 5px; }
.f-more { gap: 0 18px; }
/* 7: tighter gap before Helium; balanced Helium columns */
.routes-dept { padding-bottom: 24px; }
.helium { padding-top: 40px; }
@media (min-width: 900px) { .helium-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
/* 8: the sample tag never wraps away from its text */
.ph { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ph::after { margin-left: 4px; }
/* 9: equal company card rows */
.vendor-card dd a { padding-block: 0; display: inline; }
.vendor-card dl div { align-items: baseline; min-height: 34px; }
/* 12 and 15: furnace size capped */
.proof-img { width: min(100%, 380px); max-height: 420px; }
@media (max-width: 719px) { .proof-img { max-height: 260px; width: auto; } }
/* 13: route card photo fills the row instead of setting its height */
.route-photo { min-height: 96px; }
.route-photo img { position: absolute; inset: 0; }
/* 14: year above the text on phones */
@media (max-width: 559px) { .identity-row { flex-direction: column; align-items: flex-start; gap: 6px; } .year { padding-right: 0; padding-bottom: 8px; } .year::after { top: auto; bottom: 0; left: 0; right: auto; width: 40px; height: 3px; } }
/* 16: pump and controller card stacks on phones */
@media (max-width: 559px) { .pair-card { flex-direction: column; align-items: flex-start; } .pair-card .pair-icon { width: 84px; } }
/* 17: footer columns at tablet width */
@media (min-width: 720px) and (max-width: 1079px) { .footer-grid { grid-template-columns: 1fr 1.2fr 1.2fr; gap: 32px; } }
/* 19: breadcrumb items on one line */
.crumbs ol { align-items: center; }
.crumbs li { display: flex; align-items: center; }
.crumbs a { padding-block: 6px; }
/* 8: tag moves from .ph to its last word */
.ph::after { content: none; }
.ph-end { white-space: nowrap; }
.ph-end::after { content: "sample"; margin-left: 5px; padding: 0 5px; border: 1px solid #AEB4BF; border-radius: 3px; font: 600 10px/16px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #5E6472; vertical-align: 2px; display: inline-block; text-decoration: none; }
.ph-empty .ph-end::after { content: "to confirm"; }

/* Round 2, objective defects (QA review + designer D2/D7/D8), 2026-09-26 */
@media (min-width: 900px) { .model-aside { align-self: start; } }          /* QA1/D2: sticky quote box works */
.vendor-mini a { display: inline; padding-block: 0; }                        /* QA2 */
.up-route { border-top: 0; padding-top: 4px; }                               /* QA4 */
.line-title, .route-sub { text-wrap: balance; }                              /* QA5, QA6 */
p, li { text-wrap: pretty; }                                                 /* QA7 */
.f-more { display: grid; grid-template-columns: 1fr; gap: 0; }               /* QA8/D8: one link per line, like Departments */
.ask-band .ask-line { max-width: 42em; }                                     /* QA9 */
@media (min-width: 900px) { .ask-band h2.section-title { padding-top: 0; } .ask-band h2.section-title::before { display: none; } }
@media (max-width: 899px) { .ask-band h2 { margin-bottom: 10px; } }
@media (min-width: 900px) { .helium-grid { grid-template-columns: 1fr 1fr; align-items: start; } } /* D7 */
/* R2-D1: TV page, part numbers on the first phone screen (landings 0, 1, 4, 5) */
@media (max-width: 559px) {
  .hero-model .subhead { margin-bottom: .5em; font-size: .95rem; }
  .siblings { gap: 6px; margin-top: 10px; }
  .siblings a { padding: 6px 10px; font-size: .92rem; }
  .model-grid { padding-top: 16px; }
  .pn-panels.band-grid { padding: 0; background: none; }
  .pn-panel { padding: 14px 14px 8px; }
  .pn-panel h2 { font-size: 1.1rem; margin-bottom: .3em; }
}
/* Round 2, reconciled design (D3 modified, D4 modified, D5, D6) */
.pn-row { margin-bottom: 14px; }                                                          /* D3: row break keeps 1028752R distinct */
@media (min-width: 1600px) { .pn-panels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1600px) { :root { --wrap: 1360px; } }                                  /* D5 */
.line-text { max-width: 62ch; }
.model-main p { max-width: 68ch; }
.pair-card { margin-top: 0; }                                                             /* D6 */
@media (min-width: 900px) { .group-grid { grid-template-rows: auto 1fr; row-gap: 16px; } .group-1 { grid-area: 1 / 1; } .group-2 { grid-area: 1 / 2 / 3 / 3; } .pair-card { grid-area: 2 / 1; align-self: start; } }
/* "Ask anyway": the still-reach-us invitation stands out (owner, 2026-09-26) */
.still-ask { font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .24em; }
.still-ask:hover { color: var(--link); text-decoration-color: currentColor; }
/* End-of-path invitations (owner, 2026-09-26): after the visitor's own need */
.next-card { display: flex; gap: 18px; align-items: flex-start; margin: 32px 0 8px; padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--panel); }
.next-card h2 { font-size: 1.35rem; margin-bottom: .25em; }
.next-card p { margin-bottom: .5em; }
.next-link a { font-weight: 700; }
.next-link a::after { content: " \2192"; }
.next-icon { width: 44px; flex: none; fill: none; stroke: var(--navy); stroke-width: 2.5; margin-top: 4px; }
.more { padding-block: 40px 48px; border-top: 1px solid var(--line); }
.more-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.more-card { display: grid; gap: 4px; height: 100%; padding: 16px 44px 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink-2); position: relative; transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.more-card::after { content: "\2192"; position: absolute; right: 16px; top: 16px; color: var(--muted); transition: transform .2s var(--ease), color .15s; }
.more-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #C7CCD6; }
.more-card:hover::after { transform: translateX(3px); color: var(--link); }
.more-title { font: 600 1.1rem/1.3 var(--serif); color: var(--navy); }
.more-text { font-size: .95rem; }
@media (min-width: 720px) { .more-grid { grid-template-columns: repeat(3, 1fr); } }
.more-card { align-content: start; }

/* Shipping route graphic in "Where to send it" (owner liked it, 2026-09-26) */
.route-graphic { width: 220px; margin-bottom: 14px; }
.route-graphic .box path { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.route-graphic .route { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; animation: flow 2.4s linear infinite; }
.route-graphic .pin path { fill: var(--navy); }
.route-graphic .pin circle { fill: #fff; }


/* Home furnace / shipping band, final (owner, 2026-09-26: "V3 + We built a vacuum furnace + C2 card and a
   little tiny more space between"). Left: no arrow, title centred over the furnace, "lit paper" vignette.
   Right: "Where to send your equipment" in a white callout card with the orange left edge, vertically
   centred. The pair is centred as one unit so both sit the same distance from the divide and the edges. */
.proof { position: relative; }
.proof-title { text-align: center; max-width: 460px; margin-inline: auto; text-wrap: balance; }
.proof-title::after { content: none; }
.proof:hover .proof-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.proof picture { display: block; width: fit-content; margin-inline: auto; position: relative; isolation: isolate; }
.proof picture::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 150%; height: 122%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, var(--paper) 0%, var(--paper) 50%, rgb(255 255 255 / .55) 75%, rgb(255 255 255 / 0) 100%); }
.proof-img { filter: drop-shadow(0 0 20px rgb(20 26 45 / .18)) drop-shadow(0 5px 7px rgb(20 26 45 / .10)); }
.proof-reach .reach { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 16px 8px 18px; margin-top: 0; box-shadow: 0 1px 2px rgb(20 26 45 / .05), 0 10px 24px rgb(20 26 45 / .08); }
.reach .section-title { padding-top: 0; }
.reach .section-title::before { display: none; }
@media (min-width: 900px) {
  .proof-grid { grid-template-columns: max-content minmax(0, 600px); justify-content: center; column-gap: clamp(112px, 10.5vw, 208px); align-items: center; }
  .proof-reach .reach { padding: 20px 28px 6px 26px; }
  .proof-reach .proof-img { width: 380px; }
  .reach .section-title { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); margin-bottom: .35em; }
  .route-graphic { width: 180px; margin-bottom: 8px; }
}

/* Hub pages (turbo, gauges, cryo, pumps, deposition, power supplies) */
.hub-routes { padding-bottom: 24px; }
.hub-grid { display: grid; gap: 20px 40px; }
.hub-lines { border-top: 1px solid var(--line); border-radius: var(--radius); margin-top: 16px; }
.unsure-card { background: var(--navy); color: #E6E9F1; border-radius: var(--radius); border-top: 4px solid var(--accent); padding: 22px 22px 8px; align-self: start; }
.unsure-card .ask-line a, .unsure-card .ask-line a[href^="tel:"], .unsure-card .ask-line a[href^="mailto:"] { color: #fff; text-decoration-color: var(--accent); }
.hub-tail { padding-block: 8px 40px; }
.hub-tail .inline-route { color: var(--ink-2); margin-bottom: .6em; }
@media (min-width: 900px) {
  .hub-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .unsure-card { position: sticky; top: 20px; margin-top: 74px; }
}
/* Hub layout gaps found by the preview helpers */
.hub-panels { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; margin-top: 24px; }
.pn-wide { flex-basis: 100%; }
.pn-wide .pn { display: block; font-weight: 400; letter-spacing: 0; line-height: 1.5; user-select: text; background: none; border: 0; padding: 4px 0; }
.blk-callout { background: var(--panel); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px 8px; margin-inline: auto; }
.blk-callout .section-title { padding-top: 0; }
.blk-callout .section-title::before { display: none; }

/* Models and Part Numbers */
.models-bar { position: sticky; top: 0; z-index: 15; background: rgb(255 255 255 / .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.models-bar .wrap { display: grid; gap: 10px 24px; padding-block: 12px; }
.pn-filter { display: grid; gap: 4px; }
.pn-filter label { font: 600 .78rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pn-filter input { font: 600 1.05rem/1.2 var(--sans); padding: 10px 12px; border: 1.5px solid #B9BFCA; border-radius: var(--radius); width: 100%; min-height: 44px; }
.pn-filter input:focus { outline: 3px solid var(--link); outline-offset: 1px; border-color: var(--link); }
.pn-nomatch { margin: 4px 0 0; color: var(--ink-2); }
.jumps { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.jumps a { font-size: .9rem; font-weight: 600; color: var(--navy); text-decoration: none; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.jumps a:hover { border-color: var(--link); color: var(--link); }
.filtering .jumps { display: none; }
.models-grid { display: grid; gap: 24px 48px; padding-block: 28px 56px; }
.group-eyebrow { font: 600 .8rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 24px 0 8px; }
.pn-brand { scroll-margin-top: 150px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 6px; margin-bottom: 16px; background: var(--paper); }
.pn-brand:target { border-color: var(--link); box-shadow: 0 0 0 3px rgb(28 69 135 / .15); }
.pn-brand-title { font-size: 1.2rem; margin-bottom: .5em; }
.pn-brand-title a { color: var(--navy); }
.pn-sub { font: 600 1rem/1.3 var(--serif); color: var(--navy); margin: 12px 0 4px; }
.pn-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.pn-line { padding: 7px 0; border-top: 1px solid var(--panel); font-variant-numeric: tabular-nums; }
.pn-model { color: var(--navy); margin-right: 4px; }
.pn-nums { color: var(--ink-2); }
.nl-card { background: var(--navy); color: #E6E9F1; border-radius: var(--radius); border-top: 4px solid var(--accent); padding: 22px 22px 10px; align-self: start; display: none; }
.nl-card h2 { font-size: 1.4rem; color: #fff; }
.nl-card .ask-line a { color: #fff; text-decoration-color: var(--accent); }
.nl-repeat { margin: 6px -20px 0; padding: 12px 20px 4px; background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); font-size: .95rem; }
.nl-repeat p { margin-bottom: .4em; }
.more-4 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .more-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .more-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) {
  .models-bar .wrap { grid-template-columns: minmax(260px, 360px) 1fr; align-items: end; }
  .models-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .nl-card { display: block; position: sticky; top: 150px; margin-top: 56px; }
  .nl-repeat { display: none; }
}
/* Brand pages (model layout extensions) */
.ask-top { background: var(--panel); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 16px; }
@media (min-width: 900px) { .ask-top { display: none; } }
.pn-catalog { margin-top: 0; }
.depth-wide { margin-top: 24px; }
.depth-title { font-size: 1.15rem; color: var(--navy); }
.hub-catalog { margin-top: 8px; }

/* Repair Process and Terms */
.terms-grid { display: grid; gap: 20px 40px; padding-block: 32px 8px; }
.terms-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 22px 24px 10px; box-shadow: var(--shadow); }
.terms-card .section-title { padding-top: 0; }
.terms-card .section-title::before { display: none; }
.terms-list { margin: 0; }
.terms-list div { display: grid; gap: 2px 20px; padding: 12px 0; border-top: 1px solid var(--panel); }
.terms-list dt { font: 600 1rem/1.4 var(--serif); color: var(--navy); }
.terms-list dd { margin: 0; color: var(--ink-2); }
.steps { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--panel); border-radius: var(--radius); }
.step-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 1rem/32px var(--serif); text-align: center; }
.send-grid { display: grid; gap: 20px 48px; padding-bottom: 32px; }
@media (min-width: 720px) { .terms-list div { grid-template-columns: 170px 1fr; } }
@media (min-width: 900px) {
  .terms-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .terms-vendor { position: sticky; top: 20px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li { flex-direction: column; }
  .send-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
}
.unsure-title { font-size: 1.3rem; color: #fff; margin-bottom: .3em; }
.ask-top-hub { margin-top: 24px; }
@media (min-width: 900px) { .ask-top-hub { display: block; max-width: 760px; } .ask-band .ask-terms, .ask-band .ask-line + .ask-line { grid-column: 2; } }
@media (min-width: 900px) { .ask-band h2 { grid-row: span 3; } }
.terms-alone { color: var(--ink-2); font-size: .95rem; padding: 0 4px; } .pn-note { color: var(--ink-2); font-size: .95rem; }

/* Calibration */
.send-card p { margin: 0 0 .6em; font-size: .98rem; }
.cert-band { border-top: 1px solid var(--line); }
.cert-grid { display: grid; gap: 24px 56px; align-items: center; }
.cert-copies { color: var(--ink-2); }
.cert-doc { margin: 0; position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 16px 76px; box-shadow: var(--shadow); }
.cert-doc blockquote { margin: 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.cert-icon { position: absolute; left: 20px; top: 24px; width: 40px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linejoin: round; }
.cert-icon circle { stroke: var(--accent); }
.quantities { list-style: none; margin: 16px 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.qty { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.qty-icon { grid-row: span 2; width: 44px; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qty-icon path:nth-child(2) { stroke: var(--accent); }
.qty-k { font: 600 1.15rem/1.2 var(--serif); color: var(--navy); }
.qty-v { color: var(--ink-2); font-size: .95rem; }
.cal-pair { display: grid; gap: 16px 32px; padding-bottom: 40px; }
.state-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 6px; }
.state-list div { grid-template-columns: 1fr !important; }
@media (min-width: 900px) {
  .cert-grid { grid-template-columns: 5fr 7fr; }
  .cal-pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .cal-pair .depth { margin-top: 0; }
}
.siblings .sib-line { color: #E6E9F1; font-size: .98rem; padding: 6px 0; }
.siblings .sib-line a { color: #fff; font-weight: 600; }
.ask-card-terms { color: var(--on-navy-2); font-size: .92rem; }
.ask-card-terms a { color: #fff; }

/* Lab Equipment Service */
/* Hero: the two routes (bench or on site) sit in the hero card, so the address, the national reach and
   the travel line are on the first screen (landings 0, 3, 4). The company line with its year sits under
   the scope sentence (landing 1). */
.hero-lab .hero-photo img { object-position: 50% 30%; }
.lab-identity { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--navy-line); max-width: 40em; }
.lab-year { font: 600 2.5rem/1 var(--serif); color: #fff; margin: 0; letter-spacing: -.02em; position: relative; padding-right: 18px; flex: none; }
.lab-year::after { content: ""; position: absolute; right: 0; top: 10%; bottom: 10%; width: 3px; background: var(--accent); }
.lab-identity-text { margin: 0; color: #E6E9F1; font-size: 1rem; }
.lab-identity-text a { font-weight: 600; }
.lab-routes .eyebrow { margin-bottom: 4px; }
.lab-route { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--panel); }
.lab-route p { margin: 0; font-size: .98rem; }
.lab-route a { font-weight: 600; white-space: nowrap; }
.lab-route-icon, .lab-item-icon { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lab-route-icon { width: 36px; margin-top: 2px; }
.lab-route-icon .acc, .lab-item-icon .acc { stroke: var(--accent); }
.lab-route-note { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
@media (min-width: 900px) {
  .hero-lab .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
/* What we work on: motor controllers lead, heavy, on the left; the rest follow on the right, on site last and soft */
.lab-work-grid { display: grid; gap: 16px; margin-top: 24px; }
.lab-lead { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.lab-lead-head { border-radius: 0; justify-content: space-between; min-height: 112px; }
.lab-lead-icon { position: relative; width: 92px; flex: none; margin: 0 20px 18px 0; }
.lab-lead-body { padding: 18px 22px 6px; }
.lab-lead-text { font-size: 1.08rem; font-weight: 600; color: var(--ink-2); }
.lab-lead .faults.ruled { margin: 0 0 12px; }
.lab-side { display: grid; gap: 12px; align-content: start; }
.lab-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 20px 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.lab-item-icon { width: 44px; }
.lab-item-title { font: 600 1.15rem/1.3 var(--serif); color: var(--navy); margin: 0 0 .3em; }
.lab-item p { margin: 0 0 .8em; color: var(--ink-2); font-size: .98rem; }
.lab-soft { background: transparent; }
.lab-soft .lab-item-icon { width: 36px; justify-self: center; }
.lab-soft .lab-item-title { font-size: 1.05rem; }
.lab-soft p { font-size: .95rem; }
.lab-after { margin: 8px 0 0; padding-left: 4px; }
@media (min-width: 900px) {
  .lab-work-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
  .lab-side { display: flex; flex-direction: column; }
  .lab-side .lab-item:not(.lab-soft) { flex: 1 1 auto; }
  .lab-after { margin-top: auto; padding-top: 4px; }
  .lab-lead-head { min-height: 150px; }
  .lab-lead-body { padding: 22px 28px 10px; }
}
@media (max-width: 559px) {
  .lab-identity { gap: 14px; }
  .lab-year { font-size: 2rem; padding-right: 14px; }
  .lab-lead-icon { width: 72px; margin: 0 16px 16px 0; }
  .lab-lead-body { padding: 16px 16px 4px; }
  .lab-item { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px 16px 6px; }
  .lab-item-icon { width: 36px; }
}

/* Engineering & Systems */
/* Hero: the control cabinet shows through on the right (owner: "cabinets with bunch of wires ... on the background"). */
.hero-eng .hero-photo img { object-position: 60% 40%; filter: grayscale(.15) contrast(1.05); }
.hero-eng .subhead { font: 600 clamp(1.25rem, 1.05rem + .8vw, 1.6rem)/1.3 var(--serif); color: #fff; margin-bottom: .7em; }
.hero-eng .subhead::before { content: ""; display: block; width: 40px; height: 3px; background: var(--accent); margin-bottom: 14px; }
.hero-eng .lede { max-width: 34em; margin-bottom: 0; }
@media (min-width: 900px) { .hero-eng .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); padding-block: 64px 72px; } }
/* Name line in the identity-strip form */
.eng-name .year { letter-spacing: .02em; }
.eng-name .identity-text { font: 600 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.35 var(--serif); color: var(--navy); }
/* Work list: five drawn-icon tiles across the width, rows on the phone */
.eng-work { margin-block: clamp(40px, 5vw, 64px); }
.eng-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.eng-item { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
.eng-icon, .eng-supply-icon { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eng-icon { width: 44px; }
.eng-icon .acc, .eng-supply-icon .acc { stroke: var(--accent); }
@media (min-width: 720px) { .eng-list { grid-template-columns: repeat(6, 1fr); } .eng-item { grid-column: span 2; } .eng-item:nth-child(4) { grid-column: 2 / span 2; } }
@media (min-width: 1080px) {
  .eng-list { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .eng-item, .eng-item:nth-child(4) { grid-column: auto; grid-template-columns: 1fr; align-content: start; row-gap: 12px; padding: 20px 20px 18px; border-top: 3px solid var(--navy); font-size: 1.05rem; color: var(--ink); }
  .eng-icon { width: 56px; }
}
/* Furnace band: the Home proof layout, with the text card on the right and the supply note in its corner */
.eng-proof { border-top: 1px solid var(--line); }
.eng-proof-card .lede-dark { margin-bottom: .6em; }
.eng-supply { display: flex; gap: 12px; align-items: flex-start; margin: 14px -16px 0 -18px; padding: 12px 16px 12px 18px; border-top: 1px dashed var(--line); background: #FAFAFB; font-size: .95rem; color: var(--ink-2); }
.eng-supply-icon { flex: none; width: 28px; margin-top: 2px; stroke-width: 2.6; }
.eng-proof-card { padding-bottom: 0 !important; overflow: hidden; }
.reach .eng-supply { max-width: none; }
.eng-proof-card .lede-dark { font-size: 1.18rem; line-height: 1.6; }
@media (min-width: 900px) { .eng-supply { margin: 16px -28px 0 -26px; padding: 14px 28px 14px 26px; } }
/* Ask: assembly line and contact link sit under the ask */
.eng-ask .eng-ask-note { color: var(--ink-2); font-size: 1rem; line-height: 1.55; margin-top: 6px; }
.eng-ask .links a { font-size: 1rem; }

/* Vacuum Furnace */
/* Preview /furnace/: title strip with the authorship lede beside it; the furnace cut-out leads on the grid
   band beside the specifications; facility block and the quote card as one balanced pair; then the route up. */
.hero-furnace .hero-grid { padding-block: 36px 40px; gap: 8px; }
.hero-furnace .subhead { margin-bottom: 0; }
.hero-furnace .lede { margin: 6px 0 0; }
.fur-band { border-top: 1px solid var(--line); padding-block: 32px 40px; }
.fur-grid { display: grid; gap: 24px; }
.fur-photo { margin: 0; }
.fur-photo:hover .proof-img { transform: none; }
.fur-specs { padding-bottom: 6px; }
.fur-specs .terms-list div:first-child { border-top: 0; }
.spec-key dd { font: 600 1.2rem/1.35 var(--serif); color: var(--navy); }
.fur-pair { display: grid; gap: 20px 32px; padding-block: 40px 48px; }
.fur-needs { background: var(--panel); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 22px 8px; }
.fur-needs .section-title, .fur-quote .section-title { padding-top: 0; }
.fur-needs .section-title::before, .fur-quote .section-title::before { display: none; }
.need-list { margin: 0; }
.need-list div { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.need-icon { grid-row: span 2; width: 34px; margin-top: 2px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.need-icon path:nth-child(2), .need-icon path:nth-child(3) { stroke: var(--accent); }
.need-list dt { font: 600 1rem/1.4 var(--serif); color: var(--navy); }
.need-list dd { margin: 0; color: var(--ink-2); }
.fur-quote { background: var(--navy); color: #E6E9F1; border-radius: var(--radius); border-top: 4px solid var(--accent); padding: 22px 22px 8px; }
.fur-quote h2 { color: #fff; }
.fur-quote .ask-line { font-size: 1.08rem; }
.fur-quote .ask-line a, .fur-quote .ask-line a[href^="tel:"], .fur-quote .ask-line a[href^="mailto:"] { color: #fff; text-decoration-color: var(--accent); }
.fur-quote .ask-line a:hover { color: #fff; text-decoration-color: #fff; }
.fur-quote :focus-visible { outline-color: #fff; }
.fur-quote .ph-end::after { color: var(--on-navy-2); border-color: #6B7493; }
.fur-quote .ph-q { color: #B4BACB; }
.fur-open { margin-bottom: .8em; }
.fur-legal { color: var(--on-navy-2); font-size: .95rem; }
.fur-owners { margin: 0 -22px; padding: 14px 22px 10px; border-top: 1px solid var(--navy-line); font-size: .98rem; }
@media (max-width: 719px) { .fur-photo .proof-img { max-height: 300px; } }
@media (min-width: 900px) {
  .hero-furnace .hero-grid { grid-template-columns: max-content minmax(0, 1fr); column-gap: 56px; align-items: center; padding-block: 40px 44px; }
  .hero-furnace .lede { margin: 0; padding-left: 32px; border-left: 1px solid var(--navy-line); }
  .fur-band { padding-block: 48px 56px; }
  .fur-grid { grid-template-columns: max-content minmax(0, 640px); justify-content: center; column-gap: clamp(64px, 7vw, 128px); align-items: center; }
  .fur-photo .proof-img { width: 380px; max-height: none; }
  .fur-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .fur-needs { padding: 26px 30px 10px; }
  .fur-quote { padding: 26px 30px 8px; }
  .fur-owners { margin-inline: -30px; padding-inline: 30px; }
}
@media (min-width: 1080px) {
  .fur-grid { grid-template-columns: max-content minmax(0, 780px); column-gap: clamp(56px, 6vw, 112px); }
  .fur-photo .proof-img { width: 360px; }
  .fur-specs .terms-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .fur-specs .terms-list div { grid-template-columns: 1fr; align-content: start; }
  .fur-specs .terms-list div:nth-child(2) { border-top: 0; }
  .need-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .need-list div { align-content: start; }
}
/* 404 */
.nf-hero .wrap { padding-block: 28px 32px; }
.nf-lookup { font-size: 1.08rem; color: #E6E9F1; margin: 0; }
.nf-lookup a { color: #fff; font-weight: 700; text-decoration-color: var(--accent); }
.nf-lookup .still-ask { color: #fff; }

/* About */
/* Preview /about-us/: a short title band; then who we are (the Home 1993 form, its tick scale running from
   the year) beside the company record, so how long, whose name and where share the first screen (landings
   0, 1, 2); the furnace cut-out beside the shop and the no-longer-supported units on the grid band (0, 3);
   the ask; the departments with the blog notes as a side column, last on the phone. */
.hero-about .hero-photo img { object-position: 45% 40%; }
.hero-about .hero-grid { padding-block: 36px 40px; }
.hero-about .subhead { margin-bottom: 0; }
.about-who { background: var(--paper); }
.about-who-grid { display: grid; gap: 24px 56px; padding-block: 28px 32px; }
.about-who .identity-row { padding-block: 0 14px; }
.about-who .identity-text { max-width: 40em; }
.about-who .eyebrow { margin-bottom: .35em; }
.about-line { font: 600 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.35 var(--serif); color: var(--navy); margin-bottom: .5em; }
.about-who .identity-text p:last-child { margin-bottom: 0; }
.about-who .vendor-card { box-shadow: var(--shadow-up); }
.about-who .vendor-card dl div { grid-template-columns: 112px 1fr; }
.about-side { display: grid; gap: 16px; }
.about-side .depth { margin-top: 0; padding-bottom: 0; overflow: hidden; border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.about-side .route-sub { margin: 0 -20px; border-radius: 0 0 var(--radius) 0; }
.about-more-grid { display: grid; gap: 36px 56px; }
.about-more .more-grid { grid-template-columns: 1fr; }
.about-blog > p { color: var(--ink-2); }
.about-blog .line-list { border-top: 1px solid var(--line); border-radius: var(--radius); }
.about-blog .line { padding-block: 13px; }
.about-blog .line::after { top: 12px; }
@media (min-width: 720px) { .about-more .more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .hero-about .hero-grid { padding-block: 40px 44px; }
  .about-who-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; padding-block: 36px 40px; }
  .about-more-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
}
@media (max-width: 719px) { .about-who .vendor-card dl div { grid-template-columns: 104px 1fr; } }

/* Contact and Service Area */
/* Contact: phone and email set large on the navy hero (landings 0, 1); the address card beside it (landings 2, 4). */
.hero-contact .hero-photo img { object-position: 60% 40%; }
.reach-us { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--navy-line); max-width: 40em; }
.reach-rows { margin: 0 0 16px; display: grid; gap: 0; }
.reach-rows div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--navy-line); }
.reach-rows dt { display: flex; align-items: center; gap: 8px; font: 600 .78rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-2); }
.reach-rows dd { margin: 0; color: #E6E9F1; font-size: 1.05rem; }
.reach-icon { width: 18px; flex: none; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reach-icon .acc { stroke: var(--accent); }
.reach-big { font: 600 clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem)/1.2 var(--serif); color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero .reach-big:hover { color: #fff; text-decoration-color: #fff; }
.reach-mail { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); }
.reach-ask { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: .6em; }
.reach-note { color: var(--on-navy-2); font-size: .98rem; margin: 0; }
.send-title { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); color: var(--navy); margin-bottom: .5em; }
.contact-send .route-graphic { width: 180px; margin-bottom: 10px; }
.label-block { font-style: normal; font: 600 1.12rem/1.5 var(--sans); color: var(--ink); background: var(--panel); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 16px; margin: 0 0 14px; user-select: all; }
.contact-send p { font-size: .98rem; color: var(--ink-2); }
.contact-send .vendor-more { margin-top: 4px; }
.contact-more { padding-block: 40px 56px; }
.contact-more .more-grid { margin-top: 20px; }
.contact-more .more-card { background: var(--paper); }
@media (min-width: 900px) {
  .hero-contact .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 64px; align-items: center; padding-block: 48px 56px; }
  .contact-send { padding: 26px 30px 16px; }
}
@media (max-width: 559px) {
  .reach-rows div { grid-template-columns: 1fr; gap: 0; padding: 8px 0 10px; }
  .hero-contact .hero-grid { padding-block: 28px 36px; }
}
/* Service Area: the Home route graphic, large on the hero; cities on the grid band with pickup and on site beside them. */
.hero-area .hero-grid { padding-block: 40px 44px; align-items: center; }
.hero-area .lede { margin-bottom: 0; }
.area-graphic { width: min(100%, 300px); margin: 0; }
.area-graphic .box path { stroke: #fff; }
.area-graphic .pin path { fill: #fff; }
.area-graphic .pin circle { fill: var(--navy); }
.area-grid { display: grid; gap: 28px 48px; }
.city-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; margin: 16px 0 18px; }
.city-list div:first-child { border-top: 0; }
.city-list dd { font-size: 1.02rem; line-height: 1.7; }
.area-further { font-size: 1.05rem; color: var(--ink-2); margin: 0; }
.area-side { display: grid; gap: 16px; align-content: start; }
.pickup-card { box-shadow: var(--shadow); }
.pickup-card > p:first-of-type { color: var(--ink-2); }
.pickup-card dl { margin-bottom: 12px; }
.pickup-sample { margin: 0; font-size: .95rem; color: var(--ink-2); }
.onsite-card { display: grid; grid-template-columns: 40px 1fr; gap: 16px; background: var(--navy); color: #E6E9F1; border-radius: var(--radius); border-top: 4px solid var(--accent); padding: 22px 22px 8px; scroll-margin-top: 16px; }
.onsite-card .depth-title { color: #fff; }
.onsite-card a { color: #fff; font-weight: 600; text-decoration-color: var(--accent); }
.onsite-card :focus-visible { outline-color: #fff; }
.onsite-route { color: var(--on-navy-2); font-size: .98rem; }
.onsite-icon { width: 40px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.onsite-icon .acc { stroke: var(--accent); }
.area-routes .route-grid { margin-top: 24px; }
.area-routes .route-body p { font-size: .98rem; }
@media (min-width: 900px) {
  .hero-area .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 64px; padding-block: 52px 56px; }
  .area-graphic { width: 100%; max-width: 380px; justify-self: center; }
  .area-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .area-side { margin-top: 0; }
  .pickup-card { padding: 24px 28px 18px; }
  .onsite-card { padding: 24px 28px 10px; }
}
@media (max-width: 719px) { .city-list { padding: 2px 16px; } .area-graphic { width: 220px; } }
.pickup-card .depth-title, .onsite-card .depth-title { font-size: 1.35rem; }
@media (min-width: 720px) { .city-list div { grid-template-columns: 150px 1fr; } }
@media (max-width: 559px) { .onsite-card { grid-template-columns: 1fr; gap: 6px; } .onsite-icon { width: 32px; } }

/* Notes under About (articles) */
.article-hero .wrap { padding-block: 32px 36px; }
.article-hero h1 { max-width: 22em; }
.article { max-width: calc(46rem + 2 * var(--gutter)); padding-block: 36px 56px; font-size: 1.08rem; line-height: 1.75; }
.article h2 { font-size: 1.55rem; margin: 1.6em 0 .5em; position: relative; padding-top: 16px; }
.article h2::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; background: var(--accent); }
.article section:first-child h2 { margin-top: 0; }
.article ul, .article ol { padding-left: 1.2em; }
.article li { margin-bottom: .4em; }
.article-invite { margin-top: 40px; font-size: 1rem; line-height: 1.65; }
.article-back { margin-top: 28px; font-size: .95rem; }
.article-back a::before { content: "\2190  "; }

/* Round 4 objective fixes (overnight visual review) */
/* A1: phone filter bar: brand chips in one scrolling row, not six wrapped rows */
@media (max-width: 899px) {
  .jumps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .jumps::-webkit-scrollbar { display: none; }
  .jumps a { flex: none; }
  .models-bar .wrap { gap: 8px; padding-block: 10px; }
  .pn-brand { scroll-margin-top: 140px; }
}
/* A3: part numbers clear of the hero rule on hubs */
.hub-catalog { margin-top: 36px; }
.route-note { margin-top: 12px; }
/* A8: phone numbers never break */
a[href^="tel:"] { white-space: nowrap; }
/* B3: a single part-number panel spans the band */
.pn-panels:has(> .pn-panel:only-child) { grid-template-columns: 1fr !important; }
/* B4/C5: callouts put the icon above the text on phones */
@media (max-width: 599px) {
  .next-card { flex-direction: column; gap: 10px; }
  .cert-doc { padding: 64px 18px 12px; }
  .cert-icon { top: 16px; left: 18px; }
  .quantities { grid-template-columns: 1fr 1fr; }
  .qty { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 6px; }
  .qty-icon { grid-row: auto; }
}
/* B8/C1: article title and text share one left edge */
.article-hero .wrap { max-width: calc(46rem + 2 * var(--gutter)); }
body[class*="page-blog-"] .crumbs { max-width: calc(46rem + 2 * var(--gutter)); }
/* B9: one orange mark only in the article's closing card */
.article .next-card h2 { padding-top: 0; margin-top: 0; }
.article .next-card h2::before { content: none; }
/* C2: Calibration "Working, or faulty?" rows side by side from 900 px */
@media (min-width: 900px) { .state-list div { grid-template-columns: 200px 1fr !important; } }
/* C3: Engineering & Systems back to site vocabulary */
.eng-item { border-top-width: 1px !important; border-top-color: var(--line) !important; }
.hero-eng .subhead { font: 600 1.05rem/1.4 var(--sans) !important; color: var(--on-navy-2) !important; }
.hero-eng .subhead::before, .hero-eng .subhead::after { content: none !important; }
/* C minor: Lab column gap like other pairs */
.lab-work-grid { column-gap: 32px; }

/* Round 4 design judgments (reconciled) */
/* J1: hub pages on the model grid */
.hub-body .hub-routes { margin-bottom: 24px; }
.hub-body .hub-catalog:first-child, .hub-body > .model-main > :first-child { margin-top: 0; }
.hub-body .unsure-card { margin-top: 0; position: static; }
@media (min-width: 900px) { .hub-body p { max-width: 68ch; } .hub-body .hub-lines .line-text { max-width: none; } }
/* J4: chips inside a catalog */
.pn-catalog .pn-row { margin-top: 4px; }
.pn-row-label { margin: 10px 0 2px; }
/* J5: catalog as a panel callout */
.pn-callout { background: var(--panel); border: 0; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.pn-callout .pn-line { border-top-color: var(--line); }
/* J6: opt-in two columns for short lines */
@media (min-width: 1280px) { .pn-lines-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } }
/* J3: About's discontinued panel without an orange edge */
.about-side .depth { border-left: 1px solid var(--line); border: 1px solid var(--line); border-radius: var(--radius); }

/* J1 follow-up: on phones the "not sure?" card follows the routes list, where the question comes up,
   instead of dropping below the invitation. The main column's children join the grid for ordering. */
@media (max-width: 899.98px) {
  .hub-unsure > .model-main { display: contents; }
  .hub-unsure > .model-main > * { order: 3; }
  .hub-unsure > .model-main > .ask-top, .hub-unsure > .model-main > .hub-routes { order: 1; }
  .hub-unsure > .model-aside { order: 2; margin-bottom: 24px; }
}
/* Hero route line: its link is an ordinary text link inside the sentence, not a pill (the pill styling
   of .siblings a is for the sibling chips); keeps the full stop with the link on phones. */
.siblings .sib-line a { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.siblings .sib-line a:hover { background: none; text-decoration-thickness: 2px; }
/* An invitation link followed by its description ("Calibration: Pressure, ...") drops the arrow, which
   otherwise lands between the link and its colon. Lone links keep it. */
.next-link-desc a::after { content: none; }
/* Tools trial (impeccable + review-animations, 2026-10-01; owner chose "Bring it over") */
/* T2: Furnace "What your lab needs": a last odd row spans both columns instead of wrapping to five lines beside a gap */
@media (min-width: 1080px) { .need-list div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* T3: service rows no longer animate padding-left (a layout property: text reflows on every hover);
   the background tint and the arrow nudge already answer the hover */
.line { transition: background-color .15s; }
.line:hover { padding-left: 20px; }
/* T4: card lifts and photo zoom only for a real pointer; on touch a tap left the card stuck lifted */
@media (hover: none), (pointer: coarse) {
  .route-card:hover, .more-card:hover, .proof:hover .proof-img, .route-card:hover .route-photo img, .more-card:hover::after, .line:hover::after { transform: none; }
  .route-card:hover, .more-card:hover { box-shadow: none; }
}

/* P1 (owner "Do it", 2026-10-01): photo zoom at .3s, above. P2 (owner "Do it"): 44px tap targets on phones for footer links and the brand jump chips. */
@media (max-width: 719px) {
  .site-footer .f-nav li a, .f-more li a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .jumps a { display: inline-flex; align-items: center; min-height: 44px; }
}