@font-face{font-family:Manrope;src:url('assets/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Space Grotesk;src:url('assets/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--yellow:#eee66b;--ink:#352a17;--paper:#f7f5e8;--muted:#726a4c;--accent:#5c49c8;--pad:clamp(22px,5vw,88px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr,92px) + 14px)}body{margin:0;background:var(--yellow);color:var(--ink);font-family:Manrope,sans-serif;font-size:17px;line-height:1.6}a{color:inherit;text-underline-offset:5px}a:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}::selection{background:var(--ink);color:var(--yellow)}.skip{position:absolute;left:20px;top:-100px;background:var(--paper);padding:12px;z-index:8}.skip:focus{top:10px}.header{position:fixed;inset:0 0 auto;z-index:6;color:var(--yellow);padding:22px 6%;display:flex;align-items:center;justify-content:space-between;transition:color .25s ease;transform:translateZ(0)}.header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);opacity:0;transition:opacity .3s ease}.header::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + clamp(56px,7vh,96px));z-index:-2;pointer-events:none;background:linear-gradient(#0e1a21f2,#0e1a2155 64%,#0e1a2100);transition:opacity .3s ease}.wordmark{display:inline-block;line-height:0;text-decoration:none}.wordmark-inner{position:relative;display:inline-block}.wordmark-art{display:block;width:clamp(118px,12.4vw,186px);aspect-ratio:496.897/113.516;background:currentColor;-webkit-mask:url("assets/logo-chutney.svg") center/contain no-repeat;mask:url("assets/logo-chutney.svg") center/contain no-repeat}/* The dot is a full stop, so it is treated as one: its bottom edge is the
   baseline and it squashes against that line rather than through it. Every
   transform below scales from the baseline, which is what keeps the squash
   looking planted instead of like a shape growing in mid-air. */
.wordmark-dot{position:absolute;left:95.29%;top:56.65%;width:4.71%;height:20.63%;border-radius:18%;background:currentColor;transform-origin:50% 100%}
.wordmark-dot.is-bouncing{animation:dot-bounce .95s 1 both}
/* A hop with weight on it rather than a thing sliding up and down. It crouches,
   throws itself up thin, hangs at the top, lands fat, then bounces twice more at
   falling heights before settling. Squash and stretch does the work — the dot
   widens as it compresses and narrows as it stretches, so the eye reads mass and
   gravity rather than translation. Each segment carries its own timing function:
   explosive out of the push-off, decelerating all the way up, a real hang at the
   top, accelerating the whole way down. One curve across the whole animation is
   what made the old one feel mechanical. */
@keyframes dot-bounce{
  0%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.55,0,.85,.35)}
  7%{transform:translateY(0) scale(1.24,.74);animation-timing-function:cubic-bezier(.1,.85,.3,1)}
  13%{transform:translateY(-10%) scale(.82,1.24);animation-timing-function:cubic-bezier(.2,.65,.45,1)}
  28%{transform:translateY(-112%) scale(.93,1.1);animation-timing-function:cubic-bezier(.25,.6,.5,1)}
  40%{transform:translateY(-132%) scale(1,1);animation-timing-function:linear}
  45%{transform:translateY(-133%) scale(1,1);animation-timing-function:cubic-bezier(.45,0,.9,.45)}
  57%{transform:translateY(-46%) scale(.9,1.15);animation-timing-function:cubic-bezier(.6,0,.9,.6)}
  64%{transform:translateY(0) scale(1.32,.64);animation-timing-function:cubic-bezier(.1,.85,.35,1)}
  72%{transform:translateY(-34%) scale(.95,1.08);animation-timing-function:cubic-bezier(.3,.6,.5,1)}
  80%{transform:translateY(-40%) scale(1,1);animation-timing-function:cubic-bezier(.45,0,.9,.5)}
  86%{transform:translateY(0) scale(1.14,.86);animation-timing-function:cubic-bezier(.15,.8,.4,1)}
  91%{transform:translateY(-9%) scale(.98,1.03);animation-timing-function:cubic-bezier(.45,0,.9,.5)}
  95%{transform:translateY(0) scale(1.04,.96);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  100%{transform:translateY(0) scale(1,1)}
}.header .wordmark{flex-shrink:0}.header-solid .header,.page .header{color:var(--ink)}.header-solid .header nav,.page .header nav{color:var(--ink)}.header-solid .header::before,.page .header::before{opacity:1}.header-solid .header::after,.page .header::after{opacity:0}.header nav{display:flex;font-family:Manrope,sans-serif;align-items:center;gap:26px;font-size:16px;font-weight:600;letter-spacing:0;color:var(--paper)}.header nav a{text-decoration:none}.header nav a:hover{text-decoration:underline}.header .nav-cta{background:var(--accent);color:var(--paper);padding:13px 20px;border-radius:3px;text-decoration:none;font-size:14px;font-family:Manrope,sans-serif;font-weight:700;letter-spacing:.01em}.header .nav-cta:hover{background:var(--paper);color:var(--accent)}
.hero-scene{position:relative;isolation:isolate;min-height:650px;height:100svh;padding:0;overflow:clip;clip-path:inset(0);background:#101c24;color:var(--yellow)}.hero-backdrop{position:fixed;inset:0;height:100svh;z-index:-2;pointer-events:none;background:#101c24;contain:paint}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.hero-copy{position:absolute;left:6%;top:auto;bottom:calc(56px + clamp(22px,6vh,58px));width:48%;max-width:800px;z-index:1}.hero-scene h1{font-size:clamp(40px,4.5vw,84px);line-height:1.12;letter-spacing:-.035em;font-weight:600;margin:0}.hero-scene h1 span{display:block;margin-top:.4em}.hero-scene h1 em{font-style:italic}.hero-scene h1 .h1-dot{display:inline-block;margin-top:0;width:.115em;height:.115em;border-radius:18%;background:currentColor;margin-left:.04em;vertical-align:baseline}.hero-copy p{margin:clamp(18px,2.4vw,30px) 0 0;font-size:clamp(15px,1.5vw,21px);line-height:1.5;max-width:44ch;color:var(--paper)}#light{animation:window-on 1.5s ease-out .45s both}@keyframes window-on{from{opacity:0}to{opacity:1}}
.audience-bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;background:var(--ink);color:var(--yellow);height:56px;overflow:hidden;z-index:2;font-family:Space Grotesk,Manrope,sans-serif;font-size:15px}.audience-track{display:flex;width:max-content;animation:audiences 110s linear infinite}.audience-track>span{display:flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap}.audience-track .audience-dot{display:inline-block;width:.44em;height:.44em;border-radius:18%;background:currentColor}@keyframes audiences{to{transform:translateX(-50%)}}
.section{padding:90px var(--pad)}h2,h3,p{margin-top:0}h2{font-size:clamp(38px,5vw,76px);line-height:1.08;letter-spacing:-.035em;font-weight:700}h3{font-size:21px;letter-spacing:-.02em}.section-label{font-size:14px;margin-bottom:36px}
.work{background:var(--ink);color:var(--paper)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:48px}.section-heading h2{margin-bottom:0}.section-heading p{max-width:370px;margin-bottom:0}.work-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(16px,2vw,28px)}.work-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}.work-card-media{display:block;overflow:hidden;aspect-ratio:4/3;background:#00000012;border-radius:50% 50% 0 0/32% 32% 0 0}.work-card-media img{display:block;width:100%;height:100%;object-fit:cover;transform:translateZ(0);backface-visibility:hidden;transition:transform .6s cubic-bezier(.2,.7,.3,1)}.work-card:hover .work-card-media img{transform:translateZ(0) scale(1.04)}.work-card-type{font-family:Space Grotesk,Manrope,sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:14px}.work-card-name{display:block;font-family:Space Grotesk,Manrope,sans-serif;font-size:clamp(17px,1.6vw,23px);font-weight:650;letter-spacing:-.025em;line-height:1.15;margin-top:5px}.work-card-name .arrow{display:inline-block;margin-left:5px;font-family:Manrope,sans-serif;font-weight:400;font-size:.8em;transition:transform .25s ease}.work-card:hover .work-card-name{text-decoration:underline;text-underline-offset:5px}.work-card:hover .arrow{transform:translateX(4px)}.work .work-card-type{color:#f7f5e8a6}.work .link-more:hover{color:var(--yellow)}
.services{background:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:9vw}.services-intro h2{max-width:440px}.services-intro>p{max-width:350px}.service-list{padding-top:10px}details{border-top:1px solid var(--ink)}details:last-child{border-bottom:1px solid var(--ink)}summary{list-style:none;cursor:pointer;font-size:clamp(20px,2vw,29px);letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:25px 0;font-weight:600}summary::-webkit-details-marker{display:none}summary span{font-size:28px;font-weight:400}details[open] summary span{transform:rotate(45deg)}details p{max-width:460px;margin:0 35px 28px 0;font-size:16px}.services summary:hover{color:var(--accent)}.work a:focus-visible,.services summary:focus-visible{outline-color:var(--accent)}.working{display:grid;grid-template-columns:1fr 1fr;gap:9vw}.working p{max-width:520px}.contact{background:var(--ink);color:var(--paper)}.contact h2{font-size:clamp(60px,10vw,155px);letter-spacing:-.04em;line-height:1;margin-bottom:70px}.contact h2 span{color:var(--yellow)}.contact-bottom{display:flex;align-items:start;justify-content:space-between;gap:clamp(28px,5vw,80px)}.contact-intro{flex:1 1 340px;max-width:400px}.enquiry{flex:1 1 400px;max-width:520px;display:grid;gap:16px;font-size:15px}.enquiry .field{display:grid;gap:7px}.enquiry label{font-family:Space Grotesk,Manrope,sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em}.enquiry label span{font-weight:400;color:#f7f5e8b3}.enquiry .helper{max-width:none;margin:0;font-size:13px;color:#f7f5e8b3}.enquiry input,.enquiry textarea{width:100%;min-width:0;font:inherit;color:var(--paper);background:#f7f5e814;border:1px solid #f7f5e859;border-radius:3px;padding:11px 13px}.enquiry textarea{min-height:104px;resize:vertical}.enquiry input:hover,.enquiry textarea:hover{border-color:#f7f5e8a6}.enquiry input:focus-visible,.enquiry textarea:focus-visible,.enquiry button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.enquiry input::placeholder{color:#f7f5e880}.enquiry input:-webkit-autofill{-webkit-text-fill-color:var(--paper);box-shadow:inset 0 0 0 999px var(--ink)}.enquiry button{justify-self:start;font-family:Space Grotesk,Manrope,sans-serif;font-size:15px;font-weight:650;padding:15px 26px;border:0;border-radius:3px;background:var(--yellow);color:var(--ink);cursor:pointer}.enquiry button:hover{background:var(--accent);color:var(--paper)}.enquiry button:disabled{opacity:.55;cursor:progress}.enquiry .consent{max-width:none;margin:0;font-size:12.5px;color:#f7f5e8b3}.enquiry .status{max-width:none;margin:0;font-size:14px}.enquiry .status:empty{display:none}.enquiry .status[data-state]{padding:11px 13px;border:1px solid currentColor;border-radius:3px}.enquiry .status[data-state=sent]{color:var(--yellow)}.enquiry .status[data-state=error]{color:var(--paper);border-color:var(--accent)}.enquiry .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.contact-bottom p{max-width:370px;margin:0}.email{font-size:clamp(18px,2.3vw,35px);letter-spacing:-.02em;color:var(--yellow)}@media(min-width:1600px){body{max-width:1800px;margin:auto}.header{max-width:1800px;margin:auto}}@media(max-width:900px){.header nav{gap:18px}.header .nav-cta{max-width:150px;line-height:1.3}.hero-backdrop .hero-art{width:177.78%;max-width:none;left:-65%;height:100%}}
@media(max-width:700px){.header{padding:26px 7%;align-items:start;gap:15px}.header nav{justify-content:end;flex-wrap:wrap;gap:12px 16px;font-size:13px;max-width:230px}.header .nav-cta{max-width:none;font-size:12px;padding:9px 12px}.hero-scene{min-height:700px}.hero-copy{left:7%;top:25%;bottom:auto;width:86%;max-width:460px}.hero-copy p{font-size:14.5px;line-height:1.45;margin-top:14px;max-width:none}.hero-scene h1{font-size:clamp(34px,8.8vw,61px);line-height:1.12}.hero-art{object-position:65% center}.hero-scene:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0b182299,transparent 75%)}.audience-track>span{gap:24px;padding-right:24px}.audience-bar{font-size:13px}.section{padding:55px var(--pad)}.section-heading,.contact-bottom{align-items:start;flex-direction:column;gap:28px}.services,.working{grid-template-columns:1fr;gap:25px}.section-heading{margin-bottom:30px}.section-heading p{font-size:15px}.contact h2{margin-bottom:40px}.email{overflow-wrap:anywhere}.working h2{margin-bottom:0}}
@media(max-width:380px){.contact h2{font-size:50px}.header{padding-left:5%;padding-right:5%;gap:10px}.header .wordmark{font-size:27px}.header nav{gap:10px 12px}.header .nav-cta{font-size:11px;padding:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#light,.audience-track,.wordmark-dot,.wordmark-dot.is-bouncing{animation:none}.hero-backdrop{position:absolute}.audience-track{transform:none}}
/* ---- multi-page shell ---- */
.page{background:var(--yellow);padding-top:var(--hdr,92px)}.page .header nav{color:var(--ink)}.page-head{padding:clamp(10px,2vw,28px) var(--pad) clamp(34px,5vw,64px)}.page-head h1{font-size:clamp(40px,6vw,100px);line-height:1.03;letter-spacing:-.04em;margin:0 0 22px;max-width:18ch}.page-head .lede{font-size:clamp(16px,1.55vw,21px);line-height:1.5;max-width:54ch;margin:0}
/* ---- shared link and button ---- */
.link-more{font-family:Space Grotesk,Manrope,sans-serif;font-size:15px;font-weight:650;text-underline-offset:6px}.link-more:hover{color:var(--accent)}.button{display:inline-block;font-family:Space Grotesk,Manrope,sans-serif;font-size:15px;font-weight:650;text-decoration:none;background:var(--yellow);color:var(--ink);padding:15px 26px;border-radius:3px}.button:hover{background:var(--paper);color:var(--accent)}.chip{font-size:11px;border:1px solid;padding:3px 8px;border-radius:12px;font-weight:500;letter-spacing:0;vertical-align:middle;white-space:nowrap}
/* ---- home: two kinds of good website ---- */
.mission{position:relative;background:var(--yellow);overflow:clip;display:flow-root;padding:clamp(36px,4.6vw,68px) var(--pad) clamp(40px,5.2vw,76px)}.mission-photo{float:left;width:clamp(180px,25.5vw,344px);margin:0 clamp(20px,2.6vw,42px) clamp(12px,1.4vw,18px) 0;shape-outside:margin-box}.mission-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}.mission-lead{font-family:Fraunces,Georgia,serif;font-weight:380;font-size:clamp(27px,3.5vw,54px);line-height:1.14;letter-spacing:-.022em;margin:0 0 clamp(16px,2vw,28px);font-variation-settings:"opsz" 120,"SOFT" 0}.mission-statement{font-family:Fraunces,Georgia,serif;font-weight:380;font-size:clamp(21px,2.45vw,36px);line-height:1.3;letter-spacing:-.012em;margin:0;font-variation-settings:"opsz" 120,"SOFT" 0}.mission-lead .hl{white-space:nowrap;padding:0 .1em;background-image:linear-gradient(var(--paper),var(--paper));background-repeat:no-repeat;background-size:100% .62em;background-position:0 .41em;-webkit-box-decoration-break:clone;box-decoration-break:clone}.mission-more{margin:clamp(22px,2.6vw,34px) 0 0;clear:both}
/* ---- teasers ---- */
.section-more{margin:clamp(26px,3vw,40px) 0 0}.teaser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,4vw,60px);align-items:start;background:var(--paper)}.teaser h2{font-size:clamp(28px,3.4vw,52px);line-height:1.08;margin:0}.teaser p{max-width:48ch;margin:0 0 18px}.teaser .section-label{margin-bottom:16px}
/* ---- work page ---- */
.cases{background:var(--paper);padding-top:clamp(30px,4vw,56px)}.case{padding:clamp(34px,4.2vw,60px) 0;border-bottom:1px solid var(--ink)}.case:last-child{border-bottom:0;padding-bottom:0}.case-type{font-family:Space Grotesk,Manrope,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}.case h2{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:clamp(32px,4.2vw,64px);line-height:1;letter-spacing:-.045em;margin:0 0 12px}.case-sub{font-family:Space Grotesk,Manrope,sans-serif;font-size:clamp(16px,1.7vw,22px);line-height:1.35;margin:0 0 clamp(22px,3vw,36px);max-width:42ch}.case-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,42px);max-width:1180px}.case-body p{margin:0;font-size:clamp(15px,1.35vw,17px);line-height:1.6}.case-art{margin:clamp(22px,3vw,34px) 0 0;min-height:clamp(170px,20vw,280px);padding:20px}.case-note{font-size:12px;color:var(--muted);margin:14px 0 0}
/* ---- services page ---- */
.services-page{background:var(--paper);padding-top:0}.service-block{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(14px,3.4vw,56px);padding:clamp(26px,3.2vw,44px) 0;border-bottom:1px solid var(--ink)}.service-block h2{font-size:clamp(23px,2.3vw,34px);line-height:1.16;letter-spacing:-.025em;margin:0}.service-block p{margin:0;max-width:54ch;font-size:clamp(15px,1.4vw,17px);line-height:1.6}.after-launch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,4vw,60px);padding-top:clamp(34px,4vw,58px)}.after-launch h2{font-size:clamp(26px,3vw,42px);margin:0 0 14px}.after-launch p{margin:0 0 16px;max-width:52ch}
/* ---- contact page ---- */
.process{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,26px);max-width:860px}.process li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);padding-top:16px;border-top:1px solid var(--ink)}.process li::before{content:counter(step,decimal-leading-zero);font-family:Space Grotesk,Manrope,sans-serif;font-size:13px;font-weight:650;letter-spacing:.06em;color:var(--muted);padding-top:5px}.process p{margin:0;max-width:56ch;font-size:clamp(15px,1.4vw,17px)}.process strong{display:block;font-family:Space Grotesk,Manrope,sans-serif;font-size:clamp(17px,1.75vw,23px);letter-spacing:-.025em;margin-bottom:2px}.contact-details{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,60px);margin-top:clamp(30px,4vw,50px);font-size:14px}
/* ---- closing call to action ---- */
.cta{background:var(--ink);color:var(--paper);padding:clamp(46px,6vw,96px) var(--pad)}.cta h2{font-size:clamp(34px,5.2vw,80px);line-height:1.02;letter-spacing:-.04em;margin:0 0 18px;max-width:17ch}.cta p{max-width:46ch;margin:0 0 clamp(22px,3vw,32px)}.cta .actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}.cta .button{background:var(--accent);color:var(--paper)}.cta .button:hover{background:var(--paper);color:var(--accent)}.cta .email{font-size:clamp(16px,1.8vw,24px)}
/* ---- about page ---- */
.faq{padding-top:0}.about-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(28px,3vw,44px);font-size:14px}.about-facts h3{font-family:Space Grotesk,Manrope,sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}.about-facts p{margin:0}
/* ---- responsive ---- */
@media(max-width:900px){.mission-photo{float:none;width:min(100%,300px);margin:0 0 clamp(18px,3vw,26px)}.case-body,.teaser,.service-block,.after-launch,.about-facts{grid-template-columns:1fr}.page .header{padding:24px 6% 4px}.about-facts{gap:20px}}
@media(max-width:700px){.page-head h1{font-size:clamp(32px,8.6vw,52px)}.mission-lead{font-size:clamp(23px,6.4vw,32px)}.mission-statement{font-size:clamp(20px,5.4vw,26px)}.page{padding-top:var(--hdr,118px)}.header::after{height:calc(100% + 34px)}.process li{grid-template-columns:1fr;gap:4px}.process li::before{padding-top:0}.cta .actions{flex-direction:column;align-items:flex-start;gap:16px}.case h2{font-size:clamp(28px,8vw,44px)}}
.contact .form-head{font-size:clamp(26px,3vw,42px);letter-spacing:-.03em;line-height:1.05;margin-bottom:clamp(24px,3vw,40px)}.faq .service-list{padding-top:6px}
.contact-intro{max-width:460px}.enquiry-col{flex:1 1 400px;max-width:520px}.contact .process{max-width:none;margin-top:clamp(16px,2.2vw,28px)}.contact .process li{border-top-color:#f7f5e83d}.contact .process li::before{color:#f7f5e8a6}.contact .process strong{color:var(--paper)}.contact-intro .email{display:block;margin-top:clamp(20px,2.6vw,32px)}
/* ---- work index and single case studies ---- */
.work-index{background:var(--paper);padding-top:clamp(30px,4vw,56px)}.work-cards-lg{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(20px,2.4vw,34px)}
.case-single{background:var(--paper);padding-top:clamp(30px,4vw,56px)}.case-single .case-body p{font-size:clamp(16px,1.45vw,18px)}
.page-head .section-label a{text-decoration:none}.page-head .section-label a:hover{text-decoration:underline}.page-head h1 .chip{font-size:clamp(11px,1.1vw,14px);margin-left:clamp(6px,.8vw,12px);vertical-align:middle;font-weight:500;letter-spacing:0}.case-note{max-width:70ch}
@media(max-width:700px){.case-single .case-body{grid-template-columns:1fr}}
@media(max-width:700px){.work-cards,.work-cards-lg{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px}}
/* ---- case study pages: figures, blocks, facts ---- */
.case-hero{margin:0 0 clamp(26px,3.4vw,46px)}
.case-hero img,.case-figure img{display:block;width:100%;height:auto;border:1px solid #352a1729;background:#352a170a}
.case-hero figcaption,.case-figure figcaption{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:11px;max-width:64ch}
.case-figure{margin:0}
/* A band is a figure that is wider than it is tall — a strip of page, a stepped
   list — so it reads better across the full container than squeezed into a
   column. It sits directly after the block it belongs to. */
.case-band{margin-top:clamp(20px,2.8vw,34px)}
.case-block{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,3.2vw,58px);align-items:start;margin-top:clamp(30px,4vw,52px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid #352a172e}
/* .case-block--flip puts the picture on the left and the argument on the right.
   The source order stays text-then-figure, so the reading order never changes —
   only the grid placement does. The column widths swap with it, or the text
   would end up in the wide column and the picture in the narrow one. */
.case-block--flip{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.case-block--flip>.case-text{order:2}
.case-block--flip>.case-figure{order:1}
/* A block with nothing to show reads as a wide paragraph, deliberately. */
.case-block--solo{display:block}
.case-block--solo .case-text{max-width:68ch}
/* Where a block has no screenshot, the second column carries the pieces of the
   job instead: one symbol and one name each. It is the quiet version of a figure
   — a diagram of what the work consisted of, without inventing a picture of it.
   The labels are the project's own scope, not a new list of services.
   The panel is centred against the text rather than stretched to its full height:
   these paragraphs run to 500px, and four tiles sharing that height would be
   slabs with a symbol lost in the corner of each. 132px is big enough to read as
   a card, small enough that the four still read as one object. */
.case-cards{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,132px);gap:12px;margin:0;padding:0;align-self:center;align-content:start}
.case-cards li{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0;padding:17px;border:1px solid #352a1729;border-radius:3px;background:#352a1708;font-size:14.5px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.case-cards svg{flex:none;width:26px;height:26px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Two across needs about 200px a card before the longer labels wrap, and a
   wrapped card next to a short one looks broken. One column below that, where
   the tiles go back to the height of their own contents. */
@media(max-width:560px){.case-cards{grid-template-columns:1fr;grid-auto-rows:auto;align-self:start}.case-cards li{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:13px 15px}}
.case-text{min-width:0}
.case-text h2{font-size:clamp(24px,2.7vw,38px);line-height:1.12;letter-spacing:-.03em;margin:0 0 clamp(12px,1.6vw,20px);max-width:28ch}
.case-text p{max-width:52ch;font-size:clamp(16px,1.45vw,18px)}
.case-text p+p{margin-top:1em}
.case-text p:last-child{margin-bottom:0}
/* Figures inside a two-column row are proof, not decoration: cap the very tall
   and very square ones so they sit beside the text instead of over it. */
.case-figure--square{max-width:min(100%,520px)}
@media(max-width:900px){.case-block{grid-template-columns:1fr;gap:clamp(20px,3vw,28px)}.case-block--flip{grid-template-columns:1fr}.case-block--flip>.case-text,.case-block--flip>.case-figure{order:0}.case-figure--square{max-width:100%}
/* Stacked, there is no second column to keep the measure short, so the cap has
   to do it on its own. 62ch is still a reading line, not a full-width one. */
.case-text p{max-width:62ch}}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(16px,2.4vw,34px);margin-top:clamp(30px,4vw,48px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--ink);font-size:14px}
.case-facts h3{font-family:Space Grotesk,Manrope,sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.case-facts p{margin:0}
@media(max-width:700px){.case-text p,.case-hero figcaption,.case-figure figcaption{font-size:15.5px}}
/* ---- case study split hero: type on the left, screenshot in a browser shell ---- */
.case-head{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(26px,3.6vw,56px);align-items:start;padding-bottom:clamp(26px,3.4vw,44px)}
.case-head h1{font-size:clamp(36px,4.9vw,80px);line-height:1.02;margin:0 0 clamp(14px,1.8vw,20px);max-width:15ch}
.case-head .lede{max-width:46ch}
.case-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:clamp(16px,2vw,24px) 0 0;padding:0}
.case-tags li{font-family:Space Grotesk,Manrope,sans-serif;font-size:11.5px;line-height:1.25;letter-spacing:.07em;text-transform:uppercase;border:1px solid #352a1740;border-radius:999px;padding:5px 11px}
.case-detail{margin:clamp(14px,1.8vw,20px) 0 0;max-width:44ch;font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.55}
.case-detail-label{display:block;font-family:Space Grotesk,Manrope,sans-serif;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#5b5138;margin-bottom:3px}
.browser{margin:0}
.browser-shell{border:1px solid #352a1733;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -28px #352a1759,0 3px 10px -4px #352a1721}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 13px;background:#efece0;border-bottom:1px solid #352a1721}
.browser-dot{display:block;flex:0 0 auto;width:11px;height:11px;border-radius:50%}
.browser-dot--r{background:#ff5f56}.browser-dot--y{background:#ffbd2e}.browser-dot--g{background:#27c93f}
.browser-screen{display:block;line-height:0;background:#efece0}
.case-hero .browser-screen img{display:block;width:100%;height:clamp(210px,29vw,480px);object-fit:cover;object-position:top center;border:0;background:#efece0}
.case-head .case-hero{margin:0}
.case-head .case-hero figcaption{color:#4a3f28;max-width:54ch}
.case-head+.section.case-single{padding-top:clamp(24px,3vw,40px)}
@media(max-width:980px){.case-head{grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}.case-head h1{font-size:clamp(34px,6.4vw,60px);max-width:20ch}.case-head .lede{max-width:52ch}.case-hero .browser-screen img{height:clamp(200px,44vw,380px)}}


/* ---- footer: full-bleed code stream behind an editorial grid ---- */
/* Replaces the old three-line flex footer. Everything footer-specific lives
   here so the earlier rules for it could be deleted outright. */
/* Top padding carries the fixed header's height as well as the band's own: at the
   document bottom the footer's top edge is inside the bar's zone, and without it
   the wordmark sat under the yellow strip on a phone. */
.footer{position:relative;isolation:isolate;overflow:clip;background:#1a150c;color:var(--paper);padding:calc(var(--hdr,92px) + clamp(34px,4.6vw,72px)) var(--pad) clamp(20px,2.4vw,30px)}
/* Layer 1: the studio's own CSS, markup and config scrolling behind the grid.
   aria-hidden and pointer-events:none in the markup, so it is texture only.
   Kept at 12% so the links always win; the columns are one column of code each
   and the mask dissolves both edges so the loop seam is never on screen. */
.footer-stream{position:absolute;inset:0;z-index:-1;display:flex;align-items:flex-start;overflow:hidden;pointer-events:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:2.1;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 74%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 74%,transparent)}
.footer-stream-col{flex:1 1 0;min-width:0;overflow:hidden;white-space:pre;color:#f7f5e81f}
.footer-stream-col pre{margin:0;font:inherit;white-space:pre}
.footer-stream-col .c{color:#a4b2713d}
.footer-stream-col .k{color:#eee66b2b}
.footer-stream-col.is-live{animation:footer-stream linear infinite}
@keyframes footer-stream{from{transform:translateY(0)}to{transform:translateY(calc(-100% / 3))}}
@media(prefers-reduced-motion:reduce){.footer-stream-col.is-live{animation:none}}
/* Layer 2: the editorial grid over the top. */
/* Two nav columns, not four. The project names lived in the Work column and the
   service lines in the Services column; both went on 7 November 2026, along with
   the overflow-wrap that had been letting the mailto address break mid-word
   inside a narrow column. With the halves now even, the address fits on one line
   and .footer-email keeps it there. */
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.footer .wordmark-art{width:clamp(190px,23vw,330px)}
.footer-tagline{font-size:clamp(24px,2.5vw,36px);line-height:1.1;letter-spacing:-.025em;font-weight:600;margin:clamp(18px,2.2vw,28px) 0 0;max-width:20ch}
.footer-sub{margin:clamp(10px,1.4vw,16px) 0 0;max-width:36ch;font-size:14.5px;line-height:1.55;color:#f7f5e8a6}
.footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
.footer-col-title{font-family:Space Grotesk,Manrope,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#f7f5e8b3;margin:0 0 12px}
.footer-cols ul{list-style:none;display:grid;gap:8px;margin:0;padding:0;font-size:14.5px;line-height:1.35}
.footer-cols li{min-width:0}
.footer-cols .footer-email{white-space:nowrap}
.footer-cols a{color:inherit;text-decoration:none}
.footer-cols a:hover{color:var(--yellow);text-decoration:underline;text-underline-offset:4px}
/* The footer mark is a link in there like the rest, so it answers with the same
   yellow. currentColor carries it into both halves of the logotype — the masked
   word and the dot that sits over it — so nothing has to be named twice. */
.footer .wordmark{transition:color .25s ease}
.footer .wordmark:hover{color:var(--yellow)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(10px,1.6vw,24px);margin-top:clamp(34px,4.2vw,60px);padding-top:clamp(14px,1.8vw,20px);border-top:1px solid #f7f5e826;font-size:12.5px;color:#f7f5e8a6}
.footer-bottom p{margin:0}
.footer-utils{list-style:none;display:flex;gap:20px;margin:0;padding:0}
.footer-utils a{color:inherit;text-decoration:none}
.footer-utils a:hover{color:var(--paper)}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}.footer-stream-col:nth-child(n+2){display:none}}
/* On a phone the fixed bar already carries the logotype, 40px above the footer,
   and at the document bottom the footer's top edge sits under that bar — so the
   big wordmark is dropped rather than sliced in half, and the padding keeps the
   first line of text clear of the bar. */
@media(max-width:700px){.footer-stream{display:none}.footer .wordmark{display:none}.footer-cols{grid-template-columns:1fr;gap:clamp(22px,5vw,30px)}.footer-bottom{justify-content:flex-start}.footer{padding-top:calc(var(--hdr,118px) + clamp(40px,10vw,64px))}}

/* ---- phase 3, tentative: the pointer label over work cards ---- */
/* The label is created by motion.js and only appears for a mouse. It is small on
   purpose: a paper pill beside the pointer, not under it, so the real cursor is
   never covered and the card is never hidden. To remove the whole feature, delete
   this block, the "Phase 3, tentative" block at the end of motion.js, and the
   data-cursor attributes on .work-card. */
.cursor-label{position:fixed;left:0;top:0;z-index:7;pointer-events:none;font-family:Space Grotesk,Manrope,sans-serif;font-size:11px;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:var(--paper);border-radius:999px;padding:8px 12px;opacity:0;box-shadow:0 4px 14px -6px #352a1759;transform:translate3d(-200px,-200px,0);transition:opacity .14s ease}
.cursor-label.is-on{opacity:1}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-label{display:none!important}}