/* Each changing field is clipped independently; the framing never moves. */
.machno-system-showcase { position: relative; background: #fff; color: #1C1C1C; font-family: "Unbounded", Arial, sans-serif; outline-offset: -4px; }
.machno-system-showcase__stage { position: relative; }
.machno-system-card { position: relative; height: max(100svh, 720px); }
.machno-system-window { position: absolute; overflow: hidden; }
.machno-system-part { width: 100%; height: 100%; background: #fff; }
.machno-system-window--title { left: 5%; top: 10%; width: 54%; height: 25%; font-size: 18px; font-weight: 300;}
.machno-system-window--title .machno-system-part { display: flex; align-items: flex-end; padding-bottom: 12px; }
.machno-system-showcase h2 { margin: 0; color: inherit; font-family: inherit; font-size: clamp(85px, 3.4vw, 64px); line-height: 1.05; font-weight: 300; text-transform: uppercase; overflow-wrap: anywhere; }
.machno-system-window--photo { left: 5%; top: 35%; width: 54%; height: 61%; }
.machno-system-window--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.machno-system-window--drawing { left: 61%; top: 8%; width: 23%; height: 48%; }
.machno-system-window--drawing img { display: block; width: 100%; height: 100%; object-fit: contain; }
.machno-system-window--number { left: 87%; top: 43%; width: 8%; height: 10%; font-size: 85px; line-height: 1; font-weight: 200; text-align: right; }
.machno-system-window--number .machno-system-part { display: flex; align-items: flex-end; justify-content: flex-end; }
.machno-system-window--description { left: 66%; top: 60%; width: 27%; height: 26%; font-size: 18px; line-height: 1.5; font-weight: 300; }
.machno-system-window--description p { margin: 0 0 1.2em; }
.machno-system-showcase__label { position: absolute; z-index: 3; top: 18%; right: 5%; font-size: 20px; font-weight: 500; }
.machno-system-showcase__label strong { font-size: 35px; font-weight: 200; }
.machno-system-showcase__rule { position: absolute; z-index: 3; top: 57%; bottom: 8%; left: 63.5%; right: 5%; border-top: 1px solid #d2d2cf; border-left: 1px solid #d2d2cf; pointer-events: none; }
.machno-system-card__link, .machno-system-showcase__current { position: absolute; top: 54%; right: 5%; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: inherit; }
.machno-system-showcase__current { display: none; z-index: 4; }
.machno-system-showcase__all { position: absolute; z-index: 3; bottom: 4%; left: 63.5%; right: 5%; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; color: inherit; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.machno-system-showcase__all img { width: clamp(36px, 4vw, 72px); height: 64px; object-fit: contain; transition: transform .35s ease; }
.machno-system-showcase__all:hover img, .machno-system-showcase__all:focus-visible img { transform: translateX(8px); }
.machno-system-showcase a[aria-disabled="true"] { cursor: default; letter-spacing: 3.5px; font-size: 13px; font-weight: 700;}
.machno-system-showcase.is-animated .machno-system-showcase__stage { height: 100svh; }
.machno-system-showcase.is-animated .machno-system-card { position: absolute; inset: 0; height: 100%; pointer-events: none; }
.machno-system-showcase.is-animated .machno-system-card__link { display: none; }
.machno-system-showcase.is-animated .machno-system-showcase__current { display: block; }
@media (max-width: 1024px) {
  .machno-system-card { height: max(100svh, 740px); }
  .machno-system-showcase__label { top: 5%; }
  .machno-system-window--title { top: 10%; width: 72%; height: 12%; }
  .machno-system-showcase h2 { font-size: clamp(22px, 6vw, 42px); }
  .machno-system-window--photo { top: 23%; width: 90%; height: 40%; }
  .machno-system-window--number { top: 12%; left: 80%; width: 15%; height: 7%; font-size: 32px; }
  .machno-system-card__link, .machno-system-showcase__current { top: 20%; font-size: 8px; }
  .machno-system-window--drawing { top: 66%; left: 5%; width: 29%; height: 23%; }
  .machno-system-window--description { top: 67%; left: 40%; width: 55%; height: 23%; font-size: 11px; }
  .machno-system-showcase__rule { top: 65%; left: 37%; bottom: 10%; }
  .machno-system-showcase__all { left: 40%; bottom: 3%; font-size: 8px; }
  .machno-system-showcase__all img { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .machno-system-showcase__all img { transition: none; }
  .machno-system-showcase__all:hover img { transform: none; }
}
/* Keep the theme's mobile bottom toolbar clear of the section's final link. */
@media (max-width: 1024px) {
  body:has(.wd-toolbar) .machno-system-showcase.is-animated .machno-system-showcase__stage { height: calc(100svh - 55px); }
}
.machno-system-showcase:not(.is-animated) .machno-system-showcase__label { top: 36px; }
.machno-system-showcase:not(.is-animated) .machno-system-showcase__rule { display: none; }
/* The existing menu SVG is a currentColor mask; no alternate asset is needed. */
body.machno-header-on-light :is(.whb-default_header, .whb-default_header + .whb-clone) :is(.wd-header-fs-nav > a, .wd-header-fs-nav .wd-tools-text, .wd-header-mobile-nav > a, .wd-header-mobile-nav .wd-tools-icon) { color: #1C1C1C !important; }
body.machno-header-on-light :is(.whb-default_header, .whb-default_header + .whb-clone) .site-logo img { filter: brightness(0); }
.machno-system-row > span { display: block; }
/* Five populated rows still need to fit inside the fixed presentation window. */
.machno-system-window--description .machno-system-part:is([data-row-count="4"], [data-row-count="5"]) { display: flex; flex-direction: column; gap: clamp(4px, .8svh, 8px); font-size: clamp(10px, min(.9vw, 1.6svh), 14px); line-height: 1.35; }
.machno-system-window--description .machno-system-part:is([data-row-count="4"], [data-row-count="5"]) p { margin: 0; }
/* Mobile reference: 390px frame, shared photo corners host the fixed links. */
@media (max-width: 1024px) {
 .machno-system-showcase {
  --systems-photo-top: 196px;
  --systems-photo-height: min(calc((100vw - 14px) * .83984375), calc(100svh - var(--systems-photo-top) - 214px));
  --systems-photo-bottom: calc(var(--systems-photo-top) + var(--systems-photo-height));
 }
 .machno-system-window--number { left: 16px; top: 50px; width: 90px; height: 46px; font-size: clamp(34px, 10.2564vw, 48px); font-weight: 300; text-align: left; }
 .machno-system-window--number .machno-system-part { align-items: flex-start; justify-content: flex-start; }
 .machno-system-showcase .machno-system-showcase__label { top: 55px; right: 7px; font-size: clamp(12px, 3.5897vw, 16px); font-weight: 200; line-height: 1.2; }
 .machno-system-showcase__label strong { font-size: 20px; font-weight: 200; }
 .machno-system-window--title { left: 16px; top: 100px; width: calc(100% - 23px); height: calc(var(--systems-photo-top) - 100px); }
 .machno-system-window--title .machno-system-part { padding-bottom: 10px; }
 .machno-system-showcase h2 { font-size: clamp(24px, 7.6923vw, 36px); font-weight: 300; line-height: 1.15; overflow-wrap: normal; }
 .machno-system-window--photo { left: 7px; top: var(--systems-photo-top); width: calc(100% - 14px); height: var(--systems-photo-height); }
 .machno-system-window--description { left: 28px; top: calc(var(--systems-photo-bottom) + 24px); width: calc(64% - 35px); height: 182px; font-size: clamp(10px, 3.0769vw, 14px); font-weight: 300; line-height: 1.6; }
 .machno-system-window--description p { margin-bottom: 14px; }
 .machno-system-window--drawing { left: auto; right: 7px; top: calc(var(--systems-photo-bottom) + 8px); width: 34%; height: 200px; }
 .machno-system-window--drawing img { object-position: right top; }
 .machno-system-showcase__rule { display: none; }
 .machno-system-showcase .machno-system-showcase__all,
 .machno-system-showcase .machno-system-showcase__current,
 .machno-system-showcase .machno-system-card__link {
  left: auto; right: 7px; bottom: auto; background: #fff; color: #1C1C1C;
  padding: 8px 0 8px 16px; font-size: 9px; font-weight: 700; letter-spacing: .1em; line-height: 1.3;
 }
 .machno-system-showcase .machno-system-showcase__all { top: var(--systems-photo-top); }
 .machno-system-showcase__all img { display: none; }
 .machno-system-showcase .machno-system-showcase__current,
 .machno-system-showcase .machno-system-card__link { top: calc(var(--systems-photo-bottom) - 27.7px); }
 /* Short-height/reduced-motion layouts stay readable in the normal page flow. */
 .machno-system-showcase:not(.is-animated) { --systems-photo-top: 196px; --systems-photo-height: calc((100vw - 14px) * .83984375); }
 .machno-system-showcase:not(.is-animated) .machno-system-card { height: calc(var(--systems-photo-bottom) + 220px); }
}
@media (max-width: 1024px) {
 .machno-system-showcase :is(.machno-system-showcase__all, .machno-system-showcase__current, .machno-system-card__link)[aria-disabled="true"] { font-size: 9px; font-weight: 700; letter-spacing: .1em; }
}
/* Distribute spare portrait height instead of leaving it below the drawing. */
@media (max-width: 1024px) {
 .machno-system-showcase.is-animated {
  --systems-stage-height: 100svh;
  --systems-natural-photo-height: calc((100vw - 14px) * .83984375);
  --systems-extra-height: clamp(0px, calc(var(--systems-stage-height) - 428px - var(--systems-natural-photo-height)), 300px);
  --systems-photo-top: calc(196px + var(--systems-extra-height) * .15);
  --systems-photo-height: min(calc(var(--systems-natural-photo-height) + var(--systems-extra-height) * .55), calc(var(--systems-stage-height) - var(--systems-photo-top) - 214px));
  --systems-details-space: calc(var(--systems-extra-height) * .15);
 }
 body:has(.wd-toolbar) .machno-system-showcase.is-animated { --systems-stage-height: calc(100svh - 55px); }
 .machno-system-showcase.is-animated .machno-system-window--description { top: calc(var(--systems-photo-bottom) + 24px + var(--systems-details-space)); }
 .machno-system-showcase.is-animated .machno-system-window--drawing { top: calc(var(--systems-photo-bottom) + 8px + var(--systems-details-space)); }
}
/* Reserve the sticky header row within the existing full-height composition. */
@media (max-width: 1024px) {
 .machno-system-showcase.is-animated {
  --systems-extra-height: clamp(0px, calc(var(--systems-stage-height) - 468px - var(--systems-natural-photo-height)), 300px);
  --systems-photo-top: calc(236px + var(--systems-extra-height) * .15);
 }
 .machno-system-showcase.is-animated .machno-system-window--number { top: 90px; }
 .machno-system-showcase.is-animated .machno-system-showcase__label { top: 95px; }
 .machno-system-showcase.is-animated .machno-system-window--title { top: 140px; height: calc(var(--systems-photo-top) - 140px); }
}
/* Tablet uses the stacked mobile composition, with room for larger type. */
@media (min-width: 768px) and (max-width: 1024px) {
 .machno-system-showcase { --systems-photo-top: 252px; }
 .machno-system-showcase.is-animated { --systems-photo-top: 252px; --systems-photo-height: min(var(--systems-natural-photo-height), calc(var(--systems-stage-height) - 512px)); --systems-details-space: 0px; }
 .machno-system-showcase h2 { font-size: clamp(36px, 4.1vw, 42px); }
 .machno-system-showcase .machno-system-showcase__label { font-size: 18px; }
 .machno-system-showcase__label strong { font-size: 26px; }
 .machno-system-window--description { height: 220px; font-size: 16px; line-height: 1.5; }
 .machno-system-window--description p { margin-bottom: 12px; }
 .machno-system-window--drawing { height: 230px; }
 .machno-system-showcase:not(.is-animated) .machno-system-card { height: calc(var(--systems-photo-bottom) + 260px); }
}