@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/inter-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-600.woff2') format('woff2')}

:root{--black:#111111;--grey:#6e6e6e;--hair:#e2e2e2;--bg:#f4f3f1;--box:32px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
.label{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:500}
h1,h2,h3{font-weight:400;letter-spacing:-.02em;line-height:1.06}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;z-index:200}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;height:64px;padding:0 40px;gap:40px}
.mark{font-size:15px;letter-spacing:.34em;text-transform:uppercase;font-weight:500}
.nav ul{display:flex;gap:34px;list-style:none;margin-left:auto;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.nav ul a{color:var(--grey);transition:color .2s}
.nav ul a:hover,.nav ul a:focus{color:var(--black)}
.tools{display:flex;align-items:center;gap:18px;margin-left:34px}
.lang{display:flex;gap:6px;font-size:11px;letter-spacing:.12em;font-weight:500}
.lang a{color:#bdbdbd}
.lang a.on{color:var(--black)}
main{padding-top:64px}

/* full-bleed slabs with white square boxes */
.slab{position:relative;height:92vh;min-height:560px;width:100%;overflow:hidden}
.slab.tall{height:calc(100vh - 64px)}
.slab .img{position:absolute;inset:0;background-position:center;background-size:cover;
  background-repeat:no-repeat;background-color:#20232a}
.box{position:absolute;background:#fff;width:min(400px,84vw);aspect-ratio:1;padding:var(--box);
  display:flex;flex-direction:column;justify-content:space-between}
.box.bl{left:40px;bottom:40px}
.box.br{right:40px;bottom:40px}
.box.tr{right:40px;top:40px}
.box h2{font-size:31px}
.box h1{font-size:38px}
.box p{font-size:14.5px;color:var(--grey);line-height:1.55}
.go{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  display:inline-flex;align-items:center;gap:9px}
.go::after{content:"";width:22px;height:1px;background:var(--black);transition:width .25s}
.go:hover::after{width:34px}

/* statement + steps */
.statement{padding:150px 0}
.statement h2{font-size:clamp(30px,4.1vw,56px);max-width:20ch;margin-bottom:44px}
.statement .cols{display:grid;grid-template-columns:1fr 1fr;gap:70px;max-width:820px}
.statement p{color:var(--grey);font-size:15.5px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.steps > div{background:var(--bg);padding:44px 34px 48px}
.steps .n{font-size:11px;letter-spacing:.2em;color:var(--grey);margin-bottom:26px}
.steps h3{font-size:25px;margin-bottom:12px}
.steps p{font-size:14.5px;color:var(--grey);line-height:1.55}

/* sections */
.section{padding:110px 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;
  gap:30px;flex-wrap:wrap}
.head h2{font-size:clamp(26px,3vw,38px)}

/* square work grid */
.sq3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.tile{position:relative;aspect-ratio:1;overflow:hidden;display:block;background:#fff}
.tile .img{position:absolute;inset:0;background-position:center;background-size:cover;
  background-color:#20232a;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover .img,.tile:focus .img{transform:scale(1.045)}
.tile .cap{position:absolute;left:0;bottom:0;background:#fff;padding:18px 20px;min-width:60%;
  transform:translateY(101%);transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.tile:hover .cap,.tile:focus .cap{transform:translateY(0)}
.tile .cap h3{font-size:17px;margin-bottom:3px}
.tile .cap span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* shop */
#shop{background:#fff}
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.prod{background:#fff;display:flex;flex-direction:column;border:1px solid var(--hair)}
.prod .sq{position:relative;aspect-ratio:1;overflow:hidden}
.prod .sq .img{position:absolute;inset:0;background-position:center;background-size:cover;
  background-color:#20232a;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.prod:hover .sq .img{transform:scale(1.045)}
.prod .info{padding:24px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod h3{font-size:19px}
.prod .d{font-size:13.5px;color:var(--grey);flex:1;line-height:1.5}
.prod .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--hair);gap:12px}
.prod .p{font-size:17px;font-weight:500}
.buy{background:var(--black);color:#fff;border:0;padding:11px 18px;font:inherit;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;cursor:pointer;
  transition:opacity .2s;display:inline-block}
.buy:hover{opacity:.78}
.stock{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:64px;padding-top:34px;
  border-top:1px solid var(--hair)}
.terms h4{font-size:13px;font-weight:500;margin-bottom:6px}
.terms p{font-size:13.5px;color:var(--grey)}


/* team */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.member{background:#fff;border:1px solid var(--hair);display:flex;flex-direction:column}
.member .sq{position:relative;aspect-ratio:1;overflow:hidden;background:#e6e4e1}
.member .sq .img{position:absolute;inset:0;background-position:center;background-size:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.member:hover .sq .img{transform:scale(1.04)}
.member .info{padding:24px}
.member h3{font-size:20px;margin-bottom:3px}
.member .role{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:13px}
.member p{font-size:13.5px;color:var(--grey);line-height:1.55}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--hair);border:1px solid var(--hair)}
.contact > div{background:#fff;padding:56px 48px}
.contact h2{font-size:32px;margin-bottom:10px}
.contact .sub{color:var(--grey);font-size:14.5px;margin-bottom:34px}
.f{margin-bottom:16px}
.f label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin-bottom:7px}
.f input,.f textarea,.f select{width:100%;border:0;border-bottom:1px solid var(--hair);padding:10px 0;
  font:inherit;font-size:15px;background:transparent;color:var(--black)}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-bottom-color:var(--black)}
.f textarea{min-height:96px;resize:vertical}
.hp{position:absolute;left:-9999px}
.submit{background:var(--black);color:#fff;border:0;padding:15px 34px;font:inherit;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;margin-top:14px}
.msg{padding:14px 18px;border:1px solid var(--hair);margin-bottom:22px;font-size:14px}
.msg.ok{border-color:#1f7a45;color:#1f7a45}
.msg.err{border-color:#a3352a;color:#a3352a}
.loc{margin-bottom:34px}
.loc h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  font-weight:500;margin-bottom:10px}
.loc p{font-size:15px;line-height:1.55}
.loc a{border-bottom:1px solid var(--hair)}

/* legal pages */
.legal{max-width:720px;padding:70px 0 110px}
.legal h1{font-size:34px;margin-bottom:28px}
.legal h2{font-size:20px;margin:34px 0 10px}
.legal p{margin-bottom:14px;color:#3a3a3a;font-size:15px}

/* footer */
footer{padding:64px 0 40px;border-top:1px solid var(--hair)}
.fmark{font-size:clamp(40px,10vw,150px);letter-spacing:.02em;line-height:.9;font-weight:300;
  color:#e6e4e1;margin-bottom:34px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.fgrid h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  font-weight:500;margin-bottom:14px}
.fgrid li{list-style:none;font-size:14px;margin-bottom:7px;color:var(--grey)}
.fgrid li a:hover{color:var(--black)}
.fbot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--grey);
  flex-wrap:wrap;gap:16px;padding-top:26px;border-top:1px solid var(--hair)}

@media(max-width:1100px){.sq3,.shopgrid,.steps,.teamgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){
  .nav ul{display:none}
  .wrap{padding:0 20px}
  .nav{padding:0 20px}
  .slab,.slab.tall{height:70vh;min-height:420px}
  .box{position:relative;width:calc(100% - 40px);aspect-ratio:auto;margin:-70px auto 0;
    padding:26px;gap:18px;z-index:5}
  .box.bl,.box.br,.box.tr{left:auto;right:auto;top:auto;bottom:auto}
  .statement .cols,.contact{grid-template-columns:1fr;gap:34px}
  .contact > div{padding:36px 24px}
  .terms{grid-template-columns:1fr;gap:24px}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .section,.statement{padding:70px 0}
}
@media(max-width:560px){
  .sq3,.shopgrid,.steps,.teamgrid{grid-template-columns:1fr}
  .tile .cap{transform:translateY(0);background:rgba(255,255,255,.94)}
}