/* 43 Tolerance: Ballast Fab & Machine (sample)
   Recreation of the look of axil-wbs.framer.website (our own code, our own 3D renders).
   Graphite and ice-grey pages, square corners, Geist headlines with tight tracking, DM Mono for eyebrows, buttons and
   specs, and one signal red. Signature: the dark tab-button nav (a red hamburger opening a grid of tabs on phones), the
   typewriter word band, the numbered capability accordion and the spec-sheet cards a buyer checks before sending a drawing.
   Re-skin: change the shared token layer below. Breakpoints 760 / 1080 (ncs-desktop). No JavaScript: :target, <details>,
   scroll-snap rails and CSS animation only. */
:root {
  /* Shared token layer (library-wide names) */
  --c-bg: #f1f4fa;                 /* ice-grey page */
  --c-surface: #ffffff;            /* cards */
  --c-ink: #131314;                /* text, and the graphite bands */
  --c-muted: #55585f;              /* body copy: 6.5:1 on the page, 7.1:1 on cards */
  --c-line: #dde1e8;               /* dividers, card borders (decorative) */
  --c-line-strong: #80858e;        /* field borders: 3.6:1 on white */
  --c-accent: #d42620;             /* signal red: fills with white text, red text on light (5.1:1 / 4.7:1) */
  --c-on-accent: #ffffff;
  --c-accent-2: #1f8a4c;           /* status only (the "sent" check) */
  --f-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;  /* stands in for BDO Grotesk */
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm: 2px;      /* tabs, chips, fields */
  --r-lg: 4px;      /* cards, the phone hero frame */
  --r-pill: 2px;    /* buttons are near-square, as measured */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 120px;

  /* Theme names mapped to the shared layer */
  --ice: var(--c-bg);
  --graphite: var(--c-ink);
  --graphite-2: #1c1c1e;           /* panels on graphite */
  --graphite-3: #2a2a2d;           /* tab borders */
  --red: var(--c-accent);
  --red-hi: #ff4b43;               /* red marks and text on graphite (5.6:1) */
  --signal: #f42c27;               /* the original's red: hamburger, squares, large shapes only */
  --on-dark: #e2e2e6;
  --on-dark-mute: #a9abb2;         /* 8.1:1 on graphite */
  --form: #e4e6ec;                 /* the RFQ card */
  --gut: 16px;
  --bar-h: 64px;
  --sec: 64px;
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --t-h1: clamp(44px, 4.6vw + 26px, 92px);
  --t-h2: clamp(32px, 1.9vw + 24px, 50px);
  --t-h2s: clamp(26px, 1.25vw + 21px, 38px);
  --t-type: clamp(60px, 7.4vw + 30px, 140px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--graphite); scroll-padding-top: calc(var(--bar-h) + 8px); }
body { margin: 0; background: var(--ice); color: var(--c-ink); font: 400 16px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
table { border-collapse: collapse; }
small { font-size: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a, button, summary, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.foot :focus-visible, .bar :focus-visible, .menu :focus-visible, .hero :focus-visible, .nums :focus-visible, .industries :focus-visible, .process :focus-visible, .visit :focus-visible { outline-color: #fff; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 300; padding: 12px 18px; background: var(--graphite); color: #fff; font: 400 14px var(--f-mono); }
.skip:focus { top: 12px; }
.demo { background: #000; color: #d6d7dc; font-size: 13px; line-height: 1.4; text-align: center; padding: 8px 16px; }

/* ---------- Type pieces ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 400 14px/1.35 var(--f-mono); letter-spacing: .01em; color: #3c3f45; }
.eyebrow::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--red); }
.eyebrow-dark { color: var(--on-dark); }
.eyebrow-dark::before { background: var(--signal); }
.eyebrow-c { display: flex; justify-content: center; }
.h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.03em; }
.h2s { font-size: var(--t-h2s); line-height: 1.12; letter-spacing: -.03em; }
.h3 { font-size: clamp(20px, .5vw + 18px, 24px); line-height: 1.15; letter-spacing: -.01em; }
.h4 { font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.lede { color: var(--c-muted); font-size: 17px; line-height: 1.5; max-width: 52ch; }
.sec { padding: var(--sec) 0; }
.sec-head { display: grid; gap: 12px; margin-bottom: 32px; }
.sec-head.row { align-items: end; }
.sec-head .eyebrow { margin-bottom: 4px; }

/* ---------- Buttons (mono label + red turn arrow, square corners) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; padding: 0 18px 0 20px; border: 1px solid transparent;
  border-radius: var(--r-pill); font: 400 15px/1 var(--f-mono); letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  transition: transform 120ms var(--e-out), background-color 160ms ease, color 160ms ease; }
.btn:active { transform: scale(.97); }
.btn .i { width: 18px; height: 18px; }
.btn-white { background: #fff; color: var(--graphite); }
.btn-white .i { color: var(--red); }
.btn-dark { background: var(--graphite); color: #fff; }
.btn-dark .i { color: var(--red-hi); }
.btn-red { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; color: var(--graphite); border-color: var(--graphite); }
.btn-ghost .i { color: var(--red); }
.btn-wide { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn-white:hover { background: #e9ebf0; }
  .btn-dark:hover { background: #2a2a2d; }
  .btn-red:hover { background: #b81f1a; }
  .btn-ghost:hover { background: var(--graphite); color: #fff; }
  .btn:hover .i { transform: translateX(2px); }
  .btn .i { transition: transform 160ms var(--e-out); }
}

/* ---------- Bar ---------- */
.bar { position: sticky; top: 0; z-index: 100; height: var(--bar-h); display: flex; align-items: center; gap: 10px; padding: 0 var(--gut); background: var(--graphite); color: #fff; }
.logo { display: grid; justify-content: start; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; margin: 0 auto 0 0; min-height: 44px; align-content: center; }
.logo-m { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--signal); }
.logo-w { font: 500 23px/1 var(--f-display); letter-spacing: -.03em; }
.logo-t { font: 400 12px/1.2 var(--f-mono); color: var(--on-dark-mute); letter-spacing: .02em; }
.tabs, .bar-tel, .bar-rfq, .d-only { display: none; }
.bar-call { min-height: 44px; padding: 0 16px; font-size: 16px; }
.menu-btn { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--signal); border-radius: var(--r-sm); }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 22px; height: 2px; background: #fff; }
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -7px; } .menu-btn span::after { top: 7px; }

/* ---------- Menu overlay (phones and tablets) ---------- */
.menu { position: fixed; inset: 0; z-index: 200; visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.menu:target { visibility: visible; opacity: 1; transition: opacity 200ms ease; }
.menu::before { content: ""; position: absolute; inset: 0; background: rgb(14 14 15 / .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.menu::after { content: ""; position: absolute; inset: 0 0 auto; height: var(--bar-h); background: var(--graphite); }
.menu-label { position: absolute; z-index: 2; top: 0; left: var(--gut); height: var(--bar-h); display: flex; align-items: center; gap: 10px; margin: 0; font: 400 15px var(--f-mono); color: var(--on-dark); }
.menu-label::before { content: ""; width: 6px; height: 6px; background: var(--signal); }
.menu-close { position: absolute; z-index: 2; top: 10px; right: var(--gut); width: 44px; height: 44px; display: grid; place-items: center; background: var(--signal); border-radius: var(--r-sm); }
.menu-close span { position: relative; width: 24px; height: 24px; }
.menu-close span::before, .menu-close span::after { content: ""; position: absolute; left: 0; top: 11px; width: 24px; height: 2px; background: #fff; transform: rotate(45deg); }
.menu-close span::after { transform: rotate(-45deg); }
.menu-panel { position: absolute; z-index: 1; top: calc(var(--bar-h) + 10px); left: var(--gut); right: var(--gut); display: grid; gap: 10px; padding: 4px 4px 14px;
  background: rgb(52 40 38 / .72); border: 1px solid rgb(255 255 255 / .12); border-radius: var(--r-lg); transform: translateY(-8px); transition: transform 240ms var(--e-out); }
.menu:target .menu-panel { transform: none; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu-grid .wide { grid-column: 1 / -1; }
.menu-grid a { display: grid; place-items: center; min-height: 48px; background: var(--graphite); border: 1px solid var(--graphite-3); border-radius: var(--r-sm); color: var(--on-dark); font-size: 17px; }
.menu-panel .btn { margin: 6px 10px 0; width: auto; }
.menu-tel { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: #fff; font: 400 14px var(--f-mono); }
@media (prefers-reduced-motion: reduce) { .menu, .menu-panel { transition: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; margin: 6px; border-radius: var(--r-lg); background: var(--graphite); color: #fff;
  min-height: min(calc(100svh - var(--bar-h) - 48px), 720px); display: flex; flex-direction: column; }
.hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(13 12 12 / .82) 0%, rgb(13 12 12 / .62) 46%, rgb(13 12 12 / .3) 70%, rgb(13 12 12 / .78) 100%); }
.hero-in { padding-top: 40px; padding-bottom: 28px; display: grid; gap: 18px; justify-items: start; }
.hero h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.035em; max-width: 12ch; }
.hero-lede { color: #e6e6ea; font-size: 17px; max-width: 40ch; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.feat { display: none; }
.ticker { margin-top: auto; overflow: hidden; display: flex; padding: 16px 0 18px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tk { display: flex; flex: none; animation: tick 34s linear infinite; }
.tk li { display: flex; align-items: center; gap: 18px; padding-right: 18px; white-space: nowrap; font-size: 19px; letter-spacing: -.01em; color: #f4f4f6; }
.tk li::before { content: ""; width: 7px; height: 7px; background: var(--signal); }
@keyframes tick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tk { animation: none; } }

/* ---------- Intro + three-card bento ---------- */
.intro .h2s { max-width: 22ch; margin: 14px auto 36px; text-align: center; }
.bento3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1100px; margin: 0 auto; }
.b3 { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--graphite); }
.b3 img { width: 100%; height: 100%; object-fit: cover; }
.b3-a, .b3-b { aspect-ratio: 4 / 5; }
.b3-a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 10 11 / .9), rgb(10 10 11 / .2) 55%, transparent); }
.b3-a figcaption { position: absolute; z-index: 1; right: 14px; bottom: 14px; left: 14px; display: grid; justify-items: end; text-align: right; color: #f4f4f6; font-size: 14px; line-height: 1.3; }
.b3 .big { font: 400 54px/1 var(--f-display); letter-spacing: -.03em; }
.b3-a .big { color: #fff; margin-bottom: 4px; }
.b3 .big em { font-style: normal; color: var(--red-hi); }
.b3-c { grid-column: 1 / -1; background: #fff; padding: 24px; display: grid; gap: 4px; align-content: start; }
.b3-c .big span { font-size: .5em; letter-spacing: -.01em; }
.b3-sub { color: var(--c-muted); margin-bottom: 18px; }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 8px; align-items: center; font-size: 17px; }
.ticks .i { color: var(--red); width: 16px; height: 16px; stroke-width: 2.2; }

/* ---------- Capabilities accordion ---------- */
.acc { border-top: 1px solid var(--c-line); }
.cap { border-bottom: 1px solid var(--c-line); }
.cap summary { list-style: none; display: grid; grid-template-columns: 36px 1fr 44px; align-items: center; gap: 10px; min-height: 72px; padding: 12px 0; cursor: pointer; }
.cap summary::-webkit-details-marker, .q summary::-webkit-details-marker { display: none; }
.cap-n { font: 500 18px/1 var(--f-display); color: var(--red); }
.pm { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #e2e5ec; }
.pm::before, .pm::after { content: ""; position: absolute; left: 14px; top: 21px; width: 16px; height: 2px; background: var(--graphite); transition: transform 200ms var(--e-out); }
.pm::after { transform: rotate(90deg); }
details[open] > summary .pm::after { transform: rotate(0deg); }
.cap[open] { background: #fff; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 24px; border-radius: var(--r-lg); border-bottom-color: transparent; }
.cap-b { display: grid; gap: 18px; }
.cap-b img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-sm); background: var(--graphite); }
.cap-t { display: grid; gap: 16px; align-content: start; justify-items: start; }
.cap-t > p { color: var(--c-muted); font-size: 17px; }
.spec { display: grid; width: 100%; border-top: 1px solid var(--c-line); }
.spec li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.spec span { color: var(--c-muted); }
.spec b { font: 400 14px/1.4 var(--f-mono); text-align: right; }

/* ---------- Equipment & specs ---------- */
.eq { display: grid; gap: 10px; }
.card { background: #fff; border-radius: var(--r-lg); padding: 22px; display: grid; gap: 14px; align-content: start; }
.card-dark { background: var(--graphite); color: #fff; border-radius: var(--r-lg); }
.mtab { width: 100%; }
.mtab tr { border-bottom: 1px solid var(--c-line); }
.mtab tr:first-child { border-top: 1px solid var(--c-line); }
.mtab th, .mtab td { padding: 10px 0; text-align: left; vertical-align: baseline; }
.mtab th { font-weight: 400; font-size: 15px; padding-right: 12px; }
.mtab td { font: 400 14px/1.4 var(--f-mono); text-align: right; color: #2b2d31; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chips li { padding: 7px 10px; background: var(--ice); border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 14px; }
.certs { display: grid; }
.certs li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid #2f2f33; color: var(--on-dark-mute); font-size: 15px; }
.certs b { font: 400 15px/1.3 var(--f-mono); color: #fff; }
.certs b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; background: var(--signal); vertical-align: middle; }

/* ---------- Numbers: typewriter band + stat bento ---------- */
.nums { background: radial-gradient(120% 70% at 50% 0%, #26201f 0%, var(--graphite) 60%); color: #fff; text-align: center; }
.nums .eyebrow { margin-bottom: 10px; }
.type { font-size: var(--t-type); line-height: 1.08; letter-spacing: -.03em; }
.tw { display: inline-grid; justify-items: center; width: 4.3em; text-align: left; }
.w { grid-area: 1 / 1; position: relative; }
.wt { display: block; white-space: nowrap; }
.w::after { content: ""; position: absolute; top: .16em; bottom: .12em; left: calc(var(--w) + .05em); width: .05em; background: var(--signal); }
.w:not(:first-child) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .w:not(:first-child) { visibility: visible; }
  .wt { animation: type-w 12s steps(var(--n), end) var(--d) infinite both; }
  .w::after { animation: type-c 12s steps(var(--n), end) var(--d) infinite both, blink .8s steps(1, end) infinite; }
}
@keyframes type-w {
  0% { clip-path: inset(0 100% 0 0); }
  9%, 20% { clip-path: inset(0 0 0 0); }
  24%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes type-c {
  0% { transform: translateX(calc(var(--w) * -1)); opacity: 0; }
  .5% { transform: translateX(calc(var(--w) * -1)); opacity: 1; }
  9%, 20% { transform: none; opacity: 1; }
  24% { transform: translateX(calc(var(--w) * -1)); opacity: 1; }
  24.5%, 100% { transform: translateX(calc(var(--w) * -1)); opacity: 0; }
}
@keyframes blink { 50% { background: transparent; } }
.nums-lede { max-width: 46ch; margin: 18px auto 26px; color: var(--on-dark-mute); font-size: 17px; }
.bento4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 44px; text-align: left; }
.b4 { position: relative; overflow: hidden; min-height: 184px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; border-radius: var(--r-lg); }
.b4-img { background: #000; }
.b4-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b4-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 8 9 / .92), rgb(8 8 9 / .35) 60%, rgb(8 8 9 / .1)); }
.b4-img figcaption { position: relative; z-index: 1; display: grid; gap: 2px; }
.b4-dark { background: var(--graphite-2); border: 1px solid #2c2c30; }
.b4-red { background: var(--red); }
.b4-k { font: 400 13px/1.3 var(--f-mono); color: #d8d9de; }
.b4-red .b4-k, .b4-red .b4-s { color: #fff; }
.b4-v { display: inline-flex; align-items: center; gap: 8px; font: 400 clamp(32px, 2vw + 22px, 54px)/1.05 var(--f-display); letter-spacing: -.03em; color: #fff; }
.b4-v .i { width: .55em; height: .55em; color: #ffc24a; }
.b4-s { font-size: 14px; line-height: 1.35; color: var(--on-dark-mute); }

/* ---------- Trust ---------- */
.trust-g { display: grid; gap: 28px; }
.trust-c { text-align: center; display: grid; gap: 16px; justify-items: center; }
.quote { display: grid; gap: 14px; max-width: 34em; }
.quote blockquote p { font-size: 20px; line-height: 1.35; letter-spacing: -.01em; }
.quote figcaption { display: grid; gap: 2px; font: 400 14px/1.4 var(--f-mono); color: #3c3f45; }
.quote figcaption b { font-weight: 400; color: var(--red); }
.sample { font: 400 13px var(--f-mono); color: var(--c-muted); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles li { display: grid; place-content: center; gap: 2px; min-height: 76px; padding: 10px; background: #fff; border-radius: var(--r-sm); text-align: center; font-size: 14px; color: var(--c-muted); }
.tiles b { font: 500 19px/1.1 var(--f-display); letter-spacing: -.02em; color: var(--c-ink); }
.trust .tiles-l { order: 2; } .trust .tiles-r { order: 3; } .trust-c { order: 1; }

/* ---------- Industries (dark split) ---------- */
.industries { display: grid; background: var(--graphite); color: #fff; }
.ind-t { padding: var(--sec) var(--gut); display: grid; gap: 16px; align-content: end; }
.ind-lede { color: var(--on-dark-mute); font-size: 17px; max-width: 46ch; }
.ind { display: grid; gap: 0; margin-top: 8px; }
.ind li { display: flex; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid #2c2c30; font-size: 16px; color: var(--on-dark); }
.ind .i { color: var(--red-hi); width: 20px; height: 20px; }
.ind-img { display: none; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Projects + reviews (rails on phones) ---------- */
.rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px; scroll-padding: 0 var(--gut); }
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; }
.rail:focus-visible { outline-offset: -2px; }
.case { background: #fff; border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.case img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--graphite); }
.case-b { padding: 18px; display: grid; gap: 10px; align-content: start; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 400 13px var(--f-mono); color: #3c3f45; }
.tag::before { content: ""; width: 6px; height: 6px; background: var(--red); }
.res { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.res dt { font-size: 13px; color: var(--c-muted); }
.res dd { font: 400 22px/1.2 var(--f-display); letter-spacing: -.02em; }
.note { margin-top: 14px; font: 400 13px var(--f-mono); color: var(--c-muted); }
.reviews { padding-top: 0; }
.reviews .h2s { margin-bottom: 20px; }
.rv { background: #fff; border-radius: var(--r-lg); padding: 20px; display: grid; gap: 12px; align-content: start; }
.stars { display: flex; gap: 2px; color: var(--red); }
.stars .i { width: 16px; height: 16px; }
.rv blockquote p { font-size: 17px; line-height: 1.45; }
.rv-by { display: grid; font-size: 14px; color: var(--c-muted); }
.rv-by b { font-weight: 500; color: var(--c-ink); font-size: 15px; }

/* ---------- Process ---------- */
.process { background: var(--graphite); color: #fff; }
.process .h2s { text-align: center; margin: 12px auto 28px; max-width: 18ch; }
.steps { display: grid; gap: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 4px; padding: 16px 0; border-top: 1px solid #2c2c30; }
.sn { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; background: var(--red); color: #fff; font: 400 14px var(--f-mono); border-radius: var(--r-sm); }
.steps p { color: var(--on-dark-mute); font-size: 15px; }

/* ---------- About ---------- */
.story { display: grid; gap: 24px; }
.story-t { display: grid; gap: 16px; align-content: start; }
.story-t > p { color: var(--c-muted); font-size: 17px; }
.story-q { border-left: 3px solid var(--red); padding-left: 16px; display: grid; gap: 6px; }
.story-q p { font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
.story-q figcaption { font: 400 13px var(--f-mono); color: var(--c-muted); }
.story-img { display: none; border-radius: var(--r-lg); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 32px 0; }
.stats div { background: var(--graphite); color: #fff; border-radius: var(--r-lg); padding: 16px; display: grid; gap: 4px; }
.stats dt { font: 400 13px var(--f-mono); color: #d0d1d6; order: 2; }
.stats dd { font: 400 34px/1.05 var(--f-display); letter-spacing: -.03em; }
.stats small { font-size: .5em; letter-spacing: 0; }
.miles .h3 { margin-bottom: 12px; }
.mlist li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-line); }
.mlist .y { grid-row: 1 / 3; font: 400 15px var(--f-mono); color: var(--red); }
.mlist b { font-weight: 500; font-size: 17px; }
.mlist .d { color: var(--c-muted); font-size: 15px; }
.team { margin-top: 28px; grid-auto-columns: 62%; }
.pp { background: #fff; border-radius: var(--r-lg); padding: 16px; display: grid; gap: 6px; align-content: start; }
.ini { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; background: var(--graphite); color: #fff; font: 400 17px var(--f-mono); border-radius: var(--r-sm); }
.pp:nth-child(2) .ini { background: var(--red); }
.role { font-size: 14px; color: var(--c-muted); }

/* ---------- RFQ + contact ---------- */
.ct { display: grid; gap: 10px; }
.rfq { background: var(--form); border-radius: var(--r-lg); padding: 22px 18px; display: grid; gap: 16px; }
.rfq .h3 { font-size: clamp(24px, 1vw + 20px, 32px); letter-spacing: -.02em; }
.f { display: grid; gap: 6px; min-width: 0; }
.f label { font: 400 14px/1.3 var(--f-mono); color: #2f3136; }
.f label small { color: var(--c-muted); }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/1.3 var(--f-body); color: var(--c-ink); background: #fff;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); }
.f textarea { min-height: 96px; resize: vertical; }
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #131314 50%), linear-gradient(135deg, #131314 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.f input::placeholder { color: #6b6e75; }
.f input[type=file] { padding: 10px; font: 400 14px var(--f-mono); background: #fff; border-style: dashed; cursor: pointer; }
.f input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: var(--graphite); color: #fff; font: 400 14px var(--f-mono); cursor: pointer; }
.hint { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--c-muted); }
.hint .i { color: var(--red); margin-top: 1px; }
.hint a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.sent { display: none; gap: 10px; align-items: flex-start; padding: 14px; background: #fff; border-left: 3px solid var(--c-accent-2); font-size: 15px; }
.sent .i { color: var(--c-accent-2); }
.sent:target { display: flex; }
.visit { padding: 6px; display: grid; align-content: start; }
.visit img { display: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); }
.vlist { display: grid; padding: 12px 14px; }
.vlist div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid #2c2c30; }
.vlist div:last-child { border-bottom: 0; }
.vlist dt { display: flex; align-items: center; gap: 8px; font: 400 13px var(--f-mono); color: var(--on-dark-mute); }
.vlist dt .i { color: var(--red-hi); width: 16px; height: 16px; }
.vlist dd { font-size: 17px; }
.vlist a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- FAQ ---------- */
.faq-g { display: grid; gap: 24px; }
.faq-g .lede { margin-top: 12px; }
.qa { border-top: 1px solid #c9ced8; }
.q { border-bottom: 1px solid #c9ced8; }
.q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 10px 0; font-size: 17px; cursor: pointer; }
.q .pm { width: 32px; height: 32px; flex: none; }
.q .pm::before, .q .pm::after { left: 10px; top: 15px; width: 12px; }
.a { padding: 0 0 18px; color: var(--c-muted); max-width: 56ch; }

/* ---------- Footer ---------- */
.foot { background: var(--graphite); color: #fff; }
.f-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 340px; padding: 56px var(--gut); text-align: center; }
.f-cta img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.f-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 50%, rgb(14 14 15 / .82), rgb(14 14 15 / .5)); }
.f-cta-in { display: grid; gap: 16px; justify-items: center; }
.f-cta .h2s { max-width: 14ch; }
.f-act { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; }
.f-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 400 16px var(--f-mono); }
.f-tel .i { color: var(--red-hi); }
.f-main { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-top: 44px; padding-bottom: 32px; border-top: 1px solid #26262a; }
.f-brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; justify-items: start; }
.foot .logo { margin: 0; }
.f-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.f-badges span { padding: 6px 10px; border: 1px solid #3a3a3e; border-radius: var(--r-sm); font: 400 13px var(--f-mono); color: var(--on-dark); }
.f-h { font: 500 19px/1.2 var(--f-display); margin-bottom: 10px; }
.f-pages ul { display: grid; grid-template-columns: 1fr; }
.f-pages a, .f-contact a { display: flex; min-width: 44px; align-items: center; gap: 8px; min-height: 44px; color: #c9cad0; }
.f-contact { min-width: 0; }
.f-contact a { overflow-wrap: anywhere; }
.f-contact .i { color: var(--red-hi); width: 16px; height: 16px; }
.f-rfq { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; color: var(--on-dark-mute); }
.f-rfq a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.f-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 18px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid #26262a;
  font-size: 14px; color: var(--on-dark-mute); }
@media (hover: hover) and (pointer: fine) {
  .f-pages a:hover, .f-contact a:hover { color: #fff; }
  .menu-grid a:hover { background: #222225; }
  .cap summary:hover .h3, .q summary:hover { color: var(--red); }
}

/* ---------- Desktop page bands (bundled pages only): the original's dark header band on inner pages ---------- */
.ph { display: none; }

/* ---------- Tablet (760+) ---------- */
@media (min-width: 760px) {
  :root { --gut: 30px; --sec: 96px; }
  .bar-rfq { display: inline-flex; min-height: 44px; }
  .menu-panel { left: auto; width: 460px; }
  .hero { margin: 8px; min-height: min(calc(100svh - var(--bar-h) - 56px), 820px); }
  .hero-in { padding-top: 96px; }
  .b3-c { padding: 30px; }
  .b3 .big { font-size: 64px; }
  .sec-head.row { grid-template-columns: 1fr auto; }
  .cap-b { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cap-b img { aspect-ratio: 4 / 3; height: 100%; max-height: 380px; }
  .eq { grid-template-columns: 1fr 1fr; }
  .eq-m { grid-row: span 2; }
  .b4 { min-height: 300px; padding: 20px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .industries { grid-template-columns: 1fr 1fr; }
  .ind-t { padding: 96px 30px; }
  .ind { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .ind-img { display: block; }
  .rail { grid-auto-columns: 46%; }
  .team { grid-auto-columns: 30%; }
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: 30px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats dd { font-size: clamp(28px, 2.4vw + 10px, 40px); }
  .story { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .story-img { display: block; }
  .rfq { padding: 32px; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .rfq > :not(.f-half) { grid-column: 1 / -1; }
  .visit img { display: block; }
  .faq-g { grid-template-columns: 1fr 1.15fr; gap: 48px; }
  .f-cta { min-height: 460px; }
  .f-brand, .f-rfq { grid-column: auto; }
  .f-pages ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
}

/* ---------- Desktop (1080+) ---------- */
@media (min-width: 1080px) {
  :root { --bar-h: 80px; --sec: 120px; }
  .bar { gap: 20px; padding: 0 30px; }
  .logo { flex: 1; margin: 0; }
  .logo-w { font-size: 26px; }
  .tabs { display: block; }
  .tabs ul { display: flex; gap: 4px; padding: 4px; background: rgb(56 44 42 / .55); border: 1px solid rgb(255 255 255 / .1); border-radius: var(--r-sm);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .tabs a { --ncs-on-style: none; display: grid; place-items: center; min-height: 44px; padding: 0 22px; border: 1px solid var(--graphite-3); border-radius: var(--r-sm);
    background: var(--graphite) linear-gradient(rgb(212 38 32 / calc(var(--on, 0))), rgb(212 38 32 / calc(var(--on, 0)))); font-size: 15px; color: var(--on-dark); transition: background-color 160ms ease; }
  .bar-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: 1; justify-content: flex-end; font: 400 15px var(--f-mono); color: var(--on-dark); }
  .bar-tel .i { color: var(--red-hi); width: 16px; height: 16px; }
  .bar-call, .menu-btn, .menu { display: none; }
  .bar-rfq { min-height: 48px; }
  /* the bar floats clear over the hero, then turns graphite as the page scrolls (static graphite where unsupported) */
  @supports (animation-timeline: scroll()) {
    .bar { background: transparent; animation: bar-in linear both; animation-timeline: scroll(root); animation-range: 0 260px; }
    @keyframes bar-in { from { background-color: rgb(19 19 20 / 0); } to { background-color: rgb(19 19 20 / 1); } }
  }
  .hero { margin: calc(var(--bar-h) * -1) 0 0; border-radius: 0; min-height: min(100svh, 900px); }
  .hero-img { object-position: 60% 50%; }
  .hero::before { background: linear-gradient(90deg, rgb(13 12 12 / .88) 0%, rgb(13 12 12 / .68) 38%, rgb(13 12 12 / .1) 72%, rgb(13 12 12 / 0) 100%),
    linear-gradient(0deg, rgb(13 12 12 / .7), transparent 30%), linear-gradient(180deg, rgb(13 12 12 / .6), transparent 22%); }
  .hero-in { padding-top: calc(var(--bar-h) + 120px); gap: 22px; }
  .hero-lede { font-size: 19px; }
  .feat { position: absolute; right: 30px; bottom: 30px; display: grid; gap: 10px; width: 320px; color: #fff; }
  .feat-card { display: grid; gap: 12px; padding: 8px 8px 14px; background: rgb(40 30 28 / .6); border: 1px solid rgb(255 255 255 / .1); border-radius: var(--r-lg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .feat-card img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-sm); }
  .feat-t { padding: 0 8px; font-size: 16px; line-height: 1.3; }
  .ticker { width: calc(100% - 420px); margin-left: 30px; padding-bottom: 34px; }
  .intro .h2s { margin-bottom: 64px; }
  .bento3 { grid-template-columns: repeat(3, 1fr); }
  .b3-a, .b3-b, .b3-c { aspect-ratio: 360 / 543; grid-column: auto; }
  .b3-c .ticks { margin-top: auto; }
  .bento4 { grid-template-columns: repeat(4, 1fr); }
  .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; }
  .team { grid-template-columns: repeat(4, 1fr); }
  .f-main { grid-template-columns: 1.1fr 1fr 1.2fr 1.2fr; }
  .cap summary { grid-template-columns: 70px 1fr 44px; min-height: 96px; }
  .cap-n { font-size: 20px; }
  .cap[open] { margin: 0 -30px; padding: 0 30px 30px; }
  .cap-b { grid-template-columns: 1.05fr 1fr; gap: 48px; padding-left: 70px; }
  .eq { grid-template-columns: 1.25fr 1fr 1fr; }
  .eq-m { grid-row: auto; }
  .card { padding: 30px; }
  .nums-lede { font-size: 19px; }
  .b4 { min-height: 340px; padding: 24px; }
  .trust-g { grid-template-columns: 230px 1fr 230px; align-items: center; gap: 40px; }
  .trust .tiles-l, .trust .tiles-r, .trust-c { order: 0; }
  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tiles li { min-height: 136px; font-size: 15px; }
  .tiles b { font-size: 24px; }
  .quote blockquote p { font-size: 24px; }
  .industries { min-height: 760px; }
  .ind-t { padding: 120px 30px 80px; max-width: 720px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li { grid-template-columns: 1fr; text-align: center; justify-items: center; border-top: 0; padding: 0 10px; row-gap: 10px; }
  .sn { grid-row: auto; margin-bottom: 14px; }
  .process { padding-bottom: 140px; }
  .mlist li { grid-template-columns: 120px 1fr 1fr; align-items: baseline; padding: 18px 0; }
  .mlist .y { grid-row: auto; }
  .story-img { aspect-ratio: 4 / 3; }
  .ct { grid-template-columns: 1fr 1fr; }
  .rfq { padding: 40px; }
  .visit .vlist { padding: 24px; }
  .f-cta { min-height: 520px; }
  .f-main { padding-top: 64px; padding-bottom: 56px; }

  /* Bundled desktop pages: Services, Work, About and Contact open with the original's dark header band */
  body:has(main > [data-pg="services"]:target, main > [data-pg="services"] :target) .ph-services,
  body:has(main > [data-pg="work"]:target, main > [data-pg="work"] :target) .ph-work,
  body:has(main > [data-pg="about"]:target, main > [data-pg="about"] :target) .ph-about,
  body:has(main > [data-pg="contact"]:target, main > [data-pg="contact"] :target) .ph-contact { display: grid; }
  body:has(main > [data-pg]:not([data-pg="home"]):target, main > [data-pg]:not([data-pg="home"]) :target) .sec:has(> .ph) { padding-top: 0; }
  .ph { place-items: center; align-content: center; gap: 18px; min-height: 340px; margin: calc(var(--bar-h) * -1) 0 var(--sec); padding: calc(var(--bar-h) + 30px) 30px 60px;
    background: var(--graphite); color: #fff; text-align: center; }
  .ph-t { font: 500 clamp(56px, 3vw + 24px, 72px)/1.05 var(--f-display); letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
}

/* ---------- Phones only: shorter page (10 screens or fewer at 393px) ---------- */
@media (max-width: 759px) {
  :root { --sec: 36px; }
  /* equipment: three tabs over one shared cell (no layout shift); computers show all three cards */
  .eq { position: relative; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .eq-r { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
  .eq-l { display: grid; place-items: center; min-height: 46px; background: #e2e5ec; border-radius: var(--r-sm); font: 400 14px var(--f-mono); cursor: pointer; }
  .eq-r:checked + .eq-l { background: var(--graphite); color: #fff; }
  .eq-r:focus-visible + .eq-l { outline: 2px solid var(--red); outline-offset: 2px; }
  .eq > .card { grid-area: 2 / 1 / 3 / -1; margin-top: 6px; visibility: hidden; }
  #eq-1:checked ~ .eq-m, #eq-2:checked ~ .eq-x, #eq-3:checked ~ .eq-c { visibility: visible; }
  .eq .card > .h4:first-child { display: none; }
  .equip .lede, .caps .sec-head .btn, .contact .lede { display: none; }
  /* intro: one white card carries the numbers on phones */
  .b3-a, .b3-b { display: none; }
  .b3-c { padding: 20px; }
  /* trust: the certifications already sit in the equipment tabs */
  .trust .tiles { display: none; }
  .quote blockquote p { font-size: 18px; }
  /* industries as compact chips */
  .ind { display: flex; flex-wrap: wrap; gap: 6px; }
  .ind li { min-height: 40px; padding: 0 12px 0 10px; gap: 8px; border: 1px solid #2c2c30; border-radius: var(--r-sm); font-size: 14px; }
  .ind .i { width: 16px; height: 16px; }
  /* numbers bento shorter */
  .b4 { min-height: 132px; padding: 12px; }
  .b4-s { display: none; }
  .bento4 { margin-top: 32px; }
  /* process as a swipe rail */
  .steps { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scroll-padding: 0 var(--gut); position: relative; }
  .steps::-webkit-scrollbar { display: none; }
  .steps li { scroll-snap-align: start; border: 1px solid #2c2c30; border-radius: var(--r-lg); padding: 14px; grid-template-columns: 1fr; row-gap: 8px; align-content: start; }
  .sn { grid-row: auto; }
  .process .h2s { margin-bottom: 20px; }
  /* about: milestones as one line each, quote on computers */
  .story-q, .mlist .d { display: none; }
  .mlist li { padding: 10px 0; }
  .stats { margin: 24px 0; }
  .stats dd { font-size: 30px; }
  .team { margin-top: 20px; }
  .case img { aspect-ratio: 16 / 10; }
  /* footer: the contact block above carries the details; keep pages, contact links and legal */
  .f-cta, .f-rfq, .f-badges { display: none; }
  .f-main { padding-top: 32px; padding-bottom: 20px; border-top: 0; }
  .f-pages ul { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .f-contact { display: none; }
  .f-brand { gap: 0; }
  /* more phone trims: secondary blocks stay on computers */
  .trust .eyebrow, .miles, .ind-lede, .ticks li:nth-child(n+3), .cap .spec li:nth-child(4), .faq .lede, .cap-t .btn, .b4-img, .note, .mtab tr:nth-child(n+8) { display: none; }
  .cap-b img { aspect-ratio: 2 / 1; }
  .bento4 { grid-template-columns: 1fr 1fr; }
  .hero { min-height: min(calc(100svh - var(--bar-h) - 60px), 660px); }
  .trust-c { gap: 12px; }
  .mtab th { font-size: 14px; } .mtab td { font-size: 13px; } .mtab th, .mtab td { padding: 9px 0; }
  .pp { padding: 14px; } .ini { width: 44px; height: 44px; margin-bottom: 2px; }
  .trust .h2s { font-size: 24px; }
  .rfq { gap: 12px; }
  .rfq > .h3, .reviews .h2s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .projects .sec-head .btn { display: none; }
  .chips li { padding: 5px 8px; font-size: 13px; }
  .eq .spec li { padding: 8px 0; }
  .certs li { padding: 9px 0; font-size: 14px; }
  .eq .card { padding: 18px; gap: 10px; }
  .vlist { padding: 4px 12px; }
  .vlist div { padding: 9px 0; }
  .vlist dd { font-size: 16px; }
}
@media (min-width: 760px) { .eq-r, .eq-l { display: none; } }