/* ============================================================
   LuxeScent UK
   ------------------------------------------------------------
   Warm white ground, faded-black type, one gradient stage that
   takes the colour of whichever fragrance is showing.
   Display face is Antonio — the condensed cut on the LUXE
   velvet pouch and the brand's scent cards.
   Signature shapes: the arch (dome-topped cards and image
   frames) and giant vertical display type.
   Re-skin the whole site from the :root block below.
   ============================================================ */

:root{
  /* ── colour ─────────────────────────────────────────────── */
  --paper:   #F7F5F0;   /* page ground */
  --paper-2: #FFFFFF;   /* cards */
  --sand:    #EFE9DC;   /* alternating sections */
  --ink:     #141312;   /* faded black — primary type, buttons, ticker, footer */
  --ink-dp:  #000000;
  --ink-md:  #5E5A55;   /* secondary type */
  --ink-lt:  #9C968D;   /* captions */
  --rule:    #DCD5C8;

  /* the hero gradient — JS swaps these per fragrance */
  --g1: #C8D4E4;
  --g2: #5D7BA6;
  --tint: #3D5A8C;

  /* ── type ───────────────────────────────────────────────── */
  --sans:    "Jost", "Futura", "Century Gothic", Helvetica, Arial, sans-serif;
  /* the condensed cut on the LUXE pouch and the scent cards */
  --display: "Antonio", "Oswald", "Arial Narrow", sans-serif;

  /* ── layout ─────────────────────────────────────────────── */
  --wrap: 1360px;
  --gut:  clamp(18px, 4vw, 56px);
  --sec:  clamp(64px, 8vw, 118px);
  --arch: 50% 50% 8px 8px / 46% 46% 8px 8px;   /* the dome */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; overflow-x:clip}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  font-size:clamp(15px,1vw,16px); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit; background:none; border:0}
button{cursor:pointer}
ul,ol{list-style:none; padding:0}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

.sr,.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip:focus{position:fixed; top:12px; left:12px; width:auto; height:auto; clip:auto; background:var(--ink); color:#fff; padding:10px 16px; z-index:999}

/* ── layout ───────────────────────────────────────────────── */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:880px}
.section{padding-block:var(--sec)}
.section--sand{background:var(--sand)}

/* ── type ─────────────────────────────────────────────────── */
.eyebrow{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-md); font-weight:500; margin-bottom:1rem;
}
.h2{
  font-weight:400; font-size:clamp(2.1rem,4.6vw,3.7rem);
  line-height:1.02; letter-spacing:-.02em; text-wrap:balance;
}
.h2 em{font-style:normal; color:var(--ink-lt)}
.lede{color:var(--ink-md); max-width:58ch; margin-top:1rem}

.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 3rem; flex-wrap:wrap; margin-bottom:clamp(28px,3.6vw,48px)}
.sec-head--stack{display:block}
.sec-head--centre{display:block; text-align:center; max-width:64ch; margin-inline:auto}
.sec-head--centre .lede{margin-inline:auto}

/* ── pills & links ────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  border-radius:100px; padding:.72em 1.5em;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  transition:.35s var(--ease); white-space:nowrap;
}
.pill:hover{background:var(--ink-dp); border-color:var(--ink-dp)}
.pill--ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.pill--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.pill--lg{padding:1em 2.1em; font-size:.7rem; letter-spacing:.16em}
.pill--block{width:100%; margin-top:1rem}

.link-u{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid var(--ink); padding-bottom:.4em; transition:.3s var(--ease);
}
.link-u:hover{color:var(--ink-md); border-color:var(--ink-md)}

/* ── media placeholders ───────────────────────────────────── */
.media{position:relative; overflow:hidden; background:var(--sand)}
.media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.media.is-ph::before{content:""; position:absolute; inset:0; background:linear-gradient(150deg,#E6DFD1,#CFC5B2)}
.media.is-ph::after{
  content:attr(data-ph); position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding:1.2rem; color:var(--ink-lt);
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; line-height:2;
}

/* ── ticker ───────────────────────────────────────────────── */
.ticker{background:var(--ink); color:#fff; overflow:hidden; position:relative; z-index:60}
.ticker__row{display:flex; gap:2.2rem; width:max-content; padding:.62rem 0; animation:slideL 46s linear infinite}
.ticker__row span{font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; font-weight:400}
.ticker__row i{font-style:normal; opacity:.45}
@keyframes slideL{to{transform:translateX(-50%)}}

/* ── header ───────────────────────────────────────────────── */
.header{position:sticky; top:0; z-index:50; background:rgba(247,245,240,.86); backdrop-filter:blur(12px); transition:.35s var(--ease)}
.header.is-stuck{background:rgba(247,245,240,.98); box-shadow:0 1px 0 var(--rule)}
.header__inner{display:flex; align-items:center; gap:2rem; padding-inline:var(--gut); min-height:72px; max-width:var(--wrap); margin-inline:auto}
.brand{display:flex; align-items:center; gap:.6rem; flex:0 0 auto}
.brand__logo{height:26px; width:auto}
.brand__name{
  font-family:var(--display); font-weight:400; font-size:1.68rem;
  letter-spacing:.15em; text-transform:uppercase; line-height:1; color:var(--ink);
}
.nav{display:flex; gap:clamp(16px,2.4vw,36px); flex:1; justify-content:center}
.nav a{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  position:relative; padding-block:.4em; color:var(--ink); transition:color .3s var(--ease);
}
.nav a::after{content:""; position:absolute; left:0; bottom:.1em; height:1.5px; width:0; background:var(--ink); transition:width .4s var(--ease)}
.nav a:hover::after,.nav a.is-current::after{width:100%}
.header__right{display:flex; align-items:center; gap:.8rem; flex:0 0 auto}
.bag{position:relative; display:grid; place-content:center; width:38px; height:38px; color:var(--ink)}
.bag__n{
  position:absolute; right:0; bottom:2px; min-width:17px; height:17px; padding:0 4px;
  background:var(--ink); color:#fff; border-radius:100px;
  font-size:.56rem; font-weight:600; display:grid; place-content:center;
}
.burger{display:none; padding:.5rem}
.burger span{display:block; width:20px; height:1.5px; background:var(--ink); margin:5px 0; transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{border-top:1px solid var(--rule); background:var(--paper); padding:1.4rem var(--gut) 1.8rem; display:grid; gap:1.05rem}
.drawer a{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
@media (min-width:1041px){ .drawer{display:none !important} }

/* ══════════ HERO ══════════════════════════════════════════ */
.hero{padding:clamp(10px,1.4vw,20px) clamp(10px,1.4vw,20px) 0}
.hero__card{
  position:relative; overflow:hidden;
  border-radius:clamp(18px,2.4vw,34px);
  background:linear-gradient(158deg, var(--g1) 0%, var(--g2) 62%, var(--g2) 100%);
  transition:background 1.1s var(--ease);
  min-height:clamp(520px,74vh,780px);
  display:grid;
  grid-template-columns:minmax(230px,1.3fr) minmax(0,2fr) minmax(150px,.82fr);
  grid-template-rows:auto 1fr auto;
  padding:clamp(22px,3vw,44px);
  gap:clamp(14px,2vw,28px);
  color:#fff;
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 45% at 50% 8%, rgba(255,255,255,.42), transparent 70%);
}
.hero__kicker{
  grid-column:1/-1; grid-row:1;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.86); text-align:center; position:relative;
}

/* Two lines of display type with the product standing through them —
   the bottle sits right of centre so neither line loses its opening. */
.hero__title{
  grid-column:2; grid-row:2;
  align-self:center; justify-self:center; position:relative; z-index:2;
  display:grid; justify-items:center; row-gap:.02em;
  font-weight:600; letter-spacing:-.035em; line-height:.92;
  font-size:clamp(2rem,5.2vw,4.4rem); color:#fff;
  text-shadow:0 2px 40px rgba(20,19,18,.22);
  padding-block:clamp(16px,3vw,40px);
}
.hero__title em{font-style:normal; color:#fff; display:inline-block}
.hero__title em.is-in{animation:wordIn .8s var(--ease)}
@keyframes wordIn{from{opacity:0; transform:translateY(.28em); filter:blur(8px)} to{opacity:1; transform:none; filter:none}}

.hero__stage{
  position:absolute; left:84%; top:50%; transform:translate(-50%,-50%);
  width:clamp(96px,11.5vw,164px); z-index:3;
  pointer-events:none; overflow:visible;
  filter:drop-shadow(0 26px 44px rgba(20,19,18,.42));
}
.hero__bottle{width:100%; height:auto; display:block; animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}

.hero__left{
  grid-column:1; grid-row:2; align-self:center; position:relative; z-index:4;
  border-left:1.5px solid rgba(255,255,255,.55); padding-left:1.3rem; max-width:38ch;
}
.hero__basedon{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:.85rem;
}
.hero__basedon b{font-weight:500; color:#fff; letter-spacing:.16em}
.hero__line{
  font-size:clamp(1.08rem,1.55vw,1.5rem); font-weight:400;
  color:#fff; line-height:1.35; letter-spacing:-.01em;
}
.hero__noteslabel{
  margin-top:1.3rem; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.hero__notes{
  margin-top:.4rem; font-size:clamp(.88rem,1.02vw,1rem);
  color:rgba(255,255,255,.92); line-height:1.6;
}

.hero__right{
  grid-column:3; grid-row:2; align-self:center; justify-self:end;
  position:relative; z-index:4; display:flex; flex-direction:column; align-items:flex-end; gap:1rem; text-align:right;
}
.hero__dots{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; max-width:170px}
.hero__dots button{width:15px; height:15px; display:grid; place-content:center}
.hero__dots span{width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(255,255,255,.75); transition:.3s var(--ease)}
.hero__dots [aria-current="true"] span{background:#fff; transform:scale(1.15)}
.hero__steps{display:flex; gap:.4rem}
.hero__steps button{
  width:34px; height:34px; border:1px solid rgba(255,255,255,.5); border-radius:50%;
  color:#fff; display:grid; place-content:center; font-size:1rem; line-height:1; transition:.3s var(--ease);
}
.hero__steps button:hover{background:#fff; color:var(--ink)}
.hero__details{color:#fff; border-bottom-color:rgba(255,255,255,.65)}
.hero__details:hover{color:#fff; border-bottom-color:#fff}
.hero__right .pill{background:#fff; color:var(--ink); border-color:#fff}
.hero__right .pill:hover{background:transparent; color:#fff}

.hero__promo{
  grid-column:3; grid-row:1; justify-self:end; align-self:start;
  display:flex; align-items:center; gap:.7rem; position:relative; z-index:4;
}
.hero__promo b{font-size:1.6rem; font-weight:600; letter-spacing:-.03em}
.hero__promo span{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); line-height:1.5}

/* the shelf of arches along the bottom */
.hero__shelfwrap{grid-column:1/-1; grid-row:3; position:relative; z-index:4}
.hero__shelflabel{font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:.7rem}
.hero__shelf{display:flex; gap:clamp(8px,1vw,14px); overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none}
.hero__shelf::-webkit-scrollbar{display:none}
.shelf__item{
  flex:0 0 clamp(80px,8.4vw,108px);
  background:rgba(255,255,255,.9); border-radius:var(--arch);
  padding:.7rem .5rem .8rem; text-align:center; color:var(--ink);
  transition:.35s var(--ease); border:1px solid transparent;
}
.shelf__item:hover{background:#fff; transform:translateY(-3px)}
.shelf__item.is-on{background:#fff; border-color:var(--ink); box-shadow:0 12px 28px -18px rgba(20,19,18,.6)}
.shelf__arch{display:block; width:clamp(28px,3.2vw,40px); margin:0 auto .4rem}
.shelf__name{display:block; font-size:.7rem; font-weight:500; letter-spacing:-.01em; line-height:1.2}
.shelf__price{display:block; font-size:.6rem; color:var(--ink-md); margin-top:.15rem}

/* ══════════ EDITORIAL — vertical type + arches ════════════ */
.editorial{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(48px,7vw,92px) var(--gut) clamp(40px,6vw,80px);
  display:grid; grid-template-columns:auto minmax(220px,1fr) minmax(240px,1.05fr);
  grid-template-rows:auto auto; gap:clamp(16px,2.4vw,40px); align-items:start;
}
.editorial__type{
  grid-column:1; grid-row:1/-1; align-self:stretch;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--display); font-weight:400; letter-spacing:.04em; line-height:1;
  font-size:clamp(1.7rem,4.4vw,4.1rem); color:var(--ink);
  white-space:nowrap; user-select:none; margin-block:.1em;
}
.editorial__arch{
  grid-column:2; grid-row:1/-1; align-self:stretch;
  border-radius:var(--arch); min-height:clamp(360px,52vw,620px);
}
.editorial__product{
  grid-column:3; grid-row:2; border-radius:clamp(14px,1.6vw,22px); aspect-ratio:1.35;
}
.editorial__copy{grid-column:3; grid-row:1}
.editorial__copy p{color:var(--ink-md); margin-top:1rem; max-width:52ch}
.editorial__stats{display:flex; gap:clamp(20px,4vw,54px); margin:1.8rem 0}
.stat b{display:block; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; letter-spacing:-.03em; line-height:1}
.stat span{display:block; margin-top:.3rem; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-lt)}

/* ── name band ────────────────────────────────────────────── */
.band{background:var(--ink); overflow:hidden; padding-block:clamp(12px,1.6vw,20px)}
.band__row{display:flex; gap:clamp(20px,2.6vw,44px); width:max-content; align-items:center; animation:slideL 48s linear infinite}
.band__row span{font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:300; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.55); white-space:nowrap; letter-spacing:-.02em}
.band__row i{font-style:normal; color:rgba(255,255,255,.42); font-size:.7rem}

/* ── split sections ───────────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,84px); align-items:center}
.split--rev .split__media{order:2}
.split__body p{color:var(--ink-md); margin-top:1.1rem; max-width:50ch}
.split__actions{display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; align-items:center; margin-top:1.9rem}
.archframe{border-radius:var(--arch); aspect-ratio:.86}
.archframe--tall{aspect-ratio:.72}

.meter{margin-top:1.8rem; border-top:1px solid var(--rule); padding-top:1.1rem}
.meter__head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.meter__head span{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-lt)}
.meter__head b{font-size:1.3rem; font-weight:500; letter-spacing:-.02em}
.meter__track{height:3px; background:var(--rule); border-radius:3px; margin-top:.6rem; overflow:hidden}
.meter__track span{display:block; height:3px; width:0; background:var(--ink); transition:width 2.2s var(--ease)}
.meter__scale{display:flex; justify-content:space-between; margin-top:.5rem}
.meter__scale i{font-style:normal; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-lt)}

.specs{margin-top:1.7rem; border-top:1px solid var(--rule)}
.specs li{display:flex; justify-content:space-between; gap:1.4rem; padding:.82em 0; border-bottom:1px solid var(--rule); font-size:.84rem}
.specs span{color:var(--ink-lt); letter-spacing:.16em; text-transform:uppercase; font-size:.58rem}
.specs b{font-weight:400; text-align:right}

.ticks{margin-top:1.5rem; display:grid; gap:.7rem}
.ticks li{position:relative; padding-left:1.5rem; font-size:.88rem; color:var(--ink-md)}
.ticks li::before{content:"✦"; position:absolute; left:0; top:0; color:var(--ink-lt); font-size:.7rem}

/* ── scent finder ─────────────────────────────────────────── */
.finder{
  padding-block:var(--sec);
  background:linear-gradient(158deg, var(--g1) 0%, var(--g2) 78%);
  transition:background 1.1s var(--ease); color:#fff;
}
.finder .eyebrow{color:rgba(255,255,255,.82)}
.finder .lede{color:rgba(255,255,255,.86)}
.finder .h2 em{color:rgba(255,255,255,.72)}
.quiz{max-width:760px; margin-inline:auto}
.quiz__progress{height:2px; background:rgba(255,255,255,.3); border-radius:2px; margin-bottom:clamp(24px,3vw,40px); overflow:hidden}
.quiz__progress span{display:block; height:2px; background:#fff; width:0; transition:width .6s var(--ease)}
.quiz__step{font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.8); text-align:center; margin-bottom:.9rem}
.quiz__q{font-size:clamp(1.5rem,3vw,2.3rem); font-weight:400; letter-spacing:-.02em; text-align:center; line-height:1.1}
.quiz__opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.7rem; margin-top:clamp(24px,3vw,38px)}
.quiz__opt{
  background:rgba(255,255,255,.92); color:var(--ink);
  border-radius:18px; padding:1.4rem 1rem; text-align:center;
  display:flex; flex-direction:column; justify-content:center; gap:.3rem; min-height:124px;
  transition:.32s var(--ease);
}
.quiz__opt:hover{background:#fff; transform:translateY(-4px); box-shadow:0 20px 36px -24px rgba(20,19,18,.6)}
.quiz__opt b{font-size:1.15rem; font-weight:500; letter-spacing:-.02em; line-height:1.1}
.quiz__opt span{font-size:.72rem; color:var(--ink-md); line-height:1.5}
.quiz__restart{display:block; margin:1.9rem auto 0; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:.35em}

.result{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,44px); align-items:center;
  background:rgba(255,255,255,.94); color:var(--ink); border-radius:24px; padding:clamp(22px,3vw,40px);
}
.result__arch{
  width:clamp(110px,13vw,160px); padding:1rem .8rem; border-radius:var(--arch);
  background:linear-gradient(170deg, color-mix(in srgb, var(--c) 26%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
}
.result__label{font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-md)}
.result__name{font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.03em; line-height:1; margin-top:.3rem}
.result__insp{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-lt); margin-top:.4rem}
.result__line{margin-top:.9rem; font-size:.95rem}
.result__notes{margin-top:.5rem; font-size:.82rem; color:var(--ink-md); max-width:48ch}
.result__notes b{font-weight:500; color:var(--ink)}
.result__acts{display:flex; flex-wrap:wrap; gap:.8rem 1.3rem; align-items:center; margin-top:1.4rem}

/* ── quotes ───────────────────────────────────────────────── */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(14px,1.8vw,24px)}
.quote{background:var(--paper-2); border-radius:22px; padding:2rem 1.8rem; text-align:center}
.quote blockquote{font-size:1.05rem; line-height:1.5; font-weight:300}
.quote figcaption{margin-top:1.3rem; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-lt)}
.quotes__note{margin-top:1.6rem; font-size:.7rem; color:var(--ink-lt); text-align:center}

/* ── accordion ────────────────────────────────────────────── */
.acc__item{border-bottom:1px solid var(--rule)}
.acc__item:first-child{border-top:1px solid var(--rule)}
.acc__item summary{cursor:pointer; list-style:none; padding:1.4em 3rem 1.4em 0; position:relative; font-size:1rem; font-weight:400}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary::after{content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-size:1.2rem; color:var(--ink-md)}
.acc__item[open] summary::after{content:"–"}
.acc__body{padding-bottom:1.6em; color:var(--ink-md); max-width:64ch}

/* ── newsletter ───────────────────────────────────────────── */
.cta{padding-block:var(--sec)}
.cta__inner{text-align:center}
.cta__inner .lede{margin-inline:auto}
.signup{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:2rem}
.signup input{
  flex:1 1 280px; max-width:340px; background:var(--paper-2);
  border:1px solid var(--rule); border-radius:100px; padding:1em 1.4em;
  font-size:.9rem; text-align:center; transition:.3s var(--ease);
}
.signup input::placeholder{color:var(--ink-lt)}
.signup input:focus{outline:none; border-color:var(--ink)}
.signup__msg{margin-top:1rem; font-size:.8rem; color:var(--ink); min-height:1.2em}
.signup__note{margin-top:.35rem; font-size:.68rem; color:var(--ink-lt)}

/* ── footer ───────────────────────────────────────────────── */
.footer{background:var(--ink); color:#fff; padding-top:clamp(48px,6vw,76px); overflow:hidden}
.footer__grid{display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:clamp(26px,3.5vw,48px)}
.footer__brand .brand__name{color:#fff; font-size:1.5rem}
.footer__brand p{color:rgba(255,255,255,.62); max-width:34ch; font-size:.84rem; margin-top:.7rem}
.footer__col{display:flex; flex-direction:column; gap:.7rem}
.footer__col h4{font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:500; margin-bottom:.2rem}
.footer__col a{color:rgba(255,255,255,.78); font-size:.84rem; transition:color .3s var(--ease)}
.footer__col a:hover{color:#fff}
.footer__mark{
  margin-top:clamp(30px,4vw,54px); text-align:center;
  font-family:var(--display); font-size:clamp(3rem,13.2vw,13rem);
  font-weight:400; letter-spacing:.05em; line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.26); user-select:none;
}
.footer__base{margin-top:clamp(20px,3vw,36px); padding-block:1.6rem; border-top:1px solid rgba(255,255,255,.18); display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between}
.footer__base p{font-size:.7rem; color:rgba(255,255,255,.5)}
.credit{color:rgba(255,255,255,.8); border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:.1em; transition:.3s var(--ease)}
.credit:hover{color:#fff; border-bottom-color:#fff}
.footer__legal{max-width:62ch}

/* ── quick view ───────────────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:var(--gut)}
.modal__scrim{position:absolute; inset:0; background:rgba(20,19,18,.5); backdrop-filter:blur(4px); animation:fade .3s var(--ease)}
.modal__panel{
  position:relative; background:var(--paper); border-radius:26px;
  width:min(760px,100%); max-height:86vh; overflow-y:auto;
  padding:clamp(24px,3.4vw,48px); animation:rise .4s var(--ease);
}
.modal__x{position:absolute; top:.9rem; right:1.3rem; font-size:1.6rem; line-height:1; color:var(--ink-md)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(14px)}}
.qv{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,42px); align-items:start}
.qv__arch{
  width:clamp(120px,14vw,164px); padding:1rem .8rem; border-radius:var(--arch);
  background:linear-gradient(170deg, color-mix(in srgb, var(--c) 26%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
}
.qv__name{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:500; letter-spacing:-.03em; line-height:1}
.qv__insp{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-lt); margin-top:.4rem}
.qv__line{margin-top:.85rem; font-size:.95rem}
.qv__block{margin-top:1.3rem}
.qv__label{font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-lt); margin-bottom:.4rem}
.qv__notes{font-size:.86rem; color:var(--ink-md); line-height:1.7}
.qv__swatches{display:flex; gap:1.3rem}
.qv__sw{display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--ink-md)}
.qv__dot{width:20px; height:20px; border-radius:50%; border:1px solid var(--rule)}
.qv__dot--clear{background:linear-gradient(140deg,#fff,#DDE3EA)}
.qv__dot--dark{background:linear-gradient(140deg,#3B4763,#1B2233)}
.qv__pair{border-top:1px solid var(--rule); margin-top:1.4rem; padding-top:1.1rem}
.qv__pair b{font-size:1.25rem; font-weight:500; letter-spacing:-.02em; display:block; margin-bottom:.2rem}
.qv__acts{display:flex; flex-wrap:wrap; gap:.8rem 1.3rem; align-items:center; margin-top:1.6rem}

/* ── reveal ───────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ══════════ RESPONSIVE ════════════════════════════════════ */
@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
  .header__inner{justify-content:space-between; min-height:62px}
}
@media (max-width:900px){
  .hero__card{
    grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(6,auto);
    min-height:0; gap:clamp(16px,3vw,26px);
  }
  .hero__shelfwrap,.hero__left,.hero__right,.hero__title{min-width:0}
  .hero__kicker{grid-row:1; text-align:left}
  .hero__title{grid-column:1; grid-row:3; font-size:clamp(2rem,8.6vw,3.2rem); justify-items:start; padding-block:clamp(14px,4vw,28px)}
  .hero__stage{left:auto; right:0; top:50%; transform:translateY(-50%); width:clamp(84px,21vw,132px)}
  .hero__left{grid-column:1; grid-row:4; max-width:none}
  .hero__line{font-size:clamp(1.02rem,4.2vw,1.25rem)}
  .hero__notes{font-size:clamp(.85rem,3.4vw,.95rem)}
  .hero__right{grid-column:1; grid-row:5; align-items:flex-start; text-align:left; justify-self:start}
  .hero__dots{justify-content:flex-start; max-width:none}
  .hero__promo{grid-column:1; grid-row:2; justify-self:start}
  .hero__shelfwrap{grid-row:6}

  .editorial{grid-template-columns:auto minmax(0,1fr); padding-top:clamp(40px,7vw,70px)}
  .editorial__type{font-size:clamp(2.2rem,9vw,4.4rem); grid-row:1/-1}
  .editorial__arch{grid-column:2; grid-row:1; min-height:clamp(320px,72vw,520px)}
  .editorial__product{display:none}
  .editorial__copy{grid-column:2; grid-row:2}

  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .footer__grid{grid-template-columns:1fr}
  .editorial{grid-template-columns:minmax(0,1fr)}
  .editorial__type{writing-mode:horizontal-tb; transform:none; font-size:clamp(2rem,10vw,3rem); line-height:.95; grid-row:1; grid-column:1; white-space:normal}
  .editorial__arch{grid-column:1; grid-row:2; min-height:clamp(320px,90vw,460px)}
  .editorial__copy{grid-column:1; grid-row:3}
  .qv,.result{grid-template-columns:1fr; text-align:center; justify-items:center}
  .qv__acts,.result__acts,.qv__swatches{justify-content:center}
  .result__notes,.qv__notes{margin-inline:auto}
  .pill--lg{width:100%}
  .split__actions .pill--lg{width:auto}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}