@import url('https://fonts.googleapis.com/css2?family=Eater&display=swap');

:root{
  --bg:#f4f2ed;
  --pink:#ff4fa3;
  --pink-hot:#ff2d93;
  --ink:#080808;
  --line:rgba(255,79,163,.30);
  --pad:clamp(16px,1.5vw,28px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--pink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.15;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none;cursor:none}
button,iframe{cursor:auto}
::selection{background:var(--pink);color:white}

/* The cursor is the actual pink sheep head supplied by Cameron. */
.head-cursor{position:fixed;left:0;top:0;width:62px;height:62px;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);will-change:transform;filter:drop-shadow(0 4px 5px rgba(0,0,0,.16))}
.head-cursor-inner{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px solid var(--ink);background:var(--bg);transform:rotate(-4deg) scale(1);transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease}
.head-cursor img{position:absolute;width:126%;height:112%;left:-13%;top:-4%;object-fit:cover;object-position:center 28%;display:block}
/* A tiny animated mouth sits over the existing lips. Closed by default, then "bites" open. */
.cursor-mouth{position:absolute;left:45.5%;top:72%;width:15%;height:4%;background:#050505;border:1px solid #050505;border-radius:50% 50% 55% 55%;transform:translate(-50%,-50%) scaleY(.12);transform-origin:center top;opacity:0;transition:transform .13s cubic-bezier(.2,.9,.2,1),opacity .08s ease,width .13s ease,height .13s ease}
body.cursor-bite .head-cursor{width:76px;height:76px}
body.cursor-bite .head-cursor-inner{transform:rotate(3deg) scale(1.04);box-shadow:0 0 0 4px rgba(255,79,163,.14)}
body.cursor-bite .cursor-mouth{opacity:1;width:23%;height:14%;transform:translate(-50%,-46%) scaleY(1);border-radius:44% 44% 54% 54%}

.site-header{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--pad);pointer-events:none;color:var(--pink)}
.site-header:after{content:"";position:absolute;inset:0 0 auto 0;height:95px;background:linear-gradient(to bottom,rgba(244,242,237,.98),rgba(244,242,237,0));z-index:-1;pointer-events:none}
.site-header a{pointer-events:auto}
.wordmark{font-weight:800;letter-spacing:-.055em;line-height:.82;font-size:16px}
.site-header nav{display:flex;gap:18px}.site-header nav a{position:relative}.site-header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .25s ease}.site-header nav a:hover:after{right:0}

.intro{min-height:88vh;padding:130px var(--pad) 40px;display:grid;grid-template-columns:2.25fr 1fr;align-items:end;border-bottom:1px solid var(--line)}
.intro h1{font-size:clamp(62px,11.2vw,175px);line-height:.78;letter-spacing:-.085em;margin:0;font-weight:800;max-width:1200px}
.intro p{margin:0 0 8px;font-size:clamp(16px,1.4vw,22px);max-width:330px}

.work-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.project{position:relative;background:var(--bg);overflow:hidden;isolation:isolate}
.project-link{display:block;position:relative}
.hero-loop{height:min(62vw,760px);position:relative;overflow:hidden;background:#dfdbd6}
.hero-loop img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;display:block;filter:none;transform:none;transition:transform .35s ease;will-change:transform,opacity}
.hero-loop img:first-child{animation:slowDriftA 9s ease-in-out infinite alternate}
.hero-loop img + img{opacity:0;animation:crossfade 8s ease-in-out infinite}
.project:nth-child(even) .hero-loop img:first-child{animation-name:slowDriftB}
.project:hover .hero-loop img{filter:none}
.hero-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;transform:scale(1.01)}

.project:after{content:"OPEN PROJECT ↗";position:absolute;right:20px;top:20px;background:var(--pink);color:white;border-radius:999px;padding:8px 11px;font-size:11px;letter-spacing:.04em;opacity:0;transform:translateY(8px);transition:.25s ease;z-index:4}
.project:hover:after{opacity:1;transform:none}
@keyframes slowDriftA{0%{transform:scale(1.03) translate3d(-1%,0,0)}100%{transform:scale(1.09) translate3d(1.5%,-1.2%,0)}}
@keyframes slowDriftB{0%{transform:scale(1.06) translate3d(1%,1%,0)}100%{transform:scale(1.02) translate3d(-1.5%,-.5%,0)}}
@keyframes crossfade{0%,42%{opacity:0;transform:scale(1.06)}50%,92%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.06)}}
.meta{display:grid;grid-template-columns:1.25fr 2fr auto;gap:16px;padding:14px var(--pad) 28px;align-items:center;background:var(--bg);position:relative;z-index:3;min-height:88px}
.meta p{font-size:15px;font-weight:400;margin:0}.meta span{font-variant-numeric:tabular-nums}

/* Brand names deliberately break the otherwise clean system: hot-pink, black-outlined, flaming display type. */
.brand-name{font-family:'Eater',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif!important;color:var(--pink-hot)!important;-webkit-text-stroke:1.8px var(--ink);paint-order:stroke fill;letter-spacing:-.045em!important;text-transform:uppercase;font-weight:400!important;font-size:clamp(27px,2.8vw,49px)!important;line-height:.85!important;margin:0!important;text-shadow:2px 3px 0 var(--ink),-1px 1px 0 var(--ink);display:inline-block;transform-origin:left center;transition:filter .2s ease,letter-spacing .2s ease}
.project:hover .brand-name{filter:drop-shadow(0 0 8px rgba(255,45,147,.22));letter-spacing:-.025em!important}
.brand-name-small{font-size:clamp(16px,1.45vw,25px)!important;-webkit-text-stroke:1px var(--ink);text-shadow:1px 1px 0 var(--ink);vertical-align:middle;line-height:1!important}

/* elements that subtly lean toward the head */
.magnetic{display:inline-block;will-change:transform;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.magnetic-block{will-change:transform;transition:transform .2s cubic-bezier(.2,.8,.2,1)}

.case-study{padding:14vh var(--pad) 7vh;border-top:1px solid var(--line);scroll-margin-top:40px}
.case-head{display:grid;grid-template-columns:1fr 3fr;gap:20px;align-items:start;margin-bottom:7vh}.case-head p{margin:4px 0}.case-head h2{font-size:clamp(55px,9vw,140px);line-height:.82;letter-spacing:-.075em;margin:0;font-weight:800}
.case-copy{max-width:760px;font-size:clamp(23px,2.9vw,44px);line-height:1.02;letter-spacing:-.042em;margin:0 0 8vh 25%}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#111;margin:0 0 1px;cursor:auto}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);margin-top:1px}.image-grid img,.case-image{display:block;width:100%;height:auto;object-fit:cover;background:#ddd}.image-grid.two img{aspect-ratio:16/10}.royal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.royal-grid img{height:auto;aspect-ratio:auto;object-fit:contain}.case-links{display:flex;justify-content:flex-end;padding:18px 0 60px;font-size:18px}.case-links a{border-bottom:1px solid currentColor;padding-bottom:2px}.case-image{margin-bottom:1px}

.about{min-height:75vh;border-top:1px solid var(--line);padding:17vh var(--pad) 8vh;display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;align-items:start}.about h2{font-size:15px;font-weight:400;margin:0}.about p{font-size:clamp(30px,4.25vw,64px);line-height:.94;letter-spacing:-.055em;margin:0 0 28px}.about-links{display:flex;flex-direction:column;gap:8px}.about-links a{border-bottom:1px solid currentColor;width:max-content}
footer{border-top:1px solid var(--line);padding:18px var(--pad);display:flex;justify-content:space-between}

@media(max-width:820px){body,a{cursor:auto}.head-cursor{display:none}.site-header nav{gap:10px}.intro{grid-template-columns:1fr;gap:40px;min-height:72vh;padding-top:110px}.intro h1{font-size:18vw}.work-index{grid-template-columns:1fr}.hero-loop{height:74vw}.meta{grid-template-columns:1fr auto}.meta p{grid-column:1/-1;grid-row:2}.brand-name{font-size:clamp(26px,8vw,48px)!important;-webkit-text-stroke:1.4px var(--ink)}.case-head{grid-template-columns:1fr}.case-head h2{font-size:16vw}.case-copy{margin-left:0;font-size:8vw}.about{grid-template-columns:1fr;gap:40px}.about p{font-size:10vw}.project:after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-loop img,.hero-loop img + img{animation:none!important}.magnetic,.magnetic-block{transition:none}}

/* Side Quests + Toss Your Nos */
.toss-grid img{aspect-ratio:auto;min-height:420px;object-fit:cover}
.side-quests-page .site-header{position:sticky;top:0;background:rgba(244,242,237,.94);backdrop-filter:blur(12px)}
.side-quests-intro{min-height:68vh;padding:160px var(--pad) 60px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.side-quests-intro h1{font-family:'Eater',Impact,sans-serif;font-size:clamp(70px,14vw,210px);line-height:.78;letter-spacing:-.06em;text-transform:uppercase;color:var(--pink-hot);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--ink);margin:0;max-width:1200px}
.side-quests-intro p{max-width:450px;font-size:clamp(18px,1.8vw,28px);margin:0 0 12px auto}
.film-list{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line)}
.film-project{background:var(--bg);padding:9vh var(--pad);display:grid;grid-template-columns:1fr 2.4fr;gap:28px;align-items:start}
.film-project .film-copy h2{font-family:'Eater',Impact,sans-serif;font-size:clamp(44px,6vw,92px);line-height:.82;letter-spacing:-.045em;text-transform:uppercase;color:var(--pink-hot);-webkit-text-stroke:1.6px var(--ink);paint-order:stroke fill;text-shadow:2px 3px 0 var(--ink);margin:0 0 22px}
.film-project .film-copy p{font-size:clamp(18px,2vw,30px);line-height:1;letter-spacing:-.025em;margin:0;max-width:420px}
.film-project .film-copy .film-meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:18px}
.film-project .video-wrap{margin:0}
.side-back{padding:22px var(--pad);border-top:1px solid var(--line);display:flex;justify-content:space-between}
@media(max-width:820px){.side-quests-intro{min-height:52vh;padding-top:120px;display:block}.side-quests-intro p{margin:30px 0 0}.film-project{grid-template-columns:1fr;padding-top:60px;padding-bottom:60px}.toss-grid img{min-height:0}}

/* Experience strip */
.agencies{border-top:1px solid var(--line);padding:9vh var(--pad) 10vh;display:grid;grid-template-columns:1fr 3fr;gap:30px;align-items:start}
.agencies-kicker{margin:7px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.agency-list{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:baseline}
.agency-list .brand-name-small{display:inline-block;font-size:clamp(32px,5.2vw,78px)!important;line-height:.9}
@media(max-width:820px){.agencies{grid-template-columns:1fr;gap:24px;padding:8vh var(--pad)}.agency-list{gap:16px 22px}.agency-list .brand-name-small{font-size:clamp(30px,11vw,54px)!important}}

/* Motion-led work index: each moving tile is the door into a dedicated case study. */
.motion-thumb{background:#0b0b0b;isolation:isolate}
.motion-thumb iframe{width:177.7777778%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.015);position:absolute;border:0;pointer-events:none}
.project-link{display:block;color:inherit;text-decoration:none}
.project-link:focus-visible{outline:3px solid var(--pink-hot);outline-offset:-3px}
.project:hover .motion-thumb iframe{transform:translate(-50%,-50%) scale(1.055)}
.motion-thumb iframe{transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.project-page .case-study[hidden]{display:none!important}
.project-page .case-study{padding-top:170px;border-top:0;min-height:100vh}
.project-page .project-header{position:fixed;top:0;left:0;right:0;background:rgba(244,242,237,.92);backdrop-filter:blur(10px);z-index:50}
.project-endnav{padding:7vh var(--pad) 10vh;border-top:1px solid var(--line)}
@media (max-aspect-ratio:16/9){.motion-thumb iframe{width:100%;height:177.7777778%}}
@media(max-width:820px){.project-page .case-study{padding-top:130px}.motion-thumb iframe{width:100%;height:177.7777778%}}

/* Royal Enfield — preserve full campaign artwork; no thumbnail cropping */
.royal-gallery{margin-top:1px;background:var(--line)}
.royal-gallery figure{margin:0;background:#f1f1f1;overflow:hidden}
.royal-gallery img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center}
.royal-feature{width:100%;margin-bottom:1px!important}
.royal-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.royal-gallery-grid figure:nth-child(4){grid-column:1/-1}
.image-source{margin:0;padding:10px 14px;background:var(--bg);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;text-align:right}
@media (max-width: 760px){.royal-gallery-grid{grid-template-columns:1fr}.royal-gallery-grid figure:nth-child(4){grid-column:auto}}

/* Refined Side Quests scale */
.side-quests-intro h1{font-size:clamp(52px,9vw,132px)!important;line-height:.82!important;max-width:900px!important}
.side-quests-intro{min-height:52vh!important;padding-top:130px!important}
.toss-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.toss-side-grid img{display:block;width:100%;height:auto;background:#ddd}
.agency-logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);align-items:stretch}
.agency-logo{min-height:180px;background:#fff;display:flex;align-items:center;justify-content:center;padding:34px;overflow:hidden}
.agency-logo img{display:block;width:100%;height:100%;max-height:105px;object-fit:contain;filter:grayscale(1);transition:filter .25s ease,transform .35s ease}
.agency-logo:hover img{filter:grayscale(0);transform:scale(1.04)}
.agency-4c{font-family:Arial Black,Helvetica,sans-serif;font-weight:900;font-size:78px;letter-spacing:-.12em;color:#111;text-decoration:none}
.agency-4c .c{color:#ff2b88;margin-left:.05em}
@media(max-width:820px){.side-quests-intro h1{font-size:clamp(48px,17vw,86px)!important}.agency-logo-grid{grid-template-columns:1fr 1fr}.agency-logo{min-height:130px;padding:24px}.toss-side-grid{grid-template-columns:1fr}}

/* 2026-09-10 polish: Side Quests intro never overlaps its description */
.side-quests-intro > div{width:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(28px,5vw,90px);align-items:end}
.side-quests-intro h1{font-size:clamp(48px,7.2vw,104px)!important;line-height:.8!important;max-width:720px!important}
.side-quests-intro p{position:relative;z-index:2;margin:0 0 8px!important;max-width:420px!important}
/* Cam & Edzai-style portal wall: three moving thumbnails across, clean captions underneath */
.work-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;background:var(--bg);padding:14px}
.project{background:var(--bg)}
.hero-loop{height:auto;aspect-ratio:16/9}
.meta{grid-template-columns:1fr auto;padding:8px 2px 18px;min-height:0}
.meta p{display:none}.meta span{font-size:10px}
.meta .brand-name{font-family:Arial,Helvetica,sans-serif!important;font-size:12px!important;line-height:1!important;letter-spacing:-.02em!important;color:var(--ink)!important;-webkit-text-stroke:0!important;text-shadow:none!important;text-transform:none!important;font-weight:700!important}
.project:after{right:10px;top:10px}
@media(max-width:980px){.work-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.side-quests-intro > div{display:block}.side-quests-intro h1{font-size:clamp(44px,15vw,76px)!important;max-width:100%!important}.side-quests-intro p{margin-top:28px!important}.work-index{grid-template-columns:1fr;padding:8px;gap:8px}.meta .brand-name{font-size:13px!important}}

/* ABOUT — actively burning portrait */
.about{grid-template-columns:.8fr 1.35fr 1fr;position:relative}
.about-copy{padding-right:1vw}
.about-portrait-wrap{display:flex;justify-content:flex-end;align-items:flex-start;position:relative}
.about-portrait{position:relative;width:min(31vw,430px);aspect-ratio:1/1.18;isolation:isolate;transform:rotate(1.4deg);filter:drop-shadow(0 18px 28px rgba(0,0,0,.13))}
.about-portrait>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.live-fire{position:absolute;inset:-8%;z-index:2;pointer-events:none;filter:drop-shadow(0 0 9px rgba(255,20,126,.78)) drop-shadow(0 0 20px rgba(255,20,126,.34));mix-blend-mode:multiply}
.flame{position:absolute;width:13%;height:24%;background:radial-gradient(ellipse at 50% 82%,#fff 0 7%,#ff90c8 8% 18%,#ff1880 22% 56%,#9b003f 60% 72%,transparent 74%);border-radius:54% 46% 60% 40%/68% 56% 44% 32%;transform-origin:50% 100%;animation:aboutFlame 1.15s ease-in-out infinite alternate;opacity:.96}
.flame:after{content:"";position:absolute;left:30%;bottom:8%;width:39%;height:48%;background:radial-gradient(ellipse at 50% 80%,#fff 0 15%,#ff6db4 22% 48%,transparent 70%);border-radius:50% 50% 55% 45%;animation:flameCore .72s ease-in-out infinite alternate}
.f1{left:-2%;bottom:6%;animation-delay:-.2s}.f2{left:8%;bottom:-2%;height:18%;animation-delay:-.7s}.f3{left:25%;bottom:-7%;height:17%;animation-delay:-.4s}.f4{right:22%;bottom:-5%;height:21%;animation-delay:-.9s}.f5{right:6%;bottom:0;height:26%;animation-delay:-.3s}.f6{right:-4%;bottom:21%;height:23%;animation-delay:-.65s}.f7{right:-3%;top:17%;height:20%;animation-delay:-.1s}.f8{right:7%;top:-5%;height:24%;animation-delay:-.8s}.f9{left:47%;top:-9%;height:29%;animation-delay:-.45s}.f10{left:24%;top:-5%;height:22%;animation-delay:-.95s}.f11{left:-4%;top:17%;height:25%;animation-delay:-.55s}.f12{left:-5%;top:49%;height:21%;animation-delay:-.15s}
@keyframes aboutFlame{0%{transform:translateY(2px) scale(.88,1) rotate(-4deg);filter:blur(.25px)}35%{transform:translateY(-6px) scale(1.05,1.14) rotate(4deg)}70%{transform:translateY(-1px) scale(.93,1.05) rotate(-2deg)}100%{transform:translateY(-10px) scale(1.12,1.28) rotate(6deg);filter:blur(.65px)}}
@keyframes flameCore{from{transform:translateY(3px) scale(.8,.92);opacity:.7}to{transform:translateY(-5px) scale(1.08,1.18);opacity:1}}
.about-portrait:hover .live-fire{filter:drop-shadow(0 0 12px rgba(255,20,126,.95)) drop-shadow(0 0 30px rgba(255,20,126,.55))}
.about-portrait:hover .flame{animation-duration:.65s}
@media(max-width:1100px){.about{grid-template-columns:1fr 1.4fr}.about-portrait-wrap{grid-column:2}.about-links{grid-column:2}.about-portrait{width:min(46vw,430px)}}
@media(max-width:820px){.about{grid-template-columns:1fr}.about-copy,.about-portrait-wrap,.about-links{grid-column:1}.about-portrait-wrap{justify-content:flex-start}.about-portrait{width:min(82vw,430px);margin:1rem 0 2rem}.live-fire{inset:-5%}}
@media(prefers-reduced-motion:reduce){.flame,.flame:after{animation:none!important}}


/* Homepage portals: crisp, native-resolution previews. */
.clip-preview{position:relative;overflow:hidden;background:#111;aspect-ratio:16/9}
.clip-preview .clip-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:none;filter:none!important;image-rendering:auto;backface-visibility:hidden;will-change:transform;transition:transform .28s ease}
.clip-preview .clip-frame.crisp-drift{animation:crispPortalDrift 3s cubic-bezier(.33,.02,.66,.98) infinite alternate;animation-delay:var(--portal-delay,0s)}
.project:hover .clip-preview .clip-frame{transform:scale(1.012)}
@keyframes crispPortalDrift{0%{transform:scale(1.001) translate3d(0,0,0)}100%{transform:scale(1.012) translate3d(.35%,-.25%,0)}}
.clip-badge{display:none!important}
@media(prefers-reduced-motion:reduce){.clip-preview .clip-frame.crisp-drift{animation:none!important}}

/* AI directing reel */
.ai-directing{padding:clamp(70px,10vw,150px) var(--pad);border-top:1px solid var(--line);scroll-margin-top:70px}
.ai-directing-head{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:end;gap:24px;padding-bottom:clamp(30px,5vw,70px)}
.ai-kicker{align-self:start;font-size:12px;letter-spacing:.09em;font-weight:700}
.ai-directing h2{font-size:clamp(72px,10vw,160px);line-height:.76;letter-spacing:-.085em;margin:0;font-weight:800}
.ai-directing-head>p:last-child{max-width:260px;font-size:clamp(16px,1.4vw,22px);margin:0 0 4px}
.ai-film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px) 14px}
.ai-film{min-width:0}.ai-film .video-wrap{margin:0;background:var(--ink)}
.ai-film-meta{display:flex;justify-content:space-between;gap:15px;align-items:baseline;padding:12px 2px 0;color:var(--ink);font-size:12px;font-weight:700}
.ai-film-meta h3{font-size:inherit;margin:0}.ai-film-meta a{color:var(--pink);text-align:right}.ai-film-meta a:hover{text-decoration:underline}
@media(max-width:820px){.ai-directing-head{grid-template-columns:1fr;gap:18px}.ai-directing h2{font-size:clamp(66px,16vw,120px)}.ai-film-grid{grid-template-columns:1fr}}
@media(max-width:600px){.site-header{gap:14px}.site-header nav{max-width:75%;justify-content:flex-end;flex-wrap:wrap;gap:8px 11px;font-size:12px}.site-header:after{height:120px}}