:root{--bg:#EFEBE5;--bg2:#E6DFD6;--ink:#1f1d1b;--mute:#6e675f;--line:#cfc6ba;--acc:#B5654A;--serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.01em}
h1{font-size:clamp(48px,8vw,104px)}
h2{font-size:clamp(34px,4.6vw,56px)}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.sub,.lead{color:var(--mute);font-size:17px;max-width:560px;margin-top:20px}
.ph{overflow:hidden;background:var(--bg2)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.ph:hover img{transform:scale(1.03)}
.todo{color:#a39a8f}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line);position:relative}
.brand{font-family:var(--serif);font-size:28px;display:flex;align-items:baseline;gap:12px}
.brand span{font:400 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
nav{display:flex;gap:34px}
nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 0;border-bottom:1px solid transparent}
nav a:hover,nav a.on{border-color:var(--ink)}
.burger{display:none;background:none;border:0;width:36px;height:36px;cursor:pointer;position:relative}
.burger i{position:absolute;left:6px;right:6px;height:1px;background:var(--ink)}
.burger i:first-child{top:13px}.burger i:last-child{top:21px}

/* buttons / links */
.btn{display:inline-flex;gap:14px;align-items:center;border:1px solid var(--ink);padding:14px 26px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans);transition:.2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.fill{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.fill:hover{background:#9c523a;border-color:#9c523a}
.btn b{font-weight:400}
.link{font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap}

/* home */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:72px 0 96px}
.hero h1{font-size:clamp(44px,6vw,78px);max-width:520px}
.btns{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-i{aspect-ratio:1/1}
.sec{padding:80px 0;border-top:1px solid var(--line)}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.mosaic{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:290px 290px;gap:14px}
.m{background:#fff;display:flex;flex-direction:column}
.m .ph{flex:1;min-height:0}
.m span{padding:16px 18px;font-family:var(--serif);font-size:22px;line-height:1.2}
.m em{display:block;font:normal 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.m.big{grid-row:1/3}.m.wide{grid-column:2/4}
.note{font-size:11px;color:var(--mute);text-align:right;margin-top:14px}
.band{background:var(--bg2);padding:90px 0}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.slist{list-style:none;padding:0;margin-top:44px}
.slist li{border-top:1px solid var(--line)}.slist li:last-child{border-bottom:1px solid var(--line)}
.slist a{display:flex;gap:28px;padding:16px 0;align-items:baseline}
.slist i{font:italic 17px var(--serif);color:var(--acc);width:24px}
.slist h3{font-size:22px}.slist p{font-size:12px;color:var(--mute);line-height:1.5}
.tall{aspect-ratio:4/5}
.quote{padding:96px 0;display:grid;grid-template-columns:200px 1fr;gap:40px}
blockquote{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.25;max-width:780px}
cite{display:block;font:normal 12px var(--sans);color:var(--mute);margin-top:26px}
.aboutt{padding:40px 0 110px;grid-template-columns:.8fr 1fr;gap:96px}
.aboutt h2{margin-bottom:26px}.aboutt p:not(.eyebrow){max-width:420px;margin-bottom:26px;color:var(--mute)}
.portrait{aspect-ratio:3/4}
.dark{background:#1f1d1b;color:#efebe5;padding:96px 0}
.darkin{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.dark .eyebrow{color:#9a9289}.dark p:not(.eyebrow){color:#b9b1a8;max-width:440px;margin-top:22px}

/* inner pages */
.phead{padding:80px 0 56px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:56px 28px;padding-bottom:80px}
.proj .ph{aspect-ratio:8/5}
.proj h3{font-size:30px;margin-top:20px}
.kind{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:4px 0 6px}
.proj p:last-child{color:var(--mute);font-size:14px}
.srows{border-top:1px solid var(--line);margin-bottom:60px}
.srow{display:grid;grid-template-columns:90px 1.1fr 1.4fr 220px;gap:32px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.srow i{font:300 56px var(--serif);color:#b3a99c;font-style:normal}
.srow h3{font-size:32px}.srow p{color:var(--mute);font-size:14px;max-width:380px}
.srow .ph{aspect-ratio:16/10}
.cta{text-align:center;padding:80px 0 90px;border-top:1px solid var(--line)}
.cta p{color:var(--mute);margin:14px 0 30px}
.abouth{padding:64px 0 80px;grid-template-columns:.8fr 1fr;gap:96px}
.abouth h1{font-size:clamp(52px,7vw,92px);margin-bottom:34px}
.abouth p:not(.eyebrow){max-width:460px;margin-bottom:22px;font-size:16px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding:36px 0}
.facts div{padding:0 28px;border-left:1px solid var(--line)}.facts div:first-child{padding-left:0;border:0}
.facts small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.facts b{font:400 22px/1.25 var(--serif);display:block}
.contact{align-items:start;padding:80px 0 96px;gap:96px;grid-template-columns:1fr 1fr}
.contact .lead{color:var(--ink);font-size:19px;margin-bottom:44px}
.info{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.info div{display:flex;gap:32px}.info dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;width:64px;padding-top:4px}
form label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:26px}
form input,form textarea{display:block;width:100%;background:none;border:0;border-bottom:1px solid var(--ink);font:400 15px var(--sans);padding:10px 0;color:var(--ink);outline:0;resize:vertical;letter-spacing:0;text-transform:none}
form input:focus,form textarea:focus{border-color:var(--acc)}
.strip img{width:100%;height:clamp(180px,26vw,360px);object-fit:cover}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:36px 0;border-top:1px solid var(--line);margin-top:0;flex-wrap:wrap}
.strip+.foot{border-top:0}
.foot .brand{font-size:24px}.foot .mail,.foot small{font-size:12px;color:var(--mute)}

@media(max-width:860px){
  .burger{display:block}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;gap:0;padding:8px 0 16px;z-index:5;border-bottom:1px solid var(--line)}
  .open nav{display:flex}
  nav a{padding:12px 0;border:0}
  .hero,.two,.aboutt,.abouth,.contact{grid-template-columns:1fr;gap:36px}
  .hero{padding:40px 0 56px}.hero-i{order:-1;aspect-ratio:4/3}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto;align-items:start}.m.big{grid-row:auto;grid-column:1/3}.m .ph{aspect-ratio:4/3;flex:none}.m.wide{grid-column:1/3}.m span{padding:12px 14px;font-size:19px}
  .sec-h{flex-direction:column;align-items:flex-start}
  .quote{grid-template-columns:1fr;gap:10px;padding:64px 0}
  .grid2{grid-template-columns:1fr;gap:44px}
  .srow{grid-template-columns:1fr;gap:6px;padding:26px 0}.srow i{font-size:18px}.srow h3{font-size:28px}.srow .ph{margin-top:14px}
  .facts{grid-template-columns:1fr 1fr;gap:28px 0}.facts div:nth-child(3){padding-left:0;border:0}
  .abouth,.contact{padding-top:40px}
  .brand span{display:none}
}

/* motion */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1)}
.js .rv.in{opacity:1;transform:none}
.hero-i.rv{transform:scale(1.02)}.hero-i.rv.in{transform:none}
.btn{transition:background .25s,color .25s,border-color .25s}
.btn b{display:inline-block;transition:transform .25s}
.btn:hover b{transform:translateX(4px)}
nav a{transition:border-color .25s}
.link{transition:letter-spacing .25s}.link:hover{letter-spacing:.2em}
.slist a{transition:padding-left .3s}.slist a:hover{padding-left:10px}
.srow{transition:background .3s}.srow:hover{background:rgba(255,255,255,.35)}
.m{transition:transform .4s,box-shadow .4s}.m:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(31,29,27,.08)}
.proj .ph img{transition:transform 1s cubic-bezier(.2,.65,.2,1)}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *{transition:none!important;scroll-behavior:auto!important}
  .ph:hover img{transform:none}
}

/* work filters + lightbox */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:36px}
.filters button{background:none;border:1px solid var(--line);padding:9px 18px;font:400 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:.25s}
.filters button:hover{border-color:var(--ink)}.filters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.proj{cursor:pointer;outline-offset:6px}.proj[hidden]{display:none}
.proj .view{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid transparent;transition:border-color .25s}
.proj:hover .view,.proj:focus-visible .view{border-color:var(--ink)}
.lb{position:fixed;inset:0;background:#efebe5;z-index:50;overflow:auto;opacity:0;transition:opacity .25s}
.lb.show{opacity:1}.lb[hidden]{display:none}
.lb-x{position:fixed;top:14px;right:22px;z-index:3;background:none;border:0;font-size:40px;line-height:1;cursor:pointer;color:var(--ink);width:48px;height:48px}
.lb-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;max-width:1500px;margin:0 auto;padding:36px 36px 36px;min-height:100%;align-items:center}
.lb-stage{position:relative;height:min(68vh,760px);display:flex;align-items:center;justify-content:center;background:var(--bg2)}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .2s}
.lb-stage img.out{opacity:0}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(31,29,27,.5);background:rgba(239,235,229,.85);font-size:20px;cursor:pointer;color:var(--ink);transition:.2s}
.lb-prev{left:14px}.lb-next{right:14px}.lb-prev:hover,.lb-next:hover{background:var(--ink);color:var(--bg)}
.lb.single .lb-prev,.lb.single .lb-next,.lb.single .lb-bar{display:none}
.lb-bar{display:flex;align-items:center;gap:20px;margin-top:16px}
#lbc{font-size:11px;letter-spacing:.14em;color:var(--mute);white-space:nowrap}
.lb-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px}
.lb-thumbs button{flex:0 0 auto;width:72px;height:50px;border:0;padding:0;cursor:pointer;opacity:.5;transition:opacity .2s;outline:1px solid transparent;outline-offset:2px;background:var(--bg2)}
.lb-thumbs button.on,.lb-thumbs button:hover{opacity:1}.lb-thumbs button.on{outline-color:var(--ink)}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
.lb-info h2{font-size:clamp(30px,3vw,42px);margin-bottom:22px}
.lb-meta{border-top:1px solid var(--line);margin-bottom:22px}
.lb-meta div{padding:12px 0;border-bottom:1px solid var(--line)}
.lb-meta small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.lb-meta b{font-weight:400;font-size:14px}
.lb-info p:not(.eyebrow){color:var(--mute);font-size:14.5px}
@media(max-width:900px){
  .lb-wrap{grid-template-columns:minmax(0,1fr);gap:24px;padding:64px 16px 32px;align-items:start}
  .lb-stage{height:auto;min-height:220px;max-height:60vh}.lb-stage img{max-height:60vh}
  .lb-prev,.lb-next{width:40px;height:40px}.lb-thumbs button{width:56px;height:40px}
}

.lb-main,.lb-info,.lb-bar{min-width:0}.lb-bar .lb-thumbs{min-width:0;flex:1}

/* video slides */
.lb-vid{position:relative;width:100%;aspect-ratio:16/9;max-height:100%;background:#000}
.lb-vid[hidden],.lb-stage img[hidden]{display:none}
.lb-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-vid .yt{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:#000}
.lb-vid .yt img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s}
.lb-vid .yt:hover img{opacity:1}
.lb-vid .yt span{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(239,235,229,.92)}
.lb-vid .yt span:after{content:"";position:absolute;left:29px;top:22px;border-left:20px solid #1f1d1b;border-top:14px solid transparent;border-bottom:14px solid transparent}
.lb-thumbs button.vt{position:relative}
.lb-thumbs button.vt:after{content:"";position:absolute;left:50%;top:50%;margin:-7px 0 0 -4px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.lb-stage .lb-vid{max-height:none}
.lb-prev,.lb-next{z-index:3}
/* testimonials */
.tsec{padding:96px 0 40px;display:grid;grid-template-columns:200px 1fr;gap:0 40px}
.tsec .eyebrow{grid-row:1 / span 2}
.tq{margin:0 0 64px;grid-column:2}
.tq blockquote{font-size:clamp(22px,2.4vw,30px);line-height:1.35;max-width:820px}
.tq.long blockquote{font-size:clamp(17px,1.6vw,20px);line-height:1.6;font-family:var(--serif)}
.tq.long blockquote p{margin-bottom:1em}
.tq b{font-weight:500}
.tq figcaption{font:normal 12px var(--sans);color:var(--mute);margin-top:22px;letter-spacing:.04em}
@media(max-width:860px){.tsec{grid-template-columns:1fr;padding:64px 0 20px}.tsec .eyebrow{grid-row:auto;margin-bottom:24px}.tq{grid-column:1;margin-bottom:48px}}
.facts div{min-width:0}.facts b{overflow-wrap:anywhere}
@media(max-width:860px){.facts b{font-size:19px}}
a.srow{color:inherit;text-decoration:none;cursor:pointer}