@font-face{font-family:"Abril Fatface";src:url(../fonts/abril-fatface-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Epilogue";src:url(../fonts/epilogue-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--paper:#FFF1DC;--ink:#2A1408;--c1:#FF5A1F;--c2:#FFB400;--c3:#E8195A;--c4:#7A1F3D;--on1:#2A1408;--on2:#2A1408;--on3:#FFF1DC;--on4:#FFF1DC;
--d:"Abril Fatface",Georgia,serif;--b:"Epilogue",system-ui,sans-serif;--gut:1.2vw}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
body{font:400 1.0625rem/1.6 var(--b);background:var(--c1);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background-color .8s}
img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);color:var(--ink);padding:.6rem 1rem;z-index:99}.skip:focus{left:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--paper)}
#gl{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;display:block}
body.no-gl{background:conic-gradient(from 20deg at 40% 50%,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1)) fixed}
body.no-gl #gl{display:none}
main,.foot{position:relative;z-index:1}
main{overflow-x:clip}
*{transition-property:background-color,color,border-color,fill,stroke;transition-duration:.8s}
a,button{transition-duration:.25s}

.top{position:fixed;z-index:60;top:.7rem;left:var(--gut);right:var(--gut);display:flex;align-items:center;gap:1.4rem;padding:.45rem .55rem .45rem 1.3rem;border-radius:99px;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.logo{font:400 1.55rem/1 var(--d);text-decoration:none;margin-right:auto;white-space:nowrap}
.logo i{font-style:normal;color:var(--c1);-webkit-text-stroke:1px var(--ink)}
.top nav{display:flex;gap:1.6rem}.top nav a{font:600 .85rem/1 var(--b);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.top nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c1)}
.tel{background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;border-radius:99px;font:600 .95rem/1 var(--b);text-decoration:none;white-space:nowrap}

/* hero */
.hero{position:relative;overflow:hidden;min-height:100svh;padding:4.6rem var(--gut) var(--gut)}
.window{position:relative;height:calc(100svh - 5.9rem);min-height:460px;border-radius:2rem;box-shadow:0 0 0 100vmax var(--paper);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:clamp(1rem,3vw,3rem);transition:box-shadow .8s}
.badge{position:absolute;left:clamp(1rem,2vw,2rem);top:clamp(1rem,2vw,2rem);background:var(--paper);color:var(--ink);padding:.6rem 1rem;border-radius:1rem;font:600 .78rem/1.4 var(--b);letter-spacing:.1em;text-transform:uppercase}
.sticker{position:absolute;right:clamp(1rem,2.5vw,2.6rem);top:clamp(1rem,2.5vw,2.6rem);width:clamp(96px,11vw,150px);aspect-ratio:1}
h1{font:400 clamp(3.3rem,13.2vw,14rem)/.98 var(--d);letter-spacing:-.015em}
.ln{display:block;overflow:hidden;padding:.02em .1em .1em 0;margin-bottom:-.02em}
.ln span{display:inline-block;background:var(--paper);color:var(--ink);padding:0 .16em .04em;border-radius:.1em}
.ln:nth-child(2){margin-left:min(9vw,9rem)}

.marq-wrap{overflow:hidden;padding:2.4rem 0}
.marq{background:var(--c1);color:var(--on1);transform:rotate(-1.8deg);width:106%;margin-left:-3%;padding:.35rem 0 .55rem;overflow:hidden;white-space:nowrap;font:400 clamp(2rem,4.6vw,4.4rem)/1.1 var(--d);box-shadow:0 0 0 .45rem var(--paper)}
.marq-in{display:inline-flex;will-change:transform}.marq-in span{padding-right:1.2em}

/* sheets */
.sheet{background:var(--paper);margin:0 var(--gut) 0;border-radius:2rem;padding:clamp(3rem,10vh,8rem) clamp(1.2rem,5vw,5rem)}
.kicker{font:600 .8rem/1.3 var(--b);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.4rem;display:inline-block;background:var(--c1);color:var(--on1);padding:.35rem .7rem;border-radius:99px}
.intro-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem 5vw;align-items:start;max-width:80rem;margin:0 auto}
.intro .kicker{grid-column:1/-1;justify-self:start;margin:0}
.big{grid-row:2;font:500 clamp(1.6rem,3.1vw,3rem)/1.18 var(--b);letter-spacing:-.015em}
.facts{grid-column:1;grid-row:3;align-self:end;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.facts li{border-top:4px solid var(--c2);padding-top:.8rem;font-size:.98rem}.facts b{display:block;font:400 1.5rem/1.1 var(--d);margin-bottom:.4rem}
.polaroid{grid-column:2;grid-row:2/4;background:#fff;padding:.8rem .8rem 1rem;box-shadow:0 20px 50px rgba(0,0,0,.25);transform:rotate(-3deg);color:#2A1408}
.polaroid img{aspect-ratio:1;object-fit:cover;width:100%}
.polaroid figcaption{font:500 .85rem/1.2 var(--b);padding-top:.7rem}

.hl{font:400 clamp(2.4rem,7.4vw,7.2rem)/1.08 var(--d);letter-spacing:-.01em;margin:0 0 2.2rem;overflow:hidden;padding:.05em 0 .12em}
.hl span{display:inline-block;background:var(--paper);color:var(--ink);padding:0 .2em .03em;border-radius:.12em;transform-origin:left bottom}
.hl.dark span{background:var(--ink);color:var(--paper)}
.work,.pick,.contact{padding:clamp(3rem,12vh,9rem) var(--gut)}
.work .hl,.pick .hl{margin-left:clamp(0rem,2vw,2rem)}
.strips{list-style:none}
.strip{position:relative;display:grid;grid-template-columns:4rem minmax(0,1.1fr) minmax(0,1fr);gap:1rem 2rem;align-items:center;background:var(--paper);border-radius:1.2rem;padding:1.4rem clamp(1.2rem,3vw,2.4rem) 1.7rem;margin-bottom:1rem;overflow:hidden}
.strip b{font:400 1.4rem/1 var(--d);opacity:.65}
.strip h3{font:400 clamp(1.8rem,4.4vw,4.2rem)/1.02 var(--d);letter-spacing:-.01em}
.strip p{font-size:1.05rem}
.strip i{position:absolute;left:0;right:0;bottom:0;height:.55rem;background:var(--c1);transform-origin:left}
.strip:nth-child(2) i{background:var(--c2)}.strip:nth-child(3) i{background:var(--c3)}.strip:nth-child(4) i{background:var(--c4)}.strip:nth-child(5) i{background:var(--c1)}

.gallery .hl{margin-bottom:3rem}
.cards{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:clamp(1rem,3vw,3rem);max-width:84rem;margin:0 auto;align-items:start}
.card{background:#fff;color:#2A1408;border-radius:.8rem;padding:.7rem .7rem 0;box-shadow:0 18px 40px rgba(0,0,0,.22);transform:rotate(-2deg)}
.card:nth-child(2){margin-top:4rem}.card:nth-child(3){margin-top:1rem}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:.4rem}
.card:nth-child(3) img{aspect-ratio:4/3}
.card figcaption{display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;align-items:center;padding:.9rem .2rem 1rem}
.card figcaption i{grid-row:1/3;width:2.4rem;aspect-ratio:1;border-radius:50%;background:var(--c1)}
.card.c2 i{background:var(--c2)}.card.c3 i{background:var(--c3)}
.card b{font:400 1.25rem/1.1 var(--d)}.card span{font-size:.85rem;opacity:.8}

.pick-lead{margin:0 0 2.4rem clamp(0rem,2vw,2rem);font:500 clamp(1.1rem,2vw,1.6rem)/1.5 var(--b);max-width:38rem;overflow:hidden}
.pick-lead span{display:inline;background:var(--paper);color:var(--ink);padding:.12em .4em;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.8}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:84rem}
.chip{display:block;text-align:left;background:var(--paper);color:var(--ink);border:4px solid var(--paper);border-radius:1.4rem;overflow:hidden;cursor:pointer;font:inherit;padding:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1),border-color .25s}
.chip .bands{display:flex;height:clamp(80px,11vw,140px)}.chip .bands i{flex:1}
.chip .lab{display:block;padding:.9rem 1rem 1.1rem}.chip b{display:block;font:400 1.4rem/1.1 var(--d)}.chip em{display:block;font:500 .82rem/1.4 var(--b);font-style:normal;margin-top:.3rem;opacity:.85}
.chip[aria-pressed=true]{border-color:var(--ink);transform:translateY(-8px) rotate(-1deg)}

.steps .run{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:80rem;margin:.6rem auto 3rem}
.run b{display:grid;place-items:center;width:3.4rem;aspect-ratio:1;border-radius:50%;background:var(--c1);color:var(--on1);font:400 1.7rem/1 var(--d);margin-bottom:1rem}
.run li:nth-child(2) b{background:var(--c2);color:var(--on2)}.run li:nth-child(3) b{background:var(--c3);color:var(--on3)}.run li:nth-child(4) b{background:var(--c4);color:var(--on4)}
.run h3{font:400 1.9rem/1.1 var(--d);margin-bottom:.4rem}
.steps .kicker{display:block;width:fit-content;margin:0 auto 1.4rem;max-width:80rem}
.areas{display:flex;flex-wrap:wrap;gap:.6rem;max-width:80rem;margin:0 auto}.areas span{border:2px solid var(--ink);border-radius:99px;padding:.45rem .9rem;font:600 .85rem/1 var(--b);letter-spacing:.05em}
.contact-card{background:var(--paper);border-radius:2rem;max-width:46rem;margin:0 auto;padding:clamp(1.4rem,5vw,3.4rem)}
.contact h2{font:400 clamp(2.4rem,6vw,4.8rem)/1 var(--d);margin-bottom:.8rem}
.bigtel{display:inline-block;font:400 clamp(2rem,5.6vw,3.6rem)/1.1 var(--d);text-decoration:none;margin:1rem 0 .3rem;border-bottom:.35rem solid var(--c1)}
.fine{font-size:.92rem;margin-bottom:1.6rem}
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.35rem;font:600 .8rem/1 var(--b);letter-spacing:.1em;text-transform:uppercase}
.form input,.form select{font:400 1.05rem/1.2 var(--b);padding:.9rem 1rem;border:2px solid var(--ink);border-radius:.8rem;background:#fff;color:#1b1b1b}
.btn{background:var(--ink);color:var(--paper);border:0;border-radius:99px;padding:1rem 1.6rem;font:600 1rem/1 var(--b);cursor:pointer;justify-self:start}
.btn:hover{background:var(--c1);color:var(--on1)}
.msg{min-height:1.4em;font-weight:600}
.foot{background:var(--ink);color:var(--paper);padding:2.4rem var(--gut) 7rem;font:400 .92rem/1.6 var(--b);margin-top:clamp(3rem,10vh,8rem);text-align:center}
.foot a{color:var(--paper)}.credit{margin-top:.4rem;opacity:.92}

/* dock */
.dock{position:fixed;z-index:70;left:50%;bottom:.9rem;transform:translateX(-50%);display:flex;align-items:center;gap:.9rem;background:var(--paper);padding:.5rem .6rem .5rem 1.1rem;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.dock-name{font:600 .82rem/1 var(--b);letter-spacing:.08em;text-transform:uppercase;min-width:6.6rem}
.dock-btns{display:flex;gap:.45rem}
.dock-btns button{width:2.2rem;aspect-ratio:1;border-radius:50%;border:3px solid var(--paper);box-shadow:0 0 0 2px transparent;cursor:pointer;padding:0}
.dock-btns button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink);transform:scale(1.12)}

@media (max-width:900px){
 :root{--gut:3vw}
 .top nav{display:none}.top{padding-left:1rem}
 .intro-grid{grid-template-columns:1fr}.facts,.polaroid{grid-column:1;grid-row:auto}.facts{grid-template-columns:1fr}.polaroid{max-width:20rem;justify-self:center}
 .strip{grid-template-columns:2.4rem 1fr}.strip p{grid-column:2}
 .cards{grid-template-columns:1fr}.card:nth-child(n){margin-top:0}.card{max-width:26rem;justify-self:center}
 .chips{grid-template-columns:1fr 1fr}
 .steps .run{grid-template-columns:1fr 1fr}
 .ln:nth-child(2){margin-left:0}
 .marq{width:112%;margin-left:-6%}
}
@media (max-width:520px){
 h1{font-size:clamp(3rem,15.4vw,5rem)}
 .badge{font-size:.68rem;padding:.45rem .7rem}
 .sticker{width:84px;top:auto;bottom:auto;right:.8rem;top:4rem}
 .badge{top:.9rem}
 .dock-name{display:none}.dock{padding:.45rem .6rem}
 .chip .lab em{display:none}.chip b{font-size:1.1rem}
 .steps .run{grid-template-columns:1fr}
 .tel{padding:.7rem .9rem;font-size:.88rem}.logo{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* case study page */
.window.short{height:calc(78svh - 5rem);min-height:420px}
.case{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem 5vw;max-width:80rem;margin:0 auto;align-items:start}
.case .polaroid{grid-column:1;grid-row:1/3;max-width:30rem}
.case .polaroid img{aspect-ratio:4/5}
.case h2{font:400 clamp(2rem,4vw,3.4rem)/1.05 var(--d);margin-bottom:1rem}
.case p+p{margin-top:.9rem}
.days{list-style:none;display:grid;gap:.8rem;margin-top:1.2rem}
.days li{display:grid;grid-template-columns:5rem 1fr;gap:1rem;border-top:3px solid var(--c1);padding-top:.7rem}.days b{font:400 1.2rem/1.2 var(--d)}
.days li:nth-child(2){border-color:var(--c2)}.days li:nth-child(3){border-color:var(--c3)}.days li:nth-child(4){border-color:var(--c4)}
.sched-p{list-style:none;max-width:60rem;margin:1.6rem auto 0;display:grid;gap:.9rem}
.sched-p li{display:grid;grid-template-columns:5.5rem 1fr auto;gap:1.2rem;align-items:center;background:var(--paper);border-radius:1.2rem;padding:.9rem 1.2rem .9rem .9rem;color:var(--ink)}
.sched-p .sw{width:5.5rem;height:3.6rem;border-radius:.8rem;background:var(--c1)}
.sched-p li:nth-child(2) .sw{background:var(--c2)}.sched-p li:nth-child(3) .sw{background:var(--c3)}.sched-p li:nth-child(4) .sw{background:var(--c4)}
.sched-p b{font:400 1.5rem/1.1 var(--d);display:block}.sched-p span.fin{font:600 .8rem/1 var(--b);letter-spacing:.1em;text-transform:uppercase}
.sched-p small{display:block;font-size:.9rem}
.sched-lead{max-width:60rem;margin:0 auto}
.back{display:inline-block;margin-top:1.4rem}
@media (max-width:900px){.case{grid-template-columns:1fr}.case .polaroid{grid-row:auto;justify-self:center}.sched-p li{grid-template-columns:4rem 1fr}.sched-p .fin{grid-column:2}.sched-p .sw{width:4rem}}