:root{--ink:#17201d;--fo:#2b4a3f;--tb:#c4803f;--tl:#e3a869;--pl:#f5f4f0;--ln:#dcd9d1;--mu:#5d6762;--ease:cubic-bezier(.65,0,.15,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font:400 1.02rem/1.7 "Figtree",sans-serif;color:var(--ink);background:var(--pl);overflow-x:clip}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1}
:focus-visible{outline:3px solid var(--tb);outline-offset:3px}
.wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}
.sec{padding:clamp(70px,9vw,120px) 0}.alt{background:#fff}
.h2{font-size:clamp(2.2rem,4.8vw,4rem)}.lead{color:var(--mu);max-width:520px;margin-top:20px;font-size:1.08rem}
.k{font-weight:600;font-size:.95rem;color:var(--tb);margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;background:var(--fo);color:#fff;font-weight:600;border-radius:999px;transition:background .3s,transform .3s}
.btn:hover{background:var(--tb);transform:translateY(-2px)}.btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}.btn.o:hover{background:var(--ink);color:#fff}.btn.tb{background:var(--tb)}.btn.tb:hover{background:#fff;color:var(--ink)}
#fade{position:fixed;inset:0;background:var(--pl);z-index:2600;opacity:0;pointer-events:none;transition:opacity .3s}#fade.on{opacity:1}
/* nav */
.nav{position:fixed;top:14px;left:0;right:0;z-index:2000}
.nr{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 0 0 1px var(--ln);transition:box-shadow .3s}
.nav.s .nr{box-shadow:0 0 0 1px var(--ln),0 12px 30px rgba(23,32,29,.1)}
.logo{display:flex;align-items:center;gap:10px;font:700 1.25rem "Bricolage Grotesque";letter-spacing:-.03em}.logo svg{width:28px;height:28px;color:var(--tb)}
.nl{display:flex;gap:6px}.nl a{padding:9px 18px;border-radius:999px;font-weight:500;transition:.25s}.nl a:hover{background:var(--pl)}.nl a.on{background:var(--ink);color:#fff}
.nr .btn{padding:12px 24px}.bg{display:none;width:44px;height:44px;position:relative}.bg b{position:absolute;left:11px;right:11px;top:21px;height:2px;background:var(--ink);box-shadow:0 -7px var(--ink),0 7px var(--ink)}
@media(max-width:900px){.nl{position:absolute;top:70px;left:0;right:0;background:#fff;border-radius:24px;flex-direction:column;padding:12px;box-shadow:0 20px 40px rgba(23,32,29,.15);display:none}.nl.open{display:flex}.bg{display:block}.nr .btn{display:none}}
/* gable shapes */
.gable{clip-path:polygon(0 17%,50% 0,100% 17%,100% 100%,0 100%);overflow:hidden;background:var(--ln)}.gable img{width:100%;height:100%;object-fit:cover}
.arch{border-radius:999px 999px 0 0;overflow:hidden}.arch img{width:100%;height:100%;object-fit:cover}
@keyframes up{from{clip-path:polygon(0 100%,50% 100%,100% 100%,100% 100%,0 100%)}}
.vis{position:relative;aspect-ratio:4/5}.vis .gable{position:absolute;inset:0;animation:up 1.3s var(--ease) both}
.vis .arch{position:absolute;left:-11%;bottom:-5%;width:40%;aspect-ratio:3/4;border:8px solid var(--pl)}
.vis .bd{position:absolute;right:-3%;bottom:12%;background:var(--fo);color:#fff;padding:18px 22px;border-radius:18px;line-height:1.3}.bd b{display:block;font:700 2.2rem "Bricolage Grotesque";color:var(--tl)}
/* hero & page head */
.hero,.ph{padding:140px 0 70px}
.hero .wrap,.ph .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px);align-items:center}
.hero h1{font-size:clamp(2.8rem,6.3vw,5.8rem)}
.inl{display:inline-block;width:1.7em;height:.78em;border-radius:999px;background:url(about.jpg) center 40%/cover;vertical-align:-.04em;margin:0 .06em}
.hero p{max-width:470px;margin:26px 0 32px;font-size:1.15rem;color:var(--mu)}.hb{display:flex;gap:12px;flex-wrap:wrap}
.ph .vis{aspect-ratio:5/4}.ph h1{font-size:clamp(2.4rem,5.2vw,4.6rem)}.ph p{color:var(--mu);margin-top:20px;max-width:470px;font-size:1.1rem}
.cr{font-size:.92rem;color:var(--mu);margin-bottom:22px}.cr span{margin:0 8px}.cr a{text-decoration:underline}
@media(max-width:860px){.hero .wrap,.ph .wrap{grid-template-columns:1fr}.vis{max-width:480px;margin:20px 0 0 8%}}
/* categories */
.cats{margin-top:46px;border-top:1px solid var(--ink)}
.cat{display:flex;align-items:center;gap:28px;padding:32px 0;border-bottom:1px solid var(--ln)}
.cat h3{font-size:clamp(2rem,5.4vw,4.4rem);transition:color .3s,transform .5s var(--ease)}.cat:hover h3{color:var(--tb);transform:translateX(12px)}
.cat .t{flex:1}.cat p{color:var(--mu);margin-top:10px;max-width:640px}
.th{width:0;height:130px;overflow:hidden;border-radius:999px 999px 0 0;transition:width .6s var(--ease)}.th img{width:200px;height:130px;object-fit:cover}
.cat:hover .th,.cat:focus-visible .th{width:200px}
.ar{width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;transition:.3s}.cat:hover .ar{background:var(--ink);color:#fff}
@media(max-width:700px){.th{width:90px;height:90px}.th img{width:90px;height:90px}.cat:hover .th{width:90px}.ar{display:none}}
/* about split */
.in2{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,100px);align-items:center}
.in2 .arch{aspect-ratio:3/4;max-width:440px}
.ck{margin-top:32px;display:grid;gap:14px}.ck div{display:flex;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--ln)}.ck i{color:var(--tb);margin-top:7px}
@media(max-width:860px){.in2{grid-template-columns:1fr}}
/* dark stats */
.dk{background:var(--fo);color:#fff}.dk .h2{max-width:520px}
.dk .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.stt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.2)}
.stt div{background:var(--fo);padding:30px 24px 30px 0}.stt div:nth-child(even){padding-left:28px}.stt b{display:block;font:700 clamp(3rem,6vw,5rem)/1 "Bricolage Grotesque";letter-spacing:-.05em;color:var(--tl)}
@media(max-width:860px){.dk .wrap{grid-template-columns:1fr}}
/* process */
.pr{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.ps{border-top:3px solid var(--ink);padding-top:22px}.ps b{font:700 3.6rem/1 "Bricolage Grotesque";color:var(--tb)}.ps h3{font-size:1.7rem;margin:14px 0 8px}.ps p{color:var(--mu)}
@media(max-width:860px){.pr{grid-template-columns:1fr 1fr}}@media(max-width:520px){.pr{grid-template-columns:1fr}}
/* bento gallery */
.ga{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:14px;margin-top:46px}
.gi{position:relative;overflow:hidden;cursor:zoom-in;border-radius:6px;display:block}.gi img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}.gi:hover img{transform:scale(1.06)}
.gi:nth-child(1),.gi:nth-child(4){grid-row:span 2}.gi:nth-child(2),.gi:nth-child(5){grid-column:span 2}
.gi span{position:absolute;left:12px;bottom:12px;background:#fff;padding:6px 14px;border-radius:999px;font-size:.88rem;font-weight:500}
@media(max-width:800px){.ga{grid-template-columns:1fr 1fr}.gi:nth-child(n){grid-row:auto;grid-column:auto}.gi:nth-child(2){grid-column:span 2}}
.lb{position:fixed;inset:0;z-index:2800;background:rgba(15,20,18,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s}.lb.on{opacity:1;visibility:visible}
.lb img{max-height:86vh;max-width:90vw}.lb button{position:absolute;color:#fff;font-size:1.5rem;width:56px;height:56px}.lc{top:14px;right:14px}.lp{left:14px;top:50%}.ln2{right:14px;top:50%}
/* quote & cta */
.qt{max-width:880px;margin:0 auto;text-align:center}.qt .st{color:var(--tb);letter-spacing:4px}.qt blockquote{font:600 clamp(1.8rem,3.8vw,3rem)/1.12 "Bricolage Grotesque";letter-spacing:-.03em;margin:18px 0 24px}
.cta{background:var(--ink);color:#fff;padding:clamp(60px,8vw,100px) 0}.cta .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:center}
.cta h2{font-size:clamp(2.2rem,5vw,4.2rem);margin-bottom:30px}.cta .gable{aspect-ratio:1}
@media(max-width:760px){.cta .wrap{grid-template-columns:1fr}.cta .gable{max-width:300px}}
/* values, services */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}.vc{padding:34px;border-left:3px solid var(--tb);background:var(--pl)}.vc i{font-size:1.5rem;color:var(--tb)}.vc h3{font-size:1.6rem;margin:16px 0 10px}.vc p{color:var(--mu)}
@media(max-width:800px){.g3{grid-template-columns:1fr}}
.tb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}.tb button{padding:10px 22px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ln);font-weight:500;transition:.25s}.tb button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}.tb button.on{background:var(--ink);color:#fff}
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sv{background:#fff;padding:28px;border-radius:6px;box-shadow:0 0 0 1px var(--ln);display:flex;flex-direction:column;animation:fi .5s both;transition:box-shadow .3s}.sv:hover{box-shadow:0 0 0 2px var(--tb)}
@keyframes fi{from{opacity:0;transform:translateY(12px)}}
.sv>i{width:52px;height:52px;border-radius:50%;background:var(--pl);color:var(--tb);display:grid;place-items:center;font-size:1.2rem;margin-bottom:18px}
.sv small{color:var(--mu);font-size:.85rem}.sv h3{font-size:1.45rem;margin:4px 0 10px}.sv p{color:var(--mu);flex:1}.sv a{margin-top:18px;font-weight:600;color:var(--fo)}.sv a:hover{color:var(--tb)}
@media(max-width:900px){.sg{grid-template-columns:1fr 1fr}}@media(max-width:600px){.sg{grid-template-columns:1fr}}
/* forms */
.fs{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,80px);align-items:start}.sd .arch{aspect-ratio:3/4;max-width:380px}
.ct{margin-top:30px;display:grid;gap:14px}.ct i{width:34px;color:var(--tb)}
.f .fg{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}.fd.full{grid-column:1/-1}
.f label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.f input:not([type=checkbox]),.f select,.f textarea{width:100%;padding:14px 16px;background:#fff;border:1px solid var(--ln);border-radius:8px;transition:border .25s}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--tb)}.f textarea{min-height:140px;resize:vertical}
.chk{display:flex!important;gap:12px;font-weight:400!important;align-items:flex-start}.chk input{margin-top:6px;accent-color:var(--fo)}
@media(max-width:860px){.fs{grid-template-columns:1fr}.f .fg{grid-template-columns:1fr}}
.faq{max-width:820px;margin:40px auto 0}.fq{border-bottom:1px solid var(--ln)}.fq button{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:24px 0;font:600 1.2rem "Bricolage Grotesque"}
.fq i{transition:transform .4s}.fq.open i{transform:rotate(45deg);color:var(--tb)}.fq>div{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}.fq.open>div{max-height:300px}.fq p{padding-bottom:24px;color:var(--mu)}
.sp{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:center;padding:150px 0 80px}.sp .vis{aspect-ratio:4/5;max-width:440px}
.sp h1{font-size:clamp(2.3rem,4.6vw,4rem);margin-bottom:16px}.sp>div>p{color:var(--mu);margin-bottom:30px}
@media(max-width:860px){.sp{grid-template-columns:1fr}}
.ok{display:none;margin-top:20px;padding:16px 20px;background:#e6efe9;border-left:3px solid var(--fo);border-radius:4px}.ok.show{display:block}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--fo);color:#fff;padding:16px 26px;border-radius:999px;z-index:3000;transition:opacity .3s;max-width:90vw}.toast.err{background:#9c3b2e}
/* legal */
.lg{display:grid;grid-template-columns:250px 1fr;gap:60px}.toc{position:sticky;top:110px;align-self:start;display:grid;border-left:1px solid var(--ln)}.toc a{padding:8px 16px;margin-left:-1px;border-left:3px solid transparent;color:var(--mu);font-size:.93rem}.toc a.on{border-color:var(--tb);color:var(--ink);font-weight:600}
.legal{max-width:760px}.legal h2{font-size:1.9rem;margin:44px 0 12px;scroll-margin-top:110px}.legal h2:first-of-type{margin-top:0}.legal p{color:var(--mu);margin-bottom:14px}
@media(max-width:860px){.lg{grid-template-columns:1fr}.toc{display:none}}
/* footer */
footer{background:var(--ink);color:#fff;padding:80px 0 30px}.fgd{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer h4{font:600 .95rem "Figtree";color:var(--tl);margin-bottom:16px}footer .fgd a:not(.logo){display:block;color:rgba(255,255,255,.75);padding:4px 0}footer a:hover{color:var(--tl)}
.fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6);font-size:.92rem}
@media(max-width:800px){.fgd{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}