/* ============================================================
   iCNC Capability Presentation — style.css
   Self-contained. No layout depends on any CDN.
   ============================================================ */

/* ---------- Fonts (self-hosted, Latin subset + tiny CJK) ---------- */
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Display';src:url('fonts/InterDisplay-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Display';src:url('fonts/InterDisplay-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'iCNC CJK';src:url('fonts/MiSans-CJK.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'iCNC CJK';src:url('fonts/MiSans-CJK-SemiBold.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}

/* ============================================================
   Design tokens
   ------------------------------------------------------------
   :root holds the DARK theme (the deck's native surface).
   :root[data-theme="light"] overrides only what must change.
   EVERY colour used below routes through one of these tokens.
   ============================================================ */
:root{
  /* ---- Brand accent — International Klein Blue (dark theme uses a lifted tint so it
     reads on a near-black surface; light theme overrides --red/--red-rgb to pure IKB below) ---- */
  --red:#5577ff;                 /* Klein-blue accent, lifted for dark bg — large text / fills / decoration */
  --red-hi:#8fa3ff;              /* brighter blue glyphs (icon chips) */
  --accent-ink:var(--red);       /* blue for SMALL text; 5.07:1 on dark bg (light theme uses pure IKB, ~10:1) */
  --red-rgb:85,119,255;          /* raw triplet for rgba() compositing — chips / ambient wash / ticks */

  /* ---- Surfaces ---- */
  --bg:#0a0d12;
  --bg-2:#0e1218;
  --panel:#141922;
  --panel-2:#1a212c;
  --panel-3:#202935;

  /* ---- Ink ---- */
  --text:#eef2f7;
  --text-2:#c3ccd6;
  --muted:#8a95a2;
  --muted-2:#6b7581;

  /* ---- Lines / soft accents ---- */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --red-soft:rgba(var(--red-rgb),.14);     /* pale-blue chip / icon backgrounds */
  --red-border:rgba(var(--red-rgb),.30);   /* blue hairline on chips / icon frames */
  --red-fade:rgba(var(--red-rgb),.15);     /* tail of the stat accent bar */
  --red-text:#a9b8ff;                 /* blue text sitting on a pale-blue chip — 10.2:1 on dark bg */
  --chart-val-hi:#a9b8ff;             /* highlighted chart value label (needs contrast near the accent bar) */
  --steel:#5b7085;
  --ok:#39c07a;

  /* ---- Machined-steel gradient (slide-6 weld illustration) ---- */
  --wv1:#59616c;                 /* top edge */
  --wv2:#99a3af;                 /* mid tone */
  --wv3:#e3e9f0;                 /* specular highlight band */
  --wv4:#666f7a;                 /* lower body */
  --wv5:#434a54;                 /* bottom edge */
  --wv-th:#0d1218;               /* thread helix shading lines */
  --wv-core:#f2f6ff;             /* laser focal-point core */

  /* ---- Data-viz ---- */
  --bar:#33465c;                      /* non-highlighted chart bars */
  --up:#6fe0a3;
  --down:#7fb6ff;
  --grid-line:rgba(255,255,255,.06);

  /* ---- Ink that always sits on a dark photographic surface ---- */
  --on-photo:#eef2f7;
  --on-photo-2:#c3ccd6;
  --on-photo-muted:#8a95a2;

  /* ---- Ambient page wash (whole-deck background) ---- */
  --ambient:
    radial-gradient(120% 90% at 82% -8%,rgba(var(--red-rgb),.10),transparent 46%),
    radial-gradient(120% 100% at -10% 110%,rgba(45,72,104,.16),transparent 50%),
    linear-gradient(180deg,#0a0d12 0%,#0b0f15 55%,#090c11 100%);

  /* ---- Chrome scrims (translucent header / footer) ---- */
  --grad-chrome-top:linear-gradient(180deg,rgba(9,12,17,.86),rgba(9,12,17,.28));
  --grad-chrome-bottom:linear-gradient(0deg,rgba(9,12,17,.9),rgba(9,12,17,.18));

  /* ---- Interactive chrome ---- */
  --tick-off:rgba(255,255,255,.14);
  --tick-hover:rgba(255,255,255,.32);
  --tick-done:rgba(var(--red-rgb),.42);
  --navbtn-bg:rgba(255,255,255,.02);
  --navbtn-hover-ink:#fff;
  --feat-bg:rgba(255,255,255,.02);

  /* ---- Photo framing ---- */
  --figure-bg:#0f131a;
  --figure-shadow:0 6px 20px rgba(0,0,0,.28);
  --photo-cap-grad:linear-gradient(0deg,rgba(6,9,13,.92),rgba(6,9,13,.55) 55%,transparent);
  --photo-pad-bg:linear-gradient(180deg,#f2f4f6,#e4e8ec);  /* light mat behind product/machine photos */
  --tile-bg:linear-gradient(180deg,#eef1f4,#dfe4ea);       /* product tiles (shot on white) */
  --tile-shadow:0 6px 18px rgba(0,0,0,.3);
  --thumb-bg:linear-gradient(180deg,#eef1f4,#dbe0e6);       /* mini thumbnails */
  --badge-bg:rgba(9,12,17,.82);
  --badge-ink:#fff;
  --dash-bg:#0b1017;                                        /* smart-factory dashboard card */
  --award-ph-bg:#11151c;
  --card-shadow:none;                                       /* panel cards get lift in light */

  /* ---- Light-surface cards (logos / certs / brandplate) ---- */
  --logo-card-bg:#f6f7f9;
  --logo-card-host-bg:#fff;
  --logo-card-border:rgba(255,255,255,.06);
  --logo-card-shadow:0 4px 14px rgba(0,0,0,.28);
  --logo-host-shadow:0 0 0 1.5px var(--red),0 8px 22px rgba(var(--red-rgb),.22);
  --cert-bg:#f4f5f7;
  --brandplate:linear-gradient(180deg,#fbfbfc,#eef1f4);
  --brandplate-shadow:0 10px 30px rgba(0,0,0,.4);

  /* ---- Photo-slide scrims (hero / closing) ---- */
  --hero-veil:linear-gradient(180deg,rgba(9,12,17,.55) 0%,rgba(9,12,17,.35) 40%,rgba(9,12,17,.82) 100%),
              radial-gradient(90% 70% at 20% 30%,transparent,rgba(9,12,17,.55));
  --close-veil:linear-gradient(180deg,rgba(9,12,17,.72),rgba(9,12,17,.5) 45%,rgba(9,12,17,.9));

  /* ---- Hero particle field (read by app.js; constant — hero stays dark) ---- */
  --hero-dot-rgb:159,178,198;
  --hero-red-rgb:85,119,255;     /* Klein-blue particles, matches --red-rgb (dark) — hero surface never lightens */
  --hero-link-rgb:140,160,185;

  /* EtherCAT accent (magenta ≈ #E6007E, adapted per theme; typographic only — not the mark) */
  --etc:#ff2f9e;
  --etc-soft:rgba(230,0,126,.16);
  --etc-border:rgba(230,0,126,.42);

  --cjk-fallback:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC';
  --sans:'Inter','iCNC CJK',var(--cjk-fallback),'Segoe UI',Roboto,Helvetica,Arial,system-ui,sans-serif;
  --display:'Inter Display','Inter','iCNC CJK',var(--cjk-fallback),'Segoe UI',Helvetica,Arial,sans-serif;
  --cjk:'iCNC CJK',var(--cjk-fallback),'Inter',sans-serif;
  --header-h:60px;
  --footer-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --edge:5vw;
}

/* ============================================================
   LIGHT THEME — soft paper-white, dark ink, framed cards.
   Values verified for WCAG AA contrast on --bg (#f6f7f9).
   ============================================================ */
:root[data-theme="light"]{
  color-scheme:light;

  --red:#002fa7;                 /* pure International Klein Blue — large text / fills / decoration */
  --red-rgb:0,47,167;            /* raw triplet for rgba() compositing */
  --accent-ink:#002fa7;          /* pure IKB already clears AA small-text (9.97:1 on paper) — no darkening needed */
  --red-hi:#001f7a;              /* deeper blue glyph for pale-blue chips */

  --bg:#f6f7f9;
  --bg-2:#eceff3;
  --panel:#ffffff;
  --panel-2:#ffffff;
  --panel-3:#f1f4f8;

  --text:#141a22;
  --text-2:#333d49;
  --muted:#54606d;
  --muted-2:#616d7b;

  --line:rgba(17,24,33,.10);
  --line-2:rgba(17,24,33,.17);
  --red-soft:rgba(var(--red-rgb),.10);
  --red-border:rgba(var(--red-rgb),.30);
  --red-fade:rgba(var(--red-rgb),.14);
  --red-text:#002fa7;
  --chart-val-hi:#002fa7;             /* pure IKB (9.97:1 on paper) */
  --steel:#4a6178;

  /* machined-steel gradient on paper — a touch lighter, same geometry */
  --wv1:#8d959f;
  --wv2:#c3cbd4;
  --wv3:#f5f8fb;
  --wv4:#9aa3ad;
  --wv5:#79828c;
  --wv-th:#454e59;
  --wv-core:#e9efff;

  --etc:#c8006e;                      /* deeper EtherCAT magenta for AA on paper */
  --etc-soft:rgba(230,0,126,.10);
  --etc-border:rgba(230,0,126,.40);

  --bar:#5f7c99;
  --up:#12794c;
  --down:#2564c8;
  --grid-line:rgba(17,24,33,.09);

  --ambient:
    radial-gradient(120% 90% at 82% -8%,rgba(var(--red-rgb),.06),transparent 46%),
    radial-gradient(120% 100% at -10% 110%,rgba(45,72,104,.07),transparent 50%),
    linear-gradient(180deg,#f6f7f9 0%,#eef1f5 55%,#f3f5f8 100%);

  --grad-chrome-top:linear-gradient(180deg,rgba(246,247,249,.90),rgba(246,247,249,.42));
  --grad-chrome-bottom:linear-gradient(0deg,rgba(246,247,249,.94),rgba(246,247,249,.36));

  --tick-off:rgba(17,24,33,.17);
  --tick-hover:rgba(17,24,33,.36);
  --tick-done:rgba(var(--red-rgb),.42);
  --navbtn-bg:rgba(17,24,33,.02);
  --navbtn-hover-ink:var(--accent-ink);
  --feat-bg:rgba(17,24,33,.03);

  /* Dark screenshots / photos get a framed mat so they don't float on paper */
  --figure-bg:#e7ebf0;
  --figure-shadow:0 2px 6px rgba(17,24,33,.06),0 10px 24px rgba(17,24,33,.10);
  --tile-shadow:0 1px 3px rgba(17,24,33,.05),0 6px 16px rgba(17,24,33,.09);
  --dash-bg:#eaeef2;
  --award-ph-bg:#e7ebf0;
  --card-shadow:0 1px 3px rgba(17,24,33,.05),0 8px 20px rgba(17,24,33,.07);

  /* White logo / cert cards MUST carry a visible border on paper */
  --logo-card-bg:#ffffff;
  --logo-card-host-bg:#ffffff;
  --logo-card-border:rgba(17,24,33,.14);
  --logo-card-shadow:0 1px 3px rgba(17,24,33,.05),0 6px 16px rgba(17,24,33,.09);
  --cert-bg:#ffffff;
  /* --photo-cap-grad, --badge-bg, --on-photo* stay dark: they overlay photographs */
}

/* Photo-backed slides keep a dark photographic surface + white text in BOTH themes.
   Only the surrounding chrome (header / footer / progress) follows the active theme. */
#slide-hero,#slide-closing{
  --text:var(--on-photo);
  --text-2:var(--on-photo-2);
  --muted:var(--on-photo-muted);
  --muted-2:#6b7581;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  /* color inherits as a computed value, so headings that don't re-read var(--text)
     (e.g. .hero-title, .thanks) must inherit the light ink from here, not from body. */
  color:var(--on-photo);
}

/* Light theme swaps the accent to pure IKB (#002fa7), which vanishes on the dark
   facility photo behind the closing slide. Keep the dark-theme lifted accent there
   so "What we propose" (.pr-lead) and the accent dots stay legible in both themes. */
:root[data-theme="light"] #slide-closing{
  --red:#5577ff;
  --red-rgb:85,119,255;
  --accent-ink:#5577ff;
}

/* Smooth, cheap colour cross-fade — present only for ~340ms after a manual toggle,
   never at load (no FOUC) and never during slide navigation (.slide is excluded so
   its opacity/transform transitions are untouched). */
html.theme-transition,
html.theme-transition *:not(.slide),
html.theme-transition *:not(.slide)::before,
html.theme-transition *:not(.slide)::after{
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,
             fill .3s ease,stroke .3s ease,box-shadow .3s ease !important;
}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1,"ss01" 1;
  letter-spacing:.005em;
  transition:background-color .3s ease,color .3s ease;
}

@media (min-width:901px) and (orientation:landscape){
  :root.stage-fit{
    --edge:96px;
    --header-h:60px;
    --footer-h:52px;
  }
  :root.stage-fit #app{
    position:fixed;
    left:50%;
    top:50%;
    width:1920px;
    height:1080px;
    overflow:hidden;
    background:var(--bg);
    transform:translate(-50%,-50%) scale(var(--stage-scale,1));
    transform-origin:center center;
  }
  :root.stage-fit #app::before,
  :root.stage-fit #loader,
  :root.stage-fit #deck,
  :root.stage-fit .chrome{position:absolute}
  :root.stage-fit #app::before{inset:0}
}

/* Ambient background wash shared by all slides */
#app::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--ambient);
}

/* ============================================================
   Deck / slides
   ============================================================ */
#deck{position:fixed;inset:0;z-index:1;user-select:none;-webkit-user-select:none}
.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 2.6vh) var(--edge) calc(var(--footer-h) + 2.4vh);
  opacity:0;visibility:hidden;
  transform:translate3d(2.2%,0,0) scale(.994);
  transition:opacity .5s ease,transform .58s var(--ease),visibility 0s linear .58s;
  overflow:hidden;
}
.slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .6s var(--ease),visibility 0s}
.slide.exit-left{transform:translate3d(-2.2%,0,0) scale(.994)}
.slide-inner{width:100%;max-width:1520px;margin:0 auto;position:relative;z-index:2}
.slide.full{padding:0}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity .25s ease}
  .slide,.slide.is-active,.slide.exit-left{transform:none}
}

/* Reveal on activation */
[data-rise]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.slide.is-active [data-rise]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rise]{transition:opacity .3s ease;transform:none}}

/* ============================================================
   Chrome: header + footer
   ============================================================ */
.chrome{position:fixed;left:0;right:0;z-index:20;display:flex;align-items:center;
  height:var(--header-h);padding:0 var(--edge);pointer-events:none}
.chrome.top{top:0;border-bottom:1px solid var(--line);
  background:var(--grad-chrome-top);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chrome.bottom{bottom:0;height:var(--footer-h);border-top:1px solid var(--line);
  background:var(--grad-chrome-bottom);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chrome .spacer{flex:1}
.section-tag{font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.7em;min-width:0}
.section-tag .num{color:var(--accent-ink);font-weight:600}
.section-tag .sep{width:26px;height:1px;background:var(--line-2)}
.section-tag .label{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Brand wordmark */
.wordmark{display:flex;align-items:baseline;gap:.06em;font-family:var(--display);font-weight:700;
  letter-spacing:-.01em;line-height:1;user-select:none}
.wordmark .i{color:var(--red)}
.wordmark .rest{color:var(--text)}
.wordmark.sm{font-size:1.35rem}
.wordmark .tld{font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.22em;
  color:var(--muted);margin-left:.6em;text-transform:uppercase;align-self:center}

/* Footer nav */
.footer-inner{display:flex;align-items:center;width:100%;gap:1.4vw;pointer-events:auto}
.counter{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--text-2);
  letter-spacing:.04em;white-space:nowrap;min-width:66px}
.counter b{color:var(--accent-ink)}
.counter .tot{color:var(--muted)}
.ticks{flex:1;display:flex;align-items:center;gap:5px;justify-content:center;flex-wrap:nowrap}
.tick{height:3px;flex:1 1 auto;max-width:34px;min-width:6px;border-radius:2px;
  background:var(--tick-off);transition:background .3s ease,transform .3s ease;padding:0}
.tick:hover{background:var(--tick-hover)}
.tick.on{background:var(--red);transform:scaleY(1.7)}
.tick.done{background:var(--tick-done)}
.nav-btns{display:flex;align-items:center;gap:.5rem}
.nav-btns .hint{font-size:.68rem;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase;margin-right:.4rem}
.navbtn{width:34px;height:34px;border:1px solid var(--line-2);border-radius:8px;color:var(--text-2);
  display:grid;place-items:center;transition:.2s ease;background:var(--navbtn-bg)}
.navbtn:hover{border-color:var(--red);color:var(--navbtn-hover-ink);background:var(--red-soft)}
.navbtn svg{width:16px;height:16px}
.navbtn kbd{font-family:var(--sans);font-size:.72rem}
.navbtn:focus{outline:none}
.navbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.tick:focus{outline:none}
.tick:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Theme picker — segmented Light / Dark / System, matches the nav buttons */
.theme-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--navbtn-bg)}
.segbtn{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  color:var(--muted);border:1px solid transparent;background:none;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease}
.segbtn svg{width:15px;height:15px}
.segbtn:hover{color:var(--text-2)}
.segbtn.is-active{background:var(--red-soft);color:var(--accent-ink);border-color:var(--red-border)}
.segbtn:focus{outline:none}
.segbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* Panel cards gain a subtle lift in light mode (none in dark) */
.stat,.spec-card,.cap-card,.award,.phase,.resp-card,.flow-step,.strength,.mini,.dash,
.serve-card,.ba-card,.ba-metric,.band{
  box-shadow:var(--card-shadow)}

/* ============================================================
   Typography components
   ============================================================ */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-weight:500;font-size:.8rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--red);border-radius:2px}
.eyebrow.plain::before{display:none}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.04}
.h2{font-size:clamp(1.9rem,3.5vw,3.05rem);font-weight:700;line-height:1.05;letter-spacing:-.022em}
.h2 .accent{color:var(--red)}
.lead{font-size:clamp(1rem,1.28vw,1.24rem);line-height:1.6;color:var(--text-2);font-weight:400;max-width:62ch}
.kicker{font-size:.95rem;color:var(--muted);line-height:1.5}
.rule{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);border:0;margin:1.2rem 0}
.slide-head{margin-bottom:clamp(1rem,2.4vh,2rem)}
.slide-head .eyebrow{margin-bottom:.9rem}

/* ============================================================
   1 · HERO
   ============================================================ */
#hero-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.26;filter:saturate(.85) brightness(.7)}
.hero-veil{position:absolute;inset:0;z-index:1;background:var(--hero-veil)}
.hero-inner{position:relative;z-index:3;max-width:1180px}
.hero-brandplate{display:inline-flex;align-items:center;gap:.85rem;padding:.55rem .9rem .55rem .6rem;
  background:var(--brandplate);border-radius:12px;
  box-shadow:var(--brandplate-shadow),inset 0 1px 0 rgba(255,255,255,.7);margin-bottom:2rem}
.hero-brandplate img{height:44px;width:auto}
.hero-wordmark{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3vw,2.6rem);line-height:1}
.hero-title{font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,5.4vw,5rem);
  line-height:1.03;letter-spacing:-.03em;margin:.2rem 0 .5rem}
.hero-title .zh{font-family:var(--cjk);font-weight:600;font-size:.34em;color:var(--text-2);
  letter-spacing:.12em;display:block;margin-top:.55rem}
.acrostic{display:flex;flex-wrap:wrap;gap:.55rem .95rem;margin:1.6rem 0 1.4rem;align-items:center}
.acrostic .word{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.55vw,1.45rem);
  letter-spacing:-.01em;color:var(--text)}
.acrostic .word b{color:var(--red);font-weight:700}
.acrostic .dot{width:5px;height:5px;border-radius:50%;background:var(--muted-2)}
.hero-sub{font-size:clamp(1rem,1.3vw,1.25rem);color:var(--text-2);line-height:1.6;max-width:60ch}
.hero-greet{margin-top:2.1rem;font-size:.98rem;letter-spacing:.06em;color:var(--muted)}
.hero-greet .zh{font-family:var(--cjk)}
.hero-greet b{color:var(--text);font-weight:500}
.scroll-cue{position:absolute;bottom:calc(var(--footer-h) + 3vh);left:50%;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase}
.scroll-cue .mouse{width:20px;height:32px;border:1.5px solid var(--line-2);border-radius:11px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:var(--red);transform:translateX(-50%);animation:cue 1.6s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1;transform:translate(-50%,8px)}100%{opacity:0;transform:translate(-50%,10px)}}

/* ============================================================
   2 · STAT TILES
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.4vw,1.35rem);margin-top:1.4rem}
.stat{position:relative;background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:clamp(1.1rem,2vw,1.9rem);overflow:hidden;
  min-height:clamp(120px,17vh,190px);display:flex;flex-direction:column;justify-content:space-between}
.stat::before{content:"";position:absolute;left:0;top:clamp(1.1rem,2vw,1.9rem);bottom:clamp(1.1rem,2vw,1.9rem);
  width:3px;border-radius:3px;background:linear-gradient(180deg,var(--red),var(--red-fade))}
.stat .num{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,4vw,3.5rem);line-height:1;
  letter-spacing:-.03em;display:flex;align-items:baseline;gap:.12em}
.stat .num .unit{font-size:.44em;color:var(--red);font-weight:700;letter-spacing:0}
.stat .num .pre{font-size:.52em;color:var(--text-2);font-weight:600}
.stat .num.tw{font-size:clamp(1.5rem,2.6vw,2.35rem)}
.stat .cap{color:var(--text-2);font-size:clamp(.86rem,1vw,1.02rem);line-height:1.4;font-weight:500;margin-top:.3rem}
.stat .sub{color:var(--muted);font-size:.8rem;line-height:1.4;margin-top:.35rem}

/* ============================================================
   3 · TIMELINE
   ============================================================ */
.timeline{position:relative;margin-top:clamp(1.6rem,5vh,3.4rem);padding:0 1rem}
.timeline .axis{position:absolute;left:0;right:0;top:14px;height:2px;
  background:linear-gradient(90deg,transparent,var(--line-2) 6%,var(--line-2) 94%,transparent)}
.timeline .axis .fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--red);
  transition:width 1.1s var(--ease) .2s}
.slide.is-active .timeline .axis .fill{width:100%}
.tl-row{display:grid;grid-template-columns:repeat(8,1fr);gap:.6rem}
.tl-item{position:relative;padding-top:40px;text-align:center}
.tl-item .node{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:16px;height:16px;
  border-radius:50%;background:var(--bg);border:2px solid var(--line-2);z-index:2;transition:.4s ease}
.tl-item.key .node{border-color:var(--red);box-shadow:0 0 0 5px var(--red-soft)}
.slide.is-active .tl-item .node{border-color:var(--red)}
.tl-item .yr{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.5rem);color:var(--text);letter-spacing:-.02em}
.tl-item.key .yr{color:var(--red)}
.tl-item .ev{font-size:clamp(.76rem,.92vw,.92rem);color:var(--text-2);line-height:1.35;margin-top:.35rem}

/* ============================================================
   4 · CHART
   ============================================================ */
.chart-wrap{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.5rem}
.chart-note{display:flex;align-items:center;gap:.7rem;color:var(--text-2);font-size:1rem}
.chart-note .chip{display:inline-flex;align-items:center;gap:.5em;background:var(--red-soft);
  border:1px solid var(--red-border);color:var(--red-text);padding:.32em .7em;border-radius:999px;font-size:.82rem;font-weight:500}
.chart-note .chip .sw{width:10px;height:10px;border-radius:3px;background:var(--red)}
#chart{width:100%;height:clamp(280px,46vh,520px)}
#chart text{font-family:var(--sans);fill:var(--muted)}
#chart .axis-label{fill:var(--text-2);font-weight:500}
#chart .bar{fill:var(--bar)}
#chart .bar.hi{fill:var(--red)}
#chart .val{fill:var(--text-2);font-weight:700;font-size:15px}
#chart .val.hi{fill:var(--chart-val-hi)}
#chart .grid line{stroke:var(--grid-line)}
#chart .domain{stroke:var(--line-2)}
#chart .tick line{stroke:var(--line)}
/* CSS fallback bars */
.chart-fallback{display:flex;align-items:flex-end;gap:1.1%;height:clamp(280px,46vh,520px);
  padding:0 1%;position:relative}
.chart-fallback .cb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.chart-fallback .cb .bar{width:66%;background:var(--bar);border-radius:4px 4px 0 0;transition:height 1s var(--ease);
  max-height:86%;border-bottom:1px solid var(--line-2)}
.chart-fallback .cb.hi .bar{background:var(--red)}
.chart-fallback .cb .yr{font-size:.78rem;color:var(--muted);margin-top:8px;order:3}
.chart-fallback .cb .v{font-size:.82rem;color:var(--text-2);margin-bottom:6px;font-weight:700;order:1}
.chart-fallback .cb .bar{order:2}

/* ============================================================
   Photo cards / mosaics
   ============================================================ */
.figure{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--figure-bg);box-shadow:var(--figure-shadow)}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
/* Caption overlays the photograph — it stays a dark scrim + light ink in BOTH themes */
.figure .cap{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem .55rem;
  background:var(--photo-cap-grad);
  font-size:clamp(.72rem,.86vw,.86rem);color:var(--on-photo);font-weight:500;line-height:1.25;letter-spacing:.005em}
.figure .cap small{display:block;color:var(--on-photo-muted);font-weight:400;font-size:.82em;margin-top:1px}

/* Product tile (light-bg photos) */
.tile{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--tile-bg);aspect-ratio:1/1;box-shadow:var(--tile-shadow)}
.tile img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.tile.wide{aspect-ratio:16/10}
.tile .badge{position:absolute;left:.5rem;bottom:.5rem;background:var(--badge-bg);color:var(--badge-ink);
  font-size:.68rem;letter-spacing:.02em;padding:.28em .6em;border-radius:6px;backdrop-filter:blur(3px);font-weight:500}

/* Machine / capability card (photo + label + spec) */
.cap-grid{display:grid;gap:clamp(.7rem,1.2vw,1.15rem);margin-top:.4rem}
.cap-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:border-color .3s ease,transform .3s ease}
.cap-card .ph{aspect-ratio:16/10;background:var(--photo-pad-bg);overflow:hidden}
.cap-card .ph img{width:100%;height:100%;object-fit:cover}
.cap-card .bd{padding:.85rem 1rem 1rem}
.cap-card .t{font-family:var(--display);font-weight:600;font-size:clamp(.95rem,1.12vw,1.12rem);
  letter-spacing:-.01em;line-height:1.2;color:var(--text)}
.cap-card .s{font-size:clamp(.78rem,.9vw,.9rem);color:var(--muted);line-height:1.45;margin-top:.3rem}
.cap-card .qty{color:var(--accent-ink);font-weight:600}

/* text spec card (no photo) */
.spec-card{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:14px;padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.4rem}
.spec-card .n{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2vw,1.9rem);color:var(--red);
  line-height:1;letter-spacing:-.02em}
.spec-card .t{font-weight:600;font-size:1rem;color:var(--text)}
.spec-card .s{font-size:.85rem;color:var(--muted);line-height:1.45}

/* Facility layout */
.fac-grid{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;
  gap:clamp(.7rem,1.1vw,1rem);height:clamp(340px,58vh,560px);margin-top:.4rem}
.fac-grid .hero-fig{grid-row:1/3}
.fac-grid .figure{height:100%}
.fac-insets{grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;gap:clamp(.7rem,1.1vw,1rem)}
.fac-insets .figure{height:100%}

/* generic auto-fit photo grid */
.photo-grid{display:grid;gap:clamp(.65rem,1vw,1rem)}
.photo-grid .figure{aspect-ratio:16/10}

/* Self-built machines layout (slide 24) */
.sb-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:clamp(.65rem,1vw,1rem);height:clamp(340px,56vh,560px);margin-top:.4rem}
.sb-grid .sb-hero{grid-row:1/3}
.sb-grid .sb-wide{grid-column:2/4}
.sb-grid .figure{height:100%}
.sb-grid .sb-hero img{background:#fff;object-fit:contain}

/* mosaic (products) */
.mosaic{display:grid;gap:clamp(.55rem,.9vw,.85rem)}
.mosaic .tile{aspect-ratio:1/1}

/* ============================================================
   Customers & recognition
   ============================================================ */
.logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.55rem,.9vw,.9rem);
  grid-auto-rows:clamp(82px,11vh,120px)}
/* 9-logo wall: 5 on top, 4 centred below (each card spans 2 of 10 columns;
   the second row starts one half-card in, so its 4 cards sit centred). */
.logo-wall.r54{grid-template-columns:repeat(10,1fr)}
.logo-wall.r54 .logo-card{grid-column:span 2}
.logo-wall.r54 .logo-card.row2-start{grid-column:2/span 2}
.logo-card{position:relative;background:var(--logo-card-bg);border-radius:12px;height:100%;overflow:hidden;
  border:1px solid var(--logo-card-border);box-shadow:var(--logo-card-shadow)}
/* Absolutely-positioned img: containing block is the card's (definite) padding box,
   so width/height:100% resolve reliably and object-fit:contain never clips. */
.logo-card img{position:absolute;inset:0;width:100%;height:100%;padding:6% 9%;object-fit:contain}
.logo-card.host{background:var(--logo-card-host-bg);box-shadow:var(--logo-host-shadow)}
.logo-card.host .star{position:absolute;top:6px;right:8px;color:var(--red);z-index:2}
.logo-card.host .star svg{width:15px;height:15px}
.reco{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1rem,2.4vw,2.2rem);margin-top:clamp(.9rem,2.2vh,1.5rem)}
.reco h3.sub{font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.award{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.award .ph{aspect-ratio:4/3;background:var(--award-ph-bg);overflow:hidden}
.award .ph img{width:100%;height:100%;object-fit:cover}
.award .bd{padding:.55rem .7rem .6rem}
.award .t{font-size:.82rem;font-weight:600;color:var(--text);line-height:1.2}
.award .s{font-size:.72rem;color:var(--muted);margin-top:.15rem;line-height:1.3}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.cert{background:var(--cert-bg);border:1px solid var(--logo-card-border);border-radius:9px;overflow:hidden;
  height:clamp(118px,17.5vh,178px);display:grid;place-items:center;padding:7px}
.cert img{width:100%;height:100%;object-fit:contain}
.cert-row{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.cert-chip{font-size:.74rem;font-weight:500;color:var(--text-2);border:1px solid var(--line-2);
  border-radius:999px;padding:.3em .8em;letter-spacing:.02em}
.cert-chip b{color:var(--text)}

/* ============================================================
   16 · Smart factory flow
   ============================================================ */
.flow{display:flex;align-items:stretch;gap:.5rem;margin:.4rem 0 1.1rem}
.flow-step{flex:1;position:relative;background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:12px;padding:1rem .9rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.55rem}
.flow-step .ic{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:var(--red-soft);color:var(--red-hi);border:1px solid var(--red-border)}
.flow-step .ic svg{width:20px;height:20px}
.flow-step .t{font-weight:600;font-size:clamp(.86rem,1.05vw,1.05rem);color:var(--text);letter-spacing:-.01em}
.flow-step .s{font-size:.76rem;color:var(--muted);line-height:1.35}
.flow-arrow{align-self:center;color:var(--muted-2);flex:0 0 auto;display:grid;place-items:center}
.flow-arrow svg{width:20px;height:20px}
.flow-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1rem}
.feat{display:flex;gap:.6rem;align-items:flex-start;background:var(--feat-bg);
  border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.feat .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:.45rem}
.feat .tx{font-size:.84rem;color:var(--text-2);line-height:1.35}
.dash-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.dash{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--dash-bg)}
.dash .ph{aspect-ratio:16/10;overflow:hidden}
.dash .ph img{width:100%;height:100%;object-fit:cover}
.dash .lb{padding:.5rem .65rem;font-size:.74rem;color:var(--text-2);line-height:1.3}
.dash .lb b{color:var(--text);font-weight:600;display:block;font-size:.8rem}

/* ============================================================
   17 · closed-loop
   ============================================================ */
.cl-grid{display:grid;grid-template-columns:1.1fr 1.1fr .9fr;gap:clamp(.8rem,1.4vw,1.2rem);margin-top:.3rem}
.cl-col{display:flex;flex-direction:column;gap:clamp(.7rem,1.1vw,1rem)}
.strengths{display:flex;flex-direction:column;gap:.7rem}
.strength{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem;display:flex;gap:.8rem;align-items:flex-start}
.strength .no{font-family:var(--display);font-weight:700;color:var(--red);font-size:1.3rem;line-height:1;flex:0 0 auto}
.strength .t{font-weight:600;font-size:.95rem;color:var(--text)}
.strength .s{font-size:.79rem;color:var(--muted);line-height:1.4;margin-top:.2rem}

/* ============================================================
   18 · roadmap
   ============================================================ */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.5rem);margin-top:1rem}
.phase{position:relative;background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:clamp(1.1rem,1.9vw,1.7rem);display:flex;flex-direction:column;overflow:hidden}
.phase::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--red),transparent)}
.phase.p2::before{opacity:.7}.phase.p3::before{opacity:.45}
.phase .ph-h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.2rem}
.phase .pnum{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.16em;color:var(--accent-ink);text-transform:uppercase}
.phase .time{font-size:.76rem;color:var(--muted);letter-spacing:.04em}
.phase .pt{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.55rem);
  line-height:1.12;letter-spacing:-.02em;margin:.35rem 0 .7rem}
.phase .pd{font-size:.86rem;color:var(--text-2);line-height:1.5;margin-bottom:1rem}
.phase .targets{margin-top:auto;display:flex;flex-direction:column;gap:.55rem;
  border-top:1px solid var(--line);padding-top:.9rem}
.phase .tg{display:flex;align-items:baseline;gap:.6rem}
.phase .tg .v{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--text);
  letter-spacing:-.02em;min-width:3.6em;text-align:right}
.phase .tg .v.up{color:var(--up)}.phase .tg .v.down{color:var(--down)}
.phase .tg .l{font-size:.82rem;color:var(--muted);line-height:1.3}

/* ============================================================
   19 · responsibility
   ============================================================ */
.resp{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.2rem);margin-top:1rem}
.resp-card{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:16px;padding:clamp(1.1rem,1.8vw,1.6rem);display:flex;flex-direction:column;gap:.7rem;min-height:clamp(200px,34vh,320px)}
.resp-card .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red-hi);border:1px solid var(--red-border)}
.resp-card .ic svg{width:23px;height:23px}
.resp-card .t{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.4vw,1.3rem);letter-spacing:-.02em}
.resp-card .s{font-size:.86rem;color:var(--muted);line-height:1.5}

/* ============================================================
   20 · closing
   ============================================================ */
.close-veil{position:absolute;inset:0;z-index:1;background:var(--close-veil)}
.close-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 62%;opacity:.5}
.close-inner{position:relative;z-index:3;text-align:center;max-width:900px;margin:0 auto}
.thanks{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.03em}
.thanks .zh{font-family:var(--cjk)}
.thanks .accent{color:var(--red)}
.close-sub{font-size:clamp(1rem,1.3vw,1.25rem);color:var(--text-2);margin-top:1.3rem;line-height:1.6}
.close-brand{display:inline-flex;align-items:center;gap:.9rem;margin-top:2.2rem;padding:.5rem .85rem .5rem .55rem;
  background:var(--brandplate);border-radius:11px;box-shadow:var(--brandplate-shadow)}
.close-brand img{height:38px}
.close-contact{margin-top:1.8rem;font-size:.9rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.close-contact a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}

/* Two-column hero-content layout used on several slides */
.split{display:grid;grid-template-columns:0.92fr 1.25fr;gap:clamp(1.4rem,3vw,3rem);align-items:center}
.split.rev{grid-template-columns:1.25fr .92fr}
.headline-note{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.35vw,1.35rem);
  color:var(--text);line-height:1.35;letter-spacing:-.01em;margin-top:1rem;padding-left:1rem;border-left:2px solid var(--red)}

/* Compact capability / metrology mini-cards */
.mini-grid{display:grid;gap:clamp(.55rem,.9vw,.85rem)}
.mini{display:flex;align-items:center;gap:.75rem;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:.6rem .75rem;transition:border-color .3s ease;min-width:0}
.mini:hover{border-color:var(--line-2)}
.mini .th{flex:0 0 auto;width:78px;height:56px;border-radius:9px;overflow:hidden;
  background:var(--thumb-bg)}
.mini .th img{width:100%;height:100%;object-fit:cover}
.mini .mt{min-width:0}
.mini .mt .t{font-weight:600;font-size:clamp(.86rem,1vw,1rem);color:var(--text);line-height:1.2;letter-spacing:-.01em;
  overflow-wrap:break-word}  /* emergency only: fires solely when a word exceeds the column */
.mini .mt .s{font-size:.76rem;color:var(--muted);line-height:1.3;margin-top:.15rem;overflow-wrap:break-word}
.mini .qty{color:var(--accent-ink);font-weight:700}

/* Product group rows (slide 13) */
.pgroup{margin-top:clamp(.4rem,1.1vh,.85rem)}
.pgroup .glabel{display:flex;align-items:center;gap:.8rem;margin-bottom:.45rem}
.pgroup .glabel .gt{font-family:var(--display);font-weight:600;font-size:clamp(.92rem,1.15vw,1.12rem);
  color:var(--text);letter-spacing:-.01em;white-space:nowrap}
.pgroup .glabel .gs{font-size:.78rem;color:var(--muted);line-height:1.3;white-space:nowrap}
.pgroup .glabel .gl{flex:1;height:1px;background:var(--line)}
.pgroup .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,.85vw,.8rem)}
.pgroup .row4 .tile{aspect-ratio:16/9}

/* Sensor bento (slide 12) */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:clamp(.5rem,.85vw,.8rem)}
.bento .tile{aspect-ratio:auto;height:100%}
.bento .big{grid-column:span 2;grid-row:span 2}

/* Copy panel (used in split layouts) */
.copy-panel{display:flex;flex-direction:column;gap:1rem}
.copy-panel .lead{max-width:40ch}
.tagline-badge{display:inline-flex;align-items:center;gap:.55em;align-self:flex-start;
  background:var(--red-soft);border:1px solid var(--red-border);border-radius:999px;
  padding:.4em .9em;font-size:.82rem;font-weight:600;color:var(--red-text);letter-spacing:.01em}
.tagline-badge svg{width:14px;height:14px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.chip-line{font-size:.8rem;font-weight:500;color:var(--text-2);border:1px solid var(--line-2);
  border-radius:999px;padding:.34em .8em;letter-spacing:.01em}
.bullets{display:flex;flex-direction:column;gap:.55rem}
.bullets li{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;color:var(--text-2);line-height:1.45}
.bullets li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:2px;background:var(--red);margin-top:.42rem}

/* ============================================================
   3 · HOW WE SERVE YOU  (thesis / commitment cards)
   ============================================================ */
.serve{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.5rem);margin-top:clamp(.6rem,1.5vh,1.2rem)}
.serve-card{position:relative;background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:clamp(1.2rem,1.9vw,1.75rem);
  display:flex;flex-direction:column;gap:.8rem;min-height:clamp(200px,32vh,300px);overflow:hidden}
.serve-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--red),transparent)}
.serve-card:nth-child(2)::before{opacity:.7}.serve-card:nth-child(3)::before{opacity:.45}
.serve-card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red-hi);border:1px solid var(--red-border);margin-bottom:.2rem}
.serve-card .ic svg{width:24px;height:24px}
.serve-card .t{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.5vw,1.42rem);
  letter-spacing:-.02em;line-height:1.14;color:var(--text)}
.serve-card .s{font-size:clamp(.86rem,1vw,1.02rem);color:var(--text-2);line-height:1.55}

/* ============================================================
   4 · CASE · before / after  (+ inline SVG flow, metrics)
   ============================================================ */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.5vw,1.3rem)}
.ba-card{position:relative;background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:clamp(.9rem,1.5vw,1.3rem);
  display:flex;flex-direction:column;gap:.7rem;overflow:hidden}
.ba-card.after{border-color:var(--red-border)}
.ba-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--line-2)}
.ba-card.after::before{background:linear-gradient(90deg,var(--red),transparent)}
.ba-h{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ba-h .tag{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:.28em .75em}
.ba-h .tag.on{color:var(--accent-ink);background:var(--red-soft);border-color:var(--red-border)}
.ba-h .ttl{font-family:var(--display);font-weight:600;font-size:clamp(.88rem,1.02vw,1.06rem);
  color:var(--text);letter-spacing:-.01em;line-height:1.2}
.ba-diagram{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem}
.ba-diagram svg{width:100%;height:auto;display:block}
.ba-list{display:grid;gap:.36rem}
.ba-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:clamp(.82rem,.95vw,.95rem);color:var(--text-2);line-height:1.4}
.ba-list li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:var(--muted-2);margin-top:.45em}
.ba-list.good li::before{background:var(--red)}
/* Diagram elements — every fill/stroke routes through a token, so it tracks the theme */
.dg-stock{fill:var(--steel);opacity:.5}
.dg-part{fill:var(--panel-3);stroke:var(--text-2);stroke-width:1.4}
.dg-blank{fill:var(--red-soft);stroke:var(--red);stroke-width:1.4}
.dg-coil{fill:none;stroke:var(--steel);stroke-width:1.5}
.dg-hole{fill:var(--bg-2);stroke:var(--text-2);stroke-width:1.2}
.dg-chip{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
.dg-arrow{fill:none;stroke:var(--muted-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dg-label{fill:var(--muted);font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
/* verified numbers */
.ba-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.55rem,1vw,.95rem);margin-top:clamp(.7rem,1.6vh,1.15rem)}
.ba-metric{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;
  display:flex;flex-direction:column;gap:.32rem;justify-content:space-between}
.ba-metric .ml{font-size:.72rem;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;font-weight:500;line-height:1.25}
.ba-metric .mv{display:flex;align-items:baseline;gap:.3em;font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.ba-metric .mv .was{font-size:1rem;color:var(--muted-2);font-weight:600}
.ba-metric .mv .arw{font-size:.9rem;color:var(--muted-2)}
.ba-metric .mv .now{font-size:clamp(1.3rem,1.9vw,1.7rem);color:var(--text)}
.ba-metric .mv .u{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:0}
.ba-metric .ms{font-size:.71rem;color:var(--muted);line-height:1.2}

/* ============================================================
   5 · CASE · the next one  (airy bridge)
   ============================================================ */
.next-wrap{display:flex;flex-direction:column;gap:clamp(1.1rem,2.8vh,2.1rem);max-width:1060px;margin-top:.5rem}
.next-lead{max-width:none;font-size:clamp(1.05rem,1.5vw,1.42rem);line-height:1.65;color:var(--text-2)}
.next-visual{display:flex;flex-direction:column;gap:.7rem;max-width:780px}
.nv-row{display:grid;grid-template-columns:clamp(150px,15vw,210px) 1fr;align-items:center;gap:1rem}
.nv-lab{font-size:.88rem;color:var(--muted);font-weight:500;text-align:right;letter-spacing:.01em}
.nv-track{display:flex;gap:.4rem;align-items:center}
.nv-bar{height:36px;border-radius:9px;display:flex;align-items:center;padding:0 .8rem;font-size:.82rem;
  font-weight:500;white-space:nowrap}
.nv-bar b{font-family:var(--display);font-weight:700}
.nv-bar.full{width:100%;background:linear-gradient(90deg,var(--panel-3),var(--panel-2));border:1px solid var(--line-2);color:var(--text-2)}
.nv-bar.form{flex:0 0 30%;background:var(--red-soft);border:1px solid var(--red-border);color:var(--red-text)}
.nv-bar.mach{flex:0 0 20%;background:linear-gradient(90deg,var(--panel-3),var(--panel-2));border:1px solid var(--line-2);color:var(--text-2)}
.nv-foot{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.15rem;justify-content:flex-end}
.nv-chip{font-size:.82rem;font-weight:600;color:var(--red-text);background:var(--red-soft);
  border:1px solid var(--red-border);border-radius:999px;padding:.36em .9em}
.nv-chip.ghost{color:var(--text-2);background:transparent;border-color:var(--line-2)}
.next-bridge{margin-top:.2rem;max-width:940px}

/* ============================================================
   21 · INVESTING AHEAD  (maturity bands)
   ============================================================ */
.invest{display:flex;flex-direction:column;gap:clamp(.7rem,1.5vh,1.1rem);margin-top:.5rem}
.band{position:relative;display:grid;grid-template-columns:clamp(150px,15vw,220px) 1fr;
  gap:clamp(1rem,2.4vw,2.2rem);background:linear-gradient(120deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;
  padding:clamp(1rem,1.7vw,1.5rem) clamp(1.1rem,2vw,1.7rem);overflow:hidden}
.band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.band.b2::before{opacity:.7}.band.b3::before{opacity:.45}
.band-tag{display:flex;align-items:flex-start;padding-top:.1rem}
.band-tag .pnum{font-family:var(--display);font-weight:700;font-size:clamp(.9rem,1.15vw,1.14rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);line-height:1.2}
.band-body{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.band-txt{font-size:clamp(.9rem,1.12vw,1.1rem);color:var(--text-2);line-height:1.55}
.band-metric{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.band-metric .mv{display:inline-flex;align-items:baseline;gap:.3em;font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.band-metric .mv .was{font-size:1rem;color:var(--muted-2);font-weight:600}
.band-metric .mv .arw{color:var(--muted-2);font-size:.9rem}
.band-metric .mv .now{font-size:clamp(1.3rem,1.8vw,1.6rem);color:var(--text)}
.band-metric .ml{font-size:.8rem;color:var(--muted);letter-spacing:.01em}

/* ============================================================
   23 · CLOSING · what we propose
   ============================================================ */
.propose{margin-top:clamp(1.3rem,3vh,2.1rem);display:flex;flex-direction:column;align-items:center;gap:.7rem}
.propose .pr-label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.propose .pr-items{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem 1.3rem}
.propose .pr-items span{position:relative;font-size:clamp(.82rem,1vw,.95rem);color:var(--text-2);line-height:1.4}
.propose .pr-items span+span::before{content:"";position:absolute;left:-.68rem;top:.2em;bottom:.2em;width:1px;background:var(--line-2)}

/* CDN status (dev only, hidden) */
#cdn-flags{display:none}

/* ============================================================
   Loader
   ============================================================ */
#loader{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;place-items:center;
  transition:opacity .5s ease;color:var(--muted)}
#loader.hide{opacity:0;pointer-events:none}
#loader .lw{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.02em}
#loader .bar{width:180px;height:2px;background:var(--line-2);margin-top:1.2rem;border-radius:2px;overflow:hidden}
#loader .bar i{display:block;height:100%;width:40%;background:var(--red);animation:load 1s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .logo-wall{grid-template-columns:repeat(5,1fr)}
  /* 9-logo wall collapses to a tidy 3×3 */
  .logo-wall.r54{grid-template-columns:repeat(6,1fr)}
  .logo-wall.r54 .logo-card.row2-start{grid-column:auto/span 2}
}
@media (max-width:900px){
  :root{--edge:4vw;--header-h:52px;--footer-h:48px}
  .split,.split.rev,.reco{grid-template-columns:1fr}
  .fac-grid{grid-template-columns:1fr;height:auto}
  .fac-grid .hero-fig{grid-row:auto;aspect-ratio:16/9}
  .fac-insets{grid-row:auto;grid-template-rows:none;grid-template-columns:repeat(2,1fr)}
  .sb-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto}
  .sb-grid .sb-hero{grid-row:auto;grid-column:1/3;aspect-ratio:16/10}
  .sb-grid .sb-wide{grid-column:auto}
  .sb-grid .figure{aspect-ratio:16/10;height:auto}
  .road,.resp,.flow-feats,.dash-row{grid-template-columns:repeat(2,1fr)}
  .flow{flex-direction:column}.flow-arrow{transform:rotate(90deg)}
  .tl-row{grid-template-columns:repeat(2,1fr);gap:1rem}.timeline .axis{display:none}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .cl-grid{grid-template-columns:1fr}
  .nav-btns .hint{display:none}
  .serve,.ba{grid-template-columns:1fr}
  .ba-metrics{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:1fr;gap:.5rem}
  .nv-row{grid-template-columns:1fr;gap:.35rem}.nv-lab{text-align:left}
}
@media (max-height:720px){
  :root{--header-h:50px;--footer-h:44px}
  .slide{padding-top:calc(var(--header-h) + 1.6vh);padding-bottom:calc(var(--footer-h) + 1.4vh)}
}

/* ============================================================
   v4 · Language control (segmented, matches theme picker)
   ============================================================ */
.lang-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--navbtn-bg)}
.lang-seg .segbtn{font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1}
.lang-seg .segbtn.zh-glyph{font-family:var(--cjk);font-weight:600;font-size:1rem}

/* ============================================================
   v4 · CJK / language shaping — slightly looser leading, no
   Latin-style negative tracking on Chinese runs.
   ============================================================ */
:root[data-lang="zh"] body{letter-spacing:0;line-height:1.6}
:root[data-lang="zh"] .h2{letter-spacing:0;line-height:1.26}
:root[data-lang="zh"] .hero-title{letter-spacing:.01em;line-height:1.22}
:root[data-lang="zh"] .thanks{letter-spacing:.01em;line-height:1.24}
:root[data-lang="zh"] .lead,
:root[data-lang="zh"] .next-lead,
:root[data-lang="zh"] .band-txt,
:root[data-lang="zh"] .mtl-txt,
:root[data-lang="zh"] .serve-card .s,
:root[data-lang="zh"] .resp-card .s,
:root[data-lang="zh"] .cap-card .s,
:root[data-lang="zh"] .pf-txt,
:root[data-lang="zh"] .strength .s{line-height:1.75}
:root[data-lang="zh"] .eyebrow,
:root[data-lang="zh"] .section-tag,
:root[data-lang="zh"] .mtl-tag,
:root[data-lang="zh"] .arc-mat,
:root[data-lang="zh"] .pf-tag,
:root[data-lang="zh"] .hero-cobrand{letter-spacing:.08em}

/* ============================================================
   v4 · Slide 3 — commitment cards gain a small photo banner
   ============================================================ */
.serve-card{gap:.65rem}
.serve-ph{width:100%;height:clamp(62px,8vh,96px);border-radius:10px;overflow:hidden;
  background:var(--photo-pad-bg);border:1px solid var(--line);margin-bottom:.1rem}
.serve-ph img{width:100%;height:100%;object-fit:cover}
.serve-card .ic{width:42px;height:42px;margin-bottom:0}
.serve-card .ic svg{width:22px;height:22px}

/* ============================================================
   v4 · Slide 4 — photo-anchored before/after flow + line-art
   ============================================================ */
.caseflow{display:flex;align-items:flex-start;gap:.3rem;background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:.6rem .5rem .55rem}
.cf-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.cf-ph,.cf-ic{width:100%;max-width:104px;aspect-ratio:4/3;border-radius:8px}
.cf-ph{overflow:hidden;background:var(--photo-pad-bg);border:1px solid var(--line-2)}
.cf-ph img{width:100%;height:100%;object-fit:cover}
.cf-ic{display:grid;place-items:center;background:var(--panel-3);border:1px solid var(--line)}
.cf-ic svg{width:82%;height:auto}
.cf-lb{font-size:clamp(.68rem,.86vw,.8rem);color:var(--text-2);font-weight:600;
  text-align:center;line-height:1.2;letter-spacing:.01em}
.cf-arw{flex:0 0 auto;color:var(--muted-2);display:grid;place-items:center;padding-top:1.4rem}
.cf-arw svg{width:16px;height:16px}
/* precision engineering-drawing line-art — uniform strokes, token colours */
.dl-s{stroke:var(--text-2);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dl-w{stroke:var(--steel);stroke-width:1.8;fill:none;stroke-linecap:round}
.dl-t{fill:var(--muted);stroke:none}
.dl-r{stroke:var(--red);stroke-width:1.7;fill:none;stroke-linecap:round}
.dl-c{stroke:var(--muted-2);stroke-width:1.5;fill:none;stroke-linecap:round}
.dl-h{fill:var(--bg-2);stroke:var(--text-2);stroke-width:1.4}
.dl-blank{fill:var(--red-soft);stroke:var(--red);stroke-width:1.9}
.dl-hh{fill:var(--bg-2);stroke:var(--red);stroke-width:1.5}
/* engineering profile art — sleeve 234756 route + case-flow silhouettes */
.dl-p{fill:var(--bg-2);stroke:var(--text-2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.dl-cl{stroke:var(--muted-2);stroke-width:1;fill:none;stroke-linecap:butt;stroke-dasharray:8 4 2 4}
.dl-clsm{stroke:var(--muted-2);stroke-width:.9;fill:none;stroke-linecap:butt;stroke-dasharray:3 1.8}
.dl-weld{stroke:var(--red);stroke-width:1.6;fill:none;stroke-linecap:round}
.dl-glow{fill:var(--red-soft);stroke:none}

/* ---- slide 6 · laser-weld strip (refined lathe-style rendering) ---- */
.wv{width:100%;height:auto;display:block}
.wv-g1{stop-color:var(--wv1)}
.wv-g2{stop-color:var(--wv2)}
.wv-g3{stop-color:var(--wv3)}
.wv-g4{stop-color:var(--wv4)}
.wv-g5{stop-color:var(--wv5)}
.wv-o{fill:none;stroke:var(--text-2);stroke-width:1.7;stroke-linejoin:round}
.wv-th{fill:none;stroke:var(--wv-th);stroke-width:1.1;opacity:.42}
.pf-art svg .wv-th{vector-effect:none}    /* let helix lines scale with the part — stays fine, no moiré */
.wv-seam{stroke:var(--red);stroke-width:1.4;opacity:.9}
.wv-hl{stroke:var(--red);stroke-width:1;opacity:.5}
.wv-beam{stroke:var(--red);fill:none}
.wv-spot{fill:var(--red)}
.wv-core{fill:var(--wv-core)}
.wv-arw{stroke:var(--muted-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wv-dim{stroke:var(--muted-2);stroke-width:1;fill:none;opacity:.65}
.wv-dt{fill:var(--muted);font-family:'Inter','iCNC CJK',system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.05em}
.pf-art.weld{flex-direction:column;align-items:stretch;justify-content:center;gap:.7rem;
  padding:clamp(.9rem,1.6vw,1.4rem) clamp(.55rem,1.1vw,1rem)}
.wv-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;text-align:center}
.wv-labels .cf-lb{font-size:clamp(.74rem,.94vw,.9rem)}
/* keep the strip stretched (not shrink-wrapped) under the mobile / stage-fit
   centring rules that target the generic .pf-art */
.pf-panel.propose > .pf-art.weld,
:root.stage-fit .pf-panel.propose > .pf-art.weld{align-items:stretch;justify-content:center;flex:1 1 auto}

/* KPI tiles — quiet before→after two-bar comparison under the number */
.mbar{display:flex;flex-direction:column;gap:3px;margin-top:.15rem}
.mb{height:5px;border-radius:3px;width:var(--w,100%);min-width:5px}
.mb.was{background:var(--steel);opacity:.5}
.mb.now{background:var(--red)}

/* ============================================================
   v4 · EtherCAT G badge + ~6 kHz sibling (typographic only)
   ============================================================ */
.etc-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--display);
  font-weight:700;font-size:.78rem;letter-spacing:.02em;color:var(--etc);
  background:var(--etc-soft);border:1px solid var(--etc-border);border-radius:8px;
  padding:.3em .55em .3em .6em;white-space:nowrap}
.etc-badge .etc-g{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;
  border-radius:5px;background:var(--etc);color:#fff;font-weight:800;font-size:.92em}
.etc-badge.alt{font-weight:600;letter-spacing:.01em}
/* Dark theme: deepen the G-tile fill (keep --etc itself for typographic uses) —
   #ff2f9e under white text was ~3.4:1; #e0007a restores AA (~4.7:1). */
:root[data-theme="dark"] .etc-badge .etc-g{background:#e0007a}

/* Official EtherCAT G logo chip (replaces the typographic badge) —
   two theme-matched renderings of ETG's own vector art */
.etc-logo{display:inline-flex;align-items:center;background:var(--etc-soft);
  border:1px solid var(--etc-border);border-radius:8px;padding:.42em .7em;white-space:nowrap}
.etc-logo img{height:20px;width:auto;display:block}
.etc-logo .lg-light{display:none}
:root[data-theme="light"] .etc-logo .lg-dark{display:none}
:root[data-theme="light"] .etc-logo .lg-light{display:block}

/* ============================================================
   v4 · Slide 21 — maturity timeline (nodes + connector + cards)
   ============================================================ */
.mtl{position:relative;margin-top:clamp(.5rem,1.4vh,1rem)}
.mtl-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.7rem);
  align-items:start;position:relative}
.mtl-track::before{content:"";position:absolute;left:16.6%;right:16.6%;top:8px;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--red),var(--red) 40%,var(--steel));opacity:.55;border-radius:2px}
.mtl-band{position:relative;padding-top:26px}
.mtl-node{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:15px;height:15px;
  border-radius:50%;background:var(--bg);border:2px solid var(--red);z-index:2;box-shadow:0 0 0 4px var(--red-soft)}
.mtl-band.b2 .mtl-node{box-shadow:0 0 0 4px rgba(230,0,126,.12);border-color:var(--etc)}
.mtl-band.b3 .mtl-node{border-color:var(--steel);box-shadow:0 0 0 4px rgba(91,112,133,.16)}
.mtl-card{background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:16px;padding:clamp(1rem,1.6vw,1.4rem);display:flex;flex-direction:column;gap:.6rem;
  box-shadow:var(--card-shadow);overflow:hidden}
.mtl-h{display:flex;align-items:center;gap:.6rem}
.mtl-ic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red-hi);border:1px solid var(--red-border)}
.mtl-band.b2 .mtl-ic{background:var(--etc-soft);color:var(--etc);border-color:var(--etc-border)}
.mtl-ic svg{width:19px;height:19px}
.mtl-tag{font-family:var(--display);font-weight:700;font-size:clamp(.9rem,1.1vw,1.14rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);line-height:1.15}
.mtl-band.b2 .mtl-tag{color:var(--etc)}
.mtl-txt{font-size:clamp(.86rem,1.02vw,1.04rem);color:var(--text-2);line-height:1.52}
.mtl-metric{display:flex;flex-direction:column;gap:.05rem}
.mtl-metric .mv{font-family:var(--display);font-weight:700;letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:.28em}
.mtl-metric .was{font-size:1rem;color:var(--muted-2);font-weight:600}
.mtl-metric .arw{color:var(--muted-2);font-size:.9rem}
.mtl-metric .now{font-size:clamp(1.3rem,1.7vw,1.6rem);color:var(--text)}
.mtl-metric .ml{font-size:.78rem;color:var(--muted);line-height:1.3}
.mtl-photo{aspect-ratio:16/10;max-height:190px;margin-top:.15rem}
.mtl-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.05rem}
.mtl-chip{font-size:.76rem;font-weight:500;color:var(--text-2);border:1px solid var(--line-2);
  border-radius:999px;padding:.3em .75em;line-height:1.3}
.mtl-chip.good{color:var(--red-text);background:var(--red-soft);border-color:var(--red-border);font-weight:600}

/* ============================================================
   PF · Hero co-brand (discreet)
   ============================================================ */
.hero-cobrand{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.5rem;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.hero-cobrand .pf-chip{display:inline-flex;align-items:center;background:#fff;border-radius:6px;
  padding:.34em .5em;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.hero-cobrand .pf-chip img{height:15px;width:auto;display:block}
.hero-cobrand .pf-place{color:var(--text-2)}

/* ============================================================
   PF · Slide 3 lever tags
   ============================================================ */
.serve-top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.serve-lever{display:inline-flex;font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.02em;border-radius:999px;padding:.3em .75em;line-height:1.2;white-space:nowrap}
.serve-lever.l1{color:var(--red-text);background:var(--red-soft);border:1px solid var(--red-border)}
.serve-lever.l2{color:var(--text-2);background:transparent;border:1px solid var(--line-2)}

/* ============================================================
   PF · Trilogy overview arc (three connected maturity stages)
   ============================================================ */
.arc{position:relative;margin-top:clamp(.5rem,1.4vh,1rem)}
.arc-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.7rem);
  align-items:start;position:relative}
/* connector rail: mature (blue) → trial (magenta) → proposed (steel) */
.arc-track::before{content:"";position:absolute;left:16.6%;right:16.6%;top:8px;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--red),var(--etc) 55%,var(--steel));opacity:.6;border-radius:2px}
.arc-stage{position:relative;padding-top:26px}
.arc-node{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:15px;height:15px;
  border-radius:50%;background:var(--bg);border:2px solid var(--red);z-index:2;box-shadow:0 0 0 4px var(--red-soft)}
.arc-stage.s2 .arc-node{border-color:var(--etc);box-shadow:0 0 0 4px var(--etc-soft)}
.arc-stage.s3 .arc-node{border-color:var(--steel);box-shadow:0 0 0 4px rgba(91,112,133,.16)}
.arc-card{background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:16px;padding:clamp(.95rem,1.5vw,1.35rem);display:flex;flex-direction:column;
  gap:.55rem;box-shadow:var(--card-shadow);overflow:hidden}
.arc-stage.s3 .arc-card{border-style:dashed;border-color:var(--line-2)}
.arc-h{display:flex;align-items:center;gap:.5rem}
.arc-no{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--accent-ink);line-height:1}
.arc-stage.s2 .arc-no{color:var(--etc)}
.arc-stage.s3 .arc-no{color:var(--steel)}
.arc-mat{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink)}
.arc-stage.s2 .arc-mat{color:var(--etc)}
.arc-stage.s3 .arc-mat{color:var(--muted)}
.arc-part{display:flex;flex-direction:column;gap:.05rem}
.arc-part .pn-name{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.35rem);
  letter-spacing:-.02em;color:var(--text);line-height:1.12}
.pn-id{font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.04em;color:var(--muted-2)}
.arc-viz{border-radius:10px;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;margin-top:.1rem}
.arc-viz.photo{background:var(--photo-pad-bg);border:1px solid var(--line-2)}
.arc-viz.photo img{width:100%;height:100%;object-fit:cover}
.arc-viz.art{background:var(--bg-2);border:1px solid var(--line)}
.arc-viz.art svg{width:56%;height:auto}
/* crisp, uniform ~1.7px engineering strokes at any illustration size (new PF line-art only) */
.arc-viz svg *,.pf-art svg *{vector-effect:non-scaling-stroke}
.arc-method{font-size:clamp(.82rem,.98vw,.96rem);color:var(--text-2);font-weight:500;line-height:1.4}
.arc-ben{font-size:.82rem;color:var(--muted);line-height:1.45;border-top:1px solid var(--line);padding-top:.55rem;margin-top:.1rem}

/* ============================================================
   PF · Stage 1 photo flow (larger caseflow) + downstream chips
   ============================================================ */
.pf-flow{display:flex;align-items:flex-start;justify-content:center;gap:.5rem;background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;padding:clamp(.8rem,1.6vw,1.3rem) clamp(.6rem,1.2vw,1rem);
  margin-top:.3rem}
.pf-flow .cf-step{flex:1 1 0;min-width:0;gap:.55rem}
.pf-flow .cf-ph{max-width:none;width:100%;aspect-ratio:4/3;border-radius:10px}
.pf-flow .cf-lb{font-size:clamp(.74rem,.94vw,.9rem)}
.pf-flow .cf-arw{padding-top:clamp(1.4rem,4vw,3rem)}
.pf-down{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .7rem;margin-top:clamp(.9rem,2vh,1.3rem)}
.pf-dlab{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pf-chip2{font-size:clamp(.82rem,1vw,.95rem);font-weight:500;color:var(--text-2);
  border:1px solid var(--line-2);border-radius:999px;padding:.34em .85em}
.pf-sep{color:var(--muted-2);font-size:.9rem}

/* ============================================================
   PF · Stages 2 & 3 (line-art panels)
   ============================================================ */
.pf-panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.8vw,1.5rem);margin-top:.3rem}
.pf-panel{position:relative;background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:clamp(1rem,1.7vw,1.5rem);
  display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--card-shadow);overflow:hidden}
.pf-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--etc)}
.pf-panel.propose{border-style:dashed;border-color:var(--line-2);margin-top:0}
.pf-panel.propose::before{background:var(--steel);opacity:.7}
.pf-ph{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.pf-tag{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  border-radius:999px;padding:.3em .8em;line-height:1.2;white-space:nowrap}
.pf-tag.t2{color:var(--etc);background:var(--etc-soft);border:1px solid var(--etc-border)}
.pf-tag.t3{color:var(--muted);background:transparent;border:1px solid var(--line-2)}
.pf-part{display:inline-flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;min-width:0}
.pf-part .pn-name{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.5vw,1.4rem);
  letter-spacing:-.02em;color:var(--text);line-height:1.1}
.pf-art{display:flex;align-items:flex-start;justify-content:center;gap:.4rem;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;padding:.9rem .6rem .8rem}
.pf-art .cf-step{flex:1 1 0;min-width:0;gap:.5rem}
.pf-art .cf-ic{max-width:none;width:100%;aspect-ratio:16/10}
.pf-art .cf-ic svg{width:88%}
.pf-panel.propose .pf-art .cf-ic svg{width:94%}
.pf-art .cf-arw{padding-top:1.7rem}
.pf-art.photo{padding:0;overflow:hidden;aspect-ratio:16/9;background:var(--photo-pad-bg);border-color:var(--line-2)}
.pf-art.photo img{width:100%;height:100%;object-fit:cover;display:block}
.pf-txt{font-size:clamp(.88rem,1.08vw,1.06rem);color:var(--text-2);line-height:1.55}

/* ============================================================
   PF · Closing · foreground Stage 3
   ============================================================ */
.propose .pr-items span.pr-lead{color:var(--accent-ink);font-weight:600}
.propose .pr-items span.pr-lead::after{content:"";display:inline-block;width:.42em;height:.42em;
  margin-left:.5em;border-radius:50%;background:var(--red);vertical-align:middle}

/* ============================================================
   v4 · Mobile ≤820px — internal scroll, collapsed grids, compact chrome
   ============================================================ */
@media (max-width:820px){
  :root{--edge:5vw;--header-h:52px;--footer-h:54px}

  /* Each slide scrolls its own content; page never scrolls, nav stays swipe/arrows. */
  .slide{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-top:calc(var(--header-h) + 1.1rem);padding-bottom:calc(var(--footer-h) + 1.3rem)}
  .slide.full{padding:0;justify-content:center;overflow:hidden}
  .slide-inner{margin:auto 0}
  .full .slide-inner{margin:0 auto}

  /* Type: keep primary body copy ≥14px */
  .lead,.next-lead,.mtl-txt,.serve-card .s,.resp-card .s,.band-txt{font-size:14.5px;line-height:1.55}
  :root[data-lang="zh"] .lead,:root[data-lang="zh"] .next-lead,
  :root[data-lang="zh"] .mtl-txt,:root[data-lang="zh"] .serve-card .s,
  :root[data-lang="zh"] .resp-card .s{line-height:1.75}
  .hero-title{font-size:clamp(2rem,8.4vw,2.9rem)}
  .hero-sub{font-size:15px}

  /* Grids collapse — !important beats the per-slide inline grid-template-columns */
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .serve,.ba{grid-template-columns:1fr}
  .resp,.dash-row{grid-template-columns:repeat(2,1fr)}
  .ba-metrics{grid-template-columns:repeat(2,1fr)}
  .photo-grid,.mosaic{grid-template-columns:repeat(2,1fr)!important}
  .cap-grid,.mini-grid{grid-template-columns:repeat(2,1fr)!important}
  .bento{grid-template-columns:repeat(2,1fr)}.bento .big{grid-column:span 2;grid-row:span 1}
  .pgroup .row4{grid-template-columns:repeat(2,1fr)}.pgroup .row4 .tile{aspect-ratio:1/1}
  .certs{grid-template-columns:repeat(4,1fr)}
  .awards{grid-template-columns:1fr}
  .flow{flex-direction:column}.flow-arrow{transform:rotate(90deg)}
  .cl-grid{grid-template-columns:1fr}

  /* Slide 21 timeline → vertical rail */
  .mtl-track{grid-template-columns:1fr;gap:.85rem;padding-left:24px}
  .mtl-track::before{left:9px;right:auto;top:14px;bottom:14px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--red),var(--steel))}
  .mtl-band{padding-top:0}
  .mtl-node{top:16px;left:-15px;transform:none}
  .mtl-photo{max-height:none;aspect-ratio:16/9}

  /* PF trilogy overview arc → vertical rail, cards stack */
  .arc-track{grid-template-columns:1fr;gap:.85rem;padding-left:24px}
  .arc-track::before{left:9px;right:auto;top:14px;bottom:14px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--red),var(--etc) 55%,var(--steel))}
  .arc-stage{padding-top:0}
  .arc-node{top:16px;left:-15px;transform:none}
  .arc-viz{aspect-ratio:16/7}
  .arc-viz.art svg{width:34%}

  /* PF stages 2 & 3 panels stack */
  .pf-panels{grid-template-columns:1fr}
  .pf-flow{padding:.7rem .35rem}.pf-flow .cf-arw{padding-top:1.1rem}
  .pf-art{padding:.7rem .35rem}.pf-art .cf-arw{padding-top:1.2rem}

  /* Case flow keeps a single row but tightens */
  .caseflow{padding:.5rem .35rem}.cf-arw{padding-top:1.1rem}.cf-arw svg{width:14px;height:14px}

  /* Compact footer chrome: hide arrow/fs buttons (swipe navigates), keep pickers touch-sized */
  #nav-prev,#nav-next,#nav-fs{display:none}
  .footer-inner{gap:2.5vw}
  .counter{min-width:auto;font-size:.76rem}
  .ticks{gap:2px}.tick{min-width:0;max-width:none}
  .nav-btns{gap:.4rem}
  .theme-seg,.lang-seg{padding:2px}
  .theme-seg .segbtn,.lang-seg .segbtn{width:36px;height:36px}
  .theme-seg .segbtn svg{width:16px;height:16px}

  /* Slide-3 photo banner a touch taller in the stacked layout */
  .serve-ph{height:120px}
  .serve-card{min-height:0}
  .resp-card{min-height:0}
  .stat{min-height:0}
}

/* Mini cards: 2-up columns get too narrow below ~560px for long single words
   ("Metallurgical", "measurement") — the 55-75px text column can't hold them on
   any line, so labels bled under the neighbouring card. One full-width card per
   row instead; the slide already scrolls vertically on mobile. */
@media (max-width:560px){
  .mini-grid{grid-template-columns:1fr!important}
}

@media (max-width:420px){
  .cap-grid,.photo-grid,.mosaic{grid-template-columns:repeat(2,1fr)!important}
  .theme-seg .segbtn,.lang-seg .segbtn{width:34px;height:34px}
  .footer-inner{gap:2vw}
}

/* ============================================================
   v5 · Legacy vertical-fill baseline  (desktop ≥ 901px)
   ------------------------------------------------------------
   Retained as the broad desktop fallback, but the v6 fixed-stage
   guard below overrides the height-driven media growth for the
   meeting deck. Do not reintroduce aspect-ratio:auto media fill
   as the final desktop behaviour.
   ============================================================ */
@media (min-width:901px){
  /* 1 · content column fills the usable height instead of centring */
  .slide:not(.full){justify-content:flex-start}
  .slide:not(.full) > .slide-inner{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .slide:not(.full) > .slide-inner > .slide-head{flex:0 0 auto}

  /* 2 · primary region grows to absorb the freed vertical space */
  .slide:not(.full) > .slide-inner > .stat-grid,
  .slide:not(.full) > .slide-inner > .serve,
  .slide:not(.full) > .slide-inner > .arc,
  .slide:not(.full) > .slide-inner > .pf-flow,
  .slide:not(.full) > .slide-inner > .pf-panels,
  .slide:not(.full) > .slide-inner > .ba,
  .slide:not(.full) > .slide-inner > .chart-wrap,
  .slide:not(.full) > .slide-inner > .fac-grid,
  .slide:not(.full) > .slide-inner > .photo-grid,
  .slide:not(.full) > .slide-inner > .cap-grid,
  .slide:not(.full) > .slide-inner > .mini-grid,
  .slide:not(.full) > .slide-inner > .split,
  .slide:not(.full) > .slide-inner > .cl-grid,
  .slide:not(.full) > .slide-inner > .mtl,
  .slide:not(.full) > .slide-inner > .pgroup,
  .slide:not(.full) > .slide-inner > .dash-row{flex:1 1 auto;min-height:0}

  /* logo / mixed slides: distribute or balance rather than stretch */
  .resp-card{justify-content:flex-start}
  #slide-customers > .slide-inner{justify-content:space-between}
  .cl-grid{align-items:center}

  /* Milestones: a flat one-row timeline has no growable media. Give it
     GENUINE vertical presence by staggering events above/below a centred
     axis (≈2× the flat height), then centre the whole group so it reads
     composed — no dead band under the header, no big symmetric void either. */
  #slide-milestones > .slide-inner{justify-content:center}
  #slide-milestones > .slide-inner > .timeline{flex:0 1 auto;min-height:0;margin-top:clamp(1.2rem,3vh,2.2rem)}
  #slide-milestones .timeline .axis{top:50%}
  #slide-milestones .tl-row{min-height:clamp(210px,27vh,290px);align-items:center}
  #slide-milestones .tl-item{padding-top:0;height:100%}
  #slide-milestones .tl-item .node{top:50%;transform:translate(-50%,-50%)}
  #slide-milestones .tl-body{position:absolute;left:-.35rem;right:-.35rem}
  #slide-milestones .tl-item:nth-child(odd) .tl-body{bottom:calc(50% + 26px)}
  #slide-milestones .tl-item:nth-child(even) .tl-body{top:calc(50% + 26px)}

  /* Responsibility: 4 cards in one row look airy/floating if stretched to
     full height. Give them a proportional height and centre the whole group
     (headline + cards) so it reads composed rather than sparse. */
  #slide-responsibility > .slide-inner{justify-content:center}
  #slide-responsibility > .slide-inner > .resp{flex:0 1 auto}
  #slide-responsibility .resp-card{min-height:clamp(210px,30vh,330px)}

  /* Case "next one" bridge (build edition): distribute lead / bar-viz / note
     down the band so it fills instead of floating (no dead band). */
  #slide-case2 > .slide-inner > .next-wrap{flex:1 1 auto;min-height:0;justify-content:space-between}

  /* stat tiles (no media): fill the band, but centre each card's content
     as a cohesive group so the number/caption/sub don't spread apart */
  .stat{justify-content:center;gap:.55rem;min-height:clamp(150px,24vh,250px)}

  /* ---------- media fill (grids expand rows; images cover) ---------- */
  /* facility: drop the fixed pixel cap, fill the band */
  .fac-grid{height:auto}

  /* generic photo grid */
  .photo-grid{grid-auto-rows:minmax(0,1fr)}
  .photo-grid > .figure{aspect-ratio:auto;height:100%}

  /* capability cards: photo grows above the fixed label block */
  .cap-grid{grid-auto-rows:minmax(0,1fr)}
  .cap-card{height:100%}
  .cap-card .ph{flex:1 1 auto;min-height:0;aspect-ratio:auto}

  /* metrology / special mini-cards → photo-on-top card that fills */
  .mini-grid{grid-auto-rows:minmax(0,1fr)}
  .mini{height:100%;flex-direction:column;align-items:stretch;gap:.55rem;padding:.55rem}
  .mini .th{width:100%;height:auto;flex:1 1 auto;min-height:0;aspect-ratio:auto}
  .mini .mt{flex:0 0 auto}

  /* trilogy overview arc: cards + viz fill */
  .arc{display:flex;flex-direction:column}
  .arc > .arc-track{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);align-items:stretch}
  .arc-stage{display:flex;flex-direction:column}
  .arc-card{flex:1 1 auto;min-height:0}
  .arc-viz{flex:1 1 auto;min-height:0;aspect-ratio:auto}

  /* stage-1 photo flow: photos fill the taller band */
  .pf-flow{align-items:stretch}
  .pf-flow .cf-step{justify-content:flex-start}
  .pf-flow .cf-ph{flex:1 1 auto;min-height:0;height:auto;max-width:none;aspect-ratio:auto}
  .pf-flow .cf-arw{align-self:center;padding-top:0}

  /* stages 2 & 3 line-art panels fill; the framed art box grows into a
     tall "drawing viewport" with the schematic centred, header on top
     and the explanatory text at the foot */
  .pf-panels{align-items:stretch}
  .pf-panel{height:100%}
  .pf-panel > .pf-art{flex:1 1 auto;min-height:0;align-items:center}
  .pf-panel > .pf-art.photo{aspect-ratio:auto}
  .pf-art .cf-step{justify-content:center}
  .pf-art .cf-arw{align-self:center;padding-top:0}

  /* case before/after: caseflow photos + line-art fill each card */
  .ba{align-items:stretch}
  .ba-card{height:100%}
  .ba-card .caseflow{flex:1 1 auto;min-height:0;align-items:stretch}
  .caseflow .cf-step{justify-content:flex-start}
  .caseflow .cf-ph,.caseflow .cf-ic{flex:1 1 auto;min-height:0;height:auto;max-width:none;aspect-ratio:auto}
  .caseflow .cf-arw{align-self:center;padding-top:0}

  /* split product slides: media column fills, copy centres.
     minmax(0,…) caps the tracks so tall tiles can't inflate the media
     column's auto-minimum and overlap the copy column. */
  .split{align-items:stretch;grid-template-columns:minmax(0,0.92fr) minmax(0,1.25fr)}
  .split.rev{grid-template-columns:minmax(0,1.25fr) minmax(0,0.92fr)}
  .split > .mosaic,.split > .bento{min-height:0;min-width:0}
  .split .copy-panel{justify-content:center;min-width:0}
  .mosaic{grid-auto-rows:minmax(0,1fr)}
  /* !important beats the per-tile inline aspect-ratio on the sheet-metal
     mosaic so height governs and tiles fill their track without overflow */
  .mosaic > .tile{height:100%;min-width:0;aspect-ratio:auto!important}
  .bento > .tile{height:100%}

  /* product-group rows fill */
  .pgroup{display:flex;flex-direction:column}
  .pgroup .row4{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}
  .pgroup .row4 .tile{aspect-ratio:auto;height:100%}

  /* smart-factory dashboard photos fill */
  .dash{display:flex;flex-direction:column}
  .dash .ph{flex:1 1 auto;min-height:0;aspect-ratio:auto}

  /* serve commitment cards: process photo grows */
  .serve .serve-card{height:100%}
  .serve-ph{flex:1 1 auto;min-height:clamp(96px,12vh,150px);height:auto}

  /* chart taller */
  .chart-wrap{display:flex;flex-direction:column;margin-top:0}
  #chart{height:100%;flex:1 1 auto;min-height:0}

  /* roadmap: the maturity bands fill the frame — cards stretch to equal
     height and the b1 in-line inspection photo grows to fill its card */
  .mtl{display:flex;flex-direction:column}
  .mtl > .mtl-track{flex:1 1 auto;min-height:0;align-items:stretch}
  .mtl-card{height:100%}
  .mtl-photo{max-height:none;flex:1 1 auto;min-height:150px}
}

/* ============================================================
   v6 · Fixed 16:9 desktop stage guard
   ------------------------------------------------------------
   Desktop/landscape is authored as a 1920×1080 stage and scaled
   as one unit by app.js. These rules neutralise the prior
   height-fill media overrides so photos keep stable proportions
   across maximised browser viewports.
   ============================================================ */
@media (min-width:901px) and (orientation:landscape){
  :root.stage-fit .slide:not(.full){justify-content:center}
  :root.stage-fit .slide:not(.full) > .slide-inner{
    flex:0 1 auto;
    min-height:0;
    display:block;
  }

  :root.stage-fit .stat{min-height:184px;justify-content:space-between}
  :root.stage-fit #chart,
  :root.stage-fit .chart-fallback{height:520px}
  :root.stage-fit .chart-wrap{display:grid;margin-top:.5rem}

  :root.stage-fit .fac-grid{height:560px}
  :root.stage-fit .photo-grid{grid-auto-rows:auto}
  :root.stage-fit .photo-grid > .figure{height:auto;aspect-ratio:16/10}
  :root.stage-fit .cap-grid,
  :root.stage-fit .mini-grid{grid-auto-rows:auto}
  :root.stage-fit .cap-card{height:auto}
  :root.stage-fit .cap-card .ph{flex:0 0 auto;min-height:0;aspect-ratio:16/10}
  :root.stage-fit .mini{height:auto;flex-direction:row;align-items:center;gap:.75rem;padding:.6rem .75rem}
  :root.stage-fit .mini .th{flex:0 0 auto;width:78px;height:56px;min-height:0;aspect-ratio:auto}
  :root.stage-fit .mini .mt{flex:initial}

  :root.stage-fit .arc{display:block}
  :root.stage-fit .arc > .arc-track{grid-auto-rows:auto;align-items:start}
  :root.stage-fit .arc-stage{display:block}
  :root.stage-fit .arc-card{flex:initial;min-height:0}
  :root.stage-fit .arc-viz{flex:initial;min-height:0;aspect-ratio:16/9}

  :root.stage-fit .pf-flow{align-items:flex-start}
  :root.stage-fit .pf-flow .cf-step{justify-content:flex-start}
  :root.stage-fit .pf-flow .cf-ph{flex:0 0 auto;min-height:0;height:auto;max-width:none;aspect-ratio:4/3}
  :root.stage-fit .pf-flow .cf-arw{align-self:auto;padding-top:clamp(1.4rem,4vw,3rem)}

  :root.stage-fit .pf-panels{align-items:stretch}
  :root.stage-fit .pf-panel{height:auto}
  :root.stage-fit .pf-panel > .pf-art{flex:0 0 auto;min-height:0;align-items:flex-start}
  :root.stage-fit .pf-art .cf-step{justify-content:flex-start}
  :root.stage-fit .pf-art .cf-arw{align-self:auto;padding-top:1.7rem}
  /* proposal panel matches the photo panel's height; its line-art box grows and centres */
  :root.stage-fit .pf-panel.propose > .pf-art{flex:1 1 auto;align-items:center}
  :root.stage-fit .pf-panel.propose .pf-art .cf-arw{align-self:center;padding-top:0}

  :root.stage-fit .ba{align-items:start}
  :root.stage-fit .ba-card{height:auto}
  :root.stage-fit .ba-card .caseflow{flex:initial;min-height:0;align-items:flex-start}
  :root.stage-fit .caseflow .cf-step{justify-content:flex-start}
  :root.stage-fit .caseflow .cf-ph,
  :root.stage-fit .caseflow .cf-ic{flex:0 0 auto;min-height:0;height:auto;max-width:104px;aspect-ratio:4/3}
  :root.stage-fit .caseflow .cf-arw{align-self:auto;padding-top:1.4rem}

  :root.stage-fit .split{align-items:center;grid-template-columns:0.92fr 1.25fr}
  :root.stage-fit .split.rev{grid-template-columns:1.25fr .92fr}
  :root.stage-fit .split > .mosaic,
  :root.stage-fit .split > .bento{min-height:0;min-width:0}
  :root.stage-fit .split .copy-panel{justify-content:flex-start;min-width:0}
  :root.stage-fit .mosaic{grid-auto-rows:auto}
  :root.stage-fit .mosaic > .tile{height:auto;min-width:0;aspect-ratio:1/1!important}
  :root.stage-fit .bento{grid-auto-rows:126px}
  :root.stage-fit .bento > .tile{height:100%;aspect-ratio:auto}

  :root.stage-fit .pgroup{display:block}
  :root.stage-fit .pgroup .row4{flex:none;min-height:0;grid-auto-rows:auto}
  :root.stage-fit .pgroup .row4 .tile{height:auto;aspect-ratio:16/9}

  :root.stage-fit .dash{display:block}
  :root.stage-fit .dash .ph{flex:initial;min-height:0;aspect-ratio:16/10}
  :root.stage-fit .serve .serve-card{height:auto}
  :root.stage-fit .serve-ph{flex:0 0 auto;min-height:0;height:96px}

  :root.stage-fit #slide-milestones > .slide-inner{display:flex;flex-direction:column;justify-content:center}
  :root.stage-fit #slide-milestones > .slide-inner > .timeline{flex:0 1 auto;min-height:0;margin-top:32px}
  :root.stage-fit #slide-milestones .timeline .axis{top:50%}
  :root.stage-fit #slide-milestones .tl-row{min-height:290px;align-items:center}
  :root.stage-fit #slide-milestones .tl-item{height:100%;padding-top:0}
  :root.stage-fit #slide-milestones .tl-item .node{top:50%;transform:translate(-50%,-50%)}
  :root.stage-fit #slide-milestones .tl-body{position:absolute;left:-.35rem;right:-.35rem}
  :root.stage-fit #slide-milestones .tl-item:nth-child(odd) .tl-body{bottom:calc(50% + 26px)}
  :root.stage-fit #slide-milestones .tl-item:nth-child(even) .tl-body{top:calc(50% + 26px)}

  :root.stage-fit #slide-case2 > .slide-inner > .next-wrap{flex:initial;min-height:0;justify-content:flex-start}
  :root.stage-fit #slide-responsibility .resp-card{min-height:320px}
  :root.stage-fit .mtl{display:block}
  :root.stage-fit .mtl > .mtl-track{flex:initial;min-height:0;align-items:start}
  :root.stage-fit .mtl-card{height:auto}
  :root.stage-fit .mtl-photo{max-height:190px;flex:initial;min-height:0}
}

/* ============================================================
   v7 · Trilogy slides 4/5/6 — fill the 1080 stage generously
   ------------------------------------------------------------
   Client feedback 2026-07-11: content sat in a middle band with
   ~200px dead space below. Fixed-stage tuning (px/rem, authored
   at exactly 1920×1080): bigger photos, larger type, taller
   panels. Desktop stage only — mobile fallback untouched.
   ============================================================ */
@media (min-width:901px) and (orientation:landscape){
  /* wider canvas for the three centerpiece slides */
  :root.stage-fit #slide-pf-arc > .slide-inner,
  :root.stage-fit #slide-pf-stage1 > .slide-inner,
  :root.stage-fit #slide-pf-next > .slide-inner{max-width:1660px}

  /* ---- Slide 4 · overview arc: taller card photos, larger type ---- */
  :root.stage-fit #slide-pf-arc .arc{margin-top:20px}
  :root.stage-fit #slide-pf-arc .arc-track{gap:30px}
  :root.stage-fit #slide-pf-arc .arc-stage{padding-top:28px}
  :root.stage-fit #slide-pf-arc .arc-card{padding:24px 26px;gap:.8rem;border-radius:18px}
  :root.stage-fit #slide-pf-arc .arc-viz{aspect-ratio:4/3;border-radius:12px}
  :root.stage-fit #slide-pf-arc .arc-no{font-size:1.2rem}
  :root.stage-fit #slide-pf-arc .arc-mat{font-size:.8rem}
  :root.stage-fit #slide-pf-arc .arc-part .pn-name{font-size:1.6rem}
  :root.stage-fit #slide-pf-arc .pn-id{font-size:.84rem}
  :root.stage-fit #slide-pf-arc .arc-method{font-size:1.08rem}
  :root.stage-fit #slide-pf-arc .arc-ben{font-size:.98rem;padding-top:.7rem}
  :root.stage-fit #slide-pf-arc .headline-note{font-size:1.5rem;margin-top:28px;padding-left:1.2rem}

  /* ---- Slide 5 · process photo flow: big square photo cells ---- */
  :root.stage-fit #slide-pf-stage1 .lead{font-size:1.28rem}
  :root.stage-fit #slide-pf-stage1 .pf-flow{margin-top:8px;padding:34px 26px;border-radius:18px;gap:.9rem}
  :root.stage-fit #slide-pf-stage1 .pf-flow .cf-step{gap:.9rem}
  :root.stage-fit #slide-pf-stage1 .pf-flow .cf-ph{aspect-ratio:1/1;border-radius:14px}
  :root.stage-fit #slide-pf-stage1 .pf-flow .cf-lb{font-size:1.05rem}
  :root.stage-fit #slide-pf-stage1 .pf-flow .cf-arw{align-self:auto;padding-top:160px}
  :root.stage-fit #slide-pf-stage1 .pf-flow .cf-arw svg{width:22px;height:22px}
  :root.stage-fit #slide-pf-stage1 .pf-down{margin-top:30px;gap:.6rem .9rem}
  :root.stage-fit #slide-pf-stage1 .pf-chip2{font-size:1.05rem;padding:.42em 1em}
  :root.stage-fit #slide-pf-stage1 .pf-dlab{font-size:.8rem}
  :root.stage-fit #slide-pf-stage1 .pf-sep{font-size:1rem}
  :root.stage-fit #slide-pf-stage1 .headline-note{font-size:1.4rem;margin-top:28px;padding-left:1.2rem}

  /* ---- Slide 6 · both panels taller; photo breathes, SVG scales ---- */
  :root.stage-fit #slide-pf-next .pf-panels{gap:26px;margin-top:0}
  :root.stage-fit #slide-pf-next .pf-panel{padding:26px 28px;gap:1rem;border-radius:18px;min-height:690px}
  /* the generic .propose class (closing-slide strip) centre-shrinks children;
     here the weld strip must stretch to the full panel width */
  :root.stage-fit #slide-pf-next .pf-panel.propose{align-items:stretch}
  :root.stage-fit #slide-pf-next .pf-tag{font-size:.8rem}
  :root.stage-fit #slide-pf-next .pf-part .pn-name{font-size:1.6rem}
  :root.stage-fit #slide-pf-next .pn-id{font-size:.84rem}
  /* left panel: photo grows to fill the shared row height */
  :root.stage-fit #slide-pf-next .pf-panel.trial > .pf-art.photo{
    flex:1 1 auto;aspect-ratio:auto;min-height:430px;border-radius:12px}
  /* right panel: the weld SVG renders larger; labels scale with it */
  :root.stage-fit #slide-pf-next .pf-panel.propose > .pf-art.weld{padding:22px 18px 18px;border-radius:12px}
  :root.stage-fit #slide-pf-next .pf-art.weld .wv{max-height:392px}
  :root.stage-fit #slide-pf-next .wv-labels{gap:.6rem}
  :root.stage-fit #slide-pf-next .wv-labels .cf-lb{font-size:1.02rem}
  :root.stage-fit #slide-pf-next .pf-txt{font-size:1.12rem;margin-top:auto}
}

/* ============================================================
   v8 · Deck-wide density — every content slide fills the stage
   ------------------------------------------------------------
   Client feedback 2026-07-11: "有效信息占屏幕太少" — outside the
   trilogy, content sat in a thin middle band (some slides only
   ~390px tall on a 1080 stage). Same recipe as v7: fixed-stage
   px/rem tuning authored at exactly 1920×1080 — larger type,
   bigger photos/cards, wider canvas (1660px like the trilogy).
   Desktop stage only — mobile fallback untouched.
   ============================================================ */
@media (min-width:901px) and (orientation:landscape){
  /* wider canvas for the recomposed slides (matches trilogy 1660px) */
  :root.stage-fit #slide-stats > .slide-inner,
  :root.stage-fit #slide-serve > .slide-inner,
  :root.stage-fit #slide-milestones > .slide-inner,
  :root.stage-fit #slide-growth > .slide-inner,
  :root.stage-fit #slide-grinding > .slide-inner,
  :root.stage-fit #slide-special > .slide-inner,
  :root.stage-fit #slide-metrology > .slide-inner,
  :root.stage-fit #slide-automotive > .slide-inner,
  :root.stage-fit #slide-sensors > .slide-inner,
  :root.stage-fit #slide-sheetmetal > .slide-inner,
  :root.stage-fit #slide-customers > .slide-inner,
  :root.stage-fit #slide-smart > .slide-inner,
  :root.stage-fit #slide-closedloop > .slide-inner,
  :root.stage-fit #slide-roadmap > .slide-inner,
  :root.stage-fit #slide-responsibility > .slide-inner{max-width:1660px}

  /* ---- 2 · At a glance: six stat tiles carry the whole stage ---- */
  :root.stage-fit #slide-stats .slide-head{margin-bottom:34px}
  :root.stage-fit #slide-stats .stat-grid{gap:26px;margin-top:0}
  :root.stage-fit #slide-stats .stat{min-height:296px;padding:34px 36px;border-radius:18px;justify-content:center;gap:.9rem}
  :root.stage-fit #slide-stats .stat .num{font-size:4.3rem}
  :root.stage-fit #slide-stats .stat .num.tw{font-size:2.7rem}
  :root.stage-fit #slide-stats .stat .cap{font-size:1.22rem;margin-top:.45rem}
  :root.stage-fit #slide-stats .stat .sub{font-size:.98rem;margin-top:.4rem}

  /* ---- 3 · Thesis slide: statement type + tall commitment cards ---- */
  :root.stage-fit #slide-serve .slide-head{margin-bottom:26px}
  :root.stage-fit #slide-serve .slide-head .eyebrow{margin-bottom:1.1rem;font-size:.88rem}
  :root.stage-fit #slide-serve .h2{font-size:3.6rem}
  :root.stage-fit #slide-serve .serve{gap:30px;margin-top:0}
  :root.stage-fit #slide-serve .serve-card{padding:30px 32px;gap:.95rem;border-radius:18px}
  :root.stage-fit #slide-serve .serve-ph{height:auto;aspect-ratio:3/2;border-radius:12px}
  :root.stage-fit #slide-serve .serve-card:nth-child(1) .serve-ph img{object-position:50% 58%}
  :root.stage-fit #slide-serve .serve-card:nth-child(3) .serve-ph{background:#fafafa;border:1px solid rgba(120,130,150,.25)}
  :root.stage-fit #slide-serve .serve-card:nth-child(3) .serve-ph img{object-fit:contain}
  :root.stage-fit #slide-serve .serve-card .ic{width:52px;height:52px;border-radius:13px}
  :root.stage-fit #slide-serve .serve-card .ic svg{width:27px;height:27px}
  :root.stage-fit #slide-serve .serve-lever{font-size:.84rem;padding:.34em .9em}
  :root.stage-fit #slide-serve .serve-card .t{font-size:1.62rem}
  :root.stage-fit #slide-serve .serve-card .s{font-size:1.05rem;line-height:1.58}

  /* ---- 8 · Milestones: taller staggered band, bigger years ---- */
  :root.stage-fit #slide-milestones > .slide-inner > .timeline{margin-top:44px}
  :root.stage-fit #slide-milestones .tl-row{min-height:520px}
  :root.stage-fit #slide-milestones .tl-item .node{width:20px;height:20px}
  :root.stage-fit #slide-milestones .tl-item.key .node{box-shadow:0 0 0 7px var(--red-soft)}
  :root.stage-fit #slide-milestones .tl-item .yr{font-size:2.15rem}
  :root.stage-fit #slide-milestones .tl-item .ev{font-size:1.12rem;margin-top:.5rem;line-height:1.45}
  :root.stage-fit #slide-milestones .tl-item:nth-child(odd) .tl-body{bottom:calc(50% + 34px)}
  :root.stage-fit #slide-milestones .tl-item:nth-child(even) .tl-body{top:calc(50% + 34px)}

  /* ---- 9 · Growth: the chart owns the band ---- */
  :root.stage-fit #slide-growth #chart,
  :root.stage-fit #slide-growth .chart-fallback{height:664px}
  :root.stage-fit #slide-growth .chart-wrap{margin-top:22px}
  :root.stage-fit #slide-growth .chart-note .chip{font-size:.95rem;padding:.4em .85em}

  /* ---- 13 · Grinding: five machine cards fill the band ---- */
  :root.stage-fit #slide-grinding .slide-head{margin-bottom:38px}
  :root.stage-fit #slide-grinding .cap-grid{gap:26px}
  :root.stage-fit #slide-grinding .cap-card{border-radius:16px}
  :root.stage-fit #slide-grinding .cap-card .ph{aspect-ratio:1/1.34}
  :root.stage-fit #slide-grinding .cap-card .bd{padding:1.2rem 1.25rem 1.35rem}
  :root.stage-fit #slide-grinding .cap-card .t{font-size:1.34rem}
  :root.stage-fit #slide-grinding .spec-card{padding:1.7rem 1.6rem;gap:.7rem}
  :root.stage-fit #slide-grinding .spec-card .n{font-size:3.4rem}
  :root.stage-fit #slide-grinding .spec-card .t{font-size:1.38rem}
  :root.stage-fit #slide-grinding .spec-card .s{font-size:1.08rem;line-height:1.6}
  :root.stage-fit #slide-grinding .headline-note{font-size:1.42rem;margin-top:38px;padding-left:1.2rem}

  /* ---- 14 · Special processes: cards fill the band; thumbs at the
         max the low-res sources (≈110–200px tall) can sustain ---- */
  :root.stage-fit #slide-special .slide-head{margin-bottom:30px}
  :root.stage-fit #slide-special .mini-grid{gap:20px;grid-auto-rows:206px}
  :root.stage-fit #slide-special .mini{height:auto;padding:20px 24px;gap:1.4rem;border-radius:16px}
  :root.stage-fit #slide-special .mini .th{width:248px;height:162px;border-radius:12px}
  :root.stage-fit #slide-special .mini .mt .t{font-size:1.32rem;line-height:1.25}
  :root.stage-fit #slide-special .mini .mt .s{font-size:1.04rem;margin-top:.4rem}

  /* ---- 15 · Metrology: photo-dominant 6×2 tiles, labels on scrim ---- */
  :root.stage-fit #slide-metrology .slide-head{margin-bottom:26px}
  :root.stage-fit #slide-metrology .mini-grid{grid-template-columns:repeat(6,1fr)!important;grid-auto-rows:294px;gap:18px}
  :root.stage-fit #slide-metrology .mini{position:relative;display:block;height:auto;padding:0;overflow:hidden;border-radius:14px;background:var(--thumb-bg)}
  :root.stage-fit #slide-metrology .mini .th{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:var(--thumb-bg)}
  :root.stage-fit #slide-metrology .mini .mt{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1rem .8rem;background:var(--photo-cap-grad)}
  :root.stage-fit #slide-metrology .mini .mt .t{color:var(--on-photo);font-size:1.04rem;line-height:1.28;font-weight:600}
  :root.stage-fit #slide-metrology .mini .qty{color:#8ea6ff}
  :root.stage-fit #slide-metrology .headline-note{font-size:1.35rem;margin-top:28px;padding-left:1.2rem}

  /* ---- 16/17/19 · Product split slides: media column grows,
         tiles enlarge, copy reads at presentation size ---- */
  :root.stage-fit #slide-automotive .split.rev{grid-template-columns:minmax(0,1.72fr) minmax(0,.68fr);gap:56px}
  :root.stage-fit #slide-automotive .mosaic{gap:18px}
  :root.stage-fit #slide-automotive .mosaic > .tile{aspect-ratio:1/1.16!important}
  :root.stage-fit #slide-sensors .split.rev{grid-template-columns:minmax(0,1.6fr) minmax(0,.78fr);gap:56px}
  :root.stage-fit #slide-sensors .bento{grid-auto-rows:212px;gap:16px}
  :root.stage-fit #slide-sheetmetal .split.rev{grid-template-columns:minmax(0,1.66fr) minmax(0,.74fr);gap:56px}
  :root.stage-fit #slide-sheetmetal .mosaic{gap:18px;grid-auto-rows:322px}
  :root.stage-fit #slide-sheetmetal .mosaic > .tile{height:100%;aspect-ratio:auto!important}
  :root.stage-fit #slide-automotive .copy-panel .h2,
  :root.stage-fit #slide-sensors .copy-panel .h2,
  :root.stage-fit #slide-sheetmetal .copy-panel .h2{font-size:3.1rem}
  :root.stage-fit #slide-automotive .copy-panel .lead,
  :root.stage-fit #slide-sensors .copy-panel .lead,
  :root.stage-fit #slide-sheetmetal .copy-panel .lead{font-size:1.3rem;line-height:1.62}
  :root.stage-fit #slide-automotive .chip-line{font-size:.95rem;padding:.4em .95em}
  :root.stage-fit #slide-sensors .tagline-badge{font-size:.95rem}
  :root.stage-fit #slide-sheetmetal .bullets li{font-size:1.08rem;gap:.75rem}
  :root.stage-fit #slide-automotive .copy-panel,
  :root.stage-fit #slide-sensors .copy-panel,
  :root.stage-fit #slide-sheetmetal .copy-panel{gap:1.2rem}

  /* ---- 20 · Customers: taller logo wall, bigger awards & certs ---- */
  :root.stage-fit #slide-customers .slide-head{margin-bottom:26px}
  :root.stage-fit #slide-customers .logo-wall{grid-auto-rows:148px;gap:18px}
  :root.stage-fit #slide-customers .reco{margin-top:28px;gap:44px}
  :root.stage-fit #slide-customers .reco h3.sub{font-size:.82rem;margin-bottom:.85rem}
  :root.stage-fit #slide-customers .awards{gap:16px}
  :root.stage-fit #slide-customers .award .bd{padding:.7rem .85rem .75rem}
  :root.stage-fit #slide-customers .award .t{font-size:.95rem}
  :root.stage-fit #slide-customers .award .s{font-size:.82rem}
  :root.stage-fit #slide-customers .certs{gap:14px}
  :root.stage-fit #slide-customers .cert{height:236px}
  :root.stage-fit #slide-customers .cert-row{margin-top:.85rem;gap:.6rem}
  :root.stage-fit #slide-customers .cert-chip{font-size:.86rem;padding:.36em .95em}

  /* ---- 21 · Smart factory: dashboards dominate; flow stays compact ---- */
  :root.stage-fit #slide-smart .flow{gap:.8rem;margin:.5rem 0 1.6rem}
  :root.stage-fit #slide-smart .flow-step{padding:1.5rem 1rem;gap:.75rem;border-radius:14px}
  :root.stage-fit #slide-smart .flow-step .ic{width:60px;height:60px;border-radius:15px}
  :root.stage-fit #slide-smart .flow-step .ic svg{width:31px;height:31px}
  :root.stage-fit #slide-smart .flow-step .t{font-size:1.24rem}
  :root.stage-fit #slide-smart .flow-step .s{font-size:.96rem}
  :root.stage-fit #slide-smart .flow-arrow svg{width:24px;height:24px}
  :root.stage-fit #slide-smart .dash-row{gap:16px}
  :root.stage-fit #slide-smart .dash{border-radius:12px}
  :root.stage-fit #slide-smart .dash .ph{aspect-ratio:16/12}
  :root.stage-fit #slide-smart .dash .lb{padding:.75rem .9rem;font-size:.95rem}
  :root.stage-fit #slide-smart .dash .lb b{font-size:1.08rem}
  :root.stage-fit #slide-smart .headline-note{font-size:1.35rem;margin-top:30px;padding-left:1.2rem}

  /* ---- 22 · Closed-loop: hero photo stretches the full band;
         strengths column distributes over the same height ---- */
  :root.stage-fit #slide-closedloop .cl-grid{gap:26px;align-items:stretch}
  :root.stage-fit #slide-closedloop .cl-col{gap:20px}
  :root.stage-fit #slide-closedloop .cl-col:first-child .figure{aspect-ratio:auto!important;flex:1 1 auto;min-height:520px}
  :root.stage-fit #slide-closedloop .figure .cap{font-size:.95rem;padding:.85rem .95rem .7rem}
  :root.stage-fit #slide-closedloop .kicker{font-size:.95rem!important}
  :root.stage-fit #slide-closedloop .cl-col:last-child .strengths{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem}
  :root.stage-fit #slide-closedloop .strength{flex:1 1 0;padding:1.3rem 1.35rem;gap:1rem}
  :root.stage-fit #slide-closedloop .strength .no{font-size:1.7rem}
  :root.stage-fit #slide-closedloop .strength .t{font-size:1.22rem}
  :root.stage-fit #slide-closedloop .strength .s{font-size:1.02rem;margin-top:.35rem}

  /* ---- 23 · Investing ahead: equal-height maturity cards ---- */
  :root.stage-fit #slide-roadmap .mtl{margin-top:14px}
  :root.stage-fit #slide-roadmap .mtl-track{gap:30px;align-items:stretch}
  :root.stage-fit #slide-roadmap .mtl-band{display:flex;flex-direction:column;padding-top:28px}
  :root.stage-fit #slide-roadmap .mtl-card{flex:1 1 auto;height:auto;padding:26px 28px;gap:.85rem;border-radius:18px}
  :root.stage-fit #slide-roadmap .mtl-ic{width:44px;height:44px;border-radius:11px}
  :root.stage-fit #slide-roadmap .mtl-ic svg{width:24px;height:24px}
  :root.stage-fit #slide-roadmap .mtl-tag{font-size:1.16rem}
  :root.stage-fit #slide-roadmap .mtl-txt{font-size:1.16rem;line-height:1.6}
  :root.stage-fit #slide-roadmap .mtl-metric .now{font-size:1.9rem}
  :root.stage-fit #slide-roadmap .mtl-metric .was{font-size:1.15rem}
  :root.stage-fit #slide-roadmap .mtl-metric .ml{font-size:.9rem}
  :root.stage-fit #slide-roadmap .mtl-photo{flex:1 1 auto;min-height:260px;max-height:none}
  :root.stage-fit #slide-roadmap .mtl-chips{gap:.55rem;margin-top:.2rem}
  :root.stage-fit #slide-roadmap .mtl-chip{font-size:.92rem;padding:.4em .95em}
  :root.stage-fit #slide-roadmap .etc-badge{font-size:.92rem}
  :root.stage-fit #slide-roadmap .etc-logo img{height:24px}

  /* ---- 24 · Self-built machines: photo band fills the stage ---- */
  :root.stage-fit #slide-selfbuilt .slide-head{margin-bottom:26px}
  :root.stage-fit #slide-selfbuilt .sb-grid{height:588px;gap:18px}
  :root.stage-fit #slide-selfbuilt .headline-note{font-size:1.35rem;margin-top:26px;padding-left:1.2rem}

  /* ---- 25 · Responsibility: four pillars at full height ---- */
  :root.stage-fit #slide-responsibility .slide-head{margin-bottom:40px}
  :root.stage-fit #slide-responsibility .resp{gap:28px;margin-top:0}
  :root.stage-fit #slide-responsibility .resp-card{min-height:470px;padding:36px 34px;gap:1.3rem;border-radius:18px;justify-content:center}
  :root.stage-fit #slide-responsibility .resp-card .ic{width:62px;height:62px;border-radius:15px}
  :root.stage-fit #slide-responsibility .resp-card .ic svg{width:32px;height:32px}
  :root.stage-fit #slide-responsibility .resp-card .t{font-size:1.62rem}
  :root.stage-fit #slide-responsibility .resp-card .s{font-size:1.14rem;line-height:1.68}
}

/* ============================================================
   25 · FRAMEWORK — flywheel loop (framework proposal slide)
   Base rules; :root.stage-fit overrides below scale to the
   1920×1080 stage. Mobile stacks the nodes as plain cards.
   ============================================================ */
.fw-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.4rem,3vw,3.6rem);align-items:center;margin-top:clamp(.4rem,1.2vh,1rem)}
.fw-loop{position:relative;width:min(100%,560px);aspect-ratio:1;margin:2rem auto}
.fw-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fw-ring-bg{stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 8}
.fw-ring-in{stroke:var(--line);stroke-width:1.5}
.fw-arc{stroke:var(--red);stroke-width:3;stroke-linecap:round;opacity:.92}
.fw-arh{stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fw-dot{fill:var(--panel);stroke:var(--red);stroke-width:2.5}
.fw-node{position:absolute;transform:translate(-50%,-50%);width:clamp(150px,15vw,208px);text-align:center;background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--card-shadow);padding:.7rem .8rem .78rem;display:flex;flex-direction:column;gap:.22rem;z-index:2}
.fw-node i{font-style:normal;color:var(--red);font-weight:700;font-size:.95rem;line-height:1}
.fw-node b{font-family:var(--display);font-weight:700;color:var(--text);font-size:.98rem;line-height:1.25;letter-spacing:-.01em}
.fw-node span{font-size:.78rem;color:var(--muted);line-height:1.42}
.fw-node.n1{left:50%;top:11.1%}
.fw-node.n2{left:87%;top:38%}
.fw-node.n3{left:72.9%;top:81.5%}
.fw-node.n4{left:27.1%;top:81.5%}
.fw-node.n5{left:13%;top:38%}
.fw-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;gap:.15rem}
.fw-center b{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--red);letter-spacing:-.02em;line-height:1.05}
.fw-center span{font-size:.85rem;color:var(--muted)}
.fw-copy{display:flex;flex-direction:column;gap:clamp(.9rem,1.9vh,1.5rem)}
.fw-line{font-size:clamp(1rem,1.25vw,1.22rem);line-height:1.62;color:var(--text-2);border-left:3px solid var(--line-2);padding-left:1rem}
.fw-line.quiet{font-family:var(--display);font-weight:600;color:var(--text);border-left-color:var(--red)}
:root[data-lang="zh"] .fw-node b{letter-spacing:0}
@media (max-width:900px){
  .fw-body{grid-template-columns:1fr;gap:1.1rem;align-items:start}
  .fw-loop{width:100%;aspect-ratio:auto;margin:0;display:flex;flex-direction:column;gap:.6rem}
  .fw-svg,.fw-center{display:none}
  .fw-node{position:static;transform:none;width:100%;text-align:left;padding:.8rem .95rem .85rem}
  .fw-line{font-size:.95rem;padding-left:.85rem}
}
:root.stage-fit #slide-framework .slide-head{margin-bottom:10px}
:root.stage-fit #slide-framework .fw-body{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:64px}
:root.stage-fit #slide-framework .fw-loop{width:672px;margin:38px auto 32px}
:root.stage-fit #slide-framework .fw-node{width:218px;padding:.85rem .95rem .92rem;border-radius:16px}
:root.stage-fit #slide-framework .fw-node i{font-size:1.05rem}
:root.stage-fit #slide-framework .fw-node b{font-size:1.12rem}
:root.stage-fit #slide-framework .fw-node span{font-size:.9rem}
:root.stage-fit #slide-framework .fw-center b{font-size:2.1rem}
:root.stage-fit #slide-framework .fw-center span{font-size:1rem}
:root.stage-fit #slide-framework .fw-line{font-size:1.28rem;line-height:1.66;padding-left:1.2rem}

/* Company profile navigation */
.company-menu{display:flex;align-items:center;gap:10px;margin-right:26px;color:var(--text);font-size:12px;letter-spacing:0}
.company-menu select{max-width:230px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font:inherit;cursor:pointer}
.company-source{font-size:12px!important;line-height:1.65!important;font-weight:400;letter-spacing:0;color:var(--muted);margin:15px 0 0}
.hero-greet{letter-spacing:.04em}.close-contact{font-size:17px}
@media(max-width:820px){.company-menu{margin-right:0;gap:6px}.company-menu select{max-width:165px;font-size:11px}.chrome.top .wordmark{display:none}.company-source{font-size:11px!important}.close-inner{padding-bottom:24px}}