/* Firing Order: sealed concrete, ink, and one coolant pink. Every band is set on its own recording. */
@font-face {
  font-family: "Finlandica Headline FO";
  src: url("/assets/fonts/specimen/finlandica-headline-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Finlandica Text FO";
  src: url("/assets/fonts/specimen/finlandica-text-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body.spec-firing-order { margin: 0; background: #C4C1BA; }

.fo-site {
  --fo-concrete: #C4C1BA;
  --fo-well: #D3D0CA;
  --fo-ink: #111214;
  --fo-coolant: #E8157E;
  --fo-white: #FFFFFF;
  --fo-ink-60: #3A3B3E;
  --fo-head: "Finlandica Headline FO", "Arial Narrow", Arial, system-ui, sans-serif;
  --fo-text: "Finlandica Text FO", "Arial Narrow", Arial, system-ui, sans-serif;
  --fo-m: clamp(16px, 5vw, 88px);
  --fo-gut: 24px;
  --fo-nav-h: 56px;
  --fo-top: calc(var(--bar-h, 40px) + var(--fo-nav-h));
  /* the piston is the easing: travel over half a turn of a slider-crank, rod ratio 0.3 */
  --fo-crank: linear(0, 0.006, 0.024, 0.053, 0.093, 0.143, 0.2, 0.263, 0.331, 0.401, 0.473, 0.543, 0.611, 0.676, 0.736, 0.791, 0.84, 0.882, 0.918, 0.948, 0.971, 0.987, 0.997, 1);
  background: var(--fo-concrete);
  color: var(--fo-ink);
  font-family: var(--fo-text);
  font-size: clamp(16.5px, .2vw + 15.7px, 18.5px);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.fo-site *, .fo-site *::before, .fo-site *::after { box-sizing: border-box; }
.fo-site img { display: block; max-width: 100%; height: auto; }
.fo-site a { color: inherit; }
.fo-site :focus-visible { outline: 3px solid var(--fo-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fo-white); }
.fo-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.fo-wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--fo-m); box-sizing: content-box !important; }
@media (max-width: 700px) { .fo-site { --fo-gut: 16px; } }

/* a recording: one fine line, edge to edge */
.fo-trace { display: block; width: 100%; height: var(--fo-th, 120px); overflow: visible; pointer-events: none; }
.fo-trace path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* ── nav: over the photograph at first, then concrete ─────────────────────────────── */
.fo-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 800;
  display: flex; align-items: center; gap: 28px;
  height: var(--fo-nav-h); margin-bottom: calc(-1 * var(--fo-nav-h)); padding: 0 var(--fo-m);
  background: rgba(10, 11, 12, .5); color: var(--fo-white);
  transition: background-color 180ms, color 180ms;
}
.fo-site:not(.fo-js) .fo-nav, .fo-nav.fo-nav-solid { background: var(--fo-concrete); color: var(--fo-ink); }
.fo-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.fo-mark { width: 28px; height: 28px; display: block; flex: none; }
.fo-brand-name { font-family: var(--fo-head); font-weight: 800; font-size: 19px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.fo-nav-list { display: flex; gap: 26px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.fo-nav-list a, .fo-nav-cta { text-decoration: none; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 180ms var(--fo-crank); }
.fo-nav-list a { font-weight: 500; font-size: 15px; padding: 6px 0; }
.fo-nav-list a:hover, .fo-nav-cta:hover { background-size: 100% 1.5px; }
.fo-nav-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-family: var(--fo-head); font-weight: 850; font-size: 19px; letter-spacing: -.005em; }
.fo-blip { width: 34px; height: 16px; flex: none; }
.fo-blip path { fill: none; stroke: var(--fo-coolant); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.fo-cta-short { display: none; }
@media (max-width: 860px) {
  .fo-nav { gap: 12px; }
  .fo-nav-list { display: none; }
  .fo-nav-cta { margin-left: auto; }
}
@media (max-width: 359px) {
  .fo-cta-long { display: none; }
  .fo-cta-short { display: inline; }
}

/* ── hero: start the engine and watch the belt ─────────────────────────────────────────────── */
.fo-bay {
  position: relative; display: grid; grid-template-rows: minmax(260px, 1fr) auto;
  min-height: calc(100svh - var(--bar-h, 40px));
  background: var(--fo-concrete); outline: none;
}
.fo-stage { position: relative; overflow: hidden; overflow: clip; container-type: size; background: #0C0D0E; touch-action: pan-y; }
.fo-js .fo-bay:not(.fo-running) .fo-stage { cursor: pointer; }
.fo-frame {
  --fo-ar: 1.7778; --fo-ox: .5; --fo-oy: .34;
  --fo-fw: max(100cqw, calc(100cqh * var(--fo-ar)));
  --fo-fh: max(100cqh, calc(100cqw / var(--fo-ar)));
  position: absolute; width: var(--fo-fw); height: var(--fo-fh);
  left: calc((100cqw - var(--fo-fw)) * var(--fo-ox));
  top: calc((100cqh - var(--fo-fh)) * var(--fo-oy));
}
.fo-frame picture, .fo-bay-img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; }
.fo-master { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fo-contour { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fo-contour-line { fill: none; stroke: var(--fo-coolant); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(232, 21, 126, .8)); }
.fo-found-on .fo-contour-line { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--fo-crank); }
.fo-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 11, 12, .72) 0, rgba(10, 11, 12, .32) 90px, rgba(10, 11, 12, 0) 170px), linear-gradient(0deg, rgba(10, 11, 12, .35) 0, rgba(10, 11, 12, 0) 90px); }

/* the four pulleys: white rings, pink on the one you're on and the worn one, a tick once checked */
.fo-run { position: absolute; left: 73.242%; top: 38.194%; width: 14.648%; height: 49.479%; pointer-events: none; }
.fo-part { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: max(44px, calc(var(--w) * 1%)); height: max(44px, calc(var(--h) * 1%)); transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fo-white); cursor: pointer; z-index: 2; }
.fo-part::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--fo-white); opacity: .6; transition: inset 180ms var(--fo-crank), border-width 180ms, opacity 180ms; }
.fo-part:hover::after, .fo-part:focus-visible::after, .fo-part.fo-on::after, .fo-part.fo-hot::after, .fo-site:not(.fo-js) .fo-part-bad::after { inset: -8px; border: 3px solid var(--fo-coolant); opacity: 1; box-shadow: 0 0 10px rgba(232, 21, 126, .55); }
.fo-part.fo-ok::after { opacity: 1; }
.fo-part.fo-ok::before { content: "\2713"; position: absolute; left: -14px; top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: var(--fo-white); color: var(--fo-ink); font: 800 13px/20px var(--fo-text); }
.fo-busy .fo-part:not(.fo-part-bad) { opacity: .3; pointer-events: none; }
.fo-part-cap { position: absolute; top: 50%; width: 15em; transform: translateY(-50%); font-family: var(--fo-text); font-size: 15px; line-height: 1.35; font-weight: 500; text-align: left; color: var(--fo-white); text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .9); pointer-events: none; }
.fo-part-cap b { display: block; font-family: var(--fo-head); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.fo-cap-l { right: calc(100% + 14px); text-align: right; }
.fo-cap-r { left: calc(100% + 12px); top: 12%; }
.fo-cap-u { left: 50%; top: auto; bottom: calc(100% + 10px); transform: translateX(-60%); }
.fo-site:not(.fo-js) .fo-contour-line { stroke-dashoffset: 0; }
.fo-js .fo-part-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the question; beside a pulley, its tag, or the job on the worn one */
.fo-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fo-site:not(.fo-js) .fo-hud { display: none; }
.fo-ask, .fo-tag, .fo-job { position: absolute; left: 0; top: 0; margin: 0; border-radius: 16px; background: rgba(10, 11, 12, .8); color: var(--fo-white); will-change: transform; transition: opacity 220ms, visibility 220ms; }
.fo-ask { width: max-content; max-width: 22em; padding: 10px 16px 10px 34px; font-weight: 650; font-size: 16px; line-height: 1.3; opacity: 0; visibility: hidden; }
.fo-ask::before { content: ""; position: absolute; left: 15px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--fo-coolant); box-shadow: 0 0 0 0 rgba(232, 21, 126, .7); animation: fo-ping 1.6s infinite; }
.fo-ask-on .fo-ask { opacity: 1; visibility: visible; }
@keyframes fo-ping { 70% { box-shadow: 0 0 0 9px rgba(232, 21, 126, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 21, 126, 0); } }
.fo-tag, .fo-job { width: 290px; padding: 12px 14px 10px; }
.fo-tag-text, .fo-job-text { margin: 0 0 8px; font-size: 15.5px; line-height: 1.3; font-weight: 500; }
.fo-tag-name { display: block; font-family: var(--fo-head); font-weight: 850; font-size: 23px; letter-spacing: -.015em; line-height: 1.05; }
.fo-scope { display: block; width: 100%; height: 44px; }
.fo-scope[hidden] { display: none; }
.fo-tag-off, .fo-job-off { opacity: 0; visibility: hidden; }

.fo-job { z-index: 4; }
.fo-job-dim { opacity: 0; pointer-events: none; }
.fo-jsteps { display: none; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.fo-jobbing .fo-jsteps { display: flex; }
.fo-jsteps li { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.fo-jsteps .fo-now { background: var(--fo-white); }
.fo-jsteps .fo-did { background: var(--fo-coolant); }
.fo-job-act { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.fo-fix, .fo-site .fo-old { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--fo-white); color: var(--fo-ink); font: 750 16px/1 var(--fo-text); white-space: nowrap; text-decoration: none; cursor: pointer; }
.fo-fix svg { width: 18px; height: 18px; fill: var(--fo-coolant); }
.fo-job-act [hidden] { display: none; }
.fo-do { position: relative; display: grid; place-items: center; flex: none; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: #2A2C30; color: var(--fo-white); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 120ms; }
.fo-do.fo-press { transform: scale(.93); background: #36383D; }
.fo-do-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fo-do-ring circle { fill: none; stroke: var(--fo-coolant); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.fo-do-icon { width: 24px; height: 24px; fill: currentColor; }
.fo-np { flex: none; width: 62px; height: 62px; padding: 2px; border: 2px dashed var(--fo-coolant); border-radius: 50%; background: #1B1C1F; cursor: grab; touch-action: none; animation: fo-ping 1.6s infinite; }
.fo-np-c { display: block; width: 100%; height: 100%; }
.fo-hint { font-weight: 650; font-size: 15px; color: rgba(255, 255, 255, .78); }
.fo-carry, .fo-wrench { position: absolute; left: 0; top: 0; }
.fo-carry { visibility: hidden; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); }
.fo-carry.fo-on { visibility: visible; }
.fo-wrench { opacity: 0; transform-origin: 30px 30px; filter: drop-shadow(-3px 7px 6px rgba(0, 0, 0, .55)); will-change: transform, opacity; }
.fo-part.fo-target::after { inset: -6px; border: 2px dashed var(--fo-white); opacity: 1; box-shadow: none; }
.fo-part.fo-near::after { inset: -11px; border: 3px solid var(--fo-coolant); }
.fo-busy .fo-start { opacity: .5; cursor: not-allowed; }
.fo-fixed .fo-contour-line { stroke-dashoffset: 1; }

/* the strip under the photograph: the headline riding the bay's own recording */
.fo-strip {
  --fo-lis: 88px; --fo-th: 96px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: start;
  padding: clamp(14px, 2.4vh, 30px) var(--fo-m) clamp(22px, 3.4vh, 40px);
  color: var(--fo-ink);
}
.fo-h1 {
  grid-column: 1 / -1; position: relative; z-index: 2;
  margin: 0 0 0 clamp(0px, calc(var(--fo-hx) * 1%), calc(100% - 10.2em - var(--fo-lis) - 32px));
  font-family: var(--fo-head); font-weight: var(--fo-w, 900);
  font-size: min(clamp(44px, 4.95vw + 32.7px, 112px), calc((100vw - 2 * var(--fo-m) - var(--fo-lis) - 40px) / 10.3));
  line-height: .88; letter-spacing: -.035em; white-space: nowrap; justify-self: start; pointer-events: none;
}
.fo-line { grid-column: 1 / -1; position: relative; height: var(--fo-th); margin: calc(var(--fo-th) / -2 - 4px) calc(-1 * var(--fo-m)) 0; color: var(--fo-coolant); z-index: 1; }
.fo-line .fo-trace, .fo-reel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fo-trace.fo-reel-still path { stroke-width: 1.6; }
.fo-reel { visibility: hidden; }
.fo-reel-on .fo-reel { visibility: visible; }
.fo-reel-on .fo-reel-still { visibility: hidden; }
/* the engine's start button: its ring breathes until it's pressed */
.fo-start {
  position: absolute; z-index: 3; right: var(--fo-m); top: 50%; width: var(--fo-lis); height: var(--fo-lis); margin-top: calc(var(--fo-lis) / -2);
  padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--fo-white);
  background: conic-gradient(from 20deg, #F4F5F6, #8E9197 12%, #E6E8EA 26%, #55585E 42%, #D5D7DA 58%, #6B6E74 74%, #ECEEF0 88%, #F4F5F6);
  box-shadow: 0 0 0 6px var(--fo-concrete), 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform 140ms var(--fo-crank);
}
.fo-start::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--fo-coolant), 0 0 16px 3px rgba(232, 21, 126, .8); opacity: .3; animation: fo-breathe 1.9s ease-in-out infinite; }
.fo-known .fo-start::before { animation: none; }
.fo-running .fo-start::before { opacity: 1; }
@keyframes fo-breathe { 50% { opacity: 1; } }
.fo-st-face { position: absolute; inset: 10%; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; background: radial-gradient(circle at 50% 26%, #393B40, #111214 64%); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .14), inset 0 -4px 8px rgba(0, 0, 0, .7); font-family: var(--fo-head); line-height: 1; text-transform: uppercase; }
.fo-st-sm, .fo-st-off, .fo-running .fo-st-on { font-weight: 700; font-size: calc(var(--fo-lis) * .1); letter-spacing: .14em; opacity: .7; }
.fo-st-on, .fo-running .fo-st-off { font-weight: 850; font-size: calc(var(--fo-lis) * .2); letter-spacing: .05em; opacity: 1; }
.fo-start:hover { transform: scale(1.04); }
.fo-start:active { transform: scale(.95); }
.fo-start:active .fo-st-face { box-shadow: inset 0 4px 10px rgba(0, 0, 0, .8); }
.fo-site:not(.fo-js) .fo-start { display: none; }
.fo-sub { grid-column: 1; max-width: 52ch; margin: 18px 0 0; font-size: clamp(17px, .35vw + 15.5px, 20px); line-height: 1.45; font-weight: 440; }
.fo-prompt-box { grid-column: 2; max-width: 30ch; margin: 18px 0 0; text-align: right; justify-self: end; }
.fo-prompt { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--fo-ink-60); }
.fo-p-still, .fo-site:not(.fo-js) .fo-p-live { display: none; }
.fo-site:not(.fo-js) .fo-p-still { display: inline; }
.fo-why { display: none; margin-top: 10px; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--fo-ink); color: var(--fo-white) !important; text-decoration: none; font-weight: 700; font-size: 16px; }
.fo-found-on .fo-why { display: inline-flex; }

@media (max-width: 1100px) {
  .fo-frame { --fo-ox: .78; }
  .fo-strip { grid-template-columns: minmax(0, 1fr); }
  .fo-prompt-box { grid-column: 1; justify-self: start; text-align: left; max-width: 52ch; margin-top: 10px; }
}
@media (max-width: 1100px) and (min-aspect-ratio: 5/4) { .fo-frame { --fo-ox: .6; } }
@media (max-width: 700px) {
  .fo-bay { grid-template-rows: auto auto; min-height: 0; }
  .fo-stage { height: clamp(260px, calc(100svh - var(--bar-h, 40px) - 400px), 480px); }
  .fo-frame { --fo-ar: .9; --fo-ox: .5; --fo-oy: .3; }
  .fo-master { left: -122.222%; width: 227.556%; top: -15.2%; height: 115.2%; }
  .fo-strip { --fo-lis: 70px; --fo-th: 64px; grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
  .fo-h1 { white-space: normal; font-size: clamp(40px, 12.6vw, 60px); margin-left: calc(var(--fo-hx) * .25%); max-width: 7.2em; }
  .fo-sub { margin-top: 10px; font-size: 17.5px; }
  .fo-prompt-box { grid-column: 1; justify-self: start; text-align: left; margin-top: 10px; }
  .fo-prompt { font-size: 15px; }
  .fo-part-cap { font-size: 13.5px; width: 10em; }
  .fo-part-cap b { font-size: 16px; }
  .fo-tag, .fo-job { width: 164px; padding: 9px 11px 7px; }
  .fo-tag-name { font-size: 18px; }
  .fo-tag-text, .fo-job-text { font-size: 13.5px; margin-bottom: 4px; }
  .fo-scope { height: 30px; }
  .fo-ask { max-width: 11.5em; font-size: 14.5px; }
  .fo-do { width: 50px; height: 50px; }
  .fo-np { width: 54px; height: 54px; }
  .fo-fix, .fo-site .fo-old { height: 36px; padding: 0 12px; font-size: 14.5px; }
}

/* ── the bands ───────────────────────────────────────────────────────────────────── */
.fo-band { --fo-pad: calc(clamp(56px, 6vw, 96px) + var(--fo-duty, .5) * clamp(0px, 6.6vw, 96px)); position: relative; padding: var(--fo-pad) 0; }
.fo-h2, .fo-h2-display { font-family: var(--fo-head); margin: 0; text-wrap: balance; }
.fo-h2 { font-weight: 860; font-size: var(--fo-h2fs); line-height: .9; letter-spacing: -.03em; }
.fo-h2-display { font-weight: 900; font-size: clamp(60px, 8.4vw + 28px, 152px); line-height: .84; letter-spacing: -.04em; }
.fo-h3 { font-family: var(--fo-head); font-weight: 780; font-size: var(--fo-h3fs); line-height: 1.05; letter-spacing: -.015em; margin: 0; }
.fo-site { --fo-h2fs: clamp(40px, 4.4vw + 22px, 88px); --fo-h3fs: clamp(24px, 1.8vw + 17px, 44px); }
.fo-lead { font-size: clamp(19px, .5vw + 16px, 24px); line-height: 1.4; font-weight: 420; max-width: 40ch; margin: 24px 0 0; }
.fo-band p { max-width: calc(var(--fo-measure, 60) * 1ch); line-height: var(--fo-lh, 1.55); }

/* a heading riding its recording's loudest point; the words in its quiet stretches */
.fo-ride { position: relative; }
.fo-rider { position: relative; z-index: 2; margin-left: calc(clamp(var(--fo-hmin, 0), var(--fo-hx, 0), var(--fo-hmax, 55)) * 1%); }
.fo-ride > .fo-trace { position: relative; z-index: 1; }
.fo-ride > .fo-wrap + .fo-trace { margin-top: calc(var(--fo-th) / -2 - 6px); }
.fo-quiet { display: grid; margin-top: 40px; }
.fo-quiet > p { grid-area: 1 / 1; margin: 0 0 0 calc(var(--fo-q1x, 0) * 1%); width: calc(var(--fo-q1w, 48) * 1%); max-width: calc(var(--fo-measure, 60) * 1ch); }
.fo-quiet > .fo-q2 { margin-left: calc(var(--fo-q2x, 52) * 1%); width: calc(var(--fo-q2w, 46) * 1%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fo-js .fo-band .fo-trace path[pathLength] { stroke-dasharray: 1; animation: fo-draw linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
    .fo-js .fo-band .fo-rider { animation: fo-settle linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
  }
}
/* where a dense recording runs through a heading, the letters keep a clear margin of the ground round them */
.fo-service .fo-rider, .fo-handback .fo-rider { -webkit-text-stroke: .15em var(--fo-concrete); paint-order: stroke fill; }
@keyframes fo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fo-settle { from { font-variation-settings: "wght" 720; } to { font-variation-settings: "wght" 860; } }

/* It was the idler. */
.fo-found { --fo-th: clamp(150px, 20vw, 290px); --fo-hmax: 30; background: var(--fo-coolant); color: var(--fo-ink); overflow: clip; min-height: calc(45vw + 2 * var(--fo-pad) - 10vw); }
.fo-found .fo-trace { color: var(--fo-ink); }
.fo-found .fo-rider { max-width: 8.2em; }

.fo-found-body { position: relative; z-index: 2; }
.fo-found-body > .fo-lead { max-width: min(30ch, 62%); }
.fo-found .fo-lead { font-size: clamp(22px, .8vw + 17px, 30px); line-height: 1.3; font-weight: 700; max-width: 30ch; margin-top: 8px; }
.fo-found p { font-weight: 700; font-size: clamp(19px, .3vw + 17.5px, 21px); }
.fo-found-fig { position: absolute; right: 0; bottom: 0; width: 30vw; margin: 0; z-index: 0; }
.fo-found-fig img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

/* What you noticed. */
.fo-symptoms { --fo-th: clamp(90px, 10vw, 150px); --fo-hmax: 50; }
.fo-sym-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--fo-gut); align-items: end; }
.fo-sym-head .fo-lead { margin: 0; max-width: 44ch; }
.fo-sym-pick { min-width: 0; border: 0; margin-top: clamp(32px, 4vw, 56px); margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3vw, 48px); }
.fo-sym-pick legend { float: left; }
.fo-sym-opt { position: relative; cursor: pointer; font-family: var(--fo-head); font-weight: 820; font-size: clamp(28px, 2.6vw + 18px, 56px); line-height: 1.05; letter-spacing: -.02em; color: var(--fo-ink-60); padding-bottom: 14px; transition: color 180ms; }
.fo-sym-opt > span { position: relative; display: inline-block; }
.fo-sym-opt input { position: absolute; inset: 0; z-index: 2; opacity: 0; margin: 0; cursor: pointer; }
.fo-sym-opt:hover { color: var(--fo-ink); }
.fo-uline { position: absolute; left: 0; bottom: -12px; width: 100%; height: 12px; opacity: 0; overflow: visible; }
.fo-uline path { fill: none; stroke: var(--fo-ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fo-sym-opt input:checked + span { color: var(--fo-ink); }
.fo-sym-opt input:checked + span .fo-uline { opacity: 1; view-transition-name: fo-sym-rule; }
.fo-sym-opt input:focus-visible + span { outline: 3px solid var(--fo-ink); outline-offset: 6px; box-shadow: 0 0 0 9px var(--fo-white); }
.fo-sym-stage { position: relative; margin-top: clamp(24px, 3vw, 48px); }
.fo-sym-trace { position: absolute; left: 0; top: calc(var(--fo-h3fs) * 2.2 - var(--fo-th) / 2); color: var(--fo-ink); view-transition-name: fo-sym-trace; }
.fo-sym-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "h h" "c b"; column-gap: var(--fo-gut); }
.fo-js .fo-sym { display: none; }
.fo-js .fo-sym.fo-on { display: contents; }
.fo-js .fo-sym.fo-on .fo-h3 { grid-area: h; view-transition-name: fo-sym-h3; }
.fo-js .fo-sym.fo-on .fo-sym-lines { grid-area: c; view-transition-name: fo-sym-copy; }
.fo-sym .fo-h3 { position: relative; z-index: 2; min-height: 2.2em; display: flex; align-items: flex-end; margin-left: calc(clamp(0, var(--fo-hx, 0), var(--fo-hmax)) * 1%); max-width: 22em; padding-bottom: .12em; }
.fo-sym-lines { margin-top: clamp(40px, 5vw, 72px); }
.fo-sym-lines p { margin: 0 0 14px; max-width: 44ch; line-height: var(--fo-lh, 1.55); }
.fo-bench { grid-area: b; position: relative; margin: clamp(40px, 5vw, 72px) 0 0; }
.fo-bench picture { display: block; position: relative; overflow: clip; aspect-ratio: 4 / 3; background: #9FA2A6; }
.fo-bench img { position: absolute; left: 50%; top: 50%; width: 292.6% !important; max-width: none !important; transform: translate(calc(var(--fo-cx, 50) * -1%), calc(var(--fo-cy, 50) * -1%)); transition: transform 520ms var(--fo-crank); }
.fo-bench-cap { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--fo-ink-60); }
.fo-symptoms[data-sym="noise"] { --fo-cx: 17.1; --fo-cy: 48; }
.fo-symptoms[data-sym="light"] { --fo-cx: 28.76; --fo-cy: 45.3; }
.fo-symptoms[data-sym="shake"] { --fo-cx: 48.24; --fo-cy: 53.3; }
.fo-symptoms[data-sym="smell"] { --fo-cx: 66.99; --fo-cy: 49.7; }
.fo-symptoms[data-sym="leak"] { --fo-cx: 82.9; --fo-cy: 51.6; }
.fo-site:not(.fo-js) .fo-sym-trace { display: none; }
.fo-site:not(.fo-js) .fo-sym-grid { grid-template-areas: none; }
.fo-site:not(.fo-js) .fo-sym { grid-column: 1; margin-bottom: 40px; }
.fo-site:not(.fo-js) .fo-sym .fo-h3 { margin-left: 0; min-height: 0; }
.fo-site:not(.fo-js) .fo-sym-lines { margin-top: 16px; }
.fo-site:not(.fo-js) .fo-bench { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; align-self: start; position: sticky; top: calc(var(--fo-top) + 24px); }
.fo-site:not(.fo-js) .fo-bench img { width: 100% !important; left: 0; top: 0; transform: none; }
.fo-site:not(.fo-js) .fo-bench picture { aspect-ratio: 16 / 9; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(fo-sym-h3), ::view-transition-group(fo-sym-rule), ::view-transition-group(fo-sym-copy) { animation-duration: 420ms; animation-timing-function: var(--fo-crank, ease); }
::view-transition-old(fo-sym-trace) { animation: fo-fade-out 200ms linear both; }
::view-transition-new(fo-sym-trace) { animation: fo-wipe 420ms steps(12, end) both; }
@keyframes fo-fade-out { to { opacity: 0; } }
@keyframes fo-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* One, three, four, two. */
.fo-firing { background: var(--fo-coolant); color: var(--fo-ink); padding: clamp(64px, 8vw, 128px) 0; }
.fo-fire-sub { font-weight: 700; font-size: clamp(19px, .5vw + 16px, 24px); line-height: 1.35; margin: 14px 0 0; }
.fo-fire-stage { display: grid; grid-template-columns: minmax(0, 1fr); }
.fo-engine-wrap { margin-top: clamp(28px, 4vh, 56px); }
.fo-engine { position: relative; }
@media (min-width: 1101px) {
  .fo-fire-stage { max-width: 1360px; margin: 0 auto; padding-left: var(--fo-m); padding-right: var(--fo-m); box-sizing: content-box !important; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; column-gap: var(--fo-gut); align-content: start; }
  .fo-fire-stage > .fo-wrap { padding: 0; max-width: none; }
  .fo-fire-head { grid-column: 1; grid-row: 1; }
  .fo-engine-wrap { grid-column: 2; grid-row: 1 / span 2; margin-top: 8px; }
  .fo-fire-foot { grid-column: 1; grid-row: 2; align-self: end; }
}
.fo-steps { list-style: none; margin: 0; padding: 0 1%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2%; align-items: start; }
.fo-step { position: relative; grid-row: 1; }
.fo-step[data-bore="1"] { grid-column: 1; }
.fo-step[data-bore="2"] { grid-column: 2; margin-top: 54px; }
.fo-step[data-bore="3"] { grid-column: 3; margin-top: 18px; }
.fo-step[data-bore="4"] { grid-column: 4; margin-top: 36px; }
.fo-step-word { font-family: var(--fo-head); font-weight: 900; font-size: clamp(30px, 2.2vw + 16px, 50px); line-height: .95; letter-spacing: -.02em; margin: 0; color: var(--fo-ink); }
.fo-spark { display: block; width: min(100%, 140px); height: 28px; margin: 6px 0 8px; color: var(--fo-white); }
.fo-spark path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fo-step p { font-weight: 700; font-size: 19px; line-height: 1.36; margin: 0; max-width: 34ch; }
.fo-eng-box { margin-top: 18px; }
.fo-eng { display: block; width: 100%; height: auto; overflow: visible; }
.fo-eng-block { fill: var(--fo-ink); }
.fo-eng-bore { fill: var(--fo-concrete); }
.fo-eng-case { fill: none; stroke: var(--fo-ink); stroke-width: 3; }
.fo-eng-shaft { stroke: var(--fo-ink); stroke-width: 10; stroke-linecap: round; }
.fo-eng-ink { fill: var(--fo-ink); }
.fo-eng-jnl { fill: var(--fo-concrete); stroke: var(--fo-ink); stroke-width: 3; }
.fo-eng-ring { stroke: var(--fo-concrete); stroke-width: 3; }
.fo-eng-plug { fill: var(--fo-concrete); }
.fo-eng-coil { fill: var(--fo-ink); }
.fo-flash { fill: var(--fo-white); opacity: 0; }
/* at rest (and without scroll timelines): all four fired, pistons at mid-stroke */
.fo-pis-a, .fo-pis-b { transform: translateY(34.7px); }
.fo-rod-a { transform: translate(30px, 0) rotate(-17.6deg); }
.fo-rod-b { transform: translate(-30px, 0) rotate(17.6deg); }
.fo-web-a, .fo-web-b { transform: rotate(90deg); }
.fo-fire-foot { font-weight: 700; font-size: 19px; margin-top: 20px !important; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fo-js .fo-firing { height: 260vh; padding: 0; view-timeline: --fo-fire block; }
    .fo-js .fo-fire-stage { position: sticky; top: var(--fo-top); height: calc(100svh - var(--fo-top)); padding-top: clamp(24px, 5vh, 64px); overflow: clip; }
    .fo-js .fo-fire-stage * { animation-timeline: --fo-fire; animation-range: contain 0% contain 100%; animation-fill-mode: both; animation-timing-function: linear; }
    .fo-js .fo-pis-a { animation-name: fo-pis-a; }
    .fo-js .fo-pis-b { animation-name: fo-pis-b; }
    .fo-js .fo-rod-a { animation-name: fo-rod-a; }
    .fo-js .fo-rod-b { animation-name: fo-rod-b; }
    .fo-js .fo-web-a, .fo-js .fo-web-b { animation-name: fo-web; }
    .fo-js .fo-flash-1 { animation-name: fo-fl-1; }
    .fo-js .fo-flash-3 { animation-name: fo-fl-3; }
    .fo-js .fo-flash-4 { animation-name: fo-fl-4; }
    .fo-js .fo-flash-2 { animation-name: fo-fl-2; }
    .fo-js .fo-step[data-bore="1"] .fo-step-word { animation-name: fo-lit-1; }
    .fo-js .fo-step[data-bore="3"] .fo-step-word { animation-name: fo-lit-3; }
    .fo-js .fo-step[data-bore="4"] .fo-step-word { animation-name: fo-lit-4; }
    .fo-js .fo-step[data-bore="2"] .fo-step-word { animation-name: fo-lit-2; }
    .fo-js .fo-step[data-bore="1"] .fo-spark path { animation-name: fo-sp-1; }
    .fo-js .fo-step[data-bore="3"] .fo-spark path { animation-name: fo-sp-3; }
    .fo-js .fo-step[data-bore="4"] .fo-spark path { animation-name: fo-sp-4; }
    .fo-js .fo-step[data-bore="2"] .fo-spark path { animation-name: fo-sp-2; }
  }
}
@keyframes fo-fl-1 { 0%, 7.6% { opacity: 0; } 8.4% { opacity: 1; } 11.5%, 100% { opacity: 0; } }
@keyframes fo-fl-3 { 0%, 32.6% { opacity: 0; } 33.4% { opacity: 1; } 36.5%, 100% { opacity: 0; } }
@keyframes fo-fl-4 { 0%, 57.6% { opacity: 0; } 58.4% { opacity: 1; } 61.5%, 100% { opacity: 0; } }
@keyframes fo-fl-2 { 0%, 82.6% { opacity: 0; } 83.4% { opacity: 1; } 86.5%, 100% { opacity: 0; } }
@keyframes fo-lit-1 { 0%, 8.2% { color: rgb(17 18 20 / .7); font-weight: 720; } 8.4%, 100% { color: var(--fo-ink); font-weight: 900; } }
@keyframes fo-lit-3 { 0%, 33.2% { color: rgb(17 18 20 / .7); font-weight: 720; } 33.4%, 100% { color: var(--fo-ink); font-weight: 900; } }
@keyframes fo-lit-4 { 0%, 58.2% { color: rgb(17 18 20 / .7); font-weight: 720; } 58.4%, 100% { color: var(--fo-ink); font-weight: 900; } }
@keyframes fo-lit-2 { 0%, 83.2% { color: rgb(17 18 20 / .7); font-weight: 720; } 83.4%, 100% { color: var(--fo-ink); font-weight: 900; } }
@keyframes fo-sp-1 { 0%, 8.3% { stroke-dashoffset: 1; } 10.5%, 100% { stroke-dashoffset: 0; } }
@keyframes fo-sp-3 { 0%, 33.3% { stroke-dashoffset: 1; } 35.5%, 100% { stroke-dashoffset: 0; } }
@keyframes fo-sp-4 { 0%, 58.3% { stroke-dashoffset: 1; } 60.5%, 100% { stroke-dashoffset: 0; } }
@keyframes fo-sp-2 { 0%, 83.3% { stroke-dashoffset: 1; } 85.5%, 100% { stroke-dashoffset: 0; } }
@keyframes fo-pis-a{0%{transform:translateY(18.5px)}2.78%{transform:translateY(8.9px)}5.56%{transform:translateY(2.3px)}8.33%{transform:translateY(0.0px)}11.11%{transform:translateY(2.3px)}13.89%{transform:translateY(8.9px)}16.67%{transform:translateY(18.5px)}19.44%{transform:translateY(29.3px)}22.22%{transform:translateY(39.7px)}25%{transform:translateY(48.5px)}27.78%{transform:translateY(54.9px)}30.56%{transform:translateY(58.7px)}33.33%{transform:translateY(60.0px)}36.11%{transform:translateY(58.7px)}38.89%{transform:translateY(54.9px)}41.67%{transform:translateY(48.5px)}44.44%{transform:translateY(39.7px)}47.22%{transform:translateY(29.3px)}50%{transform:translateY(18.5px)}52.78%{transform:translateY(8.9px)}55.56%{transform:translateY(2.3px)}58.33%{transform:translateY(0.0px)}61.11%{transform:translateY(2.3px)}63.89%{transform:translateY(8.9px)}66.67%{transform:translateY(18.5px)}69.44%{transform:translateY(29.3px)}72.22%{transform:translateY(39.7px)}75%{transform:translateY(48.5px)}77.78%{transform:translateY(54.9px)}80.56%{transform:translateY(58.7px)}83.33%{transform:translateY(60.0px)}86.11%{transform:translateY(58.7px)}88.89%{transform:translateY(54.9px)}91.67%{transform:translateY(48.5px)}94.44%{transform:translateY(39.7px)}97.22%{transform:translateY(29.3px)}100%{transform:translateY(18.5px)}}
@keyframes fo-rod-a{0%{transform:translate(-26.0px,-15.0px) rotate(15.2deg)}2.78%{transform:translate(-19.3px,-23.0px) rotate(11.2deg)}5.56%{transform:translate(-10.3px,-28.2px) rotate(5.9deg)}8.33%{transform:translate(0.0px,-30.0px) rotate(0deg)}11.11%{transform:translate(10.3px,-28.2px) rotate(-5.9deg)}13.89%{transform:translate(19.3px,-23.0px) rotate(-11.2deg)}16.67%{transform:translate(26.0px,-15.0px) rotate(-15.2deg)}19.44%{transform:translate(29.5px,-5.2px) rotate(-17.4deg)}22.22%{transform:translate(29.5px,5.2px) rotate(-17.4deg)}25%{transform:translate(26.0px,15.0px) rotate(-15.2deg)}27.78%{transform:translate(19.3px,23.0px) rotate(-11.2deg)}30.56%{transform:translate(10.3px,28.2px) rotate(-5.9deg)}33.33%{transform:translate(0.0px,30.0px) rotate(0deg)}36.11%{transform:translate(-10.3px,28.2px) rotate(5.9deg)}38.89%{transform:translate(-19.3px,23.0px) rotate(11.2deg)}41.67%{transform:translate(-26.0px,15.0px) rotate(15.2deg)}44.44%{transform:translate(-29.5px,5.2px) rotate(17.4deg)}47.22%{transform:translate(-29.5px,-5.2px) rotate(17.4deg)}50%{transform:translate(-26.0px,-15.0px) rotate(15.2deg)}52.78%{transform:translate(-19.3px,-23.0px) rotate(11.2deg)}55.56%{transform:translate(-10.3px,-28.2px) rotate(5.9deg)}58.33%{transform:translate(-0.0px,-30.0px) rotate(0deg)}61.11%{transform:translate(10.3px,-28.2px) rotate(-5.9deg)}63.89%{transform:translate(19.3px,-23.0px) rotate(-11.2deg)}66.67%{transform:translate(26.0px,-15.0px) rotate(-15.2deg)}69.44%{transform:translate(29.5px,-5.2px) rotate(-17.4deg)}72.22%{transform:translate(29.5px,5.2px) rotate(-17.4deg)}75%{transform:translate(26.0px,15.0px) rotate(-15.2deg)}77.78%{transform:translate(19.3px,23.0px) rotate(-11.2deg)}80.56%{transform:translate(10.3px,28.2px) rotate(-5.9deg)}83.33%{transform:translate(0.0px,30.0px) rotate(0deg)}86.11%{transform:translate(-10.3px,28.2px) rotate(5.9deg)}88.89%{transform:translate(-19.3px,23.0px) rotate(11.2deg)}91.67%{transform:translate(-26.0px,15.0px) rotate(15.2deg)}94.44%{transform:translate(-29.5px,5.2px) rotate(17.4deg)}97.22%{transform:translate(-29.5px,-5.2px) rotate(17.4deg)}100%{transform:translate(-26.0px,-15.0px) rotate(15.2deg)}}
@keyframes fo-pis-b{0%{transform:translateY(48.5px)}2.78%{transform:translateY(54.9px)}5.56%{transform:translateY(58.7px)}8.33%{transform:translateY(60.0px)}11.11%{transform:translateY(58.7px)}13.89%{transform:translateY(54.9px)}16.67%{transform:translateY(48.5px)}19.44%{transform:translateY(39.7px)}22.22%{transform:translateY(29.3px)}25%{transform:translateY(18.5px)}27.78%{transform:translateY(8.9px)}30.56%{transform:translateY(2.3px)}33.33%{transform:translateY(0.0px)}36.11%{transform:translateY(2.3px)}38.89%{transform:translateY(8.9px)}41.67%{transform:translateY(18.5px)}44.44%{transform:translateY(29.3px)}47.22%{transform:translateY(39.7px)}50%{transform:translateY(48.5px)}52.78%{transform:translateY(54.9px)}55.56%{transform:translateY(58.7px)}58.33%{transform:translateY(60.0px)}61.11%{transform:translateY(58.7px)}63.89%{transform:translateY(54.9px)}66.67%{transform:translateY(48.5px)}69.44%{transform:translateY(39.7px)}72.22%{transform:translateY(29.3px)}75%{transform:translateY(18.5px)}77.78%{transform:translateY(8.9px)}80.56%{transform:translateY(2.3px)}83.33%{transform:translateY(0.0px)}86.11%{transform:translateY(2.3px)}88.89%{transform:translateY(8.9px)}91.67%{transform:translateY(18.5px)}94.44%{transform:translateY(29.3px)}97.22%{transform:translateY(39.7px)}100%{transform:translateY(48.5px)}}
@keyframes fo-rod-b{0%{transform:translate(26.0px,15.0px) rotate(-15.2deg)}2.78%{transform:translate(19.3px,23.0px) rotate(-11.2deg)}5.56%{transform:translate(10.3px,28.2px) rotate(-5.9deg)}8.33%{transform:translate(0.0px,30.0px) rotate(0deg)}11.11%{transform:translate(-10.3px,28.2px) rotate(5.9deg)}13.89%{transform:translate(-19.3px,23.0px) rotate(11.2deg)}16.67%{transform:translate(-26.0px,15.0px) rotate(15.2deg)}19.44%{transform:translate(-29.5px,5.2px) rotate(17.4deg)}22.22%{transform:translate(-29.5px,-5.2px) rotate(17.4deg)}25%{transform:translate(-26.0px,-15.0px) rotate(15.2deg)}27.78%{transform:translate(-19.3px,-23.0px) rotate(11.2deg)}30.56%{transform:translate(-10.3px,-28.2px) rotate(5.9deg)}33.33%{transform:translate(-0.0px,-30.0px) rotate(0deg)}36.11%{transform:translate(10.3px,-28.2px) rotate(-5.9deg)}38.89%{transform:translate(19.3px,-23.0px) rotate(-11.2deg)}41.67%{transform:translate(26.0px,-15.0px) rotate(-15.2deg)}44.44%{transform:translate(29.5px,-5.2px) rotate(-17.4deg)}47.22%{transform:translate(29.5px,5.2px) rotate(-17.4deg)}50%{transform:translate(26.0px,15.0px) rotate(-15.2deg)}52.78%{transform:translate(19.3px,23.0px) rotate(-11.2deg)}55.56%{transform:translate(10.3px,28.2px) rotate(-5.9deg)}58.33%{transform:translate(0.0px,30.0px) rotate(0deg)}61.11%{transform:translate(-10.3px,28.2px) rotate(5.9deg)}63.89%{transform:translate(-19.3px,23.0px) rotate(11.2deg)}66.67%{transform:translate(-26.0px,15.0px) rotate(15.2deg)}69.44%{transform:translate(-29.5px,5.2px) rotate(17.4deg)}72.22%{transform:translate(-29.5px,-5.2px) rotate(17.4deg)}75%{transform:translate(-26.0px,-15.0px) rotate(15.2deg)}77.78%{transform:translate(-19.3px,-23.0px) rotate(11.2deg)}80.56%{transform:translate(-10.3px,-28.2px) rotate(5.9deg)}83.33%{transform:translate(-0.0px,-30.0px) rotate(0deg)}86.11%{transform:translate(10.3px,-28.2px) rotate(-5.9deg)}88.89%{transform:translate(19.3px,-23.0px) rotate(-11.2deg)}91.67%{transform:translate(26.0px,-15.0px) rotate(-15.2deg)}94.44%{transform:translate(29.5px,-5.2px) rotate(-17.4deg)}97.22%{transform:translate(29.5px,5.2px) rotate(-17.4deg)}100%{transform:translate(26.0px,15.0px) rotate(-15.2deg)}}
@keyframes fo-web{from{transform:rotate(-60deg)}to{transform:rotate(660deg)}}

/* Logbook servicing, item by item. */
.fo-service { --fo-th: clamp(80px, 9vw, 130px); --fo-hmax: 24; }
.fo-service .fo-trace { color: var(--fo-ink); margin-top: calc(var(--fo-th) / -2 + .1 * var(--fo-h2fs)); }
.fo-svc-items { --fo-pitch: 2.45em; position: relative; list-style: none; margin: 6px 0 0; padding: 0; font-family: var(--fo-head); font-size: clamp(19px, .9vw + 15px, 28px); height: calc(3 * var(--fo-pitch) + 18px + .4em); }
@media (max-width: 1180px) { .fo-svc-items { --fo-pitch: 3.6em; } }
.fo-svc-items li { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--row) * var(--fo-pitch) + 18px); max-width: calc(var(--w) * 1% - 12px); padding-left: 12px; font-family: var(--fo-head); font-weight: 700; font-size: clamp(19px, .9vw + 15px, 28px); line-height: 1.08; letter-spacing: -.01em; }
.fo-svc-items li::before { content: ""; position: absolute; left: 0; bottom: .15em; top: calc(-18px - var(--row) * var(--fo-pitch)); width: 1.25px; background: var(--fo-ink); opacity: .55; }
.fo-svc-close { margin: clamp(32px, 4vw, 56px) 0 0; max-width: 52ch; font-size: clamp(18px, .4vw + 16px, 21px); }

/* Feel it at 100. */
.fo-orders { padding-top: 0; }
.fo-hoist { margin: 0 0 clamp(56px, 7vw, 112px); height: 58vh; min-height: 320px; overflow: clip; }
.fo-hoist img { width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 45%; }
.fo-ord-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--fo-gut); align-items: start; }
.fo-ord-text { grid-column: 1 / 9; }
.fo-ord-lead { max-width: calc(var(--fo-measure, 60) * 1ch) !important; line-height: var(--fo-lh, 1.55); }
.fo-ord-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px 64px; margin: 40px 0 28px; }
.fo-ord-group { min-width: 0; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; }
.fo-ord-group legend { font-weight: 700; font-size: 16px; margin-bottom: 6px; padding: 0; }
.fo-ord-opt { position: relative; cursor: pointer; font-family: var(--fo-head); font-weight: 820; font-size: clamp(24px, 1.2vw + 16px, 36px); line-height: 1.15; color: var(--fo-ink-60); transition: color 180ms; }
.fo-ord-gears .fo-ord-opt { font-size: clamp(30px, 1.8vw + 18px, 48px); font-weight: 880; }
.fo-ord-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fo-ord-opt:hover { color: var(--fo-ink); }
.fo-ord-opt input:checked + span { color: var(--fo-ink); box-shadow: inset 0 -4px 0 var(--fo-coolant); }
.fo-ord-opt input:focus-visible + span { outline: 3px solid var(--fo-ink); outline-offset: 4px; }
.fo-chart { grid-column: 1 / 10; grid-row: 3; position: relative; height: clamp(300px, 34vw, 460px); background: var(--fo-well); border-radius: 2px; touch-action: pan-y; user-select: none; }
.fo-chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fo-chart-svg .fo-c-axis { stroke: var(--fo-ink); stroke-width: 1.25; fill: none; }
.fo-chart-svg .fo-c-tick { font: 500 13.5px var(--fo-text); fill: var(--fo-ink-60); font-variant-numeric: tabular-nums; }
.fo-chart-svg .fo-c-lab { font: 700 15px var(--fo-text); fill: var(--fo-ink); }
.fo-chart-svg .fo-c-line { stroke: var(--fo-ink); stroke-width: 1.5; fill: none; opacity: .75; }
.fo-chart-svg .fo-c-eng { stroke-dasharray: 6 5; }
.fo-chart-svg .fo-c-lit { stroke: var(--fo-coolant); stroke-width: 3.5; opacity: 1; }
.fo-chart-svg .fo-c-band { fill: var(--fo-white); opacity: .5; }
.fo-chart-svg .fo-c-dot { fill: var(--fo-coolant); stroke: var(--fo-ink); stroke-width: 2; }
.fo-chart-svg .fo-c-drone { fill: none; stroke: var(--fo-coolant); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.fo-speed-track { position: absolute; left: var(--fo-cl, 7%); right: var(--fo-cr, 2%); top: 0; bottom: 0; pointer-events: none; }
.fo-speed { position: absolute; top: 0; bottom: 0; left: calc(var(--v) * 100%); width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; pointer-events: auto; }
.fo-speed::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 4px; background: var(--fo-ink); }
.fo-speed-num { position: absolute; left: 50%; top: -14px; transform: translate(-50%, -100%); padding: 4px 10px; border-radius: 999px; background: var(--fo-ink); color: var(--fo-white); font: 700 15px/1 var(--fo-text); white-space: nowrap; }
.fo-speed-num::after { content: " km/h"; font-weight: 500; }
.fo-speed:focus-visible { outline: none; box-shadow: none; }
.fo-speed:focus-visible .fo-speed-num { outline: 3px solid var(--fo-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fo-white); }
.fo-chart { margin-top: 40px; }
.fo-answer { grid-column: 1 / 10; grid-row: 4; font-family: var(--fo-head); font-weight: 780; font-size: var(--fo-h3fs); line-height: 1.08; letter-spacing: -.015em; max-width: 30ch !important; margin: 32px 0 0; min-height: 3.24em; transition: opacity 180ms; }
.fo-ord-notes { grid-column: 10 / -1; grid-row: 3 / span 2; margin-top: 40px; }
.fo-ord-try { font-weight: 700; margin: 0 0 10px; }
.fo-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fo-case { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: 2px; background: var(--fo-well); color: var(--fo-ink); font: 500 15px/1.4 var(--fo-text); cursor: pointer; box-shadow: inset 3px 0 0 var(--fo-ink); transition: box-shadow 180ms; }
.fo-case:hover, .fo-case[aria-pressed="true"] { box-shadow: inset 6px 0 0 var(--fo-coolant); }
.fo-site:not(.fo-js) .fo-case { cursor: default; }
.fo-ord-note { font-size: 15px; color: var(--fo-ink-60); margin: 20px 0 0; }
.fo-ord-close { margin: 12px 0 0; font-size: 16px; }
.fo-site:not(.fo-js) .fo-speed { display: none; }

/* Electrical faults, followed to the wire. */
.fo-electrical { --fo-th: clamp(90px, 11vw, 170px); --fo-hmax: 5; background: var(--fo-ink); color: var(--fo-white); overflow: clip; min-height: calc(52vw * 2 / 3 + 2 * var(--fo-pad) - 6vw); }
.fo-electrical .fo-trace { color: var(--fo-coolant); }
.fo-electrical .fo-rider { max-width: calc((50 - clamp(0, var(--fo-hx, 0), 5)) * 1%); }
.fo-el-fig { position: absolute; right: 0; top: var(--fo-pad); width: 52vw; margin: 0; }
.fo-el-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fo-electrical .fo-wrap > * { position: relative; z-index: 2; }
.fo-el-cap { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .78); margin: 6px 0 0; max-width: 40ch !important; }
.fo-electrical .fo-quiet > p { color: rgba(255, 255, 255, .92); }
.fo-electrical :focus-visible { outline-color: var(--fo-coolant); }

/* Here's what it was. */
.fo-handback { --fo-th: clamp(60px, 10vw, 150px); --fo-sq: min(42vw, 620px); --fo-hmin: 48; --fo-hmax: 58; }
.fo-hb-top { display: grid; grid-template-columns: var(--fo-m) var(--fo-sq) 1fr; }
.fo-hb-fig { grid-column: 2; grid-row: 1; margin: 0; }
.fo-hb-fig img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fo-hb-ride { grid-column: 1 / -1; grid-row: 1; align-self: end; margin-bottom: calc(var(--fo-sq) * .3 - var(--fo-th) / 2); }
.fo-env { color: var(--fo-ink); }
.fo-hb-fig + .fo-hb-ride .fo-trace path { stroke-width: 1.5; }
.fo-hb-ride > .fo-wrap + .fo-trace { margin-top: calc(var(--fo-th) / -2 + .1 * var(--fo-h2fs)); }
.fo-hb-text { margin-top: 8px; }
.fo-hb-text > * { margin-left: 48%; max-width: 48ch; }
.fo-hb-text p { margin-top: 0; margin-bottom: 14px; }
.fo-hb-text .fo-lead { margin-bottom: 20px; margin-top: 0; }

/* Tell us what it sounds like. */
.fo-book { background: var(--fo-coolant); color: var(--fo-ink); }
.fo-book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px var(--fo-gut); align-items: start; }
.fo-type-trace { display: block; width: calc(100% + var(--fo-m)); margin: 18px 0 0 calc(-1 * var(--fo-m)); height: 60px; overflow: visible; }
.fo-type-trace path { fill: none; stroke: var(--fo-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fo-book-intro { font-weight: 700; font-size: clamp(20px, .5vw + 17px, 26px); line-height: 1.3; margin: 18px 0 0; max-width: 24ch; }
.fo-book-hours { font-weight: 700; font-size: 19px; margin: 18px 0 0; max-width: 34ch; }
.fo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--fo-gut); background: var(--fo-concrete); padding: clamp(20px, 3vw, 40px); border-radius: 2px; }
.fo-field { display: grid; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; align-content: start; }
.fo-field-wide { grid-column: 1 / -1; }
.fo-field > label, .fo-field > legend { font-weight: 700; font-size: 17px; padding: 0; }
.fo-well { width: 100%; min-width: 0; font: 400 17px/1.4 var(--fo-text); color: var(--fo-ink); background: var(--fo-well); border: 0; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--fo-ink); padding: 12px 14px; min-height: 48px; appearance: none; }
select.fo-well { background-image: linear-gradient(45deg, transparent 50%, var(--fo-ink) 50%), linear-gradient(135deg, var(--fo-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.fo-well:focus { outline: none; box-shadow: inset 0 -3px 0 var(--fo-coolant); }
.fo-well:focus-visible { outline: 3px solid var(--fo-ink); outline-offset: 2px; }
textarea.fo-well { resize: vertical; }
.fo-well::placeholder { color: #55565A; }
.fo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-chips legend { margin-bottom: 8px; }
.fo-chip { position: relative; cursor: pointer; }
.fo-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fo-chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--fo-well); font-weight: 600; font-size: 16px; }
.fo-chip input:checked + span { background: var(--fo-ink); color: var(--fo-white); }
.fo-chip input:focus-visible + span { outline: 3px solid var(--fo-ink); outline-offset: 2px; }
.fo-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fo-send { height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--fo-ink); color: var(--fo-white); font: 700 17px/1 var(--fo-text); cursor: pointer; }
.fo-status { margin: 0; font-weight: 700; font-size: 17px; }

.fo-foot { padding: 56px 0 40px; }
.fo-foot-grid { display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: flex-start; }
.fo-foot-where { margin: 0; font-size: 16px; line-height: 1.5; }
.fo-foot-nav { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; font-weight: 500; }
.fo-foot-nav a { text-decoration: none; }
.fo-foot-nav a:hover { text-decoration: underline; }
.fo-flat { display: block; width: 100%; height: 2px; margin-top: 40px; }
.fo-flat path { stroke: var(--fo-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* ── narrower ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .fo-found-fig { width: 34vw; }
  .fo-found-body > * { max-width: 60%; }
  .fo-ord-text { grid-column: 1 / -1; }
  .fo-chart { grid-column: 1 / -1; }
  .fo-answer { grid-column: 1 / -1; }
  .fo-ord-notes { grid-column: 1 / -1; grid-row: 5; margin-top: 28px; }
  .fo-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fo-hb-text > * { margin-left: 40%; }
}
@media (max-width: 900px) {
  .fo-sym-head { grid-template-columns: minmax(0, 1fr); }
  .fo-sym-head .fo-lead { margin-top: 20px; }
  .fo-sym-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "b" "c"; }
  .fo-site:not(.fo-js) .fo-bench { grid-column: 1; grid-row: auto; position: relative; top: 0; margin-bottom: 32px; }
  .fo-site:not(.fo-js) .fo-sym-grid > .fo-bench { order: -1; }
  .fo-sym-lines { margin-top: 24px; }
  .fo-book-grid { grid-template-columns: minmax(0, 1fr); }
  .fo-electrical { min-height: 0; }
  .fo-el-fig { position: relative; top: 0; width: auto; margin: 0 0 8px; }
  .fo-el-fig img { aspect-ratio: 4 / 3; }
  .fo-electrical .fo-quiet { max-width: none; }
  .fo-steps { column-gap: 12px; }
}
@media (max-width: 760px) {
  .fo-rider { margin-left: calc(var(--fo-hx, 0) * .25%); }
  .fo-sym .fo-h3 { margin-left: calc(var(--fo-hx, 0) * .25%); }
  .fo-quiet { display: block; margin-top: 28px; }
  .fo-quiet > p, .fo-quiet > .fo-q2 { margin: 0 0 16px; width: auto; min-width: 0; }
}
@media (max-width: 700px) {
  .fo-found { min-height: 0; padding-bottom: 0; }
  .fo-found-body > * { max-width: none; }
  .fo-found-fig { position: relative; width: auto; margin: 32px 0 0; }
  .fo-found-fig img { aspect-ratio: 4 / 5; }
  .fo-sym-pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: 0; padding-right: var(--fo-m); max-width: none; box-sizing: border-box !important; }
  .fo-sym-pick::-webkit-scrollbar { display: none; }
  .fo-sym-opt { white-space: nowrap; flex: none; }
  .fo-bench { margin-top: 28px; }
  .fo-svc-items { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px var(--fo-m) 0; }
  .fo-svc-items li { position: relative; left: 0; top: 0; max-width: none; font-size: 19px; }
  .fo-svc-items li::before { top: -2px; bottom: auto; height: 1em; }
  .fo-hoist { height: 40svh; margin-bottom: 48px; }
  .fo-ord-controls { gap: 18px; margin: 28px 0 8px; }
  .fo-answer { grid-row: 3; margin-top: 12px; min-height: 4.4em; }
  .fo-chart { grid-row: 4; height: 300px; margin-top: 56px; }
  .fo-ord-notes { grid-row: 5; }
  .fo-cases { grid-template-columns: minmax(0, 1fr); }
  .fo-hb-top { grid-template-columns: var(--fo-m) minmax(0, 1fr) var(--fo-m); --fo-sq: calc(100vw - 2 * var(--fo-m)); }
  .fo-hb-ride { --fo-hmin: 0; grid-row: 2; margin: 20px 0 0; }
  .fo-electrical .fo-rider { max-width: none; }
  .fo-hb-text > * { margin-left: 0; }
  .fo-hb-text { margin-top: 16px; }
  .fo-form { grid-template-columns: minmax(0, 1fr); }
  .fo-foot-nav { margin-left: 0; }
  .fo-steps { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .fo-step[data-bore] { grid-column: 1; grid-row: auto; margin: 0; }
  .fo-step-word { font-size: 32px; }
  .fo-eng-box { margin-top: 28px; }
}
/* phones and tablets: the head scrolls away, then the engine pins and the step that just fired shows under it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
    .fo-js .fo-firing { height: 300vh; }
    .fo-js .fo-fire-stage { position: relative; top: 0; height: 100%; overflow: visible; }
    .fo-js .fo-engine-wrap { position: sticky; top: var(--fo-top); height: calc(100svh - var(--fo-top)); margin: 0; display: flex; flex-direction: column; justify-content: center; }
    .fo-js .fo-engine { padding-bottom: 8.6em; }
    .fo-js .fo-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; }
    .fo-js .fo-step[data-bore] { grid-row: 1; position: static; }
    .fo-js .fo-step[data-bore="1"] { grid-column: 1; }
    .fo-js .fo-step[data-bore="2"] { grid-column: 2; margin-top: 24px; }
    .fo-js .fo-step[data-bore="3"] { grid-column: 3; margin-top: 8px; }
    .fo-js .fo-step[data-bore="4"] { grid-column: 4; margin-top: 16px; }
    .fo-js .fo-step-word { font-size: clamp(20px, 6.4vw, 28px); }
    .fo-js .fo-spark { height: 18px; }
    .fo-js .fo-step p { position: absolute; left: 0; right: 0; bottom: 0; max-width: 36ch; }
    .fo-js .fo-step[data-bore="1"] p { animation-name: fo-cp-1; }
    .fo-js .fo-step[data-bore="3"] p { animation-name: fo-cp-3; }
    .fo-js .fo-step[data-bore="4"] p { animation-name: fo-cp-4; }
    .fo-js .fo-step[data-bore="2"] p { animation-name: fo-cp-2; }
    .fo-js .fo-fire-foot { display: none; }
    .fo-js .fo-fire-stage { align-content: start; }
  }
  /* phones: the drawing turned a quarter turn, crank on the left, bores stacked, each step beside its
     own bore; it follows the heading up and pins, sized so the whole stage fits a 375 x 553 screen */
  @media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
    .fo-js .fo-firing { --fo-cph: 122px; --fo-eh: clamp(250px, 100svh - var(--fo-top) - var(--fo-cph) - 44px, 560px); }
    .fo-js .fo-fire-stage { padding-top: clamp(40px, 8vh, 72px); }
    .fo-js .fo-engine-wrap { top: calc(var(--fo-top) + max(12px, (100svh - var(--fo-top) - var(--fo-eh) - var(--fo-cph)) / 2)); height: auto; display: block; margin-top: 28px; }
    .fo-js .fo-engine { display: grid; grid-template-columns: calc(var(--fo-eh) * .3) minmax(0, 1fr); column-gap: 18px; align-items: start; padding-bottom: var(--fo-cph); }
    .fo-js .fo-steps { grid-column: 2; grid-row: 1; height: var(--fo-eh); padding: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); row-gap: 0; }
    .fo-js .fo-step[data-bore] { grid-column: 1; margin: 0; display: flex; flex-direction: column; justify-content: center; }
    .fo-js .fo-step[data-bore="1"] { grid-row: 1; }
    .fo-js .fo-step[data-bore="2"] { grid-row: 2; }
    .fo-js .fo-step[data-bore="3"] { grid-row: 3; }
    .fo-js .fo-step[data-bore="4"] { grid-row: 4; }
    .fo-js .fo-step-word { font-size: clamp(26px, 8.4vw, 36px); }
    .fo-js .fo-spark { width: min(100%, 150px); height: 20px; margin: 6px 0 0; }
    .fo-js .fo-step p { font-size: 16px; line-height: 1.36; padding-top: 18px; }
    .fo-js .fo-eng-box { grid-column: 1; grid-row: 1; position: relative; margin: 0; width: calc(var(--fo-eh) * .3); height: var(--fo-eh); }
    .fo-js .fo-eng { position: absolute; left: 0; top: 0; width: var(--fo-eh); max-width: none; transform-origin: 0 0; transform: rotate(90deg) translateY(-100%); }
  }
}
@keyframes fo-cp-1 { 0%, 8.2% { opacity: 0; visibility: hidden; } 8.4%, 33.2% { opacity: 1; visibility: visible; } 33.4%, 100% { opacity: 0; visibility: hidden; } }
@keyframes fo-cp-3 { 0%, 33.2% { opacity: 0; visibility: hidden; } 33.4%, 58.2% { opacity: 1; visibility: visible; } 58.4%, 100% { opacity: 0; visibility: hidden; } }
@keyframes fo-cp-4 { 0%, 58.2% { opacity: 0; visibility: hidden; } 58.4%, 83.2% { opacity: 1; visibility: visible; } 83.4%, 100% { opacity: 0; visibility: hidden; } }
@keyframes fo-cp-2 { 0%, 83.2% { opacity: 0; visibility: hidden; } 83.4%, 100% { opacity: 1; visibility: visible; } }
@media (max-width: 380px) {
  .fo-tag, .fo-job { width: 150px; }
  .fo-fix, .fo-site .fo-old { padding: 0 10px; font-size: 13px; }
  .fo-sym-opt { font-size: 26px; }
  .fo-ord-controls { gap: 14px; }
  .fo-ord-group { gap: 2px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fo-site *, .fo-site *::before, .fo-site *::after { transition: none !important; animation: none !important; }
}