/* ============================================================
   ULTIMATE ZeD PRINTERS — press-sheet design system
   Ink & paper palette derived from the company logo.
   ============================================================ */
:root{
  --ink:#201d1e;            /* logo charcoal */
  --press:#2f5c3b;          /* logo green */
  --press-deep:#21452c;
  --forest-black:#121f17;   /* green-black, dark sections */
  --sage:#8ba392;
  --mist:#dfe7e1;
  --paper:#f5f6f2;
  --paper-hi:#fdfdfb;
  --foil:#c3a24b;           /* gold foil accent — used sparingly */
  --line:#20342644;
  --font-display:"Young Serif", Georgia, serif;
  --font-body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --gutter:clamp(20px, 4.5vw, 72px);
  --sec-pad:clamp(84px, 11vw, 160px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--press);color:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--press);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.04;letter-spacing:-.01em}
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);position:relative;scroll-margin-top:70px}

/* ---- eyebrow with registration dot ---- */
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--press);margin-bottom:26px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--press);flex:none}
.on-dark .eyebrow{color:var(--sage)}
.on-dark .eyebrow::before{border-color:var(--sage)}

/* ---- crop marks (press-sheet signature) ---- */
.cropmarks{position:absolute;inset:clamp(14px,2.2vw,30px);pointer-events:none;z-index:3}
.cropmarks i{position:absolute;width:22px;height:22px;opacity:.55}
.cropmarks i::before,.cropmarks i::after{content:"";position:absolute;background:currentColor}
.cropmarks i::before{width:100%;height:1px;top:0}
.cropmarks i::after{width:1px;height:100%;left:0}
.cropmarks i:nth-child(1){top:0;left:0}
.cropmarks i:nth-child(2){top:0;right:0;transform:scaleX(-1)}
.cropmarks i:nth-child(3){bottom:0;left:0;transform:scaleY(-1)}
.cropmarks i:nth-child(4){bottom:0;right:0;transform:scale(-1)}

/* ============ NAV — light over dark hero, flips when scrolled ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--paper-hi);transition:background .35s,box-shadow .35s,color .35s}
.nav.scrolled{background:rgba(245,246,242,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);color:var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:baseline;gap:10px;line-height:1}
.brand b{font-family:var(--font-display);font-weight:400;font-size:1.22rem;color:var(--paper-hi);white-space:nowrap;transition:color .35s}
.brand span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);transition:color .35s}
.nav.scrolled .brand b{color:var(--press)}
.nav.scrolled .brand span{color:var(--ink);opacity:.75}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:.86rem;font-weight:500;position:relative;padding:6px 0;color:#eef2efe0;transition:color .35s}
.nav.scrolled .nav-links a{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--foil);transform:scaleX(0);transform-origin:right;transition:transform .3s,background .35s}
.nav.scrolled .nav-links a::after{background:var(--press)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;background:var(--press);color:var(--paper);font-weight:500;font-size:.9rem;transition:background .25s,color .25s;will-change:transform}
.btn:hover{background:var(--press-deep)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.on-foil{background:var(--foil);color:var(--forest-black)}
.btn.on-foil:hover{background:#d4b667}
.nav .btn{padding:11px 22px;background:var(--paper-hi);color:var(--ink)}
.nav .btn:hover{background:var(--foil);color:var(--forest-black)}
header.nav.scrolled .nav-links .btn{background:var(--press);color:var(--paper)}
header.nav.scrolled .nav-links .btn:hover{background:var(--press-deep);color:var(--paper)}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:10px}
.nav-burger span{width:24px;height:2px;background:var(--paper-hi);transition:transform .3s,opacity .3s,background .35s}
.nav.scrolled .nav-burger span{background:var(--ink)}
body.mnav-lock .nav-burger span{background:var(--paper-hi)}
.mnav{position:fixed;inset:0;background:var(--forest-black);color:var(--paper);z-index:55;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);gap:8px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mnav.open{opacity:1;visibility:visible}
.mnav a{font-family:var(--font-display);font-size:clamp(2rem,9vw,3rem);padding:6px 0;border-bottom:1px solid #ffffff14}
body.mnav-lock{overflow:hidden}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--forest-black);color:var(--paper);overflow:hidden}
.hero-canvas{position:absolute;inset:0;z-index:0}
.hero-canvas canvas{width:100%;height:100%;display:block}
.hero-fallback{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 78% 12%, #2f5c3b66 0%, transparent 55%),
  radial-gradient(90% 80% at 12% 88%, #21452c88 0%, transparent 60%),
  var(--forest-black)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,#121f17e6 0%,#121f1740 42%,transparent 70%)}
.hero .cropmarks{color:var(--sage)}
.hero-in{position:relative;z-index:4;padding-bottom:clamp(32px,5vw,64px);width:100%}
.hero-kicker{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--sage);margin-bottom:22px}
.hero-kicker .sep{width:34px;height:1px;background:var(--sage);opacity:.6}
.hero h1{font-size:clamp(1.95rem,5.2vw,4.7rem);max-width:26ch;color:var(--paper-hi)}
.hero h1 em{font-style:normal;color:var(--foil)}
.hero-sub{max-width:52ch;margin-top:26px;color:#dfe7e1cc;font-size:clamp(.98rem,1.3vw,1.12rem)}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* ============ MARQUEE ============ */
.marquee{background:var(--press);color:var(--paper);overflow:hidden;padding:15px 0;white-space:nowrap;position:relative}
.marquee-track{display:inline-flex;gap:0;animation:mq 34s linear infinite;will-change:transform}
.marquee span{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;padding:0 26px;position:relative}
.marquee span::after{content:"✳";position:absolute;right:-8px;opacity:.55}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ LEGACY / TIMELINE ============ */
.legacy-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(48px,7vw,96px)}
.legacy-head h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.legacy-head p{color:#20342699;max-width:46ch}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink);counter-reset:none}
.tl li{padding:30px clamp(16px,2vw,32px) 8px 0;position:relative}
.tl li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2.5px solid var(--press)}
.tl .yr{font-family:var(--font-display);font-size:clamp(1.7rem,2.8vw,2.5rem);color:var(--press);display:block;margin-bottom:12px}
.tl h3{font-family:var(--font-body);font-weight:600;font-size:1rem;margin-bottom:8px}
.tl p{font-size:.9rem;color:#203426a6}

/* ============ PROCESS (dark) ============ */
.process{background:var(--forest-black);color:var(--paper)}
.process h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:16ch}
.process .lede{color:#dfe7e1a6;max-width:52ch;margin-top:18px}
.steps{margin-top:clamp(44px,6vw,80px);border-top:1px solid #ffffff1c}
.step{display:grid;grid-template-columns:110px 1fr 1.2fr;gap:clamp(18px,3vw,56px);padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid #ffffff1c;align-items:start}
.step .no{font-family:var(--font-mono);color:var(--foil);font-size:.8rem;letter-spacing:.18em;padding-top:8px}
.step h3{font-size:clamp(1.35rem,2.3vw,1.9rem);color:var(--paper-hi)}
.step .sk{margin-top:10px;font-size:.85rem;color:#8ba392}
.step ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
.step li{font-size:.92rem;color:#dfe7e1c9;padding-left:18px;position:relative}
.step li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--foil)}

/* ============ WORK / GALLERY ============ */
.work-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:38px}
.work-head h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.work-count{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:#20342699;text-transform:uppercase}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filters button{padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:.84rem;font-weight:500;transition:background .22s,color .22s,box-shadow .22s;color:#203426cc}
.filters button:hover{box-shadow:inset 0 0 0 1.5px var(--press);color:var(--press)}
.filters button.active{background:var(--press);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--press)}
.filters button b{font-weight:500;font-family:var(--font-mono);font-size:.66rem;opacity:.7;margin-left:6px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;overflow:hidden;border-radius:10px;background:var(--mist);aspect-ratio:1/1}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.26,1)}
@media(hover:hover){.tile:hover img{transform:scale(1.045)}}
.tile figcaption{position:absolute;left:10px;bottom:10px;background:#121f17d9;color:var(--paper);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:6px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
@media(hover:hover){.tile:hover figcaption{opacity:1;transform:none}}

/* ============ CLIENTS ============ */
.clients{background:var(--mist)}
.clients-in{display:grid;grid-template-columns:.9fr 1.5fr;gap:clamp(32px,5vw,90px)}
.clients h2{font-size:clamp(1.9rem,3.8vw,3rem);max-width:12ch}
.clients .note{margin-top:18px;color:#20342699;max-width:38ch;font-size:.95rem}
.clients .figures{margin-top:30px;display:flex;gap:26px}
.clients .figures div b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--press);line-height:1}
.clients .figures div span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#20342680}
.ledger{border-top:1.5px solid var(--ink)}
.ghead{display:flex;justify-content:space-between;align-items:baseline;padding:22px 4px 10px;color:var(--press)}
.ghead .gcount{color:#20342666}
.lrow{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:baseline;gap:16px;padding:15px 16px;border-bottom:1px solid #20342626;isolation:isolate;transition:color .3s}
.lrow::before{content:"";position:absolute;inset:0;background:var(--press);transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.22,.8,.26,1);z-index:-1}
.lrow .no{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--press);transition:color .3s}
.lrow .name{font-family:var(--font-display);font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.15}
@media(hover:hover){
  .lrow:hover::before{transform:scaleX(1)}
  .lrow:hover{color:var(--paper)}
  .lrow:hover .no{color:var(--foil)}
}
@media(max-width:640px){.lrow{grid-template-columns:42px 1fr;padding:13px 10px}.clients .figures{gap:20px}}

/* ============ STUDIO / GLOBAL ============ */
.studio-head{max-width:820px;margin-bottom:clamp(44px,6vw,80px)}
.studio-head h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.studio-head p{margin-top:18px;color:#20342699;max-width:58ch}
.offices{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.office{border-radius:16px;padding:clamp(26px,3.4vw,44px);background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden}
.office.dark{background:var(--forest-black);color:var(--paper);box-shadow:none}
.office .city{font-family:var(--font-display);font-size:clamp(1.7rem,2.8vw,2.4rem);margin:14px 0 6px}
.office .role{font-size:.9rem;color:#20342699;margin-bottom:22px}
.office.dark .role{color:#8ba392}
.office address{font-style:normal;font-size:.95rem;line-height:1.75}
.office address a{border-bottom:1px solid currentColor;transition:opacity .2s}
.office address a:hover{opacity:.65}
.office .mono{color:var(--press)}
.office.dark .mono{color:var(--foil)}
.facility{margin-top:16px;border-radius:16px;background:var(--press);color:var(--paper);padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(22px,3vw,56px);align-items:center}
.facility h3{font-size:clamp(1.4rem,2.4vw,2rem);max-width:14ch}
.facility p{font-size:.93rem;color:#f5f6f2cf}
.facility .mono{color:#e8d08a;display:block;margin-bottom:10px}

/* ============ CTA ============ */
.cta{background:var(--forest-black);color:var(--paper);text-align:center;overflow:hidden}
.cta .cropmarks{color:var(--sage)}
.cta h2{font-size:clamp(2.4rem,6.4vw,5.4rem);max-width:14ch;margin:0 auto}
.cta h2 em{font-style:normal;color:var(--foil)}
.cta p{margin:22px auto 0;max-width:46ch;color:#dfe7e1b3}
.cta-row{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}

/* ============ FOOTER ============ */
footer{background:var(--forest-black);color:#dfe7e1a6;border-top:1px solid #ffffff14;padding:34px 0}
.foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-size:.8rem}
.foot .mono{font-size:.62rem;color:#8ba392}


/* ---- hero line masks ---- */
.hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hl i{display:inline-block;font-style:normal;will-change:transform}
.hl i em{font-style:normal;color:var(--foil)}


/* ---- hero portfolio marquee (desktop) ---- */
.heromq{position:absolute;top:-5%;bottom:-5%;right:clamp(14px,3.6vw,76px);width:min(34vw,480px);display:flex;gap:16px;z-index:2;pointer-events:none;transform:rotate(-3deg);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.hmq-col{flex:1;overflow:hidden}
.hmq-track{display:flex;flex-direction:column;animation:hmqUp 44s linear infinite;will-change:transform}
.hmq-col.down .hmq-track{animation:hmqDown 56s linear infinite}
@keyframes hmqUp{to{transform:translateY(-50%)}}
@keyframes hmqDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.heromq.paused .hmq-track{animation-play-state:paused}
.hmq-card{background:var(--paper-hi);padding:8px 8px 26px;border-radius:6px;box-shadow:0 18px 44px -16px #00000073;margin-bottom:16px;position:relative}
.hmq-card img{width:100%;height:auto;border-radius:3px;display:block}
.hmq-card .tag{position:absolute;left:10px;bottom:7px;font-family:var(--font-mono);font-size:.53rem;letter-spacing:.13em;text-transform:uppercase;color:#20342699}
@media(max-width:1300px){.heromq{width:min(30vw,410px)}.hero h1{font-size:clamp(1.95rem,4.85vw,4.7rem)}}
@media(max-width:1120px){
  .heromq{position:relative;top:auto;bottom:auto;right:auto;order:2;width:auto;height:min(46vh,360px);display:flex;gap:10px;margin:26px var(--gutter) 40px;transform:rotate(-2deg)}
  .hmq-card{padding:6px 6px 20px;margin-bottom:10px;border-radius:5px}
  .hmq-card .tag{font-size:.48rem;left:8px;bottom:5px}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

@media(max-width:480px){
  .hero h1{font-size:1.72rem}
  .hero-kicker{font-size:.58rem;gap:10px;row-gap:6px;margin-bottom:16px}
  .hero-kicker .sep{width:22px}
  .hero-cta{flex-wrap:nowrap;gap:9px;margin-top:28px}
  .hero-cta .btn{padding:11px 14px;font-size:.8rem;white-space:nowrap;flex:none;gap:6px}
}
@media(max-width:1120px){
  .hero{padding-top:104px}
  .hero-in{order:1;padding-bottom:0}
  .hero::after{background:linear-gradient(to top,#121f17c9 0%,#121f172e 46%,transparent 76%)}
}



/* ---- graphic design & digital media (press-green band) ---- */
.digital{background:var(--press);color:var(--paper)}
.digital .eyebrow{color:#e8d08a}
.digital .eyebrow::before{border-color:#e8d08a}
.digital h2{font-size:clamp(2rem,4.4vw,3.6rem);color:var(--paper-hi);max-width:14ch}
.digital .lede{margin-top:18px;color:#f5f6f2c9;max-width:46ch}
.digital-in{display:grid;grid-template-columns:1fr 1.15fr;grid-template-areas:"txt photo" "svcs photo";gap:clamp(28px,4vw,72px);align-items:start}
.digital-in>div:first-child{grid-area:txt}
.dstack{grid-area:photo;position:sticky;top:104px}
.tools{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px}
.tools span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff38;color:#f5f6f2d9}
.tools .tl-label{box-shadow:none;padding-left:0;color:#8fd4a6}

.dboard{position:absolute;width:56%;will-change:transform}
.dboard-in{background:var(--paper-hi);padding:9px 9px 27px;border-radius:8px;box-shadow:0 28px 64px -22px #0e241680;animation:float 8s ease-in-out infinite;transition:transform .4s cubic-bezier(.22,.8,.26,1)}
.dboard-in img{width:100%;height:auto;border-radius:4px;display:block}
.dboard .tag{position:absolute;left:12px;bottom:8px;font-family:var(--font-mono);font-size:.53rem;letter-spacing:.13em;text-transform:uppercase;color:#20342699}
.dboard.dphoto{position:relative;width:100%;top:auto;right:auto}
.dboard.dphoto .dboard-in{rotate:2deg}
.dstack{display:flex;align-items:center}
.digital .dstack{position:sticky;top:104px}
@media(hover:hover){.dboard-in:hover{animation-play-state:paused;transform:scale(1.035) rotate(0deg)}}
@media(max-width:860px){
  .dstack{min-height:auto;margin-top:8px}
  .dboard.dphoto .dboard-in{rotate:1.2deg}
}
.svc-grid{grid-area:svcs;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff2b;margin-top:clamp(30px,3vw,44px)}
.svc{display:flex;gap:10px;align-items:baseline;padding:14px 10px 14px 2px;border-bottom:1px solid #ffffff1f;font-size:.88rem;font-weight:500;color:#f5f6f2e3;transition:color .25s;line-height:1.4}
.svc::before{content:"+";font-family:var(--font-mono);color:var(--foil);flex:none;font-size:.8rem}
@media(hover:hover){.svc:hover{color:#ffe9a8}}
.svc-grid .svc:nth-child(odd){margin-right:clamp(8px,1.4vw,20px)}
@media(max-width:860px){.digital-in{grid-template-columns:1fr;grid-template-areas:"txt" "photo" "svcs"}.digital .dstack{position:relative;top:auto}}
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr;margin-top:26px}
  .svc-grid .svc:nth-child(odd){margin-right:0}
  .svc{padding:11px 6px 11px 2px;font-size:.85rem;gap:9px}
  .svc::before{font-size:.72rem}
}
/* ---- finishes: swatch-book specimens ---- */
.finishes{background:var(--paper)}
.fin-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.fin-head h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.fin-head p{color:#20342699;max-width:44ch}
.fin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fin{position:relative;border-radius:16px;overflow:hidden;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;transition:box-shadow .3s}
@media(hover:hover){.fin:hover{box-shadow:inset 0 0 0 1px var(--press),0 18px 44px -22px #12201740}}
.fin .spec{aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden}
.finphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .55s cubic-bezier(.22,.8,.26,1);will-change:transform}
@media(hover:hover){.fin:hover .finphoto{transform:scale(1.045)}}
.boxsvg{width:min(80%,235px);height:auto;transition:transform .5s cubic-bezier(.22,.8,.26,1);will-change:transform}
@media(hover:hover){.fin:hover .boxsvg{transform:translateY(-7px) rotate(-2deg) scale(1.03)}}
.fin .spec .corner{position:absolute;z-index:2;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;bottom:10px;background:#121f17d4;color:#f5f6f2!important;padding:5px 9px;border-radius:6px}
.fin .sweep{position:absolute;inset:-20%;z-index:3;background:linear-gradient(115deg,transparent 38%,#ffffffb3 50%,transparent 62%);transform:translateX(-120%);z-index:2;pointer-events:none}
@media(hover:hover){.fin:hover .sweep{animation:sweep .9s ease}}
@keyframes sweep{to{transform:translateX(120%)}}
.fin .body{padding:16px 20px 22px}
.fin .body .mono{color:var(--press);display:block;margin-bottom:8px}
.fin h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}
.fin .body p{font-size:.85rem;color:#20342699;margin-top:6px;max-width:32ch}
/* gold + silver foil specimens */
.fin-gold .spec,.fin-silver .spec{background:linear-gradient(160deg,#eef1ec,#e2e8e2)}
.fin-gold .spec .corner{color:#8a6d23b3}
.fin-silver .spec .corner{color:#20342666}
/* spot UV: glossy letters on press green */
.fin-uv .spec{background:linear-gradient(160deg,#eef1ec,#e2e8e2)}
.fin-uv .spec .corner{color:#20342666}
/* lamination: matt | gloss split */
.fin-lam .spec{background:linear-gradient(160deg,#eef1ec,#e2e8e2)}
.fin-lam .spec .corner.l{left:14px;color:#20342666}
.fin-lam .spec .corner.r{right:14px;color:#20342666}
/* emboss */
.fin-emboss .spec{background:linear-gradient(160deg,#eef1ec,#e2e8e2)}
.fin-emboss .spec .corner{color:#20342666}
/* holographic */
.fin-holo .spec{background:linear-gradient(160deg,#eef1ec,#e2e8e2)}
/* die-cut carton net */
.fin-die .spec{background:linear-gradient(160deg,#eef1ec,#e2e8e2)}
@media(hover:hover){.fin-die:hover .dieg{animation:march 1.2s linear infinite}}
@keyframes march{to{stroke-dashoffset:-18}}
.dieg{will-change:stroke-dashoffset}
.fin-die .spec .corner{color:#20342666}
@media(max-width:1180px){.fin-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.fin-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .fin-head{grid-template-columns:1fr}
  .fin-grid{grid-template-columns:1fr 1fr;gap:10px}
  .fin .body{padding:12px 13px 16px}
  .fin h3{font-size:.98rem}
  .fin .body p{font-size:.74rem;margin-top:4px}
  .fin .body .mono{font-size:.56rem;margin-bottom:5px}
  .fin .spec .corner{font-size:.48rem;padding:4px 7px;bottom:8px}
}

/* ---- category filters ---- */
.catbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.catcard{display:inline-flex;align-items:baseline;gap:9px;padding:11px 20px;border-radius:999px;font-size:.87rem;font-weight:500;color:#203426cc;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .22s,color .22s,box-shadow .22s;background:var(--paper-hi)}
.catcard .cnt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;color:var(--press);opacity:.75;transition:color .22s}
@media(hover:hover){.catcard:hover{box-shadow:inset 0 0 0 1.5px var(--press);color:var(--press)}}
.catcard.active{background:var(--press);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--press)}
.catcard.active .cnt{color:var(--foil);opacity:1}
@media(max-width:760px){.catbar{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.catbar::-webkit-scrollbar{display:none}.catcard{padding:9px 16px;font-size:.82rem;white-space:nowrap;flex:none}}
.tile{cursor:zoom-in}
.grid.web{grid-template-columns:repeat(3,1fr)}
.grid.web .tile{aspect-ratio:16/10}
.grid.web .tile img{object-position:top}
@media(max-width:860px){.grid.web{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid.web{grid-template-columns:1fr}}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;z-index:90;background:#121f17f0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:min(86vw,900px);max-height:82vh;border-radius:8px;box-shadow:0 30px 90px -20px #000}
.lb .lb-cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--sage);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.lb button{position:absolute;color:var(--paper);width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ffffff3d;display:grid;place-items:center;font-size:1.15rem;transition:background .2s}
.lb button:hover{background:#ffffff1f}
.lb .lb-x{top:22px;right:22px}
.lb .lb-p{left:18px;top:50%;translate:0 -50%}
.lb .lb-n{right:18px;top:50%;translate:0 -50%}
@media(max-width:640px){.lb .lb-p{left:8px}.lb .lb-n{right:8px}}
body.lb-lock{overflow:hidden}

/* ============ reveal defaults (no-JS safe) ============ */
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(36px)}
.js.reduced [data-reveal]{opacity:1;transform:none}

/* ============ responsive ============ */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .step{grid-template-columns:70px 1fr;grid-template-rows:auto auto}
  .step ul{grid-column:2}
}
@media(max-width:640px){
  .step{grid-template-columns:1fr;grid-template-rows:auto;gap:10px;padding:22px 0}
  .step .no{padding-top:0}
  .step ul{grid-column:auto}
}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .legacy-head,.clients-in,.offices,.facility{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;border-top:0;position:relative;padding-left:30px}
  .tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(to bottom,var(--press) 0%,#20342640 100%)}
  .tl li{border-top:0;padding:0 0 34px 0}
  .tl li:last-child{padding-bottom:0}
  .tl li::before{left:-30px;top:5px}
  .tl .yr{margin-bottom:8px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .step ul{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .dboard-in{animation:none}
  .hmq-track{animation:none}
  .fin .sweep,.fin-die .dieg{animation:none!important}.boxsvg,.finphoto{transition:none}
  .tile img,.tile figcaption{transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   WORDPRESS SHELL
   Classes the demo carried as inline styles, plus the handful of
   resets Elementor needs so its wrappers stay out of the layout.
   ============================================================ */
.uzp-skip{position:absolute;left:-9999px}
.uzp-skip:focus{left:16px;top:16px;z-index:99;background:var(--press);color:var(--paper);padding:10px 16px;border-radius:6px}
.foot-name{font-family:var(--font-display);font-weight:400;color:var(--paper)}
.uzp-prose{max-width:70ch}
.uzp-prose h2{font-size:clamp(2rem,4.4vw,3.6rem);margin-bottom:24px}
.uzp-prose p{margin-bottom:1em}
.uzp-prose a{color:var(--press);border-bottom:1px solid currentColor}

/* Elementor wrappers are pure plumbing — the design system owns the layout. */
.elementor-section,.elementor-container,.elementor-column,.elementor-widget-wrap,
.elementor-element,.e-con,.e-con-inner,.e-parent,.e-child{max-width:none}
.elementor-widget-wrap{padding:0}
.uzp-el>.elementor-widget-container{margin:0;padding:0}
body.elementor-page .site-main,body.elementor-page main{padding:0}

/* The editor needs every section visible and scrollable. */
.elementor-editor-active [data-reveal],
.elementor-editor-preview [data-reveal]{opacity:1!important;transform:none!important}
.elementor-editor-active .hero,.elementor-editor-preview .hero{min-height:70svh}

/* Screen-reader-only text used by the widgets. */
.uzp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* <picture> is a delivery wrapper only — the <img> keeps the layout. */
picture{display:contents}

/* Build credit — sits with the other footer mono lines, foil on hover. */
.foot-credit a{color:var(--sage);border-bottom:1px solid #8ba39240;transition:color .25s,border-color .25s}
.foot-credit a:hover,.foot-credit a:focus-visible{color:var(--foil);border-bottom-color:var(--foil)}
@media(max-width:640px){.foot{gap:12px}}

/* ---- fixed header while the mobile menu is open ----
   The bar stays up so the burger remains reachable, but it must not keep the
   scrolled state's cream background — that paints a light slab across the top
   of the dark fullscreen menu. Everything reverts to the over-dark treatment
   for as long as the menu is open. */
body.mnav-lock .nav,
body.mnav-lock .nav.scrolled{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  color:var(--paper-hi);
}
body.mnav-lock .nav .brand b,
body.mnav-lock .nav.scrolled .brand b{color:var(--paper-hi)}
body.mnav-lock .nav .brand span,
body.mnav-lock .nav.scrolled .brand span{color:var(--sage);opacity:1}
body.mnav-lock .nav-burger span,
body.mnav-lock .nav.scrolled .nav-burger span{background:var(--paper-hi)}

/* ---- mobile menu: fit and reachability ----
   The approved design centres eight links in the viewport, which holds on a
   modern phone held upright and breaks everywhere else: on a 320x568 screen
   the first and last links are clipped with no way to reach them, on an
   iPhone SE the first sits under the fixed header, and in landscape roughly
   200px of the menu is off the top. The panel now reserves the header's
   height, scrolls once it has to, and sizes type against the shorter of width
   and height — so it keeps the intended scale wherever it already fitted. */
.mnav{
  justify-content:flex-start;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-top:calc(76px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}
/* Centres while there is room, scrolls cleanly once there is not. */
.mnav>:first-child{margin-top:auto}
.mnav>:last-child{margin-bottom:auto}
.mnav a{font-size:clamp(1.25rem, min(9vw, 5.4vh), 3rem)}
/* Landscape phones: scrolling a centred overlay is awkward, and there is
   plenty of width going spare, so the type steps down until all eight fit. */
@media(max-height:560px){
  .mnav{gap:2px}
  .mnav a{font-size:clamp(1rem, min(9vw, 4.2vh), 2rem);padding:3px 0;line-height:1.35}
}