:root{
  --navy:#1A202B; --navy-2:#232B39; --pale:#D9E4F4; --mist:#F7F7F6; --slate:#5B6577; --line:#C9D3E3;
  --paper:var(--mist); --ink:var(--navy); --muted:var(--slate); --band:var(--pale); --field:#fff;
  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Jost", "Avenir Next", "Gill Sans", "Segoe UI", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --paper:#12161E; --ink:#E6ECF5; --muted:#9AA6BA; --band:#1E2635; --line:#2E3747; --field:#1A202B; }
}
:root[data-theme="dark"]{ --paper:#12161E; --ink:#E6ECF5; --muted:#9AA6BA; --band:#1E2635; --line:#2E3747; --field:#1A202B; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid #8FA8CF; outline-offset:3px}
.wrap{width:min(1180px, 100% - 3rem); margin-inline:auto}

/* header */
header{position:absolute; inset:0 0 auto 0; z-index:5; padding-top:env(safe-area-inset-top,0px); color:var(--pale)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.6rem 0}
.brand{display:block; width:128px; color:var(--pale)}
.brand svg{display:block; width:100%; height:auto}
nav ul{display:flex; gap:2.2rem; list-style:none; margin:0; padding:0; font-size:.95rem; letter-spacing:.02em}
nav a{text-decoration:none; opacity:.85}
nav a:hover{opacity:1}
.btn{display:inline-block; font:inherit; font-weight:400; font-size:.95rem; letter-spacing:.03em; padding:.85rem 1.6rem; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit; text-decoration:none; cursor:pointer; transition:background .2s,color .2s}
.btn.solid{background:var(--pale); color:var(--navy); border-color:var(--pale)}
.btn.solid:hover{background:#fff; border-color:#fff}
.btn.ghost:hover{background:rgba(217,228,244,.12)}
@media (max-width:860px){ nav ul{display:none} }

/* hero */
.hero{position:relative; overflow:hidden; background:var(--navy); color:var(--mist); min-height:min(92vh, 860px); display:flex; align-items:flex-end}
.hero .emblem{position:absolute; right:-6vw; top:55%; width:min(56vh, 500px); aspect-ratio:186.9/251.1; transform:translateY(-50%); color:var(--pale); opacity:.9; animation:diffuse 2.6s cubic-bezier(.2,.6,.2,1) both}
.hero .emblem svg{width:100%; height:100%; display:block}
@keyframes diffuse{from{opacity:0; filter:blur(18px); transform:translateY(-50%) scale(1.06)} to{opacity:.9; filter:blur(0); transform:translateY(-50%) scale(1)}}
.hero-copy{position:relative; padding:9rem 0 5.5rem; max-width:40rem}
.hero h1{font-family:var(--serif); font-weight:300; font-size:clamp(2.9rem, 6.4vw, 5.6rem); line-height:1.02; margin:0 0 1.6rem; letter-spacing:-.01em}
.hero p{font-size:1.15rem; max-width:34rem; color:#C3CEDF; margin:0 0 2.4rem}
.actions{display:flex; flex-wrap:wrap; gap:.9rem}
@media (max-width:700px){ .hero .emblem{right:-30vw; width:88vw; opacity:.14; animation:none} .hero-copy{padding-top:8rem} }

/* intro */
.intro{padding:7.5rem 0 6rem}
.intro-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:4rem 6rem; align-items:start}
.statement{font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem, 3.4vw, 2.75rem); line-height:1.18; margin:0}
.offers{display:grid; gap:2.6rem; margin:0; padding:0; list-style:none}
.offers h3{font-family:var(--sans); font-weight:400; font-size:1.2rem; margin:0 0 .4rem; letter-spacing:.01em}
.offers p{margin:0; color:var(--muted); max-width:34rem}
.offers li{padding-left:1.4rem; border-left:1px solid var(--line)}
@media (max-width:860px){ .intro-grid{grid-template-columns:1fr} }

/* process */
.process{padding:0 0 7rem}
.process h2,.kit h2,.home h2,.contact h2{font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem, 3.8vw, 3.1rem); line-height:1.1; margin:0 0 1rem}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; margin:3rem 0 0; padding:0; list-style:none; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding-top:3.4rem}
.steps li::before{content:counter(s); position:absolute; top:0; left:0; font-family:var(--serif); font-size:2.6rem; line-height:1; color:#8FA8CF}
.steps h3{font-weight:400; font-size:1.15rem; margin:0 0 .5rem}
.steps p{margin:0; color:var(--muted)}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

/* sample kit */
.kit{background:var(--band); padding:6.5rem 0}
.kit-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:4rem; align-items:center}
.kit p{color:var(--muted); max-width:30rem}
.kit ul{margin:1.6rem 0 2.2rem; padding:0; list-style:none; display:grid; gap:.55rem}
.kit li{display:flex; gap:.8rem; align-items:baseline}
.kit li::before{content:""; width:.45rem; height:.45rem; border-radius:50%; background:#8FA8CF; flex:none; transform:translateY(-.1rem)}
.kit .btn{color:var(--ink)}
.kit .btn:hover{background:var(--navy); color:var(--mist); border-color:var(--navy)}
.kit-art{background:var(--mist); border-radius:6px; padding:clamp(1rem,3vw,2rem); box-shadow:0 30px 60px -30px rgba(26,32,43,.45)}
.kit-art > svg{display:block; width:100%; height:auto}
@media (max-width:900px){ .kit-grid{grid-template-columns:1fr} }

/* home & car */
.home{padding:7rem 0}
.home-head{display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; margin-bottom:3rem}
.home-head p{color:var(--muted); max-width:30rem; margin:0}
.shelf{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.product{margin:0}
.product .stage{aspect-ratio:4/5; background:var(--band); border-radius:6px; display:grid; place-items:center; overflow:hidden}
.product .box{width:34%; aspect-ratio:1/2.3; background:linear-gradient(100deg,#232B39 0 62%, #1A202B 62%); border-radius:2px; position:relative; overflow:hidden; box-shadow:18px 24px 40px -18px rgba(26,32,43,.55); color:var(--pale); display:flex; flex-direction:column; align-items:center; padding-top:22%}
.product .box .wm{width:74%}
.product .box .ic{position:absolute; width:120%; right:-68%; bottom:6%; aspect-ratio:186.9/251.1; opacity:.95}
.product .box.car{aspect-ratio:1/1.35; width:40%; padding-top:14%}
.product .box.car .wm,.product .box.home2 .wm{width:58%; transform:translateX(-14%)}
.product .box.car .ic,.product .box.home2 .ic{width:78%; right:-44%; bottom:4%}
.product .box.home2{width:44%; aspect-ratio:1/1.6; border-radius:3px}
.product figcaption{display:flex; justify-content:space-between; gap:1rem; padding-top:1rem}
.product figcaption span:last-child{color:var(--muted)}
.notify{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:3rem; align-items:center}
.notify input{flex:1 1 16rem; max-width:24rem}
.notify .btn{color:var(--ink)}
.notify .btn:hover{background:var(--navy); color:var(--mist); border-color:var(--navy)}
.note{color:var(--muted); font-size:.95rem; min-height:1.5em}
@media (max-width:760px){ .shelf{grid-template-columns:1fr 1fr} .shelf .product:last-child{display:none} }

/* contact */
.contact{background:var(--navy); color:var(--mist); padding:6.5rem 0; position:relative; overflow:hidden}
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:4rem}
.contact p{color:#C3CEDF; max-width:26rem}
.contact .mail{display:inline-block; margin-top:1.2rem; color:var(--pale); text-underline-offset:.3em; text-decoration-thickness:1px}
form{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
label{display:grid; gap:.35rem; font-size:.9rem; color:#AFBBD0}
label.full{grid-column:1/-1}
input,textarea,select{font:inherit; font-size:1rem; color:inherit; background:transparent; border:0; border-bottom:1px solid rgba(217,228,244,.35); padding:.55rem 0; border-radius:0}
input:focus,textarea:focus,select:focus{outline:none; border-bottom-color:var(--pale)}
select option{color:#1A202B}
textarea{resize:vertical; min-height:5.5rem}
.home input{border-bottom-color:var(--line); color:var(--ink)}
.home input:focus{border-bottom-color:var(--ink)}
.form-end{grid-column:1/-1; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.6rem}
.contact .note{color:#AFBBD0}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} form{grid-template-columns:1fr} }

footer{background:#141922; color:#8C98AD; padding:2.2rem 0; font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap}
footer .brand{width:96px; color:#8C98AD}

@media (prefers-reduced-motion:reduce){ .hero .emblem{animation:none} html{scroll-behavior:auto} }
/* ---------- shared header used on inner pages ---------- */
.page-head{background:var(--navy); color:var(--mist); position:relative; overflow:hidden}
.page-head .bar a, .page-head .bar{color:var(--pale)}
.page-head .title{padding:7rem 0 3.2rem; position:relative}
.page-head h1{font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,5vw,4rem); line-height:1.05; margin:0 0 .8rem}
.page-head p{margin:0; color:#C3CEDF; max-width:34rem}
.page-head .emblem{position:absolute; right:-4vw; top:-18%; width:min(34vh,300px); aspect-ratio:186.9/251.1; color:var(--pale); opacity:.18}
.page-head .emblem svg{width:100%; height:100%; display:block}
header.static{position:static}

/* ---------- cart pill ---------- */
.cart-btn{position:relative}
.cart-count{display:inline-block; min-width:1.35rem; margin-left:.45rem; padding:0 .3rem; border-radius:999px; background:var(--pale); color:var(--navy); font-size:.8rem; line-height:1.35rem; text-align:center}
.toast{visibility:hidden; position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%, 140%); background:var(--navy); color:var(--mist); padding:.9rem 1.4rem; border-radius:999px; font-size:.95rem; z-index:20; transition:transform .35s ease; box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.toast.show{visibility:visible; transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ .toast{transition:none} }

/* ---------- bottle artwork ---------- */
.stage{background:var(--band); border-radius:6px; display:grid; place-items:center; overflow:hidden; position:relative}
.stage > svg{display:block; width:auto; height:72%}
.stage.tall{aspect-ratio:4/5}
.stage.square{aspect-ratio:1/1}

/* ---------- shop ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.6rem; padding:2.6rem 0 2rem}
.chip{font:inherit; font-size:.92rem; letter-spacing:.02em; padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--mist)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem 1.8rem; padding-bottom:6rem}
.card{margin:0}
.card a{text-decoration:none; display:block}
.card .stage{transition:box-shadow .25s}
.card a:hover .stage{box-shadow:0 26px 50px -28px rgba(26,32,43,.55)}
.card h3{font-weight:400; font-size:1.1rem; margin:1rem 0 .2rem}
.card .notes{color:var(--muted); font-size:.95rem; margin:0}
.card .price{margin:.5rem 0 0; font-size:.95rem}
.card .price s{color:var(--muted); text-decoration:none}
@media (max-width:820px){ .grid{grid-template-columns:1fr 1fr; gap:1.6rem} }
@media (max-width:460px){ .grid{grid-template-columns:1fr} }

/* ---------- product ---------- */
.product-page{padding:3.5rem 0 6rem}
.crumbs{font-size:.9rem; color:var(--muted); padding-bottom:1.6rem}
.crumbs a{text-decoration:none; border-bottom:1px solid var(--line)}
.pdp{display:grid; grid-template-columns:1.05fr 1fr; gap:4rem}
.gallery{display:grid; gap:.9rem; grid-template-columns:repeat(3,1fr)}
.gallery .main{grid-column:1/-1}
.pdp h1{font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,4vw,3.2rem); line-height:1.08; margin:0 0 .5rem}
.pdp .lede{color:var(--muted); margin:0 0 2rem; max-width:34rem}
.pyramid{display:grid; gap:.9rem; margin:0 0 2.2rem; padding:0; list-style:none}
.pyramid li{display:grid; grid-template-columns:6.5rem 1fr; gap:1rem; align-items:baseline; border-top:1px solid var(--line); padding-top:.75rem}
.pyramid span{color:var(--muted); font-size:.9rem}
.sizes{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-bottom:1.6rem}
.size{display:flex; justify-content:space-between; gap:1rem; align-items:center; border:1px solid var(--line); border-radius:4px; padding:.85rem 1rem; cursor:pointer; background:transparent; color:inherit; font:inherit; text-align:left}
.size[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.size b{font-weight:400}
.size span{color:var(--muted); font-size:.92rem}
.buy{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-bottom:1.2rem}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px}
.qty button{font:inherit; font-size:1.1rem; background:none; border:0; color:inherit; width:2.4rem; height:2.7rem; cursor:pointer}
.qty output{min-width:1.6rem; text-align:center}
.buy .btn{color:var(--mist); background:var(--navy); border-color:var(--navy)}
.buy .btn:hover{background:var(--navy-2)}
.ship{color:var(--muted); font-size:.95rem; margin:0 0 2rem}
details{border-top:1px solid var(--line); padding:.9rem 0}
details summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--muted)}
details[open] summary::after{content:"\2013"}
details p{color:var(--muted); margin:.8rem 0 0; max-width:34rem}
.related{padding-top:4.5rem}
.related h2{font-family:var(--serif); font-weight:300; font-size:2rem; margin:0 0 1.8rem}
.related .grid{padding-bottom:0}
@media (max-width:900px){ .pdp{grid-template-columns:1fr; gap:2.5rem} .related .grid{grid-template-columns:1fr 1fr} }