/* ForwardMade: one design system for the studio and the work. Palette: Pantone 16-1650 "Diva Pink" on warm black. */
:root{
  --pink:#ff1a5e; --pink-hot:#ff5c8a; --pink-deep:#b3003d;
  --bg:#0b0809; --panel:#160f12; --ink:#fff3f6; --muted:#bcaab1; --dim:#8a7a80;
  --rule:#ff9fb82e; --on-pink:#0b0809;
  --ease:cubic-bezier(.18,.75,.2,1);
  --display:'Manrope','Helvetica Neue',Arial,sans-serif; --body:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:800;text-wrap:balance}
img,video{display:block;max-width:100%}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:2px solid var(--pink-hot);outline-offset:4px}
.wrap{width:min(100% - 2*var(--pad),1480px);margin-inline:auto}
.eyebrow{font:700 11px/1.7 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--pink-hot)}
.signal{display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 #ff1a5e99;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px #ff1a5e00}100%{box-shadow:0 0 0 0 #ff1a5e00}}
.ar{width:12px;height:12px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* living background */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.no-gl body{background:radial-gradient(ellipse 60vw 70vh at 75% 30%,#ff1a5e55,transparent 70%),var(--bg)}
.progress{position:fixed;z-index:100;top:0;left:0;height:3px;width:var(--progress,0%);background:var(--pink);pointer-events:none}
.cursor{position:fixed;z-index:120;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--pink-hot);border-radius:50%;pointer-events:none;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;mix-blend-mode:screen}
.cursor.on{opacity:1}
.cursor.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:#ff1a5e33}
main,.site-footer{position:relative;z-index:1}
main{overflow-x:clip}

/* nav */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);background:linear-gradient(#0b0809e6,#0b080900)}
.wordmark{font:800 clamp(22px,2.2vw,30px)/1 var(--display);letter-spacing:-.07em;white-space:nowrap}
.wordmark span{color:var(--pink)}
.wordmark img{display:block;height:50px;width:auto;transition:transform .35s var(--ease)}
.wordmark:hover img{transform:scale(1.07) rotate(-3deg)}
.contact .wordmark img{filter:brightness(0)}
@media (max-width:760px){.wordmark img{height:42px}}
/* nav brand: the logo's symbol next to the wordmark */
.brand{display:flex;align-items:center;gap:10px}
/* the symbol sits at x 119-503, y 4-377 of the 648x504 logo file; this box shows exactly that rectangle */
.brand .mark{flex:none;display:block;width:38px;height:37px;background:url(/assets/logo-white.png) no-repeat -11.8px -.4px/64px 49.8px;transition:transform .35s var(--ease)}
.brand:hover .mark{transform:scale(1.08) rotate(-4deg)}
.brand .wm{color:var(--ink);font:800 clamp(24px,2.2vw,32px)/1 var(--display);letter-spacing:-.07em}
.brand .wm span{color:var(--pink)}
/* oversized wordmark that closes each page */
.big-wm{margin:0;font:800 clamp(56px,19vw,320px)/.8 var(--display);letter-spacing:-.07em;white-space:nowrap;overflow:hidden;padding-bottom:.06em}
.big-wm span{color:#fff}
.site-footer.on-bg .big-wm{color:var(--pink);margin-bottom:46px}
.site-footer.on-bg .big-wm span{color:var(--ink)}
.contact .big-wm{margin-top:clamp(70px,9vw,140px);color:var(--on-pink)}
.contact .big-wm + .foot{margin-top:clamp(28px,3vw,44px)}
.nav nav{display:flex;align-items:center;gap:clamp(16px,2.8vw,42px);font-size:13px;font-weight:700;letter-spacing:.04em}
.nav nav a{transition:color .2s}
.nav nav a:hover{color:var(--pink-hot)}
.btn-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:var(--pink);color:#fff;border-radius:99px;transition:transform .25s var(--ease),background .2s}
.nav nav a.btn-pill:hover{color:#fff;background:var(--pink-hot);transform:translateY(-2px)}

/* section hud */
.hud{position:fixed;z-index:40;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.hud a{display:flex;align-items:center;gap:10px;font:700 10px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .25s}
.hud a i{display:block;width:14px;height:2px;background:currentColor;transition:width .35s var(--ease)}
.hud a span{opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s}
.hud a.on{color:var(--pink-hot)}
.hud a.on i{width:32px}
.hud a.on span,.hud a:hover span{opacity:1;transform:none}
@media (max-width:1100px){.hud{display:none}}

/* hero */
.hero{position:relative;min-height:max(720px,100svh);display:flex;align-items:flex-end;padding-block:130px 0}
.hero-copy{padding-bottom:clamp(90px,13vh,150px)}
.hero h1{font-size:clamp(74px,14.5vw,230px);line-height:.86;letter-spacing:-.065em;margin:26px 0 38px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 em{font-style:normal;color:var(--pink);-webkit-text-stroke:8px var(--bg);paint-order:stroke fill}
@keyframes rise{to{transform:none}}
.hero-caption{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px clamp(30px,6vw,100px)}
.hero-caption p{max-width:520px;font-size:clamp(17px,1.5vw,21px);color:#e6d6db}
.link{display:inline-flex;align-items:center;gap:26px;padding:12px 0;border-bottom:2px solid var(--pink);font:800 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:gap .3s var(--ease),color .2s}
.link:hover{gap:42px;color:var(--pink-hot)}
button.link{background:none;border:0;border-bottom:2px solid var(--pink);cursor:pointer}
.hero-foot{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:space-between;gap:20px;font:700 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.scroll-cue:after{content:"";display:inline-block;width:1px;height:26px;margin-left:12px;vertical-align:middle;background:linear-gradient(var(--pink),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* marquee */
.marquee{position:relative;z-index:2;overflow:hidden;margin:0 -3%;padding:16px 0 18px;background:var(--pink);color:var(--on-pink);transform:rotate(-1.6deg)}
.marquee-track{display:flex;width:max-content;animation:slide 26s linear infinite}
.marquee-track span{font:800 clamp(26px,3.6vw,52px)/1 var(--display);letter-spacing:-.04em;white-space:pre}
@keyframes slide{to{transform:translateX(-50%)}}

.sec{padding-block:clamp(100px,12vw,190px)}
.sec-head{display:flex;justify-content:space-between;gap:24px;padding-bottom:26px;margin-bottom:clamp(40px,6vw,90px);border-bottom:1px solid var(--rule)}
.sec-head .idx{font:700 11px/1.7 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* 3D tilt cards */
.tilt{position:relative;display:block;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s;will-change:transform}
.tilt.live{transition:transform .08s linear,box-shadow .35s}
.tilt:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),#ffffff38,transparent 55%);opacity:0;transition:opacity .3s}
.tilt:hover:after{opacity:1}

/* work 001 */
.work-grid{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr);gap:clamp(44px,8vw,140px);align-items:center}
.poster{width:min(100%,440px);aspect-ratio:9/16;overflow:hidden;border:2px solid var(--pink);box-shadow:0 40px 120px #ff1a5e40,16px 16px 0 var(--pink-deep)}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.poster:hover img{transform:scale(1.05)}
.stamp{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:44px 22px 20px;background:linear-gradient(transparent,#0b0809ee);font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.coord{display:block;margin-top:24px;font:700 10px/1 var(--body);letter-spacing:.2em;color:var(--dim)}
.work-copy h2,.statement h2,.services h2,.contact h2{font-size:clamp(58px,9vw,148px);line-height:.92;letter-spacing:-.06em;margin:26px 0 34px}
.work-copy h2 span,.statement h2 span,.services h2 span{color:var(--pink)}
.lede{font-size:clamp(21px,2.2vw,30px);line-height:1.45;color:var(--ink);max-width:24em;margin-bottom:22px}
.work-copy p,.second-copy p{color:var(--muted);max-width:30em}
small.note{display:block;margin-top:28px;max-width:34em;font-size:12px;line-height:1.7;color:var(--dim)}
.work-copy .link{margin-top:28px}

/* statement */
.statement h2{font-size:clamp(60px,10.4vw,172px);line-height:.95;margin:30px 0 70px}
.statement-bottom{display:grid;grid-template-columns:1fr minmax(280px,500px);gap:40px;align-items:end;padding-top:30px;border-top:1px solid var(--rule)}
.mark{font:800 clamp(40px,6vw,88px)/1 var(--display);letter-spacing:-.08em;color:var(--pink)}
.statement-bottom p{font-size:clamp(18px,1.8vw,25px);line-height:1.6;color:#e6d6db}

/* work 002 */
.second-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,8vw,130px);align-items:center}
.second-copy h2{font-size:clamp(64px,9.6vw,150px);line-height:.92;letter-spacing:-.06em;margin:0 0 32px}
.second-copy h2 span{color:var(--pink)}
.second-copy p{font-size:clamp(18px,1.9vw,25px);line-height:1.55;color:#e6d6db}
.second-copy .link{margin-top:28px}
.film-card{width:100%;aspect-ratio:1.18;overflow:hidden;padding:0;cursor:pointer;border:2px solid var(--pink);background:var(--panel);box-shadow:0 40px 120px #ff1a5e33,-16px 16px 0 var(--pink-deep);text-align:left}
.film-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.film-card:hover img{transform:scale(1.07)}
.film-card .stamp{pointer-events:none}

/* services */
.service{display:grid;grid-template-columns:minmax(110px,.5fr) minmax(220px,1.2fr) minmax(220px,1.3fr) 24px;gap:clamp(18px,3vw,56px);align-items:center;padding:34px 12px;border-top:1px solid var(--rule);background:linear-gradient(var(--pink),var(--pink)) no-repeat 0 100%/100% 0;transition:background-size .5s var(--ease),color .25s,padding .4s var(--ease)}
.service:last-child{border-bottom:1px solid var(--rule)}
.service:hover{background-size:100% 100%;color:var(--on-pink);padding-inline:26px}
.service .label{font:800 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--pink-hot);transition:color .25s}
.service h3{font-size:clamp(28px,3.2vw,50px);line-height:1.1;letter-spacing:-.05em}
.service p{font-size:15px;line-height:1.6;color:var(--muted);transition:color .25s}
.service:hover .label,.service:hover p{color:var(--on-pink)}
.services h2{margin-bottom:clamp(60px,8vw,120px)}

/* contact (pink band) */
.contact{background:var(--pink);color:var(--on-pink);overflow:hidden}
.contact .eyebrow{color:#4a0016}
.contact h2{font-size:clamp(74px,12.6vw,200px);margin-bottom:clamp(40px,6vw,80px)}
.contact h2 span{color:#fff}
.contact-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.contact-bottom p{max-width:30em;font-size:clamp(17px,1.6vw,22px);line-height:1.6;color:#2a0009}
.email{display:inline-flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:3px solid var(--on-pink);font:800 clamp(22px,3.2vw,48px)/1.1 var(--display);letter-spacing:-.05em;overflow-wrap:anywhere;transition:color .2s}
.email:hover{color:#fff}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin:56px 0 8px;max-width:900px}
.field{display:flex;flex-direction:column;gap:8px}
.field-wide{grid-column:1/-1}
.contact-form label{font:800 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#4a0016}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{width:100%;padding:14px 0;font:600 20px/1.4 var(--display);color:var(--on-pink);background:transparent;border:0;border-bottom:3px solid var(--on-pink);border-radius:0;outline:none;resize:vertical}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{border-bottom-color:#fff;box-shadow:0 3px 0 #fff;outline:none}
.contact-form [aria-invalid=true]{border-bottom-color:#7a0027}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-actions{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:18px 24px}
.form-submit{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 30px;cursor:pointer;background:var(--on-pink);color:#fff;border:2px solid var(--on-pink);border-radius:99px;font:800 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s,transform .25s var(--ease)}
.form-submit:hover,.form-submit:focus-visible{background:transparent;color:var(--on-pink);transform:translateY(-2px);outline:none}
.form-submit[disabled]{opacity:.55;cursor:progress}
.form-status{font:700 16px/1.4 var(--display);color:#2a0009}
.form-status.is-error{color:#6a0020}
.site-footer .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px 25px;margin-top:clamp(100px,12vw,180px);padding-top:28px;border-top:2px solid #0b080933;font-size:12px;font-weight:700;color:#3a0010}
.site-footer .wordmark{color:var(--on-pink)}
.site-footer .wordmark span{color:#fff}
.site-footer.on-bg{padding-block:60px 40px}
.site-footer.on-bg .foot{margin-top:0;border-top-color:var(--rule);color:var(--dim)}
.site-footer.on-bg .wordmark{color:var(--ink)}
.site-footer.on-bg .wordmark span{color:var(--pink)}

/* film dialog */
.film-dialog{display:none;position:fixed;z-index:200;inset:0;align-items:center;justify-content:center;padding:70px 6% 36px;background:#0b0809f2}
.film-dialog.is-open{display:flex}
.film-dialog video{max-width:100%;max-height:80svh;object-fit:contain;box-shadow:0 0 120px #ff1a5e55}
.close-film{position:absolute;top:22px;right:5%;padding:11px 20px;cursor:pointer;background:var(--pink);border:0;border-radius:99px;font-weight:800;color:#fff}

/* case study page */
.case-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px);gap:clamp(40px,7vw,110px);align-items:center;min-height:100svh;padding-block:130px 90px}
.case-hero h1{font-size:clamp(52px,7.6vw,128px);line-height:.9;letter-spacing:-.065em;margin:24px 0 0;overflow-wrap:anywhere}
.case-hero h1 em{display:block;font-style:normal;color:var(--pink)}
.case-hero .lede{margin-top:30px}
.hair{width:96px;height:4px;margin:34px 0;background:var(--pink);border:0}
.meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:30px;font:700 11px/1.6 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.film{position:relative;justify-self:center;width:min(100%,440px);aspect-ratio:9/16;background:#000;border:2px solid var(--pink);box-shadow:0 40px 120px #ff1a5e45,16px 16px 0 var(--pink-deep)}
.film video{width:100%;height:100%;object-fit:cover}
.sound{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 16px;cursor:pointer;background:#0b0809cc;border:1px solid var(--pink-hot);border-radius:99px;font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.sound:hover,.sound:focus-visible{background:var(--pink);outline:none}
.sound svg{width:16px;height:16px}
.concept{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,6vw,72px);padding-block:clamp(70px,9vw,120px);border-top:1px solid var(--rule)}
.concept p{max-width:64ch;font-size:clamp(20px,2.2vw,29px);line-height:1.55;color:#f0e2e6}
.case{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(34px,7vw,110px);align-items:center;padding-block:clamp(64px,8vw,110px);border-top:1px solid var(--rule)}
.case:nth-of-type(even){grid-template-columns:1fr minmax(0,380px)}
.case:nth-of-type(even) .case-fig{order:2}
.case-fig{width:100%;aspect-ratio:9/16;overflow:hidden;border:2px solid var(--pink);box-shadow:0 30px 90px #ff1a5e33;background:var(--panel)}
.case-fig img{width:100%;height:100%;object-fit:cover}
.case .num{font:800 13px/1 var(--body);letter-spacing:.22em;color:var(--pink)}
.case .brand{margin-top:12px;font:700 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.case h2{font-size:clamp(44px,5.6vw,84px);line-height:.98;letter-spacing:-.055em;margin:14px 0 8px}
.case p{max-width:42ch;margin-top:20px;font-size:18px;line-height:1.7;color:#dccbd1}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags li{padding:7px 14px;border:1px solid var(--pink-hot);border-radius:99px;font:700 11px/1 var(--body);letter-spacing:.08em;color:var(--pink-hot)}
.caps{padding-block:clamp(70px,9vw,120px);border-top:1px solid var(--rule)}
.caps ul{display:grid;gap:1px;margin-top:30px;background:var(--rule);border:1px solid var(--rule)}
.caps li{padding:28px 26px;background:var(--bg);transition:background .3s}
.caps li:hover{background:var(--panel)}
.caps b{display:block;margin-bottom:6px;font:800 18px/1.3 var(--display);letter-spacing:-.02em}
.caps span{font-size:15px;color:var(--muted)}
.cta-band{background:var(--pink);color:var(--on-pink);text-align:center;padding-block:clamp(90px,11vw,150px)}
.cta-band h2{max-width:14ch;margin:0 auto;font-size:clamp(46px,7.4vw,112px);line-height:.95;letter-spacing:-.06em}
.cta-band p{max-width:34em;margin:22px auto 36px;color:#2a0009;font-size:19px}
.cta-band .btn-dark{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 34px;background:var(--on-pink);color:#fff;border-radius:99px;font:800 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--ease),background .2s}
.cta-band .btn-dark:hover{background:#fff;color:var(--on-pink);transform:translateY(-3px)}
.disclaimer{max-width:80ch;padding-block:40px 10px;font-size:12px;line-height:1.7;color:var(--dim)}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

@media (min-width:700px){.caps ul{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.caps ul{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:900px){
  .work-grid,.second-grid,.case-hero,.concept,.case,.case:nth-of-type(even){grid-template-columns:1fr}
  .case:nth-of-type(even) .case-fig{order:0}
  .case-fig{max-width:340px}
  .case-hero{min-height:unset;padding-top:110px}
  .film{order:-1}
  .poster{justify-self:center}
  .statement-bottom{grid-template-columns:1fr}
  .service{grid-template-columns:1fr 24px;gap:8px 14px;padding-block:28px}
  .service .label{grid-column:1}.service h3{grid-column:1;grid-row:2}.service p{grid-column:1;grid-row:3}.service .ar{grid-column:2;grid-row:2}
  .contact-bottom{flex-direction:column;align-items:flex-start;gap:30px}
  .sec-head .idx{display:none}
}
@media (max-width:760px){
  .nav nav a:not(.btn-pill){display:none}
  .hero{padding-top:100px}
  .hero h1{font-size:clamp(68px,20vw,120px)}
  .hero-foot span:first-child{display:none}
  .contact-form{grid-template-columns:1fr;margin-top:40px}
  .contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{font-size:18px}
}
@media (hover:none){.cursor{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track,.signal,.scroll-cue:after{animation:none}
  .hero h1 .line>span{animation:none;transform:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .tilt{transform:none!important}
}