/* ==========================================================================
   Homepage "What we manufacture" — gear group + capability banners
   (templates/partials/manufacture.html, manufacture.py)
   ========================================================================== */

.mfg {
  --mfg-ink: #3a3a3f;
  --mfg-grid: rgba(25, 25, 28, 0.055);
  --mfg-word: rgba(25, 25, 28, 0.1);
  --mfg-spark: #ff8a1f;
}

/* Jump index ------------------------------------------------------------- */
.mfg-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: -0.6rem auto 1rem;
  max-width: 980px;
}
.mfg-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.95rem 0.42rem 0.5rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
[dir="rtl"] .mfg-index a { padding: 0.42rem 0.5rem 0.42rem 0.95rem; }
.mfg-index a b {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-family: var(--font-head);
  font-size: 0.74rem;
}
.mfg-index a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

/* Group headings (the subtitles) ------------------------------------------ */
.mfg-group { margin-top: 4.2rem; }
.mfg-index + .mfg-group { margin-top: 3rem; }
.mfg-group__head { display: flex; align-items: center; gap: 1rem; }
.mfg-group__num {
  flex: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
}
.mfg-group__head h3 { margin: 0; font-size: clamp(1.45rem, 2.8vw, 2rem); color: var(--ink); }
.mfg-group__rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--line), transparent); }
[dir="rtl"] .mfg-group__rule { background: linear-gradient(to left, var(--line), transparent); }
.mfg-group__meta {
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
[dir="rtl"] .mfg-group__meta { letter-spacing: normal; text-transform: none; font-size: 0.9rem; }
.mfg-group__lede { color: var(--muted); max-width: 62ch; margin: 0.7rem 0 1.8rem; }
.mfg .product-card h4 { font-size: 1.22rem; margin: 0; color: var(--ink); }

/* 7 gear types: the first card runs double-width so the grid closes evenly
   (4 columns: 1 wide + 2 / 4; 2 columns: 1 wide + 3 rows of 2) */
@media (min-width: 640px) {
  .mfg-gears { grid-template-columns: repeat(2, 1fr); }
  .mfg-gears > :first-child { grid-column: span 2; }
  .mfg-gears > :first-child .product-card__media { aspect-ratio: 16 / 6; }
}
@media (min-width: 1100px) {
  .mfg-gears { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
}

/* Capability banner -------------------------------------------------------- */
.cap-banner {
  --seam-dir: to right;
  --seam: 48.08%;                      /* copy 1fr | media 1.08fr */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  min-height: 440px;
  margin-top: 1.4rem;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  isolation: isolate;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.cap-banner:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.cap-banner--flip { --seam-dir: to left; --seam: 51.92%; grid-template-columns: 1.08fr 1fr; }
.cap-banner--flip .cap-banner__media { order: -1; }
[dir="rtl"] .cap-banner { --seam-dir: to left; }
[dir="rtl"] .cap-banner--flip { --seam-dir: to right; }

/* copy side: blueprint grid + giant outlined word */
.cap-banner__copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(2.2rem, 4vw, 3.4rem);
  padding-inline-end: 150px;
  overflow: hidden;
}
.cap-banner--flip .cap-banner__copy {
  padding-inline-end: clamp(2.2rem, 4vw, 3.4rem);
  padding-inline-start: 150px;
}
.cap-banner__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--mfg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mfg-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 80%);
}
.cap-banner__copy::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 2.6rem;
  width: 4px;
  height: 64px;
  background: var(--red);
  border-radius: 0 4px 4px 0;
}
[dir="rtl"] .cap-banner__copy::after { border-radius: 4px 0 0 4px; }
.cap-banner__word {
  position: absolute;
  top: 0.4rem;
  inset-inline-start: 1.4rem;
  z-index: -1;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(4.2rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--mfg-word);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.4s ease, transform 0.6s ease;
}
.cap-banner:hover .cap-banner__word { -webkit-text-stroke-color: rgba(209, 32, 38, 0.28); transform: translateX(6px); }
[dir="rtl"] .cap-banner:hover .cap-banner__word { transform: translateX(-6px); }

.cap-banner__text { position: relative; max-width: 30rem; }
.cap-banner__text h4 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 0.7rem; color: var(--ink); }
.cap-banner__text p { color: var(--muted); margin: 0; font-size: 1.02rem; }
.cap-banner__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.3rem 0 1.8rem; padding: 0; }
.cap-banner__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}
.cap-banner__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.cap-banner__cta::after { content: "→"; margin-inline-start: 0.5rem; transition: transform 0.25s ease; }
[dir="rtl"] .cap-banner__cta::after { content: "←"; }
.cap-banner:hover .cap-banner__cta { background: var(--red-dark); }
.cap-banner:hover .cap-banner__cta::after { transform: translateX(4px); }
[dir="rtl"] .cap-banner:hover .cap-banner__cta::after { transform: translateX(-4px); }

/* media side: photo, viewfinder frame, filmstrip */
.cap-banner__media { position: relative; overflow: hidden; background: var(--paper); min-height: 100%; }
.cap-banner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cap-banner:hover .cap-banner__photo { transform: scale(1.08); }
.cap-banner__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(var(--seam-dir), var(--surface) 0%, transparent 30%);
  pointer-events: none;
}
.cap-banner__frame {
  --c: rgba(255, 255, 255, 0.9);
  position: absolute;
  inset: 20px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / 24px 2px,
    linear-gradient(var(--c), var(--c)) top left / 2px 24px,
    linear-gradient(var(--c), var(--c)) top right / 24px 2px,
    linear-gradient(var(--c), var(--c)) top right / 2px 24px,
    linear-gradient(var(--c), var(--c)) bottom left / 24px 2px,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 24px,
    linear-gradient(var(--c), var(--c)) bottom right / 24px 2px,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 24px;
  background-repeat: no-repeat;
  opacity: 0.8;
  transition: inset 0.4s ease, opacity 0.4s ease;
}
.cap-banner:hover .cap-banner__frame { inset: 14px; opacity: 1; }

.cap-banner__strip {
  position: absolute;
  bottom: 34px;
  inset-inline-end: 34px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.cap-banner--flip .cap-banner__strip { inset-inline-end: auto; inset-inline-start: 34px; }
.cap-banner__strip img {
  width: 104px;
  height: 76px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 9px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transform: rotate(-4deg);
  transition: transform 0.4s ease;
}
.cap-banner__strip img + img { transform: rotate(3deg) translateY(-6px); }
.cap-banner:hover .cap-banner__strip img { transform: rotate(-7deg) translateY(-4px); }
.cap-banner:hover .cap-banner__strip img + img { transform: rotate(6deg) translateY(-12px); }

/* per-process photo overlays */
.cap-dro {
  position: absolute;
  top: 34px;
  inset-inline-end: 34px;
  z-index: 3;
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  direction: ltr;
  font: 600 0.78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--gray);
}
.cap-banner--flip .cap-dro { inset-inline-end: auto; inset-inline-start: 34px; }
.cap-dro span { display: flex; justify-content: space-between; gap: 0.9rem; }
.cap-dro b { color: var(--red); min-width: 7.5ch; text-align: right; font-variant-numeric: tabular-nums; }

.cap-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, transparent 55%, rgba(209, 32, 38, 0.16) 97%, var(--red) 97%, var(--red) 100%);
  animation: mfg-scanline 3.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes mfg-scanline { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.cap-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 35% 62%, rgba(255, 150, 40, 0.5), transparent 42%);
  mix-blend-mode: screen;
  animation: mfg-flicker 1.8s steps(6) infinite;
}
@keyframes mfg-flicker {
  0%, 100% { opacity: 0.55; } 20% { opacity: 0.9; } 40% { opacity: 0.4; } 60% { opacity: 1; } 80% { opacity: 0.6; }
}

/* the instrument card that straddles the seam */
.cap-instrument {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--seam);
  z-index: 4;
  width: 230px;
  margin: 0;
  margin-inline-start: -115px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 22px 50px rgba(25, 25, 28, 0.18), 0 0 0 1px var(--line);
  transform: translateY(-50%);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[dir="rtl"] .cap-instrument { inset-inline-start: calc(100% - var(--seam)); }
.cap-banner:hover .cap-instrument { transform: translateY(-50%) rotate(-2.5deg) scale(1.03); }
.cap-instrument figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
[dir="rtl"] .cap-instrument figcaption { letter-spacing: normal; text-transform: none; font-size: 0.8rem; }
.cap-instrument figcaption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(209, 32, 38, 0.5);
  animation: mfg-live 1.8s ease-out infinite;
}
@keyframes mfg-live { to { box-shadow: 0 0 0 8px rgba(209, 32, 38, 0); } }

.cap-banner__cover { position: absolute; inset: 0; z-index: 5; }
.cap-banner__cover:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; border-radius: 22px; }

/* Motif drawings (200 x 200 viewBox) --------------------------------------- */
.cap-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-image:
    linear-gradient(var(--mfg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mfg-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: visible;
  direction: ltr; /* drawings keep their labels left-to-right on Arabic pages */
}
.cap-art .ln { fill: none; stroke: var(--mfg-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cap-art .faint { stroke-opacity: 0.32; }
.cap-art .acc { stroke: var(--red); stroke-opacity: 1; }
.cap-art .bbox { fill: none; stroke: none; }
.cap-art text { fill: var(--muted); font: 700 9px var(--font-head); letter-spacing: 0.04em; }
.cap-art marker path { fill: var(--red); }
.cap-art .center { stroke-dasharray: 10 3 2 3; }
.cap-art .spin { transform-box: fill-box; transform-origin: center; }

@keyframes mfg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mfg-spin { to { transform: rotate(360deg); } }
@keyframes mfg-march { to { stroke-dashoffset: -20; } }

/* CNC — raster pocketing toolpath + moving cutter */
.cap-art--cnc .plan { stroke-opacity: 0.22; stroke-dasharray: 3 4; }
.cap-art--cnc .cut { stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mfg-draw 9s linear infinite; }
.cap-art--cnc .tool__halo { fill: rgba(209, 32, 38, 0.14); transform-box: fill-box; transform-origin: center; animation: mfg-pulse 0.6s ease-in-out infinite alternate; }
.cap-art--cnc .tool__bit { fill: var(--red); }
@keyframes mfg-pulse { from { transform: scale(0.8); } to { transform: scale(1.15); } }

/* Sheet metal — flat pattern, marching bend lines, folding flaps */
.cap-art--sheet .bend { stroke-dasharray: 6 4; animation: mfg-march 1.4s linear infinite; }
.cap-art--sheet .flap { fill: rgba(209, 32, 38, 0.1); transform-box: fill-box; }
.cap-art--sheet .flap--top { transform-origin: 50% 100%; animation: mfg-fold-y 4.8s ease-in-out infinite; }
.cap-art--sheet .flap--right { transform-origin: 0% 50%; animation: mfg-fold-x 4.8s ease-in-out 1.2s infinite; }
@keyframes mfg-fold-y { 0%, 15%, 100% { transform: scaleY(1); } 45%, 70% { transform: scaleY(0.12); } }
@keyframes mfg-fold-x { 0%, 15%, 100% { transform: scaleX(1); } 45%, 70% { transform: scaleX(0.12); } }

/* Gearbox — 22:11 gear pair meshing inside the housing */
.cap-art--gearbox .gear { stroke-width: 1.4; }
.cap-art--gearbox .spin--cw { animation: mfg-spin 14s linear infinite; }
.cap-art--gearbox .spin--ccw { animation: mfg-spin 7s linear infinite reverse; }

/* Welding — bead laid behind a travelling arc with sparks */
.cap-art--weld .bead { stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mfg-draw 6s linear infinite; }
.cap-art--weld .torch { fill: none; stroke: var(--mfg-ink); stroke-width: 5; stroke-linecap: round; stroke-opacity: 0.55; }
.cap-art--weld .arc__glow { fill: rgba(255, 138, 31, 0.28); transform-box: fill-box; transform-origin: center; animation: mfg-pulse 0.18s ease-in-out infinite alternate; }
.cap-art--weld .arc__core { fill: #fff; stroke: var(--mfg-spark); stroke-width: 2; }
.cap-art--weld .spark {
  fill: none;
  stroke: var(--mfg-spark);
  stroke-width: 1.6;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: mfg-spark 0.8s ease-out infinite;
  animation-delay: var(--d);
}
@keyframes mfg-spark {
  0% { opacity: 1; transform: translateX(0) scaleX(0.3); }
  100% { opacity: 0; transform: translateX(16px) scaleX(1); }
}

/* Reverse engineering — scan sweep, probed points, dimensions appearing */
.cap-art--reverse .scan { animation: mfg-scan 4s ease-in-out infinite alternate; }
.cap-art--reverse .scan__glow { fill: rgba(209, 32, 38, 0.12); }
@keyframes mfg-scan { from { transform: translateX(34px); } to { transform: translateX(166px); } }
.cap-art--reverse .pt { fill: var(--red); opacity: 0.2; animation: mfg-probe 2.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes mfg-probe { 0%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
.cap-art .dim { opacity: 0; animation: mfg-dim 8s ease-in-out infinite; }
.cap-art .dim--2 { animation-delay: 0.9s; }
.cap-art .dim--3 { animation-delay: 1.8s; }
@keyframes mfg-dim { 0%, 8% { opacity: 0; } 18%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* Rolls — two rolls reducing a strip through the nip */
.cap-art--rolls .spin--ccw-slow { animation: mfg-spin 8s linear infinite reverse; }
.cap-art--rolls .spin--cw-slow { animation: mfg-spin 8s linear infinite; }
.cap-art--rolls .strip { fill: none; stroke: var(--red); stroke-dasharray: 14 6; animation: mfg-march 1.1s linear infinite; }
.cap-art--rolls .strip--in { stroke-width: 8; stroke-opacity: 0.35; }
.cap-art--rolls .strip--out { stroke-width: 5; }

/* Custom parts — the drawing draws itself, then the dimensions */
.cap-art--mech .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mfg-sketch 8s ease-in-out infinite; }
@keyframes mfg-sketch { 0% { stroke-dashoffset: 1; } 35%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.cap-art--mech .dim { animation-name: mfg-dim-late; }
@keyframes mfg-dim-late { 0%, 32% { opacity: 0; } 42%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* Consultations — the load-life curve draws, a lens inspects it, the checks tick */
.cap-art--consult .draw { stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mfg-sketch 8s ease-in-out infinite; }
.cap-art--consult .lens__glass { fill: rgba(209, 32, 38, 0.08); }
.cap-art--consult .tick { stroke-width: 2.2; }
.cap-art--consult .dim { animation-name: mfg-dim-late; }

/* Maintenance — one 9 s condition check: the bearing shudders and the trace
   breaks the alarm line, the overhaul marker passes, the balls are renewed
   (flash red) and the trace settles flat while the readout drops. */
.cap-art--maint .spin--cage { animation: mfg-spin 9s linear infinite; }
.cap-art--maint .spin--shaft { animation: mfg-spin 4s linear infinite; }
.cap-art--maint .ball { animation: mt-renew 9s ease-in-out infinite; }
@keyframes mt-renew { 0%, 46% { stroke: var(--mfg-ink); } 50%, 58% { stroke: var(--red); stroke-width: 2.4; } 66%, 100% { stroke: var(--mfg-ink); } }
.cap-art--maint .shudder { animation: mt-phase-before 9s linear infinite; }
.cap-art--maint .shudder__ghost { stroke-opacity: 0.45; animation: mt-shake 0.11s steps(2) infinite alternate; }
@keyframes mt-shake { from { transform: translate(-1.6px, 1px); } to { transform: translate(1.8px, -1.2px); } }
@keyframes mt-phase-before { 0%, 4% { opacity: 0; } 8%, 42% { opacity: 1; } 48%, 100% { opacity: 0; } }
.cap-art--maint .alarm { stroke-dasharray: 4 4; stroke-opacity: 0.5; stroke-width: 1.2; }
.cap-art--maint .trace { stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cap-art--maint .trace--rough { animation: mt-trace-a 9s linear infinite; }
.cap-art--maint .trace--calm { animation: mt-trace-b 9s linear infinite; }
@keyframes mt-trace-a { 0% { stroke-dashoffset: 1; } 42%, 90% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mt-trace-b { 0%, 52% { stroke-dashoffset: 1; } 86%, 90% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.cap-art--maint .mark { opacity: 0; animation: mt-mark 9s ease-in-out infinite; }
@keyframes mt-mark { 0%, 40% { opacity: 0; } 46%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.cap-art--maint .vib { font-size: 13px; }
.cap-art--maint .vib--hi { fill: var(--red); animation: mt-phase-before 9s linear infinite; }
.cap-art--maint .vib--lo { fill: var(--mfg-ink); opacity: 0; animation: mt-phase-after 9s linear infinite; }
@keyframes mt-phase-after { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* Only animate what is on screen (manufacture.js toggles .is-live) */
.mfg.is-js .cap-banner:not(.is-live) .cap-art *,
.mfg.is-js .cap-banner:not(.is-live) .cap-scan,
.mfg.is-js .cap-banner:not(.is-live) .cap-glow { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .cap-art *, .cap-scan, .cap-glow, .cap-instrument figcaption i { animation: none !important; }
  .cap-art .cut, .cap-art .bead, .cap-art .draw { stroke-dashoffset: 0; }
  .cap-art .dim, .cap-art--reverse .pt { opacity: 1; }
  .cap-art--maint .trace { stroke-dashoffset: 0; }
  .cap-art--maint .mark, .cap-art--maint .vib--lo { opacity: 1; }
  .cap-art--maint .shudder, .cap-art--maint .vib--hi { opacity: 0; }
  .cap-scan { transform: translateX(-40%); }
}

/* Before / after (service pages, product.html #before-after) ------------- */
.ba__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ba__copy p { color: var(--muted); max-width: 46ch; }
.ba__frame {
  --pos: 50%;
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow); background: var(--steel-2, #222);
  user-select: none; touch-action: pan-y;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); filter: saturate(0.85) contrast(1.05); }
[dir="rtl"] .ba__img--before { clip-path: inset(0 0 0 calc(100% - var(--pos))); }
.ba__tag {
  position: absolute; top: 0.9rem; z-index: 2; padding: 0.35rem 0.7rem; border-radius: 4px;
  font: 700 0.72rem var(--font-head); letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(20, 20, 24, 0.72); color: #fff; backdrop-filter: blur(4px); pointer-events: none;
}
.ba__tag--before { inset-inline-start: 0.9rem; }
.ba__tag--after { inset-inline-end: 0.9rem; background: var(--red); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; inset-inline-start: var(--pos); z-index: 2; width: 3px;
  margin-inline-start: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); pointer-events: none;
}
.ba__handle i {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.ba__handle i::before, .ba__handle i::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px;
  border: 6px solid transparent;
}
.ba__handle i::before { left: 7px; border-right: 7px solid var(--red); border-left-width: 0; }
.ba__handle i::after { right: 7px; border-left: 7px solid var(--red); border-right-width: 0; }
.ba__range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.ba__frame:has(.ba__range:focus-visible) { outline: 3px solid var(--red); outline-offset: 4px; }
@media (max-width: 860px) {
  .ba__grid { grid-template-columns: 1fr; }
  .ba__frame { max-width: 460px; width: 100%; justify-self: center; }
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 960px) {
  .cap-banner, .cap-banner--flip { grid-template-columns: 1fr; min-height: 0; }
  .cap-banner__media, .cap-banner--flip .cap-banner__media { order: -1; min-height: 280px; }
  .cap-banner__media::before { background: linear-gradient(to top, var(--surface) 0%, transparent 26%); }
  .cap-banner__copy, .cap-banner--flip .cap-banner__copy { padding: 5.2rem 1.6rem 2rem; }
  .cap-banner__copy::after { top: 5.4rem; }
  .cap-instrument, [dir="rtl"] .cap-instrument {
    top: 280px;
    inset-inline-start: auto;
    inset-inline-end: 18px;
    width: 150px;
    margin: 0;
    padding: 8px 8px 6px;
  }
  .cap-instrument figcaption { font-size: 0.56rem; letter-spacing: 0.06em; white-space: nowrap; }
  .cap-banner__strip, .cap-banner--flip .cap-banner__strip { inset-inline-start: 24px; inset-inline-end: auto; bottom: 40px; }
  .cap-dro, .cap-banner--flip .cap-dro { inset-inline-start: 24px; inset-inline-end: auto; top: 24px; }
  .cap-banner__word { top: 0.2rem; font-size: clamp(3.4rem, 16vw, 5.5rem); }
}
@media (max-width: 560px) {
  .mfg-group__meta { display: none; }
  .cap-banner__media, .cap-banner--flip .cap-banner__media { min-height: 230px; }
  .cap-instrument, [dir="rtl"] .cap-instrument { top: 230px; width: 124px; inset-inline-end: 14px; }
  .cap-banner__strip img { width: 72px; height: 54px; border-width: 2px; }
  .cap-banner__strip, .cap-banner--flip .cap-banner__strip { bottom: 48px; }
  .cap-dro { font-size: 0.7rem; padding: 0.4rem 0.6rem; }
  .cap-banner__copy, .cap-banner--flip .cap-banner__copy { padding: 4.6rem 1.25rem 1.8rem; }
  .cap-banner__chips li { font-size: 0.78rem; }
  .cap-banner__cta { width: 100%; justify-content: center; padding-inline: 1rem; font-size: 0.92rem; }
}

/* ==========================================================================
   Product hero — the capability banner grown into the full-width opening of
   every product page (templates/partials/cap_hero.html, app.product_cap):
   gear pages, capability pages and the product catalogs. It reuses every
   .cap-banner rule above; this makes it a hero: edge to edge, the copy lined
   up with the page container, a real <h1>, crossfading photos, the shared
   group number and previous/next arrows through the Products section.
   ========================================================================== */
.cap-hero {
  --cap-gutter: max(24px, calc((100vw - 1180px) / 2));   /* = .container's edge */
  position: relative;
  isolation: isolate;
  padding-top: var(--header-h);
  background: var(--paper);
}

.cap-banner--hero {
  --seam: 52%;
  grid-template-columns: 52fr 48fr;
  min-height: clamp(580px, calc(100vh - var(--header-h) - 64px), 780px);
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.cap-banner--hero:hover { transform: none; box-shadow: none; }

.cap-banner--hero .cap-banner__copy {
  padding: clamp(2rem, 4vw, 3.2rem) 125px clamp(2.4rem, 4vw, 3.4rem) var(--cap-gutter);
}
[dir="rtl"] .cap-banner--hero .cap-banner__copy { padding-inline: var(--cap-gutter) 125px; }
.cap-banner--hero .cap-banner__copy::before {
  -webkit-mask-image: radial-gradient(ellipse at 40% 45%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse at 40% 45%, #000 25%, transparent 85%);
}
/* the banner's red edge tab would sit at the screen edge here — the group
   number carries the accent instead */
.cap-banner--hero .cap-banner__copy::after { display: none; }
/* captions carry α, β and π: uppercasing would turn them into A, B and Π */
.cap-banner--hero .cap-instrument figcaption { text-transform: none; letter-spacing: 0.06em; font-size: 0.74rem; }
.cap-banner--hero .cap-banner__text { max-width: 38rem; }
.cap-banner--hero .cap-banner__word {
  top: auto;
  bottom: -0.14em;
  inset-inline-start: calc(var(--cap-gutter) - 0.06em);
  font-size: clamp(5.5rem, 13vw, 12.5rem);
  -webkit-text-stroke-color: rgba(209, 32, 38, 0.13);
}

/* a smaller instrument card, a little below centre on the seam */
.cap-banner--hero .cap-instrument { top: 56%; width: 208px; margin-inline-start: -104px; }
/* inset-inline-start already counts from the right in RTL, so the seam is the same value */
[dir="rtl"] .cap-banner--hero .cap-instrument { inset-inline-start: var(--seam); }
.cap-banner--hero:hover .cap-instrument { transform: translateY(-50%) rotate(-2deg) scale(1.03); }

.cap-banner--hero .cap-banner__frame { inset: 26px; }
.cap-banner--hero .cap-dro { top: 40px; inset-inline-end: 40px; }
.cap-dro--spec b { min-width: 5.5ch; }

.cap-hero__crumbs { margin-bottom: 1.3rem; color: var(--muted); font-size: 0.88rem; }
.cap-hero__crumbs a { color: var(--text); }
.cap-hero__crumbs a:hover { color: var(--red); }
.cap-hero__crumbs span[aria-current] { color: var(--ink); font-weight: 600; }

/* 02 / 08 · CNC & MILLING — the number the homepage and the menu use */
.cap-hero__num {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  animation: cap-rise 0.9s cubic-bezier(0.2, 0.75, 0.15, 1) 0.1s both;
}
[dir="rtl"] .cap-hero__num { letter-spacing: normal; font-size: 0.9rem; }
.cap-hero__num b {
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}
.cap-hero__num i { font-style: normal; letter-spacing: 0; opacity: 0.7; margin-inline-end: 0.35rem; }

.cap-hero__title {
  margin: 0.9rem 0 1rem;
  color: var(--ink);
  font-size: clamp(2.2rem, 3.9vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.cap-hero__l { display: block; animation: cap-rise 1s cubic-bezier(0.2, 0.75, 0.15, 1) both; animation-delay: calc(0.2s + var(--d) * 0.12s); }
.cap-hero__title em { font-style: normal; color: var(--red); }
.cap-hero__lede {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
  max-width: 36rem;
  animation: cap-rise 1s cubic-bezier(0.2, 0.75, 0.15, 1) 0.42s both;
}
.cap-banner--hero .cap-banner__chips { margin: 1.4rem 0 1.7rem; animation: cap-rise 1s cubic-bezier(0.2, 0.75, 0.15, 1) 0.52s both; }
.cap-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  animation: cap-rise 1s cubic-bezier(0.2, 0.75, 0.15, 1) 0.6s both;
}
.cap-hero__cta .btn { padding: 0.72rem 1.15rem; font-size: 0.93rem; gap: 0.5rem; }
.cap-hero__cta .btn svg { width: 17px; height: 17px; flex: none; }
.cap-hero__cta .btn--ghost { border-color: rgba(25, 25, 28, 0.3); color: var(--ink); background: var(--surface); }
.cap-hero__cta .btn--ghost:hover { border-color: var(--red); color: var(--red); background: var(--surface); }
.cap-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1.7rem;
  animation: cap-rise 1s cubic-bezier(0.2, 0.75, 0.15, 1) 0.7s both;
}
.cap-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
[dir="rtl"] .cap-hero__meta span { letter-spacing: normal; font-size: 0.85rem; }
.cap-hero__meta span::before { content: ""; width: 16px; height: 2px; background: var(--red); }
@keyframes cap-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* crossfading photos, each with a slow push-in while it is on */
.cap-hero__slide { opacity: 0; transition: opacity 1.1s ease; }
.cap-hero__slide.is-on { opacity: 1; animation: cap-kenburns 9s ease-out both; }
.cap-banner--hero:hover .cap-banner__photo { transform: none; }
@keyframes cap-kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* thumbnails: pick a photo; the active one shows the time left before the next */
.cap-hero__thumbs {
  position: absolute;
  bottom: 40px;
  inset-inline-end: 40px;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.cap-hero__thumb {
  position: relative;
  width: 100px;
  height: 70px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  opacity: 0.72;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transform: rotate(-3deg);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.cap-hero__thumb:nth-child(2) { transform: rotate(2.5deg) translateY(-6px); }
.cap-hero__thumb:nth-child(3) { transform: rotate(-1.5deg); }
.cap-hero__thumb:hover, .cap-hero__thumb.is-on { opacity: 1; transform: translateY(-6px); }
.cap-hero__thumb:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cap-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-hero__thumb i { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 0; background: var(--red); }
.cap-hero__thumb.is-on i { width: 100%; }
.is-ticking .cap-hero__thumb.is-on i { animation: cap-progress var(--cap-delay, 5s) linear both; }
@keyframes cap-progress { from { width: 0; } to { width: 100%; } }

/* previous / next through the Products section: ← 01 Rack & Pinion ••• 03 Sheet Metal → */
.cap-hero__pager {
  display: grid;
  /* minmax(0, …): a long product name must ellipsize, not push the "next"
     pill off the screen (it did at tablet widths) */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
}
.cap-hero__step {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  max-width: 100%;
  min-width: 0;
  padding: 0.45rem 1.05rem 0.45rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.93rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cap-hero__step--next { justify-self: end; padding: 0.45rem 0.45rem 0.45rem 1.05rem; }
.cap-hero__step em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-hero__step span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
[dir="rtl"] .cap-hero__step span { letter-spacing: normal; font-size: 0.8rem; }
.cap-hero__step b {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-family: var(--font-head);
  font-size: 0.74rem;
}
.cap-hero__step--prev::before, .cap-hero__step--next::after {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  transition: transform 0.25s ease;
}
.cap-hero__step--prev::before { content: "←"; }
.cap-hero__step--next::after { content: "→"; }
[dir="rtl"] .cap-hero__step--prev::before { content: "→"; }
[dir="rtl"] .cap-hero__step--next::after { content: "←"; }
.cap-hero__step:hover { border-color: var(--red); color: var(--red); }
.cap-hero__step--prev:hover::before { transform: translateX(-3px); }
.cap-hero__step--next:hover::after { transform: translateX(3px); }
[dir="rtl"] .cap-hero__step--prev:hover::before { transform: translateX(3px); }
[dir="rtl"] .cap-hero__step--next:hover::after { transform: translateX(-3px); }
.cap-hero__dots { display: flex; gap: 6px; }
.cap-hero__dots i { width: 18px; height: 4px; border-radius: 4px; background: var(--line); }
.cap-hero__dots i.is-on { width: 34px; background: var(--red); }

.cap-hero__marquee { position: relative; }

/* ---- gear-type drawings (manufacture.GEARS) ------------------------------ */
.cap-art .thin { stroke-width: 1.2; }
.cap-art .pitch { stroke-dasharray: 3 4; }
.cap-art .pp { fill: var(--red); }
.cap-art .body { fill: var(--surface); }
@keyframes cap-spin { to { transform: rotate(360deg); } }

/* planetary — carrier, sun and planets at the ratios of a fixed-ring stage */
.cap-art--planetary .gear { stroke-width: 1.3; }
.cap-art--planetary .spin--carrier { animation: cap-spin 24s linear infinite; }
.cap-art--planetary .spin--sun { animation: cap-spin 6.3s linear infinite; }
.cap-art--planetary .spin--planet { animation: cap-spin 7.8s linear infinite reverse; }

/* helical — teeth sweep across the two faces */
.cap-art--helical .helix--a { animation: cap-slide-9 0.9s linear infinite; }
.cap-art--helical .helix--b { animation: cap-slide-9 0.9s linear infinite reverse; }
@keyframes cap-slide-9 { from { transform: translateX(0); } to { transform: translateX(9px); } }

/* spur — 2 : 1 */
.cap-art--spur .gear { stroke-width: 1.4; }
.cap-art--spur .spin--g1 { animation: cap-spin 16s linear infinite; }
.cap-art--spur .spin--g2 { animation: cap-spin 8s linear infinite reverse; }

/* bevel — the teeth run round both pitch ellipses */
.cap-art--bevel .teeth { fill: none; stroke: var(--mfg-ink); stroke-opacity: 0.45; stroke-width: 5; stroke-dasharray: 3 4; animation: cap-march-7 1.6s linear infinite; }
.cap-art--bevel .teeth--pinion { stroke: var(--red); stroke-opacity: 0.8; animation-duration: 0.9s; animation-direction: reverse; }
@keyframes cap-march-7 { to { stroke-dashoffset: -14; } }

/* worm — threads race, the wheel creeps */
.cap-art--worm .thread { animation: cap-slide-8 0.55s linear infinite; }
.cap-art--worm .spin--wheel { animation: cap-spin 40s linear infinite reverse; }
@keyframes cap-slide-8 { from { transform: translateX(0); } to { transform: translateX(8px); } }

/* sprocket — the chain runs, both sprockets turn the same way */
.cap-art--sprocket .chain { fill: none; stroke-linejoin: round; }
.cap-art--sprocket .chain--rail { stroke: var(--mfg-ink); stroke-opacity: 0.25; stroke-width: 9; }
.cap-art--sprocket .chain--links { stroke: var(--red); stroke-width: 5; stroke-dasharray: 5 3; animation: cap-march-8 0.7s linear infinite; }
@keyframes cap-march-8 { to { stroke-dashoffset: -16; } }
.cap-art--sprocket .spin--sp1 { animation: cap-spin 12s linear infinite; }
.cap-art--sprocket .spin--sp2 { animation: cap-spin 6.6s linear infinite; }

/* rack — travel back and forth, the pinion turning through the same arc */
.cap-art--rack .rack-bar { animation: cap-rack 4s ease-in-out infinite alternate; }
.cap-art--rack .spin--pinion { animation: cap-pinion 4s ease-in-out infinite alternate; }
@keyframes cap-rack { from { transform: translateX(-25px); } to { transform: translateX(25px); } }
@keyframes cap-pinion { from { transform: rotate(51.2deg); } to { transform: rotate(-51.2deg); } }

@media (prefers-reduced-motion: reduce) {
  .cap-hero__num, .cap-hero__l, .cap-hero__lede, .cap-hero__cta,
  .cap-hero__meta, .cap-banner--hero .cap-banner__chips, .cap-hero__slide.is-on { animation: none !important; }
}

@media (max-width: 1180px) {
  .cap-banner--hero .cap-banner__copy { padding-inline-end: 110px; }
  [dir="rtl"] .cap-banner--hero .cap-banner__copy { padding-inline: var(--cap-gutter) 110px; }
  .cap-banner--hero .cap-instrument { width: 180px; margin-inline-start: -90px; }
}
@media (max-width: 960px) {
  .cap-banner--hero { grid-template-columns: 1fr; min-height: 0; }
  .cap-banner--hero .cap-banner__media { min-height: 360px; }
  .cap-banner--hero .cap-instrument, [dir="rtl"] .cap-banner--hero .cap-instrument {
    top: 360px; width: 150px; margin: 0; transform: translateY(-50%);
    inset-inline-start: auto; inset-inline-end: 18px;
  }
  .cap-banner--hero .cap-banner__copy,
  [dir="rtl"] .cap-banner--hero .cap-banner__copy { padding: 5rem 24px 2.4rem; }
  .cap-banner--hero .cap-banner__text { max-width: none; }
  .cap-banner--hero .cap-banner__word { bottom: auto; top: 0.3rem; inset-inline-start: 18px; font-size: clamp(3.6rem, 17vw, 6rem); }
  .cap-hero__thumbs { inset-inline-start: 24px; inset-inline-end: auto; bottom: 48px; }
  .cap-hero__thumb { width: 78px; height: 56px; }
  .cap-banner--hero .cap-dro { top: 24px; inset-inline-end: auto; inset-inline-start: 24px; }
}
@media (max-width: 560px) {
  .cap-banner--hero .cap-banner__media { min-height: 280px; }
  .cap-banner--hero .cap-instrument, [dir="rtl"] .cap-banner--hero .cap-instrument { top: 280px; width: 124px; }
  .cap-banner--hero .cap-banner__copy,
  [dir="rtl"] .cap-banner--hero .cap-banner__copy { padding: 4.6rem 20px 1.9rem; }
  .cap-hero__cta { flex-direction: column; align-items: stretch; }
  .cap-hero__cta .btn { width: 100%; justify-content: center; }
  .cap-hero__thumb { width: 62px; height: 46px; border-width: 2px; }
  /* stacked: previous on the start side, next on the end side, full names kept */
  .cap-hero__pager { grid-template-columns: 1fr; gap: 0.55rem; }
  .cap-hero__pager > span:empty { display: none; }
  .cap-hero__dots { display: none; }
  .cap-hero__step { font-size: 0.86rem; gap: 0.45rem; min-width: 0; }
  .cap-hero__step span { display: none; }
  .cap-banner--hero .cap-banner__copy,
  [dir="rtl"] .cap-banner--hero .cap-banner__copy { padding-top: 5.4rem; }
  .cap-banner--hero .cap-banner__word { font-size: clamp(3.2rem, 15vw, 4.6rem); }
}

/* Dark mode --------------------------------------------------------------- */
[data-theme="dark"] .cap-hero__cta .btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .cap-hero__cta .btn--ghost:hover { border-color: var(--red); color: var(--red); }
[data-theme="dark"] .cap-hero__thumb { border-color: #2a2a30; background: #2a2a30; }
[data-theme="dark"] .cap-hero__step b { background: rgba(209, 32, 38, 0.18); }
[data-theme="dark"] .mfg {
  --mfg-ink: #d8d8de;
  --mfg-grid: rgba(255, 255, 255, 0.05);
  --mfg-word: rgba(255, 255, 255, 0.09);
}
[data-theme="dark"] .mfg-index a b { background: rgba(209, 32, 38, 0.18); }
[data-theme="dark"] .cap-instrument { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line); }
[data-theme="dark"] .cap-dro { background: rgba(22, 22, 25, 0.82); color: #c6c6ce; }
[data-theme="dark"] .cap-banner__strip img { border-color: #2a2a30; }