:root{--bg:#F5F5F5;--ink:#333;--mid:#6E6E6E;--soft:#A8A8A8;--line:#CFCFCF;--dark:#1F1F1F;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Jost',system-ui,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.wrap{max-width:1440px;margin:0 auto;padding:0 48px}
@media(max-width:760px){.wrap{padding:0 20px}}

.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:28px 48px;color:#fff;transition:background .5s var(--ease),color .5s var(--ease),padding .5s var(--ease)}
.nav.solid{background:rgba(245,245,245,.96);color:var(--ink);padding:18px 48px;border-bottom:1px solid var(--line)}
.logo{font-size:15px;letter-spacing:.32em;font-weight:500}
.logo span{font-weight:300;opacity:.7}
.nav ul{display:flex;gap:40px;list-style:none}
.nav ul a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;position:relative;padding-bottom:4px}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav ul a:hover::after{width:100%}
.burger{display:none;width:28px;height:14px;position:relative;z-index:2}
.burger i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.burger i:first-child{top:0}.burger i:last-child{bottom:0}
@media(max-width:860px){
 .nav,.nav.solid{padding:20px}
 .burger{display:block}
 .nav ul{position:fixed;inset:0;background:var(--bg);color:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
 .nav ul a{font-size:16px}
 .nav.open ul{opacity:1;pointer-events:auto}
 .nav.open{color:var(--ink)}
 .nav.open .burger i:first-child{transform:translateY(6.5px) rotate(45deg)}
 .nav.open .burger i:last-child{transform:translateY(-6.5px) rotate(-45deg)}
}

.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--dark);color:#fff}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 8s linear}
.slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);pointer-events:none}
.hero-text{position:absolute;left:48px;bottom:64px;z-index:2;max-width:760px}
.hero-text .label{color:rgba(255,255,255,.75)}
.hero-title{font-size:clamp(36px,5.4vw,76px);font-weight:300;line-height:1.05;letter-spacing:-.01em;margin-top:18px}
.caption{display:inline-block;margin-top:22px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);min-height:20px;transition:opacity .6s var(--ease)}
.caption:hover{color:#fff}
.hero-ui{position:absolute;right:48px;bottom:64px;z-index:2;display:flex;align-items:center;gap:28px}
.hero-ui[hidden]{display:none}
.count{font-size:13px;letter-spacing:.2em}
.count b{font-weight:400}
.bars{display:flex;gap:6px}
.bars button{width:36px;height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;padding:0}
.bars button span{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.bars button.on span{animation:fill 6s linear forwards}
.bars button.done span{transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.arrows{display:flex;gap:4px}
.arrows button{width:44px;height:44px;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;transition:background .3s}
.arrows button:hover{background:rgba(255,255,255,.12)}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;width:1px;height:48px;background:rgba(255,255,255,.3);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:-48px;width:1px;height:48px;background:#fff;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:48px}}
@media(max-width:760px){
 .hero-text{left:20px;right:20px;bottom:110px}
 .hero-ui{left:20px;right:20px;bottom:40px;justify-content:space-between}
 .bars button{width:22px}
 .arrows,.scroll-cue{display:none}
}

section{padding:140px 0}
section[hidden],.filters[hidden],.gallery[hidden],.next[hidden]{display:none}
@media(max-width:760px){section{padding:88px 0}}
.head{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start;margin-bottom:72px}
.head .label{color:var(--soft)}
.head h2{font-size:clamp(28px,3.4vw,48px);font-weight:300;line-height:1.15;letter-spacing:-.005em}
@media(max-width:860px){.head{grid-template-columns:1fr;gap:20px;margin-bottom:48px}}
.practice p{font-size:18px;color:var(--mid);max-width:640px;margin-top:28px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:96px}
.facts div{padding:28px 24px 0 0}
.facts b{display:block;font-size:44px;font-weight:300;color:var(--ink);line-height:1}
.facts span{display:block;margin-top:12px;color:var(--mid);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,1fr);row-gap:32px;margin-top:64px}}

.feature{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:center;margin-bottom:120px}
.feature:nth-child(even){grid-template-columns:1fr 1.6fr}
.feature:nth-child(even) .f-img{order:2}
.f-img{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--line)}
.f-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.f-img:hover img{transform:scale(1.04)}
.f-meta .label{color:var(--soft)}
.f-meta h3{font-size:clamp(28px,2.8vw,40px);font-weight:300;margin:14px 0 24px;line-height:1.15}
dl.rows{border-top:1px solid var(--line)}
dl.rows div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
dl.rows dt{color:var(--mid)}
dl.rows dd{text-align:right}
.more{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.more::after{content:"";width:40px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.more:hover::after{width:64px}
@media(max-width:860px){.feature,.feature:nth-child(even){grid-template-columns:1fr;gap:28px;margin-bottom:80px}.feature:nth-child(even) .f-img{order:0}}

.filters{display:flex;flex-wrap:wrap;gap:8px 32px;margin-bottom:48px;border-bottom:1px solid var(--line);padding-bottom:20px}
.filters button{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);transition:color .3s;padding:4px 0}
.filters button.on,.filters button:hover{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 28px}
.card{display:block}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.card:hover img,.card:focus-visible img{transform:scale(1.05);filter:grayscale(0)}
.card h4{font-weight:400;font-size:17px;margin-top:16px}
.card p{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:4px}
.card.hide{display:none}
.status{color:var(--mid);font-size:15px}
.status:empty{display:none}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

.services{background:#EBEBEB}
.svc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.svc div{padding:32px 28px 0 0}
.svc .n{color:var(--soft);font-size:12px;letter-spacing:.2em}
.svc h4{font-weight:400;font-size:20px;margin:16px 0 10px}
.svc p{color:var(--mid);font-size:15px}
@media(max-width:860px){.svc{grid-template-columns:1fr 1fr;row-gap:40px}}
@media(max-width:520px){.svc{grid-template-columns:1fr}}

.contact{background:var(--dark);color:#E8E8E8}
.contact .head .label{color:#8A8A8A}
.c-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;border-top:1px solid #3A3A3A;padding-top:40px}
.c-grid .label{color:#8A8A8A;margin-bottom:16px;display:block}
.c-grid p,.c-grid a{font-size:16px;line-height:2}
.c-grid a{display:block;transition:color .3s}
.c-grid a:hover{color:#fff}
.c-grid a.purpose::after{content:" —";color:#8A8A8A}
footer{background:var(--dark);color:#8A8A8A;font-size:12px;letter-spacing:.18em;text-transform:uppercase;border-top:1px solid #3A3A3A}
footer .wrap{display:flex;justify-content:space-between;padding-top:28px;padding-bottom:28px;gap:16px;flex-wrap:wrap}
@media(max-width:860px){.c-grid{grid-template-columns:1fr;gap:32px}}

.p-hero{position:relative;height:88vh;height:88svh;min-height:480px;background:var(--dark);overflow:hidden;color:#fff}
.p-hero img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.p-hero img.in{opacity:1}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.p-hero .hero-text{bottom:56px}
.p-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.p-intro .desc{font-size:18px;color:var(--mid);white-space:pre-line}
.back{display:inline-flex;gap:12px;align-items:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);margin-bottom:48px}
.back:hover{color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:96px}
.gallery figure{margin:0}
.gallery figure.wide{grid-column:1/-1}
.gallery img,.gallery video{width:100%;height:auto;background:var(--line)}
.gallery figcaption{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:10px}
.next{display:block;border-top:1px solid var(--line);margin-top:120px;padding-top:40px}
.next .label{color:var(--soft)}
.next h3{font-size:clamp(28px,3.4vw,48px);font-weight:300;margin-top:10px;transition:color .3s}
.next:hover h3{color:var(--mid)}
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:32px;padding:16px 28px;border:1px solid var(--ink);font-size:12px;letter-spacing:.22em;text-transform:uppercase;transition:background .3s,color .3s}
.cta:hover{background:var(--ink);color:var(--bg)}
@media(max-width:860px){.p-intro{grid-template-columns:1fr;gap:32px}.gallery{grid-template-columns:1fr;gap:16px;margin-top:64px}.gallery img{max-height:70vh;object-fit:cover}}

.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .rv{opacity:1;transform:none}
 .slide img,.slide.on img{transform:none;transition:none}
 .scroll-cue::after{animation:none}
 html{scroll-behavior:auto}
}

/* about page */
.page-head{padding:180px 0 40px}
.page-head .label{color:var(--soft)}
.page-head h1{font-size:clamp(44px,7vw,104px);font-weight:300;line-height:1;letter-spacing:-.02em;margin-top:16px}
.statement-sec{padding-top:60px}
.statement{font-size:clamp(22px,2.4vw,34px);font-weight:300;line-height:1.35;color:var(--ink)}
.scope-sec{background:#EBEBEB}
.scope{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.scope div{padding:32px 28px 0 0}
.scope .n{color:var(--soft);font-size:12px;letter-spacing:.2em}
.scope h4{font-weight:400;font-size:20px;margin:16px 0 10px}
.scope p{color:var(--mid);font-size:15px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:48px 28px}
.person .portrait{aspect-ratio:4/3;background:#D9D9D9;display:grid;place-items:center}
.person .portrait span{font-size:44px;font-weight:300;letter-spacing:.12em;color:var(--mid)}
.person h3{font-weight:300;font-size:28px;margin-top:20px}
.person .role{border-top:1px solid var(--ink);margin-top:20px;padding-top:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid)}
.cta-sec{border-top:1px solid var(--line)}
.cta-sec .label{color:var(--soft)}
.cta-sec h2{font-size:clamp(28px,3.4vw,48px);font-weight:300;line-height:1.15;margin-top:16px;max-width:820px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.cta-row .more{margin-top:32px}
.nav a[aria-current="page"]::after{width:100%}
@media(max-width:860px){.page-head{padding:130px 0 20px}.scope{grid-template-columns:1fr 1fr;row-gap:40px}}
@media(max-width:520px){.scope{grid-template-columns:1fr}}

/* site footer */
.site-foot{background:var(--bg);color:var(--ink);border-top:1px solid var(--line);font-size:15px;letter-spacing:0;text-transform:none}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:72px;padding-bottom:56px}
.foot-brand{font-size:clamp(26px,2.6vw,36px);font-weight:300;line-height:1.1}
.foot-cols{display:flex;flex-direction:column;gap:44px}
.foot-nav{display:flex;flex-direction:column;gap:4px}
.foot-nav a,.foot-block a{display:block;width:fit-content;transition:color .3s}
.foot-nav a:hover,.foot-block a:hover{color:var(--mid)}
.foot-block h4{font-size:clamp(26px,2.6vw,34px);font-weight:300;margin-bottom:10px;line-height:1.1}
.foot-block p,.foot-block a{line-height:1.6;color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:28px;border-top:1px solid var(--line);font-size:13px;color:var(--mid)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:32px;padding-top:48px;padding-bottom:36px}}

/* legal pages */
.foot-legal{display:flex;gap:24px;flex-wrap:wrap}
.foot-legal a:hover{color:var(--ink)}
.prose{max-width:760px;padding-bottom:40px}
.prose .updated{color:var(--mid);font-size:14px;margin-bottom:48px}
.prose h2{font-size:24px;font-weight:400;margin:48px 0 14px}
.prose p,.prose li{font-size:17px;color:var(--ink);line-height:1.75}
.prose p+p{margin-top:14px}
.prose ul{margin:12px 0 0 20px}
.prose li+li{margin-top:6px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--mid)}

/* studio wall */
.wall-sec{padding:0}
.wall{margin:0}
.wall img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--line)}
.wall figcaption{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);padding-top:14px;padding-bottom:0}
.person .portrait img{width:100%;height:100%;object-fit:cover}

/* logo */
.logo{display:flex;align-items:center;gap:14px}
.logo-mark{width:30px;height:30px}
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-mark{width:44px;height:44px}

/* team page */
.team-intro{font-size:18px;color:var(--mid);margin-top:20px;max-width:560px}
.team-sec{padding-top:40px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{aspect-ratio:1/1;margin:0;overflow:hidden;background:var(--line)}
.tile.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform 1.2s var(--ease)}
.tile.photo:hover img{transform:scale(1.04)}
.tile.blank{transition:background .6s var(--ease)}
.meet-team{margin-top:40px}
@media(max-width:860px){.team-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(max-width:520px){.team-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* scroll motion */
.rv.stagger{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.stagger.in>*{opacity:1;transform:none}
.wall{overflow:hidden}
.wall img{transform:scale(1.08);transition:transform 2.2s var(--ease)}
.wall.in img{transform:none}
.person .role{position:relative;border-top-color:transparent}
.person .role::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--ink);transition:width 1.2s var(--ease) .3s}
.people.in .role::before{width:100%}
.site-foot .foot-base.rv{transform:none}
@media(prefers-reduced-motion:reduce){.stagger>*{opacity:1;transform:none;transition:none}.wall img{transform:none;transition:none}.person .role{border-top-color:var(--ink)}.person .role::before{display:none}}

/* home hero size */
.hero .hero-title{font-size:clamp(28px,3.4vw,50px);line-height:1.12}

/* principal + smaller tiles */
.people{display:block}
.principal{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:72px;align-items:center}
.p-photo{aspect-ratio:1/1;overflow:hidden;background:var(--line)}
.p-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.p-text .label{color:var(--soft)}
.p-text h3{font-size:clamp(34px,3.6vw,56px);font-weight:300;line-height:1.05;margin-top:14px}
.p-text .role{max-width:420px}
.p-text p{font-size:17px;color:var(--mid);line-height:1.75;max-width:520px;margin-top:22px}
.p-text .more{margin-top:32px}
.team-grid{grid-template-columns:repeat(6,1fr);gap:12px;max-width:1080px}
@media(max-width:1000px){.team-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){.principal{grid-template-columns:1fr;gap:32px}}
@media(max-width:520px){.team-grid{grid-template-columns:repeat(3,1fr);gap:8px}}

/* 7-col team, smaller principal */
.team-grid{grid-template-columns:repeat(7,1fr);max-width:none}
.principal{grid-template-columns:minmax(0,.535fr) minmax(0,1fr);gap:64px}
@media(max-width:1000px){.team-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:860px){.principal{grid-template-columns:1fr}.p-photo{max-width:420px}}
@media(max-width:520px){.team-grid{grid-template-columns:repeat(3,1fr)}}

/* whatsapp */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;background:rgba(245,245,245,.96);color:var(--ink);border:1px solid var(--line);border-radius:999px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 6px 20px rgba(0,0,0,.08);transition:background .3s,color .3s,transform .3s var(--ease)}
.wa-float svg{color:#25D366;transition:color .3s}
.wa-float:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.wa-float:hover svg{color:#fff}
@media(max-width:760px){.wa-float{right:16px;bottom:16px;padding:12px}.wa-float span{display:none}}

/* social buttons */
.social-float{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;gap:10px}
.sf-btn{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(245,245,245,.96);border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.08);transition:background .3s,color .3s,transform .3s var(--ease)}
.sf-wa{color:#25D366}
.sf-ig{color:#C13584}
.sf-btn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
@media(max-width:760px){.social-float{right:16px;bottom:16px;gap:8px}.sf-btn{width:44px;height:44px}}

/* ring cursor */
html.has-ring,html.has-ring *{cursor:none!important}
.cursor-ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;border-radius:50%;pointer-events:none;z-index:9999;mix-blend-mode:difference;opacity:0;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.cursor-ring.on{opacity:1}
.cursor-ring.hover{width:60px;height:60px;margin:-30px 0 0 -30px}
.cursor-ring.down{width:24px;height:24px;margin:-12px 0 0 -12px}

/* preloader v2 */
.preloader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;pointer-events:auto;animation:pl-failsafe 0s linear 6s forwards}
.no-preload .preloader{display:none}
.preloader.out{pointer-events:none}
.pl-curtain{position:absolute;inset:0}
.pc{position:absolute;width:50.5%;height:50.5%;background:var(--bg);transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.pc.c1{left:0;top:0}.pc.c2{right:0;top:0}.pc.c3{left:0;bottom:0}.pc.c4{right:0;bottom:0}
.preloader.out .pc.c1{transform:translate(-100%,-100%)}
.preloader.out .pc.c2{transform:translate(100%,-100%)}
.preloader.out .pc.c3{transform:translate(-100%,100%)}
.preloader.out .pc.c4{transform:translate(100%,100%)}
.pl-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.pl-logo{position:relative;width:70px;height:70px}
.pl-logo .q{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:pl-join 1.1s cubic-bezier(.16,1,.3,1) forwards}
.pl-logo .q1{clip-path:inset(0 50% 50% 0);--fx:-96px;--fy:-96px;animation-delay:.05s}
.pl-logo .q2{clip-path:inset(0 0 50% 50%);--fx:96px;--fy:-96px;animation-delay:.15s}
.pl-logo .q3{clip-path:inset(50% 50% 0 0);--fx:-96px;--fy:96px;animation-delay:.25s}
.pl-logo .q4{clip-path:inset(50% 0 0 50%);--fx:96px;--fy:96px;animation-delay:.35s}
.pl-peek{position:absolute;inset:0;opacity:0;background-size:cover;background-position:center;background-attachment:fixed;-webkit-mask:url(/img/logo-mask.svg) center/contain no-repeat;mask:url(/img/logo-mask.svg) center/contain no-repeat;transition:opacity .5s var(--ease)}
.preloader.peek .pl-peek{opacity:1}
.pl-name{font-size:14px;letter-spacing:.36em;font-weight:500;color:var(--ink);animation:pl-in 1s var(--ease) .9s both;transition:opacity .3s}
.pl-name span{font-weight:300;color:var(--mid)}
.pl-line{width:200px;height:16px;overflow:visible;transition:opacity .3s}
.pl-line path{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.preloader.out .pl-name,.preloader.out .pl-line{opacity:0}
.preloader.out .pl-logo{opacity:0;transform:scale(1.15);transition:opacity .5s var(--ease) .35s,transform .9s var(--ease)}
@keyframes pl-join{0%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(-12deg) scale(.7)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pl-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pl-failsafe{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.pl-logo .q{animation:none;opacity:1}.pl-name{animation:none}.pc{transition:none}.preloader.out{opacity:0;transition:opacity .4s}.pl-line path{stroke-dashoffset:0}}

/* preloader bar */
.pl-bar{width:190px;height:1px;background:var(--line);overflow:hidden;animation:pl-in 1s var(--ease) .2s both;transition:opacity .3s}
.pl-bar i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.preloader.out .pl-bar{opacity:0}
@media(prefers-reduced-motion:reduce){.pl-bar{animation:none}}

/* mobile pass */
html:has(.nav.open){overflow:hidden}
@media(hover:none){.card img{filter:none}}
@media(max-width:760px){
 html,body{overflow-x:clip}
 .logo{font-size:12px;letter-spacing:.24em;gap:10px}
 .logo-mark{width:24px;height:24px}
 .nav ul a{font-size:20px;letter-spacing:.18em}
 .hero-text{bottom:104px}
 .hero-ui{right:84px}
 .filters{flex-wrap:nowrap;overflow-x:auto;gap:0 24px;margin:0 -20px 32px;padding:0 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .filters::-webkit-scrollbar{display:none}
 .filters button{flex:0 0 auto}
 .grid{grid-template-columns:repeat(2,1fr);gap:28px 12px}
 .card h4{font-size:15px;margin-top:10px}
 .card p{font-size:10px;letter-spacing:.14em}
 .feature{margin-bottom:64px}
 .f-meta h3{margin:10px 0 16px}
 dl.rows div{font-size:13px}
 .head h2{font-size:26px}
 .page-head h1{font-size:44px}
 .p-hero .hero-title{font-size:34px}
 .back{margin-bottom:28px}
 .next{margin-top:72px}
 .foot-brand{font-size:24px}
 .foot-nav a,.foot-block a{padding:5px 0}
 .social-float{bottom:calc(16px + env(safe-area-inset-bottom))}
 .pl-peek{background-attachment:scroll}
 .principal .p-text h3{font-size:34px}
 .p-text p{font-size:16px}
}

/* footer map */
.foot-map{margin-top:18px;max-width:440px;aspect-ratio:16/10;border:1px solid var(--line);overflow:hidden;background:var(--line)}
.foot-map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease)}
.foot-map:hover iframe{filter:none}
.foot-dir{display:inline-flex!important;align-items:center;gap:12px;margin-top:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.foot-dir::after{content:"";width:32px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.foot-dir:hover::after{width:52px}
@media(hover:none){.foot-map iframe{filter:none}}
@media(max-width:760px){.foot-map{max-width:none;aspect-ratio:4/3}}

/* header logo +10% */
.logo{font-size:16.5px}
.logo-mark{width:33px;height:33px}
@media(max-width:760px){.logo{font-size:13.2px}.logo-mark{width:26.4px;height:26.4px}}

/* principal facts */
.p-facts{max-width:520px;margin-top:28px}

/* studio read more */
.studio-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease),opacity .7s var(--ease);opacity:0}
.studio-more.open{grid-template-rows:1fr;opacity:1}
.studio-more-in{overflow:hidden}
.studio-more p{font-size:18px;color:var(--mid);line-height:1.75;max-width:640px;margin-top:22px}
.studio-more p:first-child{margin-top:28px}
.read-more{margin-top:28px}
@media(max-width:760px){.studio-more p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.studio-more{transition:none}}

/* centred home headings */
#work .head,#index .head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
@media(min-width:761px){#index .filters{justify-content:center}}

/* practice heading -15% */
#practice .head h2{font-size:clamp(23.8px,2.89vw,40.8px)}
@media(max-width:760px){#practice .head h2{font-size:22.1px}}