:root {
  --terracotta: #b85643;
  --terracotta-dark: #8e3f32;
  --cream: #f8f2eb;
  --cream-2: #efe3d7;
  --gold: #b78b5a;
  --gold-light: #d8b88b;
  --ink: #282421;
  --muted: #6f6862;
  --line: rgba(40,36,33,.14);
  --white: #fffdf9;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
.site-header {
  height: 86px;
  padding: 0 clamp(24px, 6vw, 92px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,253,249,.95);
  border-bottom: 1px solid rgba(40,36,33,.07);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 50%;
  display:grid; place-items:center;
  color: var(--white); background: var(--terracotta);
  border: 2px solid var(--gold-light);
  font: 600 25px/1 var(--serif);
}
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-text strong { font: 700 24px/1 var(--serif); letter-spacing:.02em; }
.brand-text small { margin-top:5px; font-size:7px; letter-spacing:.35em; color:var(--gold); }
.nav { display:flex; align-items:center; gap:32px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.nav a { position:relative; }
.nav a:not(.nav-instagram)::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1px; background:var(--terracotta); transition:.25s; }
.nav a:not(.nav-instagram):hover::after { right:0; }
.nav-instagram { padding:11px 15px; border:1px solid var(--ink); }
.menu-toggle { display:none; border:0; background:none; font-size:24px; color:var(--ink); }

.hero {
  min-height: calc(100vh - 86px);
  padding: clamp(50px,8vw,105px) clamp(24px,8vw,125px);
  display:grid; grid-template-columns: 1.05fr .95fr; gap:5vw;
  align-items:center;
  background: linear-gradient(135deg, var(--cream) 0%, #fbf8f4 65%, #f0e1d6 100%);
  overflow:hidden;
}
.hero-copy { max-width:680px; }
.eyebrow, .kicker { margin:0 0 15px; font-size:10px; letter-spacing:.28em; font-weight:600; color:var(--gold); text-transform:uppercase; }
.hero h1, h2 {
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.025em;
}
.hero h1 { font-size:clamp(60px, 8vw, 112px); }
h2 { font-size:clamp(48px, 6vw, 76px); }
h1 em, h2 em { color:var(--terracotta); font-style:italic; font-weight:500; }
.hero-lead { max-width:520px; margin:28px 0 34px; color:var(--muted); font-size:15px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 23px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; transition:.25s;
}
.button-primary { color:white; background:var(--terracotta); }
.button-primary:hover { background:var(--terracotta-dark); transform:translateY(-2px); }
.button-ghost { border:1px solid var(--line); }
.button-ghost:hover { border-color:var(--terracotta); color:var(--terracotta); }

.hero-art { position:relative; height:min(650px,70vw); min-height:430px; }
.halo {
  position:absolute; width:min(500px,75vw); aspect-ratio:1; border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(184,86,67,.09);
  border:1px solid rgba(183,139,90,.28);
  box-shadow: inset 0 0 0 30px rgba(255,255,255,.17), 0 30px 80px rgba(83,45,34,.08);
}
.halo::before, .halo::after { content:""; position:absolute; inset:9%; border:1px solid rgba(183,139,90,.26); border-radius:50%; }
.halo::after { inset:19%; }
.earring { position:absolute; width:80px; height:110px; border:4px solid var(--gold); border-top-color:transparent; border-radius:50%; transform:rotate(16deg); filter:drop-shadow(0 12px 12px rgba(80,40,20,.12)); }
.earring::before { content:""; position:absolute; width:13px; height:13px; border:3px solid var(--gold); border-radius:50%; top:-15px; left:29px; background:var(--cream); }
.e1 { left:23%; top:24%; }
.e2 { right:20%; bottom:22%; transform:rotate(-20deg) scale(.78); }
.chain { position:absolute; width:150px; height:250px; border:3px solid var(--gold); border-bottom-color:transparent; border-radius:50%; right:25%; top:18%; transform:rotate(25deg); opacity:.9; }
.chain::after { content:""; position:absolute; width:40px; height:40px; border:2px solid var(--terracotta); border-radius:50%; left:51px; bottom:8px; }
.pendant {
  position:absolute; left:50%; top:53%; transform:translate(-50%,-50%);
  width:122px; height:122px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--terracotta); color:var(--cream);
  border:5px solid var(--gold-light);
  font:600 76px/1 var(--serif);
  box-shadow:0 24px 50px rgba(92,44,31,.2);
}
.spark { position:absolute; color:var(--gold); font-family:var(--serif); }
.s1 { left:14%; top:50%; font-size:42px; }
.s2 { right:13%; top:38%; font-size:55px; }
.s3 { left:28%; bottom:20%; font-size:70px; }

.section { padding: clamp(80px,10vw,145px) clamp(24px,8vw,125px); }
.section-label { margin-bottom:70px; font-size:9px; letter-spacing:.26em; color:var(--gold); font-weight:600; }
.intro { background:var(--white); }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:start; }
.intro h2 { max-width:620px; }
.intro-text { max-width:550px; color:var(--muted); font-size:15px; }
.intro-text p { margin:0 0 22px; }

.essence { background:var(--terracotta); color:var(--cream); }
.essence .section-label, .essence .kicker { color:var(--gold-light); }
.essence-head h2 { max-width:760px; }
.essence-head h2 em { color:var(--cream); }
.values { margin-top:75px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.25); }
.value-card { padding:38px 38px 15px 0; border-right:1px solid rgba(255,255,255,.22); margin-right:38px; }
.value-card:last-child { border-right:0; margin-right:0; }
.value-card span { font-size:10px; color:var(--gold-light); letter-spacing:.15em; }
.value-card h3 { margin:25px 0 8px; font:600 35px/1 var(--serif); }
.value-card p { color:rgba(255,253,249,.76); max-width:300px; }

.collection { background:var(--cream); }
.collection-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:7vw; align-items:center; }
.collection-copy { max-width:470px; color:var(--muted); margin-top:28px; }
.jewelry-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.jewel-card { min-height:220px; background:var(--white); padding:27px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(40,36,33,.08); }
.jewel-card.tall { min-height:300px; }
.jewel-card strong { font:600 27px/1 var(--serif); }
.jewel-card small { color:var(--muted); font-size:10px; margin-top:5px; }
.jewel-icon { height:120px; position:relative; margin-bottom:15px; }
.necklace::before { content:""; position:absolute; width:90px; height:80px; border:2px solid var(--gold); border-bottom:0; border-radius:90px 90px 0 0; left:50%; top:7px; transform:translateX(-50%); }
.necklace::after { content:"B"; position:absolute; width:38px; height:38px; border:2px solid var(--terracotta); border-radius:50%; display:grid; place-items:center; left:50%; top:67px; transform:translateX(-50%); font:600 24px var(--serif); color:var(--terracotta); }
.earrings::before, .earrings::after { content:""; position:absolute; width:34px; height:54px; border:3px solid var(--gold); border-top-color:transparent; border-radius:50%; top:27px; }
.earrings::before { left:38%; transform:rotate(14deg); }
.earrings::after { left:52%; transform:rotate(-14deg); }
.ring::before { content:""; position:absolute; width:65px; height:65px; border:6px solid var(--gold); border-radius:50%; left:50%; top:25px; transform:translateX(-50%); }
.ring::after { content:""; position:absolute; width:25px; height:25px; border:2px solid var(--terracotta); transform:rotate(45deg); left:50%; top:12px; margin-left:-12px; background:var(--white); }
.bracelet::before { content:""; position:absolute; width:130px; height:62px; border:5px solid var(--gold); border-radius:50%; left:50%; top:28px; transform:translateX(-50%) rotate(-8deg); }
.bracelet::after { content:""; position:absolute; width:20px; height:20px; background:var(--terracotta); border:3px solid var(--gold-light); border-radius:50%; left:50%; top:50px; }

.social { background:var(--white); }
.social-inner { display:flex; justify-content:space-between; gap:50px; align-items:end; padding-bottom:15px; }
.social-link { min-width:270px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:11px; }
.social-link strong { color:var(--terracotta); font-weight:600; }

.contact { padding-top:0; background:var(--white); }
.contact-card { background:var(--ink); color:var(--cream); padding:clamp(40px,7vw,90px); display:flex; justify-content:space-between; align-items:end; gap:40px; }
.contact-card .eyebrow { color:var(--gold-light); }
.contact-card h2 { max-width:700px; }
.contact-card h2 em { color:var(--gold-light); }
.contact-card > div > p:last-child { color:rgba(255,253,249,.65); margin-top:25px; }
.button-light { background:var(--cream); color:var(--ink); white-space:nowrap; }
.button-light:hover { background:var(--gold-light); }

footer {
  padding:32px clamp(24px,8vw,125px);
  display:flex; align-items:center; justify-content:space-between; gap:25px;
  border-top:1px solid var(--line); background:var(--cream);
  font-size:10px; color:var(--muted);
}
.footer-brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.footer-brand > span:last-child { display:flex; flex-direction:column; }
.footer-brand strong { font:600 20px var(--serif); }
.footer-brand small { font-size:8px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.brand-mark.small { width:34px; height:34px; font-size:20px; }
.footer-links { display:flex; gap:25px; text-transform:uppercase; letter-spacing:.12em; }
.footer-links a:hover { color:var(--terracotta); }

@media (max-width: 850px) {
  .site-header { height:72px; }
  .nav { display:none; position:absolute; top:72px; left:0; right:0; background:var(--white); padding:25px; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--line); gap:18px; }
  .nav.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:70px; }
  .hero-art { height:420px; min-height:420px; }
  .intro-grid, .collection-layout { grid-template-columns:1fr; gap:45px; }
  .values { grid-template-columns:1fr; }
  .value-card { border-right:0; border-bottom:1px solid rgba(255,255,255,.22); margin:0; padding:28px 0; }
  .value-card:last-child { border-bottom:0; }
  .social-inner, .contact-card { flex-direction:column; align-items:flex-start; }
  .social-link { width:100%; }
  footer { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 520px) {
  .hero h1 { font-size:54px; }
  h2 { font-size:46px; }
  .section { padding-top:75px; padding-bottom:75px; }
  .section-label { margin-bottom:45px; }
  .jewelry-grid { grid-template-columns:1fr; }
  .jewel-card, .jewel-card.tall { min-height:230px; }
  .hero-art { transform:scale(.9); margin:-20px; }
  .button { width:100%; }
}