:root{--paper:#F3E6CC;--ink:#191917;--cobalt:#315AA0;--line:rgba(25,25,23,.18);--mute:#6b6558;--pad:clamp(20px,5vw,72px);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-size:clamp(16px,1vw + 12px,18px);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p a,li a{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-weight:700;margin:0;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(40px,5.2vw,56px)}
h2{font-size:clamp(28px,3.2vw,36px)}
h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.01em}
p{margin:0;max-width:66ch}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
.k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);margin-bottom:16px}
.dark{background:var(--ink);color:var(--paper)}
.dark .k{color:var(--paper)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.dark :focus-visible{outline-color:var(--paper)}
.btn{display:inline-block;background:var(--cobalt);color:var(--paper);font-weight:700;text-decoration:none;padding:18px 24px;border:2px solid var(--cobalt);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--paper)}
.light .btn:hover,.btn.onpaper:hover{box-shadow:6px 6px 0 var(--ink)}
.btn.alt{background:transparent;color:inherit;border-color:currentColor}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.torn{display:block;width:100%;height:clamp(18px,3vw,38px);margin-bottom:-1px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:var(--ink);color:var(--paper);border-bottom:1px solid rgba(243,230,204,.14)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.nav a{text-decoration:none;font-size:15px}
.nav .home{font-weight:700}
.nav ul{display:flex;gap:clamp(14px,2.4vw,30px);align-items:center}
.nav li a:hover{text-decoration:underline;text-underline-offset:5px}
.lang{border:1px solid rgba(243,230,204,.5);padding:5px 10px;font-weight:700;font-size:13px!important}
.lang:hover{background:var(--paper);color:var(--ink);text-decoration:none!important}
@media(max-width:560px){.nav .hide{display:none}}

/* hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,110px);overflow:hidden;min-height:min(86vh,820px);display:flex;align-items:center}.hero>.wrap{width:100%}
.hero .g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center}
.hero .lead{font-size:clamp(18px,1.6vw,22px);margin-top:24px;max-width:36ch}
.hero .acts{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.logo{width:100%;max-width:560px;margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:slap .9s var(--ease) .15s both}
@keyframes slap{0%{opacity:0;transform:scale(1.5) rotate(-9deg)}55%{opacity:1;transform:scale(.97) rotate(1.5deg)}100%{transform:none}}
.hero{position:relative;isolation:isolate}
.logo-w{perspective:900px}
.tilt{transform:rotateX(calc(var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg)) translate3d(calc(var(--tx,0)*1.2px),calc(var(--ty,0)*-1.2px),0);transition:transform .35s ease-out;transform-style:preserve-3d}
.scraps{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.scraps i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate3d(calc(var(--mx,0)*var(--z)*1px),calc(var(--my,0)*var(--z)*1px),0);transition:transform .6s ease-out}
.scraps i::before{content:"";position:absolute;inset:0;background:var(--c);clip-path:var(--p);animation:float var(--t) ease-in-out var(--dl) infinite alternate,drop .9s var(--ease) var(--in) both}
@keyframes float{from{transform:rotate(var(--r)) translateY(0)}to{transform:rotate(calc(var(--r) + var(--dr))) translateY(var(--dy))}}
@keyframes drop{from{opacity:0;scale:1.8}to{opacity:var(--o,1);scale:1}}
.hero h1{font-size:clamp(38px,4.6vw,60px)}
.hero h1 .w{display:inline-block;animation:word .7s var(--ease) both;animation-delay:calc(.25s + var(--i)*.07s)}
@keyframes word{from{opacity:0;transform:translateY(.7em) rotate(4deg)}to{opacity:1;transform:none}}
.rot{display:block;margin-top:.18em;height:1.28em;position:relative}
.rot b{position:absolute;left:-.18em;top:0;white-space:nowrap;background:var(--cobalt);color:var(--paper);padding:.04em .3em .1em;transform:rotate(-1.6deg);clip-path:polygon(0 8%,3% 0,22% 5%,41% 1%,63% 6%,82% 0,100% 7%,98% 52%,100% 93%,79% 100%,58% 94%,37% 100%,16% 95%,1% 100%,2% 48%);animation:strip .6s var(--ease) both}
.rot b.out{animation:stripout .35s ease-in both}
@keyframes strip{from{clip-path:polygon(0 8%,0 0,0 5%,0 1%,0 6%,0 0,0 7%,0 52%,0 93%,0 100%,0 94%,0 100%,0 95%,0 100%,0 48%);transform:rotate(-4deg) translateX(-10px)}}
@keyframes stripout{to{opacity:0;transform:rotate(1deg) translateY(-.5em)}}
.tick{position:relative;z-index:2;background:var(--cobalt);color:var(--paper);width:104%;margin:-34px -2% -30px;transform:rotate(-1.4deg);overflow:hidden;box-shadow:0 14px 30px -10px rgba(0,0,0,.6);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(15px,1.5vw,20px)}
.tick div{display:flex;width:max-content;animation:tick 38s linear infinite}
.tick span{padding:14px 0;white-space:nowrap}
.tick span::after{content:"✕";margin:0 1.4em;opacity:.55;font-size:.8em}
.tick:hover div{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.bar{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--cobalt);transform-origin:left;transform:scaleX(var(--sp,0));z-index:30}
.k{position:relative}
.k.rv::after{content:"";display:block;height:2px;width:56px;background:currentColor;margin-top:10px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .25s}
.k.rv.in::after{transform:none}
.slap{opacity:0;transform:scale(1.25) rotate(calc(var(--r,0deg)*5));transition:opacity .5s,transform .8s var(--ease)}
.slap.in{opacity:1;transform:rotate(var(--r,0deg))}
.steps li,.svc{position:relative}
.steps li{border-top-color:transparent}
.steps li::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);transition-delay:var(--d,0s)}
.steps li.in::after{transform:none}
.steps li{position:relative}
.big .wd{display:inline-block;opacity:.18;transition:opacity .5s}
.big .wd.on{opacity:1}
.contact h2 .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(3deg);transition:opacity .5s,transform .7s var(--ease);transition-delay:calc(var(--i)*.07s)}
.contact h2.in .w{opacity:1;transform:none}
@media(max-width:820px){.scraps .s{display:none}.hero .g{grid-template-columns:1fr}.logo-w{order:-1}.logo{max-width:min(78%,360px);margin-inline:0}}

/* positioning + services */
.pos{padding-block:clamp(64px,9vw,128px)}
.pos .big{font-size:clamp(26px,3.6vw,46px);font-weight:700;line-height:1.14;letter-spacing:-.02em;max-width:22ch}
.pos .big span{color:var(--cobalt)}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,6vw,80px);border-top:2px solid var(--ink)}
.svc li{padding:24px 24px 0 0;border-right:1px solid var(--line);margin-right:24px}
.svc li:last-child{border:0;margin:0}
.svc b{display:block;font-size:13px;color:var(--cobalt);letter-spacing:.08em;margin-bottom:10px}
.svc p{margin-top:8px;color:#3a372f}
@media(max-width:820px){.svc{grid-template-columns:1fr}.svc li{border-right:0;border-bottom:1px solid var(--line);margin:0;padding:22px 0}}

/* work */
.work{padding-block:clamp(64px,9vw,120px) clamp(40px,6vw,80px)}
.work header p{margin-top:16px;opacity:.85}
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,84px);border-top:1px solid rgba(243,230,204,.16);text-decoration:none}
.case:first-of-type{margin-top:clamp(32px,5vw,64px)}
.case:nth-of-type(even) .clip{order:2}
.case .n{font-size:13px;font-weight:700;letter-spacing:.08em;opacity:.6}
.case h3{font-size:clamp(30px,3.6vw,48px);margin:10px 0 14px}
.case .go{display:inline-block;margin-top:22px;font-weight:700;border-bottom:2px solid var(--cobalt);padding-bottom:3px}
.case .go::after{content:"→";display:inline-block;margin-left:.45em;transition:transform .3s var(--ease)}
.case:hover .go::after{transform:translateX(6px)}
.clip{position:relative;background:var(--paper);padding:10px;box-shadow:0 30px 50px -20px rgba(0,0,0,.7)}
.case:hover .clip.in{transform:rotate(0) scale(1.015)}
.clip::before{content:"";position:absolute;left:50%;top:-14px;width:110px;height:30px;margin-left:-55px;background:rgba(243,230,204,.55);box-shadow:0 1px 2px rgba(0,0,0,.3);transform:rotate(-3deg);z-index:2}
.clip img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;transition:object-position 3.5s ease-in-out}.case:hover .clip img{object-position:bottom center}
.clip.tall img{object-position:top center}
.clip .ph{aspect-ratio:16/10;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:700;font-size:clamp(28px,4vw,54px);letter-spacing:-.02em}
@media(max-width:820px){.case{grid-template-columns:1fr}.case:nth-of-type(even) .clip{order:0}}

/* about */
.about{padding-block:clamp(64px,9vw,128px)}
.about .g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(28px,6vw,96px);align-items:center}
.about p{margin-top:18px}
.portrait{position:relative;max-width:420px;--r:-2.5deg}
.portrait figcaption{transition:transform .6s var(--ease) .5s,opacity .4s .5s}.portrait:not(.in) figcaption{opacity:0;transform:rotate(12deg) translateX(40px)}
.portrait img{width:100%;filter:drop-shadow(0 18px 22px rgba(25,25,23,.35))}
.portrait figcaption{position:absolute;right:-14px;bottom:26px;background:var(--cobalt);color:var(--paper);font-weight:700;font-size:13px;padding:8px 14px;transform:rotate(3deg);box-shadow:0 6px 12px rgba(25,25,23,.3)}
figure{margin:0}
@media(max-width:820px){.about .g{grid-template-columns:1fr}.portrait{max-width:300px}}

/* approach */
.app{padding-block:0 clamp(64px,9vw,128px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4vw,52px);counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.steps li::before{content:"0" counter(s);font-weight:700;font-size:28px;color:var(--cobalt);display:block;margin-bottom:8px}
.steps p{margin-top:8px;color:#3a372f}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* contact + footer */
.contact{padding-block:clamp(72px,10vw,140px);text-align:left}
.contact h2{font-size:clamp(36px,6vw,72px);letter-spacing:-.03em}
.contact p{margin-top:20px;font-size:clamp(18px,1.5vw,21px)}
.contact .acts{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
footer{background:var(--ink);color:var(--paper);border-top:1px solid rgba(243,230,204,.14);padding-block:28px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;opacity:.75}

/* case page */
.chead{padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,72px)}
.chead .back{font-size:14px;font-weight:700;text-decoration:none;opacity:.7}
.chead .back:hover{opacity:1;text-decoration:underline}
.chead h1{font-size:clamp(44px,7vw,88px);letter-spacing:-.035em;margin-top:22px}
.chead .one{font-size:clamp(20px,2.2vw,28px);margin-top:18px;max-width:30ch;line-height:1.3}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5vw,64px);border-top:1px solid rgba(243,230,204,.2);padding-top:22px}
.facts dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.facts dd{margin:6px 0 0;font-size:16px}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cbody{padding-block:clamp(56px,8vw,110px)}
.cbody section{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(16px,4vw,64px);padding-block:clamp(26px,3.6vw,44px);border-top:1px solid var(--line)}
.cbody section:first-child{border-top:2px solid var(--ink)}
.cbody h2{font-size:clamp(22px,2vw,28px)}
.cbody ul{display:grid;gap:14px}
.cbody li{padding-left:26px;position:relative;max-width:66ch}
.cbody li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--cobalt)}
@media(max-width:820px){.cbody section{grid-template-columns:1fr}}
.shots{padding-block:clamp(56px,8vw,110px)}
.shots .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vw,48px);margin-top:clamp(28px,4vw,52px);align-items:start}
.shot{background:var(--paper);padding:10px;box-shadow:0 30px 50px -22px rgba(0,0,0,.75)}
.shot.in:hover{transform:rotate(0) scale(1.01)}
.shot.wide{grid-column:1/-1}
.shot.phone,.shot.tall{max-width:420px;justify-self:center;width:100%}
.shots small{display:block;margin-top:28px;opacity:.6;font-size:14px}
@media(max-width:820px){.shots .grid{grid-template-columns:1fr}}
.nextc{padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.nextc a{text-decoration:none;display:block}
.nextc b{font-size:clamp(34px,6vw,72px);letter-spacing:-.03em;line-height:1.05;display:inline-block;border-bottom:4px solid var(--cobalt)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv,.slap,.contact h2 .w{opacity:1;transform:none;transition:none}.slap{transform:rotate(var(--r,0deg))}.logo,.hero h1 .w,.rot b,.tick div,.scraps i::before{animation:none}.big .wd{opacity:1}*{transition-duration:.01s!important}}