:root{--gold:#B8913F;--bg:#ffffff;--ink:#1a1a1a;--muted:#7a7a7a;--line:#e6e6e6;--soft:#f4f4f2;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#141414;--ink:#ececec;--muted:#9a9a9a;--line:#2a2a2a;--soft:#1d1d1d;color-scheme:dark}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Jost",system-ui,sans-serif;font-weight:300;font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(20px,4vw,56px);background:var(--bg)}
.home .hdr{background:transparent;color:#fff}
.logo{display:flex;align-items:center;min-height:40px}
.logo img{height:66px;width:auto}
.logo-d{display:none}
.home .logo picture{display:none}
.home .logo-d{display:block}
.logo .word{font-weight:400;letter-spacing:.32em;font-size:1.05rem;line-height:1.1;text-transform:uppercase}
.logo .word small{display:block;font-size:.62rem;letter-spacing:.55em;font-weight:300;margin-top:4px}
.nav{display:flex;gap:clamp(18px,3vw,40px);list-style:none}
.nav a{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:currentColor}
.nav a[aria-current]{border-bottom-color:var(--gold)}
.home .nav a:hover{border-bottom-color:var(--gold)}
.burger{display:none;background:none;border:0;color:inherit;font:inherit;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}

/* home hero */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;background:#111;color:#fff;overflow:hidden}
.slides{position:absolute;inset:0}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.slides img.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),transparent 25%,transparent 35%,rgba(0,0,0,.7));pointer-events:none}
.hero-txt{position:absolute;z-index:2;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:clamp(80px,12vh,130px);max-width:640px}
.hero-txt{text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero-txt h1{font-weight:300;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.15;letter-spacing:.01em}
.hero-txt p{margin-top:12px;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;opacity:.9}
.btn{display:inline-block;margin-top:28px;padding:14px 26px;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;border:1px solid currentColor}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#111}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#111}
.btn.gold:hover{background:transparent;color:inherit;border-color:currentColor}
.slide-cap{position:absolute;z-index:2;left:clamp(20px,4vw,56px);bottom:28px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.slide-cap a{border-bottom:1px solid rgba(255,255,255,.6)}
.dots{position:absolute;z-index:2;right:clamp(20px,4vw,56px);bottom:30px;display:flex;gap:10px}
.dots button{width:8px;height:8px;border-radius:50%;border:1px solid #fff;background:transparent;cursor:pointer;padding:0}
.dots button.on{background:#fff}
.home .hdr{transition:background .3s,color .3s,box-shadow .3s}
.home.scrolled .hdr{background:var(--bg);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.home.scrolled .logo picture{display:block}
.home.scrolled .logo-d{display:none}

.nav .ig{display:flex;align-items:center;border:0;padding:0}
.nav .ig:hover{color:var(--gold)}
/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.rev{background:var(--soft);padding:32px}
.rev .stars{color:var(--gold);letter-spacing:.2em}
.rev blockquote{margin:16px 0 20px;font-size:1.02rem}
.rev cite{font-style:normal;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rev-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.rev-cta p{color:var(--muted)}
/* instagram */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:40px}
.ig-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--soft)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.ig-grid a:hover img{opacity:.8}
@media (max-width:860px){.revs{grid-template-columns:1fr}.ig-grid{grid-template-columns:repeat(3,1fr)}}
.wa-float{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:25;display:flex;align-items:center;gap:8px;background:#1f7a4d;color:#fff;padding:12px 18px;border-radius:999px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:opacity .3s,transform .3s}
.wa-float:hover{background:#17603c}
.home:not(.scrolled) .wa-float{opacity:0;pointer-events:none;transform:translateY(10px)}
@media (max-width:640px){.wa-float span{display:none}.wa-float{padding:14px}}
/* home sections */
.hs{padding:clamp(72px,10vw,130px) clamp(20px,4vw,56px);max-width:1500px;margin:0 auto}
.hs-label{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;font-weight:400}
.two{display:grid;grid-template-columns:1fr 1.6fr;gap:40px}
.lead{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.55;max-width:42ch}
.svc-line{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.svc-line li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--gold);margin-right:10px;vertical-align:middle;transform:rotate(45deg)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.feat figure{aspect-ratio:3/4;overflow:hidden;background:var(--soft)}
.feat img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.feat a:hover img{opacity:.85}
.feat h3{font-weight:400;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;margin-top:16px}
.feat p{color:var(--muted);font-size:.9rem}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.more{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:3px}
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.team figure{aspect-ratio:4/5;overflow:hidden}
.team img{width:100%;height:100%;object-fit:cover}
.team p{max-width:52ch;margin-top:20px}
.facts{display:flex;gap:44px;margin:32px 0 8px;flex-wrap:wrap}
.facts strong{display:block;font-weight:300;font-size:2.6rem;line-height:1;color:var(--gold)}
.facts span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cta-band{background:#141414;color:#f2f2f2}
.cta-band .hs{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.cta-band h2{font-weight:300;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.2;max-width:22ch}
.cta-band dl{display:grid;gap:20px}
.cta-band dt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#9a9a9a}
.cta-band dd{font-size:1.2rem}
.cta-band dd a{border-bottom:1px solid #444}
.cta-band dd a:hover{border-bottom-color:var(--gold)}
@media (max-width:860px){
  .two,.team,.cta-band .hs{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:40px}
  .feat figure{aspect-ratio:4/3}
}

/* pages */
main.page{padding:170px clamp(20px,4vw,56px) 80px;max-width:1500px;margin:0 auto}
.page-title{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;font-weight:400;margin-bottom:48px}

/* projects index */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 32px}
.pgrid a{display:block}
.pgrid figure{overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.pgrid img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.pgrid a:hover img{opacity:.85}
.pgrid h2{font-weight:400;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;margin-top:16px}
.pgrid p{color:var(--muted);font-size:.9rem}

/* project detail */
.p-intro{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;margin-bottom:56px}
.p-intro h1{font-weight:400;font-size:.95rem;letter-spacing:.28em;text-transform:uppercase}
.p-intro .loc{color:var(--muted);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.p-intro p{max-width:62ch}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gal > *{background:var(--soft);overflow:hidden}
.gal .full{grid-column:1/-1}
.gal button{all:unset;display:block;cursor:zoom-in;width:100%}
.gal button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.gal img{width:100%;height:auto}
.gal .pair img,.gal .pair video{aspect-ratio:3/4;object-fit:cover;width:100%;height:100%}
.gal video{width:100%;background:#000}
.p-nav{display:flex;justify-content:space-between;margin-top:72px;padding-top:24px;border-top:1px solid var(--line);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}

/* about */
.about-lead{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.55;max-width:44ch;font-weight:300;margin-bottom:96px}
.dir{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:56px 0;border-top:1px solid var(--line)}
.dir h2{font-weight:400;font-size:.95rem;letter-spacing:.28em;text-transform:uppercase}
.dir .role{color:var(--muted);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.dir p{max-width:62ch}
.dir p + p{margin-top:1.1em}
.svc{list-style:none;columns:2;column-gap:40px}
.svc li{padding:12px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.wide-img{margin:24px 0 0;aspect-ratio:21/9;overflow:hidden}
.wide-img img{width:100%;height:100%;object-fit:cover}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.6fr;gap:40px}
.contact dl{display:grid;gap:28px}
.contact dt{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.contact dd{font-size:1.25rem}
.contact dd a{border-bottom:1px solid var(--line)}
.contact dd a:hover{border-bottom-color:var(--ink)}

footer{padding:40px clamp(20px,4vw,56px) 100px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1500px;margin:0 auto}

/* lightbox */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh}
dialog::backdrop{background:var(--bg)}
.lb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:70px 70px}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb-b{position:absolute;background:none;border:0;color:var(--ink);cursor:pointer;font:inherit;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;padding:12px}
.lb-x{top:20px;right:24px}.lb-p{left:16px;top:50%;translate:0 -50%}.lb-n{right:16px;top:50%;translate:0 -50%}

@media (max-width:860px){
  .p-intro,.dir,.contact{grid-template-columns:1fr;gap:16px}
  .pgrid{grid-template-columns:1fr;gap:44px}
  .svc{columns:1}
}
@media (max-width:640px){
  .nav{display:none;position:fixed;inset:0;background:var(--bg);color:var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:32px}
  .nav.open{display:flex}
  .nav a{font-size:.95rem}
  .burger{display:block;position:relative;z-index:40}
  .burger[aria-expanded=true]{color:var(--ink)}
  .gal{grid-template-columns:1fr;gap:14px}
  .lb{padding:60px 8px}
  .logo img{height:48px}
  .dots{bottom:28px}
  .slide-cap{display:none}
  .hero-txt{bottom:70px}
}
@media (prefers-reduced-motion:reduce){.slides img{transition:none}}