/* Smart Factory — shared calculator/catalog colors and layout language. */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body.factory-page { --text:#171716; --muted:#4d535a; --dim:#626b75; --border:#d9dde1; --border-md:#a8adb3; --accent:#20201e; --surface:#f7f8f8; --gutter:clamp(24px,3.6vw,64px); --xeon-title-size:clamp(40px,4.7vw,70px); margin:0; background:#fff; color:var(--text); font-family:Inter,Arial,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
button { font:inherit; cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none !important; }
#main-nav { position:fixed; top:0; left:0; right:0; }
.factory-skip { position:fixed; top:-80px; left:20px; z-index:2000; padding:12px 20px; color:#fff; background:#20201e; }
.factory-skip:focus { top:12px; }
#factory-main { background-image:linear-gradient(rgba(28,39,51,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(28,39,51,.06) 1px,transparent 1px),linear-gradient(rgba(28,39,51,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(28,39,51,.025) 1px,transparent 1px); background-size:160px 160px,160px 160px,32px 32px,32px 32px; padding-bottom:72px; }
#factory-main :is(a,button,[tabindex]):focus-visible { outline:2px solid #42677d; outline-offset:4px; }
#factory-main :is(h1,h2,h3,p,figure) { margin:0; }
#factory-main h2 { font-size:clamp(28px,3.3vw,46px); }
#factory-main a { color:inherit; }
.container,.flow-header,.pe-header,.factory-gallery-heading { max-width:1560px; padding-inline:var(--gutter); margin-inline:auto; }
#factory-main section { scroll-margin-top:20px; }
#hero { padding-top:126px; padding-bottom:32px; }
.factory-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; font-size:12px; color:var(--muted); }
.factory-breadcrumb a { text-decoration:none; }
.factory-breadcrumb a:hover { text-decoration:underline; }
.factory-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.hero-eyebrow,.intro-label,.flow-eyebrow,.pillars-eyebrow,.pe-eyebrow,.feature-eyebrow,.factory-eyebrow,.factory-cta-eyebrow { color:var(--dim); font-size:12px; font-weight:400; letter-spacing:.04em; margin-bottom:16px; }
#factory-main .hero-h1 { margin-bottom:24px; }
#factory-main .hero-sub { color:var(--muted); max-width:640px; margin-bottom:28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
#factory-main :is(.btn-hero-primary,.btn-hero-secondary,.feature-cta,.pe-overview) { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:46px; padding:12px 18px; border:1px solid var(--border-md); border-radius:0; background:#fff; text-decoration:none; font-size:14px; line-height:1.5; font-weight:500; color:var(--text); }
#factory-main .btn-hero-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
#factory-main .btn-hero-primary:hover { background:#393936; }
#factory-main :is(.btn-hero-secondary,.feature-cta,.pe-overview):hover { background:#f0f1f2; border-color:var(--text); }
.factory-hero-meta { display:flex; flex-wrap:wrap; gap:8px 20px; border-top:1px solid var(--border); margin-top:28px; padding-top:20px; font-size:12px; color:var(--muted); }
.factory-hero-photo { border:1px solid var(--border); background:#fff; }
.factory-hero-photo img { width:100%; aspect-ratio:5/4; object-fit:cover; }
.factory-hero-photo figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:14px 18px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }
.factory-jump-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:40px; border:1px solid var(--border); background:#fff; }
.factory-jump-links a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px; border-right:1px solid var(--border); font-size:13px; text-decoration:none; }
.factory-jump-links a:last-child { border-right:0; }
.factory-jump-links a:hover { background:var(--surface); }
#intro { padding-block:48px; }
.intro-inner { display:grid; grid-template-columns:1fr 1.35fr; gap:64px; padding:32px; background:#fff; border:1px solid var(--border); }
#factory-main .intro-body { color:var(--muted); font-size:15px; margin-bottom:20px; }
.intro-chips { display:flex; flex-wrap:wrap; gap:8px; }
.intro-chip { border:1px solid var(--border); padding:6px 10px; font-size:11px; color:var(--muted); }
.intro-chip-dot { display:none; }
#production-flow,#pillars,#process-explorer { padding-block:40px; }
.flow-header,.pillars-header,.pe-header { margin-bottom:28px; }
#factory-main .factory-section-desc { color:var(--muted); margin-top:18px; font-size:15px; }
.flow-tabs,.flow-panels,.pe-body { width:calc(100% - var(--gutter) * 2); max-width:calc(1560px - var(--gutter) * 2); margin-inline:auto; border:1px solid var(--border); background:#fff; }
.flow-tabs { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); border-bottom:0; }
.flow-tab { display:flex; flex-direction:column; gap:6px; align-items:flex-start; min-width:0; padding:18px 14px; border:0; border-right:1px solid var(--border); border-radius:0; background:#fff; color:var(--muted); }
.flow-tab:last-child { border-right:0; }
.flow-tab:hover { background:var(--surface); }
.flow-tab.active { background:var(--accent); color:#fff; }
.flow-tab-num { font-size:11px; opacity:.8; }
.flow-tab-label { font-size:13px; font-weight:500; }
.flow-panel-inner { display:grid; grid-template-columns:1fr 1fr; min-height:430px; }
.flow-panel-text { padding:36px; }
.flow-panel-tag { display:inline-flex; padding:5px 10px; background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:11px; margin-bottom:20px; }
#factory-main .flow-panel-h3 { font-size:34px; margin-bottom:18px; }
#factory-main .flow-panel-body { color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:24px; }
.flow-panel-bullets,.pillar-list,.feature-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
:is(.flow-panel-bullets,.pillar-list,.feature-list) li { display:flex; align-items:baseline; gap:12px; font-size:13px; color:var(--muted); }
:is(.flow-panel-bullets,.pillar-list,.feature-list) li::before { content:'↗'; color:var(--text); flex-shrink:0; }
.flow-panel-img { position:relative; min-height:380px; border-left:1px solid var(--border); overflow:hidden; background:var(--surface); }
.flow-panel-img img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.flow-panel-img-label,.feature-img-label { position:absolute; bottom:0; inset-inline:0; padding:12px 16px; color:var(--muted); background:rgba(255,255,255,.96); border-top:1px solid var(--border); font-size:11px; }
.pillars-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.pillar-card { position:relative; border:1px solid var(--border); background:#fff; padding:28px; overflow:hidden; }
.pillar-num { color:var(--dim); font-size:12px; margin-bottom:20px; }
.pillar-icon { display:flex; align-items:center; justify-content:center; border:1px solid var(--border); width:48px; height:48px; margin-bottom:24px; }
.pillar-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.4; }
#factory-main .pillar-title { font-size:25px; margin-bottom:16px; }
#factory-main .pillar-body { color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:22px; }
.pillar-list { gap:8px; }
.pillar-bg-num { display:none; }
.pe-header { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:48px; }
.pe-header-right { color:var(--muted); font-size:14px; max-width:600px; }
#factory-main .pe-overview { margin-top:18px; font-size:13px; }
#factory-main .pe-overview[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.pe-body { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.5fr); align-items:stretch; }
.pe-steps { border-right:1px solid var(--border); }
.pe-step { display:block; width:100%; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:24px; text-align:left; color:var(--text); background:#fff; }
.pe-step:last-child { border-bottom:0; }
.pe-step:hover { background:var(--surface); }
.pe-step.active { background:var(--surface); box-shadow:inset 3px 0 var(--accent); }
.pe-step-top { display:flex; align-items:center; gap:16px; }
.pe-step-num { color:var(--dim); font-size:11px; }
.pe-step-name { font-size:19px; font-weight:500; }
.pe-step-desc,.pe-step-chips { display:none; }
.pe-step.active .pe-step-desc { display:block; margin-top:14px; font-size:13px; color:var(--muted); line-height:1.8; }
.pe-step.active .pe-step-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.pe-step-chip { border:1px solid var(--border); background:#fff; padding:4px 8px; font-size:10px; color:var(--muted); }
.pe-photo-stage { min-width:0; display:flex; flex-direction:column; background:#202626; }
.pe-photo { flex:1; display:flex; align-items:center; justify-content:center; min-height:360px; }
.pe-photo img { width:100%; height:auto; object-fit:contain; }
.pe-photo-label { padding:14px 18px; background:#fff; border-top:1px solid var(--border); color:var(--muted); font-size:11px; }
.feature-split { padding-block:40px; }
.feature-split .container { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.feature-split.reverse .feature-img-wrap { order:2; }
.feature-img-wrap { position:relative; overflow:hidden; border:1px solid var(--border); background:#fff; }
.feature-img-wrap img { width:100%; aspect-ratio:5/4; object-fit:cover; }
#factory-main .feature-h2 { margin-bottom:24px; }
#factory-main .feature-body { font-size:15px; line-height:1.8; color:var(--muted); margin-bottom:24px; }
.feature-spec-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:24px; border:1px solid var(--border); background:#fff; }
.feature-spec { padding:16px; border-right:1px solid var(--border); }
.feature-spec:last-child { border-right:0; }
.feature-spec-val { font-size:22px; line-height:1.3; margin-bottom:6px; }
.feature-spec-label { font-size:10px; color:var(--dim); }
.feature-list { margin-bottom:28px; }
#stats { padding-block:40px; }
.stats-label { color:var(--dim); font-size:12px; margin-bottom:18px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#fff; border:1px solid var(--border); }
.stat-item { padding:28px; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:0; }
.stat-num { font-size:40px; line-height:1.2; margin-bottom:12px; }
.stat-num sup { font-size:20px; vertical-align:baseline; color:var(--muted); }
.stat-label { font-size:12px; color:var(--muted); }
#machine-ticker { padding-block:32px 40px; }
.factory-gallery-heading { margin-bottom:24px; }
.ticker-track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-inline:var(--gutter); max-width:1560px; margin-inline:auto; }
.ticker-photo { border:1px solid var(--border); background:#fff; min-width:0; }
.ticker-photo img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.ticker-photo-label { display:block; padding:12px 14px; font-size:11px; color:var(--muted); border-top:1px solid var(--border); }
#factory-cta-img { display:grid; grid-template-columns:1.2fr 1fr; width:calc(100% - var(--gutter) * 2); max-width:calc(1560px - var(--gutter) * 2); margin:40px auto 0; border:1px solid var(--border); background:#fff; }
.factory-cta-content { padding:40px; align-self:center; }
#factory-main .factory-cta-h2 { margin-bottom:22px; }
#factory-main .factory-cta-body { color:var(--muted); font-size:15px; margin-bottom:28px; }
.factory-cta-photo { width:100%; height:100%; min-height:330px; object-fit:cover; border-left:1px solid var(--border); }
@media(max-width:1050px) {
  .factory-hero-grid { gap:32px; }
  .flow-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .flow-tab { flex-direction:row; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--border); }
  .flow-tab:nth-child(3n) { border-right:0; }
  .flow-tab:nth-last-child(-n+3) { border-bottom:0; }
  .intro-inner { gap:32px; }
  .pillars-grid { gap:16px; }
  .pillar-card { padding:22px; }
  .pe-body { grid-template-columns:minmax(260px,.85fr) minmax(0,1.2fr); }
  .feature-split .container { gap:32px; }
  .feature-spec { padding:12px; }
}
@media(max-width:800px) {
  body.factory-page { --xeon-title-size:clamp(40px,6.8vw,60px); }
  .factory-hero-grid,.intro-inner,.flow-panel-inner,.pe-header,.pe-body,.feature-split .container,#factory-cta-img { grid-template-columns:1fr; }
  .factory-hero-photo img { aspect-ratio:16/9; }
  .factory-jump-links { grid-template-columns:1fr; }
  .factory-jump-links a { border-right:0; border-bottom:1px solid var(--border); }
  .factory-jump-links a:last-child { border-bottom:0; }
  .flow-panel-img { min-height:330px; border-left:0; border-top:1px solid var(--border); }
  .pillars-grid { grid-template-columns:1fr; }
  .pe-header { gap:24px; }
  .pe-steps { border-right:0; border-bottom:1px solid var(--border); }
  .pe-photo { min-height:0; }
  .feature-split.reverse .feature-img-wrap { order:0; }
  .feature-img-wrap img { aspect-ratio:16/10; }
  .stats-grid,.ticker-track { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-item:nth-child(2) { border-right:0; }
  .stat-item:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .factory-cta-photo { height:auto; min-height:0; aspect-ratio:16/9; border-left:0; border-top:1px solid var(--border); }
}
@media(max-width:500px) {
  #hero { padding-top:108px; }
  #intro,#production-flow,#pillars,#process-explorer,.feature-split,#stats { padding-block:28px; }
  .hero-actions > a { width:100%; justify-content:space-between !important; }
  .factory-hero-meta { gap:8px 16px; }
  .intro-inner,.flow-panel-text,.pillar-card,.factory-cta-content { padding:24px; }
  .flow-tab { padding:12px 10px; gap:8px; }
  .flow-tab-label { font-size:12px; }
  #factory-main .flow-panel-h3 { font-size:29px; }
  .flow-panel-img { min-height:250px; }
  .feature-spec-row { grid-template-columns:1fr; }
  .feature-spec { display:flex; align-items:center; justify-content:space-between; gap:12px; border-right:0; border-bottom:1px solid var(--border); padding:12px 16px; }
  .feature-spec:last-child { border-bottom:0; }
  .feature-spec-val { margin-bottom:0; }
  .stat-item { padding:20px 16px; }
  .stat-num { font-size:32px; }
  .ticker-track { gap:12px; }
  .ticker-photo-label { padding:10px; }
  .factory-hero-photo figcaption { padding:12px 14px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }