:root{
  --night:#150e19; --night-2:#1f1526; --night-3:#2a1d33;
  --glow:#fff4e2; --glow-dim:rgba(255,244,226,.7); --glow-faint:rgba(255,244,226,.14);
  --opal:#f4efe7; --opal-2:#ebe4d9; --ink:#23182c; --ink-2:#5b4d63; --rule:rgba(35,24,44,.14);
  --rose:#e3287e; --rose-d:#c41a68; --sun:#f6a724; --sky:#19a9e1;
  --serif:"Instrument Serif","Times New Roman",serif; --sans:"Manrope",ui-sans-serif,system-ui,sans-serif; --mono:"Fragment Mono",ui-monospace,monospace;
  --pad:clamp(18px,5vw,80px); --hdr:62px; --bar:var(--preview-bar,0px); --ease:cubic-bezier(.2,.7,.1,1);
}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-normal.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(fonts/fragment-normal.woff2) format("woff2");font-weight:400;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--opal);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + var(--bar) + 8px)}
body{font-family:var(--sans);background:var(--night);color:var(--glow);font-size:17px;line-height:1.55;padding-top:var(--preview-bar,0);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:calc(var(--bar) + 8px);z-index:300;background:var(--glow);color:var(--ink);padding:10px 14px;border-radius:6px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1}
h2{font-size:clamp(44px,7vw,96px)}
em{font-style:italic}

/* header */
.top{position:sticky;top:var(--bar);z-index:100;height:var(--hdr);display:flex;align-items:center;gap:20px;padding:0 var(--pad);background:rgba(21,14,25,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--glow-faint)}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:44px;width:auto}
.top__nav{display:none;margin-left:auto;gap:30px;font-size:14.5px;font-weight:600}
.top__nav a{text-decoration:none;color:var(--glow-dim);padding:12px 0;transition:color .2s}
.top__nav a:hover{color:var(--glow)}
.top__call{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,244,226,.28);text-decoration:none;font-weight:700;font-size:14.5px;letter-spacing:.01em;transition:background .2s,border-color .2s}
.top__call svg{width:16px;height:16px;fill:var(--sun)}
.top__call:hover{background:var(--glow-faint);border-color:rgba(255,244,226,.5)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:0;transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn--rose{background:var(--rose);color:#fff;box-shadow:0 10px 30px -10px rgba(227,40,126,.7)}
.btn--rose:hover{background:var(--rose-d)}
.btn--line{border:1px solid rgba(255,244,226,.35);color:var(--glow)}
.btn--line:hover{border-color:var(--glow);background:var(--glow-faint)}
.btn--line-dark{border:1px solid rgba(35,24,44,.3);color:var(--ink)}
.btn--line-dark:hover{border-color:var(--ink)}

/* lightbox frame motif: a panel lit from behind, with a warm LED strip on its top edge */
.lb{position:relative;margin:0;background:#0d0910;overflow:hidden;border-radius:3px;box-shadow:0 0 0 1px rgba(255,244,226,.12),0 40px 90px -40px rgba(246,167,36,.45),0 20px 40px -20px rgba(0,0,0,.6)}
.lb img{width:100%;height:100%;object-fit:cover}
.lb__strip{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--glow) 18%,#ffe2b0 50%,var(--glow) 82%,transparent);box-shadow:0 0 14px 2px rgba(255,226,176,.75);opacity:.9;pointer-events:none}
.lb figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--glow);background:rgba(21,14,25,.72);padding:6px 10px;border-radius:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* hero */
.hero{position:relative;padding:18px var(--pad) 40px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;left:50%;top:6%;width:120%;height:70%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(246,167,36,.16),rgba(227,40,126,.06) 60%,transparent);pointer-events:none}
.hero__media{position:relative;height:min(42svh,380px);min-height:290px;margin-bottom:26px}
.lb--main{position:absolute;inset:0 18% 0 0}
.lb--main img{object-position:50% 40%}
.lb--second{position:absolute;right:0;bottom:-14px;width:40%;aspect-ratio:3/4}
.lb--second figcaption{left:8px;bottom:8px;font-size:10.5px}
.hero__copy{position:relative}
.hero h1{font-size:clamp(52px,14.6vw,148px);line-height:.92;letter-spacing:-.02em}
.hero h1 .ln{display:block}
.hero h1 em{color:var(--sun)}
.hero__lede{margin-top:14px;max-width:34ch;color:var(--glow-dim);font-size:16.5px;line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hero__cta .btn{flex:1 1 auto}
.hero__addr{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:rgba(255,244,226,.55)}

/* hero motion: panels flicker on like a backlit sign, type rises */
.js .lb--main img,.js .lb--second img{filter:brightness(.18) saturate(.3)}
.js .lb--main .lb__strip,.js .lb--second .lb__strip{opacity:0}
.js .hero h1 .ln,.js .hero__lede,.js .hero__cta,.js .hero__addr{opacity:0;transform:translateY(18px)}
.on .lb--main img{animation:flick 1.5s .25s steps(1,end) forwards,breathe 14s 1.8s ease-in-out infinite alternate}
.on .lb--second img{animation:flick 1.3s .75s steps(1,end) forwards}
.on .lb--main .lb__strip{animation:stripon 1.5s .25s steps(1,end) forwards}
.on .lb--second .lb__strip{animation:stripon 1.3s .75s steps(1,end) forwards}
.on .hero h1 .ln,.on .hero__lede,.on .hero__cta,.on .hero__addr{animation:rise .9s var(--ease) forwards}
.on .hero h1 .ln:nth-child(1){animation-delay:.15s}.on .hero h1 .ln:nth-child(2){animation-delay:.28s}
.on .hero__lede{animation-delay:.42s}.on .hero__cta{animation-delay:.52s}.on .hero__addr{animation-delay:.62s}
@keyframes flick{0%{filter:brightness(.18) saturate(.3)}9%{filter:brightness(.95) saturate(.9)}13%{filter:brightness(.25) saturate(.4)}20%{filter:brightness(1) saturate(1)}24%{filter:brightness(.55) saturate(.7)}30%,100%{filter:brightness(1.03) saturate(1.05)}}
@keyframes stripon{0%{opacity:0}9%{opacity:1}13%{opacity:.1}20%{opacity:1}24%{opacity:.4}30%,100%{opacity:.9}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes rise{to{opacity:1;transform:none}}
.on .lb--main img{filter:brightness(1.03) saturate(1.05)}

/* what we make */
.make{background:var(--opal);color:var(--ink);padding:84px 0 40px}
.make__head{display:grid;gap:14px;margin-bottom:36px}
.make__head p{color:var(--ink-2);max-width:36ch;font-size:17px}
.rows{list-style:none;border-top:1px solid var(--rule)}
.row{display:grid;gap:10px;padding:26px 0 24px;border-bottom:1px solid var(--rule);align-items:start;justify-items:start}
.lb--paper{box-shadow:0 0 0 1px rgba(35,24,44,.08),0 18px 30px -18px rgba(35,24,44,.45);border-radius:2px;background:var(--opal-2)}
.row__img{aspect-ratio:4/5}
.row h3{font-size:clamp(36px,9.6vw,60px);line-height:.98}
.items{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;font-size:15.5px;color:var(--ink-2);font-weight:500}
.items li:not(:last-child)::after{content:"/";margin:0 .5em;color:rgba(35,24,44,.28)}
.qbtn{margin-top:6px;min-height:44px;padding:0 0;background:none;border:0;border-bottom:1.5px solid var(--rose);color:var(--rose-d);font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.qbtn::after{content:"→";transition:transform .25s var(--ease)}
.qbtn:hover::after{transform:translateX(4px)}

/* recent work */
.work{padding:88px 0 80px;position:relative;isolation:isolate}
.work h2{margin-bottom:34px}
.wall{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{aspect-ratio:3/4}
.tile--giftset{grid-column:1/-1;aspect-ratio:4/3}
.tile--printer img{object-position:50% 60%}
.tile--printer{order:1}.tile--standee{order:2}.tile--giftset{order:3}.tile--laser{order:4}.tile--tissue{order:5}
.work__note{margin-top:22px;font-family:var(--mono);font-size:11.5px;color:rgba(255,244,226,.5);letter-spacing:.02em}

/* quote */
.quote{background:var(--opal);color:var(--ink);padding:84px 0}
.quote__grid{display:grid;gap:28px}
.quote__intro p{margin-top:14px;color:var(--ink-2);max-width:40ch}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.f{display:grid;gap:6px;min-width:0}
.f--full{grid-column:1/-1}
.f>span,.seg legend{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.f small{font-weight:500;color:var(--ink-2)}
.f input[type=text],.f input[type=date],.f select,.f textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid rgba(35,24,44,.2);background:#fffdf9;border-radius:6px;font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2323182c' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.f input[type=date]{min-width:0}
.f textarea{resize:vertical;min-height:84px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(227,40,126,.15)}
.f.bad select{border-color:var(--rose);box-shadow:0 0 0 3px rgba(227,40,126,.18)}
.seg{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg legend{margin-bottom:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;padding:8px 10px;border:1px solid rgba(35,24,44,.2);border-radius:6px;background:#fffdf9;font-size:14.5px;font-weight:600;line-height:1.25;transition:all .2s}
.seg input:checked+span{background:var(--ink);color:var(--glow);border-color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--rose);outline-offset:2px}
.filepick input[type=file]{font-size:14px;min-height:44px;padding:8px 0}
.filepick input[type=file]::file-selector-button{min-height:40px;margin-right:12px;padding:0 14px;border:1px solid rgba(35,24,44,.25);border-radius:999px;background:transparent;font-weight:700;cursor:pointer}
.filepick[hidden]{display:none}

.ticket{display:grid;gap:12px;align-content:start}
.ticket__card{position:relative;background:#fffdf9;border-radius:4px;padding:22px 20px 22px;border:1px dashed rgba(35,24,44,.32);box-shadow:0 22px 40px -28px rgba(35,24,44,.6)}
.ticket__card::before,.ticket__card::after{content:"";position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--opal);border:1px dashed rgba(35,24,44,.32);transform:translateY(-50%)}
.ticket__card::before{left:-9px;clip-path:inset(0 0 0 50%)}.ticket__card::after{right:-9px;clip-path:inset(0 50% 0 0)}
.ticket__to{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
.ticket__msg{font-family:var(--mono);font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;color:var(--ink);min-height:8em}
.btn--wa{background:#1fae5b;color:#fff;width:100%;min-height:56px;font-size:17px;box-shadow:0 12px 30px -14px rgba(31,174,91,.8)}
.btn--wa svg{width:22px;height:22px;fill:#fff}
.btn--wa:hover{background:#178f4a}
.ticket__hint{font-size:14px;color:var(--ink-2);text-align:center}

/* visit */
.visit{background:var(--opal-2);color:var(--ink);padding:84px 0}
.visit__grid{display:grid;gap:30px}
.visit address{font-style:normal;font-size:20px;line-height:1.45;margin-top:22px}
.hours{margin-top:24px;border-top:1px solid var(--rule)}
.hours div{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.hours dt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);padding-top:3px}
.hours dd{font-weight:600}
.hours small{display:block;font-weight:500;font-size:13.5px;color:var(--ink-2)}
.hours a{text-decoration:none;border-bottom:1px solid rgba(35,24,44,.3);display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
.visit__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.visit__cta .btn{flex:1 1 auto}
.visit__map{border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,24,44,.12),0 30px 50px -30px rgba(35,24,44,.6);aspect-ratio:4/3;background:#ddd}
.visit__map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85)}

/* footer */
.foot{background:var(--opal);color:var(--ink);padding:56px 0 110px}
.foot__in{display:grid;gap:26px}
.foot__logo{width:180px;height:auto}
.foot__cols{display:grid;gap:16px;font-size:15px;color:var(--ink-2)}
.foot__cols a{color:var(--ink);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.foot__cols a:hover{color:var(--rose-d)}
.foot__base{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);padding-top:18px;border-top:1px solid var(--rule)}

/* floating WhatsApp */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#1fae5b;box-shadow:0 12px 30px -8px rgba(0,0,0,.45),0 0 0 4px rgba(255,255,255,.12);transition:transform .25s var(--ease)}
.fab svg{width:28px;height:28px;fill:#fff}
.fab:hover{transform:scale(1.06)}
.js .fab{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.js .fab.show{opacity:1;transform:none;pointer-events:auto}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (min-width:560px){
  .row{grid-template-columns:150px 1fr;gap:26px}
  .foot__cols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  :root{--hdr:72px}
  .brand img{height:56px}
  .top__nav{display:flex}
  .top__call{margin-left:12px}
  .hero{min-height:calc(100svh - var(--hdr) - var(--bar));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:40px var(--pad) 56px;max-width:1440px;margin:0 auto}
  .hero::before{left:72%;top:10%;width:70%;height:90%}
  .hero__copy{order:-1}
  .hero__media{height:min(74svh,700px);margin:0}
  .lb--main{inset:0 0 0 22%}
  .lb--second{left:0;right:auto;bottom:8%;width:36%}
  .hero h1{font-size:clamp(84px,8.4vw,150px)}
  .hero__lede{font-size:19px;max-width:34ch;margin-top:26px}
  .hero__cta{margin-top:34px}
  .hero__cta .btn{flex:0 0 auto}
  .hero__addr{margin-top:30px;font-size:12.5px}
  .make{padding:130px 0 90px}
  .make__head{grid-template-columns:1fr 1fr;align-items:end;margin-bottom:56px}
  .make__head p{justify-self:end;font-size:19px}
  .row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;column-gap:48px;align-items:center;padding:34px 0;transition:padding .4s var(--ease)}
  .row h3{font-size:clamp(48px,4.6vw,68px)}
  .row .items{font-size:17px}
  .row .qbtn{margin:0;justify-self:end}
  .row:hover h3 em,.row:hover h3{color:var(--rose-d)}
  .row h3{transition:color .3s}
  .work{padding:130px 0 120px}
  .work h2{margin-bottom:48px}
  .wall{grid-template-columns:repeat(12,1fr);grid-auto-rows:118px;gap:20px}
  .tile{aspect-ratio:auto!important;grid-column:auto}
  .tile--printer{grid-column:1/5;grid-row:1/6}
  .tile--giftset{grid-column:5/10;grid-row:1/4}
  .tile--standee{grid-column:10/13;grid-row:1/6}
  .tile--laser{grid-column:5/8;grid-row:4/6}
  .tile--tissue{grid-column:8/10;grid-row:4/6}
  .quote{padding:130px 0}
  .quote__grid{grid-template-columns:1.2fr .8fr;column-gap:64px;row-gap:40px}
  .quote__intro{grid-column:1/-1;display:grid;grid-template-columns:1.2fr .8fr;column-gap:64px;align-items:end}
  .quote__intro p{margin:0;font-size:19px}
  .ticket{position:sticky;top:calc(var(--hdr) + var(--bar) + 24px)}
  .visit{padding:130px 0}
  .visit__grid{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
  .visit__map{aspect-ratio:5/4}
  .visit__cta .btn{flex:0 0 auto}
  .foot__in{grid-template-columns:260px 1fr;align-items:center}
  .foot__base{grid-column:1/-1}
}
@media (min-width:1500px){.hero{padding-left:80px;padding-right:80px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .lb img{filter:none!important}.js .lb__strip{opacity:.9!important}
  .js .hero h1 .ln,.js .hero__lede,.js .hero__cta,.js .hero__addr,.js .reveal{opacity:1!important;transform:none!important}
}