:root{
  --gold:#c9a24b; --gold-2:#e6c878; --ink:#0c0e13; --ink2:#141821;
  --paper:#f6f4ef; --muted:#8a8f9c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Heebo',sans-serif;background:var(--ink);color:var(--paper);line-height:1.7}
h1,h2{font-weight:200;letter-spacing:.5px}
h1{font-size:clamp(2.8rem,7vw,5.2rem);line-height:1.1}
h1 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold-2)}
h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.2rem}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.35em;font-size:.75rem;margin-bottom:1rem}
.wrap{max-width:1150px;margin:0 auto;padding:6rem 1.5rem}
.btn{display:inline-block;padding:.9rem 2.2rem;border:1px solid var(--gold);text-decoration:none;font-weight:500;letter-spacing:.1em;transition:.3s;cursor:pointer;font-size:.95rem}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{color:var(--paper)}
.btn-ghost:hover{background:rgba(201,162,75,.15)}
section{position:relative}

/* NAV */
nav{position:fixed;inset-inline:0;top:0;z-index:50;transition:.3s;background:transparent}
nav.scrolled{background:rgba(12,14,19,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,162,75,.2)}
.nav-inner{max-width:1150px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem}
.logo{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--paper);text-decoration:none;letter-spacing:.15em}
.logo span{color:var(--gold);margin-inline-start:.4rem}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{color:var(--paper);text-decoration:none;font-size:.9rem;opacity:.85;transition:.2s}
.nav-links a:hover{color:var(--gold-2);opacity:1}
.nav-links .cta{border:1px solid var(--gold);padding:.45rem 1.1rem;color:var(--gold-2)}
.burger{display:none;background:none;border:none;color:var(--paper);font-size:1.5rem;cursor:pointer}

/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('img/hero.jpg') center/cover no-repeat;transform:scale(1.05);animation:heroZoom 20s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1.14)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,19,.55) 0%,rgba(12,14,19,.35) 45%,var(--ink) 100%),radial-gradient(ellipse at 80% 20%,transparent 40%,rgba(12,14,19,.5) 100%)}
.hero-content{position:relative;max-width:1150px;margin:auto;padding:8rem 1.5rem 4rem;width:100%}
.hero-content .sub{font-size:1.15rem;color:#cfd3dd;max-width:560px;margin:1.5rem 0 2.2rem;font-weight:300}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:2rem;inset-inline-start:50%;transform:translateX(50%);color:var(--muted);font-size:.8rem;letter-spacing:.3em;animation:bob 2.4s infinite}
@keyframes bob{0%,100%{transform:translate(50%,0)}50%{transform:translate(50%,8px)}}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);animation:up .9s forwards}
.reveal:nth-child(2){animation-delay:.15s}.reveal:nth-child(3){animation-delay:.3s}.reveal:nth-child(4){animation-delay:.45s}
@keyframes up{to{opacity:1;transform:none}}

/* ABOUT */
#about{background:var(--paper);color:var(--ink)}
#about h2{color:var(--ink)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3.5rem}
.lead{font-size:1.15rem;font-weight:400}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.pillar{background:#fff;border-top:3px solid var(--gold);padding:1.8rem 1.4rem;box-shadow:0 10px 30px rgba(12,14,19,.07)}
.pillar h3{font-size:1.05rem;margin-bottom:.5rem}
.pillar p{font-size:.9rem;color:#555}

/* NUMBERS */
#numbers{background:linear-gradient(120deg,#0c0e13,#182036);border-block:1px solid rgba(201,162,75,.25)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;padding-block:4rem}
.num strong{display:block;font-size:clamp(2.4rem,5vw,4rem);font-weight:200;color:var(--gold-2)}
.num span{color:var(--muted);letter-spacing:.15em;font-size:.85rem}

/* PROJECTS */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
.proj{background:var(--ink2);border:1px solid rgba(255,255,255,.06);transition:.35s;overflow:hidden}
.proj:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.5)}
.proj-img{height:260px;position:relative;background-size:cover}
.p1{background:url('img/p1.jpg') center/cover}
.p2{background:url('img/p2.jpg') center/cover}
.p3{background:url('img/p3.jpg') center/cover}
.proj-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,14,19,.45),transparent 55%);transition:.35s}
.proj:hover .proj-img::after{opacity:.4}
.badge{position:absolute;top:1rem;inset-inline-start:1rem;background:var(--gold);color:var(--ink);font-size:.72rem;font-weight:700;padding:.25rem .8rem;letter-spacing:.1em;z-index:2}
.proj-body{padding:1.6rem}
.proj-body h3{font-size:1.25rem;margin-bottom:.2rem}
.loc{color:var(--gold-2);font-size:.85rem;margin-bottom:.7rem;letter-spacing:.08em}
.proj-body p:last-child{font-size:.92rem;color:#b8bdc9}

/* EXPERIENCE */
#experience{background:var(--paper);color:var(--ink)}
#experience h2{color:var(--ink)}
.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
.exp{background:#fff;padding:2rem;border-inline-start:3px solid var(--gold);box-shadow:0 8px 24px rgba(12,14,19,.06)}
.exp h3{margin-bottom:.4rem}
.exp p{color:#555;font-size:.95rem}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.contact-info{list-style:none;margin-top:1.5rem;display:grid;gap:.7rem;color:#c8ccd6}
form{display:grid;gap:1rem;background:var(--ink2);padding:2.2rem;border:1px solid rgba(201,162,75,.25)}
input,select{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.25);padding:.8rem .2rem;color:var(--paper);font-family:inherit;font-size:1rem;outline:none}
input:focus,select:focus{border-color:var(--gold)}
select option{color:#000}
.form-ok{display:none;color:var(--gold-2);font-size:.9rem}
.form-ok.show{display:block}

/* FOOTER */
footer{border-top:1px solid rgba(201,162,75,.2);padding:2rem 0;text-align:center;color:var(--muted);font-size:.85rem}
.foot{display:flex;justify-content:space-between;align-items:center;padding-block:0}

/* RESPONSIVE */
@media(max-width:880px){
  .pillars,.nums{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:1fr}
  .about-grid,.exp-grid,.contact-grid{grid-template-columns:1fr}
  .nav-links{display:none;position:absolute;top:100%;inset-inline:0;background:rgba(12,14,19,.97);flex-direction:column;padding:1.5rem;gap:1.2rem}
  .nav-links.open{display:flex}
  .burger{display:block}
  .foot{flex-direction:column;gap:.5rem}
}