@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400&family=Playfair+Display:wght@400;500&display=swap');
:root{--bg:#090a0a;--fg:#f2eee6;--muted:#aaa59c;--gold:#b58a50;--line:rgba(181,138,80,.42)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:"DM Sans",sans-serif;font-weight:300}a{color:inherit;text-decoration:none}header{height:88px;position:absolute;z-index:10;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5.5vw}.ep{font:400 2.6rem "Playfair Display";color:var(--gold);letter-spacing:-.08em}nav{display:flex;gap:2.3rem}nav a,.touch{font-size:.69rem;letter-spacing:.16em;text-transform:uppercase}.touch{justify-self:end;border:1px solid var(--gold);color:var(--gold);padding:.9rem 1.2rem}.hero{min-height:76vh;display:grid;grid-template-columns:54% 46%;border-bottom:1px solid var(--line)}.copy{padding:145px 5.5vw 60px;display:flex;justify-content:center;flex-direction:column}.kicker,small{color:var(--gold);letter-spacing:.27em;font-size:.72rem;text-transform:uppercase}h1{font:400 clamp(4rem,7vw,7.2rem)/.91 "Playfair Display";letter-spacing:.045em;margin:1.3rem 0 0}.copy i{display:block;width:55px;height:1px;background:var(--gold);margin:2rem 0}.copy p{font-size:1.2rem;line-height:1.6;max-width:560px;margin:0 0 2rem}.button{width:max-content;border:1px solid var(--gold);color:var(--gold);padding:1rem 1.25rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}.portrait{min-height:650px;background:linear-gradient(90deg,var(--bg),transparent 28%),linear-gradient(0deg,rgba(9,10,10,.55),transparent 30%),url('assets/portrait.png') center 20%/cover no-repeat}.focus{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.09)}.focus div{padding:2.8rem 2rem;text-align:center;border-right:1px solid rgba(255,255,255,.09)}.focus div:last-child{border:0}.focus b{display:block;color:var(--gold);letter-spacing:.16em;font-size:.78rem;font-weight:400}.focus span{display:block;color:var(--muted);margin-top:.8rem;font-size:.9rem}.beyond{text-align:center;padding:7rem 5vw;background:#0c0d0d}.beyond h2,.contact h2{font:400 clamp(2.6rem,5vw,5rem) "Playfair Display";margin:1rem 0}.beyond p{color:var(--muted);font-size:1.05rem}.contact{padding:5rem 5.5vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:2rem;border-top:1px solid var(--line)}.links{display:flex;flex-direction:column;gap:.9rem}.links a:hover{color:var(--gold)}blockquote{font:italic 1.5rem "Playfair Display";color:#d2cbc0}footer{padding:2rem 5.5vw;display:flex;justify-content:space-between;color:var(--muted);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:850px){header{height:70px;grid-template-columns:1fr auto;padding:0 6vw}nav{display:none}.hero{grid-template-columns:1fr}.copy{padding:115px 6vw 45px;min-height:55vh}h1{font-size:clamp(3.5rem,16vw,5.5rem)}.portrait{min-height:58vh}.focus{grid-template-columns:1fr}.focus div{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}.contact{grid-template-columns:1fr;padding:4rem 6vw}footer{flex-direction:column;gap:1rem;padding:2rem 6vw}}

/* V2 refinements */
.monogram, .ep {
  font-size: 3.35rem;
}

/* Center and simplify contact area while preserving existing palette */
.contact {
  text-align: center;
  grid-template-columns: 1fr;
  justify-items: center;
}
.contact > div,
.contact-links {
  align-items: center;
  justify-content: center;
}
.contact-links {
  width: 100%;
}
.contact blockquote {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* V2 typography: exactly the existing two families */
body {
  font-family: "DM Sans", system-ui, sans-serif;
}
h1, .contact h2, .beyond h2, blockquote, .monogram, .ep {
  font-family: "Playfair Display", Georgia, serif;
}

/* V3: minimalist header — no menu */
.topbar, header {
  grid-template-columns: 1fr 1fr;
}
.outline-btn, .touch {
  justify-self: end;
}

/* V4: slightly stronger Get in Touch button */
.outline-btn, .touch {
  padding: 1.02rem 1.45rem;
  font-size: .76rem;
}

/* V7: user's contact QR code — only addition to V6 */
.contact-qr {
  margin: 2.25rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.contact-qr img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  background: #fff;
  padding: 7px;
}
.contact-qr span {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b58a50;
}
@media (max-width: 850px) {
  .contact-qr img {
    width: 132px;
    height: 132px;
  }
}

/* V8: QR only — gold modules, transparent background, no white frame */
.contact-qr img {
  background: transparent !important;
  padding: 0 !important;
}