/* =========================================================
KOMAL ZEHRA — DESIGN SYSTEM (established on Home page)
Colors : Ink #0F0F0F · Paper #F6F6F6 · Pink #FF64D5 · Sun #FFD905
Fonts : Bebas Neue (display) · Inter (body) · Mr De Haviland (script accent)
Motion : ease-out-expo reveals, marquee, count-up, magnetic buttons
========================================================= */
:root{
--ink:#0F0F0F; --ink-2:#1B1B1B; --ink-3:#303030;
--paper:#F6F6F6; --paper-2:#EAEAEA;
--grey:#6B6B6B; --line:rgba(255,255,255,.14); --line-dark:rgba(15,15,15,.14);
--pink:#FF64D5; --pink-soft:#FFBBEC; --sun:#FFD905;
--f-display:"Bebas Neue","Arial Narrow",Impact,Haettenschweiler,sans-serif;
--f-body:"Inter",system-ui,-apple-system,sans-serif;
--f-script:"Mr De Haviland","Brush Script MT",cursive;
--ease:cubic-bezier(.16,1,.3,1);
--gutter:clamp(20px,4vw,56px);
--max:1440px;
}
/* ---------------------------------------------------------------
Theme hooks.
The block above is the design. This one restates the brand colours
as bare "r,g,b" triples, so a rule can take a tint of one —
rgba(var(--pink-rgb),.62) — and have it follow the theme, which a
literal rgba(255,100,213,.62) never could. The mute ladder is the
grey text on dark panels; every tone in the original keeps its own
entry, because merging two near-identical greys would quietly
change the design.
A theme picked in the Admin Panel overrides exactly these names,
and nothing else in this file has to change.
--------------------------------------------------------------- */
:root{
--pink-rgb:255,100,213; --pink-soft-rgb:255,187,236; --sun-rgb:255,217,5;
--ink-rgb:15,15,15; --ink-2-rgb:27,27,27;
--paper-rgb:246,246,246; --paper-2-rgb:234,234,234;
--mute-0:#c9c9c9; --mute-0b:#bdbdbd; --mute-0c:#b9b9b9; --mute-0d:#b4b4b4; --mute-1a:#a8a8a8; --mute-1b:#a4a4a4; --mute-1:#9a9a9a; --mute-2:#8b8b8b; --mute-2b:#8a8a8a; --mute-2c:#7e7e7e; --mute-3:#5a5a5a; --mute-4:#4a4a4a; --mute-0e:#cfcfcf;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--ink);color:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pink);color:var(--ink)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.light{background:var(--paper);color:var(--ink)}
.pink-bg{background:var(--pink);color:var(--ink)}
/* type */
.display{font-family:var(--f-display);text-transform:uppercase;font-weight:400;line-height:.88;letter-spacing:.005em}
.script{font-family:var(--f-script);text-transform:none;letter-spacing:0;color:var(--pink);font-size:1.25em;line-height:.7;display:inline-block;transform:rotate(-4deg)}
.eyebrow{font-size:clamp(.68rem,2vw,.75rem);letter-spacing:.12em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;max-width:100%}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none}
.lead{font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.35;font-weight:400;letter-spacing:-.01em}
.muted{color:var(--grey)}
.dark .muted,.on-dark .muted{color:var(--mute-1)}
/* preloader */
.loader{position:fixed;inset:0;z-index:200;background:var(--pink);color:var(--ink);display:grid;place-items:center;transition:transform .8s var(--ease)}
.loader .display{font-size:clamp(3rem,12vw,9rem);overflow:hidden}
.loader .display span{display:inline-block;transform:translateY(105%);animation:up .9s var(--ease) forwards}
.loader .display span:nth-child(2){animation-delay:.08s}
.loader .count{position:absolute;bottom:var(--gutter);right:var(--gutter);font-family:var(--f-display);font-size:2rem}
body.loaded .loader{transform:translateY(-101%)}
body.loaded .loader{pointer-events:none}
@keyframes up{to{transform:none}}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;mix-blend-mode:normal;transition:transform .5s var(--ease),background .3s}
.nav.scrolled{background:rgba(var(--ink-rgb),.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:var(--f-display);font-size:1.7rem;letter-spacing:.02em;line-height:1;display:flex;align-items:center;gap:.5rem}
.logo i{display:inline-block;width:.6em;height:.6em;background:var(--pink);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.menu{display:flex;gap:6px;align-items:center}
.menu a{font-size:.85rem;font-weight:500;padding:.55rem 1rem;border-radius:99px;position:relative;transition:background .3s,color .3s}
.menu a:hover{background:rgba(255,255,255,.1)}
.menu a.active{background:var(--paper);color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--mute-0e)}
.status b{width:8px;height:8px;border-radius:50%;background:#37e07a;box-shadow:0 0 0 0 rgba(55,224,122,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(55,224,122,0)}100%{box-shadow:0 0 0 0 rgba(55,224,122,0)}}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--ink);place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);margin:3px auto;transition:transform .4s var(--ease)}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--pink);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);gap:.4rem;transform:translateY(-100%);transition:transform .7s var(--ease)}
.mobile-menu a{font-family:var(--f-display);font-size:clamp(3.4rem,15vw,6rem);line-height:.95;text-transform:uppercase}
.mobile-menu small{margin-top:1.5rem;font-weight:600}
body.menu-open .mobile-menu{transform:none}
body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.6rem;border-radius:99px;font-weight:600;font-size:.95rem;background:var(--paper);color:var(--ink);position:relative;overflow:hidden;transition:color .4s var(--ease),transform .3s var(--ease);isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--pink);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover::before{transform:none}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translate(4px,-4px)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark::before{background:var(--pink)}
.btn.dark:hover{color:var(--ink)}
/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.in .mask>span,.mask.in>span{transform:none}
/* hero */
.hero{min-height:100svh;padding:150px 0 40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}
.hero-role{max-width:min(420px,100%)}
.hero-role p{margin-top:1rem;color:var(--mute-0b);font-size:1.05rem}
.hero-stats{display:flex;gap:clamp(24px,4vw,64px)}
.hero-stats div small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-1)}
.hero-stats div strong{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;display:block;margin-top:.25rem}
.hero-name{font-size:clamp(4.6rem,18vw,17rem);line-height:.82;margin:clamp(2rem,5vw,3.4rem) 0 2rem;position:relative}
.hero-name .line{display:flex;align-items:flex-end;gap:.12em;flex-wrap:nowrap}
.hero-name .script{font-size:.24em;transform:rotate(-7deg) translateY(-.5em);white-space:nowrap}
@media (max-width:640px){.hero-name .script{display:none}}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
.hero-bottom .lead{max-width:640px}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none}
.blob.a{width:40vw;height:40vw;background:var(--pink);right:-12vw;top:-8vw}
.blob.b{width:26vw;height:26vw;background:var(--sun);left:-8vw;bottom:8vw;opacity:.18}
.scroll-cue{display:flex;align-items:center;gap:.7rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(var(--paper),transparent);animation:drip 2s 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{overflow:hidden;white-space:nowrap;padding:1.1rem 0;background:var(--pink);color:var(--ink);border-block:1px solid var(--ink)}
.marquee .track{display:inline-flex;animation:scroll 32s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--f-display);font-size:clamp(1.8rem,4vw,3.2rem);line-height:1;padding:0 1.2rem;display:inline-flex;align-items:center;gap:2.4rem;text-transform:uppercase}
.marquee span::after{content:"";width:.6em;height:.6em;background:var(--ink);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.marquee.slim{background:var(--ink);color:var(--paper);border-color:var(--line)}
.marquee.slim span{font-size:clamp(1.2rem,2.4vw,1.8rem);color:var(--mute-2)}
.marquee.slim span::after{background:var(--pink)}
@keyframes scroll{to{transform:translateX(-50%)}}
/* sections */
section{position:relative}
.sec{padding:clamp(80px,12vw,180px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,80px)}
.sec-title{font-size:clamp(3.6rem,10vw,9.5rem)}
/* intro */
.intro{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,80px)}
.intro h2{font-size:clamp(2rem,4.4vw,4rem);font-family:var(--f-body);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.intro h2 em{font-style:normal;color:var(--pink)}
.light .intro h2 em{color:#e23bb7}
.path{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.2rem}
.path span{padding:.55rem 1rem;border-radius:99px;font-size:.85rem;font-weight:500;background:var(--paper-2);border:1px solid var(--line-dark)}
.path span:nth-child(even){background:var(--sun)}
.path span:last-child{background:var(--pink)}
/* results */
.results{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.result{padding:clamp(28px,4vw,56px) clamp(18px,3vw,40px) clamp(28px,4vw,56px) 0;border-right:1px solid var(--line)}
.result:not(:first-child){padding-left:clamp(18px,3vw,40px)}
.result:last-child{border-right:0}
.result .num{font-family:var(--f-display);font-size:clamp(4.6rem,11vw,10rem);line-height:.85;display:block}
.result .num sup{font-size:.4em;color:var(--pink);vertical-align:top;margin-left:.05em}
.result p{margin-top:1rem;color:var(--mute-0b);max-width:300px}
.result b{color:var(--paper);font-weight:600}
/* work */
.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}
.project{position:relative;display:block;grid-column:span 6}
.project.big{grid-column:span 12}
.project .thumb{position:relative;overflow:hidden;border-radius:22px;aspect-ratio:4/3;background:var(--ink-2)}
.project.big .thumb{aspect-ratio:21/9}
.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;transition:transform 1.2s var(--ease);overflow:hidden;padding:clamp(16px,3vw,40px)}
.thumb .ph .display{font-size:clamp(1.8rem,4.2vw,4.4rem);color:rgba(var(--ink-rgb),.9);text-align:center;line-height:.92;max-width:100%;overflow-wrap:break-word}
.project.big .thumb .ph .display{font-size:clamp(2.2rem,5.5vw,6rem)}
.project:hover .ph{transform:scale(1.06)}
.thumb .ph.p1{background:linear-gradient(135deg,var(--pink),var(--pink-soft))}
.thumb .ph.p2{background:linear-gradient(135deg,var(--sun),#ffe97a)}
.thumb .ph.p3{background:linear-gradient(135deg,var(--paper),var(--mute-0))}
.thumb .ph.p4{background:linear-gradient(135deg,var(--ink-2),#3b3b3b)}
.thumb .ph.p4 .display{color:var(--pink)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.project:hover .thumb img{transform:scale(1.06)}
.tag{position:absolute;left:16px;top:16px;background:var(--ink);color:var(--paper);font-size:.72rem;font-weight:600;padding:.4rem .8rem;border-radius:99px;letter-spacing:.06em;text-transform:uppercase;z-index:2}
.view{position:absolute;right:16px;bottom:16px;width:88px;height:88px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-size:.8rem;font-weight:700;transform:scale(0) rotate(-30deg);transition:transform .6s var(--ease);z-index:2}
.project:hover .view{transform:none}
.project .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:1rem .2rem 0}
.project h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);text-transform:uppercase;line-height:1}
.project .meta p{color:var(--grey);font-size:.9rem;text-align:right}
.project .kpi{color:var(--pink);font-weight:700}
.light .project .kpi{color:#d12eaa}
/* services */
.svc{border-top:1px solid var(--line-dark)}
.svc-item{display:grid;grid-template-columns:90px 1.1fr 1.5fr;gap:clamp(16px,3vw,48px);padding:clamp(28px,4vw,52px) 0;border-bottom:1px solid var(--line-dark);position:relative;transition:padding .6s var(--ease)}
.svc-item::before{content:"";position:absolute;inset:0 calc(var(--gutter)*-1);background:var(--pink);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:0}
.svc-item>*{position:relative;z-index:1}
.svc-item:hover::before{transform:scaleY(1)}
.svc-item:hover{padding-left:16px}
.svc-item .n{font-family:var(--f-display);font-size:1.6rem}
.svc-item h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.95}
.svc-item p{max-width:520px;font-size:1.05rem}
.svc-item ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.svc-item li{font-size:.78rem;font-weight:600;padding:.35rem .8rem;border-radius:99px;border:1px solid var(--ink)}
/* nanu feature */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.poster{aspect-ratio:4/5;border-radius:22px;background:var(--sun);color:var(--ink);padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transform:rotate(-2deg);transition:transform .8s var(--ease)}
.poster:hover{transform:rotate(0)}
.poster .display{font-size:clamp(4rem,10vw,9rem)}
.poster .laurel{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.poster .script{color:var(--ink);font-size:clamp(1.8rem,3.4vw,2.6rem);position:absolute;right:clamp(16px,2.5vw,28px);bottom:clamp(58px,7vw,76px);transform:rotate(-6deg)}
.poster .laurel:last-of-type{max-width:60%}
.feature h2{font-size:clamp(3rem,7vw,6.5rem);margin:1rem 0 1.4rem}
.feature dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.6rem;margin:1.8rem 0 2.2rem;font-size:.98rem}
.feature dt{color:var(--mute-1)}
/* about strip */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:center}
.portrait{aspect-ratio:4/5;border-radius:22px;background:var(--ink-2);position:relative;overflow:hidden;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.25)}
.portrait span{font-size:.8rem;color:var(--mute-1);text-align:center;padding:1rem}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(3rem,7vw,6.5rem);margin:1rem 0 1.4rem}
.about p{color:var(--mute-0);font-size:1.1rem;max-width:560px;margin-bottom:1rem}
.about .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8rem}
/* cta */
.cta{text-align:center;padding:clamp(90px,14vw,200px) 0;overflow:hidden}
.cta h2{font-size:clamp(4.4rem,17vw,17rem);line-height:.8}
.cta h2 .script{color:var(--ink);font-size:.4em;display:block;margin-bottom:.2em}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
.cta .mail{display:inline-block;margin-top:2rem;font-weight:600;font-size:clamp(1.1rem,2.4vw,1.8rem);border-bottom:2px solid var(--ink);letter-spacing:-.01em}
/* footer */
.footer{padding:clamp(60px,8vw,110px) 0 28px;background:var(--ink)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.f-grid h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);margin-bottom:1rem;font-weight:600}
.f-grid a{display:block;padding:.2rem 0;transition:color .3s,transform .3s var(--ease)}
.f-grid a:hover{color:var(--pink);transform:translateX(4px)}
.f-big{font-size:clamp(4rem,19vw,20rem);line-height:.8;text-align:center;margin:clamp(40px,6vw,80px) 0 20px;color:var(--ink-2);-webkit-text-stroke:1px rgba(255,255,255,.12);user-select:none}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--mute-1)}
/* placeholder pages */
.soon{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 60px;position:relative;overflow:hidden}
.soon h1{font-size:clamp(5rem,20vw,20rem);line-height:.8}
.soon p{max-width:520px;margin:1.6rem 0 2rem;color:var(--mute-0b);font-size:1.1rem}
/* cursor */
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--pink);pointer-events:none;z-index:300;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;opacity:0}
.cursor.big{width:64px;height:64px}
@media (hover:none){.cursor{display:none}}
/* responsive */
@media (max-width:960px){
.menu,.nav .status{display:none}
.burger{display:grid}
.intro,.feature,.about{grid-template-columns:1fr}
.results{grid-template-columns:1fr}
.result,.result:not(:first-child){padding:32px 0;border-right:0;border-bottom:1px solid var(--line)}
.project,.project.big{grid-column:span 12}
.project.big .thumb{aspect-ratio:4/3}
.svc-item{grid-template-columns:50px 1fr}
.svc-item .desc{grid-column:1/-1}
.f-grid{grid-template-columns:1fr 1fr}
.hero{padding-top:120px}
.hero-name{margin-top:2rem}
.project .meta{flex-direction:column;gap:.2rem}
.project .meta p{text-align:left}
}
@media (max-width:640px){
.hero-top{flex-direction:column;gap:28px}
.hero-stats{width:100%;justify-content:space-between}
.hero-bottom{flex-direction:column;align-items:flex-start}
.lead,.hero-role p,.about p,.svc-item p{max-width:100%}
.btn{padding:.9rem 1.3rem;font-size:.9rem}
.feature dl{grid-template-columns:1fr;gap:.2rem 0}
.feature dt{margin-top:.6rem}
.f-grid{grid-template-columns:1fr}
.cta .mail{font-size:1.05rem;word-break:break-word}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition-duration:.01ms!important}
.rv,.mask>span{opacity:1;transform:none}
.loader{display:none}
}
/* =========================================================
BUILD 02 — Home page upgrades
(design system unchanged: same colors, fonts, easing)
========================================================= */
/* ---- hero: headline + portrait ---- */
.hero-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,25vw,370px);gap:clamp(24px,4vw,64px);align-items:end}
.hero-name{font-size:clamp(3.6rem,13vw,11.5rem)}
.hero-name .script{font-size:.2em}
.hero-photo{position:relative;width:100%;aspect-ratio:780/983;max-height:clamp(340px,50vh,520px);
-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);opacity:0;
transition:clip-path 1.2s var(--ease),-webkit-clip-path 1.2s var(--ease),opacity .8s var(--ease);
transition-delay:var(--d,.28s)}
.hero-photo.in{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);opacity:1}
.hero-photo img{position:absolute;inset:0;margin:auto;width:100%;height:100%;
object-fit:contain;object-position:bottom center}
.hero-cut{filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));animation:float 8s ease-in-out infinite}
.hero-doodle{opacity:0;transform:scale(.88) rotate(-4deg);transform-origin:50% 60%;
transition:opacity 1s var(--ease) 1s,transform 1.3s var(--ease) 1s}
.hero-photo.in .hero-doodle{opacity:1;transform:none;animation:drift 11s ease-in-out 2.3s infinite}
.hero-shadow{position:absolute;left:50%;bottom:-2%;width:62%;height:26px;transform:translateX(-50%);
background:radial-gradient(50% 50% at 50% 50%,rgba(var(--pink-rgb),.5),transparent 72%);
filter:blur(14px);opacity:0;transition:opacity 1.2s var(--ease) .9s}
.hero-photo.in .hero-shadow{opacity:1}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}
33%{transform:translateY(-8px) rotate(.9deg)}
66%{transform:translateY(5px) rotate(-.7deg)}}
.hero-photo-wrap{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.hero-photo-wrap::before{content:"";position:absolute;inset:-8% -10% 8%;z-index:-1;pointer-events:none;
background:radial-gradient(46% 42% at 34% 26%,rgba(var(--sun-rgb),.38),transparent 66%),
radial-gradient(54% 50% at 70% 70%,rgba(var(--pink-rgb),.46),transparent 68%);
filter:blur(44px);opacity:0;transition:opacity 1.6s var(--ease) .5s}
.hero-photo-wrap.in::before{opacity:.95}
.photo-cap{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.74rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--mute-1)}
.photo-cap b{width:7px;height:7px;border-radius:50%;background:var(--sun);flex:none}
/* ---- project thumbnails ---- */
.project{transition:transform .6s var(--ease)}
.project:hover{transform:translateY(-8px)}
.project .thumb{box-shadow:0 10px 30px rgba(0,0,0,.10);transition:box-shadow .6s var(--ease)}
.project:hover .thumb{box-shadow:0 26px 60px rgba(0,0,0,.22)}
.thumb img{transition:transform 1.1s var(--ease)}
.project:hover .thumb img{transform:scale(1.05)}
.thumb::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(180deg,rgba(var(--ink-rgb),.22) 0%,transparent 30%,transparent 62%,rgba(var(--ink-rgb),.20) 100%);
opacity:.85;transition:opacity .6s var(--ease)}
.project:hover .thumb::after{opacity:.6}
/* ---- service icons ---- */
.svc-head{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.svc-icon{width:clamp(30px,3.4vw,40px);height:clamp(30px,3.4vw,40px);display:block;color:var(--pink);
transition:color .5s var(--ease),transform .6s var(--ease)}
.svc-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.svc-item:nth-child(even) .svc-icon{color:#d9a800}
.svc-item:hover .svc-icon{color:var(--ink);transform:translateY(-3px)}
/* ---- logo marquee ---- */
.marquee.logos{background:var(--ink);border-color:var(--line);padding:1.5rem 0}
.marquee.logos .track{align-items:center}
.marquee.logos .mark{display:inline-flex;align-items:center;padding:0 clamp(22px,3.4vw,48px);flex:none}
.marquee.logos .mark img{height:clamp(30px,3.2vw,40px);width:auto;opacity:.5;
transition:opacity .45s var(--ease),transform .45s var(--ease)}
.marquee.logos .mark:hover img{opacity:1;transform:translateY(-2px)}
.marquee.logos .sep{flex:none;width:7px;height:7px;background:var(--pink);
clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* ---- testimonials ---- */
.tst{position:relative}
.tst-viewport{overflow:hidden;border-radius:26px}
.tst-track{display:flex;transition:transform .85s var(--ease)}
.tst-slide{flex:0 0 100%;min-width:0;padding:clamp(28px,5vw,64px);background:var(--paper-2);
border:1px solid var(--line-dark);border-radius:26px;
display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(24px,4vw,56px);align-items:end}
.tst-q{min-width:0}
.tst-slide .qm{font-family:var(--f-script);font-size:clamp(3.4rem,7vw,5.6rem);line-height:.9;color:var(--pink);
display:block;margin-bottom:.1em}
.tst-slide blockquote{font-size:clamp(1.25rem,2.5vw,2.05rem);line-height:1.3;letter-spacing:-.02em;
font-weight:500;max-width:min(100%,30ch)}
.tst-who{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line-dark);align-self:stretch;justify-content:flex-end}
.tst-av{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
font-family:var(--f-display);font-size:1.35rem;line-height:1;letter-spacing:.04em;
background:var(--ink);color:var(--paper)}
.tst-slide:nth-child(2) .tst-av{background:var(--pink);color:var(--ink)}
.tst-slide:nth-child(3) .tst-av{background:var(--sun);color:var(--ink)}
.tst-who strong{display:block;font-size:1.05rem;font-weight:600}
.tst-who>span>span{display:block;font-size:.9rem;color:var(--grey);margin-top:.15rem}
.tst-tag{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:.45rem .9rem;border-radius:99px;border:1px solid var(--line-dark)}
.tst-bar{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,3vw,32px)}
.tst-dots{display:flex;gap:8px;flex:1}
.tst-dot{width:34px;height:4px;border-radius:99px;background:rgba(var(--ink-rgb),.18);position:relative;overflow:hidden;
cursor:pointer;transition:background .4s}
.tst-dot.on{background:rgba(var(--ink-rgb),.28)}
.tst-dot i{position:absolute;inset:0;background:var(--pink);transform:scaleX(0);transform-origin:left;border-radius:inherit}
.tst-dot.on i{animation:fill 6s linear forwards}
.tst.paused .tst-dot.on i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.tst-arrow{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
box-shadow:inset 0 0 0 1.5px rgba(var(--ink-rgb),.25);font-size:1.1rem;position:relative;overflow:hidden;isolation:isolate;
transition:color .4s var(--ease)}
.tst-arrow::before{content:"";position:absolute;inset:0;background:var(--pink);border-radius:inherit;z-index:-1;
transform:translateY(101%);transition:transform .5s var(--ease)}
.tst-arrow:hover::before{transform:none}
.tst-slide.grab{cursor:grab}
@media (max-width:960px){
.hero-main{grid-template-columns:1fr;gap:28px;align-items:start}
.hero-photo{max-width:340px;margin-inline:auto}
.hero-photo-wrap{width:100%}
.svc-item{grid-template-columns:70px 1fr}
.tst-slide{grid-template-columns:1fr;gap:26px;align-items:start}
.tst-slide blockquote{max-width:100%}
.tst-who{padding-left:0;border-left:0;border-top:1px solid var(--line-dark);padding-top:22px}
}
@media (prefers-reduced-motion:reduce){
.hero-photo{-webkit-clip-path:none;clip-path:none;opacity:1}
.hero-photo-wrap::before{opacity:.9}
.tst-track{transition:none}
.tst-dot i{animation:none}
}
/* portrait now holds a real photo — drop the placeholder frame */
.portrait{border:0;box-shadow:0 30px 70px rgba(0,0,0,.45);
background:radial-gradient(70% 60% at 30% 18%,rgba(var(--sun-rgb),.16),transparent 66%),
radial-gradient(80% 70% at 76% 82%,rgba(var(--pink-rgb),.22),transparent 70%),var(--ink-2)}
.portrait img{object-fit:contain;object-position:bottom center;
filter:drop-shadow(0 20px 34px rgba(0,0,0,.5))}
.portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* ---- scroll progress ---- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:150;pointer-events:none;background:transparent}
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg,var(--sun),var(--pink));will-change:transform}
/* ---- magnetic buttons ---- */
.btn,.tst-arrow{will-change:transform}
/* ---- staggered work grid ---- */
.projects .project{transition:transform .6s var(--ease),opacity .9s var(--ease)}
@media (prefers-reduced-motion:reduce){
.hero-cut,.hero-photo.in .hero-doodle{animation:none}
.hero-doodle{opacity:1;transform:none}
.progress{display:none}
}
/* fade the bottom of the cut-out so the crop dissolves instead of slicing */
.hero-cut,.portrait img{
-webkit-mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,.35) 93%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,.35) 93%,transparent 100%)}
.hero-doodle{
-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
/* =========================================================
BUILD 04 — hand-collaged sections
(same palette, fonts and easing; only the staging changes)
========================================================= */
/* ---- results: a stack of torn note-cards pinned to the page ---- */
.results{display:grid;grid-template-columns:repeat(3,1fr);border-top:0;
gap:0;padding:clamp(28px,5vw,64px) 0 clamp(20px,4vw,40px);align-items:start}
.note{position:relative;background:var(--paper);color:var(--ink);
padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,34px) clamp(34px,4vw,52px);
border-right:0;isolation:isolate;
box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.25);
transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
/* torn lower edge */
.note::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;background:inherit;
filter:drop-shadow(0 3px 2px rgba(0,0,0,.18));
--torn:polygon(0 0,3% 88%,7% 34%,12% 96%,17% 42%,23% 90%,28% 30%,34% 84%,40% 26%,46% 94%,
52% 38%,58% 88%,63% 28%,69% 92%,75% 40%,81% 82%,86% 26%,92% 90%,97% 36%,100% 74%,100% 0);
-webkit-clip-path:var(--torn);clip-path:var(--torn)}
/* paper tint + a faint fold */
.note::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(115deg,rgba(0,0,0,.05) 0%,transparent 26%,transparent 74%,rgba(0,0,0,.06) 100%)}
.note:nth-child(1){transform:rotate(-2.1deg);z-index:3}
.note:nth-child(2){transform:rotate(1.4deg) translateY(26px);margin-inline:-3%;z-index:4}
.note:nth-child(3){transform:rotate(-.9deg) translateY(10px);z-index:2}
.note:hover{transform:rotate(0) translateY(-6px);z-index:9;
box-shadow:0 34px 70px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.25)}
.note:nth-child(2):hover{transform:rotate(0) translateY(18px)}
.note:nth-child(3):hover{transform:rotate(0) translateY(2px)}
.note .num{font-size:clamp(4rem,9vw,7.6rem);line-height:.84;display:block;letter-spacing:-.01em}
.note .num sup{font-size:.36em;color:var(--pink);vertical-align:top;margin-left:.04em;
-webkit-text-stroke:0}
.note p{margin-top:.9rem;color:var(--mute-4);font-size:.98rem;max-width:30ch}
.note p b{color:var(--ink);font-weight:600}
/* client logo stamped in the corner */
.note .stamp{position:absolute;top:clamp(18px,2.2vw,26px);right:clamp(18px,2.2vw,26px);
height:clamp(20px,2.2vw,26px);width:auto;opacity:.42;transition:opacity .5s var(--ease)}
.note:hover .stamp{opacity:.72}
/* masking tape holding the card down */
.note .tape{position:absolute;top:-13px;left:50%;width:clamp(74px,8vw,104px);height:26px;
transform:translateX(-50%) rotate(-3deg);
background:repeating-linear-gradient(135deg,rgba(var(--pink-rgb),.85) 0 7px,rgba(var(--pink-rgb),.62) 7px 14px);
box-shadow:0 2px 6px rgba(0,0,0,.28);z-index:2}
.note .tape::before,.note .tape::after{content:"";position:absolute;top:0;bottom:0;width:6px;
background:inherit}
.note .tape::before{left:-5px;-webkit-clip-path:polygon(100% 0,0 22%,100% 46%,0 72%,100% 100%);
clip-path:polygon(100% 0,0 22%,100% 46%,0 72%,100% 100%)}
.note .tape::after{right:-5px;-webkit-clip-path:polygon(0 0,100% 24%,0 48%,100% 74%,0 100%);
clip-path:polygon(0 0,100% 24%,0 48%,100% 74%,0 100%)}
.note:nth-child(2) .tape{transform:translateX(-50%) rotate(2.4deg);
background:repeating-linear-gradient(135deg,rgba(var(--sun-rgb),.9) 0 7px,rgba(var(--sun-rgb),.66) 7px 14px)}
/* the little "HERO" sticker on the middle card */
.note .pin{position:absolute;top:clamp(58px,6vw,74px);right:clamp(-10px,-.8vw,-6px);
background:var(--pink);color:var(--ink);font-size:.62rem;font-weight:700;letter-spacing:.14em;
padding:.35rem .7rem;transform:rotate(6deg);box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:2}
/* hand-drawn underline beneath the number */
.note .scribble{position:absolute;left:clamp(22px,2.6vw,34px);bottom:clamp(16px,2vw,26px);
width:clamp(78px,9vw,120px);color:var(--pink);opacity:.9;pointer-events:none}
.note .scribble svg{width:100%;height:auto;display:block;fill:none;stroke:currentColor;
stroke-width:2.4;stroke-linecap:round;
stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.2s var(--ease) .35s}
.note.in .scribble svg{stroke-dashoffset:0}
@media (max-width:960px){
.results{grid-template-columns:1fr;gap:34px;padding-bottom:10px}
.note,.note:nth-child(2),.note:nth-child(3){margin-inline:0;transform:rotate(0);translate:0}
.note:nth-child(1){transform:rotate(-1.2deg)}
.note:nth-child(2){transform:rotate(1deg)}
.note:nth-child(3){transform:rotate(-.7deg)}
.note:hover,.note:nth-child(2):hover,.note:nth-child(3):hover{transform:rotate(0) translateY(-4px)}
}
/* ---- selected work: cut-out Polaroids ---- */
.projects{row-gap:clamp(36px,5vw,68px)}
/* the whole card is one piece of photo paper */
.project{position:relative;padding:12px 12px 0;background:#fff;border-radius:3px;
box-shadow:0 18px 40px rgba(0,0,0,.18),0 1px 0 rgba(0,0,0,.06);
transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.project .thumb{border-radius:1px;box-shadow:none;background:var(--ink-2)}
.project .thumb img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;
object-fit:cover;display:block}
.project.big .thumb img{aspect-ratio:21/9}
.thumb::after{border-radius:1px;inset:0;
background:linear-gradient(180deg,rgba(var(--ink-rgb),.18) 0%,transparent 28%,
transparent 68%,rgba(var(--ink-rgb),.12) 100%)}
/* the caption is the Polaroid's foot */
.project .meta{background:transparent;color:var(--ink);
padding:clamp(14px,1.6vw,20px) 4px clamp(18px,2vw,26px);align-items:flex-start;gap:10px}
.project h3{font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:.01em}
.project .meta p{color:var(--mute-3);font-size:.84rem}
/* tiny rotations, straightened on hover like picking one up */
.project:nth-child(1){transform:rotate(-.8deg)}
.project:nth-child(2){transform:rotate(1.3deg)}
.project:nth-child(3){transform:rotate(-1.5deg)}
.project:nth-child(4){transform:rotate(.9deg)}
.project:nth-child(5){transform:rotate(-1.1deg)}
.project:hover{transform:rotate(0) translateY(-10px) scale(1.012);z-index:5;
box-shadow:0 38px 74px rgba(0,0,0,.26),0 1px 0 rgba(0,0,0,.06)}
/* pink tape across a corner, on two of them */
.corner-tape{position:absolute;z-index:6;width:clamp(86px,9vw,124px);height:30px;
top:-12px;left:-30px;transform:rotate(-38deg);
background:repeating-linear-gradient(135deg,rgba(var(--pink-rgb),.9) 0 7px,rgba(var(--pink-rgb),.62) 7px 14px);
box-shadow:0 3px 8px rgba(0,0,0,.22)}
.project:nth-child(4) .corner-tape{left:auto;right:-30px;top:-12px;transform:rotate(38deg);
background:repeating-linear-gradient(135deg,rgba(var(--sun-rgb),.92) 0 7px,rgba(var(--sun-rgb),.66) 7px 14px)}
.tag{left:14px;top:14px}
.view{right:14px;bottom:14px;width:78px;height:78px}
@media (max-width:960px){
.project:nth-child(n){transform:rotate(0)}
.project:hover{transform:translateY(-6px)}
.corner-tape{left:-8px;top:-10px;width:86px;height:26px}
.project:nth-child(4) .corner-tape{right:-8px;left:auto}
}
/* ---- shared tape mixin look ---- */
.poster-tape,.slide-tape{position:absolute;z-index:5;height:28px;
box-shadow:0 3px 8px rgba(0,0,0,.22);pointer-events:none}
.poster-tape{width:clamp(90px,10vw,130px);top:-13px;left:14%;transform:rotate(-4deg);
background:repeating-linear-gradient(135deg,rgba(var(--pink-rgb),.9) 0 7px,rgba(var(--pink-rgb),.62) 7px 14px)}
.slide-tape{width:clamp(80px,8vw,116px);top:0;left:8%;transform:rotate(-3deg);
background:repeating-linear-gradient(135deg,rgba(var(--sun-rgb),.92) 0 7px,rgba(var(--sun-rgb),.66) 7px 14px)}
/* ---- paper grain on the light sections ---- */
.light::before,.pink-bg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
opacity:.055;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 160px}
.light>*,.pink-bg>*{position:relative;z-index:1}
/* ---- career path: sticker chips ---- */
.path{gap:.7rem .6rem}
.path span{box-shadow:0 5px 14px rgba(0,0,0,.10);transition:transform .5s var(--ease)}
.path span:nth-child(1){transform:rotate(-1.8deg)}
.path span:nth-child(2){transform:rotate(1.4deg)}
.path span:nth-child(3){transform:rotate(-.9deg)}
.path span:nth-child(4){transform:rotate(2deg)}
.path span:nth-child(5){transform:rotate(-1.5deg)}
.path span:nth-child(6){transform:rotate(1deg)}
.path span:hover{transform:rotate(0) translateY(-3px)}
/* ---- testimonial slide sits slightly askew ---- */
.tst-viewport{overflow:hidden;padding-top:18px;margin-top:-18px}
.tst-slide{position:relative;transform:rotate(-.6deg);
box-shadow:0 16px 40px rgba(0,0,0,.10)}
.tst-slide:nth-child(2){transform:rotate(.7deg)}
.tst-slide:nth-child(3){transform:rotate(-.4deg)}
.tst-slide:nth-child(2) .slide-tape{left:auto;right:9%;transform:rotate(3deg);
background:repeating-linear-gradient(135deg,rgba(var(--pink-rgb),.9) 0 7px,rgba(var(--pink-rgb),.62) 7px 14px)}
/* ---- CTA doodles ---- */
.cta{position:relative;overflow:hidden}
.cta-marks{position:absolute;inset:0;pointer-events:none;z-index:0}
.cta-marks svg{position:absolute;fill:none;stroke:var(--ink);stroke-width:3;
stroke-linecap:round;stroke-linejoin:round;opacity:.5;
stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.4s var(--ease)}
.cta-marks .m1{width:clamp(56px,7vw,96px);left:6%;top:16%;transform:rotate(-8deg)}
.cta-marks .m2{width:clamp(28px,3.4vw,46px);right:9%;top:13%;transform:rotate(12deg)}
.cta-marks .m3{width:clamp(80px,11vw,150px);left:10%;bottom:16%;transform:rotate(4deg)}
.cta-marks .m4{width:clamp(22px,2.6vw,34px);right:13%;bottom:24%;transform:rotate(-14deg)}
.cta.in .cta-marks svg,.cta-marks.in svg{stroke-dashoffset:0}
.cta .wrap{position:relative;z-index:1}
@media (max-width:960px){
.cta-marks .m1,.cta-marks .m3{display:none}
.tst-slide,.tst-slide:nth-child(2),.tst-slide:nth-child(3){transform:rotate(0)}
}
@media (prefers-reduced-motion:reduce){
.note .scribble svg,.cta-marks svg{stroke-dashoffset:0}
}
/* the reveal class resets transform, so restore the poster's tilt after it lands */
.poster.rv.in{transform:rotate(-2deg)}
.poster.rv.in:hover{transform:rotate(0)}
.poster{overflow:visible}
.poster-tape{top:-13px;left:12%}
/* =========================================================
BUILD 06 — PORTFOLIO PAGE
Same palette, fonts and easing as every other page.
========================================================= */
/* ---- page head ---- */
.work-head{padding:clamp(140px,16vw,190px) 0 clamp(40px,6vw,70px);position:relative;overflow:hidden}
.work-head h1{font-size:clamp(4.4rem,17vw,15rem);line-height:.82;margin:.6rem 0 2rem}
.work-head .line{display:flex;align-items:flex-end;gap:.14em}
.work-head .script{font-size:.22em;transform:rotate(-7deg) translateY(-.5em)}
.work-head-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.work-head-bottom .lead{max-width:560px}
.work-counts{display:flex;gap:clamp(24px,4vw,56px)}
.work-counts strong{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);
line-height:1;display:block}
.work-counts small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--mute-1);margin-top:.3rem}
/* ---- play button ---- */
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
width:clamp(52px,5.4vw,78px);height:clamp(52px,5.4vw,78px);border-radius:50%;
background:var(--paper);color:var(--ink);display:grid;place-items:center;z-index:4;
box-shadow:0 10px 30px rgba(0,0,0,.35);
transition:transform .6s var(--ease),background .4s var(--ease)}
.play svg{width:42%;height:42%;fill:currentColor;margin-left:8%}
.reel-hit:hover .play,.pcard-hit:hover .play{transform:translate(-50%,-50%) scale(1);background:var(--pink)}
/* ---- SHOWREELS: a double bill on a cinema light-box ---- */
.reels{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(20px,3vw,40px);align-items:start}
.reel{display:flex;opacity:0;transform:translateY(40px);
transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.reel.in{opacity:1;transform:none}
.reel.trail{margin-top:clamp(28px,5vw,74px)}
.reel-hit{display:flex;width:100%;text-align:left;border-radius:20px;overflow:hidden;
background:#070707;box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07);
transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.reel-hit:hover{transform:translateY(-8px);
box-shadow:0 38px 78px rgba(0,0,0,.6),inset 0 0 0 1px rgba(var(--pink-rgb),.3),0 0 50px rgba(var(--pink-rgb),.2)}
/* film-strip perforations down the leading edge */
.sprockets{flex:none;width:clamp(20px,2vw,28px);align-self:stretch;background:#0a0a0a;
border-right:1px solid rgba(255,255,255,.08);
background-image:repeating-linear-gradient(to bottom,
transparent 0 10px,rgba(255,255,255,.14) 10px 22px,transparent 22px 32px);
background-size:100% 32px;background-position:center}
.reel-body{flex:1;min-width:0;display:flex;flex-direction:column}
.reel-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
background:linear-gradient(135deg,#231020,var(--ink));margin:10px 10px 0;border-radius:12px}
.reel-img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.1s var(--ease)}
.reel-hit:hover .reel-img{transform:scale(1.04)}
.reel-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,rgba(var(--ink-rgb),.28) 0%,transparent 34%,transparent 58%,rgba(var(--ink-rgb),.55) 100%)}
.reel-thumb.noimg .reel-img{display:none}
.reel-thumb.noimg{background:
radial-gradient(58% 70% at 28% 30%,rgba(var(--pink-rgb),.42),transparent 70%),
radial-gradient(58% 70% at 76% 76%,rgba(var(--sun-rgb),.26),transparent 70%),var(--ink-2)}
/* soft projector glow — a slow breath, never a hard flash */
.flicker{position:absolute;inset:-14%;z-index:0;pointer-events:none;opacity:0;
background:radial-gradient(50% 50% at 50% 46%,rgba(255,240,210,.5),transparent 70%);
filter:blur(34px);transition:opacity .7s var(--ease)}
.reel-hit:hover .flicker{opacity:.55;animation:projector 4.2s ease-in-out infinite}
@keyframes projector{0%,100%{opacity:.42}38%{opacity:.62}64%{opacity:.5}}
.reel-meta{display:flex;flex-direction:column;flex:1;
padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) clamp(22px,2.6vw,30px)}
.reel-kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.reel-title{display:block;font-size:clamp(1.7rem,3vw,2.7rem);text-transform:uppercase;
line-height:.98;margin:.5rem 0 .6rem}
.reel.trail .reel-title{font-size:clamp(1.5rem,2.5vw,2.2rem)}
.reel-desc{display:block;color:var(--mute-1a);font-size:.93rem;max-width:46ch;margin-top:auto;padding-top:.5rem}
/* ---- FILTER TABS with a gliding pill ---- */
.tabs{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,46px)}
.tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.55rem;
padding:.75rem 1.2rem;border-radius:99px;font-size:.9rem;font-weight:500;color:var(--ink);
box-shadow:inset 0 0 0 1.5px var(--line-dark);
transition:color .4s var(--ease),box-shadow .4s var(--ease)}
.tab:hover{box-shadow:inset 0 0 0 1.5px rgba(var(--ink-rgb),.42)}
.tab i{font-style:normal;font-size:.7rem;font-weight:700;opacity:.55;
padding:.1rem .4rem;border-radius:99px;background:rgba(var(--ink-rgb),.08);
transition:background .4s var(--ease),opacity .4s var(--ease)}
.tab.on{box-shadow:inset 0 0 0 1.5px transparent}
.tab.on i{background:rgba(var(--ink-rgb),.17);opacity:.85}
/* ---- PROJECT GRID ---- */
.grid-sec{transition:background .7s var(--ease)}
/* Animation has the most entries, so it gets its own tint — the shift is felt
before the filter tab is reread. Still inside the Ink/Paper system. */
.grid-sec.anim-mode{background:#EDEBE6}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);
align-items:start}
.pcard{opacity:0;transform:translateY(34px);
transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
.pcard.in{opacity:1;transform:none}
.pcard[hidden]{display:none}
.pcard-hit{display:block;width:100%;text-align:left;border-radius:16px;overflow:hidden;background:#fff;
box-shadow:0 10px 26px rgba(0,0,0,.10);
transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .6s var(--ease)}
.pcard-hit:hover{transform:translateY(-8px);
box-shadow:0 28px 56px rgba(0,0,0,.18),0 0 0 1px rgba(var(--pink-rgb),.4),0 0 38px rgba(var(--pink-rgb),.20)}
.pthumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.pimg{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.pcard-hit:hover .pimg{transform:scale(1.06)}
.pthumb::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(var(--ink-rgb),.26) 0%,transparent 40%,transparent 60%,rgba(var(--ink-rgb),.3) 100%)}
.pthumb.noimg .pimg{display:none}
.pthumb.noimg{background:
radial-gradient(58% 70% at 30% 28%,rgba(var(--pink-rgb),.4),transparent 70%),
radial-gradient(58% 70% at 74% 78%,rgba(var(--sun-rgb),.26),transparent 70%),var(--ink-2)}
.pcat{position:absolute;left:12px;top:12px;z-index:3;background:var(--ink);color:var(--paper);
font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:.35rem .7rem;border-radius:99px}
.pmeta{display:block;padding:16px 16px 20px;color:var(--ink)}
.ptitle{display:block;font-weight:600;font-size:1rem;line-height:1.25;letter-spacing:-.01em}
.pdesc{display:block;margin-top:.4rem;color:var(--grey);font-size:.84rem;line-height:1.4}
.pgrid-empty{margin-top:28px;color:var(--grey)}
/* BRAND CAMPAIGNS — client wordmark stamped on the corner, same sticker
treatment as the note-cards on the Home page */
.stamp-chip{position:absolute;right:10px;top:10px;z-index:3;background:var(--paper);
padding:.4rem .6rem;border-radius:7px;box-shadow:0 5px 14px rgba(0,0,0,.35);
transform:rotate(-2.5deg);transition:transform .5s var(--ease)}
.stamp-chip img{height:15px;width:auto;display:block;opacity:.78}
.pcard-hit:hover .stamp-chip{transform:rotate(0) translateY(-2px)}
/* SHORT FILMS & AI — a premiere-poster treatment */
.pcard.cinematic .pcard-hit{background:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.26)}
.pcard.cinematic .pcard-hit:hover{box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 1.5px var(--pink),
0 0 42px rgba(var(--pink-rgb),.28)}
.pcard.cinematic .pmeta{color:var(--paper);padding-bottom:24px}
.pcard.cinematic .ptitle{font-family:var(--f-script);font-weight:400;letter-spacing:0;
font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.02;color:var(--paper)}
.pcard.cinematic .pdesc{color:var(--mute-1)}
.pcard.cinematic .pcat{background:var(--pink);color:var(--ink)}
.pcard.cinematic .pthumb{margin:8px 8px 0;border-radius:10px}
/* REAL ESTATE — wider frame, and a dot that walks the path */
.pcard.cat-realestate .pthumb{aspect-ratio:2.4/1}
.walk{position:absolute;right:12px;bottom:12px;z-index:4;width:64px;height:40px;
background:rgba(var(--ink-rgb),.55);border-radius:10px;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:background .4s var(--ease)}
.pcard-hit:hover .walk{background:rgba(var(--pink-rgb),.8)}
.walk svg{position:absolute;inset:0;width:100%;height:100%;fill:none;
stroke:rgba(var(--paper-rgb),.55);stroke-width:2;stroke-linecap:round}
.walk-dot{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
border-radius:50%;background:var(--sun);box-shadow:0 0 10px rgba(var(--sun-rgb),.9);
offset-path:path("M6 32C14 10 30 34 40 18c6-9 12-9 18-6");
offset-distance:0%;offset-rotate:0deg;
animation:walkpath 3.6s ease-in-out infinite}
@keyframes walkpath{0%{offset-distance:0%}50%{offset-distance:100%}100%{offset-distance:0%}}
/* ---- LIGHTBOX ---- */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:clamp(14px,3vw,40px)}
.lb[hidden]{display:none}
.lb-nav[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(8,8,8,.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
opacity:0;transition:opacity .35s var(--ease)}
.lb.on .lb-backdrop{opacity:1}
.lb-inner{position:relative;z-index:2;max-height:92vh;overflow:auto;
width:min(1100px,100%,calc((88vh - 230px) * 16 / 9));
background:var(--ink-2);border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.6);
opacity:0;transform:translateY(22px) scale(.985);
transition:opacity .45s var(--ease),transform .45s var(--ease)}
.lb.on .lb-inner{opacity:1;transform:none}
.lb-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:20px 20px 0 0;overflow:hidden}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lb-meta{padding:clamp(18px,2.4vw,30px)}
.lb-cat{display:inline-flex;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);background:var(--pink);padding:.35rem .75rem;border-radius:99px}
.lb-meta h3{font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.4rem);
line-height:1;margin:.7rem 0 .5rem}
.lb-meta p{color:var(--mute-1a);max-width:70ch}
.lb-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.lb-count{font-size:.8rem;color:var(--mute-2);letter-spacing:.08em}
.lb-yt{font-size:.9rem;font-weight:600;border-bottom:1.5px solid var(--pink);padding-bottom:2px}
.lb-yt:hover{color:var(--pink)}
.lb-close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);z-index:5;
width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--ink);
font-size:1.6rem;line-height:1;display:grid;place-items:center;
transition:background .3s var(--ease),transform .3s var(--ease)}
.lb-close:hover{background:var(--pink);transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);
width:52px;height:52px;border-radius:50%;background:rgba(var(--paper-rgb),.14);color:var(--paper);
display:grid;place-items:center;font-size:1.1rem;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:background .3s var(--ease),color .3s var(--ease)}
.lb-nav:hover{background:var(--pink);color:var(--ink)}
.lb-prev{left:clamp(6px,1.6vw,22px)}
.lb-next{right:clamp(6px,1.6vw,22px)}
/* shown when a video cannot be embedded — instead of YouTube's error screen */
.lb-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
padding:clamp(18px,4vw,40px);overflow:hidden}
.lb-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:blur(14px) brightness(.4) saturate(.8);transform:scale(1.1)}
.lb-fb-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
gap:.9rem;max-width:36ch}
.lb-fb-note{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink);background:var(--sun);padding:.35rem .8rem;border-radius:99px}
.lb-fallback h4{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
font-size:clamp(1.4rem,3vw,2.3rem);line-height:1;color:var(--paper)}
@media (max-width:1100px){
.pgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
.reels{grid-template-columns:1fr}
.reel.trail{margin-top:0}
.work-head-bottom{flex-direction:column;align-items:flex-start}
.work-counts{width:100%;justify-content:space-between}
}
@media (max-width:640px){
.pgrid{grid-template-columns:1fr}
.pcard.cat-realestate .pthumb{aspect-ratio:16/9}
.work-head .script{display:none}
.tabs{gap:6px}
.tab{padding:.6rem .9rem;font-size:.82rem}
.lb-nav{width:44px;height:44px;top:auto;bottom:-4px;transform:none}
.lb-prev{left:auto;right:64px;bottom:12px}
.lb-next{right:12px;bottom:12px}
.lb-inner{max-height:94vh}
}
@media (prefers-reduced-motion:reduce){
.reel,.pcard{opacity:1;transform:none}
.lb-inner,.lb-backdrop{opacity:1;transform:none;transition:none}
.walk-dot{animation:none;offset-distance:52%}
.reel-hit:hover .flicker{animation:none}
}
/* the blend-mode cursor went too heavy over the pink pill — keep it light */
.cursor.big{width:40px;height:40px}
/* =========================================================
BUILD 07 — Portfolio fixes
========================================================= */
/* The projector glow and the gradient scrim were painting over the
showreel frame (an absolutely-positioned sibling beats a static
image). Give the thumb an explicit stack so the frame is on top
of the glow and under only a much lighter scrim. */
.reel-thumb{isolation:isolate}
.flicker{z-index:0}
.reel-img{position:relative;z-index:1}
.reel-thumb::after{z-index:2;
background:linear-gradient(180deg,rgba(var(--ink-rgb),.14) 0%,transparent 26%,
transparent 72%,rgba(var(--ink-rgb),.3) 100%)}
.reel-thumb .play{z-index:3}
/* the placeholder tint only shows while there is no frame to show */
.reel-thumb.loaded{background:#000}
.pthumb.loaded{background:#000}
/* The page must open at the top. Scroll restoration is handled in
work.js; this keeps the smooth behaviour for in-page anchors only. */
/* =========================================================
BUILD 08 — Portfolio: land on the showreels
The header was 850px tall, so both reels sat below the fold
and the page read as if it scrolled past them. Compacted so
the reels are the first thing you see.
========================================================= */
.work-head{padding:clamp(104px,11vw,126px) 0 clamp(18px,2.4vw,28px)}
.work-head h1{font-size:clamp(2.6rem,8vw,6rem);line-height:.9;margin:.5rem 0 1.1rem}
.work-head .script{font-size:.3em}
.work-head-bottom{padding-top:18px;align-items:center}
.work-head-bottom .lead{font-size:clamp(.98rem,1.3vw,1.1rem);max-width:480px}
.work-counts strong{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.work-counts small{font-size:.66rem;margin-top:.15rem}
/* the reels come straight after, with a light touch of air */
.reels-sec{padding-top:clamp(22px,3vw,38px);padding-bottom:clamp(44px,6vw,78px)}
.reels-sec .sec-head{margin-bottom:clamp(18px,2.4vw,28px);align-items:center}
.reels-sec .sec-title{font-size:clamp(2.2rem,5vw,4.2rem)}
.reels-sec .lead{font-size:.98rem}
/* the grid section header, trimmed to match */
.grid-sec{padding-top:clamp(50px,7vw,86px)}
.grid-sec .sec-head{margin-bottom:clamp(22px,3vw,34px);align-items:center}
.grid-sec .sec-title{font-size:clamp(2.4rem,6vw,5.4rem)}
.grid-sec .sec-head .lead{font-size:.98rem}
/* nothing on this site is an in-page anchor, so smooth scrolling only
created the restore-animation bug — it is gone for good */
html{scroll-behavior:auto !important}
/* =========================================================
BUILD 09 — Part 2 creative pass
Grid, tabs, cards and lightbox chrome only.
The showreels section above is deliberately untouched.
========================================================= */
/* ---- layout rhythm: feature cards break the grid ---- */
.pgrid{grid-auto-flow:dense}
.pcard.pfeature{grid-column:span 2}
.pcard.pfeature .pthumb,
.pcard.pfeature.cat-realestate .pthumb{aspect-ratio:16/9}
.pcard.pfeature .ptitle{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.18}
.pcard.pfeature .pdesc{font-size:.9rem;max-width:52ch}
.pcard.pfeature .pmeta{padding:20px 20px 24px}
.pcard.pfeature .play{width:clamp(62px,6.4vw,92px);height:clamp(62px,6.4vw,92px)}
/* ---- the whole set sits slightly askew, like pinned prints ---- */
.pcard-hit{transform-origin:50% 60%}
.pcard:nth-child(6n+1) .pcard-hit{transform:rotate(-.7deg)}
.pcard:nth-child(6n+2) .pcard-hit{transform:rotate(.9deg)}
.pcard:nth-child(6n+3) .pcard-hit{transform:rotate(-1.1deg)}
.pcard:nth-child(6n+4) .pcard-hit{transform:rotate(.6deg)}
.pcard:nth-child(6n+5) .pcard-hit{transform:rotate(-.5deg)}
.pcard:nth-child(6n) .pcard-hit{transform:rotate(1deg)}
.pcard .pcard-hit:hover{transform:rotate(0) translateY(-9px) scale(1.012);z-index:6}
/* ---- tags become stickers, matching the Home page ---- */
.pcat{transform:rotate(-2.5deg);box-shadow:0 5px 14px rgba(0,0,0,.4);
transition:transform .5s var(--ease)}
.pcard-hit:hover .pcat{transform:rotate(0) translateY(-2px)}
.pcard.cat-brand .pcat{background:var(--paper);color:var(--ink)}
.pcard.cat-animation .pcat{background:var(--sun);color:var(--ink)}
.pcard.cat-realestate .pcat{background:var(--paper);color:var(--ink)}
/* tape across the corner of a feature card */
.card-tape{position:absolute;z-index:5;width:clamp(78px,7vw,108px);height:27px;
top:-11px;left:-26px;transform:rotate(-38deg);
background:repeating-linear-gradient(135deg,rgba(var(--pink-rgb),.9) 0 7px,rgba(var(--pink-rgb),.62) 7px 14px);
box-shadow:0 3px 8px rgba(0,0,0,.25)}
.pcard.pfeature:nth-child(even) .card-tape{
background:repeating-linear-gradient(135deg,rgba(var(--sun-rgb),.92) 0 7px,rgba(var(--sun-rgb),.66) 7px 14px)}
/* ---- tabs: a touch more character ---- */
.tab{transition:color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.tab:hover{transform:translateY(-2px)}
.tab.on{transform:none}
/* ---- lightbox chrome ---- */
.lb-inner{box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07)}
.lb-cat{transform:rotate(-2deg);box-shadow:0 4px 12px rgba(0,0,0,.35)}
@media (max-width:1100px){
.pcard.pfeature{grid-column:span 2}
}
@media (max-width:640px){
.pcard.pfeature{grid-column:span 1}
.pcard .pcard-hit,
.pcard:nth-child(6n+1) .pcard-hit,.pcard:nth-child(6n+2) .pcard-hit,
.pcard:nth-child(6n+3) .pcard-hit,.pcard:nth-child(6n+4) .pcard-hit,
.pcard:nth-child(6n+5) .pcard-hit,.pcard:nth-child(6n) .pcard-hit{transform:rotate(0)}
.pcard .pcard-hit:hover{transform:translateY(-6px)}
.card-tape{left:-8px;top:-9px;width:80px;height:24px}
}
@media (prefers-reduced-motion:reduce){
.pcard .pcard-hit,.pcard:nth-child(n) .pcard-hit{transform:none}
}
/* =========================================================
BUILD 10 — Portfolio: plain backdrop + scrolling category rail
========================================================= */
/* ---- 1. showreels sit on flat Ink, nothing behind them ---- */
.work-head{background:var(--ink)}
.reels-sec{background:var(--ink)}
.reels-sec::before,.reels-sec::after{content:none}
/* ---- 2. the category rail drifts like the logo marquee ---- */
.tabs{position:relative;display:block;overflow:hidden;
margin-bottom:clamp(28px,4vw,46px);padding:4px 0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.tab-track{display:flex;gap:8px;width:max-content;will-change:transform}
.tab{flex:none}
/* the active pill now rides with the tab instead of gliding behind it */
.tab{background:transparent;transition:color .4s var(--ease),box-shadow .4s var(--ease),
background-color .45s var(--ease),transform .4s var(--ease)}
.tab.on{background:var(--pink);box-shadow:inset 0 0 0 1.5px transparent}
.tab.on i{background:rgba(var(--ink-rgb),.17);opacity:.85}
.rail-hint{display:flex;align-items:center;gap:.5rem;margin:-6px 0 clamp(22px,3vw,32px);
font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.rail-hint kbd{font-family:var(--f-body);font-size:.68rem;font-weight:700;letter-spacing:.06em;
background:rgba(var(--ink-rgb),.08);border:1px solid var(--line-dark);border-bottom-width:2px;
border-radius:5px;padding:.2rem .45rem;color:var(--ink)}
@media (prefers-reduced-motion:reduce){
/* static, click-only: no drift, no keypress advance, nothing cut off */
.tabs{overflow:visible;-webkit-mask-image:none;mask-image:none}
.tab-track{flex-wrap:wrap;width:auto;transform:none !important}
.tab[aria-hidden="true"]{display:none} /* the loop clone is motion-only */
.rail-hint{display:none}
}
/* the keypress hint is meaningless without a keyboard */
@media (hover:none){ .rail-hint{display:none} }
/* =========================================================
BUILD 11 — showreels with no background at all
The cards keep their size, layout, play button and
click-to-play; everything painted behind them is gone.
========================================================= */
.reel-hit{background:transparent;box-shadow:none;border-radius:0}
.reel-hit:hover{box-shadow:none}
.sprockets{display:none} /* film-strip edge */
.flicker{display:none} /* projector glow */
.reel-thumb{background:transparent;margin:0;border-radius:14px}
.reel-thumb.loaded,.reel-thumb.noimg{background:transparent}
/* keep a tint only while there is genuinely no frame to show */
.reel-thumb.noimg{background:var(--ink-2)}
.reel-thumb::after{content:none} /* gradient scrim over the frame */
.reel-meta{padding:16px 2px 0}
.reel-hit:hover{transform:translateY(-6px)}
/* =========================================================
BUILD 12 — every thumbnail the same size, richer treatment
========================================================= */
/* ---- 1. one size for all 26 ---- */
.pgrid{grid-auto-flow:row}
.pcard.pfeature{grid-column:span 1} /* no more double-width cards */
.pcard.pfeature .ptitle{font-size:1rem;line-height:1.25}
.pcard.pfeature .pdesc{font-size:.84rem;max-width:none}
.pcard.pfeature .pmeta{padding:16px 16px 20px}
.pcard.pfeature .play,
.pcard .play{width:clamp(52px,5.4vw,78px);height:clamp(52px,5.4vw,78px)}
.pcard .pthumb,
.pcard.cat-realestate .pthumb,
.pcard.pfeature .pthumb,
.pcard.cinematic .pthumb{aspect-ratio:16/9;margin:0;border-radius:0}
.card-tape{display:none}
/* square to the grid so nothing reads as a different size */
.pcard .pcard-hit,
.pcard:nth-child(6n+1) .pcard-hit,.pcard:nth-child(6n+2) .pcard-hit,
.pcard:nth-child(6n+3) .pcard-hit,.pcard:nth-child(6n+4) .pcard-hit,
.pcard:nth-child(6n+5) .pcard-hit,.pcard:nth-child(6n) .pcard-hit{transform:none}
.pcard .pcard-hit:hover{transform:translateY(-10px)}
/* ---- 2. the treatment ---- */
/* a pink register block sits behind the frame, slightly out of
alignment, and slides home when you point at the card */
.pcard{position:relative}
.pcard::before{content:"";position:absolute;left:-8px;top:-8px;width:72px;height:72px;
background:var(--pink);border-radius:14px 0 0 0;z-index:0;
transition:transform .65s var(--ease),opacity .5s var(--ease)}
.pcard:hover::before{transform:translate(8px,8px);opacity:.85}
.pcard-hit{position:relative;z-index:1}
/* colour settles in as you point at it — soft, no sweep */
.pimg{filter:saturate(.68) contrast(1.04) brightness(.94);
transition:transform 1.1s var(--ease),filter .75s var(--ease)}
.pcard-hit:hover .pimg{filter:none;transform:scale(1.05)}
/* the same paper grain used on the Home page, over every frame */
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.14;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px}
/* catalogue number, bottom left */
.pnum{position:absolute;left:12px;bottom:10px;z-index:3;
font-family:var(--f-display);font-size:1.15rem;line-height:1;letter-spacing:.06em;
color:var(--paper);text-shadow:0 2px 8px rgba(0,0,0,.6);opacity:.75;
transition:opacity .5s var(--ease),color .5s var(--ease)}
.pcard-hit:hover .pnum{opacity:1;color:var(--sun)}
/* a hairline inside the frame so the image reads as a print, not a crop */
.pthumb{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* the five picks are marked in the caption now, not by size */
.pick{font-style:normal;display:inline-block;vertical-align:middle;margin-left:.5rem;
font-family:var(--f-body);font-size:.58rem;font-weight:700;letter-spacing:.14em;
background:var(--sun);color:var(--ink);padding:.22rem .45rem;border-radius:4px;
transform:rotate(-3deg)}
@media (max-width:640px){
.pcard::before{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
.pcard::before{transition:none}
.pimg{filter:none}
}
/* give each corner one job: tag top-left, logo or walk icon top-right,
catalogue number bottom-left, register block bottom-right */
.pcard::before{left:auto;right:-8px;top:auto;bottom:-8px;border-radius:0 0 14px 0}
.pcard:hover::before{transform:translate(-8px,-8px)}
.pcard.cat-realestate .walk{top:12px;bottom:auto;right:12px}
/* =========================================================
BUILD 13 — Home "Selected work" now holds real videos
========================================================= */
.vplay{position:absolute;left:50%;top:50%;z-index:3;
transform:translate(-50%,-50%) scale(.92);
width:clamp(54px,5vw,76px);height:clamp(54px,5vw,76px);border-radius:50%;
background:var(--paper);color:var(--ink);display:grid;place-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.35);
transition:transform .6s var(--ease),background .4s var(--ease)}
.vplay svg{width:40%;height:40%;fill:currentColor;margin-left:8%;display:block}
.project:hover .vplay{transform:translate(-50%,-50%) scale(1);background:var(--pink)}
/* the round VIEW badge would fight the play button — let the play button lead */
.project .view{width:62px;height:62px;font-size:.68rem;right:18px;bottom:18px}
/* YouTube's hqdefault is a 4:3 file with the 16:9 frame letterboxed inside it.
Matching the card to 16:9 crops the black bars away cleanly. */
.project .thumb img{aspect-ratio:16/9}
.project.big .thumb img{aspect-ratio:21/9}
/* the frame and the image must share the ratio, or the leftover
container shows through as a black band under the still */
.project .thumb{aspect-ratio:16/9}
.project.big .thumb{aspect-ratio:21/9}
.project .thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
/* =========================================================
BUILD 14 — the work leads, the name follows
========================================================= */
/* ---- hero ---- */
.hero{min-height:auto;padding:clamp(118px,13vw,150px) 0 clamp(50px,7vw,88px);
display:block}
.hero .hero-top{display:flex;justify-content:space-between;align-items:center;gap:24px;
flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px}
.hero .hero-stats{display:flex;gap:clamp(22px,3.4vw,52px)}
.hero .hero-stats div{display:flex;flex-direction:column-reverse;gap:.15rem}
.hero .hero-stats strong{font-family:var(--f-display);font-weight:400;
font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1}
.hero .hero-stats small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-1)}
.hero-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,34vw,520px);
gap:clamp(28px,4vw,64px);align-items:end;margin-top:clamp(26px,4vw,48px)}
.hero-line{font-size:clamp(2.9rem,7.4vw,6.6rem);line-height:.9;letter-spacing:.004em}
.hero-line .line{display:flex;align-items:baseline;gap:.14em;flex-wrap:nowrap}
.hero-line .script{font-size:.42em;transform:rotate(-5deg)}
/* the showreel is the hero image now */
.hero-reel{display:block}
.hero-reel-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
border-radius:16px;background:var(--ink-2);
box-shadow:0 22px 54px rgba(0,0,0,.5);
transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.hero-reel:hover .hero-reel-thumb{transform:translateY(-6px);
box-shadow:0 36px 76px rgba(0,0,0,.6),0 0 0 1px rgba(var(--pink-rgb),.35),0 0 46px rgba(var(--pink-rgb),.2)}
.hero-reel-thumb img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.1s var(--ease)}
.hero-reel:hover .hero-reel-thumb img{transform:scale(1.04)}
.hero-reel-meta{display:flex;align-items:baseline;gap:.7rem;padding-top:.85rem;flex-wrap:wrap}
.hero-reel-kicker{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--pink)}
.hero-reel-title{font-size:.98rem;color:var(--mute-0b)}
/* the name, at the size a credit should be */
.hero-credit{display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
margin-top:clamp(30px,4.5vw,56px);padding-top:clamp(20px,3vw,30px);
border-top:1px solid var(--line)}
.hero-credit .avatar{width:52px;height:52px;border-radius:50%;flex:none;object-fit:cover;
box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.hero-credit p{color:var(--mute-0b);font-size:.98rem;line-height:1.45;margin-right:auto}
.hero-credit p b{color:var(--paper);font-weight:600}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:960px){
.hero-main{grid-template-columns:1fr;align-items:start}
.hero .hero-stats{width:100%;justify-content:space-between}
.hero-credit p{margin-right:0;width:100%;order:3}
}
@media (max-width:640px){
.hero-line .script{display:inline-block}
.hero-credit{gap:12px}
}
/* the career chips moved into About — rotated chips need more room
between rows or their corners collide */
.about .path{gap:1.15rem .6rem;margin-top:2rem}
.about .path span{background:var(--paper);color:var(--ink);border-color:transparent}
.about .path span:nth-child(1){transform:rotate(-1deg)}
.about .path span:nth-child(2){transform:rotate(.8deg)}
.about .path span:nth-child(3){transform:rotate(-.6deg)}
.about .path span:nth-child(4){transform:rotate(1.1deg)}
.about .path span:nth-child(5){transform:rotate(-.9deg)}
.about .path span:nth-child(6){transform:rotate(.6deg)}
.about .path span:hover{transform:rotate(0) translateY(-3px)}
/* keep the name and face together on narrow screens, buttons underneath */
@media (max-width:960px){
.hero-credit{align-items:flex-start}
.hero-credit p{order:0;margin-right:0;flex:1 1 60%;min-width:220px}
.hero-actions{order:3;width:100%;margin-top:4px}
}
/* =========================================================
BUILD 15 — About portrait: the doodle image, handled properly
========================================================= */
.portrait{position:relative;aspect-ratio:900/1101;overflow:hidden;border-radius:20px;
/* a quiet studio panel instead of the coloured wash */
background:
radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.055),transparent 60%),
linear-gradient(180deg,#191919 0%,#121212 100%);
box-shadow:0 28px 64px rgba(0,0,0,.5);
display:block}
.portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
object-position:bottom center}
.portrait .portrait-figure{z-index:1;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
-webkit-mask-image:none;mask-image:none}
/* the hand-drawn marks sit behind her and stay quiet */
.portrait .portrait-marks{z-index:0;opacity:.5;
transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.about:hover .portrait .portrait-marks{opacity:.7;transform:scale(1.015)}
/* a single restrained accent, not a wash of colour */
.portrait::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
background:linear-gradient(90deg,var(--sun),var(--pink));opacity:.85}
@media (prefers-reduced-motion:reduce){
.about:hover .portrait .portrait-marks{transform:none}
}
/* =========================================================
BUILD 16 — collage kit: handwriting, stars, colour blocks
Same palette; new accent faces and shapes.
========================================================= */
:root{
--f-hand:"Rock Salt","Bradley Hand",cursive;
--f-pixel:"Pixelify Sans","Courier New",monospace;
/* a six-point burst, reused everywhere */
--burst:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
/* ---- handwritten annotations ---- */
.note-hand{position:absolute;z-index:6;pointer-events:none;
font-family:var(--f-hand);font-size:clamp(.72rem,1.05vw,.92rem);line-height:1.5;
color:var(--pink);max-width:19ch;text-align:left}
.note-hand.sun{color:var(--sun)}
.note-hand.ink{color:var(--ink)}
.note-hand .arrow{display:block;width:clamp(46px,5vw,76px);height:auto;margin-top:.2rem;
fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:240;stroke-dashoffset:240;
transition:stroke-dashoffset 1.25s var(--ease) .3s}
.rv.in .note-hand .arrow,.note-hand.in .arrow{stroke-dashoffset:0}
.note-hand span{display:inline-block;transform:rotate(-4deg)}
/* ---- decorative bursts ---- */
.burst{position:absolute;pointer-events:none;z-index:0;
-webkit-clip-path:var(--burst);clip-path:var(--burst);background:var(--pink)}
.burst.sun{background:var(--sun)}
.burst.spin{animation:burstspin 26s linear infinite}
@keyframes burstspin{to{transform:rotate(360deg)}}
/* an image cut into a burst — the reference's signature shape */
.burst-img{position:relative;-webkit-clip-path:var(--burst);clip-path:var(--burst);
overflow:hidden;display:block;aspect-ratio:1}
.burst-img img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- word stickers: each word in its own tilted chip ---- */
.word-stickers{display:flex;flex-wrap:wrap;gap:.45rem .5rem;align-items:center}
.word-stickers b{font-weight:600;font-size:clamp(.82rem,1.3vw,1rem);letter-spacing:-.01em;
padding:.3rem .7rem;border-radius:5px;display:inline-block;
transition:transform .45s var(--ease)}
.word-stickers b:nth-child(5n+1){background:var(--paper);color:var(--ink);transform:rotate(-3deg)}
.word-stickers b:nth-child(5n+2){background:var(--pink);color:var(--ink);transform:rotate(2.2deg)}
.word-stickers b:nth-child(5n+3){background:var(--sun);color:var(--ink);transform:rotate(-1.6deg)}
.word-stickers b:nth-child(5n+4){background:var(--ink);color:var(--paper);transform:rotate(3deg);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.word-stickers b:nth-child(5n+5){background:var(--pink-soft);color:var(--ink);transform:rotate(-2.4deg)}
.word-stickers b:hover{transform:rotate(0) translateY(-2px)}
/* ---- small technical labels in the pixel face ---- */
.pix{font-family:var(--f-pixel);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){
.burst.spin{animation:none}
.note-hand .arrow{stroke-dashoffset:0}
}
/* ---- Home: where the kit lands ---- */
.hero{position:relative;overflow:hidden}
.hero .burst{width:clamp(120px,13vw,210px);aspect-ratio:1;opacity:.14}
.hero .b1{right:-3%;top:6%}
.hero .b2{left:-4%;bottom:-6%;width:clamp(90px,9vw,150px);opacity:.1;animation-direction:reverse}
.hero-main{position:relative}
.hero-note{right:calc(clamp(300px,34vw,520px) + clamp(28px,4vw,64px) + 10px);top:4%;
text-align:right;max-width:14ch}
.hero-note .arrow{margin-left:auto;transform:scaleX(-1)}
.work-note{right:0;top:-14px;text-align:right;color:var(--ink)}
.work-note .arrow{margin-left:auto}
.light .work-note{color:var(--ink)}
/* the Services band as a flat Sun block — the boldest colour move on the page */
.sun-block{background:var(--sun);color:var(--ink)}
.sun-block .sec-title,.sun-block h3{color:var(--ink)}
.sun-block .muted{color:rgba(var(--ink-rgb),.62)}
.sun-block .svc{border-top-color:rgba(var(--ink-rgb),.22)}
.sun-block .svc-item{border-bottom-color:rgba(var(--ink-rgb),.22)}
.sun-block .svc-item::before{background:var(--ink)}
.sun-block .svc-item:hover{color:var(--paper)}
.sun-block .svc-item:hover h3,.sun-block .svc-item:hover p{color:var(--paper)}
.sun-block .svc-item:hover .svc-icon{color:var(--sun)}
.sun-block .svc-item li{border-color:rgba(var(--ink-rgb),.45)}
.sun-block .svc-item:hover li{border-color:rgba(var(--paper-rgb),.45);color:var(--paper)}
.sun-block .svc-icon{color:var(--ink)}
.sun-block .svc-item:nth-child(even) .svc-icon{color:rgba(var(--ink-rgb),.55)}
.sun-block::before{opacity:.07}
@media (max-width:960px){
.hero-note{display:none}
.work-note{position:static;display:block;margin:0 0 14px;max-width:none;text-align:left}
.work-note .arrow{margin:0;transform:rotate(68deg)}
}
/* a campaign frame cut into the star — the reference's signature shape */
.results-sec{position:relative;overflow:hidden}
.results-sec .sec-head{position:relative}
.burst-img{width:clamp(96px,11vw,168px);flex:none;
transform:rotate(-12deg) scale(.82);opacity:0;
transition:transform 1.1s var(--ease),opacity .9s var(--ease)}
.burst-img.in{transform:rotate(-12deg) scale(1);opacity:1}
.burst-img:hover{transform:rotate(0) scale(1.06)}
.results-sec .burst-img{position:relative;z-index:2;align-self:center}
.results-sec .r-burst{width:clamp(130px,15vw,240px);aspect-ratio:1;left:-5%;top:14%;opacity:.07}
@media (max-width:860px){
.results-sec .burst-img{display:none}
}
.results-sec .sec-head{align-items:center;gap:clamp(18px,3vw,40px)}
.results-sec .sec-head .lead{max-width:280px;margin-left:auto}
/* ---- Portfolio: the same kit ---- */
.work-head{position:relative;overflow:hidden}
.work-head .burst{width:clamp(110px,12vw,190px);aspect-ratio:1;opacity:.13}
.work-head .wb1{right:-2%;top:12%}
.work-head .wb2{right:9%;bottom:-18%;width:clamp(70px,7vw,120px);opacity:.1;animation-direction:reverse}
/* the rail hint, handwritten */
.rail-hint .hand{font-family:var(--f-hand);color:var(--pink);font-size:1.05em;
text-transform:none;letter-spacing:0;margin-right:.35rem}
.rail-hint{text-transform:none;letter-spacing:.02em;font-size:.82rem}
.reels-sec{position:relative}
.reels-sec .sec-head{position:relative}
/* catalogue numbers in the pixel face — a technical counterpoint */
.pnum{font-family:var(--f-pixel);font-size:.95rem;letter-spacing:.06em;font-weight:600}
@media (max-width:960px){
}
/* =========================================================
BUILD 17 — ABOUT PAGE
Same palette, fonts, easing and reveal style as the rest.
========================================================= */
/* ---- page head ---- */
.ab-head{position:relative;overflow:hidden;
padding:clamp(118px,13vw,150px) 0 clamp(44px,6vw,74px)}
.ab-head .burst{width:clamp(110px,12vw,200px);aspect-ratio:1;opacity:.12}
.ab-head .ab-b1{right:-3%;top:10%}
.ab-head .ab-b2{left:-4%;bottom:-8%;width:clamp(80px,8vw,130px);opacity:.09;animation-direction:reverse}
.ab-head-grid{display:grid;grid-template-columns:minmax(0,1.25fr) clamp(260px,30vw,420px);
gap:clamp(28px,5vw,72px);align-items:center}
.ab-head h1{font-size:clamp(3rem,8vw,7rem);line-height:.9;margin:.5rem 0 1.3rem}
.ab-head h1 .line{display:flex;align-items:baseline;gap:.14em}
.ab-head h1 .script{font-size:.46em;transform:rotate(-5deg)}
.ab-head .lead{max-width:46ch;color:var(--mute-0b)}
.ab-facts{display:flex;gap:clamp(24px,4vw,56px);margin-top:clamp(22px,3vw,34px);
padding-top:22px;border-top:1px solid var(--line)}
.ab-facts strong{display:block;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1;color:var(--paper)}
.ab-facts small{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--mute-1);margin-top:.35rem}
/* ---- story ---- */
.story{max-width:62ch;margin-left:auto;margin-right:auto}
.story p{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.62;color:var(--mute-4);margin-bottom:1.1rem}
.story p b{color:var(--ink);font-weight:600}
.story .story-lead{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.42;color:var(--ink);
letter-spacing:-.015em}
.story .story-lead::first-letter{font-family:var(--f-display);font-size:3.1em;line-height:.76;
float:left;margin:.06em .12em 0 0;color:var(--pink)}
.pull{position:relative;margin:clamp(30px,4vw,48px) 0 0;padding:clamp(24px,3vw,38px);
background:var(--paper-2);border:1px solid var(--line-dark);border-radius:20px;
transform:rotate(-.6deg)}
.pull .pull-mark{font-family:var(--f-script);font-size:clamp(3rem,6vw,4.6rem);line-height:.4;
color:var(--pink);display:block;height:.42em}
.pull p{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.38;color:var(--ink);
letter-spacing:-.018em;margin:0;font-weight:500}
/* ---- timeline ---- */
.tl-sec{position:relative;overflow:hidden}
.tl-sec .tl-burst{width:clamp(130px,14vw,230px);aspect-ratio:1;right:-4%;top:18%;opacity:.07}
.tl{list-style:none;position:relative;margin:0;padding:0 0 0 clamp(44px,6vw,86px);
--fill:0%}
/* the spine: a faint full-length rail with a lit section that follows your scroll */
.tl::before,.tl::after{content:"";position:absolute;left:clamp(14px,2vw,28px);top:6px;bottom:6px;
width:2px;border-radius:2px}
.tl::before{background:var(--line)}
.tl::after{background:linear-gradient(180deg,var(--sun),var(--pink));
bottom:auto;height:var(--fill);max-height:calc(100% - 12px);
transition:height .18s linear;box-shadow:0 0 14px rgba(var(--pink-rgb),.45)}
.tl-item{position:relative;padding:0 0 clamp(26px,4vw,44px);
opacity:0;transform:translateY(34px);
transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.tl-item.in{opacity:1;transform:none}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:calc(clamp(14px,2vw,28px) - clamp(44px,6vw,86px) - 5px);top:4px;
width:14px;height:14px;border-radius:50%;background:var(--ink);
box-shadow:0 0 0 2px var(--grey);z-index:2;
transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.tl-item.in .tl-dot{background:var(--pink);box-shadow:0 0 0 2px var(--pink),0 0 18px rgba(var(--pink-rgb),.6)}
.tl-item.is-now.in .tl-dot{background:var(--sun);box-shadow:0 0 0 2px var(--sun),0 0 18px rgba(var(--sun-rgb),.6);
transform:scale(1.15)}
.tl-step{position:absolute;left:calc(0px - clamp(44px,6vw,86px));top:30px;
font-size:.74rem;color:#7a7a7a;letter-spacing:.08em;width:clamp(44px,6vw,86px);
padding-left:clamp(6px,.8vw,12px)}
.tl-card{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;
padding:clamp(18px,2.4vw,28px);max-width:62ch;
transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.tl-item:hover .tl-card{transform:translateY(-4px);border-color:rgba(var(--pink-rgb),.4);
box-shadow:0 22px 46px rgba(0,0,0,.4)}
.tl-card h3{font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.018em;
line-height:1.22;margin-bottom:.5rem}
.tl-card p{color:var(--mute-1a);font-size:.98rem;line-height:1.55;max-width:56ch}
.tl-flag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;background:var(--pink);color:var(--ink);
padding:.3rem .6rem;border-radius:4px;margin-bottom:.7rem;transform:rotate(-2deg)}
.tl-flag.sun{background:var(--sun)}
.tl-link{display:inline-block;margin-top:.9rem;font-size:.9rem;font-weight:600;
border-bottom:1.5px solid var(--pink);padding-bottom:2px}
.tl-link:hover{color:var(--pink)}
.tl-stat{display:inline-block;margin:.9rem 0 0 1rem;font-size:.9rem;color:var(--mute-1)}
.tl-stat b{color:var(--sun);font-size:1.05rem}
.tl-item.is-hero .tl-card{border-color:rgba(var(--pink-rgb),.35)}
/* ---- mission block ---- */
.mission-sec{text-align:center}
.mission{font-size:clamp(2.1rem,6vw,5rem);line-height:.96;max-width:17ch;margin:1rem auto .9rem;
color:var(--ink)}
.mission-sub{font-size:clamp(1rem,1.8vw,1.35rem);max-width:46ch;margin:0 auto;
color:rgba(var(--ink-rgb),.72)}
.mission-sec .eyebrow{color:var(--ink)}
.mission-sec .eyebrow::before{background:var(--ink)}
.mission-sec .word-stickers{justify-content:center;margin-top:clamp(26px,3.5vw,40px)}
/* ---- skill meters ---- */
.meters{display:grid;gap:clamp(22px,3vw,34px);max-width:960px}
.meter{opacity:0;transform:translateY(26px);
transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
.meter.in{opacity:1;transform:none}
.meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
margin-bottom:.6rem}
.meter-top h3{font-size:clamp(1rem,1.6vw,1.2rem);font-weight:600;letter-spacing:-.015em;
color:var(--ink)}
.meter-top b{font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink);flex:none}
.meter-top b::after{content:"%";font-size:.6em;margin-left:.08em;opacity:.55}
.meter-bar{height:10px;border-radius:99px;background:rgba(var(--ink-rgb),.1);overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.07)}
.meter-bar i{display:block;height:100%;width:0;border-radius:inherit;
background:linear-gradient(90deg,var(--sun),var(--pink));
transition:width 1.5s var(--ease)}
.meter.in .meter-bar i{width:var(--v)}
.meter p{margin-top:.6rem;color:var(--grey);font-size:.9rem;line-height:1.5}
@media (max-width:960px){
.ab-head-grid{grid-template-columns:1fr;gap:30px}
.ab-head .portrait{max-width:330px;margin-inline:auto;order:-1}
.ab-facts{width:100%;justify-content:space-between;gap:16px}
.story{margin-left:0}
}
@media (max-width:640px){
.ab-head h1 .script{font-size:.4em}
.tl{padding-left:40px}
.tl::before,.tl::after{left:12px}
.tl-dot{left:-33px}
.tl-step{left:-40px;width:40px;top:28px;font-size:.68rem;padding-left:4px}
.tl-stat{margin-left:0;display:block}
.meter-top{flex-wrap:wrap;gap:4px}
}
@media (prefers-reduced-motion:reduce){
.tl-item,.meter{opacity:1;transform:none}
.tl::after{transition:none}
.meter .meter-bar i{transition:none;width:var(--v)}
}
/* the route reads better as a centred column than a left-hugging list */
.tl{max-width:980px;margin-inline:auto}
.tl-card{max-width:none}
.tl-card p{max-width:60ch}
/* =========================================================
BUILD 18 — fixes
========================================================= */
/* body had overflow-x:hidden but html did not, so the page could still
be nudged 1px sideways. clip stops it without creating a scroll
container, which would break the sticky nav. */
html{overflow-x:clip}
body{overflow-x:clip}
/* =========================================================
BUILD 18b — Home: rhythm and depth
========================================================= */
/* the award film now sits on Paper, so Results no longer runs
into a second dark section — ink → light → sun → ink → light → pink */
.nanu-sec .poster{box-shadow:0 30px 70px rgba(0,0,0,.28)}
.nanu-sec .feature h2{color:var(--ink)}
.nanu-sec .lead.muted{color:var(--mute-3)}
.nanu-sec dt{color:var(--mute-2b)}
.nanu-sec dd{color:var(--ink)}
.nanu-sec .eyebrow{color:var(--ink)}
.nanu-sec .btn{background:var(--ink);color:var(--paper)}
.nanu-sec .btn::before{background:var(--pink)}
.nanu-sec .btn:hover{color:var(--ink)}
/* an oversized ghost number behind each section heading, for depth */
.sec-head{position:relative}
.sec-num{position:absolute;right:0;top:-.42em;z-index:0;pointer-events:none;
font-size:clamp(5rem,13vw,12rem);line-height:.8;font-weight:600;
color:currentColor;opacity:.05;letter-spacing:-.02em;user-select:none}
/* :not(.sec-num) matters — a blanket rule here turns the absolutely
positioned ghost number back into a flex item, which parks it at the
far left and shoves the heading sideways. */
.sec-head > *:not(.sec-num){position:relative;z-index:1}
.sun-block .sec-num{opacity:.09}
.light .sec-num{opacity:.055}
/* the marquee mixes faces, the way the reference does */
.marquee.mixed span{align-items:baseline}
.marquee.mixed span.alt{font-family:var(--f-hand);font-size:clamp(.95rem,2vw,1.5rem);
text-transform:none;letter-spacing:0}
.marquee.mixed span::after{width:.5em;height:.5em}
/* (a slanted cut on the Sun block was tried here and removed — the
clip-path left a paint artifact against the section above it) */
@media (max-width:860px){
.sec-num{font-size:clamp(3.4rem,16vw,6rem);top:-.3em}
}
@media (prefers-reduced-motion:reduce){
.sec-num{opacity:.045}
}
/* =========================================================
BUILD 19 — SERVICES PAGE
Eight cards on an offset editorial grid. Same palette, fonts,
easing and reveal language as every other page; the only new
idea here is the accent that each card carries (pink on the
odds, sun on the evens) and the line that draws along its
base on hover.
========================================================= */
/* ---- page head ---- */
.sv-head{position:relative;overflow:hidden;
padding:clamp(124px,14vw,190px) 0 clamp(44px,6vw,80px)}
.sv-head h1{font-size:clamp(3.8rem,15vw,13rem);line-height:.82;margin:.5rem 0 0}
.sv-head h1 .line{display:flex;align-items:flex-end;gap:.12em;flex-wrap:wrap}
.sv-head .script{font-size:.2em;transform:rotate(-7deg) translateY(-.5em)}
.sv-head-grid{display:grid;grid-template-columns:1fr minmax(300px,.78fr);
gap:clamp(26px,4vw,70px);align-items:end;margin-top:clamp(26px,3.4vw,46px)}
.sv-intro{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--mute-0);max-width:52ch}
.sv-intro b{color:var(--paper);font-weight:600}
.sv-intro + .sv-intro{margin-top:1rem}
.sv-meta{display:grid;gap:14px}
.sv-meta div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding-bottom:12px;border-bottom:1px solid var(--line)}
.sv-meta dt,.sv-meta small{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)}
.sv-meta strong{font-family:var(--f-pixel);font-weight:600;letter-spacing:.03em;
font-size:clamp(1rem,1.5vw,1.25rem);color:var(--paper)}
.sv-b1{width:clamp(130px,16vw,260px);height:clamp(130px,16vw,260px);right:-4%;top:12%;opacity:.1}
.sv-b2{width:clamp(80px,9vw,140px);height:clamp(80px,9vw,140px);left:-2%;bottom:-6%;opacity:.14}
/* ---- the grid ---- */
.sv-sec{position:relative}
.sv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(18px,2.4vw,32px);align-items:start}
/* the offset column — margin, not transform, so it never fights .rv */
.sv-grid > *:nth-child(even){margin-top:clamp(28px,5vw,78px)}
.sv-card{--acc:var(--pink);
position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
gap:clamp(13px,1.5vw,19px);padding:clamp(26px,3.2vw,44px);border-radius:26px;
background:#fff;box-shadow:0 1px 0 rgba(var(--ink-rgb),.07),0 8px 24px rgba(var(--ink-rgb),.04);
color:var(--ink);min-height:clamp(300px,30vw,392px)}
.sv-card:nth-child(even){--acc:var(--sun)}
/* the soft glow, kept behind everything */
.sv-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
background:radial-gradient(118% 88% at 86% 0%,var(--acc) 0%,transparent 64%);
transition:opacity .7s var(--ease)}
/* the ghost number sits behind the card content */
.sv-n{position:absolute;z-index:0;pointer-events:none;user-select:none;
right:clamp(12px,1.6vw,26px);top:clamp(10px,1.3vw,20px);
font-family:var(--f-pixel);font-weight:600;letter-spacing:-.03em;line-height:.8;
font-size:clamp(3.6rem,6.6vw,7rem);color:var(--ink);opacity:.055;
transition:opacity .7s var(--ease),transform .8s var(--ease)}
/* everything the visitor reads sits above it — listed one by one,
because a blanket rule here would unpin the ghost number */
.sv-icon,.sv-card h3,.sv-card p,.sv-go{position:relative;z-index:1}
.sv-icon{width:clamp(46px,4.4vw,58px);height:clamp(46px,4.4vw,58px);border-radius:17px;
display:grid;place-items:center;flex:none;background:var(--ink);color:var(--paper);
transition:transform .65s var(--ease),background .5s var(--ease),color .5s var(--ease)}
.sv-icon svg{width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.sv-card h3{font-family:var(--f-display);text-transform:uppercase;font-weight:400;
font-size:clamp(1.75rem,2.9vw,2.8rem);line-height:.94;letter-spacing:.005em;max-width:18ch;
transition:transform .6s var(--ease),color .5s var(--ease)}
.sv-card p{color:var(--mute-3);font-size:clamp(.94rem,1.1vw,1.02rem);line-height:1.62;max-width:48ch}
/* optional price on a service card — only printed when both the global
switch and that service's own switch are on */
.sv-price{position:relative;z-index:1;display:inline-block;margin-top:14px;
font:600 clamp(15px,1.5vw,18px)/1 var(--f-body);letter-spacing:-.01em;color:var(--ink)}
.sv-card:hover .sv-price{color:var(--ink)}
.sv-go{margin-top:auto;padding-top:clamp(12px,1.6vw,20px);align-self:flex-start;
display:inline-flex;align-items:center;gap:.55rem;
font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sv-go i{display:inline-block;width:0;height:1.5px;background:currentColor;
transition:width .55s var(--ease)}
.sv-go .arr{display:inline-block;transition:transform .5s var(--ease)}
/* the accent line that draws along the base */
.sv-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc);z-index:2;
transform:scaleX(0);transform-origin:0 50%;transition:transform .75s var(--ease)}
/* ---- hover ----
.rv.in sets transform:none, so every hover transform below is
written at .sv-card.rv.in strength to outrank it. */
.sv-card.rv.in:hover,.sv-card.rv.in:focus-visible{transform:translateY(-8px)}
.sv-card:hover,.sv-card:focus-visible{box-shadow:0 1px 0 rgba(var(--ink-rgb),.07),0 28px 62px rgba(var(--ink-rgb),.15)}
.sv-card:hover::before,.sv-card:focus-visible::before{opacity:.17}
.sv-card:hover .sv-n,.sv-card:focus-visible .sv-n{opacity:.1;transform:translateY(7px)}
.sv-card:hover .sv-icon,.sv-card:focus-visible .sv-icon{background:var(--acc);color:var(--ink);
transform:rotate(-8deg) scale(1.07)}
.sv-card:hover h3,.sv-card:focus-visible h3{transform:translateX(5px)}
.sv-card:hover .sv-line,.sv-card:focus-visible .sv-line{transform:scaleX(1)}
.sv-card:hover .sv-go i,.sv-card:focus-visible .sv-go i{width:22px}
.sv-card:hover .sv-go .arr,.sv-card:focus-visible .sv-go .arr{transform:translate(5px,-5px)}
.sv-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* ---- responsive ---- */
@media (max-width:1100px){
.sv-grid > *:nth-child(even){margin-top:0}
}
@media (max-width:900px){
.sv-head-grid{grid-template-columns:1fr}
.sv-intro{max-width:none}
}
@media (max-width:820px){
.sv-grid{grid-template-columns:1fr;gap:16px}
.sv-card{min-height:0}
.sv-card h3{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.sv-card,.sv-icon,.sv-n,.sv-line,.sv-go i,.sv-go .arr,.sv-card h3{transition:none}
.sv-card.rv.in:hover{transform:none}
.sv-card:hover .sv-icon{transform:none}
.sv-card:hover h3{transform:none}
.sv-card:hover .sv-n{transform:none}
}
/* The CTA display size was tuned for "WORK TOGETHER" — two short words.
A full sentence needs its own scale or the last line runs off the page. */
.cta.cta-say h2{font-size:clamp(2.2rem,7.2vw,6.2rem);line-height:.94;letter-spacing:.004em}
.cta.cta-say h2 .script{font-size:.5em;margin-bottom:.18em}
@media (max-width:620px){
.cta.cta-say h2{font-size:clamp(1.9rem,8.4vw,2.6rem)}
}
/* the script accent needs more weight once the headline hits its floor */
@media (max-width:620px){
.sv-head .script{font-size:.34em;transform:rotate(-5deg) translateY(-.18em)}
.sv-head h1{margin-bottom:.1em}
}
/* =========================================================
AWARDS PAGE
---------------------------------------------------------
Everything below is scoped to .aw-* classes and the awards
page only. No existing rule is modified. The poster, tape,
paper grain, burst, blob, .rv reveal, count-up and cursor
are all reused from the blocks above as they stand.
========================================================= */
/* ---- page head ---- */
.aw-head{position:relative;overflow:hidden;
padding:clamp(124px,14vw,190px) 0 clamp(46px,6vw,84px)}
.aw-head h1{font-size:clamp(3.6rem,14vw,12.5rem);line-height:.84;margin:.5rem 0 0}
.aw-head h1 .line{display:flex;align-items:flex-end;gap:.14em;flex-wrap:wrap}
.aw-head .script{font-size:.26em;transform:rotate(-7deg) translateY(-.42em)}
.aw-intro{max-width:46ch;margin-top:clamp(22px,3vw,38px);color:var(--mute-0)}
.aw-b1{width:clamp(120px,15vw,240px);height:clamp(120px,15vw,240px);right:-3%;top:16%;opacity:.1}
.aw-b2{width:clamp(74px,8.5vw,132px);height:clamp(74px,8.5vw,132px);left:-2%;bottom:-5%;opacity:.14}
/* ---- the feature award: Home poster treatment, reused as-is ---- */
.aw-feature{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(28px,5vw,80px);align-items:center;
margin-bottom:clamp(40px,6vw,86px)}
.aw-feature .poster{max-width:460px;width:100%}
.aw-feature-text h3{font-size:clamp(2.1rem,4.4vw,4rem);line-height:.92;margin:.7rem 0 1rem;max-width:18ch}
.aw-feature-text .lead{max-width:48ch}
.aw-feature-text .btn{margin-top:.4rem}
/* the role credit, as a visible tag */
/* display:flex (not inline-flex) + fit-content keeps the tag on its own
line — inline-flex let it ride up beside the eyebrow and cover it */
.aw-role{display:flex;width:fit-content;align-items:center;gap:.5rem;margin-top:.9rem;
padding:.44rem 1rem;border-radius:99px;background:var(--ink);color:var(--paper);
font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.aw-role::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
.aw-meta{display:grid;gap:0;margin:1.6rem 0 1.9rem;max-width:520px}
.aw-meta div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
padding:.68rem 0;border-bottom:1px solid var(--line-dark)}
.aw-meta dt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2b);flex:none}
.aw-meta dd{text-align:right;font-weight:500}
/* ---- the card grid ---- */
/* auto-FILL, not auto-fit: a group holding a single entry keeps a
normal card width instead of stretching across the whole row. */
.aw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
gap:clamp(16px,2.2vw,28px);align-items:stretch}
.aw-results{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
/* these headings carry more words than the ones on Home, so they run at
their own scale rather than the full .sec-title size */
.aw-sec .sec-title{font-size:clamp(2.7rem,6.8vw,6.2rem)}
.aw-card{--acc:var(--pink);
position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
gap:.6rem;padding:clamp(24px,2.8vw,36px);border-radius:24px;color:var(--ink);
background:#fff;box-shadow:0 1px 0 rgba(var(--ink-rgb),.07),0 8px 24px rgba(var(--ink-rgb),.04)}
.aw-card:nth-child(even){--acc:var(--sun)}
/* the soft glow, kept behind the content */
.aw-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
background:radial-gradient(120% 86% at 84% 0%,var(--acc) 0%,transparent 64%);
transition:opacity .7s var(--ease)}
/* on the ink section the cards invert */
.aw-sec:not(.light):not(.sun-block) .aw-card{background:var(--ink-2);color:var(--paper);
box-shadow:0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.3)}
.aw-sec:not(.light):not(.sun-block) .aw-card p{color:var(--mute-1b)}
.aw-sec:not(.light):not(.sun-block) .aw-mark{background:var(--paper);color:var(--ink)}
.aw-mark{width:clamp(42px,3.8vw,50px);height:clamp(42px,3.8vw,50px);border-radius:15px;
display:grid;place-items:center;flex:none;background:var(--ink);color:var(--paper);
margin-bottom:.5rem;
transition:transform .65s var(--ease),background .5s var(--ease),color .5s var(--ease)}
.aw-mark svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.aw-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.aw-chip{display:inline-block;padding:.3rem .7rem;border-radius:99px;
font-family:var(--f-pixel);font-size:.76rem;font-weight:600;letter-spacing:.05em;
box-shadow:inset 0 0 0 1.4px currentColor}
.aw-chip.role{font-family:var(--f-body);letter-spacing:.09em;text-transform:uppercase;
font-size:.68rem;font-weight:700;background:var(--ink);color:var(--paper);box-shadow:none}
.aw-sec:not(.light):not(.sun-block) .aw-chip.role{background:var(--paper);color:var(--ink)}
.aw-card h3{font-family:var(--f-display);text-transform:uppercase;font-weight:400;
font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:.98;letter-spacing:.005em;
margin-top:.2rem;transition:transform .6s var(--ease)}
.aw-org{font-size:.84rem;font-weight:600;color:var(--grey);letter-spacing:.01em}
.aw-card p{font-size:clamp(.92rem,1.08vw,1rem);line-height:1.6;color:var(--mute-3)}
.aw-go{margin-top:auto;padding-top:clamp(12px,1.5vw,18px);
display:inline-flex;align-items:center;gap:.5rem;
font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.aw-go .arr{display:inline-block;transition:transform .5s var(--ease)}
/* ---- results: the count-up is the loudest thing on the card ---- */
.aw-result{background:var(--paper)}
.sun-block .aw-result{background:var(--ink);color:var(--paper)}
.sun-block .aw-result p{color:var(--mute-1b)}
.sun-block .aw-result .aw-org{color:var(--mute-2)}
.aw-flag{align-self:flex-start;padding:.3rem .72rem;border-radius:99px;
background:var(--pink);color:var(--ink);
font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.aw-client{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--sun)}
.aw-figure{font-family:var(--f-display);font-size:clamp(3.4rem,7vw,6rem);line-height:.84;
letter-spacing:.005em;display:block;margin:.3rem 0 -.1rem}
.aw-metric{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--mute-2);margin-bottom:.4rem}
/* ---- the accent line that draws along the base ---- */
.aw-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc);z-index:2;
transform:scaleX(0);transform-origin:0 50%;transition:transform .75s var(--ease)}
/* ---- hover ----
.rv.in sets transform:none, so the lift is written at
.aw-card.rv.in strength to outrank it. */
.aw-card{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.aw-card.rv.in:hover,.aw-card.rv.in:focus-visible{transform:translateY(-7px)}
.aw-card:hover,.aw-card:focus-visible{box-shadow:0 1px 0 rgba(var(--ink-rgb),.07),0 26px 58px rgba(var(--ink-rgb),.15)}
.aw-sec:not(.light):not(.sun-block) .aw-card:hover{box-shadow:0 1px 0 rgba(255,255,255,.05),0 26px 58px rgba(0,0,0,.44)}
.aw-card:hover::before,.aw-card:focus-visible::before{opacity:.18}
.aw-card:hover .aw-line,.aw-card:focus-visible .aw-line{transform:scaleX(1)}
.aw-card:hover .aw-mark,.aw-card:focus-visible .aw-mark{background:var(--acc);color:var(--ink);
transform:rotate(-8deg) scale(1.07)}
.aw-card:hover h3,.aw-card:focus-visible h3{transform:translateX(4px)}
.aw-card:hover .aw-go .arr,.aw-card:focus-visible .aw-go .arr{transform:translate(5px,-5px)}
.aw-card:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* the default .btn is paper-coloured, which disappears on a Paper
section — same inversion the Home award section uses */
.aw-sec.light .btn{background:var(--ink);color:var(--paper)}
.aw-sec.light .btn::before{background:var(--pink)}
.aw-sec.light .btn:hover{color:var(--ink)}
.aw-foot{margin-top:clamp(26px,3.4vw,44px);font-size:.95rem;color:rgba(var(--ink-rgb),.66)}
.aw-foot a{font-weight:700;border-bottom:2px solid currentColor}
/* ---- responsive ---- */
@media (max-width:980px){
.aw-feature{grid-template-columns:1fr;gap:clamp(26px,5vw,44px)}
.aw-feature .poster{max-width:340px}
.aw-meta{max-width:none}
}
@media (max-width:640px){
.aw-grid,.aw-results{grid-template-columns:1fr}
.aw-feature .poster{max-width:none}
.aw-meta div{flex-direction:column;align-items:flex-start;gap:4px}
.aw-meta dd{text-align:left}
.aw-head .script{font-size:.4em;transform:rotate(-5deg) translateY(-.16em)}
}
@media (prefers-reduced-motion:reduce){
.aw-card,.aw-mark,.aw-line,.aw-go .arr,.aw-card h3{transition:none}
.aw-card.rv.in:hover{transform:none}
.aw-card:hover .aw-mark{transform:none}
.aw-card:hover h3{transform:none}
}
/* ---- nav: six items instead of five ----
Measured at every width where the desktop menu is shown: it stays on
one line, using 894px of 1024 at the tightest point before the burger
takes over. The margin there is thin though, so the pill padding eases
off just above the breakpoint. This is an additive media query — the
base .menu rules are untouched. */
@media (min-width:1025px) and (max-width:1140px){
.menu{gap:2px}
.menu a{padding-left:.78rem;padding-right:.78rem}
}
/* =========================================================
CONTACT PAGE
---------------------------------------------------------
Scoped to .ct-* and .fld-* classes and this page only. No
existing rule is modified. The preloader, nav, footer, blob
and burst backgrounds, .rv reveals, custom cursor and the
pink fill-sweep .btn are all reused from above as they are.
========================================================= */
/* ---- page head ---- */
.ct-head{position:relative;overflow:hidden;
padding:clamp(124px,14vw,186px) 0 clamp(30px,4vw,54px)}
.ct-head h1{font-size:clamp(3.4rem,13vw,11.5rem);line-height:.84;margin:.5rem 0 0}
.ct-head h1 .line{display:flex;align-items:flex-end;gap:.1em;flex-wrap:wrap}
.ct-head .script{font-size:.3em;transform:rotate(-7deg) translateY(-.36em)}
.ct-intro{max-width:52ch;margin-top:clamp(22px,3vw,36px);color:var(--mute-0)}
.ct-b1{width:clamp(120px,15vw,230px);height:clamp(120px,15vw,230px);right:-3%;top:18%;opacity:.1}
.ct-b2{width:clamp(70px,8vw,124px);height:clamp(70px,8vw,124px);left:-2%;bottom:-6%;opacity:.14}
/* ---- the two columns ---- */
.ct-main{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(80px,12vw,160px)}
.ct-grid{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
gap:clamp(34px,5vw,84px);align-items:start}
/* ---- left: direct details ---- */
.ct-block{padding-bottom:clamp(20px,2.4vw,30px);margin-bottom:clamp(20px,2.4vw,30px);
border-bottom:1px solid var(--line)}
.ct-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ct-label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--mute-2);font-weight:600;margin-bottom:.6rem}
.ct-email{display:inline-block;font-size:clamp(1.02rem,1.5vw,1.3rem);font-weight:600;
letter-spacing:-.01em;border-bottom:2px solid var(--pink);padding-bottom:2px;
transition:color .4s var(--ease)}
.ct-email:hover{color:var(--pink)}
.ct-text{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--paper);line-height:1.5}
/* click to copy */
.ct-copy{display:inline-flex;align-items:center;gap:.45rem;margin-left:.7rem;
padding:.36rem .76rem;border-radius:99px;vertical-align:middle;
font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--mute-0c);box-shadow:inset 0 0 0 1.4px var(--line);
transition:color .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
.ct-copy svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.ct-copy:hover,.ct-copy:focus-visible{color:var(--ink);background:var(--paper);
box-shadow:inset 0 0 0 1.4px var(--paper)}
.ct-copy.copied{color:var(--ink);background:var(--sun);box-shadow:inset 0 0 0 1.4px var(--sun)}
.ct-ask{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;
font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}
.ct-ask .arr{display:inline-block;transition:transform .45s var(--ease)}
.ct-ask:hover .arr{transform:translate(4px,-4px)}
/* ---- social icons ---- */
.ct-social{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;margin-top:.3rem}
.ct-social a{display:flex;align-items:center;gap:.7rem;padding:.72rem .8rem;border-radius:16px;
box-shadow:inset 0 0 0 1px var(--line);
transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.ct-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
background:rgba(255,255,255,.07);color:var(--paper);
transition:background .45s var(--ease),color .45s var(--ease),transform .55s var(--ease)}
.ct-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.ct-net{font-size:.84rem;font-weight:600;letter-spacing:.01em}
.ct-social a:hover,.ct-social a:focus-visible{transform:translateY(-3px);
background:rgba(255,255,255,.05);
box-shadow:inset 0 0 0 1px rgba(var(--pink-rgb),.5),0 14px 30px rgba(var(--pink-rgb),.14)}
.ct-social a:hover .ct-ico,.ct-social a:focus-visible .ct-ico{background:var(--pink);color:var(--ink);
transform:rotate(-7deg) scale(1.06)}
.ct-social a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
/* ---- right: the form card ---- */
.ct-form{background:var(--ink-2);border-radius:28px;
padding:clamp(26px,3.4vw,48px);box-shadow:0 1px 0 rgba(255,255,255,.05),0 20px 50px rgba(0,0,0,.3)}
.ct-form-title{font-size:clamp(2.2rem,4vw,3.4rem);line-height:.92;margin-bottom:clamp(20px,2.6vw,32px)}
/* the honeypot: out of sight, out of the tab order, ignored by readers */
.ct-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fld{position:relative;margin-bottom:clamp(16px,2vw,24px)}
.fld label{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
font-weight:700;color:var(--mute-2);margin-bottom:.5rem;
transition:color .4s var(--ease),transform .45s var(--ease);transform-origin:0 50%}
.fld input,.fld select,.fld textarea{
width:100%;font-family:var(--f-body);
/* 16px floor: anything smaller makes iOS Safari zoom on focus */
font-size:16px;line-height:1.5;color:var(--paper);
background:rgba(255,255,255,.04);border:0;border-radius:14px;
padding:.92rem 1.05rem;outline:0;
box-shadow:inset 0 0 0 1.4px var(--line);
transition:box-shadow .45s var(--ease),background .45s var(--ease)}
.fld textarea{resize:vertical;min-height:132px}
.fld input::placeholder,.fld textarea::placeholder{color:#6f6f6f}
/* The accent line that draws under a focused field.
It sits in normal flow directly after the input and is pulled up 2px
so it rides the bottom edge, inside the rounded corner. Doing it this
way means one rule covers input, select and textarea alike — an
absolutely positioned line needs different offsets for each. */
.fld-line{display:block;height:2px;border-radius:2px;margin:-2px 14px 0;
background:var(--pink);transform:scaleX(0);transform-origin:0 50%;
transition:transform .55s var(--ease);pointer-events:none}
/* focus: soft pink glow, the label brightens and lifts, the line draws */
.fld input:focus,.fld select:focus,.fld textarea:focus,
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
background:rgba(255,255,255,.07);
box-shadow:inset 0 0 0 1.6px var(--pink),0 0 0 4px rgba(var(--pink-rgb),.16),
0 14px 34px rgba(var(--pink-rgb),.12)}
.fld:focus-within label{color:var(--pink);transform:translateY(-2px)}
.fld:focus-within .fld-line{transform:scaleX(1)}
/* valid / invalid */
.fld.good input,.fld.good select,.fld.good textarea{box-shadow:inset 0 0 0 1.4px rgba(var(--sun-rgb),.5)}
.fld.good:focus-within input,.fld.good:focus-within select,.fld.good:focus-within textarea{
box-shadow:inset 0 0 0 1.6px var(--pink),0 0 0 4px rgba(var(--pink-rgb),.16)}
.fld.bad input,.fld.bad select,.fld.bad textarea{box-shadow:inset 0 0 0 1.6px #ff6b6b}
.fld.bad label{color:#ff9b9b}
.fld.bad .fld-line{background:#ff6b6b}
.fld-err{min-height:0;font-size:.82rem;line-height:1.45;color:#ff9b9b;margin-top:.42rem}
.fld-err:empty{margin-top:0}
/* the select, styled to match rather than left to the browser */
.fld-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
padding-right:2.6rem;cursor:pointer}
.fld-select select option{background:var(--ink-2);color:var(--paper)}
.fld-caret{position:absolute;right:1.05rem;top:2.44rem;pointer-events:none;
color:var(--mute-2);font-size:.9rem;transition:color .4s var(--ease),transform .4s var(--ease)}
.fld-select:focus-within .fld-caret{color:var(--pink);transform:translateY(2px)}
/* ---- send button + status ---- */
.ct-send{margin-top:.4rem;width:100%;justify-content:center}
.ct-send[disabled]{opacity:.65;cursor:progress}
.ct-send.loading .arr{opacity:.4}
.ct-status{margin-top:1.1rem;padding:0;border-radius:16px;
font-size:.9rem;line-height:1.5;opacity:0;max-height:0;overflow:hidden;
transition:opacity .5s var(--ease)}
.ct-status.in{opacity:1;max-height:none;padding:.95rem 1.1rem}
.ct-status strong{display:block;font-size:.95rem;margin-bottom:.2rem}
.ct-status span{display:block;color:var(--mute-0d)}
.ct-status a,.ct-link{color:inherit;font-weight:700;border-bottom:1.5px solid currentColor}
.ct-link{font:inherit;padding:0;cursor:pointer}
.ct-status.good{background:rgba(var(--sun-rgb),.12);box-shadow:inset 0 0 0 1.4px rgba(var(--sun-rgb),.45)}
.ct-status.good strong{color:var(--sun)}
.ct-status.info{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.4px var(--line)}
.ct-status.bad{background:rgba(255,107,107,.1);box-shadow:inset 0 0 0 1.4px rgba(255,107,107,.45)}
.ct-status.bad strong{color:#ff9b9b}
.ct-note{margin-top:1.1rem;font-size:.82rem;line-height:1.55;color:var(--mute-2c)}
.ct-note a{color:var(--mute-0c);border-bottom:1px solid currentColor}
.ct-note a:hover{color:var(--pink)}
/* ---- responsive ---- */
@media (max-width:960px){
.ct-grid{grid-template-columns:1fr;gap:clamp(30px,5vw,46px)}
.ct-social{grid-template-columns:repeat(4,minmax(0,1fr))}
.ct-social a{flex-direction:column;text-align:center;gap:.5rem;padding:.9rem .4rem}
}
@media (max-width:560px){
.ct-social{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-copy{margin-left:0;margin-top:.6rem}
.ct-head .script{font-size:.42em;transform:rotate(-5deg) translateY(-.14em)}
}
@media (prefers-reduced-motion:reduce){
.fld input,.fld select,.fld textarea,.fld label,.fld-line,.fld-caret,
.ct-social a,.ct-ico,.ct-copy,.ct-ask .arr{transition:none}
.ct-social a:hover,.ct-social a:focus-visible{transform:none}
.ct-social a:hover .ct-ico,.ct-social a:focus-visible .ct-ico{transform:none}
.fld:focus-within label{transform:none}
}
/* =========================================================
BUILD 22 — FIXES: ARROWS, THE STAR, THE BANNER
========================================================= */
/* ---- 1. the hand-drawn arrows pointed the wrong way ----
The arrow art runs from its top-left down to an arrowhead at its
bottom-right, so by default it points DOWN-RIGHT. scaleX(-1) mirrors
it to point DOWN-LEFT. Which one each note needs depends on where it
sits relative to the thing it is pointing at — and both were wrong. */
/* The hero note sits to the LEFT of the showreel, so it must point
down-RIGHT. It was mirrored, aiming back into the headline. */
.hero-note .arrow{transform:none}
/* The work note was absolutely positioned with right:0 against the
nearest positioned ancestor — which was not the content column, so it
ran past the gutter and its text was clipped at the window edge. It
also sat on top of the ghost "01" and pointed off the page.
It now sits in normal flow, right-aligned, directly above the card it
refers to, and points down-LEFT into it. In flow it can't collide with
the heading or escape the column at any width. */
.work-wrap{position:relative}
.work-note{position:static;display:block;width:fit-content;
margin:0 0 -4px auto;text-align:right;max-width:none}
.work-note .arrow{margin-left:auto;transform:scaleX(-1)}
/* ---- 2. the star in the Results section ----
What was there: a frame from Nanu Aur Mein — a short film — inside the
section about campaign numbers, drawn from YouTube's padded 4:3
thumbnail whose black bars cut straight across the star.
Pointing it at the right campaign and asking for a bar-free frame
fixed the bars but not the real problem: a ten-point star takes its
spikes from the corners of the frame, which in almost any video still
are background. However it is cropped, it reads as a fragment.
So the star stops being a window onto a photo and becomes what it was
always behaving like — a badge. Same shape, same palette, carrying the
figure the section is actually about, legible at any size. */
.burst-badge{display:grid;place-content:center;text-align:center;flex:none;
width:clamp(132px,15vw,210px);aspect-ratio:1;
-webkit-clip-path:var(--burst);clip-path:var(--burst);
background:var(--sun);color:var(--ink);
transform:rotate(-8deg) scale(.86);opacity:0;
transition:transform 1.1s var(--ease),opacity .9s var(--ease)}
.burst-badge.in{transform:rotate(-8deg) scale(1);opacity:1}
.burst-badge:hover{transform:rotate(0) scale(1.05)}
/* A ten-point star's usable middle is only about 40% of its width, so
the text is sized against that, not against the badge. Set for the
fallback font too — Bebas is narrower, so it has room to spare. */
.burst-badge > *{max-width:88px;margin-inline:auto}
.burst-badge b{display:block;font-family:var(--f-display);font-weight:400;
font-size:clamp(1.05rem,1.7vw,1.6rem);line-height:.92;letter-spacing:0;
white-space:nowrap}
.burst-badge i{display:block;font-style:normal;font-size:.46rem;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;margin-top:.2rem;opacity:.74;
white-space:nowrap}
.results-sec .burst-badge{position:relative;z-index:2;align-self:center}
@media (max-width:860px){ .results-sec .burst-badge{display:none} }
@media (prefers-reduced-motion:reduce){
.burst-badge{transition:none}
.burst-badge:hover{transform:rotate(-8deg) scale(1)}
}
/* ---- 3. the banner ---- */
/* 4.7M+ is the strongest thing on the page and was set in the same
plain white as the words around it */
.hero-figure{font-weight:inherit;font-family:inherit;color:var(--sun);
position:relative;display:inline-block;
text-shadow:0 0 38px rgba(var(--sun-rgb),.28)}
.hero-figure::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:.055em;
background:var(--sun);opacity:.32;transform:scaleX(0);transform-origin:0 50%;
transition:transform 1.1s var(--ease) .5s}
.mask.in .hero-figure::after,.rv.in .hero-figure::after{transform:scaleX(1)}
/* the hero was lit from one corner only */
.hero .blob.b{width:34vw;height:34vw;left:-14vw;bottom:-14vw;
background:var(--sun);opacity:.07;filter:blur(110px)}
/* a quiet cue that there is more below */
.hero-scroll{display:inline-flex;align-items:center;gap:.6rem;margin-top:clamp(18px,2.4vw,30px);
font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2c)}
.hero-scroll i{display:block;width:46px;height:1px;background:currentColor;position:relative;
overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--pink);
transform:translateX(-100%);animation:scrollcue 2.6s var(--ease) infinite}
@keyframes scrollcue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* the credit row fell below the fold on shorter laptops */
@media (min-width:961px) and (max-height:820px){
.hero{padding-top:clamp(104px,11vw,126px)}
.hero-main{margin-top:clamp(18px,2.6vw,32px)}
.hero-credit{margin-top:clamp(20px,3vw,34px);padding-top:clamp(14px,2vw,22px)}
}
/* ---- 4. the cut-out no longer floats ----
The matte itself was repaired in the image file; this just gives the
figure something to stand on so it reads as placed, not pasted. */
.portrait::after{content:"";position:absolute;left:50%;bottom:1%;z-index:-1;
width:66%;height:30px;transform:translateX(-50%);
background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,transparent 70%);
filter:blur(9px);opacity:0;transition:opacity 1s var(--ease) .3s;pointer-events:none}
.portrait.rv.in::after,.portrait.in::after{opacity:.75}
@media (max-width:860px){
.work-note{margin:0 0 10px;text-align:left;width:auto}
.hero-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
.hero-scroll i::after{animation:none;transform:translateX(-100%)}
.hero-figure::after{transition:none;transform:scaleX(1)}
}
/* =========================================================
BUILD 23 — NAUNEHAL
The Home band, plus the Portfolio support for an entry that
has no video. Scoped to .nau-*, .lb-showcase and .play.open;
no existing rule is changed.
========================================================= */
/* ---- Home: the magazine band ---- */
/* the cover is a portrait magazine, so it takes less width than the text */
.nau{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
gap:clamp(26px,4vw,64px);align-items:center}
.nau-cover{position:relative;display:block;border-radius:14px;overflow:visible;
width:100%;max-width:330px;justify-self:center;
transform:rotate(-1.6deg);
transition:transform .7s var(--ease)}
.nau-cover img{display:block;width:100%;height:auto;border-radius:14px;
box-shadow:0 24px 54px rgba(0,0,0,.5);
transition:box-shadow .7s var(--ease)}
.nau-cover:hover{transform:rotate(0)}
.nau-cover:hover img{box-shadow:0 32px 70px rgba(var(--ink-rgb),.3)}
.nau-cover:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* the same tape the posters and note cards use */
.nau-tape{position:absolute;z-index:3;height:26px;width:clamp(84px,9vw,118px);
top:-12px;left:12%;transform:rotate(-5deg);
box-shadow:0 3px 8px rgba(0,0,0,.2);pointer-events:none;
background:repeating-linear-gradient(135deg,rgba(var(--pink-rgb),.9) 0 7px,rgba(var(--pink-rgb),.62) 7px 14px)}
.nau-text h2{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:.94;margin:.7rem 0 1rem}
.nau-text p{color:var(--mute-0d);font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.62;max-width:54ch}
.nau-text p + p{margin-top:.8rem}
.nau-foot{display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;
margin-top:clamp(18px,2.4vw,28px)}
.nau-since{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--mute-2)}
/* one rule, not two — the second was overriding the first and painting
the year Ink on an Ink background, so "Est." showed with no year */
.nau-since b{font-family:var(--f-pixel);font-size:1.15rem;letter-spacing:.04em;color:var(--paper)}
@media (max-width:860px){
.nau{grid-template-columns:1fr;gap:clamp(22px,5vw,34px)}
.nau-cover{max-width:280px;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
.nau-cover{transition:none;transform:rotate(-1.6deg)}
.nau-cover:hover{transform:rotate(-1.6deg)}
}
/* ---- Portfolio: an entry with no video ----
The card mark is a page, not a play triangle, and the lightbox shows
the cover and the write-up instead of a player. */
.play.open svg{fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.lb-showcase .lb-fb-inner{max-width:62ch}
/* The band sits on Ink. It was on Sun until Nanu Aur Mein moved above it
and put two gold sections back to back — the magazine cover carries the
warmth on its own, so the section behind it doesn't need to. */
.nau-role{display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;
padding:.4rem .9rem;border-radius:99px;background:var(--paper);color:var(--ink);
font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nau-role::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink)}
.nau-read{display:inline-flex;align-items:center;gap:.45rem;
font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--paper);border-bottom:2px solid rgba(var(--paper-rgb),.32);padding-bottom:2px;
transition:border-color .4s var(--ease)}
.nau-read:hover{border-color:var(--paper)}
.nau-read .arr{display:inline-block;transition:transform .45s var(--ease)}
.nau-read:hover .arr{transform:translate(4px,-4px)}
.nau-cover:focus-visible{outline-color:var(--pink)}
/* an entry can carry a second destination alongside the video */
.lb-foot{flex-wrap:wrap;gap:.6rem 1.2rem}
.lb-extra{color:var(--sun)}
/* a credit on a portfolio card, when the entry records one */
.prole{display:inline-block;margin:.3rem 0 .1rem;padding:.26rem .62rem;border-radius:99px;
background:var(--ink);color:var(--paper);
font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
/* A one-line heading leaves the lead sitting right where the ghost number
is, so on the Awards gold sections the number steps back further. */
.aw-sec.sun-block .sec-num{opacity:.06}
/* =========================================================
BUILD 25 — real artwork on the Awards page
========================================================= */
/* the feature award, when the entry has real poster art */
.aw-art{position:relative;align-self:center;justify-self:center;
width:100%;max-width:430px;transform:rotate(-2deg);
transition:transform .8s var(--ease)}
.aw-art img{display:block;width:100%;height:auto;border-radius:16px;
box-shadow:0 30px 70px rgba(0,0,0,.3);
transition:box-shadow .8s var(--ease)}
.aw-art:hover{transform:rotate(0)}
.aw-art:hover img{box-shadow:0 38px 86px rgba(0,0,0,.38)}
.aw-art .poster-tape{top:-13px;left:11%}
.aw-art-flag{position:absolute;right:-10px;bottom:16px;z-index:4;
padding:.46rem 1rem;border-radius:99px;background:var(--sun);color:var(--ink);
font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
box-shadow:0 10px 24px rgba(0,0,0,.25);transform:rotate(-3deg)}
/* .rv sets transform:none on reveal, so the tilt is restated at higher weight */
.aw-art.rv.in{transform:rotate(-2deg)}
.aw-art.rv.in:hover{transform:rotate(0)}
.aw-credits{margin-top:-.6rem;margin-bottom:1.4rem;
font-size:.82rem;line-height:1.5;color:var(--mute-2b)}
/* artwork on a plain card — milestones and reach */
.aw-shot{display:block;margin:-.4rem 0 .9rem;border-radius:14px;overflow:hidden;
box-shadow:0 14px 34px rgba(var(--ink-rgb),.18)}
.aw-shot img{display:block;width:100%;height:auto;
transition:transform 1s var(--ease)}
.aw-card:hover .aw-shot img{transform:scale(1.03)}
@media (max-width:980px){ .aw-art{max-width:320px} }
@media (prefers-reduced-motion:reduce){
.aw-art,.aw-art img,.aw-shot img{transition:none}
.aw-art.rv.in:hover{transform:rotate(-2deg)}
.aw-card:hover .aw-shot img{transform:none}
}
/* the Naunehal milestone carries its cover, so that card lays out as a row */
.tl-card.has-shot{display:grid;grid-template-columns:96px minmax(0,1fr);
gap:clamp(14px,2vw,22px);align-items:start}
.tl-shot{display:block;grid-row:1 / span 3;border-radius:10px;overflow:hidden;
box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .6s var(--ease)}
.tl-shot img{display:block;width:100%;height:auto}
.tl-shot:hover{transform:translateY(-3px) rotate(-1.5deg)}
.tl-shot:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
@media (max-width:560px){
.tl-card.has-shot{grid-template-columns:1fr}
.tl-shot{grid-row:auto;max-width:150px}
}
@media (prefers-reduced-motion:reduce){
.tl-shot{transition:none}
.tl-shot:hover{transform:none}
}
/* the Home award feature uses the same real-artwork treatment as Awards */
.nanu-sec .aw-art{max-width:400px}
.nanu-sec .aw-art img{box-shadow:0 30px 70px rgba(var(--ink-rgb),.26)}
.nanu-sec .aw-art:hover img{box-shadow:0 38px 86px rgba(var(--ink-rgb),.34)}
/* An awards card with artwork spans the row and sits side by side, so a
portrait cover doesn't turn one card into a very tall column with a
field of empty colour beside it. */
@media (min-width:880px){
.aw-card.has-shot{grid-column:1 / -1;
display:grid;grid-template-columns:clamp(180px,17vw,236px) minmax(0,1fr);
gap:clamp(22px,3vw,40px);align-items:start;align-content:start}
/* keep the cover's own proportions — stretching it to the card height
crops the masthead off the sides of a portrait magazine */
.aw-card.has-shot .aw-shot{grid-row:1 / span 7;margin:0;align-self:start}
.aw-card.has-shot .aw-shot img{height:auto;width:100%}
.aw-card.has-shot .aw-mark{margin-bottom:.2rem}
.aw-card.has-shot .aw-go{margin-top:.8rem}
}
/* ---- the film section, built around the wide key art ----
A 2.6:1 banner cannot sit in a half-width column without becoming a
letterbox strip, so it runs full width and the detail sits beneath. */
.nanu-banner{position:relative;display:block;border-radius:18px;
margin-bottom:clamp(28px,4vw,52px);transform:rotate(-.8deg);
transition:transform .8s var(--ease)}
.nanu-banner img{display:block;width:100%;height:auto;border-radius:18px;
box-shadow:0 30px 70px rgba(var(--ink-rgb),.24);transition:box-shadow .8s var(--ease)}
.nanu-banner:hover{transform:rotate(0)}
.nanu-banner:hover img{box-shadow:0 38px 86px rgba(var(--ink-rgb),.32)}
.nanu-banner.rv.in{transform:rotate(-.8deg)}
.nanu-banner.rv.in:hover{transform:rotate(0)}
.nanu-banner .poster-tape{top:-13px;left:8%}
.nanu-banner .aw-art-flag{right:clamp(14px,3vw,38px);bottom:-14px}
.nanu-banner:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.nanu-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(26px,4vw,70px);align-items:start}
.nanu-body h2{font-size:clamp(2.4rem,6vw,5.2rem);margin:.8rem 0 1.1rem}
.nanu-body .lead{max-width:46ch}
.nanu-body .btn{margin-top:1.4rem}
.nanu-body dl{display:grid;grid-template-columns:auto 1fr;gap:.65rem 1.6rem;
font-size:.98rem;margin:0}
.nanu-body dt{color:var(--mute-2b);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
padding-top:.18rem}
.nanu-body dd{color:var(--ink);font-weight:500}
@media (max-width:860px){
.nanu-body{grid-template-columns:1fr;gap:clamp(22px,5vw,34px)}
.nanu-banner .aw-art-flag{bottom:-12px;right:12px}
}
@media (prefers-reduced-motion:reduce){
.nanu-banner,.nanu-banner img{transition:none}
.nanu-banner.rv.in:hover{transform:rotate(-.8deg)}
}
/* The Naunehal milestone card is a grid, which stretched the "First · 2020"
pill across the whole text column. A grid item fills its track unless it
is told not to — inline-block alone doesn't stop that. */
.tl-card.has-shot .tl-flag{justify-self:start;width:fit-content}
.tl-card.has-shot h3,.tl-card.has-shot p{grid-column:2}
/* ---- the bilingual issue, shown as both covers ---- */
.nau-stack{position:relative;display:block;padding-left:16%}
.nau-stack img{display:block;border-radius:12px;
box-shadow:0 22px 50px rgba(0,0,0,.55)}
.nau-stack .nau-ur{position:absolute;left:0;top:4%;width:84%;
transform:rotate(-6deg);transform-origin:50% 50%}
.nau-stack .nau-en{position:relative;width:84%;margin-left:auto;
transform:rotate(3deg);transform-origin:50% 50%}
.nau-cover{max-width:380px}
.nau-cover .nau-tape{left:30%}
/* an awards card whose artwork is landscape puts it full width on top
instead of squeezing it into the narrow portrait column */
@media (min-width:880px){
.aw-card.has-shot.wide-shot{grid-template-columns:minmax(0,1fr)}
.aw-card.has-shot.wide-shot .aw-shot{grid-row:auto;margin:0 0 .4rem}
}
@media (max-width:860px){ .nau-cover{max-width:320px} }
@media (prefers-reduced-motion:reduce){
.nau-stack .nau-ur,.nau-stack .nau-en{transition:none}
}
/* The two smallest labels on the site sat at .62rem — about 10px, which
is hard going on a phone. They now grow a little on small screens and
settle back to the designed size on anything wider, so the look is
unchanged on desktop. */
@media (max-width:640px){
.tl-flag,.prole{font-size:.70rem}
}