/* Placeholder "images" — swap any --img for url('images/your-photo.jpg') */
:root{
  --bg:#000;--fg:#fff;--muted:#8a8a8a;--soft:#c9c9c9;--line:#2e2e2e;--line2:#444;
  --pad:clamp(20px,4vw,58px);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ph-hero:linear-gradient(160deg,#c9d3dc 0%,#8e9fb1 28%,#e9ecef 46%,#5e6f82 70%,#b9c3cc 100%);
  --ph-urban:linear-gradient(120deg,#9fb0c2 0%,#e3e7ec 35%,#6f8196 65%,#c6ced8 100%);
  --ph-nature:linear-gradient(120deg,#7fae8a 0%,#d6e6c3 35%,#4f8a7b 65%,#b8d4a8 100%);
  --ph-narrative:linear-gradient(120deg,#8c7bd1 0%,#e7a6c9 40%,#6f7fd6 70%,#f0c3a6 100%);
  --ph-commercial:linear-gradient(120deg,#c79a5f 0%,#efdcae 40%,#a87c55 70%,#e8cf9a 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,0));transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.solid{background:#000;border-bottom:1px solid var(--line)}
.logo{font-weight:700;font-size:1rem;letter-spacing:-.02em}
.nav{display:flex;gap:clamp(16px,2.2vw,30px);font-size:.9rem;font-weight:500}
.nav a{color:var(--soft);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--fg)}
.nav a.active{color:var(--fg);border-color:var(--fg)}
main.offset{padding-top:70px}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;--img:var(--ph-hero)}
.hero-media{position:absolute;inset:0;background:var(--img) center/cover no-repeat}
.hero-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.hero-label{position:absolute;left:var(--pad);bottom:28px;z-index:2;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero h1{position:relative;z-index:2;font-weight:800;font-size:clamp(3.4rem,10.5vw,9.5rem);line-height:.98;letter-spacing:-.045em;padding:0 var(--pad);animation:rise 1.2s .1s both cubic-bezier(.2,.7,.2,1)}
.hero h1 .masked{display:block;background:var(--img) center/cover fixed;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}

/* ---------- masked text (shared) ---------- */
.masked{background:var(--img) center/cover;-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- project grid ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line2)}
.card{position:relative;display:block;min-height:clamp(340px,31vw,460px);border-bottom:1px solid var(--line2);overflow:hidden}
.card:nth-child(odd){border-right:1px solid var(--line2)}
.card-text{position:relative;z-index:2;padding:clamp(28px,4vw,58px) var(--pad);transition:opacity .45s}
.card h3{font-weight:700;font-size:clamp(2rem,3.9vw,3.6rem);line-height:1.03;letter-spacing:-.04em}
.card h3 .masked{display:inline-block;margin-top:.12em;padding-bottom:.06em}
.card-image{position:absolute;inset:0;z-index:3;background:var(--img) center/cover no-repeat;opacity:0;transform:scale(1.04);transition:opacity .55s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card-image span{position:absolute;left:var(--pad);bottom:24px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.card:hover .card-image,.card:focus-visible .card-image{opacity:1;transform:none}
.card:hover .card-text{opacity:0}
.card .count{position:absolute;z-index:2;left:var(--pad);bottom:clamp(24px,3vw,40px);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.urban{--img:var(--ph-urban)}.nature{--img:var(--ph-nature)}.narrative{--img:var(--ph-narrative)}.commercial{--img:var(--ph-commercial)}

/* ---------- page titles ---------- */
.page-head{padding:clamp(40px,6vw,80px) var(--pad) clamp(40px,5vw,64px)}
.page-head h1{font-weight:800;font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.045em;line-height:1}
.page-head p{margin-top:18px;color:var(--soft);max-width:560px}
.kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- project page ---------- */
.project-hero{height:70vh;min-height:420px;background:var(--img) center/cover no-repeat;position:relative}
.project-hero span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.5)}
.project-info{padding:clamp(36px,5vw,60px) var(--pad) clamp(50px,6vw,80px);max-width:900px}
.crumbs{font-size:.85rem;color:var(--muted)}
.crumbs a:hover{color:var(--fg)}
.crumbs b{font-weight:400;color:var(--soft)}
.project-info h1{margin-top:22px;font-weight:700;font-size:clamp(2.2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1.05}
.meta{display:flex;gap:clamp(28px,4vw,56px);margin-top:26px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.meta div{display:grid;gap:2px;font-size:.92rem;font-weight:500}
.meta .kicker{font-weight:400;font-size:.66rem}
.project-info p{margin-top:30px;color:var(--soft);font-size:1.02rem;max-width:760px}

.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vw,16px);padding:0 var(--pad) clamp(60px,8vw,110px)}
.shot{position:relative;background:var(--img) center/cover no-repeat;display:flex;align-items:flex-end;padding:16px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.5);object-fit:cover;width:100%}
img.shot{padding:0;height:100%}
.shot.wide{grid-column:1/-1;aspect-ratio:16/8}
.shot.l{aspect-ratio:3/2}.shot.p{aspect-ratio:4/5}

.more{border-top:1px solid var(--line)}
.more .kicker{display:block;padding:26px var(--pad) 36px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,7vw,110px);padding:clamp(40px,6vw,80px) var(--pad) clamp(70px,9vw,120px)}
.contact h1{font-weight:800;font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:-.045em;line-height:1.02}
.contact .intro{margin-top:20px;color:var(--soft);max-width:440px}
.details{margin-top:34px;padding-top:30px;border-top:1px solid var(--line);display:grid;gap:18px;font-size:.92rem}
.details a{color:var(--soft);transition:color .2s}
.details a:hover{color:var(--fg)}
form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;align-content:start}
form .full{grid-column:1/-1}
form .legend{grid-column:1/-1;margin-bottom:-12px}
label{display:grid;gap:7px;font-size:.8rem;color:var(--soft)}
label small{color:var(--muted);font-size:inherit}
input,textarea{font:inherit;font-size:.95rem;width:100%;padding:11px 12px;background:#000;color:var(--fg);border:1px solid #3a3a3a;outline:none;transition:border-color .2s}
input:focus,textarea:focus{border-color:#bbb}
textarea{min-height:150px;resize:vertical}
.submit{justify-self:start;font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:14px 30px;background:#fff;color:#000;border:1px solid #fff;cursor:pointer;transition:background .2s,color .2s}
.submit:hover{background:#000;color:#fff}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:clamp(40px,5vw,60px) var(--pad)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:12px 26px;margin:24px 0 26px;font-size:.88rem;color:var(--soft)}
.site-footer nav a:hover{color:var(--fg)}
.site-footer small{color:var(--muted);font-size:.85rem}

@media(max-width:760px){
  .nav{gap:14px;font-size:.8rem}
  .site-header{padding:18px var(--pad)}
  .logo{font-size:.92rem}
  .grid,.shots,.contact,form{grid-template-columns:1fr}
  .card{border-right:0!important;min-height:300px}
  .shot.wide{aspect-ratio:4/3}
  .hero h1 .masked{background-attachment:scroll}
}
@media(max-width:420px){.site-header{flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}