@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-Variable-c8O0ljhh.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Beaufort W01 Light";
  src: url("../fonts/BeaufortW01-Light-CciiSR7z.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Saans;
  src: url("../fonts/Saans-Variable-DuESw-j5.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable-BNd8yvN3.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saans SemiMono";
  src: url("../fonts/SaansSemiMono-Regular-B3YNZAB8.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Area Normal";
  src: url("../fonts/AreaNormal-Regular-Dw_ytF-m.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Area Normal";
  src: url("../fonts/AreaNormal-Medium-BXwozB9l.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Design tokens — typography & color primitives */

:root {
  /* Fonts — few family slots (not 1:1 with type-* roles) */
  --font-display: "Beaufort W01 Light", "Beaufort W01", Georgia, "Times New Roman", serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-lede: "Area Normal", system-ui, sans-serif;
  --font-label: "Saans SemiMono", ui-monospace, monospace;
  --font-link: "Geist Mono", ui-monospace, monospace;
  --font-saans: Saans, system-ui, sans-serif;

  /* Weights */
  --fw-display: 300;
  --fw-body: 400;
  --fw-medium: 500;

  /* Sizes — base / md / xl stepped in typography.css */
  --fs-display: 40px;
  --fs-display-md: 52px;
  --fs-display-lg: 36px;
  --fs-display-lg-md: 54px;
  --fs-display-xl: 56px;
  /* Figma mobile: Beaufort 36 — steps up at md/xl */
  --fs-heading: 36px;
  --fs-heading-md: 44px;
  --fs-heading-xl: 56px;
  /* Figma mobile: Beaufort 36 — 56 from md */
  --fs-heading-2xl: 36px;
  --fs-heading-2xl-md: 56px;
  --fs-body: 16px;
  --fs-body-md: 18px;
  /* Figma mobile (747:258): Area Normal 14 — 16 from md */
  --fs-body-lg: 14px;
  --fs-body-lg-md: 16px;
  --fs-body-sm: 12px;
  --fs-body-xl: 16px;
  --fs-body-xl-md: 18px;
  --fs-body-2xl: 20px;
  /* Figma mobile: Beaufort Light 22 — 28 from md */
  --fs-quote: 22px;
  --fs-quote-md: 28px;
  /* Figma mobile (747:259): 12 — 16 from md; links stay 16 via --fs-link */
  --fs-label: 12px;
  --fs-label-md: 16px;
  --fs-link: 16px;
  --fs-caption: 11px;
  --fs-caption-md: 16px;
  --fs-micro: 12px;

  /* Leading */
  --lh-display: 1;
  --lh-heading: 1.16;
  --lh-body: 1.46;
  --lh-body-relaxed: 1.6;
  --lh-quote: 1.4;
  --lh-label: 1.46;
  --lh-caption: 1.4;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.1em;
  /* Figma 851:2529 — 1.44px at 12px */
  --tracking-btn: 0.12em;

  /* Color */
  --color-ink: #291e1e;
  /* Figma 851:2720 — emerald modal title */
  --color-ink-deep: #171210;
  --color-black: #000;
  --color-white: #fff;
  /* Figma 747:368 — title on dark photo */
  --color-white-soft: #f0f0f0;
  /* Figma 747:369 — lede on dark photo */
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-neutral-50: #fafafa;
  /* Section-8 sketch panel wash */
  --color-neutral-25: #f8f8f9;
  /* Figma 851:2525 — ghost button border */
  --color-neutral-400: #a4a4a4;
  --color-neutral-600: #5c5b59;
  /* Figma 851:2721 — emerald modal body */
  --color-neutral-650: #464646;
  /* Section-8 sketch mobile lede */
  --color-neutral-670: #444444;
  --color-neutral-700: #353535;
  /* Figma 851:2529 — button label */
  --color-neutral-900: #1c1b1b;
  /* Figma section-6 lede */
  --color-neutral-950: #070707;
  /* Figma 851:2734 — modal close X */
  --color-neutral-750: #434343;
  --color-blush-800: #46302a;
  --color-blush-900: #261b17;
  /* Five-gems modal stage fallbacks (avg of each bg.png) while image decodes */
  --color-gem-emerald-wash: #b0eacd;
  --color-gem-emerald-wash-soft: #e4f7ee;
  --color-gem-emerald-wash-deep: #8fd4b5;
  --color-gem-heliodor-wash: #f1d1a6;
  --color-gem-heliodor-wash-soft: #faf0e0;
  --color-gem-heliodor-wash-deep: #e0b87a;
  --color-gem-rubellite-wash: #f9c5d0;
  --color-gem-rubellite-wash-soft: #fde8ed;
  --color-gem-rubellite-wash-deep: #e89aab;
  --color-gem-ruby-wash: #fec4c6;
  --color-gem-ruby-wash-soft: #ffe8e9;
  --color-gem-ruby-wash-deep: #f0999c;
  --color-gem-citrine-wash: #ecd59d;
  --color-gem-citrine-wash-soft: #f7ecd0;
  --color-gem-citrine-wash-deep: #d4b86e;

  /* Muted text */
  --opacity-muted: 0.7;

  /* Spacing — off Bootstrap spacer scale (0/4/8/16/24/48) */
  --pad-x-mobile: 20px;
  /* Desktop content column (section inners) */
  --inner-max: 1160px;
}
/* Type roles — size / weight / leading / tracking (token-driven). Font family via ff-* utilities. */

.type-display {
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
}

/* Figma — Beaufort Light 36 mobile / 54 md */
.type-display-lg {
  font-weight: var(--fw-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

/* Figma 905:10000 mobile 32 / 851:2720 desktop 40 — Beaufort Light / leading 1.16 */
.type-modal-title {
  font-weight: var(--fw-display);
  font-size: 32px;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

.type-heading {
  font-weight: var(--fw-display);
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

.type-heading-2xl {
  font-weight: var(--fw-display);
  font-size: var(--fs-heading-2xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

.type-body {
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "liga" 0, "lnum" 1, "tnum" 1;
}

.type-body-lg {
  font-weight: var(--fw-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-relaxed);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "liga" 0, "lnum" 1, "tnum" 1;
}

.type-body-sm {
  font-weight: var(--fw-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-relaxed);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "liga" 0, "lnum" 1, "tnum" 1;
}

.type-body-xl {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-relaxed);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "liga" 0, "lnum" 1, "tnum" 1;
}

.type-body-xl-regular {
  font-weight: var(--fw-body);
  font-size: var(--fs-body-xl-md);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "liga" 0, "lnum" 1, "tnum" 1;
}

.type-body-2xl {
  font-weight: var(--fw-body);
  font-size: var(--fs-body-2xl);
  line-height: var(--lh-body-relaxed);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "liga" 0, "lnum" 1, "tnum" 1;
}

.type-quote {
  font-weight: var(--fw-display);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "liga" 0, "lnum" 1, "tnum" 1;
}

.type-label {
  font-weight: var(--fw-body);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-wider);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.type-link {
  font-weight: var(--fw-body);
  font-size: var(--fs-link);
  line-height: normal;
  letter-spacing: var(--tracking-wide);
}

.type-caption {
  font-weight: var(--fw-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-normal);
}

.type-micro {
  font-weight: var(--fw-body);
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-wider);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Figma 851:2529 — Area Normal Bold 12 / tracking 1.44px; Medium is closest shipped face */
.type-btn {
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  line-height: normal;
  letter-spacing: var(--tracking-btn);
}

.type-muted {
  --reveal-opacity: var(--opacity-muted);

  opacity: var(--opacity-muted);
}

@media (min-width: 768px) {
  .type-display {
    font-size: var(--fs-display-md);
  }

  .type-display-lg {
    font-size: var(--fs-display-lg-md);
  }

  .type-modal-title {
    font-size: 40px;
  }

  .type-heading {
    font-size: var(--fs-heading-md);
  }

  .type-heading-2xl {
    font-size: var(--fs-heading-2xl-md);
  }

  .type-body {
    font-size: var(--fs-body-md);
  }

  .type-body-lg {
    font-size: var(--fs-body-lg-md);
  }

  .type-body-xl {
    font-size: var(--fs-body-xl-md);
  }

  .type-label {
    font-size: var(--fs-label-md);
  }

  .type-quote {
    font-size: var(--fs-quote-md);
  }

  .type-caption {
    font-size: var(--fs-caption-md);
  }
}

@media (min-width: 1200px) {
  .type-display {
    font-size: var(--fs-display-xl);
  }

  .type-heading {
    font-size: var(--fs-heading-xl);
  }
}
/* Custom object-fit / object-position utilities (not in Bootstrap 4.5.2) */

.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
}

.object-fit-fill {
  object-fit: fill;
}

.object-fit-none {
  object-fit: none;
}

.object-fit-scale-down {
  object-fit: scale-down;
}

.object-position-center {
  object-position: center;
}

/* section-11 reveal-main: left-biased crop; widens slightly as vw shrinks. */
.object-position-x20 {
  object-position: clamp(28%, calc(52% - 0.019 * 100vw), 38%) 50%;
}

/* section-11 reveal sketch only — nudged left of main's clamp crop to register art */
.object-position-reveal-base {
  object-position: 30% 50%;
}

/* Subject sits left of centre in the source (e.g. section-11 necklace) */
.object-position-x25 {
  object-position: 25% 50%;
}

.object-position-center-right {
  object-position: center right;
}

.object-position-right-y30 {
  object-position: 100% 30%;
}

.object-position-center-left {
  object-position: center left;
}

.object-position-top {
  object-position: top;
}

.object-position-bottom {
  object-position: bottom;
}

.object-position-left-bottom {
  object-position: left bottom;
}

/* Near-bottom crop — pan layer (taller asset) */
.object-position-center-y80 {
  object-position: 50% 80%;
}

.object-position-left-y80 {
  object-position: 0% 80%;
}

/* Reveal — a bit lower than pan so the pendant clears the frame edge */
.object-position-center-y88 {
  object-position: 48% 88%;
}
/* Custom pointer-events utilities (not in Bootstrap 4.5.2) */

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}
/* Custom z-index utilities (not in Bootstrap 4.5.2) */

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

/* Above header (5000) */
.z-modal {
  z-index: 5100;
}

.z-modal-backdrop {
  z-index: 5090;
}
/* Custom display utilities (not in Bootstrap 4.5.2).
   .d-contents must lose to .d-lg-flex at lg — main.css loads after Bootstrap,
   so an unscoped !important would keep display:contents on desktop. */

.d-contents {
  display: contents !important;
}

@media (min-width: 992px) {
  .d-contents.d-lg-flex {
    display: flex !important;
  }
}
/* Theme color utilities — driven by tokens.css */

.text-ink {
  color: var(--color-ink);
}

.text-ink-deep {
  color: var(--color-ink-deep);
}

/* Bootstrap 4.5.2 ships only .text-black-50 — full black is a project utility */
.text-black {
  color: var(--color-black);
}

.text-white-soft {
  color: var(--color-white-soft);
}

.text-white-80 {
  color: var(--color-white-80);
}

.text-neutral-600 {
  color: var(--color-neutral-600);
}

.text-neutral-650 {
  color: var(--color-neutral-650);
}

.text-neutral-670 {
  color: var(--color-neutral-670);
}

.text-neutral-700 {
  color: var(--color-neutral-700);
}

.text-neutral-900 {
  color: var(--color-neutral-900);
}

.text-neutral-950 {
  color: var(--color-neutral-950);
}

a.text-neutral-900:hover,
a.text-neutral-900:focus {
  color: var(--color-neutral-900);
}

/* Pair with Bootstrap 4.5.2 .border */
.border-neutral-400 {
  border-color: var(--color-neutral-400) !important;
}

.text-blush-800 {
  color: var(--color-blush-800);
}

.text-blush-900 {
  color: var(--color-blush-900);
}

.bg-ink {
  background-color: var(--color-ink);
}

.bg-ink-deep {
  background-color: var(--color-ink-deep);
}

.bg-neutral-50 {
  background-color: var(--color-neutral-50);
}

.bg-neutral-25 {
  background-color: var(--color-neutral-25);
}
/* Font-family utilities — few family slots (not mirrored from type-* roles) */

.ff-display {
  font-family: var(--font-display);
}

.ff-body {
  font-family: var(--font-body);
}

.ff-lede {
  font-family: var(--font-lede);
}

.ff-label {
  font-family: var(--font-label);
}

.ff-link {
  font-family: var(--font-link);
}
/* Slide-in reveal — toggle with [data-reveal] + .is-inview (see src/js/reveal.js)
   Transition only on .is-inview so first paint (CSS applying opacity:0) does not animate out.
   Hero: timed after image fade. Sections 2/4 intros: IntersectionObserver. */
[data-reveal] {
  --reveal-distance: 24px;
  --reveal-duration: 650ms;
  --reveal-ease: linear;
  --reveal-delay: 0ms;

  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
}

[data-reveal].is-inview {
  opacity: var(--reveal-opacity, 1);
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: var(--reveal-opacity, 1);
    transform: none;
  }

  [data-reveal].is-inview {
    transition: none;
  }
}
/* Hide scrollbars while keeping overflow scroll/auto */

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
/* Fixed ambient-audio toggle — outside sections/ so z-index is allowed.
   Figma 111:103 — 56×56 square, rgba(255,255,255,0.3) plate; left 30px, bottom 70px. */

button.bg-audio-toggle {
  --bg-audio-size: 56px;
  --bg-audio-left: 30px;
  --bg-audio-bottom: 70px;
  --bg-audio-icon: 24px;
  --bg-audio-plate: rgba(255, 255, 255, 0.3);

  position: fixed;
  left: var(--bg-audio-left);
  bottom: var(--bg-audio-bottom);
  width: var(--bg-audio-size);
  height: var(--bg-audio-size);
  z-index: 1100;
  /* Unlock critical-CSS hide (beats Bootstrap .d-flex until this sheet loads) */
  display: flex !important;
  background-color: var(--bg-audio-plate);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.bg-audio-toggle:hover,
.bg-audio-toggle:focus {
  --bg-audio-plate: rgba(255, 255, 255, 0.45);

  outline: none;
  transform: scale(1.04);
}

.bg-audio-toggle:focus-visible {
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-blush-800);
}

.bg-audio-toggle__icon {
  width: var(--bg-audio-icon);
  height: var(--bg-audio-icon);
  display: block;
}

.bg-audio-toggle__wave,
.bg-audio-toggle__mute {
  transition: opacity 180ms ease;
}

/* Off: mute slash on, waves off */
.bg-audio-toggle__wave {
  opacity: 0;
}

.bg-audio-toggle__mute {
  opacity: 1;
}

/* On: waves pulse outward, mute slash off */
.bg-audio-toggle.is-on .bg-audio-toggle__wave {
  animation: bg-audio-wave 1.2s ease-in-out infinite;
}

.bg-audio-toggle.is-on .bg-audio-toggle__wave--far {
  animation-delay: 0.2s;
}

.bg-audio-toggle.is-on .bg-audio-toggle__mute {
  opacity: 0;
}

@keyframes bg-audio-wave {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-audio-toggle.is-on .bg-audio-toggle__wave {
    animation: none;
    opacity: 1;
  }
}
/* Full-screen gem modal.
   Outside sections/ so height:100% / fullscreen dialog rules are allowed. */

.gem-modal.modal {
  padding: 0 !important;
  overflow: hidden;
}

/* Full-bleed gem modals replace the dimmer — keep click-catcher only */
.modal-backdrop.gem-modal-backdrop {
  opacity: 0;
  background-color: transparent;
}

.gem-modal__dialog {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  /* Bootstrap fade uses transform — that isolates mix-blend from the stage bg */
  transform: none !important;
}

.gem-modal__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: transparent;
}

.gem-modal__stage {
  --gem-modal-stage-wash: var(--color-neutral-50);
  --gem-modal-stage-wash-soft: var(--color-white);
  --gem-modal-stage-wash-deep: var(--color-neutral-50);
  /* Soft multi-stop wash — reads closer to a photo than a flat fill */
  --gem-modal-stage-fallback: radial-gradient(
    ellipse 140% 110% at 38% 32%,
    var(--gem-modal-stage-wash-soft) 0%,
    var(--gem-modal-stage-wash) 48%,
    var(--gem-modal-stage-wash-deep) 100%
  );

  flex: 1 1 auto;
  min-height: 100%;
  /* Keep isolation off so gems can darken/multiply into .gem-modal__bg */
  isolation: auto;
  /* Gradient wash while .gem-modal__bg / SVG reveal image finishes loading */
  background-color: var(--gem-modal-stage-wash);
  background-image: var(--gem-modal-stage-fallback);
}

.gem-modal--emerald .gem-modal__stage {
  --gem-modal-stage-wash: var(--color-gem-emerald-wash);
  --gem-modal-stage-wash-soft: var(--color-gem-emerald-wash-soft);
  --gem-modal-stage-wash-deep: var(--color-gem-emerald-wash-deep);
}

.gem-modal--heliodor .gem-modal__stage {
  --gem-modal-stage-wash: var(--color-gem-heliodor-wash);
  --gem-modal-stage-wash-soft: var(--color-gem-heliodor-wash-soft);
  --gem-modal-stage-wash-deep: var(--color-gem-heliodor-wash-deep);
}

.gem-modal--rose .gem-modal__stage {
  --gem-modal-stage-wash: var(--color-gem-rubellite-wash);
  --gem-modal-stage-wash-soft: var(--color-gem-rubellite-wash-soft);
  --gem-modal-stage-wash-deep: var(--color-gem-rubellite-wash-deep);
}

.gem-modal--ruby .gem-modal__stage {
  --gem-modal-stage-wash: var(--color-gem-ruby-wash);
  --gem-modal-stage-wash-soft: var(--color-gem-ruby-wash-soft);
  --gem-modal-stage-wash-deep: var(--color-gem-ruby-wash-deep);
}

.gem-modal--citrine .gem-modal__stage {
  --gem-modal-stage-wash: var(--color-gem-citrine-wash);
  --gem-modal-stage-wash-soft: var(--color-gem-citrine-wash-soft);
  --gem-modal-stage-wash-deep: var(--color-gem-citrine-wash-deep);
}

/* Circular open reveal masks the whole stage (JS drives mask-image) */
.gem-modal--revealing .gem-modal__stage {
  will-change: mask-image;
}

/* Keep pods blendable mid-flight — any transform isolates multiply on descendants */
.gem-modal--revealing .gem-modal__pods {
  transform: none !important;
}

.gem-modal--closing {
  pointer-events: none;
}

.gem-modal--closing .gem-modal__stage {
  will-change: mask-image;
}

@supports (height: 100dvh) {
  .gem-modal__stage {
    min-height: 100dvh;
  }
}

.gem-modal__bg {
  top: 0;
  left: 0;
}

.gem-modal__gems {
  /* Desktop gems cluster — left of stage */
  --gem-modal-gems-left: 2.64%;
  --gem-modal-gems-top: 14.89%;
  --gem-modal-gems-w: 40.63%;

  left: var(--gem-modal-gems-left);
  top: var(--gem-modal-gems-top);
  width: var(--gem-modal-gems-w);
}

.gem-modal__pods {
  /* Desktop pods / accent — lower right */
  --gem-modal-pods-left: 67.01%;
  --gem-modal-pods-top: 51.6%;
  --gem-modal-pods-w: 31.94%;

  left: var(--gem-modal-pods-left);
  top: var(--gem-modal-pods-top);
  width: var(--gem-modal-pods-w);
}

.gem-modal__copy {
  /* Mobile copy inset */
  --gem-modal-copy-left: 44px;
  --gem-modal-copy-top: 35.19%;
  --gem-modal-copy-right: auto;
  --gem-modal-copy-max: 272px;
  --gem-modal-copy-gap: 16px;

  left: var(--gem-modal-copy-left);
  top: var(--gem-modal-copy-top);
  right: var(--gem-modal-copy-right);
  max-width: var(--gem-modal-copy-max);
  gap: var(--gem-modal-copy-gap);
}

.gem-modal__title {
  --gem-modal-title-max: 272px;

  max-width: var(--gem-modal-title-max);
}

.gem-modal__lede {
  --gem-modal-lede-max: 272px;

  max-width: var(--gem-modal-lede-max);
}

.gem-modal__close {
  /* Close button — smaller on mobile, larger on desktop */
  --gem-modal-close-size: 44px;
  --gem-modal-close-top: 30px;
  --gem-modal-close-right: 30px;
  --gem-modal-close-bg: var(--color-white);
  --gem-modal-close-ink: var(--color-neutral-750);
  --gem-modal-close-bar: 18px;
  --gem-modal-close-stroke: 1.5px;

  top: var(--gem-modal-close-top);
  right: var(--gem-modal-close-right);
  width: var(--gem-modal-close-size);
  height: var(--gem-modal-close-size);
  min-width: var(--gem-modal-close-size);
  min-height: var(--gem-modal-close-size);
  background-color: var(--gem-modal-close-bg);
  box-shadow: 0 2px 12px rgba(23, 18, 16, 0.12);
  color: var(--gem-modal-close-ink);
  cursor: pointer;
}

.gem-modal__close:hover,
.gem-modal__close:focus-visible {
  outline: none;
  opacity: var(--opacity-muted);
}

.gem-modal__close:focus:not(:focus-visible) {
  outline: none;
}

.gem-modal__close-icon {
  position: relative;
  display: block;
  width: var(--gem-modal-close-bar);
  height: var(--gem-modal-close-bar);
}

.gem-modal__close-icon::before,
.gem-modal__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--gem-modal-close-stroke);
  height: var(--gem-modal-close-bar);
  background-color: currentColor;
  border-radius: 40px;
}

.gem-modal__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.gem-modal__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Dual-layer: multiply on .gem-modal__base (not img) so imgs can opacity-fade */
.gem-modal__base {
  mix-blend-mode: multiply;
}

.gem-modal__shine {
  top: 0;
  left: 0;
}

.gem-modal__shine img {
  mix-blend-mode: normal;
}

/*
  Heliodor / Emerald dual stacks: parents must not isolate
  (no z-* on the stack, no overflow-hidden on stage, no dialog transform).
*/

/* Single-layer accents / emerald gems */
.gem-modal--emerald .gem-modal__gems,
.gem-modal--heliodor .gem-modal__gems,
.gem-modal--heliodor .gem-modal__pods,
.gem-modal--rose .gem-modal__gems,
.gem-modal--rose .gem-modal__pods,
.gem-modal--ruby .gem-modal__pods {
  mix-blend-mode: multiply;
}

@media (min-width: 768px) {
  .gem-modal__copy {
    /* Desktop copy inset (default / emerald) */
    --gem-modal-copy-left: 48.4%;
    --gem-modal-copy-top: 29.67%;
    --gem-modal-copy-right: auto;
    --gem-modal-copy-max: 368px;
    --gem-modal-copy-gap: 16px;
  }

  .gem-modal__title {
    --gem-modal-title-max: 368px;
  }

  .gem-modal__lede {
    --gem-modal-lede-max: 362px;
  }

  .gem-modal__close {
    --gem-modal-close-size: 62px;
    --gem-modal-close-top: 56px;
    --gem-modal-close-right: 54px;
    --gem-modal-close-bar: 27px;
    --gem-modal-close-stroke: 1.94px;
  }

  /* Heliodor — copy left-center, gems right, accent top-left */
  .gem-modal--heliodor .gem-modal__copy {
    --gem-modal-copy-left: 32.64%;
    --gem-modal-copy-top: 34.52%;
  }

  .gem-modal--heliodor .gem-modal__gems {
    --gem-modal-gems-left: 58.19%;
    --gem-modal-gems-top: 44.33%;
    --gem-modal-gems-w: 36.62%;
  }

  .gem-modal--heliodor .gem-modal__pods {
    --gem-modal-pods-left: 2%;
    --gem-modal-pods-top: -2%;
    --gem-modal-pods-w: 32.73%;
  }

  /* Rose — copy center, roses bottom-left, gems top-right */
  .gem-modal--rose .gem-modal__copy {
    --gem-modal-copy-left: 30.35%;
    --gem-modal-copy-top: 35.11%;
    --gem-modal-copy-right: auto;
    --gem-modal-copy-bottom: auto;

    bottom: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .gem-modal--rose .gem-modal__gems {
    --gem-modal-gems-left: 55.6%;
    --gem-modal-gems-top: 6.72%;
    --gem-modal-gems-w: 39.12%;
  }

  .gem-modal--rose .gem-modal__pods {
    /* Bottom-left roses — pin to stage bottom (not top %) so no gap on tall viewports */
    --gem-modal-pods-left: 1.39%;
    --gem-modal-pods-top: auto;
    --gem-modal-pods-bottom: 0%;
    --gem-modal-pods-w: 29.86%;

    top: var(--gem-modal-pods-top);
    bottom: var(--gem-modal-pods-bottom);
  }

  .gem-modal--rose .gem-modal__pods img {
    object-position: left bottom;
  }

  /* Ruby — copy center, gems bottom-left, accent top-right */
  .gem-modal--ruby .gem-modal__copy {
    --gem-modal-copy-left: 36.06%;
    --gem-modal-copy-top: 28.96%;
    --gem-modal-copy-right: auto;
    --gem-modal-copy-bottom: auto;

    bottom: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .gem-modal--ruby .gem-modal__gems {
    --gem-modal-gems-left: 1.67%;
    --gem-modal-gems-top: 39.95%;
    --gem-modal-gems-w: 38.61%;
  }

  .gem-modal--ruby .gem-modal__pods {
    --gem-modal-pods-left: 67.92%;
    --gem-modal-pods-top: 3.78%;
    --gem-modal-pods-w: 27.22%;
  }

  /* Citrine — copy center, gems top-left, turmeric bottom-right */
  .gem-modal--citrine .gem-modal__copy {
    --gem-modal-copy-left: 39.65%;
    --gem-modal-copy-top: 32.51%;
  }

  .gem-modal--citrine .gem-modal__gems {
    --gem-modal-gems-left: 2.99%;
    --gem-modal-gems-top: 0%;
    --gem-modal-gems-w: 35.92%;
  }

  .gem-modal--citrine .gem-modal__pods {
    --gem-modal-pods-left: 56.53%;
    --gem-modal-pods-top: 35.11%;
    --gem-modal-pods-w: 43.47%;
  }
}

@media (max-width: 767.98px) {
  .gem-modal__gems {
    --gem-modal-gems-left: 4%;
    --gem-modal-gems-top: auto;
    --gem-modal-gems-bottom: 8%;
    --gem-modal-gems-w: 55%;

    top: auto;
    bottom: var(--gem-modal-gems-bottom);
  }

  .gem-modal__pods {
    --gem-modal-pods-left: auto;
    --gem-modal-pods-right: -4%;
    --gem-modal-pods-top: auto;
    --gem-modal-pods-bottom: 0;
    --gem-modal-pods-w: 48%;

    left: auto;
    right: var(--gem-modal-pods-right);
    top: auto;
    bottom: var(--gem-modal-pods-bottom);
  }

  /*
    Emerald mobile — one viewport.
    Gems pinned top, pods pinned bottom (shrink via max-height),
    copy fixed type in the middle band. Keep position:absolute for reveal JS.
  */
  .gem-modal--emerald .gem-modal__stage {
    --gem-modal-stage-h: 100vh;

    height: var(--gem-modal-stage-h);
    min-height: var(--gem-modal-stage-h);
    max-height: var(--gem-modal-stage-h);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .gem-modal--emerald .gem-modal__stage {
      --gem-modal-stage-h: 100dvh;
    }
  }

  .gem-modal--emerald .gem-modal__gems {
    --gem-modal-gems-left: -3.6%;
    --gem-modal-gems-top: -1.5%;
    --gem-modal-gems-w: 72%;
    --gem-modal-gems-max-h: min(291px, 24vh);

    position: absolute;
    left: var(--gem-modal-gems-left);
    right: auto;
    top: var(--gem-modal-gems-top);
    bottom: auto;
    width: var(--gem-modal-gems-w);
    max-height: var(--gem-modal-gems-max-h);
    mix-blend-mode: normal;
  }

  .gem-modal--emerald .gem-modal__gems img {
    width: 100%;
    max-height: var(--gem-modal-gems-max-h);
    object-fit: contain;
    object-position: left top;
  }

  .gem-modal--emerald .gem-modal__copy {
    --gem-modal-copy-left: 44px;
    --gem-modal-copy-top: 24vh;
    --gem-modal-copy-bottom: 26vh;
    --gem-modal-copy-right: auto;
    --gem-modal-copy-max: 272px;
    --gem-modal-copy-gap: 16px;

    left: var(--gem-modal-copy-left);
    top: var(--gem-modal-copy-top);
    right: var(--gem-modal-copy-right);
    bottom: var(--gem-modal-copy-bottom);
    max-width: var(--gem-modal-copy-max);
    justify-content: center;
    z-index: 2;
  }

  .gem-modal--emerald .gem-modal__pods {
    --gem-modal-pods-left: auto;
    --gem-modal-pods-right: -5%;
    --gem-modal-pods-top: auto;
    --gem-modal-pods-bottom: -2%;
    --gem-modal-pods-w: 78%;
    --gem-modal-pods-max-h: min(329px, 28vh);

    position: absolute;
    left: var(--gem-modal-pods-left);
    right: var(--gem-modal-pods-right);
    top: var(--gem-modal-pods-top);
    bottom: var(--gem-modal-pods-bottom);
    width: var(--gem-modal-pods-w);
    max-height: var(--gem-modal-pods-max-h);
  }

  .gem-modal--emerald .gem-modal__pods img {
    width: 100%;
    max-height: var(--gem-modal-pods-max-h);
    object-fit: contain;
    object-position: right bottom;
  }

  @supports (height: 100dvh) {
    .gem-modal--emerald .gem-modal__gems {
      --gem-modal-gems-max-h: min(291px, 24dvh);
    }

    .gem-modal--emerald .gem-modal__copy {
      --gem-modal-copy-top: 24dvh;
      --gem-modal-copy-bottom: 26dvh;
    }

    .gem-modal--emerald .gem-modal__pods {
      --gem-modal-pods-max-h: min(329px, 28dvh);
    }
  }

  /*
    Heliodor mobile — same one-viewport structure as emerald.
    Top: gems base+shine (mobile assets). Bottom: desktop accent reused.
  */
  .gem-modal--heliodor .gem-modal__stage {
    --gem-modal-stage-h: 100vh;

    height: var(--gem-modal-stage-h);
    min-height: var(--gem-modal-stage-h);
    max-height: var(--gem-modal-stage-h);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .gem-modal--heliodor .gem-modal__stage {
      --gem-modal-stage-h: 100dvh;
    }
  }

  .gem-modal--heliodor .gem-modal__gems {
    /* Top gems cluster */
    --gem-modal-gems-left: 2.56%;
    --gem-modal-gems-right: auto;
    --gem-modal-gems-top: 1%;
    --gem-modal-gems-bottom: auto;
    --gem-modal-gems-w: 60%;
    --gem-modal-gems-max-h: min(211px, 24vh);

    position: absolute;
    left: var(--gem-modal-gems-left);
    right: var(--gem-modal-gems-right);
    top: var(--gem-modal-gems-top);
    bottom: var(--gem-modal-gems-bottom);
    width: var(--gem-modal-gems-w);
    max-height: var(--gem-modal-gems-max-h);
  }

  .gem-modal--heliodor .gem-modal__gems img {
    width: 100%;
    max-height: var(--gem-modal-gems-max-h);
    object-fit: contain;
    object-position: left top;
  }

  .gem-modal--heliodor .gem-modal__copy {
    --gem-modal-copy-left: 44px;
    --gem-modal-copy-top: 24vh;
    --gem-modal-copy-bottom: 26vh;
    --gem-modal-copy-right: auto;
    --gem-modal-copy-max: 272px;
    --gem-modal-copy-gap: 16px;

    left: var(--gem-modal-copy-left);
    top: var(--gem-modal-copy-top);
    right: var(--gem-modal-copy-right);
    bottom: var(--gem-modal-copy-bottom);
    max-width: var(--gem-modal-copy-max);
    justify-content: center;
    z-index: 2;
  }

  .gem-modal--heliodor .gem-modal__pods {
    /* Bottom accent — pin bottom, reuse desktop asset */
    --gem-modal-pods-left: auto;
    --gem-modal-pods-right: -8%;
    --gem-modal-pods-top: auto;
    --gem-modal-pods-bottom: -2%;
    --gem-modal-pods-w: 96%;
    --gem-modal-pods-max-h: min(390px, 36vh);

    position: absolute;
    left: var(--gem-modal-pods-left);
    right: var(--gem-modal-pods-right);
    top: var(--gem-modal-pods-top);
    bottom: var(--gem-modal-pods-bottom);
    width: var(--gem-modal-pods-w);
    max-height: var(--gem-modal-pods-max-h);
  }

  .gem-modal--heliodor .gem-modal__pods img {
    width: 100%;
    max-height: var(--gem-modal-pods-max-h);
    object-fit: contain;
    object-position: right bottom;
  }

  @supports (height: 100dvh) {
    .gem-modal--heliodor .gem-modal__gems {
      --gem-modal-gems-max-h: min(211px, 24dvh);
    }

    .gem-modal--heliodor .gem-modal__copy {
      --gem-modal-copy-top: 24dvh;
      --gem-modal-copy-bottom: 26dvh;
    }

    .gem-modal--heliodor .gem-modal__pods {
      --gem-modal-pods-max-h: min(390px, 36dvh);
    }
  }

  /*
    Rose mobile — same one-viewport structure.
    Top: gems-mobile. Bottom: desktop roses accent. Copy centered.
  */
  .gem-modal--rose .gem-modal__stage {
    --gem-modal-stage-h: 100vh;

    height: var(--gem-modal-stage-h);
    min-height: var(--gem-modal-stage-h);
    max-height: var(--gem-modal-stage-h);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .gem-modal--rose .gem-modal__stage {
      --gem-modal-stage-h: 100dvh;
    }
  }

  .gem-modal--rose .gem-modal__gems {
    /* Top gems — nudged in for left breathing room */
    --gem-modal-gems-left: 4%;
    --gem-modal-gems-right: auto;
    --gem-modal-gems-top: -2%;
    --gem-modal-gems-bottom: auto;
    --gem-modal-gems-w: 72%;
    --gem-modal-gems-max-h: min(289px, 24vh);

    position: absolute;
    left: var(--gem-modal-gems-left);
    right: var(--gem-modal-gems-right);
    top: var(--gem-modal-gems-top);
    bottom: var(--gem-modal-gems-bottom);
    width: var(--gem-modal-gems-w);
    max-height: var(--gem-modal-gems-max-h);
  }

  .gem-modal--rose .gem-modal__gems img {
    width: 100%;
    max-height: var(--gem-modal-gems-max-h);
    object-fit: contain;
    object-position: left top;
  }

  .gem-modal--rose .gem-modal__copy {
    --gem-modal-copy-left: 0;
    --gem-modal-copy-top: 24vh;
    --gem-modal-copy-bottom: 26vh;
    --gem-modal-copy-right: 0;
    --gem-modal-copy-max: 272px;
    --gem-modal-copy-gap: 16px;

    left: var(--gem-modal-copy-left);
    top: var(--gem-modal-copy-top);
    right: var(--gem-modal-copy-right);
    bottom: var(--gem-modal-copy-bottom);
    max-width: var(--gem-modal-copy-max);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    z-index: 2;
  }

  .gem-modal--rose .gem-modal__pods {
    /* Bottom roses — pin bottom */
    --gem-modal-pods-left: auto;
    --gem-modal-pods-right: -4%;
    --gem-modal-pods-top: auto;
    --gem-modal-pods-bottom: -2%;
    --gem-modal-pods-w: 78%;
    --gem-modal-pods-max-h: min(282px, 28vh);

    position: absolute;
    left: var(--gem-modal-pods-left);
    right: var(--gem-modal-pods-right);
    top: var(--gem-modal-pods-top);
    bottom: var(--gem-modal-pods-bottom);
    width: var(--gem-modal-pods-w);
    max-height: var(--gem-modal-pods-max-h);
  }

  .gem-modal--rose .gem-modal__pods img {
    width: 100%;
    max-height: var(--gem-modal-pods-max-h);
    object-fit: contain;
    object-position: right bottom;
  }

  @supports (height: 100dvh) {
    .gem-modal--rose .gem-modal__gems {
      --gem-modal-gems-max-h: min(289px, 24dvh);
    }

    .gem-modal--rose .gem-modal__copy {
      --gem-modal-copy-top: 24dvh;
      --gem-modal-copy-bottom: 26dvh;
    }

    .gem-modal--rose .gem-modal__pods {
      --gem-modal-pods-max-h: min(282px, 28dvh);
    }
  }

  /*
    Ruby mobile — same one-viewport structure.
    Top: gems base+shine. Bottom: desktop mace accent.
    Copy centered like rose.
  */
  .gem-modal--ruby .gem-modal__stage {
    --gem-modal-stage-h: 100vh;

    height: var(--gem-modal-stage-h);
    min-height: var(--gem-modal-stage-h);
    max-height: var(--gem-modal-stage-h);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .gem-modal--ruby .gem-modal__stage {
      --gem-modal-stage-h: 100dvh;
    }
  }

  .gem-modal--ruby .gem-modal__gems {
    /* Top gems cluster */
    --gem-modal-gems-left: 4%;
    --gem-modal-gems-right: auto;
    --gem-modal-gems-top: 0;
    --gem-modal-gems-bottom: auto;
    --gem-modal-gems-w: 63%;
    --gem-modal-gems-max-h: min(246px, 24vh);

    position: absolute;
    left: var(--gem-modal-gems-left);
    right: var(--gem-modal-gems-right);
    top: var(--gem-modal-gems-top);
    bottom: var(--gem-modal-gems-bottom);
    width: var(--gem-modal-gems-w);
    max-height: var(--gem-modal-gems-max-h);
  }

  .gem-modal--ruby .gem-modal__gems img {
    width: 100%;
    max-height: var(--gem-modal-gems-max-h);
    object-fit: contain;
    object-position: left top;
  }

  .gem-modal--ruby .gem-modal__copy {
    --gem-modal-copy-left: 0;
    --gem-modal-copy-top: 24vh;
    --gem-modal-copy-bottom: 26vh;
    --gem-modal-copy-right: 0;
    --gem-modal-copy-max: 272px;
    --gem-modal-copy-gap: 16px;

    left: var(--gem-modal-copy-left);
    top: var(--gem-modal-copy-top);
    right: var(--gem-modal-copy-right);
    bottom: var(--gem-modal-copy-bottom);
    max-width: var(--gem-modal-copy-max);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    z-index: 2;
  }

  .gem-modal--ruby .gem-modal__pods {
    /* Bottom mace — pin bottom */
    --gem-modal-pods-left: auto;
    --gem-modal-pods-right: -4%;
    --gem-modal-pods-top: auto;
    --gem-modal-pods-bottom: -2%;
    --gem-modal-pods-w: 80%;
    --gem-modal-pods-max-h: min(295px, 30vh);

    position: absolute;
    left: var(--gem-modal-pods-left);
    right: var(--gem-modal-pods-right);
    top: var(--gem-modal-pods-top);
    bottom: var(--gem-modal-pods-bottom);
    width: var(--gem-modal-pods-w);
    max-height: var(--gem-modal-pods-max-h);
  }

  .gem-modal--ruby .gem-modal__pods img {
    width: 100%;
    max-height: var(--gem-modal-pods-max-h);
    object-fit: contain;
    object-position: right bottom;
  }

  @supports (height: 100dvh) {
    .gem-modal--ruby .gem-modal__gems {
      --gem-modal-gems-max-h: min(246px, 24dvh);
    }

    .gem-modal--ruby .gem-modal__copy {
      --gem-modal-copy-top: 24dvh;
      --gem-modal-copy-bottom: 26dvh;
    }

    .gem-modal--ruby .gem-modal__pods {
      --gem-modal-pods-max-h: min(295px, 30dvh);
    }
  }

  /*
    Citrine mobile — desktop assets reused.
    Top: gems dual-layer top-left. Bottom: turmeric accent dual-layer.
  */
  .gem-modal--citrine .gem-modal__stage {
    --gem-modal-stage-h: 100vh;

    height: var(--gem-modal-stage-h);
    min-height: var(--gem-modal-stage-h);
    max-height: var(--gem-modal-stage-h);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .gem-modal--citrine .gem-modal__stage {
      --gem-modal-stage-h: 100dvh;
    }
  }

  .gem-modal--citrine .gem-modal__gems {
    /* Top gems — pulled to top-left with breathing room */
    --gem-modal-gems-left: -12%;
    --gem-modal-gems-right: auto;
    --gem-modal-gems-top: 0%;
    --gem-modal-gems-bottom: auto;
    --gem-modal-gems-w: 98%;
    --gem-modal-gems-max-h: min(400px, 36vh);

    position: absolute;
    left: var(--gem-modal-gems-left);
    right: var(--gem-modal-gems-right);
    top: var(--gem-modal-gems-top);
    bottom: var(--gem-modal-gems-bottom);
    width: var(--gem-modal-gems-w);
    max-height: var(--gem-modal-gems-max-h);
  }

  .gem-modal--citrine .gem-modal__gems img {
    width: 100%;
    max-height: var(--gem-modal-gems-max-h);
    object-fit: contain;
    object-position: left top;
  }

  .gem-modal--citrine .gem-modal__copy {
    --gem-modal-copy-left: 44px;
    --gem-modal-copy-top: 24vh;
    --gem-modal-copy-bottom: 26vh;
    --gem-modal-copy-right: auto;
    --gem-modal-copy-max: 272px;
    --gem-modal-copy-gap: 16px;

    left: var(--gem-modal-copy-left);
    top: var(--gem-modal-copy-top);
    right: var(--gem-modal-copy-right);
    bottom: var(--gem-modal-copy-bottom);
    max-width: var(--gem-modal-copy-max);
    justify-content: center;
    z-index: 2;
  }

  .gem-modal--citrine .gem-modal__pods {
    /* Bottom turmeric — pin bottom-right */
    --gem-modal-pods-left: auto;
    --gem-modal-pods-right: -22%;
    --gem-modal-pods-top: auto;
    --gem-modal-pods-bottom: -8%;
    --gem-modal-pods-w: 128%;
    --gem-modal-pods-max-h: min(530px, 54vh);

    position: absolute;
    left: var(--gem-modal-pods-left);
    right: var(--gem-modal-pods-right);
    top: var(--gem-modal-pods-top);
    bottom: var(--gem-modal-pods-bottom);
    width: var(--gem-modal-pods-w);
    max-height: var(--gem-modal-pods-max-h);
  }

  .gem-modal--citrine .gem-modal__pods img {
    width: 100%;
    max-height: var(--gem-modal-pods-max-h);
    object-fit: contain;
    object-position: right bottom;
  }

  @supports (height: 100dvh) {
    .gem-modal--citrine .gem-modal__gems {
      --gem-modal-gems-max-h: min(400px, 36dvh);
    }

    .gem-modal--citrine .gem-modal__copy {
      --gem-modal-copy-top: 24dvh;
      --gem-modal-copy-bottom: 26dvh;
    }

    .gem-modal--citrine .gem-modal__pods {
      --gem-modal-pods-max-h: min(530px, 54dvh);
    }
  }
}
/* Hero — layout residue for decorative bubbles (shell/LQIP stay critical in index.html). */

/* Figma 123:139 — Her Again logo 268×73; nudge left for SVG viewBox padding */
.hero__logo {
  --hero-logo-width: 200px;
  --hero-logo-nudge-x: -4px;

  width: var(--hero-logo-width);
  margin-left: var(--hero-logo-nudge-x);
}

/* Figma 23:373 — lede 222×52 (narrower than logo) */
.hero__lede {
  --hero-lede-max: 222px;

  max-width: var(--hero-lede-max);
}

@media (min-width: 768px) {
  .hero__logo {
    --hero-logo-width: 268px;
    --hero-logo-nudge-x: -5px;
    --hero-logo-shift-y: -40px;
    --hero-logo-scale: 1.05;

    transform: translateY(var(--hero-logo-shift-y)) scale(var(--hero-logo-scale));
  }
}

.hero-scene {
  /* clip (not hidden): keeps overflow-y visible so bubble--2 can overlay section-2 */
  overflow-x: clip;
}

.hero__lqip.is-dismissed {
  visibility: hidden;
  filter: none;
}

.hero__bubble {
  --hero-bubble-size: clamp(60px, 6vw, 124px);

  width: var(--hero-bubble-size);
  height: var(--hero-bubble-size);
}

/* --1 upper-left hero (clear ring, above “Quiet”) */
.hero__bubble--1 {
  --hero-bubble-size: clamp(150px, 17vw, 340px);
  --hero-bubble-center-x: 26%;
  --hero-bubble-center-y: 30%;

  top: calc(var(--hero-bubble-center-y) - var(--hero-bubble-size) / 2);
  right: auto;
  left: calc(var(--hero-bubble-center-x) - var(--hero-bubble-size) / 2);
}

/* --2 bottom-right hero — lives outside .hero so it can overlay section-2 */
.hero__bubble--2 {
  --hero-bubble-size: clamp(190px, 21vw, 420px);
  --hero-bubble-center-x: 86%;
  --hero-bubble-center-y: 85%;

  top: calc(var(--hero-bubble-center-y) - var(--hero-bubble-size) / 2);
  right: calc(100% - var(--hero-bubble-center-x) - var(--hero-bubble-size) / 2);
  bottom: auto;
  left: auto;
}

/* --3 small, near wand */
.hero__bubble--3 {
  --hero-bubble-size: clamp(60px, 6vw, 124px);
  --hero-bubble-top: 26%;
  --hero-bubble-right: 24%;

  top: var(--hero-bubble-top);
  right: var(--hero-bubble-right);
  left: auto;
}

/* --4 small, mid-bottom-right */
.hero__bubble--4 {
  --hero-bubble-size: clamp(52px, 5vw, 108px);
  --hero-bubble-top: auto;
  --hero-bubble-right: 34%;
  --hero-bubble-bottom: 24%;

  top: auto;
  right: var(--hero-bubble-right);
  bottom: var(--hero-bubble-bottom);
  left: auto;
}

/* --5 small, bottom-left */
.hero__bubble--5 {
  --hero-bubble-size: clamp(52px, 5vw, 108px);
  --hero-bubble-left: 28%;
  --hero-bubble-bottom: 22%;

  top: auto;
  right: auto;
  bottom: var(--hero-bubble-bottom);
  left: var(--hero-bubble-left);
}

/* --6 small bottom-left — 25% from left edge */
.hero__bubble--6 {
  --hero-bubble-size: clamp(52px, 5vw, 108px);
  --hero-bubble-center-x: 25%;
  --hero-bubble-center-y: 82%;

  top: calc(var(--hero-bubble-center-y) - var(--hero-bubble-size) / 2);
  right: auto;
  left: calc(var(--hero-bubble-center-x) - var(--hero-bubble-size) / 2);
}

@media (min-width: 768px) {
  .hero__bubble--1 {
    --hero-bubble-center-x: 23%;
    --hero-bubble-center-y: 30%;
  }

  .hero__bubble--2 {
    --hero-bubble-center-x: 86%;
    --hero-bubble-center-y: 85%;
  }

  .hero__bubble--3 {
    --hero-bubble-top: 24%;
    --hero-bubble-right: 22%;
  }

  .hero__bubble--4 {
    --hero-bubble-right: 32%;
    --hero-bubble-bottom: 22%;
  }

  .hero__bubble--5 {
    --hero-bubble-left: 26%;
    --hero-bubble-bottom: 20%;
  }

  .hero__bubble--6 {
    --hero-bubble-center-x: 25%;
    --hero-bubble-center-y: 80%;
  }
}

@media (min-width: 1200px) {
  .hero__bubble--1 {
    --hero-bubble-center-x: 20%;
    --hero-bubble-center-y: 30%;
  }

  .hero__bubble--2 {
    --hero-bubble-center-x: 87%;
    --hero-bubble-center-y: 86%;
  }

  .hero__bubble--3 {
    --hero-bubble-top: 22%;
    --hero-bubble-right: 21%;
  }

  .hero__bubble--4 {
    --hero-bubble-right: 30%;
    --hero-bubble-bottom: 20%;
  }

  .hero__bubble--5 {
    --hero-bubble-left: 24%;
    --hero-bubble-bottom: 18%;
  }

  .hero__bubble--6 {
    --hero-bubble-center-x: 25%;
    --hero-bubble-center-y: 78%;
  }
}

/* Short desktop only (lg+): shrink bubbles so they don’t dominate the cropped frame */
@media (min-width: 992px) and (max-height: 700px) {
  .hero__bubble--1 {
    --hero-bubble-size: clamp(100px, 12vw, 220px);
    --hero-bubble-center-y: 28%;
  }

  .hero__bubble--2 {
    --hero-bubble-size: clamp(120px, 14vw, 260px);
    --hero-bubble-center-y: 82%;
  }

  .hero__bubble--3 {
    --hero-bubble-size: clamp(44px, 4.5vw, 88px);
  }

  .hero__bubble--4,
  .hero__bubble--5,
  .hero__bubble--6 {
    --hero-bubble-size: clamp(40px, 4vw, 80px);
  }
}
/* Section 2 — fragrance intro + Serene Heart feature.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css */

.section-2 {
  --section-2-pad-x: 0;
  --section-2-pad-top: 0;
  --section-2-pad-bottom: 0;

  padding: var(--section-2-pad-top) var(--section-2-pad-x) var(--section-2-pad-bottom);
}

.section-2__inner {
  /* Feature art max width */
  --section-2-inner-max: 1280px;

  max-width: var(--section-2-inner-max);
}

/* Space below poem before film */
.section-2 > .section-2__inner:first-child {
  --section-2-inner-mb: 36px;

  margin-bottom: var(--section-2-inner-mb);
}

/* Mid-right bubble beside the verses */
.section-2__bubble {
  --section-2-bubble-size: clamp(72px, 9vw, 140px);

  width: var(--section-2-bubble-size);
  height: var(--section-2-bubble-size);
}

.section-2__bubble--1 {
  --section-2-bubble-size: clamp(72px, 9vw, 140px);
  --section-2-bubble-left: 48%;
  --section-2-bubble-top: 42%;

  top: var(--section-2-bubble-top);
  left: var(--section-2-bubble-left);
}

/* Small bubble, lower right of the intro band */
.section-2__bubble--2 {
  --section-2-bubble-size: clamp(36px, 4.5vw, 72px);
  --section-2-bubble-right: 10%;
  --section-2-bubble-top: 68%;

  top: var(--section-2-bubble-top);
  right: var(--section-2-bubble-right);
  left: auto;
}

.section-2__poem {
  --section-2-poem-max: 342px;
  --section-2-poem-mt: 45px;

  max-width: var(--section-2-poem-max);
  margin-top: var(--section-2-poem-mt);
  gap: 34px;
}

.section-2__verses {
  gap: 29px;
}

/* Bootstrap 4.5.2 has no text-decoration utility (BS5 only) */
.section-2__cta {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.section-2__cta:hover,
.section-2__cta:focus {
  opacity: var(--opacity-muted);
}

/* Quote — type-quote role */
.section-2__quote {
  --section-2-quote-mt: 24px;
  --section-2-quote-pad-x: var(--pad-x-mobile);

  margin-top: var(--section-2-quote-mt);
  padding-left: var(--section-2-quote-pad-x);
  padding-right: var(--section-2-quote-pad-x);
}

.section-2__figure {
  /* Match quote / section mobile pad */
  --section-2-figure-pad: var(--pad-x-mobile);
  --section-2-figure-mt: 24px;

  margin-top: var(--section-2-figure-mt);
  margin-right: var(--section-2-figure-pad);
  margin-left: var(--section-2-figure-pad);
  width: calc(100% - (2 * var(--section-2-figure-pad)));
}

@media (max-width: 767.98px) {
  .section-2__figure {
    /* Figma mobile frame */
    --section-2-figure-ratio: 350 / 440;

    aspect-ratio: var(--section-2-figure-ratio);
  }

  .section-2__figure-img--mobile {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.section-2__feature-stage {
  /* Mobile feature stage — width 100%, height from ratio */
  --section-2-feature-stage-ratio: 390 / 719;

  aspect-ratio: var(--section-2-feature-stage-ratio);
}

.section-2__bg {
  top: 0;
  left: 0;
}

.section-2__feature-stage > .section-2__bg {
  right: 0;
  bottom: 0;
}

/* Mobile feature copy overlays */
.section-2__feature-copy--mobile {
  top: 0;
  left: 0;
}

.section-2__title--mobile {
  --section-2-title-top: calc(100 / 719 * 100%);
  --section-2-title-left: calc(40 / 390 * 100%);
  --section-2-title-max: calc(259 / 390 * 100%);

  top: var(--section-2-title-top);
  left: var(--section-2-title-left);
  max-width: var(--section-2-title-max);
}

.section-2__product-lede--mobile {
  --section-2-lede-top: calc(560 / 719 * 100%);
  --section-2-lede-left: calc(40 / 390 * 100%);
  --section-2-lede-max: calc(257 / 390 * 100%);

  top: var(--section-2-lede-top);
  left: var(--section-2-lede-left);
  max-width: var(--section-2-lede-max);
}

.section-2__product-name--mobile {
  --section-2-name-top: calc(508 / 719 * 100%);
  --section-2-name-left: calc(40 / 390 * 100%);
  --section-2-name-max: calc(257 / 390 * 100%);

  top: var(--section-2-name-top);
  left: var(--section-2-name-left);
  max-width: var(--section-2-name-max);
}

/* Absolute fill — figure is already inset via margin. */
.section-2__figure > .section-2__bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media (min-width: 768px) {
  .section-2 {
    --section-2-pad-x: 48px;
    --section-2-pad-top: 80px;
    --section-2-pad-bottom: 80px;
  }

  .section-2__poem {
    --section-2-poem-mt: 0;
  }

  .section-2__bubble--1 {
    --section-2-bubble-left: 46%;
    --section-2-bubble-top: 36%;
  }

  .section-2__bubble--2 {
    --section-2-bubble-right: 14%;
    --section-2-bubble-top: 62%;
  }

  .section-2__quote {
    /* Desktop quote max width */
    --section-2-quote-max: 664px;
    --section-2-quote-mt: 96px;
    --section-2-quote-pad-x: 0;

    max-width: var(--section-2-quote-max);
  }

  .section-2__figure {
    --section-2-figure-pad: 0;
    --section-2-gap: 40px;
  }

  .section-2__feature {
    --section-2-gap: 96px;
  }

  .section-2__figure-img--desktop {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .section-2__feature-img {
    top: 50%;
    left: 0;
  }

  /* Soft backdrop behind desktop copy — lighten softens sand */
  .section-2__feature-contrast {
    --section-2-feature-contrast-w: 55.27%;
    --section-2-feature-contrast-h: 100%;
    --section-2-feature-contrast-left: -10%;
    --section-2-feature-contrast-top: 54%;

    top: var(--section-2-feature-contrast-top);
    left: var(--section-2-feature-contrast-left);
    width: var(--section-2-feature-contrast-w);
    height: var(--section-2-feature-contrast-h);
    max-width: none;
    transform: translateY(-50%);
    mix-blend-mode: lighten;
  }

  .section-2__figure {
    /* Source ks03 5088×2860 — natural aspect, no viewport height fit */
    --section-2-figure-aspect: 5088 / 2860;
    --section-2-figure-max: 1272px;

    margin-top: var(--section-2-gap);
    aspect-ratio: var(--section-2-figure-aspect);
    max-width: var(--section-2-figure-max);
  }

  .section-2__feature {
    /* Width stays up to 1280; height caps at min(700, under-header vh) */
    --section-2-feature-aspect: 1280 / 680;
    --section-2-feature-max: 1280px;
    --section-2-feature-h: 700px;
    --section-2-feature-view-h: calc(var(--dvh, 1vh) * 100 - var(--header-height, 74px));
    --section-2-feature-max-h: min(
      var(--section-2-feature-h),
      var(--section-2-feature-view-h)
    );

    margin-top: var(--section-2-gap);
    aspect-ratio: var(--section-2-feature-aspect);
    width: min(
      100%,
      var(--section-2-feature-max),
      calc(var(--section-2-feature-max-h) * 1280 / 680)
    );
    max-width: min(100%, var(--section-2-feature-max));
    max-height: var(--section-2-feature-max-h);
    min-height: 0;
  }

  .section-2__feature-copy {
    /* % of frame so copy tracks aspect-locked / viewport-capped size */
    --section-2-feature-pad-x: 3.75%; /* 48 / 1280 */
    --section-2-feature-pad-top: 11.76%; /* 80 / 680 */
    --section-2-feature-pad-bottom: 9.41%; /* 64 / 680 */
    --section-2-feature-title-max: 328px;
    --section-2-feature-lede-max: 295px;

    top: var(--section-2-feature-pad-top);
    right: auto;
    bottom: var(--section-2-feature-pad-bottom);
    left: var(--section-2-feature-pad-x);
    gap: 14px;
  }

  .section-2__feature-copy .section-2__title {
    max-width: var(--section-2-feature-title-max);
  }

  .section-2__product-lede {
    max-width: var(--section-2-feature-lede-max);
  }
}

@media (min-width: 1200px) {
  .section-2 {
    --section-2-pad-x: 80px;
    --section-2-pad-top: 80px;
    --section-2-pad-bottom: 50px;
  }

  .section-2__bubble--1 {
    --section-2-bubble-left: 42%;
    --section-2-bubble-top: 32%;
  }

  .section-2__bubble--2 {
    --section-2-bubble-right: 18%;
    --section-2-bubble-top: 58%;
  }

  .section-2__intro {
    /* Poem inset from content edge */
    padding-left: 220px;
  }

  .section-2__quote {
    --section-2-quote-mt: 80px;
  }

  .section-2__figure {
    --section-2-gap: 40px;
  }

  .section-2__feature {
    --section-2-gap: 80px;
  }

  .section-2__feature-copy {
    --section-2-feature-pad-x: 8.13%; /* 104 / 1280 */
    --section-2-feature-pad-top: 23.53%; /* 160 / 680 */
    --section-2-feature-pad-bottom: 16.47%; /* 112 / 680 */
  }
}
/* Film — frame rise + scale scrub (all viewports via GSAP).
   Flex/type/color via Bootstrap 4.5.2 + project utilities. */

.film-wrap {
  /* Break out of .section-2 pad to true section edge (must grow width; w-100 alone won’t). */
  --film-wrap-bleed: var(--section-2-pad-x, 0px);

  width: calc(100% + 2 * var(--film-wrap-bleed));
  max-width: none;
  margin-left: calc(-1 * var(--film-wrap-bleed));
  margin-right: calc(-1 * var(--film-wrap-bleed));
  overflow-x: clip;
}

.film {
  /* Rise headroom — keep pad ≈ 2× rise so net gap before frame = rise */
  --film-pad-top: 16vh;

  padding-top: var(--film-pad-top);
}

.film__clip {
  --film-clip-mt: -8vh;

  margin-top: var(--film-clip-mt);
}

.film__frame {
  /* Layout box = end size; GSAP scales down from 70vw × startH via transform.
     Max contain in 100vw × (1vh − header); leftover balanced by sticky flex center. */
  --film-frame-mb: 0;
  --film-frame-radius: 0;
  --film-frame-max-h: calc(100vh - var(--header-height, 74px));
  --film-frame-ratio: 9 / 16;

  width: min(100vw, calc(var(--film-frame-max-h) * 9 / 16));
  max-width: none;
  max-height: var(--film-frame-max-h);
  height: unset;
  margin-bottom: var(--film-frame-mb);
  border-radius: var(--film-frame-radius);
  aspect-ratio: var(--film-frame-ratio);
  transform-origin: center center;
  will-change: transform;
  flex-shrink: 0;
}

/* Desktop: landscape 16:9 masters. */
@media (min-width: 768px) {
  .film__frame {
    --film-frame-ratio: 16 / 9;

    width: min(100vw, calc(var(--film-frame-max-h) * 16 / 9));
  }
}

.film__video {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.film__play-wrap {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.film__play {
  --film-play-size: 48px;

  width: var(--film-play-size);
  height: var(--film-play-size);
  max-width: var(--film-play-size);
  max-height: var(--film-play-size);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.film__play-icon {
  --film-play-icon-size: 48px;

  width: var(--film-play-icon-size);
  height: var(--film-play-icon-size);
  max-width: var(--film-play-icon-size);
  max-height: var(--film-play-icon-size);
}

.film__play:hover,
.film__play:focus {
  transform: scale(1.06);
  outline: none;
}

.film__play:focus-visible {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blush-800);
}

.film__load {
  --film-load-size: 48px;
  --film-load-c: 188.5;
  --film-load-p: 0;

  width: var(--film-load-size);
  height: var(--film-load-size);
  max-width: var(--film-load-size);
  max-height: var(--film-load-size);
}

.film__load-ring {
  transform: rotate(-90deg);
}

.film__load-track,
.film__load-bar {
  fill: none;
  stroke-width: 3px;
}

.film__load-track {
  stroke: rgba(255, 255, 255, 0.35);
}

.film__load-bar {
  stroke: var(--color-white);
  stroke-linecap: round;
  stroke-dasharray: var(--film-load-c);
  stroke-dashoffset: calc(var(--film-load-c) * (1 - var(--film-load-p)));
  transition: stroke-dashoffset 0.15s linear;
}

/* Mobile: no rise headroom — layout bottom matches video (24px gap via quote mt).
   Portrait 9:16 — locked --dvh so address-bar resize does not bounce height. */
@media (max-width: 767.98px) {
  .film {
    --film-pad-top: 0;
  }

  .film__clip {
    --film-clip-mt: 0;
  }

  .film__frame {
    --film-frame-max-h: calc(
      var(--dvh, 1vh) * 100 - var(--header-height, 74px)
    );
  }
}
/* Section 6 — lede + portrait gallery.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css */

.section-6 {
  --section-6-pad-x: var(--pad-x-mobile);
  --section-6-pad-t: 0;
  --section-6-pad-b: 32px;

  padding: var(--section-6-pad-t) var(--section-6-pad-x) var(--section-6-pad-b);
}

.section-6__inner {
  --section-6-inner-max: 1280px;

  max-width: var(--section-6-inner-max);
  /* Figma 747:296 — gap 24 between lede and gallery stack */
  gap: 24px;
}

.section-6__lede {
  /* Figma 747:297 */
  --section-6-lede-max: 282px;

  max-width: var(--section-6-lede-max);
}

.section-6__gallery--mobile {
  gap: 24px;
}

.section-6__frame--primary {
  /* Mobile frame — 330×396 */
  --section-6-frame-ratio: 330 / 396;

  aspect-ratio: var(--section-6-frame-ratio);
}

.section-6__frame--full {
  /* Desktop single frame — 1280×705 */
  --section-6-frame-h: 560px;

  min-height: var(--section-6-frame-h);
}

.section-6__img {
  top: 0;
  left: 0;
}

/* Rain droplet overlay — black knocks out via screen; highlights stay.
   Canvas stamps an invisible brush mask (section-11-style) to clear drops. */
.section-6__rain,
.section-6__rain-canvas {
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}

@media (min-width: 768px) {
  .section-6 {
    --section-6-pad-x: 48px;
    --section-6-pad-t: 80px;
    --section-6-pad-b: 80px;
  }

  .section-6__inner {
    --section-6-inner-max: var(--inner-max);
    gap: 40px;
  }

  .section-6__lede {
    --section-6-lede-max: 780px;
  }

  .section-6__frame--full {
    --section-6-frame-h: 560px;
  }
}

@media (min-width: 1200px) {
  .section-6 {
    --section-6-pad-x: 80px;
    --section-6-pad-t: 50px;
    --section-6-pad-b: 20px;
  }

  .section-6__frame--full {
    --section-6-frame-h: 705px;
  }
}
/* Section 4 — alchemy intro + dual jewelry gallery.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css */

.section-4 {
  --section-4-pad-x: var(--pad-x-mobile);
  --section-4-pad-t: 0;
  --section-4-pad-b: 24px;

  padding: var(--section-4-pad-t) var(--section-4-pad-x) var(--section-4-pad-b);
}

.section-4__inner {
  --section-4-inner-max: 1280px;
  --section-4-gap: 24px;

  max-width: var(--section-4-inner-max);
  gap: var(--section-4-gap);
}

.section-4__intro {
  /* Intro max width — mobile 350; desktop 526 */
  --section-4-intro-max: 350px;
  --section-4-intro-gap: 24px;

  max-width: var(--section-4-intro-max);
  gap: var(--section-4-intro-gap);
}

.section-4__title {
  /* Title max width — mobile 312; desktop 443 */
  --section-4-title-max: 312px;

  max-width: var(--section-4-title-max);
}

.section-4__gallery {
  --section-4-gallery-gap: 24px;

  gap: var(--section-4-gallery-gap);
}

.section-4__primary {
  --section-4-primary-min-h: 320px;

  min-height: var(--section-4-primary-min-h);
}

.section-4__primary-img {
  top: 0;
  left: 0;
}

/* Tall preview asset — full width, centred; JS yPercent -50 + Y scrub */
.section-4__primary-photo {
  top: 50%;
  left: 0;
}

.section-4__product-name {
  --section-4-product-inset-x: 24px;
  --section-4-product-inset-y: 24px;
  --section-4-product-max: 284px;

  left: var(--section-4-product-inset-x);
  bottom: var(--section-4-product-inset-y);
  max-width: var(--section-4-product-max);
}

.section-4__secondary {
  /* Mobile row: image | caption */
  --section-4-secondary-gap: 16px;

  gap: var(--section-4-secondary-gap);
}

.section-4__secondary-img {
  /* Secondary image aspect; flex-basis 0 = equal share with caption */
  --section-4-secondary-img-ratio: 1512 / 2184;

  aspect-ratio: var(--section-4-secondary-img-ratio);
  flex-basis: 0;
  min-width: 0;
}

.section-4__secondary-img img {
  top: 0;
  left: 0;
}

.section-4__caption {
  flex-basis: 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .section-4 {
    --section-4-pad-x: 48px;
    --section-4-pad-t: 50px;
    --section-4-pad-b: 80px;
  }

  .section-4__inner {
    --section-4-inner-max: var(--inner-max);
    --section-4-gap: 48px;
  }

  .section-4__intro {
    --section-4-intro-max: 526px;
    --section-4-intro-gap: 23px;
  }

  .section-4__title {
    --section-4-title-max: 443px;
  }

  .section-4__primary {
    --section-4-primary-min-h: 480px;
  }

  .section-4__product-name {
    --section-4-product-inset-x: 40px;
    --section-4-product-inset-y: 40px;
  }
}

@media (min-width: 992px) {
  .section-4__primary {
    --section-4-primary-min-h: 622px;
  }

  .section-4__secondary {
    --section-4-secondary-gap: 24px;
    --section-4-secondary-max: 398px;

    max-width: var(--section-4-secondary-max);
  }

  .section-4__secondary-img {
    /* Desktop gem asset 398×575 (source 1512×2184 @4x) */
    --section-4-secondary-img-ratio: 398 / 575;

    flex-basis: auto;
  }

  .section-4__caption {
    --section-4-caption-max: 326px;

    flex-basis: auto;
    max-width: var(--section-4-caption-max);
  }
}

@media (min-width: 1200px) {
  .section-4 {
    --section-4-pad-x: 80px;
    --section-4-pad-t: 50px;
    --section-4-pad-b: 100px;
  }

  .section-4__inner {
    --section-4-gap: 60px;
  }
}
/* Section 5 — ring still life.
   Mobile: copy + right branch + bottom media.
   Desktop: composition-locked overlays on full-bleed asset. */

.section-5 {
  --section-5-pad-top: 48px;
  --section-5-pad-bottom: 0;

  padding: var(--section-5-pad-top) 0 var(--section-5-pad-bottom);
  overflow-x: clip;
}

/* —— Mobile stage —— */

.section-5__media--mobile {
  /* Mobile media — full bleed; cream/ring/text % of this box */
  --section-5-media-ratio: 390 / 489;

  aspect-ratio: var(--section-5-media-ratio);
  /* WebKit: overlap with the 3D branch layer promotes gems/ring to their own
     layers, so multiply has no cream backdrop. One layer here keeps them together. */
  isolation: isolate;
  transform: translateZ(0);
}

.section-5__branch-clip {
  /* Positions the twig layer */
  --section-5-branch-clip-height: 240px;

  top: 0;
  left: 0;
  right: 0;
  height: var(--section-5-branch-clip-height);
}

.section-5__branch {
  /* Decorative twig from top-right (asset pre-oriented) */
  --section-5-branch-width: 70.5%;
  --section-5-branch-top: -88px;
  --section-5-branch-right: -26vw;

  top: var(--section-5-branch-top);
  right: var(--section-5-branch-right);
  width: var(--section-5-branch-width);
}

.section-5__branch--desktop {
  /* Soft twig above copy, top-left of cream */
  --section-5-branch-width: 24%;
  --section-5-branch-top: -12%;
  --section-5-branch-left: -5%;
  --section-5-branch-right: auto;

  top: var(--section-5-branch-top);
  left: var(--section-5-branch-left);
  right: var(--section-5-branch-right);
  width: var(--section-5-branch-width);
}

.section-5__copy--above {
  /* Mobile copy above media */
  --section-5-copy-pad-x: 50px;
  --section-5-copy-pad-top: 27px;
  --section-5-copy-pad-bottom: 6px;
  --section-5-copy-gap: 24px;
  --section-5-copy-to-media: 24px;
  --section-5-copy-max: 311px;

  padding: var(--section-5-copy-pad-top) var(--section-5-copy-pad-x)
    var(--section-5-copy-pad-bottom);
  gap: var(--section-5-copy-gap);
  margin-bottom: var(--section-5-copy-to-media);
  max-width: calc(var(--section-5-copy-max) + var(--section-5-copy-pad-x));
  overflow: visible;
}

.section-5__copy--above .section-5__title {
  --section-5-title-max: 311px;

  max-width: var(--section-5-title-max);
}

.section-5__copy--above .section-5__lede {
  max-width: none;
  overflow: visible;
}

.section-5__product-name--mobile {
  /* Mobile product label */
  --section-5-product-left: calc(26 / 390 * 100%);
  --section-5-product-top: calc(328 / 489 * 100%);
  --section-5-product-max: calc(110 / 390 * 100%);

  left: var(--section-5-product-left);
  top: var(--section-5-product-top);
  max-width: var(--section-5-product-max);
}

/* Mobile gem trail — % of .section-5__media--mobile */
.section-5__gems-mobile {
  --section-5-gems-m-shift-y: -12px;

  top: var(--section-5-gems-m-shift-y);
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--section-5-gems-m-shift-y));
}

.section-5__gem-mobile {
  --section-5-gem-m-left: 0;
  --section-5-gem-m-top: 0;
  --section-5-gem-m-width: 10%;

  left: var(--section-5-gem-m-left);
  top: var(--section-5-gem-m-top);
  width: var(--section-5-gem-m-width);
  mix-blend-mode: multiply;
}

.section-5__gem-mobile--1 {
  --section-5-gem-m-left: 42.56%;
  --section-5-gem-m-top: 47.6%;
  --section-5-gem-m-width: 33.6%;
}

.section-5__gem-mobile--2 {
  --section-5-gem-m-left: 45%;
  --section-5-gem-m-top: 63.6%;
  --section-5-gem-m-width: 48.85%;
}

.section-5__gem-mobile--3 {
  --section-5-gem-m-left: 76%;
  --section-5-gem-m-top: 79%;
  --section-5-gem-m-width: 15.33%;
}

/* —— Desktop overlay —— */

/* Cream panel — positioned as % of desktop stage */
.section-5__bg {
  --section-5-bg-left: 0;
  --section-5-bg-top: calc(58 / 656 * 100%);
  --section-5-bg-width: calc(968 / 1440 * 100%);
  --section-5-bg-height: calc(598 / 656 * 100%);

  top: var(--section-5-bg-top);
  left: var(--section-5-bg-left);
  width: var(--section-5-bg-width);
  height: var(--section-5-bg-height);
}

/*
  Desktop ring — qq.png is a tight crop (311×350) vs old 879×762
  (jewelry ~263px + long shadow). Width/position match prior jewelry
  size + center so the larger-framed asset doesn't overpower.
*/
.section-5__ring {
  --section-5-ring-left: calc(490 / 1440 * 100%);
  --section-5-ring-top: calc(-20 / 656 * 100%);
  --section-5-ring-width: calc(356 / 1440 * 100%);

  left: var(--section-5-ring-left);
  top: var(--section-5-ring-top);
  width: var(--section-5-ring-width);
}

/* Mobile cream panel */
.section-5__bg--mobile {
  --section-5-bg-m-top: calc(36 / 489 * 100%);
  --section-5-bg-m-height: calc(337 / 489 * 100%);

  top: var(--section-5-bg-m-top);
  left: 0;
  right: 0;
  height: var(--section-5-bg-m-height);
}

/*
  Mobile ring — ~168px jewelry width; new asset jewelry ≈ 230/311,
  so asset width shrinks vs the old shadow-padded crop. left/top re-pinned
  to the prior jewelry center.
*/
.section-5__ring--mobile {
  --section-5-ring-left: calc(64 / 390 * 100%);
  --section-5-ring-top: calc(8 / 489 * 100%);
  --section-5-ring-width: calc((168 / 390) / (230 / 311) * 100%);

  left: var(--section-5-ring-left);
  top: var(--section-5-ring-top);
  width: var(--section-5-ring-width);
}

.section-5__copy--overlay {
  /* Desktop title / lede overlay */
  --section-5-copy-left: calc(169 / 1440 * 100%);
  --section-5-copy-top: calc(244 / 656 * 100%);
  --section-5-copy-gap: 29px;
  --section-5-copy-max: 325px;

  left: var(--section-5-copy-left);
  top: var(--section-5-copy-top);
  max-width: var(--section-5-copy-max);
  gap: var(--section-5-copy-gap);
}

.section-5__copy--overlay .section-5__title {
  --section-5-title-max: 325px;

  max-width: var(--section-5-title-max);
}

.section-5__copy--overlay .section-5__lede {
  --section-5-lede-max: 290px;

  max-width: var(--section-5-lede-max);
}

.section-5__product-name--desktop {
  /* Desktop product label */
  --section-5-product-left: calc(775 / 1440 * 100%);
  --section-5-product-top: calc(580 / 656 * 100%);
  --section-5-product-max: 161px;

  left: var(--section-5-product-left);
  top: var(--section-5-product-top);
  max-width: var(--section-5-product-max);
}

/* Desktop gem trail — left/top/width as % of stage.
   Base + shine are siblings at the same slot. Multiply is on the base
   element itself (same node GSAP transforms) so white knocks out on cream. */
.section-5__gem {
  --section-5-gem-left: 0;
  --section-5-gem-top: 0;
  --section-5-gem-width: 10%;

  left: var(--section-5-gem-left);
  top: var(--section-5-gem-top);
  width: var(--section-5-gem-width);
}

.section-5__gem-base {
  mix-blend-mode: multiply;
}

.section-5__gem--1 {
  /* Under ring shank */
  --section-5-gem-left: 51.11%;
  --section-5-gem-top: 33.16%;
  --section-5-gem-width: 10.9%;
}

.section-5__gem--2 {
  --section-5-gem-left: 61.32%;
  --section-5-gem-top: 40.11%;
  --section-5-gem-width: 6.6%;
}

.section-5__gem--3 {
  --section-5-gem-left: 62.01%;
  --section-5-gem-top: 44.79%;
  --section-5-gem-width: 14.86%;
}

.section-5__gem--4 {
  --section-5-gem-left: 70.21%;
  --section-5-gem-top: 51.34%;
  --section-5-gem-width: 13.26%;
}

.section-5__gem--5 {
  --section-5-gem-left: 75.07%;
  --section-5-gem-top: 59.36%;
  --section-5-gem-width: 11.6%;
}

.section-5__gem--6 {
  /* Trail tip */
  --section-5-gem-left: 86.67%;
  --section-5-gem-top: 69.52%;
  --section-5-gem-width: 5.97%;
}

@media (min-width: 768px) {
  .section-5 {
    --section-5-pad-top: 0;
    --section-5-pad-bottom: 64px;
  }

  /* Desktop stage aspect */
  .section-5__media--desktop {
    --section-5-media-ratio: 1440 / 656;

    aspect-ratio: var(--section-5-media-ratio);
  }
}

@media (min-width: 1200px) {
  .section-5 {
    --section-5-pad-bottom: 0;
  }

  .section-5__copy--overlay {
    --section-5-copy-gap: 29px;
    --section-5-copy-max: 325px;
  }

  .section-5__copy--overlay .section-5__title {
    --section-5-title-max: 325px;
  }

  .section-5__copy--overlay .section-5__lede {
    --section-5-lede-max: 290px;
  }
}
/* Section 8 — product photo + technical sketch dual panel.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css */

.section-8 {
  --section-8-pad-x: var(--pad-x-mobile);
  --section-8-pad-top: 32px;
  --section-8-pad-bottom: 64px;

  padding: var(--section-8-pad-top) var(--section-8-pad-x) var(--section-8-pad-bottom);
}

.section-8__gallery {
  --section-8-gallery-gap: 16px;
  --section-8-gallery-max: 1280px;

  max-width: var(--section-8-gallery-max);
  gap: var(--section-8-gallery-gap);
}

.section-8__photo {
  --section-8-panel-min-h: 480px;

  min-height: var(--section-8-panel-min-h);
}

/* Mobile sketch: match asset 1400×1736 so full image stays visible */
.section-8__sketch {
  --section-8-panel-aspect: 1400 / 1736;
  --section-8-panel-min-h: 0;

  aspect-ratio: var(--section-8-panel-aspect);
  min-height: var(--section-8-panel-min-h);
}

.section-8__sketch-media {
  top: 0;
  left: 0;
}

.section-8__img {
  top: 0;
  left: 0;
}

/* Tall photo/sketch — full width; JS yPercent -50 + Y scrub (no scale) */
.section-8__photo-img {
  --section-8-photo-top: 50%;

  top: var(--section-8-photo-top);
  left: 0;
}

.section-8__sketch-img {
  --section-8-sketch-top: 0;

  top: var(--section-8-sketch-top);
  left: 0;
}

/* Photo / desktop-sketch copy on image */
.section-8__copy {
  --section-8-copy-inset-x: 24px;
  --section-8-copy-inset-y: 24px;
  --section-8-copy-gap: 14px;
  --section-8-copy-max: 280px;

  left: var(--section-8-copy-inset-x);
  bottom: var(--section-8-copy-inset-y);
  right: auto;
  max-width: var(--section-8-copy-max);
  gap: var(--section-8-copy-gap);
}

/* Mobile sketch copy — Figma 171:1081: left 28 / bottom 28 / gap 14 / max 293 */
.section-8__copy--after {
  --section-8-copy-inset-x: 28px;
  --section-8-copy-inset-y: 28px;
  --section-8-copy-gap: 14px;
  --section-8-copy-max: 293px;

  left: var(--section-8-copy-inset-x);
  bottom: var(--section-8-copy-inset-y);
  right: auto;
  max-width: var(--section-8-copy-max);
  gap: var(--section-8-copy-gap);
}

.section-8__lede {
  --section-8-lede-max: 100%;

  max-width: var(--section-8-lede-max);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .section-8 {
    --section-8-pad-x: 48px;
    --section-8-pad-top: 80px;
    --section-8-pad-bottom: 80px;
  }

  .section-8__gallery {
    --section-8-gallery-max: var(--inner-max);
    --section-8-gallery-gap: 24px;
  }

  .section-8__photo,
  .section-8__sketch {
    --section-8-panel-aspect: auto;
    --section-8-panel-min-h: 676px;
  }

  .section-8__sketch-img {
    /* Center tall asset without JS parallax (md+ desktop sketch) */
    --section-8-sketch-top: 50%;

    transform: translateY(-50%);
  }

  .section-8__copy {
    --section-8-copy-inset-x: 40px;
    --section-8-copy-inset-y: 40px;
    --section-8-copy-max: 100%;

    right: var(--section-8-copy-inset-x);
  }
}

@media (min-width: 992px) {
  .section-8__photo,
  .section-8__sketch {
    /* Shorter than sketch asset (564×772); photo keeps Y scrub bleed */
    --section-8-panel-aspect: 564 / 700;
    --section-8-panel-min-h: 676px;
    --section-8-panel-max-h: max(
      676px,
      calc(var(--dvh, 1vh) * 100 - var(--header-height, 74px))
    );

    aspect-ratio: var(--section-8-panel-aspect);
    max-height: var(--section-8-panel-max-h);
    max-width: min(100%, calc(var(--section-8-panel-max-h) * 564 / 700));
    min-height: var(--section-8-panel-min-h);
  }

  .section-8__copy {
    --section-8-copy-inset-x: 53px;
    --section-8-copy-inset-y: 43px;
    --section-8-copy-max: 462px;

    right: auto;
  }

  .section-8__lede {
    --section-8-lede-max: 462px;
  }
}

/* Short desktop: drop the portrait lock so panels fill the column at full
   under-header height; sketch letterboxes on its matching wash edge. */
@media (min-width: 992px) and (max-height: 700px) {
  .section-8__photo,
  .section-8__sketch {
    --section-8-panel-aspect: auto;

    height: var(--section-8-panel-max-h);
    max-width: none;
  }

  /* Lift the ring into the band above the bottom-left copy */
  .section-8__photo-img {
    --section-8-photo-top: 44%;
  }

  .section-8__sketch-img {
    --section-8-sketch-top: 50%;
  }

  .section-8__copy {
    --section-8-copy-inset-x: 32px;
    --section-8-copy-inset-y: 32px;
    --section-8-copy-gap: 10px;
    --section-8-copy-max: 400px;
  }

  .section-8__lede {
    --section-8-lede-max: 400px;
  }
}

@media (min-width: 1200px) {
  .section-8 {
    --section-8-pad-x: 80px;
    --section-8-pad-top: 80px;
    --section-8-pad-bottom: 80px;
  }
}
/* Section 7 — mobile still + desktop pinned video with timed copy.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css */

.section-7 {
  --section-7-pad-x: var(--pad-x-mobile);
  --section-7-pad-top: 32px;
  --section-7-pad-bottom: 0;

  padding: var(--section-7-pad-top) var(--section-7-pad-x) var(--section-7-pad-bottom);
}

/* Mobile title above image */
.section-7__copy--above {
  --section-7-copy-to-media: 44px;

  margin-bottom: var(--section-7-copy-to-media);
}

.section-7__copy--above .section-7__title {
  --section-7-title-max: 267px;
  --lh-heading: 1.05;

  max-width: var(--section-7-title-max);
}

/* Mobile product title + lede below image */
.section-7__copy--below {
  --section-7-copy-gap: 24px;
  --section-7-media-to-copy: 44px;

  gap: var(--section-7-copy-gap);
  margin-top: var(--section-7-media-to-copy);
}

.section-7__copy--below .section-7__lede {
  max-width: none;
}

.section-7__media {
  --section-7-media-max: 1280px;

  max-width: var(--section-7-media-max);
}

/* Tall frame 350×546 — full necklace; JS zooms toward the pendant */
.section-7__media--mobile {
  --section-7-media-ratio: 350 / 546;

  aspect-ratio: var(--section-7-media-ratio);
}

.section-7__reveal {
  top: 0;
  left: 0;
}

/* Pendant cutout under the photo — left/top/width/height set by JS to its
   zoomed position so the bottom clip reveals it in place. */
.section-7__cutout {
  top: 0;
  left: 0;
}

/* Desktop pin shell — viewport under the header (scrub mode) */
.section-7__pin {
  --section-7-pin-pad: 24px;
  --section-7-pin-view-h: calc(var(--dvh, 1vh) * 100 - var(--header-height, 74px));
  --section-7-pin-min-h: var(--section-7-pin-view-h);

  min-height: var(--section-7-pin-min-h);
}

/* Video failed / reduced-motion: size to painted stage only (no empty viewport gap) */
.section-7__pin--static {
  --section-7-pin-min-h: 0;

  min-height: 0;
}

/*
  Painted video rect — contain-fit 1436×952 inside the pin, flex-centered.
  Max height leaves equal pin-pad top + bottom under the header.
  width = min(W, max, H * R); height from aspect-ratio.
*/
.section-7__stage {
  --section-7-pin-pad: 24px;
  --section-7-stage-ratio: 1436 / 952;
  --section-7-stage-h: calc(
    var(--dvh, 1vh) * 100 - var(--header-height, 74px) - 2 * var(--section-7-pin-pad)
  );
  --section-7-stage-max: 1280px;

  width: min(100%, var(--section-7-stage-max), calc(var(--section-7-stage-h) * 1436 / 952));
  max-height: var(--section-7-stage-h);
  aspect-ratio: var(--section-7-stage-ratio);
}

.section-7__poster {
  top: 0;
  left: 0;
}

/* Copy over painted video — inset from stage left (0% was too flush) */
.section-7__video-copy {
  --section-7-video-copy-left: 10%;
  --section-7-video-copy-top: 42%;
  --section-7-video-copy-gap: 37px;
  --section-7-video-copy-max: 328px;

  left: var(--section-7-video-copy-left);
  top: var(--section-7-video-copy-top);
  max-width: var(--section-7-video-copy-max);
  gap: var(--section-7-video-copy-gap);
}

.section-7__video-copy .section-7__title {
  --section-7-title-max: 328px;
  --lh-heading: 1.05;

  max-width: var(--section-7-title-max);
}

.section-7__video-copy .section-7__lede {
  --section-7-lede-max: 290px;

  max-width: var(--section-7-lede-max);
}

@media (min-width: 768px) {
  .section-7 {
    --section-7-pad-x: 48px;
    --section-7-pad-top: 0;
    --section-7-pad-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .section-7 {
    --section-7-pad-x: 90px;
  }
}
/* Section 7-image — 1160 frame; main image zooms, then bottom-clips to reveal a cutout.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2 + project utilities */

.section-7-image {
  --section-7-image-pad-x: 0;
  --section-7-image-pad-y: 0;

  padding: var(--section-7-image-pad-y) var(--section-7-image-pad-x);
}

.section-7-image__inner {
  /* Same content column as section-6__frame--full (pad + --inner-max) */
  --section-7-image-inner-max: var(--inner-max);
  --section-7-image-ratio: 1160 / 714;
  --section-7-image-view-h: calc(var(--dvh, 1vh) * 100 - var(--header-height, 74px));
  /* Breathing room under the header on tall viewports; cleared when short */
  --section-7-image-gutter-y: 24px;
  /* Must match CLIP_AMOUNT in section-7-image.js (bottom clip reveal) */
  --section-7-image-clip-amount: 25%;

  max-width: var(--section-7-image-inner-max);
  max-height: calc(var(--section-7-image-view-h) - 2 * var(--section-7-image-gutter-y));
  aspect-ratio: var(--section-7-image-ratio);
}

/* Short viewports: fill under the header — no top/bottom gap */
@media (max-height: 700px) {
  .section-7-image__inner {
    /* Must keep the unit — unitless 0 makes the max-height calc() invalid */
    --section-7-image-gutter-y: 0px;
  }
}

@media (min-width: 768px) {
  .section-7-image {
    /* Match section-6 desktop side inset */
    --section-7-image-pad-x: 48px;
  }
}

@media (min-width: 1200px) {
  .section-7-image {
    --section-7-image-pad-x: 80px;
  }
}

/* Pendant cutout under the main image — left/top/width/height set by JS
   to its zoomed position so the bottom clip reveals it in place. */
.section-7-image__cutout {
  top: 0;
  left: 0;
}

/* Soft glows under copy — wrapper is frame-sized so left+right share the bg clip */
.section-7-image__glows {
  top: 0;
  left: 0;
}

/* Soft glow under left title — bottom pinned to the clip line; melts out at edge */
.section-7-image__glow {
  --section-7-image-glow-left-w: 62%;
  --section-7-image-glow-h: calc(100% - var(--section-7-image-clip-amount) + 58%);
  --section-7-image-glow-left: -12%;
  --section-7-image-glow-shift-y: 38%;
  --section-7-image-glow-melt: linear-gradient(
    to bottom,
    black 0%,
    black 62%,
    rgba(0, 0, 0, 0.45) 82%,
    transparent 100%
  );

  top: auto;
  bottom: var(--section-7-image-clip-amount);
  left: var(--section-7-image-glow-left);
  width: var(--section-7-image-glow-left-w);
  height: var(--section-7-image-glow-h);
  max-width: none;
  opacity: 0.9;
  mix-blend-mode: screen;
  transform: translateY(var(--section-7-image-glow-shift-y));
  -webkit-mask-image: var(--section-7-image-glow-melt);
  mask-image: var(--section-7-image-glow-melt);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Mirror for right-side meta — soft radial melt so box edges don’t read as a hard rect */
.section-7-image__glow--right {
  --section-7-image-glow-right-w: 45%;
  --section-7-image-glow-right: 6%;
  --section-7-image-glow-right-top: 40%;
  --section-7-image-glow-h: calc(100% - var(--section-7-image-clip-amount) + 12%);
  --section-7-image-glow-melt: radial-gradient(
    ellipse 72% 68% at 50% 42%,
    black 0%,
    black 28%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.18) 68%,
    transparent 82%
  );

  top: var(--section-7-image-glow-right-top);
  left: auto;
  right: var(--section-7-image-glow-right);
  width: var(--section-7-image-glow-right-w);
  height: var(--section-7-image-glow-h);
  transform: scaleX(-1);
}

/* Title + meta — one bottom band so title top matches product-name top */
.section-7-image__band {
  --section-7-image-band-bottom: calc(var(--section-7-image-clip-amount) + 8px);
  --section-7-image-band-pad-x: 6%;

  left: 0;
  top: auto;
  bottom: var(--section-7-image-band-bottom);
  padding-left: var(--section-7-image-band-pad-x);
  padding-right: var(--section-7-image-band-pad-x);
}

.section-7-image__copy--overlay {
  --section-7-image-copy-max: 328px;

  max-width: var(--section-7-image-copy-max);
}

.section-7-image__copy--overlay .section-7-image__title {
  --section-7-image-title-max: 328px;
  --lh-heading: 1.05;

  max-width: var(--section-7-image-title-max);
}

.section-7-image__meta--overlay {
  --section-7-image-meta-gap: 16px;
  --section-7-image-meta-max: 290px;

  max-width: var(--section-7-image-meta-max);
  gap: var(--section-7-image-meta-gap);
}

.section-7-image__meta--overlay .section-7-image__lede {
  --section-7-image-lede-max: 290px;

  max-width: var(--section-7-image-lede-max);
}

/* Top layer — fills frame (asset AR ≈ 1160/712). */ 
.section-7-image__bg {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
/* Section 9 — gemstones staggered grid.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css
   Below md: 2-col stagger (Figma 747:330). From md: stacked cols → 3-col at lg. */

.section-9 {
  --section-9-pad-x: 20px;
  --section-9-pad-y: 20px;
  --section-9-pad-bottom: 0;
  --section-9-lede-gap: 28px;

  padding: var(--section-9-pad-y) var(--section-9-pad-x) var(--section-9-pad-bottom);
  gap: var(--section-9-lede-gap);
}

.section-9__grid {
  --section-9-grid-gap: 14px;
  --section-9-grid-max: 100%;
  --section-9-collapse: 0px;

  max-width: var(--section-9-grid-max);
  gap: var(--section-9-grid-gap);
  margin-top: calc(-1 * var(--section-9-collapse));
  overflow: visible;
}

.section-9__col {
  --section-9-col-gap: 16px;
  --section-9-col-min: 0;
  /* Equal flex share below md (row); grow alone keeps content-sized basis */
  --section-9-col-basis: 0%;

  gap: var(--section-9-col-gap);
  min-width: var(--section-9-col-min);
  flex-basis: var(--section-9-col-basis);
}

/* Static stagger (lg+): left most top space → center less → right least */
.section-9__col--left {
  --section-9-left-pad-top: 0;

  padding-top: var(--section-9-left-pad-top);
}

.section-9__col--center {
  --section-9-col-gap: 40px;

  gap: var(--section-9-col-gap);
}

/* Figma: right column offset + bottom breathing room below md */
.section-9__col--right {
  --section-9-right-pad-top: 60px;
  --section-9-right-pad-bottom: 40px;

  padding-top: var(--section-9-right-pad-top);
  padding-bottom: var(--section-9-right-pad-bottom);
  /* Let earrings frame hang past the column / green grid line */
  overflow: visible;
}

.section-9__labeled {
  --section-9-labeled-gap: 12px;

  gap: var(--section-9-labeled-gap);
}

.section-9__stack {
  --section-9-stack-gap: 24px;
  --section-9-stack-pad-top: 0;

  gap: var(--section-9-stack-gap);
  padding-top: var(--section-9-stack-pad-top);
}

.section-9__lede {
  --section-9-lede-max: 232px;

  max-width: var(--section-9-lede-max);
}

.section-9__frame--tall {
  --section-9-tall-ratio: 168 / 226;

  aspect-ratio: var(--section-9-tall-ratio);
}

.section-9__frame--mid {
  --section-9-mid-ratio: 168 / 226;

  aspect-ratio: var(--section-9-mid-ratio);
}

/* Mobile bangle crop (Figma ~170×246) */
.section-9__frame--bangle-mobile {
  --section-9-bangle-mobile-ratio: 170 / 246;

  aspect-ratio: var(--section-9-bangle-mobile-ratio);
}

/* Mobile: slot owns vertical space; taller than source so cover crops left, keeps right rail. */
.section-9__earrings-slot {
  --section-9-earrings-slot-ratio: 170 / 246;

  aspect-ratio: var(--section-9-earrings-slot-ratio);
  overflow: visible;
}

/* Mobile earrings — fill slot height; hang white rail right (cover + position right). */
.section-9__frame--earrings-m {
  --section-9-earrings-m-bleed: max(
    calc(100% * 41 / 675),
    calc(100% * 41 / 716),
    calc(100% * 246 / 170 * 41 / 904)
  );

  top: 0;
  left: 0;
  width: calc(100% + var(--section-9-earrings-m-bleed));
}

/* Desktop right-col earrings (md+) —
   Frame = column width (painted right edge = grid); height from aspect-ratio
   so it scales with the 1440→content grid (ref col 387 × 538).
   Asset 433×538: painted ≈403px, rail ≈30px — bleed = rail/painted. */
.section-9__frame--earrings {
  --section-9-earrings-ratio: 387 / 538;

  aspect-ratio: var(--section-9-earrings-ratio);
}

.section-9__frame--earrings .section-9__img {
  --section-9-earrings-painted: 403;
  --section-9-earrings-rail: 30;
  --section-9-earrings-bleed: calc(
    100% * var(--section-9-earrings-rail) / var(--section-9-earrings-painted)
  );

  right: calc(-1 * var(--section-9-earrings-bleed));
}

.section-9__img {
  top: 0;
  left: 0;
}

/* Overlay label on ring / earrings frames */
.section-9__product-name--overlay {
  --section-9-product-inset-x: 16px;
  --section-9-product-inset-y: 16px;
  --section-9-product-max: 140px;

  left: var(--section-9-product-inset-x);
  bottom: var(--section-9-product-inset-y);
  max-width: var(--section-9-product-max);
}

@media (min-width: 768px) {
  .section-9 {
    /* Figma 1440 artboard: 80 inline → 1280 content */
    --section-9-pad-x: 80px;
    --section-9-pad-y: 80px;
    --section-9-pad-bottom: 80px;
    --section-9-lede-gap: 0;
    --section-9-max: 1440px;
    --section-9-ref: 1280px;
    --section-9-scale: min(1, calc((100vw - 2 * var(--section-9-pad-x)) / var(--section-9-ref)));

    max-width: var(--section-9-max);
  }

  .section-9__grid {
    --section-9-grid-gap: calc(32px * var(--section-9-scale));
  }

  .section-9__col {
    --section-9-col-gap: calc(32px * var(--section-9-scale));
    /* Stacked: size to content, not equal-height flex shares */
    --section-9-col-basis: auto;
  }

  .section-9__col--right {
    --section-9-right-pad-top: 0;
    --section-9-right-pad-bottom: 0;
  }

  .section-9__labeled {
    --section-9-labeled-gap: calc(20px * var(--section-9-scale));
  }

  .section-9__product-name--overlay {
    --section-9-product-inset-x: calc(28px * var(--section-9-scale));
    --section-9-product-inset-y: calc(28px * var(--section-9-scale));
    --section-9-product-max: calc(200px * var(--section-9-scale));
  }

  .section-9__stack {
    --section-9-stack-gap: calc(32px * var(--section-9-scale));
  }

  .section-9__lede {
    --section-9-lede-max: calc(304px * var(--section-9-scale));
  }

  /* Figma 179:409 @1440 — frame ratios (scale via column width) */
  .section-9__frame--tall {
    --section-9-tall-ratio: 387 / 540;
  }

  .section-9__frame--short {
    --section-9-short-ratio: 387 / 480;

    aspect-ratio: var(--section-9-short-ratio);
  }

  .section-9__frame--bangle {
    --section-9-bangle-ratio: 387 / 440;

    aspect-ratio: var(--section-9-bangle-ratio);
  }

  .section-9__frame--mid {
    --section-9-mid-ratio: 387 / 538;
  }

  .section-9__frame--earrings {
    --section-9-earrings-ratio: 387 / 538;
  }
}

@media (min-width: 992px) {
  .section-9__grid {
    /* Figma: 60px @1280 content */
    --section-9-grid-gap: calc(60px * var(--section-9-scale));
  }

  .section-9__col {
    --section-9-col-gap: calc(60px * var(--section-9-scale));
    --section-9-col-basis: 0%;
  }

  /* Start step: left most top → stack less → right least (exit inverts via JS) */
  .section-9__col--left {
    --section-9-left-pad-top: calc(400px * var(--section-9-scale));
  }

  .section-9__col--center {
    --section-9-col-gap: calc(80px * var(--section-9-scale));
  }

  .section-9__col--right {
    --section-9-right-pad-top: 0;
  }

  .section-9__stack {
    --section-9-stack-gap: calc(60px * var(--section-9-scale));
    --section-9-stack-pad-top: calc(80px * var(--section-9-scale));
  }
}
/* Section 11 — lede + 2-up product grid + atelier overlay.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css */

.section-11 {
  --section-11-pad-top: 16px;
  --section-11-pad-bottom: 20px;
  --section-11-gap: 40px;

  padding: var(--section-11-pad-top) 0 var(--section-11-pad-bottom);
  gap: var(--section-11-gap);
}

.section-11__lede {
  --section-11-lede-max: 100%;

  max-width: var(--section-11-lede-max);
}

.section-11__grid {
  --section-11-grid-gap: 20px;

  gap: var(--section-11-grid-gap);
}

.section-11__row {
  --section-11-row-gap: 20px;
  --section-11-row-pad-x: var(--pad-x-mobile);
  /* Always show ~1.2 cells in the viewport (left pad → right edge) */
  --section-11-peek: 1.2;

  gap: var(--section-11-row-gap);
  padding-left: var(--section-11-row-pad-x);
  padding-right: var(--section-11-row-pad-x);
}

.section-11__cell {
  /* Cell aspect; width fluid so peek stays ~1.2 */
  --section-11-cell-ratio: 332 / 390;
  --section-11-cell-w: calc(
    (100vw - var(--section-11-row-pad-x) - (var(--section-11-peek) - 1) * var(--section-11-row-gap)) /
      var(--section-11-peek)
  );

  width: var(--section-11-cell-w);
  min-width: var(--section-11-cell-w);
  max-width: var(--section-11-cell-w);
  aspect-ratio: var(--section-11-cell-ratio);
}

.section-11__img {
  top: 0;
  left: 0;
}

/* Sketch reveal: base stays hidden; canvas paints fluid mask trail (JS). */
.section-11__img--base {
  opacity: 0;
}

.section-11__reveal-canvas {
  top: 0;
  left: 0;
}

.section-11__product-name {
  --section-11-product-inset-x: 20px;
  --section-11-product-inset-y: 20px;
  --section-11-product-max: 280px;

  left: var(--section-11-product-inset-x);
  bottom: var(--section-11-product-inset-y);
  max-width: var(--section-11-product-max);
}

.section-11__hero {
  /* Mobile hero aspect */
  --section-11-hero-ratio: 390 / 448;

  aspect-ratio: var(--section-11-hero-ratio);
}

/* Top scrim for copy legibility (mobile) */
.section-11__scrim {
  --section-11-scrim-from: rgba(0, 0, 0, 0.5);
  --section-11-scrim-mid: 40.151%;
  --section-11-scrim-to: 72.041%;

  top: 0;
  left: 0;
  background: linear-gradient(
    to bottom,
    var(--section-11-scrim-from) 0%,
    var(--section-11-scrim-from) var(--section-11-scrim-mid),
    transparent var(--section-11-scrim-to)
  );
}

.section-11__copy {
  /* Mobile hero copy inset */
  --section-11-copy-left: 31px;
  --section-11-copy-top: 38px;
  --section-11-copy-gap: 24px;
  --section-11-copy-max: 315px;

  left: var(--section-11-copy-left);
  top: var(--section-11-copy-top);
  max-width: var(--section-11-copy-max);
  gap: var(--section-11-copy-gap);
}

.section-11__title {
  --section-11-title-max: 267px;

  max-width: var(--section-11-title-max);
}

.section-11__hero-lede {
  --section-11-hero-lede-max: 315px;

  max-width: var(--section-11-hero-lede-max);
}

@media (min-width: 768px) {
  .section-11 {
    --section-11-pad-top: 0;
    --section-11-pad-bottom: 64px;
    --section-11-gap: 56px;
  }

  .section-11__lede {
    --section-11-lede-max: 670px;
  }

  .section-11__grid {
    --section-11-grid-gap: 0;
  }

  .section-11__cell {
    --section-11-cell-w: 332px;
  }

  .section-11__product-name {
    --section-11-product-inset-x: 40px;
    --section-11-product-inset-y: 40px;
    --section-11-product-max: 400px;
  }

  .section-11__hero {
    --section-11-hero-ratio: 1440 / 716;
  }

  .section-11__copy {
    --section-11-copy-left: 48px;
    --section-11-copy-right: 48px;
    --section-11-copy-top: 40px;
    --section-11-copy-gap: 20px;
    --section-11-copy-max: calc(100% - 96px);

    right: var(--section-11-copy-right);
  }

  .section-11__title {
    --section-11-title-max: 100%;
  }

  .section-11__hero-lede {
    --section-11-hero-lede-max: 420px;
  }
}

@media (min-width: 992px) {
  .section-11__row {
    --section-11-row-gap: 20px;
    --section-11-row-pad-x: 0;
  }

  /* JS pin-morph: short safe-ratio frame in flow; ST pins when already mid
     under the header (section-7-image pattern — no tall shell). */
  .section-11__row--pinned-morph {
    --section-11-cell-gap: 20px;
    --section-11-safe-w: 940;
    --section-11-safe-h: 987;
    --section-11-view-h: calc(var(--dvh, 1vh) * 100 - var(--header-height, 74px));
    --section-11-cell-w-split: calc((100vw - var(--section-11-cell-gap)) / 2);
    --section-11-morph-h-cap: calc(
      var(--section-11-cell-w-split) * var(--section-11-safe-h) / var(--section-11-safe-w)
    );
    --section-11-morph-h: min(var(--section-11-view-h), var(--section-11-morph-h-cap));

    height: var(--section-11-morph-h);
    max-height: var(--section-11-morph-h-cap);
  }

  .section-11__row--pinned-morph .section-11__cell {
    aspect-ratio: auto;
  }

  /* Right pane slides in at 50%; border draws the 20px gap without breaking % shrink. */
  .section-11__row--pinned-morph .section-11__cell--slide-in {
    top: 0;
    left: 50%;
    box-sizing: border-box;
    border-left: var(--section-11-cell-gap) solid var(--color-white);
  }

  .section-11__cell {
    --section-11-cell-w: auto;
    --section-11-cell-ratio: 720 / 716;

    width: var(--section-11-cell-w);
    min-width: 0;
  }

  .section-11__copy {
    /* Keep 611px for one-line heading; pad from the right edge */
    --section-11-copy-left: auto;
    --section-11-copy-right: 56px;
    --section-11-copy-top: 9.72%;
    --section-11-copy-gap: 24px;
    --section-11-copy-max: 611px;

    left: var(--section-11-copy-left);
    width: var(--section-11-copy-max);
  }

  .section-11__title {
    --section-11-title-max: 611px;
  }

  .section-11__hero-lede {
    --section-11-hero-lede-max: 554px;
  }

  .section-11__product-name {
    --section-11-product-inset-x: 45px;
    --section-11-product-inset-y: 41px;
  }
}

@media (min-width: 1200px) {
  .section-11 {
    --section-11-pad-top: 0;
    --section-11-pad-bottom: 60px;
    --section-11-gap: 50px;
  }

  .section-11__copy {
    --section-11-copy-right: 80px;
  }
}
/* Section 12 — quote + lifestyle portraits.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css
   Below md: single portrait. From md: single full image. */

.section-12 {
  --section-12-pad-x: 0;
  --section-12-pad-top: 40px;
  --section-12-pad-bottom: 10px;

  padding: var(--section-12-pad-top) var(--section-12-pad-x) var(--section-12-pad-bottom);
}

.section-12__inner {
  --section-12-inner-max: 1280px;
  --section-12-gap: 40px;

  max-width: var(--section-12-inner-max);
  gap: var(--section-12-gap);
}

.section-12__quote {
  /* Centered via mx-auto below md */
  --section-12-quote-max: 280px;

  max-width: var(--section-12-quote-max);
}

.section-12__gallery--mobile {
  --section-12-gallery-pad-x: var(--pad-x-mobile);

  padding-left: var(--section-12-gallery-pad-x);
  padding-right: var(--section-12-gallery-pad-x);
}

.section-12__frame--left {
  /* Mobile portrait — 350×484 (4× source 1400×1936) */
  --section-12-frame-ratio: 350 / 484;

  aspect-ratio: var(--section-12-frame-ratio);
}

.section-12__frame--full {
  /* Desktop single frame — 1280×764 (source 5120×3056 @4x); short viewports cap to 90% of under-header vh
     so section-11 exit height shrink stays visible and handoff matches. */
  --section-12-frame-ratio: 1280 / 764;
  --section-12-frame-view-h: calc(var(--dvh, 1vh) * 100 - var(--header-height, 74px));
  --section-12-frame-h: 764px;
  --section-12-frame-min-h: 764px;

  min-height: var(--section-12-frame-min-h);
  max-height: min(var(--section-12-frame-h), calc(var(--section-12-frame-view-h) * 0.9));
  aspect-ratio: var(--section-12-frame-ratio);
}

.section-12__img {
  top: 0;
  left: 0;
}

@media (min-width: 768px) {
  .section-12 {
    --section-12-pad-x: 48px;
    --section-12-pad-top: 72px;
    --section-12-pad-bottom: 72px;
  }

  .section-12__inner {
    --section-12-gap: 56px;
  }

  .section-12__quote {
    --section-12-quote-max: 860px;
  }

  .section-12__frame--full {
    --section-12-frame-h: 764px;
  }
}

@media (min-width: 1200px) {
  .section-12 {
    --section-12-pad-x: 80px;
    --section-12-pad-top: 60px;
    --section-12-pad-bottom: 20px;
  }

  .section-12__inner {
    --section-12-gap: 40px;
  }

  .section-12__frame--full {
    --section-12-frame-h: 780px;
  }
}
/* Section 13 — desert jewelry scene with left inset + caption overlay.
   Layout residue only: flex/type/color come from Bootstrap 4.5.2, .type-* and colors.css */

.section-13 {
  --section-13-pad-x: var(--pad-x-mobile);
  --section-13-pad-top: 10px;
  --section-13-pad-bottom: 32px;

  padding: var(--section-13-pad-top) var(--section-13-pad-x) var(--section-13-pad-bottom);
}

.section-13__stage {
  /* Mobile stage — tall portrait */
  --section-13-stage-ratio: 350 / 525;
  --section-13-stage-max: 1280px;

  max-width: var(--section-13-stage-max);
  aspect-ratio: var(--section-13-stage-ratio);
}

.section-13__bg {
  top: 0;
  left: 0;
}

/* Mobile: zoom from the bottom — unused brown at the top leaves the
   frame; chain / pendant at the bottom of the art stay in view. */
.section-13__bg--mobile {
  --section-13-bg-m-scale: 1.28;

  top: 0;
  transform: scale(var(--section-13-bg-m-scale));
  transform-origin: center bottom;
}

/* Desktop: media taller than stage for Y scrub (extra vs source so rest
   shift + travel both have room). Img object-fit-cover fills the box. */
.section-13__media {
  --section-13-media-h: calc(100% * 1100 / 741);

  top: 0;
  left: 0;
  height: var(--section-13-media-h);
  will-change: transform;
}

.section-13__caption--below {
  /* Caption below stage (mobile) */
  --section-13-caption-gap: 20px;
  --section-13-caption-max: 259px;

  margin-top: var(--section-13-caption-gap);
  max-width: var(--section-13-caption-max);
}

.section-13__stack {
  /* Desktop caption + inset stack, left of stage */
  --section-13-stack-left: 4.92%;
  --section-13-stack-top: 33%;
  --section-13-stack-width: 264px;
  --section-13-stack-gap: 24px;

  left: var(--section-13-stack-left);
  top: var(--section-13-stack-top);
  width: var(--section-13-stack-width);
  gap: var(--section-13-stack-gap);
}

.section-13__stack .section-13__caption {
  /* Caption max within stack */
  --section-13-caption-max: 260px;

  max-width: var(--section-13-caption-max);
}

.section-13__stack--mobile {
  /* Mobile: product name above crop inset — Figma inset @ left 18 top 357 */
  --section-13-stack-left: 5.14%;
  --section-13-stack-top: auto;
  --section-13-stack-bottom: 8px;
  --section-13-stack-width: 33.43%;
  --section-13-stack-gap: 0;

  left: var(--section-13-stack-left);
  top: auto;
  bottom: var(--section-13-stack-bottom);
  width: var(--section-13-stack-width);
  gap: var(--section-13-stack-gap);
}

.section-13__product-name {
  --section-13-product-right: 6%;
  --section-13-product-bottom: 6%;
  --section-13-product-max: 320px;

  right: var(--section-13-product-right);
  bottom: var(--section-13-product-bottom);
  max-width: var(--section-13-product-max);
}

.section-13__product-name--mobile {
  --section-13-product-right: auto;
  --section-13-product-bottom: auto;
  --section-13-product-max: 160px;

  right: auto;
  bottom: auto;
  max-width: var(--section-13-product-max);
}

@media (min-width: 768px) {
  .section-13 {
    --section-13-pad-x: 48px;
    --section-13-pad-top: 83px;
    --section-13-pad-bottom: 83px;
  }

  .section-13__stage {
    --section-13-stage-ratio: 1280 / 741;

    aspect-ratio: var(--section-13-stage-ratio);
  }
}

@media (min-width: 1200px) {
  .section-13 {
    --section-13-pad-x: 80px;
    --section-13-pad-top: 40px;
    --section-13-pad-bottom: 83px;
  }
}
/* 5 GEMS — palette scene with overlay copy + 5 hotspots
   Scene pins under header; track (image + hotspots) scrubs while copy stays fixed.
   Tune each hotspot via --five-gems-hotspot-*-left / -top on .five-gems__hotspot--N */

.five-gems {
  --five-gems-max: 1440px;

  max-width: var(--five-gems-max);
}

.five-gems__scene {
  /* Mobile: natural height (no pin). Desktop: viewport under header. */
  --five-gems-scene-max: 1440px;

  max-width: var(--five-gems-scene-max);
}

@media (min-width: 768px) {
  .five-gems__scene {
    --five-gems-scene-h: calc(var(--dvh, 1vh) * 100 - var(--header-height, 74px));

    height: var(--five-gems-scene-h);
    max-height: var(--five-gems-scene-h);
  }
}

.five-gems__track {
  /* Mobile portrait art; desktop landscape below */
  --five-gems-track-aspect: 390 / 685;

  aspect-ratio: var(--five-gems-track-aspect);
  will-change: transform;
}

.five-gems__hotspots {
  /* Same box as track; z-3 above copy so + stays clickable over text */
  --five-gems-track-aspect: 390 / 685;

  top: 0;
  left: 0;
  aspect-ratio: var(--five-gems-track-aspect);
  will-change: transform;
}

.five-gems__bg {
  top: 0;
  left: 0;
}

.five-gems__stage {
  /* Figma 885:6358 — pt 40 / pb 20 / gap 24 */
  --five-gems-pad-y-top: 40px;
  --five-gems-pad-y-bottom: 20px;
  --five-gems-stage-gap: 24px;

  padding-top: var(--five-gems-pad-y-top);
  padding-bottom: var(--five-gems-pad-y-bottom);
  gap: var(--five-gems-stage-gap);
}

.five-gems__copy--mobile {
  --five-gems-copy-gap: 14px;
  --five-gems-copy-max: 350px;

  max-width: var(--five-gems-copy-max);
  gap: var(--five-gems-copy-gap);
}

.five-gems__copy--desktop {
  --five-gems-copy-left: 48px;
  --five-gems-copy-top: 48px;
  --five-gems-copy-gap: 12px;
  --five-gems-copy-max: 369px;

  left: var(--five-gems-copy-left);
  top: var(--five-gems-copy-top);
  max-width: var(--five-gems-copy-max);
  gap: var(--five-gems-copy-gap);
}

.five-gems__title {
  --five-gems-title-max: 317px;

  max-width: var(--five-gems-title-max);
}

.five-gems__lede {
  --five-gems-lede-max: 300px;

  max-width: var(--five-gems-lede-max);
}

.five-gems__hotspot {
  /* Figma 905:7920 — glass disc: backdrop blur only (no fill) so scene shows through */
  --five-gems-hotspot-size: 32px;
  --five-gems-hotspot-left: 50%;
  --five-gems-hotspot-top: 50%;
  --five-gems-hotspot-blur: 37px;
  --five-gems-hotspot-border: 1.375px;

  left: var(--five-gems-hotspot-left);
  top: var(--five-gems-hotspot-top);
  width: var(--five-gems-hotspot-size);
  height: var(--five-gems-hotspot-size);
  min-width: var(--five-gems-hotspot-size);
  min-height: var(--five-gems-hotspot-size);
  border-width: var(--five-gems-hotspot-border);
  background: transparent;
  -webkit-backdrop-filter: blur(var(--five-gems-hotspot-blur));
  backdrop-filter: blur(var(--five-gems-hotspot-blur));
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}

.five-gems__hotspot:focus,
.five-gems__hotspot:focus-visible,
.five-gems__hotspot:active {
  outline: none;
  box-shadow: none;
}

/* Soft steam wisps — cooking vapor rising from the + */
.five-gems__hotspot-smoke {
  --five-gems-smoke-w: 72px;
  --five-gems-smoke-h: 96px;

  left: 50%;
  bottom: 55%;
  width: var(--five-gems-smoke-w);
  height: var(--five-gems-smoke-h);
  margin-left: calc(var(--five-gems-smoke-w) / -2);
  opacity: 0;
  transition:
    opacity 180ms ease,
    width 560ms cubic-bezier(0.22, 1, 0.36, 1),
    height 560ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.five-gems__hotspot:hover .five-gems__hotspot-smoke,
.five-gems__hotspot:focus-visible .five-gems__hotspot-smoke,
.five-gems__hotspot.is-steaming .five-gems__hotspot-smoke,
.five-gems__hotspot:active .five-gems__hotspot-smoke {
  opacity: 1;
}

/* Click / open — plume expands and climbs */
.five-gems__hotspot.is-steaming .five-gems__hotspot-smoke {
  --five-gems-smoke-w: 360px;
  --five-gems-smoke-h: 520px;
}

.five-gems__hotspot-wisp {
  --five-gems-wisp-w: 34px;
  --five-gems-wisp-h: 44px;
  --five-gems-wisp-left: 50%;
  --five-gems-wisp-delay: 0ms;
  --five-gems-wisp-drift: 10px;

  left: var(--five-gems-wisp-left);
  bottom: 0;
  width: var(--five-gems-wisp-w);
  height: var(--five-gems-wisp-h);
  margin-left: calc(var(--five-gems-wisp-w) / -2);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 245, 0.7) 28%,
    rgba(255, 255, 255, 0.28) 55%,
    rgba(255, 255, 255, 0) 78%
  );
  filter: blur(6px);
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.45);
  animation: five-gems-steam 1.65s linear infinite;
  animation-delay: var(--five-gems-wisp-delay);
  animation-play-state: paused;
}

.five-gems__hotspot:hover .five-gems__hotspot-wisp,
.five-gems__hotspot:focus-visible .five-gems__hotspot-wisp {
  animation-play-state: running;
}

.five-gems__hotspot.is-steaming .five-gems__hotspot-wisp {
  --five-gems-wisp-w: 88px;
  --five-gems-wisp-h: 110px;
  filter: blur(12px);
  animation: five-gems-steam-burst 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--five-gems-wisp-delay);
  animation-play-state: running;
}

.five-gems__hotspot.is-steaming .five-gems__hotspot-wisp--2 {
  --five-gems-wisp-w: 120px;
  --five-gems-wisp-h: 140px;
  --five-gems-wisp-delay: 0.04s;
  --five-gems-wisp-drift: -28px;
}

.five-gems__hotspot.is-steaming .five-gems__hotspot-wisp--3 {
  --five-gems-wisp-w: 76px;
  --five-gems-wisp-h: 96px;
  --five-gems-wisp-delay: 0.08s;
  --five-gems-wisp-drift: 32px;
}

.five-gems__hotspot.is-steaming .five-gems__hotspot-wisp--4 {
  --five-gems-wisp-w: 140px;
  --five-gems-wisp-h: 160px;
  --five-gems-wisp-delay: 0.12s;
  --five-gems-wisp-drift: -18px;
}

.five-gems__hotspot.is-steaming .five-gems__hotspot-wisp--5 {
  --five-gems-wisp-w: 70px;
  --five-gems-wisp-h: 90px;
  --five-gems-wisp-delay: 0.16s;
  --five-gems-wisp-drift: 24px;
}

.five-gems__hotspot-wisp--2 {
  --five-gems-wisp-w: 42px;
  --five-gems-wisp-h: 52px;
  --five-gems-wisp-left: 28%;
  --five-gems-wisp-delay: 0.28s;
  --five-gems-wisp-drift: -14px;
}

.five-gems__hotspot-wisp--3 {
  --five-gems-wisp-w: 30px;
  --five-gems-wisp-h: 40px;
  --five-gems-wisp-left: 72%;
  --five-gems-wisp-delay: 0.55s;
  --five-gems-wisp-drift: 16px;
}

.five-gems__hotspot-wisp--4 {
  --five-gems-wisp-w: 48px;
  --five-gems-wisp-h: 58px;
  --five-gems-wisp-left: 44%;
  --five-gems-wisp-delay: 0.82s;
  --five-gems-wisp-drift: -8px;
}

.five-gems__hotspot-wisp--5 {
  --five-gems-wisp-w: 26px;
  --five-gems-wisp-h: 36px;
  --five-gems-wisp-left: 58%;
  --five-gems-wisp-delay: 1.1s;
  --five-gems-wisp-drift: 12px;
}

@keyframes five-gems-steam {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.4);
  }
  12% {
    opacity: 1;
  }
  45% {
    opacity: 0.75;
    transform: translate3d(var(--five-gems-wisp-drift), -44px, 0) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--five-gems-wisp-drift) * -0.4), -92px, 0) scale(1.45);
  }
}

@keyframes five-gems-steam-burst {
  0% {
    opacity: 0.65;
    transform: translate3d(0, 8px, 0) scale(0.7);
  }
  14% {
    opacity: 1;
    transform: translate3d(var(--five-gems-wisp-drift), -64px, 0) scale(1.9);
  }
  42% {
    opacity: 0.95;
    transform: translate3d(calc(var(--five-gems-wisp-drift) * 0.85), -180px, 0) scale(3.1);
  }
  72% {
    opacity: 0.55;
    transform: translate3d(calc(var(--five-gems-wisp-drift) * 0.4), -320px, 0) scale(4.4);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--five-gems-wisp-drift) * 0.15), -460px, 0) scale(5.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .five-gems__hotspot:hover .five-gems__hotspot-smoke,
  .five-gems__hotspot:focus-visible .five-gems__hotspot-smoke,
  .five-gems__hotspot.is-steaming .five-gems__hotspot-smoke,
  .five-gems__hotspot:active .five-gems__hotspot-smoke,
  .five-gems__hotspot-smoke {
    opacity: 0;
    transition: none;
  }

  .five-gems__hotspot-wisp {
    animation: none;
  }
}

/* Mobile — % of 390×685 scene */
.five-gems__hotspot--1 {
  --five-gems-hotspot-left: 28.6%;
  --five-gems-hotspot-top: 87.2%;
}

.five-gems__hotspot--2 {
  --five-gems-hotspot-left: 66.9%;
  --five-gems-hotspot-top: 25.1%;
}

.five-gems__hotspot--3 {
  --five-gems-hotspot-left: 76%;
  --five-gems-hotspot-top: 84%;
}

.five-gems__hotspot--4 {
  --five-gems-hotspot-left: 17.7%;
  --five-gems-hotspot-top: 65.3%;
}

.five-gems__hotspot--5 {
  --five-gems-hotspot-left: 80%;
  --five-gems-hotspot-top: 51%;
}

@media (min-width: 768px) {
  .five-gems__stage {
    --five-gems-pad-y-top: 0;
    --five-gems-pad-y-bottom: 0;
    --five-gems-stage-gap: 0;
  }

  .five-gems__track,
  .five-gems__hotspots {
    --five-gems-track-aspect: 1440 / 987;
  }

  .five-gems__title {
    --five-gems-title-max: 369px;
  }

  .five-gems__lede {
    --five-gems-lede-max: 234px;
  }

  .five-gems__hotspot {
    --five-gems-hotspot-size: 44px;
  }

  .five-gems__hotspot-smoke {
    --five-gems-smoke-w: 88px;
    --five-gems-smoke-h: 120px;
  }

  /* Desktop — Figma 885:5821 hotspot centers */
  .five-gems__hotspot--1 {
    /* amber cluster (top-center) */
    --five-gems-hotspot-left: 52.4%;
    --five-gems-hotspot-top: 32.1%;
  }

  .five-gems__hotspot--2 {
    /* dried orange / mace (mid-left) */
    --five-gems-hotspot-left: 28.2%;
    --five-gems-hotspot-top: 39.9%;
  }

  .five-gems__hotspot--3 {
    /* cinnamon / roses (mid-right) */
    --five-gems-hotspot-left: 79.6%;
    --five-gems-hotspot-top: 43.4%;
  }

  .five-gems__hotspot--4 {
    /* star anise / rubies (bottom-center) */
    --five-gems-hotspot-left: 60.5%;
    --five-gems-hotspot-top: 72.9%;
  }

  .five-gems__hotspot--5 {
    /* green gems / cardamom (bottom-right) */
    --five-gems-hotspot-left: 80.3%;
    --five-gems-hotspot-top: 75.5%;
  }
}

@media (min-width: 1200px) {
  .five-gems__copy--desktop {
    --five-gems-copy-left: 80px;
    --five-gems-copy-top: 72px;
  }
}
/* Book an appointment
   Mobile (Figma 885:6541): centered copy + square product media
   md+: jewelry BG (Figma 21:75); copy left via margin (1280 column) */

.book-appointment {
  --book-appointment-max: 1440px;

  max-width: var(--book-appointment-max);
}

.book-appointment__stage {
  /* Figma 885:6541 — pt 60 / pb 40 */
  --book-appointment-pad-y-top: 60px;
  --book-appointment-pad-y-bottom: 40px;
  --book-appointment-stage-gap: 44px;

  padding-top: var(--book-appointment-pad-y-top);
  padding-bottom: var(--book-appointment-pad-y-bottom);
  gap: var(--book-appointment-stage-gap);
}

.book-appointment__bg {
  top: 0;
  left: 0;
}

.book-appointment__media {
  /* Figma mobile product plate — 390×390 */
  --book-appointment-media-ratio: 1;

  aspect-ratio: var(--book-appointment-media-ratio);
}

.book-appointment__copy {
  --book-appointment-copy-ml: var(--pad-x-mobile);
  --book-appointment-copy-mr: var(--pad-x-mobile);
  --book-appointment-copy-max: 267px;
  --book-appointment-copy-gap: 44px;

  max-width: var(--book-appointment-copy-max);
  margin-left: var(--book-appointment-copy-ml);
  margin-right: var(--book-appointment-copy-mr);
  gap: var(--book-appointment-copy-gap);
}

.book-appointment__intro {
  --book-appointment-intro-gap: 24px;

  gap: var(--book-appointment-intro-gap);
}

.book-appointment__title {
  --book-appointment-title-max: 267px;

  max-width: var(--book-appointment-title-max);
}

.book-appointment__lede {
  --book-appointment-lede-max: 267px;

  max-width: var(--book-appointment-lede-max);
}

.book-appointment__btn {
  --book-appointment-btn-h: 56px;
  --book-appointment-btn-pad-x: 20px;
  --book-appointment-btn-pad-y: 16px;

  min-height: var(--book-appointment-btn-h);
  padding: var(--book-appointment-btn-pad-y) var(--book-appointment-btn-pad-x);
  text-decoration: none;
}

.book-appointment__btn:hover,
.book-appointment__btn:focus {
  opacity: var(--opacity-muted);
}

@media (min-width: 768px) {
  .book-appointment__stage {
    /* Figma 21:75 — 1440×800 */
    --book-appointment-stage-ratio: 1440 / 800;
    --book-appointment-pad-y-top: 100px;
    --book-appointment-pad-y-bottom: 100px;
    --book-appointment-stage-gap: 0;

    aspect-ratio: var(--book-appointment-stage-ratio);
  }

  .book-appointment__copy {
    --book-appointment-copy-ml: 48px;
    --book-appointment-copy-mr: 48px;
    --book-appointment-copy-max: 460px;
    --book-appointment-copy-gap: 40px;
  }

  .book-appointment__title {
    --book-appointment-title-max: 396px;
  }

  .book-appointment__lede {
    --book-appointment-lede-max: 305px;
  }
}

@media (min-width: 1200px) {
  .book-appointment__stage {
    /* Figma — copy top ~140 within 800 artboard */
    --book-appointment-pad-y-top: 140px;
    --book-appointment-pad-y-bottom: 140px;
  }

  .book-appointment__copy {
    /* 1440 section → (1440 − 1280) / 2 = 80 — 1280 column left edge */
    --book-appointment-copy-ml: max(80px, calc((100% - 1280px) / 2));
    --book-appointment-copy-mr: 80px;
  }
}