/* DCFrame by ELAS — "machine paint + technical drawing".
   Signal yellow owns whole fields (hero, close); black ink; cool zinc paper; blue-grey for dimensions. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jbmono-var.woff2") format("woff2");
  font-weight: 100 800; font-display: swap; }

:root {
  --paper: #e9edef;        /* cool zinc, like galvanised sheet */
  --paper-2: #f5f7f8;
  --ink: #111417;
  --ink-2: #3b454e;        /* secondary text, cool-tinted */
  --line: #c3cbd1;
  --signal: #f6b300;       /* RAL 1003 signal yellow */
  --signal-deep: #d99a00;
  --dim: #3f6283;          /* dimension lines and annotation */
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --step: clamp(64px, 9vw, 128px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
  accent-color: var(--ink);
  scrollbar-color: #8b969f var(--paper);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 "Archivo", system-ui, sans-serif; font-stretch: 100%;
  font-feature-settings: "tnum" 1; text-rendering: optimizeLegibility; caret-color: var(--ink);
}
::selection { background: var(--signal); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "zero" 1; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }

h1, h2 { font-stretch: 112%; font-weight: 780; letter-spacing: -0.02em; line-height: 1.03; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: clamp(24px, 3vw, 40px); }
p { margin: 0; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 38em; margin-top: 22px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; font-stretch: 105%;
  text-decoration: none; border: 2px solid var(--ink); padding: 11px 18px; cursor: pointer; line-height: 1.1;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn-ink { background: var(--ink); color: var(--signal); }
.btn-ink:hover { background: transparent; color: var(--ink); }
.btn-lg { padding: 16px 26px; font-size: 1.08rem; }
.btn:active { transform: translateY(1px); }
.link { font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }

/* ---------------------------------------------------------------- header */
.bar { position: sticky; top: 0; z-index: 10; background: var(--paper-2); border-bottom: 1px solid var(--ink); }
.bar-in { display: flex; align-items: center; gap: 24px; min-height: 64px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 18px; height: 26px; color: var(--ink); flex: none; }
.word { font-weight: 820; font-stretch: 118%; font-size: 1.28rem; letter-spacing: -0.02em; }
.by { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-2); padding-left: 10px; border-left: 1px solid var(--line); }
.by img { height: 11px; width: auto; filter: brightness(0); opacity: .8; }
.nav { display: flex; gap: 20px; margin-left: auto; font-weight: 560; font-size: .97rem; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--ink); }
.nav .lang { color: var(--ink-2); }
.menu { display: none; }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--signal); border-bottom: 1px solid var(--ink); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(48px, 7vw, 96px); align-items: start; }
.hero h1 { font-size: clamp(2.3rem, 3.9vw, 3.7rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.terms { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); }
.terms li { padding: 12px 22px 0 0; margin-right: 22px; font-weight: 650; font-size: .98rem; position: relative; }
.terms li + li::before { content: ""; position: absolute; left: -22px; top: 14px; bottom: 2px; width: 1px; background: var(--ink); }

/* ---------------------------------------------------------------- rack elevation (signature) */
.rack { margin: 0; background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 0 18px 40px -18px rgba(17, 20, 23, .45); }
.rack-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--ink);
  font-weight: 700; font-size: .9rem; }
.rack-note { font-weight: 450; color: var(--ink-2); }
.rack-body { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, .85fr); gap: 0 16px; padding: 14px; }
.rack-u { display: grid; grid-template-rows: repeat(42, minmax(0, 1fr)); height: 504px; font-size: .6rem; color: var(--dim); line-height: 1; padding-block: 4px; }
.rack-u span { display: flex; align-items: center; justify-content: flex-end; }
.rack-frame { display: grid; grid-template-columns: 12px minmax(0, 1fr) 12px; grid-template-rows: minmax(0, 1fr); border: 3px solid var(--ink); background: var(--paper); height: 504px; }
.rail { border: 0; padding: 0; cursor: pointer; border-inline: 1px solid var(--ink);
  background: repeating-linear-gradient(to bottom, var(--ink) 0 3px, transparent 3px 12px) center / 4px 100% no-repeat, var(--paper-2); }
.rail:hover, .rail[aria-pressed="true"] { background-color: var(--signal); }
.rack-grid { display: grid; grid-template-rows: repeat(42, minmax(0, 1fr)); gap: 1px; padding: 1px 3px; min-height: 0; overflow: hidden; }
.u { display: flex; align-items: center; min-height: 0; margin: 0; font: inherit; font-size: .7rem; font-weight: 650; line-height: 1; overflow: hidden; padding: 0 8px; text-align: left; }
.u span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-gear { color: var(--ink-2); border: 1px solid #9aa4ac;
  background: repeating-linear-gradient(135deg, #cfd6db 0 1px, transparent 1px 7px), var(--paper); }
.u-ours { cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--signal);
  transition: background .25s var(--ease), color .25s var(--ease); }
.u-ours:hover, .u-ours[aria-pressed="true"] { background: var(--signal); color: var(--ink); }
.u-ours.scan { animation: scan .9s var(--ease) both; }
@keyframes scan { 0% { background: var(--signal); color: var(--ink); } 100% { background: var(--ink); color: var(--signal); } }
.spec { align-self: stretch; display: flex; flex-direction: column; border-top: 3px solid var(--ink); padding-top: 12px; }
.rack-count { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ink); font-weight: 700; font-size: .95rem; line-height: 1.3; }
.spec-name { font-weight: 780; font-stretch: 110%; font-size: 1.2rem; line-height: 1.15; }
.spec-desc { margin-top: 8px; font-size: .95rem; color: var(--ink-2); }
.spec-meta { margin-top: 14px; font-size: .74rem; line-height: 1.5; color: var(--dim); border-top: 1px dashed var(--line); padding-top: 10px; }
.legend { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 6px; font-size: .78rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 18px; height: 10px; margin-right: 8px; vertical-align: -1px; border: 1px solid var(--ink); }
.k-ours { background: var(--ink); }
.k-gear { background: repeating-linear-gradient(135deg, #9aa4ac 0 1px, transparent 1px 5px), var(--paper); }

/* ---------------------------------------------------------------- photo band */
.band figure { margin: 0; }
.band-img { width: 100%; height: clamp(260px, 42vw, 560px); object-fit: cover; }
.band figcaption { padding-block: 12px; font-size: .88rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- sections */
.sec { padding-block: var(--step); }
.sec + .sec { border-top: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }
.bom { width: 100%; border-collapse: collapse; font-size: 1rem; }
.bom thead th { text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); padding: 0 16px 10px 0; border-bottom: 2px solid var(--ink); }
.bom td, .bom tbody th { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.bom tbody th { font-weight: 720; font-stretch: 108%; font-size: 1.12rem; }
.bom tbody tr { transition: background .2s var(--ease); }
.bom tbody tr:hover { background: var(--paper-2); }
.bom .pos { color: var(--dim); font-size: .85rem; width: 3.5em; }
.fam tbody th a { text-decoration: none; background: linear-gradient(var(--signal), var(--signal)) 0 88% / 0 38% no-repeat; transition: background-size .35s var(--ease); }
.fam tbody tr:hover th a, .fam tbody th a:focus-visible { background-size: 100% 38%; }
.bom .pm { width: 3.6em; text-align: center; padding-right: 0; vertical-align: middle; }
.bom thead .pm { font-size: .68rem; letter-spacing: .02em; text-transform: none; padding-right: 0; }
.bom abbr { text-decoration: none; }
.bom .on { display: inline-block; width: 12px; height: 12px; background: var(--ink); }
.bom tbody tr:hover .on { background: var(--signal-deep); }
.bom .pm-text { display: none; }
.bom td.sum { color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: .72rem; font-weight: 650; letter-spacing: .02em; padding: 3px 7px; border: 1px solid var(--ink-2); color: var(--ink-2); white-space: nowrap; }

/* plant */
.sec-plant { background: var(--paper-2); }
.plant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.plant-text { max-width: 36em; color: var(--ink-2); }
.plant-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--ink); }
.ds { margin: 32px 0 28px; border-top: 2px solid var(--ink); }
.ds-row { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ds dt { font-weight: 700; font-size: .9rem; }
.ds dd { margin: 0; font-size: .95rem; }
.ds-full { margin-top: 0; }
.ds-full .ds-row { grid-template-columns: 14em minmax(0, 1fr); padding: 16px 0; }
.ds-full dd { font-size: 1.05rem; }

/* ruler timeline: tick positions follow the day scale (0, 7, 30, series) */
.ruler { list-style: none; margin: 16px 0 0; padding: 36px 0 0; position: relative; display: grid;
  grid-template-columns: minmax(190px, 7fr) 23fr 25fr 18fr; }
.ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: var(--ink); }
.ruler::after { content: ""; position: absolute; right: -2px; top: 12px; border: 7px solid transparent; border-left: 12px solid var(--ink); border-right: 0; }
.ruler li { position: relative; padding-right: 16px; }
.ruler li::before { content: ""; position: absolute; left: 0; top: -26px; width: 2px; height: 18px; background: var(--ink); }
.ruler .t { display: block; font-size: .9rem; font-weight: 700; color: var(--dim); }
.ruler .d { display: block; margin-top: 6px; font-weight: 650; font-size: 1.05rem; line-height: 1.3; max-width: 14em; }

/* gallery */
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.gallery figure { margin: 0; display: flex; flex-direction: column; }
.gallery img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; border: 1px solid var(--ink); }
.gallery .g0 { grid-row: span 2; }
.gallery .g0 img { aspect-ratio: auto; flex: 1; min-height: 0; }
.gallery .g3 { grid-column: 2 / span 2; }
.gallery .g3 img { aspect-ratio: 21 / 9; }
.gallery figcaption { font-size: .85rem; color: var(--ink-2); padding-top: 8px; }

/* close + title block */
.close { background: var(--signal); border-top: 1px solid var(--ink); padding-block: var(--step); }
.close-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.close h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); margin-bottom: 18px; }
.close-copy p { max-width: 30em; font-size: 1.12rem; margin-bottom: 30px; }
.titleblock { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); background: var(--paper-2); }
.titleblock div { padding: 10px 14px 12px; border-bottom: 1px solid var(--ink); }
.titleblock div:nth-child(1), .titleblock div:nth-child(4) { border-right: 1px solid var(--ink); }
.titleblock .wide { grid-column: 1 / -1; }
.titleblock div:nth-child(4), .titleblock div:nth-child(5) { border-bottom: 0; }
.titleblock dt { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.titleblock dd { margin: 4px 0 0; font-weight: 650; overflow-wrap: anywhere; }
.titleblock .certs { font-size: .9rem; font-weight: 600; }

/* sub pages */
.sub { background: var(--paper-2); border-bottom: 1px solid var(--ink); }
.sub-in { padding-block: clamp(48px, 6vw, 88px); }
.sub-in.has-img { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sub h1 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.sub-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); }
.need-list { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 2px solid var(--ink); }
.need-list li { counter-increment: n; padding: 16px 0 16px 44px; position: relative; border-bottom: 1px solid var(--line); font-weight: 600; }
.need-list li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 500 .85rem "JetBrains Mono", monospace; color: var(--dim); }

/* form */
.rfq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; max-width: 900px; border-top: 2px solid var(--ink); padding-top: 28px; }
.rfq label { display: grid; gap: 8px; font-weight: 650; font-size: .95rem; }
.rfq .full { grid-column: 1 / -1; }
.rfq input, .rfq select, .rfq textarea { font: inherit; font-weight: 450; color: var(--ink); background: var(--paper-2);
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: 12px; transition: background .2s var(--ease); }
.rfq input:focus, .rfq select:focus, .rfq textarea:focus { outline: none; background: #fff6d6; border-bottom-color: var(--signal-deep); }
.rfq input:user-invalid { border-bottom-color: #b3261e; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.note { color: var(--ink-2); font-size: .9rem; max-width: 34em; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.4rem; margin: 32px 0 12px; }
.prose p { color: var(--ink-2); }

/* footer */
.foot { background: var(--ink); color: #d7dde1; padding-top: 56px; font-size: .95rem; }
.foot a { color: #fff; }
.foot .mark { color: #fff; }
.foot .word { color: #fff; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.foot-brand p { margin-top: 14px; max-width: 32em; color: #aab4bb; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot address { font-style: normal; color: #aab4bb; line-height: 1.7; }
.foot-base { display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid #2c3339; padding-block: 18px; font-size: .82rem; color: #8b969f; }
.certs { display: inline-flex; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.certs span { white-space: nowrap; }
.certs span + span::before { content: "·"; margin: 0 .45em; }
.certs { column-gap: 0; }
.foot :focus-visible { outline-color: var(--signal); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .nav { gap: 16px; font-size: .92rem; }
  .by { display: none; }
}
@media (max-width: 920px) {
  .menu { display: inline-flex; margin-left: auto; font: inherit; font-weight: 650; background: none; border: 2px solid var(--ink); padding: 8px 14px; cursor: pointer; color: var(--ink); }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0;
    background: var(--paper-2); border-bottom: 1px solid var(--ink); padding: 8px var(--gut) 16px; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .bar .btn { display: none; }
  .hero-in, .plant, .close-in, .sub-in.has-img { grid-template-columns: minmax(0, 1fr); }
  .rack-body { grid-template-columns: 26px minmax(0, 1fr); }
  .spec { grid-column: 1 / -1; margin-top: 16px; }
  .rack-u, .rack-frame { height: 440px; }
  .plant-img { order: -1; }
  .plant-img img { aspect-ratio: 16 / 10; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .g0 { grid-row: auto; grid-column: 1 / -1; }
  .gallery .g0 img { aspect-ratio: 16 / 10; flex: none; }
  .gallery .g3 { grid-column: 1 / -1; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .terms { flex-direction: column; }
  .terms li { padding-top: 10px; }
  .terms li + li::before { display: none; }
  .ruler { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 28px; gap: 22px; }
  .ruler::before { left: 6px; right: auto; top: 6px; bottom: 0; width: 2px; height: auto; }
  .ruler::after { display: none; }
  .ruler li::before { left: -28px; top: 8px; width: 14px; height: 2px; }
  .bom thead { display: none; }
  .bom .pm { display: none; }
  .bom .pm-text { display: block; color: var(--dim); font-size: .85rem; font-weight: 600; }
  .bom, .bom tbody, .bom tr, .bom td, .bom th { display: block; width: auto !important; }
  .bom tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .bom td, .bom tbody th { border: 0; padding: 4px 0; }
  .ds-row, .ds-full .ds-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .need-list { grid-template-columns: minmax(0, 1fr); }
  .rfq { grid-template-columns: minmax(0, 1fr); }
  .titleblock { grid-template-columns: minmax(0, 1fr); }
  .titleblock div { border-right: 0 !important; border-bottom: 1px solid var(--ink) !important; }
  .titleblock div:last-child { border-bottom: 0 !important; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .rack-u, .rack-frame { height: 400px; }
  .u { font-size: 10px; padding: 0 5px; }
}

/* ================================================================ motion
   Thesis: "the drawing draws itself". Dimension lines and rules are drawn (stroke-dashoffset / scaleX),
   photos are unmasked like a detail view opening, reveals are short and quiet. Content is visible by default;
   hidden start states apply only under html.motion (set by JS when reduced motion is not requested). */

/* dimension lines around the rack */
.frame-col { position: relative; padding: 30px 40px 0 0; }
.dim { position: absolute; color: var(--dim); }
.dim svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dim line { stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; fill: none; }
.dim-label { position: absolute; font-size: .66rem; white-space: nowrap; background: var(--paper-2); padding: 0 6px; }
.dim-h { left: 0; right: 40px; top: 6px; height: 12px; }
.dim-h .dim-label { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dim-v { right: 8px; top: 30px; bottom: 0; width: 12px; }
.dim-v .dim-label { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.rack-u { margin-top: 30px; }

.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.motion .drawn .draw { stroke-dashoffset: 0; }
.motion .drawn .tick { transition-delay: .9s; transition-duration: .35s; }
.motion .dim-label { opacity: 0; transition: opacity .5s var(--ease) 1s; }
.motion .drawn .dim-label { opacity: 1; }

/* quiet reveals */
.motion .rv { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.spatial .rv { transform: translateY(18px); }
.motion .rv.in { opacity: 1; transform: none; }
.motion .bom.rv { transform: none; opacity: 1; }
.motion .bom.rv tbody tr { opacity: 0; transition: opacity .55s var(--ease), transform .55s var(--ease), background .2s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.spatial .bom.rv tbody tr { transform: translateX(-10px); }
.motion .bom.rv.in tbody tr { opacity: 1; transform: none; }

/* datasheet rules draw left to right */
.ds-row { position: relative; border-bottom: 0; }
.ds-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
.motion .ds.rv { opacity: 1; transform: none; }
.motion .ds.rv .ds-row::after { transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.motion .ds.rv.in .ds-row::after { transform: scaleX(1); }
.motion .ds.rv .ds-row > * { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.motion .ds.rv.in .ds-row > * { opacity: 1; }

/* ruler: the dimension line draws, then ticks and labels land in order */
.ruler::before { display: none; }
.ruler-svg { position: absolute; left: 0; right: 0; top: 17px; width: 100%; height: 4px; overflow: visible; }
.ruler-svg line { stroke: var(--ink); stroke-width: 2; }
.motion .ruler.rv { opacity: 1; transform: none; }
.motion .ruler.rv .draw { transition-duration: 1.4s; }
.motion .ruler.rv.in .draw { stroke-dashoffset: 0; }
.motion .ruler.rv::after { opacity: 0; transition: opacity .3s var(--ease) 1.3s; }
.motion .ruler.rv.in::after { opacity: 1; }
.motion .ruler.rv li::before { transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); transition-delay: calc(var(--i, 0) * 330ms + 150ms); }
.spatial .ruler.rv li > * { transform: translateY(8px); }
.motion .ruler.rv li > * { opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 330ms + 300ms); }
.motion .ruler.rv.in li::before { transform: none; }
.motion .ruler.rv.in li > * { opacity: 1; transform: none; }

/* photo band: framed detail opens to full bleed while the image settles (scroll-linked, --p from JS) */
.band figure { overflow: hidden; }
.band-mask { overflow: hidden; }
.motion .band-mask { clip-path: inset(calc((1 - var(--m, 1)) * 10%) calc((1 - var(--m, 1)) * 16%)); will-change: clip-path; }
.spatial .band-img { transform: translateY(calc((var(--p, .5) - .5) * -70px)) scale(calc(1.16 - var(--m, 1) * .12)); will-change: transform; }

/* plant photo: slow parallax inside its frame */
.plant-img { overflow: hidden; border: 1px solid var(--ink); }
.plant-img img { border: 0; }
.spatial .plant-img img { transform: translateY(calc((var(--p, .5) - .5) * -60px)) scale(1.12); will-change: transform; }

/* gallery: each photo is unmasked bottom-up and settles from a slight zoom */
.gallery figure { overflow: hidden; }
.gallery img { transition: transform .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.03); }
.motion .gallery figure.rv { opacity: 1; transform: none; }
.spatial .gallery figure.rv img { transform: scale(1.12); }
.motion .gallery figure.rv img { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease), transform 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.motion .gallery figure.rv.in img { clip-path: inset(0); transform: none; }
.motion .gallery figure.rv.in:hover img { transform: scale(1.03); transition-delay: 0s; }

/* title block cells draw in */
.motion .titleblock.rv { transform: none; }
.motion .titleblock.rv > div { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.motion .titleblock.rv.in > div { opacity: 1; }

/* no wrapping of family / part names on wide screens */
@media (min-width: 1024px) {
  .bom tbody th, .fam tbody th a { white-space: nowrap; }
  .fam tbody th { width: auto; }
}
@media (max-width: 920px) {
  .frame-col { padding-right: 34px; }
  .dim-h { right: 34px; }
  .dim-v { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .band-img, .plant-img img { transform: none !important; }
}

/* ================================================================ drawing hero (v3: technology-led)
   Flat pattern of an illustrative part; each layer = what one technology does to it. */
.drawing { margin: 0; background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 0 18px 40px -18px rgba(17, 20, 23, .45); }
.drawing-body { padding: 8px 14px 0; }
.part { display: block; width: 100%; height: auto; }
.part .layer { fill: none; stroke: var(--ink); stroke-width: 1.4; transition: opacity .35s var(--ease), stroke-width .35s var(--ease); }
.part .L-punch circle { stroke-width: 1.1; }
.part .L-bend line { stroke-dasharray: 7 5; stroke-width: 1.2; }
.part .L-weld .solid { fill: var(--ink); }
.part .coat-fill { fill: url(#hatch); stroke: none; opacity: 0; }
.part pattern line { stroke: var(--signal-deep); stroke-width: 3; }
.part .dims line { stroke: var(--dim); stroke-width: 1; }
.part .dims text { fill: var(--dim); font: 500 12px "JetBrains Mono", ui-monospace, monospace; }
.drawing[data-active] .layer:not(.coat-fill) { opacity: .16; }
.drawing[data-active="laser"] .L-laser, .drawing[data-active="punch"] .L-punch, .drawing[data-active="bend"] .L-bend,
.drawing[data-active="hardware"] .L-hardware, .drawing[data-active="weld"] .L-weld { opacity: 1; stroke-width: 2.4; }
.drawing[data-active="coat"] .coat-fill { opacity: 1; }
.drawing[data-active="coat"] .L-laser { opacity: 1; }
.tech-buttons { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--ink); margin-top: 6px; }
.tb { font: inherit; font-size: .82rem; font-weight: 650; color: var(--ink); border: 1px solid var(--ink); background: transparent; padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px; transition: background .2s var(--ease), color .2s var(--ease); }
.tb span { color: var(--dim); font-size: .66rem; transition: color .2s var(--ease); }
.tb:hover, .tb.demo, .tb[aria-pressed="true"] { background: var(--ink); color: var(--signal); }
.tb:hover span, .tb.demo span, .tb[aria-pressed="true"] span { color: var(--signal); }
.drawing .spec { margin: 0 14px 14px; min-height: 8.5em; }
.drawing .spec-meta:empty { display: none; }

/* the drawing draws itself: contour, then bends, perforation, hardware, welds, dimensions */
.motion .part [pathLength] { transition: stroke-dashoffset 1.3s var(--ease); }
.motion .part .L-bend line { opacity: 0; transition: opacity .6s var(--ease) .7s; }
.motion .part .dims text { opacity: 0; transition: opacity .5s var(--ease) 1.9s; }
.motion .drawn .part .L-bend line, .motion .drawn .part .dims text { opacity: 1; }
.motion .drawn .part .L-punch [pathLength] { transition-delay: .9s; transition-duration: .9s; }
.motion .drawn .part .L-hardware [pathLength] { transition-delay: 1.2s; }
.motion .drawn .part .L-weld [pathLength] { transition-delay: 1.4s; }
.motion .drawn .part .dims [pathLength] { transition-delay: 1.5s; }

/* section heads with intro */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(28px, 3.5vw, 48px); }
.sec-head h2 { margin: 0; }
.sec-intro { color: var(--ink-2); max-width: 34em; font-size: 1.05rem; }

/* stations: the line a part runs through */
.stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.st { position: relative; padding-top: 16px; }
.st::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: left; }
.st-no { display: block; font-size: .78rem; color: var(--dim); font-weight: 600; }
.st h3 { margin: 6px 0 8px; font-size: 1.22rem; font-weight: 760; font-stretch: 108%; line-height: 1.15; letter-spacing: -0.01em; }
.st-what { color: var(--ink-2); font-size: .97rem; }
.st-cap { margin-top: 12px; font-weight: 650; font-size: .9rem; color: var(--dim); }
.motion .stations.rv { opacity: 1; transform: none; }
.motion .stations.rv .st::before { transform: scaleX(0); transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.motion .stations.rv .st > * { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 200ms); }
.motion .stations.rv.in .st::before { transform: scaleX(1); }
.motion .stations.rv.in .st > * { opacity: 1; }

@media (max-width: 1080px) { .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 920px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .stations { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .part .dims text { font-size: 13px; }
  .tb { font-size: .78rem; }
}

/* ================================================================ v4: capability + proximity (strategy B frame, C first screen, A proof) */

/* language switch: segmented pill, not a nav item */
.lang-pill { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px; margin-left: 4px; flex: none; }
.lang-pill a { text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; line-height: 1.2; color: var(--ink); }
.lang-pill a[aria-current] { background: var(--ink); color: var(--paper-2); }
.lang-pill a:not([aria-current]):hover { background: var(--paper); }
.btn-quiet { background: transparent; color: var(--ink); padding: 9px 16px; }
.btn-quiet:hover { background: var(--ink); color: var(--paper-2); }

/* transit map */
.map { margin: 0; background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 0 18px 40px -18px rgba(17, 20, 23, .45); }
.map-svg { display: block; width: 100%; height: auto; padding: 8px 12px 12px; }
.map .grat line { stroke: var(--line); stroke-width: .8; }
.map .routes line { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.map .city circle { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.6; }
.map text { paint-order: stroke; stroke: var(--paper-2); stroke-width: 5px; stroke-linejoin: round; }
.map .cn { font: 700 12.5px "Archivo", sans-serif; fill: var(--ink); }
.map .cd { font: 500 11px "JetBrains Mono", monospace; fill: var(--dim); }
.map .origin rect { fill: var(--signal); stroke: var(--ink); stroke-width: 2; }
.map .origin text { font: 800 13px "Archivo", sans-serif; fill: var(--ink); }
.motion .map .city { opacity: 0; transition: opacity .5s var(--ease); }
.motion .map.drawn .city { opacity: 1; }
.motion .map.drawn .city:nth-of-type(n) { transition-delay: calc(var(--i, 0) * 110ms + 700ms); }

/* problems we solve */
.problems { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.pr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 12px 40px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.pr h3 { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 760; font-stretch: 108%; line-height: 1.2; letter-spacing: -0.01em; }
.pr-a { color: var(--ink-2); }
.pr-proof { font-weight: 700; color: var(--dim); font-size: .95rem; }
.motion .problems.rv { opacity: 1; transform: none; }
.motion .problems.rv .pr { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.spatial .problems.rv .pr { transform: translateY(14px); }
.motion .problems.rv.in .pr { opacity: 1; transform: none; }

/* technologies: drawing + stations side by side */
.tech-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }
.tech-grid .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.tech-grid .st h3 { font-size: 1.08rem; }
.tech-grid .st-what { font-size: .93rem; }
.tech-grid .drawing { position: sticky; top: 88px; }

/* applications photos */
.apps-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.apps-photos figure { margin: 0; overflow: hidden; border: 1px solid var(--ink); }
.apps-photos img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease); }
.apps-photos figure:hover img { transform: scale(1.03); }
.apps-cap { font-size: .85rem; color: var(--ink-2); margin-bottom: 36px; }
.motion .apps-photos figure.rv { opacity: 1; transform: none; }
.motion .apps-photos figure.rv img { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease), transform 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
.spatial .apps-photos figure.rv img { transform: scale(1.1); }
.motion .apps-photos figure.rv.in img { clip-path: inset(0); transform: none; }

/* quality */
.quality { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.quality li { border-top: 2px solid var(--ink); padding-top: 14px; }
.quality h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 740; font-stretch: 106%; }
.quality p { color: var(--ink-2); font-size: .95rem; }
.logistics { font-size: .9rem; color: var(--ink-2); max-width: 40em; margin: -12px 0 24px; padding-left: 14px; border-left: 1px solid var(--ink); }

@media (max-width: 1080px) {
  .tech-grid { grid-template-columns: minmax(0, 1fr); }
  .tech-grid .drawing { position: static; }
  .quality { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 14px; }
}
@media (max-width: 920px) {
  .pr { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bar .btn-quiet { display: none; }
  .lang-pill { margin-left: auto; }
  .menu { margin-left: 8px; }
}
@media (max-width: 640px) {
  .apps-photos, .quality, .tech-grid .stations { grid-template-columns: minmax(0, 1fr); }
  .map .cn { font-size: 14px; } .map .cd { font-size: 12.5px; }
}

/* hero facts: 2 x 2 grid, no separators that can orphan on wrap */
.hero .terms { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 44px; row-gap: 2px; }
.hero .terms li { margin-right: 0; padding-right: 0; }
.hero .terms li + li::before { display: none; }
@media (max-width: 640px) { .hero .terms { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ v5: no heading hyphenation, image loading, parallax frames, reference */

/* Headings never break inside a word. Long German words fit by scaling the type on narrow screens instead. */
h1, h2, h3 { hyphens: manual; overflow-wrap: normal; word-break: normal; }
@media (max-width: 640px) {
  h1, .hero h1, .sub h1 { font-size: min(2.3rem, 7.6vw); font-stretch: 104%; }
  h2, .close h2 { font-size: min(1.75rem, 6.6vw); font-stretch: 104%; }
}
@media (max-width: 380px) {
  h1, .hero h1, .sub h1 { font-size: 7.2vw; font-stretch: 100%; }
  h2, .close h2 { font-size: 6.2vw; font-stretch: 100%; }
}

/* images: soft fade-in once decoded (never a hard pop) */
.motion img.fade { opacity: 0; transition: opacity .9s var(--ease); }
.motion img.fade.loaded { opacity: 1; }

/* parallax frames (same feel as the big band) for lower photos */
.pframe { overflow: hidden; border: 1px solid var(--ink); }
.pframe img { border: 0 !important; display: block; width: 100%; }
.apps-photos figure, .sub-img { overflow: hidden; }
.spatial .pframe img, .spatial .apps-photos figure img, .spatial .sub-img img {
  transform: translateY(calc((var(--p, .5) - .5) * -56px)) scale(1.14); will-change: transform; transition: opacity .9s var(--ease); }
.gallery figure { display: flex; flex-direction: column; }
.gallery .g0 .pframe { flex: 1; min-height: 0; }
.gallery .g0 .pframe img { height: 100%; aspect-ratio: auto; }
.gallery .pframe img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery .g3 .pframe img { aspect-ratio: 21 / 9; }
.gallery figure:hover img { transform: none; }

/* reference: railway industry */
.ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ref .sec-intro { margin: 0 0 8px; }
.ref-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ref-photos figure { margin: 0; }
.ref-photos img { aspect-ratio: 4 / 5; object-fit: cover; }
.ref-photos figcaption { font-size: .85rem; color: var(--ink-2); padding-top: 8px; }
@media (max-width: 920px) { .ref { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ref-photos { grid-template-columns: minmax(0, 1fr); } .ref-photos img { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .pframe img, .apps-photos figure img, .sub-img img { transform: none !important; } }

/* very narrow phones: keep brand, menu and language pill on one row */
@media (max-width: 400px) {
  .bar-in { gap: 10px; }
  .word { font-size: 1.12rem; }
  .menu { padding: 6px 10px; margin-left: auto; }
  .lang-pill { margin-left: 0; }
  .lang-pill a { padding: 4px 8px; }
}

/* brand: DCFrame + plain-language descriptor */
.brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.tagline { font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
.foot .tagline { color: #aab4bb; }
@media (max-width: 400px) { .tagline { font-size: .6rem; letter-spacing: .03em; } }

/* bending: the flat pattern folds into the finished part */
.part .bent-view { opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.part .bent-view .flange { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.part .bent-view .flange.back { fill: #e3e8eb; }
.part .bent-view .base { fill: #eef2f4; stroke: var(--ink); stroke-width: 1.9; vector-effect: non-scaling-stroke; }
.part .bent-view .feat circle, .part .bent-view .feat rect { fill: none; stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.part .bent-label { fill: var(--dim); font: 500 12px "JetBrains Mono", monospace; paint-order: stroke; stroke: var(--paper-2); stroke-width: 4px; }
.drawing[data-active="bend"] .bent-view { opacity: 1; }
.drawing[data-active="bend"] .layer:not(.coat-fill) { opacity: .05 !important; }
.drawing[data-active="bend"] .dims { opacity: 0 !important; }
.part .dims { transition: opacity .35s var(--ease); }

/* real plant photos under the technology line */
.tech-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; }
.tech-photos figure { margin: 0; }
.tech-photos img { aspect-ratio: 4 / 3; object-fit: cover; }
.tech-photos figcaption { font-size: .85rem; color: var(--ink-2); padding-top: 8px; }
.plant-img img { aspect-ratio: 4 / 3.4; }
@media (max-width: 640px) { .tech-photos { grid-template-columns: minmax(0, 1fr); } }

/* per-technology demonstrations in the drawing */
.part .laser-head { fill: #ff5a1f; opacity: 0; filter: drop-shadow(0 0 4px #ff5a1f) drop-shadow(0 0 9px #ffb000); pointer-events: none; }
.part .laser-head.on { opacity: 1; }
.part .pem { transform-box: fill-box; transform-origin: center; }
.part .pem.press { animation: pem-press .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pem-press { 0% { transform: scale(1.9); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.part .seams { opacity: 0; transition: opacity .2s; }
.part .bead { fill: #ff8a1f; stroke: #7a3a00; stroke-width: .8; opacity: 0; }
.part .bead.on { opacity: 1; }
.drawing[data-active="weld"] .bent-view { opacity: 1; }
.drawing[data-active="weld"] .seams { opacity: 1; }
.drawing[data-active="weld"] .layer:not(.coat-fill) { opacity: .05 !important; }
.drawing[data-active="weld"] .dims { opacity: 0 !important; }

/* the active technology layer always wins over the dimming rule */
.drawing[data-active="laser"] .part .layer.L-laser,
.drawing[data-active="punch"] .part .layer.L-punch,
.drawing[data-active="bend"] .part .layer.L-bend,
.drawing[data-active="hardware"] .part .layer.L-hardware,
.drawing[data-active="coat"] .part .layer.L-laser { opacity: 1 !important; stroke-width: 2.2; }
.drawing[data-active="coat"] .part .layer.coat-fill { opacity: 1 !important; }
.drawing[data-active="bend"] .part .layer.L-bend { opacity: .05 !important; }

/* hardware: fasteners read as solid pressed-in parts */
.drawing[data-active="hardware"] .part .pem circle { fill: var(--signal); stroke: var(--ink); stroke-width: 2; }
.drawing[data-active="hardware"] .part .pem path { stroke: var(--ink); stroke-width: 2; }

/* ================================================================ v6: aerial band zooms out, weld seams as lines, gallery row 3 */
.band-img { height: clamp(320px, 62vw, 780px); object-position: 50% 45%; }
.motion .band-img { transform: scale(calc(1.42 - min(1, var(--p, 0) * 1.6) * .42)); transform-origin: 50% 40%; will-change: transform; }
.spatial .band-img { transform: translateY(calc((var(--p, .5) - .5) * -40px)) scale(calc(1.42 - min(1, var(--p, 0) * 1.6) * .42)); }
@media (prefers-reduced-motion: reduce) { .band-img { transform: scale(calc(1.42 - min(1, var(--p, 0) * 1.6) * .42)) !important; } }

.part .bead { display: none; }
.part .seam { stroke: #ff7a1a; stroke-width: 4; stroke-linecap: round; fill: none;
  filter: drop-shadow(0 0 2px #ffb000) drop-shadow(0 0 5px #ff5a1f); }

.gallery .g4 { grid-column: 1; }
.gallery .g5 { grid-column: 2 / span 2; }
.gallery .g5 .pframe { flex: 1; position: relative; min-height: 220px; }
.gallery .g5 .pframe img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 920px) { .gallery .g4 { grid-column: auto; } .gallery .g5 { grid-column: auto; } }
@media (max-width: 640px) { .gallery .g5 .pframe { min-height: 0; } .gallery .g5 .pframe img { position: static; aspect-ratio: 4 / 3; } }

/* v7: gallery row 3 holds three equal photos (kiosk chassis, ribbed panels, welded corner) */
.gallery .g4, .gallery .g5, .gallery .g6 { grid-column: auto; }
.gallery .g5 .pframe { flex: none; position: static; min-height: 0; }
.gallery .g5 .pframe img { position: static; aspect-ratio: 4 / 3; height: auto; }
.gallery .g0 .pframe img { object-position: 30% 50%; }
@media (max-width: 920px) { .gallery .g6 { grid-column: 1 / -1; } .gallery .g6 .pframe img { aspect-ratio: 16 / 9; } }
.gallery .g5 .pframe, .gallery .g6 .pframe { flex: 1; position: relative; min-height: 200px; }
.gallery .g5 .pframe img, .gallery .g6 .pframe img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 920px) {
  .gallery .g5 .pframe, .gallery .g6 .pframe { flex: none; position: static; min-height: 0; }
  .gallery .g5 .pframe img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .gallery .g6 .pframe img { position: static; aspect-ratio: 16 / 9; height: auto; }
}

/* ================================================================ v8: hero photo, delivery map above contact */
.hero-photo { margin: 0; align-self: stretch; display: flex; flex-direction: column; border: 2px solid var(--ink);
  box-shadow: 0 18px 40px -18px rgba(17, 20, 23, .45); background: var(--paper-2); }
.hero-photo img { display: block; width: 100%; flex: 1; min-height: 0; height: 100%; max-height: 640px; object-fit: cover; object-position: 50% 50%; }
.hero-photo figcaption { padding: 10px 14px; font-size: .84rem; color: var(--ink-2); border-top: 1px solid var(--line); }
@media (max-width: 920px) { .hero-photo img { height: auto; aspect-ratio: 4 / 3; flex: none; } }

/* ================================================================ v9: hero image, slow zoom-in */
.hero-frame { display: flex; flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 920px) { .hero-frame { flex: none; } }
.spatial .hero-frame img { transform-origin: 62% 50%; will-change: transform; animation: hero-zoom 16s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.16); } }

/* ================================================================ v10: delivery map inside the yellow close field, under the title block */
.close-in { align-items: start; }
.close-copy { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
.titleblock { grid-column: 2; grid-row: 1; }
.close .map { grid-column: 2; grid-row: 2; }
.close .map .rack-head { font-size: .72rem; }
@media (max-width: 920px) { .close-copy, .titleblock, .close .map { grid-column: auto; grid-row: auto; } }

/* closing photo of the ELAS building above the footer: still, no zoom (source is a modest-resolution frame) */
.band-end { background: var(--paper); }
.band-end .band-img, .motion .band-end .band-img, .spatial .band-end .band-img { height: clamp(260px, 50vw, 720px); object-position: 50% 30%; transform: none; will-change: auto; }
.band-end figcaption { padding-block: 14px; }
@media (prefers-reduced-motion: reduce) { .band-end .band-img { transform: none !important; } }