:root { --ink:#17130f; --cream:#f4efe4; --paper:#fbf8f1; --gold:#a77a2a; --muted:#746a5e; --line:rgba(93,70,37,.22); }
* { box-sizing:border-box; }
:root { --muted:#5f554a; --font-display:"Cormorant Garamond","Bodoni 72","Didot",Georgia,"Times New Roman",serif; --font-body:"Inter","Aptos","Segoe UI",Arial,Helvetica,sans-serif; --font-label:"Inter","Aptos","Segoe UI",Arial,sans-serif; --font-signature:"Great Vibes","Monotype Corsiva","Palatino Linotype","Cormorant Garamond",Georgia,serif; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
.site-header { height:78px; padding:0 clamp(22px,4.2vw,66px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); background:rgba(251,248,241,.94); position:relative; z-index:20; }
.brand { display:inline-flex; flex-direction:column; width:fit-content; }
.brand-mark { font-family:var(--font-display); font-size:23px; letter-spacing:.15em; color:#6f470c; font-weight:600; }
.brand-sub { margin-top:5px; font-family:var(--font-label); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#44382d; font-weight:500; }
.desktop-nav { display:flex; gap:clamp(18px,2.6vw,38px); font-family:var(--font-label); font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; }
.desktop-nav a,.header-link { transition:color .2s ease; }
.desktop-nav a:hover,.header-link:hover { color:var(--gold); }
.header-link { justify-self:end; font-family:var(--font-label); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--ink); padding-bottom:5px; }
.hero { min-height:min(650px,calc(100vh - 114px)); display:grid; grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr); background:var(--cream); }
.hero-copy { max-width:620px; padding:clamp(42px,5.8vh,66px) clamp(30px,5.6vw,86px) clamp(36px,4.8vh,54px); display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0 0 18px; font-family:var(--font-label); font-size:11px; letter-spacing:.14em; font-weight:600; color:#9a6a1f; }
h1,h2,h3 { font-family:var(--font-display); font-weight:500; }
h1 { margin:0; font-size:clamp(48px,5.45vw,86px); line-height:.94; letter-spacing:-.02em; }
h1 em { color:var(--gold); font-weight:400; }
.hero-text { max-width:510px; margin:25px 0 0; font-family:var(--font-display); font-size:clamp(17px,1.25vw,20px); line-height:1.6; color:#3f372f; }
.hero-actions { margin-top:28px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:14px 21px; font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; transition:all .25s ease; }
.button-dark { color:#fff; background:var(--ink); border:1px solid var(--ink); }
.button-dark:hover { background:var(--gold); border-color:var(--gold); }
.text-link { font-family:var(--font-label); font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:5px; }
.text-link span { margin-left:8px; color:var(--gold); }
.hero-meta { margin-top:34px; padding-top:16px; display:flex; gap:18px; flex-wrap:wrap; color:#554b40; font-family:var(--font-label); font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; border-top:1px solid rgba(93,70,37,.22); }
.hero-meta span { padding-right:22px; border-right:1px solid var(--line); }
.hero-meta span:last-child { border-right:0; }
.hero-meta b { color:var(--ink); }
.hero-visual { min-height:min(650px,calc(100vh - 114px)); background-image:linear-gradient(to bottom,rgba(0,0,0,.02),rgba(0,0,0,.12)),url('oyessence-hero.jpg'); background-size:cover; background-position:center 57%; position:relative; }
.image-caption { position:absolute; right:24px; bottom:24px; color:rgba(255,255,255,.9); font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.14em; writing-mode:vertical-rl; }
.section { padding:clamp(70px,8vw,120px) clamp(22px,5vw,76px); }
.collections { background:var(--paper); }
.section-heading { display:grid; grid-template-columns:1.35fr .65fr; gap:64px; align-items:end; max-width:1180px; margin:0 auto 52px; }
.section-heading h2 { margin:0; font-size:clamp(38px,4.3vw,62px); line-height:1.06; letter-spacing:-.02em; }
.section-heading>p { max-width:420px; margin:0 0 7px; color:#4d4339; font-size:15px; line-height:1.7; font-weight:500; }
.collection-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.collection-card { padding:22px clamp(20px,2.5vw,34px) 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.card-topline { display:flex; justify-content:space-between; color:#9a6618; font-family:var(--font-label); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.bottle-wrap { height:310px; margin:12px -14px 18px; overflow:hidden; background:#130f0b; }
.bottle-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 53%; transition:transform .6s ease; }
.collection-card-men .bottle-wrap img { object-position:center 43%; }
.collection-card:hover img { transform:scale(1.035); }
.collection-card h3 { margin:0; font-size:40px; letter-spacing:-.015em; }
.collection-card>p { min-height:48px; color:#473d33; font-size:14px; line-height:1.6; font-weight:500; }
.collection-card ul { display:flex; gap:8px; list-style:none; padding:0; margin:22px 0 0; flex-wrap:wrap; }
.collection-card li { border:1px solid rgba(93,70,37,.32); border-radius:100px; padding:8px 12px; color:#463a2c; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.scent-finder { background:#f3eadb; display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(38px,5.8vw,86px); align-items:center; }
.finder-copy h2 { max-width:620px; margin:0; font-size:clamp(40px,4.8vw,68px); line-height:1.02; letter-spacing:-.02em; }
.finder-copy>p:not(.eyebrow) { max-width:540px; margin:24px 0 0; color:#4b4036; font-family:var(--font-display); font-size:18px; line-height:1.6; }
.finder-actions { margin-top:36px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.finder-panel { border-top:1px solid rgba(93,70,37,.3); }
.finder-panel article { min-height:132px; padding:27px 0; display:grid; grid-template-columns:58px minmax(180px,.8fr) 1fr; gap:24px; align-items:center; border-bottom:1px solid rgba(93,70,37,.3); }
.finder-panel span,.profile-grid span,.popular-grid span,.process-grid span { color:#9a6618; font-family:var(--font-label); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.finder-panel strong { font-family:var(--font-display); font-size:30px; font-weight:500; line-height:1.12; }
.finder-panel p { margin:0; color:#53483d; font-size:15px; line-height:1.7; }
.profile-section { background:#fbf8f1; }
.profile-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.profile-grid a { min-height:220px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.2); transition:background .25s ease,transform .25s ease; }
.profile-grid a:hover { background:#f4ead9; transform:translateY(-3px); }
.profile-grid strong { margin-top:auto; font-family:var(--font-display); font-size:34px; font-weight:500; line-height:1.08; }
.profile-grid p { margin:14px 0 0; color:#4d4339; font-size:14px; line-height:1.65; }
.popular { background:#efe4d2; }
.popular-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.popular-grid a { display:block; min-width:0; }
.popular-grid img { width:100%; aspect-ratio:4/5; display:block; object-fit:cover; object-position:center 54%; background:#17120e; }
.popular-grid span { display:block; margin-top:20px; }
.popular-grid strong { display:block; margin-top:7px; font-family:var(--font-display); font-size:clamp(25px,2vw,32px); font-weight:500; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.popular-grid p { margin:11px 0 0; color:#4d4339; font-size:14px; line-height:1.65; }
.story { display:grid; grid-template-columns:1fr 1fr; min-height:820px; background:#18130e; color:#f8f1e6; }
.story-image { min-height:720px; background:linear-gradient(120deg,rgba(14,9,5,.03),rgba(14,9,5,.2)),url('oyessence-story.jpg') center 52%/cover; position:relative; }
.story-seal { position:absolute; right:-74px; top:50%; transform:translateY(-50%); width:148px; height:148px; border-radius:50%; background:var(--cream); color:var(--ink); display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid var(--gold); box-shadow:0 0 0 8px var(--cream); }
.story-seal span { font-family:var(--font-display); color:var(--gold); font-size:44px; line-height:1; }
.story-seal small { margin-top:8px; font-family:var(--font-label); font-size:8px; font-weight:700; line-height:1.45; letter-spacing:.13em; text-transform:uppercase; text-align:center; }
.story-copy { padding:clamp(90px,10vw,155px) clamp(48px,9vw,150px); display:flex; flex-direction:column; justify-content:center; }
.story-copy h2 { margin:0; font-size:clamp(48px,5.3vw,80px); line-height:1.02; letter-spacing:-.02em; }
.story-lead { font-family:var(--font-display); color:#e3bd70; font-size:25px!important; font-style:italic; }
.story-copy>p:not(.eyebrow) { max-width:630px; font-size:16px; line-height:1.85; color:#ddd0bf; }
.story-copy blockquote { margin:28px 0 36px; padding:22px 0 22px 24px; border-left:1px solid var(--gold); max-width:580px; font-family:var(--font-display); font-size:22px; line-height:1.5; color:#f5ead7; }
.story-copy .text-link { width:fit-content; border-color:rgba(255,255,255,.3); }
.signature { background:#eae0ce; display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(50px,9vw,150px); }
.signature-intro { position:sticky; top:60px; align-self:start; }
.signature-intro h2 { margin:0; font-size:clamp(42px,5vw,72px); line-height:1.08; letter-spacing:-.02em; }
.signature-intro h2 em { color:var(--gold); font-weight:400; }
.scent-list { border-top:1px solid rgba(93,70,37,.35); }
.scent-row { display:grid; grid-template-columns:58px minmax(120px,.7fr) 1fr; gap:22px; align-items:center; padding:29px 0; border-bottom:1px solid rgba(93,70,37,.35); }
.scent-row span { color:var(--gold); font-size:10px; letter-spacing:.16em; }
.scent-row strong { font-family:var(--font-display); font-weight:400; font-size:31px; }
.scent-row p { margin:0; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.quality { background:
  radial-gradient(circle at 12% 18%,rgba(167,122,42,.18),transparent 30%),
  radial-gradient(circle at 88% 20%,rgba(31,74,61,.12),transparent 26%),
  linear-gradient(135deg,#efe4d2 0%,#fbf8f1 48%,#eadcc5 100%); }
.quality-title,.quality-copy,.quality-grid { max-width:1320px; margin-left:auto; margin-right:auto; }
.quality-title h2 { margin:0; font-size:clamp(48px,5.6vw,82px); line-height:1.03; letter-spacing:-.02em; }
.quality-copy { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:56px; }
.quality-copy p { margin:0; color:#4b4036; font-family:var(--font-display); font-size:19px; line-height:1.8; }
.quality-grid { margin-top:74px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(93,70,37,.3); border-left:1px solid rgba(93,70,37,.3); box-shadow:0 28px 80px rgba(66,48,24,.08); }
.quality-grid article { padding:35px 30px; border-right:1px solid rgba(93,70,37,.3); border-bottom:1px solid rgba(93,70,37,.3); min-height:220px; background:rgba(255,250,241,.62); }
.quality-grid article:nth-child(even) { background:rgba(244,234,217,.72); }
.quality-grid span { color:#9a6618; font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.11em; }
.quality-grid h3 { margin:55px 0 12px; font-size:27px; }
.quality-grid p { margin:0; color:#4d4339; font-size:14px; line-height:1.65; font-weight:500; }
.process { background:#1a1510; color:#f7eee1; }
.process .section-heading>p { color:#d8cbbb; }
.process-grid { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2); }
.process-grid article { min-height:300px; padding:34px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.process-grid span { color:#d7a85a; }
.process-grid h3 { margin:0; font-size:34px; line-height:1.08; }
.process-grid p { margin:0; color:#d8cbbb; font-size:15px; line-height:1.7; }
.concentration { background:#201811; color:#fbf4e8; display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; align-items:stretch; }
.concentration-heading { padding-right:36px; }
.concentration-heading h2 { margin:0; font-size:clamp(44px,4.7vw,70px); line-height:1.02; }
.concentration-card { border:1px solid rgba(215,177,106,.48); min-height:360px; padding:42px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,rgba(255,255,255,.04),transparent); }
.premium-card { background:linear-gradient(145deg,rgba(185,130,44,.24),rgba(255,255,255,.02)); }
.concentration-value { font-family:var(--font-display); font-size:clamp(78px,7.5vw,118px); color:#c9933c; line-height:1; }
.concentration-card h3 { margin:0 0 13px; font-size:34px; }
.concentration-card p { margin:0; color:#ded1bf; font-size:14px; line-height:1.65; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.concentration>small { grid-column:2/4; color:#b4a58f; font-size:11px; line-height:1.6; letter-spacing:.04em; }
.contact { padding:clamp(70px,9vw,133px) 24px; background:#a97928; color:#fff9ef; text-align:center; }
.contact-kicker { font-family:var(--font-label); font-size:12px; font-weight:800; letter-spacing:.16em; }
.contact h2 { margin:26px auto 18px; font-size:clamp(36px,5.2vw,78px); line-height:.98; letter-spacing:-.035em; }
.contact h2 em { font-weight:400; color:#23190f; }
.contact>p { max-width:620px; margin:0 auto; color:#fff2de; font-size:16px; line-height:1.75; font-weight:500; }
.contact-layout { max-width:1170px; margin:42px auto 0; display:grid; grid-template-columns:minmax(310px,.7fr) minmax(0,1.3fr); gap:0; align-items:stretch; text-align:left; border:1px solid rgba(255,255,255,.26); border-radius:34px; background:rgba(54,34,18,.16); box-shadow:0 22px 60px rgba(35,25,15,.17); overflow:hidden; }
.contact-info { padding:30px 34px; display:flex; flex-direction:column; justify-content:space-between; gap:22px; background:linear-gradient(145deg,#19100b,#2d1c10 68%,#5f3a17); color:#fff7ea; }
.contact-info>span { color:#c99543; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.22em; }
.contact-info h3 { margin:0; font-size:clamp(24px,2.2vw,34px); line-height:1.08; letter-spacing:-.02em; }
.contact-info p { margin:0; color:#d9c8b1; font-size:14px; line-height:1.5; }
.contact-form { padding:30px 34px; display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; background:#eadbc6; color:#241910; border-left:1px solid rgba(91,59,28,.18); }
.contact-form input[name="website"] { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.contact-form label { display:flex; flex-direction:column; gap:7px; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.11em; line-height:1; text-transform:uppercase; }
.contact-form em { margin-left:3px; color:#9a6618; font-style:normal; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid rgba(66,43,21,.2); background:#f8efe2; color:#1f1710; font:500 15px/1.45 var(--font-body); outline:0; border-radius:18px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.contact-form input { height:50px; padding:0 15px; }
.contact-form textarea { min-height:96px; resize:vertical; padding:13px 15px; }
.contact-form input:focus,.contact-form textarea:focus { border-color:#9b691f; box-shadow:0 0 0 4px rgba(134,85,28,.16); background:#fffaf2; }
.contact-form label:nth-of-type(4),.contact-consent,.contact-submit { grid-column:1/-1; }
.contact-consent { flex-direction:row!important; align-items:center; gap:10px!important; text-transform:none!important; letter-spacing:0!important; font-family:var(--font-body)!important; font-size:13px!important; line-height:1.4; }
.contact-consent input { width:16px; height:16px; flex:0 0 16px; }
.contact-submit { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:0; }
.contact-submit p { min-height:42px; margin:0; padding:10px 14px; display:flex; align-items:center; flex:1 1 auto; border:1px solid rgba(93,70,37,.18); border-radius:16px; background:rgba(255,250,242,.58); color:#5a4430; font-family:var(--font-body); font-size:13px; font-weight:600; line-height:1.35; letter-spacing:0; }
.contact-submit p.is-sending { color:#7a551d; background:rgba(255,246,229,.78); border-color:rgba(154,102,24,.24); }
.contact-submit p.is-success { color:#315d3f; background:rgba(235,248,238,.86); border-color:rgba(49,93,63,.22); }
.contact-submit p.is-error { color:#8a2f21; background:rgba(255,238,233,.9); border-color:rgba(138,47,33,.24); }
.contact-submit button { border:0; border-radius:999px; cursor:pointer; }
.contact-submit button:disabled { opacity:.58; cursor:wait; }
.contact-links { display:grid; grid-template-columns:1fr; border-top:1px solid rgba(255,255,255,.24); border-left:1px solid rgba(255,255,255,.24); }
.contact-links a { padding:16px 16px; border-right:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.28); color:#fff4df; font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.01em; line-height:1.3; transition:background .25s ease,color .25s ease,padding-left .25s ease; }
.contact-links a:hover { padding-left:20px; background:rgba(255,255,255,.08); color:#f0c76f; }
.contact-links span { margin-left:8px; font-size:12px; color:#f0c76f; }
footer { min-height:210px; padding:50px clamp(24px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#15110d; color:#d6cbbd; }
footer p,footer>a:last-child { font-family:var(--font-label); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.footer-brand .brand-mark { color:#c9943d; }
footer>a:last-child { justify-self:end; }
@media (max-width:980px) {
  .site-header{grid-template-columns:1fr auto}.desktop-nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto}.hero-copy{min-height:auto}.hero-visual{min-height:68vh}
  .section-heading{grid-template-columns:1fr;gap:28px}.collection-grid{grid-template-columns:1fr}.bottle-wrap{height:500px}
  .scent-finder{grid-template-columns:1fr}.finder-panel article{grid-template-columns:48px 1fr}.finder-panel p{grid-column:2}.profile-grid{grid-template-columns:1fr 1fr}.popular-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}.story-image{min-height:720px}.story-seal{right:40px;top:auto;bottom:-64px;transform:none}
  .story-copy{padding-top:120px}
  .signature{grid-template-columns:1fr}.signature-intro{position:static}
  .quality-grid{grid-template-columns:repeat(2,1fr)}
  .concentration{grid-template-columns:1fr 1fr}.concentration-heading{grid-column:1/3;margin-bottom:30px}.concentration>small{grid-column:1/3}
  .contact-layout{grid-template-columns:1fr}.contact-links{grid-template-columns:1fr}
}
@media (max-width:560px) {
  .site-header{height:76px;padding:0 18px}.brand-mark{font-size:18px;letter-spacing:.16em}.brand-sub{font-size:7px;letter-spacing:.18em}.header-link{font-size:0;padding:12px;border:1px solid var(--line)}.header-link span{font-size:16px}
  .hero-copy{min-height:auto;padding:70px 24px 44px}.hero-text{font-size:17px}.hero-meta{margin-top:34px;gap:12px}.hero-meta span{padding-right:12px}.hero-visual{min-height:520px}
  .section{padding:85px 18px}.collection-card{padding:20px 18px 32px}.bottle-wrap{height:400px}
  .finder-copy h2{font-size:42px}.finder-copy>p:not(.eyebrow){font-size:18px}.finder-panel article{min-height:auto;padding:22px 0}.finder-panel strong{font-size:27px}.profile-grid,.popular-grid{grid-template-columns:1fr}.profile-grid a{min-height:210px;padding:26px}.popular-grid{gap:42px}.process-grid article{min-height:230px;padding:28px}
  .story-image{min-height:560px}.story-seal{width:116px;height:116px;right:22px;bottom:-48px}.story-copy{padding:95px 24px 85px}
  .scent-row{grid-template-columns:42px 1fr;gap:10px 14px}.scent-row p{grid-column:2}
  .quality-copy{grid-template-columns:1fr;gap:26px}.quality-grid{grid-template-columns:1fr}.quality-grid article{min-height:180px}.quality-grid h3{margin-top:42px}
  .concentration{grid-template-columns:1fr}.concentration-heading,.concentration>small{grid-column:auto}.concentration-card{min-height:270px}
  .contact{padding:70px 18px}.contact-layout{margin-top:48px}.contact-info,.contact-form{padding:26px}.contact-form{grid-template-columns:1fr}.contact-submit{align-items:flex-start;flex-direction:column}
  footer{grid-template-columns:1fr;gap:30px;text-align:center;padding:50px 24px}.footer-brand{margin:auto}footer>a:last-child{justify-self:center}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition:none!important} }

/* Page transition: perfume droplets atomizing directly across the screen. */
.perfume-transition { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:hidden; background:#17130f; color:#f4efe4; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .16s ease,visibility 0s linear .16s; }
.perfume-transition.is-active { opacity:1; visibility:visible; transition:opacity .16s ease; }
.perfume-spray { position:absolute; inset:0; }
.perfume-mist { position:absolute; left:50%; top:50%; width:min(38vw,520px); aspect-ratio:1.35; border:1px solid rgba(244,239,228,.16); border-radius:50%; filter:blur(18px); opacity:0; transform:translate(-50%,-50%) scale(.04); }
.perfume-mist-two { width:min(58vw,760px); filter:blur(32px); }
.perfume-mist-three { width:min(76vw,980px); filter:blur(48px); }
.perfume-drop { --drop-x:100px; --drop-y:0; --drop-size:3px; --drop-delay:0ms; position:absolute; left:50%; top:50%; width:var(--drop-size); height:var(--drop-size); border-radius:50%; background:#fffaf0; box-shadow:0 0 7px rgba(255,248,231,.55); opacity:0; }
.perfume-transition-word { position:absolute; bottom:clamp(36px,8vh,80px); font-family:var(--font-display); font-size:24px; letter-spacing:.28em; color:#d5a84f; opacity:0; }
.perfume-transition.is-active .perfume-mist-one { animation:mist-release .72s ease-out .08s both; }
.perfume-transition.is-active .perfume-mist-two { animation:mist-release .78s ease-out .12s both; }
.perfume-transition.is-active .perfume-mist-three { animation:mist-release .84s ease-out .17s both; }
.perfume-transition.is-active .perfume-drop { animation:droplet-release .7s cubic-bezier(.12,.72,.2,1) calc(.06s + var(--drop-delay)) both; }
.perfume-transition.is-active .perfume-transition-word { animation:transition-word .55s ease .3s both; }
@keyframes mist-release { 0%{opacity:0;transform:translate(-50%,-50%) scale(.04)} 28%{opacity:.42} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)} }
@keyframes droplet-release { 0%{opacity:0;transform:translate(0,0) scale(.4)} 20%{opacity:.9} 100%{opacity:0;transform:translate(var(--drop-x),var(--drop-y)) scale(.1)} }
@keyframes transition-word { 0%{opacity:0;transform:translateY(8px)} 45%,75%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-4px)} }
@media (prefers-reduced-motion:reduce) { .perfume-transition{display:none} }

/* Catalog experience */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.announcement { min-height:36px; padding:0 16px; display:flex; align-items:center; justify-content:center; background:#18130e; color:#f0c76f; font-family:var(--font-display); font-size:17px; font-weight:500; font-style:italic; line-height:1; letter-spacing:.01em; text-align:center; text-transform:none; }
.catalog-header { position:sticky; top:0; backdrop-filter:blur(18px); box-shadow:0 12px 30px rgba(38,28,17,.04); }
.mobile-menu { display:none; justify-self:end; position:relative; }
.mobile-menu summary { width:44px; height:44px; list-style:none; cursor:pointer; padding:6px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:#17120e; box-shadow:0 10px 24px rgba(20,14,8,.08); transform:translateY(0) scale(1); transition:transform .46s ease,box-shadow .46s ease,border-color .46s ease,background .46s ease; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu summary img { width:26px; height:26px; object-fit:contain; display:block; filter:invert(1); transform:rotate(0deg) scale(1); transition:transform .62s cubic-bezier(.16,1,.3,1),filter .46s ease; }
.mobile-menu summary:hover { transform:translateY(-2px) scale(1.04); border-color:rgba(201,147,60,.55); background:#23170d; box-shadow:0 16px 32px rgba(20,14,8,.18); }
.mobile-menu summary:hover img { transform:rotate(10deg) scale(1.08); filter:invert(1) sepia(.45) saturate(1.6); }
.mobile-menu[open] summary { border-color:rgba(201,147,60,.7); background:#24180f; }
.mobile-menu[open] summary img { transform:rotate(45deg) scale(1.04); }
.mobile-menu nav { position:absolute; right:0; top:54px; width:220px; padding:12px; display:flex; flex-direction:column; background:#19140f; color:#f8f0e3; box-shadow:0 20px 40px rgba(20,14,8,.22); opacity:0; visibility:hidden; transform:translateY(-14px) scale(.94); transform-origin:top right; transition:opacity .72s ease,transform .72s cubic-bezier(.16,1,.3,1),visibility 0s linear .72s; }
.mobile-menu[open] nav { opacity:1; visibility:visible; transform:translateY(0) scale(1); transition:opacity .78s ease,transform .78s cubic-bezier(.16,1,.3,1),visibility 0s; }
.mobile-menu nav a { padding:13px 11px; border-bottom:1px solid rgba(255,255,255,.14); font-family:var(--font-label); font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; transition:color .28s ease,background .28s ease,padding-left .28s ease; }
.mobile-menu nav a:hover { color:#f0c76f; background:rgba(255,255,255,.06); padding-left:16px; }
.catalog-hero { padding:clamp(56px,7vw,96px) 22px clamp(50px,6.5vw,82px); text-align:center; background:
  radial-gradient(circle at 15% 20%,rgba(201,147,60,.18),transparent 26%),
  radial-gradient(circle at 82% 75%,rgba(69,98,84,.13),transparent 24%),
  linear-gradient(135deg,#f7f1e6,#fcfaf5); border-bottom:1px solid var(--line); }
.catalog-hero h1 { max-width:880px; margin:0 auto; font-size:clamp(44px,5.8vw,82px); }
.catalog-hero>p:last-child { margin:22px auto 0; max-width:600px; color:#4b4036; font-family:var(--font-display); font-size:18px; line-height:1.6; }
.catalog-layout { max-width:1360px; margin:0 auto; padding:44px clamp(18px,3.5vw,54px) 78px; display:grid; grid-template-columns:260px 1fr; gap:clamp(28px,3.5vw,52px); }
.filter-panel { position:sticky; top:112px; align-self:start; padding:18px 20px 20px; background:#fffaf1; border:1px solid rgba(93,70,37,.28); box-shadow:0 18px 48px rgba(56,42,22,.08); }
.filter-panel-head { min-height:36px; padding:0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(93,70,37,.32); font-family:var(--font-label); font-size:12px; font-weight:500; line-height:1; letter-spacing:.09em; color:#2a2118; }
.filter-panel-head span,.filter-panel-head button { display:inline-flex; align-items:center; min-height:34px; }
.filter-panel-head button { border:0; background:none; color:#9b6b21; cursor:pointer; font-family:var(--font-label); font-size:11px; font-weight:600; line-height:1; padding:0; }
.filter-panel fieldset { border:0; padding:18px 0 0; margin:0; }
.filter-panel fieldset + fieldset { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.filter-panel legend { margin-bottom:13px; color:#9a6618; font-family:var(--font-label); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.filter-panel fieldset>button { width:100%; min-height:48px; padding:0 14px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; border:1px solid rgba(93,70,37,.28); background:#f7f1e6; color:#2c231b; cursor:pointer; text-align:left; transition:.2s ease; font-size:14px; font-weight:500; }
.filter-panel fieldset>button small { min-width:32px; height:25px; display:inline-flex; align-items:center; justify-content:center; color:#574b3d; background:#eadfce; font-family:var(--font-label); font-size:10px; font-weight:600; }
.filter-panel fieldset>button:hover,.filter-panel fieldset>button.filter-active { border-color:#1b1813; background:#1b1813; color:#fff8ec; }
.filter-panel fieldset>button:hover small,.filter-panel fieldset>button.filter-active small { background:#b27b28; color:#fff8ec; }
.profile-chips { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.profile-chips button { min-height:42px; padding:0 10px; border:1px solid rgba(93,70,37,.25); background:#fbf8f1; color:#31271f; cursor:pointer; font-size:12px; font-weight:500; transition:.2s ease; }
.profile-chips button:hover,.profile-chips button.filter-active { background:#b27b28; border-color:#b27b28; color:white; }
.filter-note { margin-top:20px; padding:20px; background:#1f4a3d; color:#fff8ec; }
.filter-note span { color:#e3bd70; font-family:var(--font-label); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.filter-note p { margin:11px 0 18px; font-family:var(--font-display); font-size:22px; line-height:1.25; }
.filter-note a { font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.48); padding-bottom:4px; }
.catalog-toolbar { min-height:54px; margin-bottom:28px; padding-bottom:18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.catalog-toolbar p { margin:0; color:#51483e; font-family:var(--font-label); font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:500; }
.catalog-toolbar p b { color:var(--ink); font-size:22px; }
.catalog-search { width:min(360px,48%); display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:0 15px; background:white; }
.catalog-search input { width:100%; height:44px; border:0; outline:0; background:transparent; color:var(--ink); }
.catalog-search>span:last-child { color:var(--gold); font-size:20px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:62px 30px; }
.product-card { --accent:#a97928; --wash:rgba(169,121,40,.22); display:block; min-width:0; }
.product-citrus { --accent:#d49724; --wash:rgba(221,174,68,.28); }
.product-noir { --accent:#71614b; --wash:rgba(28,23,19,.43); }
.product-cocoa { --accent:#8b512c; --wash:rgba(110,53,24,.35); }
.product-vanilla { --accent:#b99053; --wash:rgba(226,203,159,.24); }
.product-rose { --accent:#b55c70; --wash:rgba(184,82,107,.25); }
.product-amber { --accent:#c46622; --wash:rgba(201,91,25,.3); }
.product-plum { --accent:#69455f; --wash:rgba(77,36,68,.4); }
.product-visual { aspect-ratio:4/5; position:relative; overflow:hidden; background:#17120e; }
.product-visual::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(145deg,var(--wash),transparent 55%,rgba(8,6,5,.38)); mix-blend-mode:color; pointer-events:none; }
.product-visual::after { content:""; position:absolute; inset:18px; z-index:2; border:1px solid rgba(255,255,255,.28); pointer-events:none; }
.product-visual img { width:100%; height:100%; object-fit:cover; object-position:center 52%; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .3s ease; }
.product-card:nth-child(3n+1) .product-visual img { object-position:48% 44%; }
.product-card:nth-child(3n+2) .product-visual img { object-position:53% 58%; }
.product-card:hover .product-visual img { transform:scale(1.045); filter:saturate(1.08) contrast(1.04); }
.product-index,.product-code,.product-view { position:absolute; z-index:3; color:#fff7e9; font-family:var(--font-label); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.product-index { top:32px; left:32px; }
.product-code { right:24px; top:26px; padding:7px 10px; background:rgba(18,14,10,.72); border:1px solid rgba(255,255,255,.38); font-weight:500; }
.product-name-badge { max-width:calc(100% - 48px); text-align:right; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-label); font-size:clamp(10px,.86vw,12px); font-weight:500; letter-spacing:.02em; text-transform:none; }
.product-view { left:32px; bottom:32px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.55); transform:translateY(10px); opacity:0; transition:.25s ease; }
.product-card:hover .product-view { transform:translateY(0); opacity:1; }
.product-info { padding-top:22px; }
.product-info>div>span { color:#9b5f16; font-family:var(--font-label); font-size:10px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.product-info h2 { margin:8px 0 0; font-family:var(--font-display); font-size:clamp(25px,1.85vw,32px); font-weight:500; line-height:1.12; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-info>p { min-height:70px; margin:14px 0 20px; color:#352d25; font-size:15px; line-height:1.65; font-weight:520; }
.product-info ul { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.product-info li { padding:8px 11px; border:1px solid rgba(160,98,22,.36); color:#4a3a29; background:#fffaf1; font-family:var(--font-label); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:980px) {
  .catalog-header .header-link { display:none; }
  .mobile-menu { display:block; }
}
@media (max-width:1150px) {
  .catalog-layout { grid-template-columns:240px 1fr; gap:34px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .announcement { min-height:38px; font-size:17px; letter-spacing:0; }
  .catalog-layout { grid-template-columns:1fr; padding-top:36px; }
  .filter-panel { position:static; }
  .filter-note { display:none; }
  .catalog-toolbar { align-items:flex-start; gap:18px; flex-direction:column; }
  .catalog-search { width:100%; }
  .product-grid { gap:42px 12px; }
  .product-info>p { min-height:72px; }
}
@media (max-width:520px) {
  .catalog-hero { padding:62px 18px 56px; }
  .catalog-hero h1 { max-width:100%; font-size:40px; line-height:1.02; overflow-wrap:anywhere; }
  .catalog-hero>p:last-child { font-size:16px; }
  .catalog-layout { padding-left:14px; padding-right:14px; }
  .product-grid { grid-template-columns:1fr; }
  .product-info>p { min-height:auto; }
}

/* Product detail */
.breadcrumb { max-width:1460px; margin:0 auto; padding:30px clamp(20px,5vw,72px); display:flex; gap:12px; color:#655a4d; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.breadcrumb b { color:var(--ink); font-weight:500; }
.product-detail { --accent:#a97928; --wash:rgba(169,121,40,.22); max-width:1240px; min-height:0; margin:0 auto 54px; padding:0 clamp(20px,4vw,54px); display:grid; grid-template-columns:minmax(420px,.98fr) minmax(360px,1.02fr); gap:clamp(34px,5vw,70px); align-items:center; }
.detail-visual { position:relative; height:min(58vh,560px); min-height:440px; overflow:hidden; background:#17120e; }
.detail-visual::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(145deg,var(--wash),transparent 55%,rgba(6,5,4,.36)); mix-blend-mode:color; }
.detail-visual::after { content:""; position:absolute; inset:22px; z-index:2; border:1px solid rgba(255,255,255,.32); }
.detail-visual img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.detail-visual-code { position:absolute; top:36px; left:36px; z-index:3; padding:9px 12px; border:1px solid rgba(255,255,255,.4); color:white; font-family:var(--font-label); font-size:10px; font-weight:800; letter-spacing:.1em; }
.detail-monogram { position:absolute; z-index:3; right:34px; bottom:20px; color:rgba(255,255,255,.28); font-family:var(--font-display); font-size:76px; }
.detail-copy { padding:18px 0; display:flex; flex-direction:column; justify-content:center; }
.detail-copy h1 { margin:0; font-family:var(--font-display); font-size:clamp(38px,4vw,62px); font-weight:500; line-height:1.04; color:var(--ink); letter-spacing:-.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail-summary { max-width:540px; margin:18px 0; color:#3d352e; font-family:var(--font-display); font-size:18px; line-height:1.5; }
.detail-notes { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; list-style:none; }
.detail-notes li { padding:8px 12px; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); color:#4c3f32; font-family:var(--font-label); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.detail-facts { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.detail-facts>div { min-height:48px; padding:10px 0; display:grid; grid-template-columns:96px 1fr; align-items:center; border-bottom:1px solid var(--line); }
.detail-facts>div:last-child { border-bottom:0; }
.detail-facts span { color:#9a6618; font-family:var(--font-label); font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.detail-facts strong { font-family:var(--font-display); font-size:17px; font-weight:500; }
.intensity-fact>div { display:flex; gap:7px; }
.intensity-fact i { width:28px; height:4px; background:#ded6ca; }
.intensity-fact i.filled { background:var(--accent); }
.detail-actions { margin-top:24px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.detail-primary { color:white; background:var(--accent); border:1px solid var(--accent); }
.detail-primary:hover { background:#17130f; border-color:#17130f; }
.detail-disclaimer { margin-top:14px; color:#766b5f; font-size:11px; line-height:1.5; }
.scent-portrait { background:#efe4d2; }
.portrait-heading { max-width:1320px; margin:0 auto 62px; display:grid; grid-template-columns:1fr 1.2fr; align-items:end; gap:60px; }
.portrait-heading .eyebrow { align-self:start; }
.portrait-heading h2 { margin:0; font-size:clamp(48px,5.8vw,82px); line-height:1.03; }
.portrait-heading h2 em { color:var(--gold); font-weight:400; }
.portrait-grid { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(85,58,24,.28); border-left:1px solid rgba(85,58,24,.28); }
.portrait-grid article { min-height:280px; padding:34px; border-right:1px solid rgba(85,58,24,.28); border-bottom:1px solid rgba(85,58,24,.28); }
.portrait-grid span { color:#9a6618; font-family:var(--font-label); font-size:11px; font-weight:800; letter-spacing:.08em; }
.portrait-grid h3 { margin:90px 0 14px; font-size:37px; }
.portrait-grid p { color:#4d4339; font-size:14px; line-height:1.7; font-weight:500; }
.detail-editorial { padding:clamp(90px,11vw,160px) clamp(24px,6vw,90px); background:#1a1510; color:#f7eee1; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(60px,8vw,130px); }
.detail-editorial>div:first-child h2 { margin:0; font-size:clamp(45px,5vw,76px); line-height:1.05; }
.editorial-points { border-top:1px solid rgba(255,255,255,.22); }
.editorial-points article { display:grid; grid-template-columns:48px minmax(150px,.7fr) 1fr; gap:25px; align-items:center; padding:30px 0; border-bottom:1px solid rgba(255,255,255,.22); }
.editorial-points span { color:#d2a454; font-family:var(--font-label); font-size:11px; font-weight:800; }
.editorial-points h3 { margin:0; font-size:28px; }
.editorial-points p { margin:0; color:#d8cbbb; font-size:14px; line-height:1.7; }
.related { background:#fcfaf5; }
.related-head { max-width:1320px; margin:0 auto 55px; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.related-head h2 { margin:0; font-size:clamp(44px,5vw,72px); }
.related-grid { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.related-card>div { --accent:#a97928; height:460px; position:relative; overflow:hidden; background:#17120e; }
.related-card>div::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,var(--wash),transparent 50%,rgba(7,5,4,.4)); mix-blend-mode:color; }
.related-card img { width:100%; height:100%; object-fit:cover; object-position:center 50%; transition:transform .6s ease; }
.related-card:hover img { transform:scale(1.035); }
.related-card>div span { position:absolute; z-index:2; top:26px; right:26px; color:white; padding:8px 10px; border:1px solid rgba(255,255,255,.4); font-family:var(--font-label); font-size:10px; font-weight:800; }
.related-card>p { margin:18px 0 5px; color:#9a6618; font-family:var(--font-label); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.related-card>h3 { margin:0; font-family:var(--font-display); font-size:clamp(26px,2.4vw,34px); font-weight:500; line-height:1.14; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty-product { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; }

@media (max-width:960px) {
  .product-detail { grid-template-columns:1fr; }
  .detail-visual { height:auto; min-height:560px; }
  .portrait-heading { grid-template-columns:1fr; }
  .detail-editorial { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .breadcrumb { overflow:auto; white-space:nowrap; }
  .product-detail { margin-bottom:70px; }
  .detail-visual { min-height:460px; }
  .detail-copy { padding-top:28px; }
  .detail-copy h1 { font-size:42px; }
  .detail-facts>div { grid-template-columns:95px 1fr; }
  .portrait-grid { grid-template-columns:1fr; }
  .portrait-grid article { min-height:220px; }
  .portrait-grid h3 { margin-top:55px; }
  .editorial-points article { grid-template-columns:38px 1fr; }
  .editorial-points p { grid-column:2; }
  .related-head { align-items:flex-start; flex-direction:column; }
  .related-grid { grid-template-columns:1fr; }
  .related-card>div { height:390px; }
}