:root{--bg:#EEEEEC;--ink:#121212;--mute:#55544F;--soft:#2B2B29;--rule:#CBCAC5;--t1:#D8D7D2;--t2:#C9C8C2;--t3:#262624;--dim:#A9A8A2;--gut:clamp(20px,4vw,64px);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Cabin','Gill Sans','Gill Sans MT','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;background:#fff;color:#121212;padding:8px 12px;z-index:10}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
.lab{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.mute{color:var(--mute)}
.disp{font-weight:400;text-transform:uppercase;letter-spacing:.03em}
.stm{font-weight:400;letter-spacing:-.03em}
.it{font-style:italic}
.lnk{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.lnk:hover,.lnk:focus-visible,.lnk.on{background-size:100% 1px}

/* header */
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 48px;padding-block:14px}
.brand{display:inline-block;padding:8px 0}
.brand img{width:124px;height:auto}
.site-header nav{display:flex;flex-wrap:wrap;gap:0 36px}
.site-header nav a{display:inline-block;padding:12px 0;background-position:0 calc(100% - 10px)}
.hr{height:1px;background:var(--rule);border:0;margin:0}
.sec{border-top:1px solid var(--rule)}

/* titles */
.top{padding-block:clamp(48px,8vw,120px) clamp(56px,7vw,104px)}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-bottom:clamp(28px,4vw,56px)}
.pagetitle{font-size:clamp(32px,5.8vw,84px);line-height:.98;letter-spacing:.01em;text-wrap:balance}
.indent{margin-left:248px}
.intro{margin-top:clamp(40px,6vw,88px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 48px}
.intro .big{flex:2 1 320px;max-width:600px;font-size:clamp(20px,1.9vw,27px);line-height:1.2}
.intro .side{flex:1 1 260px;max-width:360px;font-size:18px;line-height:1.65;color:var(--soft)}
.body{font-size:18px;line-height:1.7;color:var(--soft)}

/* hero */
.hero{padding-block:clamp(48px,8vw,120px) clamp(56px,8vw,112px)}
.hero h1{font-size:clamp(28px,5.6vw,80px);line-height:1.02;text-wrap:balance}
.hero h1 span.l{display:block}
.rule-line{display:flex;align-items:center}
.ln{flex:1 1 48px;position:relative;height:1px;margin:0 clamp(12px,2.2vw,36px);top:.1em}
.ln i{position:absolute;inset:0;background:var(--ink);transform-origin:left center;animation:draw 1.6s cubic-bezier(.2,.7,.2,1) .25s both}
.ln em{position:absolute;left:50%;bottom:.3em;transform:translateX(-50%);font-size:.24em;letter-spacing:0;font-style:italic;line-height:1;white-space:nowrap}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .two{margin-top:clamp(48px,7vw,104px);display:flex;flex-wrap:wrap;gap:24px 48px}
.hero .two p{flex:1 1 280px;max-width:480px;font-size:18px;line-height:1.65;color:var(--soft)}

/* image placeholders and photos */
.ph{position:relative;overflow:hidden;margin:0;max-width:100%;background:var(--t1)}
.ph.t2{background:var(--t2)}
.ph.t3{background:var(--t3)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ph figcaption{position:absolute;left:20px;bottom:18px;color:var(--mute);z-index:0}
.ph.t3 figcaption{color:#B4B3AD}
.ar43{aspect-ratio:4/3}.ar34{aspect-ratio:3/4}.ar45{aspect-ratio:4/5}.ar169{aspect-ratio:16/9}.ar218{aspect-ratio:21/8}.ar219{aspect-ratio:21/9}.ar11{aspect-ratio:1/1}

/* plates */
.stack{display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
.row2{display:flex;flex-wrap:wrap;gap:48px clamp(24px,3.5vw,48px);align-items:flex-start}
.c7{flex:7 1 440px;min-width:0}
.c5{flex:5 1 280px;min-width:0}
.offset{margin-top:clamp(0px,9vw,128px)}
.plate{display:block;min-width:0}
.plate:hover .ph img{transform:scale(1.02)}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:22px}
.cap .disp{font-size:clamp(19px,1.8vw,26px);line-height:1.15}
.arr{font-size:20px;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.plate:hover .arr,.nxt:hover .arr{transform:translateX(6px)}
.bck:hover .arr{transform:translateX(-6px)}
.sub{margin-top:8px;font-size:15px;color:var(--mute)}
.pad{padding-block:clamp(48px,7vw,104px) clamp(56px,8vw,112px)}

/* index lists */
.label-row{display:flex;flex-wrap:wrap;gap:32px 48px;padding-block:clamp(48px,7vw,96px)}
.label-row>.lab{flex:0 0 200px;color:var(--mute)}
.label-row>.rest{flex:1 1 480px;min-width:0}
.clients{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(28px,4vw,64px)}
.clients span{font-size:clamp(26px,3.2vw,46px);line-height:1.15;font-style:italic}
.list{border-top:1px solid var(--rule)}
.prow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding:26px 0;border-bottom:1px solid var(--rule)}
.prow .n{flex:1 1 260px;font-size:clamp(22px,2.1vw,30px);line-height:1.15;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.prow .h{display:flex;align-items:baseline;gap:20px;font-size:14px;color:var(--mute)}
.prow .h .arr{font-size:18px;color:var(--ink)}
.prow:hover .n{transform:translateX(14px)}
.prow:hover .arr{transform:translateX(6px)}
.ex{display:flex;flex-direction:column;gap:48px}
.ex .grp>.lab{display:block;padding-bottom:14px;border-bottom:1px solid var(--rule);color:var(--mute)}
.erow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 28px;padding:24px 0;border-bottom:1px solid var(--rule)}
.erow .y{flex:0 0 56px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--mute)}
.erow .t{flex:1 1 240px;font-size:clamp(19px,1.7vw,24px);line-height:1.2}
.erow .d{font-size:15px;color:var(--mute)}

/* objects grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(48px,5vw,72px) clamp(24px,2.5vw,32px)}
.grid .cap{padding-top:18px}
.grid .cap .disp{font-size:clamp(17px,1.6vw,22px);line-height:1.2}
.grid .arr{font-size:18px}
.note{color:var(--mute);line-height:1.7}

/* service blocks */
.focus{display:flex;flex-wrap:wrap;gap:32px 48px;padding-block:clamp(48px,6vw,88px);border-bottom:1px solid var(--rule)}
.focus:last-child{border-bottom:0}
.focus .l{flex:1 1 300px;min-width:0}
.focus .l .disp{font-size:clamp(24px,2.5vw,38px);line-height:1.08;margin-top:20px}
.focus .r{flex:2 1 480px;min-width:0;max-width:760px}
.focus .r .stm{font-size:clamp(20px,2vw,29px);line-height:1.15;margin-bottom:32px}
.focus .r .body{margin-bottom:32px}
.tags{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:20px;border-top:1px solid var(--rule);color:var(--mute)}

/* about */
.split{display:flex;flex-wrap:wrap;gap:48px clamp(32px,5vw,80px);align-items:flex-start}
.split.rev{flex-direction:row-reverse}
.split .tx{flex:1 1 380px;min-width:0;max-width:640px;display:flex;flex-direction:column;gap:22px}
.split .im{flex:1 1 340px;min-width:0}
.split h2{font-size:clamp(28px,3vw,44px);line-height:1.05;font-style:italic;margin-bottom:10px}
.lead{font-size:clamp(21px,2vw,29px);line-height:1.15}
.reads{margin-top:14px;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.reads a{display:block;padding:20px 0;border-bottom:1px solid var(--rule)}
.reads small{display:block;font-size:15px;color:var(--mute)}
.reads span{display:inline-block;margin-top:6px;font-size:clamp(19px,1.7vw,24px);font-style:italic}

/* project and product */
.back{display:inline-flex;align-items:center;gap:12px;padding:12px 0;color:var(--mute)}
.back .arr{font-size:18px;letter-spacing:0}
.proj{padding-block:clamp(32px,5vw,64px) clamp(48px,6vw,88px)}
.proj h1{margin-top:clamp(28px,5vw,72px)}
.proj .sub2{margin-top:clamp(16px,2vw,28px);font-size:clamp(22px,3vw,44px);line-height:1.05}
.brief{display:flex;flex-wrap:wrap;gap:40px 48px;padding-block:clamp(40px,5vw,72px)}
.brief .roles{flex:0 0 280px;display:flex;flex-direction:column;gap:14px}
.brief .roles span:not(.lab){font-size:17px;line-height:1.4}
.brief .txt{flex:1 1 480px;min-width:0;max-width:720px;display:flex;flex-direction:column;gap:24px}
.brief .txt .stm{font-size:clamp(20px,1.9vw,27px);line-height:1.2}
.shots{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px);padding-bottom:clamp(56px,8vw,112px)}
.shots .pair{display:flex;flex-wrap:wrap;gap:clamp(20px,2.5vw,32px);align-items:flex-start}
.shots .a{flex:5 1 300px;min-width:0}
.shots .b{flex:7 1 420px;min-width:0}
.next .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 48px;padding-block:clamp(40px,5vw,72px)}
.nxt{display:inline-flex;align-items:baseline;gap:20px}
.nxt .disp{font-size:clamp(19px,2vw,28px);line-height:1.15}
.pdp{display:flex;flex-wrap:wrap;gap:48px clamp(32px,5vw,80px);align-items:flex-start;margin-top:clamp(24px,4vw,56px);padding-bottom:clamp(56px,8vw,112px)}
.pdp .gal{flex:3 1 460px;min-width:0;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.pdp .gal .two{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,24px)}
.pdp .gal .two>*{flex:1 1 200px;min-width:0}
.pdp .info{flex:2 1 340px;min-width:0;max-width:540px}
.pdp h1{font-size:clamp(30px,3.8vw,56px);line-height:1;letter-spacing:.01em;margin-top:20px}
.pdp .tag{margin-top:clamp(24px,3vw,40px);font-size:clamp(19px,1.7vw,24px);line-height:1.2}
.specs{margin:clamp(32px,4vw,56px) 0 0;border-top:1px solid var(--rule)}
.specs div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.specs dt{color:var(--mute)}
.specs dd{margin:0;font-size:17px;font-variant-numeric:tabular-nums}
.btn{display:flex;align-items:center;justify-content:center;margin-top:clamp(28px,3vw,40px);min-height:56px;padding:0 28px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);letter-spacing:.22em;transition:background-color .3s,color .3s}
.btn:hover{background:var(--bg);color:var(--ink)}
.fine{margin-top:20px;font-size:15px;line-height:1.6;color:var(--mute)}
.legal{padding-block:clamp(48px,8vw,120px) clamp(80px,10vw,160px)}
.legal p{max-width:640px;margin-top:32px}

/* footer */
.site-footer{background:var(--ink);color:var(--bg)}
.site-footer .wrap{padding-block:clamp(64px,10vw,152px) 28px}
.site-footer .lab{color:var(--dim)}
.cta{display:inline-block;margin-top:24px;padding-bottom:.06em;font-size:clamp(36px,7.6vw,116px);line-height:1;letter-spacing:-.045em;color:var(--bg)}
.facts{margin-top:clamp(40px,6vw,96px);display:flex;flex-wrap:wrap;gap:32px clamp(32px,6vw,96px)}
.facts div{display:flex;flex-direction:column;gap:8px}
.facts .v{font-size:18px;color:var(--bg)}
.facts a.v{align-self:flex-start}
.flogo{margin-top:clamp(56px,8vw,120px)}
.flogo img{width:clamp(150px,16vw,230px);height:auto;filter:invert(1)}
.legalbar{margin-top:40px;padding-top:24px;border-top:1px solid #3A3A38;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;font-size:13px;color:var(--dim)}
.legalbar nav{display:flex;flex-wrap:wrap;gap:8px 28px}

@media (max-width:900px){.indent{margin-left:0}}
@media (prefers-reduced-motion:reduce){
.ln i{animation:none}
.lnk,.ph img,.arr,.prow .n,.btn{transition:none}
}

/* product photos at their natural proportions */
.photo{margin:0}
.photo img{width:100%;height:auto}
.pdp .info{position:sticky;top:24px;align-self:flex-start}
@media (max-width:900px){.pdp .info{position:static}}

/* project galleries: rows of photos sharing one height */
.grow{display:flex;gap:clamp(20px,2.5vw,32px);align-items:flex-start}
.grow .photo{min-width:0}
@media (max-width:700px){.grow{flex-direction:column}.grow .photo{flex:none!important;width:100%}}

/* serif accent: used sparingly for emphasis and quiet statements */
:root{--serif:'Newsreader','Cormorant Garamond',Georgia,'Times New Roman',serif}
.it,.ln em,.split h2,.lead,.intro .big,.brief .txt .stm{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.split h2{font-weight:300}
/* intro film */
.vid{position:relative;max-width:520px;background:var(--t3)}
.vid video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.snd{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:rgba(18,18,18,.72);color:#EEEEEC;border:1px solid rgba(238,238,236,.5);cursor:pointer;font-family:inherit;transition:background-color .3s,color .3s}
.snd:hover,.snd:focus-visible{background:#EEEEEC;color:#121212}
.snd .i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.snd[aria-pressed="true"] .i{width:8px;height:10px;border:0;background:currentColor}

@media (max-width:700px){.grow{width:100%!important;margin:0!important}}
.ar1413{aspect-ratio:14/13}
.c6{flex:6 1 300px;min-width:0}
@media (max-width:800px){.sp{display:none}}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px clamp(14px,1.8vw,28px);align-items:start}
.row4 .off{margin-top:clamp(0px,2.4vw,36px)}
.row4 .cap .disp{font-size:clamp(14px,1.2vw,17px)}
.row4 .sub{font-size:13px}
@media (max-width:800px){.row4{grid-template-columns:repeat(2,1fr)}}
.row4{width:86%;margin-inline:auto}
@media (max-width:800px){.row4{width:100%}}
.vidc{width:min(100%,calc((100vh - 150px)*.75),460px);max-width:none;margin-inline:auto}
.row4{width:80%}
@media (max-width:800px){.row4{width:100%}}
.ar2120{aspect-ratio:21/20}
.homesvc{width:62%;margin-inline:auto}
@media (max-width:800px){.homesvc{width:100%}}
.spaces4{padding-top:clamp(24px,4vw,64px)}
.row4{width:78%}
@media (max-width:800px){.row4{width:100%}}
.ar2825{aspect-ratio:28/25}
.row4{width:82%}
.row4 .cap .disp{font-size:clamp(13px,1.05vw,15px);letter-spacing:.02em}
.spaces4{padding-top:clamp(16px,3vw,44px)}
@media (max-width:800px){.row4{width:100%}}
.legal .policy{max-width:680px;margin-top:clamp(32px,4vw,56px)}
.legal .policy p{margin-top:14px}
.legal .policy h2{font-size:clamp(20px,1.8vw,26px);line-height:1.2;margin-top:clamp(32px,3.5vw,48px);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.legal .policy strong{font-weight:500}

/* mobile refinements */
.menu-btn{display:none}
@media (max-width:700px){
  .site-header .wrap{flex-wrap:wrap;gap:0;padding-block:10px;align-items:center}
  .brand img{width:104px}
  .js .menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 2px;background:none;border:0;color:var(--ink);cursor:pointer;font-family:inherit}
  .menu-btn i{position:relative;width:18px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
  .site-header.open .menu-btn i{height:0;border-bottom:0;transform:rotate(0)}
  .js .site-header nav{display:none;flex-basis:100%;flex-direction:column;gap:0;padding:6px 0 14px;margin-top:6px;border-top:1px solid var(--rule)}
  .js .site-header.open nav{display:flex}
  .site-header nav{flex-basis:100%;flex-direction:column;gap:0;margin-top:6px;border-top:1px solid var(--rule)}
  .site-header nav a{display:block;padding:15px 0;font-size:13px;background-position:0 calc(100% - 11px);background-size:0 1px;border-bottom:1px solid var(--rule)}
  .site-header nav a.on{background-size:0 1px;font-weight:600}
  .site-header nav a:last-child{border-bottom:0}
  .meta{flex-direction:column;gap:6px;font-size:11px;letter-spacing:.14em}
  .label-row{gap:14px 0;padding-block:44px}
  .label-row>.lab{flex-basis:100%}
  .label-row>.rest{flex-basis:100%}
  .clients{flex-direction:column;align-items:flex-start;gap:6px}
  .clients span{font-size:26px;white-space:nowrap}
  .prow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 16px;padding:20px 0}
  .prow .n{font-size:21px;flex:none}
  .prow .h{display:contents}
  .prow .h>span:first-child{grid-column:1;grid-row:2;font-size:13px;color:var(--mute)}
  .prow .h .arr{grid-column:2;grid-row:1 / span 2;align-self:center}
  .erow{gap:2px 16px;padding:20px 0}
  .erow .y{flex:0 0 100%}
  .erow .t{flex:1 1 100%;font-size:20px}
}
@media (max-width:700px){.ex{margin-top:10px}}