:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E7E5E4;
  --line-soft: #F5F5F4;
  --accent: #EA580C;
  --accent-deep: #C2410C;
  --warn: #DC2626;
  --max: 1200px;
  --pad-x: 24px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
button { font: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Type scale */
h1, h2, h3, h4 { margin: 0; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 5.2vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.25; }
h4 { font-size: 16px; font-weight: 600; line-height: 1.3; }
p { margin: 0; }

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}
.muted { color: var(--muted); }

/* Section */
section { padding: 96px 0; }
@media (max-width: 768px) {
  section { padding: 64px 0; }
}

/* Reveal-on-scroll — default visible; .pending is added by JS only to below-fold elements */
.reveal { opacity: 1; transform: none; }
.reveal.pending {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.pending.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal.pending { opacity: 1; transform: none; transition: none; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn-warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.btn-warn:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); color: #fff; }
.btn .arr { transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(2px); }

/* Inline link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.link-arrow .arr { transition: transform 0.15s ease; }
.link-arrow:hover .arr { transform: translateX(3px); }

/* Header */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--line);
  transition: backdrop-filter 0.2s ease, background 0.2s ease;
}
header.site.scrolled { backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); background: rgba(255,255,255,0.85); }
header.site .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: inline-flex; align-items: center; height: 40px; color: var(--ink); }
.logo img { display: block; height: 32px; width: auto; }
@media (max-width: 480px) { .logo img { height: 28px; } }

nav.primary { display: flex; gap: 28px; }
nav.primary a { color: var(--ink); font-size: 14.5px; font-weight: 500; }
nav.primary a:hover { color: var(--accent); }
nav.primary a.active { color: var(--accent); }

.header-right { display: flex; align-items: center; gap: 18px; }
.header-right .phone { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.header-right .phone:hover { color: var(--ink); }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  position: relative;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: #fff;
  z-index: 99;
  padding: 24px;
  border-top: 1px solid var(--line);
}
.mobile-menu.open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  color: var(--ink);
  font-size: 18px; font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .mobile-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1024px) {
  nav.primary { display: none; }
  .header-right .phone { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 768px) {
  .header-right .btn { display: none; }
}

/* Hero (home) — full-bleed photo background with gradient overlay */
.hero {
  position: relative;
  background: #0F172A url('/assets/backm.jpg') center / cover no-repeat;
  color: #fff;
  padding: 132px 0 120px;
  overflow: hidden;
  border-bottom: 1px solid #1F2937;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15, 23, 42, 0.94) 0%,
    rgba(15, 23, 42, 0.85) 30%,
    rgba(15, 23, 42, 0.65) 65%,
    rgba(15, 23, 42, 0.52) 100%
  );
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-content { max-width: 720px; }
.hero .eyebrow { color: #FDBA74; }
.hero h1 { color: #fff; margin-top: 16px; max-width: 18ch; }
.hero .lead { color: #D1D5DB; margin-top: 22px; max-width: 58ch; font-size: 19px; }
.hero .cta-row {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Version 1.1 — product-focused hero with an explicit future-photo slot */
.hero-v11 {
  background: #0F172A;
  padding: 96px 0;
}
.hero-v11::before {
  background:
    radial-gradient(circle at 84% 16%, rgba(234, 88, 12, 0.14), transparent 34%),
    linear-gradient(120deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.9));
}
.hero-v11 .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 72px;
  align-items: center;
}
.hero-v11 .hero-content { max-width: 700px; }
.hero-v11 h1 { max-width: 16ch; }
.hero-placeholder {
  min-height: 420px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 16px);
  color: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.hero-placeholder span {
  align-self: flex-start;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 5px;
  color: #FDBA74;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-placeholder strong { margin-top: 14px; max-width: 22ch; font-size: 22px; line-height: 1.25; }
.hero-placeholder small { margin-top: 8px; color: #94A3B8; font-size: 13px; }
@media (max-width: 900px) {
  .hero-v11 .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-placeholder { min-height: 300px; }
}

@media (max-width: 1024px) {
  .hero { padding: 100px 0 88px; }
  .hero::before {
    background: linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.92) 0%,
      rgba(15, 23, 42, 0.82) 50%,
      rgba(15, 23, 42, 0.68) 100%
    );
  }
}
@media (max-width: 768px) {
  .hero { padding: 80px 0 72px; }
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.86) 0%,
      rgba(15, 23, 42, 0.78) 60%,
      rgba(15, 23, 42, 0.7) 100%
    );
  }
  .hero .lead { font-size: 17px; }
}

/* Section header */
.sec-head { max-width: 720px; }
.sec-head .eyebrow { margin-bottom: 14px; display: block; }
.sec-head h2 + p { margin-top: 16px; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* Two directions */
.two-cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) { .two-cards { grid-template-columns: 1fr; } }
.dir-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dir-card:hover { border-color: #d1d5db; box-shadow: var(--shadow-card); }
.dir-card .ico-wrap {
  width: 56px; height: 56px;
  background: #F3F4F6;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 24px;
  color: var(--ink);
}
.dir-card h3 { font-size: 22px; }
.dir-card p { color: var(--muted); margin-top: 12px; flex: 1; }
.dir-card .link-arrow { margin-top: 24px; }

/* Product grid */
.prod-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: border-color 0.2s ease;
}
.prod-card:hover { border-color: #d1d5db; }
.prod-card .ico-wrap {
  width: 48px; height: 48px;
  background: #F3F4F6;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.prod-card .body { flex: 1; min-width: 0; }
.prod-card .head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.prod-card h3 { font-size: 18px; }
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F3F4F6;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.prod-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.prod-card .link-arrow { margin-top: 14px; font-size: 13px; }

/* Services */
.svc-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  transition: border-color 0.2s ease;
}
.svc-card:hover { border-color: #d1d5db; }
.svc-card .ico-wrap {
  width: 44px; height: 44px;
  background: #F3F4F6;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--ink);
}
.svc-card h3 { font-size: 18px; }
.svc-card p { color: var(--muted); font-size: 14.5px; margin-top: 10px; line-height: 1.55; }

/* Sectors */
.sectors {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 1024px) { .sectors { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .sectors { grid-template-columns: 1fr; } }
.sector {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}
.sector .ico { width: 28px; height: 28px; margin-bottom: 16px; color: var(--ink); }
.sector h3 { font-size: 17px; }
.sector p { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Manufacturing */
.mfg-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1024px) { .mfg-grid { grid-template-columns: 1fr; gap: 40px; } }
.mfg-grid .lead { font-size: 17px; }
.mfg-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
@media (max-width: 480px) { .mfg-stats { grid-template-columns: 1fr; } }
.stat { border-top: 1px solid var(--line); padding-top: 16px; }
.stat .num { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.stat .lbl { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Vakansii teaser (dark band on home) */
.vakansii-teaser {
  background: #111827;
  color: #fff;
}
.vakansii-teaser .eyebrow { color: #9CA3AF; }
.vakansii-teaser h2 { color: #fff; }
.vakansii-teaser .lead { color: #D1D5DB; }
.vac-chips {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vac-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid #374151;
  border-radius: 8px;
  background: transparent;
  color: #E5E7EB;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: default;
}
.vac-chip:hover { border-color: #6B7280; background: #1F2937; color: #fff; }
.vakansii-teaser .cta-row {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.vakansii-teaser .hr-phone { color: #9CA3AF; font-size: 14px; }
.vakansii-teaser .hr-phone a { color: #fff; }

/* Contacts */
.contacts-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 768px) { .contacts-grid { grid-template-columns: 1fr; gap: 24px; } }
.contact-col { border-top: 1px solid var(--ink); padding-top: 18px; }
.contact-col h3 { font-size: 16px; }
.contact-col a { display: block; margin-top: 10px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.contact-col a + a { margin-top: 4px; color: var(--muted); }
.contact-col a:hover { color: var(--accent); }
.legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Footer */
footer.site {
  background: #111827;
  color: #D1D5DB;
  padding: 64px 0 28px;
}
footer.site .ftop {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 768px) { footer.site .ftop { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { footer.site .ftop { grid-template-columns: 1fr; } }
footer.site .descr { margin-top: 14px; font-size: 14px; color: #9CA3AF; max-width: 36ch; line-height: 1.55; }
footer.site h4 { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer.site ul a { color: #D1D5DB; font-size: 14px; }
footer.site ul a:hover { color: #fff; }
footer.site .copyright {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid #374151;
  font-size: 13px;
  color: #9CA3AF;
}

/* ============================================ */
/*  VAKANSII PAGE                                */
/* ============================================ */

/* Page hero (dark band) */
.vh-hero {
  position: relative;
  background: #111827 url('/assets/vakansii-hero.jpg') center / cover no-repeat;
  color: #fff;
  padding: 88px 0 80px;
  overflow: hidden;
  border-bottom: 1px solid #1F2937;
}
.vh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(17, 24, 39, 0.97) 0%,
    rgba(17, 24, 39, 0.9) 35%,
    rgba(17, 24, 39, 0.72) 63%,
    rgba(17, 24, 39, 0.58) 100%
  );
  pointer-events: none;
}
.vh-hero .wrap { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .vh-hero {
    padding: 56px 0 56px;
    background-position: 58% center;
  }
  .vh-hero::before {
    background: linear-gradient(
      180deg,
      rgba(17, 24, 39, 0.91) 0%,
      rgba(17, 24, 39, 0.84) 56%,
      rgba(17, 24, 39, 0.78) 100%
    );
  }
}
.vh-hero .crumbs { font-size: 13px; color: #9CA3AF; margin-bottom: 18px; }
.vh-hero .crumbs a { color: #9CA3AF; }
.vh-hero .crumbs a:hover { color: #fff; }
.vh-hero .crumbs .sep { margin: 0 8px; opacity: 0.6; }
.vh-hero .eyebrow { color: #FDBA74; font-weight: 600; }
.vh-hero h1 { color: #fff; margin-top: 14px; max-width: 22ch; }
.vh-hero .lead { color: #D1D5DB; margin-top: 22px; max-width: 64ch; }
.vh-hero .hero-stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 56px;
}
@media (max-width: 640px) { .vh-hero .hero-stats { grid-template-columns: 1fr 1fr; gap: 28px; } }
.vh-hero .hero-stats > div {
  border-top: 1px solid #374151;
  padding-top: 16px;
  min-width: 110px;
}
.vh-hero .hero-stats strong {
  display: block;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.vh-hero .hero-stats span {
  display: block;
  margin-top: 4px;
  color: #9CA3AF;
  font-size: 13.5px;
}
.vh-hero .cta-row {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.vh-hero .updated {
  margin-top: 24px;
  font-size: 13px;
  color: #9CA3AF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vh-hero .updated::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
@media (max-width: 768px) {
  .vh-hero h1 { max-width: 11ch; }
  .vh-hero .lead { max-width: 32ch; }
  .vh-hero .cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .vh-hero .cta-row .btn {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }
}

/* Why us */
.why-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}
@media (max-width: 1024px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }
.why-item .ico-wrap {
  width: 44px; height: 44px;
  background: #F3F4F6;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 16px;
  color: var(--ink);
}
.why-item h3 { font-size: 17px; }
.why-item p { color: var(--muted); font-size: 14.5px; margin-top: 8px; line-height: 1.6; }

/* Vacancies accordion */
.vacancies-section { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vac-list { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.vac {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  scroll-margin-top: 88px;
}
.vac[open] { border-color: #d1d5db; box-shadow: var(--shadow-card); }
.vac:hover:not([open]) { border-color: #d1d5db; }
.vac > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.vac > summary::-webkit-details-marker { display: none; }
.vac-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vac-title h3 { font-size: 18px; font-weight: 600; }
.vac-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.vac-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F3F4F6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.vac-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
}
.vac-toggle::before { content: "Деталі"; }
.vac[open] .vac-toggle::before { content: "Згорнути"; }
.vac-toggle::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
.vac[open] .vac-toggle::after { transform: rotate(-135deg) translate(-1px, -1px); }
.vac-body { padding: 4px 28px 28px; border-top: 1px solid var(--line-soft); margin-top: -1px; padding-top: 24px; }
.vac-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 768px) { .vac-cols { grid-template-columns: 1fr; gap: 24px; } }
.vac-body h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.vac-body h4:not(:first-child) { margin-top: 24px; }
.vac-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vac-body ul li {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}
.vac-body ul li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--muted);
  border-radius: 50%;
  position: absolute;
  left: 4px; top: 9px;
}
.vac-body .vac-cta { margin-top: 24px; }
@media (max-width: 640px) {
  .vac > summary { padding: 18px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .vac-toggle { align-self: flex-start; }
  .vac-body { padding: 22px 20px 22px; }
}

.no-match {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #FAFAFA;
  font-size: 14.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.no-match strong { color: var(--ink); font-weight: 600; }

/* Hiring process steps */
.steps {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; gap: 16px; } }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  position: relative;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 17px; }
.step p { color: var(--muted); font-size: 14.5px; margin-top: 8px; line-height: 1.6; }

/* FAQ */
.faq-section { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-list {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  max-width: 880px;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > div {
  padding: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 75ch;
}

/* Apply section */
.apply { padding-bottom: 96px; }
.apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1024px) { .apply-grid { grid-template-columns: 1fr; gap: 40px; } }
.apply-text .lead { margin-top: 16px; max-width: 50ch; }
.apply-contacts {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apply-contact {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.15s ease;
}
.apply-contact:hover { border-color: var(--ink); color: var(--ink); box-shadow: var(--shadow-card); }
.apply-contact .ico-wrap {
  width: 38px; height: 38px;
  background: #F3F4F6;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.apply-contact .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apply-contact strong {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.apply-contact span { font-size: 13px; color: var(--muted); }

/* Application form */
.apply-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 480px) { .apply-form { padding: 24px; } }
.apply-form h3 { font-size: 20px; margin-bottom: 4px; }
.apply-form .form-sub { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.apply-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apply-form label > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.apply-form label > span em {
  color: var(--warn);
  font-style: normal;
  margin-left: 2px;
}
.apply-form input,
.apply-form select,
.apply-form textarea {
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.apply-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.apply-form textarea { resize: vertical; min-height: 84px; }
.apply-form button { margin-top: 4px; align-self: flex-start; }
.apply-form .form-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
}
.apply-form .form-success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}
.apply-form.is-sent .form-success { display: block; }
.apply-form.is-sent label,
.apply-form.is-sent button,
.apply-form.is-sent .form-note,
.apply-form.is-sent .form-sub { display: none; }

.apply-form .form-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}
.apply-form.is-failed .form-error { display: block; }

/* ============================================ */
/*  VERSION 1.1 — PUMP AUTOMATION                */
/* ============================================ */
body.v11 { background: #F8FAFC; }
.v11 section { scroll-margin-top: 64px; }
.v11 .header-mail { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.v11 .header-mail:hover { color: var(--ink); }
.language-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #F8FAFC; }
.language-switcher a, .language-switcher span { min-width: 30px; padding: 4px 6px; border-radius: 4px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; }
.language-switcher a { color: var(--muted); }
.language-switcher a:hover { color: var(--ink); background: #fff; }
.language-switcher span { color: #fff; background: var(--ink); }
.mobile-language { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.mobile-language a, .mobile-language span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-weight: 600; }
.mobile-language span { color: #fff; background: var(--ink); border-color: var(--ink); }
.mobile-language a { color: var(--ink); background: #fff; }

.v11 .hero-v11 {
  background: #0F172A;
  padding: 88px 0;
  min-height: 650px;
  display: flex;
  align-items: center;
}
.v11 .hero-v11::before {
  background: radial-gradient(circle at 84% 16%, rgba(234,88,12,0.16), transparent 33%), linear-gradient(120deg, rgba(15,23,42,0.99), rgba(15,23,42,0.91));
}
.v11 .hero-v11 .wrap {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 72px;
  align-items: center;
}
.v11 .hero-v11 h1 { max-width: 15ch; }
.v11 .hero-v11 .lead { max-width: 61ch; }
.hero-proof { margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; flex-wrap: wrap; gap: 12px 26px; }
.hero-proof span { position: relative; padding-left: 13px; color: #CBD5E1; font-size: 12px; font-weight: 500; letter-spacing: 0.03em; }
.hero-proof span::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero-market { margin-top: 16px; max-width: 62ch; color: #94A3B8; font-size: 12.5px; line-height: 1.55; }

.photo-placeholder {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(15,23,42,0.04), rgba(15,23,42,0.13)), repeating-linear-gradient(135deg, rgba(15,23,42,0.05) 0 1px, transparent 1px 17px), #E2E8F0;
  color: var(--ink);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.photo-placeholder::after { content: "+"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -58%); color: rgba(15,23,42,0.16); font-size: 92px; font-weight: 300; line-height: 1; }
.photo-placeholder > * { position: relative; z-index: 1; }
.photo-placeholder .photo-label { align-self: flex-start; padding: 5px 8px; border: 1px solid rgba(15,23,42,0.18); border-radius: 4px; color: #475569; background: rgba(255,255,255,0.55); font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.photo-placeholder strong { display: block; max-width: 25ch; font-size: 18px; line-height: 1.3; }
.photo-placeholder small { display: block; margin-top: 7px; color: #475569; font-size: 12px; line-height: 1.45; }
.photo-placeholder--hero { min-height: 430px; border-color: rgba(255,255,255,0.2); background: linear-gradient(150deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015)), repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 17px); color: #fff; }
.photo-placeholder--hero::after { color: rgba(255,255,255,0.1); }
.photo-placeholder--hero .photo-label { color: #FDBA74; border-color: rgba(255,255,255,0.2); background: rgba(15,23,42,0.25); }
.photo-placeholder--hero small { color: #94A3B8; }
.site-photo { position: relative; margin: 0; overflow: hidden; border: 1px solid #CBD5E1; border-radius: 14px; background: #CBD5E1; aspect-ratio: 3 / 2; }
.site-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.site-photo figcaption { position: absolute; right: 12px; bottom: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; background: rgba(15,23,42,.72); color: rgba(255,255,255,.88); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(4px); }
.site-photo--hero { aspect-ratio: 4 / 3; border-color: rgba(255,255,255,.18); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.site-photo--hero img { object-position: 48% center; }

.intro-strip { padding: 0 !important; background: var(--accent); color: #fff; }
.intro-strip .wrap { padding-top: 23px; padding-bottom: 23px; }
.intro-strip p { max-width: 82ch; font-size: 15px; line-height: 1.55; }
.intro-strip strong { color: #fff; }
.legend-section { background: #fff; border-bottom: 1px solid var(--line); }
.legend-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 80px; align-items: center; }
.legend-copy h2 { margin-top: 14px; max-width: 19ch; }
.legend-copy p { margin-top: 20px; max-width: 58ch; color: var(--muted); font-size: 16px; line-height: 1.65; }
.legend-stack { border-top: 1px solid var(--ink); }
.legend-stack > div { padding: 18px 0; display: grid; grid-template-columns: 48px 175px 1fr; gap: 14px; align-items: start; border-bottom: 1px solid var(--line); }
.legend-stack > div > span { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding-top: 3px; }
.legend-stack > div > strong { color: var(--ink); font-size: 15px; line-height: 1.4; }
.legend-stack > div > small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.legend-stack > p { margin-top: 20px; padding: 17px 20px; border-radius: 8px; background: #0F172A; color: #E2E8F0; font-size: 14px; line-height: 1.55; }
.legend-stack > p span { color: #FDBA74; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-right: 10px; }
.v11 .sec-head { max-width: 790px; }
.v11 .sec-head h2 { max-width: 25ch; }
.v11 .sec-head p { max-width: 66ch; }

.solution-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.solution-card { min-height: 330px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: flex; flex-direction: column; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.solution-card:hover { transform: translateY(-3px); border-color: #CBD5E1; box-shadow: 0 12px 30px rgba(15,23,42,0.07); }
.card-index { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.solution-card h3 { margin-top: 40px; font-size: 20px; }
.solution-card > p { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.mini-list { margin: auto 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--line); }
.mini-list li { padding-left: 13px; position: relative; color: #475569; font-size: 12.5px; }
.mini-list li + li { margin-top: 6px; }
.mini-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background: #94A3B8; }

.section-alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-list { margin-top: 46px; border-top: 1px solid var(--ink); }
.product-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 210px; gap: 30px; align-items: center; padding: 27px 0; border-bottom: 1px solid var(--line); }
.product-code { width: 64px; height: 40px; border: 1px solid #CBD5E1; border-radius: 6px; display: grid; place-items: center; color: #475569; background: #F8FAFC; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.product-row h3 { font-size: 18px; }
.product-row p { margin-top: 6px; max-width: 72ch; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.product-row > a { justify-self: end; color: var(--accent); font-size: 13px; font-weight: 600; }
.product-row > a:hover { color: var(--accent-deep); }

.mfg-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.mfg-summary { color: var(--muted); font-size: 17px; line-height: 1.65; }
.capability-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.capability-card { padding: 25px 24px 28px 0; }
.capability-card + .capability-card { padding-left: 24px; border-left: 1px solid var(--line); }
.capability-card > span { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; }
.capability-card h3 { margin-top: 25px; font-size: 17px; }
.capability-card p { margin-top: 9px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.photo-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pump-proof-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pump-proof-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.pump-proof-card .site-photo { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.pump-proof-copy { padding: 28px 30px 30px; }
.pump-proof-copy h3 { margin: 10px 0 12px; font-size: clamp(22px,2.3vw,30px); line-height: 1.18; letter-spacing: -.025em; }
.pump-proof-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.pump-proof-copy ul { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; }
.pump-proof-copy li { position: relative; padding-left: 12px; color: var(--ink); font-size: 12px; font-weight: 600; }
.pump-proof-copy li::before { content: ''; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.product-showcase { margin-top: 52px; }
.field-proof { margin-top: 46px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); border: 1px solid var(--line); border-radius: 16px; background: var(--ink); color: #fff; }
.field-proof .site-photo { min-height: 100%; border: 0; border-radius: 0; }
.field-proof-copy { align-self: center; padding: 42px 38px; }
.field-proof-copy .eyebrow { color: #FDBA74; }
.field-proof-copy h3 { margin: 12px 0 16px; color: #fff; font-size: clamp(24px,2.6vw,36px); line-height: 1.12; letter-spacing: -.03em; }
.field-proof-copy p { margin: 0; color: #CBD5E1; font-size: 14px; line-height: 1.7; }
.field-proof-copy .link-arrow { margin-top: 24px; color: #fff; }

.engineering-section { background: #0F172A; color: #fff; }
.engineering-section .eyebrow { color: #FDBA74; }
.engineering-section h2, .engineering-section h3 { color: #fff; }
.process-grid { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.process-grid li { min-height: 280px; padding: 26px; border: 1px solid #334155; border-radius: 12px; background: rgba(255,255,255,0.025); }
.process-grid li > span { color: #FB923C; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; }
.process-grid h3 { margin-top: 45px; font-size: 18px; }
.process-grid p { margin-top: 11px; color: #AAB6C7; font-size: 14px; line-height: 1.6; }

.international-section { background: #fff; border-bottom: 1px solid var(--line); }
.international-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 80px; align-items: start; }
.international-grid h2 { margin-top: 14px; max-width: 19ch; }
.international-grid > div:first-child > p { margin-top: 20px; max-width: 55ch; color: var(--muted); font-size: 16px; line-height: 1.65; }
.international-grid .link-arrow { margin-top: 26px; }
.cooperation-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.cooperation-grid > div { min-height: 180px; padding: 22px 24px 24px 0; border-bottom: 1px solid var(--line); }
.cooperation-grid > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.cooperation-grid span { display: block; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; }
.cooperation-grid strong { display: block; margin-top: 28px; color: var(--ink); font-size: 15px; }
.cooperation-grid small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.55; }

.requirements-section { background: #EDEFF2; }
.requirements-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 80px; align-items: start; }
.requirements-grid h2 { margin-top: 14px; max-width: 18ch; }
.requirements-grid p { margin-top: 18px; max-width: 48ch; color: var(--muted); }
.requirements-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #94A3B8; }
.requirements-list li { padding: 17px 0; border-bottom: 1px solid #CBD5E1; color: #1E293B; font-size: 15px; line-height: 1.45; display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
.requirements-list span { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding-top: 4px; }

.contact-section { background: #fff; }
.contact-panel { padding-top: 52px; padding-bottom: 52px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.contact-panel h2 { margin-top: 14px; max-width: 20ch; }
.contact-panel p { margin-top: 18px; max-width: 62ch; color: var(--muted); }
.contact-action { padding: 28px; border-radius: 12px; background: #F1F5F9; display: flex; flex-direction: column; align-items: flex-start; }
.contact-action > span { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.contact-action > a:not(.btn) { margin-top: 11px; color: var(--ink); font-size: clamp(18px, 2.2vw, 25px); font-weight: 600; letter-spacing: -0.02em; }
.contact-action > a:not(.btn):hover { color: var(--accent); }
.contact-action small { margin-top: 8px; color: var(--muted); font-size: 12px; }
.contact-action .btn { margin-top: 28px; }

@media (max-width: 1120px) {
  .v11 .header-mail { display: none; }
  .solution-grid { grid-template-columns: 1fr 1fr; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .capability-card:nth-child(4) { border-top: 1px solid var(--line); }
  .process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .v11 .hero-v11 { min-height: 0; padding: 74px 0; }
  .v11 .hero-v11 .wrap { grid-template-columns: 1fr; gap: 42px; }
  .photo-placeholder--hero { min-height: 320px; }
  .site-photo--hero { width: min(100%, 680px); }
  .legend-grid, .mfg-intro, .international-grid, .requirements-grid, .contact-panel { grid-template-columns: 1fr; gap: 36px; }
  .photo-grid, .pump-proof-grid, .field-proof { grid-template-columns: 1fr; }
  .field-proof .site-photo { min-height: 0; }
  .photo-grid .photo-placeholder { min-height: 260px; }
  .product-row { grid-template-columns: 74px 1fr; }
  .product-row > a { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
  .v11 section { padding: 64px 0; }
  .v11 .hero-v11 { padding: 58px 0; }
  .v11 .hero-v11 h1 { max-width: 12ch; }
  .v11 .hero-v11 .cta-row { flex-direction: column; align-items: stretch; }
  .v11 .hero-v11 .btn { justify-content: center; }
  .hero-proof { gap: 10px 18px; }
  .photo-placeholder--hero { min-height: 270px; }
  .site-photo figcaption { right: 8px; bottom: 8px; }
  .pump-proof-copy { padding: 24px 22px 26px; }
  .solution-grid, .capability-grid, .process-grid { grid-template-columns: 1fr; }
  .solution-card { min-height: 285px; }
  .capability-card, .capability-card + .capability-card { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
  .product-row { grid-template-columns: 1fr; gap: 14px; }
  .product-row > a { grid-column: 1; }
  .process-grid li { min-height: 240px; }
  .contact-panel { margin-left: var(--pad-x); margin-right: var(--pad-x); padding-left: 0; padding-right: 0; }
  .contact-action { padding: 22px; }
  .contact-action > a:not(.btn) { word-break: break-word; }
  .intro-strip .wrap { padding-top: 20px; padding-bottom: 20px; }
  .legend-stack > div { grid-template-columns: 38px 1fr; }
  .legend-stack > div > small { grid-column: 2; }
  .cooperation-grid { grid-template-columns: 1fr; }
  .cooperation-grid > div, .cooperation-grid > div:nth-child(even) { min-height: 0; padding: 20px 0; border-left: 0; }
}