/*!
 * Wolfer phone homepage · v1.2 · 2026-10-23
 * ---------------------------------------------------------------------------
 * Loaded on the homepage only, after assets/wolfer-ds.css, with
 * media="(max-width: 767px)" (i18n-build/build.py). Paired with
 * assets/wolfer-home.js. Uses the Wolfer tokens (--wf-*) where they exist.
 *
 * A light-blue first screen (the site's blue wash, a fine blueprint grid, a
 * white light pool, glass product stage and glass figures) and, sliding over
 * it, a lighter sheet of white glass cards. The copy
 * and the DOM are the desktop ones: sections are re-ordered visually
 * (products first, then the plant, the company, cases and proof), duplicate
 * figures are hidden and long text folds. wolfer-home.js adds the header
 * states, the scroll progress line, count-up, the logo marquee, carousel dots,
 * product swipe/auto-advance and the section-head reveal.
 * Per language: Japanese and Korean use their own system fonts, Korean breaks
 * between words, Japanese headings between phrases, German, French and
 * Spanish hyphenate. The live 3D entry of the Chinese site
 * (homepage-showcase.js) gets the same glass and is never auto-selected.
 * Reduced motion: everything stands still; without JS nothing is hidden.
 * Tablets and desktops never load this file (the media attribute).
 *
 *   1  visual order          8  what we make: 2-up glass tiles
 *   2  header states         9  the plant
 *   3  first screen         10  the company
 *   4  product stage        11  carousels
 *   5  key figures          12  folded blocks
 *   6  the light sheet      13  price note, WeChat, newsletter
 *   7  section heads        14  closing call-to-action
 */
@media (max-width: 767px) {
  body[data-wf-theme="precision"][data-wf-page="index"] {
    --hm-ink: #0a2334;
    --hm-muted: #506576;
    --hm-blue: #1565a8;
    --hm-azure: #3f90d6;
    --hm-sky: #5fb4ec;
    --hm-hero-top: #f6fafd;
    --hm-hero-mid: #e9f2fa;
    --hm-hero-bottom: #dcebf7;
    --hm-sheet: #f6f9fc;
    --hm-card: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76));
    --hm-card-edge: 0 0 0 1px rgba(10, 35, 52, 0.07), 0 16px 34px -22px rgba(7, 28, 43, 0.38), inset 0 1px 0 #fff;
    --hm-light-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58));
    --hm-light-edge: 0 0 0 1px rgba(10, 35, 52, 0.06), inset 0 1px 0 #fff;
    --hm-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --hm-stat: "Montserrat", "Saira", system-ui, sans-serif;
    background-color: var(--hm-sheet);
  }
  html[lang^="zh"] body[data-wf-theme="precision"][data-wf-page="index"] { --hm-cjk: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
  html[lang^="ja"] body[data-wf-theme="precision"][data-wf-page="index"] { --hm-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; }
  html[lang^="ko"] body[data-wf-theme="precision"][data-wf-page="index"] { --hm-cjk: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }

  /* Per-language setting: Japanese and Korean get their own system fonts
     (the shared stack starts with PingFang SC, which draws Japanese kanji in
     Chinese forms); Korean breaks between words only, Japanese headings and
     labels break between phrases (Chrome; elsewhere as before), and German,
     French and Spanish hyphenate in narrow tiles. */
  html:is([lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] { font-family: "Saira", var(--hm-cjk); }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main { overflow-wrap: break-word; }
  html[lang^="ko"] body[data-wf-theme="precision"][data-wf-page="index"] :is(main#main, #site-header) { word-break: keep-all; overflow-wrap: break-word; }
  html[lang^="ja"] body[data-wf-theme="precision"][data-wf-page="index"] main#main :is(h1, h2, h3, dt, summary, .wf-product-button, .wf-product-button > span, .wf-showcase-heading) { word-break: auto-phrase; }
  html:is([lang^="de"], [lang^="fr"], [lang^="es"]) body[data-wf-theme="precision"][data-wf-page="index"] main#main :is(h3, dt, dd, small, .wf-product-button, #what-we-customize .grid > a > p) { -webkit-hyphens: auto; hyphens: auto; }

  /* One 20px gutter down the page, as on the first screen (the sections
     used to sit 36px in, the swipe rails 20px). */
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > section:where([id], [data-wf-role]):where(:not([data-wf-role="homepage-price-note"]):not([data-wf-role="wechat-official-section"])) > .container {
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 20px !important;
  }

  /* 1 Visual order: what we make first, then the plant, the company, the
     cases and the proof; the closing call-to-action stays last. The DOM and
     the desktop order are unchanged. */
  body[data-wf-theme="precision"][data-wf-page="index"] main#main { display: flex; flex-direction: column; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > * { order: 12; min-width: 0; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > .wf-home-hero { order: 0; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > [data-wf-role="hero-customer-strip"] { order: 1; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #what-we-customize { order: 2; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #factory { order: 3; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > [data-wf-role="homepage-stats"] { order: 4; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #solutions { order: 5; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #testimonials { order: 6; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #customers { order: 7; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #drawing-to-delivery { order: 8; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > [data-wf-role="homepage-price-note"] { order: 9; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #honors { order: 10; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #resources { order: 11; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > #rfq { order: 30; }

  /* 2 Header: white glass over the light-blue first screen, so the grid
     shows through; after the first screen it is the site's own glass header
     (html.wf-hm-past). A 2px line under it shows how far down you are. */
  html:not(.wf-hm-past) body[data-wf-theme="precision"][data-wf-page="index"] #site-header {
    background-color: rgba(255, 255, 255, 0.62) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-bottom-color: rgba(10, 35, 52, 0.06) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7) !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #site-header {
    transition: background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(var(--hm-progress, 0));
    background: linear-gradient(90deg, var(--hm-blue), var(--hm-azure) 60%, var(--hm-sky));
    box-shadow: 0 0 8px rgba(63, 144, 214, 0.45);
  }

  /* 3 First screen: the site's light blue, a fine blueprint grid, a white
     light pool and a slow scan line. It runs under the translucent header. */
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > .wf-home-hero {
    margin-top: calc(-1 * var(--hm-header, 64px));
    padding-top: var(--hm-header, 64px);
    color: var(--hm-ink);
    border-bottom: 0;
    background:
      radial-gradient(120% 50% at 90% 4%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
      radial-gradient(90% 42% at -10% 56%, rgba(63, 144, 214, 0.16), rgba(63, 144, 214, 0) 66%),
      linear-gradient(180deg, var(--hm-hero-top) 0%, var(--hm-hero-mid) 46%, var(--hm-hero-bottom) 100%);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > .wf-home-hero::before {
    background-image:
      linear-gradient(rgba(21, 101, 168, 0.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(21, 101, 168, 0.075) 1px, transparent 1px),
      linear-gradient(rgba(21, 101, 168, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(21, 101, 168, 0.035) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(140% 70% at 60% 18%, #000 30%, transparent 86%);
    mask-image: radial-gradient(140% 70% at 60% 18%, #000 30%, transparent 86%);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > .wf-home-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(63, 144, 214, 0), rgba(63, 144, 214, 0.07) 50%, rgba(63, 144, 214, 0));
    animation: hm-scan 9s linear infinite;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-shell { width: calc(100% - 40px); }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-main { padding: 30px 0 6px; gap: 26px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-copy > * { animation: hm-rise 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-copy > :nth-child(2) { animation-delay: 80ms; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-copy > :nth-child(3) { animation-delay: 160ms; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-copy > :nth-child(4) { animation-delay: 240ms; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-copy > :nth-child(5) { animation-delay: 320ms; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-showcase { animation: hm-rise 820ms cubic-bezier(0.2, 0.7, 0.2, 1) 360ms both; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-bottom { animation: hm-rise 820ms cubic-bezier(0.2, 0.7, 0.2, 1) 480ms both; }

  /* Copy */
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-eyebrow {
    display: block;
    color: var(--hm-blue);
    font: 600 11.5px/1.5 var(--hm-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-eyebrow { font-family: var(--hm-mono), var(--hm-cjk); letter-spacing: 0.06em; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-eyebrow > span:first-child {
    display: inline-block;
    margin-right: 10px;
    vertical-align: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hm-azure);
    box-shadow: 0 0 0 4px rgba(63, 144, 214, 0.16), 0 0 12px rgba(63, 144, 214, 0.6);
    animation: hm-pulse 2.6s ease-in-out infinite;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #wf-home-title {
    margin-top: 16px;
    color: var(--hm-ink);
    font-size: clamp(34px, 9.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #wf-home-title > span {
    color: var(--hm-blue);
    background: linear-gradient(96deg, #1565a8 0%, #1f78c2 52%, #2f86cf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  html[lang^="zh"] body[data-wf-theme="precision"][data-wf-page="index"] #wf-home-title {
    font-family: var(--hm-cjk);
    font-size: clamp(36px, 10.4vw, 46px);
    line-height: 1.14;
    letter-spacing: 0.01em;
    -webkit-text-stroke: 0.02em currentColor;
  }
  html[lang^="zh"] body[data-wf-theme="precision"][data-wf-page="index"] #wf-home-title > span { -webkit-text-stroke: 0; }
  html:is([lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] #wf-home-title { font-family: "Saira", var(--hm-cjk); font-size: clamp(26px, calc((100vw - 40px) / 11.4), 38px); line-height: 1.2; letter-spacing: -0.005em; }
  html:is([lang^="de"], [lang^="fr"], [lang^="es"]) body[data-wf-theme="precision"][data-wf-page="index"] #wf-home-title { font-size: clamp(31px, 8.6vw, 40px); -webkit-hyphens: auto; hyphens: auto; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-intro { margin-top: 16px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-intro p:first-child { color: var(--hm-muted); font-size: 15.5px; line-height: 1.7; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-intro strong { color: var(--hm-ink); -webkit-text-stroke: 0; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-intro p + p {
    margin-top: 10px;
    color: #546877 !important;
    font: 500 11px/1.6 var(--hm-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-intro p + p { font-family: var(--hm-mono), var(--hm-cjk); font-size: 12px; letter-spacing: 0.08em; }

  /* Calls to action: the primary one glows and a light sweeps across it. */
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
  html[lang^="zh"] body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-actions { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-actions a {
    position: relative;
    overflow: hidden;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 15px;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-primary {
    color: #fff;
    background: linear-gradient(135deg, #1f7fcf 0%, #1565a8 52%, #0f4c82 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 14px 30px -14px rgba(21, 101, 168, 0.6);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-primary::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -70%;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: hm-sweep 6s ease-in-out 1.6s infinite;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-secondary {
    color: var(--wf-blue-700, #0f4c82);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(21, 101, 168, 0.28);
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px -18px rgba(21, 101, 168, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-trust li,
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-trust li:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    color: var(--hm-muted);
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(10, 35, 52, 0.08);
    box-shadow: inset 0 1px 0 #fff;
    font-size: 12px;
    line-height: 1.35;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-trust svg { margin-top: 0; color: #4f9a2c; }

  /* 4 Product stage: a white glass light-box. The product floats over a
     glow, a slow blueprint ring turns behind it; swipe or tap to change. */
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-showcase {
    position: relative;
    margin: 4px 0 0;
    padding: 14px 14px 12px;
    border-radius: 24px;
    background: var(--hm-light-glass);
    box-shadow: var(--hm-light-edge), 0 26px 50px -32px rgba(7, 28, 43, 0.38);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-showcase-heading {
    padding: 0 2px 10px;
    border-bottom: 1px solid rgba(10, 35, 52, 0.08);
    color: var(--hm-muted) !important;
    font: 600 11px/1.4 var(--hm-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] .wf-showcase-heading { font-family: var(--hm-mono), var(--hm-cjk); font-size: 12px !important; letter-spacing: 0.06em; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-product-count] { color: var(--hm-blue); font-size: 11px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-stage { height: clamp(266px, 76vw, 356px); touch-action: pan-y; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-stage::before {
    content: "";
    position: absolute;
    z-index: -3;
    left: 6%;
    right: 6%;
    top: 4%;
    bottom: 18%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.96), rgba(170, 214, 240, 0.42) 60%, rgba(170, 214, 240, 0) 100%);
    animation: hm-glow 5.5s ease-in-out infinite alternate;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-stage::after {
    content: "";
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 44%;
    width: min(76%, 260px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    border: 1px dashed rgba(21, 101, 168, 0.22);
    box-shadow: 0 0 0 16px rgba(63, 144, 214, 0.04), inset 0 0 0 30px rgba(63, 144, 214, 0.03);
    transform: translate(-50%, -50%);
    animation: hm-spin 48s linear infinite;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-stage-wordmark { color: transparent; -webkit-text-stroke: 1px rgba(21, 101, 168, 0.1); }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-stage-drawing { stroke: rgba(21, 101, 168, 0.5); opacity: 0.3; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-stage-pedestal { bottom: 72px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-stage-shadow { bottom: 102px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-float { margin-bottom: 26px; animation: hm-float 6s ease-in-out infinite; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-code { color: var(--hm-blue) !important; font-size: 10px; letter-spacing: 0.14em; }
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-code { font-family: var(--hm-mono), var(--hm-cjk); letter-spacing: 0.06em; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-caption h2 { color: var(--hm-ink); font-size: 21px; font-weight: 700; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-caption a { color: var(--hm-blue); font-size: 12.5px; }
  /* name over link, the same for every product and language (long German
     names keep one line); the product floats 26px higher to make room */
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-caption { flex-direction: column; align-items: flex-start; gap: 0; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-caption > div { max-width: 100%; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-caption h2 { overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-caption a { min-height: 44px; margin-block: -5px; padding-block: 0; }
  html[lang^="de"] body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-buttons { grid-auto-columns: 136px; }
  html[lang^="ja"] body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-buttons { grid-auto-columns: 128px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-buttons { scrollbar-width: none; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-buttons::-webkit-scrollbar { display: none; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button {
    min-height: 90px;
    border-radius: 14px;
    color: var(--wf-ink-700, #12384f);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(10, 35, 52, 0.08);
    box-shadow: inset 0 1px 0 #fff, 0 8px 18px -14px rgba(7, 28, 43, 0.35);
    transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, color 240ms ease;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button[aria-pressed="true"] {
    color: var(--wf-blue-700, #0f4c82);
    background: #fff;
    border-color: rgba(21, 101, 168, 0.55);
    box-shadow: 0 0 0 1px rgba(21, 101, 168, 0.22), 0 12px 26px -14px rgba(21, 101, 168, 0.55), inset 0 1px 0 #fff;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button-index { color: #546877; opacity: 1; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-showcase-footnote > span { background: var(--hm-azure); box-shadow: 0 0 8px rgba(63, 144, 214, 0.55); }
  /* the live 3D entry (Chinese site, homepage-showcase.js) keeps its own light
     styles; the model sits still (no float) so it can be dragged */
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button.wf-product-button--3d { margin-top: 8px; min-height: 60px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-button--3d .wf-3d-copy span { color: #546877; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-product-panel--3d .wf-product-float { animation: none; margin-bottom: 0; }

  /* 5 Key figures: three white glass tiles; numbers count up when they appear. */
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-bottom { padding: 2px 0 42px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div,
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:first-child,
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:last-child {
    position: relative;
    overflow: hidden;
    display: block;
    grid-column: auto;
    padding: 13px 12px 12px;
    border: 0;
    border-radius: 16px;
    background: var(--hm-light-glass);
    box-shadow: var(--hm-light-edge), 0 14px 30px -24px rgba(7, 28, 43, 0.35);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:last-child :is(dt, small) { grid-column: 1; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:last-child dd { grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: right; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(63, 144, 214, 0), rgba(63, 144, 214, 0.12), rgba(63, 144, 214, 0));
    transform: skewX(-18deg);
    animation: hm-sweep-once 1.4s ease-out 1.2s both;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:nth-child(2)::after { animation-delay: 1.35s; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:nth-child(3)::after { animation-delay: 1.5s; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics dt { color: var(--hm-muted); font-size: 11.5px; line-height: 1.45; }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics dd,
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics > div:last-child dd {
    margin-top: 6px;
    color: var(--hm-ink);
    font-family: var(--hm-stat);
    font-size: clamp(19px, 5.6vw, 23px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    -webkit-text-stroke: 0;
    font-variant-numeric: tabular-nums;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-metrics small { margin-top: 5px; color: #546877 !important; font-size: 11px; line-height: 1.45; }

  /* 6 The light sheet slides over the first screen with rounded corners;
     customer logos run as a slow marquee (wolfer-home.js builds the track). */
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > section:where(:not(.wf-home-hero):not(#rfq)) {
    background-color: transparent !important;
    background-image: none;
    border-bottom: 0 !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > [data-wf-role="hero-customer-strip"] {
    position: relative;
    z-index: 2;
    margin-top: -26px;
    border-radius: 26px 26px 0 0;
    background-color: var(--hm-sheet) !important;
    box-shadow: 0 -16px 32px -24px rgba(7, 28, 43, 0.3), inset 0 1px 0 #fff;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 4px;
    background: rgba(10, 35, 52, 0.14);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] > .container { padding-top: 26px !important; padding-bottom: 18px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] > .container > div > p { color: var(--hm-muted); font: 600 11px/1.4 var(--hm-mono); letter-spacing: 0.12em; }
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] > .container > div > p { font-family: var(--hm-mono), var(--hm-cjk); font-size: 12px; letter-spacing: 0.08em; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] > .container > div > a { color: var(--hm-blue); font-size: 12.5px; }
  html.wf-hm body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] .hm-marquee {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  html.wf-hm body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] .hm-marquee__track {
    display: flex !important;
    width: max-content;
    gap: 34px !important;
    align-items: center;
    animation: hm-marquee 30s linear infinite;
  }
  html.wf-hm body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] .hm-marquee__track.is-paused { animation-play-state: paused; }
  html.wf-hm body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] .hm-marquee__track > span { flex: none; width: auto !important; height: 40px !important; padding: 0 !important; }
  html.wf-hm body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] .hm-marquee__track img { max-width: 112px !important; max-height: 30px !important; opacity: 0.62; }

  /* 7 Section heads: 01 ── label, then the slogan, the heading and the lead.
     The English slogan becomes a gradient display line; the number and the
     rule draw in as the head scrolls into view. */
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources, #drawing-to-delivery) { padding-top: 46px !important; padding-bottom: 42px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header,
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #customers, #testimonials, #resources) > .container > header::after,
  body[data-wf-theme="precision"][data-wf-page="index"] #customers > .container > details > [data-wf-role="home-mobile-details-body"] > header::after { content: none !important; display: none !important; }
  /* the label row */
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > p:nth-child(2),
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl > p:nth-child(2),
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p:nth-child(2),
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-localized"] {
    order: -1;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
    color: var(--hm-blue);
    font: 700 12px/1.4 var(--hm-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > p:nth-child(2),
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl > p:nth-child(2),
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p:nth-child(2),
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-localized"] { font-family: var(--hm-mono), var(--hm-cjk); font-size: 13px; letter-spacing: 0.08em; }
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > p:nth-child(2)::before,
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl > p:nth-child(2)::before,
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p:nth-child(2)::before,
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-localized"]::before {
    content: "00";
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(135deg, var(--hm-azure), var(--hm-blue));
    box-shadow: 0 6px 14px -6px rgba(21, 101, 168, 0.8);
    font: 700 11px/1 var(--hm-mono);
    letter-spacing: 0.04em;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > header > p:nth-child(2)::before { content: "01"; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p:nth-child(2)::before { content: "02"; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-localized"]::before { content: "03"; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > header > p:nth-child(2)::before { content: "04"; }
  body[data-wf-theme="precision"][data-wf-page="index"] #testimonials > .container > header > p:nth-child(2)::before { content: "05"; }
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl > p:nth-child(2)::before { content: "06"; }
  body[data-wf-theme="precision"][data-wf-page="index"] #honors > .container > header > p:nth-child(2)::before { content: "07"; }
  body[data-wf-theme="precision"][data-wf-page="index"] #resources > .container > header > p:nth-child(2)::before { content: "08"; }
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > p:nth-child(2)::after,
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl > p:nth-child(2)::after,
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p:nth-child(2)::after,
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-localized"]::after {
    content: "";
    flex: 1;
    height: 1px;
    min-width: 24px;
    background: linear-gradient(90deg, rgba(21, 101, 168, 0.55), rgba(21, 101, 168, 0));
    transform-origin: 0 50%;
    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms;
  }
  /* the slogan */
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > p.display:first-child,
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl > p.display:first-child,
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p.display:first-child,
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-heading"] > p.display:first-child {
    margin: 0;
    font-family: "DIN 2014", "DIN Next", "Saira", system-ui, sans-serif;
    font-size: clamp(28px, 8.2vw, 34px) !important;
    font-weight: 800;
    line-height: 1.02 !important;
    letter-spacing: -0.025em;
    color: var(--hm-blue) !important;
    background: linear-gradient(95deg, #0a2334 0%, #12497a 48%, #2f8fd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 700ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > h2::before,
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > h2::after,
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header::before { content: none !important; display: none !important; }
  /* the heading and the lead */
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > h2,
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery > .container > .max-w-3xl > h2,
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > h2,
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-copy"] > h2 {
    margin-top: 12px !important;
    color: var(--hm-ink);
    font-size: clamp(19px, 5.4vw, 22px) !important;
    font-weight: 800;
    line-height: 1.34 !important;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  html[lang^="zh"] body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources, #drawing-to-delivery, #factory, [data-wf-role="homepage-stats"]) h2 { font-family: var(--hm-cjk); letter-spacing: 0.02em; -webkit-text-stroke: 0.012em currentColor; }
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#what-we-customize, #solutions, #testimonials, #honors, #resources) > .container > header > p:not(:first-child):not(:nth-child(2)),
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > h2 + p,
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-copy"] > p {
    margin-top: 10px !important;
    color: var(--hm-muted);
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
  /* reveal of the head (only once wolfer-home.js is watching) */
  html.wf-hm-anim body[data-wf-theme="precision"][data-wf-page="index"] main#main > section:not(.hm-in) :is(header > p:nth-child(2), .max-w-3xl > p:nth-child(2), .lg\:col-span-6 > p:nth-child(2), [data-wf-role="homepage-about-localized"])::after { transform: scaleX(0); }
  html.wf-hm-anim body[data-wf-theme="precision"][data-wf-page="index"] main#main > section:not(.hm-in) :is(header > p.display:first-child, .max-w-3xl > p.display:first-child, .lg\:col-span-6 > p.display:first-child, [data-wf-role="homepage-about-heading"] > p.display:first-child) { opacity: 0; transform: translate3d(0, 14px, 0); }

  /* 8 What we make: a 2-up grid of glass tiles instead of a side-scrolling
     rail (the spec lines stay on the category pages). */
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 10px !important;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a,
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a:nth-last-child(-n+2) {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: auto;
    min-height: 0;
    padding: 14px 12px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--hm-card) !important;
    box-shadow: var(--hm-card-edge) !important;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(21, 101, 168, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 13px no-repeat;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a > img {
    width: 54px !important;
    height: 54px !important;
    margin: 0 0 12px !important;
    padding: 6px;
    border-radius: 15px;
    background: radial-gradient(circle at 30% 25%, #ffffff, #e2eef8 78%);
    box-shadow: inset 0 0 0 1px rgba(21, 101, 168, 0.08);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a h3 { color: var(--hm-ink); font-size: 16px !important; line-height: 1.3 !important; overflow-wrap: anywhere; text-wrap: balance; }
  html[lang^="de"] body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a h3 { font-size: 15px !important; }
  @media (max-width: 379px) {
    body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a { padding-inline: 10px !important; }
    html[lang^="de"] body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a h3 { font-size: 14px !important; }
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a > p {
    display: -webkit-box;
    margin-top: 6px !important;
    overflow: hidden;
    color: var(--hm-muted);
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a > ul { display: none !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid > a:active { transform: scale(0.98); }
  body[data-wf-theme="precision"][data-wf-page="index"] #what-we-customize > .container > .grid + div { margin-top: 18px !important; }

  /* Stand-alone text links get a 44px tap area; the layout does not move. */
  body[data-wf-theme="precision"][data-wf-page="index"] :is([data-wf-role="hero-customer-strip"] > .container > div > a, #factory .lg\:col-span-6:last-child > div:last-child > a:not(.rounded-full), [data-wf-role="homepage-price-note"] > .container > a) {
    padding-block: 12px;
    margin-block: -12px;
  }

  /* Shared: pill buttons and quiet links under a section */
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#factory, #solutions) a.rounded-full {
    min-height: 48px;
    padding: 0 22px !important;
    color: var(--hm-blue) !important;
    background: var(--hm-card);
    border: 0 !important;
    box-shadow: 0 0 0 1px rgba(21, 101, 168, 0.28), 0 12px 26px -18px rgba(21, 101, 168, 0.6), inset 0 1px 0 #fff;
  }

  /* 9 The plant: heading first, the photo pair in a glass frame, then four
     figure tiles (the first two count up). */
  body[data-wf-theme="precision"][data-wf-page="index"] #factory > .container { padding-top: 46px !important; padding-bottom: 42px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory > .container > .grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory > .container > .grid > .lg\:col-span-6:last-child { display: contents; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory > .container > .grid > .lg\:col-span-6:first-child { order: 4; margin: 20px 0 4px; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p:nth-child(2) { order: 0; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > p.display:first-child { order: 1; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > h2 { order: 2; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > h2 + p { order: 3; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > dl { order: 5; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > div:last-child { order: 6; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory [data-wf-role="factory-collage"] { height: auto !important; min-height: 0 !important; padding: 0 0 54px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory [data-wf-role="factory-collage-backdrop"] {
    display: block !important;
    top: auto !important;
    left: 18% !important;
    right: -10px !important;
    bottom: 18px !important;
    width: auto !important;
    height: 46% !important;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(63, 144, 214, 0.22), rgba(142, 199, 232, 0.06)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory [data-wf-role="factory-entrance-photo"] {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 24px 44px -24px rgba(7, 28, 43, 0.6) !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory [data-wf-role="factory-campus-photo"] {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 14px !important;
    bottom: 0 !important;
    width: 54% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 3px solid #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 40px -18px rgba(7, 28, 43, 0.6) !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:first-child > p { margin-top: 12px !important; color: #3d5262 !important; font-size: 12px; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:first-child > p span { color: inherit !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory dl {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 16px !important;
    max-width: none !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory dl > div {
    min-width: 0;
    padding: 14px 13px;
    border-radius: 16px;
    background: var(--hm-card);
    box-shadow: var(--hm-card-edge);
  }
  /* the machine list and the same-shift line get a full row */
  body[data-wf-theme="precision"][data-wf-page="index"] #factory dl > div:is(:first-child, :last-child) { grid-column: 1 / -1; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory dl dt {
    color: var(--hm-ink) !important;
    font-family: var(--hm-stat);
    font-size: clamp(18px, 5.4vw, 22px) !important;
    font-weight: 900 !important;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) body[data-wf-theme="precision"][data-wf-page="index"] #factory dl dt { font-family: var(--hm-stat), var(--hm-cjk); }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory dl dd { margin-top: 6px !important; color: var(--hm-muted) !important; font-size: 12px !important; line-height: 1.5 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #factory .lg\:col-span-6:last-child > div:last-child { margin-top: 18px !important; gap: 14px 18px !important; }

  /* 10 The company: the label and slogan, then the story folded to four lines
     (wolfer-home.js adds the toggle). The figures stay desktop-only, as before
     (site-polish.css): the first screen and the plant already carry them. */
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-stats"] { padding-top: 46px !important; padding-bottom: 42px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-stats"] > .container > .grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-stats"] > .container > .grid > div,
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-heading"],
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-copy"] { display: contents; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-localized"] { order: 0; }
  /* English hides this label as a repeat of "About Wolfer"; here it carries the section number */
  html[lang^="en"] body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-localized"] { display: flex !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-heading"] > p.display:first-child { order: 1; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-copy"] > h2 { order: 2; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-copy"] > p { order: 3; }
  body[data-wf-theme="precision"][data-wf-page="index"] .hm-fold-toggle { order: 4; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-heading"] > a { order: 6; align-self: flex-start; margin: 2px 0 -12px !important; padding-block: 12px; color: var(--hm-blue); font-size: 14px; }
  html.wf-hm body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-about-copy"] > p.hm-fold {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.25));
    mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, 0.25));
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .hm-fold-toggle {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: var(--hm-blue);
    background: rgba(21, 101, 168, 0.08);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .hm-fold-toggle[hidden] { display: none; }
  body[data-wf-theme="precision"][data-wf-page="index"] .hm-fold-toggle svg { width: 14px; height: 14px; }

  /* 11 Cases, voices and resources: snap carousels of glass cards with a
     row of dots under them (wolfer-home.js). */
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#solutions, #testimonials, #resources) > .container > .grid {
    gap: 12px !important;
    padding: 4px 2px 14px !important;
    margin-inline: -2px;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] :is(#solutions, #testimonials, #resources) > .container > .grid > :is(a, figure) {
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--hm-card) !important;
    box-shadow: var(--hm-card-edge) !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a { padding: 20px 18px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a h3 { font-size: 19px !important; line-height: 1.3 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a > p { margin-top: 10px !important; color: var(--hm-muted); font-size: 14px; line-height: 1.7; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a dl {
    margin-top: 16px !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 14px;
    background: linear-gradient(140deg, #0a2334, #0f4c82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a dl dt { color: rgba(255, 255, 255, 0.72) !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a dl dd span:first-child {
    font-size: 38px !important;
    color: #fff !important;
    background: linear-gradient(95deg, #ffffff, #9fd4f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a dl dd span + span { color: rgba(255, 255, 255, 0.8) !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a dl > p { color: rgba(255, 255, 255, 0.72) !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid > a ul li { border-radius: 999px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid + div { margin-top: 10px !important; gap: 12px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #solutions > .container > .grid + div > p { color: var(--hm-muted); font-size: 13px; }
  body[data-wf-theme="precision"][data-wf-page="index"] #testimonials > .container > .grid > figure { padding: 20px 18px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #testimonials > .container > .grid > figure > svg { color: var(--hm-azure) !important; opacity: 0.9; }
  body[data-wf-theme="precision"][data-wf-page="index"] #testimonials > .container > .grid > figure blockquote { color: var(--hm-ink) !important; font-size: 15px !important; line-height: 1.75 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #resources > .container > .grid > a { padding: 18px 16px !important; min-height: 132px; }
  body[data-wf-theme="precision"][data-wf-page="index"] #resources > .container > .grid > a > p:first-child { color: var(--hm-blue) !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] .hm-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
  body[data-wf-theme="precision"][data-wf-page="index"] .hm-dots > span {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: rgba(10, 35, 52, 0.18);
    transition: width 320ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 320ms ease;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] .hm-dots > span.is-on { width: 20px; background: linear-gradient(90deg, var(--hm-blue), var(--hm-sky)); }

  /* 12 Folded blocks (customers, process, timeline): one glass bar each. */
  body[data-wf-theme="precision"][data-wf-page="index"] #customers { padding-top: 6px !important; padding-bottom: 6px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] details[data-wf-role="home-mobile-details"] > summary,
  body[data-wf-theme="precision"][data-wf-page="index"] #customers details[data-wf-section="homepage-customers"] > summary {
    min-height: 56px;
    padding: 12px 16px;
    border: 0 !important;
    border-radius: 18px;
    color: var(--hm-blue);
    background: var(--hm-card) !important;
    box-shadow: var(--hm-card-edge), inset 3px 0 0 var(--hm-azure) !important;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #customers details[data-wf-section="homepage-customers"] > summary strong { color: var(--hm-ink); font-size: 15.5px; }
  body[data-wf-theme="precision"][data-wf-page="index"] #customers details[data-wf-section="homepage-customers"] > summary small { color: var(--hm-muted); font-size: 12px; }
  body[data-wf-theme="precision"][data-wf-page="index"] #drawing-to-delivery [data-wf-role="home-mobile-details-body"] .bg-white.border {
    border: 0 !important;
    border-radius: 16px;
    background: var(--hm-card) !important;
    box-shadow: var(--hm-card-edge);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #honors [data-wf-role="home-mobile-details-body"] { border: 0 !important; border-radius: 20px !important; background: var(--hm-card) !important; box-shadow: var(--hm-card-edge); }
  body[data-wf-theme="precision"][data-wf-page="index"] #honors ol > li { border: 0 !important; border-radius: 14px !important; background: rgba(230, 240, 249, 0.6) !important; }

  /* 13 Price note, WeChat, newsletter: glass cards. */
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-price-note"] > .container {
    width: calc(100% - 40px) !important;
    margin-block: 6px;
    padding: 16px !important;
    border-radius: 20px;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(95, 180, 236, 0.22), rgba(95, 180, 236, 0) 55%),
      var(--hm-card);
    box-shadow: var(--hm-card-edge);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-price-note"] .rounded-full { background: linear-gradient(135deg, #1a6fb5, #0f4c82) !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="homepage-price-note"] p { color: var(--hm-ink) !important; font-size: 15px !important; line-height: 1.6 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="wechat-official-section"] > .container,
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > section:not([id]):not([data-wf-role]) > .container {
    padding: 22px 18px !important;
    border-radius: 22px;
    background: var(--hm-card);
    box-shadow: var(--hm-card-edge);
    width: calc(100% - 40px);
    margin-block: 10px 30px;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="wechat-official-section"] { padding-top: 14px !important; padding-bottom: 14px !important; border-top: 0 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="wechat-official-card"] { border: 0 !important; background: #fff !important; box-shadow: 0 0 0 1px rgba(10, 35, 52, 0.07); border-radius: 18px !important; }

  /* 14 Closing call-to-action: a light-blue panel with the blueprint grid,
     the blue primary button with its light sweep, a white glass second one. */
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 10px;
    border-radius: 26px 26px 0 0;
    color: var(--hm-ink) !important;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
      linear-gradient(165deg, var(--hm-hero-mid) 0%, var(--hm-hero-bottom) 55%, #d0e4f4 100%) !important;
    box-shadow: inset 0 1px 0 #fff, 0 -16px 32px -26px rgba(7, 28, 43, 0.3);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(21, 101, 168, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 101, 168, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(120% 90% at 80% 10%, #000 20%, transparent 75%);
    mask-image: radial-gradient(120% 90% at 80% 10%, #000 20%, transparent 75%);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq > .container { padding-top: 48px !important; padding-bottom: 44px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq p.text-xs { color: var(--hm-blue) !important; font-family: var(--hm-mono); letter-spacing: 0.14em; }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq h2 { color: var(--hm-ink) !important; font-size: clamp(28px, 8.4vw, 34px) !important; line-height: 1.15 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq h2 + p { color: var(--hm-muted) !important; font-size: 15.5px !important; line-height: 1.7 !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq a { min-height: 52px; border-radius: 14px !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq a.rfq-trigger {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background: linear-gradient(135deg, #1f7fcf 0%, #1565a8 52%, #0f4c82 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 14px 30px -14px rgba(21, 101, 168, 0.6);
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq a.rfq-trigger::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -70%;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: hm-sweep 6s ease-in-out 2.4s infinite;
  }
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq a:not(.rfq-trigger) {
    color: var(--wf-blue-700, #0f4c82) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(21, 101, 168, 0.28) !important;
    box-shadow: inset 0 1px 0 #fff;
  }
}

@keyframes hm-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes hm-scan { from { transform: translate3d(0, -160px, 0); } to { transform: translate3d(0, 1500px, 0); } }
@keyframes hm-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(63, 144, 214, 0.16), 0 0 12px rgba(63, 144, 214, 0.6); } 50% { box-shadow: 0 0 0 7px rgba(63, 144, 214, 0.06), 0 0 18px rgba(63, 144, 214, 0.4); } }
@keyframes hm-sweep { 0%, 72% { left: -70%; } 100% { left: 130%; } }
@keyframes hm-sweep-once { from { left: -60%; } to { left: 130%; } }
@keyframes hm-glow { from { opacity: 0.75; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes hm-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes hm-marquee { to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-hero::after,
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-hero *,
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-hero *::before,
  body[data-wf-theme="precision"][data-wf-page="index"] .wf-home-hero *::after,
  body[data-wf-theme="precision"][data-wf-page="index"] #rfq a::after { animation: none !important; }
  body[data-wf-theme="precision"][data-wf-page="index"] main#main > .wf-home-hero::after { display: none; }
  html.wf-hm body[data-wf-theme="precision"][data-wf-page="index"] [data-wf-role="hero-customer-strip"] .hm-marquee__track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (min-width: 768px) {
  .hm-dots, .hm-fold-toggle { display: none !important; }
}