:root{--lapis:#123a8c;--deep:#071b45;--gold:#d2ab58;--cream:#f6f1e8;--ink:#172038}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.nav{height:82px;padding:0 clamp(24px,6vw,90px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(18,58,140,.15)}
.brand{font-size:.88rem;font-weight:600;letter-spacing:.19em;color:var(--deep)}
.nav-link{font-size:.88rem;font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:4px}
.hero{min-height:680px;padding:70px clamp(24px,7vw,110px) 90px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;overflow:hidden}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:600;color:var(--lapis);margin:0 0 22px}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;margin:0;font-weight:600}
h1{font-size:clamp(3.6rem,7vw,7rem);line-height:.86;letter-spacing:-.045em;color:var(--deep)}
.intro{max-width:570px;font-size:1.08rem;line-height:1.75;color:#50576a;margin:32px 0}
.button{display:inline-flex;align-items:center;gap:28px;background:var(--lapis);color:white;padding:17px 22px;font-size:.88rem;font-weight:600;transition:.2s ease}
.button:hover{background:var(--deep);transform:translateY(-2px)}
.gem-art{height:500px;display:grid;place-items:center;background:radial-gradient(circle,#fff 0 18%,transparent 58%)}
.bracelet-photo-frame{width:min(100%,500px);aspect-ratio:1;overflow:hidden;border-radius:34px;box-shadow:0 28px 60px rgba(7,27,69,.24);transform:rotate(1deg)}
.bracelet-photo{display:block;width:100%;height:100%;object-fit:cover}
.details{padding:90px clamp(24px,7vw,110px);background:white;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}
.details h2,.closing h2{font-size:clamp(2.7rem,5vw,4.8rem);line-height:.96;color:var(--deep)}
.details>p{line-height:1.8;color:#5a6070;max-width:620px;margin:0}
.cards{padding:0 clamp(24px,7vw,110px) 100px;background:white;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.cards article{padding:40px;background:var(--cream);min-height:220px}
.cards span{font-size:.7rem;letter-spacing:.16em;color:var(--gold);font-weight:600}
.cards h3{font-size:2.1rem;color:var(--deep);margin:28px 0 10px}
.cards p{font-size:.92rem;line-height:1.65;color:#646a78;margin:0}
.closing{padding:100px 24px;text-align:center;background:var(--deep);color:white}
.closing .eyebrow{color:#d9bd7a}.closing h2{color:white;max-width:750px;margin:0 auto 38px}
.button.light{background:white;color:var(--deep)}.button.light:hover{background:var(--gold)}
footer{padding:28px clamp(24px,6vw,90px);display:flex;justify-content:space-between;font-size:.78rem;color:#727784}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:60px}.gem-art{height:420px}.bracelet-photo-frame{width:min(100%,420px)}.details{grid-template-columns:1fr;gap:30px}.cards{grid-template-columns:1fr}.cards article{min-height:auto}.nav{height:70px}.hero{min-height:auto}.closing{padding:80px 24px}}
@media(max-width:480px){h1{font-size:3.5rem}.hero{padding-left:22px;padding-right:22px}.gem-art{height:350px}.nav-link{font-size:.75rem}.brand{font-size:.75rem}.cards article{padding:30px}.details{padding-top:70px;padding-bottom:70px}}