:root {
  --ink: #111827;
  --navy: #17233e;
  --blue: #263b63;
  --paper: #f1eee7;
  --stone: #e7e1d5;
  --silver: #abb8c9;
  --gold: #ce8a43;
  --gold-light: #edc493;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: "Manrope", sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.dark { background: var(--navy); color: var(--paper); }
.gold { color: var(--gold-light); }
.muted { color: rgba(38, 59, 99, .64); }
.mono { font-family: "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; font-size: 9px; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .075; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); }
.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 5vw, 70px); border-bottom: 1px solid rgba(255,255,255,.16); color: var(--paper); }
.brand { display: flex; align-items: center; gap: 12px; line-height: 1; }
.brand strong { display: block; font-size: 13px; letter-spacing: .23em; }
.brand small { display: block; margin-top: 7px; color: var(--silver); font: 9px "DM Mono", monospace; letter-spacing: .32em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--gold); color: var(--gold); font: italic 24px "Playfair Display", serif; }
.desktop-nav { display: flex; gap: clamp(22px, 3vw, 48px); margin-left: auto; margin-right: clamp(20px, 4vw, 60px); }
.desktop-nav a, .outline-button, .text-link { font: 600 10px "Manrope", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.desktop-nav a { color: #d5dbea; transition: color .25s ease; }
.desktop-nav a:hover, .text-link:hover { color: var(--gold-light); }
.outline-button { border: 1px solid var(--gold); padding: 12px 16px; color: var(--gold-light); transition: background .25s ease, color .25s ease; }
.outline-button:hover { background: var(--gold); color: var(--ink); }
.menu-toggle { display: none; background: transparent; color: var(--paper); padding: 6px; }
.menu-toggle span { display: block; width: 22px; height: 1px; margin: 5px 0; background: currentColor; }
.mobile-menu { display: none; }
.hero { position: relative; min-height: 820px; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .77; animation: hero-drift 16s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,18,33,.95), rgba(12,18,33,.63) 38%, rgba(12,18,33,.12) 86%), linear-gradient(0deg, rgba(12,18,33,.85), transparent 55%); }
.hero-content { position: relative; z-index: 2; width: min(1440px, 100%); padding: 0 clamp(20px, 5vw, 70px) 96px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font: 9px "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow i { width: 34px; height: 1px; background: currentColor; display: inline-block; }
h1, h2, h3 { font-family: "Playfair Display", serif; font-weight: 400; }
h1 { max-width: 730px; margin: 26px 0 0; font-size: clamp(64px, 10vw, 144px); line-height: .84; letter-spacing: -.065em; }
h1 em, h2 em { color: var(--gold-light); font-weight: 400; }
.hero-copy { max-width: 420px; margin: 30px 0 0; color: #d5dbea; font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.solid-button { display: inline-block; background: var(--gold); padding: 16px 23px; color: var(--ink); font: 700 10px "Manrope", sans-serif; letter-spacing: .2em; text-transform: uppercase; transition: background .25s ease, transform .25s ease; }
.solid-button:hover { background: var(--gold-light); transform: translateY(-2px); }
.solid-button span { margin-left: 16px; font-size: 16px; }
.hero-actions .text-link { color: var(--paper); }
.hero-meta { display: flex; align-items: center; gap: 18px; margin-top: 48px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); color: var(--silver); }
.hero-meta b { width: 4px; height: 4px; border-radius: 100%; background: var(--gold); }
.vertical { position: absolute; z-index: 2; right: 5vw; top: 145px; color: var(--silver); writing-mode: vertical-rl; }
.orbit { position: absolute; z-index: 1; border: 1px solid rgba(237,196,147,.35); border-radius: 50%; pointer-events: none; animation: orbit 18s linear infinite; }
.orbit-one { width: 280px; height: 280px; right: 9%; top: 22%; }
.orbit-two { width: 156px; height: 156px; right: 15%; top: 30%; border-color: rgba(171,184,201,.26); animation-duration: 11s; animation-direction: reverse; }
.signature-card { position: absolute; z-index: 2; right: 6vw; bottom: 80px; width: 210px; padding: 17px; border: 1px solid rgba(255,255,255,.28); background: rgba(23,35,62,.73); backdrop-filter: blur(12px); }
.signature-top, .signature-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--gold-light); }
.signature-top span:first-child { font-size: 17px; }
.signature-card h2 { margin: 28px 0; color: var(--paper); font-size: 25px; line-height: 1; }
.signature-bottom { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); color: var(--silver); }
.signature-bottom strong { color: var(--gold-light); font-weight: 400; }
.scroll-cue { position: absolute; right: 6vw; bottom: 31px; z-index: 2; color: var(--silver); }
.scroll-cue span { display: inline-block; margin-left: 12px; font-size: 16px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--stone); }
.stats > div { padding: 29px clamp(20px, 5vw, 70px); border-right: 1px solid rgba(23,35,62,.16); }
.stats > div:last-child { border: 0; }
.stats strong { display: block; margin-top: 10px; font: 400 34px "Playfair Display", serif; }
.stats small { display: block; margin-top: 4px; color: rgba(38,59,99,.7); font: 8px "DM Mono", monospace; letter-spacing: .15em; }
.marquee { overflow: hidden; background: var(--gold); color: var(--ink); }
.marquee-track { display: flex; width: max-content; align-items: center; gap: 34px; padding: 12px 0; animation: marquee 22s linear infinite; }
.marquee-track b { font-size: 14px; }
.campaign-film { padding: clamp(58px, 7vw, 96px) clamp(20px, 5vw, 70px); background: var(--ink); color: var(--paper); }
.campaign-heading, .film-frame, .film-footer { width: min(1200px, 100%); margin-left: auto; margin-right: auto; }
.campaign-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 30px; }
.campaign-heading h2 { margin: 18px 0 0; font: 400 clamp(42px, 5vw, 70px)/.95 "Playfair Display", serif; letter-spacing: -.04em; }
.campaign-heading > span { color: var(--silver); }
.film-frame { position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: var(--navy); }
.film-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); animation: film-crossfade 18s ease-in-out infinite; }
.film-shot img { width: 100%; height: 100%; object-fit: cover; animation: film-drift 18s ease-in-out infinite; }
.film-shot-one, .film-shot-one img { animation-delay: 0s; }
.film-shot-two, .film-shot-two img { animation-delay: 6s; }
.film-shot-three, .film-shot-three img { animation-delay: 12s; }
.film-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17,24,39,.05), rgba(17,24,39,.1) 42%, rgba(17,24,39,.86)); }
.film-now-playing { position: absolute; z-index: 2; top: 25px; left: 28px; display: flex; align-items: center; gap: 9px; color: var(--gold-light); }
.film-now-playing > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: film-pulse 1.6s ease-in-out infinite; }
.film-caption { position: absolute; z-index: 2; right: 28px; bottom: 28px; left: 28px; display: flex; align-items: end; justify-content: space-between; gap: 22px; }
.film-caption p { margin: 0; color: var(--silver); }
.film-caption h3 { margin: 10px 0 0; font: 400 clamp(25px, 3vw, 43px)/.95 "Playfair Display", serif; }
.film-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; color: var(--silver); }
.film-footer p { max-width: 470px; margin: 0; font-size: 12px; line-height: 1.8; }
@keyframes film-crossfade { 0%, 28% { opacity: 1; } 34%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes film-drift { 0%, 100% { transform: scale(1.03) translate3d(0,0,0); } 50% { transform: scale(1.1) translate3d(-1.5%,-1%,0); } }
@keyframes film-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(206,138,67,.5); } 50% { box-shadow: 0 0 0 7px rgba(206,138,67,0); } }
.section { padding: clamp(72px, 9vw, 132px) clamp(20px, 5vw, 70px); }
.collection { background: var(--paper); }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 35px; max-width: 1300px; margin: auto; }
.section-intro h2, .house-copy h2, .standard h2, .detail h2, .visit h2 { margin: 22px 0 0; font-size: clamp(48px, 6vw, 82px); line-height: .95; letter-spacing: -.04em; }
.section-intro > p { max-width: 285px; margin: 0; color: rgba(38,59,99,.72); font-size: 14px; line-height: 1.7; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1300px; margin: 48px auto 0; padding: 13px 0; border-top: 1px solid rgba(23,35,62,.16); border-bottom: 1px solid rgba(23,35,62,.16); }
.filter { padding: 9px 12px; background: transparent; color: var(--navy); font: 600 10px "Manrope", sans-serif; letter-spacing: .15em; text-transform: uppercase; transition: background .2s, color .2s; }
.filter small { margin-left: 8px; opacity: .6; font: 9px "DM Mono", monospace; }
.filter:hover, .filter.active { background: var(--navy); color: var(--paper); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 24px; max-width: 1300px; margin: 30px auto 0; }
.product-card[hidden] { display: none; }
.product-image { position: relative; aspect-ratio: .86; overflow: hidden; background: #d4d0c9; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-image img { transform: scale(1.045); }
.product-number { position: absolute; top: 18px; left: 18px; color: var(--paper); text-shadow: 0 1px 5px #111; }
.product-open { position: absolute; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; background: rgba(241,238,231,.9); color: var(--navy); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.product-card:hover .product-open { opacity: 1; transform: translateY(0); }
.product-info { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 17px 0; border-bottom: 1px solid rgba(23,35,62,.2); }
.product-info h3 { margin: 0; font-size: 25px; }
.product-info p { margin: 6px 0 0; color: rgba(38,59,99,.65); font-size: 11px; }
.product-info strong { padding-top: 4px; color: var(--blue); font: 10px "DM Mono", monospace; white-space: nowrap; }
.collection-footer { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid rgba(23,35,62,.16); }
.house { display: grid; grid-template-columns: 1.03fr .97fr; background: var(--blue); color: var(--paper); }
.house-image { position: relative; min-height: 680px; overflow: hidden; }
.house-image img { width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: transform .8s ease; }
.house-image:hover img { transform: scale(1.03); }
.house-image:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,35,62,.7), transparent 55%); }
.house-image span { position: absolute; z-index: 1; bottom: 27px; left: clamp(20px, 5vw, 70px); color: var(--stone); }
.house-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 8vw, 110px); }
.house-copy h2, .standard h2, .visit h2 { color: var(--paper); }
.house-copy > p:not(.eyebrow), .visit-copy > p:not(.eyebrow) { max-width: 450px; color: #d5dbea; font-size: 14px; line-height: 2; }
.house-copy .text-link { width: fit-content; margin-top: 26px; padding-bottom: 9px; border-bottom: 1px solid var(--gold-light); }
.standard { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.standard h2 { font-size: clamp(42px, 5vw, 64px); }
.muted-copy { max-width: 360px; color: var(--silver); font-size: 14px; line-height: 1.9; }
.standard-items { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(171,184,201,.25); }
.standard-items > div { padding: 0 24px; border-left: 1px solid rgba(171,184,201,.25); }
.standard-items span { display: block; margin-top: 4px; color: var(--gold-light); font-size: 23px; }
.standard-items h3 { margin: 29px 0 0; color: var(--paper); font-size: 26px; }
.standard-items p { color: var(--silver); font-size: 12px; line-height: 1.9; }
.detail { background: var(--stone); }
.detail > * { max-width: 1300px; margin-left: auto; margin-right: auto; }
.detail { display: grid; grid-template-columns: .75fr 1.25fr; gap: 45px 70px; }
.detail-copy > p:not(.eyebrow) { max-width: 340px; color: rgba(38,59,99,.75); font-size: 14px; line-height: 1.9; }
.detail-controls { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.detail-controls button { width: 44px; height: 44px; border: 1px solid rgba(23,35,62,.3); background: transparent; color: var(--navy); font-size: 18px; transition: border-color .2s, color .2s; }
.detail-controls button:hover { border-color: var(--gold); color: var(--gold); }
.detail-controls span { margin-left: 8px; }
.detail-images { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
.detail-main, .detail-side { position: relative; overflow: hidden; background: #d1cbc1; }
.detail-main { aspect-ratio: .8; }
.detail-side { margin-top: 80px; }
.detail-images img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.detail-main > span { position: absolute; left: 18px; bottom: 18px; color: var(--paper); }
.makers-note { display: flex; align-items: end; justify-content: space-between; grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(23,35,62,.2); }
.makers-note p { margin: 12px 0 0; font: 25px "Playfair Display", serif; }
.makers-note > span { text-align: right; line-height: 1.8; }
.journal { background: var(--paper); }
.journal-heading { display: flex; align-items: end; justify-content: space-between; max-width: 1300px; margin: auto; padding-bottom: 22px; border-bottom: 1px solid rgba(23,35,62,.2); }
.journal-heading h2 { margin: 15px 0 0; font-size: clamp(42px, 5vw, 64px); }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1300px; margin: auto; }
.journal-grid article { min-height: 290px; padding: 28px 24px; border-right: 1px solid rgba(23,35,62,.2); }
.journal-grid article:first-child { padding-left: 0; }
.journal-grid article:last-child { border: 0; padding-right: 0; }
.journal-grid h3 { max-width: 250px; margin: 50px 0 13px; font-size: 25px; line-height: 1.1; }
.journal-grid p { max-width: 250px; color: rgba(38,59,99,.7); font-size: 12px; line-height: 1.8; }
.journal-grid a { display: block; margin-top: 28px; color: var(--gold); font-size: 20px; }
.visit { position: relative; display: grid; grid-template-columns: 1fr .8fr; gap: 70px; overflow: hidden; }
.visit:before, .visit:after { content: ""; position: absolute; right: -40px; top: -190px; width: 550px; height: 550px; border: 1px solid rgba(206,138,67,.26); border-radius: 50%; pointer-events: none; }
.visit:after { right: 80px; top: -110px; width: 400px; height: 400px; border-color: rgba(171,184,201,.12); }
.visit-copy, .salon { position: relative; z-index: 1; }
.salon { align-self: center; padding-top: 28px; border-top: 1px solid rgba(171,184,201,.25); }
.salon p { color: var(--paper); font-size: 14px; line-height: 1.8; }
.salon hr { margin: 27px 0; border: 0; border-top: 1px solid rgba(171,184,201,.25); }
.salon .solid-button { margin-top: 18px; }
footer { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 36px clamp(20px, 5vw, 70px); background: var(--stone); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand strong { font-size: 13px; letter-spacing: .23em; }
.footer-brand p { margin: 9px 0 0; color: rgba(38,59,99,.7); font-size: 12px; }
.footer-links { display: flex; justify-content: end; gap: 20px; margin-bottom: 22px; font: 10px "Manrope", sans-serif; letter-spacing: .17em; text-transform: uppercase; }
footer > div:last-child > .mono { display: block; text-align: right; color: rgba(38,59,99,.5); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.08) translate3d(1.2%, -1%, 0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 800px) {
  .desktop-nav, .desktop-only, .vertical, .signature-card, .scroll-cue { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; padding: 24px; background: var(--ink); color: var(--paper); transform: translateX(100%); transition: transform .35s ease; }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-close { align-self: end; background: transparent; color: var(--paper); font-size: 29px; line-height: 1; }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 23px; margin-top: 70px; font: 42px "Playfair Display", serif; }
  .mobile-menu > p:last-child { margin-top: auto; line-height: 2; }
  .hero { min-height: 720px; }
  .hero-content { padding-bottom: 55px; }
  h1 { font-size: clamp(62px, 17vw, 100px); }
  .hero-copy { font-size: 14px; }
  .hero-actions { align-items: start; flex-direction: column; gap: 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > div:nth-child(2) { border-right: 0; }
  .stats > div { padding: 24px 20px; }
  .section-intro, .visit { grid-template-columns: 1fr; display: grid; }
  .section-intro > p { margin-top: 10px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 14px; }
  .product-info { display: block; }
  .product-info strong { display: block; margin-top: 9px; }
  .house { grid-template-columns: 1fr; }
  .house-image { min-height: 450px; }
  .standard, .detail { grid-template-columns: 1fr; gap: 42px; }
  .standard-items { grid-template-columns: 1fr; }
  .standard-items > div { padding: 22px 0; border-left: 0; border-bottom: 1px solid rgba(171,184,201,.25); }
  .standard-items > div:last-child { border-bottom: 0; }
  .detail-images { gap: 12px; }
  .makers-note { align-items: start; flex-direction: column; gap: 20px; }
  .makers-note > span { text-align: left; }
  .journal-heading { align-items: start; flex-direction: column; gap: 22px; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-grid article, .journal-grid article:first-child, .journal-grid article:last-child { min-height: unset; padding: 30px 0; border-right: 0; border-bottom: 1px solid rgba(23,35,62,.2); }
  .journal-grid h3 { margin-top: 28px; }
  .visit { gap: 50px; }
  .campaign-heading { align-items: start; flex-direction: column; }
  .film-now-playing { top: 16px; left: 17px; }
  .film-caption { right: 17px; bottom: 17px; left: 17px; }
  .film-caption .text-link { display: none; }
  .film-footer { align-items: start; flex-direction: column; }
  footer { align-items: start; flex-direction: column; }
  .footer-links { justify-content: start; }
  footer > div:last-child > .mono { text-align: left; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-image { aspect-ratio: 1; }
  .detail-images { grid-template-columns: 1fr 1fr; }
  .detail-side { margin-top: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image, .orbit, .marquee-track, .film-shot, .film-shot img, .film-now-playing > span:first-child { animation: none; }
  .film-shot-one { opacity: 1; }
  .film-shot-two, .film-shot-three { opacity: 0; }
}