/*!
 * Wolfer Design System · v1.1 · 2026-10-22 (v1 2026-10-16)
 * ---------------------------------------------------------------------------
 * One source for colour, type, spacing, radius and elevation on
 * www.wolfercn.com. Token values mirror the "Wolfer" design system
 * (tokens.json); change them there first, then here.
 *
 * Loaded on every generated page directly after site-polish.css
 * (i18n-build/build.py → inject_visual_theme), so equal-specificity rules in
 * this file win the cascade. Nothing here changes page content.
 *
 *   §1  Tokens ............ custom properties + legacy aliases
 *   §2  Grounds ........... light / dark / brand context variables
 *   §3  Components ........ .wf-* classes for new templates
 *   §4  Legacy mapping .... applies the system to the existing templates
 *   §5  Liquid glass ...... translucent chrome (v1.1)
 *   §6  Motion ............ reveal, hover/press, page cross-fade (v1.1)
 *   §7  Phones ............ small-screen fixes and touch targets (v1.1)
 *   §8  Video ............. the company film player (v1.1)
 */

/* ===========================================================================
 * §1 Tokens
 * ======================================================================== */
:root {
  /* Brand blue — UI */
  --wf-blue-700: #0f4c82;
  --wf-blue-600: #1565a8;
  --wf-blue-500: #3f90d6;
  --wf-blue-300: #8ec7e8;
  --wf-blue-100: #e6f0f9;
  --wf-blue-50: #f2f7fc;

  /* Ink and neutrals */
  --wf-ink-900: #0a2334;
  --wf-ink-700: #12384f;
  --wf-ink-600: #506576;
  --wf-ink-500: #546877;
  --wf-line-300: rgba(10, 35, 52, 0.2);
  --wf-line-200: rgba(10, 35, 52, 0.13);
  --wf-surface-0: #ffffff;
  --wf-surface-50: #f4f7f9;
  --wf-surface-100: #eaf0f4;

  /* Dark grounds */
  --wf-navy-950: #071c2b;
  --wf-navy-900: #0a2334;
  --wf-navy-800: #0d3f6b;

  /* Accent and signal */
  --wf-green-500: #6cb643;
  --wf-amber-300: #ffd34d;
  --wf-success-600: #16a34a;
  --wf-success-100: #dcfce7;
  --wf-danger-600: #dc2626;
  --wf-danger-100: #fef2f2;
  --wf-whatsapp: #25d366;

  /* Type families */
  --wf-font-display: "DIN 2014", "DIN Next", "FF DIN", "DIN", "Saira", system-ui, sans-serif;
  --wf-font-sans: var(--wf-font-display);
  --wf-font-stat: "Montserrat", "Saira", system-ui, sans-serif;
  --wf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Spacing — 4px grid */
  --wf-space-1: 4px;
  --wf-space-2: 8px;
  --wf-space-3: 12px;
  --wf-space-4: 16px;
  --wf-space-5: 20px;
  --wf-space-6: 24px;
  --wf-space-8: 32px;
  --wf-space-10: 40px;
  --wf-space-12: 48px;
  --wf-space-16: 64px;
  --wf-space-20: 80px;
  --wf-space-24: 96px;
  --wf-section-y: clamp(3.5rem, 7vw, 6rem);
  --wf-gutter: clamp(1.25rem, 3vw, 2rem);
  --wf-container-max: 82rem;

  /* Radius */
  --wf-radius-sm: 0.375rem;
  --wf-radius-md: 0.65rem;
  --wf-radius-lg: 1rem;
  --wf-radius-xl: 1.25rem;
  --wf-radius-full: 999px;

  /* Elevation */
  --wf-shadow-sm: 0 1px 2px rgba(7, 28, 43, 0.04), 0 8px 24px rgba(7, 28, 43, 0.055);
  --wf-shadow-md: 0 18px 50px rgba(7, 28, 43, 0.11), 0 3px 12px rgba(7, 28, 43, 0.06);
  --wf-shadow-blue: 0 16px 34px rgba(21, 101, 168, 0.24);

  /* Liquid glass (v1.1, 2026-10-22) — translucent chrome over page content.
     Fills never go below 0.62 white, so ink text keeps ≥ 7:1 even where the
     surface floats over a dark band. */
  --wf-glass-fill: rgba(255, 255, 255, 0.62);
  --wf-glass-fill-strong: rgba(255, 255, 255, 0.82);
  --wf-glass-rim: rgba(255, 255, 255, 0.9);
  --wf-glass-edge: rgba(10, 35, 52, 0.1);
  --wf-glass-blur: 18px;
  --wf-glass-shadow: 0 14px 34px -16px rgba(7, 28, 43, 0.3);

  /* Motion (v1.1) */
  --wf-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wf-dur-fast: 160ms;
  --wf-dur: 240ms;
  --wf-dur-slow: 640ms;

  /* Legacy aliases read by site-polish.css — re-pointed to the system */
  --wf-ink: var(--wf-ink-900);
  --wf-ink-2: var(--wf-ink-700);
  --wf-blue: var(--wf-blue-600);
  --wf-blue-deep: var(--wf-blue-700);
  --wf-blue-soft: var(--wf-blue-100);
  --wf-surface: var(--wf-surface-50);
  --wf-line: var(--wf-line-200);
  --wf-line-strong: var(--wf-line-300);
  --wf-accent: var(--wf-green-500);
}

/* ===========================================================================
 * §2 Grounds — every text colour below reads from these variables, so a
 * heading or label picks the right colour for the surface it sits on.
 * ======================================================================== */
body[data-wf-theme="precision"],
.wf-ground-light {
  --wf-fg: var(--wf-ink-900);
  --wf-fg-heading: var(--wf-ink-900);
  --wf-fg-brand: var(--wf-blue-600);
  --wf-fg-muted: var(--wf-ink-600);
  --wf-fg-caption: var(--wf-ink-500);
  --wf-focus: var(--wf-blue-600);
}

/* Dark grounds: ink sections, the footer, the utility bar, dark inline fills. */
body[data-wf-theme="precision"] :is(
  .bg-ink, .bg-black, .bg-brand-deep,
  [class^="bg-[#0"], [class*=" bg-[#0"], [class^="bg-[#1"], [class*=" bg-[#1"],
  [style*="background:#0"], [style*="background:#1"],
  [style*="background: #0"], [style*="background: #1"],
  footer[data-wf-role="footer"], [data-wf-role="utility"],
  [data-wf-role="solution-system"], [data-wf-role="solution-results"],
  [data-wf-ground="dark"]
),
.wf-ground-dark {
  --wf-fg: #fff;
  --wf-fg-heading: #fff;
  --wf-fg-brand: var(--wf-blue-300);
  --wf-fg-muted: rgba(255, 255, 255, 0.76);
  --wf-fg-caption: rgba(255, 255, 255, 0.68);
  --wf-focus: var(--wf-blue-300);
}

/* Brand-blue grounds: blue text would vanish, so "brand" text turns white. */
body[data-wf-theme="precision"] :is(
  .bg-brand, [class^="bg-[#1565A8]"], [class*=" bg-[#1565A8]"], [class^="bg-[#1565a8]"], [class*=" bg-[#1565a8]"],
  [style*="background:#1565A8"], [style*="background:#2E8FD5"],
  html [data-wf-ground="brand"]
),
.wf-ground-brand {
  --wf-fg: #fff;
  --wf-fg-heading: #fff;
  --wf-fg-brand: #fff;
  --wf-fg-muted: rgba(255, 255, 255, 0.9);
  --wf-fg-caption: rgba(255, 255, 255, 0.86);
  --wf-focus: #fff;
}

/* Light surfaces nested inside dark ones reset the context. */
body[data-wf-theme="precision"] :is(
  .bg-white, .bg-surface, .bg-brand-soft,
  [class^="bg-[#F"], [class*=" bg-[#F"], [class^="bg-[#f"], [class*=" bg-[#f"], [class^="bg-[#E"], [class*=" bg-[#E"], [class^="bg-[#e"], [class*=" bg-[#e"],
  [style*="background:#F"], [style*="background:#f"],
  [style*="background:#E"], [style*="background:#e"],
  [data-wf-ground="light"]
):not([data-wf-ground="dark"]):not([data-wf-role="solution-system"]):not([data-wf-role="solution-results"]) {
  --wf-fg: var(--wf-ink-900);
  --wf-fg-heading: var(--wf-ink-900);
  --wf-fg-brand: var(--wf-blue-600);
  --wf-fg-muted: var(--wf-ink-600);
  --wf-fg-caption: var(--wf-ink-500);
  --wf-focus: var(--wf-blue-600);
}

/* ===========================================================================
 * §3 Components — clean classes for new templates. The existing templates
 * are mapped onto the same values in §4.
 * ======================================================================== */

/* Eyebrow / overline — sits ABOVE the heading it introduces. */
.wf-eyebrow {
  display: block;
  margin: 0 0 var(--wf-space-3);
  color: var(--wf-fg-brand, var(--wf-blue-600));
  font: 700 12px/1.35 var(--wf-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Section header: eyebrow → title → lead. */
.wf-section-head { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.wf-section-head__title {
  margin: 0;
  color: var(--wf-fg-heading, var(--wf-ink-900));
  font: 800 clamp(1.625rem, 2.6vw, 2rem)/1.15 var(--wf-font-display);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.wf-section-head__lead {
  margin: var(--wf-space-4) 0 0;
  color: var(--wf-fg-muted, var(--wf-ink-600));
  font: 400 clamp(1rem, 1.3vw, 1.125rem)/1.7 var(--wf-font-sans);
}
.wf-section-head--split {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  column-gap: clamp(3rem, 7vw, 7.5rem);
  align-items: start;
}
@media (max-width: 1023px) {
  .wf-section-head--split { display: block; }
}

/* Buttons */
.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wf-space-2);
  min-height: 44px;
  padding: 0 var(--wf-space-5);
  border: 1px solid transparent;
  border-radius: var(--wf-radius-md);
  font: 700 15px/1.2 var(--wf-font-display);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease,
              box-shadow 180ms ease, transform 180ms ease;
}
.wf-btn:focus-visible { outline: 2px solid var(--wf-focus, var(--wf-blue-600)); outline-offset: 2px; }
.wf-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #197ab7 0%, #125f94 100%);
  box-shadow: 0 8px 22px rgba(21, 101, 168, 0.2);
}
.wf-btn--primary:hover {
  background: linear-gradient(135deg, #125f94 0%, #0d4e7a 100%);
  box-shadow: var(--wf-shadow-blue);
  transform: translateY(-1px);
}
.wf-btn--secondary {
  color: var(--wf-ink-900);
  background: var(--wf-surface-0);
  border-color: var(--wf-line-300);
}
.wf-btn--secondary:hover { color: var(--wf-blue-600); border-color: rgba(21, 101, 168, 0.58); }
.wf-btn--on-dark { color: var(--wf-blue-700); background: #fff; }
.wf-btn--on-dark:hover { background: var(--wf-blue-100); }
.wf-btn--outline-on-dark { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.45); }
.wf-btn--outline-on-dark:hover { background: rgba(255, 255, 255, 0.1); }
.wf-btn--sm { min-height: 36px; padding: 0 var(--wf-space-4); font-size: 13px; }
.wf-btn--lg { min-height: 52px; padding: 0 var(--wf-space-6); font-size: 16px; }
.wf-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wf-fg-brand, var(--wf-blue-600));
  font: 700 14px/1.3 var(--wf-font-display);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.wf-link-arrow:hover { color: var(--wf-blue-700); }

/* Card */
.wf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--wf-space-6);
  color: var(--wf-ink-900);
  background: var(--wf-surface-0);
  border: 1px solid var(--wf-line-200);
  border-radius: var(--wf-radius-lg);
  box-shadow: var(--wf-shadow-sm);
}
a.wf-card { text-decoration: none; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease; }
a.wf-card:hover { border-color: rgba(21, 101, 168, 0.38); box-shadow: var(--wf-shadow-md); transform: translateY(-4px); }
.wf-card__title { margin: 0; color: var(--wf-ink-900); font: 700 18px/1.35 var(--wf-font-display); }
.wf-card__text { margin: var(--wf-space-2) 0 0; color: var(--wf-ink-600); font: 400 14px/1.65 var(--wf-font-sans); }
.wf-card__specs {
  margin: auto 0 0;
  padding: var(--wf-space-4) 0 0;
  border-top: 1px solid var(--wf-line-200);
  list-style: none;
  color: var(--wf-ink-700);
  font: 400 13px/1.7 var(--wf-font-mono);
}

/* Product card (category galleries) */
.wf-product-card { padding: 0; overflow: hidden; }
.wf-product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: var(--wf-space-4);
  background: var(--wf-surface-50);
  border-bottom: 1px solid var(--wf-line-200);
}
.wf-product-card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.wf-product-card__body { display: flex; flex-direction: column; gap: var(--wf-space-1); padding: var(--wf-space-4) var(--wf-space-5) var(--wf-space-5); }
.wf-product-card__code { color: var(--wf-ink-500); font: 400 12px/1.5 var(--wf-font-mono); }

/* Chip (filters) and badge (tags) */
.wf-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--wf-space-3);
  color: var(--wf-ink-700);
  background: var(--wf-surface-0);
  border: 1px solid var(--wf-line-300);
  border-radius: var(--wf-radius-full);
  font: 700 13px/1 var(--wf-font-display);
  cursor: pointer;
}
.wf-chip:hover { border-color: rgba(21, 101, 168, 0.58); color: var(--wf-blue-600); }
.wf-chip[aria-pressed="true"], .wf-chip.is-active { color: #fff; background: var(--wf-blue-600); border-color: var(--wf-blue-600); }
.wf-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  color: var(--wf-blue-700);
  background: var(--wf-blue-100);
  border-radius: var(--wf-radius-full);
  font: 600 12px/1.3 var(--wf-font-mono);
}

/* Stat band (dark) */
.wf-stat-band {
  color: #fff;
  background: linear-gradient(135deg, var(--wf-navy-900) 0%, #0c3550 55%, var(--wf-blue-700) 100%);
}
.wf-stat-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--wf-space-6) var(--wf-space-10); }
.wf-stat-band__label { margin: 0 0 10px; color: var(--wf-blue-300); font: 700 12px/1.35 var(--wf-font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.wf-stat-band__value { margin: 0; color: #fff; font: 500 22px/1.35 var(--wf-font-display); }

/* Spec table */
.wf-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 500 13px/1.4 var(--wf-font-mono); font-variant-numeric: tabular-nums; }
.wf-spec-table th {
  padding: 10px 12px;
  color: #fff;
  background: var(--wf-ink-900);
  font: 700 12px/1.3 var(--wf-font-display);
  text-align: center;
  white-space: nowrap;
}
.wf-spec-table th small { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.72); font: 400 11px/1.3 var(--wf-font-mono); }
.wf-spec-table td { padding: 9px 12px; color: var(--wf-ink-900); text-align: center; border-bottom: 1px solid var(--wf-line-200); }
.wf-spec-table tbody tr:nth-child(even) td { background: var(--wf-surface-50); }
.wf-spec-table tbody tr:hover td { background: #eaf4f9; }
.wf-spec-table td:first-child { font-weight: 700; text-align: left; }

/* Breadcrumb with the browser-back control on the same row */
.wf-breadcrumb { display: flex; align-items: center; gap: var(--wf-space-4); min-height: 48px; color: var(--wf-ink-600); font: 400 13px/1.4 var(--wf-font-sans); }
.wf-breadcrumb ol { display: flex; align-items: center; gap: var(--wf-space-2); margin: 0; padding: 0; list-style: none; }
.wf-breadcrumb [aria-current="page"] { color: var(--wf-ink-900); font-weight: 700; }

/* Quote (testimonial) */
.wf-quote { margin: 0; }
.wf-quote blockquote { margin: 0; color: var(--wf-ink-700); font: 400 15px/1.7 var(--wf-font-sans); }
.wf-quote figcaption { margin-top: var(--wf-space-4); padding-top: var(--wf-space-4); border-top: 1px solid var(--wf-line-200); }

/* Back pill (interior pages; sits at the left of the breadcrumb row) */
.wf-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  color: #0c5f93;
  background: rgba(238, 246, 251, 0.72);
  border: 1px solid rgba(21, 101, 168, 0.18);
  border-radius: var(--wf-radius-full);
  font: 800 0.82rem/1 var(--wf-font-display);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.wf-back > span:first-child {
  display: inline-grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  color: #fff;
  background: var(--wf-blue-600);
  border-radius: 50%;
  font-size: 0.9rem;
}
.wf-back:hover { background: #fff; border-color: rgba(21, 101, 168, 0.42); transform: translateX(-2px); }

/* KPI figure */
.wf-kpi__value { margin: 0; color: var(--wf-fg-heading, var(--wf-ink-900)); font: 900 clamp(2.55rem, 4vw, 3.3rem)/0.92 var(--wf-font-stat); letter-spacing: -0.045em; }
.wf-kpi__unit { margin-left: 2px; font-size: 0.55em; font-weight: 800; letter-spacing: -0.02em; }
.wf-kpi__label { margin: var(--wf-space-3) 0 0; max-width: 22ch; color: var(--wf-fg-muted, var(--wf-ink-600)); font: 400 14px/1.5 var(--wf-font-sans); }

/* CTA band */
.wf-cta-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 0%, rgba(91, 172, 219, 0.24), transparent 28rem),
    linear-gradient(135deg, #0b2d42 0%, #0d4263 55%, #125c84 100%);
}
.wf-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wf-space-8); padding: clamp(3rem, 6vw, 5rem) 0; }
.wf-cta-band__title { margin: 0; color: #fff; font: 800 clamp(1.875rem, 3.4vw, 3rem)/1.1 var(--wf-font-display); letter-spacing: -0.02em; }
.wf-cta-band__text { margin: var(--wf-space-4) 0 0; max-width: 36rem; color: rgba(255, 255, 255, 0.9); font: 400 18px/1.6 var(--wf-font-sans); }
.wf-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--wf-space-3); }

/* FAQ item (native details) */
.wf-faq { border-bottom: 1px solid var(--wf-line-200); }
.wf-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-space-4);
  padding: 14px 0;
  color: var(--wf-ink-900);
  font: 600 16px/1.5 var(--wf-font-sans);
  list-style: none;
  cursor: pointer;
}
.wf-faq > summary::-webkit-details-marker { display: none; }
.wf-faq > summary::after { content: "+"; flex: none; color: rgba(10, 35, 52, 0.66); font-size: 18px; transition: transform 180ms ease; }
.wf-faq[open] > summary::after { transform: rotate(45deg); }
.wf-faq > div { padding: 0 0 var(--wf-space-4); color: var(--wf-ink-600); font: 400 15px/1.7 var(--wf-font-sans); }

/* Product hero media — injected by build.py into product pages */
[data-wf-role="product-hero-media"],
.wf-product-hero-media {
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.5vw, 2rem);
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    var(--wf-surface-50);
  border: 1px solid var(--wf-line-200);
  border-radius: var(--wf-radius-xl);
  box-shadow: var(--wf-shadow-sm);
}
[data-wf-role="product-hero-media"] img,
.wf-product-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ===========================================================================
 * §4 Legacy mapping — the existing templates, re-expressed in the system.
 * Scoped to body[data-wf-theme="precision"] like site-polish.css.
 * ======================================================================== */

/* 4.1 Colour: headings, brand text and muted text follow the ground ------- */
body[data-wf-theme="precision"] :is(h1, h2, h3) { color: var(--wf-fg-heading); }
body[data-wf-theme="precision"] :is(h1, h2, h3, h4).text-white { color: #fff; }
body[data-wf-theme="precision"] .text-brand,
body[data-wf-theme="precision"] :is(.text-\[\#1565A8\], .text-\[\#1565a8\], .text-\[\#176fa8\]) { color: var(--wf-fg-brand); }
body[data-wf-theme="precision"] .text-ink { color: var(--wf-ink-900); }
body[data-wf-theme="precision"] .text-\[\#0F1A24\] { color: var(--wf-ink-900); }
body[data-wf-theme="precision"] :is(.text-ink-muted, .text-\[\#4B5563\], .text-\[\#6B7280\]),
body[data-wf-theme="precision"] :is(p, li, span, div, dd, dt, small, figcaption, a, td, th, label)[class*="text-ink-muted"] { color: var(--wf-fg-muted); }
body[data-wf-theme="precision"] :is(p, li, span, div, dd, dt, small, figcaption, a, td, th, label, button):is(
  .text-ink-muted\/90, .text-ink-muted\/80, .text-ink-muted\/70, .text-ink-muted\/60, .text-ink-muted\/50,
  .text-black\/60, .text-black\/50, .text-black\/45
) { color: var(--wf-fg-caption); }
body[data-wf-theme="precision"] .text-black\/40 { color: rgba(10, 35, 52, 0.66); }
/* hard-coded muted greys in older refinement passes */
body[data-wf-theme="precision"] [data-wf-role="industry-hero-copy"] > p:nth-of-type(3),
body[data-wf-theme="precision"] [data-wf-role="diagram-gallery-header"] h2 + span,
body[data-wf-theme="precision"] [data-wf-role="diagram-gallery-note"] { color: var(--wf-ink-600); }
body[data-wf-theme="precision"] .map-foot { color: var(--wf-ink-500); }
body[data-wf-theme="precision"] :is(.text-white\/50, .text-white\/60) { color: rgba(255, 255, 255, 0.68); }

/* Solid, visible focus ring on every ground (≥3:1). */
body[data-wf-theme="precision"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wf-focus);
  outline-offset: 2px;
}

/* 4.2 Dark bands keep small labels legible: no bright corner glow, and the
   gradient ends at blue-700 so blue-300 labels hold ≥4.5:1 everywhere. */
body[data-wf-theme="precision"] section.bg-ink.text-white:not(#rfq),
body[data-wf-theme="precision"] [data-wf-role="industry-specs"] ul {
  background: linear-gradient(135deg, var(--wf-navy-900) 0%, #0c3550 55%, var(--wf-blue-700) 100%);
}
body[data-wf-theme="precision"] [data-wf-role="industry-specs"] li > p:first-child { color: var(--wf-blue-300) !important; }
/* One CTA band: industry CTAs use the homepage CTA gradient (the old light
   end left white button text at 3.9:1). */
body[data-wf-theme="precision"] [data-wf-role="industry-cta"] {
  background:
    radial-gradient(circle at 80% 0%, rgba(91, 172, 219, 0.24), transparent 28rem),
    linear-gradient(135deg, #0b2d42 0%, #0d4263 55%, #125c84 100%) !important;
}
body[data-wf-theme="precision"] [data-wf-role="solution-local-nav"] > .container > span { color: var(--wf-ink-500); }

/* 4.3 Eyebrows — one style everywhere: plain overline above the heading. */
body[data-wf-theme="precision"] p.uppercase:is([class*="tracking-[0.1"], [class*="tracking-[0.2"]):is(.text-xs, .text-\[10px\], .text-\[10\.5px\], .text-\[11px\], .text-\[12px\]):is(.text-brand, [class^="text-[#1565"], [class*=" text-[#1565"], .text-white\/50, .text-white\/60, .text-white\/70):not(footer *):not([data-wf-role="utility"] *) {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin-bottom: 0.75rem;
  padding: 0 !important;
  color: var(--wf-fg-brand) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--wf-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.16em !important;
}
body[data-wf-theme="precision"] p.uppercase:is([class*="tracking-[0.1"], [class*="tracking-[0.2"]):is(.text-xs, .text-\[10px\], .text-\[10\.5px\], .text-\[11px\], .text-\[12px\]):is(.text-brand, [class^="text-[#1565"], [class*=" text-[#1565"], .text-white\/50, .text-white\/60, .text-white\/70):not(footer *)::before {
  content: none !important;
}
/* Stat-band labels use the same overline; keep their tighter gap. */
body[data-wf-theme="precision"] :is(ul, dl) > :is(li, div) > p.uppercase.mb-2\.5 { margin-bottom: 0.6rem; }

/* 4.4 (Headings with the short underline rule now start on their own line
   because 4.3 turns the inline-flex eyebrow pills back into block overlines.) */

/* 4.5 Buttons — one radius (radius-md) for every rectangular button. */
body[data-wf-theme="precision"][data-wf-page="index"] :is(.wf-home-primary, .wf-home-secondary) {
  border-radius: var(--wf-radius-md) !important;
}
body[data-wf-theme="precision"] a.rounded-full:is(.h-11, .h-12, .h-14)[class*="border"] {
  border-radius: var(--wf-radius-md);
}
body[data-wf-theme="precision"] :is(a, button).rounded-md:is(.h-9, .h-10, .h-11, .h-12) { border-radius: var(--wf-radius-md); }

/* 4.6 Cards — one card: white, hairline border, radius-lg, soft shadow.
   Decorative quarter-circles, top accent lines and top borders are retired. */
body[data-wf-theme="precision"] #what-we-customize .grid > a::after,
body[data-wf-theme="precision"][data-wf-page="index"] #resources .grid > a::before {
  content: none !important;
}
body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #resources) .grid > a,
body[data-wf-theme="precision"] #testimonials figure,
body[data-wf-theme="precision"] #solutions > .container > .grid > a {
  border: 1px solid var(--wf-line-200) !important;
  border-radius: var(--wf-radius-lg) !important;
  background: var(--wf-surface-0) !important;
  box-shadow: var(--wf-shadow-sm) !important;
}
body[data-wf-theme="precision"][data-wf-page="index"] #resources .grid > a { padding-top: 1.6rem; }
body[data-wf-theme="precision"] #testimonials figure svg:first-child { color: var(--wf-blue-300) !important; }
body[data-wf-theme="precision"] :is(a, article, figure, div)[class*="shadow-card"] { border-radius: var(--wf-radius-lg); }
body[data-wf-theme="precision"] #what-we-customize .grid > a > ul > li {
  color: var(--wf-ink-700);
  font-size: 13px;
}

/* Homepage products: 4 + 4 + 2 → the last two become wide cards. */
@media (min-width: 1180px) {
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize .grid > a:nth-last-child(-n+2) {
    grid-column: span 2 !important;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem;
    align-items: start;
    min-height: 0;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize .grid > a:nth-last-child(-n+2) > :is(img, svg) { grid-row: 1 / span 2; margin-bottom: 0; }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize .grid > a:nth-last-child(-n+2) > h3 { grid-column: 2; }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize .grid > a:nth-last-child(-n+2) > p { grid-column: 2; }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize .grid > a:nth-last-child(-n+2) > ul {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 1.5rem;
    border-top: 0 !important;
    border-left: 1px solid var(--wf-line-200);
  }
}

/* 4.7 Homepage section headers — every section uses the split header
   (slogan + overline left, H2 + lead right) on desktop, and a compact stack
   on phones. */
body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) {
  max-width: none;
}
body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > p:nth-child(2) {
  margin-top: 0.6rem;
  color: var(--wf-fg-brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > h2 {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}
@media (min-width: 1024px) {
  body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto;
    column-gap: clamp(3rem, 7vw, 7.5rem);
    row-gap: 0.8rem;
    align-items: start;
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem) !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > p:first-child {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(2.45rem, 4vw, 3.7rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > p:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0.25rem;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > h2 {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding-left: 1.5rem;
    font-size: clamp(1.75rem, 2.6vw, 2.45rem);
    line-height: 1.14;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > h2::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 99px;
    background: var(--wf-blue-600);
    content: "";
  }
  body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > h2 + p {
    grid-column: 2;
    grid-row: 2;
    max-width: 48rem;
    margin: 0 !important;
    padding-left: 1.5rem;
    font-size: clamp(0.96rem, 1.25vw, 1.06rem) !important;
    line-height: 1.8 !important;
  }
}
body[data-wf-theme="precision"][data-wf-page="index"] #factory :is(h2, h3) { margin-top: 1.25rem; }

/* 4.8 Homepage containers share one width (cases, customers and testimonials
   used to run wider than the rest). Phones keep their swipe rails. */
@media (min-width: 768px) {
  body[data-wf-theme="precision"][data-wf-page="index"] > section:is(#solutions, #customers, #testimonials) > .container,
  body[data-wf-theme="precision"][data-wf-page="index"] :where(main[data-wf-landmark], main[data-wf-landmark] > article[data-wf-landmark]) > section:is(#solutions, #customers, #testimonials) > .container {
    width: min(100% - (var(--wf-home-gutter, 2rem) * 2), var(--wf-container-max));
    margin-inline: auto;
  }
}

/* 4.9 Grids: no lonely last card. Three-column grids of bordered text cards
   rebalance their last row (3n+1 → the last four go 2 + 2, 3n+2 → the last two
   share a row). Image galleries and the contact page (it hides one card on
   desktop) keep their plain flow. */
@media (min-width: 1024px) {
  body[data-wf-theme="precision"] .grid.lg\:grid-cols-3:not([class*="xl:grid-cols"]):not(#what-we-customize *):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):is(:has(> :last-child:nth-child(3n+1)), :has(> :last-child:nth-child(3n+2))) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body[data-wf-theme="precision"] .grid.lg\:grid-cols-3:not([class*="xl:grid-cols"]):not(#what-we-customize *):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):is(:has(> :last-child:nth-child(3n+1)), :has(> :last-child:nth-child(3n+2))) > * {
    grid-column: span 2;
  }
  body[data-wf-theme="precision"] .grid.lg\:grid-cols-3:not([class*="xl:grid-cols"]):not(#what-we-customize *):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):has(> :last-child:nth-child(3n+1)) > :nth-last-child(-n+4),
  body[data-wf-theme="precision"] .grid.lg\:grid-cols-3:not([class*="xl:grid-cols"]):not(#what-we-customize *):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):has(> :last-child:nth-child(3n+2)) > :nth-last-child(-n+2) {
    grid-column: span 3;
  }
}
@media (min-width: 768px) {
  body[data-wf-theme="precision"] .grid.md\:grid-cols-3:not([class*="lg:grid-cols"]):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):is(:has(> :last-child:nth-child(3n+1)), :has(> :last-child:nth-child(3n+2))) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body[data-wf-theme="precision"] .grid.md\:grid-cols-3:not([class*="lg:grid-cols"]):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):is(:has(> :last-child:nth-child(3n+1)), :has(> :last-child:nth-child(3n+2))) > * {
    grid-column: span 2;
  }
  body[data-wf-theme="precision"] .grid.md\:grid-cols-3:not([class*="lg:grid-cols"]):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):has(> :last-child:nth-child(3n+1)) > :nth-last-child(-n+4),
  body[data-wf-theme="precision"] .grid.md\:grid-cols-3:not([class*="lg:grid-cols"]):not(:has(> [class*="col-span"])):not(:has(> * img, > img)):has(> [class*="border"]):not([data-wf-page="contact"] *):has(> :nth-child(4)):has(> :last-child:nth-child(3n+2)) > :nth-last-child(-n+2) {
    grid-column: span 3;
  }
}

/* 4.10 Type floor — nothing functional below 11px; long copy left-aligned. */
body[data-wf-theme="precision"] :is(.text-\[10px\], .text-\[10\.5px\]) { font-size: 11px !important; }
body[data-wf-theme="precision"] .text-\[11\.5px\] { font-size: 12px; }
body[data-wf-theme="precision"] .text-\[12\.5px\] { font-size: 13px; }
@media (max-width: 767px) {
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-copy"] p {
    color: var(--wf-ink-600);
    text-align: start;
    text-justify: auto;
  }
}

/* Homepage hero instrument panel: the smallest labels were 6–9px. */
body[data-wf-page="index"] .wf-product-button { font-size: 11px !important; color: var(--wf-ink-700); }
body[data-wf-page="index"] .wf-product-button-index { font-size: 9px !important; color: var(--wf-ink-500); opacity: 1 !important; }
body[data-wf-page="index"] .wf-product-button-index .num { color: inherit !important; }
body[data-wf-page="index"] .wf-product-code { font-size: 10px !important; color: var(--wf-ink-500) !important; }
body[data-wf-page="index"] .wf-showcase-heading { font-size: 11px !important; color: var(--wf-ink-600) !important; }
body[data-wf-page="index"] .wf-showcase-footnote,
body[data-wf-page="index"] .wf-product-scroll-hint { font-size: 11px !important; color: var(--wf-ink-500) !important; }
body[data-wf-page="index"] .wf-home-metrics small { font-size: 11.5px !important; color: var(--wf-ink-500) !important; }
body[data-wf-page="index"] .wf-home-metrics dt { font-size: 11.5px !important; }
body[data-wf-page="index"] .wf-home-trust li { font-size: 11.5px !important; }
body[data-wf-page="index"] .wf-home-intro p + p { color: var(--wf-ink-500) !important; }
body[data-wf-page="index"] .wf-home-explore { color: var(--wf-ink-600) !important; }
body[data-wf-page="index"] .wf-stage-coordinate { color: var(--wf-ink-500) !important; }

/* 4.11 Process flow: the bright-blue phase bar failed contrast (2.4:1). */
body[data-wf-theme="precision"] [style*="background:#2E8FD5"] { background: var(--wf-blue-600) !important; }
body[data-wf-theme="precision"] [style*="background:#2E8FD5"] [style*="color:#FFD34D"] { color: #fff !important; }

/* 4.12 Footer */
body[data-wf-theme="precision"] footer :is(#solutions, #solutions-2, #customers, #testimonials, #products, #industries, #resources, #resource-center, #honors) {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body[data-wf-theme="precision"] footer h3 { color: #fff; }
/* trust strip: plain text flow with the icon hung in the margin, so figures
   like "≤30d" and "ISO 9001" never break across lines */
body[data-wf-theme="precision"] footer ul.grid > li { display: block !important; position: relative; padding-left: 1.6em; }
body[data-wf-theme="precision"] footer ul.grid > li > svg { position: absolute; left: 0; top: 0.2em; }
body[data-wf-theme="precision"] footer ul.grid > li > :is(span, .num) { white-space: nowrap; }
body[data-wf-theme="precision"] footer p.text-\[10px\] { font-size: 11px !important; color: rgba(255, 255, 255, 0.68); }

/* 4.13 Product pages: hero gets the product photo on the right. */
@media (min-width: 1024px) {
  body[data-wf-theme="precision"] [data-wf-role="product-spec-intro"] > .container:has(> [data-wf-role="product-hero-media"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 27rem);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  /* engineering diagrams that follow the copy keep the full width */
  body[data-wf-theme="precision"] [data-wf-role="product-spec-intro"] > .container:has(> [data-wf-role="product-hero-media"]) > :not(.max-w-3xl):not([data-wf-role="product-hero-media"]) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1023px) {
  body[data-wf-theme="precision"] [data-wf-role="product-spec-intro"] [data-wf-role="product-hero-media"] {
    max-width: 30rem;
    margin-top: 2rem;
  }
  body[data-wf-theme="precision"] [data-wf-role="product-spec-intro"] [data-wf-role="product-hero-media"] img { max-height: 15rem; }
}

/* 4.14 Breadcrumb + back on one row (build.py moves the back link into the
   breadcrumb bar when a page has one). */
body[data-wf-theme="precision"] nav[aria-label="Breadcrumb"] > .container:has(> [data-wf-role="page-back-link"]) {
  display: flex;
  align-items: center;
  gap: 1rem;
}
body[data-wf-theme="precision"] nav[aria-label="Breadcrumb"] > .container > [data-wf-role="page-back-link"] { flex: none; }
body[data-wf-theme="precision"] nav[aria-label="Breadcrumb"] > .container > [data-wf-role="page-back-link"] + ol {
  min-width: 0;
  padding-left: 1rem;
  border-left: 1px solid var(--wf-line-200);
}

/* 4.15 Small print inside tables, tabs and chips stays legible. */
body[data-wf-theme="precision"] :is(th, td, button, a) :is(.opacity-60, .opacity-70) { opacity: 0.92 !important; }

/* 4.16 Print never hides scroll-revealed content. */
@media print {
  .reveal, .hero-fade { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ===========================================================================
 * §5 Liquid glass (v1.1, 2026-10-22) — the translucent material is kept for
 * chrome and a few first-screen surfaces: the sticky header once the page
 * scrolls, menus, modals, floating controls, the phone dock, the homepage
 * metrics panel and product buttons, and the product photo frame. Content
 * cards stay solid so long text keeps full contrast.
 * Recipe: white fill ≥ 0.62 + blur/saturate of what is behind + a bright top
 * rim, a hairline outer edge and a soft drop. wolfer-ui.js moves the
 * specular highlight (--wf-gx/--wf-gy) under a mouse pointer.
 * ======================================================================== */
body[data-wf-theme="precision"] :is(
  [data-wf-role="page-back-link"],
  .wf-home-metrics,
  [data-wf-role="product-hero-media"],
  .wf-glass
) {
  background-color: var(--wf-glass-fill);
  background-image:
    radial-gradient(130% 120% at var(--wf-gx, 22%) var(--wf-gy, -12%), rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(230, 240, 249, 0.3) 100%);
  -webkit-backdrop-filter: blur(var(--wf-glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--wf-glass-blur)) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 var(--wf-glass-rim),
    inset 0 -1px 0 rgba(10, 35, 52, 0.05),
    0 0 0 1px var(--wf-glass-edge),
    var(--wf-glass-shadow);
}
body[data-wf-theme="precision"] [data-wf-role="page-back-link"] { box-shadow: inset 0 1px 0 var(--wf-glass-rim), 0 0 0 1px rgba(21, 101, 168, 0.14), 0 6px 16px -12px rgba(7, 28, 43, 0.35); }
body[data-wf-theme="precision"] [data-wf-role="page-back-link"]:hover { background-color: rgba(255, 255, 255, 0.86); }

/* Header: solid at the top of the page, glass once content slides under it. */
body[data-wf-theme="precision"] #site-header {
  transition: background-color var(--wf-dur) ease, box-shadow var(--wf-dur) ease, border-color var(--wf-dur) ease;
}
html.wf-scrolled body[data-wf-theme="precision"] #site-header {
  background-color: rgba(255, 255, 255, 0.84);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom-color: rgba(10, 35, 52, 0.08);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 12px 32px -22px rgba(7, 28, 43, 0.5);
}

/* The logo sits on glass: use the transparent cut of the same mark (the
   header file has a white canvas that shows as a box on tinted glass).
   Browsers without content-on-img keep the original file. */
body[data-wf-theme="precision"] #site-header img[src$="wolfer-logo.png"] {
  content: url("../wolfer-logo-transparent.png");
  height: 1.875rem;
  width: auto;
}

/* Desktop mega menus: lots of small text, so the fill stays nearly opaque
   (the header is itself frosted, so a menu cannot blur the page below it). */
body[data-wf-theme="precision"] #site-header .mega-panel {
  background-color: rgba(255, 255, 255, 0.985);
  box-shadow: inset 0 1px 0 #fff, 0 28px 60px -28px rgba(7, 28, 43, 0.4);
}

/* Phone menu: a frosted sheet over a softly dimmed page. */
body[data-wf-theme="precision"] #mobile-menu .mobile-menu-backdrop {
  background: rgba(7, 28, 43, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
body[data-wf-theme="precision"] #mobile-menu .mobile-menu-panel {
  background-color: rgba(255, 255, 255, 0.86);
  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.7) 0%, rgba(230, 240, 249, 0.42) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  border-left: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.95), -28px 0 60px -32px rgba(7, 28, 43, 0.55);
}
body[data-wf-theme="precision"] #mobile-menu .mobile-menu-panel > div:last-child { background: rgba(255, 255, 255, 0.45); }
body[data-wf-theme="precision"] #mobile-menu .mobile-menu-section > div { background: rgba(255, 255, 255, 0.5); }

/* Modals: blurred page behind, a glass card in front (forms stay on solid white). */
body[data-wf-theme="precision"] .rfq-overlay {
  background: rgba(7, 28, 43, 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
body[data-wf-theme="precision"] .rfq-modal { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 32px 80px -24px rgba(7, 28, 43, 0.6); }
body[data-wf-theme="precision"] #wf-region-modal .wf-rm__bd {
  background: rgba(7, 28, 43, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body[data-wf-theme="precision"] #wf-region-modal .wf-rm__card {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 35, 52, 0.08), 0 32px 80px -24px rgba(7, 28, 43, 0.45);
}

/* Floating WhatsApp: the brand green stays; a glass rim and top gloss frame it. */
body[data-wf-theme="precision"] .wf-wa-float {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 8px rgba(0, 0, 0, 0.12),
    0 0 0 4px rgba(255, 255, 255, 0.55),
    0 12px 28px -8px rgba(15, 26, 36, 0.42);
  transition: transform var(--wf-dur) var(--wf-ease-out), opacity var(--wf-dur) ease, box-shadow var(--wf-dur) ease, gap .22s ease, padding .22s ease;
}

/* Homepage first screen: product buttons become glass tiles (blur only where
   there is room for it — phones keep a plain translucent tile). */
body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(10, 35, 52, 0.08), 0 8px 18px -14px rgba(7, 28, 43, 0.4);
  transition: background-color var(--wf-dur) ease, box-shadow var(--wf-dur) ease, transform var(--wf-dur) var(--wf-ease-out);
}
@media (min-width: 768px) {
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button {
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    backdrop-filter: blur(10px) saturate(1.6);
  }
}
body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button[aria-pressed="true"] {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px var(--wf-blue-600), 0 12px 26px -16px rgba(21, 101, 168, 0.6);
}
body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics { --wf-glass-blur: 16px; }

/* No backdrop support, or the visitor asked for less transparency: solid. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body[data-wf-theme="precision"] :is([data-wf-role="page-back-link"], .wf-home-metrics, [data-wf-role="product-hero-media"], .wf-glass, .wf-dock, #site-header .mega-panel, #mobile-menu .mobile-menu-panel, #wf-region-modal .wf-rm__card) { background-color: rgba(255, 255, 255, 0.97); }
  html.wf-scrolled body[data-wf-theme="precision"] #site-header { background-color: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-wf-theme="precision"] :is([data-wf-role="page-back-link"], .wf-home-metrics, [data-wf-role="product-hero-media"], .wf-glass, .wf-dock, #site-header .mega-panel, #mobile-menu .mobile-menu-panel, #wf-region-modal .wf-rm__card, .wf-product-button) {
    background-color: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.wf-scrolled body[data-wf-theme="precision"] #site-header { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===========================================================================
 * §6 Motion (v1.1) — restrained: cards and pictures settle in as they scroll
 * into view, controls answer the pointer and the finger, pages cross-fade.
 * wolfer-ui.js adds html.wf-motion only when motion is welcome, and only marks
 * elements that start below the first screen — without JS, with reduced
 * motion, or when printing, nothing is hidden and nothing moves.
 * ======================================================================== */
html.wf-motion [data-wf-reveal] {
  transition: opacity 0.6s var(--wf-ease-out), transform var(--wf-dur-slow) var(--wf-ease-out) !important;
  transition-delay: calc(var(--wf-i, 0) * 70ms) !important;
}
html.wf-motion [data-wf-reveal]:not(.is-in) { opacity: 0 !important; transform: translate3d(0, 18px, 0) scale(0.985) !important; }
html.wf-motion [data-wf-reveal="media"]:not(.is-in) { transform: translate3d(0, 10px, 0) !important; }
html.wf-motion [data-wf-reveal].is-in { opacity: 1; transform: none; }
@media print {
  html.wf-motion [data-wf-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Hover (mouse) and press (touch) feedback */
@media (hover: hover) and (pointer: fine) {
  body[data-wf-theme="precision"] :is(.grid > a.group.block, .grid > a[class*="shadow-card"], #what-we-customize .grid > a, #resources .grid > a, #solutions .grid > a, a.wf-card) {
    transition: transform var(--wf-dur) var(--wf-ease-out), box-shadow var(--wf-dur) ease, border-color var(--wf-dur) ease;
  }
  body[data-wf-theme="precision"] :is(.grid > a.group.block, .grid > a[class*="shadow-card"], #what-we-customize .grid > a, #resources .grid > a, #solutions .grid > a, a.wf-card):hover {
    transform: translateY(-4px);
    box-shadow: var(--wf-shadow-md) !important;
  }
  body[data-wf-theme="precision"] :is(a, button):is(.bg-brand, .wf-home-primary):is(.h-10, .h-11, .h-12, .wf-home-primary) {
    transition: transform var(--wf-dur-fast) var(--wf-ease-out), box-shadow var(--wf-dur) ease, background-color var(--wf-dur) ease;
  }
  body[data-wf-theme="precision"] :is(a, button):is(.bg-brand, .wf-home-primary):is(.h-10, .h-11, .h-12, .wf-home-primary):hover {
    transform: translateY(-1px);
    box-shadow: var(--wf-shadow-blue);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, 0.82); }
}
body[data-wf-theme="precision"] :is(a, button):is(.bg-brand, .wf-home-primary, .wf-home-secondary, .rfq-trigger, .wf-dock__quote, .wf-dock__wa, [data-wf-role="page-back-link"]):active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* Page-to-page cross-fade (Chrome 126+, Safari 18.2+; others just navigate). */
@view-transition { navigation: auto; }
body[data-wf-theme="precision"] #site-header { view-transition-name: wf-header; }
::view-transition-old(root) { animation: 180ms ease-out both wf-vt-out; }
::view-transition-new(root) { animation: 340ms var(--wf-ease-out) both wf-vt-in; }
@keyframes wf-vt-out { to { opacity: 0; } }
@keyframes wf-vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ===========================================================================
 * §7 Phones (v1.1) — fixes and tightening below 768px; larger hit areas on
 * any touch screen.
 * ======================================================================== */

/* 7.1 Long words never run off the screen; German/French/Spanish headings
   hyphenate on phones. */
body[data-wf-theme="precision"] :is(h1, h2, h3, h4) { overflow-wrap: break-word; }
@media (max-width: 767px) {
  body[data-wf-theme="precision"]:is(:lang(de), :lang(fr), :lang(es)) :is(h1, h2, h3, h4) { -webkit-hyphens: auto; hyphens: auto; }
}
@media (max-width: 479px) {
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) h1 { font-size: clamp(2.05rem, 10.2vw, 2.8rem); }
}

/* 7.2 Hero grids below 1024px: one column that is exactly as wide as the
   screen (an implicit track sized to its content pushed industry-page copy
   and buttons 14px past the right edge). */
@media (max-width: 1023px) {
  body[data-wf-theme="precision"] section .grid[class*="lg:grid-cols-12"]:not([class*=" grid-cols-"]):not([class^="grid-cols-"]):not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 7.3 Category galleries: one horizontal card per row on phones — the
   2-column grid squeezed name, code and the PDF link into 170px, where they
   overlapped and the code broke one token per line. */
@media (max-width: 639px) {
  body[data-wf-theme="precision"] .grid.grid-cols-2:has(> a.group.block.overflow-hidden > div:first-child img) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body[data-wf-theme="precision"] .grid.grid-cols-2:has(> a.group.block.overflow-hidden > div:first-child img) > a {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    border-radius: var(--wf-radius-lg);
  }
  body[data-wf-theme="precision"] .grid.grid-cols-2:has(> a.group.block.overflow-hidden > div:first-child img) > a > div:first-child {
    aspect-ratio: auto;
    height: auto;
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0;
    border-right: 1px solid var(--wf-line-200);
    background: var(--wf-surface-50);
  }
  body[data-wf-theme="precision"] .grid.grid-cols-2:has(> a.group.block.overflow-hidden > div:first-child img) > a > div:first-child img {
    width: 100%;
    height: 100%;
    max-height: 132px;
    padding: 10px;
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  body[data-wf-theme="precision"] .grid.grid-cols-2:has(> a.group.block.overflow-hidden > div:first-child img) > a > div:last-child {
    padding: 12px 14px 14px;
    border-top: 0;
    min-width: 0;
  }
  body[data-wf-theme="precision"] .grid.grid-cols-2:has(> a.group.block.overflow-hidden > div:first-child img) > a > div:last-child > div.flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  body[data-wf-theme="precision"] .grid.grid-cols-2:has(> a.group.block.overflow-hidden > div:first-child img) > a > div:last-child > p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 7.4 Breadcrumb on phones: the Back pill already leads home, so the first
   "Home" step is dropped; a long trail fades out at the right edge instead of
   being cut (wolfer-ui.js marks it .wf-crumb-more while it can scroll). */
@media (max-width: 767px) {
  body[data-wf-theme="precision"] nav[aria-label="Breadcrumb"] > .container:has(> [data-wf-role="page-back-link"]) > ol > li:first-child,
  body[data-wf-theme="precision"] nav[aria-label="Breadcrumb"] > .container:has(> [data-wf-role="page-back-link"]) > ol > li:first-child + :is(li, svg) {
    display: none;
  }
  body[data-wf-theme="precision"] nav[aria-label="Breadcrumb"] ol.wf-crumb-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
}

/* 7.5 Interior heroes start closer to the top on phones (the title used to
   sit a third of the way down the first screen). The hero is the first section
   of <body>, of the build's <main data-wf-landmark> (or <main><article>) wrapper (GEO 2026-10-23),
   or of a template's own <main>; :where() keeps the three at one specificity. */
@media (max-width: 767px) {
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) > section:first-of-type > .container,
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) :where(main[data-wf-landmark], main[data-wf-landmark] > article[data-wf-landmark]) > section:first-of-type > .container,
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) main:where(:not([data-wf-landmark])) > section:first-child > .container {
    padding-top: 32px;
    padding-bottom: 44px;
  }
  body[data-wf-theme="precision"] section[data-wf-role="product-spec-intro"] { padding-top: 0; }
}

/* 7.6 Hero calls to action on phones: full width, stacked, equal height. */
@media (max-width: 639px) {
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) > section:first-of-type .flex.flex-wrap:has(> a:is(.h-11, .h-12)),
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) :where(main[data-wf-landmark], main[data-wf-landmark] > article[data-wf-landmark]) > section:first-of-type .flex.flex-wrap:has(> a:is(.h-11, .h-12)),
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) main:where(:not([data-wf-landmark])) > section:first-child .flex.flex-wrap:has(> a:is(.h-11, .h-12)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) > section:first-of-type .flex.flex-wrap:has(> a:is(.h-11, .h-12)) > a,
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) :where(main[data-wf-landmark], main[data-wf-landmark] > article[data-wf-landmark]) > section:first-of-type .flex.flex-wrap:has(> a:is(.h-11, .h-12)) > a,
  body[data-wf-theme="precision"]:not([data-wf-page="index"]) main:where(:not([data-wf-landmark])) > section:first-child .flex.flex-wrap:has(> a:is(.h-11, .h-12)) > a {
    width: 100%;
    height: 48px;
    justify-content: center;
  }
}

/* 7.7 Spec tables on phones: the model column stays put while a row scrolls
   sideways. */
@media (max-width: 767px) {
  body[data-wf-theme="precision"] table.param[id$="-table"] > thead > tr > th:first-child,
  body[data-wf-theme="precision"] table.param[id$="-table"] > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
  }
  body[data-wf-theme="precision"] table.param[id$="-table"] > tbody > tr > td:first-child {
    z-index: 1;
    background-color: #fff;
    box-shadow: inset -1px 0 0 var(--wf-line-200), 10px 0 12px -12px rgba(7, 28, 43, 0.45);
  }
  body[data-wf-theme="precision"] table.param[id$="-table"] > tbody > tr:nth-child(even) > td:first-child { background-color: #fbfcfd; }
  body[data-wf-theme="precision"] table.param[id$="-table"] > thead > tr > th:first-child { z-index: 3; }
}

/* 7.8 Touch targets: list and bar links get a 40px hit row; the long FAQ
   question lists a 32px one (no extra gap), so the page grows by a third as much. */
@media (pointer: coarse) {
  body[data-wf-theme="precision"] nav[aria-label="Breadcrumb"] ol a { display: inline-block; padding-block: 10px; }
  body[data-wf-theme="precision"] footer ul.space-y-2 > li > a { display: inline-block; padding-block: 9px; }
  body[data-wf-theme="precision"] footer ul.space-y-2 > li + li { margin-top: 0; }
  body[data-wf-theme="precision"] footer :is(ul.flex.gap-6, [data-wf-role="icp"]) a { display: inline-block; padding-block: 10px; }
  body[data-wf-theme="precision"] .flex.items-baseline.justify-between > a.text-sm { display: inline-block; padding-block: 10px; }
  body[data-wf-theme="precision"] ul.mt-1.text-sm > li > a { display: inline-block; padding-block: 6px; }
  body[data-wf-theme="precision"] ul.mt-1.text-sm > li + li { margin-top: 0; }
  body[data-wf-theme="precision"] table.param thead th > button { min-height: 40px; }
}

/* 7.9 Homepage section headers on phones: the slogan leads and the H2
   becomes the sub-head — one dominant headline per section. */
@media (max-width: 1023px) {
  body[data-wf-theme="precision"][data-wf-page="index"] section > .container :is(header, div.max-w-3xl):has(> p.display:first-child + p + h2) > h2 {
    font-size: clamp(1.28rem, 5.4vw, 1.6rem) !important;
    line-height: 1.25 !important;
    margin-top: 1rem !important;
  }
}
/* A label that only repeats the slogan is hidden (wolfer-ui.js marks it). */
body[data-wf-theme="precision"] .wf-dup { display: none !important; }

/* 7.10 Story hero: the logo tile repeats the header logo — hidden on phones. */
@media (max-width: 767px) {
  body[data-wf-theme="precision"] :has(> [data-wf-role="story-hero-logo"]) { display: none; }
}

/* 7.11 Language suggestion bar: one compact strip on phones. */
@media (max-width: 767px) {
  #wf-lang-suggest { font-size: 12.5px !important; line-height: 1.45 !important; padding: 7px 40px 7px 12px !important; }
}

/* 7.12 Phone dock (wolfer-ui.js): "Request a Quote" + WhatsApp in one glass
   bar at the bottom, shown once the first screen has scrolled away and hidden
   again over the closing call-to-action and the footer. It replaces the round
   WhatsApp button on phones. */
.wf-dock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 130%);
  transition: transform 420ms var(--wf-ease-out), opacity 260ms ease;
}
.wf-dock.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.wf-dock__quote,
.wf-dock__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: var(--wf-radius-md);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease;
}
.wf-dock__quote {
  gap: 8px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #197ab7, #125f94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 18px -10px rgba(21, 101, 168, 0.75);
  font: 700 15px/1 var(--wf-font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wf-dock__quote svg { width: 16px; height: 16px; flex: none; }
.wf-dock__wa {
  width: 46px;
  color: #fff;
  background: #25d366 linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 18px -10px rgba(15, 26, 36, 0.6);
}
.wf-dock__wa svg { width: 24px; height: 24px; }
.wf-dock :focus-visible { outline: 2px solid var(--wf-blue-600); outline-offset: 2px; }
@media (max-width: 767px) {
  html.wf-dock-ready .wf-wa-float { transition: opacity 200ms ease, transform 260ms var(--wf-ease-out); }
  html.wf-dock-on .wf-wa-float { opacity: 0; pointer-events: none; transform: scale(0.8); }
}
/* Floating controls step aside while the menu or a modal is open. */
body:has(#mobile-menu[aria-hidden="false"]) :is(.wf-wa-float, .wf-dock),
body:has(#wf-region-modal[aria-hidden="false"]) :is(.wf-wa-float, .wf-dock),
body:has(.rfq-overlay.is-open) :is(.wf-wa-float, .wf-dock) {
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (min-width: 768px) {
  .wf-dock { display: none; }
}

/* 7.13 Footer link groups fold into disclosures on phones (wolfer-ui.js adds
   the toggle buttons; without JS every list stays open). */
@media (max-width: 639px) {
  body[data-wf-theme="precision"] footer .grid:has(> .wf-acc) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; }
  body[data-wf-theme="precision"] footer .grid:has(> .wf-acc) > * { grid-column: 1 / -1 !important; }
  body[data-wf-theme="precision"] footer .grid:has(> .wf-acc) > :not(.wf-acc) { margin-bottom: 28px; }
  body[data-wf-theme="precision"] footer .grid > .wf-acc { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  body[data-wf-theme="precision"] footer .wf-acc > h3 { margin: 0 !important; }
  body[data-wf-theme="precision"] footer .wf-acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
  }
  body[data-wf-theme="precision"] footer .wf-acc__btn::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--wf-dur) var(--wf-ease-out);
    opacity: 0.8;
  }
  body[data-wf-theme="precision"] footer .wf-acc.is-open .wf-acc__btn::after { transform: translateY(2px) rotate(-135deg); }
  body[data-wf-theme="precision"] footer .wf-acc > ul { display: none; padding-bottom: 14px; }
  body[data-wf-theme="precision"] footer .wf-acc.is-open > ul { display: block; }
}

/* ===========================================================================
 * §8 Video (v1.1) — the 30-second company film on the factory-video page.
 * Click to play (preload none, so the page stays light); wolfer-ui.js puts a
 * glass play button over the poster and hands over to the native controls.
 * ======================================================================== */
body[data-wf-theme="precision"] [data-wf-role="promo-video"] { padding-top: clamp(28px, 4vw, 56px); }
body[data-wf-theme="precision"] .wf-video { margin: 0; }
body[data-wf-theme="precision"] .wf-video__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--wf-radius-xl);
  background: var(--wf-navy-900);
  box-shadow: 0 0 0 1px var(--wf-line-200), var(--wf-shadow-md);
}
body[data-wf-theme="precision"] .wf-video__media { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--wf-navy-900); }
body[data-wf-theme="precision"] .wf-video__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; color: var(--wf-ink-600); font-size: 15px; line-height: 1.5; }
body[data-wf-theme="precision"] .wf-video__cap strong { color: var(--wf-ink-900); font-family: var(--wf-font-display); font-size: 18px; font-weight: 700; }
body[data-wf-theme="precision"] .wf-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  transition: transform var(--wf-dur) var(--wf-ease-out), background-color var(--wf-dur) ease, opacity var(--wf-dur) ease;
}
body[data-wf-theme="precision"] .wf-video__play svg { width: 34px; height: 34px; margin-left: 5px; }
body[data-wf-theme="precision"] .wf-video__play:hover { transform: scale(1.06); background-color: rgba(255, 255, 255, 0.28); }
body[data-wf-theme="precision"] .wf-video__play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
body[data-wf-theme="precision"] .wf-video.is-playing .wf-video__play { opacity: 0; pointer-events: none; }
@media (max-width: 639px) {
  body[data-wf-theme="precision"] .wf-video__frame { border-radius: var(--wf-radius-lg); }
  body[data-wf-theme="precision"] .wf-video__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  body[data-wf-theme="precision"] .wf-video__play svg { width: 28px; height: 28px; }
}