/* Mikron hidraulika — site styles */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 62% 100%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jbmono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #EBE7E0;
  --paper-2: #E2DDD4;
  --paper-3: #D4CEC3;
  --ink: #141312;
  --ink-2: #3E3B37;
  --ink-3: #6B675F;
  --orange: #F28B00;
  --oil: #F28B00;
  --oil-lo: #F6C886;
  --red: #E3241B;
  --steel: #C3C7CB;
  --steel-2: #8C9298;

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: rgba(20, 19, 18, .14);
  --rule-2: rgba(20, 19, 18, .42);
  --sheet: var(--paper);
  --logo-knock: var(--paper);

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --g: clamp(16px, 3vw, 44px);
  --gap: clamp(12px, 1.8vw, 28px);
  --max: 1480px;
  --hdr: 64px;
  --sec: clamp(80px, 10vw, 148px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 8px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.55 var(--sans);
  font-stretch: 94%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--ink); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.mono {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-stretch: 100%;
}
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 8px; }

/* ---------- dark sections ---------- */
.ink {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-2: #BDB8AF;
  --fg-3: #8A857D;
  --rule: rgba(235, 231, 224, .14);
  --rule-2: rgba(235, 231, 224, .38);
  --logo-knock: var(--ink);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hdr__in { height: var(--hdr); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.hdr__logo { display: block; width: 132px; flex: none; color: var(--ink); }
.hdr__logo svg { width: 100%; height: auto; }
.hdr__nav { display: flex; gap: clamp(14px, 1.7vw, 30px); margin-left: auto; }
.hdr__nav a {
  font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; padding: 8px 0; position: relative;
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.hdr__nav a:hover::after, .hdr__nav a[aria-current="true"]::after { transform: scaleX(1); }
.hdr__tel {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 700 14px/1 var(--mono); letter-spacing: .02em; white-space: nowrap;
  padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--rule);
  height: 100%;
}
.hdr__gauge { width: 30px; height: 30px; color: var(--ink); }
.hdr__gauge svg { width: 100%; height: 100%; overflow: visible; }
#hdr-needle { stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; transform-origin: 16px 16px; transform: rotate(-135deg); }
.hdr__gauge circle { fill: var(--ink); }
.hdr__menu {
  display: none; align-items: center; gap: 10px; margin-left: auto;
  background: none; border: 0; padding: 10px 0;
  font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
}
.hdr__menu i { width: 22px; height: 10px; position: relative; display: block; }
.hdr__menu i::before, .hdr__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.hdr__menu i::before { top: 0; }
.hdr__menu i::after { bottom: 0; }
.hdr__menu[aria-expanded="true"] i::before { transform: translateY(4px) rotate(45deg); }
.hdr__menu[aria-expanded="true"] i::after { transform: translateY(-4px) rotate(-45deg); }

.mnav { position: fixed; inset: var(--hdr) 0 0 0; background: var(--paper); overflow-y: auto; border-top: 1px solid var(--rule); }
.mnav .wrap { padding-block: 12px 40px; }
.mnav a { text-decoration: none; }
.mnav > .wrap > a {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule);
  font: 800 34px/1 var(--sans); font-stretch: 62%; text-transform: uppercase;
}
.mnav > .wrap > a .mono { color: var(--fg-3); }
.mnav__foot { margin-top: 28px; color: var(--fg-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; height: 58px; padding: 0 24px;
  font: 700 17px/1 var(--sans); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em;
  text-decoration: none; border: 1.5px solid var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn .mono { font-size: 11px; opacity: .7; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--line span { transition: transform .3s var(--ease); }
.btn--line:hover span { transform: translateX(4px); }

/* ---------- type ---------- */
.h2 {
  font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(2.5rem, 5.6vw, 5.6rem); line-height: .9; letter-spacing: -.004em;
  text-wrap: balance;
}
.lead { font-size: clamp(1.06rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }

/* ---------- layout ---------- */
.sec { padding-block: var(--sec); position: relative; }
.sec--paper2 { background: var(--paper-2); --sheet: var(--paper-2); --logo-knock: var(--paper-2); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.col-title { grid-column: 1 / span 8; }
.col-lead { grid-column: 9 / span 4; align-self: end; }
.sh {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  border-top: 1px solid var(--rule-2); padding-top: 14px; margin-bottom: clamp(36px, 5vw, 80px);
  color: var(--fg-2);
}
.sh h2, .sh__label { font: inherit; }
.sh__no { grid-column: 1 / span 1; color: var(--orange); }
.sh__label { grid-column: 2 / span 5; color: var(--fg); }
.sh__aside { grid-column: 8 / span 5; text-align: right; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero__meta {
  display: flex; justify-content: space-between; gap: 16px;
  color: var(--fg-2); padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.hero__title {
  margin-top: clamp(22px, 3.4vw, 52px);
  font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(3rem, 9.2vw, 9.6rem); line-height: .86; letter-spacing: -.008em;
}
.hero__title .ln { display: block; overflow: hidden; padding-top: .06em; margin-top: -.06em; }
.hero__title .ln > span { display: inline-block; }
.ring {
  display: inline-block; width: .2em; height: .2em; margin-left: .06em;
  border: .065em solid var(--red); border-radius: 50%; vertical-align: baseline;
}
.hero__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(24px, 3vw, 44px); align-items: end;
}
.hero__lead { grid-column: 1 / span 6; font-size: clamp(1.08rem, 1.45vw, 1.35rem); line-height: 1.45; max-width: 44ch; text-wrap: pretty; }
.hero__cta { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

html.js .hero__title .ln > span { animation: rise 1s var(--ease) .05s both; }
html.js .hero__title .ln:nth-child(2) > span { animation-delay: .13s; }
@keyframes rise { from { transform: translateY(105%); } }

/* drawing sheet */
.sheet {
  margin-top: clamp(32px, 4vw, 56px);
  border: 1.5px solid var(--ink);
  background-color: var(--sheet);
  background-image:
    linear-gradient(rgba(20,19,18,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,19,18,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.sheet__zones { display: grid; grid-template-columns: repeat(8, 1fr); border-bottom: 1px solid var(--ink); font-size: 10px; color: var(--fg-2); background: var(--sheet); }
.sheet__zones span { text-align: center; padding: 3px 0; }
.sheet__zones span + span { border-left: 1px solid var(--rule); }
.sheet__body { padding: clamp(8px, 2vw, 28px) clamp(4px, 1.6vw, 24px) clamp(4px, 1vw, 12px); }
.cyl { width: 100%; height: auto; overflow: visible; }

.sheet__tb {
  display: grid; grid-template-columns: 2.4fr repeat(4, 1fr) auto;
  border-top: 1.5px solid var(--ink); background: var(--sheet); font-size: 11px;
}
.tb { padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb + .tb { border-left: 1px solid var(--ink); }
.tb span { color: var(--fg-3); font-size: 10px; }
.tb b { font-weight: 600; color: var(--fg); font-size: 12px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb output { font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; text-align: right; }
.tb--parts { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--ink); }
.tb--parts b { white-space: normal; font-weight: 500; }
.tb--btn { justify-content: center; padding: 0; }
.tb--btn button {
  height: 100%; min-height: 44px; padding: 0 16px; border: 0; background: none;
  font: 600 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
}
.tb--btn button:hover { background: var(--ink); color: var(--paper); }

/* cylinder drawing */
.c-center { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 26 5 3 5; opacity: .55; }
.c-part { fill: var(--paper-3); stroke: var(--ink); stroke-width: 2; }
.c-hole { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.c-cut { fill: url(#hatch); stroke: var(--ink); stroke-width: 2; }
.c-cut2 { fill: url(#hatch-b); stroke: var(--ink); stroke-width: 2; }
.c-rod { fill: url(#chrome); stroke: var(--ink); stroke-width: 2; }
.c-rodhl { stroke: #fff; stroke-width: 1.5; opacity: .7; }
.c-seal rect { fill: var(--red); }
.c-oil { fill: var(--oil-lo); transition: fill .35s linear; }
.cyl[data-a="hi"] .c-oil[data-ch="a"], .cyl[data-b="hi"] .c-oil[data-ch="b"] { fill: var(--oil); }
.c-ext { stroke: var(--ink); stroke-width: 1; }
.c-dim { stroke: var(--ink); stroke-width: 1.2; }
.c-dimt, .c-lbl, .c-bal text { font: 600 15px var(--mono); fill: var(--ink); }
.c-dimt { text-anchor: middle; font-size: 14px; }
.c-bal line { stroke: var(--ink); stroke-width: 1; }
.c-bal circle { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.c-bal text { text-anchor: middle; font-size: 13px; }
.c-hose { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linecap: butt; }
.c-hose-in { fill: none; stroke: var(--paper-3); stroke-width: 5; }
.c-flow { fill: none; stroke: var(--oil); stroke-width: 3; stroke-dasharray: 3 9; opacity: 0; transition: opacity .2s; }
.c-flow.is-on { opacity: 1; animation: flow-fwd .5s linear infinite; }
.c-flow.is-back { animation-direction: reverse; }
.c-flow.is-ret { stroke: var(--oil-lo); }
@keyframes flow-fwd { to { stroke-dashoffset: -12; } }
.c-valve { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.c-valve rect { fill: var(--sheet); }
.c-valve .c-fill { fill: var(--ink); }
#valve { transition: transform .35s var(--ease); }
#mov, #chA, #chB { will-change: transform; }

/* spec strip */
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--ink); }
.specs > div { padding: 14px var(--gap) 0 0; }
.specs > div + div { padding-left: var(--gap); border-left: 1px solid var(--rule); }
.specs dt { color: var(--fg-3); }
.specs dd { margin-top: 6px; font-weight: 700; font-stretch: 70%; text-transform: uppercase; font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1; }

/* ---------- about ---------- */
.statement {
  font-weight: 500; font-stretch: 78%;
  font-size: clamp(1.9rem, 4.6vw, 4.6rem); line-height: 1.03; letter-spacing: -.012em;
  max-width: 25ch; text-wrap: balance;
}
.statement em { font-style: normal; color: var(--orange); }
.about-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(48px, 7vw, 112px);
}
.about-cols > div { border-top: 1px solid var(--rule-2); padding-top: 14px; }
.about-cols h3 { color: var(--orange); margin-bottom: 14px; }
.about-cols p { color: var(--fg-2); max-width: 36ch; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(56px, 8vw, 128px); }
.facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 1px solid var(--rule); padding-top: 12px; }
.facts dd { font-weight: 800; font-stretch: 62%; font-size: clamp(4rem, 9.4vw, 9rem); line-height: .82; letter-spacing: -.01em; }
.facts dt { color: var(--fg-3); margin-top: 12px; max-width: 22ch; }

/* ---------- cylinders ---------- */
.cyl-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(48px, 6vw, 96px); align-items: start;
}
.apps { grid-column: 1 / span 6; }
.apps__h { color: var(--fg-3); padding-bottom: 12px; }
.apps__list li {
  display: flex; align-items: baseline; gap: 18px; padding: 14px 0 12px;
  border-top: 1px solid var(--rule-2);
  font-weight: 700; font-stretch: 66%; text-transform: uppercase;
  font-size: clamp(1.6rem, 2.7vw, 2.6rem); line-height: 1;
  transition: padding-left .35s var(--ease), color .2s;
}
.apps__list li:last-child { border-bottom: 1px solid var(--rule-2); }
.apps__list li .mono { color: var(--fg-3); flex: none; width: 2.6em; }
.apps__list li:hover { padding-left: 10px; color: var(--orange); }

.schem { grid-column: 8 / span 5; display: grid; gap: 14px; }
.schem__item { border: 1.5px solid var(--ink); background: var(--sheet); padding: 18px 18px 14px; }
.schem__item figcaption { margin-top: 12px; font-size: 15px; color: var(--fg-2); line-height: 1.45; }
.schem__item figcaption b { display: block; color: var(--fg); font-weight: 800; font-stretch: 66%; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin-bottom: 6px; }
.sc { width: 100%; height: auto; overflow: visible; }
.sc-body { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.sc-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.sc-piston { fill: var(--ink); }
.sc-rod { fill: url(#chrome); stroke: var(--ink); stroke-width: 1.5; }
.sc-spring { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.sc-oil { fill: var(--oil); }
.sc-b { fill: var(--oil-lo); }
.sc-arr { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sc-t { font: 600 12px var(--mono); fill: var(--ink); }

/* cycle: 0–10 rest · 10–45 out · 45–55 hold · 55–90 back · 90–100 rest */
.sc-mov, .sc-a, .sc-b, .sc-spring, .sc-arr { animation: 4.8s var(--ease) infinite paused; }
[data-live].is-live .sc-mov, [data-live].is-live .sc-a, [data-live].is-live .sc-b,
[data-live].is-live .sc-spring, [data-live].is-live .sc-arr { animation-play-state: running; }
.sc-mov { animation-name: sc-mov; }
.sc-a { transform-origin: 20px 0; animation-name: sc-a; }
.sc-spring { transform-origin: 220px 0; animation-name: sc-spring; }
.sc-b { transform-origin: 220px 0; animation-name: sc-bx; }
.sc--dr .sc-a { animation-name: sc-a-dr; }
.sc-in-a { animation-name: sc-in; }
.sc-out-a { animation-name: sc-out; }
.sc-in-b { animation-name: sc-out; }
.sc-out-b { animation-name: sc-in; }
@keyframes sc-mov { 0%, 10% { transform: none; } 45%, 55% { transform: translateX(80px); } 90%, 100% { transform: none; } }
@keyframes sc-a { 0%, 10% { transform: none; } 45%, 55% { transform: scaleX(5); } 90%, 100% { transform: none; } }
@keyframes sc-a-dr { 0%, 10% { transform: none; fill: var(--oil); } 45% { transform: scaleX(5); fill: var(--oil); } 55% { transform: scaleX(5); fill: var(--oil-lo); } 90%, 100% { transform: none; fill: var(--oil-lo); } }
@keyframes sc-spring { 0%, 10% { transform: none; } 45%, 55% { transform: scaleX(.524); } 90%, 100% { transform: none; } }
@keyframes sc-bx { 0%, 10% { transform: none; fill: var(--oil-lo); } 45% { transform: scaleX(.524); fill: var(--oil-lo); } 55% { transform: scaleX(.524); fill: var(--oil); } 90% { transform: none; fill: var(--oil); } 100% { transform: none; fill: var(--oil-lo); } }
@keyframes sc-in { 0%, 9% { opacity: 0; } 12%, 43% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes sc-out { 0%, 54% { opacity: 0; } 57%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } }

/* ---------- hoses (dark) ---------- */
.hose-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(48px, 6vw, 96px); align-items: center;
}
.gauge { grid-column: 1 / span 5; }
.gauge__svg { width: 100%; max-width: 460px; height: auto; margin-inline: auto; }
.g-bezel { fill: #2a2826; stroke: #4a4743; stroke-width: 2; }
.g-face { fill: var(--paper); }
.g-arc { fill: none; stroke: var(--ink); stroke-width: 2; }
.g-minor { stroke: var(--ink); stroke-width: 1.4; }
.g-major { stroke: var(--ink); stroke-width: 3; }
.g-num text { font: 600 15px var(--mono); fill: var(--ink); text-anchor: middle; }
.g-mark { fill: var(--ink-3); transition: fill .3s; }
.g-mark.is-on { fill: var(--orange); }
.g-unit { font: 500 13px var(--mono); fill: var(--ink-3); text-anchor: middle; letter-spacing: .08em; }
.g-brand { font: 800 15px var(--sans); font-stretch: 70%; letter-spacing: .18em; fill: var(--ink-3); text-anchor: middle; }
.g-needle { fill: var(--red); }
.g-hub { fill: var(--ink); }
.g-hub2 { fill: var(--paper-3); }
.gauge__ro { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 16px; color: var(--fg-3); }
.gauge__ro output { font: 700 clamp(2.6rem, 5vw, 4rem)/1 var(--mono); color: var(--fg); letter-spacing: -.02em; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

.hose-side { grid-column: 7 / span 6; }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule-2); }
.seg button {
  background: none; border: 0; padding: 18px 8px 14px; text-align: left; padding-left: 16px;
  font-weight: 800; font-stretch: 62%; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: .9;
  transition: background-color .25s, color .25s;
  display: flex; flex-direction: column; gap: 8px;
}
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button .mono { color: var(--fg-3); font-size: 11px; }
.seg button:hover { background: rgba(235, 231, 224, .06); }
.seg button[aria-pressed="true"] { background: var(--orange); color: var(--ink); }
.seg button[aria-pressed="true"] .mono { color: var(--ink); }
.seg__note { color: var(--fg-3); margin-top: 10px; }

.dia { margin-top: clamp(32px, 4vw, 56px); display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--rule); padding-top: 22px; }
.dia__row { display: flex; align-items: center; gap: 14px; flex: none; }
.dia__ring circle { fill: none; stroke: var(--paper); stroke-width: 2; }
.dia__ring circle:first-child { fill: #24221f; }
.dia__ring circle + circle { fill: var(--orange); stroke: none; }
.dia__ring--s { width: 14px; }
.dia__ring--l { width: 112px; }
.dia__arrow { width: 56px; height: 1px; background: var(--rule-2); position: relative; }
.dia__arrow::after { content: ""; position: absolute; right: 0; top: -4px; border: 4.5px solid transparent; border-left: 7px solid var(--rule-2); border-right: 0; }
.dia__lbl { display: flex; flex-direction: column; gap: 6px; }
.dia__lbl .mono { color: var(--fg-3); }
.dia__lbl b { font-weight: 800; font-stretch: 62%; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: .9; }

.types { margin-top: clamp(28px, 3.5vw, 48px); border-top: 1px solid var(--rule); padding-top: 18px; }
.types p { color: var(--fg-3); }
.types ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.types li { font: 600 15px/1 var(--mono); padding: 9px 12px; border: 1px solid var(--rule-2); min-width: 48px; text-align: center; }

.hose { margin-top: clamp(56px, 7vw, 112px); }
.hose__svg { width: 100%; height: auto; overflow: visible; }
.h-steel { fill: url(#steel); stroke: var(--paper); stroke-width: 1.5; }
.h-thread, .h-line, .h-crimp { stroke: #4a4f54; stroke-width: 1.4; fill: none; }
.h-crimp { stroke-width: 2; }
.h-rubber { fill: #262422; }
.h-hl { stroke: rgba(255, 255, 255, .14); stroke-width: 2; }
.h-lay { font: 600 9.5px var(--mono); letter-spacing: .14em; fill: rgba(235, 231, 224, .5); }
.h-cutbg { fill: #262422; }
.h-tube { fill: #121110; }
.h-bore { fill: var(--oil); }
.h-flow { stroke: #fff; stroke-width: 2; stroke-dasharray: 4 10; opacity: .75; animation: flow-fwd .7s linear infinite paused; }
[data-live].is-live .h-flow { animation-play-state: running; }
.h-break { fill: none; stroke: var(--paper); stroke-width: 1.4; }
.h-dim { stroke: var(--paper); stroke-width: 1; fill: none; }
.h-ext { stroke: var(--fg-3); stroke-width: 1; fill: none; }
.h-t { font: 500 12px var(--mono); fill: var(--fg-2); text-anchor: middle; letter-spacing: .04em; text-transform: uppercase; }
.h-t--l { text-anchor: start; }
.h-t--r { text-anchor: end; }

.also { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--rule-2); padding-top: 14px; }
.also h3 { grid-column: 1 / span 3; color: var(--orange); }
.also ul { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.also li { padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--fg-2); }

/* ---------- industrial pipes ---------- */
.pipes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(40px, 5vw, 80px); border-top: 1px solid var(--rule-2);
}
.pipes li {
  display: flex; align-items: baseline; gap: 18px; padding: 16px 0 14px; border-bottom: 1px solid var(--rule-2);
  font-weight: 600; font-stretch: 72%; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.85rem); line-height: 1.05;
}
.pipes li .mono { color: var(--orange); width: 2.4em; flex: none; }
.other { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.other h3 { grid-column: 1 / span 3; color: var(--fg-3); padding-top: 12px; }
.other ul { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.other li { padding: 10px 0; border-top: 1px solid var(--rule); color: var(--fg-2); }

/* ---------- services ---------- */
.svc { margin-top: clamp(40px, 5vw, 80px); border-top: 1px solid var(--rule-2); }
.svc__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--rule-2);
}
.svc__no { grid-column: 1 / span 1; color: var(--orange); }
.pic { grid-column: 2 / span 3; width: 100%; max-width: 236px; height: auto; overflow: visible; }
.svc__t { grid-column: 5 / span 4; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2rem, 4.2vw, 4rem); line-height: .9; }
.svc__d { grid-column: 9 / span 4; color: var(--fg-2); max-width: 34ch; }

.p-axis { stroke: var(--ink); stroke-width: .8; stroke-dasharray: 10 3 2 3; opacity: .5; }
.p-solid { fill: var(--ink-2); }
.p-dark { fill: var(--ink); }
.p-raw { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.4; }
.p-fin { fill: url(#steel); stroke: var(--ink); stroke-width: 1.4; }
.p-steel { fill: url(#steel); stroke: var(--ink); stroke-width: 1.4; }
.p-spin path, .p-flute path { stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; }
.p-base { stroke: var(--ink); stroke-width: 2; }
.p-chip { fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.p-pocket { fill: var(--sheet); }
.p-seam { stroke: var(--ink); stroke-width: 1.4; }
.p-bead { fill: none; stroke: var(--ink-2); stroke-width: 5; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.p-arc { fill: #FFE7B8; stroke: var(--orange); stroke-width: 2; }
.p-sparks path { stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; }
.p-face { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.p-tick { stroke: var(--ink); stroke-width: 1.4; }
.p-needle { fill: var(--red); }
.p-pipe { fill: none; stroke: var(--ink); stroke-width: 4; }
.p-pulse { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 6 60; opacity: 0; }
.p-hose { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; }
.p-hose-in { fill: none; stroke: var(--ink-2); stroke-width: 4; }
.stamp circle { fill: none; stroke: var(--red); stroke-width: 2.5; }
.stamp .stamp__in { stroke-width: 1; }
.stamp__ck { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* service loops — paused until on screen */
.lathe-raw, .lathe-tool, .p-wp, .p-spin, .p-chip, .mill-feed, .mill-slot, .p-flute,
.weld-bead, .weld-torch, .p-arc, .p-sparks, .test-needle, .p-pulse, .stamp {
  animation-play-state: paused; animation-iteration-count: infinite;
}
[data-live].is-live :is(.lathe-raw, .lathe-tool, .p-wp, .p-spin, .p-chip, .mill-feed, .mill-slot, .p-flute,
.weld-bead, .weld-torch, .p-arc, .p-sparks, .test-needle, .p-pulse, .stamp) { animation-play-state: running; }

.lathe-raw { transform-origin: 40px 0; animation: lathe-raw 4s linear infinite paused; }
.lathe-tool { animation: lathe-tool 4s linear infinite paused; }
.p-wp { animation: lathe-wp 4s linear infinite paused; }
.p-spin { animation: spin-y .35s linear infinite paused; }
.lathe-tool .p-chip { animation: chip 0.5s ease-out infinite paused; }
.lathe-tool .c2 { animation-delay: .25s; }
@keyframes lathe-raw { 0% { transform: none; } 82% { transform: scaleX(.2); } 90% { transform: scaleX(.2); } 92%, 100% { transform: none; } }
@keyframes lathe-tool { 0% { transform: none; } 82% { transform: translateX(-78px); } 92%, 100% { transform: none; } }
@keyframes lathe-wp { 0%, 82% { opacity: 1; } 88%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes spin-y { to { transform: translateY(8px); } }
@keyframes chip { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(6px, -12px) rotate(40deg); } }

.mill-feed { animation: mill-feed 4s linear infinite paused; }
.mill-slot { transform-origin: 88px 0; animation: mill-slot 4s linear infinite paused; }
.p-flute { animation: flute .3s linear infinite paused; }
.p-chip.m1 { animation: chip-r .45s ease-out infinite paused; }
.p-chip.m2 { animation: chip-l .45s ease-out .2s infinite paused; }
@keyframes mill-feed { 0% { transform: none; } 84% { transform: translateX(-60px); } 88% { transform: translateX(-60px); opacity: 1; } 92% { opacity: 0; transform: translateX(-60px); } 96% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes mill-slot { 0% { transform: scaleX(0); } 84% { transform: scaleX(4.75); } 88% { transform: scaleX(4.75); opacity: 1; } 92% { opacity: 0; transform: scaleX(4.75); } 96% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(0); } }
@keyframes flute { to { transform: translateX(10px); } }
@keyframes chip-r { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(14px, -10px) rotate(90deg); } }
@keyframes chip-l { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-14px, -12px) rotate(-90deg); } }

.weld-bead { animation: weld-bead 4.4s linear infinite paused; }
.weld-torch { animation: weld-torch 4.4s linear infinite paused; }
.p-arc { animation: arc .12s steps(2) infinite paused; }
.p-sparks { transform-origin: 22px 60px; animation: sparks .18s steps(3) infinite paused; }
@keyframes weld-bead { 0% { stroke-dashoffset: 1; opacity: 1; } 84% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 96% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 1; } }
@keyframes weld-torch { 0% { transform: none; } 84% { transform: translateX(112px); } 86% { transform: translateX(112px); } 96%, 100% { transform: none; } }
@keyframes arc { 50% { opacity: .35; } }
@keyframes sparks { 0% { transform: rotate(0) scale(1); opacity: 1; } 33% { transform: rotate(20deg) scale(.7); } 66% { transform: rotate(-15deg) scale(1.1); opacity: .6; } }

.test-needle { transform-origin: 104px 32px; animation: test-needle 4.2s var(--ease) infinite paused; }
.p-pulse { animation: pulse 4.2s linear infinite paused; }
@keyframes test-needle { 0% { transform: rotate(-135deg); } 30% { transform: rotate(64deg); } 34% { transform: rotate(58deg); } 38%, 78% { transform: rotate(60deg); } 92%, 100% { transform: rotate(-135deg); } }
@keyframes pulse { 0% { opacity: 1; stroke-dashoffset: 66; } 30% { opacity: 1; stroke-dashoffset: 0; } 31%, 100% { opacity: 0; stroke-dashoffset: 0; } }
.p-pulse--h { stroke-dasharray: 8 200; }
.svc__row:last-child .p-pulse { animation-name: pulse-h; }
@keyframes pulse-h { 0% { opacity: 1; stroke-dashoffset: 208; } 45% { opacity: 1; stroke-dashoffset: 0; } 46%, 100% { opacity: 0; } }
.stamp { transform-origin: 122px 76px; animation: stamp 4.2s var(--ease) infinite paused; }
@keyframes stamp { 0%, 48% { opacity: 0; transform: scale(1.7) rotate(-30deg); } 56% { opacity: 1; transform: scale(.94) rotate(-12deg); } 60%, 88% { opacity: 1; transform: scale(1) rotate(-12deg); } 96%, 100% { opacity: 0; transform: scale(1) rotate(-12deg); } }

/* ---------- catalogue ---------- */
.cat { columns: 3 280px; column-gap: var(--gap); margin-top: clamp(48px, 6vw, 96px); }
.cat__grp { break-inside: avoid; margin-bottom: clamp(32px, 3.6vw, 52px); }
.cat__grp h3 {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--ink); padding-top: 10px; margin-bottom: 4px;
  font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 1.75rem; line-height: 1;
}
.cat__grp h3 i { font-style: normal; color: var(--orange); font-size: 12px; }
.cat__grp li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.35; }
.br { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); margin-left: 6px; white-space: nowrap; }
.cat__cta { margin-top: 12px; font-weight: 600; font-stretch: 78%; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.15; max-width: 34ch; }
.cat__cta a { text-decoration-thickness: 2px; text-underline-offset: .14em; text-decoration-color: var(--orange); }
.cat__cta a:hover { color: var(--orange); }

/* ---------- certificates ---------- */
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px) var(--gap); margin-top: clamp(48px, 6vw, 96px); }
.cert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.cert__doc {
  display: block; padding: 0; border: 0; background: #fff; position: relative;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 18px 40px -22px rgba(20, 19, 18, .55);
  transform: rotate(-1.6deg); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  cursor: zoom-in;
}
.cert:nth-child(2) .cert__doc { transform: rotate(1.2deg); }
.cert__doc:hover, .cert:nth-child(2) .cert__doc:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 28px 50px -24px rgba(20, 19, 18, .6); }
.cert__doc img { width: 100%; height: auto; mix-blend-mode: multiply; }
.cert__txt .mono { color: var(--orange); }
.cert__txt h3 { margin-top: 10px; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: .92; }
.cert__en { margin-top: 6px; font-style: italic; color: var(--fg-3); font-size: 15px; }
.cert__txt ul { margin-top: 18px; border-top: 1px solid var(--rule-2); }
.cert__txt li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; color: var(--fg-2); }

/* ---------- contact ---------- */
.contact { background: var(--orange); --sheet: var(--orange); --rule: rgba(20,19,18,.22); --rule-2: rgba(20,19,18,.6); --fg-2: #2b2723; --fg-3: #4a3a26; }
.contact .sh__no { color: var(--ink); }
.contact__tel {
  display: block; text-decoration: none; position: relative;
  font-weight: 800; font-stretch: 62%; font-size: clamp(3rem, 24.5vw, 22.5rem); line-height: .8; letter-spacing: -.012em;
  white-space: nowrap;
}
.contact__pre { display: block; font-size: 12px; line-height: 1; margin-bottom: 18px; color: var(--fg-3); }
.contact__tel:hover { color: var(--paper); }
.contact__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(44px, 6vw, 88px); border-top: 1.5px solid var(--ink); }
.contact__grid > div { padding-top: 14px; }
.contact__grid dt { color: var(--fg-3); margin-bottom: 10px; }
.contact__grid dd { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 600; line-height: 1.3; font-stretch: 86%; }
.contact__grid a { text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.contact__grid a:hover { color: var(--paper); }
.contact__geo { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--fg-3); }
.contact__note { margin-top: clamp(40px, 5vw, 72px); max-width: 52ch; font-size: 1.05rem; color: var(--fg-2); }

/* ---------- footer ---------- */
.ftr { padding-block: clamp(48px, 6vw, 80px) 28px; }
.ftr__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.ftr__logo { grid-column: 1 / span 3; width: 180px; color: var(--paper); }
.ftr__top p { grid-column: 5 / span 3; color: var(--fg-2); font-size: 15px; }
.ftr__nav { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: flex-end; }
.ftr__nav a { text-decoration: none; color: var(--fg-2); }
.ftr__nav a:hover { color: var(--orange); }
.ftr__bot { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(48px, 6vw, 88px); padding-top: 14px; border-top: 1px solid var(--rule); color: var(--fg-3); font-size: 11px; }

/* ---------- certificate viewer ---------- */
.viewer { padding: 0; border: 0; background: var(--paper); max-width: min(92vw, 760px); max-height: 92vh; width: 100%; }
.viewer::backdrop { background: rgba(20, 19, 18, .82); }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule-2); position: sticky; top: 0; background: var(--paper); }
.viewer__bar button { background: none; border: 1px solid var(--ink); padding: 8px 12px; }
.viewer__bar button:hover { background: var(--ink); color: var(--paper); }
.viewer img { width: 100%; height: auto; background: #fff; }

/* ---------- reveal ---------- */
html.io [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.io [data-reveal].in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .hdr__nav { gap: 14px; }
  .hdr__nav a:nth-child(4) { display: none; }
}
@media (max-width: 1020px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; }
  .hdr__tel { margin-left: auto; border-left: 0; padding-left: 0; }
  .hdr__menu { margin-left: 0; }
  .col-title { grid-column: 1 / -1; }
  .col-lead { grid-column: 1 / span 9; margin-top: 24px; }
  .hero__lead { grid-column: 1 / -1; }
  .hero__cta { grid-column: 1 / -1; justify-content: flex-start; margin-top: 24px; }
  .apps { grid-column: 1 / -1; }
  .schem { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .gauge { grid-column: 1 / span 6; }
  .hose-side { grid-column: 7 / span 6; }
  .sheet__tb { grid-template-columns: repeat(4, 1fr) auto; }
  .tb--name { grid-column: 1 / -1; border-bottom: 1px solid var(--ink); }
  .tb--name + .tb { border-left: 0; }
  .cert { grid-template-columns: 1fr; }
  .cert__doc { max-width: 420px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hide-s { display: none !important; }
  .hdr__logo { width: 96px; }
  .hdr__tel { font-size: 13px; }
  .hdr__tel .hdr__gauge { display: none; }
  .sh__label { grid-column: 2 / -1; }
  .col-lead { grid-column: 1 / -1; }
  .about-cols { grid-template-columns: 1fr; row-gap: 28px; }
  .schem { grid-template-columns: 1fr; }
  .gauge, .hose-side { grid-column: 1 / -1; }
  .hose-side { margin-top: 40px; }
  .seg button { padding-left: 12px; }
  .sheet__tb { grid-template-columns: repeat(3, 1fr) auto; }
  .tb { padding: 7px 8px; }
  .c-bal, .c-dimt { display: none; }
  .specs { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .specs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .also, .other { grid-template-columns: 1fr; }
  .also h3, .also ul, .other h3, .other ul { grid-column: 1 / -1; }
  .also ul, .other ul { grid-template-columns: 1fr; margin-top: 12px; }
  .pipes { grid-template-columns: 1fr; }
  .svc__row { grid-template-columns: 52px 112px minmax(0, 1fr); row-gap: 6px; align-items: start; }
  .svc__no { grid-column: 1; grid-row: 1 / span 2; padding-top: 6px; }
  .pic { grid-column: 2; grid-row: 1 / span 2; }
  .svc__t { grid-column: 3; font-size: 1.9rem; }
  .svc__d { grid-column: 3; font-size: 15px; }
  .certs { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr; row-gap: 24px; }
  .ftr__logo, .ftr__top p, .ftr__nav { grid-column: 1; }
  .ftr__nav { justify-content: flex-start; }
  .ftr__bot { flex-direction: column; }
  .hose__svg .h-t { font-size: 28px; }
  .h-t--l, .h-t--r, .h-lead { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.io [data-reveal] { opacity: 1; transform: none; }
}
@media print {
  .hdr, .viewer { display: none; }
  .ink, .contact { background: none; color: #000; }
}