.project-visual{padding:0;overflow:hidden}
.project-visual img{width:100%;height:100%;max-height:none;object-fit:cover}
.project-gallery{display:grid;gap:clamp(.5rem,.85vw,.85rem);margin:0;padding:clamp(.5rem,.85vw,.85rem);background:var(--paper,#fff)}
.case-intro .lead{font-size:clamp(1.35rem,2.4vw,2.15rem);line-height:1.15}
.case-role-title{margin:0 0 1rem;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:700;letter-spacing:.08em;line-height:1.1;text-transform:uppercase}
.project-gallery figure{margin:0;padding:0;width:100%;overflow:hidden;border-radius:clamp(.45rem,.6vw,.65rem);background:#111}
.project-gallery img{display:block;width:100%;height:auto;max-width:none;object-fit:cover}
.project-gallery .landscape img{width:100%;height:auto;min-height:0;object-fit:contain}
.project-gallery .landscape.is-contained img{width:100%;height:auto;min-height:0;object-fit:contain}
.project-gallery figure+figure{margin-top:0}
.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,.85vw,.85rem);background:transparent}
.image-pair figure{min-width:0}
.image-pair img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.project-gallery .device-showcase{display:grid;aspect-ratio:1/1;place-items:center;padding:clamp(2rem,5.5vw,6rem);background:radial-gradient(circle at 32% 46%,rgba(145,62,22,.44),transparent 33%),radial-gradient(circle at 76% 16%,rgba(82,39,20,.3),transparent 30%),linear-gradient(145deg,#1b110d,#0d0907 72%)}
.project-gallery .ollie-explorer-showcase{display:grid;aspect-ratio:1/1;place-items:center;padding:0;background:#5d5567}
.project-gallery .ollie-explorer-showcase img{width:auto;height:84%;max-width:58%;object-fit:contain;filter:drop-shadow(0 clamp(1.5rem,3vw,3rem) clamp(2rem,5vw,5rem) rgba(26,8,31,.34))}
.device-phone{position:relative;display:block;width:min(52%,18rem);height:auto;max-height:none;aspect-ratio:626/1200;padding:clamp(.28rem,.48vw,.48rem);border:1px solid rgba(255,255,255,.28);border-radius:clamp(2rem,3.4vw,3.4rem);background:linear-gradient(145deg,#4b4b4c 0%,#101011 25%,#29292b 74%,#050505 100%);box-shadow:0 clamp(1.5rem,3vw,3rem) clamp(3rem,6vw,6rem) rgba(0,0,0,.48),inset 0 0 0 1px rgba(0,0,0,.88),inset 0 0 0 2px rgba(255,255,255,.06)}
.device-phone::before{content:"";position:absolute;z-index:2;top:clamp(.7rem,1.05vw,1rem);left:50%;width:24%;height:clamp(.55rem,.85vw,.8rem);border-radius:999px;background:#030303;transform:translateX(-50%);box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.device-phone::after{content:"";position:absolute;top:18%;left:-.18rem;width:.16rem;height:14%;border-radius:.14rem 0 0 .14rem;background:#18181a;box-shadow:0 clamp(4rem,6vw,6rem) 0 #18181a}
.device-phone img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border-radius:calc(clamp(2rem,3.4vw,3.4rem) - .42rem);background:#0b0806}
.stats-block{padding:clamp(3rem,7vw,6rem) clamp(1.5rem,4vw,4rem);border-radius:clamp(.45rem,.6vw,.65rem);background:#f5f5f3;color:var(--ink)}
.stats-protected{position:relative;min-height:clamp(31rem,42vw,42rem);overflow:hidden}
.stats-protected-content{transition:filter .25s ease,opacity .25s ease}
.stats-protected:not(.is-unlocked) .stats-protected-content{filter:blur(18px);opacity:.52;pointer-events:none;user-select:none}
.stats-gate{position:absolute;z-index:2;inset:0;display:grid;place-content:center;justify-items:center;gap:1.25rem;padding:2rem;text-align:center}
.stats-gate h2{max-width:12ch;margin:0;font-size:clamp(2.8rem,6vw,6rem);font-weight:700;letter-spacing:-.06em;line-height:.9}
.stats-protected.is-unlocked .stats-gate{display:none}
.stats-protected.is-unlocked .stats-protected-content{filter:none;opacity:1}
.stats-block>h2{margin:0 0 clamp(2.5rem,5vw,4.5rem);font-size:clamp(1.5rem,2.5vw,2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1;text-transform:none}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{min-width:0;padding:clamp(1.5rem,3vw,2.5rem)}
.stat+.stat{border-left:1px solid var(--line)}
.stat-value{display:flex;align-items:center;gap:.08em;margin-bottom:clamp(1.5rem,3vw,3rem);font-size:clamp(3rem,5.5vw,6rem);font-weight:700;letter-spacing:-.065em;line-height:.85}
.stat-value svg{flex:0 0 auto;width:.72em;height:.72em;stroke-width:2}
.stat-value svg.is-filled{width:.62em;height:.62em;stroke-width:1.5}
.stat h3{margin:0 0 .4rem;font-size:clamp(1rem,1.4vw,1.25rem);font-weight:400;line-height:1.25}
.stats-case-link{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-width:240px;margin-top:clamp(2rem,3vw,3rem);padding:.55rem .9rem;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-family:inherit;font-size:.9rem;font-weight:400;line-height:1.45;cursor:pointer;transition:color .2s ease,transform .2s ease}
.stats-case-link:before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--acid);transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.stats-case-link span{position:relative;z-index:1}
.stats-case-link svg{display:none!important}
.stats-case-link:hover,.stats-case-link:focus-visible{color:var(--ink);transform:translateY(-2px)}
.stats-case-link:hover:before,.stats-case-link:focus-visible:before{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.stats-case-link,.stats-case-link:before{transition:none}}
@media(min-width:761px){.stats-gate h2{max-width:none;white-space:nowrap}}
@media(max-width:760px) and (hover:none){.stats-case-link:hover{color:#fff;transform:none}.stats-case-link:hover:before{transform:translateY(105%)}}
.stat p{margin:0;color:rgba(17,17,15,.66);font-size:clamp(.9rem,1.15vw,1.05rem);line-height:1.3}
.stat .stat-context{margin-top:.8rem;color:var(--ink);font-weight:650}
@media(min-width:900px){.project-gallery>.square img{min-height:80vh;object-fit:cover}}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(odd){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:680px){.project-gallery{gap:.45rem;padding:.45rem}.image-pair{grid-template-columns:1fr;gap:.45rem}.project-gallery .device-showcase{padding:clamp(1.25rem,8vw,2.25rem)}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.stat+.stat{border-left:0;border-top:1px solid var(--line)}.stat:nth-child(n+3){border-top:1px solid var(--line)}}
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.2vw,1rem);padding:0 var(--pad) var(--pad);border-top:0}
.work .section-head{grid-column:1/-1;margin:0 calc(var(--pad) * -1);border:0}
.work .project{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;width:100%;min-height:0;padding:0;border:0;border-radius:clamp(1.5rem,3vw,2.75rem);overflow:hidden;color:inherit;font:inherit;text-align:left;transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1)}
.work .project:hover,.work .project:focus-visible{transform:translateY(-.35rem)}
.work .project.is-coming-soon{cursor:default}
.work .project.is-coming-soon:hover{transform:none}
.work .project-media{position:relative;aspect-ratio:1/1;margin:clamp(.85rem,1.6vw,1.35rem);overflow:hidden;border-radius:clamp(1rem,2vw,1.8rem);background:rgba(255,255,255,.4)}
.work .project-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.work .project:hover .project-media img,.work .project:focus-visible .project-media img{transform:scale(1.025)}
.work .project-media-contain{padding:clamp(1.25rem,3.5vw,3rem)}
.work .project-media-contain img{object-fit:contain}
.work .project-copy{position:relative;z-index:2;min-height:18rem;padding:clamp(.75rem,1.4vw,1.25rem) clamp(1.25rem,2vw,1.75rem) clamp(1.5rem,2.5vw,2rem)}
.work .project-copy>div:first-child{max-width:none}
.work .project h2{display:flex;align-items:center;gap:.12em;flex-wrap:nowrap;margin:.45rem 0 .8rem;font-size:clamp(2.65rem,4.1vw,4.5rem)}
.work .project p{max-width:34rem;margin:0;font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.35}
.work .project[data-project-visible="false"]{display:none}
.title-arrow{display:inline-flex;flex:0 0 auto;width:.7em;height:.7em}
.title-arrow svg{display:block;width:100%;height:100%}
.title-lock{display:inline-flex;flex:0 0 auto;width:.55em;height:.55em}
.title-lock svg{display:block;width:100%;height:100%}
.work .project:hover .title-arrow,.work .project:focus-visible .title-arrow{animation:title-arrow-nudge 1s ease-in-out infinite}
.work .tags{max-width:calc(100% - 8rem)}
.work .libro{background:#62b9b6}
.work .client-work{background:#d9ff43}
.work .client-work{cursor:pointer}
.work .ollie{background:#f1ccff}
.work .grubhub{background:#ff8000}
.work .client-work h2{max-width:none}
.work .client-work .project-copy>div:first-child{max-width:none}
.card-preview{position:absolute;z-index:1;left:0;right:0;bottom:-11rem;height:30rem;display:flex;align-items:flex-start;justify-content:center;gap:clamp(.75rem,2vw,1.5rem);padding:0 1.25rem;pointer-events:none}
.phone-frame{position:relative;width:min(40%,14rem);padding:.38rem .38rem 0;border:1px solid rgba(255,255,255,.28);border-radius:2.5rem 2.5rem 0 0;background:linear-gradient(145deg,#4a4a50 0%,#111114 30%,#303036 72%,#09090a 100%);box-shadow:0 1.25rem 3rem rgba(48,20,53,.24),inset 0 0 0 1px rgba(0,0,0,.7)}
.phone-frame::before{content:"";position:absolute;z-index:2;top:.72rem;left:50%;width:2.5rem;height:.55rem;border-radius:999px;background:#09090a;transform:translateX(-50%);box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.phone-frame::after{content:"";position:absolute;top:4rem;left:-.16rem;width:.14rem;height:2.4rem;border-radius:.12rem 0 0 .12rem;background:#1b1b1e;box-shadow:0 3rem 0 #1b1b1e}
.phone-frame img{display:block;width:100%;height:auto;border:0;border-radius:2.08rem 2.08rem 0 0;box-shadow:none}
.libro-preview{align-items:flex-start;justify-content:center;gap:0;transform:translateY(-2.25rem)}
.libro-preview img{position:relative;height:auto;filter:drop-shadow(0 1.25rem 1.6rem rgba(12,42,43,.24))}
.libro-preview .libro-desktop{z-index:1;width:min(76%,32rem);margin-right:-8rem;transform:translate(2rem,4.25rem)}
.libro-preview .libro-phone{z-index:2;width:min(50%,18rem)}
@keyframes title-arrow-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.2em)}68%{transform:translateX(.11em)}82%{transform:translateX(.16em)}}
.access-dialog{width:min(38rem,calc(100vw - 2rem));padding:clamp(1.5rem,4vw,3rem);border:0;border-radius:1.25rem;background:#fff;color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.24)}
.access-dialog::backdrop{background:rgba(17,17,15,.58);backdrop-filter:blur(8px)}
.access-dialog[open]{animation:dialog-in .28s cubic-bezier(.2,.8,.2,1)}
.dialog-close{position:absolute;top:1rem;right:1rem;width:2.75rem;height:2.75rem;border:1px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);font:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.dialog-copy h2{max-width:10ch;margin:.6rem 0 1rem;font-size:clamp(2.8rem,6vw,5rem);line-height:.9;letter-spacing:-.06em}
.dialog-copy>p:last-child{max-width:28rem;font-size:1.05rem}
.access-form{display:grid;gap:.7rem;margin-top:2rem}
.access-form label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.password-row{display:grid;grid-template-columns:1fr auto;gap:.55rem}
.password-field{position:relative;min-width:0}
.password-field input{width:100%;min-width:0;padding:.9rem 3.25rem .9rem 1rem;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:inherit}
.password-visibility{position:absolute;top:50%;right:.45rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transform:translateY(-50%)}
.password-visibility:hover{background:#f1f1f1}
.password-visibility:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.password-visibility svg{width:1.2rem;height:1.2rem}
.password-visibility svg[hidden]{display:none}
.password-submit{padding:.9rem 1.2rem;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.password-submit:disabled{opacity:.6;cursor:wait}
.password-hint,.form-status{margin:.2rem 0 0;font-size:.9rem}
.form-status{min-height:1.3em;color:#b12518}
@keyframes dialog-in{from{opacity:0;transform:translateY(1rem) scale(.98)}to{opacity:1;transform:none}}
.next.next-libro{background:#62b9b6}
.next.next-ollie{background:#f1ccff}
.next.next-client{background:#d9ff43}
.other-work{padding:clamp(4rem,8vw,7rem) clamp(.5rem,.85vw,.85rem);background:#fff}
.other-work h2{margin:0 0 1.25rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.other-work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(.65rem,1.1vw,1rem)}
.other-work-card{display:flex;align-items:flex-end;gap:.12em;min-height:clamp(10rem,16vw,17rem);padding:clamp(1.25rem,2.5vw,2rem);border-radius:var(--radius);font-size:clamp(2rem,4vw,4.5rem);font-weight:700;letter-spacing:-.055em;line-height:.9;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.other-work-card:hover,.other-work-card:focus-visible{transform:translateY(-.2rem)}
.other-work-arrow{display:inline-flex;flex:0 0 auto;width:.7em;height:.7em}
.other-work-arrow svg{display:block;width:100%;height:100%}
.other-work-card:hover .other-work-arrow,.other-work-card:focus-visible .other-work-arrow{animation:title-arrow-nudge 1s ease-in-out infinite}
.other-work-card.is-freelance{background:#d9ff43}
.other-work-card.is-ollie{background:#f1ccff}
.other-work-card.is-libro{background:#62b9b6}
.other-work-card.is-grubhub{background:#ff8000}
.placeholder-gallery{min-height:70vh}
.case-placeholder{min-height:52vh;padding:clamp(2rem,6vw,6rem);border-radius:var(--radius);display:flex;flex-direction:column;justify-content:flex-end;background:#ff654f;color:var(--ink)}
.case-placeholder strong{display:block;max-width:12ch;font-size:clamp(3rem,8vw,8rem);line-height:.88;letter-spacing:-.065em}
.case-placeholder p{max-width:32rem;font-size:1.1rem}
.private-placeholder{background:#d9ff43}
.placeholder-pair{display:grid;grid-template-columns:1fr 1fr;gap:inherit}
.placeholder-pair span{min-height:42vw;border-radius:var(--radius);background:linear-gradient(135deg,#ff654f,#ff9a75)}
@media(max-width:760px){.work{grid-template-columns:1fr;gap:.75rem;padding:0 .75rem .75rem}.work .section-head{margin:0 -.75rem}.work .project,.work .project-copy{min-height:27rem}.card-preview{bottom:-14rem;height:29rem;gap:.6rem}.phone-frame{width:42%;padding:.28rem .28rem 0;border-radius:1.75rem 1.75rem 0 0}.phone-frame img{border-radius:1.47rem 1.47rem 0 0}.phone-frame::before{top:.55rem;width:2rem;height:.42rem}.libro-preview{gap:0;transform:translateY(-1.75rem)}.libro-preview .libro-desktop{width:78%;margin-right:-7rem;transform:translate(1.5rem,3.75rem)}.libro-preview .libro-phone{width:50%}.other-work-grid{grid-template-columns:1fr}.other-work-card{min-height:8.5rem}.access-dialog{width:100%;max-width:none;margin:auto 0 0;padding:1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));border-radius:1.25rem 1.25rem 0 0}.access-dialog[open]{animation:sheet-in .32s cubic-bezier(.2,.8,.2,1)}.password-row{grid-template-columns:1fr}.password-submit{width:100%}}
@keyframes sheet-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.hero{grid-template-columns:minmax(0,1.5fr) minmax(16rem,.65fr);align-content:center;align-items:center;gap:clamp(2rem,6vw,6rem)}
.hero-content{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.hero-content h1{max-width:16ch;font-size:clamp(4rem,7vw,7rem);line-height:.95}
.hero-content .hero-bottom{grid-template-columns:minmax(0,42rem);gap:.5rem}
.hero-content .hero-copy{max-width:42rem;margin:0}
.hero-art{width:min(100%,32rem);margin:0;justify-self:end}
.hero-art .hero-drawing{display:block;width:100%;height:min(68vh,44rem);border:0}
.hero-art .hero-drawing>img,.hero-art .hero-drawing>svg{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.hero{min-height:auto;grid-template-columns:1fr;gap:0}.hero-content{gap:1.5rem}.hero-content h1{font-size:clamp(3.25rem,13vw,3.5rem)}.hero-content .hero-bottom{grid-template-columns:1fr;gap:.75rem}.hero-art{display:none}}
@media(max-width:760px){.work .project,.work .project-copy{min-height:0}.work .project-media{aspect-ratio:1/1;margin:.75rem}.work .project-copy{padding:1rem 1.25rem 1.5rem}.work .project h2{font-size:clamp(3rem,15vw,4.4rem)}}