body{margin:0}
.ps{position:relative;overflow:hidden;min-height:980px;background:#1B5E3B;color:#F3EFE6;font-family:'DM Sans',system-ui,sans-serif;line-height:1.5}
.ps *{box-sizing:border-box}
.wrap{position:relative;z-index:3;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0}
.logo{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font:800 24px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.logo::after{content:'';width:9px;height:9px;margin-left:4px;border-radius:50%;background:#F2C744}
.nr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nl a{position:relative;display:inline-block;margin-right:26px;padding:12px 0;color:#F3EFE6;text-decoration:none;font-size:16px}
.nl a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:2px;background:#F2C744;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nl a:hover::after,.nl a:focus-visible::after{transform:scaleX(1)}
.nl a:focus-visible,.btn:focus-visible,.logo:focus-visible{outline:2px solid #F2C744;outline-offset:4px}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border:2px solid #F3EFE6;border-radius:999px;background:#F3EFE6;color:#0F2A1C;text-decoration:none;font:700 16px 'DM Sans',sans-serif;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.btn:hover,.btn:focus-visible{background:#F2C744;border-color:#F2C744;transform:translateY(-3px);box-shadow:0 8px 0 #0F2A1C}
.btn.gh{background:transparent;color:#F3EFE6}
.btn.gh:hover,.btn.gh:focus-visible{background:#F3EFE6;border-color:#F3EFE6;color:#0F2A1C}
.btn svg{transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}

/* hero (B) */
.hxw{position:relative;overflow:hidden}
.hxdots{position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(243,239,230,.16) 1.5px,transparent 1.5px);background-size:32px 32px;-webkit-mask-image:linear-gradient(#000 40%,transparent 95%);mask-image:linear-gradient(#000 40%,transparent 95%);animation:dr 30s linear infinite}
@keyframes dr{to{background-position:32px 32px}}
@keyframes pulse{50%{opacity:.25}}
.hx{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(20px,3vw,40px) 0 0}
.hxn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px 6px 18px;border-radius:999px;background:rgba(15,42,28,.55);color:#F3EFE6;text-decoration:none;font-size:15px;font-weight:500;animation:fade .8s .1s both;transition:background .25s}
.hxn b{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:#F2C744;color:#0F2A1C;font-weight:700}
.hxn:hover,.hxn:focus-visible{background:rgba(15,42,28,.85)}
.hxn:focus-visible{outline:2px solid #F2C744;outline-offset:4px}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.hxd{margin:28px 0 0;max-width:1100px;font:800 clamp(44px,7.4vw,112px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.045em}
.hxl{display:block}
.hxk{display:inline-block;animation:pop .9s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 120ms + 150ms)}
@keyframes pop{from{opacity:0;transform:translateY(40px) scale(.9)}}
.hxh{margin:0 .06em;padding:0 .18em .06em;background:#F2C744;color:#0F2A1C;border-radius:.16em;rotate:-2.5deg;box-shadow:0 .08em 0 #0F2A1C}
.hxp{max-width:640px;margin:28px 0 32px;font-size:clamp(17px,1.5vw,20px);color:#e5e9df;animation:fade .8s .8s both}
.hxb{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fade .8s 1s both}
.hxr{position:relative;width:100%;max-width:1200px;height:330px;margin-top:56px;overflow:hidden}
.hxc{position:absolute;left:0;right:0;bottom:-90px;display:flex;justify-content:center}
.hxr .bw{width:min(360px,34%);border-radius:14px;overflow:hidden;background:#fff;color:#14201A;text-align:left;box-shadow:0 22px 40px rgba(6,24,14,.38);animation:drop 1.1s cubic-bezier(.2,.9,.3,1.1) backwards;transition:translate .5s cubic-bezier(.2,.7,.2,1),rotate .5s cubic-bezier(.2,.7,.2,1)}
.hxr .bw+.bw{margin-left:-26px}
.hxr .k1{rotate:-5deg;translate:0 26px;animation-delay:.9s}
.hxr .k2{rotate:0deg;translate:0 -4px;z-index:2;animation-delay:1.05s}
.hxr .k3{rotate:5deg;translate:0 26px;animation-delay:1.2s}
@keyframes drop{from{translate:0 160%;opacity:0}}
.hxr .bw:hover{translate:0 -18px;rotate:0deg;z-index:4}
.hxr .mock{height:210px}
.hxr .mock b{height:80px}
.bar{display:flex;gap:6px;align-items:center;padding:10px 12px;background:#ebe8df}
.bar i{width:8px;height:8px;border-radius:50%;background:#bdb9ac}
.bar span{margin-left:8px;font-size:12px;color:#4a554e}
.mock{height:190px;padding:16px;display:flex;flex-direction:column;gap:10px}
.mock b{display:block;height:70px;border-radius:6px}
.mock u{display:block;height:11px;border-radius:3px;background:rgba(255,255,255,.55);width:82%}
.mock u+u{width:56%}
.cap{padding:12px 16px 14px;font-weight:600;font-size:15px}
.hxs{position:absolute;z-index:6;left:clamp(20px,7%,110px);top:300px;width:140px;height:140px;border-radius:50%;background:#F2C744;color:#14201A;box-shadow:0 9px 0 #0F2A1C;animation:fade .8s 1.3s both}
.hxs svg{position:absolute;inset:0;animation:spin 20s linear infinite}
.hxs div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 32px/1 'Bricolage Grotesque',sans-serif}
.hxs small{margin-top:4px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
.hxt{position:absolute;z-index:6;right:clamp(20px,7%,110px);top:360px;padding:14px 22px;border:2px solid #0F2A1C;border-radius:14px;background:#F3EFE6;color:#0F2A1C;rotate:5deg;box-shadow:6px 6px 0 #0F2A1C;font:800 28px/1 'Bricolage Grotesque',sans-serif;animation:fade .8s 1.5s both}
.hxt small{display:block;margin-top:4px;font:500 13px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}

html{scroll-behavior:smooth}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;padding:12px 18px;border-radius:8px;background:#F2C744;color:#0F2A1C;font-weight:700;text-decoration:none}
.skip:focus{left:16px}

/* bands */
.sec{position:relative;z-index:3;padding:clamp(64px,9vw,120px) 0}
.cream{background:#F3EFE6;color:#0F2A1C}
.inkb{background:#0F2A1C;color:#F3EFE6}
.yel{background:#F2C744;color:#0F2A1C}
.kick{font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.cream .kick{color:#1B5E3B}
.inkb .kick{color:#F2C744}
.h2{margin:14px 0 0;font:800 clamp(40px,6vw,88px)/.96 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em}
.h2 em{font-style:normal;color:#1B5E3B}
.inkb .h2 em{color:#F2C744}
.hh{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.hh p{max-width:360px;margin:0;font-size:17px}

.mq{position:relative;z-index:3;overflow:hidden;background:#F2C744;color:#0F2A1C;border-block:3px solid #0F2A1C}
.mqt{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq:hover .mqt{animation-play-state:paused}
.mqt span{display:inline-flex;align-items:center;padding:14px 0 14px 26px;font:800 clamp(34px,5vw,64px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;white-space:nowrap}
.mqt span::after{content:'';width:.3em;height:.3em;margin-left:26px;border-radius:50%;background:#1B5E3B}
@keyframes mq{to{transform:translateX(-50%)}}

/* services */
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(36px,5vw,64px)}
a.sc{color:inherit;text-decoration:none}
a.sc:focus-visible{outline:3px solid #F2C744;outline-offset:3px}
.sc{display:flex;flex-direction:column;gap:14px;min-height:280px;padding:28px;border:2px solid #0F2A1C;border-radius:18px;background:#fff;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s}
.sc:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 #0F2A1C;background:#F2C744}
.sc .no{font:800 15px 'Bricolage Grotesque',sans-serif;color:#1B5E3B;transition:color .3s}
.sc:hover .no{color:#0F2A1C}
.sc h3{margin:0;font:800 clamp(26px,2.5vw,36px)/1.02 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em}
.sc p{margin:0;color:#26332b}
.sc .ch{margin-top:auto}
.sc .ch span{display:inline-block;margin:0 6px 6px 0;padding:5px 13px;border:1.5px solid #0F2A1C;border-radius:999px;font-size:14px}

/* projects */
.pg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:clamp(40px,5vw,72px)}
.pj{background:#F3EFE6;color:#0F2A1C;border-radius:16px;overflow:hidden;box-shadow:0 18px 0 rgba(0,0,0,.25);transition:rotate .5s cubic-bezier(.2,.7,.2,1),translate .5s cubic-bezier(.2,.7,.2,1)}
.pj:nth-child(1){rotate:-2deg}
.pj:nth-child(2){rotate:1.5deg;translate:0 24px}
.pj:nth-child(3){rotate:-1deg}
.pj:hover{rotate:0deg;translate:0 -10px}
.pj .mock{height:230px}
.pj .bd{padding:18px 20px 22px}
.pj h3{margin:0 0 6px;font:800 clamp(20px,1.9vw,26px)/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em}
.pj .pcat{font-size:14px;color:#3f4b44}

/* clients */
.tg{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(36px,5vw,64px)}
.tg div{padding:14px 26px;border:2px solid #0F2A1C;border-radius:999px;background:#fff;font:700 clamp(18px,2vw,28px)/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,rotate .3s}
.tg div:nth-child(odd){rotate:-1.2deg}
.tg div:nth-child(even){rotate:1deg}
.tg div:hover{background:#F2C744;rotate:-3deg;transform:translateY(-4px)}

/* stats */
.stg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.st{border-top:3px solid #0F2A1C;padding-top:18px}
.sn{font:800 clamp(90px,14vw,210px)/.9 'Bricolage Grotesque',sans-serif;letter-spacing:-.06em}
.sn sup{font-size:.4em;vertical-align:top;margin-left:.04em}
.sl{margin-top:10px;font-size:19px;font-weight:500}
.cnt{--n:0;animation:count 2.4s cubic-bezier(.2,.7,.2,1) both}
.cnt::after{counter-reset:c var(--n);content:counter(c)}
@keyframes count{from{--n:0}}

/* contact */
.cgd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.ct{margin-top:36px;display:grid;gap:18px;color:#e5e9df}
.ct b{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#F2C744;font-weight:600;margin-bottom:2px}
.fc{padding:clamp(24px,3vw,40px);border-radius:22px;background:#F3EFE6;color:#0F2A1C;box-shadow:10px 10px 0 #0F2A1C}
.frm{display:grid;gap:22px}
.frm label{display:block;font-size:14px;font-weight:600}
.frm input,.frm textarea{display:block;width:100%;margin-top:6px;padding:14px 16px;border:2px solid #0F2A1C;border-radius:12px;background:#fff;color:#0F2A1C;font:400 17px 'DM Sans',sans-serif}
.frm textarea{min-height:120px;resize:vertical}
.frm input:focus,.frm textarea:focus{outline:3px solid #F2C744;outline-offset:2px}
.er{margin-top:6px;font-size:15px;font-weight:500;color:#9b1c1c}
.fc .btn{background:#0F2A1C;border-color:#0F2A1C;color:#F3EFE6}
.fc .btn:hover,.fc .btn:focus-visible{background:#F2C744;border-color:#F2C744;color:#0F2A1C}
.ok{font:800 clamp(26px,3vw,38px)/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:#1B5E3B}
.ft{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,8vw,104px);padding-top:22px;border-top:1px solid rgba(243,239,230,.3);font-size:15px;color:#e5e9df}
.fq{margin-top:clamp(32px,4vw,56px);border-bottom:2px solid #0F2A1C}
.fqi{border-top:2px solid #0F2A1C}
.fqt{margin:0;font:inherit}
.fqh{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:44px;padding:24px 0;background:none;border:0;color:#0F2A1C;cursor:pointer;text-align:left;font:800 clamp(20px,2.2vw,30px)/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em;transition:color .25s}
.fqh:hover{color:#1B5E3B}
.fqh:focus-visible{outline:3px solid #1B5E3B;outline-offset:4px}
.fpl{position:relative;flex:none;width:30px;height:30px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fpl::before,.fpl::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.fpl::after{transform:translate(-50%,-50%) rotate(90deg)}
.fqi.on .fpl{transform:rotate(135deg)}
.fpn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.fqi.on .fpn{grid-template-rows:1fr}
.fpn>div{overflow:hidden}
.fpn p{margin:0;padding:0 0 26px;max-width:760px;font-size:18px;color:#26332b}
.gr{background:#1B5E3B;color:#F3EFE6}
.gr .kick{color:#F2C744}
.gr .h2 em{color:#F2C744}
.nl a.ai{font-weight:700;color:#F2C744}
.nl a.ai::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#F2C744;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.aig{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(36px,6vw,96px);align-items:start;margin-top:clamp(36px,5vw,64px)}
.aip{margin:0 0 28px;max-width:520px;font-size:clamp(17px,1.5vw,20px);color:#e5e9df}
.aib{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.aib li{display:flex;gap:14px;align-items:flex-start;font-size:17px}
.aib li::before{content:'';flex:none;width:12px;height:12px;margin-top:8px;border-radius:50%;background:#F2C744}
.aic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.aic{display:flex;flex-direction:column;gap:12px;min-height:210px;padding:24px;border:2px solid #0F2A1C;border-radius:18px;background:#F3EFE6;color:#0F2A1C;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s}
.aic:hover,.aic:focus-visible{transform:translate(-4px,-4px);box-shadow:8px 8px 0 #0F2A1C;background:#F2C744}
.aic:focus-visible{outline:3px solid #F2C744;outline-offset:3px}
.aic .no{font:800 15px 'Bricolage Grotesque',sans-serif;color:#1B5E3B}
.aic:hover .no{color:#0F2A1C}
.aic h3{margin:0;min-width:0;font:800 clamp(19px,1.55vw,22px)/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;overflow-wrap:anywhere;hyphens:auto}
.aic span.ar{margin-top:auto;font-weight:600;font-size:15px}
.aic span.ar::after{content:' →';display:inline-block;transition:transform .3s}
.aic:hover span.ar::after{transform:translateX(5px)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .cnt{animation:count linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
}

@media (prefers-reduced-motion:reduce){
  .hxdots,.hxk,.hxr .bw,.hxs svg,.hxn,.hxp,.hxb,.hxs,.hxt,.mqt{animation:none}
}
@media (max-width:900px){
  .sg,.pg,.stg,.cgd,.aig{grid-template-columns:minmax(0,1fr)}
  .pj:nth-child(2){translate:none}
  .hxs,.hxt{display:none}
  .hxr{height:260px}
  .hxr .bw{width:44%}
  .nr{width:100%}
  .nl{order:3;width:100%;display:flex;flex-wrap:wrap;gap:0 20px}
  .nl a{margin-right:0}
}