/* Contenta · hand-built, no framework */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:300 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument";src:url(../fonts/instrument.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family:"Instrument";src:url(../fonts/instrument-italic.woff2) format("woff2");font-style:italic;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:#F2EBDC; --paper-2:#E9E0CC; --ink:#1B1612; --ink-2:#3A322B;
  --tomato:#EE4522; --butter:#F5C842; --cobalt:#2F45D8; --sage:#B8C99A; --blush:#F4B8A6;
  --pad:clamp(20px,4.4vw,72px); --max:1440px;
  --f-d:"Bricolage",ui-sans-serif,system-ui,sans-serif;
  --f-s:"Instrument",Georgia,serif;
  --f-m:"DM Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-d);font-variation-settings:"opsz" 14;font-size:clamp(16px,1.1vw,18px);line-height:1.55;overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:200;opacity:.11;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--tomato);color:var(--paper)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--f-m);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.it{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s,box-shadow .35s,transform .45s var(--ease)}
.hd .wrap{display:flex;align-items:center;gap:28px;height:78px}
.hd.solid{background:rgba(242,235,220,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(27,22,18,.12)}
.hd.hide{transform:translateY(-100%)}
.logo{display:flex;align-items:baseline;gap:2px;text-decoration:none;font-family:var(--f-s);font-style:italic;font-size:31px;line-height:1;letter-spacing:-.02em}
.logo i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tomato);margin-left:2px;transform:translateY(-1px)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:15px;font-weight:500;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.lang{display:flex;border:1.5px solid var(--ink);border-radius:99px;padding:2px}
.lang a{font-family:var(--f-m);font-size:12px;text-decoration:none;padding:5px 9px;border-radius:99px;line-height:1}
.lang a[aria-current]{background:var(--ink);color:var(--paper)}
.hd .btn{padding:11px 18px;font-size:14px}

.btn{--bg:var(--ink);--fg:var(--paper);display:inline-flex;align-items:center;gap:10px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:600;font-size:16px;padding:16px 26px;border-radius:99px;border:1.5px solid var(--bg);position:relative;overflow:hidden;isolation:isolate;transition:color .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tomato);border-radius:inherit;transform:translateY(102%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translate(3px,-3px) rotate(0deg)}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{color:var(--paper)}

/* hero */
.hero{position:relative;min-height:100svh;padding:120px 0 56px;display:flex;flex-direction:column;justify-content:flex-end}
.hero .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto;padding-top:14px}
.hero .top .mono{display:flex;align-items:center;gap:10px}
.dotlive{width:8px;height:8px;border-radius:50%;background:var(--tomato);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(238,69,34,.5)}70%{box-shadow:0 0 0 12px rgba(238,69,34,0)}100%{box-shadow:0 0 0 0 rgba(238,69,34,0)}}
.h1{font-family:var(--f-d);font-weight:800;font-stretch:78%;font-variation-settings:"opsz" 96;font-size:clamp(62px,12.4vw,205px);line-height:.84;letter-spacing:-.022em;margin:40px 0 0;position:relative;z-index:2}
.h1 .ln{display:block;overflow:hidden;padding:.04em 0 .05em;margin-bottom:-.05em}
.h1 .ln>span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards;animation-delay:calc(.12s + var(--i)*.11s)}
.h1 .it{font-weight:400;letter-spacing:-.025em;color:var(--tomato);font-size:1.1em;line-height:.7;position:relative;display:inline-block;padding-right:.06em}
.h1 .ln.r{text-align:right}
@keyframes rise{to{transform:none}}
.squig{position:absolute;left:-2%;right:-4%;bottom:-.06em;height:.26em;width:106%;overflow:visible}
.squig path{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.4s 1.15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .bot{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr);gap:40px;align-items:end;margin-top:48px}
.lead{font-size:clamp(18px,1.55vw,23px);line-height:1.42;max-width:31ch;margin:0;font-variation-settings:"opsz" 24}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.stamp{width:150px;height:150px;position:relative;flex:none}
.stamp svg{width:100%;height:100%;animation:spin 22s linear infinite}
.stamp text{font-family:var(--f-m);font-size:10.6px;letter-spacing:.17em;text-transform:uppercase;fill:var(--ink)}
.stamp .c{position:absolute;inset:34%;border-radius:50%;background:var(--tomato);display:grid;place-items:center;color:var(--paper)}
@keyframes spin{to{transform:rotate(360deg)}}
.stickers{position:absolute;inset:0;z-index:3;pointer-events:none}
.stk{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:filter .2s}
.stk:active{cursor:grabbing}
.stk.drag{filter:drop-shadow(0 14px 16px rgba(27,22,18,.18))}
.stk>svg{width:100%;height:100%;animation:bob 6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bob{50%{transform:translateY(-10px) rotate(6deg)}}
.stk.s1{width:clamp(70px,8vw,128px);top:21%;right:9%}
.stk.s2{width:clamp(56px,6vw,96px);top:19%;left:44%}
.stk.s3{width:clamp(60px,6.4vw,104px);top:13%;left:38%}
.stk.s4{width:clamp(50px,5vw,82px);top:60%;right:4%}
.hint{position:absolute;top:31%;right:calc(9% + clamp(70px,8vw,128px) + 8px);font-family:var(--f-s);font-style:italic;font-size:21px;transform:rotate(-7deg);display:flex;align-items:flex-end;gap:4px;z-index:3;pointer-events:none}

/* marquee */
.mq{background:var(--tomato);color:var(--paper);overflow:hidden;border-block:1.5px solid var(--ink);transform:rotate(-1.6deg);margin:10px -20px 0;position:relative;z-index:4}
.mq .track{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq ul{display:flex;align-items:center;list-style:none;margin:0;padding:18px 0;gap:0}
.mq li{font-family:var(--f-d);font-weight:700;font-stretch:80%;font-size:clamp(26px,3.3vw,48px);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center}
.mq li.s{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:0}
.mq li::after{content:"";width:.62em;height:.62em;margin:0 .55em;background:var(--butter);-webkit-mask:var(--flower) center/contain no-repeat;mask:var(--flower) center/contain no-repeat}
@keyframes mq{to{transform:translateX(-50%)}}
:root{--flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0c7 18 12 23 30 14-9 18-4 23 14 30-18 7-23 12-14 30-18-9-23-4-30 14-7-18-12-23-30-14 9-18 4-23-14-30 18-7 23-12 14-30 18 9 23 4 30-14z'/%3E%3C/svg%3E")}

/* section heads */
section{position:relative}
.sec{padding:clamp(96px,12vw,180px) 0}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.kicker b{font-weight:500;display:inline-grid;place-items:center;min-width:34px;height:24px;border:1.5px solid currentColor;border-radius:99px;padding:0 8px;font-size:11.5px}
.h2{font-family:var(--f-d);font-weight:800;font-stretch:80%;font-variation-settings:"opsz" 96;font-size:clamp(46px,7.2vw,118px);line-height:.9;letter-spacing:-.02em;margin:0;max-width:15ch}
.h2 .it{font-weight:400;letter-spacing:-.02em;font-size:1.06em}
.sub{font-size:clamp(17px,1.35vw,21px);max-width:44ch;margin:26px 0 0;line-height:1.5;color:var(--ink-2)}

/* services */
.svc-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:clamp(48px,6vw,90px)}
.rows{list-style:none;margin:0;padding:0;border-bottom:1.5px solid var(--ink)}
.row{position:relative;border-top:1.5px solid var(--ink);display:grid;grid-template-columns:110px minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(28px,3.6vw,52px) 0;isolation:isolate}
.row::before{content:"";position:absolute;inset:0 calc(var(--pad)*-1);background:var(--c);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.row:hover::before{transform:none}
.row .n{font-family:var(--f-m);font-size:13px;padding-top:12px}
.row h3{margin:0;font-family:var(--f-d);font-weight:700;font-stretch:80%;font-variation-settings:"opsz" 96;font-size:clamp(40px,5.6vw,92px);line-height:.92;letter-spacing:-.018em;transition:letter-spacing .5s var(--ease)}
.row h3 em{font-family:var(--f-s);font-weight:400;letter-spacing:-.015em}
.row p{margin:6px 0 18px;font-size:clamp(16px,1.2vw,19px);max-width:44ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags li{font-family:var(--f-m);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:99px;padding:6px 11px;background:var(--paper)}
.row .shape{position:absolute;right:0;top:50%;width:clamp(70px,8vw,120px);transform:translateY(-50%) scale(0) rotate(-40deg);transition:transform .6s var(--ease);pointer-events:none}
.row:hover .shape{transform:translateY(-50%) scale(1) rotate(0)}

/* process */
.proc{background:var(--butter)}
.proc::before{content:"";position:absolute;left:0;right:0;top:-1px;height:40px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 20%,0 100%)}
.steps{list-style:none;margin:clamp(48px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);counter-reset:s}
.step{border-top:1.5px solid var(--ink);padding:22px 4px 0 0;position:relative}
.step .num{font-family:var(--f-s);font-style:italic;font-size:clamp(70px,7vw,118px);line-height:.8;display:block;margin:6px 0 26px;letter-spacing:-.03em}
.step h3{font-size:clamp(21px,1.7vw,27px);font-weight:700;font-stretch:85%;letter-spacing:-.02em;line-height:1.08;margin:0 0 10px}
.step p{margin:0;font-size:16px;color:var(--ink-2);max-width:30ch}
.step.last{background:var(--ink);color:var(--paper);border-radius:22px;padding:22px 24px 28px;border-top:0;transform:rotate(1.4deg);margin-top:-8px}
.step.last p{color:#E6DCC8}
.step.last .num{color:var(--tomato)}
.step.last .tick{position:absolute;right:-18px;top:-26px;width:88px;height:88px}
.step.last .tick svg{animation:spin 18s linear infinite}

/* packages */
.pk{background:var(--ink);color:var(--paper)}
.pk .sub{color:#D9CFBB}
.pk .kicker b{border-color:var(--paper)}
.pk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;align-items:end}
.incl{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:0;list-style:none}
.incl li{font-family:var(--f-m);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:8px 13px;border-radius:99px;background:#2B241E;color:var(--paper);display:flex;gap:8px;align-items:center}
.incl li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--butter)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(56px,7vw,100px);align-items:stretch}
.card{border-radius:26px;padding:clamp(26px,2.4vw,38px);display:flex;flex-direction:column;position:relative;background:var(--paper);color:var(--ink);transition:transform .5s var(--ease)}
.card:nth-child(1){background:var(--sage)}
.card:nth-child(2){background:var(--tomato);color:var(--ink)}
.card:nth-child(3){background:var(--paper)}
.card:hover{transform:translateY(-6px) rotate(-.6deg)}
.card .tag{align-self:flex-start;margin-bottom:34px;border:1.5px solid currentColor;border-radius:99px;padding:5px 11px}
.card h3{font-family:var(--f-s);font-style:italic;font-weight:400;font-size:clamp(38px,3.4vw,54px);line-height:.95;margin:0 0 8px;letter-spacing:-.02em}
.card .for{margin:0 0 28px;font-size:16px;max-width:30ch}
.price{display:flex;align-items:baseline;gap:8px;margin:0 0 26px;padding-bottom:22px;border-bottom:1.5px solid currentColor}
.price .ab{font-family:var(--f-m);font-size:13px;text-transform:uppercase}
.price .v{font-family:var(--f-d);font-weight:800;font-stretch:78%;font-size:clamp(54px,5vw,80px);line-height:.85;letter-spacing:-.02em}
.price .v small{font-size:.5em;margin-left:.08em;letter-spacing:0;vertical-align:.55em}
.card ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px;font-size:16px}
.card li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.card li::before{content:"";flex:none;width:15px;height:15px;margin-top:3px;background:currentColor;-webkit-mask:var(--flower) center/contain no-repeat;mask:var(--flower) center/contain no-repeat}
.card .btn{margin-top:auto;align-self:flex-start}
.card:nth-child(2) .btn::before{background:var(--paper)}
.card:nth-child(2) .btn:hover{color:var(--ink)}
.card .badge{position:absolute;top:-22px;right:24px;width:96px;height:96px;transform:rotate(12deg)}
.pk .note{margin:40px 0 0;font-size:16px;color:#D9CFBB;max-width:70ch}
.pk .note strong{color:var(--paper);font-weight:600}

/* work */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);margin-top:clamp(56px,7vw,100px)}
.wk{text-decoration:none;display:block;position:relative}
.wk:nth-child(2){margin-top:clamp(0px,9vw,140px)}
.wk .stage{position:relative;border-radius:28px;background:var(--c);aspect-ratio:1/1.02;overflow:hidden;padding:9% 0 0 8%}
.wk .stage::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--ink);pointer-events:none}
.wk .browser{position:relative;width:118%;border-radius:12px;overflow:hidden;background:#111;border:1.5px solid var(--ink);transform:translate3d(0,var(--py,0px),0);transition:transform .9s var(--ease)}
.wk .browser .bar{height:26px;background:var(--paper);border-bottom:1.5px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 11px}
.wk .browser .bar i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink)}
.wk .browser .bar span{margin-left:10px;font-family:var(--f-m);font-size:10.5px;opacity:.7}
.wk .browser img{width:100%;height:auto;aspect-ratio:1440/900}
.wk .phone{position:absolute;right:7%;bottom:-6%;width:31%;border-radius:26px;overflow:hidden;border:6px solid var(--ink);background:var(--ink);transform:rotate(5deg) translate3d(0,calc(var(--py,0px)*-1.4),0);transition:transform .9s var(--ease)}
.wk .phone img{width:100%;height:auto;aspect-ratio:390/844;border-radius:19px}
.wk:hover .phone{transform:rotate(1deg) translate3d(-6px,calc(var(--py,0px)*-1.4 - 18px),0)}
.wk:hover .browser{transform:translate3d(-10px,calc(var(--py,0px) - 8px),0)}
.wk .meta{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:22px 4px 0;align-items:start}
.wk h3{margin:0;font-weight:700;font-stretch:80%;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.03em;line-height:1}
.wk .meta p{grid-column:1/-1;margin:0;max-width:46ch;color:var(--ink-2)}
.wk .go{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);transition:background .35s,color .35s,transform .45s var(--ease)}
.wk:hover .go{background:var(--ink);color:var(--paper);transform:rotate(45deg)}
.wk .mono{opacity:.75}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px);align-items:start}
.faq-l{position:sticky;top:120px}
.faq-doodle{display:block;width:clamp(90px,9vw,140px);margin:48px 0 0 30%;transform:rotate(-12deg);animation:bob 7s ease-in-out infinite}
.qa{border-top:1.5px solid var(--ink)}
.qa:last-child{border-bottom:1.5px solid var(--ink)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-weight:650;font-stretch:88%;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.015em;line-height:1.2}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);position:relative;transition:transform .45s var(--ease),background .3s}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.qa .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] .pm{transform:rotate(45deg);background:var(--butter)}
.qa .a{padding:0 64px 28px 0;font-size:17px;max-width:60ch;color:var(--ink-2)}
.qa .a p{margin:0}
.qa summary:hover{color:var(--tomato)}

/* contact */
.ct{background:var(--tomato);color:var(--ink);overflow:hidden;padding:clamp(100px,13vw,200px) 0 clamp(60px,7vw,100px)}
.ct .big{font-family:var(--f-d);font-weight:800;font-stretch:78%;font-variation-settings:"opsz" 96;font-size:clamp(56px,10.4vw,176px);line-height:.86;letter-spacing:-.022em;margin:0;max-width:12ch}
.ct .big .it{font-weight:400;color:var(--paper)}
.ct-row{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;justify-content:space-between;margin-top:56px}
.ct .btn{--bg:var(--ink);--fg:var(--paper);font-size:clamp(17px,1.4vw,20px);padding:20px 32px}
.ct .btn::before{background:var(--paper)}
.ct .btn:hover{color:var(--ink)}
.mail{font-family:var(--f-s);font-style:italic;font-size:clamp(24px,2.6vw,40px);text-decoration:none;border-bottom:2px solid currentColor;line-height:1.1}
.mail:hover{color:var(--paper)}
.ct .flower{position:absolute;right:-6vw;top:-8vw;width:min(42vw,560px);color:var(--butter);animation:spin 60s linear infinite;opacity:.95;pointer-events:none}
.ct .flower path{fill:currentColor}
.ct .wrap{position:relative;z-index:1}

.ft{background:var(--ink);color:var(--paper);padding:34px 0}
.ft .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;align-items:center}
.ft .logo{font-size:26px}
.ft nav{display:flex;gap:18px;flex-wrap:wrap}
.ft a{text-decoration:none;opacity:.85}
.ft a:hover{opacity:1;text-decoration:underline}

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

/* cursor */
.cur{opacity:0;position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:250;transform:translate3d(-100px,-100px,0);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;display:grid;place-items:center;font-family:var(--f-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:transparent;mix-blend-mode:normal}
.cur.link{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(238,69,34,.28)}
.cur.view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--ink);color:var(--paper)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* responsive */
@media (max-width:1100px){
  .nav{display:none}
  .lang{margin-left:auto}
  .cards{grid-template-columns:1fr;max-width:620px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .pk-head,.svc-head{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hd .wrap{height:66px;gap:12px}
  .logo{font-size:27px}
  .hd .btn{display:none}
  .hero{padding:96px 0 40px;min-height:auto}
  .hero .top{flex-direction:column;gap:8px}
  .hero .top .mono+.mono{display:none}
  .h1{font-size:clamp(54px,18.4vw,96px);margin-top:150px}
  .h1 .ln.r{text-align:left}
  .hero .bot{grid-template-columns:1fr;gap:28px;margin-top:34px}
  .ctas{justify-content:flex-start}
  .stamp{position:absolute;width:118px;height:118px;right:var(--pad);top:128px}
  .stamp text{font-size:10.6px}
  .stk.s1{top:150px;right:auto;left:calc(var(--pad) + 6px);width:70px}
  .stk.s2{top:176px;left:38%;width:44px}
  .stk.s3{display:none}
  .stk.s4{display:none}
  .hint{display:none}
  .row{grid-template-columns:1fr;gap:12px}
  .row .n{padding:0}
  .row .shape{top:34px;transform:scale(1) rotate(0);width:56px}
  .row:hover .shape{transform:none}
  .steps{grid-template-columns:1fr;row-gap:40px}
  .step.last{transform:rotate(1deg);margin:8px 6px 0}
  .step.last .tick{right:-6px;width:72px;height:72px}
  .work-grid{grid-template-columns:1fr;gap:56px}
  .wk:nth-child(2){margin-top:0}
  .faq-grid{grid-template-columns:1fr}
  .faq-l{position:static}
  .faq-doodle{display:none}
  .qa .a{padding-right:0}
  .ct .flower{width:70vw;right:-24vw;top:-14vw}
  .mq{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .h1 .ln>span{transform:none}
  .squig path{stroke-dashoffset:0}
  .rv{opacity:1;transform:none}
  .mq .track{animation:none}
}

/* about · the messy desk */
.us{background:var(--paper-2);overflow:hidden}
.us::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(27,22,18,.13) 1.2px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.us-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,110px);align-items:center;position:relative}
.desk{position:relative;min-height:clamp(520px,48vw,700px)}
.stk-d{position:absolute;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transition:transform .25s var(--ease),filter .25s}
.stk-d.drag{transition:none;filter:drop-shadow(0 18px 22px rgba(27,22,18,.22));cursor:grabbing}
.polaroid{margin:0;left:6%;top:4%;width:min(78%,520px);background:#FBF7EE;padding:14px 14px 0;border:1.5px solid var(--ink);z-index:2}
.polaroid img{width:100%;height:auto;aspect-ratio:10/11;object-fit:cover;filter:saturate(1.06) contrast(1.03);pointer-events:none;-webkit-user-drag:none}
.polaroid figcaption{font-family:var(--f-s);font-style:italic;font-size:clamp(22px,1.9vw,28px);padding:12px 4px 16px;line-height:1}
.polaroid .tape{position:absolute;left:50%;top:-16px;width:118px;height:34px;margin-left:-59px;background:rgba(245,200,66,.78);transform:rotate(-4deg);clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 48%);z-index:2}
.postit{right:0;top:2%;width:clamp(150px,13vw,190px);aspect-ratio:1;background:var(--butter);border:1.5px solid var(--ink);padding:18px 16px;font-family:var(--f-s);font-style:italic;font-size:clamp(18px,1.45vw,22px);line-height:1.15;z-index:3}
.paw{right:8%;bottom:4%;width:clamp(116px,10vw,140px);height:clamp(116px,10vw,140px);z-index:4}
.paw svg{width:100%;height:100%}
.paw .c{position:absolute;inset:30%;border-radius:50%;background:var(--cobalt);display:grid;place-items:center;color:var(--paper)}
.paw text{font-family:var(--f-m);font-size:9.6px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink)}
.swatch{left:0;bottom:2%;display:flex;border:1.5px solid var(--ink);background:#FBF7EE;padding:8px;gap:6px;z-index:3}
.swatch i{width:34px;height:52px;border:1.5px solid var(--ink)}
.about p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;margin:0 0 18px;max-width:40ch}
.about p:first-child{font-size:clamp(22px,2vw,30px);line-height:1.25;font-weight:600;font-stretch:88%;letter-spacing:-.015em}
.deskhint{font-family:var(--f-s);font-style:italic;font-size:21px;margin:26px 0 0;display:flex;gap:10px;align-items:center;color:var(--tomato)}
.deskhint::before{content:"";width:34px;height:1.5px;background:currentColor}
@media (max-width:900px){
  .us-grid{grid-template-columns:1fr}
  .desk{min-height:auto;padding:20px 0 80px}
  .polaroid{position:relative;left:auto;top:auto;width:86%;margin:0 auto}
  .postit{top:auto;bottom:40px;right:-4px;width:140px;font-size:17px;padding:14px 12px}
  .paw{right:auto;left:-6px;bottom:auto;top:-6px;width:100px;height:100px}
  .swatch{display:none}
  .polaroid{touch-action:pan-y}
}

.tick .c{position:absolute;inset:32%;border-radius:50%;background:var(--tomato);display:grid;place-items:center;color:var(--paper)}
.tick svg text{font-family:var(--f-m);font-size:10px;letter-spacing:.15em;text-transform:uppercase;fill:var(--ink)}
.tick>svg{width:100%;height:100%}
/* torn paper edges */
.torn{position:absolute;left:0;right:0;height:28px;z-index:2;pointer-events:none;background:var(--tc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V14L588 20 571 11 556 22 540 13 522 19 509 9 492 21 476 12 459 18 445 8 428 22 410 14 396 20 381 10 363 21 349 12 331 19 318 9 300 22 284 13 268 20 252 10 236 21 220 12 204 19 190 8 172 22 156 13 140 20 124 11 108 21 92 12 76 19 60 10 44 22 28 13 12 20 0 12Z'/%3E%3C/svg%3E") 0 0/600px 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V14L588 20 571 11 556 22 540 13 522 19 509 9 492 21 476 12 459 18 445 8 428 22 410 14 396 20 381 10 363 21 349 12 331 19 318 9 300 22 284 13 268 20 252 10 236 21 220 12 204 19 190 8 172 22 156 13 140 20 124 11 108 21 92 12 76 19 60 10 44 22 28 13 12 20 0 12Z'/%3E%3C/svg%3E") 0 0/600px 100% repeat-x}
.torn.top{top:-1px}
.torn.bot{bottom:-1px;transform:scaleY(-1)}
.proc::before{display:none}
/* living letters */
.h1 .ch{display:inline-block;font-stretch:var(--w,78%);transition:font-stretch .5s var(--ease)}
.ph-fallback{aspect-ratio:10/11;background:var(--blush);display:grid;place-items:center;align-content:center;gap:14px;border:1.5px solid var(--ink)}
.ph-fallback svg{width:38%}
.ph-fallback span{font-family:var(--f-s);font-style:italic;font-size:clamp(30px,3vw,46px)}
.step.last .tick{width:112px;height:112px;right:-26px;top:-40px}
.cur.on{opacity:1}
.about{margin-top:30px}
@media (max-width:900px){.desk{padding-bottom:120px}.postit{bottom:0;right:-2px;width:128px;font-size:16px}}