:root{--paper:#f8f8f7;--ink:#191b1b;--subtle:#626663;--rule:#dadcda;--hover:#f0f1ef}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* Portfolio */
.home-page .page{max-width:1200px;padding:0 40px}
.home-page header{min-height:98px;grid-template-columns:1fr auto 1fr;gap:24px}
.home-page .logo{font:700 16px/1 Inter,Arial,sans-serif;letter-spacing:-.04em;white-space:nowrap}
.home-page .logo span{color:var(--ink);font-family:Anton,Impact,sans-serif;font-size:22px}
.home-page nav{gap:38px}.home-page nav a{font-size:13px;text-transform:none;opacity:1}
.home-page nav a:hover{color:var(--subtle)}
.home-page .cv-btn{border:0;padding:0;gap:12px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400}
.home-page .cv-btn:hover{background:none;color:var(--subtle);transform:none}
.home-page .hero{min-height:0;grid-template-columns:minmax(0,1fr) 200px;gap:40px;border:0;padding:88px 0 175px;overflow:visible}
.home-page .hero-copy{padding:0}
.home-page .eyebrow{color:var(--subtle);font-size:12px;letter-spacing:.07em}
.home-page .hero h1{font:400 clamp(92px,12vw,166px)/.88 Inter,Arial,sans-serif;letter-spacing:-.095em;text-transform:none;margin:52px 0 0 -9px;max-width:none}
.home-page .hero h1 .lime{color:var(--ink)}
.home-page .hero-sub{max-width:540px;font-size:22px;line-height:1.3;letter-spacing:-.04em;color:var(--ink);margin:95px 0 26px}
.home-page .hero-cta{display:inline-flex;gap:30px;padding:12px 19px 12px 20px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);text-transform:none;font-size:12px;line-height:1.3}
.home-page .hero-cta:hover{background:#4b4e4c;color:#fff;transform:translateY(-2px)}
.home-page .hero-visual{background:none;min-height:0;display:flex;align-items:center;justify-content:flex-start}
.home-page .hero-visual span{font-size:13px;line-height:1.4;margin-top:80px}
.home-page .section{border-top:0;padding:0}
.home-page #work{padding-bottom:155px}
.home-page .section-heading{align-items:end;margin-bottom:26px}
.home-page .section-heading h2{font:400 clamp(30px,3.8vw,47px)/1 Inter,Arial,sans-serif;text-transform:none;letter-spacing:-.06em;color:var(--ink)}
.home-page .section-heading>span{font-size:13px;color:var(--subtle)}
.home-page .projects{display:block;border-top:1px solid var(--rule)}
.home-page .project-card,.home-page .project-card.featured{display:block;min-height:0;background:none;border:0;border-bottom:1px solid var(--rule);transition:background .2s ease,padding .2s ease}
.home-page .project-card:hover,.home-page .project-card:not(a):hover{background:none;border-color:var(--rule);transform:none}
.home-page .project-card.featured:hover{background:var(--hover);padding:0 15px}
.home-page .project-image,.home-page .project-card.featured .project-image{display:none}
.home-page .project-meta{padding:23px 0;align-items:center;gap:24px}
.home-page .project-meta>div{display:grid;grid-template-columns:minmax(0,1fr) 260px 55px;align-items:center;gap:14px;width:100%}
.home-page .project-card h3{grid-column:1;grid-row:1;font:400 clamp(29px,4vw,49px)/1 Inter,Arial,sans-serif;letter-spacing:-.065em;text-transform:none;margin:0}
.home-page .project-card p{grid-column:2;grid-row:1;font-size:13px;text-transform:none;color:var(--subtle);margin:0}
.home-page .project-num{grid-column:3;grid-row:1;text-align:right;font:400 24px/1 Anton,Impact,sans-serif;color:var(--ink)}
.home-page .arrow{display:none}.home-page .project-card.featured .arrow{display:block;font:18px/1 Inter,Arial,sans-serif;color:var(--ink)}
.home-page .project-card.featured .project-meta::after{display:none}
.home-page #about{display:flex;flex-direction:column-reverse;align-items:stretch;gap:48px;padding-bottom:160px}
.home-page .statement h2{font:400 clamp(34px,4vw,54px)/1.08 Inter,Arial,sans-serif;letter-spacing:-.06em;text-transform:none}
.home-page .statement h2 span{color:var(--ink)}
.home-page .statement p{max-width:650px;font-size:16px;line-height:1.5;color:var(--subtle);margin:17px 0 0}
.home-page .services-list{border:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.home-page .services-list>.eyebrow{display:none}
.home-page .service{min-height:98px;padding:21px 24px;border-top:1px solid var(--rule);font-size:14px;font-weight:500;text-transform:none;gap:15px}
.home-page .service:nth-child(3n + 2){padding-left:0}
.home-page .service .icon{border:0;border-radius:0;font:400 14px/1 Inter,Arial,sans-serif;color:var(--subtle);width:22px;height:22px}
.home-page .background-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 90px;padding-bottom:150px}
.home-page .background-intro{grid-row:1/span 3}.home-page .background-intro h2{font:400 clamp(38px,4vw,56px)/1.05 Inter,Arial,sans-serif;letter-spacing:-.065em;text-transform:none;margin:16px 0 20px}
.home-page .background-intro p{max-width:410px;font-size:16px;line-height:1.5;color:var(--subtle)}
.home-page .timeline{padding:21px 0;border-left:0;border-top:1px solid var(--rule)}
.home-page .timeline .label{font-size:17px;font-weight:500;text-transform:none;color:var(--ink)}
.home-page .timeline .year{font-size:13px;color:var(--subtle);margin:6px 0 2px}.home-page .timeline p{font-size:13px;color:var(--subtle);margin:0}
.home-page .contact{grid-template-columns:1.1fr .9fr;gap:60px;padding-bottom:110px}
.home-page .contact-copy h2{font:400 clamp(42px,5vw,67px)/1.04 Inter,Arial,sans-serif;letter-spacing:-.07em;text-transform:none;margin:17px 0 0}
.home-page .contact-copy h2 span{color:var(--ink)}
.home-page .contact-copy p{color:var(--subtle);font-size:15px;line-height:1.5}
.home-page form{gap:18px;align-content:center}
.home-page input,.home-page select,.home-page textarea{background:none;color:var(--ink);border:0;border-bottom:1px solid var(--rule);padding:13px 0;font-size:13px}
.home-page input::placeholder,.home-page textarea::placeholder{color:var(--subtle)}
.home-page input:focus,.home-page select:focus,.home-page textarea:focus{border-color:var(--ink)}
.home-page textarea{min-height:86px}.home-page .send{border-radius:999px;background:var(--ink);color:#fff;font-size:12px;text-transform:none;justify-self:end;padding:13px 20px}.home-page .send:hover{background:#4b4e4c}
.home-page footer{border-color:var(--rule);color:var(--subtle);font-size:12px;padding:23px 0 30px}.home-page footer strong{color:var(--ink)}

/* Case study */
.case-page{background:var(--paper);color:var(--ink)}
.case-page .page{max-width:1200px;padding:0 40px}
.case-page .display{font-family:Inter,Arial,sans-serif;font-weight:400;text-transform:none;letter-spacing:-.07em;line-height:1.02}
.case-page .eyebrow{color:var(--subtle);font-size:12px}
.case-page header{border-color:var(--rule);min-height:98px}.case-page .logo{font:700 16px/1 Inter,Arial,sans-serif}.case-page .logo span{color:var(--ink)}
.case-page nav a,.case-page .header-link{font-size:13px;text-transform:none;font-weight:400}.case-page nav a:hover,.case-page .header-link:hover{color:var(--subtle)}
.case-page .header-link{border:0;padding:0}
.case-page .back{color:var(--subtle);font-size:12px;text-transform:none;margin:34px 0 70px}.case-page .back:hover{color:var(--ink)}
.case-page .intro{padding-bottom:68px}.case-page .intro h1{color:var(--ink);font-size:clamp(90px,13vw,174px);margin:22px 0 0}.case-page .intro h1 span{color:var(--ink)!important}
.case-page .intro-copy p{color:var(--ink);font-size:22px;letter-spacing:-.04em}.case-page .intro-copy small{color:var(--subtle)}
.case-page .meta{border-color:var(--rule);padding:22px 0}.case-page .meta dt{color:var(--subtle);font-size:11px}.case-page .meta dd{color:var(--ink);font-size:14px}
.case-page .hero-art{background:#ededeb;min-height:420px;height:min(47vw,560px)}
.case-page .hero-art::before{border-color:#2a2d2b;box-shadow:190px 170px 0 -70px #2a2d2b;opacity:.93}.case-page .hero-art::after{background:repeating-linear-gradient(-35deg,transparent 0 31px,rgba(0,0,0,.035) 32px 33px)}
.case-page .art-word{font-family:Inter,Arial,sans-serif;font-weight:500;color:var(--ink);font-size:clamp(75px,12vw,170px);letter-spacing:-.08em;transform:none;text-shadow:none}
.case-page .art-stamp{border-color:var(--ink);color:var(--ink)}
.case-page .section{border-color:var(--rule);padding:95px 0}
.case-page .overview h2,.case-page .visuals h2,.case-page .details h2{font-size:clamp(45px,5vw,70px)}
.case-page .overview .copy p{color:var(--ink)}.case-page .overview .copy p+p{color:var(--subtle)}
.case-page .visuals-heading p{color:var(--subtle)}
.case-page .visual-one{background:#e4e6e2}.case-page .visual-one::before{border-color:#252826}.case-page .visual-one strong{font-family:Inter,Arial,sans-serif;font-size:clamp(51px,6vw,91px);font-weight:500;color:var(--ink);transform:none;letter-spacing:-.08em;text-transform:none}
.case-page .visual-two{background:#e8e9e7}.case-page .visual-two::before{border-color:#3b3e3b}.case-page .poster{background:#f9f9f7;color:var(--ink);box-shadow:18px 20px 0 #343734}.case-page .poster strong{font-family:Inter,Arial,sans-serif;font-weight:500;letter-spacing:-.08em;text-transform:none;font-size:clamp(55px,6vw,90px)}
.case-page .visual figcaption{background:var(--ink);color:var(--paper)}
.case-page .detail-list,.case-page .detail{border-color:var(--rule)}.case-page .detail span{color:var(--subtle)}.case-page .detail p{color:var(--subtle)}
.case-page .end h2{font-size:clamp(50px,6vw,82px)}.case-page .end h2 span{color:var(--ink)}.case-page .end a{background:var(--ink);color:var(--paper);border-radius:999px;text-transform:none;font-size:12px}.case-page .end a:hover{background:#4b4e4c}
.case-page footer{border-color:var(--rule);color:var(--subtle)}.case-page footer span{color:var(--ink)!important}

@media(max-width:1000px){.home-page .hero{grid-template-columns:minmax(0,1fr) 165px}.home-page .hero h1{font-size:clamp(80px,12vw,125px)}.home-page .project-meta>div{grid-template-columns:minmax(0,1fr) 210px 45px}.home-page .background-grid{gap:0 45px}}
@media(max-width:680px){.home-page .page,.case-page .page{padding:0 18px}.home-page header{min-height:78px;grid-template-columns:1fr auto;gap:12px}.home-page .logo{font-size:14px}.home-page nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:25px;padding:0 0 15px}.home-page .cv-wrap{display:block;grid-column:2;grid-row:1}.home-page .cv-btn{font-size:11px}.home-page .hero{display:block;padding:65px 0 120px}.home-page .hero h1{font-size:clamp(62px,13.6vw,92px);margin:40px 0 0 -5px}.home-page .hero-sub{font-size:19px;margin:70px 0 25px}.home-page .hero-visual{display:none}.home-page #work,.home-page #about{padding-bottom:115px}.home-page .section-heading>span{display:none}.home-page .project-meta{padding:18px 0}.home-page .project-meta>div{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:2px 10px}.home-page .project-card h3{font-size:clamp(27px,6.5vw,39px)}.home-page .project-card p{grid-column:1;grid-row:2;font-size:12px}.home-page .project-num{grid-column:2;grid-row:1/span 2;font-size:21px}.home-page .project-card.featured .arrow{font-size:14px}.home-page .services-list{grid-template-columns:1fr 1fr}.home-page .service{min-height:83px;padding:17px 10px}.home-page .service:nth-child(3n + 2){padding-left:10px}.home-page .service:nth-child(even){padding-left:0}.home-page .background-grid{display:block;padding-bottom:110px}.home-page .background-intro{margin-bottom:38px}.home-page .contact{display:block;padding-bottom:95px}.home-page form{margin-top:35px}.home-page footer{flex-wrap:wrap}.case-page .intro{display:block}.case-page .intro h1{font-size:clamp(70px,17vw,110px)}.case-page .intro-copy{margin-top:28px}.case-page .hero-art{min-height:300px}.case-page .art-word{font-size:clamp(57px,11vw,90px)}.case-page .section{padding:65px 0}.case-page .visual-one strong{font-size:clamp(47px,11vw,68px)}.case-page .poster strong{font-size:clamp(45px,11vw,65px)}}
@media(max-width:380px){.home-page .cv-wrap{display:none}.home-page nav{grid-column:1/-1}.home-page .services-list{grid-template-columns:1fr}.home-page .service,.home-page .service:nth-child(3n + 2),.home-page .service:nth-child(even){padding-left:0}}

/* Focused portfolio and CV */
.home-page header,.case-page header{grid-template-columns:1fr auto}
.home-page .cv-wrap{display:block;grid-column:2;grid-row:1}
.home-page .cv-btn,.case-page .header-link{display:inline-flex;align-items:center;gap:16px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);padding:11px 19px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;transition:background .2s ease,color .2s ease}
.home-page .cv-btn:hover,.case-page .header-link:hover{background:var(--ink);color:var(--paper);transform:none}
.home-page .section-heading h2{font:700 12px/1.35 Inter,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--subtle)}
.home-page .background-grid{grid-template-columns:.7fr 1.3fr;gap:80px;padding-bottom:135px}
.home-page .background-intro{grid-row:auto}
.home-page .cv-history{min-width:0}
.home-page .cv-entry{border-top:1px solid var(--rule);padding:25px 0 28px}
.home-page .cv-entry h3{font:500 clamp(22px,2.4vw,30px)/1.15 Inter,Arial,sans-serif;letter-spacing:-.055em;margin:0 0 6px}
.home-page .cv-meta{color:var(--subtle);font-size:13px;line-height:1.5;margin:0 0 18px}
.home-page .cv-role{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;padding:10px 0;border-top:1px solid #ededeb}
.home-page .cv-role h4{font-size:15px;font-weight:500;line-height:1.35;margin:0}
.home-page .cv-role p{font-size:12px;line-height:1.4;color:var(--subtle);text-align:right;margin:0}
.case-page .header-link{justify-self:end}
.case-page footer a:hover{text-decoration:underline}
@media(max-width:900px){.home-page .background-grid{gap:45px}}
@media(max-width:680px){.home-page header{grid-template-columns:1fr auto;min-height:78px}.home-page .cv-wrap{grid-column:2;grid-row:1}.home-page .cv-btn,.case-page .header-link{padding:10px 15px;font-size:12px}.home-page .background-grid{display:block;padding-bottom:95px}.home-page .background-intro{margin-bottom:38px}.home-page .cv-role{display:block}.home-page .cv-role p{text-align:left;margin-top:3px}.case-page header{grid-template-columns:1fr auto}.case-page .header-link{display:inline-flex}}
@media(max-width:380px){.home-page .cv-wrap{display:block}.home-page .logo{font-size:13px}.home-page .cv-btn{padding:9px 12px;font-size:11px}}

/* Hero portrait */
.home-page .hero{display:block;isolation:isolate;padding-bottom:75px;margin-bottom:100px}
.home-page .hero-copy{position:relative;z-index:2}
.home-page .hero-shadow{position:absolute;left:50%;bottom:0;width:calc(100vw - 24px);height:min(12vw,135px);transform:translateX(-50%);display:block;pointer-events:none;z-index:0}
.home-page .hero-visual{position:absolute;top:auto;bottom:0;right:-12px;width:min(50%,560px);min-height:0;aspect-ratio:1123/1403;display:block;z-index:1}
.home-page .avatar-stage{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.home-page .hero-visual .avatar-layer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.home-page .hero-visual .avatar-body{background-image:var(--avatar-body-src),var(--avatar-body-src);background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.home-page .hero-visual .avatar-layer[hidden]{display:none}
.home-page .avatar-body{z-index:1}.home-page .avatar-outfit{z-index:2}.home-page .avatar-glass{z-index:3}.home-page .avatar-hat{z-index:5}
.home-page .hero-visual .avatar-face-integrated{mask-image:radial-gradient(ellipse 23% 23% at 50% 20%,#000 70%,transparent 100%)}
.home-page .avatar-stage[data-hat="vans"] .avatar-glass:not(.avatar-face-integrated){mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,#000 23%)}
.home-page .avatar-stage[data-hat="vans"] .avatar-face-integrated{clip-path:inset(18% 0 0 0)}
.home-page .avatar-stage[data-hat="vans"]::after{content:"";position:absolute;z-index:4;left:35%;top:20.5%;width:30%;height:4%;border-radius:50%;background:radial-gradient(ellipse at center,rgb(0 0 0 / .24),transparent 72%);filter:blur(4px)}
.home-page .avatar-layer[data-style]{transform-origin:top center}
.home-page .avatar-hat[data-style="vans"]{transform:translateY(.7%) scale(.68);clip-path:inset(0 0 66% 0);filter:drop-shadow(0 3px 2px rgb(0 0 0 / .22))}
.home-page .avatar-hat[data-style="beanie"]{transform:translate(1%,-9%) scale(.46)}
.home-page .hero-visual .avatar-outfit{inset:auto;height:auto}
.home-page .hero-visual .avatar-outfit[data-style="hoodie"]{left:4.5%;top:23.4%;width:91%}
.home-page .hero-visual .avatar-outfit[data-style="ramones"]{left:4%;top:23.7%;width:92%}
.home-page .avatar-control{position:absolute;right:-28px;z-index:5;display:grid;place-items:center;width:42px;height:42px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);font:400 22px/1 Inter,Arial,sans-serif;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease}
.home-page .hero-visual .avatar-control span{margin:0;font:400 22px/1 Inter,Arial,sans-serif}
.home-page .avatar-control:hover{background:var(--ink);color:var(--paper);transform:translateX(3px)}
.home-page .avatar-control:disabled{cursor:wait;opacity:.55}
.home-page .avatar-control-hat{top:8%}.home-page .avatar-control-glass{top:31%}.home-page .avatar-control-body{top:69%}
.home-page .avatar-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1150px){
  .home-page .hero{padding-bottom:0;margin-bottom:70px}
  .home-page .hero-visual{position:relative;top:auto;right:auto;width:min(60%,450px);margin:-30px 0 0 auto}
}
@media(max-width:680px){
  .home-page .hero{margin-bottom:60px}
  .home-page .hero-visual{display:block;width:min(88%,400px);margin:35px auto 0}
}