/* ============================================================
   NTI Printing — shared site stylesheet (chrome + primitives)
   Used by interior pages; mirrors index.html design system.
   ============================================================ */
:root{
  --green:#6FA044;        /* PSD primary grass green */
  --green-d:#5C8736;
  --green-title:#74A93E;  /* section / product titles */
  --leaf:#8FB954;         /* CIS lime */
  --teal:#357D54;         /* CIS mid green */
  --deep:#003F3A;         /* CIS deep teal */
  --mint-1:#9CDCC5;
  --mint-2:#8AD2B7;
  --grey:#595757;         /* CIS charcoal — text */
  --grey-2:#7c7b7b;
  --card:#F3F5F7;
  --line:#e8eae9;
  --orange:#E58A2E;
  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 18px 50px -22px rgba(0,63,58,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Mulish","Noto Sans TC",system-ui,sans-serif;color:var(--grey);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--leaf);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.zh{font-family:"Noto Sans TC",sans-serif}

/* ---------- top utility bar ---------- */
.topbar{background:var(--green);color:#fff;font-size:.82rem;font-weight:600}
.topbar .wrap{display:flex;align-items:center;gap:26px;height:38px}
.topbar a{display:inline-flex;align-items:center;gap:7px;opacity:.95;transition:opacity .2s}
.topbar a:hover{opacity:1}
.topbar .sp{flex:1}
.topbar svg{width:14px;height:14px}
.topbar .social{display:flex;gap:14px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.scrolled{box-shadow:0 6px 24px -16px rgba(0,0,0,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand .name{font-weight:800;font-size:1.25rem;color:var(--grey);letter-spacing:-.01em;line-height:1}
.brand .name .sup{color:var(--green);font-size:.7em;vertical-align:.5em}
.mark{width:38px;height:34px;flex:0 0 auto}
.menu{display:flex;align-items:center;gap:30px;margin-left:auto}
.menu>a{font-weight:700;font-size:.93rem;color:var(--grey);display:inline-flex;align-items:center;gap:5px;padding:6px 0;position:relative;transition:color .2s}
.menu>a.active{color:var(--green)}
.menu>a .ca{width:9px;height:9px;opacity:.6}
.menu>a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--green);transition:width .28s var(--ease)}
.menu>a.active::after{width:100%}
.menu>a:hover{color:var(--green)}
.menu>a:hover::after{width:100%}
.htools{display:flex;align-items:center;gap:18px;padding-left:8px;border-left:1px solid var(--line)}
.lang{font-weight:800;font-size:.86rem;color:var(--grey);display:inline-flex;align-items:center;gap:6px}
.lang .flag{width:18px;height:13px;border-radius:2px;overflow:hidden;display:inline-block;background:linear-gradient(#cf1b2b 33%,#fff 33% 66%,#1f3a93 66%)}
.icn{color:var(--grey-2);cursor:pointer;transition:color .2s}
.icn:hover{color:var(--green)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--grey);border-radius:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-weight:800;font-size:.92rem;padding:.82em 1.6em;border-radius:100px;cursor:pointer;border:none;font-family:inherit;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s;white-space:nowrap}
.btn-solid{background:var(--green);color:#fff;box-shadow:0 10px 22px -12px rgba(111,160,68,.9)}
.btn-solid:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(111,160,68,.95)}
.btn-out{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-out:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--green)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ============================================================
   CONTENT PRIMITIVES (interior pages)
   ============================================================ */
/* full-bleed photo hero (facility / differences / solutions) */
.phero{position:relative;line-height:0;background:#e9eeec}
.phero img{width:100%;height:clamp(320px,44vw,560px);object-fit:cover;object-position:center}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,30,.18),transparent 32%,transparent 70%,rgba(0,40,30,.10))}
.phero .tag{position:absolute;left:0;right:0;bottom:clamp(22px,4vw,46px);z-index:2}
.phero .tag .wrap{line-height:1.2}
.phero .eyebrow{color:#fff}
.phero .eyebrow::before{background:#fff}
.phero h1{color:#fff;font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,30,20,.4)}

/* section scaffolding */
.section{padding:clamp(54px,7vw,96px) 0}
.section.tight{padding:clamp(40px,5vw,68px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-size:.72rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--green)}
.eyebrow::before{content:"";width:28px;height:1.5px;background:var(--leaf)}
.sec-title{color:var(--green-title);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.02em;line-height:1.06}
.sec-sub{font-weight:800;color:var(--grey);font-size:clamp(1rem,1.5vw,1.2rem);margin-top:14px}
.lead,.prose{color:var(--grey-2);font-weight:500;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.85;max-width:62ch}
.prose+.prose{margin-top:18px}
.mt-s{margin-top:18px}.mt-m{margin-top:30px}.mt-l{margin-top:46px}

/* bracketed green link  e.g. [Take a factory tour] */
.blink{display:inline-flex;align-items:center;gap:.3em;color:var(--green);font-weight:800;font-size:.96rem;transition:gap .25s var(--ease),color .2s}
.blink::before{content:"[";opacity:.55}
.blink::after{content:"]";opacity:.55}
.blink:hover{color:var(--green-d);gap:.5em}

/* explorer: left tab list + right framed media */
.explorer{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.ex-list{display:flex;flex-direction:column;gap:2px}
.ex-list a{font-weight:700;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--grey);padding:11px 2px;border-bottom:1px solid var(--line);position:relative;transition:color .2s,padding .25s var(--ease)}
.ex-list a::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:3px;background:var(--leaf);opacity:0;transition:opacity .25s}
.ex-list a:hover,.ex-list a.active{color:var(--green);padding-left:10px}
.ex-list a:hover::before,.ex-list a.active::before{opacity:1}
.ex-media{position:relative;display:flex;align-items:center;gap:14px}
.ex-frame{flex:1;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);aspect-ratio:16/11}
.ex-frame img{width:100%;height:100%;object-fit:cover}
.ex-arrow{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--grey-2);display:grid;place-items:center;cursor:pointer;transition:all .25s var(--ease)}
.ex-arrow:hover{border-color:var(--green);color:var(--green);transform:scale(1.06)}

/* detail bullets */
.dtitle{font-weight:800;color:var(--grey);font-size:1.15rem;margin-bottom:14px}
.bullets{list-style:none;display:flex;flex-direction:column;gap:11px;max-width:64ch}
.bullets li{position:relative;padding-left:24px;color:var(--grey-2);font-weight:500;line-height:1.7}
.bullets li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--leaf);transform:rotate(45deg)}

/* inline application tags */
.applist{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.applist b{font-weight:700;font-size:.92rem;color:var(--teal);background:#eef5e9;border:1px solid #dcebcf;padding:.5em 1em;border-radius:100px}

/* feature list (NTI Difference / Client Benefits) */
/* difference / benefit list — inline "Label – description" lines per PSD */
.flist{display:block;margin-top:18px;max-width:none}
.flist .fi{display:block;padding:4px 0;border-bottom:none;color:var(--grey-2);font-weight:500;line-height:1.75;font-size:clamp(1rem,1.2vw,1.08rem)}
.flist .fi b{color:var(--grey);font-weight:800}
.flist .fi b::after{content:" \2013 "}

/* certification logo row */
.certrow{padding:clamp(40px,6vw,80px) 0}
.certrow img{max-width:920px;width:100%;margin:0 auto;opacity:.92}
/* printing solutions box explorer (per PSD) */
.ex-left .fac-list{margin-top:14px}
.ps-applications{margin-top:clamp(26px,3vw,38px)}
.ps-apps-text{color:var(--grey-2);font-weight:500;margin-top:10px}
.ps-mediawrap{display:flex;flex-direction:column;gap:16px}
.ps-frame{flex:1;background:#fff;box-shadow:none;border-radius:0;aspect-ratio:auto}
.ps-frame img{height:auto;object-fit:contain}
.ps-cap{color:var(--grey-2);font-weight:500;line-height:1.6;font-size:clamp(.95rem,1.1vw,1.05rem)}

/* green advantage stacked text block (per PSD) */
.ga-block .ga-h{color:var(--grey);font-weight:800;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.5;margin-top:clamp(28px,3.2vw,42px)}
.ga-block .ga-h:first-child{margin-top:0}
.ga-block .prose{max-width:none;margin-top:12px}

/* certification logo grid (differences page, per PSD) */
.certs{padding-top:0}
.certgrid{display:flex;align-items:center;justify-content:center;gap:clamp(40px,8vw,110px);flex-wrap:wrap}
.certgrid img{height:clamp(58px,8vw,90px);width:auto;opacity:.9}
.certgrid img.big{height:clamp(74px,10vw,116px)}

/* full-bleed image band */
.fullbleed{line-height:0}
.fullbleed img{width:100%;height:clamp(260px,32vw,460px);object-fit:cover}

/* facility banner — sliced straight from PSD hero */
.fac-banner{line-height:0}
.fac-banner img{width:100%;height:auto;display:block}

/* our facility & equipment (per Facility PSD) */
.fac-sub{font-weight:800;color:var(--grey);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.3}
.fac-explorer{align-items:center}
.fac-list a{border-bottom:none;color:var(--grey-2);font-weight:600;padding:9px 2px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fac-list a::before{display:none}
.fac-list a:hover{color:var(--green);padding-left:2px}
.fac-frame{aspect-ratio:1/1}

/* take-a-factory-tour (per Facility PSD) */
.section.tour{padding-bottom:0}
.tour-photo img{height:clamp(300px,38vw,620px)}
.tour-more{display:inline-flex;align-items:center;gap:.5em;color:var(--green-title);font-weight:800;font-size:clamp(1rem,1.25vw,1.12rem);transition:gap .25s var(--ease),color .2s}
.tour-more svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.tour-more:hover{color:var(--green-d)}
.tour-more:hover svg{transform:translateX(4px)}

/* two-up photo row */
.photorow{display:grid;grid-template-columns:1fr 1fr;gap:14px;line-height:0}
.photorow img{width:100%;height:clamp(220px,26vw,360px);object-fit:cover;border-radius:14px}
@media(max-width:720px){.photorow{grid-template-columns:1fr}}

/* split hero (green advantage) */
.shero{background:#fff;position:relative;overflow:hidden}
.shero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;min-height:clamp(420px,46vw,540px)}
.shero h1{font-weight:800;font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:1;color:var(--leaf);letter-spacing:-.025em}
.shero .sub{margin-top:20px;max-width:28ch;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--grey-2);font-weight:600}
.shero-img{align-self:end;display:flex;justify-content:flex-end}
.shero-img img{max-height:clamp(360px,46vw,540px);width:auto;object-fit:contain}
@media(max-width:820px){.shero .wrap{grid-template-columns:1fr;text-align:center;min-height:0;padding:40px 0}.shero .sub{margin-inline:auto}.shero-img{justify-content:center;margin-top:20px}}

/* ---------- floating quote widget ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:120;width:268px;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -18px rgba(0,63,58,.5);transition:transform .45s var(--ease),opacity .35s;background:#fff}
.fab.hide{transform:translateY(140%) scale(.9);opacity:0;pointer-events:none}
.fab-head{background:linear-gradient(120deg,var(--green),var(--teal));color:#fff;padding:16px 44px 16px 18px;position:relative}
.fab-head b{font-size:.98rem;font-weight:800;display:block}
.fab-head span{font-size:.76rem;opacity:.85}
.fab-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);border:none;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.fab-close:hover{background:rgba(255,255,255,.4)}
.fab-row{display:flex;align-items:center;gap:13px;padding:14px 18px;background:#eaf5e4;margin:10px;border-radius:11px;transition:background .2s,transform .2s}
.fab-row:hover{background:#dcefcf;transform:translateX(2px)}
.fab-row+.fab-row{margin-top:-2px}
.fab-ic{width:34px;height:34px;border-radius:9px;background:var(--green);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.fab-row b{font-size:.9rem;font-weight:800;color:var(--grey);display:block}
.fab-row span{font-size:.74rem;color:var(--grey-2)}
.fab-reopen{position:fixed;right:22px;bottom:22px;z-index:119;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;border:none;cursor:pointer;box-shadow:0 16px 36px -12px rgba(111,160,68,.9);display:none;place-items:center;transition:transform .25s}
.fab-reopen.show{display:grid}
.fab-reopen:hover{transform:scale(1.08)}

/* ---------- footer ---------- */
footer{background:var(--green);color:#fff}
footer .wrap{display:flex;align-items:center;gap:30px;min-height:108px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
footer .brand .name{color:#fff}
footer .brand .name .sup{color:#fff}
.fnav{display:flex;gap:28px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.fnav a{font-weight:700;font-size:.95rem;opacity:.95;transition:opacity .2s}
.fnav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.fsocial{display:flex;gap:14px}
.fsocial a{width:34px;height:34px;display:grid;place-items:center;color:#fff;opacity:.9;transition:opacity .2s,transform .2s}
.fsocial a:hover{opacity:1;transform:translateY(-2px)}
.subfoot{background:#5f8c39;color:rgba(255,255,255,.85);font-size:.8rem}
.subfoot .wrap{min-height:auto;display:flex;justify-content:space-between;padding:12px 40px;gap:14px;flex-wrap:wrap}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}.reveal[data-d="2"]{transition-delay:.2s}.reveal[data-d="3"]{transition-delay:.3s}

/* ---------- responsive chrome ---------- */
@media(max-width:900px){
  .menu,.htools .lang{display:none}
  .burger{display:flex}
  .explorer{grid-template-columns:1fr;gap:30px}
  footer .wrap{justify-content:center;text-align:center}
  .fnav{order:3;width:100%}
}
@media(max-width:560px){
  .topbar a span{display:none}
  .topbar .wrap{gap:16px}
  .fab{right:14px;bottom:14px;width:248px}
}