/* Solution and cell pages (solutions/…): the opening with a wide photograph, sections on paper and mist, the drawing of
   the cell at work with its steps, photographs with what Robsen builds, the real cell's videos, the facts as a drawing's
   title block, the next cell along the part's way, and the close on ink. Shared by every cell page. */
body { background: var(--paper); }
.sec { padding: var(--section) 0; }
.sec--mist { background: var(--mist); }
.sec-head { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: var(--s-8); }
.sec-head h2 { font-size: var(--fs-h2); line-height: 1.05; }
.sec-head p { color: var(--steel); font-size: var(--fs-lead); line-height: 1.5; max-width: 56ch; }

/* ---------- the opening: the name and the promise, then the cell's cycle in four photographs, left to right ---------- */
.sol-hero { padding-top: clamp(28px, 4vw, 56px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-sm); color: var(--steel); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.sol-hero-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5) var(--s-8); align-items: end; padding-bottom: clamp(28px, 4vw, 48px); }
.sol-hero-head .crumbs { grid-column: 1 / -1; }
.sol-hero h1 { font-size: var(--fs-display); line-height: 1; max-width: 12ch; }
.sol-hero-side { display: grid; gap: var(--s-5); justify-items: start; padding-bottom: var(--s-2); }
.sol-hero-side p { font-size: var(--fs-lead); line-height: 1.5; color: var(--steel); max-width: 44ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.play-link { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); text-decoration: none; }
.play-link svg { width: 28px; height: 28px; padding: 7px; background: var(--ink); color: #fff; border-radius: var(--radius); }
.play-link:hover { color: var(--blue); }
.play-link:hover svg { background: var(--blue); }
.sol-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sol-frames figure { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.sol-frames img { display: block; width: 100%; height: clamp(300px, 50vh, 540px); object-fit: cover; object-position: var(--fx, 50%) 50%; }
.sol-frames figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-8) var(--s-5) var(--s-4);
  background: linear-gradient(rgba(11, 28, 38, 0), rgba(11, 28, 38, .8)); color: #fff; font-weight: 600; font-stretch: 106%; line-height: 1.25; }
.sol-frames .data { color: var(--blue-on-ink); font-weight: 400; }
/* on hover the photograph's clip plays over it (assets/js/frames.js), fading in once it runs */
.sol-frames .frame-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms var(--ease); pointer-events: none; }
.sol-frames .is-playing .frame-clip { opacity: 1; }
.sol-frames figcaption { z-index: 1; }
@media (max-width: 699px) {
  .sol-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-frames img { height: auto; aspect-ratio: 1; }
  .sol-frames figcaption { padding: var(--s-7) var(--s-3) var(--s-3); gap: var(--s-2); font-size: var(--fs-sm); }
}

/* ---------- the three Ds ---------- */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.three li { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5) var(--s-6) var(--s-5) 0; }
.three li + li { padding-left: var(--s-6); border-left: 1px solid var(--line); }
.three h3 { font-size: 1.5rem; line-height: 1.1; }
.three p { color: var(--steel); max-width: 34ch; }

/* ---------- the cell at work: the drawing beside the steps ---------- */
.flow-drawing { position: relative; aspect-ratio: 2.7 / 1; }
.flow-drawing [data-mv-stage] { position: absolute; inset: 0; }
.flow-drawing .mview__svg { width: 100%; height: 100%; }
.flow-drawing .mview__hot { display: none; }
.flow-note { margin-top: var(--s-3); color: var(--steel); }
/* the five steps under the drawing, left to right as the cell runs */
.steps-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: step; margin-top: var(--s-6); border-top: 1px solid var(--ink); }
.steps-list li { counter-increment: step; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5) 0 0; font-size: var(--fs-sm); line-height: 1.5; }
.steps-list li + li { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.steps-list li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-data); color: var(--blue); }
.cycle-note { margin-top: var(--s-7); max-width: 72ch; padding: var(--s-4) var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.cycle-note b { font-weight: 600; }

/* ---------- keeping the robot out of the heat: the photograph beside the two ways ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.split figure { margin: 0; }
.split img { width: 100%; height: auto; border-radius: var(--radius); background: var(--ink); }
.split figcaption { margin-top: var(--s-3); color: var(--steel); }
.ways { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.ways li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); }
.ways .data { color: var(--blue); padding-top: 4px; }
.ways h3 { font-size: 1.25rem; line-height: 1.2; margin-bottom: var(--s-2); }
.ways p { color: var(--steel); }
.ways-note { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-weight: 600; font-stretch: 106%; }

/* ---------- built around the press: three things in photographs, and what else the cell carries ---------- */
.around { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.around figure { margin: 0; display: grid; gap: var(--s-4); align-content: start; }
.around img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--ink); }
.around h3 { font-size: 1.25rem; line-height: 1.2; }
.around p { color: var(--steel); }
.also { margin-top: var(--s-7); display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.also dt { color: var(--steel); }

/* ---------- the real cell: the video and the photographs ---------- */
.video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border-radius: var(--radius); color: #fff; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: 80px; height: 80px; background: var(--blue); border-radius: var(--radius); transition: background var(--t-fast) var(--ease); }
.video-play svg { width: 26px; height: 26px; margin-left: 4px; }
a.video:hover .video-play, a.video:focus-visible .video-play { background: var(--blue-hover); }
a.video:hover img { transform: scale(1.015); }
a.video:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.video-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); color: var(--steel); }
.video-cap a { color: inherit; }
.video-cap a:hover { color: var(--blue); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--ink); }
.gallery figcaption { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--steel); }

/* ---------- the facts, as a drawing's title block ---------- */
.facts-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.title-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--ink); }
.title-block div { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-strong); display: grid; gap: 2px; }
.title-block div:nth-child(odd) { border-right: 1px solid var(--line-strong); }
.title-block div.wide { grid-column: 1 / -1; border-right: 0; }
.title-block div:last-child { border-bottom: 0; }
.title-block dt { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--steel); }
.title-block dd { margin: 0; font-weight: 500; }
.next-cell { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color var(--t-fast); }
.next-cell:hover { border-color: var(--blue); }
.next-cell h3 { font-size: 1.5rem; line-height: 1.1; display: flex; align-items: center; gap: var(--s-3); }
.next-cell h3 .arrow { width: 20px; height: 20px; transition: transform var(--t-base) var(--ease); }
.next-cell:hover h3 .arrow { transform: translateX(4px); }
.next-cell p { color: var(--steel); }

/* ---------- the close: talk to an engineer ---------- */
.close { background: var(--ink); color: var(--on-ink); padding: var(--section) 0; }
.close .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; }
.close h2 { font-size: var(--fs-h2); line-height: 1.05; max-width: 18ch; }
.close p { color: var(--on-ink-soft); font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; margin-bottom: var(--s-6); }

@media (max-width: 899px) {
  .sol-hero-head, .split, .facts-row, .close .wrap { grid-template-columns: minmax(0, 1fr); }
  .flow-drawing { aspect-ratio: 2 / 1; }
  .steps-list { grid-template-columns: minmax(0, 1fr); }
  .steps-list li, .steps-list li + li { padding: var(--s-3) 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .three { grid-template-columns: minmax(0, 1fr); }
  .three li, .three li + li { padding: var(--s-5) 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .around { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .also { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .title-block { grid-template-columns: minmax(0, 1fr); }
  .title-block div:nth-child(odd) { border-right: 0; }
}

/* ---------- the reasons, two by two ---------- */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.reasons li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-6) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--line); }
.reasons li:nth-child(even) { padding-left: var(--s-6); border-left: 1px solid var(--line); }
.reasons .data { color: var(--blue); padding-top: 6px; }
.reasons h3 { font-size: 1.375rem; line-height: 1.15; margin-bottom: var(--s-2); }
.reasons p { color: var(--steel); max-width: 52ch; }

/* ---------- a strip of videos: the cell's own first, the others a swipe or an arrow away (the next one peeks in) ---------- */
.reel { display: grid; gap: var(--s-3); }
.reel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.reel-track::-webkit-scrollbar { display: none; }
.reel-track:has(> :nth-child(2)) { grid-auto-columns: 88%; }
.reel-item { margin: 0; display: grid; gap: var(--s-2); align-content: start; min-width: 0; scroll-snap-align: start; }
.reel-item .video-cap { margin-top: 0; }
.reel-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.reel-nav button { display: grid; place-items: center; width: 40px; height: 40px; background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.reel-nav button:hover { border-color: var(--blue); color: var(--blue); }
.reel-nav button[aria-disabled="true"] { opacity: .35; cursor: default; border-color: var(--line-strong); color: inherit; }
.reel-nav .arrow { width: 16px; height: 16px; }
.reel-count { order: -1; margin-right: auto; color: var(--steel); }

@media (max-width: 899px) {
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .reasons li, .reasons li:nth-child(even) { padding: var(--s-5) 0; border-left: 0; }
}


/* ---------- questions: one per row, the answer opens under it ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: var(--s-4); align-items: center; padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-size: 1.25rem; font-weight: 600; font-stretch: 106%; letter-spacing: -0.01em; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; justify-self: end;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--t-base) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq .answer { display: grid; gap: var(--s-3); padding: 0 0 var(--s-6); max-width: 72ch; color: var(--steel); }

/* ---------- before and after: two small drawings side by side, a caption under each ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-bottom: var(--s-7); }
.compare figure { margin: 0; display: grid; gap: var(--s-3); align-content: start; }
.compare-drawing { position: relative; aspect-ratio: 16 / 10; background: var(--mist); border-radius: var(--radius); }
.compare-drawing [data-mv-stage] { position: absolute; inset: 0; }
.compare-drawing .mview__svg { width: 100%; height: 100%; }
.compare-drawing .mview__hot { display: none; }
.compare figcaption { color: var(--steel); max-width: 52ch; }
.compare figcaption b { display: block; color: var(--ink); font-weight: 600; font-stretch: 106%; margin-bottom: var(--s-1); }
@media (max-width: 899px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* ---------- a picture with its parts named: a chip (number and name) for each, a leader with an arrowhead to the part ---------- */
.callouts { margin: 0; }
.co-stage { position: relative; }
.co-stage > img, .co-art { display: block; width: 100%; height: auto; }
.co-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.co-lines .halo { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.co-lines .lead { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.co-lines .head { fill: var(--blue); stroke: #fff; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.co { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px 10px 3px 3px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.co b, .co-legend b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; background: var(--blue); color: #fff; border-radius: 3px;
  font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 500; }
.co-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.co-legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.co-legend h3 { font-size: 1.0625rem; line-height: 1.3; margin-bottom: var(--s-1); }
.co-legend p { color: var(--steel); font-size: var(--fs-sm); line-height: 1.5; }

/* ---------- what happens to a part the camera cannot read: four steps in a row, an arrow between each ---------- */
.recover { margin-top: var(--s-8); }
.recover h3 { font-size: var(--fs-h3); line-height: 1.15; margin-bottom: var(--s-5); }
.recover-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7); }
.recover-steps li { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5) var(--s-5); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); }
.recover-steps li + li::before { content: ""; position: absolute; left: calc(-1 * var(--s-7)); top: 50%; width: var(--s-7); height: 14px; translate: 0 -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14'%3E%3Cpath d='M6 7h20M21 2.5 26 7l-5 4.5' fill='none' stroke='%231D5FE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 32px 14px no-repeat; }
.recover-steps .data { color: var(--blue); }
.recover-steps p { color: var(--steel); font-size: var(--fs-sm); line-height: 1.5; }

/* ---------- the stations of a rotary table: the table from above beside a render of it, the steps under them ---------- */
.stations { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.stations figure { margin: 0; }
.stations .render img { display: block; width: 100%; height: auto; }
.stations-art { padding: var(--s-5); background: var(--mist); border-radius: var(--radius); }
.stations figcaption { margin-top: var(--s-3); color: var(--steel); }
.steps-list b { font-weight: 600; color: var(--ink); }

@media (min-width: 1100px) {                                                   /* the names beside the picture */
  .callouts--side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-7); align-items: center; }
  .callouts--side .co-legend { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: 0; }
}
@media (min-width: 900px) {
  .steps-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .co { padding: 2px; gap: 0; }
  .co > span { display: none; }
  .co-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .recover-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .recover-steps li + li::before { left: 50%; top: calc(-1 * var(--s-6)); width: var(--s-6); height: 14px; translate: -50% 0; rotate: 90deg; transform-origin: 50% 50%;
    margin-top: calc((var(--s-6) - 14px) / 2); }
  .stations { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) { .co-legend { grid-template-columns: minmax(0, 1fr); } }

/* ---------- proof on ink: one customer's line in big numbers beside a photograph of it, then the company's own figures ---------- */
.proof { background: var(--ink); color: var(--on-ink); padding: var(--section) 0; }
.proof-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; }
.proof-body { display: grid; gap: var(--s-5); justify-items: start; }
.proof h2 { font-size: var(--fs-h2); line-height: 1.05; }
.proof-body > p { color: var(--on-ink-soft); font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; }
.proof-figs { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); margin: var(--s-2) 0 var(--s-3); }
.proof-figs div { display: flex; flex-direction: column-reverse; gap: var(--s-2); }
.proof-figs dd { margin: 0; font-size: clamp(3rem, 1.8rem + 4vw, 5.5rem); font-weight: 700; font-stretch: var(--wdth-display-pct); line-height: .9; letter-spacing: -.02em; }
.proof-figs dt { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--on-ink-soft); }
.proof-photo { margin: 0; }
.proof-photo img { width: 100%; height: auto; border-radius: var(--radius); }
.play-link--on-ink { color: #fff; }
.play-link--on-ink svg { background: var(--blue); }
.play-link--on-ink:hover { color: var(--blue-on-ink); }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-8); border-top: 1px solid rgba(255, 255, 255, .16); }
.figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-2); padding: var(--s-5) var(--s-5) 0 0; }
.figures div + div { padding-left: var(--s-5); border-left: 1px solid rgba(255, 255, 255, .12); }
.figures dd { margin: 0; font-size: 2.25rem; font-weight: 600; font-stretch: 106%; line-height: 1; }
.figures dt { color: var(--on-ink-soft); font-size: var(--fs-sm); max-width: 24ch; }

/* ---------- a product family: one card per model, each a link to its page on the product site, and a card to ask ---------- */
.family { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.family-card { display: grid; gap: var(--s-2); align-content: start; color: inherit; text-decoration: none; }
.family-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--s-2); border-radius: var(--radius); background: var(--ink); }
.family-card .data { color: var(--steel); }
.family-card h3 { font-size: 1.5rem; line-height: 1.1; transition: color var(--t-fast) var(--ease); }
.family-card p { color: var(--steel); font-size: var(--fs-sm); line-height: 1.5; }
.family-more { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-1); color: var(--blue); font-weight: 600; font-size: var(--fs-sm); }
.family-more .ext-icon { width: 12px; height: 12px; color: currentColor; }
.family-more .arrow { width: 12px; height: 12px; }
.family-card:hover h3 { color: var(--blue); }
.family-card:hover .family-more { text-decoration: underline; text-underline-offset: 4px; }
.family-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--radius); }
.family-ask { display: grid; gap: var(--s-4); align-content: start; justify-items: start; padding: var(--s-6) var(--s-5); background: var(--ink); color: var(--on-ink); border-radius: var(--radius); }
.family-ask h3 { font-size: 1.5rem; line-height: 1.1; }
.family-ask p { color: var(--on-ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.family-ask .text-link { color: var(--blue-on-ink); }
.around figcaption .text-link { margin-top: var(--s-2); }

@media (min-width: 900px) { .around--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .family { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 599px) { .family { grid-template-columns: minmax(0, 1fr); } }

/* ---------- a silent looping video in the page (assets/js/loops.js): 16:9, its poster until it is near ---------- */
.loop-video { margin: 0; }
.loop-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--ink); }
.loop-video figcaption { margin-top: var(--s-3); color: var(--steel); }
.reasons-video { margin-bottom: var(--s-7); }
.stations-video { margin-bottom: var(--s-7); }

/* a paragraph that follows a section head inside a split */
.split-text { margin-top: var(--s-5); color: var(--steel); font-size: var(--fs-lead); line-height: 1.5; max-width: 56ch; }

/* ---------- a photograph with its real dimensions drawn on it (assets/js/dims.js draws them once, in view) ---------- */
.dimphoto { margin: 0; }
.dimphoto-stage { position: relative; }
.dimphoto-stage img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--ink); }
.dimphoto figcaption { margin-top: var(--s-3); color: var(--steel); }
.dl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dl path { vector-effect: non-scaling-stroke; }
.dl-ext { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1; }
.dl-line { fill: none; stroke: #fff; stroke-width: 1.5; }
.dl-head { fill: #fff; }
.dl-tag { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); padding: 2px 8px; white-space: nowrap;
  background: var(--paper); color: var(--ink); border: 1px solid var(--blue); border-radius: 3px; }
.dims-anim .dl-ext, .dims-anim .dl-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dims-anim .dl-head, .dims-anim .dl-tag { opacity: 0; }
.dims-anim .is-drawn .dl-ext { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease); }
.dims-anim .is-drawn .dl-line { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-measure) var(--ease) 300ms; }
.dims-anim .is-drawn .dl-head { opacity: 1; transition: opacity 200ms var(--ease) 1100ms; }
.dims-anim .is-drawn .dl-tag { opacity: 1; transition: opacity 300ms var(--ease) 1150ms; }
.unit-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.unit-row .ways { margin-top: 0; }
.why-split { margin-bottom: var(--s-7); }
@media (max-width: 899px) {
  .unit-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .dl-tag { padding: 1px 5px; font-size: 11px; }
}

/* ---------- a story drawing with its steps beside it, the running step lit, and where it happens on a chip ---------- */
.story { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.story-drawing { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.story-drawing [data-mv-stage] { position: absolute; inset: 0; }
.story-drawing .mview__svg { width: 100%; height: 100%; }
.story-drawing .mview__hot { display: none; }
.story-place { position: absolute; right: var(--s-4); top: var(--s-4); z-index: 1; padding: 4px 10px; background: var(--ink); color: #fff; border-radius: var(--radius); }
.story-place[data-at="plant"] { background: var(--blue); }
.story-place[data-at="road"] { background: var(--steel); }
.story-steps { display: grid; counter-reset: st; border-top: 1px solid var(--ink); }
.story-steps li { counter-increment: st; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  color: var(--steel); transition: color var(--t-base) var(--ease); }
.story-steps li::before { content: counter(st, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-data); padding-top: 3px; color: var(--line-strong); transition: color var(--t-base) var(--ease); }
.story-steps b { display: block; color: var(--ink); font-weight: 600; }
.story-steps li.is-on { color: var(--ink); }
.story-steps li.is-on::before { color: var(--blue); }
.story-steps li.is-on b { color: var(--blue); }
@media (max-width: 899px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .story-drawing { aspect-ratio: 4 / 3; }
}

/* a quiet line under pictures whose parts are blurred for the customer's sake */
.blur-note { margin-top: var(--s-3); color: var(--steel); font-size: var(--fs-sm); }
.sol-hero .blur-note { margin-top: var(--s-3); }

/* the two ways out for the dust (grinding and polishing): plain line drawings in the compare frames */
.extract .compare-drawing > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.extract .xa-box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.extract .xa-win { fill: var(--mist); stroke: var(--ink); stroke-width: 1; }
.extract .xa-line, .extract .xa-floor { fill: none; stroke: var(--ink); stroke-width: 1; }
.extract .xa-floor { stroke: var(--line); stroke-width: 1.5; }
.extract .xa-fan { fill: var(--blue); }
.extract .xa-duct { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linejoin: round; }
.extract .xa-plant { fill: none; stroke: var(--steel); stroke-width: 7; stroke-linecap: round; opacity: .45; }
.extract .xa-arrow--plant { stroke: var(--steel); }
.extract .xa-arrow { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.extract .xa-dust { fill: none; stroke: var(--steel); stroke-width: 1; stroke-dasharray: 2 3; }
.extract .xa-t { font-family: var(--font-mono); font-size: 11px; fill: var(--steel); }

/* Assembly and quality control pages: a speed tag on sped-up loops, two loops side by side, the vision screens,
   and the dark band about the team. */
.lv-stage { position: relative; }
.speed { position: absolute; z-index: 1; top: var(--s-3); right: var(--s-3); padding: 2px 7px; border-radius: 4px; background: rgb(0 0 0 / .55); color: #fff; font-size: 0.75rem; line-height: 1.4; letter-spacing: .02em; pointer-events: none; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.duo figure { margin: 0; }
.duo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--ink); }
.duo figcaption { margin-top: var(--s-3); color: var(--steel); }
.gallery--vision img { aspect-ratio: 1400 / 948; object-fit: cover; background: #111; }
.sec--ink { background: var(--ink); color: var(--on-ink); }
.sec--ink .sec-head p, .sec--ink .reasons p { color: var(--on-ink-soft); }
.sec--ink .reasons { border-top-color: var(--on-ink-soft); }
.sec--ink .reasons li, .sec--ink .reasons li:nth-child(even) { border-color: rgb(255 255 255 / .14); }
.sec--ink .reasons .data { color: var(--on-ink-soft); }
@media (max-width: 899px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}

/* Hover clips outside the opening (frames.js lays the clip over the still): a small play mark says it moves, the steps
   of the way through as a grid of clips. On phones they stay stills. */
.hover-clip { margin: 0; }
.hc-stage { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.hc-stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hc-stage .frame-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms var(--ease); pointer-events: none; }
.hover-clip.is-playing .frame-clip { opacity: 1; }
.hover-clip figcaption { margin-top: var(--s-3); color: var(--steel); }
@media (hover: hover) and (pointer: fine) {
  .hc-stage::after { content: ""; position: absolute; left: var(--s-3); bottom: var(--s-3); width: 26px; height: 26px; border-radius: 50%; z-index: 1;
    background: rgb(0 0 0 / .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l10-6.5z'/%3E%3C/svg%3E") center / 12px no-repeat;
    transition: opacity 200ms var(--ease); pointer-events: none; }
  .hover-clip.is-playing .hc-stage::after { opacity: 0; }
}
.clip-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.clip-steps figcaption { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s-2); margin-top: var(--s-4); color: var(--steel); line-height: 1.5; }
.clip-steps figcaption .data { grid-row: span 2; color: var(--blue); padding-top: 3px; }
.clip-steps figcaption b { display: block; color: var(--ink); font-size: 1.125rem; line-height: 1.25; margin-bottom: var(--s-1); }
.hover-row { margin-top: var(--s-6); }
.sec > .wrap.duo { margin-top: var(--s-7); }
@media (max-width: 1099px) { .clip-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .clip-steps { grid-template-columns: minmax(0, 1fr); } }
.duo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .duo--3 { grid-template-columns: minmax(0, 1fr); } }

/* The 3D cell built from STEP data (machine tending page; viewer copied from irocube.com into assets/m7-cell/): an orbit
   video with a call to explore, then the viewer in a frame. Our blue stands in for irocube.com's signal yellow. */
.cell3d { position: relative; aspect-ratio: 16 / 10; max-height: 82vh; margin-inline: auto; background: #EEF1F3; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cell3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.cell3d.is-ready iframe { opacity: 1; pointer-events: auto; }
.cell3d__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #EEF1F3; }
.cell3d__open { position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px clamp(20px, 7%, 56px); background: linear-gradient(to top, rgb(11 28 38 / .22), rgb(11 28 38 / 0) 40%); }
.cell3d__cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 26px; border-radius: var(--radius);
  background: var(--blue); color: #fff; box-shadow: 0 10px 28px rgb(11 28 38 / .28); transition: transform .25s var(--ease), background .2s; }
.cell3d__cta b { font-size: 1.125rem; font-weight: 650; }
.cell3d__cta small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.cell3d__open:hover .cell3d__cta, .cell3d__open:focus-visible .cell3d__cta { background: var(--blue-hover); transform: translateY(-2px); }
.cell3d__cta::after { content: ""; position: absolute; right: 27px; bottom: 5px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.cell3d__pointer { position: absolute; right: -10px; bottom: -22px; width: 26px; height: 26px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)); }
.cell3d.is-near .cell3d__pointer { animation: cell3d-pointer 3.8s var(--ease) infinite; }
.cell3d.is-near .cell3d__cta::after { animation: cell3d-click 3.8s ease-out infinite; }
.cell3d__open:hover .cell3d__pointer, .cell3d__open:hover .cell3d__cta::after { animation: none; opacity: 0; }
@keyframes cell3d-pointer {
  0% { opacity: 0; transform: translate(150px, 90px); }
  12% { opacity: 1; }
  48% { transform: translate(-30px, -18px); }
  53% { transform: translate(-30px, -18px) scale(.82); }
  58%, 86% { opacity: 1; transform: translate(-30px, -18px); }
  100% { opacity: 0; transform: translate(-30px, -18px); }
}
@keyframes cell3d-click { 0%, 51% { opacity: 0; transform: scale(.5); } 54% { opacity: .8; } 75%, 100% { opacity: 0; transform: scale(1.6); } }
.cell3d.is-live .cell3d__open { display: none; }
.cell3d__status { position: absolute; left: 50%; bottom: clamp(16px, 6%, 44px); transform: translateX(-50%); z-index: 2; margin: 0;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; white-space: nowrap;
  background: rgb(11 28 38 / .84); color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; transition: opacity .4s var(--ease); }
.cell3d__status i { display: block; width: 96px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .25); overflow: hidden; }
.cell3d__status b { display: block; width: 0; height: 100%; background: var(--blue-on-ink); transition: width .3s var(--ease); }
.cell3d.is-ready .cell3d__status { opacity: 0; }
.cell3d-note { margin-top: var(--s-3); color: var(--steel); font-size: var(--fs-sm); }
@media (max-width: 720px) { .cell3d { aspect-ratio: 4 / 5; } .cell3d.is-live { aspect-ratio: 2 / 3; } }
@media (prefers-reduced-motion: reduce) { .cell3d.is-near .cell3d__pointer, .cell3d.is-near .cell3d__cta::after { animation: none; } }