*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --green:#29473b; --green-dark:#0e1a10; --gold:#c49e4b; --gold-accent:#dbb04f; --cream:#f8f5ee; --white:#ffffff; --text:#1a1a18; --body:#1a1a18; --muted:#444444; --border:#ddd6c8; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; font-weight: 400; color: var(--text); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-size: 17px; line-height: 1.85; }
img { max-width: 100%; display: block; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:80px; border-bottom:2px solid #e8e0d0; box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:56px; width:auto; }
.nav-back { font-size:16px; letter-spacing:0.08em; text-transform:uppercase; color:#29473b; text-decoration:none; transition:color 0.2s; font-weight:600; }
.nav-back:hover { color:var(--gold); }
.nav-cta { font-size:16px; letter-spacing:0.08em; text-transform:uppercase; background:#29473b; color:#ffffff; padding:12px 26px; border-radius:2px; text-decoration:none; transition:background 0.2s; white-space:nowrap; font-weight:600; }
.nav-cta:hover { background:#1e3a2a; }

/* HERO */
.hero { position:relative; min-height:78vh; min-height:78svh; display:flex; flex-direction:column; justify-content:flex-end; padding:140px 72px 72px; overflow:hidden; background:var(--green-dark); }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,20,14,0.05) 0%, rgba(10,20,14,0.3) 45%, rgba(10,20,14,0.9) 100%); }
.hero-content { position:relative; z-index:2; max-width:780px; }
.hero-tag { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(219,176,79,0.95); margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.hero-tag::before { content:''; display:block; width:24px; height:1px; background:rgba(219,176,79,0.6); }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(40px,6.4vw,76px); font-weight:400; color:var(--cream); line-height:1.06; margin-bottom:16px; }
.hero-sub { font-size:17px; color:rgba(248,245,238,0.9); line-height:1.8; max-width:580px; }

/* INTRO */
.intro { background:var(--white); padding:80px 72px; }
.intro-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:72px; align-items:start; }
.sec-label { font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block; }
h2 { font-family:'Playfair Display',serif; font-size:clamp(28px,3.4vw,42px); font-weight:400; color:var(--green); line-height:1.2; }
.body-text { font-size:17px; color:var(--body); line-height:1.88; }
.body-text + .body-text { margin-top:14px; }
.note { font-size:13px; color:var(--muted); line-height:1.7; margin-top:22px; font-style:italic; }

/* PROJECT GRID (index) */
.projects { padding:16px 16px 88px; background:var(--white); }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1680px; margin:0 auto; }
.project-card { position:relative; display:block; overflow:hidden; aspect-ratio:3/2; background:var(--green-dark); text-decoration:none; color:var(--cream); }
.project-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.9s cubic-bezier(.2,.7,.2,1); }
.project-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,14,10,0.85) 0%, rgba(8,14,10,0.15) 45%, rgba(8,14,10,0) 70%); transition:opacity 0.4s; }
.project-card:hover img { transform:scale(1.04); }
.project-meta { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:32px 36px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.project-name { font-family:'Playfair Display',serif; font-size:clamp(26px,2.6vw,38px); font-weight:400; line-height:1.1; display:block; }
.project-view { flex-shrink:0; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream); border:0.5px solid rgba(219,176,79,0.7); padding:10px 16px; border-radius:2px; transition:background 0.25s, color 0.25s; }
.project-card:hover .project-view { background:var(--gold); color:var(--green); border-color:var(--gold); }
.project-card:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* SPEC STRIP (project page) */
.spec-strip { background:var(--green); padding:0 72px; }
.spec-strip-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.spec { padding:28px 24px 28px 0; border-right:0.5px solid rgba(219,176,79,0.25); }
.spec + .spec { padding-left:24px; }
.spec:last-child { border-right:none; }
.spec:nth-child(4n) { border-right:none; }
.spec:nth-child(4n+1) { padding-left:0; }
.spec:nth-child(n+5) { border-top:0.5px solid rgba(219,176,79,0.25); }
.spec-lbl { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(219,176,79,0.85); display:block; margin-bottom:6px; }
.spec-val { font-family:'Playfair Display',serif; font-size:19px; color:var(--cream); display:block; line-height:1.35; }

/* GALLERY (project page) */
.gallery-wrap { background:var(--white); padding:16px 16px 88px; }
.gallery-head { max-width:1680px; margin:0 auto 18px; padding:40px 8px 0; display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; }
.gallery-head h2 { font-size:clamp(24px,2.6vw,32px); }
.gallery-count { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.gallery { columns:2; column-gap:16px; max-width:1680px; margin:0 auto; }
.gallery button { display:block; width:100%; margin:0 0 16px; padding:0; border:none; background:#ece6da; cursor:zoom-in; overflow:hidden; break-inside:avoid; }
.gallery img { width:100%; height:auto; transition:transform 0.8s cubic-bezier(.2,.7,.2,1); }
.gallery button:hover img { transform:scale(1.025); }
.gallery button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

/* NEXT PROJECT */
.next { position:relative; display:block; height:56vh; min-height:380px; overflow:hidden; background:var(--green-dark); text-decoration:none; color:var(--cream); }
.next img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55; transition:opacity 0.5s, transform 1s cubic-bezier(.2,.7,.2,1); }
.next:hover img { opacity:0.72; transform:scale(1.03); }
.next-inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 24px; }
.next-lbl { font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold-accent); margin-bottom:12px; }
.next-name { font-family:'Playfair Display',serif; font-size:clamp(34px,5vw,60px); font-weight:400; line-height:1.1; }
.project-nav { background:var(--cream); padding:22px 72px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:0.5px solid var(--border); }
.project-nav a { font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green); text-decoration:none; font-weight:500; transition:color 0.2s; }
.project-nav a:hover { color:var(--gold); }

/* CTA */
.cta { background:var(--green); padding:88px 72px; text-align:center; }
.cta h2 { color:var(--cream); margin-bottom:14px; }
.cta p { font-size:16px; color:rgba(248,245,238,0.82); max-width:580px; margin:0 auto 32px; }
.btn-gold { display:inline-block; background:var(--gold); color:var(--green); font-size:15px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; padding:17px 36px; border-radius:2px; text-decoration:none; transition:opacity 0.2s; }
.btn-gold:hover { opacity:0.86; }

/* LIGHTBOX */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(8,14,10,0.97); display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:calc(100vw - 180px); max-height:calc(100vh - 140px); object-fit:contain; }
.lb-btn { position:absolute; background:none; border:0.5px solid rgba(219,176,79,0.5); color:var(--cream); width:48px; height:48px; border-radius:2px; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color 0.2s, background 0.2s; }
.lb-btn:hover { border-color:var(--gold); background:rgba(219,176,79,0.12); }
.lb-close { top:24px; right:24px; }
.lb-prev { left:24px; top:50%; transform:translateY(-50%); }
.lb-next { right:24px; top:50%; transform:translateY(-50%); }
.lb-caption { position:absolute; bottom:28px; left:0; right:0; text-align:center; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(219,176,79,0.9); }

/* FOOTER */
footer { background:#ffffff; padding:32px 72px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; border-top:2px solid #e8e0d0; }
.footer-social { display:flex; gap:18px; align-items:center; }
.footer-social a { display:inline-flex; color:#555; transition:color 0.2s; }
.footer-social a:hover { color:#29473b; }
.footer-social svg { width:22px; height:22px; fill:currentColor; }
.footer-copy { font-size:16px; color:#999; letter-spacing:0.06em; text-transform:uppercase; }

@media (max-width:1024px) {
  nav, .intro, .cta, footer, .spec-strip, .project-nav { padding-left:40px; padding-right:40px; }
  .hero { padding-left:48px; padding-right:48px; }
  .intro-inner { grid-template-columns:1fr; gap:24px; }
  .spec-strip-inner { grid-template-columns:1fr 1fr; }
  .spec { border-right:none; border-bottom:0.5px solid rgba(219,176,79,0.25); padding:20px 16px 20px 0; }
  .spec + .spec { padding-left:0; }
  .spec:nth-child(n+5) { border-top:none; }
}
@media (max-width:760px) {
  .project-grid { grid-template-columns:1fr; }
  .project-meta { padding:22px 22px; }
  .project-view { display:none; }
}
@media (max-width:640px) {
  nav { padding:0 20px; height:72px; }
  .nav-logo img { height:46px; }
  .nav-cta { display:none; }
  .hero { padding:120px 24px 52px; min-height:66vh; }
  .intro, .cta { padding:60px 24px; }
  .projects, .gallery-wrap { padding-left:8px; padding-right:8px; }
  .project-grid { gap:8px; }
  .spec-strip { padding:0 24px; }
  .spec-strip-inner { grid-template-columns:1fr; }
  .gallery { columns:1; }
  .gallery button { margin-bottom:8px; }
  .project-nav { padding:18px 24px; }
  .lightbox img { max-width:100vw; max-height:calc(100vh - 170px); }
  .lb-prev, .lb-next { top:auto; bottom:70px; transform:none; }
  footer { padding:22px 24px; flex-direction:column; align-items:flex-start; gap:14px; }
}