*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#F8F8F8;--ink:#000;--dark:#111;--card:#222;--grey:#A0A0A0;--hl:#fbf0b2;--cur:#333333;--ease:cubic-bezier(.25,1,.5,1)}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){body,a{cursor:none}}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;padding:22px 32px;font-size:14px;font-weight:500;mix-blend-mode:difference;color:#fff}
.nav nav a{margin-left:24px;opacity:.8}.nav nav a:hover{opacity:1}
.overline{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:20px}
.overline.light{color:#777}
.stage{position:relative;height:100vh;overflow:hidden}
.hero{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6vw;text-align:center}
.hero-text{font-size:clamp(29px,4.3vw,62px);font-weight:500;letter-spacing:-.03em;line-height:1.12;max-width:1080px}
.fly{display:inline-block;width:1.5em;height:.95em;border-radius:.28em;vertical-align:-.1em;margin:0 .04em;will-change:transform;position:relative;z-index:5}
.hero-sub{position:absolute;bottom:32px;font-size:13px;color:var(--grey);letter-spacing:.1em;text-transform:uppercase}
.g1{background:linear-gradient(135deg,#ffb5a7,#f7c873)}.g2{background:linear-gradient(135deg,#a7c7ff,#c3a7ff)}
.g3{background:linear-gradient(135deg,#9be7c4,#57c2d6)}.g4{background:linear-gradient(135deg,#fbf0b2,#ffb86b)}
.g5{background:linear-gradient(135deg,#f7a7d8,#9b8cff)}
.strip{position:absolute;left:24px;right:24px;bottom:24px;height:calc(100vh - 120px);background:var(--dark);border-radius:28px;padding:40px;display:flex;flex-direction:column;justify-content:flex-end;transform:translateY(110%)}
.strip-head{display:flex;justify-content:space-between;margin-bottom:auto}
.strip-row{display:flex;gap:16px}
.slot{flex:1;aspect-ratio:1;border-radius:22px;position:relative;display:flex;align-items:flex-end;padding:16px;color:#fff;font-size:14px}
.slot span{position:relative;z-index:6;opacity:0;transition:opacity .4s}
.stage.done .slot span{opacity:1}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;padding:140px 32px 80px;align-items:start}
.split-left{position:sticky;top:120px}
h2{font-size:clamp(32px,4vw,51px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin-bottom:24px}
.muted,.lead{color:#555;font-size:18px;line-height:1.5;max-width:560px}
.hl{position:relative;display:inline-block;padding:0 .12em}
.hl-bg{position:absolute;inset:.08em -.04em .02em;background:var(--hl);border-radius:999px;z-index:0}
.hl-t{position:relative;z-index:1}
.split-right{background:var(--dark);border-radius:28px;padding:20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:var(--card);border-radius:18px;padding:14px;color:#fff;border:1px solid transparent;transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.card:hover{background:#2c2c2c;border-color:rgba(255,255,255,.14);transform:translateY(-3px)}
.cover{aspect-ratio:1;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(0,0,0,.45);margin-bottom:14px}
.card h3{font-size:16px;font-weight:500}.card p{font-size:13px;color:var(--grey);margin-top:4px}
.sec{padding:120px 32px;max-width:1280px;margin:0 auto}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.steps>div{background:#fff;border-radius:18px;padding:24px;border:1px solid #eee}
.cols3 b,.steps b{font-size:13px;color:var(--grey);font-weight:500}
.cols3 p,.steps p{color:#444;line-height:1.55;margin-top:10px;font-size:15px}
.steps h3{font-size:20px;font-weight:500;margin-top:16px}
.contact{margin:0 24px;background:var(--dark);color:#fff;border-radius:28px;padding:100px 48px;text-align:center}
.contact p{color:#aaa;font-size:18px;margin-bottom:36px}
.btn{display:inline-block;background:#fff;color:#000;padding:16px 28px;border-radius:999px;font-weight:500}
.foot{display:flex;justify-content:space-between;padding:32px;font-size:13px;color:var(--grey)}
.cursor{position:fixed;top:0;left:0;z-index:999;pointer-events:none;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:999px;background:var(--cur);display:flex;align-items:center;justify-content:center;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .4s var(--ease),opacity .3s;opacity:0}
.cursor span{color:#fff;font-size:12px;font-weight:500;opacity:0;transition:opacity .25s}
.cursor.on{opacity:1}
.cursor.view{width:72px;height:34px;margin:-17px 0 0 -36px;background:#000}
.cursor.view span{opacity:1;transition-delay:.1s}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (max-width:820px){
 .stage{height:auto;overflow:visible}.hero{height:auto;min-height:90vh;padding-top:100px}
 .hero-sub{display:none}
 .strip{position:relative;transform:none;left:auto;right:auto;bottom:auto;height:auto;margin:0 16px;padding:24px}
 .strip-row{overflow-x:auto;margin-top:40px}.slot{flex:0 0 60%}
 .split{grid-template-columns:1fr;padding:80px 16px}.split-left{position:static}
 .cols3,.steps{grid-template-columns:1fr}.sec{padding:80px 16px}.contact{margin:0 16px;padding:64px 24px}
 .nav nav{display:none}
}
/* v2.1 hero tiles: square so they scale uniformly into the strip */
.fly{width:1em;height:1em;vertical-align:-.15em;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.fly img{display:block}
.fly.photo{background:linear-gradient(135deg,#ffb5a7,#f7c873)}
.fly.photo em{font-style:normal;font-size:.13em;letter-spacing:0;color:rgba(0,0,0,.55);text-align:center;line-height:1.1}
.fly.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fly.logo{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fly.logo img{width:80%;height:80%;object-fit:contain}

/* Even hero spacing */
.hero-text{line-height:1.18}
.fly,.fly.photo,.fly.logo{width:.9em;height:.9em;vertical-align:middle;position:relative;top:-.06em;margin:0 .1em;line-height:1}
.fly.photo em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.nav{box-sizing:border-box;width:100%}

/* Pop of colour behind logos */
.fly.logo{box-shadow:none}
.fly.c-monday{background:#ffd84d}
.fly.c-shopify{background:#c6f1a8}
.fly.c-depop{background:#ffc2d1}
.fly.c-monday{background:#e3dcff}

/* Tile colours from badge palette */
.fly.c-monday{background:#5e8cf0}
.fly.c-shopify{background:#efcb5e}
.fly.c-depop{background:#f095b1}
.fly.photo{background:#967cef}

/* Round tiles */
.fly,.fly.photo,.fly.logo{border-radius:50%}

/* Depop: logo fills the circle */
.fly.c-depop{background:transparent}
.fly.c-depop img{width:100%;height:100%}

/* Shopify: logo fills the circle */
.fly.c-shopify{background:transparent}
.fly.c-shopify img{width:100%;height:100%}

/* Monday: logo fills the circle */
.fly.c-monday{background:transparent}
.fly.c-monday img{width:100%;height:100%}

/* Real photo: pop-out cutout */
.fly.photo{background:transparent;overflow:visible;border-radius:0}
.fly.photo img{position:static;width:100%;height:100%;object-fit:contain}
.fly.photo img{width:0.9em;height:auto;max-width:none;object-fit:initial;position:relative;bottom:0.07em}
.fly.photo{width:0.9em;height:0.9em;overflow:visible;position:relative}
.fly.photo img{position:absolute;left:0;bottom:0;width:0.9em;height:1.029em;max-width:none;object-fit:fill}
.fly.photo{border-radius:50%;overflow:hidden}
.fly.photo img{position:static;width:100%;height:100%;object-fit:cover}

/* Strip fully covers hero text; logos ride on top */
.strip{z-index:3;background:#111;opacity:1}
.hero,.hero-text{position:static}
.fly{z-index:6}

/* Dark section = intro */
.intro{display:flex;flex-direction:column;gap:40px;color:#fff}
.intro-text{font-size:clamp(26px,3.4vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1.15;max-width:900px;margin:0}
.intro-brands{display:flex;flex-direction:column;gap:18px}
.intro-label{font-size:15px;color:rgba(255,255,255,.6)}
.strip-row{gap:14px}
.slot{flex:0 0 auto;width:84px;height:84px;aspect-ratio:auto;border-radius:50%;padding:0}

/* Smaller intro box */
@media (min-width:821px){.strip{height:auto;min-height:0;padding:40px 48px;left:24px;right:24px;bottom:50%;transform-origin:center}}
.strip-head{margin-bottom:28px}
/* Intro slots in place */
.intro{gap:24px}
.slot.slot-photo{width:72px;height:72px;display:block}
.intro-label{font-size:clamp(18px,1.8vw,24px);color:rgba(255,255,255,.75);margin:0;line-height:1.6}
.slot.slot-logo{display:inline-block;width:1.4em;height:1.4em;vertical-align:middle;margin:0 .15em}

/* Slots match hero tile size exactly (scale 1 = crisp) */
.slot.slot-photo,.slot.slot-logo{width:calc(clamp(29px,4.3vw,62px)*.9);height:calc(clamp(29px,4.3vw,62px)*.9)}
.intro-label{line-height:2}

.intro-label{line-height:1.5}
.intro-logos{display:flex;gap:14px;margin-top:-8px}
.intro-logos .slot.slot-logo{margin:0;display:block}

@media (min-width:821px){.strip{left:max(24px,calc(50% - 640px));right:max(24px,calc(50% - 640px))}}

.intro-label{font-size:calc(clamp(18px,1.8vw,24px) - 2px)}

.intro-text{max-width:none}

/* One side margin site-wide, matching the dark intro card */
@media (min-width:821px){
  :root{--gutter:max(24px,calc(50vw - 640px))}
  .strip{left:var(--gutter);right:var(--gutter)}
  .nav,.foot{padding-left:var(--gutter);padding-right:var(--gutter)}
  .split{padding-left:var(--gutter);padding-right:var(--gutter)}
  .sec{max-width:none;padding-left:var(--gutter);padding-right:var(--gutter)}
  .contact{margin-left:var(--gutter);margin-right:var(--gutter)}
}

/* Projects: one per slide */
.projects{height:100vh;padding:24px var(--gutter,24px);display:flex;align-items:center}
.pcard{width:100%;height:calc(100vh - 48px);background:#111;border-radius:28px;display:grid;grid-template-columns:minmax(300px,.8fr) 1.6fr;gap:24px;padding:24px;color:#fff;transition:background .8s var(--ease)}
.pleft{display:flex;flex-direction:column;padding:24px 16px 16px;min-height:0}
.plist{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pname{font-size:15px;color:rgba(255,255,255,.35);transition:color .4s;display:flex;gap:12px}
.pname span{font-size:12px;opacity:.7;width:20px}
.pname.on{color:#fff}
.pinfos{position:relative;margin-top:auto;min-height:280px}
.pinfo{position:absolute;inset:auto 0 0 0;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.pinfo.on{opacity:1;transform:none;pointer-events:auto}
.ptag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pinfo h3{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.03em;margin:10px 0 12px}
.pinfo p{color:rgba(255,255,255,.7);line-height:1.55;margin:0 0 20px;max-width:380px}
.pinfo dl{display:flex;gap:32px;margin:0 0 24px}.pinfo dt{font-size:12px;color:rgba(255,255,255,.45)}.pinfo dd{margin:4px 0 0;font-size:14px}
.pbtn{display:inline-block;background:#fff;color:#000;padding:12px 22px;border-radius:999px;font-size:14px;font-weight:500}
.pright{position:relative;border-radius:20px;overflow:hidden}
.pmedia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,.45);font-size:14px;border-radius:20px}
@media (max-width:820px){.projects{height:auto;padding:24px 16px}.pcard{height:auto;grid-template-columns:1fr}.pinfos{min-height:320px}.pright{height:60vw}}

/* Projects on open section; section colour = project mood (placeholder colours) */
.projects{background:#F8F8F8;transition:background .8s var(--ease)}
.pcard{background:transparent !important;color:#111;border-radius:0;padding:0;height:calc(100vh - 48px)}
.overline.light{}
.projects .overline{color:rgba(0,0,0,.5)}
.pname{color:rgba(0,0,0,.35)}.pname.on{color:#111}
.ptag,.pinfo dt{color:rgba(0,0,0,.5)}.pinfo p{color:rgba(0,0,0,.7)}
.pbtn{background:#111;color:#fff}

/* Tiles only on the hero, fade out once the dark card is in */
.bg-tiles{transition:opacity .8s var(--ease)}
.stage.done .bg-tiles{opacity:0}

/* Project media: illustrated backdrop + frosted product card on top */
.pmedia{background:#1C1C1E !important}
.pshot{width:72%;aspect-ratio:16/10;background:#fff;border-radius:18px;padding:10px;box-shadow:0 0 0 8px rgba(255,255,255,.45),0 30px 60px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;transition:transform .6s var(--ease)}
.pshot span{width:100%;height:100%;border-radius:12px;background:#eee;display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(0,0,0,.4)}


.pshot.phone{width:auto;height:82%;aspect-ratio:336/728;padding:0;border-radius:36px;background:transparent;overflow:hidden}
.pshot.phone img{width:100%;height:100%;object-fit:cover;display:block;border-radius:36px}

/* ===== Mobile (≤820px) ===== */
@media (max-width:820px){
  html,body{overflow-x:hidden}
  .nav{padding:18px 16px}
  .hero{min-height:100svh;padding:96px 20px 48px}
  .hero-text{font-size:clamp(28px,8vw,44px);line-height:1.2}
  .hero-text br{display:none}
  .strip{margin:0 16px;padding:32px 24px;border-radius:24px}
  .strip-head{margin-bottom:20px}
  .intro{gap:20px}
  .intro-text{font-size:clamp(24px,6.6vw,36px);line-height:1.2}
  .intro-text br{display:none}
  .intro-label{font-size:16px;line-height:1.5}
  .slot.slot-photo,.slot.slot-logo{width:48px;height:48px;overflow:hidden}
  .slot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
  .intro-logos{gap:12px;margin-top:-4px}
  
  /* projects: each project = info then media */
  .projects{height:auto;padding:72px 16px 40px;display:block}
  .pcard{height:auto !important;display:flex;flex-direction:column;gap:0}
  .pleft,.pinfos,.pright{display:contents}
  .plist{display:none}
  .projects .overline{order:0;margin-bottom:8px}
  .pinfo{position:static;opacity:1;transform:none;pointer-events:auto;margin-top:32px}
  .pinfo p{max-width:none}
  .pinfo dl{margin-bottom:20px}
  .pinfo:nth-child(1){order:1}.pinfo:nth-child(2){order:3}.pinfo:nth-child(3){order:5}.pinfo:nth-child(4){order:7}
  .pmedia:nth-child(1){order:2}.pmedia:nth-child(2){order:4}.pmedia:nth-child(3){order:6}.pmedia:nth-child(4){order:8}
  .pmedia{position:relative;inset:auto;margin-top:24px;aspect-ratio:4/3;border-radius:20px;overflow:hidden;transform:none !important}
  .pmedia:has(.phone){aspect-ratio:auto;padding:32px 0}
  .pshot{width:80%;box-shadow:0 0 0 6px rgba(255,255,255,.45),0 20px 40px rgba(0,0,0,.18)}
  .pshot.phone{height:auto;width:min(56vw,240px);border-radius:28px}
  .pshot.phone img{border-radius:28px}
  .sec{padding:72px 16px}
  .sec h2,.contact h2{font-size:clamp(30px,8vw,40px)}
  .lead,.contact p{font-size:16px}
  .cols3,.steps{margin-top:36px;gap:16px}
  .contact{padding:56px 24px;border-radius:24px}
  .foot{padding:24px 16px;flex-wrap:wrap;gap:8px}
}
/* project media: not clickable, colour hover; solid nav; fit projects in one screen */
.pmedia{cursor:default;transition:background-color .5s var(--ease)}
.pmedia.g1:hover{background:#5e8cf0 !important}.pmedia.g2:hover{background:#967cef !important}
.pmedia.g3:hover{background:#f095b1 !important}.pmedia.g4:hover{background:#c0e26e !important}
.nav{mix-blend-mode:normal;color:#111;background:rgba(248,248,248,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (min-width:821px){
  .projects{padding-top:84px;padding-bottom:24px}
  .pcard{height:calc(100vh - 108px) !important}
}
/* info on top, vertical 01-04 list below */
@media (min-width:821px){
  .pleft{padding-top:8px}
  .pinfos{order:0;margin-top:0;min-height:300px}
  .pinfo{inset:0 0 auto 0}
  .plist{order:1;margin:auto 0 0;gap:6px}
  .pname{font-size:15px;font-variant-numeric:tabular-nums}
}

/* mobile hero animation */
@media (max-width:820px){
  html.anim-m .stage{height:100svh;overflow:hidden}
  html.anim-m .hero{height:100svh;min-height:0}
  html.anim-m .strip{position:absolute;left:16px;right:16px;bottom:16px;top:auto;margin:0;height:auto;max-height:calc(100svh - 96px);padding:28px 22px;transform:translateY(130%)}
}
@media (max-width:820px){.hero{justify-content:center !important;padding-top:64px !important}.hero-text{font-size:30px !important;line-height:1.35 !important}}
.hero-text br.mbr{display:none}
@media (max-width:820px){.hero-text br.mbr{display:inline !important}}
@media (max-width:820px){html.anim-m .strip{top:210px !important;bottom:16px !important;max-height:none !important;display:flex;flex-direction:column;justify-content:center;border-radius:24px}}
@media (max-width:820px){.intro-label{margin-top:56px !important}}
.intro-text br.mbr{display:none}
@media (max-width:820px){.intro-text br.mbr{display:inline !important}}
.pshot:not(.phone){overflow:hidden}
.pshot:not(.phone) img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:12px;display:block}
.pmedia.g1,.pmedia.g1:hover{background:#75D1FD !important}