:root{
  --navy:#172741;--navy-d:#0D1828;--gold:#B58932;--gold-l:#D2AE62;--ivory:#F6F2EA;--ink:#1b2333;--muted:#5d6472;--line:#e3dccd;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Montserrat',system-ui,sans-serif;
  --gut:clamp(20px,5vw,64px);--max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:clamp(.95rem,.25vw + .9rem,1.05rem);line-height:1.7;color:var(--ink);background:var(--ivory)}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);color:var(--navy-d);padding:8px 12px}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.k{font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.05;letter-spacing:-.005em}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
h2 em,h1 em{font-style:italic;color:var(--gold-l)}
section{padding:clamp(72px,10vw,128px) 0}
.lead{font-size:clamp(1.02rem,.5vw + .95rem,1.2rem);color:var(--muted);max-width:60ch}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:15px 24px;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-g{background:var(--gold);color:var(--navy-d)}.btn-g:hover{background:var(--gold-l)}
.btn-o{border-color:rgba(210,174,98,.6);color:var(--ivory)}.btn-o:hover{background:rgba(210,174,98,.12);border-color:var(--gold-l)}
.btn-n{border-color:var(--navy);color:var(--navy)}.btn-n:hover{background:var(--navy);color:var(--ivory)}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;background:rgba(13,24,40,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(210,174,98,.18);color:var(--ivory)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:36px;height:36px}
.brand span{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:.08em;line-height:1}
.brand small{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.26em;color:var(--gold-l);margin-top:5px}
.nav{display:flex;gap:clamp(14px,2vw,30px);list-style:none}
.nav a{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:rgba(246,242,234,.82)}
.nav a:hover{color:var(--gold-l)}
.top .btn{padding:10px 16px;font-size:.66rem}
.menu-btn{display:none;background:none;border:1px solid rgba(210,174,98,.5);color:var(--ivory);font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--ivory);background:var(--navy-d);padding:0;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,24,40,.94) 0%,rgba(13,24,40,.7) 42%,rgba(13,24,40,.1) 100%),linear-gradient(0deg,rgba(13,24,40,.9),transparent 45%)}
.hero .wrap{position:relative;z-index:1;padding-top:140px;padding-bottom:clamp(56px,9vw,110px)}
.hero h1{font-size:clamp(2.8rem,7vw,6.2rem);max-width:12ch;margin:18px 0 24px}
.hero p.lead{color:rgba(246,242,234,.86);max-width:52ch}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-facts{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:clamp(48px,7vw,84px);padding-top:24px;border-top:1px solid rgba(210,174,98,.3)}
.hero-facts b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--gold-l);line-height:1.1}
.hero-facts span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,242,234,.7)}

/* about */
.about .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,110px);align-items:start}
.about h2{margin-top:14px}
.svc{list-style:none;counter-reset:s;border-top:1px solid var(--line)}
.svc li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:8px 18px;padding:24px 0;border-bottom:1px solid var(--line)}
.svc li::before{content:"0" counter(s);font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--gold);line-height:1}
.svc h3{font-size:1.5rem}
.svc p{grid-column:2;color:var(--muted);font-size:.95rem}

/* focus */
.focus{background:var(--navy-d);color:var(--ivory)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,60px)}
.sec-head h2{margin-top:12px}
.focus .sec-head p{color:rgba(246,242,234,.78);max-width:46ch}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.fcard{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fcard:hover img{transform:scale(1.04)}
.fcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,24,40,.95) 0%,rgba(13,24,40,.35) 55%,transparent)}
.fcard div{position:relative;z-index:1;padding:clamp(20px,2.4vw,32px)}
.fcard .no{font-family:var(--serif);font-style:italic;color:var(--gold-l);font-size:1.2rem}
.fcard h3{font-size:clamp(2rem,3vw,2.6rem);margin:4px 0 8px}
.fcard p{font-size:.9rem;color:rgba(246,242,234,.82)}

/* projects */
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.proj{background:#fff;border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr}
.proj figure{aspect-ratio:16/9;overflow:hidden;background:var(--navy-d)}
.proj figure img{width:100%;height:100%;object-fit:cover}
.proj figure.logo{display:flex;align-items:center;justify-content:center;background:#111}
.proj figure.logo img{width:auto;height:84%;object-fit:contain}
.proj .body{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:10px}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.meta .s{color:var(--muted)}
.meta .r{color:var(--gold)}
.proj h3{font-size:clamp(1.7rem,2.4vw,2.2rem)}
.proj p{color:var(--muted);font-size:.95rem}
.proj .more{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--navy);display:flex;justify-content:space-between}
.proj a.more:hover{color:var(--gold)}
.proj span.more{color:var(--muted)}

/* lab */
.lab{position:relative;background:var(--navy);color:var(--ivory);overflow:hidden}
.lab .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.lab figure{aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(210,174,98,.3)}
.lab figure img{width:100%;height:100%;object-fit:cover}
.lab p{color:rgba(246,242,234,.82);margin-top:18px;max-width:52ch}
.lab ul{list-style:none;margin-top:26px;border-top:1px solid rgba(210,174,98,.25)}
.lab li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(210,174,98,.25);font-size:.92rem}
.lab li b{font-family:var(--serif);font-size:1.3rem;font-weight:600}
.lab li span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);align-self:center;text-align:right}

/* magazine */
.mag .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.mag figure{aspect-ratio:4/5;overflow:hidden;max-height:620px}
.mag figure img{width:100%;height:100%;object-fit:cover}
.mag .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mag p{margin-top:18px}

/* contact */
.contact{background:var(--navy-d);color:var(--ivory)}
.contact .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(36px,6vw,90px)}
.contact p.lead{color:rgba(246,242,234,.82);margin-top:18px}
.contact .mail{display:inline-block;margin-top:28px;font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);color:var(--gold-l);text-decoration:none;border-bottom:1px solid rgba(210,174,98,.5);word-break:break-word}
.contact .mail:hover{color:var(--ivory)}
.facts{border-top:1px solid rgba(210,174,98,.3)}
.facts div{padding:16px 0;border-bottom:1px solid rgba(210,174,98,.2)}
.facts dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}
.facts dd{font-size:.95rem;color:rgba(246,242,234,.88);margin-top:4px}

/* footer */
footer{background:#08101c;color:rgba(246,242,234,.7);padding:44px 0;font-size:.8rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}footer a:hover{color:var(--gold-l)}

/* legal pages */
.page-head{background:var(--navy-d);color:var(--ivory);padding:150px 0 64px}
.page-head h1{font-size:clamp(2.6rem,6vw,4.6rem);margin-top:14px}
.legal{max-width:760px;padding:clamp(48px,7vw,88px) var(--gut)}
.legal h2{font-size:1.7rem;margin:38px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:#333b49;margin-bottom:12px}
.legal ul{padding-left:20px}

/* reveal */
.rv{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.js .rv.in{opacity:1;transform:none}}

@media (max-width:1020px){
  .nav,.top .btn{display:none}
  .menu-btn{display:block}
  .top.open .nav{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--navy-d);padding:8px var(--gut) 20px;border-bottom:1px solid rgba(210,174,98,.25)}
  .top.open .nav a{display:block;padding:14px 0;border-bottom:1px solid rgba(210,174,98,.15)}
  .about .grid,.lab .grid,.mag .grid,.contact .grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .fcard{aspect-ratio:4/3}
  .mag figure{aspect-ratio:16/10}
}
@media (max-width:720px){
  .plist{grid-template-columns:1fr}
  .hero::after{background:linear-gradient(0deg,rgba(13,24,40,.96) 0%,rgba(13,24,40,.75) 55%,rgba(13,24,40,.35) 100%)}
  .hero>img{object-position:70% 50%}
  .brand small{display:none}
}