/* Afterhours.co — pastel pink, Gen Z editorial */
:root{--pink:#F7C6DA;--blush:#FCE8EF;--warm:#FFFCFA;--ink:#33252C;--rose:#C77D98;--hd:'Space Grotesk',system-ui,sans-serif;--bd:'Inter',system-ui,sans-serif;--hw:'Caveat',cursive;--line:rgba(51,37,44,.14)}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,figure{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--bd);background:var(--warm);color:var(--ink);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}svg{display:block}
h1,h2,h3,h4{font-family:var(--hd);font-weight:700;letter-spacing:-.04em;line-height:1;text-transform:lowercase}
h2{font-size:clamp(2.2rem,5.2vw,4.4rem)}
h3{font-size:1.4rem;letter-spacing:-.03em}
em{font-style:normal;opacity:.6}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;z-index:300}.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
section{padding:clamp(70px,10vw,130px) 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;padding:.7em 1.1em;border-radius:99px;background:var(--blush);border:1px solid var(--line);font:600 .72rem/1 var(--bd);letter-spacing:.14em;text-transform:uppercase}
.mark{background:linear-gradient(transparent 60%,var(--pink) 60% 92%,transparent 92%);padding:0 .06em}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.95em 1.6em;border-radius:99px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 1rem/1 var(--bd);text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:4px 4px 0 var(--ink)}
.btn-pink{background:var(--pink)}.btn-ink{background:var(--ink);color:var(--warm)}.btn-ink:hover{box-shadow:4px 4px 0 var(--rose)}
.spark{position:absolute;color:var(--rose);pointer-events:none}.spark svg{width:100%;height:100%}
.sp1{width:34px;height:34px;left:4%;top:16%;animation:tw 4s infinite}.sp2{width:20px;height:20px;left:46%;bottom:12%;color:var(--ink);animation:tw 5s infinite 1s}
.sp3{width:30px;height:30px;right:2%;top:2%;animation:tw 4.5s infinite .5s}.sp4{width:38px;height:38px;right:6%;top:-10px;animation:tw 4s infinite}
.sp5{width:46px;height:46px;left:9%;top:18%;color:var(--warm);animation:tw 4s infinite}.sp6{width:28px;height:28px;right:12%;bottom:20%;color:var(--ink);animation:tw 5s infinite 1s}
@keyframes tw{50%{transform:scale(.55) rotate(25deg);opacity:.6}}
@keyframes fl{50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes mq{to{transform:translateX(-50%)}}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,252,250,.85);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.sc{border-color:var(--line);box-shadow:0 8px 30px rgba(199,125,152,.14)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{font:700 1.15rem var(--hd);letter-spacing:-.02em;text-decoration:none;text-transform:uppercase}.logo i{font-style:normal;color:var(--rose)}
.menu{display:flex;align-items:center;gap:4px}
.menu a:not(.btn){padding:.55em .95em;border-radius:99px;text-decoration:none;font-weight:500;font-size:.95rem;transition:background .2s}
.menu a:not(.btn):hover{background:var(--blush)}
.menu .btn{padding:.7em 1.2em;margin-left:8px;font-size:.95rem}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:var(--pink);place-items:center;cursor:pointer;padding:0}
.burger span{grid-area:1/1;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s}
.burger span:first-child{transform:translateY(-4px)}.burger span:last-child{transform:translateY(4px)}
.nav.open .burger span:first-child{transform:rotate(45deg)}.nav.open .burger span:last-child{transform:rotate(-45deg)}

/* hero */
.hero{padding:clamp(36px,6vw,80px) 0 clamp(60px,9vw,120px);background:radial-gradient(55% 55% at 88% 22%,var(--pink) 0,transparent 70%),radial-gradient(40% 40% at 0 100%,var(--blush) 0,transparent 70%)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.9rem,7.2vw,6.3rem);margin:26px 0 24px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:42ch;opacity:.88}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.stage{position:relative;min-height:540px}
.win{--r:-4deg;position:absolute;left:0;top:5%;width:78%;background:#fff;border:1.5px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--pink);transform:rotate(-4deg);overflow:hidden}
.fl{animation:fl 7s ease-in-out infinite}.fl2{animation:fl 8s ease-in-out infinite 1s}
.win-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1.5px solid var(--ink);background:var(--blush);font-size:.72rem}
.win-bar b{width:10px;height:10px;border-radius:50%;background:var(--ink)}.win-bar span{margin-left:10px;padding:2px 12px;background:#fff;border-radius:99px;border:1px solid var(--line)}
.win-body{padding:22px;display:grid;gap:14px}
.win-nav{display:flex;gap:8px}.win-nav i{height:8px;width:36px;border-radius:9px;background:var(--pink)}
.win-h{font:700 clamp(1.8rem,3.6vw,2.9rem)/.95 var(--hd);letter-spacing:-.04em}
.win-pill{justify-self:start;padding:.55em 1.1em;border-radius:99px;background:var(--ink);color:var(--warm);font-size:.8rem;font-weight:600}
.win-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.win-tiles i{height:70px;border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--blush))}.win-tiles i+i{background:linear-gradient(135deg,var(--blush),var(--rose))}
.phone{--r:6deg;position:absolute;right:0;bottom:2%;width:44%;padding:14px;background:#fff;border:1.5px solid var(--ink);border-radius:32px;box-shadow:-8px 8px 0 var(--blush),0 20px 40px rgba(199,125,152,.25);transform:rotate(6deg)}
.ph-top{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;margin-bottom:10px}.ph-top i{width:24px;height:24px;border-radius:50%;background:var(--pink);border:1.5px solid var(--ink)}
.ph-img{aspect-ratio:1;border-radius:18px;background:linear-gradient(160deg,var(--pink),var(--rose));display:grid;place-items:center;color:#fff}.ph-img svg{width:44%;height:44%}
.ph-line{height:7px;border-radius:9px;background:var(--blush);margin-top:10px}.ph-line.s{width:60%}.ph-heart{margin-top:10px;font-size:.8rem;color:var(--rose)}
.sticker{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-20px 0 0 -30px;display:grid;place-items:center;text-align:center;padding:14px;border-radius:50%;background:var(--pink);border:1.5px solid var(--ink);font:700 .78rem/1.2 var(--hd);text-transform:uppercase;letter-spacing:.04em;animation:sp 16s linear infinite}
.chip{position:absolute;padding:.5em 1em;border-radius:99px;background:#fff;border:1.5px solid var(--ink);font-size:.78rem;font-weight:600;white-space:nowrap}
.c1{left:2%;bottom:14%;transform:rotate(-6deg)}.c2{right:4%;top:12%;transform:rotate(5deg);background:var(--blush)}
.note-h{position:absolute;left:28%;bottom:0;font:600 1.6rem var(--hw);color:var(--rose);display:flex;gap:4px;align-items:flex-end}.note-h svg{width:54px;height:36px;transform:scaleY(-1) rotate(-20deg)}

/* marquee */
.mq-w{overflow:hidden;padding:26px 0}
.mq{background:var(--pink);border-block:1.5px solid var(--ink);transform:rotate(-1.2deg);margin:0 -20px;overflow:hidden}
.mq-t{display:flex;width:max-content;gap:2.5rem;padding:16px 0;animation:mq 40s linear infinite;font:700 clamp(1.2rem,2.4vw,1.8rem) var(--hd);letter-spacing:-.02em;white-space:nowrap}
.mq:hover .mq-t{animation-play-state:paused}

/* intro */
.intro-in{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.intro h2{font-size:clamp(2.3rem,5.8vw,5rem)}
.intro p{margin-bottom:1em;font-size:1.05rem}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.pills span{padding:.5em 1em;border-radius:99px;border:1.5px solid var(--ink);font-size:.85rem;font-weight:600}.pills span:nth-child(2){background:var(--pink)}

/* panels */
.panel{background:var(--blush);border-radius:clamp(28px,5vw,56px);margin-inline:clamp(8px,1.5vw,16px)}
.sec-h{display:grid;gap:18px;justify-items:start;margin-bottom:clamp(36px,6vw,64px);max-width:760px}
.note-p{font-size:1rem;opacity:.85}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{position:relative;display:block;min-height:310px;padding:30px 30px 90px;background:#fff;border:1.5px solid var(--line);border-radius:28px;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}
.svc:hover,.svc:focus-visible{transform:translateY(-8px) rotate(-.6deg);box-shadow:8px 8px 0 var(--pink);border-color:var(--ink)}
.svc-n{font:600 .85rem var(--hd);letter-spacing:.1em;opacity:.55}
.acc{display:block;width:58px;height:58px;margin:18px 0 22px;background:linear-gradient(135deg,var(--pink),var(--rose));transition:transform .5s}
.svc:hover .acc{transform:rotate(90deg) scale(1.1)}
.a1 .acc{border-radius:50%}.a2 .acc{border-radius:18px;border:1.5px solid var(--ink)}.a3 .acc{border-radius:99px;width:90px;height:44px;margin-top:25px;margin-bottom:29px}
.a4 .acc{clip-path:polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%)}
.a5 .acc{border-radius:58px 58px 0 0;height:30px;margin-top:46px;margin-bottom:34px;width:70px}.a6 .acc{border-radius:50%;background:conic-gradient(var(--pink),var(--rose),var(--blush),var(--pink))}
.svc h3{margin-bottom:10px}.svc p{font-size:.97rem;opacity:.85}
.go{position:absolute;right:26px;bottom:26px;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:1.3rem;background:#fff;transition:transform .3s,background .3s}
.svc:hover .go,.svc:focus-visible .go{background:var(--pink);transform:rotate(-45deg) scale(1.1)}

/* why */
.pr{display:grid;grid-template-columns:minmax(140px,.55fr) 1.45fr;gap:30px;align-items:center;padding:34px 0;border-top:1.5px solid var(--ink)}
.pr:last-child{border-bottom:1.5px solid var(--ink)}
.pr b{font:700 clamp(5rem,14vw,11rem)/.85 var(--hd);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ink);transition:color .4s}
.pr:hover b{color:var(--pink)}
.pr h3{font-size:clamp(1.6rem,3vw,2.5rem);margin-bottom:10px}.pr p{max-width:52ch;font-size:1.05rem}

/* steps */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:36px;border-top:2px dashed var(--rose)}
.st{position:relative;padding:28px 24px 30px;background:#fff;border:1.5px solid var(--ink);border-radius:26px;box-shadow:6px 6px 0 var(--pink)}
.st:nth-child(even){margin-top:40px}
.st b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pink);border:1.5px solid var(--ink);font:700 1.1rem var(--hd);margin-bottom:22px}
.st h3{margin-bottom:8px}.st p{font-size:.95rem}

/* work */
.work{background:var(--warm)}
.pfs{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.p1{grid-column:span 7}.p2{grid-column:span 5}.p3{grid-column:span 5}.p4{grid-column:span 7}
.pf{background:#fff;border:1.5px solid var(--ink);border-radius:30px;overflow:hidden;transition:transform .3s,box-shadow .3s}.pf:hover{transform:translateY(-6px);box-shadow:8px 8px 0 var(--pink)}
.mock{position:relative;min-height:340px;overflow:hidden;border-bottom:1.5px solid var(--ink)}
.pf-t{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px}.pf-t h3{font-size:1.2rem}.pf-t p{font-size:.9rem;opacity:.8}
.tag{flex:none;padding:.4em .9em;border-radius:99px;background:var(--blush);border:1px solid var(--ink);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.m1{background:linear-gradient(160deg,var(--pink),var(--blush))}
.arch{position:absolute;right:9%;bottom:0;width:42%;height:82%;background:#fff;border:1.5px solid var(--ink);border-radius:999px 999px 0 0;display:grid;place-items:center;text-align:center;font:700 1.5rem/1 var(--hd);letter-spacing:-.04em;box-shadow:8px 8px 0 var(--rose)}
.lb{position:absolute;left:6%;top:12%;font:700 clamp(2.4rem,6vw,4.6rem)/.9 var(--hd);letter-spacing:-.05em}
.c3{left:6%;bottom:12%;transform:rotate(-4deg);background:var(--warm)}
.m2{background:var(--blush);padding:22px;display:grid;align-content:start;gap:16px}
.shop-bar{display:flex;justify-content:space-between;align-items:center;font:700 1.1rem var(--hd)}.shop-bar span{padding:.3em .9em;border-radius:99px;background:var(--ink);color:var(--warm);font:600 .75rem var(--bd)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tiles i{aspect-ratio:3/4;border-radius:18px;background:linear-gradient(160deg,var(--pink),#fff);border:1.5px solid var(--ink)}.tiles i:nth-child(2){background:linear-gradient(160deg,var(--rose),var(--pink))}.tiles i:nth-child(3){background:linear-gradient(160deg,#fff,var(--pink))}
.add{justify-self:center;padding:.7em 1.4em;border-radius:99px;background:var(--pink);border:1.5px solid var(--ink);font-weight:600;font-size:.9rem}
.m3{background:linear-gradient(135deg,var(--pink),var(--rose) 140%);display:grid;place-items:center}
.ui{width:74%;padding:24px;background:#fff;border:1.5px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--blush);transform:rotate(-3deg)}
.ui small{display:block;font-weight:600;opacity:.6;margin-bottom:8px}.ui strong{display:block;font:700 clamp(1.7rem,3.4vw,2.4rem)/.95 var(--hd);letter-spacing:-.04em}
.tg{display:flex;gap:8px;margin-top:18px}.tg i{height:30px;flex:1;border-radius:99px;background:var(--blush)}.tg i:first-child{background:var(--ink)}
.c4{right:8%;bottom:10%;transform:rotate(5deg)}
.m4{background:radial-gradient(var(--pink) 1.5px,transparent 1.5px) 0 0/18px 18px,var(--blush);display:grid;place-items:center}
.posts{display:flex;gap:14px;padding:0 20px}
.posts div{width:clamp(90px,17vw,150px);aspect-ratio:4/5;padding:12px;border:1.5px solid var(--ink);border-radius:18px;background:#fff;font-size:.78rem;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:5px 5px 0 var(--rose)}
.posts b{font:700 1.3rem var(--hd);letter-spacing:-.04em}
.posts div:nth-child(1){transform:rotate(-5deg)}.posts div:nth-child(2){transform:translateY(-14px);background:var(--pink)}.posts div:nth-child(3){transform:rotate(5deg)}

/* about */
.about-in{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.about h2{margin:18px 0 24px;font-size:clamp(2.2rem,4.8vw,4rem)}.about p{margin-bottom:1em;font-size:1.05rem;max-width:56ch}
.collage{position:relative;min-height:420px}
.cd{position:absolute;padding:26px;background:#fff;border:1.5px solid var(--ink);border-radius:26px}
.c-a{left:0;top:6%;width:62%;background:var(--blush);box-shadow:8px 8px 0 var(--pink);transform:rotate(-3deg);display:flex;flex-wrap:wrap;gap:8px}
.c-a small,.c-b small{width:100%;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;opacity:.65}
.c-a span{padding:.45em .9em;border-radius:99px;background:#fff;border:1px solid var(--ink);font-size:.85rem;font-weight:500}
.c-b{right:0;bottom:6%;width:62%;font:700 1.6rem/1.05 var(--hd);letter-spacing:-.03em;transform:rotate(3deg);box-shadow:-8px 8px 0 var(--pink)}.c-b small{display:block;margin-top:14px;font-family:var(--bd)}
.s2{position:absolute;right:4%;top:2%;left:auto;margin:0;width:104px;height:104px;animation:sp 18s linear infinite;font-size:.9rem}

/* cta */
.cta-w{padding:0 clamp(8px,1.5vw,16px)}
.cta{position:relative;overflow:hidden;text-align:center;background:linear-gradient(160deg,var(--pink),#f9d3e2);border-radius:clamp(28px,5vw,56px);padding:clamp(70px,10vw,140px) 24px;margin-block:clamp(30px,5vw,60px) 0}
.cta h2{font-size:clamp(2.4rem,7vw,6rem);max-width:12em;margin:0 auto 22px}
.cta p{max-width:46ch;margin:0 auto 34px;font-size:1.15rem}

/* contact */
.contact-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.contact h2{margin:18px 0 18px}.contact p{max-width:40ch}.small{font-size:.85rem;opacity:.7;margin-top:14px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:clamp(22px,4vw,40px);background:#fff;border:1.5px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--pink)}
.fld{display:grid;gap:6px;align-content:start}.full{grid-column:1/-1}
.fld label{font-weight:600;font-size:.88rem}
.fld input,.fld select,.fld textarea{width:100%;padding:.85em 1.1em;border:1.5px solid var(--line);border-radius:18px;background:var(--warm);color:var(--ink);font:inherit;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--pink)}
.fld.bad input,.fld.bad textarea{border-color:#a3304f}
.err{min-height:0;color:#a3304f;font-size:.8rem;font-weight:500}
.hp{position:absolute;left:-9999px;opacity:0}
.status{font-weight:600;padding:0}.status.ok,.status.no{padding:14px 18px;border-radius:18px}.status.ok{background:var(--blush);border:1.5px solid var(--ink)}.status.no{background:#fde6ea;border:1.5px solid #a3304f;color:#7d1f38}
.btn[disabled]{opacity:.6;cursor:wait}

/* footer */
.foot{background:var(--blush);border-radius:clamp(28px,5vw,56px) clamp(28px,5vw,56px) 0 0;margin:clamp(60px,8vw,110px) clamp(8px,1.5vw,16px) 0;padding-top:clamp(50px,7vw,90px)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:36px}
.foot h4{font:600 .75rem var(--bd);letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.foot nav a{display:block;text-decoration:none;margin-bottom:6px}.foot nav a:hover{color:var(--rose)}
.foot p{font-size:.95rem;margin-bottom:6px}.foot-tag{font:700 1.5rem/1.1 var(--hd);letter-spacing:-.03em;margin-top:14px;max-width:11em}
.foot-bt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:50px;padding:22px 0 30px;border-top:1px solid var(--line);font-size:.85rem}

/* cursor + reveal */
.cur{position:fixed;top:0;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--pink);border:1.5px solid var(--ink);pointer-events:none;z-index:400;mix-blend-mode:multiply;transition:width .2s,height .2s,margin .2s}
.cur.big{width:48px;height:48px;margin:-24px 0 0 -24px}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .svc.rv.in{transition:transform .3s,box-shadow .3s,border-color .3s,opacity .7s}

/* ===== next-level motion ===== */
.progress{position:fixed;top:0;left:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--pink),var(--rose));z-index:500;pointer-events:none}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:blob 16s ease-in-out infinite alternate}
.hero::before{width:360px;height:360px;background:var(--pink);right:-80px;top:8%}
.hero::after{width:280px;height:280px;background:#fbd9e6;left:-60px;bottom:0;animation-delay:-8s}
.hero-in{position:relative;z-index:1}
@keyframes blob{to{transform:translate(-60px,50px) scale(1.25)}}
@keyframes fu{from{opacity:0;transform:translateY(22px)}}
@keyframes pop{from{opacity:0;transform:translateY(46px) rotate(-14deg) scale(.88)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes pp{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes bu{to{transform:translate(var(--dx),var(--dy)) scale(0) rotate(200deg);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(51,37,44,.35)}70%,100%{box-shadow:0 0 0 18px rgba(51,37,44,0)}}

/* word-by-word headline reveal */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block}
.js .sw .w>span{transform:translateY(112%) rotate(5deg)}
.js .sw.in .w>span{transform:none;transition:transform .95s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*.06s + .05s)}
.js .sw .mark{background-repeat:no-repeat;background-size:0 100%}
.js .sw.in .mark{background-size:100% 100%;transition:background-size 1s cubic-bezier(.6,0,.2,1) .7s}

/* hero entrance + parallax layers */
.js .hero-copy>.eyebrow{animation:fu .8s cubic-bezier(.2,.8,.2,1) both}
.js .hero-copy>.lead{animation:fu .8s cubic-bezier(.2,.8,.2,1) .55s both}
.js .hero-copy>.btns{animation:fu .8s cubic-bezier(.2,.8,.2,1) .75s both}
.js .stage .win{animation:pop 1s cubic-bezier(.2,.8,.2,1) .35s both,fl 7s ease-in-out 1.6s infinite}
.js .stage .phone{animation:pop 1s cubic-bezier(.2,.8,.2,1) .6s both,fl 8s ease-in-out 1.8s infinite}
.js .stage .sticker{animation:pp .7s cubic-bezier(.3,1.6,.5,1) .95s both,sp 16s linear 1.7s infinite}
.js .stage .chip,.js .stage .note-h{animation:pp .7s cubic-bezier(.3,1.6,.5,1) 1.15s both}
.js .stage .c2{animation-delay:1.3s}.js .stage .note-h{animation-delay:1.45s}
.win{translate:calc(var(--mx,0)*16px) calc(var(--my,0)*12px)}
.phone{translate:calc(var(--mx,0)*-22px) calc(var(--my,0)*-16px)}
.sticker{translate:calc(var(--mx,0)*30px) calc(var(--my,0)*22px)}
.chip{translate:calc(var(--mx,0)*-34px) calc(var(--my,0)*20px)}

/* magnetic buttons + tilt cards */
.btn{translate:var(--tx,0px) var(--ty,0px);transition:transform .25s,box-shadow .25s,background .25s,translate .2s}
.js .svc.in:hover,.js .svc.in:focus-visible{transform:perspective(900px) translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.js .pf.in:hover{transform:translateY(-6px)}
.js .rv{transition-delay:var(--d,0s)!important}
.svc{transform-style:preserve-3d}.svc h3,.svc .acc{transition:transform .4s}.svc:hover .acc{translate:0 -4px}
.svc:hover h3{transform:translateZ(18px)}

/* marquee skews with scroll speed */
.mq{transform:rotate(-1.2deg) skewX(var(--sk,0deg))}

/* process line draws itself */
.js .steps::before{transform-origin:0 50%;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.6,0,.2,1) .3s}
.js .steps.in::before{transform:scaleX(1)}
.js .steps.in .st b{animation:pp .6s cubic-bezier(.3,1.6,.5,1) both}
.js .steps.in .st:nth-child(2) b{animation-delay:.4s}.js .steps.in .st:nth-child(3) b{animation-delay:.8s}.js .steps.in .st:nth-child(4) b{animation-delay:1.2s}
.st{transition:transform .3s,box-shadow .3s}.st:hover{box-shadow:10px 10px 0 var(--rose)}

/* portfolio hover life */
.arch,.ui,.tiles i,.posts div,.lb{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pf:hover .arch{transform:translateY(-14px)}.pf:hover .lb{transform:translateX(10px)}
.pf:hover .ui{transform:rotate(0) scale(1.05)}
.pf:hover .tiles i:nth-child(1){transform:translateY(-8px) rotate(-3deg)}.pf:hover .tiles i:nth-child(2){transform:translateY(-14px)}.pf:hover .tiles i:nth-child(3){transform:translateY(-8px) rotate(3deg)}
.pf:hover .posts div:nth-child(1){transform:rotate(-11deg) translateX(-14px)}.pf:hover .posts div:nth-child(2){transform:translateY(-26px) scale(1.05)}.pf:hover .posts div:nth-child(3){transform:rotate(11deg) translateX(14px)}
.chip.c3,.chip.c4{animation:fl 6s ease-in-out infinite}

/* CTA + click sparkles + pill glow */
.cta .btn{animation:pulse 2.4s infinite}.cta .btn:hover{animation:none}
.cta::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.45),transparent 30%);animation:sp 14s linear infinite;pointer-events:none}
.cta>*{position:relative}
.burst{position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;color:var(--rose);pointer-events:none;z-index:450;animation:bu .7s ease-out forwards}.burst svg{width:100%;height:100%}
.pills span,.eyebrow{transition:transform .25s,background .25s}.pills span:hover{transform:translateY(-4px) rotate(-3deg);background:var(--pink)}
.fld input,.fld select,.fld textarea{transition:border-color .2s,box-shadow .2s,transform .2s}.fld input:focus,.fld textarea:focus{transform:translateY(-2px)}

/* photos, about story, contact details */
.ph-img{overflow:hidden;background:var(--pink)}.ph-img img{width:100%;height:100%;object-fit:cover;display:block}
.story{font-size:1.15rem!important}
.clock{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 22px}
.clock span{display:grid;place-items:center;min-width:56px;height:56px;padding:0 16px;border-radius:99px;border:1.5px solid var(--ink);background:#fff;font:700 1.3rem var(--hd)}
.clock i{width:34px;border-top:2px dashed var(--rose)}
.clock .ah{background:var(--pink);font-size:1.05rem;box-shadow:4px 4px 0 var(--ink);animation:fl 5s ease-in-out infinite}
.collage{min-height:580px}
.cd.ph{padding:0;overflow:hidden;box-shadow:8px 8px 0 var(--pink)}.cd.ph img{width:100%;height:100%;object-fit:cover;display:block}
.p-a{left:0;top:0;width:54%;aspect-ratio:1;transform:rotate(-4deg)}
.p-b{right:0;top:7%;width:40%;aspect-ratio:3/4;transform:rotate(5deg)}
.collage .c-a{left:6%;bottom:4%;top:auto;width:56%;transform:rotate(2deg)}
.collage .c-b{right:0;bottom:12%;width:42%;font-size:1.25rem}
.collage .s2{left:42%;right:auto;top:38%;z-index:2}
.reach{list-style:none;padding:0;margin:26px 0 20px;display:grid;gap:14px}
.reach small{display:block;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;opacity:.6}
.reach a{font:700 clamp(1.15rem,2.4vw,1.6rem) var(--hd);letter-spacing:-.03em;text-decoration:none;word-break:break-word;background:linear-gradient(var(--pink),var(--pink)) 0 100%/0 40% no-repeat;transition:background-size .3s}
.reach a:hover{background-size:100% 40%}
.foot a{text-decoration:none}.foot a:hover{color:var(--rose)}
@media(max-width:640px){.collage{min-height:520px}.p-a{width:58%}.p-b{width:42%}.collage .c-a{width:78%}.collage .c-b{width:50%;bottom:18%}}

/* concept project photos (objects only, no people) */
.arch{overflow:hidden;place-items:end center;padding-bottom:16px}
.arch img,.posts div img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.arch span{position:relative;z-index:1;padding:.4em .9em;border-radius:99px;background:rgba(255,255,255,.9);border:1.5px solid var(--ink);font-size:1rem}
.tiles i{position:relative;overflow:hidden}.tiles i img{width:100%;height:100%;object-fit:cover;display:block}
.m3 .pic{position:absolute;left:5%;bottom:7%;width:30%;aspect-ratio:1;border:1.5px solid var(--ink);border-radius:20px;overflow:hidden;transform:rotate(-7deg);box-shadow:6px 6px 0 var(--blush);z-index:1}
.m3 .pic img{width:100%;height:100%;object-fit:cover;display:block}
.posts div{position:relative;overflow:hidden}
.posts div>b,.posts div>span{position:relative;z-index:1}
.posts div:nth-child(2) b,.posts div:nth-child(2) span{background:rgba(255,255,255,.9);padding:.1em .6em;border-radius:99px;width:max-content;max-width:100%}

/* extra mobile polish */
@media(max-width:640px){
.hero h1{font-size:clamp(2rem,10.2vw,3.2rem)}
.win{width:86%}.phone{width:46%;padding:10px}.chip{font-size:.7rem}.c2{top:4%}
.m1 .lb{font-size:2.5rem}.arch{width:46%;right:6%}
.posts{gap:10px;padding:0 12px}.posts div{width:25vw;padding:8px;font-size:.68rem}.posts b{font-size:1rem}
.m3 .pic{width:34%}.ui{width:80%;padding:18px}
.btn{min-height:46px}
.cta h2{font-size:clamp(2.1rem,10vw,3rem)}.sec-h h2{font-size:clamp(2rem,9vw,2.8rem)}
.foot-bt{flex-direction:column}.reach a{font-size:1.1rem}
}
@media(max-width:400px){.clock span{min-width:48px;height:48px;font-size:1.1rem}.clock i{width:18px}.stage{min-height:400px}}

/* every box filled with a photo */
.win-tiles i{position:relative;overflow:hidden;height:88px;border:1.5px solid var(--ink)}
.win-tiles i img{width:100%;height:100%;object-fit:cover;display:block}
.posts div b,.posts div span{background:rgba(255,255,255,.92);padding:.1em .6em;border-radius:99px;width:max-content;max-width:100%}
.posts div{border-radius:18px}

/* responsive */
@media(max-width:980px){
.hero-in,.intro-in,.about-in,.contact-in{grid-template-columns:1fr;gap:44px}
.stage{min-height:480px;max-width:560px;width:100%;margin-inline:auto}
.svcs{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}.st:nth-child(even){margin-top:0}
.p1,.p2,.p3,.p4{grid-column:span 12}.foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
.burger{display:grid}
.menu{position:absolute;top:calc(100% + 8px);left:12px;right:12px;flex-direction:column;align-items:stretch;gap:2px;padding:14px;background:#fff;border:1.5px solid var(--ink);border-radius:28px;box-shadow:6px 6px 0 var(--pink);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .25s,transform .25s,visibility .25s}
.nav.open .menu{opacity:1;visibility:visible;transform:none}
.menu a:not(.btn){padding:.9em 1em;font-size:1.1rem}.menu .btn{margin:8px 0 0;justify-content:center;padding:1em}
}
@media(max-width:640px){
.svcs,.steps,.form,.foot-in{grid-template-columns:1fr}
.pr{grid-template-columns:1fr;gap:6px}.pr b{font-size:5.5rem}
.stage{min-height:430px}.sticker{width:92px;height:92px;font-size:.66rem;margin:-30px 0 0 -40px}.note-h{font-size:1.3rem}
.pf-t{flex-direction:column;align-items:flex-start}.mock{min-height:300px}
.collage{min-height:380px}.c-a,.c-b{width:74%}
.btns .btn{flex:1;justify-content:center}
}
/* ===== stiff layout + ambient motion ===== */
html{overflow-x:hidden;overscroll-behavior-x:none}
body{touch-action:pan-y pinch-zoom}
img{max-width:100%}
.hero,.intro,.work,.about{overflow:hidden}
@keyframes ahkb{to{transform:scale(1.12)}}
@keyframes ahwob{50%{transform:rotate(14deg) scale(1.1)}}
@keyframes ahgs{50%{background-position:100% 50%}}
@keyframes dr{50%{transform:translate(14px,-18px) rotate(25deg)}}
.arch img,.tiles i img,.win-tiles i img,.ph-img img,.pic img,.posts div img,.cd.ph img{animation:ahkb 14s ease-in-out infinite alternate}
.svc .acc{animation:ahwob 6s ease-in-out infinite}
.a2 .acc{animation-delay:-1s}.a3 .acc{animation-delay:-2s}.a4 .acc{animation-delay:-3s}.a5 .acc{animation-delay:-4s}.a6 .acc{animation-delay:-5s}
.stage::before{content:"";position:absolute;left:12%;top:8%;width:76%;aspect-ratio:1;border:1.5px dashed var(--rose);border-radius:50%;opacity:.55;animation:sp 40s linear infinite;pointer-events:none}
.cta{background-size:200% 200%;animation:ahgs 10s ease infinite}
.js .steps.in .st b{animation:pp .6s cubic-bezier(.3,1.6,.5,1) both,ring 2.8s ease-out 1.6s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(199,125,152,.55)}100%{box-shadow:0 0 0 16px rgba(199,125,152,0)}}
.mq2{padding-top:0}.mq2 .mq{background:var(--blush);transform:rotate(1.2deg) skewX(var(--sk,0deg))}
.mq2 .mq-t{animation-direction:reverse;animation-duration:48s}
.sp7{width:26px;height:26px;right:7%;top:10%;animation:dr 7s ease-in-out infinite}
.sp8{width:18px;height:18px;left:5%;bottom:14%;color:var(--ink);animation:dr 9s ease-in-out infinite -3s}
.sp9{width:30px;height:30px;right:4%;bottom:8%;animation:dr 8s ease-in-out infinite -2s}
.sp10{width:22px;height:22px;left:3%;top:8%;animation:dr 10s ease-in-out infinite -5s}
@media(max-width:860px){
.pr b,.pr b[style]{translate:none!important}
.mq{--sk:0deg!important}
.js .rv{transform:none!important;transition:opacity .6s!important}
section{padding:48px 0}
.hero{padding:28px 0 40px}
.hero-in,.intro-in,.about-in,.contact-in{gap:26px}
.sec-h{margin-bottom:26px;gap:14px}
.mq-w{padding:12px 0}.mq2{padding-top:0}
.pr{padding:20px 0}.pr b{font-size:4rem}
.cta{padding:56px 20px}
.collage{min-height:440px}
.stage{min-height:400px}
.svc{min-height:0}
.foot{margin-top:40px;padding-top:44px}.foot-bt{margin-top:28px}
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
.js .rv{opacity:1;transform:none}
}