/* DM Machine and Tool LLC - site styles.

   DIN lettering for headlines, a light page with true black bands, brand blue
   kept for the "Send a print" band and the buttons, monospace only for the
   supplier codes. Red appears on the rush line and nowhere else.

   TYPE: Barlow Condensed for headings and Barlow for text, kept in /fonts
   and served from this site (SIL Open Font License, see /fonts/OFL-Barlow.txt).
   Nothing is fetched from anywhere else. If a font file fails to load, the
   stacks fall back to the DIN-style face already on the device. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-latin-700-normal.woff2") format("woff2"); }

:root {
	--sheet: #E8EAEC;      /* the page */
	--white: #F8F9F9;      /* a panel on the page */
	--ink: #0E1012;        /* type and black bands */
	--ink-2: #181B1E;
	--line: rgba(14, 16, 18, .16);
	--line-strong: #0E1012;
	--line-rev: rgba(255, 255, 255, .2);
	--grey: #555B62;       /* secondary type on the page */
	--grey-rev: #A9AFB6;   /* secondary type on black */
	--blue: #2E7FBF;       /* brand blue */
	--blue-deep: #2670AE;  /* the blue band: white type reads on it */
	--blue-ink: #1C5A8E;   /* blue type on the page */
	--sky: #6CB2EA;        /* blue type on black */
	--rush: #E4453A;       /* the rush line only */

	--display: "Barlow Condensed", "Bahnschrift", "DIN Condensed", "DIN Alternate", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--body: "Barlow", "Bahnschrift", "Avenir Next", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
	--mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "Roboto Mono", "Liberation Mono", monospace;

	--wrap: 1320px;
	--pad: clamp(20px, 4.2vw, 56px);
	--section: clamp(56px, 7.4vw, 108px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }

body {
	margin: 0;
	color: var(--ink);
	background: var(--sheet);
	font-family: var(--body);
	font-stretch: 100%;
	font-size: 18px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* the G-code behind the page: a real G01 program that cuts D M M T, tiled on a fixed sheet turned 25 degrees */
body::before { content: ""; position: fixed; z-index: -1; inset: -60vmax; background: url("/img/gcode-tile.png") repeat; background-size: 2172px 6844px; transform: rotate(25deg); pointer-events: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--white); color: var(--ink); }

/* ---- type -------------------------------------------------------------- */

.util, .top, .hero, .banner, .dark, .foot { color: var(--white); background: var(--ink) url("/img/chips-tile.jpg") repeat; background-size: 800px 550px; }

h1, h2 { margin: 0; font-family: var(--display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.3vw, 94px); line-height: .9; }
h2 { font-size: clamp(34px, 4vw, 58px); line-height: .95; }
h3 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* small labels: one style everywhere */
.kicker, .label, dt, figcaption b, .tb span, table.data th, .reach span, .cta-reach span {
	font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.kicker { display: block; margin: 0 0 clamp(14px, 1.8vw, 22px); color: var(--sky); }
.label { display: block; margin: 0 0 12px; color: var(--blue-ink); }

.lead { margin: 0; font-size: clamp(21px, 2.05vw, 29px); line-height: 1.25; font-weight: 600; max-width: 21em; text-wrap: balance; }
.sub { margin: 14px 0 0; font-size: clamp(17px, 1.4vw, 19px); color: var(--grey-rev); }
.quiet { color: var(--grey); }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 24px 13px;
	font-family: var(--display); font-stretch: 75%; font-size: 21px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
	color: #fff; background: var(--blue-deep); border: 2px solid var(--blue-deep); text-decoration: none; white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn::after { content: "\2192"; font-family: var(--mono); font-size: 17px; transition: transform .15s ease; }
.btn:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn:hover::after { transform: translateX(4px); }
.btn.ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn.ghost::after { content: none; }
.btn.small { padding: 11px 16px 9px; font-size: 18px; min-width: 168px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.more {
	display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px;
	font-family: var(--display); font-stretch: 75%; font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
	color: inherit; text-decoration: none; border-bottom: 3px solid var(--blue);
}
.more::after { content: "\2192"; font-family: var(--mono); font-size: 15px; transition: transform .15s ease; }
.more:hover { color: var(--blue-ink); }
.dark .more:hover { color: var(--sky); }
.more:hover::after { transform: translateX(4px); }

/* ---- header ------------------------------------------------------------ */

.util { border-top: 4px solid var(--blue); font-size: 13px; color: var(--grey-rev); }
.util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 38px; }
.util-place { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.util-reach { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.util a { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.util a:hover { color: var(--sky); }

.top { position: sticky; top: 0; z-index: 50; border-top: 1px solid var(--line-rev); border-bottom: 1px solid var(--line-rev); }
.top .wrap { display: flex; align-items: center; gap: 12px 40px; min-height: 80px; }
.brand { display: block; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; }

.nav { display: flex; gap: 6px 34px; margin-left: auto; }
.nav a {
	position: relative; padding: 8px 0 6px; color: #fff; text-decoration: none;
	font-family: var(--display); font-stretch: 75%; font-size: 21px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
}
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---- a black band with copy on the left and a photograph on the right -- */

section { padding: var(--section) 0; }

.split { position: relative; padding: 0; overflow: hidden; }
.split-copy { position: relative; z-index: 1; padding: clamp(44px, 6.4vw, 96px) 0; }
.split-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.9); }
@media (min-width: 900px) {
	.split .wrap { display: flex; align-items: center; }
	.split-copy { width: 50%; padding-right: clamp(24px, 3.4vw, 56px); }
	.split-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; }
	.hero .wrap { min-height: min(calc(100vh - 126px), 720px); }
}
@media (max-width: 899px) { .split-photo { height: 62vw; max-height: 440px; } }

.hero .lead { margin-top: clamp(20px, 2.4vw, 32px); }
.hero .actions { margin-top: clamp(26px, 3vw, 40px); }
.hero-photo img { object-position: 50% 45%; }

/* the hero slideshow: one heat exchanger body, stock to finished, six frames, CSS only */
.hx-slides { overflow: hidden; }
@media (max-width: 899px) { .hx-slides { position: relative; } }
/* seven slides, 24.1 s: the indicated stock (2.75 s), a 6 s clip of the cutter, then five pictures at 2.75 s,
   plus 1.6 s at the end for the stock picture to fade in over the finished part (so the finished part gets its
   full 2.75 s like the others). The stock picture is the LAST child so it sits on top; every other slide fades
   in on top of the one before, which holds until the new one is solid, so the band never shows. One keyframe set
   per slide, the slots are not equal. The stock picture also holds 3 s extra on page load (delay + fill-mode
   backwards) so every file has arrived. */
.hx-slides img, .hx-slides video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: hx-s1 24.1s linear infinite backwards; animation-delay: 3s; }
.hx-slides > :nth-child(1) { animation-name: hx-s2; }
.hx-slides > :nth-child(2) { animation-name: hx-s3; }
.hx-slides > :nth-child(3) { animation-name: hx-s4; }
.hx-slides > :nth-child(4) { animation-name: hx-s5; }
.hx-slides > :nth-child(5) { animation-name: hx-s6; }
.hx-slides > :nth-child(6) { animation-name: hx-s7; }
.hx-slides > :nth-child(7) { animation-name: hx-s1; }
@keyframes hx-s1 { 0% { opacity: 1; } 11.41% { opacity: 1; } 18.05% { opacity: 0; } 93.36% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hx-s2 { 0% { opacity: 0; } 11.31% { opacity: 0; } 11.41% { opacity: 1; } 42.95% { opacity: 1; } 43.05% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hx-s3 { 0% { opacity: 0; } 36.31% { opacity: 0; } 42.95% { opacity: 1; } 54.36% { opacity: 1; } 54.46% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hx-s4 { 0% { opacity: 0; } 47.72% { opacity: 0; } 54.36% { opacity: 1; } 65.77% { opacity: 1; } 65.87% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hx-s5 { 0% { opacity: 0; } 59.13% { opacity: 0; } 65.77% { opacity: 1; } 77.18% { opacity: 1; } 77.28% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hx-s6 { 0% { opacity: 0; } 70.54% { opacity: 0; } 77.18% { opacity: 1; } 88.59% { opacity: 1; } 88.69% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hx-s7 { 0% { opacity: 0; } 81.95% { opacity: 0; } 88.59% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.hx-slides img, .hx-slides video { animation: none; }
	.hx-slides video { display: none; }
	.hx-slides > :nth-child(6) { opacity: 1; }   /* the finished part */
}

/* the figures row under the hero */
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; background: var(--white); border-bottom: 2px solid var(--line-strong); }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div { padding: clamp(20px, 2.4vw, 34px) clamp(16px, 1.7vw, 26px); border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.stats dt { color: var(--blue-ink); }
.stats dd { margin: 12px 0 0; color: var(--grey); font-size: 15px; line-height: 1.4; }
.stats dd b { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--display); font-stretch: 75%; font-size: clamp(26px, 2.75vw, 42px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
/* the rush line: the one place the red is used */
.stats .is-rush { border-color: var(--ink); padding-bottom: calc(min(210px, 46vw) + 14px);
	background: linear-gradient(180deg, var(--ink) 0 36%, rgba(14, 16, 18, 0) 58%), var(--ink) var(--rush-sign) center bottom / auto min(210px, 46vw) no-repeat; }   /* the neon sign under the rush line */
.stats .is-rush dt, .stats .is-rush dd, .stats .is-rush dd b { color: var(--rush); }
.stats .is-rush dd b { margin: 0; white-space: normal; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.05; text-wrap: balance; }
@media (max-width: 420px) { .stats dd b { font-size: 24px; } .stats div { padding-left: 12px; padding-right: 10px; } }

/* ---- page banner (inner pages): type on black -------------------------- */

.banner { padding: clamp(30px, 3.6vw, 52px) 0 clamp(26px, 3vw, 44px); }
.banner.split { padding: 0; }
.banner.split .split-copy { padding: clamp(40px, 5.4vw, 84px) 0; }
@media (min-width: 900px) { .banner.split .wrap { min-height: 380px; } }
.banner h1 { font-size: clamp(46px, 7.4vw, 112px); }
.banner .lead { margin-top: clamp(16px, 2vw, 26px); font-weight: 400; font-size: clamp(19px, 1.7vw, 24px); color: var(--grey-rev); max-width: 28em; }
.banner .grid { align-items: end; }

/* ---- layout ------------------------------------------------------------ */

.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.tight { padding-top: 0; }

.grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (min-width: 960px) {
	.grid.two { grid-template-columns: 1fr 1fr; }
	.grid.lead-left { grid-template-columns: 5fr 7fr; }
	.grid.photo-right { grid-template-columns: 7fr 5fr; }
}
main section h2 { margin-bottom: clamp(20px, 2.4vw, 32px); }
.head h2, .cta h2 { margin-bottom: 0 !important; }

/* ---- what you can hand us ---------------------------------------------- */

}

/* ---- who you deal with -------------------------------------------------- */

.voice .say { font-size: clamp(23px, 2.5vw, 35px); line-height: 1.18; }
.says { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-rev); }
.says p { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line-rev); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; color: #D9DCE0; }
.say { margin: 0; font-size: clamp(23px, 2.5vw, 35px); line-height: 1.2; font-weight: 600; text-wrap: balance; }
.say.small { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-rev); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; font-weight: 400; color: var(--grey-rev); }

/* ---- photographs ------------------------------------------------------- */

figure { margin: 0; }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: contrast(1.05) saturate(.9); }
.shot.wide img { aspect-ratio: 2 / 1; }
figcaption { margin-top: 12px; font-size: 16px; line-height: 1.35; color: var(--grey); }
figcaption b { display: block; margin-bottom: 2px; color: var(--blue-ink); }

.gallery { display: grid; gap: clamp(24px, 3vw, 40px) 24px; margin: 0; padding: 0; list-style: none; counter-reset: fig; }
@media (min-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gallery.three { grid-template-columns: repeat(3, 1fr); } }
.gallery li { counter-increment: fig; }
.gallery .lead-shot { grid-column: 1 / -1; }
.gallery figure > div { overflow: hidden; background: var(--ink-2); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: contrast(1.05) saturate(.9); transition: transform .6s ease; }
.gallery .lead-shot img { aspect-ratio: 2 / 1; }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption { color: var(--ink); font-weight: 600; font-size: 18px; }
.gallery figcaption::before { content: "Fig. " counter(fig); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-ink); }

.ph { display: grid; place-items: center; min-height: 280px; padding: 20px; text-align: center; border: 2px dashed var(--grey); color: var(--grey); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

/* ---- lists, figures, tables -------------------------------------------- */

ul.list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--line-strong); }
ul.list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 600; line-height: 1.3; }

ul.plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px 40px; font-size: 20px; font-weight: 600; line-height: 1.3; }
@media (min-width: 620px) { ul.plain { grid-template-columns: 1fr 1fr; } }
ul.plain.one { grid-template-columns: 1fr; }
ul.plain li { position: relative; padding-left: 22px; }
ul.plain li::before { content: ""; position: absolute; left: 0; top: .48em; width: 9px; height: 9px; background: var(--blue); }

.figures { display: grid; margin: 0; border-left: 1px solid var(--line); border-top: 2px solid var(--line-strong); background: var(--white); }
@media (min-width: 420px) { .figures { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .figures.four { grid-template-columns: repeat(4, 1fr); } }
.figures div { padding: 22px 24px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figures dt { color: var(--blue-ink); }
.figures dd { margin: 12px 0 0; font-family: var(--display); font-stretch: 75%; font-size: clamp(27px, 2.5vw, 36px); font-weight: 700; line-height: 1.02; }
.figures.names dd { margin: 0; }
@media (min-width: 1100px) { .figures.three { grid-template-columns: repeat(3, 1fr); } }
.figures.facts dd { font-family: var(--body); font-stretch: 100%; font-size: 20px; font-weight: 600; line-height: 1.3; }
.figures.facts dd.code { font-family: var(--mono); font-weight: 700; }
.figures dd span { display: block; margin-top: 8px; color: var(--grey); font-family: var(--body); font-stretch: 100%; font-size: 15px; font-weight: 400; text-transform: none; line-height: 1.4; }
.under { margin-top: 18px; color: var(--grey); }

.panel { display: grid; background: var(--white); border-top: 2px solid var(--line-strong); }
@media (min-width: 800px) { .panel { grid-template-columns: 1fr 1fr; } }
.panel > div { padding: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .panel > div + div { border-left: 1px solid var(--line); } }
.panel h2 { font-size: clamp(26px, 2.4vw, 34px); }

/* lead time and the rush line, as one strip */
.times { display: grid; background: var(--ink); color: var(--white); }
@media (min-width: 760px) { .times { grid-template-columns: 1fr 1fr; } }
.times > * { margin: 0; padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 36px); }
.times b { display: block; margin-bottom: 10px; font-family: var(--body); font-stretch: 100%; font-size: 12px; letter-spacing: .13em; line-height: 1.2; }
.times .std, .times .rush { text-wrap: balance; font-family: var(--display); font-stretch: 75%; font-size: clamp(28px, 3.2vw, 46px); font-weight: 700; text-transform: uppercase; line-height: 1; }
.times .std b { color: var(--sky); }
/* the rush line: the one place the red is used */
.times .rush { color: var(--rush); border-top: 1px solid var(--line-rev); position: relative; isolation: isolate; }
/* the neon sign sits behind the rush line, bleeding off the right edge, dark on the left so the type reads */
@media (min-width: 1100px) { .times .rush { background: linear-gradient(90deg, var(--ink) 0 46%, rgba(14, 16, 18, 0) 64%), var(--ink) var(--rush-sign) right center / auto 100% no-repeat; min-height: 340px; padding-right: 48%; display: flex; flex-direction: column; justify-content: center; } }
@media (min-width: 760px) { .times .rush { border-top: 0; border-left: 1px solid var(--line-rev); } }
/* below 1100 px the sign sits under the text, full width of the panel */
@media (max-width: 1099px) { .times .rush { padding-bottom: min(64vw, 330px); background: linear-gradient(180deg, var(--ink) 0 22%, rgba(14, 16, 18, 0) 44%), var(--ink) var(--rush-sign) center bottom / auto min(66vw, 340px) no-repeat; } }

table.data { width: 100%; border-collapse: collapse; border-top: 2px solid var(--line-strong); }
table.data th, table.data td { padding: 14px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
table.data th { width: 11.5em; color: var(--blue-ink); }
table.data td { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.code { font-family: var(--mono); font-weight: 700; letter-spacing: .02em; }
@media (max-width: 560px) {
	table.data th, table.data td { display: block; width: auto; }
	table.data th { border-bottom: 0; padding-bottom: 0; }
	table.data td { padding-top: 4px; }
}

.partners { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-rev); }
@media (min-width: 800px) { .partners { grid-template-columns: repeat(3, 1fr); } }
.partners li { padding: 26px 28px 28px 0; border-bottom: 1px solid var(--line-rev); }
@media (min-width: 800px) { .partners li + li { padding-left: 28px; border-left: 1px solid var(--line-rev); } }
.partners b { display: block; margin-bottom: 10px; font-family: var(--display); font-stretch: 75%; font-size: clamp(36px, 3.8vw, 54px); text-transform: uppercase; line-height: .96; }
.partners img { height: auto; width: auto; max-height: 64px; max-width: 100%; margin-bottom: 18px; }
.partners span { display: block; color: var(--grey-rev); font-size: 17px; line-height: 1.4; }

/* ---- send a print: one blue band ---------------------------------------- */

.cta { padding: clamp(34px, 4.2vw, 56px) 0; background: var(--blue-deep); color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; }
.cta h2 { font-size: clamp(34px, 4vw, 58px); }
.cta-reach { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.cta-reach a, .reach a { color: inherit; text-decoration: none; }
.cta-reach span, .reach span { display: block; margin-bottom: 4px; opacity: .85; }
.cta-reach b { font-family: var(--display); font-stretch: 75%; font-size: clamp(25px, 2.5vw, 36px); line-height: 1; }
.cta-reach a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* the contact page's own e-mail and phone block */
.reach { display: grid; border-top: 2px solid #fff; }
.reach a { display: grid; gap: 4px; padding: 18px 0 16px; border-bottom: 1px solid var(--line-rev); transition: color .15s ease; }
.reach a:hover { color: var(--sky); }
.reach span { color: var(--sky); opacity: 1; }
.reach b { font-family: var(--display); font-stretch: 75%; font-size: clamp(27px, 3.5vw, 50px); line-height: 1; overflow-wrap: anywhere; }

.notice { padding: 22px 24px; border: 2px solid var(--line-strong); background: var(--white); font-size: 18px; }
.notice b { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.notice + * { margin-top: 24px; }

.cards { display: grid; margin-top: clamp(40px, 5vw, 72px); border-top: 2px solid var(--line-strong); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .card { padding-right: 32px; border-bottom: 0; } .card + .card { padding-left: 32px; border-left: 1px solid var(--line); } }
.card h3 { margin-bottom: 10px; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-ink); }
.tel { white-space: nowrap; }
.card .more { margin-top: 8px; }

/* ---- footer: a title block ---------------------------------------------- */

.foot { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 44px); }
.tb { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-rev); border: 1px solid var(--line-rev); }
.tb > * { padding: 16px 18px; background: var(--ink); }
.tb-logo, .tb-wide, .tb-nav, .tb-status { grid-column: 1 / -1; }
.tb span { display: block; margin-bottom: 8px; font-size: 11px; color: var(--grey-rev); }
.tb b { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.tb b.code { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.tb address { font-style: normal; line-height: 1.6; font-size: 16px; color: var(--grey-rev); }
.tb address b { color: #fff; font-size: 18px; }
.tb a { color: #fff; text-decoration: none; }
.tb a:hover { color: var(--sky); }
.tb-logo { display: grid; align-items: center; }
.tb-logo img { height: clamp(48px, 6vw, 72px); }
.tb nav a.fb { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 14px 7px; background: var(--blue); color: #fff; line-height: 1; }
.tb nav a.fb:hover { background: var(--sky); color: var(--ink); }
.tb nav a.fb small { font-family: var(--body); font-stretch: 100%; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; }
@media (min-width: 900px) { .tb nav a.fb { margin-left: auto; } .tb nav { align-items: center; } }
@media (max-width: 899px) { .tb nav a.fb { grid-column: 1 / -1; justify-self: start; } }
.tb nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-family: var(--display); font-stretch: 75%; font-size: 20px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 900px) {
	.tb { grid-template-columns: repeat(6, 1fr); }
	.tb-logo, .tb-wide { grid-column: span 2; grid-row: span 2; }
	.tb-nav { grid-column: span 4; }
	.tb-status { grid-column: span 2; }
	.tb nav { display: flex; gap: 6px 28px; }
}

/* ---- small screens ----------------------------------------------------- */

@media (max-width: 900px) {
	.util-place { display: none; }
	.util .wrap, .util-reach { justify-content: center; }
	.top .wrap { flex-wrap: wrap; min-height: 0; padding-top: 12px; gap: 8px 12px; }
	.top .brand img { height: 36px; }
	.top .btn { margin-left: auto; padding: 9px 12px 7px; font-size: 16px; min-width: 0; }
	.nav { order: 3; flex: 1 0 100%; margin: 0; justify-content: space-between; gap: 0 8px; border-top: 1px solid var(--line-rev); }
	.nav a { padding: 12px 0 10px; font-size: 18px; letter-spacing: .04em; white-space: nowrap; }
	.nav a::after { bottom: 0; }
}

/* home hero: a cue that the page continues */
.scroll-cue { display: none; }
@media (min-width: 900px) {
	.hero .wrap { position: relative; }
	.scroll-cue {
		position: absolute; left: var(--pad); bottom: 22px; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
		font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff; text-decoration: none;
	}
	.scroll-cue::after { content: "\2193"; font-family: var(--mono); font-size: 20px; color: var(--sky); animation: cue 1.5s ease-in-out infinite; }
	.scroll-cue:hover { color: #fff; }
}
@keyframes cue { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media print {
	body, .util, .top, .hero, .banner, .dark, .foot, .cta { background: #fff !important; color: #000 !important; }
	.top { position: static; }
	.nav, .actions, .skip, .btn, .split-photo { display: none !important; }
}

/* ---- a section heading that sits on a rule ----------------------------- */

.ruled { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin: 0 0 clamp(22px, 2.6vw, 34px); padding-bottom: 14px; border-bottom: 2px solid var(--line-strong); }
.ruled h2 { margin: 0 !important; font-size: clamp(26px, 2.4vw, 34px); }
.ruled p { margin: 0; color: var(--grey); }
.dark .ruled { border-bottom-color: var(--line-rev); }
.ruled + ul.list, .ruled + .figures { border-top: 0; }

/* four records in a row, numbered */
.strip { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: strip; background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
@media (min-width: 520px) { .strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .strip { grid-template-columns: repeat(4, 1fr); } .strip.five { grid-template-columns: repeat(5, 1fr); } }
.strip + .label { margin-top: clamp(26px, 3vw, 40px); }
.strip.bare li::before { content: none; }
.strip li { counter-increment: strip; padding: 20px 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 600; line-height: 1.22; }
.strip li::before { content: counter(strip, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--blue-ink); }

@media (min-width: 1000px) { ul.plain.three { grid-template-columns: repeat(3, 1fr); } }
ul.list.cols { display: grid; column-gap: 48px; border-top: 0; }
@media (min-width: 760px) { ul.list.cols { grid-template-columns: 1fr 1fr; } }

/* ---- the rush sign opens the phone and e-mail, no script: a <details> covers the tile ---- */
.stats .is-rush { position: relative; }
.rush-pop { position: absolute; inset: 0; margin: 0; }
.rush-pop summary { position: absolute; inset: 0; cursor: pointer; list-style: none; }
.rush-pop summary::-webkit-details-marker { display: none; }
.rush-pop summary:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.rush-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; gap: 10px; width: min(92%, 380px); padding: 22px 20px 18px; background: var(--white); color: var(--ink); border-top: 4px solid var(--rush); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); text-align: center; text-transform: none; font-stretch: 100%; line-height: 1.2; }
.rush-card b { margin: 0; font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--rush); }
.rush-card a { font-family: var(--display); font-stretch: 75%; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: var(--ink); text-decoration: none; }
.rush-card a:hover { color: var(--blue-ink); }
.rush-card small { font-family: var(--body); font-size: 12px; color: var(--grey); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the request form on Contact ----------------------------------------- */
.ask { padding-top: 0; }
.lead-copy { max-width: 32em; font-size: 18px; line-height: 1.5; color: var(--grey); }
.quote { display: grid; gap: 18px; padding: clamp(20px, 2.6vw, 32px); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--blue); }
.quote .f2 { display: grid; gap: 18px; }
@media (min-width: 620px) { .quote .f2 { grid-template-columns: 1fr 1fr; } }
.quote label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-ink); }
.quote input, .quote textarea { width: 100%; min-width: 0; padding: 12px 14px; font: inherit; font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 0; }
.quote input:focus, .quote textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.quote textarea { resize: vertical; }
.quote input[type="file"] { padding: 10px; font-size: 15px; }
.quote .fine { margin: 0; font-size: 14px; line-height: 1.4; color: var(--grey); }
.quote .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote .btn { justify-self: start; }
.cf-turnstile { min-height: 65px; }

/* ---- looping clips: on top of their still, which stays for reduced motion -- */
.split-photo video.loop, .clip video.loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip { position: relative; margin: 0; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 10; max-width: 100%; }
.clip img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .split-photo { position: relative; } }
@media (prefers-reduced-motion: reduce) { video.loop { display: none; } }
.beyond, .quality-head .grid { align-items: center; }
h3.sub { margin-bottom: 18px; font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-ink); }

/* ---- About Us --------------------------------------------------------------- */
.passion .p-row { display: grid; gap: clamp(18px, 3vw, 48px); padding: clamp(26px, 3.4vw, 44px) 0; border-top: 1px solid var(--line); }
.passion .p-row:first-child { border-top: 2px solid var(--line-strong); }
@media (min-width: 900px) { .passion .p-row:has(figure) { grid-template-columns: 1fr 1fr; align-items: center; } .passion .p-row:nth-child(even) figure { order: -1; } }
.passion .p-copy { max-width: 40em; }
.passion .p-n { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 14px; color: var(--blue-ink); }
.passion h2 { margin-bottom: 12px; }
.passion p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--grey); }
.passion .p-copy p + p { margin-top: 14px; }
.passion .p-row:has(figure) .p-copy { max-width: 32em; }
@media (min-width: 900px) { .passion .p-row:has(figure) { grid-template-columns: 5fr 7fr; } }
.ps-slides { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; background: var(--ink); }
/* ps-slides: 7 slides, 31.1 s loop, 1.6 s crossfades. Made by make_slideshow_css.py ps 1.6 1.0 3.5 6.0 3.5 6.0 3.5 3.5 3.5. HTML order: slides 2..7, then slide 1 last. */
.ps-slides > img, .ps-slides > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: ps-s1 31.1s linear infinite backwards; animation-delay: 1.0s; }
.ps-slides > :nth-child(1) { animation-name: ps-s2; }
.ps-slides > :nth-child(2) { animation-name: ps-s3; }
.ps-slides > :nth-child(3) { animation-name: ps-s4; }
.ps-slides > :nth-child(4) { animation-name: ps-s5; }
.ps-slides > :nth-child(5) { animation-name: ps-s6; }
.ps-slides > :nth-child(6) { animation-name: ps-s7; }
.ps-slides > :nth-child(7) { animation-name: ps-s1; }
@keyframes ps-s1 { 0% { opacity: 1; } 11.25% { opacity: 1; } 16.4% { opacity: 0; } 94.86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ps-s2 { 0% { opacity: 0; } 11.15% { opacity: 0; } 11.25% { opacity: 1; } 35.69% { opacity: 1; } 35.79% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ps-s3 { 0% { opacity: 0; } 30.55% { opacity: 0; } 35.69% { opacity: 1; } 46.95% { opacity: 1; } 47.05% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ps-s4 { 0% { opacity: 0; } 41.8% { opacity: 0; } 46.95% { opacity: 1; } 66.24% { opacity: 1; } 66.34% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ps-s5 { 0% { opacity: 0; } 61.09% { opacity: 0; } 66.24% { opacity: 1; } 77.49% { opacity: 1; } 77.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ps-s6 { 0% { opacity: 0; } 72.35% { opacity: 0; } 77.49% { opacity: 1; } 88.75% { opacity: 1; } 88.85% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ps-s7 { 0% { opacity: 0; } 83.6% { opacity: 0; } 88.75% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ps-slides > * { animation: none; } .ps-slides > video { display: none; } .ps-slides > .still { opacity: 1; } }
.ms-slides { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; background: var(--ink); }
/* ms-slides: 21 slides, 85.7 s loop, 1.6 s crossfades. Made by make_slideshow_css.py ms 1.6 3.0 4.0 7.6 3.0 3.0 3.0 6.5 3.0 3.0 6.0 3.0 3.0 6.0 3.0 3.0 3.0 6.0 3.0 3.0 3.0 3.0 6.0. HTML order: slides 2..21, then slide 1 last. */
.ms-slides > img, .ms-slides > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: ms-s1 85.7s linear infinite backwards; animation-delay: 3.0s; }
.ms-slides > :nth-child(1) { animation-name: ms-s2; }
.ms-slides > :nth-child(2) { animation-name: ms-s3; }
.ms-slides > :nth-child(3) { animation-name: ms-s4; }
.ms-slides > :nth-child(4) { animation-name: ms-s5; }
.ms-slides > :nth-child(5) { animation-name: ms-s6; }
.ms-slides > :nth-child(6) { animation-name: ms-s7; }
.ms-slides > :nth-child(7) { animation-name: ms-s8; }
.ms-slides > :nth-child(8) { animation-name: ms-s9; }
.ms-slides > :nth-child(9) { animation-name: ms-s10; }
.ms-slides > :nth-child(10) { animation-name: ms-s11; }
.ms-slides > :nth-child(11) { animation-name: ms-s12; }
.ms-slides > :nth-child(12) { animation-name: ms-s13; }
.ms-slides > :nth-child(13) { animation-name: ms-s14; }
.ms-slides > :nth-child(14) { animation-name: ms-s15; }
.ms-slides > :nth-child(15) { animation-name: ms-s16; }
.ms-slides > :nth-child(16) { animation-name: ms-s17; }
.ms-slides > :nth-child(17) { animation-name: ms-s18; }
.ms-slides > :nth-child(18) { animation-name: ms-s19; }
.ms-slides > :nth-child(19) { animation-name: ms-s20; }
.ms-slides > :nth-child(20) { animation-name: ms-s21; }
.ms-slides > :nth-child(21) { animation-name: ms-s1; }
@keyframes ms-s1 { 0% { opacity: 1; } 4.67% { opacity: 1; } 6.53% { opacity: 0; } 98.13% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ms-s2 { 0% { opacity: 0; } 4.57% { opacity: 0; } 4.67% { opacity: 1; } 15.4% { opacity: 1; } 15.50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s3 { 0% { opacity: 0; } 13.54% { opacity: 0; } 15.4% { opacity: 1; } 18.9% { opacity: 1; } 19.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s4 { 0% { opacity: 0; } 17.04% { opacity: 0; } 18.9% { opacity: 1; } 22.4% { opacity: 1; } 22.50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s5 { 0% { opacity: 0; } 20.54% { opacity: 0; } 22.4% { opacity: 1; } 25.9% { opacity: 1; } 26.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s6 { 0% { opacity: 0; } 24.04% { opacity: 0; } 25.9% { opacity: 1; } 33.49% { opacity: 1; } 33.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s7 { 0% { opacity: 0; } 31.62% { opacity: 0; } 33.49% { opacity: 1; } 36.99% { opacity: 1; } 37.09% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s8 { 0% { opacity: 0; } 35.12% { opacity: 0; } 36.99% { opacity: 1; } 40.49% { opacity: 1; } 40.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s9 { 0% { opacity: 0; } 38.62% { opacity: 0; } 40.49% { opacity: 1; } 47.49% { opacity: 1; } 47.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s10 { 0% { opacity: 0; } 45.62% { opacity: 0; } 47.49% { opacity: 1; } 50.99% { opacity: 1; } 51.09% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s11 { 0% { opacity: 0; } 49.12% { opacity: 0; } 50.99% { opacity: 1; } 54.49% { opacity: 1; } 54.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s12 { 0% { opacity: 0; } 52.63% { opacity: 0; } 54.49% { opacity: 1; } 61.49% { opacity: 1; } 61.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s13 { 0% { opacity: 0; } 59.63% { opacity: 0; } 61.49% { opacity: 1; } 64.99% { opacity: 1; } 65.09% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s14 { 0% { opacity: 0; } 63.13% { opacity: 0; } 64.99% { opacity: 1; } 68.49% { opacity: 1; } 68.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s15 { 0% { opacity: 0; } 66.63% { opacity: 0; } 68.49% { opacity: 1; } 72.0% { opacity: 1; } 72.10% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s16 { 0% { opacity: 0; } 70.13% { opacity: 0; } 72.0% { opacity: 1; } 79.0% { opacity: 1; } 79.10% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s17 { 0% { opacity: 0; } 77.13% { opacity: 0; } 79.0% { opacity: 1; } 82.5% { opacity: 1; } 82.60% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s18 { 0% { opacity: 0; } 80.63% { opacity: 0; } 82.5% { opacity: 1; } 86.0% { opacity: 1; } 86.10% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s19 { 0% { opacity: 0; } 84.13% { opacity: 0; } 86.0% { opacity: 1; } 89.5% { opacity: 1; } 89.60% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s20 { 0% { opacity: 0; } 87.63% { opacity: 0; } 89.5% { opacity: 1; } 93.0% { opacity: 1; } 93.10% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ms-s21 { 0% { opacity: 0; } 91.13% { opacity: 0; } 93.0% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ms-slides > * { animation: none; } .ms-slides > video { display: none; } .ms-slides > .still { opacity: 1; } }
.cam-film { margin: 0; background: var(--ink); aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; }
.cam-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-slides { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; background: var(--ink); }
/* gs-slides: 7 slides, 29.6 s loop, 1.6 s crossfades. Made by make_slideshow_css.py gs 1.6 1.0 4.0 4.0 4.0 4.0 4.0 4.0 4.0. HTML order: slides 2..7, then slide 1 last. */
.gs-slides > img, .gs-slides > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: gs-s1 29.6s linear infinite backwards; animation-delay: 1.0s; }
.gs-slides > :nth-child(1) { animation-name: gs-s2; }
.gs-slides > :nth-child(2) { animation-name: gs-s3; }
.gs-slides > :nth-child(3) { animation-name: gs-s4; }
.gs-slides > :nth-child(4) { animation-name: gs-s5; }
.gs-slides > :nth-child(5) { animation-name: gs-s6; }
.gs-slides > :nth-child(6) { animation-name: gs-s7; }
.gs-slides > :nth-child(7) { animation-name: gs-s1; }
@keyframes gs-s1 { 0% { opacity: 1; } 13.51% { opacity: 1; } 18.92% { opacity: 0; } 94.59% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gs-s2 { 0% { opacity: 0; } 13.41% { opacity: 0; } 13.51% { opacity: 1; } 32.43% { opacity: 1; } 32.53% { opacity: 0; } 100% { opacity: 0; } }
@keyframes gs-s3 { 0% { opacity: 0; } 27.03% { opacity: 0; } 32.43% { opacity: 1; } 45.95% { opacity: 1; } 46.05% { opacity: 0; } 100% { opacity: 0; } }
@keyframes gs-s4 { 0% { opacity: 0; } 40.54% { opacity: 0; } 45.95% { opacity: 1; } 59.46% { opacity: 1; } 59.56% { opacity: 0; } 100% { opacity: 0; } }
@keyframes gs-s5 { 0% { opacity: 0; } 54.05% { opacity: 0; } 59.46% { opacity: 1; } 72.97% { opacity: 1; } 73.07% { opacity: 0; } 100% { opacity: 0; } }
@keyframes gs-s6 { 0% { opacity: 0; } 67.57% { opacity: 0; } 72.97% { opacity: 1; } 86.49% { opacity: 1; } 86.59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes gs-s7 { 0% { opacity: 0; } 81.08% { opacity: 0; } 86.49% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gs-slides > * { animation: none; } .gs-slides > .still { opacity: 1; } }
.passion .p-link { margin-top: 16px; font-size: 16px; }
.passion .p-link a { display: inline-block; padding: 9px 16px; border-radius: 4px; background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; }
.passion .p-link a:hover { background: var(--blue-ink); }
.passion .p-link a.ess { display: inline-flex; align-items: center; gap: 12px; background: #8E1B22; color: #FFF6DC; box-shadow: inset 0 0 0 2px #D9A81E; }
.passion .p-link a.ess:hover { background: #6F141A; }
.passion .p-link a.ess .ega { flex: none; width: auto; height: 34px; margin: -6px -4px -6px 0; }
.passion .p-link span { display: inline-block; margin-left: 10px; color: var(--grey); }
/* Download that is not out yet: drawn as a button, outlined so it does not read as a live link. */
.passion .p-link b.dl { display: inline-block; padding: 7px 14px; border: 2px solid var(--ink); border-radius: 4px; color: var(--ink); font-weight: 600; cursor: default; }
.ss-slides { position: relative; margin: 0; overflow: hidden; aspect-ratio: 65 / 44; max-width: 100%; background: var(--ink); }
/* ss-slides: 11 slides, 40.1 s loop, 1.6 s crossfades. Made by make_slideshow_css.py ss 1.6 1.0 3.5 3.5 3.5 3.5 3.5 3.5 3.5 3.5 3.5 3.5 3.5. HTML order: slides 2..11, then slide 1 last. */
.ss-slides > img, .ss-slides > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: ss-s1 40.1s linear infinite backwards; animation-delay: 1.0s; }
.ss-slides > :nth-child(1) { animation-name: ss-s2; }
.ss-slides > :nth-child(2) { animation-name: ss-s3; }
.ss-slides > :nth-child(3) { animation-name: ss-s4; }
.ss-slides > :nth-child(4) { animation-name: ss-s5; }
.ss-slides > :nth-child(5) { animation-name: ss-s6; }
.ss-slides > :nth-child(6) { animation-name: ss-s7; }
.ss-slides > :nth-child(7) { animation-name: ss-s8; }
.ss-slides > :nth-child(8) { animation-name: ss-s9; }
.ss-slides > :nth-child(9) { animation-name: ss-s10; }
.ss-slides > :nth-child(10) { animation-name: ss-s11; }
.ss-slides > :nth-child(11) { animation-name: ss-s1; }
@keyframes ss-s1 { 0% { opacity: 1; } 8.73% { opacity: 1; } 12.72% { opacity: 0; } 96.01% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ss-s2 { 0% { opacity: 0; } 8.63% { opacity: 0; } 8.73% { opacity: 1; } 21.45% { opacity: 1; } 21.55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s3 { 0% { opacity: 0; } 17.46% { opacity: 0; } 21.45% { opacity: 1; } 30.17% { opacity: 1; } 30.27% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s4 { 0% { opacity: 0; } 26.18% { opacity: 0; } 30.17% { opacity: 1; } 38.9% { opacity: 1; } 39.00% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s5 { 0% { opacity: 0; } 34.91% { opacity: 0; } 38.9% { opacity: 1; } 47.63% { opacity: 1; } 47.73% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s6 { 0% { opacity: 0; } 43.64% { opacity: 0; } 47.63% { opacity: 1; } 56.36% { opacity: 1; } 56.46% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s7 { 0% { opacity: 0; } 52.37% { opacity: 0; } 56.36% { opacity: 1; } 65.09% { opacity: 1; } 65.19% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s8 { 0% { opacity: 0; } 61.1% { opacity: 0; } 65.09% { opacity: 1; } 73.82% { opacity: 1; } 73.92% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s9 { 0% { opacity: 0; } 69.83% { opacity: 0; } 73.82% { opacity: 1; } 82.54% { opacity: 1; } 82.64% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s10 { 0% { opacity: 0; } 78.55% { opacity: 0; } 82.54% { opacity: 1; } 91.27% { opacity: 1; } 91.37% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ss-s11 { 0% { opacity: 0; } 87.28% { opacity: 0; } 91.27% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-slides > * { animation: none; } .ss-slides > .still { opacity: 1; } }
.sdr-shots { display: flex; justify-content: center; gap: clamp(12px, 2vw, 24px); margin: 0; padding: clamp(16px, 2.4vw, 28px); background: var(--ink); }
.sdr-shots img { width: min(46%, 240px); height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

/* ---- the part envelope, drawn ------------------------------------------ */

.envelope { padding: clamp(10px, 2vw, 26px); background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--line-strong); }
.envelope svg { display: block; width: 100%; height: auto; }
.dw-face { fill: var(--sheet); stroke: none; }
.dw-top { fill: #DDE0E3; stroke: none; }
.dw-solid { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linejoin: round; }
/* the machinist, for scale: 72 in tall at the drawing's 4 px per inch */
.dw-man * { stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.m-skin { fill: #E2B690; }
.m-hair { fill: #3A2F28; }
.m-shirt { fill: #B3BBC3; }
.m-collar, .m-face { fill: none; }
.m-pants { fill: #474D54; }
.m-boot { fill: var(--ink); }
.m-apron { fill: var(--blue-ink); }
.dw-man .m-strap { fill: none; stroke: var(--blue-ink); stroke-width: 3.2; }
.dw-man .m-stitch { fill: none; stroke: #9CC6EA; stroke-width: 1.1; }
.dw-man .m-pencil { stroke: #E0B23C; stroke-width: 2.2; }
.dw-man .m-limb-o { fill: none; stroke: var(--ink); stroke-width: 15; }
.dw-man .m-limb-skin { fill: none; stroke: #E2B690; stroke-width: 12.4; }
.dw-man .m-limb-sleeve { fill: none; stroke: #B3BBC3; stroke-width: 12.4; }
.m-lens { fill: rgba(190, 220, 245, .55); }
.dw-man .m-eye { fill: var(--ink); stroke: none; }
.dw-part { fill: #D7E6F3; stroke: var(--blue-ink); stroke-width: 1.4; stroke-linejoin: round; }
.dw-part .dw-bore { fill: #9FC3E3; }
.dw-part .dw-wall-r { fill: #B9D2EA; }
.dw-part .dw-wall-l { fill: #A3C2E0; }
.dw-part .dw-flat { fill: #E6F0F9; }
.dw-part .dw-cyl { fill: #BFD7EC; }
.dw-part .dw-cyl-top { fill: #EEF5FB; }
.dw-hidden { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 5; opacity: .4; }
/* the machine table and its base */
.dw-base polygon { fill: #E2E5E8; stroke: #8C939A; stroke-width: 1.1; stroke-linejoin: round; }
.dw-table polygon { fill: #B9BFC6; stroke: var(--grey); stroke-width: 1.1; stroke-linejoin: round; }
.dw-table .dw-table-top { fill: #D3D7DB; }
.dw-slot line { stroke: #7C838A; stroke-width: 2.2; }
.dw-notch rect { fill: #5A6067; }
.dw-dim { fill: none; stroke: var(--blue-ink); stroke-width: 1.4; }
.dw-dot { fill: var(--blue-ink); }
.dw-text { font-family: var(--mono); font-size: 21px; font-weight: 700; fill: var(--ink); }
.dw-small { font-family: var(--mono); font-size: 16px; fill: var(--grey); }
.dw-tiny rect, .dw-tiny ellipse, .dw-tiny polygon { fill: #BFD7EC; stroke: var(--blue-ink); stroke-width: 1; stroke-linejoin: round; }
.dw-leader { stroke: var(--blue-ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dw-loupe-ring { fill: var(--white); stroke: var(--ink); stroke-width: 2.25; }
.dw-loupe-tail { fill: var(--white); stroke: var(--ink); stroke-width: 2.25; stroke-linejoin: round; }
.dw-loupe-tail-fill { fill: var(--white); }
.dw-loupe-metal { fill: #BFD7EC; }
.dw-loupe-edge { fill: none; stroke: var(--blue-ink); stroke-width: 1.4; stroke-linejoin: round; }
.dw-tol { stroke: var(--blue-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.dw-bact .bb { fill: #9CCB66; stroke: #4E7A2A; stroke-width: .8; }
.dw-bact .bo { fill: none; stroke: #4E7A2A; stroke-width: .6; opacity: .75; }
.dw-bact .bo2 { fill: #4E7A2A; opacity: .7; }
.dw-bact .bf { fill: none; stroke: #4E7A2A; stroke-width: .5; stroke-linecap: round; }
.dw-bact .ba { fill: var(--blue-ink); stroke: #163F66; stroke-width: .35; }
.dw-bact .bs { fill: none; stroke: var(--blue-ink); stroke-width: .5; }
.dw-bact .bp { stroke: var(--ink); stroke-width: .45; }
.dw-bact .bflag { fill: var(--ink); }
.dw-bact .bflag-t { font-family: var(--display); font-weight: 700; font-size: 3px; fill: #fff; letter-spacing: .02em; }
.dw-bact .be { fill: var(--ink); }
.dw-bact .bm { fill: none; stroke: var(--ink); stroke-width: .55; stroke-linecap: round; }
.dw-pocket .dw-pocket-floor { fill: #CFE0F0; }
.dw-pocket .dw-pocket-wall-a { fill: #9FC3E3; }
.dw-pocket .dw-pocket-wall-b { fill: #B9D2EA; }
.dw-pocket .dw-pocket-rim { fill: none; }
.dw-fly .fb { fill: #3A3F45; stroke: var(--ink); stroke-width: 1; }
.dw-fly .fh { fill: #4A5057; stroke: var(--ink); stroke-width: 1; }
.dw-fly .fs { fill: none; stroke: var(--ink); stroke-width: .8; opacity: .6; }
.dw-fly .fe { fill: #B3362C; stroke: var(--ink); stroke-width: .8; }
.dw-fly .fe2 { fill: #fff; }
.dw-fly .fw { fill: #D7E6F3; fill-opacity: .55; stroke: var(--blue-ink); stroke-width: .9; }
.dw-fly .fa, .dw-fly .fl, .dw-fly .fm { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.dw-fly .fz { fill: none; stroke: var(--grey); stroke-width: .8; stroke-dasharray: 2 2; }
.dw-hand .h-palm, .dw-hand .h-fing { fill: #E2B690; stroke: var(--ink); stroke-width: 1.6; }
.dw-hand .h-cuff { fill: #B3BBC3; stroke: var(--ink); stroke-width: 1.6; }
.dw-hand .h-line { fill: none; stroke: var(--ink); stroke-width: .9; opacity: .5; }
.dw-foot-mark { fill: none; stroke: var(--rush); stroke-width: 1.6; }
.dw-foot .ft { fill: #3A3F45; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.dw-foot .fh2 { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.dw-foot .fc { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dw-foot .fp { fill: #6E757D; stroke: var(--ink); stroke-width: 1; }
.dw-rule line { stroke: var(--blue-ink); stroke-width: 1.6; }
.dw-rule-t { font-family: var(--mono); font-size: 12px; fill: var(--blue-ink); }
.dw-rule-b { font-weight: 700; font-size: 14px; }
.dw-speck { fill: var(--ink); }
.dw-zoom line { stroke: var(--grey); stroke-width: 1; stroke-dasharray: 4 4; }
.dw-loupe-small { font-size: 15px; fill: var(--grey); }
.dw-loupe-text { font-family: var(--mono); font-size: 19px; fill: var(--ink); }
.dw-loupe-b { font-weight: 700; font-size: 24px; }
.dw-loupe-metal-t { fill: var(--blue-ink); }
.spec-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--line-strong); }
.spec-list li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec-list b { font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-ink); }
.spec-list span { font-family: var(--display); font-stretch: 75%; font-size: clamp(28px, 2.8vw, 40px); font-weight: 700; line-height: 1.04; }
@media (min-width: 960px) { .grid.even { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (min-width: 960px) { .grid.envelopes { grid-template-columns: 11fr 6fr; gap: clamp(24px, 3vw, 48px); align-items: center; } .grid.envelopes .spec-list span { font-size: clamp(26px, 2.4vw, 34px); } }
.loupe-fig { width: 100%; }
.spec-list li.has-fig { grid-template-columns: 1fr auto; grid-template-areas: "b f" "s f" "i f"; align-items: center; column-gap: 16px; }
.spec-list li.has-fig b { grid-area: b; } .spec-list li.has-fig span { grid-area: s; } .spec-list li.has-fig i { grid-area: i; }
.spec-list .bugs { grid-area: f; width: clamp(170px, 16vw, 218px); height: auto; margin: -6px 0; }
.spec-list .bugs .dw-bugs-t { font-size: 9px; }
.spec-list i { font-style: normal; font-family: var(--mono); font-size: 15px; color: var(--grey); }

.gallery.nofig figcaption::before { content: none; }

/* ---- home: quality and records, one compact ruled block ---------------- */

section.compact { padding: clamp(36px, 4.6vw, 64px) 0; }
.qgrid { display: grid; background: var(--white); border-top: 2px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.qgrid > div { padding: 16px 20px 18px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.qgrid h3 { font-family: var(--display); font-stretch: 75%; font-size: 23px; text-transform: uppercase; line-height: 1; letter-spacing: .01em; }
.qgrid p { margin: 7px 0 0; font-size: 15.5px; line-height: 1.38; color: var(--grey); }
@media (min-width: 620px) { .qgrid { grid-template-columns: 1fr 1fr; } .qgrid .wide { grid-column: span 2; } }
@media (min-width: 1000px) { .qgrid { grid-template-columns: repeat(4, 1fr); } }
.qgrid.three { grid-template-columns: 1fr; border-left: 0; }
.qgrid.three > div { border-right: 0; }
.qsplit { align-items: stretch; }
.qphoto { margin: 0; background: var(--ink); }
.qphoto img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 960px) { .qphoto img { aspect-ratio: auto; min-height: 100%; } }
.compact .ruled { margin-bottom: 16px; }
.qgrid { border-top-width: 1px; }

/* ---- phone-width refinements ------------------------------------------- */

@media (max-width: 959px) {
	/* the list comes before its photograph */
}
@media (max-width: 700px) {
	/* on a phone the two drawings run edge to edge on a dark band, with larger lettering */
	.grid.envelopes { gap: 0; }
	.grid.envelopes .envelope { margin: 0 calc(-1 * var(--pad)); padding: 14px 10px 10px; border: 0; border-top: 3px solid var(--blue); background: var(--white); }
	.grid.envelopes .env-copy { padding: 26px 0 30px; }
	.grid.envelopes .env-copy h2 { font-size: 34px; }
	.grid.envelopes .spec-list li { padding: 12px 0; }
	.grid.envelopes .spec-list span { font-size: 30px; }
	.dw-text { font-size: 24px; }
	.dw-small { font-size: 18px; }
	.dw-mm { display: none; }   /* the two slanted labels show inches only; millimetres are on the home page */
	.dw-loupe-text { font-size: 23px; }
	.dw-loupe-b { font-size: 29px; }
	.dw-loupe-small { font-size: 21px; }
	.dw-rule-t { font-size: 15px; }
	.dw-rule-b { font-size: 18px; }
}
@media (min-width: 340px) {
	.figures.facts, .strip { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) { .strip { grid-template-columns: repeat(4, 1fr); } .strip.five { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1100px) { .figures.facts.three { grid-template-columns: repeat(3, 1fr); } }
.strip li, .figures.facts div { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 520px) {
	.strip li { padding: 16px 14px 18px; font-size: 18px; }
	.figures.facts div { padding: 18px 14px 16px; }
	.figures.facts dd { font-size: 18px; }
	.figures.facts dd.code { font-size: 16px; white-space: nowrap; }
}
@media (max-width: 1099px) { .figures.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.banner .crumb { margin: 14px 0 0; font-size: 15px; }
.banner .crumb a { color: var(--sky); }
.story p { margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: var(--grey); max-width: 40em; }
.story p:first-child { font-size: 21px; color: var(--ink); }
.strip.docs li img { display: block; width: 100%; height: auto; margin: 0 0 14px; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(14, 16, 18, .12); background: #fff; }
.supplier .sub span { margin-left: 10px; font-family: var(--body); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--grey); }
.figures.facts.mini { max-width: 780px; grid-template-columns: 1fr 1fr; border-top-width: 1px; }
@media (min-width: 640px) { .figures.facts.mini { grid-template-columns: repeat(3, 1fr); } }
.figures.facts.mini div { padding: 9px 12px 10px; }
.figures.facts.mini dt { font-size: 10px; }
.figures.facts.mini dd { margin-top: 3px; font-size: 14px; line-height: 1.25; }
/* footer, compact (8 Oct): supplier block only, no page list, one row on desktop */
.foot { padding-top: 22px !important; padding-bottom: 22px !important; }
.tb > * { padding: 8px 12px; }
.tb span { margin-bottom: 3px; font-size: 9px; }
.tb b { font-size: 13px; }
.tb b.code { font-size: 12px; }
.tb address { font-size: 12px; line-height: 1.45; }
.tb address b { font-size: 13px; }
.tb-logo img { height: 30px; width: auto; }
.tb-fb, .tb-status { grid-column: 1 / -1; }
.tb-fb { display: flex; align-items: center; }
.tb-fb a.fb { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 10px 4px; background: var(--blue); color: #fff; font-family: var(--display); font-stretch: 75%; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.tb-fb a.fb:hover { background: var(--sky); color: var(--ink); }
.tb-fb a.fb small { font-family: var(--body); font-stretch: 100%; font-size: 9px; font-weight: 400; letter-spacing: 0; text-transform: none; }
@media (min-width: 1100px) {
	.tb { grid-template-columns: auto minmax(180px, 1.3fr) repeat(4, auto) 1fr auto; }
	.tb-logo, .tb-wide, .tb-status, .tb-fb { grid-column: auto; grid-row: auto; }
	.tb > * { display: flex; flex-direction: column; justify-content: center; }
}
/* stats (8 Oct): no tall rush tile beside short tiles. Three white tiles in a
   row, the rush tile full width under them with the sign on its right. */
@media (min-width: 0px) {
	.stats { grid-template-columns: repeat(3, 1fr); }
	.stats .is-rush { grid-column: 1 / -1; min-height: 160px; padding-bottom: clamp(20px, 2.4vw, 34px); padding-right: calc(min(190px, 40%) + 18px);
		background: linear-gradient(90deg, var(--ink) 0 52%, rgba(14, 16, 18, 0) 70%), var(--ink) var(--rush-sign) right 12px center / auto min(170px, 40vw) no-repeat; }
	.stats .is-rush dd b { font-size: clamp(22px, 2.4vw, 34px); }
}
@media (max-width: 599px) {
	.stats { grid-template-columns: 1fr 1fr; }
	.stats > div:nth-child(3) { grid-column: 1 / -1; }
}
.passion-head { margin-top: clamp(28px, 4vw, 56px); }
.passion-head p { color: var(--grey); }
@media (min-width: 900px) { .passion:not(.owner) .p-row:nth-child(odd) figure { order: -1; } .passion:not(.owner) .p-row:nth-child(even) figure { order: 0; } }
.passion.owner { padding-top: 0; }
/* five menu items (8 Oct): keep them on one line on phones */
@media (max-width: 520px) { .nav { gap: 0 4px; } .nav a { font-size: 15px; letter-spacing: .02em; padding-left: 0; padding-right: 0; } }
@media (max-width: 360px) { .nav a { font-size: 13px; } }
/* times on Capabilities (8 Oct): lead time no longer sits in a tall empty box.
   Lead time is a short full-width row; the rush row runs full width under it with the sign on its right. */
.times { grid-template-columns: 1fr !important; }
.times .std { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.times .std b { margin: 0; }
.times .rush { border-left: 0 !important; border-top: 1px solid var(--line-rev) !important; min-height: 200px; padding-right: calc(min(240px, 42%) + 24px) !important; padding-bottom: clamp(22px, 2.6vw, 34px) !important; display: flex; flex-direction: column; justify-content: center;
	background: linear-gradient(90deg, var(--ink) 0 50%, rgba(14, 16, 18, 0) 68%), var(--ink) var(--rush-sign) right 16px center / auto min(220px, 46vw) no-repeat !important; }
@media (max-width: 520px) { .times .rush { padding-right: 46% !important; background-size: auto, auto 150px !important; background-position: 0 0, right 8px center !important; } }
.iso-note { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--white); font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 38em; }
.iso-note b { color: var(--blue-ink); }

/* ---- 8 Oct: record previews fade out at the bottom, bigger titles (Daniel) ---- */
.strip.docs li img { margin-bottom: 4px; box-shadow: none; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
.strip.docs li { font-family: var(--display); font-stretch: 75%; font-size: clamp(24px, 2.2vw, 31px); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
@media (max-width: 519px) { .strip.docs li { font-size: 24px; } }

/* ---- 8 Oct: Quality and Confidentiality, Technology Control Plan block ---- */
.conf { align-items: start; }
.conf .lead-copy + .lead-copy { margin-top: 14px; }
.conf .iso-note { margin-top: 0; }
.strip.docs li small { display: block; margin-top: 10px; line-height: 1.45; font-family: var(--mono); font-stretch: normal; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--blue-ink); }

/* ---- 8 Oct: menu says "Quality and Confidentiality" (Daniel). One line when there is room;
   below that the long item stacks on two lines and the rest stay on one ---- */
.nav { align-items: center; }
.nav a { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 1380px) { .nav-qc .qc-c { display: block; margin-top: 2px; } }
@media (max-width: 1380px) and (min-width: 1201px) { .nav { gap: 6px 28px; } }
@media (max-width: 1200px) and (min-width: 1121px) { .nav { gap: 6px 22px; } .top .wrap { gap: 12px 28px; } }
@media (max-width: 1120px) and (min-width: 901px) { .nav { gap: 6px 16px; } .nav a { font-size: 18px; letter-spacing: .04em; } .top .wrap { gap: 12px 20px; } }
@media (max-width: 900px) { .nav-qc { padding-top: 6px !important; padding-bottom: 6px !important; } }
@media (max-width: 1120px) and (min-width: 901px) { .top .brand img { height: 38px; } .top .btn { padding: 10px 14px 8px; font-size: 17px; min-width: 0; } }
/* Confidentiality, 8 Oct: "We trust no one." and the three service-security lines */
.ruled p.trust { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); text-transform: uppercase; letter-spacing: .03em; color: var(--blue-ink); }
.conf .sub { margin-top: 0; }
ul.sec { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 38em; }
ul.sec li { position: relative; padding-left: 22px; }
ul.sec li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--blue); }
ul.sec b { font-weight: 700; }
.conf ul.sec + .iso-note { margin-top: 22px; }

/* ---- 8 Oct: footer Facebook link in the bar's own colours, not the blue button (Daniel).
   Same size: the 1px border is taken out of the padding. The Facebook mark goes in when
   Daniel drops Meta's official logo file (white or black version) into images\logo ---- */
.tb-fb a.fb { padding: 4px 9px 3px; background: transparent; color: var(--white); border: 1px solid var(--line-rev); }
.tb-fb a.fb small { color: var(--grey-rev); }
.tb-fb a.fb:hover, .tb-fb a.fb:focus-visible { background: transparent; color: var(--sky); border-color: var(--sky); }
.tb-fb a.fb:hover small, .tb-fb a.fb:focus-visible small { color: var(--sky); }

/* ---- 8 Oct: small pictures in the blank space of the three home stat tiles (Daniel):
   machinist beside the part envelope, five bacteria = 10 microns, a calendar with two weeks
   crossed off in red. Text left, picture right; on phones the picture sits under the text ---- */
.stats > div:has(.st-fig) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t f" "d f"; column-gap: 14px; align-items: start; align-content: start; }
.stats > div:has(.st-fig) dt { grid-area: t; }
.stats > div:has(.st-fig) dd { grid-area: d; }
.stats .st-fig { grid-area: f; align-self: center; height: auto; }
.stats .st-env { width: clamp(110px, 10vw, 146px); }
.stats .st-bugs { width: clamp(96px, 9.6vw, 132px); }
.stats .st-bugs .dw-bugs-t { font-size: 12px; } .stats .st-bugs { overflow: visible; }
.stats .st-cal { width: clamp(58px, 5.4vw, 74px); }
.st-cal .cal-p { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.st-cal .cal-h { fill: var(--blue-ink); stroke: var(--ink); stroke-width: 1.4; }
.st-cal .cal-r { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.st-cal .cal-d { fill: #DADFE3; }
.st-cal .cal-x { stroke: var(--rush); stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 1100px) { .stats > div:has(.st-fig) { grid-template-columns: 1fr; grid-template-areas: "t" "d" "f"; } .stats .st-fig { align-self: start; justify-self: start; margin-top: 12px; } }
@media (max-width: 599px) { .stats > div:nth-child(3):has(.st-fig) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t f" "d f"; } .stats > div:nth-child(3) .st-fig { margin-top: 0; align-self: center; } }
.stats .st-env { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
/* the machinist picture on Home is a link to the drawing on Capabilities (Daniel) */
.stats a.st-link { display: block; line-height: 0; border-radius: 4px; transition: transform .15s ease; }
.stats a.st-link .st-env { display: block; }
.stats a.st-link:hover, .stats a.st-link:focus-visible { transform: scale(1.06); }
.stats a.st-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (max-width: 900px) { html { scroll-padding-top: 124px; } }
/* Facebook mark in the footer link (Daniel's icon, made one-colour; it takes the link colour, sky on hover) */
.tb-fb a.fb { flex-direction: row; align-items: center; gap: 8px; }
.tb-fb a.fb > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tb-fb .fb-mark { flex: 0 0 auto; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: url("/img/fb-mark.png") center / contain no-repeat; mask: url("/img/fb-mark.png") center / contain no-repeat; }
/* Facebook link, 8 Oct later: bigger mark, follower count readable (Daniel) */
.tb-fb a.fb { gap: 10px; padding: 5px 12px 5px 7px; }
.tb-fb .fb-mark { width: 34px; height: 34px; }
.tb-fb a.fb > span { gap: 4px; font-size: 16px; }
.tb-fb a.fb small { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--white); }
.tb-fb a.fb > span { margin: 0; color: inherit; font-family: var(--display); font-stretch: 75%; font-size: 17px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }

/* ---- 8 Oct: About Us, 05 Marksmanship slideshow (Daniel's photos, Our Passion\Marksmanship) ---- */
.mk-slides { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; background: var(--ink); }
/* mk-slides: 9 slides, 42.1 s loop, 1.6 s crossfades. Made by make_slideshow_css.py mk 1.6 1.0 3.5 7.5 3.5 3.5 6.5 3.5 3.5 5.5 3.5. HTML order: slides 2..9, then slide 1 last. */
.mk-slides > img, .mk-slides > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: mk-s1 42.1s linear infinite backwards; animation-delay: 1.0s; }
.mk-slides > :nth-child(1) { animation-name: mk-s2; }
.mk-slides > :nth-child(2) { animation-name: mk-s3; }
.mk-slides > :nth-child(3) { animation-name: mk-s4; }
.mk-slides > :nth-child(4) { animation-name: mk-s5; }
.mk-slides > :nth-child(5) { animation-name: mk-s6; }
.mk-slides > :nth-child(6) { animation-name: mk-s7; }
.mk-slides > :nth-child(7) { animation-name: mk-s8; }
.mk-slides > :nth-child(8) { animation-name: mk-s9; }
.mk-slides > :nth-child(9) { animation-name: mk-s1; }
@keyframes mk-s1 { 0% { opacity: 1; } 8.31% { opacity: 1; } 12.11% { opacity: 0; } 96.2% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mk-s2 { 0% { opacity: 0; } 8.21% { opacity: 0; } 8.31% { opacity: 1; } 29.93% { opacity: 1; } 30.03% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-s3 { 0% { opacity: 0; } 26.13% { opacity: 0; } 29.93% { opacity: 1; } 38.24% { opacity: 1; } 38.34% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-s4 { 0% { opacity: 0; } 34.44% { opacity: 0; } 38.24% { opacity: 1; } 46.56% { opacity: 1; } 46.66% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-s5 { 0% { opacity: 0; } 42.76% { opacity: 0; } 46.56% { opacity: 1; } 62.0% { opacity: 1; } 62.10% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-s6 { 0% { opacity: 0; } 58.19% { opacity: 0; } 62.0% { opacity: 1; } 70.31% { opacity: 1; } 70.41% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-s7 { 0% { opacity: 0; } 66.51% { opacity: 0; } 70.31% { opacity: 1; } 78.62% { opacity: 1; } 78.72% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-s8 { 0% { opacity: 0; } 74.82% { opacity: 0; } 78.62% { opacity: 1; } 91.69% { opacity: 1; } 91.79% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-s9 { 0% { opacity: 0; } 87.89% { opacity: 0; } 91.69% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mk-slides > * { animation: none; } .mk-slides > .still { opacity: 1; } }

/* ---- 8 Oct: running text on the light pages a shade darker so it stands off the G-code
   background (Daniel: "make it pop a tad more"). Captions and small notes stay grey ---- */
:root { --copy: #262B30; }
.lead-copy, .story p, .passion p { color: var(--copy); }
.story p:first-child { color: var(--ink); }

/* ---- 8 Oct: the lead-time calendar on Home opens a bubble with the date four weeks out
   (hover on desktop, tap on phones; js/leadtime.js fills the date) ---- */
.cal-wrap { position: relative; display: block; }
.cal-btn { display: block; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; transition: transform .15s ease; }
.cal-btn:hover, .cal-wrap.open .cal-btn { transform: scale(1.06); }
.cal-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.cal-btn .st-cal { display: block; }
/* GET IT BY + date under the calendar (leadtime.js fills the date; without script it reads GET IT IN 4 WEEKS). */
.cal-due { display: block; margin-top: 7px; color: var(--ink); font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 13px; line-height: 1.05; letter-spacing: .03em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.cal-due b { display: block; margin-top: 2px; color: var(--blue-ink); font-size: 19px; letter-spacing: .01em; }
.cal-tip { position: absolute; z-index: 20; right: -8px; bottom: calc(100% + 12px); width: 236px; padding: 12px 14px 13px; background: var(--ink); color: var(--white); border-top: 3px solid var(--sky); box-shadow: 0 14px 34px rgba(14, 16, 18, .35); font-size: 15px; line-height: 1.35; text-align: left; text-transform: none; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; }
.cal-tip b { color: var(--sky); font-weight: 700; white-space: nowrap; }
.cal-tip::after { content: ""; position: absolute; right: 32px; top: 100%; border: 8px solid transparent; border-top-color: var(--ink); }
.cal-wrap:hover .cal-tip, .cal-wrap.open .cal-tip, .cal-btn:focus-visible + .cal-tip { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1100px) and (min-width: 600px) { .cal-tip { right: auto; left: -8px; } .cal-tip::after { right: auto; left: 28px; } }

/* ---- 8 Oct: Home, hero to stats to "Direct access": no grey gap with G-code between two
   black bands (Daniel: "very awkward, needs some kind of transition"). The stats sit on a
   black band of their own that carries on from the hero, and the white panel rides up over
   the bottom edge of the hero with a shadow, so the page reads as one piece ---- */
.stats-band { position: relative; z-index: 3; background: var(--ink) url("/img/chips-tile.jpg") repeat; background-size: 800px 550px; padding-bottom: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line-rev); }
.stats-band .stats { position: relative; margin-top: calc(-1 * clamp(26px, 3.4vw, 52px)); box-shadow: 0 22px 60px rgba(0, 0, 0, .55); border-bottom: 0; }
.stats-band .stats .is-rush { border-top: 1px solid var(--line-rev); }
.hero.split .split-copy { padding-bottom: calc(clamp(44px, 6.4vw, 96px) + clamp(26px, 3.4vw, 52px)); }
@media (min-width: 900px) { .hero .scroll-cue { bottom: calc(22px + clamp(26px, 3.4vw, 52px)); } }

/* ---- 8 Oct: About Us 01, the DonkeyCAM desktop icon beside the heading (Daniel) ---- */
.p-title { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.p-title h2 { margin: 0 !important; }
.p-icon { flex: 0 0 auto; width: clamp(64px, 6vw, 88px); height: auto; filter: drop-shadow(0 6px 12px rgba(14, 16, 18, .3)); }
.p-icon { width: clamp(96px, 10vw, 150px); }
.p-title { gap: clamp(14px, 1.6vw, 22px); }
/* About Us, Paramotoring punchline in bold (Daniel) */
.passion p b.punch { font-weight: 700; color: var(--ink); }

/* the HOT PARTS NOW sign picture, used by the rush rows on Home and Capabilities */
:root { --rush-sign: url("/img/rush-neon.jpg"); }
.passion p b.punch { display: block; margin-top: .9em; font-size: 1.15em; line-height: 1.35; }
/* rush line bigger (Daniel, 8 Oct) */
.stats .is-rush dd b { font-size: clamp(28px, 3.5vw, 50px) !important; line-height: 1.02; }
.times .rush { font-size: clamp(32px, 3.8vw, 56px); }
@media (max-width: 599px) { .stats .is-rush dd b { font-size: 26px !important; } }
/* footer without the Status cell (8 Oct): Facebook link sits at the right end */
@media (min-width: 1100px) { .tb { grid-template-columns: auto minmax(180px, 1.3fr) repeat(4, auto) 1fr; } .tb > .tb-fb { justify-content: center; align-items: flex-end; } }
/* phones and tablets (8 Oct, Daniel): the menu item just says "Quality" */
@media (max-width: 900px) { .nav-qc .qc-and, .nav-qc .qc-c { display: none !important; } .nav-qc { padding-top: 12px !important; padding-bottom: 10px !important; } }