:root{
  --cream:#FAF7F1; --oat:#F2EDE4; --card:#FFFFFF; --ink:#1C1B19; --muted:#77706A; --line:#E2DBCF;
  --lime:#D6F35C; --lime-ink:#2B3605;
  --serif:'Instrument Serif',Georgia,serif; --body:Manrope,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(16px,4vw,56px); --radius:24px; --ease:cubic-bezier(.2,.8,.2,1);
  --knit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16'%3E%3Cpath d='M7 15C3.4 13 1.2 8.4 2 2c2.2 2 4.4 6.6 5 13z' fill='%232B3605' fill-opacity='.11'/%3E%3Cpath d='M7 15c3.6-2 5.8-6.6 5-13-2.2 2-4.4 6.6-5 13z' fill='%23fff' fill-opacity='.32'/%3E%3C/svg%3E");
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:clip}
body.is-loading{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
em{font-style:italic}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.narrow{max-width:360px}
.knit,.pill--knit{background-color:var(--lime);background-image:var(--knit);background-size:14px 16px;color:var(--lime-ink)}
.noise{background-color:#CBC2B4;background-image:var(--noise);background-size:220px 220px}
.caret{display:inline-block;width:.55em;height:1.05em;background:currentColor;vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--cream);display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.loader__inner{width:min(100%,520px);display:flex;flex-direction:column;gap:14px}
.loader__prompt{font-size:14px;min-height:1.4em}
.loader__bar{height:6px;border-radius:6px;background:var(--oat);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;border-radius:6px}
.loader__meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* Cursor */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:0;transition:opacity .3s}.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--ink)}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(28,27,25,.3);display:flex;align-items:center;justify-content:center;transition:width .35s var(--ease),height .35s var(--ease),background-color .35s,border-color .35s}
.cursor__label{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--lime-ink);opacity:0;transition:opacity .2s}
.cursor.is-label .cursor__ring{width:76px;height:76px;background-color:var(--lime);border-color:var(--lime)}
.cursor.is-label .cursor__label{opacity:1}
.cursor.is-hover .cursor__ring{width:54px;height:54px;border-color:var(--ink)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (hover:hover) and (pointer:fine){body,a,button{cursor:none}}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad);transition:transform .5s var(--ease),background .3s}
.nav.is-solid{background:rgba(250,247,241,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo{font-family:var(--serif);font-size:26px;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);font-weight:600;font-size:15px}
.nav__links a{text-decoration:none}
.nav__links a:not(.pill){position:relative}
.nav__links a:not(.pill)::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:not(.pill):hover::after{transform:scaleX(1)}
@media (max-width:640px){.nav__links a:not(.pill){display:none}.nav__logo{font-size:22px}}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid transparent;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.pill--lg{padding:15px 28px;font-size:16px}
.pill--knit:hover{background-color:var(--ink);background-image:none;color:var(--lime)}
.pill--line{border-color:var(--ink)}
.pill--line:hover{background:var(--ink);color:var(--cream)}
.pill--dark{background:var(--ink);color:var(--cream);border:0}

.label{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.label--ink{color:var(--lime-ink)}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,88px);line-height:1;letter-spacing:-.02em;margin:0}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:inline-block}

/* Lime marker under a word */
.mark{position:relative;display:inline-block;z-index:0}
.mark__bg{position:absolute;left:-.06em;right:-.08em;bottom:.12em;height:.26em;border-radius:.06em;z-index:-1;transform-origin:left;display:block}

/* Develop from noise: --p goes 0 (noise) → 1 (image) */
.develop{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--oat);--p:1;isolation:isolate}
.develop__img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:blur(calc((1 - var(--p)) * 22px)) saturate(calc(.35 + var(--p) * .65)) contrast(calc(1.35 - var(--p) * .35));transform:scale(calc(1.12 - var(--p) * .12))}
.develop__noise{position:absolute;inset:-20px;opacity:calc(1 - var(--p));mix-blend-mode:normal;pointer-events:none;animation:noise .5s steps(3) infinite}
@keyframes noise{0%{transform:translate(0,0)}33%{transform:translate(-12px,8px)}66%{transform:translate(9px,-10px)}}
.js .develop{--p:0}

/* Hero */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(32px,6vw,96px);padding:120px var(--pad) 70px}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(60px,8.6vw,140px);line-height:.9;letter-spacing:-.03em;margin:0 0 28px}
.hero__sub{font-size:clamp(17px,1.4vw,19px);max-width:470px;margin:0 0 30px;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,52px)}
.hero__stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(38px,3.8vw,54px);letter-spacing:-.02em;line-height:1}
.hero__stats span{font-size:13px;color:var(--muted)}
.hero__visual{position:relative;justify-self:center;width:min(100%,440px);padding-bottom:70px}
.develop--hero{aspect-ratio:4/5;border-radius:30px;box-shadow:0 40px 80px -40px rgba(28,27,25,.35)}
.tag-ai{position:absolute;top:16px;right:16px;font-size:12px;padding:6px 11px;border-radius:999px;background:var(--ink);color:var(--lime);z-index:2}
.prompt{position:absolute;left:-14%;right:4%;bottom:0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:0 24px 50px -20px rgba(28,27,25,.25);display:flex;flex-direction:column;gap:10px;z-index:3}
.prompt__head{display:flex;justify-content:space-between;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.prompt__head b{font-weight:500;color:var(--ink)}
.prompt__text{font-size:13px;line-height:1.55;min-height:3.1em}
.prompt__bar{height:5px;border-radius:5px;background:var(--oat);overflow:hidden}
.prompt__bar span{display:block;height:100%;width:0;border-radius:5px}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:104px;min-height:auto}
  .hero__visual{width:min(100%,380px)}
  .prompt{left:-4%;right:-4%}
}

/* Marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:20px 0}
.marquee__track{display:flex;align-items:center;gap:34px;width:max-content;font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.4vw,46px);color:var(--muted);white-space:nowrap}
.marquee__track i{font-style:normal;font-size:.5em;color:var(--lime-ink);background:var(--lime);width:1.6em;height:1.6em;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}

/* AI wall */
.aiwall{padding:clamp(90px,11vw,150px) var(--pad) clamp(70px,8vw,110px)}
.aiwall__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.aiwall__head .h2{max-width:760px}
.aiwall__track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.aicard{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.aicard .develop{aspect-ratio:3/4;border-radius:20px}
.aicard figcaption{font-size:12px;line-height:1.5;color:var(--muted);min-height:3em}
.aicard figcaption::before{content:'> ';color:var(--ink)}
.aicard:nth-child(even){margin-top:56px}
.aiwall__progress{height:2px;background:var(--line);margin-top:40px;overflow:hidden}
.aiwall__progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left}
@media (max-width:900px){
  .aiwall__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 6px;scroll-padding-left:var(--pad);scrollbar-width:none}
  .aiwall__track::-webkit-scrollbar{display:none}
  .aicard{flex:none;width:64vw;scroll-snap-align:start}
  .aicard:nth-child(even){margin-top:0}
}

/* Work */
.work{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding:clamp(80px,10vw,140px) var(--pad);background:var(--oat);border-radius:40px;margin:0 clamp(8px,1.4vw,20px)}
.work__side{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:20px}
.work__side .h2{font-size:clamp(40px,4.6vw,66px)}
.work__side p{margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:600;transition:background-color .3s,color .3s,border-color .3s}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background-color:var(--lime);background-image:var(--knit);background-size:14px 16px;border-color:var(--lime);color:var(--lime-ink)}
.grid{columns:3 220px;column-gap:14px}
.tile{break-inside:avoid;margin:0 0 14px;position:relative;border-radius:20px;overflow:hidden;background:var(--line);cursor:pointer}
.tile.is-hidden{display:none}
.tile img,.tile video{width:100%;height:auto;object-fit:cover}
.tile img{transition:transform 1s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile video{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .5s}
.tile video.is-ready{opacity:1}
.tile__tags{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:2}
.tile__tag{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(250,247,241,.92)}
.tile__tag.knit{background-color:var(--lime)}
.tile__play{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:rgba(250,247,241,.92);display:flex;align-items:center;justify-content:center;z-index:2}
.tile__play svg{width:14px;height:14px;margin-left:2px}
@media (max-width:900px){.work{grid-template-columns:minmax(0,1fr);border-radius:28px;margin:0 8px}.work__side{position:static}}

/* Results */
.results{padding:clamp(90px,11vw,150px) var(--pad)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px}
.cases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.case{border-top:1.5px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.case__num{font-family:var(--serif);font-weight:400;font-size:clamp(46px,4.4vw,72px);letter-spacing:-.02em;line-height:1}
.case h3{font-size:16px;font-weight:700;margin:6px 0 0}
.case p{margin:0;color:var(--muted);font-size:14.5px}
.case__meta{margin-top:auto;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.case:hover .case__num{color:var(--lime-ink)}
@media (max-width:1100px){.cases{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}}

/* Process */
.process{padding:0 var(--pad) clamp(90px,11vw,150px)}
.process .h2{margin-bottom:44px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.steps li{background:var(--oat);border-radius:24px;padding:26px}
.steps li span{font-size:12.5px;color:var(--muted)}
.steps li.knit span{color:var(--lime-ink)}
.steps h3{font-family:var(--serif);font-weight:400;font-size:32px;letter-spacing:-.01em;margin:12px 0 8px;line-height:1}
.steps p{margin:0;font-size:15px;max-width:300px}

/* Contact */
.contact{padding:0 clamp(8px,1.4vw,20px) 24px}
.contact__panel{border-radius:40px;padding:clamp(44px,7vw,100px) clamp(24px,5vw,80px);display:block}
.contact__title{font-family:var(--serif);font-weight:400;font-size:clamp(54px,8.4vw,136px);line-height:.92;letter-spacing:-.03em;margin:0 0 40px;color:var(--ink)}
.contact__row{display:flex;flex-wrap:wrap;gap:12px}
.contact__row .pill--line{border-color:var(--lime-ink);color:var(--ink)}
.contact__row .pill--line:hover{background:var(--ink);color:var(--lime)}
.contact__photo{margin:0;aspect-ratio:3/5;width:min(100%,290px);justify-self:end;border-radius:28px;transform:rotate(2.5deg);box-shadow:0 30px 60px -30px rgba(43,54,5,.5)}
.copy__hint{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--lime);color:var(--lime-ink)}
.copy.is-copied .copy__hint{background:var(--cream)}
.wordmark{font-family:var(--serif);font-size:14.6vw;line-height:.86;letter-spacing:-.04em;white-space:nowrap;margin:clamp(50px,7vw,100px) 0 0 -.04em;color:var(--ink)}
.wordmark em{color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:24px clamp(8px,2.6vw,36px) 0;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media (max-width:900px){.contact__panel{grid-template-columns:minmax(0,1fr);border-radius:28px}.contact__photo{width:min(100%,300px);justify-self:center}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(28,27,25,.9);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__body img,.lightbox__body video{max-height:88svh;max-width:min(92vw,900px);border-radius:16px}
.lightbox__close{position:absolute;top:16px;right:20px;width:48px;height:48px;border-radius:50%;border:0;background:var(--lime);color:var(--lime-ink);font-size:26px;line-height:1}

@media (prefers-reduced-motion:reduce){
  .caret,.develop__noise{animation:none}
  .js .develop{--p:1}
}
.contact__photo .develop__img{object-position:52% 30%}
@media (max-width:600px){.grid{columns:2;column-gap:10px}.tile{margin-bottom:10px;border-radius:16px}.tile__tag{font-size:10.5px}}
