:root{
  --ground:#F7F4EC; --ink:#141414; --muted:#6B665C; --soft:#4A463E; --rule:#DDD7CB; --cream:#F4EACD; --night:#1F1E1B;
  --display:'Tenor Sans', 'Gill Sans', 'Helvetica Neue', Arial, sans-serif;
  --body:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --gutter:64px;
}
@media (max-width: 760px){ :root{ --gutter:20px; } }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--muted)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
img{max-width:100%;display:block}
.label{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400}
.title{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:0;line-height:1.35}
@media (max-width: 760px){ .title{font-size:13px} }
.nav{font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.menu-btn,.menu-close{all:unset;cursor:pointer;color:inherit}
.menu-btn:focus-visible,.menu-close:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2.label{margin:0}
.simple{padding-block:120px 160px;display:flex;flex-direction:column;gap:24px;max-width:640px}
.simple p{margin:0;font-size:18px}
.link{border-bottom:1px solid currentColor}
html,body{overflow-x:hidden}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;color:var(--ink)}
.logo:hover{color:var(--ink);opacity:.75}
.logo.light,.logo.light:hover{color:#fff}
.logo svg{width:15px;height:15px;display:block;flex-shrink:0}
.logo img{height:15px;width:115px;max-width:none;flex-shrink:0;display:block}
@media (max-width: 760px){ .logo{gap:8px} .logo svg{width:12px;height:12px} .logo img{height:12px;width:92px} }

/* ---------- header ---------- */
.site-header{height:112px;padding-inline:var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;z-index:5}
.site-header .left{justify-self:start}
.site-header .right{justify-self:end;display:flex;gap:44px}
.site-header [aria-current="page"]{border-bottom:1px solid currentColor;padding-bottom:4px}
.menu-btn,.section-label{display:none}
.home .site-header{position:absolute;inset:0 0 auto 0;color:#fff}
.home .site-header a:hover{color:var(--cream)}
.home .site-header .logo{visibility:hidden}
@media (max-width: 760px){
  .site-header{height:64px}
  .home .site-header{height:80px}
  .site-header .left,.site-header .right{display:none}
  .menu-btn{display:flex;justify-self:end;min-height:44px;min-width:44px;align-items:center;justify-content:flex-end;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
  .section-label{display:block;justify-self:start;color:var(--ink)}
  .home .section-label{visibility:hidden}
}

/* ---------- mobile menu ---------- */
.overlay{position:fixed;inset:0;z-index:20;background:var(--ink);color:#F7F4EC;display:flex;flex-direction:column;padding:0 20px calc(40px + env(safe-area-inset-bottom,0px));padding-top:env(safe-area-inset-top,0px)}
.overlay .bar{height:64px;display:flex;align-items:center;justify-content:space-between}
.overlay .bar button{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:flex-end;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.overlay nav{margin-top:18vh;display:flex;flex-direction:column;gap:8px;font-family:var(--display);font-size:24px;letter-spacing:.14em;text-transform:uppercase}
.overlay nav a{padding:12px 0}
.overlay a:hover{color:var(--cream)}
.overlay .details{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--cream)}

/* ---------- home ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#2B2926;color:#fff}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
@media (max-width: 760px){ .hero .slide img{object-position:var(--pos-m,center)} }
.hero .shade{position:absolute;inset:0;background:rgba(20,18,15,.3)}
.hero .centre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero .centre a{pointer-events:auto}
.hero .foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(56px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero .caption{display:flex;flex-direction:column;gap:8px}
.hero .caption:hover{color:#fff}
.hero .caption .sub{font-size:14px;color:var(--cream)}
.hero .progress{display:flex;align-items:center;gap:28px;font-family:var(--display);font-size:13px;letter-spacing:.2em}
.hero .bars{display:flex;gap:8px}
.hero .bars button{all:unset;cursor:pointer;padding:22px 0}
.hero .bars span{display:block;width:40px;height:1px;background:rgba(255,255,255,.35);transition:background .6s ease}
.hero .bars button[aria-current="true"] span{background:#fff}
@media (max-width: 760px){
  .hero .foot{bottom:calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:flex-start;gap:0}
  .hero .caption .sub{font-size:13px}
  .hero .progress .num{display:none}
  .hero .bars span{width:28px}
  .hero .bars{gap:6px}
}

/* ---------- projects ---------- */
.page{padding-inline:var(--gutter)}
.index-head{padding-block:96px 64px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;column-gap:32px;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.filters button{all:unset;cursor:pointer;padding:12px 0;color:var(--muted);border-bottom:1px solid transparent;transition:color .3s ease}
.filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.filters button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:80px;padding-bottom:120px}
.card{display:flex;flex-direction:column;gap:20px}
.card .img{aspect-ratio:632/440;overflow:hidden;background:#DCD6C9}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.card:hover img{transform:scale(1.02)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card .meta .sub{font-size:14px;color:var(--muted);display:block;margin-top:6px}
.card .year{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width: 760px){
  .index-head{padding-block:40px 24px;flex-direction:column;align-items:flex-start}
  .filters{column-gap:20px;font-size:11px;letter-spacing:.18em}
  .filters button{padding:14px 0}
  .grid{grid-template-columns:1fr;row-gap:44px;padding-bottom:64px}
  .card{gap:14px}
  .card .meta .sub{font-size:13px;margin-top:4px}
  .card .year{font-size:12px}
}

/* ---------- project ---------- */
.p-hero{width:100%;aspect-ratio:16/9;max-height:82svh;object-fit:cover;object-position:var(--pos,center)}
.p-hero.tall{aspect-ratio:1492/1054;max-height:none}
.p-info{padding:96px var(--gutter) 112px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.p-info .facts{grid-column:span 5;display:flex;flex-direction:column;gap:40px}
.p-info dl{margin:0;display:grid;grid-template-columns:140px 1fr;row-gap:14px;font-size:15px}
.p-info dt{padding-top:4px}
.p-info dd{margin:0}
.wip{margin:-16px 0 0;font-size:12px;font-style:italic;color:var(--muted)}
.p-info .text{grid-column:7 / span 6;display:flex;flex-direction:column;gap:24px;font-size:20px;line-height:1.65;max-width:62ch}
.p-info .text p{margin:0}
.p-info .text .desc{color:var(--soft)}
.gallery{padding-inline:var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:632/460}
.gallery .wide{grid-column:1 / -1}
.gallery .wide img{aspect-ratio:1312/900}
.next{margin:120px var(--gutter) 0;padding-block:48px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:24px}
.next span.col{display:flex;flex-direction:column;gap:10px}
.next img{width:280px;aspect-ratio:280/180;object-fit:cover}
@media (max-width: 760px){
  .p-hero,.p-hero.tall{aspect-ratio:390/290;object-position:var(--pos-m,center)}
  .p-info{padding:40px 20px 48px;display:flex;flex-direction:column;gap:24px}
  .p-info .facts{gap:24px}
  .p-info dl{grid-template-columns:110px 1fr;row-gap:10px;font-size:14px}
  .p-info dt{padding-top:3px}
  .wip{margin-top:-12px}
  .p-info .text{font-size:17px;line-height:1.6;gap:16px}
  .gallery{grid-template-columns:1fr;gap:20px}
  .gallery .wide img,.gallery img{aspect-ratio:350/230}
  .next{margin:64px 20px 0;padding-block:32px;flex-direction:column;align-items:flex-start;gap:16px}
  .next img{width:100%;aspect-ratio:350/200}
}

/* ---------- studio ---------- */
.statement{padding-block:120px 128px;margin:0;font-family:var(--display);font-size:40px;line-height:1.4;letter-spacing:.01em;max-width:1060px;text-wrap:balance}
.section{padding-bottom:144px}
.approach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:56px}
.approach div{border-top:1px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:16px}
.approach p{margin:0;font-size:17px;line-height:1.7}
.services{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.services .intro{grid-column:span 4;display:flex;flex-direction:column;gap:20px}
.services .intro p{margin:0;font-size:17px;line-height:1.7;max-width:340px}
.services ol{grid-column:6 / span 7;margin:0;padding:0;list-style:none}
.services li{display:flex;gap:40px;padding:22px 0;border-top:1px solid var(--rule);align-items:baseline}
.services li:last-child{border-bottom:1px solid var(--rule)}
.services li .n{font-family:var(--display);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.band{width:100%;aspect-ratio:1440/620;object-fit:cover}
.contact{padding-block:128px 144px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;scroll-margin-top:0}
.contact .info{grid-column:span 5;display:flex;flex-direction:column;gap:32px}
.contact .info p{margin:0;font-size:18px;line-height:1.7;max-width:420px}
.contact .lines{display:flex;flex-direction:column;font-size:17px;line-height:1.8}
.contact form{grid-column:7 / span 6;display:flex;flex-direction:column;gap:28px}
.contact .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.field{display:flex;flex-direction:column;gap:10px}
.field input,.field textarea{font-family:var(--body);font-size:17px;font-weight:300;padding:12px 0;border:none;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:0;resize:none;outline:none}
.field input:focus,.field textarea:focus{border-bottom-width:2px;padding-bottom:11px}
.submit{align-self:flex-start;margin-top:12px;padding:18px 40px;min-height:44px;background:var(--ink);color:var(--ground);border:none;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.submit:hover{background:#2E2B27}
.form-note{margin:0;font-size:15px;color:var(--soft)}
@media (max-width: 760px){
  .statement{padding-block:48px 56px;font-size:24px;line-height:1.45}
  .section{padding-bottom:64px}
  .approach{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .approach div{padding-top:20px;gap:12px}
  .approach p{font-size:16px;line-height:1.6}
  .services{display:flex;flex-direction:column;gap:16px}
  .services li{gap:24px;padding:16px 0}
  .band{aspect-ratio:390/260}
  .contact{padding-block:56px 64px;display:flex;flex-direction:column;gap:40px}
  .contact .info{gap:24px}
  .contact .info p,.contact .lines{font-size:16px}
  .contact .row{grid-template-columns:1fr;gap:24px}
  .contact form{gap:24px}
  .field input,.field textarea{font-size:16px}
  .submit{align-self:stretch}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:56px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:48px}
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;font-size:15px;line-height:1.7}
footer .cols > div{display:flex;flex-direction:column}
footer .label{margin-bottom:8px}
footer small{font-size:13px;color:var(--muted)}
@media (max-width: 760px){
  footer{padding-top:40px;gap:28px}
  footer .cols{grid-template-columns:1fr;gap:28px}
  footer .label{margin-bottom:6px}
}