@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--dark:#100e17;--paper:#f5f3ed;--purple:#5638f4;--lime:#d8ff43;--ink:#f8f7f4;--muted:#b6b3bf;--stroke:#ffffff33;--display:Archivo,Arial,sans-serif;--ease:cubic-bezier(.21,.75,.22,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--dark);color:var(--ink);font:16px/1.55 Inter,Arial,sans-serif}
body,h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.075em;line-height:.94;text-wrap:balance}
h1{font-size:clamp(64px,10.6vw,174px)}
h2{font-size:clamp(48px,7vw,109px)}
h3{font-size:clamp(29px,4vw,60px)}
em{color:var(--lime);font-style:normal}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button,input,textarea{font:inherit}
button,summary{cursor:pointer}
:focus-visible{outline:3px solid var(--lime);outline-offset:5px}
[hidden]{display:none!important}
.wrap{width:min(1440px,calc(100% - 112px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:10px;left:10px;z-index:12;background:var(--lime);color:var(--dark);padding:9px 15px;transform:translateY(-200%)}
.skip:focus{transform:none}
.header{position:sticky;top:0;z-index:10;background:#100e17ef;backdrop-filter:blur(16px);border-bottom:1px solid #ffffff18}
.nav{min-height:75px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.logo{display:inline-flex;align-items:center;font:900 clamp(23px,2.8vw,38px)/1 var(--display);letter-spacing:-.09em;white-space:nowrap}
.logo span{color:var(--lime)}
.logo small{font:700 .45em/1 Inter,sans-serif;margin-left:.55em;color:var(--dark);background:var(--lime);padding:.26em;border-radius:2px}
nav{display:flex;gap:clamp(16px,3.4vw,52px);font-size:.9rem;font-weight:550}
nav a{padding:5px 0;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--lime);color:var(--lime)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:47px;padding:10px 19px;border:1px solid transparent;border-radius:99px;background:transparent;color:inherit;line-height:1.15;font-weight:700;font-size:.88rem;transition:background .25s,color .25s,border .25s,transform .25s}
.pill:hover{transform:translateY(-2px)}
.lime{background:var(--lime);color:var(--dark)}
.lime:hover{background:#efff9f}
.dark{background:var(--dark);color:white}
.dark:hover{background:#34313c}
.outline{border-color:currentColor}
.outline:hover{background:var(--ink);color:var(--dark);border-color:var(--ink)}
.menu{display:none}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 75px);display:grid;place-items:center;text-align:center;padding:42px 0 86px;background:#100b20}
.hero-image,.hero-glow{position:absolute;inset:-7%;z-index:-2;pointer-events:none}
.hero-image{background:url('assets/hero.jpg') center 52%/cover no-repeat;animation:hero-drift 15s var(--ease) infinite alternate}
.hero-glow{z-index:-1;background:radial-gradient(ellipse at 50% 42%,#120a2c1a,#100a1dc7 78%),linear-gradient(0deg,#100e17 2%,transparent 58%,#100e1766)}
.hero-inner{position:relative;padding-block:22px}
.hero-label,.eyebrow{text-transform:uppercase;font-size:.74rem;font-weight:700;letter-spacing:.15em}
.hero-label{margin-bottom:clamp(20px,3.7vh,44px)}
.hero h1{font-size:clamp(72px,13vw,190px)}
.line{display:block;overflow:hidden;padding:.045em .1em .09em;margin:-.045em -.1em -.09em}
.line>span:not(.sr-only){display:block;animation:rise .95s var(--ease) both}
.line-accent{color:var(--lime)}
.line-accent>span:not(.sr-only){animation-delay:.16s}
.hero-copy{margin:clamp(18px,3.2vh,34px) auto 0;max-width:34ch;color:#efedf4;font-size:clamp(15px,1.7vw,21px)}
.hero-buttons,.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero-scroll{position:absolute;bottom:24px;display:flex;gap:9px;align-items:center;font-size:.77rem;color:#eeedf4}
.hero-scroll span{color:var(--lime);animation:nudge 2.8s ease-in-out infinite}
@keyframes hero-drift{from{transform:scale(1) translate3d(-1%,-1%,0)}to{transform:scale(1.14) translate3d(2%,2%,0)}}
@keyframes rise{from{transform:translateY(111%)}to{transform:none}}
@keyframes nudge{50%{transform:translateY(5px)}}
.ticker{overflow:hidden;border-block:1px solid var(--stroke);padding:15px 0}
.ticker-run{display:flex;width:max-content;animation:ticker 24s linear infinite}
.ticker-run span{white-space:nowrap;padding-right:.3em;font:800 clamp(34px,5.7vw,88px)/1.02 var(--display);letter-spacing:-.06em}
.ticker b{color:var(--lime);font-size:.68em;margin:0 .18em;vertical-align:.09em}
@keyframes ticker{to{transform:translateX(-50%)}}
.section{padding-block:clamp(26px,4vw,58px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:clamp(14px,2.4vw,28px)}
.section-head p{margin-top:16px;color:var(--muted);max-width:37ch}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2.2vw,32px)}
.project-card:nth-child(1){grid-column:span 7}
.project-card:nth-child(2){grid-column:span 5;margin-top:clamp(16px,4.5vw,68px)}
.project-card:nth-child(3){grid-column:3/span 8;margin-top:clamp(5px,2vw,30px)}
.project-media{position:relative;overflow:hidden;border-radius:11px;aspect-ratio:1.32;background:#252235}
.project-card:nth-child(3) .project-media{aspect-ratio:1.78}
.project-media img,.case-media img,.service-photo img,.assemble img,.switch-image img{width:100%;height:100%;object-fit:cover}
.project-media img{transition:transform .65s var(--ease)}
.project-link:hover img,.project-link:focus-visible img{transform:scale(1.065)}
.round{position:absolute;z-index:3;right:15px;bottom:15px;display:grid;place-items:center;width:48px;aspect-ratio:1;border-radius:50%;background:var(--paper);color:var(--dark);font-size:1.35rem;transition:background .3s,transform .4s}
.project-link:is(:hover,:focus-visible) .round{background:var(--lime);transform:rotate(-12deg)}
.project-info{display:flex;align-items:end;justify-content:space-between;gap:10px;padding-top:14px}
.project-info p{color:var(--muted);font-size:.76rem;margin-bottom:6px}
.project-line{color:var(--muted);font-size:.84rem;max-width:17ch}
.approach{background:var(--purple);min-height:132svh;--g:0}
.approach-pin{position:sticky;top:75px;min-height:calc(100svh - 75px);padding-block:clamp(28px,5vh,66px);display:flex;flex-direction:column;justify-content:center}
.approach p{color:#faf8ff}
.assemble{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.assemble figure{position:relative;aspect-ratio:1.55;isolation:isolate;overflow:hidden;border-radius:10px;transform:translate(calc(var(--x) * var(--g)),calc(var(--y) * var(--g))) rotate(calc(var(--r) * var(--g)));transform-origin:center bottom}
.assemble figcaption{position:absolute;left:12px;bottom:12px;border-radius:30px;padding:5px 11px;background:var(--dark);font-size:.75rem}
.paper{background:var(--paper);color:var(--dark);color-scheme:light}
.paper em{color:#5032db}
.paper :focus-visible{outline-color:#5032db}
.paper .outline:hover{background:var(--dark);border-color:var(--dark);color:var(--paper)}
.service-switch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,100px);align-items:center}
.switch-list details{border-top:1px solid #17132035}
.switch-list details:last-child{border-bottom:1px solid #17132035}
.switch-list summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;padding:17px 0;font:800 clamp(26px,4.2vw,62px)/1.04 var(--display);letter-spacing:-.06em;color:#55515f;transition:color .25s}
.switch-list summary::-webkit-details-marker{display:none}
.switch-list summary span{font-size:.54em}
.switch-list details[open] summary{color:var(--dark)}
.switch-list details[open] summary span,.switch-detail a{color:#5032db}
.switch-detail{padding:0 0 18px}
.switch-detail a{display:inline-block;margin-top:8px;font-weight:700}
.switch-image{position:relative;aspect-ratio:1.42;overflow:hidden;border-radius:12px;background:#e1dce8}
.switch-image img{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .45s,transform .55s var(--ease)}
.switch-image img.active{opacity:1;transform:none}
.closing{background:var(--lime);color:var(--dark);padding-block:clamp(24px,3.8vw,52px)}
.closing em{color:#5032db}
.closing :focus-visible{outline-color:#5032db}
.closing-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:25px;align-items:end}
.closing p{max-width:30ch;margin-bottom:18px}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:20px}
.footer p,.footer div{font-size:.86rem;color:var(--muted)}
.footer div{display:flex;gap:15px}
.footer div a:hover,.direct a:hover,.back:hover{text-decoration:underline;text-underline-offset:5px}
.page-intro{padding-top:clamp(26px,4.5vw,68px);padding-bottom:clamp(16px,2.6vw,36px)}
.page-intro>p:not(.eyebrow){font-size:clamp(17px,2vw,24px);color:var(--muted);margin-top:22px;max-width:36ch}
.page-intro>.pill,.filters{margin-top:24px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button[aria-pressed=true]{color:var(--dark);background:var(--lime);border-color:var(--lime)}
.archive{padding-bottom:clamp(26px,4vw,58px)}
.archive.filtered .project-card{grid-column:1/span 8;margin-top:0}
.service-stack{padding-bottom:clamp(25px,3.8vw,52px);display:grid;gap:18px}
.service-panel{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--stroke);border-radius:12px;background:#1b1924}
.service-panel:nth-child(even) .service-photo{order:1}
.service-photo{min-height:300px}
.service-body{padding:clamp(16px,2.6vw,36px)}
.service-body .eyebrow{color:var(--lime);margin-bottom:14px}
.service-body h2{font-size:clamp(42px,5.3vw,88px)}
.service-body p:not(.eyebrow){margin-top:15px;color:var(--muted)}
.service-body ul{padding-left:18px;margin:18px 0 23px}
.service-body li::marker,.case-copy li::marker{color:var(--lime)}
.process-grid{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:23px}
.process-grid article{border-top:1px solid #17132035;padding-top:16px}
.process-grid h3{font-size:clamp(24px,3vw,45px);margin-bottom:10px}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(25px,6vw,92px);align-items:center;padding-bottom:clamp(26px,4vw,55px)}
.about-grid img{border-radius:12px}
.about-grid h2,.loop-study h2{font-size:clamp(39px,5.5vw,78px)}
.about-grid p{margin:20px 0;color:var(--muted)}
.contact-page{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,72px);align-items:start;padding-block:clamp(24px,3.8vw,54px)}
.contact-page .page-intro{padding:0}
.contact-page h1{font-size:clamp(58px,7.9vw,135px)}
.direct{display:grid;gap:8px;margin-top:24px;overflow-wrap:anywhere}
.direct a{width:fit-content;color:var(--lime)}
.brief{padding:clamp(18px,3vw,40px);background:#1b1924;border:1px solid var(--stroke);border-radius:12px}
.brief>label,.brief legend{display:block;font-weight:650;font-size:.9rem;margin-bottom:5px}
.brief input:not([type=checkbox]),.brief textarea{width:100%;border:1px solid #716d7f;background:var(--dark);color:var(--ink);padding:10px 12px;border-radius:5px;margin-bottom:14px}
.brief textarea{resize:vertical}
.brief fieldset{min-width:0;border:0;padding:0;margin:0 0 14px}
.options{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem}
.options label{border:1px solid #716d7f;padding:5px 8px;border-radius:18px;display:flex;align-items:center;gap:4px}
.options input{accent-color:var(--lime)}
.brief .actions{justify-content:flex-start;margin-top:0}
.brief>p{color:var(--muted);margin-top:9px;font-size:.8rem}
.case-intro .eyebrow{color:var(--case-accent);margin:24px 0 13px}
.case-intro h1{color:var(--case-accent)}
.case-media{overflow:hidden;aspect-ratio:1.9;border-radius:12px}
.case-copy{padding-block:clamp(22px,3.3vw,48px);display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:28px}
.case-copy h2{font-size:clamp(28px,3.2vw,54px);margin-bottom:14px}
.case-copy p,.case-copy li{color:var(--muted)}
.case-copy ul{margin:0;padding-left:18px}
.case-next{display:block;background:var(--case-accent);color:var(--dark);padding:22px 0 28px}
.case-next h2{margin-top:8px}
.case-next span{display:inline-block;transition:transform .3s}
.case-next:hover span{transform:translate(6px,-7px)}
.loop-study{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;margin-bottom:38px}
.loop-study button{margin-top:17px}
.study-panel{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:12px;aspect-ratio:1.7;background:radial-gradient(circle,#9c78ff,#5837da 55%,#281955)}
.orbit{width:44%;aspect-ratio:1;border-radius:43% 57% 55% 45%;background:conic-gradient(#f9f7ff,#4c395f,#c1affe,#fff,#52317e,#f9f7ff);mask:radial-gradient(circle at 50% 50%,transparent 46%,black 48%);box-shadow:inset 0 0 28px #ffffffaa;animation:orbit 5s linear infinite}
.orbit.paused{animation-play-state:paused}
@keyframes orbit{to{transform:rotate(1turn)}}
.motion-ready .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.motion-ready .reveal.visible{opacity:1;transform:none}
@media(max-width:960px){.wrap{width:calc(100% - 64px)}.project-line{display:none}.contact-page{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
.wrap{width:calc(100% - 34px)}.nav{min-height:63px}.nav-cta{display:none}
.menu{display:flex;gap:7px;align-items:center;padding:7px 12px;color:inherit;border:1px solid var(--stroke);border-radius:30px;background:transparent;font-size:.8rem}
nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark);padding:16px 17px 32px;flex-direction:column;gap:10px;font-family:var(--display);font-size:2rem;font-weight:800}
nav.open{display:flex}nav a{width:fit-content}
.hero{min-height:calc(86svh - 63px)}.hero h1{font-size:clamp(59px,15.8vw,108px)}.hero-image{background-position:center}.hero-label{margin-bottom:18px}
.section-head,.footer{align-items:start;flex-direction:column}.section-head{gap:14px}
.work-grid{grid-template-columns:1fr}
.project-card:nth-child(n),.archive.filtered .project-card{grid-column:1;margin-top:0}
.project-card:nth-child(3) .project-media{aspect-ratio:1.32}
.approach{min-height:0}.approach-pin{position:static;min-height:0;padding-block:36px}.assemble{gap:6px}.assemble figure{transform:none;aspect-ratio:1.1}.assemble figcaption{left:4px;bottom:4px;padding:2px 5px;font-size:.56rem}
.service-switch,.closing-grid,.service-panel,.about-grid,.contact-page,.case-copy,.loop-study{grid-template-columns:1fr}
.switch-image{aspect-ratio:1.7}.service-panel:nth-child(even) .service-photo{order:0}.service-photo{min-height:0;aspect-ratio:1.55}
.process-grid{grid-template-columns:1fr 1fr}.case-media{aspect-ratio:1.3}
.page-intro h1{font-size:clamp(54px,13vw,90px)}.brief{padding:18px}.footer{gap:10px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.ticker-run,.assemble figure{transform:none}
.approach{min-height:0}.approach-pin{position:static;min-height:0}
}
@media(max-width:490px){.hero-scroll{left:17px}.hero h1{font-size:clamp(51px,15.3vw,78px)}}@media(prefers-reduced-motion:reduce){}

.team-home{border-top:1px solid #17132028}.team-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,6vw,100px);align-items:center}.team-feature p{margin:18px 0 24px;max-width:35ch}.team-feature img{aspect-ratio:1.65;object-fit:cover;border-radius:12px}.team-feature h2{text-wrap:initial}@media(min-width:721px) and (max-width:1120px){.nav{gap:13px}.nav nav{gap:clamp(10px,1.6vw,23px);font-size:.82rem}.nav-cta{padding-inline:11px;font-size:.78rem}}@media(max-width:720px){.team-feature{grid-template-columns:1fr}}

.nav nav{display:flex;position:static;flex-direction:row;align-items:center;padding:0;gap:clamp(12px,2.4vw,34px);font:600 .9rem/1.2 Inter,Arial,sans-serif;background:none;white-space:nowrap}
.hero{background:#100e17}
.hero-reel{position:absolute;inset:0;z-index:-2;background:url('assets/zest-optimized.webp') center/cover}
.hero-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .85s ease}
.hero-clip.active{opacity:1}
.hero-glow{background:radial-gradient(ellipse at 50% 47%,#100e1780,#100e17bd 72%),linear-gradient(0deg,#100e17 0%,transparent 52%,#100e1750)}
.client-strip{padding:25px 0 30px;background:#191522;border-bottom:1px solid var(--stroke);overflow:hidden}
.client-strip h2{font:700 .76rem/1.3 Inter,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#d5cde0;margin-bottom:19px}
.client-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent)}
.client-run{display:flex;width:max-content;animation:client-scroll 27s linear infinite}
.client-run ul{display:flex;align-items:center;gap:clamp(35px,7vw,105px);padding:0 clamp(35px,7vw,105px) 0 0;list-style:none;margin:0}
.client-run li{font:800 clamp(24px,3.4vw,48px)/1.1 var(--display);letter-spacing:-.045em;white-space:nowrap}
@keyframes client-scroll{to{transform:translateX(-50%)}}
.client-strip:hover .client-run{animation-play-state:paused}
@media(max-width:820px){.nav{display:grid;grid-template-columns:1fr auto;gap:0;min-height:0}.nav .logo{padding:16px 0}.nav .nav-cta{display:none}.nav nav{grid-column:1/-1;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;border-top:1px solid var(--stroke);padding:7px 0 9px;font-size:clamp(.73rem,2.8vw,.88rem)}.hero{min-height:calc(85svh - 100px)}html{scroll-padding-top:125px}}
@media(prefers-reduced-motion:reduce){.client-window{mask-image:none}.client-run{animation:none;width:auto;padding-inline:17px}.client-run ul{flex-wrap:wrap;gap:15px 25px;padding:0}.client-run ul[aria-hidden]{display:none}}

.work-grid:has(.weran-feature) .project-card:nth-child(n){grid-column:span 6;margin-top:0}
.work-grid .project-card.weran-feature,.archive.filtered .project-card.weran-feature{grid-column:1/-1}
.work-grid:has(.weran-feature) .project-card:not(.weran-feature) .project-media{aspect-ratio:1.32}
.weran-cover{background:radial-gradient(ellipse at 50% 70%,#b10917,#410810 72%,#25070c);display:grid;place-items:center;overflow:hidden;border-radius:12px}
.project-media.weran-cover{aspect-ratio:2.14}
.weran-cover-pair{width:min(78%,920px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,48px);padding:clamp(16px,3vw,50px) 0}
.weran-cover-pair img{width:100%;height:auto;box-shadow:0 16px 45px #2104099e;transform:rotate(-4deg);border-radius:4px}
.weran-cover-pair img+img{transform:rotate(4deg)}
.project-link:hover .weran-cover-pair img,.project-link:focus-visible .weran-cover-pair img{transform:rotate(0) scale(1.025)}
.weran-case-hero .weran-cover-pair{width:min(75%,740px)}
.weran-gallery-section{padding-block:clamp(22px,3.3vw,46px);background:#f5f3ed;color:#100e17}
.weran-gallery-section .section-head p{color:#5a5362}
.weran-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.5vw,35px)}
.weran-gallery a{display:block;overflow:hidden;border-radius:6px}
.weran-gallery a:focus-visible{outline-color:#5638f4}
.weran-gallery img{transition:transform .35s var(--ease)}
.weran-gallery a:hover img{transform:scale(1.025)}
.weran-gallery figcaption{margin-top:8px;font-size:.85rem;font-weight:600}
@media(max-width:720px){.work-grid:has(.weran-feature) .project-card:nth-child(n){grid-column:1/-1}.project-media.weran-cover{aspect-ratio:1.46}.weran-cover-pair,.weran-case-hero .weran-cover-pair{width:83%}.weran-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.weran-gallery figcaption{font-size:.74rem}}


html:has(.gallery-viewer[open]) {
  overflow: hidden;
}
.gallery-viewer {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(calc(100% - 24px), 720px);
  max-height: calc(100dvh - 24px);
  padding: clamp(12px, 3vw, 24px);
  overflow: auto;
  color: #fff;
  background: var(--dark);
  border: 1px solid var(--stroke);
  border-radius: 12px;
}
.gallery-viewer::backdrop {
  background: #100e17dd;
}
.gallery-toolbar,
.gallery-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
.gallery-viewer figure {
  margin: 12px 0;
  text-align: center;
}
.gallery-viewer img {
  width: auto;
  max-width: 100%;
  max-height: min(66dvh, 740px);
  margin: 0 auto;
}
.gallery-viewer figcaption {
  margin-top: 8px;
}

.hero h1 { font-size: clamp(42px, 9vw, 128px); }
.ticker-run span { font-size: clamp(17px, 2.65vw, 38px); }
.client-run li { font-size: clamp(19px, 2.4vw, 34px); }
.kelkey-cover { background: radial-gradient(ellipse at 50% 70%, #137e98, #0d3448 74%, #0e2430); }
.kelkey-case .kelkey-cover .weran-cover-pair { width: min(76%, 690px); }
.campaign-facts { margin-bottom: clamp(42px, 7vw, 90px); padding-block: 22px; border-block: 1px solid var(--stroke); }
.campaign-facts h2 { font-size: clamp(21px, 2.5vw, 30px); margin-bottom: 14px; }
.campaign-facts dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.campaign-facts dl > div { display: flex; flex-direction: column-reverse; justify-content: start; gap: 4px; }
.campaign-facts dt { font-size: .9rem; }
.campaign-facts dd { margin: 0; font: 800 clamp(32px, 5vw, 64px)/1 var(--display); color: var(--case-accent, var(--lime)); }
.campaign-group + .campaign-group { margin-top: clamp(36px, 6vw, 82px); }
.campaign-group > p { margin: 8px 0 20px; max-width: 68ch; color: #5a5362; }

.thrash-cover { background: radial-gradient(ellipse at 50% 70%, #407645, #244426 72%, #172f1b); }
.thrash-case .weran-cover-pair { width: min(76%, 690px); }

.client-run .client-logo { display: flex; align-items: center; flex: none; }
.client-logo img { width: clamp(112px, 14vw, 205px); height: clamp(34px, 4.6vw, 62px); object-fit: contain; }

/* Keep flexible content within its column at narrow viewport widths. */
.work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.service-switch, .closing-grid, .service-panel, .about-grid, .contact-page,
.case-copy, .loop-study, .team-feature { overflow-wrap: anywhere; }
.service-switch > *, .closing-grid > *, .service-panel > *, .about-grid > *,
.contact-page > *, .case-copy > *, .loop-study > *, .team-feature > *,
.brief fieldset { min-width: 0; }
.footer { flex-wrap: wrap; }
.footer p { flex: 1 1 240px; }
.footer div { flex-wrap: wrap; }
.gallery-viewer { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.gallery-viewer img { max-height: min(66vh, 740px); max-height: min(66dvh, 740px); }

@media (max-width: 900px) {
  .contact-page, .case-copy { grid-template-columns: minmax(0, 1fr); }
  .contact-page h1 { font-size: clamp(40px, 9vw, 76px); }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .footer p { flex: auto; }
  .nav nav { justify-content: flex-start; gap: 0 16px; }
  .nav nav a { display: flex; align-items: center; min-height: 40px; }
  html { scroll-padding-top: 170px; }
  .hero h1 { font-size: clamp(32px, 10vw, 65px); }
  .page-intro h1 { font-size: clamp(38px, 10.5vw, 70px); }
  .contact-page h1 { font-size: clamp(40px, 10.5vw, 70px); }
}
@media (max-width: 390px) {
  .campaign-facts dl { grid-template-columns: minmax(0, 1fr); }
  .project-info { flex-wrap: wrap; }
  .brief .actions button { width: 100%; }
  .gallery-viewer .pill { padding-inline: 10px; white-space: normal; }
}

.ibafe-cover { background: radial-gradient(ellipse at 50% 70%, #486341, #1a3528 72%, #14251d); }
.ibafe-print { padding-bottom: clamp(26px, 4vw, 54px); }
.ibafe-print video { display: block; width: 100%; max-height: 72vh; margin: 18px 0 12px; border-radius: 12px; background: var(--dark); }

.project-info { display: block; }
.project-info .project-description { max-width: 55ch; margin: 6px 0 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }

/* Give portrait artwork the full reading width on phones. */
@media (max-width: 600px) {
  .weran-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .weran-gallery img {
    width: 100%;
    height: auto;
  }
  .weran-gallery figcaption { font-size: .9rem; }
  .gallery-viewer .pill { min-height: 44px; }
}

.collagen-cover { background: radial-gradient(ellipse at 50% 62%, #8b4a2d, #502719 68%, #2c1714); }
.collagen-case .collagen-cover .weran-cover-pair { width: min(83%, 700px); }

.herbal-logo-panel { display:grid; place-items:center; min-height:clamp(220px, 35vw, 420px); margin:0; padding:32px; border-radius:12px; background:#17382d; }
.herbal-logo-panel img { width:min(100%, 500px); height:auto; }
.herbal-card { aspect-ratio:2.14; background:#e8d7b9; }
.herbal-packaging { margin-bottom:clamp(42px, 8vw, 100px); }
.herbal-packaging figure { margin:18px 0 0; }
.herbal-packaging img { width:100%; height:auto; border-radius:12px; }
.herbal-packaging figcaption { margin-top:10px; color:var(--muted); }
@media(max-width:720px) { .herbal-card { aspect-ratio:1.5; } }


.herbal-card { aspect-ratio: auto; }
.herbal-card-images, .herbal-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.herbal-card-images img { aspect-ratio: 1 / 2; }
.herbal-gallery { gap: clamp(12px, 2vw, 26px); }
.herbal-gallery img { display: block; }
@media (max-width:600px) { .herbal-gallery { grid-template-columns: minmax(0,1fr); } }

.abuki-set { margin-top: clamp(22px, 4vw, 46px); }
.abuki-set .herbal-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
.abuki-set img { max-height: 660px; object-fit: contain; background: #1a1618; }
@media(max-width:600px) { .abuki-set .herbal-gallery { grid-template-columns: minmax(0,1fr); } }

.abuki-applications { margin-top: 18px; }
.abuki-applications figure { margin: 0; }

.abuki-reference img { display:block; width:100%; height:auto; border-radius:12px; }
.abuki-reference figcaption { margin-top:10px; color:var(--muted); }

.client-run .client-resolytics {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.client-resolytics img {
  width: auto;
  height: clamp(26px, 3.2vw, 46px);
}
.client-resolytics span {
  color: var(--muted);
  font: 600 .68rem/1.2 Inter, Arial, sans-serif;
  letter-spacing: 0;
}

@media (max-width: 820px) {
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(14px, 3.5vw, 28px);
    padding-block: 8px;
  }
  .nav .logo {
    flex: none;
    padding: 0;
    min-height: 40px;
    font-size: clamp(19px, 3.8vw, 29px);
  }
  .nav nav {
    min-width: 0;
    justify-content: flex-start;
    gap: 0 clamp(9px, 2.1vw, 20px);
    border: 0;
    padding: 0;
    font-size: clamp(.72rem, 2.3vw, .9rem);
  }
  .nav nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-block: 0;
  }
}

.cessida-cover {
  display: block;
  width: min(100%, 900px);
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
}
.cessida-card { background: #2c241f; }
.cessida-identity { margin-bottom: clamp(22px, 3.3vw, 44px); }
.cessida-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(18px, 3vw, 36px);
  margin-top: 24px;
}
.cessida-boards figure { margin: 0; }
.cessida-boards img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1420 / 1174;
  border-radius: 12px;
}
.cessida-boards figcaption { margin-top: 8px; color: var(--muted); }

.brand-concepts { margin-bottom: clamp(22px, 3.3vw, 44px); }
.brand-concepts h2 { margin: 10px 0 24px; }
.brand-concepts-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); }
.brand-concepts figure { margin: 0; }
.brand-concepts figcaption { margin-top: 10px; color: var(--muted); }
.brand-photo { position: relative; overflow: hidden; border-radius: 12px; }
.brand-photo > img:first-child { display: block; width: 100%; height: auto; }
.brand-photo .brand-photo-mark { position: absolute; top: 5%; left: 4%; width: clamp(76px, 17%, 160px); border-radius: 4px; }
.brand-document-mark { width: 120px; height: 68px; object-fit: contain; object-position: left center; }

.editorial-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  border-radius: 12px;
  background: #111111;
}
.spread-page { display: grid; align-content: start; gap: clamp(12px, 2vw, 22px); padding: clamp(22px, 4vw, 56px); }
.spread-page h3 { font-size: clamp(18px, 3vw, 36px); line-height: 1.06; }
.spread-page p { max-width: 42ch; }
.spread-kicker, .spread-page small { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.spread-detail { display: block; width: 100%; height: auto; }
.brand-concepts--fox .spread-cover { background: #033328; color: #fff; }
.brand-concepts--fox .spread-cover .spread-kicker { color: #4ac199; }
.brand-concepts--fox .spread-interior { background: #f0f8f4; color: #164439; }
.brand-concepts--cessida .spread-cover { background: #f5f1ea; color: #2c241f; }
.brand-concepts--cessida .spread-interior { background: #2c241f; color: #f5f1ea; }
.brand-concepts--cessida .spread-interior .spread-kicker { color: #c6a56b; }
.spread-priorities { list-style: none; margin: 0; padding: 0; }
.spread-priorities li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 12px; padding-block: 14px; border-top: 1px solid #16443942; }
.spread-priorities span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: #bcebd8; border-radius: 50%; font-weight: 700; font-size: .8rem; }
.spread-priorities h4 { margin-bottom: 4px; }
@media (max-width: 680px) { .editorial-spread { grid-template-columns: 1fr; } }

.zest-mockups img { aspect-ratio: 3 / 2; object-fit: cover; }

.team-feature .designer-name, .page-intro .designer-name { font-weight: 750; font-size: clamp(1.25rem, 2.3vw, 1.8rem); margin-bottom: .35rem; }
.team-feature .designer-name + p { margin-top: 0; }
.team-feature .designer-portrait, .about-grid .designer-portrait { display: block; width: min(100%, 390px); aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center 30%; border-radius: 12px; justify-self: center; }

.divine-cover img { display: block; width: 100%; height: auto; border-radius: 12px; }
.divine-card { background: #173607; }
.divine-card img { object-fit: contain; }
.divine-boards img { aspect-ratio: auto; }

.logo { gap: 8px; flex-shrink: 0; }
.logo img { display: block; height: auto; }
.logo .site-logo-mark { width: clamp(22px, 3vw, 34px); }
.logo .site-logo-wordmark { width: clamp(95px, 12vw, 158px); }
@media (prefers-reduced-motion: no-preference) {
  .nav .site-logo-mark { animation: site-logo-bounce .7s ease-in-out .25s 2; }
  .nav .logo:is(:hover, :focus-visible) .site-logo-mark { animation-name: site-logo-bounce-interaction; }
}
@keyframes site-logo-bounce {
  0%, 55%, 100% { transform: translateY(0); }
  28% { transform: translateY(-5px); }
  72% { transform: translateY(-2px); }
}
@keyframes site-logo-bounce-interaction {
  0%, 55%, 100% { transform: translateY(0); }
  28% { transform: translateY(-5px); }
  72% { transform: translateY(-2px); }
}

.service-example strong { color: inherit; }
.service-example a { text-decoration: underline; text-underline-offset: .2em; }
.process-intro { max-width: 66ch; margin-block: 14px 24px; }
.motion-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 28px); }
.motion-frames figure { margin: 0; }
.motion-frames img { display: block; width: 100%; height: auto; border-radius: 12px; }
.motion-frames figcaption { margin-top: 8px; color: var(--muted); }
@media (max-width: 560px) { .motion-frames { grid-template-columns: 1fr; } }

.selected-work-cta { display: flex; justify-content: center; margin-top: clamp(26px, 5vw, 54px); }
.selected-work-cta .pill { min-height: 56px; padding-inline: 32px; font-size: 1rem; }
.selected-work-cta .pill:is(:hover, :focus-visible, :active) { background: #2450df; color: #fff; transition-property: transform; }

.testimonial { max-width: 740px; margin-block: clamp(18px, 3vw, 30px); }
.testimonial h2 { font-size: 1.1rem; margin-bottom: 10px; }
.testimonial [data-testimonial-slides] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.testimonial figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cce8f44a;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 33% 12px at 48% 0, #ffffff96, transparent),
    radial-gradient(ellipse 40% 24px at 30% 100%, #9ce4e433, transparent),
    linear-gradient(160deg, #556166cc, #33393dea 44%, #393f43ee 74%, #48565bdb);
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 2px #ffffff50, inset 0 0 17px #c4efff28, 0 5px 14px #0003;
}

@property --testimonial-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.testimonial figure { position: relative; }
.testimonial figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--testimonial-edge-angle, 0deg),
    transparent 0% 8%, #d8ff4355 13%, var(--lime) 18%, transparent 22% 58%,
    #5285ff55 63%, #78a7ff 68%, transparent 72% 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .testimonial figure::after { animation: testimonial-edge-trace 7s linear infinite; }
  .testimonial figure:nth-child(even)::after { animation-delay: -3.5s; }
}
@keyframes testimonial-edge-trace {
  to { --testimonial-edge-angle: 360deg; }
}
.testimonial blockquote { margin: 0; font-size: .875rem; line-height: 1.4; }
.testimonial figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .8rem; }
.testimonial-avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--dark); color: #fff; font-weight: 800; }


@media (max-width: 600px) {
  .testimonial [data-testimonial-slides] { grid-template-columns: 1fr; }
}

#selected { padding-top: clamp(18px, 3vw, 36px); padding-bottom: 0; }
#selected + .testimonial { margin-top: clamp(16px, 2.4vw, 25px); }
.project-edge-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.project-edge-trace rect { fill: none; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 9 91; vector-effect: non-scaling-stroke; }
.project-edge-trace rect:first-child { stroke: var(--lime); filter: drop-shadow(0 0 1px #d8ff4380); }
.project-edge-trace rect:last-child { stroke: #78a7ff; filter: drop-shadow(0 0 1px #5285ff80); stroke-dashoffset: -50; }
@keyframes project-edge-chase {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}

.team-home.section { padding-bottom: clamp(22px, 3vw, 38px); }
.team-home + .closing { padding-top: clamp(22px, 3vw, 38px); }

.project-edge-trace { opacity: 0; }
.project-link:is(:hover, :focus-visible) .project-edge-trace { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .project-link:is(:hover, :focus-visible) .project-edge-trace rect {
    animation: project-edge-chase 5s linear 1;
  }
  .project-link:is(:hover, :focus-visible) .project-edge-trace rect:last-child {
    animation-name: selected-project-blue-chase;
  }
}
@keyframes selected-project-blue-chase {
  from { stroke-dashoffset: -50; }
  to { stroke-dashoffset: -150; }
}

.client-run li {
  border-radius: 10px;
  outline: 1px solid transparent;
  outline-offset: 6px;
  transition: outline-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.client-run li.is-brand-centered {
  color: #78a7ff;
  outline-color: #78a7ff;
  box-shadow: 0 0 18px 5px #5285ff40;
}
.client-run li.is-brand-centered img {
  filter: drop-shadow(0 0 5px #5285ff80);
}
@media (prefers-reduced-motion: reduce) {
  .client-run li { transition: none; }
}

.hiring-fit, .project-evidence { margin-block: clamp(14px, 2.8vw, 34px); }
.hiring-fit { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--stroke); border-radius: 12px; }
.hiring-fit p, .project-evidence p { max-width: 62ch; margin-block: 10px; }
.hiring-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.project-evidence { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(16px, 4vw, 42px); }
.evidence-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.evidence-pair figure { margin: 0; }
.evidence-pair img { display: block; width: 100%; height: auto; border-radius: 10px; }
.evidence-pair figcaption { margin-top: 8px; color: var(--muted); font-size: .88rem; }
@media (max-width: 700px) { .project-evidence { grid-template-columns: 1fr; } }

.case-intro .back { display: inline-flex; align-items: center; min-height: 42px; padding-inline: 14px; border: 1px solid var(--stroke); border-radius: 999px; }
.case-image-viewer { width: min(96vw, 1050px); max-height: 94dvh; padding: 14px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--dark); color: var(--ink); }
.case-image-viewer::backdrop { background: #100e17df; }
.case-image-viewer button { margin-bottom: 12px; cursor: pointer; }
.case-image-viewer img { display: block; width: 100%; max-height: 78dvh; object-fit: contain; }

.about-portrait-frame { position: relative; width: min(100%, 390px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; justify-self: center; }
.about-portrait-frame .designer-portrait { position: absolute; width: 122%; max-width: none; height: auto; aspect-ratio: auto; left: -10%; top: -4%; }


/* Keep decorative overflow and native image dragging from moving the page. */
html { overflow-x: clip; }
img, a[href] { -webkit-user-drag: none; }

.creative-about .page-intro > p:not(.designer-name) { max-width: 56ch; line-height: 1.5; }
.creative-about .hiring-fit h2 { font-size: clamp(2rem, 5vw, 4rem); }
.creative-proof { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 600px) {
  .hero-copy { max-width: 37ch; line-height: 1.5; }
  .team-feature h2 { font-size: clamp(2rem, 11vw, 3.6rem); text-wrap: balance; }
  .team-feature .designer-portrait, .creative-about .designer-portrait { width: min(100%, 300px); }
  .creative-about .page-intro > p:not(.designer-name) { margin-top: 14px; }
  .creative-about .hiring-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .creative-about .hiring-links .pill { min-height: 46px; padding-inline: 6px; }
  .creative-about .about-grid p { margin-block: 14px; }
}