/* SEN, conversion landing page. Night leads, Paper gives room, Vermillion stays small. Shot on film. */

@font-face { font-family: "Figtree"; src: url("../media/fonts/Figtree-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../media/fonts/Figtree-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --night: #141210;
  --paper: #F5F1E8;
  --vermillion: #B32C15;
  --vermillion-hi: #C9351C;
  --on-night-soft: rgba(245, 241, 232, 0.76);
  --on-paper-soft: rgba(20, 18, 16, 0.68);
  --hair-night: rgba(245, 241, 232, 0.16);
  --hair-paper: rgba(20, 18, 16, 0.14);

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: clamp(2.9rem, 6.8vw, 7.25rem);
  --display-xl: clamp(3.75rem, 7.5vw, 8.25rem);
  --heading: clamp(2rem, 3.5vw, 3.25rem);
  --step: clamp(2rem, 3.4vw, 3.25rem);
  --sub: clamp(1.125rem, 0.9vw + 0.85rem, 1.4rem);
  --body: clamp(1.0625rem, 0.3vw + 0.98rem, 1.15rem);
  --small: 0.9375rem;
  --label: 0.7rem;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --nav-h: 4rem;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --lift: 0 -28px 56px rgba(20, 18, 16, 0.38);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--vermillion); color: var(--paper); }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd, ol, ul, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible + .scent__photo {
  outline: 2px solid var(--vermillion); outline-offset: 4px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.6rem 1rem; background: var(--paper); color: var(--night); }
.skip:focus { top: 1rem; }

/* Type */
.display { font-size: var(--display); font-weight: 500; line-height: 0.98; letter-spacing: -0.034em; text-wrap: balance; }
.heading { font-size: var(--heading); font-weight: 500; line-height: 1.05; letter-spacing: -0.024em; text-wrap: balance; }
.label { font-size: var(--label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vermillion); }
p { text-wrap: pretty; }

/* Buttons: one label everywhere, no price */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.5rem; padding: 0 2rem;
  background: var(--vermillion); color: var(--paper);
  font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.01em; white-space: nowrap;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease);
}
.button:active { transform: translateY(1px) scale(0.99); }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--vermillion-hi); } }
.button--full { width: 100%; }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color 240ms var(--ease), opacity 360ms var(--ease);
}
body.at-peak .nav:not(:focus-within) { opacity: 0; pointer-events: none; }
.nav.is-solid { background: var(--night); }
.nav.is-paper { background: var(--paper); color: var(--night); box-shadow: 0 1px 0 var(--hair-paper); }
/* The logo file carries 17.6% of empty margin on its left; pull it back so the S sits on the text margin. */
.nav__mark { display: block; position: relative; margin-left: calc(5.25rem * -0.176); transition: opacity 300ms var(--ease); }
body.at-close .nav__mark { opacity: 0; pointer-events: none; }
.nav__mark img { width: 5.25rem; height: auto; transition: opacity 200ms var(--ease); }
.nav__logo--night { position: absolute; inset: 0; opacity: 0; }
.nav.is-paper .nav__logo--paper { opacity: 0; }
.nav.is-paper .nav__logo--night { opacity: 1; }
.nav__cta { font-size: var(--small); font-weight: 500; padding: 0.5rem 0; border-bottom: 1px solid currentColor; transition: opacity 200ms var(--ease); }
@media (max-width: 760px) { body.bar-on .nav__cta { opacity: 0; pointer-events: none; } }

/* The burn: a hairline with its ember, burning down as the page is read. */
.burn { opacity: 0; transition: opacity 400ms var(--ease); position: fixed; z-index: 30; right: max(0.9rem, calc(var(--gutter) * 0.4)); top: calc(var(--nav-h) + 1.5rem); bottom: 6rem; width: 9px; pointer-events: none; }
.burn__stick { position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(138, 129, 120, 0.7); }
.burn__ash { position: absolute; left: 4px; top: 0; width: 1px; height: 0; background: repeating-linear-gradient(to bottom, rgba(138,129,120,0.55) 0 2px, transparent 2px 6px); }
.burn__ember { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--vermillion); box-shadow: 0 0 0 3px rgba(179, 44, 21, 0.18); transform: translateY(-50%); }
.burn.is-out .burn__ember { background: rgba(138,129,120,0.7); transition: background-color 1.2s var(--ease); }
.burn.is-on { opacity: 1; }
@media (max-width: 760px) { .burn { display: none; } }

/* Shared photo frame: the film is the ground, nothing laid over it but words. */
.frame { position: absolute; inset: 0; overflow: clip; }
.frame img, .frame picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame img { object-fit: cover; }

/* 1 + 2. The flame holds while the incense slides up over it. */
.lead { position: relative; }
.hero { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 34rem; display: grid; overflow: clip; isolation: isolate; }
.hero__art { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: 50% 50%; transform-origin: 52% 46%; will-change: transform; }
.hero__glow {
  position: absolute; left: 0; top: 0; width: 15rem; height: 15rem; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 196, 120, 0.34), rgba(214, 118, 52, 0.12) 50%, transparent 100%);
}
.hero__glow.is-placed { opacity: 0.75; animation: breathe 5.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.55; } 45% { opacity: 0.9; } 70% { opacity: 0.68; } }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,18,16,0.55) 0%, rgba(20,18,16,0) 30%); }
.hero__copy {
  align-self: center; width: min(40rem, 100%);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 4rem;
  display: grid; gap: 1.5rem;
}
.hero__lede { font-size: var(--sub); line-height: 1.45; color: var(--on-night-soft); max-width: 28ch; }
.hero__buy { display: grid; gap: 1rem; justify-items: start; margin-top: 0.75rem; }
.hero__assure { font-size: var(--small); color: var(--on-night-soft); }

.incense {
  position: relative; z-index: 1; min-height: 100svh;
  background: var(--paper); color: var(--night); box-shadow: var(--lift);
  padding: var(--section) var(--gutter);
  display: grid; justify-items: center; align-content: center; gap: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.incense__head { display: grid; gap: 1.1rem; justify-items: center; }
.incense__head .heading { max-width: 14ch; }
.incense__stage { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.incense__plate { width: clamp(16rem, 28vw, 25rem); aspect-ratio: 4 / 5; overflow: clip; background: #c9c3b8; }
.incense__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 86%; transform-origin: 50% 80%; }
.incense__tag { font-size: var(--label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-paper-soft); }
.incense__tag--left { justify-self: end; }
.incense__tag--right { justify-self: start; }
.incense__body { font-size: var(--sub); line-height: 1.45; color: var(--on-paper-soft); max-width: 26ch; }

/* 3. The problem: the one cold picture */
/* The page holds on the glowing phone while the lines come in, then moves on. */
.problem { position: relative; height: 200svh; background: #2b2e31; }
.problem__stage { position: sticky; top: 0; height: 100svh; min-height: 34rem; display: grid; overflow: clip; isolation: isolate; }
.js-peak .problem__head .w, .js-peak .problem__line { opacity: 0.14; }
.problem__art { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.problem__art picture, .problem__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.problem__art img { object-fit: cover; object-position: 50% 50%; will-change: transform; }
.problem__copy { align-self: center; display: grid; gap: 1.4rem; max-width: 34rem; padding: var(--section) var(--gutter); }
.problem__copy p { color: rgba(236, 238, 238, 0.88); font-size: var(--sub); line-height: 1.45; max-width: 30ch; }
.problem__copy .problem__turn { color: var(--paper); }

/* 4. The ritual: three steps that settle over one another */
.ritual { position: relative; background: var(--night); }
.step { position: sticky; top: 0; height: 100svh; min-height: 36rem; display: grid; isolation: isolate; }
.step + .step { box-shadow: var(--lift); }
.step__photo { position: relative; overflow: clip; }
.step__photo img, .step__photo picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.step__photo img { object-fit: cover; will-change: transform; }
.step__copy { display: grid; gap: 1rem; align-content: center; max-width: 31rem; }
.step__copy h3 { font-size: var(--step); font-weight: 500; line-height: 1.05; letter-spacing: -0.024em; text-wrap: balance; }
.step__copy p { font-size: var(--sub); line-height: 1.45; }
.step__copy .label { margin-bottom: 0.35rem; }
.step__shade { position: absolute; inset: 0; z-index: 5; background: var(--night); opacity: 0; pointer-events: none; }

.step--light { z-index: 1; background: var(--paper); color: var(--night); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.step--light .step__copy { padding: var(--section) var(--gutter); justify-self: end; }
.step--light .step__copy p { color: var(--on-paper-soft); }
.step--light .step__photo img { object-position: 50% 72%; }

.step--stay { z-index: 2; background: #2a2119; color: var(--paper); }
.step--stay .step__photo { position: absolute; inset: 0; z-index: -1; }
.step--stay .step__photo img { object-position: 50% 50%; }
.step--stay .step__copy { padding: var(--section) var(--gutter); }
.step--stay .step__copy p { color: rgba(245, 241, 232, 0.9); }
/* A faint local shade under the words only, where the haze is brightest. */
.step--stay .step__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 18% 42%, rgba(20,18,16,0.32), rgba(20,18,16,0) 70%); }
/* The photo's own smoke, alive: drawn over the clean plate, rising past the card's top edge. */
.step--stay { --smoke-ext: 30svh; }
.step--stay .step__copy { position: relative; z-index: 1; }
.step__smoke { position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; height: calc(100% + var(--smoke-ext)); pointer-events: none; }
/* Framed a touch tighter around the burning tip, so the photograph's own upper plume is there to cross the edge. */
.step--stay .step__photo picture { transform: scale(1.18); transform-origin: 61.5% 86%; }

/* The third step mirrors the first: the ash on the left, the words on Paper at the right. */
.step--evening { z-index: 3; background: var(--paper); color: var(--night); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.step--evening .step__photo img { object-position: 50% 38%; }
.step--evening .step__copy { padding: var(--section) var(--gutter); justify-self: start; }
.step--evening .step__copy p { color: var(--on-paper-soft); }

/* 5. The peak: one line, alone, on the low red sun */
.peak { position: relative; height: 210svh; background: #26231f; }
.peak__stage { position: sticky; top: 0; height: 100svh; min-height: 34rem; overflow: clip; isolation: isolate; display: grid; justify-items: center; align-content: start; }
.peak__art { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.peak__art picture, .peak__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.peak__art img { object-fit: cover; object-position: 50% 50%; }
/* Framed from the top so the ember sits low; the frame eases down a little as the line fills. */
.peak__art picture { transform: scale(1.15); transform-origin: 50% 0%; will-change: transform; }
.peak__glow {
  position: absolute; left: 50%; top: 70%; width: 12rem; height: 12rem; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0.6;
  background: radial-gradient(closest-side, rgba(255, 128, 92, 0.42), rgba(196, 64, 34, 0.14) 52%, transparent 100%);
}
.peak__line {
  margin-top: max(calc(var(--nav-h) + 2rem), 12svh); padding: 0 var(--gutter);
  max-width: 15ch; text-align: center;
  font-size: var(--display-xl); font-weight: 500; line-height: 0.98; letter-spacing: -0.036em; text-wrap: balance;
}
.peak__line .w { opacity: 1; }
.js-peak .peak__line .w { opacity: 0.14; }

/* 6. Why it works: type alone on Paper */
.why { background: var(--paper); color: var(--night); padding: var(--section) var(--gutter); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; }
.why__label { padding-top: 1.4rem; }
.why__list { border-top: 1px solid var(--hair-paper); }
.why__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.25rem 2.5rem; padding: 1.6rem 0 1.9rem; border-bottom: 1px solid var(--hair-paper); align-items: baseline; }
.why__item dt { font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.why__item dd { margin: 0; color: var(--on-paper-soft); }

/* 7. The offer: choose a scent by its raw material */
.offer {
  background: var(--paper); color: var(--night);
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(2rem, 5vw, 5rem);
  grid-template-areas: "scents head" "scents buy"; grid-template-rows: auto 1fr;
}
.offer__head { grid-area: head; display: grid; gap: 1rem; align-content: start; padding-top: 0.5rem; }
.offer__head .label { color: var(--on-paper-soft); }
.offer__chosen { font-size: var(--sub); color: var(--on-paper-soft); }
.scents { grid-area: scents; }
.scents__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.scent { position: relative; display: grid; gap: 0.9rem; align-content: start; cursor: pointer; }
.scent input { position: absolute; opacity: 0; pointer-events: none; }
.scent__photo { position: relative; display: block; aspect-ratio: 3 / 4.2; overflow: clip; background: #b9b2a6; }
.scent__photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 200ms var(--ease); }
.scent__photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms var(--ease); }
.scent--sugi .scent__photo img { object-position: 50% 84%; }
.scent--kyara .scent__photo img { object-position: 60% 72%; }
.scent input:not(:checked) + .scent__photo img { opacity: 0.72; }
.scent input:checked + .scent__photo::after { box-shadow: inset 0 0 0 1px var(--night); }
@media (hover: hover) and (pointer: fine) { .scent:hover .scent__photo img { opacity: 1; } }
.scent__text { display: grid; gap: 0.25rem; }
.scent__name { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.6rem; }
.scent__name::before { content: ""; width: 0.55rem; height: 0.55rem; border: 1px solid var(--night); flex: none; }
.scent input:checked ~ .scent__text .scent__name::before { background: var(--night); border-color: var(--night); }
.scent__kind { font-size: var(--label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-paper-soft); }
.scent__note { font-size: var(--small); line-height: 1.5; color: var(--on-paper-soft); max-width: 34ch; margin-top: 0.35rem; }

.offer__buy { grid-area: buy; display: grid; gap: 1.4rem; align-content: start; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; font-size: var(--sub); }
.offer__amount { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.offer__ship { flex-basis: 100%; font-size: var(--small); color: var(--on-paper-soft); }
.facts { display: grid; border-top: 1px solid var(--hair-paper); }
.facts li { padding: 0.85rem 0 0.85rem 1.4rem; border-bottom: 1px solid var(--hair-paper); font-size: var(--small); position: relative; }
.facts li::before { content: ""; position: absolute; left: 0.2rem; top: calc(0.85rem + 0.8em); width: 0.4rem; height: 1px; background: var(--night); }

/* 8. Questions */
.faq { background: var(--paper); color: var(--night); padding: clamp(3rem, 6vw, 5rem) var(--gutter) var(--section); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; border-top: 1px solid var(--hair-paper); }
.faq__list { border-top: 1px solid var(--hair-paper); }
.faq details { border-bottom: 1px solid var(--hair-paper); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; font-weight: 500; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.75rem; height: 1px; background: var(--night); }
.faq summary::before { content: ""; position: absolute; right: calc(0.4rem + 0.375rem); top: calc(50% - 0.375rem); width: 1px; height: 0.75rem; background: var(--night); transition: transform 200ms var(--ease); }
.faq details[open] summary::before { transform: scaleY(0); }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--on-paper-soft); max-width: 44rem; }

/* 9. The close: the wordmark over the evening */
/* The close and the footer share the last screen, so the wordmark is never cut off. */
.close { position: relative; min-height: calc(100svh - var(--foot-h, 7.5rem)); display: grid; overflow: clip; isolation: isolate; background: #3a322a; }
.close__art { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.close__art picture, .close__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.close__art img { object-fit: cover; object-position: 50% 62%; will-change: transform; }
.close__copy { align-self: start; justify-self: center; display: grid; justify-items: center; text-align: center; gap: 1.6rem; padding: max(calc(var(--nav-h) + 3rem), 17svh) var(--gutter) 3rem; }
.close__mark { width: clamp(13rem, 40vw, 36rem); height: auto; color: var(--paper); margin-bottom: clamp(0.8rem, 3vw, 2.4rem); }
.close__line { font-size: var(--heading); font-weight: 500; line-height: 1.05; letter-spacing: -0.024em; }

/* Footer */
.foot { padding: 2.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); display: grid; gap: 1.2rem; font-size: 0.875rem; color: var(--on-night-soft); border-top: 1px solid var(--hair-night); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.foot a { padding: 0.35rem 0; }
@media (hover: hover) { .foot a:hover { color: var(--paper); } }
@media (min-width: 761px) { .foot { grid-template-columns: 1fr auto; align-items: center; padding-bottom: 2.5rem; } }

/* Phone purchase bar */
.bar { display: none; }
@media (max-width: 760px) {
  .bar {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: center;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(20, 18, 16, 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--hair-night);
    transform: translateY(110%); transition: transform 280ms var(--ease);
  }
  .bar.is-on { transform: none; }
  .bar__burn { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(245, 241, 232, 0.28); }
  .bar__burn span { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; translate: -50% -50%; background: var(--vermillion); }
  .bar__burn::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: var(--burn, 0%); background: repeating-linear-gradient(90deg, rgba(245,241,232,0.18) 0 2px, transparent 2px 6px); }
  .bar__pick { display: flex; border: 1px solid var(--hair-night); }
  .bar__pick button { font: inherit; border: 0; background: transparent; min-height: 3rem; padding: 0 0.9rem; font-size: 0.9375rem; color: var(--on-night-soft); cursor: pointer; }
  .bar__pick button[aria-pressed="true"] { background: var(--paper); color: var(--night); font-weight: 500; }
  .bar__buy { display: flex; align-items: center; justify-content: center; min-height: 3rem; background: var(--vermillion); color: var(--paper); font-weight: 500; white-space: nowrap; }
}

/* Film grain on the photographs only: fine, even, fixed to the frame while the image moves beneath. */
.hero__art::before, .incense__plate::before, .problem__art::before, .step__photo::before, .peak__art::before, .scent__photo::before, .close__art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.incense__plate { position: relative; }

/* The opening words rise once, on first paint, with no wait for scripts. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise 900ms var(--ease) both; }
  .hero__copy > :nth-child(2) { animation-delay: 80ms; }
  .hero__copy > :nth-child(3) { animation-delay: 160ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* Entrance state is applied by JS only, so the page reads fine without it. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .hero__photo img { object-position: 50% 50%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(20,18,16,0.5) 0%, rgba(20,18,16,0) 34%, rgba(20,18,16,0) 68%, rgba(20,18,16,0.62) 100%); }
  .hero__copy { align-self: stretch; grid-template-rows: auto auto 1fr auto; padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 1.5rem; gap: 1rem; }
  .hero__lede { font-size: 1.0625rem; max-width: 30ch; }
  .hero__buy { grid-row: 4; justify-items: stretch; }
  .hero__buy .button { width: 100%; }
  .hero__assure { font-size: 0.875rem; text-align: center; }

  /* The phone bar's button is the one Vermillion moment on these screens, so labels go quiet. */
  .label { color: var(--on-paper-soft); }

  .incense { min-height: 0; padding-top: 4.5rem; padding-bottom: 4rem; gap: 2rem; }
  .incense__stage { grid-template-columns: 1fr; gap: 0.6rem; }
  .incense__plate { grid-row: 1; width: min(100%, 22rem); justify-self: center; margin-bottom: 0.9rem; }
  .incense__tag--left, .incense__tag--right { justify-self: center; }

  .problem__art img { object-position: 50% 50%; }
  .problem__copy { align-self: start; padding-top: calc(var(--nav-h) + 2.5rem); }
  .problem__copy p { font-size: 1.0625rem; }

  .step { min-height: 0; }
  .step--light { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .step--light .step__copy { justify-self: start; padding: calc(var(--nav-h) + 1.75rem) var(--gutter) 1.75rem; }
  .step--light .step__photo img { object-position: 50% 74%; }
  .step__copy h3 { font-size: 2rem; }
  .step__copy p { font-size: 1.0625rem; }
  .step--stay .step__copy { align-self: start; padding: calc(var(--nav-h) + 1.75rem) var(--gutter) 2rem; max-width: var(--smoke-copy, 22rem); }
  .step--stay .step__photo img { object-position: 0% 50%; }
  /* The plume rises to the right of the words, as on desktop. */
  .step--stay .step__photo picture { transform: scale(var(--smoke-zoom, 1)); transform-origin: 0% 92%; }
  .step--stay .step__photo::after { background: radial-gradient(ellipse 80% 40% at 30% 18%, rgba(20,18,16,0.34), rgba(20,18,16,0) 75%); }
  .step--stay { --smoke-ext: 24svh; }
  .step--evening { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .step--evening .step__copy { grid-row: 1; padding: calc(var(--nav-h) + 1.75rem) var(--gutter) 1.75rem; }
  .step--evening .step__photo { grid-row: 2; }
  .step--evening .step__photo img { object-position: 50% 36%; }

  .peak { height: 190svh; }
  .peak__line { max-width: 9.5ch; margin-top: 9svh; }
  .peak__art picture { transform: scale(1.36); }

  .why { grid-template-columns: 1fr; gap: 1.25rem; }
  .why__label { padding-top: 0; }
  .why__item { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.4rem 0 1.5rem; }

  .offer { grid-template-columns: 1fr; grid-template-areas: "head" "scents" "buy"; grid-template-rows: none; padding-left: 0; padding-right: 0; }
  .why + .offer { padding-top: 1.75rem; }
  .offer__head, .offer__buy { padding-left: var(--gutter); padding-right: var(--gutter); }
  .offer__head { padding-top: 0; padding-bottom: 1.25rem; gap: 0.75rem; }
  /* The cards show the choice; the line stays for screen readers. */
  .offer__chosen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .scents__row { padding: 0 var(--gutter); gap: 0.75rem; }
  .scent { gap: 0.75rem; }
  /* The hero button lands here: scents, price and the buy button share the screen. */
  @supports (height: 1svh) {
    .scent__photo { aspect-ratio: auto; height: clamp(6rem, calc(100svh - 34.25rem), 14rem); }
  }
  .scent__name { font-size: 1.25rem; line-height: 1.2; }
  .scent__note { font-size: 0.875rem; }
  .offer__buy { margin-top: 1.25rem; gap: 1rem; }

  .faq { grid-template-columns: 1fr; }

  .close__copy { padding-top: calc(var(--nav-h) + 12svh); gap: 1.25rem; }
  .foot { gap: 0.9rem; padding-top: 2rem; font-size: 0.8125rem; }
  .foot nav { gap: 0.25rem 1.25rem; }
  .close__mark { width: 74vw; }
  .close__line { font-size: 1.75rem; }
}

/* Motion off: every composition stays, nothing travels. */
@media (prefers-reduced-motion: reduce) {
  .hero__glow.is-placed { animation: none; opacity: 0.7; }
  .peak, .problem { height: auto; }
  .peak__stage, .problem__stage { position: relative; }
}