@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
 --paper:#EFEBE3;--iron:#161513;--barn:#8E2A1C;--wheat:#B8975A;
 --mid:#6B665D;--rule:#D6D0C4;--ph:#E2DDD2;--iron-2:#2A2825;--on-iron:#A39E93;
 --sans:"Barlow",Helvetica,Arial,sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace;
 --g:clamp(20px,3vw,40px);--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:clamp(72px,9vw,120px);--s7:clamp(104px,13vw,176px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--iron);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}h1,h2,h3,p,ul,ol,dl,dd{margin:0}ul,ol{padding:0;list-style:none}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.label a{text-decoration:none}.label a:hover{color:var(--iron)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--barn);color:#fff;padding:10px 14px;font:13px var(--mono);z-index:20}.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--barn);outline-offset:3px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--g)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
.col-l{grid-column:1/4}.col-r{grid-column:5/13}
.h1,.h2,.hero__h,.proj__title,.svc h3,.inc h3,.next__t,.ftr__big,.prose h2:not(.label),.bigmail{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:0}
/* nav */
.hdr{position:sticky;top:0;z-index:10;background:var(--iron);color:var(--paper)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:60px}
.hdr__mark{font-family:var(--cond);font-weight:700;font-size:22px;letter-spacing:.06em;text-decoration:none}
.nav{display:flex;gap:32px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--on-iron);padding:20px 0 18px;border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:var(--paper)}
.nav a[aria-current]{color:var(--paper);border-color:var(--barn)}
/* hero */
.hero{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);display:flex;flex-direction:column;justify-content:center;padding-block:var(--s6)}
.hero__note{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-bottom:var(--s4)}
.dot{width:7px;height:7px;background:var(--barn);display:inline-block}
.hero__h{font-size:clamp(60px,10.2vw,156px);line-height:.86;max-width:11ch}
.hero__p{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:40ch;margin-top:var(--s4);color:#3A3833}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.btn{display:inline-flex;align-items:center;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none;padding:18px 24px;border:1.5px solid var(--iron);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--iron);color:var(--paper)}
.btn--solid{background:var(--barn);border-color:var(--barn);color:#fff}.btn--solid:hover{background:var(--iron);border-color:var(--iron)}
/* sections */
.sec{padding-top:var(--s7)}.sec--tight{padding-top:var(--s5)}
.sec__hd{display:grid;grid-template-columns:1fr auto;row-gap:12px;align-items:end;padding-bottom:var(--s3);margin-bottom:var(--s4);border-bottom:1.5px solid var(--iron)}
.sec__hd .label{grid-column:1/-1}.sec__hd .h2{grid-column:1}.sec__hd .lnk{grid-column:2;padding-bottom:6px}
.h2{font-size:clamp(40px,5vw,72px);line-height:.9}
.h1{font-size:clamp(60px,10vw,148px);line-height:.86;margin-top:var(--s2)}
.lnk{font:12px var(--mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none}.lnk:hover{color:var(--barn)}
.pghd{padding-top:var(--s6);padding-bottom:var(--s5)}
.lede{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:40ch;margin-top:var(--s3);color:#3A3833}
/* projects */
.projs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--g)}
.proj__link{display:block;text-decoration:none}
.proj__meta{display:grid;grid-template-columns:1fr auto;row-gap:4px;margin-top:var(--s2)}
.proj__n{display:none}
.proj__title{grid-column:1;font-size:clamp(26px,2.3vw,34px);line-height:1}
.proj__yr{grid-column:2;grid-row:1;font:13px var(--mono);color:var(--mid)}
.proj__cat{grid-column:1/-1;font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mid)}
.proj__link:hover .proj__title{color:var(--barn)}
.ph{position:relative;background:var(--ph);display:flex;align-items:center;justify-content:center;transition:background .2s}
.ph span{font-size:11px;letter-spacing:.12em;color:var(--mid)}
.proj__link:hover .ph{background:#D9D3C6}
.ph--16-10{aspect-ratio:16/10}.ph--16-9{aspect-ratio:16/9}.ph--4-5{aspect-ratio:4/5}.ph--3-2{aspect-ratio:3/2}
/* services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g)}
.svc span{font:12px var(--mono);color:var(--barn)}
.svc h3{font-size:30px;line-height:1;margin:var(--s2) 0 var(--s1)}
.svc p{color:#4A4741;max-width:32ch}
.cap{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g)}
.cap h3{margin-bottom:var(--s2)}.cap li{border-top:1px solid var(--rule);padding:12px 0}
/* prose */
.prose p{max-width:62ch}.prose p+p{margin-top:1em}.prose .lede{margin:0 0 var(--s3)}
.prose h2:not(.label){font-size:28px;margin:var(--s4) 0 var(--s1)}.prose h2:first-child{margin-top:0}
.prose h2.label{margin-bottom:var(--s2)}
/* contact */
.bigmail{display:inline-block;margin-top:var(--s4);font-size:clamp(34px,6vw,88px);line-height:1;text-decoration:none;border-bottom:3px solid var(--barn);word-break:break-all}
.bigmail:hover{color:var(--barn)}
.inc li{display:grid;grid-template-columns:48px 1fr;border-top:1px solid var(--rule);padding:var(--s3) 0}
.inc span{font-size:12px;color:var(--barn);padding-top:6px}
.inc h3{font-size:24px;line-height:1;margin-bottom:6px}.inc p{color:#4A4741}
.soc li{border-top:1px solid var(--rule)}.soc li:last-child{border-bottom:1px solid var(--rule)}
.soc a{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) 0;text-decoration:none;font-size:19px;font-weight:500}
.soc a .mono{font-size:12px;color:var(--mid)}.soc a:hover{color:var(--barn)}
.soc__n{display:inline-flex;align-items:center;gap:14px}
.ico{width:20px;height:20px;display:block}
/* case */
.meta div{border-top:1px solid var(--rule);padding:12px 0;font-size:13px}
.meta dt{color:var(--mid);text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin-bottom:4px}
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}.igrid__full{grid-column:1/-1}
.next{display:block;text-decoration:none;border-top:1.5px solid var(--iron);padding-top:var(--s3)}
.next__t{display:block;font-size:clamp(48px,7vw,104px);line-height:.9;margin-top:var(--s2)}
.next:hover .next__t{color:var(--barn)}
.pghd--404{min-height:55vh}
/* footer */
.ftr{margin-top:var(--s7);background:var(--iron);color:var(--paper);padding:var(--s6) 0 var(--s3)}
.ftr__cta{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;padding-bottom:var(--s5)}
.ftr__big{font-size:clamp(44px,5.6vw,84px);line-height:.9}
.ftr .btn--solid:hover{background:var(--paper);border-color:var(--paper);color:var(--iron)}
.ftr__cols{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g);border-top:1px solid var(--iron-2);padding:var(--s4) 0 var(--s5)}
.ftr__h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-iron);margin-bottom:var(--s2);line-height:20px}
.ftr__list li{line-height:20px}.ftr__list li+li{margin-top:12px}
.ftr__list a{text-decoration:none}.ftr__list a:hover{color:var(--wheat)}
.ftr__muted{color:var(--on-iron)}
.ftr__soc{display:flex;gap:20px}
.ftr__soc a{display:block;color:var(--paper);transition:color .15s}.ftr__soc a:hover,.ftr__soc a:focus-visible{color:var(--wheat)}
.ftr__base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--iron-2);padding-top:var(--s3);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-iron)}
.made{display:inline-flex;align-items:center;gap:10px;justify-self:center}
.flag{height:10px;width:auto;display:block}
.ftr__legal{display:flex;gap:24px;justify-self:end}
.ftr__legal a{text-decoration:none}.ftr__legal a:hover{color:var(--paper)}
/* responsive */
@media (max-width:900px){
 .col-l,.col-r{grid-column:1/-1}.col-l{margin-bottom:var(--s3)}
 .projs,.svc,.cap{grid-template-columns:1fr}
 .svc{row-gap:var(--s4)}.cap>div{margin-bottom:var(--s4)}
 .ftr__cols{grid-template-columns:1fr 1fr;row-gap:var(--s4)}
 .hero{min-height:0;padding-block:var(--s6) var(--s5)}
}
@media (max-width:700px){
 .ftr__base{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:14px}.ftr__legal{justify-self:center}
}
@media (max-width:520px){
 body{font-size:16px}.nav{gap:20px;font-size:11px}.hdr__mark{font-size:19px}
 .btn{width:100%;justify-content:center}
 .igrid{grid-template-columns:1fr}
 .ftr__cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* iteration 2 */
.hero__h{max-width:none;font-size:clamp(56px,8.6vw,132px)}
:root{--on-iron:#B5AFA3}
.nav{font-size:13px}
@media (max-width:520px){.nav{font-size:11px}}
.hero + .sec{padding-top:var(--s4)}
/* optical left alignment: cancel Barlow Condensed side-bearing */
.h1,.h2,.hero__h,.ftr__big,.bigmail,.next__t{margin-left:calc(-1 * var(--ol,.025em))}
.hero__p{margin-left:-.03em}
/* footer rhythm: equal 64px steps */
.ftr{padding-top:var(--s5)}
.ftr__cta{padding-bottom:var(--s5)}
.ftr__cols{padding-top:var(--s5);padding-bottom:var(--s5)}
@media (max-width:700px){.ftr{padding-top:var(--s4)}.ftr__cta{padding-bottom:var(--s4)}.ftr__cols{padding-top:var(--s4);padding-bottom:var(--s4)}}
/* wipe-in */
.wl{display:block}.wl>span{display:block}
@keyframes wipe{from{clip-path:inset(-.15em 100% -.15em -.2em)}to{clip-path:inset(-.15em -.2em -.15em -.2em)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.js .wipe:not(.wipe--io) .wl>span{animation:wipe .8s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(.12s + var(--i)*.13s)}
.js.io .wipe--io .wl>span{clip-path:inset(-.15em 100% -.15em -.2em)}
.js.io .wipe--io.in .wl>span{animation:wipe .8s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--i)*.13s)}
.js .hero__note,.js .hero__p,.js .hero .ctas{animation:rise .6s cubic-bezier(.2,.7,.1,1) both}
.js .hero__note{animation-delay:.05s}.js .hero__p{animation-delay:.55s}.js .hero .ctas{animation-delay:.68s}
@media (prefers-reduced-motion:reduce){.js .wipe .wl>span,.js .hero__note,.js .hero__p,.js .hero .ctas{animation:none!important;clip-path:none!important}}
/* v8 timing + footer room */
.js .wipe:not(.wipe--io) .wl>span{animation-duration:1.4s;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-delay:calc(.15s + var(--i)*.2s)}
.js.io .wipe--io.in .wl>span{animation-duration:1.4s;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-delay:calc(var(--i)*.2s)}
.js .hero__note,.js .hero__p,.js .hero .ctas{animation-duration:.8s;animation-timing-function:cubic-bezier(.33,0,.2,1)}
.js .hero__note{animation-delay:.1s}.js .hero__p{animation-delay:1s}.js .hero .ctas{animation-delay:1.15s}
.ftr{padding:120px 0 40px}.ftr__cta{padding-bottom:80px}.ftr__cols{padding-top:80px;padding-bottom:80px}
@media (max-width:700px){.ftr{padding:72px 0 40px}.ftr__cta{padding-bottom:48px}.ftr__cols{padding-top:48px;padding-bottom:48px}}
/* Weston case study */
.proj__img,.cimg{display:block;width:100%;height:auto;background:#130F00}
.proj__img{aspect-ratio:16/10;object-fit:cover}
.cs__media{margin-top:var(--s5)}
.h3c{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(32px,3.6vw,48px);line-height:.95;margin:0 0 var(--s3)}
.prose strong{font-weight:600;color:var(--iron)}
.swatches{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;grid-template-columns:2fr 1.4fr 1fr 1fr 1fr;min-height:280px}
.sw{display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s3) 20px;gap:4px}
.sw__n{font-weight:500;font-size:18px}
.sw__h{font-size:12px;letter-spacing:.06em}
.sw:nth-child(3){box-shadow:inset 0 0 0 1px var(--rule)}
@media (max-width:700px){.swatches{grid-template-columns:1fr 1fr;min-height:0}.sw{min-height:120px}.sw:first-child{grid-column:1/-1;min-height:180px}}
.cs__media--flush{margin-top:var(--s3)}
.swatches--4{grid-template-columns:2fr 1.4fr 1fr 1fr}
.sw--line{box-shadow:inset 0 0 0 1px rgba(15,42,111,.18)}
.cs__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:700px){.swatches--4{grid-template-columns:1fr 1fr}.cs__pair{grid-template-columns:1fr}}
.cs__pair{align-items:start}
.cs__pair .cimg{width:100%;height:auto;aspect-ratio:864/1080;object-fit:contain;align-self:start}
@media (max-width:700px){.swatches--4 .sw:first-child{grid-column:auto;min-height:120px}}
/* nav CTA */
.nav{align-items:center}
.nav a.nav__cta{background:var(--barn);color:#F6F3EC;padding:9px 16px;border:0;transition:background .15s}
.nav a.nav__cta:hover{background:#6F1F14;color:#fff}
.nav a.nav__cta[aria-current]{background:#6F1F14;color:#fff;box-shadow:inset 0 -2px 0 #F6F3EC}
@media (max-width:520px){.nav a.nav__cta{padding:8px 12px}}
/* contact form */
.cf{display:grid;gap:var(--s3)}
.cf__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--g)}
.cf__f{display:grid;gap:8px;align-content:start}
.cf label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--iron)}
.cf__opt{color:var(--mid);text-transform:none;letter-spacing:.02em}
.cf input,.cf select,.cf textarea{width:100%;box-sizing:border-box;font:400 16px/1.4 var(--sans);color:var(--iron);background:#F7F4EE;border:1.5px solid var(--iron);border-radius:0;padding:14px 14px;-webkit-appearance:none;appearance:none}
.cf select{background-image:linear-gradient(45deg,transparent 50%,var(--iron) 50%),linear-gradient(135deg,var(--iron) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.cf textarea{resize:vertical;min-height:160px}
.cf ::placeholder{color:var(--mid)}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--barn);box-shadow:0 0 0 1px var(--barn)}
.cf [aria-invalid=true]{border-color:var(--barn);background:#F6E9E4}
.cf__e{margin:0;min-height:0;font-size:12px;color:var(--barn)}.cf__e:empty{display:none}
.cf__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf__go{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:8px}
.cf__go .btn{cursor:pointer}.cf__go .btn:disabled{opacity:.6;cursor:wait}
.cf__alt{margin:0;font-size:12px;color:var(--mid)}.cf__alt a{color:var(--iron)}.cf__alt a:hover{color:var(--barn)}
.cf__status{outline:none}.cf__status:empty{display:none}
.cf__status--ok,.cf__status--err{padding:var(--s3);border:1.5px solid var(--iron);font-size:17px}
.cf__status--ok{border-left:6px solid var(--barn)}
.cf__status--err{border-color:var(--barn);color:var(--barn)}.cf__status--err a{color:inherit}
@media (max-width:700px){.cf__row{grid-template-columns:1fr}}
.cs__k{margin-top:var(--s3)}.prose .inc{margin:12px 0 0;padding:0}
