:root {
  --black: #090909;
  --panel: #11100e;
  --gold: #c7a15b;
  --gold-light: #ecd5a0;
  --cream: #f3eee4;
  --muted: #aaa49a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--cream); background: var(--black);
  font-family: "DM Sans", sans-serif; overflow-x: hidden; position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 73% 44%, rgba(167,123,48,.12), transparent 37%),
              linear-gradient(125deg, #090909 15%, #100f0d 58%, #090909 100%);
}
.ambient { position: fixed; border: 1px solid rgba(199,161,91,.08); border-radius: 50%; pointer-events:none; z-index:-1; }
.ambient-one { width: 650px; height:650px; right:-320px; top:-200px; }
.ambient-two { width: 450px; height:450px; left:-300px; bottom:-180px; }
.site-header { width:min(1180px, calc(100% - 64px)); margin:auto; height:100px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(199,161,91,.18); }
.brand { display:flex; gap:13px; align-items:center; text-decoration:none; color:var(--cream); }
.brand-mark { width:42px; height:42px; }
.brand-name { font-family:"Cormorant Garamond",serif; font-size:23px; letter-spacing:3px; line-height:1; }
.brand-name span { display:block; font-family:"DM Sans",sans-serif; font-size:9px; letter-spacing:5px; color:var(--gold); margin-top:6px; }
.header-note { font-size:9px; letter-spacing:2.6px; color:#928b7e; }
.hero { width:min(1180px, calc(100% - 64px)); margin:0 auto; min-height:590px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:30px; padding:46px 0 55px; }
.hero-copy { padding:10px 0 20px 5%; position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:12px; color:var(--gold); font-size:9px; letter-spacing:2.4px; margin:0 0 28px; }
.eyebrow span { width:25px; height:1px; background:var(--gold); }
h1 { font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(56px, 6.6vw, 88px); line-height:.91; letter-spacing:-1.8px; margin:0; }
h1 em { font-weight:400; color:var(--gold-light); }
.intro { max-width:405px; color:#b9b3a8; font-size:14px; line-height:1.9; font-weight:300; margin:27px 0 28px; }
.coming-soon { display:flex; align-items:center; gap:11px; color:var(--cream); font-size:10px; letter-spacing:2px; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(199,161,91,.12); }
.rule { width:100%; max-width:390px; height:1px; background:linear-gradient(90deg, rgba(199,161,91,.55), transparent); margin:25px 0 17px; }
.small-note { color:#8f897f; font-size:12px; margin:0 0 18px; }
.contact-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.gold-button { text-decoration:none; display:inline-flex; align-items:center; gap:24px; background:var(--gold); color:#17130c; padding:14px 18px; font-size:11px; font-weight:600; letter-spacing:.4px; transition:background .2s, transform .2s; }
.gold-button:hover { background:var(--gold-light); transform:translateY(-2px); }
.gold-button span { font-size:16px; }
.text-link { color:#d6c9ae; font-size:11px; text-decoration:none; border-bottom:1px solid rgba(199,161,91,.45); padding:0 0 5px; }
.text-link span { margin-left:6px; color:var(--gold); }
.hero-art { min-height:470px; position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.hero-art::before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(180,132,54,.17), rgba(180,132,54,.03) 55%, transparent 70%); }
.orbit { position:absolute; border:1px solid rgba(199,161,91,.18); border-radius:50%; transform:rotate(-24deg); }
.orbit-one { width:350px; height:455px; }
.orbit-two { width:270px; height:395px; transform:rotate(28deg); border-color:rgba(199,161,91,.11); }
.perfume-bottle { position:relative; z-index:2; width:190px; height:300px; display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 25px 30px rgba(0,0,0,.6)); }
.cap { width:66px; height:39px; border:1px solid #b58a42; border-radius:4px 4px 2px 2px; background:linear-gradient(90deg,#6f4d1e,#d3ad64 30%,#80602c 65%,#d8b76f); box-shadow:inset 0 2px 3px rgba(255,255,255,.25); }
.neck { width:48px; height:19px; background:linear-gradient(90deg,#73501f,#d8b56c,#72501e); border:1px solid #a47a38; }
.bottle { position:relative; width:176px; height:231px; margin-top:-1px; border:1px solid #c9a45d; border-radius:22px 22px 32px 32px; overflow:hidden; background:linear-gradient(105deg,rgba(71,43,13,.96),rgba(186,136,47,.88) 18%,rgba(63,38,13,.95) 38%,rgba(20,16,10,.98) 70%,rgba(130,86,25,.9)); box-shadow:inset 7px 0 12px rgba(255,236,176,.14),inset -8px 0 14px rgba(0,0,0,.6); }
.bottle::before { content:""; position:absolute; top:0; left:12px; width:1px; height:100%; background:rgba(255,239,192,.32); }
.bottle-shine { position:absolute; left:18px; top:18px; width:8px; height:125px; border-radius:50%; background:linear-gradient(transparent,rgba(255,255,255,.24),transparent); transform:rotate(2deg); }
.bottle-label { position:absolute; top:75px; left:22px; right:22px; height:86px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:linear-gradient(135deg,#e6d2a0,#b8954f); color:#2a2111; border:1px solid rgba(255,244,205,.65); }
.label-small { font-size:7px; letter-spacing:2px; }
.label-large { font-family:"Cormorant Garamond",serif; font-size:25px; letter-spacing:2px; margin:2px 0; }
.bottle-base { position:absolute; bottom:0; height:12px; width:100%; background:rgba(225,184,92,.18); border-top:1px solid rgba(255,227,157,.22); }
.bottle-shadow { position:absolute; z-index:1; bottom:55px; width:240px; height:25px; background:rgba(0,0,0,.65); filter:blur(13px); border-radius:50%; }
.art-caption { position:absolute; color:rgba(221,190,126,.68); font-size:8px; letter-spacing:2.5px; line-height:1.8; }
.top-caption { top:42px; right:3%; text-align:right; }
.bottom-caption { bottom:43px; left:4%; }
.spark { position:absolute; color:var(--gold-light); opacity:.8; }
.spark-one { top:19%; left:21%; font-size:17px; }
.spark-two { right:15%; top:35%; font-size:22px; }
.spark-three { bottom:21%; right:22%; font-size:13px; }
.site-footer { width:min(1180px, calc(100% - 64px)); margin:0 auto; border-top:1px solid rgba(199,161,91,.18); padding:26px 0 18px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.footer-brand { display:flex; flex-direction:column; gap:7px; }
.footer-title { font-family:"Cormorant Garamond",serif; font-size:22px; color:var(--gold-light); }
.footer-subtitle { color:#888176; font-size:11px; letter-spacing:.5px; }
.footer-contact { justify-self:end; text-align:right; }
.footer-label { color:var(--gold); font-size:8px; letter-spacing:2px; }
.footer-contact p { color:#aaa398; font-size:11px; margin:7px 0 0; }
.footer-contact a { color:#c9b88f; text-decoration:none; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:20px; padding-top:17px; margin-top:5px; border-top:1px solid rgba(255,255,255,.06); color:#625e56; font-size:9px; letter-spacing:.3px; }
@media (max-width:760px) {
  .site-header, .hero, .site-footer { width:calc(100% - 36px); }
  .site-header { height:78px; }
  .brand-mark { width:35px; height:35px; }
  .brand-name { font-size:19px; letter-spacing:2px; }
  .header-note { display:none; }
  .hero { grid-template-columns:1fr; gap:0; padding:55px 0 24px; }
  .hero-copy { padding:0; }
  h1 { font-size:clamp(58px, 15vw, 82px); }
  .intro { font-size:13px; max-width:360px; }
  .hero-art { min-height:405px; margin-top:5px; }
  .orbit-one { width:290px; height:370px; }
  .orbit-two { width:230px; height:330px; }
  .top-caption { top:25px; right:4%; }
  .bottom-caption { bottom:22px; left:3%; }
  .site-footer { grid-template-columns:1fr; padding-top:22px; }
  .footer-contact { justify-self:start; text-align:left; }
  .footer-bottom { flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }


/* Official product photograph in the hero section */
.hero-art-photo { overflow: hidden; min-height: 500px; }
.hero-art-photo::before { display: none; }
.hero-product-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 500px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.28));
}
.hero-art-photo .top-caption { z-index: 2; top: 18px; right: 7%; }
.hero-art-photo .bottom-caption { z-index: 2; bottom: 18px; left: 2%; }
@media (max-width:760px) {
  .hero-art-photo { min-height: 430px; margin-top: 0; }
  .hero-product-image { height: 430px; }
  .hero-art-photo .top-caption { top: 15px; right: 3%; }
  .hero-art-photo .bottom-caption { bottom: 12px; left: 1%; }
}


/* Finishing pass: integrate the product photograph into the page instead of displaying it as a raw rectangle */
.hero-art-photo {
  min-height: 500px;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(199,161,91,.16);
  background:
    radial-gradient(ellipse at 50% 48%, rgba(155,104,35,.13), transparent 63%),
    linear-gradient(145deg, rgba(20,17,13,.55), rgba(8,8,7,.08));
  isolation: isolate;
}
.hero-art-photo::before {
  display: block;
  content: "";
  position: absolute;
  width: 78%;
  height: 84%;
  left: 11%;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(177,128,48,.14), rgba(177,128,48,.025) 55%, transparent 72%);
  filter: blur(8px);
  z-index: -1;
}
.hero-product-image {
  width: 100%;
  height: 500px;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 2px;
  mix-blend-mode: normal;
  filter: saturate(.94) contrast(1.03) drop-shadow(0 20px 26px rgba(0,0,0,.3));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.hero-art-photo .top-caption {
  top: 18px;
  right: 2%;
  z-index: 3;
  text-shadow: 0 1px 8px #090909;
}
.hero-art-photo .bottom-caption {
  bottom: 18px;
  left: -7%;
  z-index: 3;
  text-shadow: 0 1px 8px #090909;
}
@media (max-width:760px) {
  .hero-art-photo {
    min-height: 410px;
    border-left: 0;
    border-right: 0;
  }
  .hero-product-image {
    height: 410px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  .hero-art-photo .top-caption { top: 14px; right: 1%; }
  .hero-art-photo .bottom-caption { bottom: 12px; left: 0; }
}


/* Captions are outside the image box, so they never cover the bottle or product lettering. */
.hero-art-photo {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 16px;
}
.photo-caption {
  position: relative;
  z-index: 2;
  color: rgba(221,190,126,.72);
  font-size: 8px;
  letter-spacing: 2.5px;
  line-height: 1.6;
  text-shadow: none;
}
.photo-caption-top { text-align: right; padding-right: 2px; }
.photo-caption-bottom { text-align: left; padding-left: 2px; }
.hero-product-image {
  min-height: 0;
  height: 100%;
  max-height: 465px;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width:760px) {
  .hero-art-photo { gap: 6px; padding: 10px 10px; }
  .hero-product-image { height: 360px; max-height: 360px; }
  .photo-caption { font-size: 7px; letter-spacing: 2px; }
}