:root {
  --ink: #192826;
  --forest: #142724;
  --sage: #a6ada0;
  --cream: #f4f0e8;
  --paper: #fbfaf6;
  --gold: #b29a6a;
  --line: rgba(25, 40, 38, 0.17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.eyebrow { margin: 0 0 22px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.02em; }
em { color: var(--gold); font-weight: 400; }

.announcement { min-height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 7px 4.5vw; background: var(--forest); color: #f5f2eb; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.site-header { height: 104px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4.5vw; border-bottom: 1px solid var(--line); background: rgba(251,250,246,.95); position: relative; z-index: 20; }
.wordmark { display: flex; align-items: center; width: 150px; }
.header-logo { display: block; width: 150px; height: 88px; object-fit: contain; object-position: left center; }
.nav { display: flex; gap: 26px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nav a, .footer-links a { transition: color .25s; }
.nav a:hover, .footer-links a:hover { color: var(--gold); }
.header-cta { justify-self: end; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.menu-button { display: none; background: none; border: 0; padding: 8px; }
.menu-button span { display: block; width: 24px; height: 1px; margin: 6px 0; background: var(--ink); }

.hero { min-height: calc(100vh - 116px); display: grid; grid-template-columns: 53% 47%; position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 8vw 7vw 9vw 8vw; }
.hero h1 { margin-bottom: 32px; font-size: clamp(58px, 6.1vw, 100px); line-height: .98; }
.hero-text { max-width: 500px; margin-bottom: 38px; color: #354541; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; padding: 17px 27px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: all .25s; }
.button.dark { background: var(--ink); color: white; }
.button.dark:hover { background: var(--gold); }
.button.light { border: 1px solid rgba(255,255,255,.5); color: white; }
.button.light:hover { background: white; color: var(--ink); }
.text-link { display: inline-flex; gap: 25px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.text-link span { font-size: 14px; }
.hero-visual { position: relative; overflow: hidden; background: radial-gradient(circle at 53% 42%, #f4efe4 0, #ded6c8 47%, #a6aa9e 100%); }
.hero-product-image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.hero-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(9,27,23,.55)); pointer-events: none; }
.soft-glow { position: absolute; width: 58%; aspect-ratio: 1; left: 22%; top: 18%; border-radius: 50%; background: rgba(255,255,255,.68); filter: blur(40px); }
.necklace-display { position: absolute; width: 76%; aspect-ratio: 1; left: 12%; top: 16%; border: 3px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: inset 0 0 12px rgba(25,40,38,.2), 0 10px 30px rgba(25,40,38,.12); }
.necklace-display i, .mini-necklace i, .bracelet-ring i { position: absolute; width: 10px; height: 10px; left: calc(50% - 5px); top: calc(50% - 5px); border: 1px solid #a89876; background: linear-gradient(135deg,#fff 12%,#d4cfca 45%,#fff 62%,#a8b4b4); transform: rotate(calc(var(--i) * 11.61deg)) translateY(-38vw); }
.necklace-display i:nth-child(1) { --i:1 }.necklace-display i:nth-child(2) { --i:2 }.necklace-display i:nth-child(3) { --i:3 }.necklace-display i:nth-child(4) { --i:4 }.necklace-display i:nth-child(5) { --i:5 }.necklace-display i:nth-child(6) { --i:6 }.necklace-display i:nth-child(7) { --i:7 }.necklace-display i:nth-child(8) { --i:8 }.necklace-display i:nth-child(9) { --i:9 }.necklace-display i:nth-child(10) { --i:10 }.necklace-display i:nth-child(11) { --i:11 }.necklace-display i:nth-child(12) { --i:12 }.necklace-display i:nth-child(13) { --i:13 }.necklace-display i:nth-child(14) { --i:14 }.necklace-display i:nth-child(15) { --i:15 }.necklace-display i:nth-child(16) { --i:16 }.necklace-display i:nth-child(17) { --i:17 }.necklace-display i:nth-child(18) { --i:18 }.necklace-display i:nth-child(19) { --i:19 }.necklace-display i:nth-child(20) { --i:20 }.necklace-display i:nth-child(21) { --i:21 }.necklace-display i:nth-child(22) { --i:22 }.necklace-display i:nth-child(23) { --i:23 }.necklace-display i:nth-child(24) { --i:24 }.necklace-display i:nth-child(25) { --i:25 }.necklace-display i:nth-child(26) { --i:26 }.necklace-display i:nth-child(27) { --i:27 }.necklace-display i:nth-child(28) { --i:28 }.necklace-display i:nth-child(29) { --i:29 }.necklace-display i:nth-child(30) { --i:30 }.necklace-display i:nth-child(31) { --i:31 }
.hero-diamond { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 8vw; text-shadow: 0 2px 20px rgba(25,40,38,.18); }
.visual-caption { position: absolute; right: 6%; bottom: 6%; text-align: right; color: white; font-family: Georgia, "Times New Roman", serif; font-size: 17px; letter-spacing: .03em; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.visual-caption span { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.scroll-note { position: absolute; left: 4.5vw; bottom: 28px; font-size: 8px; font-weight: 500; letter-spacing: .18em; }
.scroll-note span { margin-left: 16px; font-size: 14px; }

.manifesto { padding: 120px 8vw; text-align: center; background: var(--cream); }
.manifesto h2, .section-heading h2, .difference h2, .story h2, .consultation h2 { font-size: clamp(42px, 5vw, 72px); line-height: 1.05; }
.manifesto > p:last-child { max-width: 650px; margin: 30px auto 0; color: #3c4c48; font-size: 16px; line-height: 1.8; }
.collection { padding: 120px 4.5vw; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 55px; }
.section-heading h2 { margin-bottom: 0; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.category-card { border: 1px solid var(--line); background: #f7f4ed; }
.jewel-art { height: 430px; position: relative; overflow: hidden; background: linear-gradient(150deg,#e9e4da,#c8cabf); }
.jewel-art > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s ease; }
.category-card:hover .jewel-art > img { transform: scale(1.025); }
.jewel-art.necklace { background: linear-gradient(150deg,#c7c7bb,#9da59c); }
.jewel-art.studs { background: linear-gradient(145deg,#f5f0e7,#d3c6b5); }
.card-number { position: absolute; top: 20px; left: 22px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(20,39,36,.74); backdrop-filter: blur(7px); font-size: 9px; letter-spacing: .1em; }
.bracelet-ring { position: absolute; width: 215px; height: 215px; top: 105px; left: calc(50% - 108px); border: 7px solid rgba(255,255,255,.55); border-radius: 50%; box-shadow: 0 18px 35px rgba(25,40,38,.16), inset 0 0 12px rgba(25,40,38,.25); }
.bracelet-ring i { width: 9px; height: 9px; transform: rotate(calc(var(--i) * 15deg)) translateY(-107px); }
.mini-necklace { position: absolute; width: 280px; height: 280px; top: 66px; left: calc(50% - 140px); border: 4px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 15px 30px rgba(25,40,38,.18); }
.mini-necklace i { transform: rotate(calc(var(--i) * 15.65deg)) translateY(-140px); }
.mini-necklace:after { content:"✦"; position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:56px; }
.stud { position: absolute; color: white; text-shadow: 0 10px 23px rgba(25,40,38,.23); }
.stud.one { font-size: 135px; left: 15%; top: 20%; transform: rotate(12deg); }
.stud.two { font-size: 103px; right: 11%; bottom: 16%; transform: rotate(-8deg); }
.card-copy { padding: 27px 25px 30px; }
.card-copy h3 { font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; }
.card-copy p { min-height: 54px; color: #3f4e4a; font-size: 15px; line-height: 1.65; }
.card-copy a { font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.card-copy a span { float: right; font-size: 14px; }
.card-copy .availability { display: block; padding-top: 14px; border-top: 1px solid var(--line); text-transform: none; }
.card-copy .availability strong { display: block; margin-bottom: 8px; color: var(--gold); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.card-copy .availability span { float: none; display: block; color: #34443f; font-size: 14px; line-height: 1.65; letter-spacing: .01em; }

.difference { display: grid; grid-template-columns: 45% 55%; min-height: 820px; color: white; background: var(--forest); }
.difference-art { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle,#53665e 0,#253b36 44%,#11231f 74%); }
.difference-art span { position: relative; z-index: 2; text-align: center; font-size: 9px; line-height: 2; letter-spacing: .32em; }
.facet { position: absolute; width: 280px; height: 280px; transform: rotate(45deg); border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 0 60px rgba(255,255,255,.08); }
.facet-one:before, .facet-one:after { content:""; position:absolute; inset:30px; border:1px solid rgba(255,255,255,.22); transform:rotate(30deg); }
.facet-one:after { transform:rotate(60deg); }
.facet-two { width: 440px; height: 440px; border-color: rgba(255,255,255,.08); transform: rotate(22deg); }
.difference-copy { padding: 120px 9vw 90px 7vw; }
.difference .lead { max-width: 600px; color: #e1e6e3; font-size: 16px; line-height: 1.8; }
.quality-list { margin-top: 58px; border-top: 1px solid rgba(255,255,255,.2); }
.quality-list div { display: grid; grid-template-columns: 45px 170px 1fr; gap: 18px; align-items: baseline; padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.quality-list b { color: var(--gold); font-size: 9px; letter-spacing: .12em; }
.quality-list h3 { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; }
.quality-list p { color: #d7dedb; font-size: 14px; line-height: 1.65; }

.story { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; background: #a9afa3; }
.story-copy { padding: 100px 8vw; }
.story-copy > p:not(.eyebrow) { max-width: 500px; color: #293936; font-size: 16px; line-height: 1.8; }
.story-copy .button { margin-top: 25px; }
blockquote { margin: 0; padding: 90px 7vw; display: flex; flex-direction: column; justify-content: center; background: var(--cream); color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px,4vw,58px); line-height: 1.25; }
blockquote span { margin-top: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; }

.consultation { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: 120px 8vw; background: var(--paper); }
.consultation-intro > p:not(.eyebrow) { max-width: 500px; color: #3b4b47; font-size: 16px; line-height: 1.8; }
.contact-detail { margin-top: 50px; display: flex; flex-direction: column; gap: 9px; }
.contact-detail span, .footer-links > span { color: var(--gold); font-size: 8px; letter-spacing: .18em; }
.contact-detail a { font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
.contact-phones { margin-top: 28px; }
.company-detail a { color: #f2eee5; }
.company-detail a:hover { color: white; }
.business-address { margin-top: 28px; color: #3b4b47; font-size: 14px; font-style: normal; line-height: 1.75; }
.business-address span { display: block; margin-bottom: 8px; color: var(--gold); font-size: 8px; font-weight: 500; letter-spacing: .18em; }
.business-hours { max-width: 330px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: #63706d; }
.business-hours > span { display: block; margin-bottom: 12px; color: var(--gold); font-size: 8px; font-weight: 500; letter-spacing: .18em; }
.business-hours div { display: flex; justify-content: space-between; gap: 20px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.business-hours strong { color: var(--ink); font-weight: 400; }
.business-hours time { white-space: nowrap; }
.business-hours small { display: block; margin-top: 8px; font-size: 9px; letter-spacing: .06em; }
form { padding-top: 22px; }
form label { display: block; margin-bottom: 25px; color: #43524e; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
input, textarea, select { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: var(--ink); border-radius: 0; font-size: 16px; text-transform: none; letter-spacing: 0; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
form button { margin-top: 12px; }
.form-note { margin-top: 15px; color: #60706c; font-size: 11px; }
.form-note.success { color: #266345; }
.form-note.error { color: #9b3f36; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form button:disabled { cursor: wait; opacity: .7; }

footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 5vw; padding: 70px 5vw 25px; color: white; background: #0d1c19; }
.footer-brand { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; }
.footer-brand strong { font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: .12em; font-weight: 400; }
.footer-brand p { grid-column: 1 / -1; margin-top: 28px; color: #d0d8d4; font-family: Georgia, "Times New Roman", serif; font-size: 27px; line-height: 1.35; }
.created-diamonds-logo { grid-column: 1 / -1; width: min(100%, 310px); height: auto; margin: 4px 0 12px; display: block; border-radius: 2px; }
.company-detail { grid-column: 1 / -1; color: #e0e5e3; font-size: 14px; line-height: 1.8; letter-spacing: .02em; }
.footer-links { display: flex; flex-direction: column; gap: 13px; font-size: 13px; }
.footer-links > span { margin-bottom: 10px; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 45px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); color: #70807b; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .announcement-center { display: none; }
  .site-header { grid-template-columns: 1fr auto; height: 88px; }
  .header-cta { display: none; }
  .menu-button { display: block; }
  .nav { display: none; position: absolute; top: 88px; left: 0; right: 0; padding: 25px 5vw; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; gap: 22px; }
  .nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 90px 7vw 70px; }
  .hero-visual { min-height: 620px; }
  .necklace-display i { transform: rotate(calc(var(--i) * 11.61deg)) translateY(-240px); }
  .scroll-note { display: none; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .jewel-art { height: 480px; }
  .difference, .story, .consultation { grid-template-columns: 1fr; }
  .difference-art { min-height: 600px; }
  .quality-list div { grid-template-columns: 35px 150px 1fr; }
  footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .announcement { justify-content: center; }
  .announcement span:last-child { display: none; }
  .wordmark { width: 126px; }
  .header-logo { width: 126px; height: 72px; }
  .hero-copy { padding: 74px 6vw 60px; }
  .hero h1 { font-size: 51px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 470px; }
  .necklace-display { width: 90%; left: 5%; top: 10%; }
  .necklace-display i { width: 7px; height: 7px; transform: rotate(calc(var(--i) * 11.61deg)) translateY(-190px); }
  .hero-diamond { font-size: 24vw; }
  .manifesto, .collection, .difference-copy, .story-copy, blockquote, .consultation { padding: 80px 6vw; }
  .manifesto h2, .section-heading h2, .difference h2, .story h2, .consultation h2 { font-size: 41px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 25px; }
  .category-grid { grid-template-columns: 1fr; }
  .jewel-art { height: 380px; }
  .difference-art { min-height: 480px; }
  .facet { width: 210px; height: 210px; }
  .facet-two { width: 330px; height: 330px; }
  .quality-list div { grid-template-columns: 30px 1fr; gap: 10px; }
  .quality-list p { grid-column: 2; }
  blockquote { min-height: 480px; }
  footer { grid-template-columns: 1fr; padding: 60px 6vw 25px; }
  .footer-brand, .footer-bottom { grid-column: 1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }