/* Sole House — black canvas, Didone display (the logo's own face), quiet grotesk for everything else. */
@font-face{font-family:'Bodoni Moda';src:url(/assets/fonts/bodoni-96.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(/assets/fonts/bodoni-96-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(/assets/fonts/inter-tight.woff2) format('woff2');font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --bg:#000;--fg:#f3f1ec;--mute:#8e8d89;--dim:#5c5b58;--line:rgba(243,241,236,.15);--line-2:rgba(243,241,236,.28);
  --paper:#eeece7;--ink:#0b0b0b;--ink-mute:#62615d;--ink-line:rgba(11,11,11,.16);
  --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --sans:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gut:max(16px,min(2.4vw,36px));
  --gl:max(var(--gut),env(safe-area-inset-left,0px));--gr:max(var(--gut),env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1);
  --nav-h:76px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01"}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--gl);top:12px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 14px;font-size:12px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* film grain: one tiny SVG noise tile, shifted in steps so it never sits still */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- type ---------- */
.serif{font-family:var(--serif);font-weight:400}
.it{font-family:var(--serif);font-style:italic;font-weight:400}
.label{font-family:var(--sans);font-size:11px;line-height:1.3;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.mute{color:var(--mute)}
.title{font-family:var(--serif);font-weight:400;text-transform:uppercase;line-height:.8;letter-spacing:-.025em;white-space:nowrap;font-size:clamp(64px,17vw,300px);margin-left:-.035em}
.title sup{font-family:var(--sans);font-size:max(11px,.085em);letter-spacing:0;vertical-align:top;position:relative;top:.32em;margin-left:.25em;font-weight:500}
.display{font-family:var(--serif);font-weight:400;text-transform:uppercase;line-height:.84;letter-spacing:-.025em}
.statement{font-size:clamp(27px,3.5vw,56px);line-height:1.06;letter-spacing:-.028em;font-weight:400;text-wrap:balance}
.lead{font-size:clamp(19px,1.6vw,25px);line-height:1.3;letter-spacing:-.012em;text-wrap:pretty}
.body{color:var(--mute);font-size:16px;line-height:1.6;max-width:46ch;text-wrap:pretty}
.body+.body{margin-top:1em}
.serif-h{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.02em}
/* Bodoni's display hyphen is a hairline; draw a visible one */
.nw{white-space:nowrap}
.hy{display:inline-block;width:.3em;height:.06em;background:currentColor;vertical-align:.3em;margin:0 .04em;overflow:hidden;text-indent:2em;white-space:nowrap}

/* ---------- layout ---------- */
.wrap{padding-left:var(--gl);padding-right:var(--gr)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.sec{padding-block:clamp(96px,13vw,200px)}
.sec-s{padding-block:clamp(64px,8vw,120px)}
.index{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(40px,6vw,90px)}
.index>*:nth-child(2){flex:1;text-align:center}
.paper{background:var(--paper);color:var(--ink);--line:var(--ink-line);--mute:var(--ink-mute)}
.paper ::selection{background:var(--ink);color:var(--paper)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;color:var(--fg);transition:transform .7s var(--ease),color .4s;padding-top:env(safe-area-inset-top,0px)}
.nav.dark{color:var(--ink)}
.nav .logo img{transition:filter .4s}
.nav.dark .logo img{filter:invert(1)}
.nav.up{transform:translateY(-110%)}
.nav .bar{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav .logo{width:74px;justify-self:start}
.nav .logo img{width:100%;height:auto}
.nav .clock{font-variant-numeric:tabular-nums}
.nav .links{justify-self:end;display:flex;gap:clamp(18px,2.2vw,34px)}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease);padding-bottom:2px}
.ul:hover,.ul[aria-current]{background-size:100% 1px}
.menu-btn{display:none;justify-self:end;background:none;border:0;cursor:pointer;padding:12px 0 12px 12px;color:inherit}

.menu{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px)) var(--gr) calc(28px + env(safe-area-inset-bottom,0px)) var(--gl);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io),visibility 0s .8s}
.menu.open{visibility:visible;clip-path:inset(0);transition:clip-path .8s var(--ease-io)}
.menu .bar{height:var(--nav-h);display:flex;justify-content:space-between;align-items:center}
.menu .bar img{width:74px}
.menu nav{margin-top:auto;display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:baseline;gap:14px;font-family:var(--serif);text-transform:uppercase;font-size:clamp(46px,13.5vw,96px);line-height:.98;letter-spacing:-.02em;overflow:hidden}
.menu nav a span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.menu nav a small{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--mute);transform:translateY(200%);transition:transform .9s var(--ease);display:inline-block}
.menu.open nav a span,.menu.open nav a small{transform:none;transition-delay:calc(.25s + var(--i)*.06s)}
.menu nav a[aria-current] span{font-style:italic}
.mfoot{margin-top:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;opacity:0;transition:opacity .6s}
.menu.open .mfoot{opacity:1;transition-delay:.6s}
.mfoot div{display:flex;flex-direction:column;gap:6px}

/* ---------- CTA ---------- */
.cta{display:inline-flex;align-items:center;gap:16px;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.cta .c{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;position:relative;overflow:hidden;transition:border-color .5s}
.cta .c::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .6s var(--ease)}
.cta .c svg{width:14px;height:14px;position:relative;z-index:1;transition:transform .6s var(--ease),color .3s}
.cta:hover .c{border-color:currentColor}
.cta:hover .c::before{transform:scale(1)}
.cta:hover .c svg{color:var(--bg);transform:translateX(2px)}
.paper .cta:hover .c svg{color:var(--paper)}
.cta.diag:hover .c svg{transform:translate(2px,-2px)}

/* ---------- media ---------- */
.media{position:relative;overflow:hidden;background:#0d0d0d}
.media .px{position:absolute;left:0;right:0;top:-8%;height:116%;will-change:transform}
.media img{width:100%;height:100%;object-fit:cover}
.media.static .px{top:0;height:100%}
.js .media{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.js .media img{transform:scale(1.22);transition:transform 2s var(--ease),filter 1.4s var(--ease)}
.js .media.in{clip-path:inset(0)}
.js .media.in img{transform:scale(1)}
.cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px}

/* ---------- reveal ---------- */
/* if the script never boots, show everything anyway */
@keyframes failsafe{to{opacity:1;transform:none;clip-path:none}}
html.js:not(.booted) [data-reveal],html.js:not(.booted) .media{animation:failsafe .6s 4.2s forwards}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-split] .w>span{display:inline-block;transform:translateY(108%);transition:transform 1.25s var(--ease);transition-delay:calc(var(--d,0s) + var(--l,0)*.09s)}
.js [data-split].in .w>span{transform:none}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
[data-lit] .lw{opacity:.16;transition:opacity .5s}
[data-lit] .lw.on{opacity:1}

/* ---------- hero (home) ---------- */
.hero{position:relative;height:100svh;min-height:640px;isolation:isolate;overflow:hidden;--shot:min(50vw,calc(100svh * .74))}
.hero .shot{position:absolute;top:0;bottom:0;right:0;width:var(--shot);z-index:0}
.hero .shot .media{height:100%;background:#000}
.hero .shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,0) 26%)}
.hero .shot picture{display:block;width:100%;height:100%}
.hero .shot img{animation:breathe 24s ease-in-out infinite alternate;object-position:center 45%}
@keyframes breathe{to{scale:1.06}}
.hero .left{position:absolute;z-index:2;left:var(--gl);top:0;bottom:0;width:calc(100% - var(--shot) - var(--gl) - var(--gut) * 1.5);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + clamp(20px,4vh,60px)) 0 clamp(22px,3vh,40px)}
.hero .top{display:flex;flex-direction:column;gap:4px}
.hero .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(22px,3.4vh,40px)}
.hero .meta p{max-width:30ch}
.hero h1{color:#fff;font-size:clamp(60px,10vw,200px);line-height:.82}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .ln2{padding-left:.92em}
/* type-only hero: no photo, the headline spans the full width */
.hero--type{--shot:0px}
.hero--type .left{right:var(--gr);width:auto}
.hero--type h1 .ln2{padding-left:0;text-align:right}
.hero h1 .mb{display:none}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;place-items:center;cursor:pointer}
.intro-on .intro{display:grid;animation:introOut 1s var(--ease-io) 3.35s forwards}
.intro-on body{overflow:hidden}
.intro .words{position:absolute;text-align:center;font-family:var(--serif);font-size:clamp(38px,6.4vw,104px);line-height:1;letter-spacing:-.02em}
.intro .words span{display:block;overflow:hidden;padding-bottom:.1em}
.intro .words i{display:block;font-style:normal;transform:translateY(110%);animation:wIn 1s var(--ease) forwards,wOut .8s var(--ease-io) 1.7s forwards}
.intro .words span:nth-child(2) i{font-style:italic;animation-delay:.18s,1.78s}
.intro .mark{width:min(46vw,300px);position:relative}
.intro .mark .row{overflow:hidden;position:absolute;left:0;right:0}
.intro .mark .row img{width:100%;transform:translateY(105%);animation:wIn 1.1s var(--ease) forwards}
.intro .mark .r1{top:0;height:49%}
.intro .mark .r2{top:49%;height:51%}
.intro .mark .r2 img{margin-top:-23.71%;animation-delay:2.27s}
.intro .mark .r1 img{animation-delay:2.15s}
.intro .mark::before{content:"";display:block;padding-top:48.4%}
.intro .bar{position:absolute;left:var(--gl);right:var(--gr);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;color:var(--mute)}
.intro .bar i{position:absolute;left:0;right:0;top:-14px;height:1px;background:var(--line)}
.intro .bar i::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0);animation:prog 3.3s linear forwards}
@keyframes wIn{to{transform:none}}
@keyframes wOut{to{transform:translateY(-110%)}}
@keyframes prog{to{transform:scaleX(1)}}
@keyframes introOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.intro.skip{animation:introSkip .5s ease forwards!important}
@keyframes introSkip{to{opacity:0;visibility:hidden}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;user-select:none;padding-block:.06em}
.marquee .track{display:inline-flex;will-change:transform}
.marquee .item{display:inline-flex;align-items:center;font-family:var(--serif);text-transform:uppercase;font-size:clamp(76px,14vw,250px);line-height:.92;letter-spacing:-.02em;padding-right:.32em}
.marquee .dot{display:inline-block;width:.12em;height:.12em;border-radius:50%;background:#6d6d6d;margin-left:.32em;transform:translateY(-.04em)}

/* ---------- projects (home + work) ---------- */
.proj{display:block;position:relative}
.proj .media{aspect-ratio:4/5}
.proj .cap .n{font-size:15px;font-weight:500;letter-spacing:-.005em}
.proj .one{color:var(--mute);margin-top:6px;max-width:38ch;font-size:15px}
.proj:hover .media img{transform:scale(1.035)}
.proj .media img{transition:transform 1.4s var(--ease),filter 1s}
.stagger{row-gap:clamp(64px,8vw,140px);align-items:start}
.stagger .p1{grid-column:1/8}
.stagger .p2{grid-column:8/13;margin-top:clamp(120px,22vw,420px)}
.stagger .p3{grid-column:3/9}
.after-work{display:flex;justify-content:flex-end;margin-top:clamp(56px,7vw,110px)}
/* empty portfolio ("in preparation") */
.soon{margin-top:clamp(56px,7vw,120px);align-items:end;row-gap:32px}
.soon .statement{grid-column:1/8;max-width:16ch}
.soon .side{grid-column:9/13}
.soon .ctas{grid-column:8/13;display:flex;flex-wrap:wrap;gap:20px 36px;justify-content:flex-end}

/* ---------- services teaser (home) ---------- */
.svc-teaser .h{grid-column:1/9}
.svc-teaser ol{grid-column:1/13;list-style:none;margin-top:clamp(48px,6vw,96px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut)}
.svc-teaser li{border-top:1px solid var(--line);display:flex;align-items:baseline;gap:18px;padding:18px 0 20px}
.svc-teaser li .label{width:28px;flex:none;color:var(--mute)}
.svc-teaser li b{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.5vw,40px);line-height:1.05;letter-spacing:-.015em;transition:transform .6s var(--ease)}
.svc-teaser li:hover b{transform:translateX(10px)}
.svc-teaser .tfoot{grid-column:1/13;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(40px,5vw,72px)}

/* ---------- client wall ---------- */
.wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
.wall>div{aspect-ratio:3/2;display:grid;place-items:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12%;transition:background .6s}
.wall img{max-height:36%;max-width:62%;width:auto;height:auto;opacity:.72;transition:opacity .5s}
.wall .sq img{max-height:64%}
.wall .tall img{max-height:52%}
.wall .tx{font-size:clamp(11px,1vw,14px);font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:.72;transition:opacity .5s;text-align:center}
.wall .tx.bold{font-weight:600;letter-spacing:.04em;font-size:clamp(16px,1.6vw,22px)}
.wall .tx.serif{font-family:var(--serif);letter-spacing:.14em;font-weight:400;font-size:clamp(12px,1.15vw,16px)}
.wall>div:hover img,.wall>div:hover .tx{opacity:1}
.wall .more{color:var(--mute);grid-column:span 2;aspect-ratio:auto}

/* ---------- big CTA band ---------- */
.band{padding-block:clamp(40px,6vw,100px) clamp(80px,10vw,150px);text-align:left}
.band .big{font-family:var(--serif);font-size:clamp(58px,11.5vw,210px);line-height:.88;letter-spacing:-.025em}
.band .row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-top:clamp(36px,4vw,64px);flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,70px);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.foot .cols{row-gap:36px}
.foot .c1{grid-column:1/5}
.foot .c1 img{width:110px}
.foot .c2{grid-column:7/9}
.foot .c3{grid-column:9/11}
.foot .c4{grid-column:11/13}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:15px}
.foot .word{font-family:var(--serif);text-transform:uppercase;line-height:.78;letter-spacing:-.03em;white-space:nowrap;margin-top:clamp(70px,10vw,160px);font-size:19vw;margin-left:-.04em}
.foot .word .dot{display:inline-block;width:.12em;height:.12em;border-radius:50%;background:#6d6d6d;margin-left:.02em}
.foot .base{display:flex;justify-content:space-between;gap:20px;margin-top:22px;color:var(--mute)}
.totop{background:none;border:0;cursor:pointer;color:inherit}

/* ---------- page head (inner) ---------- */
.phead{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + clamp(70px,12vw,180px))}
.phead .title{display:block}
.phead .under{margin-top:clamp(28px,3vw,44px)}
.phead .intro-row{margin-top:clamp(56px,8vw,130px);align-items:end}
.phead .intro-row .statement{grid-column:1/10}
.phead .intro-row .side{grid-column:10/13;justify-self:end;text-align:right}

/* ---------- house ---------- */
.founder{align-items:start}
.founder .ph{grid-column:1/6}
.founder .ph .media{aspect-ratio:9/14}
.founder .tx{grid-column:7/13;padding-top:clamp(0px,6vw,110px)}
.founder h2{font-size:clamp(48px,6.4vw,112px);margin-top:20px;line-height:.92}
.founder .tx .body{margin-top:28px}
.founder .tx .cta{margin-top:40px}
.principles{row-gap:56px}
.principles>div{grid-column:span 4;border-top:1px solid var(--line);padding-top:22px}
.principles .num{font-family:var(--serif);font-size:clamp(64px,7vw,124px);line-height:.8;margin-bottom:clamp(36px,4vw,64px)}
.principles b{display:block;font-weight:500;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.01em;margin-bottom:10px}
.doors .head{grid-column:1/8}
.doors .list{grid-column:1/13;margin-top:clamp(48px,6vw,96px);border-bottom:1px solid var(--line)}
.door{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);border-top:1px solid var(--line);padding:clamp(22px,2.6vw,38px) 0;align-items:baseline}
.door .label{grid-column:1/3;color:var(--mute)}
.door h3{grid-column:3/9;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,62px);line-height:1;letter-spacing:-.018em;transition:transform .7s var(--ease)}
.door p{grid-column:9/13;color:var(--mute);max-width:36ch}
.door:hover h3{transform:translateX(14px)}
.steps{position:relative;row-gap:48px}
.steps .track{grid-column:1/13;height:1px;background:var(--line);position:relative;margin-bottom:clamp(30px,3vw,48px)}
.steps .track i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}
.steps>div.s{grid-column:span 3}
.steps .s .n{font-family:var(--serif);font-size:clamp(44px,4.6vw,80px);line-height:.85;display:block;margin-bottom:22px}
.steps .s b{display:block;font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:8px}

/* ---------- services page ---------- */
.svc{border-bottom:1px solid var(--line)}
.svc article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);border-top:1px solid var(--line);padding:clamp(28px,3.4vw,52px) 0;align-items:start}
.svc .no{grid-column:1/3;color:var(--mute);transition:color .5s;padding-top:.6em}
.svc h2{grid-column:3/8;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,72px);line-height:.98;letter-spacing:-.02em;transition:transform .8s var(--ease)}
.svc .d{grid-column:8/13;padding-top:.35em}
.svc .d p{color:var(--mute);max-width:44ch}
.svc .tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px}
.svc article:hover h2{transform:translateX(16px)}
.svc article:hover .no{color:var(--fg)}

/* ---------- work index ---------- */
.wlist{display:flex;flex-direction:column;gap:clamp(90px,12vw,200px)}
.wrow{align-items:end}
.wrow .ph{grid-column:1/7}
.wrow .info{grid-column:8/13;padding-bottom:6px}
.wrow.r .ph{grid-column:7/13;order:2}
.wrow.r .info{grid-column:1/6;order:1}
.wrow .media{aspect-ratio:4/5}
.wrow h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(52px,7.4vw,132px);line-height:.85;letter-spacing:-.025em;margin:18px 0 26px}
.wrow dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;border-top:1px solid var(--line);padding-top:18px;margin-bottom:30px}
.wrow dt{color:var(--mute)}
.wrow dd{font-size:15px}
.wrow .one{font-size:clamp(19px,1.6vw,24px);line-height:1.3;letter-spacing:-.012em;max-width:26ch;margin-bottom:36px}
.wrow:hover h2{font-style:italic}

/* ---------- case study ---------- */
.case-head .back{display:inline-flex;gap:10px;align-items:center}
.case-head .title{margin-top:clamp(40px,6vw,90px)}
.facts{margin-top:clamp(40px,5vw,72px);row-gap:28px}
.facts>div{grid-column:span 3;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.facts>div .label{color:var(--mute)}
.facts b{font-weight:400;font-size:16px}
.story{align-items:start}
.story .ph{grid-column:1/7;position:sticky;top:calc(var(--nav-h) + 20px)}
.story .ph .media{aspect-ratio:4/5}
.story .tx{grid-column:8/13}
.story .blk{border-top:1px solid var(--line);padding-top:16px;margin-bottom:clamp(56px,7vw,110px)}
.story .blk .label{color:var(--mute);display:block;margin-bottom:22px}
.story .blk:last-child{margin-bottom:0}
.story .blk p.big{font-size:clamp(22px,2.2vw,34px);line-height:1.2;letter-spacing:-.02em;text-wrap:pretty}
.gal{row-gap:clamp(48px,6vw,100px);align-items:start}
.gal figure .media{aspect-ratio:4/5}
.gal .g1{grid-column:1/6}
.gal .g2{grid-column:7/13;margin-top:clamp(80px,16vw,280px)}
.gal .g3{grid-column:3/9}
.gal .g4{grid-column:8/13;margin-top:clamp(60px,10vw,180px)}
.gal figcaption{margin-top:12px;color:var(--mute);display:flex;justify-content:space-between}
.next{display:block;border-top:1px solid var(--line);padding-top:16px}
.next .row{display:flex;justify-content:space-between}
.next .nm{display:block;font-family:var(--serif);text-transform:uppercase;font-size:clamp(64px,15vw,270px);line-height:.82;letter-spacing:-.025em;margin-top:clamp(30px,4vw,60px);white-space:nowrap}
.next:hover .nm{font-style:italic}

/* ---------- journal ---------- */
.entries{border-bottom:1px solid var(--line)}
.entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);border-top:1px solid var(--line);padding:clamp(22px,2.4vw,34px) 0;align-items:start}
.entry .when{grid-column:1/3;color:var(--mute)}
.entry h2{grid-column:3/9;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,68px);line-height:1;letter-spacing:-.02em}
.entry .th{grid-column:10/13}
.entry .th .media{aspect-ratio:4/5}
.entry .kind{grid-column:3/9;color:var(--mute);margin-top:22px}
.entry:hover h2{font-style:italic}
.article .title-a{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.4vw,136px);line-height:.94;letter-spacing:-.025em;max-width:16ch;margin-top:clamp(36px,5vw,70px);text-wrap:balance}
.article .body-grid{align-items:start}
.article .fig{grid-column:1/6}
.article .fig .media{aspect-ratio:9/14}
.article .fig figcaption{margin-top:12px;color:var(--mute)}
.article .prose{grid-column:7/12}
.article .prose p{color:var(--mute);font-size:17px;line-height:1.65;max-width:58ch}
.article .prose p+p{margin-top:1.2em}
.article .prose p.lead{color:var(--fg);font-size:clamp(21px,1.9vw,29px);line-height:1.3;margin-bottom:1.6em}

/* ---------- contact ---------- */
.contact{align-items:start}
.contact .ch{grid-column:1/6;display:flex;flex-direction:column}
.contact .ch>a,.contact .ch>div{border-top:1px solid var(--line);padding:20px 0 26px;display:flex;flex-direction:column;gap:12px}
.contact .ch .label{color:var(--mute)}
.contact .ch .v{font-family:var(--serif);font-size:clamp(28px,2.8vw,46px);line-height:1;letter-spacing:-.015em}
.contact .ch>a .v{display:flex;justify-content:space-between;align-items:center;gap:12px}
.contact .ch>a:hover .v{font-style:italic}
.contact .ch .v svg{width:18px;height:18px;flex:none;transition:transform .6s var(--ease)}
.contact .ch>a:hover .v svg{transform:translate(3px,-3px)}
.form{grid-column:7/13;display:flex;flex-direction:column;gap:34px}
.form .f{display:flex;flex-direction:column;gap:10px}
.form .f .label{color:var(--mute)}
.form input,.form textarea{background:none;border:0;border-bottom:1px solid var(--line-2);padding:8px 0 12px;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.01em;border-radius:0;outline:0;transition:border-color .4s;width:100%}
.form textarea{min-height:120px;resize:vertical;line-height:1.35}
.form input:focus,.form textarea:focus{border-color:var(--fg)}
.form input::placeholder,.form textarea::placeholder{color:var(--dim)}
.doors-pick{display:flex;flex-wrap:wrap;gap:10px}
.doors-pick label{cursor:pointer;position:relative}
.doors-pick input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.doors-pick span{display:inline-block;border:1px solid var(--line-2);border-radius:999px;padding:11px 18px;font-size:14px;transition:background .4s,color .4s,border-color .4s}
.doors-pick label:hover span{border-color:var(--fg)}
.doors-pick input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.doors-pick input:focus-visible+span{outline:1px solid var(--fg);outline-offset:3px}
.form .send{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
.form .note{color:var(--mute);font-size:13px;max-width:34ch}

@media (hover:none),(pointer:coarse){body::after{display:none}}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(30px,5vw,70px)}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .45s var(--ease-io) both}
::view-transition-new(root){animation:vtIn .9s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-24px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(40px)}}
.nav{view-transition-name:nav}
::view-transition-group(nav){animation:none}
html.leaving main,html.leaving .foot{opacity:0;transform:translateY(-20px);transition:opacity .35s var(--ease-io),transform .35s var(--ease-io)}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .nav .clock{display:none}
  .nav .bar{grid-template-columns:1fr auto}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot .c1{grid-column:1/13}
  .foot .c2{grid-column:1/5}.foot .c3{grid-column:5/9}.foot .c4{grid-column:9/13}
}
@media (max-width:899px){
  :root{--nav-h:64px}
  .nav .links{display:none}
  .menu-btn{display:block}
  .nav .logo{width:62px}
  /* phones and tablets: the full photo sits above the headline instead of behind it, so nothing gets cropped */
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column}
  .hero .shot{position:relative;inset:auto;width:auto;margin:calc(var(--nav-h) + env(safe-area-inset-top,0px)) var(--gr) 0 var(--gl);aspect-ratio:4/5;max-height:50svh}
  .hero .shot::after{display:none}
  .hero .left{position:relative;inset:auto;width:auto;flex:1;justify-content:flex-end;padding:clamp(18px,3vh,36px) var(--gr) clamp(14px,2.5vh,26px) var(--gl)}
  .hero .top,.hero .meta .cta{display:none}
  .hero--type{height:100svh}
  .hero--type .left{position:absolute;inset:0;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 24px) var(--gr) clamp(16px,3vh,28px) var(--gl)}
  .hero--type .left{justify-content:space-between}
  .hero--type .top{display:flex}
  .hero--type h1 .ln2{text-align:left}
  .hero h1 .mb{display:inline}
  .grid>*{grid-column:1/-1!important;margin-top:0}
  .stagger .p2,.stagger .p3{margin-top:0!important}
  .stagger{row-gap:72px}
  .stagger .p2{width:78%;justify-self:end}
  .stagger .p3{width:86%}
  .soon .ctas{justify-content:flex-start}
  .svc-teaser ol{grid-template-columns:1fr}
  .svc-teaser .tfoot{flex-direction:column;align-items:flex-start}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall .more{grid-column:span 1;aspect-ratio:3/2;padding:12%}
  .index>*:nth-child(2){display:none}
  .phead .intro-row{row-gap:28px}
  .phead .intro-row .side{justify-self:start;text-align:left}
  .founder .tx{padding-top:48px}
  .founder .ph{width:84%}
  .principles>div{margin-bottom:8px}
  .door{grid-template-columns:1fr;row-gap:14px}
  .door .label,.door h3,.door p{grid-column:1/-1}
  .steps>div.s{margin-bottom:8px}
  .svc article{grid-template-columns:1fr;row-gap:16px}
  .svc .no,.svc h2,.svc .d{grid-column:1/-1;padding-top:0}
  .wrow{row-gap:26px}
  .wrow .ph,.wrow.r .ph{order:1}
  .wrow .info,.wrow.r .info{order:2}
  .facts>div{grid-column:span 6!important}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story .ph{position:relative;top:0;margin-bottom:56px}
  .gal .g2,.gal .g4{width:80%;justify-self:end}
  .gal .g3{width:86%}
  .entry{grid-template-columns:1fr;row-gap:14px}
  .entry .when,.entry h2,.entry .th,.entry .kind{grid-column:1/-1}
  .entry .th{width:60%}
  .entry .kind{margin-top:0}
  .article .fig{margin-bottom:44px}
  .contact .ch{margin-bottom:64px}
  .band .row{flex-direction:column;align-items:flex-start}
  .foot .base{flex-direction:column;gap:6px}
  .foot .c1{grid-column:1/-1!important}
  .foot .c2{grid-column:1/7!important}.foot .c3{grid-column:7/13!important}.foot .c4{grid-column:1/-1!important}
  .foot .base .mid{display:none}
}
@media (max-width:520px){
  .hero .meta p{max-width:28ch}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  body::after{animation:none}
  .js .media{clip-path:none}
  .js .media img{transform:none}
  .js [data-split] .w>span,.js [data-reveal]{transform:none;opacity:1}
}

/* ---------- visuals layer (hero hall, house desk, reach, services hover image, founder, band photo, services page images) ---------- */

/* ---------- hero: photo panel on the right (uses the existing .hero .shot system) ---------- */
.hero .shot img{object-position:50% 60%}
.hero .shot .media{background:#000}

/* ---------- 01 the house: wide plate + body ---------- */
.house-ph{grid-column:1/7;margin-top:clamp(48px,6vw,96px)}
.house-ph .media{aspect-ratio:16/10}
.house-ph img{object-position:70% 55%}
.house-tx{grid-column:8/12;align-self:end}
.house-ph figcaption{margin-top:12px}

/* ---------- reach: luxury without borders ---------- */
.lux{align-items:end}
.lux .tx{grid-column:1/7;padding-bottom:6px}
.lux .tx h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;font-size:clamp(52px,7.4vw,132px);line-height:.86;letter-spacing:-.025em}
.lux .tx h2 em{font-style:italic;text-transform:none}
.lux .tx .body{margin-top:clamp(28px,3vw,44px)}
.lux .tx .mk{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;border-top:1px solid var(--line);padding-top:16px;color:var(--mute)}
.lux .ph{grid-column:8/13}
.lux .ph .media{aspect-ratio:4/5}

/* ---------- services teaser: list + one image that follows the hovered service ---------- */
.svc-teaser .grid{align-items:start}
.svc-teaser ol.vis{grid-column:1/8;grid-template-columns:1fr}
.svc-teaser ol.vis li{padding:0}
.svc-teaser ol.vis li a{display:flex;align-items:center;gap:18px;width:100%;padding:18px 0 20px}
.svc-teaser ol.vis li .label{align-self:baseline;padding-top:.5em}
.svc-teaser ol.vis li b{flex:1}
.svc-teaser ol.vis li .th{display:none}
.svc-teaser ol.vis li a:focus-visible{outline-offset:-1px}
.svc-teaser .pv{grid-column:9/13;grid-row:2/4;margin-top:clamp(48px,6vw,96px);position:sticky;top:calc(var(--nav-h) + 24px)}
.svc-teaser .pv .stack{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0d0d0d}
.svc-teaser .pv .stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s var(--ease),transform 1.6s var(--ease)}
.svc-teaser .pv .stack img.on{opacity:1;transform:none}
.svc-teaser .pv .cap{color:var(--mute)}
@media (min-width:900px){.svc-teaser ol.vis li.on b{font-style:italic}}
.svc-teaser .tfoot{grid-row:4}

/* ---------- founder (home) ---------- */
.founder--home .ph .media{aspect-ratio:4/5}
.founder--home .tx h2{font-size:clamp(46px,5.6vw,100px);max-width:9ch}
.founder--home .sig{width:clamp(170px,15vw,230px);height:auto;margin-top:clamp(32px,3.4vw,48px)}
.founder--home .role{display:block;margin-top:10px;color:var(--mute)}

/* ---------- closing band with the meeting room ---------- */
.band-ph{margin-bottom:clamp(40px,5vw,80px)}
.band-ph .media{aspect-ratio:21/9}
.band-ph img{object-position:50% 60%}

/* ---------- services page: one image per discipline ---------- */
.svc article.has-ph h2{grid-column:3/8}
.svc article.has-ph .d{grid-column:8/11}
.svc article.has-ph .ph{grid-column:11/13}
.svc article.has-ph .ph .media{aspect-ratio:4/5}
.svc article.has-ph .ph img{transition:transform 1.4s var(--ease)}
.svc article.has-ph:hover .ph img{transform:scale(1.04)}
.svc article{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---------- responsive ---------- */
@media (max-width:899px){
  .house-ph{margin-top:40px}
  .house-tx{margin-top:32px!important}
  .lux .ph{margin-top:44px!important;width:84%;justify-self:end}
  .svc-teaser .pv{display:none}
  .svc-teaser ol.vis li .th{display:block;width:56px;height:auto;aspect-ratio:4/5;object-fit:cover;flex:none}
  .svc-teaser .tfoot{grid-row:auto}
  .founder--home .ph{width:84%}
  .band-ph .media{aspect-ratio:4/3}
  .svc article.has-ph{row-gap:16px}
  .svc article.has-ph .ph{grid-column:1/-1;width:62%;max-width:360px}
  .svc article.has-ph .h2,.svc article.has-ph .d,.svc article.has-ph h2{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .svc-teaser .pv .stack img{transform:none}
}