@font-face{font-family:"Kanit";src:url(fonts/kanit-800i.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Kanit";src:url(fonts/kanit-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrumentsans-normal.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dmmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dmmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --paper:#f2efe8; --paper2:#e9e4d9; --white:#fbfaf6; --toner:#131416; --ink2:#38383a; --mute:#6d6a64; --rule:#d5cfc3;
  --orange:#ee5a1b; --orange-d:#c8460d; --wa:#1fa855;
  --pad:clamp(20px,5.2vw,72px); --max:1240px;
  --display:"Kanit","Arial Black",system-ui,sans-serif; --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--preview-bar,0px) + 72px)}
body{margin:0;background:var(--paper);color:var(--toner);font:400 17px/1.55 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);line-height:.98}
p{margin:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:calc(var(--preview-bar,0px) + 8px);z-index:99;background:var(--toner);color:#fff;padding:10px 14px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:sticky;top:var(--preview-bar,0);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--pad);background:rgba(242,239,232,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--rule)}
.brand{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand-mark{position:relative;width:30px;height:22px;border-radius:4px;background:var(--toner);flex:none}
.brand-mark::before{content:"";position:absolute;left:5px;right:5px;top:9px;height:3px;border-radius:2px;background:#4a4b4f}
.brand-mark i{position:absolute;left:8px;right:8px;top:-7px;height:12px;background:var(--white);border:1px solid var(--rule);border-radius:1px;animation:sheet 3.6s ease-in-out infinite}
@keyframes sheet{0%,20%{transform:translateY(0)}50%,70%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.brand-word{font:800 italic 25px/1 var(--display);color:var(--orange);letter-spacing:-.01em}
.nav{display:none}
.top-call{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--toner);color:var(--white);text-decoration:none;font:500 14px/1 var(--mono);letter-spacing:.01em}
.top-call .dot{width:7px;height:7px;border-radius:50%;background:#46d37b;box-shadow:0 0 0 3px rgba(70,211,123,.22)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--toner);color:var(--white)}
.btn-ink:hover{background:#000}
.btn-line{border-color:var(--toner);color:var(--toner);background:transparent}
.btn-line:hover{background:var(--toner);color:var(--white)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-d)}
.btn-wa{background:var(--wa);color:#fff;width:100%;font-size:17px;min-height:56px}
.btn-wa svg{width:22px;height:22px;fill:currentColor}

/* hero */
.hero{overflow-x:clip;padding:22px var(--pad) 56px;display:grid;gap:30px;max-width:var(--max);margin:0 auto}
h1{font:800 italic clamp(50px,13.6vw,112px)/.9 var(--display);letter-spacing:-.025em;margin-left:-.04em}
h1 .ln{display:block;overflow:hidden;padding:0 .08em .06em 0;margin-bottom:-.06em}
h1 .ln>span{display:block}
h1 em{font-style:inherit;color:var(--orange)}
.js h1 .ln>span{transform:translateY(105%);animation:feed .9s cubic-bezier(.2,.75,.15,1) forwards}
.js h1 .ln:nth-child(2)>span{animation-delay:.12s}.js h1 .ln:nth-child(3)>span{animation-delay:.24s}
@keyframes feed{to{transform:none}}
.lede{margin-top:20px;font-size:18px;line-height:1.5;color:var(--ink2);max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cta{display:grid;grid-template-columns:1.25fr 1fr}.cta .btn{padding:0 14px}
.hero-art{position:relative;margin:0 0 0 auto;width:100%;max-width:560px}
.hero-photo{border-radius:6px;overflow:hidden;aspect-ratio:720/755;background:var(--paper2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;transform-origin:50% 40%}
.js .hero-photo img{animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{transform:scale(1.08);filter:saturate(.8)}to{transform:none;filter:none}}
.hero-art figcaption{margin-top:10px;font:400 12.5px/1.3 var(--mono);color:var(--mute);letter-spacing:.02em}
.slip{position:absolute;right:6px;bottom:44px;width:min(56%,236px);filter:drop-shadow(0 18px 24px rgba(19,20,22,.22));transform:rotate(2.2deg)}
.slip::before{content:"";position:absolute;left:-10px;right:-10px;top:-12px;height:14px;border-radius:5px;background:var(--toner)}
.slip-feed{position:relative;background:var(--white);padding:14px 14px 12px;font:500 11px/1.65 var(--mono);color:#222;letter-spacing:.04em;display:flex;flex-direction:column;}
.slip-feed::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:8px;background:linear-gradient(-45deg,transparent 5px,var(--white) 0) 0 0/10px 8px,linear-gradient(45deg,transparent 5px,var(--white) 0) 0 0/10px 8px}
.slip-feed b{font:800 italic 18px/1.1 var(--display);letter-spacing:0;color:var(--orange);margin-bottom:2px}
.slip-feed .ok em{font-style:normal;background:var(--toner);color:var(--white);padding:0 5px;margin-left:4px}
.cut{display:block;height:0;border-top:1.5px dashed #9c988f;margin:7px 0}
.bars{display:block;height:28px;margin-top:8px;background:repeating-linear-gradient(90deg,#222 0 2px,transparent 2px 4px,#222 4px 5px,transparent 5px 8px,#222 8px 11px,transparent 11px 12px,#222 12px 13px,transparent 13px 16px)}
.js .slip-feed{animation:print 2.2s steps(14,end) .55s both}
@keyframes print{from{clip-path:polygon(0 0,100% 0,100% 0,0 0)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}

/* sections */
.sec-head{display:grid;gap:14px;margin-bottom:30px}
h2{font:800 italic clamp(38px,9.6vw,76px)/.95 var(--display);letter-spacing:-.02em}
.sec-head p{color:var(--ink2);max-width:46ch}
.shelves{padding:64px var(--pad);max-width:var(--max);margin:0 auto;border-top:1px solid var(--rule)}
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 14px;scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cards::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start}
.card{background:var(--white);border-radius:6px;overflow:hidden;display:grid;border:1px solid #e3ded3}
.card-img{aspect-ratio:4/4.2;overflow:hidden;background:var(--paper2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.04)}
.label{position:relative;padding:18px 18px 20px;display:grid;gap:8px}
.label::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--orange);transform-origin:left;transform:scaleX(.18);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card.in .label::before{transform:scaleX(1)}
.label-no{font:500 12px/1 var(--mono);color:var(--mute)}
.label h3{font:700 25px/1.05 var(--display);letter-spacing:-.01em}
.label p{color:var(--ink2);font-size:16px}
.label .models{font:400 12.5px/1.6 var(--mono);color:var(--toner);border-top:1px dashed var(--rule);padding-top:10px;margin-top:4px;letter-spacing:.01em}
.also{margin-top:26px;font-size:18px;line-height:1.45;max-width:52ch}
.also b{font-weight:600}

.service{padding:0 var(--pad) 64px;max-width:var(--max);margin:0 auto}
.svc{display:grid;gap:14px}
.svc-card{border-radius:6px;padding:28px 22px;background:var(--paper2);display:grid;gap:14px;align-content:start}
.svc-card h3{font:800 italic clamp(30px,7.6vw,46px)/1 var(--display);letter-spacing:-.015em}
.svc-card p{color:var(--ink2);max-width:40ch}
.svc-card .btn{justify-self:start;margin-top:6px}
.svc-dark{background:var(--toner);color:var(--white)}
.svc-dark p{color:#c9c6bf}

.stock{background:var(--toner);color:var(--white);padding:64px var(--pad);display:grid;gap:34px}
.stock-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:720px}
.sp{margin:0}
.sp img{border-radius:5px;width:100%;aspect-ratio:3/4.4;object-fit:cover}
.sp-b{margin-top:44px}
.sp figcaption{margin-top:10px;font:400 12.5px/1.3 var(--mono);color:#a9a59d}
.stock-text{display:grid;gap:18px;align-content:center;max-width:520px}
.stock-text p{color:#c9c6bf}
.stock-text .btn{justify-self:start;border-color:var(--white);color:var(--white)}
.stock-text .btn:hover{background:var(--white);color:var(--toner)}
.stock h2{font-size:clamp(36px,8.6vw,64px)}

/* quote */
.quote{padding:68px var(--pad);max-width:var(--max);margin:0 auto}
.quote-head{display:grid;gap:14px;margin-bottom:28px}
.quote-head p{color:var(--ink2);max-width:46ch}
.quote-grid{display:grid;gap:28px}
.qform{display:grid;gap:18px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend,.f>span{display:block;font:500 13px/1.2 var(--mono);color:var(--ink2);letter-spacing:.02em;margin-bottom:9px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px;border:1.5px solid var(--rule);background:var(--white);font-size:15.5px;transition:background .2s,border-color .2s,color .2s}
.chips input:checked+span{background:var(--toner);border-color:var(--toner);color:var(--white)}
.chips input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.f{display:block}
.f input,.f textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--rule);border-radius:8px;background:var(--white);font:400 16px/1.4 var(--sans);color:var(--toner);-webkit-appearance:none;appearance:none}
.f textarea{resize:vertical;min-height:76px}
.f input:focus,.f textarea:focus{border-color:var(--toner);outline:none;box-shadow:0 0 0 3px rgba(238,90,27,.25)}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row[hidden],fieldset[hidden],.f[hidden]{display:none}
.fine{font-size:13.5px;color:var(--mute);margin-top:-6px}
.ticket-wrap{position:relative}
.ticket{position:relative;background:var(--white);padding:20px 18px 18px;font:400 13px/1.55 var(--mono);color:#1d1d1d;box-shadow:0 1px 0 #e0dbd0,0 22px 40px -18px rgba(19,20,22,.35);max-width:380px}
.ticket::before{content:"";position:absolute;left:-10px;right:-10px;top:-10px;height:12px;border-radius:5px;background:var(--toner)}
.ticket::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:9px;background:linear-gradient(-45deg,transparent 5px,var(--white) 0) 0 0/10px 9px,linear-gradient(45deg,transparent 5px,var(--white) 0) 0 0/10px 9px}
.t-top{display:grid;gap:2px;text-align:center}
.t-top b{font:800 italic 22px/1.1 var(--display);color:var(--orange)}
.t-top span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#555}
#tlines{margin:0;display:grid;gap:5px}
#tlines div{display:grid;grid-template-columns:92px 1fr;gap:8px}
#tlines dt{color:#777;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding-top:1px}
#tlines dd{margin:0;word-break:break-word}
#tlines dd.flash{animation:ink .6s ease}
@keyframes ink{from{background:rgba(238,90,27,.22)}to{background:transparent}}
.t-foot{text-align:center;font-size:11.5px;letter-spacing:.12em}
.t-foot .bars{margin:8px auto 0;width:70%}

/* visit */
.visit{padding:64px var(--pad);background:var(--paper2);display:grid;gap:30px}
.visit-info{display:grid;gap:18px;align-content:start;max-width:560px}
address{font-style:normal;font:700 22px/1.3 var(--display);letter-spacing:-.005em}
.visit-btns{display:flex;flex-wrap:wrap;gap:10px}
.visit-btns .btn{flex:1 1 auto}
.land{font-size:15px;color:var(--ink2)}
.land a{font-family:var(--mono);color:var(--toner);display:inline-block;padding:12px 0}
.hours h3{font:500 13px/1 var(--mono);color:var(--ink2);margin-bottom:10px;letter-spacing:.02em}
.hours table{width:100%;border-collapse:collapse;font-size:16px}
.hours th,.hours td{padding:10px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400}
.hours td{text-align:right;font-family:var(--mono);font-size:14px}
.hours tr.today th,.hours tr.today td{font-weight:600;color:var(--orange-d)}
.hours tr.today th::after{content:"Today";margin-left:8px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--orange);color:#fff;padding:3px 6px;border-radius:3px;vertical-align:2px}
.note{margin-top:10px;font-size:14px;color:var(--mute)}
.map{position:relative;border-radius:6px;overflow:hidden;min-height:320px;background:#e4ded2 repeating-linear-gradient(0deg,transparent 0 47px,#d6cfc1 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,#d6cfc1 47px 48px)}
.map::before{content:"Printer Hut · Hafeez Centre";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 13px/1 var(--mono);background:var(--toner);color:#fff;padding:9px 12px;border-radius:4px}
.map iframe{position:relative;z-index:1}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block;filter:grayscale(.35) contrast(1.02)}

/* footer */
.foot{background:var(--toner);color:#d8d4cc;padding:56px var(--pad) 96px}
.foot-word{font:800 italic clamp(64px,18vw,190px)/.85 var(--display);color:var(--orange);letter-spacing:-.03em;margin-left:-.04em}
.foot-cols{display:grid;gap:16px;margin-top:30px;font-size:15.5px}
.foot-cols a{display:inline-block;padding:12px 0 8px;text-decoration:none;border-bottom:1px solid #55524c}
.foot-small{margin-top:30px;font:400 12px/1.5 var(--mono);color:#8b877f}
.wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .2s}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float:hover{transform:scale(1.06)}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (min-width:640px){
  .cards{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0}
  .svc{grid-template-columns:1fr 1fr}
  .svc-card{padding:36px 32px}
  .foot-cols{grid-template-columns:repeat(3,auto);justify-content:start;gap:56px}
}
@media (min-width:1000px){
  body{font-size:18px}
  .nav{display:flex;gap:30px;margin-left:auto;margin-right:24px}
  .nav a{text-decoration:none;font-size:15.5px;padding:12px 0;position:relative}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s}
  .nav a:hover::after{transform:scaleX(1)}
  .top{padding-top:14px;padding-bottom:14px}
  h1{font-size:clamp(64px,6.2vw,96px)}
  h1 .ln{white-space:nowrap}
  .hero{grid-template-columns:1fr 1fr;align-items:center;gap:64px;padding-top:40px;padding-bottom:80px;min-height:calc(100vh - var(--preview-bar,0px) - 76px);min-height:calc(100svh - var(--preview-bar,0px) - 76px)}
  .lede{font-size:20px;max-width:36ch;margin-top:28px}
  .cta{margin-top:34px}.cta .btn{flex:0 0 auto}
  .hero-art{max-width:none}
  .slip{right:-34px;bottom:-34px;width:232px;transform:rotate(3deg)}
  .hero-art figcaption{max-width:55%}
  .shelves{padding-top:100px;padding-bottom:100px}
  .sec-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:40px;margin-bottom:46px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .card-img{aspect-ratio:3/3.7}
  .service{padding-bottom:100px}
  .stock{grid-template-columns:auto 1fr;gap:80px;padding:100px max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
  .stock-photos{width:600px}
  .quote{padding-top:100px;padding-bottom:100px}
  .quote-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:40px;margin-bottom:46px}
  .quote-grid{grid-template-columns:1.25fr .75fr;gap:64px;align-items:start}
  .ticket-wrap{position:sticky;top:calc(var(--preview-bar,0px) + 110px)}
  .ticket{transform:rotate(1.2deg)}
  .visit{grid-template-columns:.9fr 1.1fr;gap:64px;padding:100px max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
  .map,.map iframe{min-height:560px}
  .foot{padding-left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));padding-right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
}
@media (max-width:400px){.top-call{padding:0 13px;font-size:13px;gap:7px}.brand-word{font-size:23px}.brand{gap:8px}.brand-mark{width:26px}}
@media (max-width:370px){.slip-feed{font-size:10px;padding:12px 11px 10px}.slip-feed b{font-size:16px}}
@media (max-width:350px){.top-call .dot{display:none}.brand-word{font-size:21px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js h1 .ln>span{transform:none}.js .rv{opacity:1;transform:none}.js .slip-feed{clip-path:none}}
.swipe{display:flex;justify-content:flex-end;gap:6px;font:500 12px/1 var(--mono);color:var(--mute);margin-top:4px}
.swipe span{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}
@media (min-width:640px){.swipe{display:none}}