:root{
  --paper:#f2efe7; --paper2:#e7e2d5; --card:#faf8f3;
  --ink:#121314; --ink2:#26282b; --mute:#5b5e62; --line:rgba(18,19,20,.14); --line2:rgba(18,19,20,.28);
  --yellow:#ffd21a; --yellow2:#f3c400; --cyan:#0a9fd6; --mag:#e2007a;
  --pb:var(--preview-bar,0px); --head:64px;
  --pad:clamp(18px,5vw,64px); --max:1240px;
  --wide:"Archivo",system-ui,sans-serif; --mono:"Plex Mono",ui-monospace,monospace;
}
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + var(--pb) + 14px)}
body{margin:0;padding-top:var(--pb);background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--wide);font-stretch:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--wide);font-stretch:125%;font-weight:800;letter-spacing:-.025em;line-height:.95}
p{margin:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:calc(var(--pb) + 8px);z-index:100;background:var(--ink);color:#fff;padding:10px 14px}

/* header */
.top{position:sticky;top:var(--pb);z-index:40;height:var(--head);display:flex;align-items:center;gap:20px;padding:0 var(--pad);background:rgba(242,239,231,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.mark-sq{display:grid;grid-template-columns:repeat(2,9px);gap:2px}
.mark-sq i{width:9px;height:9px;display:block}
.mark-sq i:nth-child(1){background:var(--cyan)}.mark-sq i:nth-child(2){background:var(--mag)}.mark-sq i:nth-child(3){background:var(--yellow)}.mark-sq i:nth-child(4){background:var(--ink)}
.mark-word{display:flex;flex-direction:column;line-height:1}
.mark-word b{font-stretch:125%;font-weight:850;font-size:18px;letter-spacing:.01em}
.mark-word small{font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--mute);margin-top:4px;text-transform:uppercase}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:12px 14px;border-radius:999px}
.nav a:hover{background:var(--paper2)}
.top-call{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:650;font-size:15px}
.top-call svg{width:17px;height:17px;fill:var(--yellow)}
.top-call span{display:none}
@media(min-width:480px){.top-call span{display:inline}}
@media(min-width:900px){.nav{display:flex}.top-call{margin-left:8px}}

/* hero */
.hero{padding:clamp(28px,6vw,72px) var(--pad) 0;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto}
.hero-type{display:grid;gap:22px}
h1{font-size:clamp(46px,12.6vw,132px);font-weight:850;letter-spacing:-.035em;line-height:.9}
h1 .ln{display:block;overflow:hidden}
h1 .ln:last-child{color:var(--ink)}
h1 .ln:last-child::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.06em;background:var(--yellow);vertical-align:baseline}
.lede{font-size:clamp(17px,2.1vw,19px);color:var(--ink2);max-width:46ch}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--ink);transition:transform .2s,background .2s,color .2s;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-line{background:transparent;color:var(--ink)}
.btn-yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
@media(min-width:900px){
  .hero-type{grid-template-columns:1.55fr 1fr;align-items:end;gap:48px}
  .hero-side{padding-bottom:10px}
}

/* the flex sheet */
.sheet{position:relative;margin:clamp(34px,6vw,64px) 0 0;padding:26px 0 0 26px}
.sheet-flex{position:relative;background:var(--yellow);padding:clamp(14px,2.4vw,26px);box-shadow:0 1px 0 rgba(0,0,0,.08),0 24px 50px -24px rgba(60,45,0,.45)}
.sheet-photo{position:relative;overflow:hidden;aspect-ratio:1280/576;background:#333}
.sheet-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08) translateX(2%);animation:feed 18s ease-in-out infinite alternate}
@keyframes feed{to{transform:scale(1.08) translateX(-2%)}}
.sheet figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:500 11.5px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:rgba(18,19,20,.75)}
.eye{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,var(--paper) 0 3px,#9a9a9a 3.5px 5px,#d9d9d9 5.5px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);z-index:2}
.e1{left:6px;top:6px}.e2{right:6px;top:6px}.e3{left:6px;bottom:6px}.e4{right:6px;bottom:6px}
@media(min-width:700px){.eye{width:16px;height:16px;background:radial-gradient(circle,var(--paper) 0 4px,#9a9a9a 4.5px 6px,#dadada 6.5px)}.e1{left:9px;top:9px}.e2{right:9px;top:9px}.e3{left:9px;bottom:9px}.e4{right:9px;bottom:9px}}
.dim{position:absolute;color:var(--cyan);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.dim-w{left:26px;right:0;top:0;height:14px;border-left:1.5px solid;border-right:1.5px solid}
.dim-w::before{content:"";position:absolute;left:0;right:0;top:7px;border-top:1.5px solid;transform-origin:left;animation:draw 1.4s .3s cubic-bezier(.6,0,.2,1) both}
.dim-w span{position:absolute;left:50%;top:0;transform:translateX(-50%);background:var(--paper);padding:0 8px;line-height:14px}
.dim-h{left:0;top:26px;bottom:0;width:14px;border-top:1.5px solid;border-bottom:1.5px solid}
.dim-h::before{content:"";position:absolute;top:0;bottom:0;left:7px;border-left:1.5px solid;transform-origin:top;animation:drawv 1.4s .5s cubic-bezier(.6,0,.2,1) both}
.dim-h span{position:absolute;top:50%;left:7px;transform:translate(-50%,-50%) rotate(-90deg);background:var(--paper);padding:0 8px;white-space:nowrap;line-height:14px}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes drawv{from{transform:scaleY(0)}}
.reg{position:absolute;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;opacity:.55}
.reg::before,.reg::after{content:"";position:absolute;background:var(--ink)}
.reg::before{left:50%;top:-6px;bottom:-6px;width:1.5px;transform:translateX(-50%)}
.reg::after{top:50%;left:-6px;right:-6px;height:1.5px;transform:translateY(-50%)}
.r1{right:-4px;top:-2px;display:none}.r2{left:-2px;bottom:-30px;display:none}
@media(min-width:700px){.r1,.r2{display:block}}

.strip{list-style:none;margin:28px calc(-1*var(--pad)) 0;padding:16px var(--pad);display:flex;gap:10px 26px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:500 12.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.strip li{display:flex;align-items:center;gap:10px}
.strip li::before{content:"";width:8px;height:8px;background:var(--cyan)}
.strip li:nth-child(3n+2)::before{background:var(--mag)}.strip li:nth-child(3n)::before{background:var(--yellow2)}
@media(min-width:900px){.strip{justify-content:space-between;margin-left:0;margin-right:0;padding-left:0;padding-right:0}}

/* section heads */
section{scroll-margin-top:calc(var(--head) + var(--pb))}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(26px,4vw,44px)}
.sec-head h2{font-size:clamp(34px,7vw,72px);max-width:16ch}
.sec-head p{color:var(--mute);max-width:52ch;font-size:17px}
@media(min-width:900px){.sec-head{grid-template-columns:1.5fr 1fr;align-items:end;gap:48px}}

/* work */
.work{padding:clamp(64px,10vw,120px) var(--pad);max-width:calc(var(--max) + 2*var(--pad));margin:0 auto}
.proofs{display:grid;gap:clamp(26px,4vw,34px)}
.proof{margin:0;position:relative}
.proof .ph{position:relative;overflow:hidden;background:var(--paper2)}
.proof .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);pointer-events:none}
.proof img{width:100%;height:100%;object-fit:cover}
.proof figcaption{display:flex;flex-direction:column;gap:3px;padding-top:12px;border-top:0}
.proof figcaption b{font-stretch:112%;font-weight:750;font-size:19px;letter-spacing:-.01em}
.proof figcaption span{color:var(--mute);font-size:15.5px}
.proof::before{content:"";position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);opacity:.4}
.p-van .ph{aspect-ratio:1200/640}
.p-board .ph{aspect-ratio:4/3.5}
.p-window .ph{aspect-ratio:4/3}
.duo{display:grid;grid-template-columns:1.15fr 1fr;gap:6px;background:transparent!important;aspect-ratio:4/3}
.duo img{height:100%}
@media(min-width:1000px){
  .proofs{grid-template-columns:repeat(12,1fr);gap:40px 34px;align-items:start}
  .p-van{grid-column:1/9}.p-board{grid-column:9/13;margin-top:90px}
  .p-window{grid-column:1/7}.p-marble{grid-column:7/13;margin-top:60px}
  .p-board .ph{aspect-ratio:4/4.3}
}
/* print-pass reveal */
.js [data-pass] .ph{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1)}
.js [data-pass].in .ph{clip-path:inset(0 0 0 0)}
.js [data-pass] .ph::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cyan) 0 33%,var(--mag) 33% 66%,var(--yellow) 66%);z-index:2;transform:translateY(-4px);transition:transform 1.1s cubic-bezier(.65,0,.25,1),opacity .4s 1s}
.js [data-pass].in .ph::before{transform:translateY(calc(var(--h,400px)));opacity:0}

/* services */
.services{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(64px,10vw,120px) var(--pad)}
.services>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.svc{list-style:none;margin:0 auto;padding:0;border-top:2px solid var(--ink)}
.svc li{display:grid;grid-template-columns:44px 1fr auto;gap:12px 16px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line2)}
.svc .n{font:500 13px/1.9 var(--mono);color:var(--mute)}
.svc h3{font-size:clamp(22px,3.6vw,34px);font-weight:780;line-height:1.05}
.svc p{color:var(--mute);margin-top:7px;max-width:56ch;font-size:16px}
.svc a{align-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:650;font-size:14.5px;transition:background .2s,color .2s}
.svc a::after{content:"→";margin-left:8px;transition:transform .2s}
.svc a:hover{background:var(--ink);color:#fff}
.svc a:hover::after{transform:translateX(3px)}
.svc li:hover .n{color:var(--cyan)}
@media(max-width:520px){.svc li{grid-template-columns:34px 1fr}.svc a{grid-column:2;justify-self:start;margin-top:4px}}

/* quote */
.quote{background:var(--ink);color:#f3f1ea;padding:clamp(64px,10vw,120px) var(--pad)}
.quote>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.sec-head.light p{color:#b9bbbd}
.sec-head.light h2{color:#fff}
.q-wrap{display:grid;gap:28px}
@media(min-width:960px){.q-wrap{grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}.ticket{position:sticky;top:calc(var(--pb) + var(--head) + 24px)}}
.qform{display:grid;gap:20px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend,.fld>span{display:block;font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#a9acaf;margin-bottom:9px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.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 #4a4d51;font-weight:600;font-size:15px;color:#e9e7e1;transition:all .15s}
.chips input:checked+span{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.chips input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
.fld{display:block;min-width:0}
.fld input,.fld select,.fld textarea{width:100%;min-height:50px;border-radius:12px;border:1.5px solid #44474b;background:#1c1d1f;color:#fff;font:500 16px/1.3 var(--wide);padding:12px 14px;appearance:none;-webkit-appearance:none}
.fld textarea{resize:vertical;min-height:96px}
.fld select{background-image:linear-gradient(45deg,transparent 50%,#aaa 50%),linear-gradient(135deg,#aaa 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.fld input::placeholder,.fld textarea::placeholder{color:#7d8084}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--yellow);outline:none}
.fld input[type=date]{color-scheme:dark}
.row3{display:grid;grid-template-columns:1fr auto 1fr 84px;gap:8px;align-items:end}
.row3 .x{padding-bottom:14px;color:#888;font-size:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:380px){.row2{grid-template-columns:1fr}}
.file input{padding:11px;font-size:14px}
.file input::file-selector-button{font:600 14px var(--wide);border:0;border-radius:999px;background:#33363a;color:#fff;padding:8px 14px;margin-right:10px}
.file em{display:none}
.send{width:100%;min-height:58px;font-size:17px}
.fine{font-size:13.5px;color:#9a9da0;text-align:center}

.ticket{background:var(--paper);color:var(--ink);padding:22px 22px 24px;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ticket::before,.ticket::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 6px 0,transparent 5px,var(--paper) 5.5px) 0 0/12px 10px repeat-x}
.ticket::before{top:-10px;transform:scaleY(-1)}
.ticket::after{bottom:-10px}
.t-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:2px dashed var(--line2);font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.t-head b{font:850 22px/1 var(--wide);font-stretch:125%;letter-spacing:0}
.t-head span{color:var(--mute)}
.ticket dl{margin:12px 0 0;display:grid}
.ticket dl div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.ticket dt{font:500 11.5px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.ticket dd{margin:0;font-weight:600;font-size:15px;overflow-wrap:anywhere}
.ticket dd.flash{animation:flash .6s}
@keyframes flash{0%{background:var(--yellow)}100%{background:transparent}}
.t-swatch{display:flex;gap:4px;margin-top:16px}
.t-swatch i{width:22px;height:10px}
.t-swatch i:nth-child(1){background:var(--cyan)}.t-swatch i:nth-child(2){background:var(--mag)}.t-swatch i:nth-child(3){background:var(--yellow)}.t-swatch i:nth-child(4){background:var(--ink)}
.t-preview{margin-top:16px;height:120px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(18,19,20,.04) 8px 9px)}
.t-preview span{display:grid;place-items:center;background:var(--yellow);font:500 12px/1 var(--mono);width:var(--bw,70%);height:var(--bh,50%);max-width:94%;max-height:100px;transition:width .35s,height .35s;outline:1.5px solid var(--cyan);outline-offset:4px}

/* visit */
.visit{padding:clamp(64px,10vw,120px) var(--pad);max-width:calc(var(--max) + 2*var(--pad));margin:0 auto}
.v-grid{display:grid;gap:34px}
.visit h2{font-size:clamp(34px,7vw,72px);margin-bottom:20px}
address{font-style:normal;font-size:clamp(20px,2.6vw,26px);line-height:1.35;font-weight:600}
.v-facts{margin:0;display:grid;border-top:2px solid var(--ink)}
.v-facts div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line2)}
.v-facts dt{font:500 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.v-facts dd{margin:0;font-weight:600}
.v-facts a{text-decoration:none;border-bottom:2px solid var(--yellow)}
.mono{font-family:var(--mono)}
@media(min-width:900px){.v-grid{grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}}
.locator{margin-top:clamp(40px,6vw,64px);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px clamp(16px,3vw,30px);background:var(--yellow);text-decoration:none;font:500 clamp(13px,1.6vw,16px)/1 var(--mono);letter-spacing:.04em;position:relative;overflow:hidden;min-height:84px}
.locator::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed rgba(18,19,20,.5)}
.locator span{position:relative;background:var(--yellow);padding:0 8px}
.pin{width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--ink)!important;transform:rotate(-45deg);padding:0!important;flex:none;box-shadow:0 0 0 8px var(--yellow)}
.pin::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--yellow)}
.locator:hover .pin{animation:bob .6s ease}
@keyframes bob{50%{transform:rotate(-45deg) translate(3px,-3px)}}

/* footer */
.foot{background:var(--paper2);padding:40px var(--pad) 110px;display:grid;gap:10px;font-size:15px;color:var(--ink2)}
.foot-mark{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.foot-mark b{font-stretch:125%;font-weight:850;font-size:22px}
.foot-mark span{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.foot a{text-decoration:none;border-bottom:2px solid var(--yellow)}
.credit{color:var(--mute);font-size:13.5px}

.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:#25d366;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* load-in */
.js h1 .ln{opacity:0;transform:translateY(.35em);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.js h1 .ln:nth-child(2){animation-delay:.08s}.js h1 .ln:nth-child(3){animation-delay:.16s}
@keyframes up{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js h1 .ln{opacity:1;transform:none}
  .js [data-pass] .ph{clip-path:none}
}

/* pass 2 */
.skip:focus{min-height:44px;display:inline-flex;align-items:center}
.v-facts a,.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot p a{min-height:44px}
.file em{display:block;font-style:normal;font-size:13.5px;color:#9a9da0;margin-top:8px}
.mini{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:14px 16px;border:1.5px dashed #4a4d51;border-radius:12px;font:500 13px/1.3 var(--mono);color:#cfd1d3}
.mini b{font:700 15px/1.2 var(--wide);color:var(--yellow)}
.mini span:empty{display:none}
@media(min-width:960px){.mini{display:none}}
@media(max-width:959px){.ticket{display:none}}
.tag{position:absolute;z-index:3;left:10px;top:10px;background:var(--paper);color:var(--ink);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px}
.proof .tag{opacity:0;transition:opacity .5s .7s}
.proof.in .tag,html:not(.js) .proof .tag{opacity:1}
@media(max-width:520px){
  .svc li{grid-template-columns:30px 1fr 46px}
  .svc a{grid-column:3;justify-self:end;margin-top:0;width:46px;height:46px;padding:0;justify-content:center}
  .svc a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .svc a::after{margin-left:0;font-size:18px}
}
@media(max-width:699px){
  .sheet{padding:20px 0 0 20px}
  .dim-w{left:20px}.dim-h{top:20px}
  .sheet-photo{aspect-ratio:1.45}
  .sheet-photo img{object-position:62% 60%}
}
@media(min-width:900px){
  .hero-type{grid-template-columns:auto 1fr}
  h1{font-size:min(8.4vw,118px)}
  h1 .ln{white-space:nowrap}
  .sheet-photo{aspect-ratio:2.45}
  .sheet-photo img{object-position:50% 72%}
}
.mini i{font-style:normal;color:#8d9093;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;width:100%}