body{margin:0}*{box-sizing:border-box}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none;transition:color .25s,border-color .25s}
a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid #B39A6A;outline-offset:3px}
.w{max-width:1120px;margin:0 auto;padding:0 32px}
.sec{padding:112px 0;border-top:1px solid #201D1B}
.lab{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#B39A6A;margin:0 0 24px;line-height:1.4}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;color:#F2EFE8;margin:0}
.h1{font-size:clamp(34px,4.2vw,50px);line-height:1.15}
.h2{font-size:clamp(28px,3.2vw,38px);line-height:1.2;margin-bottom:24px}
h3{font-size:24px;line-height:1.25}
p{margin:0 0 18px;max-width:640px}
.nl{display:flex;gap:28px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.nl a{padding:8px 0;border-bottom:1px solid transparent;color:#AAA49C}
.nl a:hover{color:#F2EFE8}.nl a.on{color:#F2EFE8;border-bottom-color:#B39A6A}
.fl{flex-wrap:wrap;gap:12px 28px}
.lk{display:inline-block;color:#B39A6A;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid #B39A6A;padding-bottom:4px}
.lk:hover,.tl:hover{color:#F2EFE8}
.tl{text-decoration:underline}
.hd{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;position:relative}
.mm{display:none}.mm summary{list-style:none;cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#F2EFE8;border:1px solid #3A3531;padding:10px 16px}
.mm summary::-webkit-details-marker{display:none}
.mn{position:absolute;right:32px;top:72px;background:#151313;border:1px solid #2B2724;padding:20px 24px;flex-direction:column;gap:14px;z-index:5;min-width:200px}
.hbg{position:relative;min-height:780px}
.hbg::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,9,9,.6) 0%,rgba(10,9,9,0) 24%,rgba(10,9,9,0) 68%,#0A0909 100%),linear-gradient(90deg,rgba(10,9,9,.88) 0%,rgba(10,9,9,.5) 50%,rgba(10,9,9,.25) 100%),url(images/library.jpg) center 30%/cover no-repeat}
.hbg>*{position:relative;z-index:1}
.sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:72px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;padding:36px 0;border-top:1px solid #2B2724}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:56px}
.cols>div{border-top:1px solid #2B2724;padding-top:28px}
.sl{columns:3 220px;column-gap:56px;list-style:none;margin:0;padding:0}
.sl li{break-inside:avoid;padding:14px 0;border-bottom:1px solid #2B2724;color:#F2EFE8}
.mu{color:#AAA49C}.iv{color:#F2EFE8}
ul.l{margin:0 0 16px;padding-left:18px;max-width:700px}ul.l li{margin-bottom:10px}
.ff{max-width:520px}
.ff label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#F2EFE8;margin:0 0 8px}
.ff input,.ff select,.ff textarea{width:100%;background:#151313;border:1px solid #3A3531;color:#F2EFE8;padding:12px 14px;font:inherit;margin-bottom:20px;border-radius:0}
.ff input[type=checkbox]{width:auto;margin:0 10px 0 0}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:#B39A6A}
.btn{display:inline-block;padding:14px 26px;border:1px solid #B39A6A;color:#F2EFE8;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}.btn:hover{background:#B39A6A;color:#0A0909}
.so{display:inline-block;color:#AAA49C;margin-left:20px}.so:hover{color:#B39A6A}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:900px){.dn{display:none}.mm{display:block}.sp,.row{grid-template-columns:minmax(0,1fr);gap:24px}.sec{padding:80px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---- A. homepage logo introduction (home only; html has class "intro"), about 2.8s ---- */
html.intro{--tx:0px;--ty:0px;--s:1;background:#000}
html.intro body{background:#000!important}
html.intro:not(.done){overflow:hidden}
.brand{display:block;position:relative;transform-origin:0 0}
.brand .ly{display:none;position:absolute;left:0;top:0;width:100%;height:100%}
html.intro .brand{visibility:hidden;z-index:5;transform:translate(var(--tx),var(--ty)) scale(var(--s))}
html.intro.ready .brand{visibility:visible}
html.intro:not(.merged) .brand .lg{opacity:0}
html.intro:not(.merged) .brand .ly{display:block}
.ly.l{clip-path:inset(0 94.0% 100% 0)}
.ly.r{clip-path:inset(100% 0 0 94.14%)}
.ly.t{clip-path:inset(0 5.86% 35.91% 6.0%)}
.ly.u{clip-path:inset(64.09% 5.86% 0 6.0%)}
@keyframes lnL{from{clip-path:inset(0 94.0% 100% 0)}to{clip-path:inset(0 94.0% 0 0)}}
@keyframes lnR{from{clip-path:inset(100% 0 0 94.14%)}to{clip-path:inset(0 0 0 94.14%)}}
@keyframes txA{from{clip-path:inset(0 5.86% 35.91% 6.0%)}to{clip-path:inset(0 6.0% 35.91% 6.0%)}}
@keyframes txB{from{clip-path:inset(64.09% 5.86% 0 6.0%)}to{clip-path:inset(64.09% 6.0% 0 6.0%)}}
html.intro.build .ly.l{animation:lnL .9s cubic-bezier(.6,0,.2,1) both}
html.intro.build .ly.r{animation:lnR .9s cubic-bezier(.6,0,.2,1) both}
html.intro.build .ly.t{animation:txA .65s cubic-bezier(.5,0,.2,1) .6s both}
html.intro.build .ly.u{animation:txB .6s cubic-bezier(.5,0,.2,1) 1.05s both}
html.intro .hbg::before,html.intro .hero>*,html.intro .nl,html.intro .mm,html.intro .sec,html.intro footer{opacity:0}
html.intro.move .brand{transform:none;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
html.intro.move .hbg::before{opacity:1;transition:opacity 1.1s ease}
html.intro.rest body{background:#0A0909!important;transition:background .7s}
html.intro.rest .sec,html.intro.rest footer{opacity:1;transition:opacity .7s ease}
html.intro.nav .nl,html.intro.nav .mm{opacity:1;transition:opacity .5s ease}
html.intro.hero-in .hero>*{opacity:1;animation:fadeUp .6s cubic-bezier(.2,.6,.2,1) both}
html.intro.hero-in .hero>*:nth-child(2){animation-delay:.08s}
html.intro.hero-in .hero>*:nth-child(3){animation-delay:.16s}
html.skip *,html.skip *::before{transition:none!important;animation:none!important}
html.skip.intro .hero>*,html.skip.intro .nl,html.skip.intro .mm,html.skip.intro .sec,html.skip.intro footer,html.skip.intro .hbg::before{opacity:1}

/* phones */
@media(max-width:700px){
footer .w>div:last-child{text-align:left!important}
.hbg::before{background:linear-gradient(180deg,rgba(10,9,9,.6) 0%,rgba(10,9,9,0) 20%,rgba(10,9,9,.35) 55%,#0A0909 100%),linear-gradient(90deg,rgba(10,9,9,.8) 0%,rgba(10,9,9,.55) 55%,rgba(10,9,9,.3) 100%),url(images/library.jpg) 62% 30%/cover no-repeat}
}
/* ---- B. internal pages: full-screen black with six equally spaced vertical lines (about 1.7s) ---- */
header{position:relative;z-index:60}
.hbg>header{z-index:60}
/* Six lines at 1/7, 2/7 ... 6/7 of the screen width (equal gaps, margins equal to the gaps), full screen height, the white and stroke width of the logo's strokes.
   Lines 1, 3, 5 (.o / ::before) enter from the top and move down; lines 2, 4, 6 (.e / ::after) enter from the bottom and move up; on leaving they keep going the same way. */
:root{--lw:4px;--lines-odd:linear-gradient(90deg,transparent 0,transparent calc(14.2857% - var(--lw)/2),#fff calc(14.2857% - var(--lw)/2),#fff calc(14.2857% + var(--lw)/2),transparent calc(14.2857% + var(--lw)/2),transparent calc(42.8571% - var(--lw)/2),#fff calc(42.8571% - var(--lw)/2),#fff calc(42.8571% + var(--lw)/2),transparent calc(42.8571% + var(--lw)/2),transparent calc(71.4286% - var(--lw)/2),#fff calc(71.4286% - var(--lw)/2),#fff calc(71.4286% + var(--lw)/2),transparent calc(71.4286% + var(--lw)/2));--lines-even:linear-gradient(90deg,transparent 0,transparent calc(28.5714% - var(--lw)/2),#fff calc(28.5714% - var(--lw)/2),#fff calc(28.5714% + var(--lw)/2),transparent calc(28.5714% + var(--lw)/2),transparent calc(57.1429% - var(--lw)/2),#fff calc(57.1429% - var(--lw)/2),#fff calc(57.1429% + var(--lw)/2),transparent calc(57.1429% + var(--lw)/2),transparent calc(85.7143% - var(--lw)/2),#fff calc(85.7143% - var(--lw)/2),#fff calc(85.7143% + var(--lw)/2),transparent calc(85.7143% + var(--lw)/2))}
@keyframes rtDL{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rtDR{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rtXL{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes rtXR{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
/* leaving: overlay built by transitions.js */
.rt{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:#000;opacity:0}
.rt.on{opacity:1;transition:opacity .28s cubic-bezier(.4,0,.2,1)}
.rt .o,.rt .e{position:absolute;top:0;left:0;right:0;bottom:0}
.rt .o{background:var(--lines-odd);clip-path:inset(0 0 100% 0)}
.rt .e{background:var(--lines-even);clip-path:inset(100% 0 0 0)}
.rt.go .o{animation:rtDL .7s cubic-bezier(.6,0,.2,1) .12s both}
.rt.go .e{animation:rtDR .7s cubic-bezier(.6,0,.2,1) .12s both}
/* arriving: the page opens already covered (black, lines fully drawn in the same places); the lines run on out of view and the page fades up from the black */
html.rtin{background:#000}
html.rtin body{opacity:0}
html.rtin::before,html.rtin::after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;pointer-events:none}
html.rtin::before{background:var(--lines-odd)}
html.rtin::after{background:var(--lines-even)}
/* Back/Forward: the lines draw on arrival */
html.rtback::before{animation:rtDL .7s cubic-bezier(.6,0,.2,1) .1s both}
html.rtback::after{animation:rtDR .7s cubic-bezier(.6,0,.2,1) .1s both}
html.rtin.rtout::before{animation:rtXR .6s cubic-bezier(.6,0,.2,1) both}
html.rtin.rtout::after{animation:rtXL .6s cubic-bezier(.6,0,.2,1) both}
html.rtin.rtout body{opacity:1;transition:opacity .55s cubic-bezier(.4,0,.2,1) .15s}
@media (prefers-reduced-motion:reduce){.rt{display:none}}
/* people */
.pn{font-family:'Cormorant Garamond',serif;font-size:30px;color:#F2EFE8;text-decoration:none;transition:color .3s}.pn:hover{color:#B39A6A}
.pd{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#B39A6A;margin:8px 0 0}
.bk{color:#B39A6A;text-decoration:none}.bk:hover{color:#F2EFE8}
/* portraits: one treatment everywhere */
.pf{margin:0 0 36px;overflow:hidden;background:#151313;aspect-ratio:4/5;max-width:320px}
.pf img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.04) brightness(.84)}
.pf-lg{max-width:360px}
.pf-sm{max-width:200px;margin-bottom:24px}
/* clients */
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 28px}
.ct{display:flex;align-items:center;min-height:64px;padding:14px 0;border-bottom:1px solid #201D1B;font-size:13.5px;line-height:1.4;color:#F2EFE8}
.ct b{font-weight:400}
.ct img{display:block;max-width:150px;max-height:34px;width:auto;height:auto;filter:brightness(0) invert(1);opacity:.72;transition:opacity .3s}
.ct:hover img{opacity:1}
.ct.has b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* people listing */
.tm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:56px 40px}
.tm-i{display:block}
.tm-i .pf{display:block;max-width:240px;margin-bottom:22px}
.tm-i .pn{display:block}.tm-i .pd{display:block}
.tm-i:hover .pn{color:#B39A6A}
.tm-mp{align-self:end}
.pn-lg{font-size:clamp(36px,4.4vw,52px);line-height:1.12}
.tm-mp .tm-i .pd{margin-top:14px}
.tm-i .pf.pf-lg{max-width:360px;margin-bottom:0}
/* phones: lighter spacing and type, footer icons aligned left */
@media(max-width:700px){
.w{padding:0 22px}
.sec{padding:56px 0}
.hbg{min-height:500px}
.hero{padding-top:92px!important;padding-bottom:88px!important}
.hero h1{font-size:36px!important}
.hero>div{margin-bottom:28px!important}
p[style*="font-size:19px"]{font-size:16.5px!important;line-height:1.7!important}
.h1{font-size:30px}.h2{font-size:26px;margin-bottom:18px}h3{font-size:21px}
.row{padding:24px 0;gap:10px}
.cols{gap:32px}
.mn{right:22px}
section[style*="padding:104px"]{padding:56px 0 40px!important}
footer{padding:36px 0 24px!important}
footer .w{gap:22px!important}
.so{margin:0 20px 0 0}
.cg{grid-template-columns:1fr 1fr;gap:0 16px}
.ct{min-height:50px;padding:10px 0;font-size:12.5px}
.tm{gap:40px 24px;grid-template-columns:1fr 1fr}
.pn{font-size:22px;line-height:1.2;display:block;margin-top:14px}
}