/* AURUM Visual — Noir & Gold static site */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap");

:root{
  --bg:#0d0d0d;
  --fg:#f3efe6;
  --muted:#9a948a;
  --card:#1a1a1a;
  --border:#2a2a2a;
  --gold:#c9a84c;
  --gold-soft:#f0d78c;
  --input:#1e1e1e;
  --display:"Space Grotesk", system-ui, sans-serif;
  --body:"DM Sans", system-ui, sans-serif;
  --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);font-family:var(--body);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-0.02em;line-height:1.05;font-weight:700}
::selection{background:var(--gold);color:var(--bg)}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 48px}}

/* ===== Header / Nav ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(16px);
  background:rgba(13,13,13,.7);
  border-bottom:1px solid rgba(42,42,42,.7);
}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-logo{height:36px;width:auto}
.nav-links{display:none;list-style:none;gap:32px;font-size:14px}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{color:var(--muted);transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.btn-outline{
  font-size:12px;text-transform:uppercase;letter-spacing:.2em;
  padding:10px 20px;border:1px solid rgba(201,168,76,.4);color:var(--gold);
  transition:all .3s;
}
.btn-outline:hover{background:var(--gold);color:var(--bg)}

/* ===== Buttons ===== */
.btn-gold{
  display:inline-block;padding:16px 32px;background:var(--gold);color:var(--bg);
  font-size:12px;text-transform:uppercase;letter-spacing:.25em;font-weight:500;
  transition:background .3s;
}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{
  display:inline-block;padding:16px 32px;border:1px solid var(--border);color:var(--fg);
  font-size:12px;text-transform:uppercase;letter-spacing:.25em;
  transition:all .3s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ===== Typography helpers ===== */
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.4em;color:var(--gold)}
.kicker-sm{font-size:12px;text-transform:uppercase;letter-spacing:.25em;color:var(--gold)}
.text-display{font-family:var(--display);letter-spacing:-.04em;line-height:.95;font-weight:700}
.gold-gradient{
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.muted{color:var(--muted)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 0%,rgba(13,13,13,.6) 50%,rgba(13,13,13,.2) 100%);
}
.hero-inner{position:relative;padding:160px 0 96px;width:100%}
.hero h1{font-size:clamp(48px,9vw,144px);max-width:1100px;margin-top:32px}
.hero p{margin-top:40px;max-width:560px;font-size:18px;color:var(--muted);line-height:1.65}
.hero-cta{margin-top:48px;display:flex;flex-wrap:wrap;gap:16px}

em{font-style:normal}

/* ===== Service Bands ===== */
.band{border-top:1px solid rgba(42,42,42,.6)}
.band-grid{
  padding:96px 0;display:grid;gap:48px;align-items:center;
}
@media(min-width:1024px){.band-grid{grid-template-columns:1fr 1fr;gap:80px;padding:128px 0}}
.band-img{position:relative;aspect-ratio:4/5;overflow:hidden}
.band-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(20%);transition:filter .7s}
.band-img:hover img{filter:grayscale(0)}
.band-tag{position:absolute;top:24px;left:24px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);mix-blend-mode:difference}
.band-index{font-family:var(--display);font-size:72px;color:rgba(201,168,76,.3);font-weight:700;margin-bottom:24px;line-height:1}
.band h2{font-size:clamp(36px,5vw,60px)}
.band p{margin-top:32px;font-size:18px;color:var(--muted);max-width:520px;line-height:1.65}
.band.reverse .band-grid > :first-child{order:2}

/* ===== Manifesto ===== */
.manifesto{border-top:1px solid rgba(42,42,42,.6)}
.manifesto-grid{padding:128px 0;display:grid;gap:48px}
@media(min-width:1024px){.manifesto-grid{grid-template-columns:1fr 2fr}}
.manifesto p{font-family:var(--display);font-size:clamp(28px,4vw,48px);line-height:1.15;font-weight:500}

/* ===== CTA strip ===== */
.cta-strip{background:var(--gold);color:var(--bg)}
.cta-strip-inner{padding:80px 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
.cta-strip .kicker{color:var(--bg);margin-bottom:12px}
.cta-strip h2{font-size:clamp(32px,4vw,48px);font-weight:700}
.cta-strip a{padding:16px 32px;background:var(--bg);color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.25em}

/* ===== Page headers ===== */
.page-head{padding:160px 0 80px;border-bottom:1px solid rgba(42,42,42,.6)}
.page-head .kicker{margin-bottom:32px}
.page-head h1{font-size:clamp(48px,8vw,128px);max-width:1100px}

/* ===== Services list ===== */
.svc-row{border-bottom:1px solid rgba(42,42,42,.6)}
.svc-row-inner{padding:80px 0;display:grid;gap:40px}
@media(min-width:1024px){.svc-row-inner{grid-template-columns:3fr 6fr 3fr;padding:112px 0}}
.svc-row h2{font-size:clamp(28px,4vw,48px)}
.svc-row p{margin-top:24px;font-size:18px;color:var(--muted);line-height:1.65}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--muted)}
.svc-list li{display:flex;align-items:flex-start;gap:12px}
.svc-list li::before{content:"";display:block;width:16px;height:1px;background:var(--gold);margin-top:10px;flex-shrink:0}

.svc-cta{background:var(--card);padding:96px 24px;text-align:center}
.svc-cta h3{font-size:clamp(28px,4vw,48px)}
.svc-cta p{margin-top:16px;color:var(--muted);max-width:560px;margin-left:auto;margin-right:auto}
.svc-cta .btn-gold{margin-top:40px}

/* ===== Portfolio ===== */
.portfolio-grid{padding:80px 0;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.portfolio-empty{padding:128px 0;text-align:center;color:var(--muted)}
.portfolio-card{background:var(--card);border:1px solid var(--border);overflow:hidden;transition:border-color .3s}
.portfolio-card:hover{border-color:rgba(201,168,76,.6)}
.portfolio-card .ph{aspect-ratio:4/5;background:linear-gradient(135deg,#1a1a1a,#0d0d0d)}
.portfolio-card .info{padding:24px}
.portfolio-card h3{font-size:20px}
.portfolio-card .info p{margin-top:8px;font-size:14px;color:var(--muted)}

/* ===== Contact ===== */
.contact-grid{padding:80px 0;display:grid;gap:64px}
@media(min-width:1024px){.contact-grid{grid-template-columns:4fr 8fr}}
.info-block{margin-bottom:40px}
.info-block .kicker-sm{margin-bottom:8px}
.info-block .val{font-size:18px}

.form{display:flex;flex-direction:column;gap:24px}
.form .row{display:grid;gap:24px}
@media(min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.25em;color:var(--gold);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:var(--input);border:1px solid var(--border);
  color:var(--fg);font-family:var(--body);font-size:14px;
  padding:12px 16px;outline:none;transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field textarea{resize:none}
.form button[type=submit]{align-self:flex-start;border:0;cursor:pointer;font-family:var(--body)}

.form-note{font-size:12px;color:var(--muted);margin-top:8px}

/* ===== Footer ===== */
.site-footer{border-top:1px solid rgba(42,42,42,.6);background:var(--card)}
.footer-grid{padding:64px 0;display:grid;gap:48px}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-logo{height:48px;width:auto;margin-bottom:16px}
.footer-grid p{font-size:14px;color:var(--muted)}
.footer-grid .kicker-sm{margin-bottom:16px}
.footer-bottom{border-top:1px solid rgba(42,42,42,.5)}
.footer-bottom-inner{padding:24px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted)}