/* Concept 02 — Corporate Clarity. Rim structure (hairlines, square edges, medium heads, restrained
   state motion) in the Viko palette. White header, full-bleed reception hero with a white blend,
   navy body on three equal columns, white footer. Isolated: corporate.html only. System CJK fonts. */
:root{
  --navy:#0e2a3a;--navy-2:#0a2130;--ink:#0e2a3a;--ink-2:#3b5563;--muted:#71848e;--rule:#d7dee2;
  --rule-n:#ffffff26;--on-navy:#eef2f4;--on-navy-2:#b4c4cd;--accent:#e5352c;
  --font:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --max:1312px;--gut:64px;--col:32px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:112px;
  --dur:180ms;--ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--ink);font:400 16px/1.75 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
figure{margin:0;position:relative}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.g,.g3{max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut);display:grid;column-gap:var(--col)}
.g{grid-template-columns:repeat(12,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--col)}

/* Opening film */
.opening{position:relative;height:100svh;background:var(--navy-2)}
.opening video{width:100%;height:100%;object-fit:contain;display:block}
.enter{position:absolute;right:var(--gut);bottom:var(--s5);width:48px;height:48px;display:grid;place-items:center;background:var(--navy);color:#fff;border:1px solid var(--rule-n);font-size:20px;transition:background var(--dur) var(--ease)}
.enter:hover{background:var(--accent)}

/* Header: white */
.hdr{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--rule)}
.hdr .g{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo img{width:96px;height:48px;object-fit:contain}
.hdr nav{display:flex;gap:var(--s4);font-size:16px;font-weight:500;color:var(--ink)}
.hdr nav a{position:relative;padding:var(--s1) 0}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.hdr nav a:hover::after{transform:scaleX(1)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s2);height:46px;padding:0 var(--s3);border:1px solid var(--rule-n);color:var(--on-navy);font-size:15px;font-weight:500;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn span{transition:transform var(--dur) var(--ease)}
.btn:hover{border-color:var(--on-navy)}.btn:hover span{transform:translateX(4px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#c92b23;border-color:#c92b23}
.acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* Hero: reception photo, white blend behind the copy */
.hero{position:relative;background:#fff;min-height:min(84vh,780px);display:flex;align-items:center;overflow:hidden}
.hero>img{position:absolute;inset:0}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fffffff2 30%,#ffffffb3 46%,#fff0 66%)}
.hero .g{position:relative;width:100%}
.hero-copy{grid-column:1/span 5;padding:var(--s7) 0}
.hero h1{font-size:clamp(36px,3.8vw,56px);line-height:1.22;font-weight:500;letter-spacing:-.01em;margin-bottom:var(--s3);border-top:3px solid var(--accent);padding-top:var(--s3)}
.hero h1 span{display:block}
.lead{color:var(--ink-2);font-size:17px;margin-bottom:var(--s5)}

/* Body: navy, three equal columns */
.sec{padding:var(--s7) 0;color:var(--on-navy)}
.sec+.sec{border-top:1px solid var(--rule-n)}
.c-head h2{font-size:clamp(24px,2.2vw,32px);line-height:1.35;font-weight:500;letter-spacing:-.01em;border-top:1px solid var(--on-navy);padding-top:var(--s3)}
.c-head p,.txt p,.pt p{color:var(--on-navy-2);margin-top:var(--s3)}
.txt{border-top:1px solid var(--rule-n);padding-top:var(--s3)}.txt p:first-child{margin-top:0}
.pt{border-top:1px solid var(--rule-n);padding-top:var(--s3)}
.pt h3{font-size:18px;font-weight:500}.pt p{margin-top:var(--s1)}
.pic{aspect-ratio:4/5;overflow:hidden}
.pic img,.eq img{transition:transform 500ms var(--ease)}
.pic:hover img,.eq li:hover img{transform:scale(1.03)}
.eq{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1);margin-top:var(--s5)}
.eq li{aspect-ratio:1;overflow:hidden}

/* Footer: white */
.ftr{padding:var(--s6) 0;background:#fff;color:var(--ink)}
.ftr .g{row-gap:var(--s4)}
.ft-id{grid-column:1/span 4}
.ft-id img{width:180px;height:60px;object-fit:contain;object-position:left}
.ft-id h2{font-size:22px;font-weight:500;margin-top:var(--s2)}
.ft-ct{grid-column:6/-1;display:grid;grid-template-columns:72px 1fr;font-size:15px}
.ft-ct dt,.ft-ct dd{padding:var(--s1) 0;border-bottom:1px solid var(--rule)}
.ft-ct dt{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:1100px){
  :root{--gut:32px;--col:24px}
  .hdr nav{gap:var(--s3);font-size:15px}
  .hero-copy{grid-column:1/span 7}
  .eq{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--gut:16px;--col:16px;--s7:64px}
  .g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g>*{grid-column:1/-1!important}
  .g3{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
  .hdr .g{height:64px}.hdr nav{display:none}.logo img{width:80px;height:40px}
  .enter{bottom:var(--s3)}
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  .hero>img{position:static;aspect-ratio:4/3;height:auto;order:-1}
  .hero::before{inset:auto 0 auto 0;top:calc(75vw - 120px);height:120px;background:linear-gradient(#fff0,#fff)}
  .hero-copy{padding:var(--s4) 0 var(--s6)}
  .pic{aspect-ratio:4/3}
  .eq{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s2)}
  .ft-ct{margin-top:var(--s2)}
}
.hero::before{z-index:1}.hero .g{z-index:2}
/* Hero photo shifted right so the VIKO sign on the wall stays fully visible */
@media (min-width:761px){
  .hero>img{left:auto;width:72%;object-position:left center;transform:scale(1.25);transform-origin:64% 12%}
  .hero::before{background:linear-gradient(90deg,#fff 0%,#fff 28%,#ffffffcc 36%,#fff0 46%)}
}

/* ---- Critique fixes ---- */
/* 1. Capability is the visual peak: deeper navy, more room */
.sec-feature{background:var(--navy-2);padding:calc(var(--s7) + var(--s4)) 0}
/* 2. Balanced columns: 4:3 photos; heading top, action pinned to the photo's bottom edge */
.pic{aspect-ratio:4/3}
.c-head{display:flex;flex-direction:column;align-items:flex-start}
.c-head .acts,.c-head>.btn{margin-top:auto;padding-top:var(--s4)}
/* 3. Readable body on navy: larger, lighter, no competing hairlines */
.c-head p,.txt p,.pt p{font-size:17px;line-height:1.8;color:#d3dee4}
.txt,.pt{border-top:0;padding-top:0}
.txt{padding-top:calc(var(--s3) + 1px)}
.pt{padding-top:calc(var(--s3) + 1px)}
.pt h3{font-size:19px;color:#fff}
/* 4. One solid red action per area; secondary actions become text links */
.btn:not(.btn-primary){height:auto;padding:0 0 4px;border:0;border-bottom:1px solid currentColor}
.btn:not(.btn-primary):hover{border-color:var(--accent)}
.c-head .acts{align-items:center;gap:var(--s4)}
/* 5. Capability: heading + two points in one row, grid, action at bottom right */
.acts-end{grid-column:1/-1;justify-content:flex-end;margin-top:var(--s2)}
.sec-feature .eq{margin-top:var(--s4)}
/* 6. Hero to body transition */
#products{border-top:4px solid var(--accent)}
/* 8. Larger header logo; fuller footer */
.logo img{width:120px;height:56px}
.ftr{padding:var(--s7) 0}
.ft-id img{width:220px;height:72px}
.ft-id h2{font-size:26px}
.ft-ct{font-size:16px}
@media (max-width:760px){
  .logo img{width:88px;height:44px}
  .c-head .acts,.c-head>.btn{padding-top:var(--s3)}
  .ftr{padding:var(--s6) 0}
  .sec-feature{padding:var(--s7) 0}
}
/* Secondary actions: label + square arrow tile (distinct from Editorial's underlined links) */
.btn:not(.btn-primary){height:auto;padding:0;border:0;gap:var(--s2);font-weight:500}
.btn:not(.btn-primary) span{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--rule-n);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:not(.btn-primary):hover span{background:var(--accent);border-color:var(--accent);transform:none}
.ftr .btn:not(.btn-primary) span{border-color:var(--rule)}
/* Secondary actions: "cover over" — a red bar sweeps up over the label on hover and back down on leave */
.btn:not(.btn-primary){--thickness:3px;--margin:6px;position:relative;isolation:isolate;display:inline-flex;height:auto;padding:2px 4px;border:0;gap:var(--s1);font-weight:700;letter-spacing:.04em}
.btn:not(.btn-primary) span{display:inline;width:auto;height:auto;border:0;background:none!important}
.btn:not(.btn-primary)::before{content:"";position:absolute;left:0;width:100%;z-index:-1;background:var(--accent);pointer-events:none;bottom:calc(var(--margin) * -1);height:var(--thickness);animation:uncover .5s forwards}
.btn:not(.btn-primary):hover::before{animation:cover .5s forwards}
.btn:not(.btn-primary):hover{color:#fff}
@keyframes cover{0%{bottom:calc(var(--margin) * -1);height:var(--thickness)}50%{bottom:calc(var(--margin) * -1);height:calc(100% + var(--margin))}to{bottom:100%;height:var(--thickness)}}
@keyframes uncover{0%{bottom:100%;height:var(--thickness)}50%{bottom:calc(var(--margin) * -1);height:calc(100% + var(--margin))}to{bottom:calc(var(--margin) * -1);height:var(--thickness)}}
@media (prefers-reduced-motion:reduce){.btn:not(.btn-primary)::before{animation:none!important}}
/* ---- Motion ---- */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes heroZoom{from{transform:scale(1.4)}}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-copy>*{animation:rise .9s var(--ease) both}
.hero h1 span:nth-child(2){animation:rise .9s .12s var(--ease) both}
.hero h1{animation-delay:.05s}.hero .lead{animation-delay:.25s}.hero .btn{animation-delay:.4s}
@media (min-width:761px){.hero>img{animation:heroZoom 1.8s var(--ease) both}}
.hdr{transition:box-shadow var(--dur) var(--ease)}.hdr.scrolled{box-shadow:0 6px 24px #0e2a3a1f}
/* Scroll reveal (only when JS is on; ?shot shows everything) */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .pic.rv{clip-path:inset(100% 0 0 0);transform:none;opacity:1;transition:clip-path 1s var(--ease)}
.js .rv.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.js .c-head h2{border-top-color:transparent;position:relative}
.js .c-head h2::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--on-navy);transform:scaleX(0);transform-origin:left;transition:transform 1s .2s var(--ease)}
.js .in .c-head h2::before,.js .c-head.in h2::before{transform:scaleX(1)}
.js .eq li{opacity:0;transform:scale(.92);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js .eq.in li{opacity:1;transform:none}
.pic img{transform:scale(1.08)}.pic.in img{transform:scale(1)}.pic:hover img{transform:scale(1.04)}
.pic img{transition:transform 1.2s var(--ease)}
.eq li{position:relative}.eq li::after{content:"";position:absolute;inset:0;border:2px solid var(--accent);opacity:0;transition:opacity var(--dur)}.eq li:hover::after{opacity:1}
@media (prefers-reduced-motion:reduce){.js .rv,.js .eq li,.hero-copy>*,.hero>img,.hero h1 span{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}}
/* Equipment hover: 3D tilt, no outline */
.eq{perspective:900px}
.eq li::after{display:none}
.js .eq.in li,.eq li{transition:opacity .6s var(--ease),transform .45s var(--ease)}
.eq li:hover{transform:rotateX(8deg) rotateY(-10deg) translateY(-6px) scale(1.03)!important;box-shadow:0 18px 30px #0006;z-index:1}
.eq li:hover img{transform:none}
/* Fix: photos always visible (no clip reveal); simple fade instead */
.js .pic.rv{clip-path:none;opacity:0;transition:opacity 1s var(--ease)}
.js .pic.rv.in{opacity:1}
.js .eq li{opacity:1;transform:none}
/* Equipment: immersive full-bleed gapless grid */
.sec-feature{padding-bottom:0}
.eq{grid-column:1/-1;width:100vw;margin-left:calc(50% - 50vw);gap:0;margin-top:var(--s6)!important}
.eq li{aspect-ratio:4/3;overflow:hidden}
.eq img{filter:saturate(.85) brightness(.9);transition:filter .4s var(--ease),transform .6s var(--ease)}
.eq li:hover img{filter:none;transform:scale(1.06)!important}
.eq li:hover{transform:perspective(900px) rotateX(6deg) rotateY(-8deg) scale(1.04)!important}

@media (max-width:760px){.eq{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* One navy for the whole body, no dividers between sections */
body,.sec,.sec-feature{background:var(--navy-2)}
.sec+.sec{border-top:0}
/* Diagonal section splits: capability + support sit on a slightly lighter navy band cut at an angle */
:root{--cut:6vw}
#capability,#support{background:#0f2736;clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%);margin:calc(var(--cut) * -1) 0;padding-top:calc(var(--s7) + var(--cut));position:relative;z-index:1}
#capability{padding-bottom:var(--cut)}
#support{clip-path:polygon(0 0,100% var(--cut),100% 100%,0 100%);margin-bottom:0}
#about{padding-top:calc(var(--s7) + var(--cut))}
#products{position:relative;padding-bottom:calc(var(--s7) + var(--cut))}
/* Phone menu */
.menu-btn{display:none}
@media (max-width:760px){
  .menu-btn{display:grid;gap:5px;place-content:center;width:44px;height:44px;margin-left:auto;background:none;border:1px solid var(--rule);cursor:pointer}
  .menu-btn i{display:block;width:20px;height:2px;background:var(--ink);transition:transform var(--dur) var(--ease),opacity var(--dur)}
  .menu-btn[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded=true] i:nth-child(2){opacity:0}
  .menu-btn[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hdr nav{display:flex!important;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:3px solid var(--accent);padding:0 var(--gut);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .35s var(--ease),visibility .35s}
  .hdr nav.open{max-height:400px;visibility:visible}
  .hdr nav a{padding:var(--s2) 0;border-top:1px solid var(--rule);font-size:17px}
  .hdr nav a::after{display:none}
}
@media (max-width:760px){.menu-btn{border:0}}

/* Balanced line breaks: no single-character last lines */
h1,h2,h3{text-wrap:balance}p,dd{text-wrap:pretty}
html{overflow-x:clip}
/* One rhythm: gap above buttons = gap between paragraphs */
.acts{margin-top:var(--s3)}.c-head .acts,.c-head>.btn{padding-top:var(--s3)}.lead{margin-bottom:var(--s3)}
/* Hero photo: factory building (reception moved to About) */
@media (min-width:761px){.hero>img{transform:none;object-position:center 45%}}
.c-head .acts,.c-head>.btn{margin-top:0!important}
.c-head .acts,.c-head>.btn{padding-top:0!important;margin-top:var(--s3)!important}.c-head>.btn{padding:2px 4px!important}
/* Hero photo settles slowly on load */
@keyframes kb{from{transform:scale(1.12)}to{transform:none}}
.hero>img{animation:kb 12s cubic-bezier(.2,.7,.2,1) both}
.totop{clip-path:none}
@media (prefers-reduced-motion:reduce){.hero>img{animation:none}}
/* Key figures: full row under About, aligned to the three columns */
.kf{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col);margin-top:var(--s5);border-top:1px solid var(--rule-n)}
.kf-i{margin:0;padding-top:var(--s4);color:#d3dee4;font-size:17px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.kf-pre{flex-basis:100%;margin-bottom:var(--s1)}
.kf-n{font-size:clamp(44px,4.6vw,68px);line-height:1;font-weight:500;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kf-u{color:#fff;font-size:18px}
@media (max-width:760px){.kf{grid-template-columns:minmax(0,1fr);row-gap:var(--s4);margin-top:var(--s4)}.kf-i{padding-top:var(--s3);border-top:1px solid var(--rule-n)}.kf{border-top:0}}