/* ============================================================
   ALIISS — layout.css
   Section-level composition for home + subpages
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--text-light);
  background: var(--obsidian);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--obsidian);
}
.hero__bg img,
.hero__bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center; /* keep the bottle in frame across breakpoints */
  transform: scale(1.06);
  filter: brightness(0.6) contrast(1.1) saturate(1.1);
}
.hero__bg-video {
  position: absolute;
  inset: 0;
  display: block;
}
.hero__bg-video--mobile { display: none; }

@media (max-width: 720px) {
  .hero__bg img,
  .hero__bg video {
    object-position: center center;
    transform: scale(1.02);
  }
  .hero__bg-video--desktop { display: none; }
  .hero__bg-video--mobile  { display: block; }
}

/* Reduced-motion: pause videos via poster fallback */
@media (prefers-reduced-motion: reduce) {
  .hero__bg-video { display: none; }
  .hero__bg::after {
    content: "";
    position: absolute; inset: 0;
    background: url("https://res.cloudinary.com/dc6vjbzir/image/upload/f_auto,q_auto/aliiss/video/hero-desktop") center/cover no-repeat;
    filter: brightness(0.6) contrast(1.1) saturate(1.1);
  }
  @media (max-width: 720px) {
    .hero__bg::after { background-image: url("https://res.cloudinary.com/dc6vjbzir/image/upload/f_auto,q_auto/aliiss/video/hero-mobile"); }
  }
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(242,181,106,0.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(10,8,6,0.6), transparent 70%),
    linear-gradient(180deg, rgba(10,8,6,0.45) 0%, rgba(10,8,6,0) 40%, rgba(10,8,6,0.55) 100%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* Ghost wordmark behind the hero — same canonical wordmark treatment
   (Inter 200 uppercase 0.22em) as .hero__title, scaled huge + faded. */
.hero__watermark {
  position: absolute;
  left: 50%;
  bottom: clamp(-4vw, -2vw, 2vw);
  transform: translateX(-50%);
  z-index: -1;
  font-family: var(--font-sans);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(8rem, 22vw, 24rem);
  line-height: 0.82;
  color: var(--text-light);
  opacity: 0.06;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero__watermark {
    font-size: clamp(5rem, 26vw, 12rem);
    letter-spacing: 0.18em;
    bottom: -1.5vw;
    opacity: 0.07;
  }
}

.hero__stage {
  grid-row: 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-9) var(--gutter);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-light-soft);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  width: 48px; height: 1px;
  background: var(--text-light-mute);
}
@media (max-width: 520px) {
  .hero__eyebrow { font-size: 0.66rem; gap: var(--sp-2); letter-spacing: 0.22em; }
  .hero__eyebrow::before, .hero__eyebrow::after { width: 22px; }
}

.hero__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(3.2rem, 1.2rem + 10vw, 14rem);
  line-height: var(--lh-tight);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: var(--sp-4);
  margin-left: 0.22em; /* optical correction for tracking */
  white-space: nowrap;
}
@media (max-width: 520px) {
  .hero__title {
    font-size: clamp(2.6rem, 9vw + 1rem, 4.5rem);
    letter-spacing: 0.18em;
    margin-left: 0.18em;
  }
}

.hero__title .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Secondary-hero title variant — used on /story and similar sub-pages where
   the h1 copy is longer than a 6-char brand mark and should wrap on mobile. */
.hero__title--wrap {
  font-size: clamp(2rem, 5vw + 1rem, 3.6rem);
  letter-spacing: 0.14em;
  margin-left: 0.14em;
  white-space: normal;
  max-inline-size: min(92vw, 20ch);
  margin-inline: auto;
  overflow-wrap: break-word;
  hyphens: none;
}
@media (max-width: 520px) {
  .hero__title--wrap {
    font-size: clamp(1.6rem, 7vw + 0.6rem, 2.2rem);
    letter-spacing: 0.1em;
    margin-left: 0.1em;
  }
}
.hero__tagline--wrap {
  white-space: normal;
  max-inline-size: min(92vw, 36ch);
  margin-inline: auto;
}
@media (max-width: 520px) {
  .hero__tagline--wrap { font-size: 0.78rem; letter-spacing: 0.16em; }
}

/* ---------- About-page philosophy split ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--sp-9);
  align-items: flex-start;
}
.about-split__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
.about-split__title em { font-family: var(--font-serif); font-style: italic; }
.about-split__body {
  display: grid;
  gap: var(--sp-4);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--text-ink-soft);
  line-height: 1.75;
}
@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .about-split__title { font-size: var(--fs-xl); max-inline-size: 22ch; }
}

.hero__tagline {
  margin-top: var(--sp-4);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text-light);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__footer {
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--gutter);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-light-mute);
}
.hero__footer > :first-child { justify-self: start; text-align: left; }
.hero__footer > :last-child  { justify-self: end;   text-align: right; }
.hero__footer > .hero__scroll { justify-self: center; }
@media (max-width: 560px) {
  .hero__footer {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--gutter);
    text-align: center;
  }
  .hero__footer > :first-child,
  .hero__footer > :last-child {
    justify-self: center;
    text-align: center;
    opacity: 0.7;
    font-size: 0.64rem;
  }
  .hero__footer > .hero__scroll { order: -1; }
}

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.hero__scroll-line {
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--text-light-soft), transparent);
  animation: scrollBeam 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollBeam {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ---------- Manifesto ---------- */
.manifesto {
  padding-block: var(--sp-11);
  text-align: center;
  background: var(--blush);
}

.manifesto__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-2xl);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--text-ink);
  max-width: 24ch;
  margin-inline: auto;
}
.manifesto__quote em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ember-deep);
}

.manifesto__meta {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-5);
  justify-content: center;
  color: var(--text-ink-soft);
  font-size: var(--fs-sm);
}

/* ---------- Signature diptych ---------- */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1320px;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .diptych { grid-template-columns: 1fr; max-width: none; }
}

/* ---------- Scent story ---------- */
.story {
  position: relative;
  padding-block: var(--sp-11);
  background: var(--obsidian);
  color: var(--text-light);
  overflow: hidden;
}
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.story__kicker { font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ember); }
.story__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-top: var(--sp-4);
}
.story__title em { font-family: var(--font-serif); font-style: italic; color: var(--ember); }
.story__body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--text-light);
  margin-top: var(--sp-5);
  max-width: 56ch;
}

/* legacy — kept for non-home pages that still use it */
.story__visual {
  position: relative;
  aspect-ratio: 3 / 4;
}
.story__visual-main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
}
.story__visual-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1800ms var(--ease-out-soft);
}
.story__visual-inset {
  position: absolute;
  left: -8%;
  bottom: -10%;
  width: 46%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.story__visual-inset img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1800ms var(--ease-out-soft);
}
.story__visual:hover .story__visual-main img,
.story__visual:hover .story__visual-inset img {
  transform: scale(1.03);
}

/* ---------- Story diptych (new) ---------- */
.story__diptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-content: start;
}
.story__plate { margin: 0; }
.story__plate-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  isolation: isolate;
}
.story__plate-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1600ms var(--ease-out-soft);
}
.story__plate:hover .story__plate-frame img { transform: scale(1.035); }
.story__plate--ingredients .story__plate-frame { aspect-ratio: 5 / 4; }
.story__plate--heritage    .story__plate-frame { aspect-ratio: 16 / 9; }

.story__plate-badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
  color: var(--ember);
  background: rgba(10, 8, 6, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.story__plate-caption {
  display: flex; flex-direction: column; gap: var(--sp-1);
  margin-top: var(--sp-3); padding-inline: var(--sp-1);
}
.story__plate-name {
  font-family: var(--font-sans);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-light);
}
.story__plate-meta {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--text-light);
}

/* Offset the second plate on desktop for an editorial feel */
@media (min-width: 861px) {
  .story__diptych {
    grid-template-rows: auto auto;
    row-gap: var(--sp-5);
  }
  .story__plate--heritage {
    width: 86%;
    margin-left: auto;
    transform: translateY(-6%);
  }
}

@media (max-width: 860px) {
  .story__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* ---------- Notes strip ---------- */
.notes-strip {
  background: var(--pearl);
  padding-block: var(--sp-10) var(--sp-7);
}

.notes-strip__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.notes-strip__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
}

.notes-strip__rail {
  margin-top: var(--sp-7);
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.notes-strip__rail::-webkit-scrollbar { display: none; }

.note-card {
  flex: 0 0 clamp(240px, 28vw, 360px);
  aspect-ratio: 3 / 4;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  scroll-snap-align: start;
  color: var(--text-light);
}
.note-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out-soft);
  filter: brightness(0.78);
}
.note-card:hover img { transform: scale(1.06); filter: brightness(0.9); }
.note-card__body {
  position: absolute;
  inset: 0;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.note-card__n { font-family: var(--font-display); font-size: var(--fs-md); opacity: 0.8; }
.note-card__title { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.note-card__list { font-family: var(--font-sans); font-weight: 300; font-size: 0.82rem; letter-spacing: 0.02em; line-height: 1.6; opacity: 0.9; }

/* ---------- Portraits — editorial redesign ---------- */
.portraits {
  background: var(--pearl);
  padding-block: var(--sp-7) 0;
  overflow: hidden;
  position: relative;
}

.portraits__header { margin-bottom: var(--sp-7); }
.portraits__kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-ink-mute);
  margin-bottom: var(--sp-3);
}
.portraits__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-ink);
}

.portraits__stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 5.5rem;
  gap: var(--sp-5);
  align-items: start;
}
/* Grid items default to min-width: auto, which resolves to the intrinsic
   image width (1200px) and blows out the track. Force min-width: 0 so
   the 1fr tracks actually constrain their children on mobile. */
.portraits__stage > *,
.portraits__stack > * { min-width: 0; }
.portraits__stack { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }

.portrait-cell { position: relative; isolation: isolate; }
.portrait-cell__frame {
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  position: relative;
}
.portrait-cell__frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1400ms var(--ease-out-soft);
}
.portrait-cell:hover .portrait-cell__frame img { transform: scale(1.045); }
.portrait-cell--veil       .portrait-cell__frame { aspect-ratio: 4 / 5; }
.portrait-cell--silhouette .portrait-cell__frame { aspect-ratio: 4 / 3; }
.portrait-cell--boudoir    .portrait-cell__frame { aspect-ratio: 16 / 9; }

.portrait-cell__badge {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  z-index: 2;
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
  color: var(--ember);
  background: rgba(10, 8, 6, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  pointer-events: none;
}

.portrait-cell__caption {
  display: flex; flex-direction: column; gap: var(--sp-1);
  margin-top: var(--sp-3); padding-inline: var(--sp-1);
}
.portrait-cell__name {
  font-family: var(--font-sans);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-ink);
}
.portrait-cell__meta {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--text-ink-soft);
}
.portrait-cell__meta em { font-style: normal; font-weight: 500; color: var(--ember-deep); }

.portraits__sidebar {
  display: flex; align-items: center; justify-content: center;
  align-self: stretch; min-height: 100%;
  padding-block: var(--sp-6);
}
.portraits__sidebar-text {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-xs); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-ink-mute);
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 1px solid var(--line-dark);
  padding-left: var(--sp-4);
}

.portraits__footer { margin-top: var(--sp-8); }
.portraits__footer-rule {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.portraits__hairline { flex: 1; border: 0; border-top: 1px solid var(--line-dark); }
.portraits__vol {
  font-family: var(--font-sans);
  font-size: var(--fs-xs); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-ink-mute);
  white-space: nowrap; flex-shrink: 0;
}
.portraits__watermark {
  font-family: var(--font-sans);
  font-weight: 200;
  text-transform: uppercase;
  font-size: var(--fs-mega); letter-spacing: 0.22em;
  line-height: 0.82; color: var(--text-ink);
  opacity: 0.055;
  white-space: nowrap; overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-bottom: var(--sp-7);
  user-select: none; pointer-events: none;
}

@media (max-width: 1024px) {
  .portraits__stage { grid-template-columns: 1.15fr 0.85fr; }
  .portraits__sidebar {
    grid-column: 1 / -1; align-self: auto;
    min-height: auto;
    padding-block: var(--sp-3) 0;
    justify-content: flex-start;
    border-top: 1px solid var(--line-dark); padding-top: var(--sp-3);
  }
  .portraits__sidebar-text {
    writing-mode: horizontal-tb; transform: none;
    border-left: 0; padding-left: 0;
  }
}
@media (max-width: 860px) {
  .portraits__stage { grid-template-columns: 1fr; }
  .portrait-cell--silhouette .portrait-cell__frame { aspect-ratio: 4 / 3; }
  .portrait-cell--boudoir    .portrait-cell__frame { aspect-ratio: 3 / 2; }
}

/* ---------- Testimonials ---------- */
.quotes {
  padding-block: var(--sp-11);
  background: var(--lavender);
  text-align: center;
}

/* ---------- Mega footer wordmark ---------- */
.mega-mark {
  background: var(--pearl);
  padding-top: var(--sp-10);
  padding-bottom: 0;
  overflow: hidden;
}
.mega-mark__lead {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.mega-mark__lead p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--text-ink-soft);
  max-width: 48ch;
  margin-inline: auto;
}
.mega-mark__word {
  font-family: var(--font-sans);
  font-weight: 200;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 2rem + 14vw, 22rem);
  text-align: center;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--text-ink);
  padding-inline: var(--gutter);
  transform: translateY(4%);
  padding-bottom: var(--sp-4);
}
@media (max-width: 720px) {
  .mega-mark { padding-top: var(--sp-8); }
  .mega-mark__word {
    font-size: clamp(2.8rem, 13vw, 5.5rem);
    letter-spacing: 0.18em;
    transform: none;
    padding-bottom: var(--sp-6);
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--obsidian);
  color: var(--text-light-soft);
  padding-block: var(--sp-8) var(--sp-6);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line-light);
}
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
.site-footer__brand h3 { font-family: var(--font-sans); font-weight: 200; text-transform: uppercase; font-size: var(--fs-lg); color: var(--text-light); letter-spacing: 0.22em; }
.site-footer__brand p { font-family: var(--font-sans); font-weight: 300; font-size: 0.9rem; letter-spacing: 0.01em; line-height: 1.65; margin-top: var(--sp-3); opacity: 0.9; }

.site-footer h4 { font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-light); margin-bottom: var(--sp-4); }
.site-footer ul { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--ember); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  opacity: 0.6;
  flex-wrap: wrap;
}

/* ---------- Product detail layout ---------- */
.pdp-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--obsidian);
  color: var(--text-light);
}
.pdp-hero__visual {
  position: relative;
  overflow: hidden;
}
.pdp-hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pdp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
@media (max-width: 860px) {
  .pdp-hero__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-hero__video { display: none; }
}
.pdp-hero__visual::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(242,181,106,0.2), transparent 65%);
  mix-blend-mode: overlay;
}
.pdp-hero__info {
  padding: var(--sp-9) var(--sp-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  max-width: 620px;
}
.pdp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.8rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}
.pdp-hero__sub { font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--text-light); }
.pdp-hero__desc { font-family: var(--font-sans); font-weight: 300; font-size: 0.98rem; line-height: 1.75; letter-spacing: 0.01em; color: var(--text-light); max-width: 48ch; }
.pdp-hero__info .eyebrow { color: var(--ember); }

.pdp-hero__sizes { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.pdp-hero__size {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-light);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.pdp-hero__size.is-active,
.pdp-hero__size:hover { border-color: var(--ember); background: rgba(242,181,106,0.08); }

@media (max-width: 860px) {
  .pdp-hero {
    grid-template-columns: 1fr;
    /* White bg on mobile so the gap above the visual (behind the frosted nav)
       reads as part of the product plate rather than a dark strip. */
    background: #fff;
  }
  .pdp-hero__visual {
    aspect-ratio: 4/5;
    height: auto;
    /* Push the bottle below the fixed nav so the frosted header never crops it. */
    margin-top: 64px;
  }
  .pdp-hero__info {
    /* Info section keeps the dark palette its text was designed for, regardless
       of the parent's new light bg. */
    background: var(--obsidian);
    padding: var(--sp-7) var(--gutter) var(--sp-9);
  }
}

.pdp-notes {
  padding-block: var(--sp-10);
  background: var(--pearl);
}
.pdp-notes__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--sp-9);
  align-items: flex-start;
}
@media (max-width: 860px) { .pdp-notes__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.pdp-lifestyle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
.pdp-lifestyle__img { position: relative; overflow: hidden; }
.pdp-lifestyle__img img { width: 100%; height: 100%; object-fit: cover; }
.pdp-lifestyle__body {
  padding: var(--sp-10) var(--sp-8);
  background: var(--blush);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
}
@media (max-width: 860px) { .pdp-lifestyle { grid-template-columns: 1fr; } }

/* ---------- About / Story / Contact hero ---------- */
.page-hero {
  padding: calc(var(--sp-8) + 60px) var(--gutter) var(--sp-7);
  background: var(--pearl);
  text-align: center;
}
@media (max-width: 720px) {
  .page-hero { padding: calc(var(--sp-6) + 56px) var(--gutter) var(--sp-5); }
}
.page-hero__eyebrow { letter-spacing: var(--ls-widest); font-size: var(--fs-xs); text-transform: uppercase; color: var(--ember-deep); }
.page-hero__title {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(2.2rem, 1rem + 4vw, 4.4rem);
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--sp-4);
  margin-left: 0.14em; /* optical correction for tracking */
}
@media (max-width: 520px) {
  .page-hero__title { font-size: clamp(1.6rem, 5.8vw + 0.6rem, 2.4rem); letter-spacing: 0.08em; margin-left: 0.08em; }
}
/* Kill the double-padding gap when a .section sits directly under the hero on the same (pearl) background */
.page-hero + .section-pearl { padding-top: var(--sp-5); }
@media (max-width: 720px) {
  .page-hero + .section-pearl { padding-top: var(--sp-4); }
  .page-hero + .section { padding-bottom: var(--sp-7); }
}
.page-hero__lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--text-ink-soft);
  max-width: 56ch;
  margin: var(--sp-4) auto 0;
}
@media (max-width: 720px) {
  .page-hero__lede { font-size: var(--fs-sm); margin-top: var(--sp-3); max-width: 40ch; }
}

/* ---------- Contact layout ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  padding-block: var(--sp-10);
}
.contact-grid form { display: grid; gap: var(--sp-5); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }