@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --plum:#2b183a; --plum-deep:#1d1128; --cream:#f4efe8; --paper:#faf8f3; --coral:#ee665d; --olive:#74804d; --ink:#231b29; --line:rgba(43,24,58,.18); --sans:'DM Sans',Arial,sans-serif; --serif:'Playfair Display',Georgia,serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; background:var(--cream); }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.loader { position:fixed; z-index:20; inset:0; display:grid; align-content:center; justify-items:center; gap:18px; background:var(--plum-deep); color:var(--cream); transition:opacity .5s ease, visibility .5s ease; }
.loader.is-hidden { display:none; opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark { width:84px; height:84px; border:1px solid rgba(244,239,232,.45); border-radius:50%; display:grid; place-items:center; position:relative; font-family:var(--serif); font-size:27px; letter-spacing:-.08em; }
.loader__mark i { position:absolute; width:9px; height:9px; background:var(--coral); border-radius:50%; right:5px; top:12px; }
.eyebrow { font:500 10px/1.3 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.loader__label { margin:5px 0 0; font:500 clamp(18px,2vw,24px)/1.1 var(--serif); }
.loader__bar { width:min(330px,72vw); height:2px; background:rgba(244,239,232,.25); overflow:hidden; }
.loader__bar span { display:block; height:100%; width:0; background:var(--coral); }
.loader__count { color:rgba(244,239,232,.65); font:10px var(--mono); margin:0; }
.site[aria-hidden='true'] { visibility:hidden; }
.topbar { position:absolute; z-index:8; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:26px 40px; color:var(--cream); mix-blend-mode:screen; }
.wordmark, .footer__brand { display:flex; align-items:center; gap:10px; font:500 11px/1 var(--mono); letter-spacing:.08em; }
.wordmark__ae { display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; font:500 14px var(--serif); letter-spacing:-.12em; }
.wordmark b { font-weight:500; }
.nav { display:flex; gap:36px; margin-left:80px; font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.nav a, .topbar__call { opacity:.8; transition:opacity .2s ease; }
.nav a:hover, .topbar__call:hover { opacity:1; }
.topbar__call { font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.topbar__call span { color:var(--coral); font-size:16px; margin-left:8px; }
.video-hero { min-height:100vh; height:100svh; position:relative; overflow:hidden; background:var(--plum-deep); color:var(--cream); }
.video-hero__backdrop { position:absolute; z-index:0; inset:-4%; width:108%; height:108%; object-fit:cover; object-position:center; display:block; filter:blur(14px) saturate(.78) brightness(.72); transform:scale(1.06); opacity:.95; }
.video-hero__media { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; display:block; background:transparent; filter:saturate(.9) contrast(1.03); transform:scale(2.7225); -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-composite:intersect; }
.video-hero__veil { position:absolute; z-index:2; inset:0; background:linear-gradient(90deg,rgba(29,17,40,.76) 0%,rgba(29,17,40,.19) 58%,rgba(29,17,40,.4) 100%),linear-gradient(0deg,rgba(29,17,40,.5) 0%,transparent 40%); }
.video-hero__copy { position:absolute; z-index:3; left:9vw; top:50%; transform:translateY(-37%); max-width:620px; }
.video-hero__copy .eyebrow { color:#f1a69d; margin-bottom:24px; }
.video-hero__copy h1 { font:500 clamp(58px,9vw,132px)/.86 var(--serif); letter-spacing:-.065em; margin:0; }
.video-hero__copy h1 em { color:#f1a69d; font-style:italic; }
.video-hero__copy > p:last-child { font:18px/1.4 var(--serif); color:rgba(244,239,232,.84); margin:30px 0 0 4px; }
.video-hero__scroll { position:absolute; z-index:3; left:9vw; bottom:42px; display:flex; align-items:center; gap:14px; color:var(--cream); font:9px var(--mono); letter-spacing:.14em; }
.video-hero__scroll i { display:block; width:70px; height:1px; background:var(--coral); }
.sequence { height:500vh; position:relative; background:var(--plum-deep); }
.sequence__sticky { height:100vh; position:sticky; top:0; overflow:hidden; }
#sequenceCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.sequence__wash { position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,14,35,.58) 0%,rgba(25,14,35,.07) 45%,rgba(25,14,35,.6) 100%); pointer-events:none; }
.sequence__meta { position:absolute; bottom:38px; display:flex; align-items:center; gap:12px; color:var(--cream); font:9px var(--mono); letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.sequence__meta--left { left:40px; } .sequence__meta--right { right:40px; }
.sequence__line { width:38px; height:1px; background:currentColor; opacity:.5; }
.hero-copy { position:absolute; left:9vw; top:50%; transform:translateY(-43%); color:var(--cream); max-width:680px; }
.hero-copy .eyebrow { color:#f2a59d; margin-bottom:24px; }
.hero-copy h1 { font:500 clamp(54px,9vw,132px)/.88 var(--serif); letter-spacing:-.06em; margin:0; }
.hero-copy h1 em, h2 em { color:#f1a69d; font-style:italic; }
.hero-copy__sub { margin:28px 0 0 5px; color:rgba(244,239,232,.85); font:16px/1.45 var(--serif); }
.hero-copy__scroll { display:flex; align-items:center; gap:10px; margin-top:42px; color:rgba(244,239,232,.8); font:10px var(--mono); }
.hero-copy__scroll i { display:inline-block; width:58px; height:1px; background:var(--coral); }
.sequence__chapters { position:absolute; z-index:4; left:9vw; top:54%; width:min(520px,42vw); color:var(--cream); pointer-events:none; }
.sequence__chapter { position:absolute; inset:0 auto auto 0; opacity:0; }
.sequence__chapter .eyebrow { color:#f2a59d; margin:0 0 20px; }
.sequence__chapter h2 { color:var(--cream); font:500 clamp(42px,6vw,78px)/.9 var(--serif); letter-spacing:-.06em; margin:0; }
.sequence__chapter h2 em { color:#f1a69d; font-style:italic; }
.sequence__chapter > p:last-child { max-width:300px; margin:22px 0 0 4px; color:rgba(244,239,232,.84); font:16px/1.45 var(--serif); }
.sequence__hint { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; color:var(--cream); font:9px var(--mono); letter-spacing:.16em; opacity:.7; }
.sequence__hint-line { display:block; width:1px; height:50px; background:var(--cream); opacity:.5; }
.content { display:none; background:var(--cream); }
.content.is-revealed { display:block; }
.section-pad { padding:clamp(72px,9vw,150px) clamp(24px,7vw,110px); }
.intro { display:grid; grid-template-columns:1fr 2fr 1fr; gap:6vw; align-items:end; min-height:530px; background:var(--paper); }
.intro__stamp { width:118px; height:118px; border:1px solid var(--plum); border-radius:50%; display:grid; place-items:center; text-align:center; color:var(--plum); font:500 34px/.7 var(--serif); letter-spacing:-.1em; }
.intro__stamp span { font:8px/1.25 var(--mono); letter-spacing:.12em; }
.accent { color:var(--coral); }
h2 { font:500 clamp(46px,7vw,96px)/.9 var(--serif); letter-spacing:-.065em; margin:0; color:var(--plum); }
.intro__copy p:not(.eyebrow) { max-width:370px; font-size:16px; line-height:1.55; margin:34px 0 0; color:rgba(35,27,41,.7); }
.intro__aside { justify-self:end; display:grid; gap:8px; text-align:right; font:9px var(--mono); letter-spacing:.12em; color:rgba(35,27,41,.58); }
.rating { color:var(--plum); font:500 78px/.8 var(--serif); letter-spacing:-.1em; }
.stars { color:var(--coral); letter-spacing:.2em; }
.products { background:var(--plum); color:var(--cream); overflow:hidden; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; }
.section-heading h2, .review-section h2, .visit h2 { color:var(--cream); margin-top:24px; }
.section-heading h2 em, .review-section h2 em, .visit h2 em { color:#f1a69d; }
.section-heading__note { width:220px; margin:0 0 5px; font:13px/1.5 var(--serif); color:rgba(244,239,232,.65); }
.product-stage { min-height:650px; position:relative; display:flex; align-items:center; justify-content:center; margin:38px 0 8px; }
.product-track { position:relative; width:min(760px,72vw); height:500px; perspective:1100px; }
.product-card { position:absolute; top:0; left:50%; width:min(360px,50vw); height:500px; transform-origin:center; transform-style:preserve-3d; margin-left:min(-180px,-25vw); border:1px solid rgba(244,239,232,.28); background:#3a2348; overflow:hidden; transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease; }
.product-card__image { height:60%; overflow:hidden; background:#544362; }
.product-card__image img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); }
.product-card__info { padding:22px 24px; position:relative; height:40%; }
.product-card__info .eyebrow { color:#f1a69d; }
.product-card__info h3 { font:500 35px/.95 var(--serif); letter-spacing:-.05em; margin:14px 0 8px; }
.product-card__info p:not(.eyebrow) { color:rgba(244,239,232,.65); font:13px var(--serif); margin:0; }
.product-card__index { position:absolute; bottom:22px; right:24px; font:10px var(--mono); color:rgba(244,239,232,.5); }
.product-card--olive .product-card__info { background:#657143; } .product-card--coral .product-card__info { background:#bc554d; } .product-card--ink .product-card__info { background:#27222e; }
.carousel-arrow { position:absolute; z-index:12; width:52px; height:52px; border:1px solid rgba(244,239,232,.45); background:transparent; color:var(--cream); border-radius:50%; cursor:pointer; font-size:22px; transition:background .2s ease, color .2s ease; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background:var(--cream); color:var(--plum); }
.carousel-arrow--prev { left:4vw; } .carousel-arrow--next { right:4vw; }
.product-controls { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(244,239,232,.2); padding-top:20px; }
.product-dots { display:flex; gap:8px; }
.product-dots button { width:44px; height:20px; border:0; background:transparent; cursor:pointer; padding:8px 0; }
.product-dots button span { display:block; height:2px; width:100%; background:rgba(244,239,232,.25); } .product-dots button[aria-selected='true'] span { background:var(--coral); }
.product-controls__caption { font:9px var(--mono); letter-spacing:.14em; color:rgba(244,239,232,.5); }
.review-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; background:var(--paper); }
.review-section__intro { max-width:390px; } .review-section__intro h2 { color:var(--plum); } .review-section__intro p:not(.eyebrow) { color:rgba(35,27,41,.7); line-height:1.55; max-width:280px; margin-top:28px; }
.accordion { border-top:1px solid var(--line); }
.accordion__item { border-bottom:1px solid var(--line); }
.accordion__button { appearance:none; width:100%; border:0; background:none; cursor:pointer; display:grid; grid-template-columns:52px 1fr 30px; align-items:center; text-align:left; gap:16px; padding:25px 0; color:var(--plum); }
.accordion__button:hover .accordion__title { color:var(--coral); }
.accordion__num { font:10px var(--mono); color:var(--coral); } .accordion__title { font:500 25px var(--serif); transition:color .2s ease; } .accordion__icon { font:24px var(--sans); font-weight:300; text-align:right; }
.accordion__panel { padding:0 48px 30px 68px; color:rgba(35,27,41,.72); font-size:14px; line-height:1.6; max-width:650px; }
.review-pull { color:var(--plum); font:italic 25px/1.15 var(--serif); margin-top:24px; max-width:410px; } .review-pull small { display:block; color:var(--coral); font:9px var(--mono); letter-spacing:.13em; margin-top:15px; }
.visit { background:var(--plum-deep); display:grid; grid-template-columns:1.2fr .8fr; align-items:stretch; gap:0; padding:0; min-height:680px; }
.visit__photo { position:relative; min-height:650px; } .visit__photo img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.86); } .visit__photo-label { position:absolute; left:35px; bottom:30px; color:var(--cream); font:9px var(--mono); letter-spacing:.13em; }
.visit__card { color:var(--cream); padding:clamp(56px,8vw,120px) clamp(30px,7vw,100px); align-self:center; } .visit__card h2 { font-size:clamp(54px,6vw,88px); }
.visit__address { font:22px/1.25 var(--serif); margin:44px 0 22px; } .visit__status { font:10px var(--mono); letter-spacing:.08em; color:rgba(244,239,232,.6); } .status-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:#a9be64; margin-right:8px; }
.visit__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; } .button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 18px; font:10px var(--mono); letter-spacing:.05em; text-transform:uppercase; } .button--plum { background:var(--coral); color:var(--plum-deep); } .button--line { border:1px solid rgba(244,239,232,.4); color:var(--cream); } .button span { font-size:15px; }
.footer { padding:32px 40px; display:grid; grid-template-columns:1fr 1fr 2fr; align-items:center; gap:30px; color:var(--cream); background:var(--plum); } .footer__brand { color:var(--cream); } .footer > p { color:#f1a69d; font:9px var(--mono); letter-spacing:.14em; text-align:center; } .footer__details { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:18px; color:rgba(244,239,232,.55); font:9px var(--mono); }
.noscript { padding:30px; background:var(--plum); color:var(--cream); }
:focus-visible { outline:2px solid var(--coral); outline-offset:4px; }
@media (max-width: 800px) { .topbar { padding:18px 20px; } .nav { display:none; } .topbar__call { font-size:9px; } .video-hero__copy { left:24px; right:24px; } .video-hero__copy h1 { font-size:clamp(58px,16vw,92px); } .video-hero__copy > p:last-child { font-size:16px; } .video-hero__scroll { left:24px; bottom:25px; } .sequence__meta--right { right:20px; } .sequence__meta--left { left:20px; } .sequence__meta--left .eyebrow, .sequence__meta--right span:first-child { display:none; } .hero-copy { left:24px; right:24px; } .hero-copy h1 { font-size:clamp(54px,16vw,88px); } .hero-copy__sub { font-size:15px; } .sequence__chapters { left:24px; right:24px; top:54%; width:auto; } .sequence__chapter h2 { font-size:clamp(42px,14vw,72px); } .sequence__chapter > p:last-child { font-size:15px; } .sequence__hint { bottom:25px; } .intro { grid-template-columns:1fr; gap:48px; min-height:0; } .intro__aside { justify-self:start; text-align:left; } .section-heading { display:block; } .section-heading__note { margin-top:26px; } .product-stage { min-height:560px; } .product-track { width:100%; height:460px; } .product-card { width:min(310px,70vw); height:460px; margin-left:min(-155px,-35vw); } .carousel-arrow { width:42px; height:42px; } .carousel-arrow--prev { left:0; } .carousel-arrow--next { right:0; } .review-section { grid-template-columns:1fr; gap:70px; } .accordion__button { grid-template-columns:34px 1fr 20px; } .accordion__title { font-size:21px; } .accordion__panel { padding-left:50px; } .visit { grid-template-columns:1fr; } .visit__photo { min-height:400px; } .visit__card { min-height:570px; } .footer { grid-template-columns:1fr; padding:30px 20px; } .footer > p { text-align:left; } .footer__details { justify-content:flex-start; } }
@media (prefers-reduced-motion: reduce) { .loader, .product-card, .carousel-arrow, .nav a, .topbar__call, .accordion__title { transition:none; } }