/* ============================================================
   SIEMER ENERTEC — Design System
   Brand: Crimson #B7005C | Gray #7F7F7F | Silver #A6A6A6
   ============================================================ */
:root {
  --brand: #B7005C;
  --brand-dark: #8E0048;
  --brand-light: #D9337D;
  --brand-tint: #FBF0F5;
  /* #7F7F7F measured 4.00:1 on white, under the 4.5:1 WCAG AA floor for normal text,
     and it is used for 13px captions. Darkened to clear it at 5.10:1. Visually almost
     identical; the difference is that captions now pass. */
  --gray: #6E6E6E;
  --silver: #A6A6A6;
  /* Small text on the dark ink background. --gray gives 3.53:1 there, so anything
     under ~18px on ink must use this instead. */
  --gray-on-dark: #A6A6A6;
  /* --brand-light is 3.17:1 on ink: fine for the large stat units, not for a 12px
     eyebrow. This is the accessible pink for small text on dark. */
  --brand-on-dark: #F07FAF;
  --ink: #2B2B2E;
  --ink-soft: #55555A;
  --bg: #FFFFFF;
  --bg-soft: #F7F6F5;
  --line: #E8E6E4;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(43, 43, 46, .08);
  --shadow-lg: 0 20px 50px rgba(43, 43, 46, .14);
  --container: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* nothing may push the page sideways on mobile */
}
img { max-width: 100%; display: block; }
/* Long unbroken strings (URLs, part numbers) must never widen the layout */
h1, h2, h3, h4, p, li, td, th { overflow-wrap: anywhere; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px; gap: 24px;
}
.logo img { height: 46px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav > ul { display: flex; list-style: none; gap: 4px; align-items: center; }
.main-nav a {
  display: block; padding: 10px 16px; color: var(--ink); font-weight: 600;
  font-size: 15px; border-radius: 8px; transition: all .2s;
}
.main-nav a:hover, .main-nav a.active { color: var(--brand); background: var(--brand-tint); }
.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: ""; display: inline-block; margin-left: 7px;
  border: solid var(--gray); border-width: 0 2px 2px 0; padding: 3px;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .22s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a { padding: 11px 14px; border-radius: 8px; font-weight: 500; }
.nav-cta {
  background: var(--brand); color: #fff !important; border-radius: 999px;
  padding: 11px 22px !important; margin-left: 10px; font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(183, 0, 92, .3);
}
.nav-cta:hover { background: var(--brand-dark) !important; }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: all .25s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #8E0048 0%, #B7005C 55%, #D9337D 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(0,0,0,.18), transparent 60%);
}

/* Video-background variant */
.hero-video { background: #3A0020; min-height: min(88vh, 760px); display: flex; align-items: center; }
.hero-video::before { display: none; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
/* Brand scrim: keeps the footage crimson and the type readable */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(58,0,32,.92) 0%, rgba(96,0,49,.72) 34%, rgba(140,0,70,.34) 58%, rgba(183,0,92,.10) 80%, rgba(183,0,92,.04) 100%),
    radial-gradient(ellipse 55% 60% at 88% 22%, rgba(217,51,125,.16), transparent 65%);
}
.hero-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(43,43,46,.30) 0%, transparent 22%, transparent 74%, rgba(43,43,46,.42) 100%);
}
/* NOTE: only ever set vertical padding on .hero-inner — it also carries .container,
   whose horizontal padding is what keeps content off the screen edge on mobile. */
.hero-video .hero-inner {
  grid-template-columns: minmax(0, 760px);
  padding-top: 104px; padding-bottom: 104px;
}

.hero-inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 48px; align-items: center;
  padding-top: 90px; padding-bottom: 100px;
}
.hero .kicker {
  display: inline-block; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px);
  padding: 7px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(36px, 5.6vw, 68px); line-height: 1.04; font-weight: 800;
  letter-spacing: -.025em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(43,0,24,.45);
}
.hero h1 em {
  font-style: normal; font-weight: 300; letter-spacing: -.01em;
  color: rgba(255,255,255,.86);
}
.hero p.lead {
  margin-top: 24px; font-size: 18.5px; max-width: 610px; font-weight: 400;
  color: rgba(255,255,255,.90); line-height: 1.68;
  text-shadow: 0 1px 12px rgba(43,0,24,.4);
}
.hero-actions { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Value-chain strip under the buttons */
.hero-meta {
  margin-top: 44px; padding-top: 24px; list-style: none;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: 10px 34px;
}
.hero-meta li {
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.80);
  position: relative; padding-left: 16px;
}
.hero-meta li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.65);
}

/* Scroll cue */
.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.45);
  border-radius: 999px; display: flex; justify-content: center; padding-top: 7px;
}
.hero-scroll span {
  width: 3px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.85);
  animation: scrollCue 1.9s ease-in-out infinite;
}
@keyframes scrollCue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(12px); opacity: .25; }
}

.hero-media { position: relative; z-index: 2; }
.hero-media img {
  border-radius: var(--radius); box-shadow: 0 30px 60px rgba(0,0,0,.35);
  border: 4px solid rgba(255,255,255,.25);
}

/* Respect reduced-motion: freeze video, drop the cue animation */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll span { animation: none; }
  .hero-bg { display: none; }
  .hero-video {
    background: #3A0020 url("../assets/hero-poster.jpg") center/cover no-repeat;
  }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative; color: #fff; padding: 76px 0;
  background: linear-gradient(120deg, #7A003D 0%, #B7005C 70%, #C9186C 100%);
}
/* Photographic variant */
.page-hero.has-image { padding: 104px 0; overflow: hidden; }
.page-hero .ph-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: 0;
}
.page-hero .ph-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(58,0,32,.93) 0%, rgba(96,0,49,.80) 38%, rgba(140,0,70,.52) 66%, rgba(183,0,92,.30) 100%),
    linear-gradient(to bottom, rgba(43,43,46,.28) 0%, transparent 26%, transparent 72%, rgba(43,43,46,.34) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
@media (max-width: 820px) {
  .page-hero.has-image { padding: 76px 0; }
  .page-hero .ph-scrim {
    background:
      linear-gradient(165deg, rgba(58,0,32,.94) 0%, rgba(122,0,61,.88) 55%, rgba(183,0,92,.62) 100%);
  }
}

/* Two-column editorial intro (heading left, body right) */
.intro-split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 48px; align-items: start; }
.intro-split .eyebrow { margin-bottom: 12px; }
.intro-split h2 { font-size: clamp(24px,3vw,34px); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; }
.intro-split p { color: var(--ink-soft); }
.intro-split p + p { margin-top: 14px; }
@media (max-width: 820px) { .intro-split { grid-template-columns: 1fr; gap: 22px; } }
.page-hero h1 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; letter-spacing: -.01em; }
.page-hero p { margin-top: 12px; font-size: 18px; max-width: 700px; color: rgba(255,255,255,.9); }
.breadcrumb { font-size: 13.5px; margin-bottom: 16px; color: rgba(255,255,255,.75); }
.breadcrumb a { color: #fff; font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  font-weight: 700; font-size: 15.5px; transition: all .2s; cursor: pointer; border: 0;
}
.btn-primary { background: #fff; color: var(--brand); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.btn-primary:hover { transform: translateY(-2px); color: var(--brand-dark); }
.btn-outline { border: 2px solid rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-brand { background: var(--brand); color: #fff; box-shadow: 0 8px 24px rgba(183,0,92,.28); }
.btn-brand:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }

/* ---------- Sections ---------- */
section { padding: 84px 0; }
section.tight { padding: 56px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  color: var(--brand); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: 13px; margin-bottom: 12px;
}
h2.title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.section-head p { margin-top: 14px; color: var(--ink-soft); font-size: 17px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: all .25s; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(183,0,92,.35); }
.card .card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-media img { transform: scale(1.05); }
.card .card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 19px; font-weight: 750; line-height: 1.35; }
.card p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; flex: 1; }
.card .card-link { margin-top: 16px; font-weight: 700; font-size: 14.5px; }
.card .card-link::after { content: " →"; transition: margin .2s; }
.card:hover .card-link::after { margin-left: 5px; }

/* ---------- Feature rows (alternating) ---------- */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 44px 0;
}
.feature-row.reverse .feature-media { order: 2; }
.feature-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; }
.feature-copy h3 { font-size: 26px; font-weight: 800; margin-bottom: 14px; letter-spacing: -.01em; }
.feature-copy p { color: var(--ink-soft); margin-bottom: 12px; }
.feature-copy ul { margin: 14px 0 0 0; list-style: none; }
.feature-copy li { padding-left: 30px; position: relative; margin-bottom: 10px; color: var(--ink-soft); }
.feature-copy li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 800;
}
.feature-copy li strong { color: var(--ink); }

/* ---------- Photo band ----------
   A dark full-bleed strip carrying a section header over a photograph. Used where
   a section is otherwise all light cards and needs a visual anchor at the top.
   The copy sits in the RIGHT column and the scrim is heaviest on that side, which
   leaves the left of the photograph, where the subject is, reading in the clear. */
.photo-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.photo-band .pb-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Y is pulled well above centre so the tablet's header stays inside the crop
     when a 4:3 photo is covered into a wide, short band. */
  object-fit: cover; object-position: 30% 20%; z-index: 0;
}
.photo-band .pb-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(260deg, rgba(20,4,12,.95) 0%, rgba(38,4,22,.92) 30%, rgba(70,4,38,.60) 58%, rgba(20,4,12,.28) 100%),
    linear-gradient(to bottom, rgba(20,4,12,.50) 0%, transparent 32%, transparent 68%, rgba(20,4,12,.50) 100%);
}
.photo-band .container { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 88px; }
.photo-band .pb-copy { max-width: 600px; margin-left: auto; }
.photo-band .eyebrow { color: var(--brand-on-dark); margin-bottom: 12px; }
.photo-band h2 {
  font-size: clamp(25px,3.2vw,38px); font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; color: #fff;
}
.photo-band p {
  margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: rgba(255,255,255,.86);
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
@media (max-width: 900px) {
  /* Stacked: the photo runs behind the full width, so the scrim goes top-heavy
     instead of side-heavy and the tablet stays visible below the copy. */
  .photo-band .pb-bg { object-position: 32% 18%; }
  .photo-band .pb-scrim {
    background: linear-gradient(to bottom, rgba(20,4,12,.94) 0%, rgba(30,4,18,.90) 46%, rgba(70,4,38,.72) 78%, rgba(96,4,50,.66) 100%);
  }
  .photo-band .container { padding-top: 60px; padding-bottom: 220px; }
  .photo-band .pb-copy { max-width: none; margin-left: 0; }
  .photo-band p { text-align: left; }
}

/* ---------- Stats band ---------- */
.stats-band { background: var(--ink); color: #fff; padding: 60px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat .num {
  font-size: 42px; font-weight: 800; color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums;   /* stops the width jittering while counting */
}
.stat .num span { color: var(--brand-light); }
.stat .num .count { color: #fff; }
.stat .num .unit {
  color: var(--brand-light); font-size: .52em; font-weight: 700;
  margin-left: 7px; letter-spacing: .01em;
}
.stat .lbl { margin-top: 6px; color: var(--silver); font-size: 14.5px; font-weight: 600; letter-spacing: .03em; }

/* Optional heading above the figures */
.stats-head { text-align: center; margin-bottom: 40px; }
.stats-head .eyebrow { color: var(--brand-light); }
.stats-head h2 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: #fff;
  letter-spacing: -.01em; line-height: 1.25;
}

/* ---------- Process steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; position: relative; box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-size: 15px; font-weight: 800; color: var(--brand);
  background: var(--brand-tint); width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.step h4 { font-size: 16.5px; font-weight: 750; margin-bottom: 6px; }
.step p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Chips / tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip {
  background: var(--brand-tint); color: var(--brand-dark); font-weight: 650;
  font-size: 13.5px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(183,0,92,.18);
}
.chip.gray { background: var(--bg-soft); color: var(--ink-soft); border-color: var(--line); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, #8E0048, #B7005C 60%, #C9186C);
  color: #fff; border-radius: 20px; padding: 56px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.01em; }
.cta-band p { margin-top: 8px; color: rgba(255,255,255,.9); max-width: 560px; }

/* ---------- Values ---------- */
.value-card {
  background: #fff; border-top: 4px solid var(--brand); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow); border-left: 1px solid var(--line);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.value-card h3 { color: var(--brand); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.value-card p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px; box-shadow: var(--shadow);
}
.contact-card h3 { font-size: 21px; font-weight: 800; margin-bottom: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 650; font-size: 14px; margin-bottom: 7px; }
.form-group input, .form-group textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 15.5px; transition: border .2s; background: var(--bg-soft);
}
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--brand); background: #fff;
}
.info-item { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.info-item .ico {
  width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.info-item h4 { font-size: 15px; font-weight: 750; }
.info-item p, .info-item a { color: var(--ink-soft); font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C9C7C5; margin-top: 40px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
  padding: 64px 0 48px;
}
.footer-top .logo img { height: 44px; margin-bottom: 18px; }
.footer-top p { font-size: 14.5px; line-height: 1.8; color: var(--silver); }
.footer-top h4 {
  color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: 18px;
}
.footer-top ul { list-style: none; }
.footer-top li { margin-bottom: 11px; }
.footer-top a { color: var(--silver); font-size: 14.5px; }
.footer-top a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 13.5px; color: var(--gray-on-dark);
}
.footer-bottom a { color: var(--silver); }
.fb-right { display: flex; align-items: center; gap: 18px; flex: none; }
/* German origin mark. Sized to sit level with the copyright line without
   forcing the footer bar taller than its 22px vertical padding allows. */
.de-mark { display: block; width: 34px; height: 34px; }
@media (max-width: 640px) {
  /* The bar stacks here, so the mark leads the row instead of trailing it. */
  .fb-right { width: 100%; justify-content: space-between; gap: 12px; }
}

/* ---------- Process flow (production line stations) ---------- */
.flow { counter-reset: st; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.flow .st {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow); transition: all .22s;
}
.flow .st:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.flow .st b {
  counter-increment: st; display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px;
}
.flow .st b::before { content: "Step " counter(st, decimal-leading-zero) " · "; }
.flow .st span { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.flow .st small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.flow.dark .st { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.flow.dark .st span { color: #fff; } .flow.dark .st small { color: var(--silver); }
.flow.dark .st b { color: var(--brand-light); }

/* Compact inline flow (arrow chain) */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.chain li {
  list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 15px; font-size: 13.5px; font-weight: 650; color: var(--ink);
}
.chain li:not(:last-child)::after {
  content: "→"; margin-left: 13px; color: var(--brand); font-weight: 800;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
table.spec { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; min-width: 560px; }
table.spec caption { caption-side: bottom; padding: 14px 18px; font-size: 13px; color: var(--ink-soft); text-align: left; background: #fff; }
table.spec th, table.spec td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.spec thead th {
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; border-bottom: 0;
}
table.spec thead th.hl { background: var(--brand); }
table.spec tbody th { font-weight: 700; color: var(--ink); width: 30%; }
table.spec tbody td { color: var(--ink-soft); }
table.spec tbody tr:hover { background: var(--brand-tint); }
table.spec tbody tr:last-child th, table.spec tbody tr:last-child td { border-bottom: 0; }

/* ---------- Solution hub cards ---------- */
.sol-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow); transition: all .25s;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.sol-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom, var(--brand), var(--brand-light));
}
.sol-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(183,0,92,.35); }
.sol-card .idx {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--brand);
  text-transform: uppercase; margin-bottom: 12px;
}
.sol-card h3 { font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.sol-card p { margin-top: 12px; color: var(--ink-soft); font-size: 15px; }
.sol-card ul { margin-top: 16px; list-style: none; }
.sol-card ul li {
  font-size: 13.5px; color: var(--ink-soft); padding-left: 18px; position: relative; margin-bottom: 7px;
}
.sol-card ul li::before { content: "—"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.sol-card .card-link { margin-top: auto; padding-top: 20px; font-weight: 700; font-size: 14.5px; color: var(--brand); }
.sol-card .card-link::after { content: " →"; transition: margin .2s; }
.sol-card:hover .card-link::after { margin-left: 5px; }

/* ---------- Tech badges ---------- */
.tech-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.tech-badge {
  border: 1.5px solid var(--brand); color: var(--brand-dark); background: #fff;
  border-radius: 10px; padding: 12px 20px; font-weight: 800; font-size: 15px;
  display: flex; flex-direction: column; gap: 2px; min-width: 130px;
}
.tech-badge small { font-weight: 600; font-size: 12px; color: var(--ink-soft); letter-spacing: .02em; }

/* ---------- Catalogue band ----------
   A mock cover rather than a screenshot of the PDF: it renders from CSS, so it never
   goes stale when the catalogue is rebuilt, and it costs no bytes. */
.cat-band {
  display: grid; grid-template-columns: 210px 1fr; gap: 40px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 38px 40px;
}
.cat-cover {
  position: relative; aspect-ratio: 210 / 297; border-radius: 6px; overflow: hidden;
  background: linear-gradient(150deg, #6E0038 0%, var(--brand) 58%, #C9186C 100%);
  box-shadow: 0 14px 34px rgba(110,0,56,.32); color: #fff;
  padding: 22px 18px; display: flex; flex-direction: column; justify-content: flex-end;
}
.cat-cover .cc-mark {
  position: absolute; top: 18px; left: 18px; font-size: 15px; font-weight: 800;
  letter-spacing: .04em; color: rgba(255,255,255,.9);
}
.cat-cover b { font-size: 21px; font-weight: 800; line-height: 1.18; letter-spacing: -.01em; }
.cat-cover small {
  display: block; margin-top: 10px; padding-top: 10px; font-size: 11px;
  color: rgba(255,255,255,.82); border-top: 1px solid rgba(255,255,255,.35);
}
.cat-copy h2 { font-size: clamp(21px,2.4vw,28px); font-weight: 800; letter-spacing: -.01em; margin-bottom: 12px; }
.cat-copy > p {
  color: var(--ink-soft); font-size: 15.5px; margin-bottom: 18px;
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
.cat-list { list-style: none; margin: 0 0 24px; display: grid; gap: 8px; }
.cat-list li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ink-soft); }
.cat-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brand);
}
.cat-fine { margin-top: 14px; font-size: 13px; color: var(--gray); }
@media (max-width: 820px) {
  .cat-band { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
  .cat-cover { max-width: 170px; }
  .cat-copy > p { text-align: left; }
}

/* Footer catalogue link */
.cat-link {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  transition: border-color .2s, background .2s;
}
.cat-link:hover { border-color: var(--brand-light); background: rgba(255,255,255,.04); }
.cat-link .ci {
  flex: none; width: 22px; height: 28px; border-radius: 2px;
  background: linear-gradient(150deg, var(--brand-dark), var(--brand-light));
}
.cat-link b { display: block; color: #fff; font-size: 14px; font-weight: 700; }
.cat-link small { display: block; color: var(--gray-on-dark); font-size: 12.5px; margin-top: 1px; }

/* Catalogue request state on the contact form */
.cat-note {
  background: var(--brand-tint); border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
  padding: 14px 16px; margin-bottom: 20px; font-size: 14.5px; color: var(--ink-soft);
}
.form-check { display: flex; align-items: flex-start; gap: 10px; }
.form-check input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.form-check label { font-weight: 600; font-size: 14.5px; margin: 0; }

/* ---------- Legal documents (Impressum, privacy policy) ----------
   Narrower measure than the rest of the site. Legal text is read carefully rather than
   scanned, and a shorter line is easier to hold your place in. */
.legal-doc { max-width: 800px; }
.legal-doc h2 {
  font-size: clamp(21px,2.4vw,28px); font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 20px; padding-top: 4px;
}
.legal-doc h3 {
  font-size: 17px; font-weight: 800; margin: 34px 0 10px; letter-spacing: -.005em;
}
.legal-doc p {
  color: var(--ink-soft); font-size: 15.5px; line-height: 1.78; margin-bottom: 14px;
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
.legal-doc code {
  background: var(--brand-tint); padding: 1px 6px; border-radius: 4px;
  font-size: .92em; color: var(--brand-dark);
}
.legal-doc .table-wrap { margin-bottom: 8px; }
table.legal-table th {
  width: 34%; background: var(--bg-soft); font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line); padding: 14px 18px; text-align: left;
  vertical-align: top;
}
table.legal-table td small { display: block; margin-top: 4px; color: var(--gray); font-size: 13px; }
.lang-note {
  background: var(--bg-soft); border-left: 3px solid var(--silver);
  padding: 12px 16px; margin-bottom: 30px; font-size: 14px; color: var(--ink-soft);
}
.legal-rule { border: 0; border-top: 2px solid var(--line); margin: 52px 0 42px; }
/* Fields that still need real data. Deliberately loud so they cannot ship unnoticed. */
.todo {
  background: #FFF3CD; color: #7A5B00; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; font-size: 14px;
}
@media (max-width: 640px) {
  .legal-doc p { text-align: left; }
  table.legal-table th { width: auto; }
}

/* ---------- Figure card ----------
   A diagram on a white card with its caption. White is not decoration here: these
   diagrams are drawn on white, so on a soft or tinted section they need the card
   to sit on or the artwork edge shows as a hard rectangle. */
.figure-card {
  margin: 30px 0 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px 22px;
}
.figure-card img { display: block; width: 100%; height: auto; }
.figure-card figcaption {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
@media (max-width: 640px) {
  .figure-card { padding: 18px 18px 16px; }
  .figure-card figcaption { text-align: left; }
}

/* Honeypot. Moved off-screen rather than display:none, because some bots skip
   display:none fields specifically to avoid this trap. */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ---------- Product shot ----------
   This carried an .origin-badge overlay with a German flag; both were removed on
   request, along with their CSS. `position: relative` is kept so any future overlay
   has something to anchor to. */
.product-shot { position: relative; display: block; }
.product-shot img {
  width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #fff;
}

/* ---------- Newsroom ---------- */
.news-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.news-filter {
  background: #fff; border: 1.5px solid var(--line); color: var(--ink-soft);
  border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all .18s;
}
.news-filter:hover { border-color: var(--brand); color: var(--brand); }
.news-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 24px; }
.news-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: all .22s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.news-card.is-hidden { display: none; }
.news-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.news-meta time { color: var(--ink-soft); }
.news-meta .news-source {
  color: var(--brand); padding-left: 10px; border-left: 1px solid var(--line);
}
.news-lang {
  display: inline-block; background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--ink-soft); border-radius: 4px; padding: 1px 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
}
.news-filter-sep {
  width: 1px; align-self: stretch; background: var(--line); margin: 2px 6px;
}
.news-card h3 { font-size: 18px; font-weight: 750; line-height: 1.36; letter-spacing: -.005em; }
.news-card h3 a { color: var(--ink); }
.news-card h3 a:hover { color: var(--brand); }
.news-card p { margin-top: 11px; color: var(--ink-soft); font-size: 14.5px; flex: 1; }
.news-foot {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.news-foot .chips { margin-top: 0; gap: 6px; }
.news-foot .chip { font-size: 11.5px; padding: 5px 11px; }
.news-link { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.news-link::after { content: " ↗"; }
.news-stamp {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--gray);
}
.news-empty { color: var(--ink-soft); }
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-card { padding: 20px; }
}

/* ---------- Line layout plan (very wide CAD drawing) ---------- */
.plan-wrap {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  box-shadow: var(--shadow); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.plan-wrap img { display: block; width: 100%; min-width: 900px; height: auto; }
.plan-scroll-hint {
  display: none; margin-top: 10px; font-size: 13px; color: var(--gray);
}
.plan-scroll-hint::before { content: "↔ "; color: var(--brand); font-weight: 800; }
.plan-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px;
  font-size: 13px; color: var(--ink-soft);
}
.plan-legend span { display: flex; align-items: center; gap: 8px; }
.plan-legend i {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(0,0,0,.12);
}
.plan-caption { margin-top: 14px; font-size: 13px; color: var(--gray); }
@media (max-width: 900px) { .plan-scroll-hint { display: block; } }

/* ---------- Device duo (two vehicle classes, side by side) ----------
   Cut-out hardware on a tinted stage rather than a photograph, so the vehicles
   read as products in the site's own visual language instead of stock imagery. */
.device-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.device-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
/* The illustrations carry their own floor glow and route, so the stage stays a flat
   tint, no radial glow or floor line underneath them to fight with. */
.dev-stage {
  position: relative; padding: 20px 18px 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff 0%, var(--brand-tint) 100%);
  border-bottom: 1px solid var(--line);
}
.dev-stage img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.dev-tag {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
}
.dev-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.dev-body h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.dev-body > p {
  color: var(--ink-soft); font-size: 15.5px; margin-bottom: 18px;
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
.dev-traits { list-style: none; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dev-traits li {
  font-size: 12.5px; font-weight: 600; color: var(--brand-dark);
  background: var(--brand-tint); border: 1px solid rgba(183,0,92,.18);
  padding: 6px 12px; border-radius: 999px;
}
@media (max-width: 780px) {
  .device-duo { grid-template-columns: 1fr; gap: 20px; }
  .dev-stage { padding: 16px 14px 10px; }
  .dev-body { padding: 22px 22px 24px; }
  .dev-body > p { text-align: left; }
}

/* ---------- Battery architecture chain (cell → pack → rack → container) ---------- */
.arch-chain {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch;
  counter-reset: arch;
}
.arch-step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; transition: all .24s;
}
.arch-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(183,0,92,.3); }
.arch-step .arch-head {
  background: linear-gradient(120deg, var(--brand-dark), var(--brand));
  color: #fff; padding: 14px 18px;
}
.arch-step .arch-head b {
  counter-increment: arch; display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}
.arch-step .arch-head b::before { content: "0" counter(arch) " · "; }
.arch-step .arch-head span { display: block; font-size: 17px; font-weight: 750; margin-top: 3px; }
.arch-step .arch-img {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 26px 20px; background:
    radial-gradient(ellipse 70% 60% at 50% 55%, var(--brand-tint), #fff 70%);
  min-height: 168px;
}
.arch-step .arch-img img { max-height: 132px; width: auto; max-width: 100%; }
.arch-step .arch-foot {
  padding: 14px 18px 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-soft); text-align: center;
}
.arch-step .arch-foot strong { display: block; color: var(--ink); font-weight: 750; margin-bottom: 2px; }
/* connector arrows between steps */
.arch-step:not(:last-child)::after {
  content: ""; position: absolute; right: -13px; top: 50%; z-index: 2;
  width: 0; height: 0; transform: translateY(-50%);
  border-left: 9px solid var(--brand);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@media (max-width: 900px) {
  .arch-chain { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .arch-step:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
  .arch-chain { grid-template-columns: 1fr; }
  .arch-step::after { display: none !important; }
  .arch-step .arch-img { min-height: 140px; padding: 20px; }
}

/* ---------- Callout ---------- */
.callout {
  background: var(--brand-tint); border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0; padding: 22px 26px; margin: 26px 0;
}
.callout h4 { font-size: 15px; font-weight: 800; color: var(--brand-dark); margin-bottom: 8px; }
.callout p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ---------- Paragraph justification ---------- */
/* Justified body copy, with hyphenation so the browser can break long technical
   words (photovoltaic, metallisation, Czochralski) instead of opening up rivers
   of white space between them. */
.section-head p,
.lead-text,
.feature-copy p,
.intro-split p,
.callout p,
.contact-card > p,
.value-card p,
.sol-card > p,
.news-card p,
.footer-top p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;      /* only hyphenate genuinely long words */
}
/* Narrow columns justify badly, ragged-right reads better below this width */
@media (max-width: 700px) {
  .value-card p, .sol-card > p, .news-card p, .footer-top p { text-align: left; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }
.lead-text { font-size: 17.5px; color: var(--ink-soft); max-width: 780px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; }
  .hero-media { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-video { min-height: 0; }
  .hero-video .hero-inner {
    grid-template-columns: 1fr; padding-top: 84px; padding-bottom: 84px;
  }
  /* Narrower viewport: strengthen the scrim so type stays readable over a cropped frame */
  .hero-scrim {
    background:
      linear-gradient(165deg, rgba(58,0,32,.93) 0%, rgba(122,0,61,.86) 55%, rgba(183,0,92,.55) 100%),
      radial-gradient(ellipse 70% 50% at 80% 15%, rgba(217,51,125,.28), transparent 65%);
  }
}
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 78px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg); padding: 16px 24px 24px; display: none;
  }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding-left: 18px; display: none;
  }
  .has-dropdown.open .dropdown { display: block; }
  .nav-cta { margin: 10px 0 0; text-align: center; }
  .grid-3, .grid-2, .contact-grid { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row.reverse .feature-media { order: 0; }
  .cta-band { flex-direction: column; text-align: center; padding: 44px 28px; }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .grid-4, .steps, .stats-grid { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
  section.tight { padding: 40px 0; }

  /* Hero */
  .hero-video .hero-inner { padding-top: 56px; padding-bottom: 60px; }
  .hero h1 { font-size: clamp(26px, 7.6vw, 38px); letter-spacing: -.022em; line-height: 1.08; }
  .hero p.lead { font-size: 16.5px; margin-top: 16px; line-height: 1.6; }
  .hero-scroll { display: none; }

  /* Eyebrow pill: smaller, tighter tracking so it stays one line where it can */
  .hero .kicker {
    font-size: 10.5px; letter-spacing: .1em; padding: 6px 14px;
    margin-bottom: 20px; line-height: 1.5;
  }

  /* Buttons: full width but shorter, tighter stack, primary clearly dominant */
  .hero-actions { margin-top: 28px; gap: 10px; width: 100%; }
  .hero-actions .btn {
    width: 100%; text-align: center; padding: 14px 20px; font-size: 15px;
  }
  .hero-actions .btn-outline { border-width: 1.5px; }
  .btn { padding: 13px 24px; font-size: 15px; }

  /* Value-chain strip: tighter, two clean rows */
  .hero-meta { gap: 7px 18px; margin-top: 26px; padding-top: 16px; }
  .hero-meta li { font-size: 11px; letter-spacing: .09em; padding-left: 13px; }
  .hero-meta li::before { width: 5px; height: 5px; }

  /* Section headings and cards */
  h2.title { font-size: clamp(22px, 6.4vw, 28px); }
  .page-hero { padding: 56px 0; }
  .page-hero h1 { font-size: clamp(26px, 7.6vw, 34px); }
  .section-head { margin-bottom: 32px; }
  .flow { grid-template-columns: 1fr; }
  .chain li { font-size: 12.5px; padding: 8px 12px; }
  .chain li:not(:last-child)::after { margin-left: 9px; }
  .cta-band { padding: 36px 22px; border-radius: 16px; }
  .cta-band .btn { width: 100%; }
  .sol-card, .value-card, .contact-card { padding: 24px 20px; }
  .stats-grid { gap: 22px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; padding: 48px 0 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .hero .kicker { font-size: 10px; letter-spacing: .07em; }
  .hero-meta { gap: 6px 14px; }
  .logo img { height: 38px; }
}

/* Wide dropdown for the expanded Solutions menu */
.dropdown.wide { min-width: 330px; }
.dropdown .sep {
  border-top: 1px solid var(--line); margin: 6px 8px; padding: 0; height: 0; list-style: none;
}
.dropdown a small {
  display: block; font-size: 12px; color: var(--ink-soft); font-weight: 500; margin-top: 2px;
}
.dropdown a:hover small { color: var(--brand-dark); }