@charset "UTF-8";
/* ── Design tokens ─────────────────────────────────────────
   Single source of truth for colors, typography, easing, and breakpoints.
   Values are intentionally literal: replacing a literal with a token must
   not change the compiled output. */
/* ── Reviews-section webfonts ─────────────────────────────
   The approved masters load these two families only in the MOBILE build
   (Plus Jakarta Sans body copy, Playfair Display quote glyphs). The desktop
   master never fetches Playfair Display — its quote marks render in Georgia
   via the font stack fallback — so both @font-face rules are gated behind
   the mobile breakpoint to reproduce the masters byte-for-byte.
   woff2 files are sourced via Fontsource (`pnpm run build:fonts`). */
@media (max-width: 768px) {
  @font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/reviews/plus-jakarta-sans-wght.woff2") format("woff2");
  }
  @font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/reviews/playfair-display-wght.woff2") format("woff2");
  }
}
@keyframes er-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes er-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes er-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes er-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Shared ring loader ─────────────────────────────────────
   Base structure + default 104px size used by How They're Made.
   Section partials override only size, position, and gradient IDs. */
.ring-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.ring-loader.is-visible {
  opacity: 1;
}

.ring-loader__ring {
  position: relative;
  width: 104px;
  height: 104px;
}

.ring-loader__ring::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 194, 126, 0.16) 0%, transparent 68%);
  animation: er-pulse 2s ease-in-out infinite;
}

.ring-loader__svg {
  width: 104px;
  height: 104px;
  animation: er-spin 1.4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(227, 194, 126, 0.6)) drop-shadow(0 0 14px rgba(227, 194, 126, 0.35));
}

.ring-loader__track {
  fill: none;
  stroke: rgba(227, 194, 126, 0.18);
  stroke-width: 4;
}

.ring-loader__arc {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 207 69;
}

.ring-loader__text {
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(227, 194, 126, 0.75), 0 0 18px rgba(201, 162, 78, 0.45);
}

/* ── Theme back-to-top button ───────────────────────────────
   The local WeltPixel theme adds a fixed .btt-button that is not present
   in the production homepage. Hide it on mobile so the layout matches. */
@media (max-width: 768px) {
  .btt-button {
    display: none !important;
  }
}
/* ── Footer overrides ─────────────────────────────────────
   The footer is rendered by the theme, but the mobile layout needs to
   match production: full-width collapsible navs and a centred logo. */
@media (max-width: 768px) {
  .footer__grid {
    width: 100%;
  }
  .footer__nav {
    width: 100%;
  }
  .footer__nav summary {
    width: 100%;
  }
  .footer__nav-links {
    width: 100%;
  }
  .footer__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .footer__logo-wrap {
    margin-left: auto;
    margin-right: auto;
  }
  .footer__logo {
    margin-left: auto;
    margin-right: auto;
  }
  .footer__address,
  .footer__contact-pill {
    text-align: center;
  }
}
/* ── Shared presentation mixins ───────────────────────────
   These mixins encapsulate repeated patterns so each section partial
   only declares what is actually different. They do not change the
   rendered output as long as the same values are passed through. */
/**
 * Standard section heading in Cormorant Garamond.
 * Optional gold underline width + colour.
 */
/**
 * Gold gradient "Shop the Collection" CTA.
 *
 * $hover-filter and $hover-transform are exposed so sections with a
 * non-standard hover (Gift, FAQ) can share the same base styles without
 * inheriting the hero's translate effect.
 */
/**
 * Trust card used in the Most Loved section.
 */
/**
 * Carousel arrow button (shop / reviews split).
 */
/**
 * A horizontal gold rule / divider.
 */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0c0a08;
  font-family: jost, system-ui, sans-serif;
}

.hero__poster-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__video.is-ready,
.hero__video.is-playing {
  opacity: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(8, 6, 4, 0.72) 0%, rgba(8, 6, 4, 0.35) 22%, rgba(8, 6, 4, 0) 45%);
}

.hero__lockup {
  position: absolute;
  top: clamp(96px, 12vh, 148px);
  left: clamp(28px, 5vw, 88px);
  z-index: 3;
}

.hero__eyebrow {
  font-weight: 500;
  font-size: clamp(13px, 0.885vw, 17px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e3c27e;
  margin: 0 0 clamp(14px, 1.8vh, 20px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.hero__headline {
  font-family: "Cormorant Garamond", georgia, serif;
  font-weight: 500;
  font-size: clamp(56px, 5.625vw, 108px);
  line-height: 1.02;
  color: #fff;
  margin: 0;
  white-space: normal;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  width: fit-content;
}

.hero__headline em {
  font-style: italic;
  color: #e3c27e;
  position: relative;
}

.hero__headline em::before {
  content: "";
  position: absolute;
  inset: -0.22em -9% -0.16em;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.26) 44%, rgba(0, 0, 0, 0.09) 72%, rgba(0, 0, 0, 0) 100%);
  filter: blur(32px);
  border-radius: 50%;
  opacity: 0;
  transform: translateZ(0);
  animation: hero-cloud-settle 0.7s ease 1.6s both;
}

/* Gold rule between headline and subline — small viewports only */
.hero__rule {
  display: none;
  width: 79px;
  height: 1px;
  background: #d4a843;
}

.hero__subline {
  font-weight: 300;
  font-size: clamp(20px, 1.615vw, 31px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: clamp(18px, 2.2vh, 26px) 0 0;
  max-width: 40ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.2vh, 24px);
  margin-top: clamp(28px, 3.6vh, 40px);
}

.hero .hero__cta {
  display: inline-block;
  font-family: jost, system-ui, arial, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 0.885vw, 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #14110b;
  background: linear-gradient(180deg, #c2a05c, #9f7b3f);
  padding: 1em 2.24em;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.hero .hero__cta:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.hero .hero__cta:active {
  transform: translateY(0);
}

.hero .hero__play-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  font-weight: 500;
  font-size: clamp(12px, 0.729vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0e2c0;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 226, 192, 0.35);
  padding-bottom: 3px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero .hero__play-cta:hover, .hero .hero__play-cta:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.hero .hero__play-cta::before {
  content: "";
  position: absolute;
  inset: -14px -18px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.26) 44%, rgba(0, 0, 0, 0.09) 72%, rgba(0, 0, 0, 0) 100%);
  filter: blur(26px);
  border-radius: 50%;
  opacity: 0;
  transform: translateZ(0);
  animation: hero-cloud-settle 0.7s ease 2.3s both;
}

.hero .hero__play-cta-icon {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(240, 226, 192, 0.6);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: border-color 0.2s ease;
}

.hero .hero__play-cta-icon svg {
  width: 12px;
  height: 12px;
  fill: #f0e2c0;
  margin-left: 1px;
  transition: fill 0.2s ease;
}

.hero .hero__play-cta:hover .hero__play-cta-icon {
  border-color: rgba(255, 255, 255, 0.7);
}

.hero .hero__play-cta:hover .hero__play-cta-icon svg {
  fill: #fff;
}

.hero__mobile-footer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 15px 28px;
  text-align: center;
  pointer-events: none;
}

.hero__mobile-tagline {
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero__mobile-badges {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.hero__eyebrow, .hero__headline, .hero__rule, .hero__subline,
.hero .hero__cta, .hero .hero__play-cta {
  opacity: 0;
  transform: translateY(26px);
  animation: er-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__eyebrow {
  animation-delay: 0.35s;
}

.hero__headline {
  animation-delay: 0.55s;
}

.hero__rule {
  animation-delay: 0.7s;
}

.hero__subline {
  animation-delay: 0.85s;
}

.hero .hero__cta {
  animation-delay: 1.1s;
}

.hero .hero__play-cta {
  animation-delay: 1.25s;
}

@keyframes hero-cloud-settle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__headline, .hero__rule, .hero__subline,
  .hero__cta, .hero__play-cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero__headline em::before, .hero__play-cta::before {
    animation: none;
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .hero {
    height: 56vh;
    min-height: 480px;
    max-height: 520px;
    background: #000;
  }
  .hero__scrim {
    background: radial-gradient(ellipse at 22% 18%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.32) 32%, rgba(0, 0, 0, 0) 66%), linear-gradient(158deg, rgba(8, 6, 4, 0.78) 0%, rgba(8, 6, 4, 0.35) 16%, rgba(8, 6, 4, 0) 36%);
  }
  .hero__lockup {
    inset: 60px 15px auto;
  }
  .hero__eyebrow {
    display: none;
  }
  .hero__mobile-footer {
    display: block;
    padding: 0;
    text-align: left;
  }
  /* Dark cloud behind the bottom-left tagline */
  .hero__mobile-footer::before {
    content: "";
    position: absolute;
    left: -5px;
    bottom: -39px;
    width: 260px;
    height: 60px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 32% 42%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.46) 48%, rgba(0, 0, 0, 0.14) 82%, rgba(0, 0, 0, 0) 100%);
    filter: blur(16px);
  }
  .hero__mobile-tagline {
    position: absolute;
    left: 15px;
    bottom: 5px;
    z-index: 3;
    width: auto;
    max-width: 50%;
    margin: 0;
    font-family: jost, system-ui, sans-serif;
    font-size: clamp(14px, 3.59vw, 15px);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #f0e2c0;
    text-align: left;
    letter-spacing: 0.01em;
  }
  .hero__mobile-badges-wrap {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: clamp(164px, 42.15vw, 182px);
    z-index: 2;
    pointer-events: none;
  }
  .hero__mobile-badges-wrap::before {
    content: "";
    position: absolute;
    left: -35%;
    top: 14%;
    width: 175%;
    height: 190%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 48%, rgba(0, 0, 0, 0.14) 82%, rgba(0, 0, 0, 0) 100%);
    filter: blur(16px);
  }
  .hero .hero__mobile-badges {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
  }
  .hero__headline {
    font-size: 32px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.81), 0 0 15px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.24);
  }
  .hero__rule {
    display: block;
    margin-top: 10px;
  }
  .hero__subline {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 8px;
    max-width: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.81), 0 0 15px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.24);
  }
  .hero__actions {
    gap: 0;
    margin-top: 18px;
  }
  .hero .hero__cta {
    font-size: 11px;
    padding: 11px 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  }
  .hero .hero__play-cta {
    margin-top: 24px;
    gap: 8px;
    font-size: 10px;
  }
  .hero .hero__play-cta-icon {
    width: 20px;
    height: 20px;
  }
  .hero .hero__play-cta-icon svg {
    width: 9px;
    height: 9px;
  }
  .hero .hero__play-cta::after {
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}
.shop {
  margin: 0;
  background: #fff;
  color: #000;
}

.trust-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 22px;
  background: #fff;
  border-top: 1px solid #e4ddd0;
  border-bottom: 1px solid #e4ddd0;
  opacity: 0;
  transform: translateY(34px);
  will-change: transform, opacity;
  animation: shop-fade-in-soft 0.9s ease 0.35s forwards;
}

@keyframes shop-fade-in-soft {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.trust-bar__inner {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1120px;
  padding: 0 36px;
}

/* Asymmetric layout: the reviews pillar is moderately wider — 28/44/28 */
.trust-bar__pillar {
  flex: 0 1 28%;
  min-width: 0;
  text-align: center;
  padding: 0 54px;
}

.trust-bar__pillar:not(:last-child) {
  border-right: 1px solid #e4ddd0;
}

.trust-bar__num {
  display: block;
  margin-bottom: 7px;
  font-family: jost, system-ui, sans-serif;
  font-size: clamp(26px, 2.05vw, 38px);
  font-weight: 500;
  line-height: 1;
  color: #1a1208;
  /* tabular lining figures so the count-up doesn't shift width */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.trust-bar__num--gold {
  color: #c9a84c;
  font-weight: 450;
}

.trust-bar__sub {
  display: block;
  font-family: jost, system-ui, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.38;
  letter-spacing: 0.02em;
  color: #746d63;
}

.trust-bar__pillar--reviews {
  flex: 0 1 44%;
}

.trust-bar__num--reviews {
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(26px, 2.05vw, 38px);
  font-weight: 600;
  color: #1a1208;
  margin-bottom: 4px;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.trust-bar__label {
  display: block;
  font-family: jost, system-ui, arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(11.55px, 0.89vw, 14.7px);
  color: #a8801a;
  padding-left: 0.28em;
}

/* Shop overrides the trust-bar divider: a centred, symmetric line instead
   of the full-width border. */
.shop .trust-bar {
  border-bottom: none;
  position: relative;
}

.shop .trust-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 68%;
  height: 1px;
  background: #e4ddd0;
}

.trust-bar__rule {
  display: block;
  width: 58px;
  height: 1px;
  background: #cdb06a;
  margin: 7px auto;
}

.trust-bar__pillar--reviews .trust-bar__sub {
  white-space: nowrap; /* one line so the middle pillar isn't much taller */
}

.trust-bar__pillar:not(.trust-bar__pillar--reviews) .trust-bar__num {
  margin-top: 0;
}

.shop-catalog {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.shop-catalog__band {
  width: 100%;
  max-width: 1913px;
  margin: 0 auto;
  padding: 46px 24px 32px;
  background: #fff;
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.35s ease;
  will-change: transform, opacity;
  animation: shop-fade-in-soft 0.15s ease 2.6s forwards;
}

.shop-catalog__band.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

.shop-catalog__heading {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 13px;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(1.91rem, 3.26vw, 2.94rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #000;
}
.shop-catalog__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 166px;
  height: 0.7px;
  background: rgba(159, 123, 63, 0.72);
  transform: translateX(-50%);
}

.shop-catalog__canvas-wrap {
  width: 100%;
  max-width: 1913px;
  margin: 0 auto;
  aspect-ratio: 1913/1389;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(62px);
  transition: transform 1.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.45s ease;
  will-change: transform, opacity;
  animation: shop-fade-in-soft 0.15s ease 2.7s forwards;
}

.shop-catalog__canvas-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* Desktop layout: fixed 1913x1389 design canvas, absolutely positioned panels,
   scaled to the wrapper width by shop.js (transform: scale). This mirrors the
   approved master exactly — every panel offset and every card interior
   (labels, arrows) scales proportionally with the viewport. */
.shop-catalog__canvas {
  position: relative;
  width: 1913px;
  height: 1389px;
  background-image: var(--shop-bg-desktop);
  background-size: cover;
  background-position: center;
  transform-origin: top left;
  overflow: hidden;
}

.shop-catalog__panel {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 2.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.6s ease;
  animation: shop-panel-fallback 0.15s ease 2.9s forwards;
}

@keyframes shop-panel-fallback {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes shop-dots-fallback {
  to {
    opacity: 1;
  }
}
.shop-catalog__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-carousel .shop-carousel__link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  z-index: 1;
}

.shop-carousel__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: block;
}

.shop-carousel .shop-carousel__image {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.52s ease-out;
  transform: scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.shop-carousel .shop-carousel__image.is-active {
  opacity: 1;
}

.shop-carousel__controls {
  position: absolute;
  left: 50%;
  bottom: 78px;
  z-index: 3;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.shop-carousel.is-ready .shop-carousel__controls {
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
}

.shop-carousel__button {
  width: 36px;
  height: 36px;
  border: 2.5px solid rgba(232, 135, 30, 0.6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.shop-carousel__button:hover, .shop-carousel__button:focus-visible {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(232, 135, 30, 0.85);
  transform: scale(1.08);
  outline: none;
}
.shop-carousel__button svg {
  width: 21px;
  height: 21px;
  stroke: #e8871e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.shop-catalog__panel--large img,
.shop-catalog__panel--large video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.shop-catalog__panel--large img {
  z-index: 1;
}

.shop-catalog__panel--large video {
  z-index: 2;
  opacity: 0;
}

.shop-catalog__panel--large.is-playing video {
  opacity: 1;
}

/* Panel geometry — exact 1913x1389 design coordinates from the approved master */
.shop-catalog__panel--large {
  width: 891px;
  height: 1208px;
  left: 25px;
  top: 90px;
}

.shop-catalog__panel--top-middle {
  width: 461px;
  height: 635px;
  left: 941px;
  top: 39px;
}

.shop-catalog__panel--bottom-middle {
  width: 461px;
  height: 636px;
  left: 941px;
  top: 714px;
}

.shop-catalog__panel--top-right {
  width: 461px;
  height: 638px;
  left: 1427px;
  top: 37px;
}

.shop-catalog__panel--bottom-right {
  width: 461px;
  height: 639px;
  left: 1427px;
  top: 713px;
}

/* Entrance offsets, settled by the group reveal classes (shop.js) */
.shop-catalog__panel--from-left {
  transform: translateX(-78px);
}

.shop-catalog__panel--large.shop-catalog__panel--from-left {
  transform: translateX(-108px);
}

.shop-catalog__panel--from-right {
  transform: translateX(60px);
}

.shop-catalog__panel--from-bottom {
  transform: translateY(65px);
}

.shop-catalog__canvas.is-top-visible .shop-catalog__panel--group-top,
.shop-catalog__canvas.is-lifestyle-visible .shop-catalog__panel--group-lifestyle,
.shop-catalog__canvas.is-bottom-visible .shop-catalog__panel--group-bottom {
  opacity: 1;
  transform: translate(0, 0);
  animation: none;
}

.shop-catalog__canvas.is-top-visible .shop-catalog__panel--top-middle {
  transition-delay: 0.05s;
}

.shop-catalog__canvas.is-top-visible .shop-catalog__panel--top-right {
  transition-delay: 0.18s;
}

.shop-catalog__canvas.is-lifestyle-visible .shop-catalog__panel--large {
  transition-delay: 0.05s;
}

.shop-catalog__canvas.is-bottom-visible .shop-catalog__panel--bottom-middle {
  transition-delay: 0.05s;
}

.shop-catalog__canvas.is-bottom-visible .shop-catalog__panel--bottom-right {
  transition-delay: 0.18s;
}

.shop-catalog__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  width: 100%;
  text-align: center;
  font-family: jost, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 350;
  line-height: 1.2;
  color: #000;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.3s ease;
  animation: shop-fade-in-soft 0.15s ease 3.2s forwards;
}

.shop-catalog__label > span {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.shop-catalog__label > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(159, 123, 63, 0.78);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-catalog__panel:hover .shop-catalog__label > span::after,
.shop-catalog__panel:focus-visible .shop-catalog__label > span::after {
  transform: scaleX(1);
}

.shop-catalog__panel--bottom-middle .shop-catalog__label,
.shop-catalog__panel--bottom-right .shop-catalog__label {
  bottom: 28px;
}

.shop-catalog__canvas.is-top-visible .shop-catalog__panel--top-middle .shop-catalog__label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
  animation: none;
}

.shop-catalog__canvas.is-top-visible .shop-catalog__panel--top-right .shop-catalog__label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.67s;
  animation: none;
}

.shop-catalog__canvas.is-bottom-visible .shop-catalog__panel--bottom-middle .shop-catalog__label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.42s;
  animation: none;
}

.shop-catalog__canvas.is-bottom-visible .shop-catalog__panel--bottom-right .shop-catalog__label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.54s;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .shop-catalog__panel,
  .shop-catalog__label,
  .shop-catalog__panel img,
  .shop-catalog__heading {
    transition: none;
  }
}
@media (max-width: 768px) {
  .shop {
    font-family: "Cormorant Garamond", georgia, serif;
  }
  .trust-bar {
    padding: 11px 0 10px;
    transform: translateY(14px);
    transition: transform 1.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.25s ease;
  }
  .trust-bar__inner {
    align-items: stretch;
    padding: 0 7.5px;
  }
  .trust-bar__pillar {
    padding: 0 4px;
  }
  .trust-bar__num {
    margin-bottom: 5px;
    font-size: clamp(15px, 4.8vw, 20px);
  }
  .trust-bar__num--gold {
    font-weight: 500;
  }
  .trust-bar__sub {
    font-size: clamp(10px, 2.7vw, 12px);
    line-height: 1.3;
    letter-spacing: 0.01em;
  }
  /* Nudged 2px left so its wider second line reads centred */
  .trust-bar__pillar:first-child .trust-bar__sub {
    position: relative;
    left: -2px;
  }
  .trust-bar__num--reviews {
    font-size: clamp(15px, 4.8vw, 20px);
    margin-bottom: 3px;
  }
  .trust-bar__label {
    /* tighter tracking + nowrap so "FIVE-STAR REVIEWS" holds one line */
    letter-spacing: 0.13em;
    white-space: nowrap;
    font-size: clamp(8.4px, 2.31vw, 10.5px);
    padding-left: 0.13em;
  }
  .trust-bar__rule {
    width: 42px;
    margin: 5px auto;
  }
  .trust-bar__pillar--reviews .trust-bar__sub {
    font-size: clamp(10px, 2.7vw, 12px);
    letter-spacing: 0;
    white-space: normal;
  }
  /* Heading — the hidden/reveal state moves from the band to the h2 */
  .shop-catalog__band {
    padding: 31px 18px 23px;
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .shop-catalog__heading {
    display: block;
    padding-bottom: 11px;
    font-size: clamp(24px, 7.6vw, 34px);
    letter-spacing: 0;
    text-align: center;
    opacity: 0;
    transform: translateY(24px);
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.25s ease;
    animation: shop-fade-in-soft 0.15s ease 2.6s forwards;
  }
  .shop-catalog__heading span {
    color: inherit;
    font-style: normal;
    font-weight: inherit;
  }
  .shop-catalog__heading::after {
    width: min(92px, 25vw);
    height: 1px;
  }
  .shop-catalog.is-visible .shop-catalog__heading {
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: 0.05s;
    animation: none;
  }
  /* Wrapper: auto height. Padding reserves the space for the lifestyle panel
     that hangs below the fixed-ratio grid (pack: 891/1208 panel with a -16px
     overlap). Overflow visible so the panel is not clipped. */
  .shop-catalog__canvas-wrap {
    aspect-ratio: auto;
    padding-bottom: calc(135.578% - 16px);
    overflow: visible;
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  /* Mobile: 2-column category grid with the lifestyle panel hung below.
     Geometry from the approved master: fixed 684/932 box, 28px row gap,
     symmetric 12px side padding, cards centred (they spill the box by a
     deliberate, symmetric amount), gradient background exactly 100% x 112%
     with the scroll parallax driving --bg-shift. */
  .shop-catalog__canvas {
    --panel-lift: 7px;
    --bg-shift: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 28px 16px;
    align-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 684/932;
    min-height: 0;
    padding: 28px 12px;
    overflow: visible;
    background-image: var(--shop-bg-mobile);
    background-size: 100% 112%;
    background-position: center calc(50% + var(--bg-shift));
    background-repeat: no-repeat;
    transform: none;
  }
  .shop-catalog__panel.shop-carousel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 461/638;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
    opacity: 0;
    touch-action: pan-y;
    cursor: grab;
    transition: transform 2.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.45s ease;
    animation: shop-panel-fallback 0.15s ease 2.9s forwards;
  }
  .shop-catalog__panel.shop-carousel:active {
    cursor: grabbing;
  }
  .shop-catalog__canvas .shop-catalog__panel--top-middle {
    grid-column: 1;
    grid-row: 1;
    transform: translateY(calc(58px - var(--panel-lift)));
  }
  .shop-catalog__canvas .shop-catalog__panel--top-right {
    grid-column: 2;
    grid-row: 1;
    transform: translate(62px, calc(-1 * var(--panel-lift)));
  }
  .shop-catalog__canvas .shop-catalog__panel--bottom-middle {
    grid-column: 1;
    grid-row: 2;
    transform: translate(-62px, calc(-1 * var(--panel-lift)));
  }
  .shop-catalog__canvas .shop-catalog__panel--bottom-right {
    grid-column: 2;
    grid-row: 2;
    transform: translateY(calc(58px - var(--panel-lift)));
  }
  .shop-catalog.is-visible .shop-catalog__panel.shop-carousel {
    opacity: 1;
    transform: translateY(calc(-1 * var(--panel-lift)));
    animation: none;
  }
  .shop-catalog.is-visible .shop-catalog__panel--top-middle {
    transition-delay: 0.18s;
  }
  .shop-catalog.is-visible .shop-catalog__panel--top-right {
    transition-delay: 0.3s;
  }
  .shop-catalog.is-visible .shop-catalog__panel--bottom-middle {
    transition-delay: 0.46s;
  }
  .shop-catalog.is-visible .shop-catalog__panel--bottom-right {
    transition-delay: 0.58s;
  }
  .shop-carousel .shop-carousel__image {
    transition: opacity 0.65s ease, transform 0.58s linear;
  }
  /* No hover zoom on touch layouts */
  .shop-carousel:hover .shop-carousel__image.is-active,
  .shop-carousel:focus-visible .shop-carousel__image.is-active {
    transform: scale3d(1, 1, 1);
  }
  /* Mobile card interior: label and dots are overlaid on the image. */
  .shop-carousel .shop-carousel__link {
    position: relative;
    inset: auto;
    display: block;
    height: 100%;
    background: transparent;
  }
  .shop-carousel__slides {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .shop-carousel .shop-carousel__image {
    position: absolute;
    inset: 0;
    transition: opacity 0.65s ease, transform 0.58s linear;
  }
  /* Prev/next buttons give way to dots + swipe */
  .shop-carousel__controls {
    display: none;
  }
  .shop-carousel__dots {
    position: absolute;
    left: 50%;
    bottom: 27px;
    z-index: 3;
    display: flex;
    gap: 4px;
    justify-content: center;
    width: auto;
    padding: 12px 10px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.75s ease;
    pointer-events: auto;
    animation: shop-dots-fallback 0.15s ease 3.2s forwards;
  }
  .shop-catalog.is-visible .shop-carousel__dots {
    opacity: 1;
    transition-delay: 1.05s;
    animation: none;
  }
  .shop-carousel__dot {
    width: 4px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
  }
  .shop-carousel__dot.is-active {
    width: 12px;
    border-radius: 999px;
    background: rgba(159, 123, 63, 0.78);
  }
  .shop-catalog__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    width: 100%;
    padding: 0 8px;
    font-family: "Cormorant Garamond", georgia, serif;
    font-size: clamp(14px, 3.7vw, 16px);
    font-weight: 500;
    line-height: 1.1;
    color: #000;
    text-align: center;
    transform: translateY(18px);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
    animation: shop-fade-in-soft 0.15s ease 3.2s forwards;
  }
  .shop-catalog.is-visible .shop-catalog__label {
    opacity: 1;
    transform: translateY(0);
    animation: none;
  }
  /* Keep every mobile label at 14px — the desktop bottom:28px bottom-panel
     rule must not leak into the 2-column layout. */
  .shop-catalog__panel--bottom-middle .shop-catalog__label,
  .shop-catalog__panel--bottom-right .shop-catalog__label {
    bottom: 14px;
  }
  .shop-catalog.is-visible .shop-catalog__panel--top-middle .shop-catalog__label {
    transition-delay: 0.5s;
  }
  .shop-catalog.is-visible .shop-catalog__panel--top-right .shop-catalog__label {
    transition-delay: 0.62s;
  }
  .shop-catalog.is-visible .shop-catalog__panel--bottom-middle .shop-catalog__label {
    transition-delay: 0.78s;
  }
  .shop-catalog.is-visible .shop-catalog__panel--bottom-right .shop-catalog__label {
    transition-delay: 0.9s;
  }
  /* Lifestyle panel hangs below the fixed-ratio grid with a -16px overlap
     (pack: sibling .mobile-lifestyle). The wrapper's padding-bottom reserves
     its space. */
  .shop-catalog__canvas .shop-catalog__panel--large {
    position: absolute;
    left: 0;
    top: calc(100% - 16px);
    width: 100%;
    height: auto;
    aspect-ratio: 891/1208;
    margin: 0;
    background: #f5f2ed;
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* The block class sits on both the hp-section element and the inner marquee
   section (BEM rename: ter-section-3 and ter-carousel-section both mapped to
   .press). This rule targets the shared class; the child combinator below
   keeps the inner-only box (padding/overflow) off the outer section. */
.press {
  margin: 0;
  background: #fff;
}

.press > .press {
  padding: 64px 0 56px;
  background: #fff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.press__heading {
  text-align: center;
  margin-bottom: 48px;
}

.press__heading p {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #b8860b;
  margin: 0;
  font-weight: 400;
}

.press__rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.press__row {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.press__row::before, .press__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 112px;
  z-index: 10;
  pointer-events: none;
}

.press__row::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.press__row::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

/* Track — holds two identical strips side by side */
.press__track {
  display: inline-flex;
}

/* Each strip is promoted to its own GPU compositing layer so the horizontal
   transform is hardware-smoothed at sub-pixel offsets (prevents per-frame
   repaint shimmer on the logos). */
.press__strip {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.press__strip--left {
  animation: press-scroll-left 75s linear infinite;
}

.press__strip--right {
  animation: press-scroll-right 76s linear infinite;
}

.press__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

/* Displayed at 25px, sourced at 75px (3× retina) so the browser has plenty
   of pixel data for crisp sub-pixel downscaling during the marquee transform.
   Each logo is cached as its own GPU layer so the marquee composites
   (translates) the bitmap instead of re-sampling it every frame. */
.press__logo img {
  height: 25px;
  width: auto;
  object-fit: contain;
  opacity: 0.48;
  transition: opacity 0.3s ease;
  -webkit-user-drag: none;
  user-select: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.press__logo img:hover {
  opacity: 1;
}

/* translate3d forces the GPU layer so sub-pixel offsets are
   hardware-smoothed (no shimmer). */
@keyframes press-scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes press-scroll-right {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* Tablet tightening — part of the desktop cascade, above the switch */
@media (width <= 1024px) {
  .press__logo img {
    height: 20.5px;
  }
  .press__logo {
    padding: 0 30px;
  }
  .press > .press {
    padding: 48px 0 24px;
  }
  .press__heading p {
    font-size: 1.25rem;
  }
}
.press.is-paused .press__strip {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .press__strip {
    animation-play-state: paused;
  }
}
@media (max-width: 768px) {
  .press__logo img {
    height: 19px;
  }
  .press__logo {
    padding: 0 20px;
  }
  .press > .press {
    padding: 40px 0 48px;
  }
  .press__heading {
    margin-bottom: 32px;
  }
  .press__heading p {
    font-size: 1rem;
    line-height: normal;
  }
  .press__row {
    display: flex;
    align-items: center;
    height: 22.5px;
    overflow: hidden;
  }
  .press__row::before,
  .press__row::after {
    width: 48px;
  }
  .press__rows {
    gap: 24px;
  }
  .press__track {
    flex-shrink: 0;
  }
}
.most-loved {
  --page-pad: clamp(18px, 4vw, 88px);
  position: relative;
  container-type: inline-size;
  padding: 36px 0 90px;
  background: #fff;
  overflow: clip;
  font-family: jost, system-ui, sans-serif;
}

.most-loved__header {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 var(--page-pad) 34px;
}

.most-loved__header h2 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(1.91rem, 3.26vw, 2.94rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #000;
}

.most-loved__header span {
  display: block;
  width: 144px;
  height: 1px;
  background: #b8973a;
}

.most-loved__row {
  display: grid;
  align-items: center;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.most-loved__row--top {
  grid-template-columns: 58vw minmax(380px, 1fr);
  margin-top: 4px;
  align-items: start;
}

.most-loved__row--bottom {
  grid-template-columns: minmax(360px, 42vw) 58vw;
  margin-top: clamp(72px, 10vw, 160px);
  align-items: center;
}

.most-loved__window {
  width: 100%;
  position: relative;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.most-loved__window::-webkit-scrollbar {
  display: none;
}

.most-loved__window--static {
  overflow: visible;
}

.most-loved__window--static .most-loved__card {
  flex-basis: calc(33.3333333333% + 2px);
}

.most-loved__window--carousel {
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  /* The butted-seam strip (negative right-margin per card + oversized
     flex-basis) renders slightly wider than the window, so the browser
     starts scrolled ~32px in and clips the first card's label. Instant
     scroll-behavior + no scroll-snap anchoring let the script snap the
     strip back to 0 without the browser re-anchoring it. */
  scroll-behavior: auto;
}

.most-loved__window--carousel:active {
  cursor: grabbing;
}

.most-loved__window--carousel .most-loved__card {
  scroll-snap-align: none;
}

.most-loved__window--carousel .most-loved__card:first-child {
  margin-left: 0;
}

.most-loved__carousel-wrap {
  position: relative;
  width: 100%;
}

.most-loved__window--carousel .most-loved__card,
.most-loved__window--carousel img {
  -webkit-user-drag: none;
  user-select: none;
}

.most-loved__strip {
  display: flex;
  align-items: stretch;
}

.most-loved__card {
  display: block;
  flex: 0 0 calc(33.3333333333% + 6px);
  margin-right: -6px;
  min-width: 0;
  overflow: hidden;
  background: #e8e8e5;
  scroll-snap-align: start;
  text-decoration: none;
  position: relative;
  transform: translate3d(var(--start-x, 0), 0, 0);
  opacity: 0;
  transition: transform 1750ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1400ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.most-loved__card:last-child {
  margin-right: 0;
}

.most-loved__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 413/607;
  object-fit: cover;
}

.most-loved__strip--from-left .most-loved__card[data-reveal-item] {
  --start-x: -32px;
}

.most-loved__strip--from-right .most-loved__card[data-reveal-item] {
  --start-x: 32px;
}

.is-visible .most-loved__card,
.most-loved__card:not([data-reveal-item]) {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* ── Product label overlay (name + price on the photo) ──
   Sits on the image with a soft white fade and a short gold rule; floats
   up into place once the card's own reveal transform settles (the script
   marks it .is-settled at transitionend). */
.most-loved__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 38px 14px 14px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.most-loved__card.is-settled .most-loved__label {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Safety net — if transitionend never fires (reduced motion, cached CSS),
   the label still reveals with the parent row, on the same float-in feel. */
[data-reveal-group].is-visible .most-loved__label {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 1300ms;
}

.most-loved__label-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(159, 123, 63, 0.85);
  margin-bottom: 8px;
}

.most-loved__label-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.most-loved__label-name {
  display: block;
  font-family: jost, system-ui, sans-serif;
  color: #000;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.85);
}

/* Line 1 = product (slightly larger + heavier), line 2 = variant qualifier */
.most-loved__label-name--line-1,
.most-loved__label-name--line-2 {
  display: block;
}

.most-loved__label-name--line-1 {
  font-size: 14.1px;
  font-weight: 450;
  line-height: 1.2;
}

.most-loved__label-name--line-2 {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 1px;
}

.most-loved__label-price {
  font-family: jost, system-ui, sans-serif;
  font-weight: 500;
  font-size: 15.3px;
  letter-spacing: 0.04em;
  color: #856713;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* ── Peach ampersand watermark — one steady gradient across two symbols.
   The ampersand is a pre-coloured image (inline style, cascade-resolved);
   the "e" is a text gradient. Stops are matched so the two read as one
   continuous flow. Geometry is in cqw so it tracks the width-scaled
   product imagery at any viewport. */
.most-loved__watermark--top {
  position: absolute;
  right: 1.5%;
  top: calc(10% - 5.95cqw);
  width: 50.2cqw;
  aspect-ratio: 1179/1334;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.most-loved__watermark--bottom {
  position: absolute;
  left: calc(5% + 8.93cqw);
  top: calc(4% + 21.82cqw);
  font-family: "Cormorant Garamond", georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 57cqw;
  line-height: 1;
  transform-origin: center;
  transform: rotate(-30deg);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  background-image: linear-gradient(to bottom, rgba(238, 146, 104, 0.24) 0%, rgba(238, 146, 104, 0.1) 100%);
  background-clip: text;
  color: transparent;
}

.most-loved__trust-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0px, 1.5vw, 24px);
  width: min(94%, 780px);
  place-self: start center;
  padding: 0 clamp(4px, 0.6vw, 12px);
}

.most-loved__trust-pair--right {
  margin-top: clamp(78px, 8.9vw, 171px);
}

.most-loved__trust-stack {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.5vw, 34px);
  width: min(78%, 520px);
  place-self: start center;
  padding: 0 clamp(34px, 5vw, 92px);
  margin-top: clamp(8px, 1vw, 18px);
}

.trust-card {
  width: 100%;
  min-height: clamp(136px, 9.8vw, 178px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  padding: clamp(16px, 1.45vw, 28px) clamp(16px, 1.65vw, 28px);
}

.trust-card__icon {
  width: clamp(40px, 2.53vw, 50px);
  height: clamp(40px, 2.53vw, 50px);
  margin-bottom: clamp(11px, 0.9vw, 16px);
  display: block;
  overflow: visible;
}

.trust-card__icon,
.trust-card__icon * {
  fill: none !important;
  stroke: rgba(184, 151, 58, 0.82) !important;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.trust-card > h2 {
  margin: 0 0 clamp(9px, 0.7vw, 13px);
  font-family: "Cormorant Garamond", georgia, serif !important;
  font-size: clamp(1.08rem, 1.09vw, 1.3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap;
}

.trust-card__num {
  font-family: jost, system-ui, arial, sans-serif !important;
  font-size: 0.94em; /* Jost digit cap-height matched to the Cormorant words beside them */
  font-weight: 500;
  letter-spacing: 0.04em;
}

.trust-card > p {
  max-width: 27em;
  margin: 0 auto;
  font-family: jost, system-ui, arial, sans-serif !important;
  font-size: clamp(0.67rem, 0.68vw, 0.82rem);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.75) !important;
}

.most-loved__controls {
  position: absolute;
  top: clamp(-52px, -3vw, -40px);
  left: clamp(24px, 1vw + 20px, 34px);
  z-index: 4;
  display: flex;
  gap: 8px;
}

.most-loved__arrow {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(184, 151, 58, 0.52);
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.92);
  color: #9f842f;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}

.most-loved__arrow span {
  display: block;
  font-family: georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  line-height: 0.8;
  transform: translateY(-1px);
}

.most-loved__arrow:hover {
  background: #fff;
  border-color: rgba(184, 151, 58, 0.9);
  color: #6f5d22;
}

.most-loved-reveal-up {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: transform 1800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1400ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.most-loved-reveal-right {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  transition: transform 1800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1400ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.is-visible.most-loved-reveal-up,
.is-visible .most-loved-reveal-up,
.is-visible.most-loved-reveal-right,
.is-visible .most-loved-reveal-right {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.is-settled {
  transform: none !important;
  will-change: auto !important;
}

/* Mobile experience subtree — hidden until the max-width block */
.most-loved__mobile-wrap {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .most-loved__card,
  .most-loved-reveal-up,
  .most-loved-reveal-right {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .most-loved__label {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 768px) {
  .most-loved {
    padding: 18px 0 48px;
  }
  /* The desktop watermarks stay out of the single-column layout — the
     mobile watermark lives inside the trust stack */
  .most-loved__watermark--top,
  .most-loved__watermark--bottom {
    display: none;
  }
  .most-loved__header {
    padding: 5px 22px 8px;
  }
  .most-loved__header h2 {
    margin: 0 0 13px;
    font-size: clamp(24px, 7.6vw, 34px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0;
  }
  .most-loved__header span {
    width: 72px;
  }
  .most-loved__row--top,
  .most-loved__row--bottom {
    display: none;
  }
  .most-loved__mobile-wrap {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 13px;
  }
  .most-loved__window--mobile {
    padding: 0 22px 8px;
  }
  .most-loved__window--mobile .most-loved__strip {
    gap: 14px;
  }
  .most-loved__card--mobile {
    flex: 0 0 82%;
    margin-right: 0;
    background: transparent;
    opacity: 1;
    transform: none;
    /* Mobile cards keep their swipe snap — the snap-disabled desktop fix
       above only exists for the butted-seam desktop strip */
    scroll-snap-align: start;
  }
  .most-loved__card--mobile img {
    background: #e8e8e5;
    transform: none;
  }
  /* No scroll reveal on mobile — labels are visible from the start,
     in a compact size matched to the narrower panels */
  .most-loved__card--mobile .most-loved__label {
    opacity: 1;
    transform: none;
    transition: none;
    padding: 26px 10px 10px;
  }
  .most-loved__card--mobile .most-loved__label-rule {
    width: 30px;
    margin-bottom: 6px;
  }
  .most-loved__card--mobile .most-loved__label-row {
    gap: 8px;
  }
  .most-loved__card--mobile .most-loved__label-name--line-1 {
    font-size: 12px;
    font-weight: 500;
  }
  .most-loved__card--mobile .most-loved__label-name--line-2 {
    font-size: 10.5px;
  }
  .most-loved__card--mobile .most-loved__label-price {
    font-size: 12px;
  }
  .most-loved__trust-stack--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 28px 22px 8px;
    width: 100%;
    position: relative; /* anchors the peach ampersand watermark */
  }
  /* Peach ampersand watermark behind the mobile trust badges. A gradient
     background is masked by the ampersand glyph so the shape and colour
     match the reference mobile build. mask-image is set inline from the
     template; mask-mode: alpha keeps Chrome from treating the .webp as a
     luminance mask. */
  .most-loved__watermark--mobile {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(238, 146, 104, 0.95) 0%, rgba(238, 146, 104, 0.52) 100%);
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-mask-position: center calc(50% + 7px);
    mask-position: center calc(50% + 7px);
    -webkit-mask-size: auto 95%;
    mask-size: auto 95%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    /* stylelint-enable property-no-vendor-prefix */
  }
  .most-loved__trust-stack--mobile .trust-card {
    position: relative;
    z-index: 1; /* badges read over the watermark */
    width: 100%;
    max-width: 320px;
    padding: 18px 12px;
  }
  .most-loved__trust-stack--mobile .trust-card__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
  }
  .most-loved__trust-stack--mobile .trust-card > h2 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    line-height: 1.25;
    white-space: normal;
  }
  .most-loved__trust-stack--mobile .trust-card > p {
    font-size: 0.672rem;
  }
}
.how-made {
  --gold: #b8973a;
  /* Pulls the section up to tighten the gap after Most Loved; the heading
     band's own padding keeps the content clear. Kept as a local negative
     margin because the mobile breakpoint has less preceding padding than
     the overlap. */
  margin-top: -1.5cm;
  background: #fff;
  color: #000;
}

/* ── Heading band ─────────────────────────────────────────
   The band and the film wrap each declare data-header-theme; header.js
   picks the innermost marker whose bounds intersect the header probe line.
   While the probe is over the white band the header stays light; once it
   passes onto the black film the header goes dark. */
.how-made__band {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 54px 24px 34px;
  text-align: center;
  background: #fff;
}

.how-made__heading {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 13px;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(1.91rem, 3.26vw, 2.94rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #000;
}
.how-made__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 264px;
  height: 0.7px;
  background: #a39673;
  transform: translateX(-50%);
}
.how-made__heading {
  opacity: 0;
  transform: translateY(22px);
  transition: transform 1.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
  animation: how-made-heading-fallback 0.15s ease 2.2s forwards;
}

@keyframes how-made-heading-fallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.how-made.is-visible .how-made__heading {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

.how-made.is-alive .how-made__title-card {
  animation: none;
}

/* Raised so the ® top sits at cap height */
.how-made__registered {
  position: relative;
  top: calc(-0.9em - 2px);
  margin-left: 0.03em;
  font-family: arial, "Helvetica Neue", sans-serif;
  font-size: 0.3em;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 0;
}

.how-made__wrap {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  /* Black, not white: any sub-pixel rounding sliver at the film's edge
     must read as film border, never as a white strip. (The placeholder
     covers this box pre-load, so the change is invisible.) */
  background: #000;
  /* Label text is sized in cqw = % of THIS element's width, so the scene
     labels stay the same fraction of the film at any screen size. */
  container-type: inline-size;
}

.how-made__placeholder-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.how-made__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.how-made__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.how-made__video.is-ready {
  opacity: 1;
}

/* How-made overrides the shared ring-loader only where it differs. */
.how-made .ring-loader__arc {
  stroke: url("#how-made-neon-gradient");
}

.how-made .ring-loader__text {
  animation: how-made-text-pulse 2s ease-in-out infinite;
}

@keyframes how-made-text-pulse {
  0%, 100% {
    opacity: 0.58;
  }
  50% {
    opacity: 1;
  }
}
/* ── Scene label layer ────────────────────────────────────
   Timed text overlays driven by video.currentTime (see how-made.js), so
   they stay correct on every loop and work no matter how the film was
   started. z-index 3, pointer-events: none — never intercepts clicks. */
.how-made__labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --champagne: #e9d6a8; /* label body colour */
  --gold-italic: #e3c27e; /* italic accent in the title card */
  --eyebrow: #d9b96c; /* stage numeral / eyebrow */
  --rule: rgba(201, 169, 106, 0.85);
  --fade: 0.7s; /* single source of truth for every label fade */
}

.how-made__label {
  opacity: 0;
  transition: opacity var(--fade) ease, transform var(--fade) ease;
}

.how-made__label.is-on {
  opacity: 1;
}

/* Opening title card (centred) */
.how-made__title-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(10px);
  animation: how-made-title-fallback 0.15s ease 2.5s forwards;
}

@keyframes how-made-title-fallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.how-made__title-card.is-on {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

.how-made__title-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 20% at 50% 50%, rgba(10, 8, 5, 0.54) 0%, rgba(10, 8, 5, 0.38) 58%, rgba(10, 8, 5, 0.14) 82%, rgba(10, 8, 5, 0) 100%);
}

.how-made__title-text {
  position: relative;
  max-width: 78%;
  text-align: center;
  font-family: "Cormorant Garamond", georgia, serif;
  font-weight: 500;
  font-size: 4.3cqw;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 3px 28px rgba(0, 0, 0, 0.65);
}

.how-made__title-text .how-made__title-plain {
  color: #fff;
}

.how-made__title-text .how-made__title-accent {
  font-style: italic;
  color: var(--gold-italic);
}

.how-made__title-rule {
  position: relative;
  width: 6cqw;
  height: 1px;
  background: #c9a96a;
  margin-top: 2cqw;
}

/* Shared corner scrim: on whenever any stage label is showing */
.how-made__corner-scrim {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: 46%;
  background: radial-gradient(ellipse 100% 100% at 6% 100%, rgba(10, 8, 5, 0.7) 0%, rgba(10, 8, 5, 0.52) 48%, rgba(10, 8, 5, 0.22) 74%, rgba(10, 8, 5, 0) 100%);
}

/* Corner chapter mark (lower-left) — only one is ever .is-on at a time */
.how-made__corner-mark {
  position: absolute;
  left: 4.2%;
  bottom: 7.5%;
  transform: translateY(10px);
}

.how-made__corner-mark.is-on {
  transform: translateY(0);
}

/* The artisan's-hand shot holds the rose lower in frame → drop this one */
.how-made__corner-mark[data-stage="3"] {
  bottom: 2.6%;
}

.how-made__corner-eyebrow {
  font-family: jost, system-ui, sans-serif;
  font-size: 1.18cqw;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--eyebrow);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.how-made__corner-rule {
  width: 3.37cqw;
  height: 1px;
  background: var(--rule);
  margin: 1.15cqw 0;
}

.how-made__corner-name {
  font-family: "Cormorant Garamond", georgia, serif;
  font-weight: 500;
  font-size: 3.73cqw;
  line-height: 1;
  color: var(--champagne);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .how-made__heading,
  .how-made__video,
  .how-made .ring-loader {
    transition: none;
  }
  .how-made .ring-loader__svg,
  .how-made .ring-loader__ring::before,
  .how-made .ring-loader__text {
    animation: none;
  }
  .how-made__label,
  .how-made__title-card,
  .how-made__corner-mark {
    transition: opacity var(--fade) ease;
    transform: none;
  }
}
@media (max-width: 768px) {
  .how-made {
    margin-top: 0;
  }
  .how-made__band {
    padding: 11px 18px 23px;
  }
  .how-made__heading {
    padding-bottom: 11px;
    font-size: clamp(24px, 7.6vw, 34px);
    letter-spacing: 0;
  }
  .how-made__heading::after {
    width: min(118px, 31vw);
    height: 1px;
  }
  .how-made__wrap {
    aspect-ratio: 1/1;
  }
  .how-made .ring-loader {
    gap: 20px;
  }
  .how-made .ring-loader__ring {
    width: 82px;
    height: 82px;
  }
  .how-made .ring-loader__ring::before {
    inset: -14px;
  }
  .how-made .ring-loader__svg {
    width: 82px;
    height: 82px;
  }
  .how-made .ring-loader__text {
    font-size: 12px;
    letter-spacing: 0.27em;
  }
  /* Title fills the frame width on one line; the scrim ellipse widens
     to sit behind it (the desktop title is a shorter line) */
  .how-made__title-scrim {
    background: radial-gradient(ellipse 94% 22% at 50% 50%, rgba(10, 8, 5, 0.54) 0%, rgba(10, 8, 5, 0.38) 58%, rgba(10, 8, 5, 0.14) 82%, rgba(10, 8, 5, 0) 100%);
  }
  .how-made__title-text {
    max-width: 96%;
    white-space: nowrap;
    font-size: 6.5cqw;
  }
  .how-made__title-rule {
    width: 9cqw;
    margin-top: 2.6cqw;
  }
  /* Per-label corner clouds replace the shared scrim: the title card's
     gradient stops as one quarter-oval anchored at the frame's bottom-left
     corner — darkest at the corner, fading above the Stage word and just
     beyond the name. Frame-anchored, so all five labels share geometry. */
  .how-made__corner-scrim {
    display: none;
  }
  .how-made__corner-mark {
    bottom: 3.8%;
  }
  .how-made__corner-mark::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    left: -4.2cqw;
    bottom: -3.8cqw;
    width: 65cqw;
    height: 32cqw;
    background: radial-gradient(60cqw 30cqw at 0% 100%, rgba(10, 8, 5, 0.54) 0%, rgba(10, 8, 5, 0.38) 58%, rgba(10, 8, 5, 0.14) 82%, rgba(10, 8, 5, 0) 100%);
  }
  /* Stage III: nudged 10px left so "The Artisan's Hand" clears the rose
     head; its cloud compensates to stay pinned to the same frame corner. */
  .how-made__corner-mark[data-stage="3"] {
    left: calc(4.2% - 10px);
    bottom: 2.6%;
  }
  .how-made__corner-mark[data-stage="3"]::before {
    left: calc(-4.2cqw + 10px);
    bottom: -2.6cqw;
  }
  .how-made__corner-eyebrow {
    font-size: 2.36cqw;
  }
  .how-made__corner-rule {
    width: 6.74cqw;
    margin: 2.3cqw 0;
  }
  .how-made__corner-name {
    font-size: 7.46cqw;
  }
}
.reviews {
  margin: 0;
  background: #fff;
}

.reviews__intro,
.reviews__outro {
  height: 0;
  background: #fff;
}

.reviews__stage {
  min-height: 0;
  background: #fff;
}

.reviews__sticky {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  background: #fff;
  overflow: hidden;
}

.reviews__sticky .reviews-carousel--split {
  width: 100%;
}

.reviews-carousel {
  --rc-bg: #fff;
  --rc-card-bg: #fff;
  --rc-text: #2a2520;
  --rc-text-muted: #7a7268;
  --rc-olive: #6b8e23;
  --rc-olive-hover: #5a7a1c;
  --rc-gold: #b8860b;
  --rc-star: #e8a500;
  --rc-border: #f0ebe5;
  --rc-quote: #e8e0d6;
  --rc-arrow-border: #e0d8cf;
  --rc-dot-inactive: #d4ccc2;
  --rc-dot-inactive-hover: #bbb2a6;
  --rc-font-sans: 'Jost', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --rc-font-serif: 'Playfair Display', georgia, Times New Roman, serif;
}

.reviews-carousel--split {
  --rc-bg: #fff;
  --rc-text: #171717;
  --rc-text-muted: #6f6962;
  --rc-olive: #6b8120;
  --rc-olive-hover: #526619;
  --rc-gold: #856713; /* darker readable gold — small text on white needs 4.5:1 AA */
  --rc-star: #a8801a; /* rating stars matched to the deep gold */
  padding: 75px 0;
}

.reviews-carousel {
  width: 100%;
  padding: 56px 0 48px;
  background: var(--rc-bg);
  font-family: var(--rc-font-sans);
  color: var(--rc-text);
  overflow: hidden;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  /* The masters render this section with UA-normal line-heights; neutralise
     the theme's inherited 1.5 so text metrics match the pack exactly. */
  line-height: normal;
}

.reviews-carousel *, .reviews-carousel *::before, .reviews-carousel *::after {
  box-sizing: border-box;
}

.reviews-carousel__header {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 40px;
}

.reviews-carousel__label {
  font-size: 13px;
  font-weight: 700 !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--rc-gold);
  margin: 0 0 14px;
}

.reviews-carousel__title {
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(37.5px, 2.45vw, 47px);
  font-weight: 400 !important;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rc-text);
  margin: 0 0 12px;
}

.reviews-carousel__title em {
  color: #cf8a69; /* logo peach darkened 15% */
  font-style: italic;
  font-weight: 700 !important;
}

.reviews-carousel__subheading {
  font-size: 14px;
  color: var(--rc-text-muted);
  margin: 0;
}

.reviews-carousel__subheading a {
  color: var(--rc-gold);
  text-decoration: underline;
  font-weight: 400 !important;
  transition: color 0.2s;
}

.reviews-carousel__subheading a:hover {
  color: #5f4a0e; /* deeper gold hover */
}

/* The masters differ in copy per platform: "hundreds" (desktop) vs
   "thousands" (mobile) of similar five star reviews. */
.reviews-carousel__sub-trail--mobile {
  display: none;
}

.reviews-carousel__scroller {
  position: relative;
}

.reviews-carousel__track {
  display: flex;
  gap: 20px;
  padding: 0 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.reviews-carousel__track::-webkit-scrollbar {
  display: none;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  width: 300px;
  min-width: 300px;
  background: var(--rc-card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: box-shadow 0.3s;
}

.review-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.review-card__quote {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--rc-font-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--rc-quote);
  user-select: none;
  pointer-events: none;
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.review-card__name {
  font-family: jost, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600 !important;
  line-height: 1.3;
  margin: 0;
}

.review-card__occasion {
  font-family: jost, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--rc-text-muted);
  margin: 2px 0 0;
}

.review-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
}

.review-card__stars svg {
  width: 18px;
  height: 18px;
  fill: var(--rc-star);
  color: var(--rc-star);
}

.review-card__text {
  font-family: jost, system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #3a342c;
  flex: 1;
  margin: 0;
}

.review-card__highlight {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rc-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-card__highlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-gold);
  flex-shrink: 0;
}

.review-card__highlight-text {
  font-family: jost, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400 !important;
  color: var(--rc-gold);
}

.reviews-carousel__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1f1ef;
  border: 1px solid var(--rc-arrow-border);
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.reviews-carousel__arrow:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  background: #e8e8e5;
}

.reviews-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reviews-carousel__arrow--prev {
  left: 8px;
}

.reviews-carousel__arrow--next {
  right: 8px;
}

.reviews-carousel__arrow svg {
  width: 20px;
  height: 20px;
  color: #444;
  stroke: #444;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reviews-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.reviews-carousel__dot {
  height: 8px;
  border-radius: 4px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--rc-dot-inactive);
  width: 8px;
}

.reviews-carousel__dot:hover {
  background: var(--rc-dot-inactive-hover);
}

.reviews-carousel__dot.is-active {
  width: 24px;
  background: var(--rc-gold);
}

.reviews-carousel__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin-top: 28px;
  gap: 16px;
}

@media (width >= 640px) {
  .reviews-carousel__footer {
    flex-direction: row;
  }
}
.reviews-carousel__footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews-carousel__avatars {
  display: flex;
}

.reviews-carousel__mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--rc-bg);
  margin-left: -8px;
}

.reviews-carousel__mini-avatar:first-child {
  margin-left: 0;
}

.reviews-carousel__footer-text {
  font-size: 14px;
  color: var(--rc-text-muted);
}

.reviews-carousel__footer-text strong {
  color: var(--rc-text);
  font-weight: 400 !important;
}

.reviews-carousel__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--rc-olive);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}

.reviews-carousel__badge svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  color: #fff;
}

/* The footer's Verified badge is mobile-only — desktop pins it right. */
.reviews-carousel__verified {
  display: none;
}

.reviews-carousel--split .reviews-carousel__header,
.reviews-carousel--split .reviews-carousel__left,
.reviews-carousel--split .reviews-carousel__right img {
  opacity: 0;
  will-change: transform, opacity;
}

.reviews-carousel--split .reviews-carousel__header {
  transform: translate3d(0, 18px, 0);
  transition: transform 1450ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1120ms ease;
}

.reviews-carousel--split .reviews-carousel__left {
  transform: translate3d(0, 18px, 0);
  transition: transform 1450ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1120ms ease;
  transition-delay: 500ms;
}

.reviews-carousel--split .reviews-carousel__right img {
  transition: transform 1450ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1120ms ease;
  transition-delay: 1000ms;
}

.reviews-carousel--split.is-visible .reviews-carousel__header,
.reviews-carousel--split.is-visible .reviews-carousel__left,
.reviews-carousel--split.is-visible .reviews-carousel__right img {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reviews-carousel--split .reviews-carousel__header {
  width: min(1040px, 72vw);
  margin: 0 auto 36px;
  padding: 0;
}

.reviews-carousel--split .reviews-carousel__label {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 2.7px;
}

.reviews-carousel--split .reviews-carousel__title {
  line-height: 1.1;
  margin-bottom: 10px;
}

.reviews-carousel--split .reviews-carousel__subheading {
  font-size: 13px;
}

.reviews-carousel__body {
  display: grid;
  grid-template-columns: minmax(720px, 59.5vw) 1fr;
  column-gap: clamp(52px, 8vw, 132px);
  align-items: start;
  width: 100%;
}

.reviews-carousel__left {
  min-width: 0;
}

.reviews-carousel--split .reviews-carousel__track {
  gap: 18px;
  padding: 0;
}

.reviews-carousel--split .review-card {
  width: calc((59.5vw - 36px) / 3);
  min-width: calc((59.5vw - 36px) / 3);
  min-height: 335px;
  padding: 24px 22px 22px;
  border-radius: 11px;
}

.reviews-carousel--split .review-card__avatar {
  width: 42px;
  height: 42px;
}

.reviews-carousel--split .review-card__text {
  font-size: clamp(15px, 0.92vw, 17px);
  line-height: 1.5;
}

.reviews-carousel--split .review-card__highlight-text {
  font-size: clamp(13px, 0.85vw, 15px);
}

.reviews-carousel--split .reviews-carousel__arrow {
  width: 48px;
  height: 48px;
  border: 2.5px solid rgba(232, 135, 30, 0.6);
  border-radius: 50%;
  background: rgba(232, 232, 228, 0.88);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}
.reviews-carousel--split .reviews-carousel__arrow:hover, .reviews-carousel--split .reviews-carousel__arrow:focus-visible {
  background: rgba(222, 222, 218, 0.94);
  border-color: rgba(232, 135, 30, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  outline: none;
}
.reviews-carousel--split .reviews-carousel__arrow svg {
  width: 40px;
  height: 40px;
  stroke: #e8871e;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.reviews-carousel--split .reviews-carousel__arrow {
  display: flex;
  top: 50%;
  transform: translateY(-50%);
}

.reviews-carousel--split .reviews-carousel__arrow svg {
  color: #e8871e;
}

.reviews-carousel--split .reviews-carousel__arrow--prev {
  left: auto;
  right: -62px;
}

.reviews-carousel--split .reviews-carousel__arrow--next {
  right: -114px;
}

.reviews-carousel--split .reviews-carousel__dots {
  justify-content: flex-end;
  margin: 24px 26px 0 0;
}

.reviews-carousel--split .reviews-carousel__footer {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 0 0 20px;
  margin-top: 34px;
}

.reviews-carousel--split .reviews-carousel__badge {
  display: none;
}

.reviews-carousel__right {
  position: relative;
  display: grid;
  place-items: start center;
  min-height: 310px;
  padding-right: clamp(70px, 9vw, 150px);
  padding-top: clamp(104px, 6.8vw, 130px);
}

.reviews-carousel__right img {
  display: block;
  width: clamp(129px, 10.4vw, 184px);
  max-width: 100%;
  height: auto;
  transform: translate3d(0, 18px, 0);
}

/* Decorative peach line-drawing rose. Lives in .reviews__stage (outside the
   clipping .reviews__sticky) so its stalk can overflow onto the next section.
   Positioned off the Verified badge's measured spot; the right clamp stops
   a page-wide horizontal scrollbar at high browser zoom. */
.reviews__ornament {
  position: absolute;
  top: calc(224px + 11.98vw);
  right: max(0px, 20.57vw - 203px);
  width: 245px;
  height: auto;
  pointer-events: none;
  z-index: 5;
}

@media (width <= 1100px) {
  .reviews-carousel__body {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }
  .reviews-carousel--split .reviews-carousel__track {
    padding-inline: 24px;
  }
  .reviews-carousel--split .review-card {
    width: 320px;
    min-width: 320px;
  }
  .reviews-carousel__right {
    padding-right: 0;
  }
}
@media (max-width: 768px) {
  .reviews-carousel--split {
    /* Cream only rings the mini-avatars; the section surface stays white
       (assembled master: background #ffffff, padding-bottom 1px). */
    --rc-bg: #fbfaf7;
    --rc-card-bg: rgba(255, 255, 255, 0.88);
    --rc-text: #171717;
    --rc-text-muted: #756f68;
    --rc-olive: #857330;
    --rc-olive-hover: #6f6028;
    --rc-gold: #b8973a;
    --rc-star: #b8973a;
    --rc-border: rgba(184, 151, 58, 0.18);
    --rc-quote: rgba(184, 151, 58, 0.13);
    /* Mobile master sets this section in Plus Jakarta Sans (self-hosted,
       media-gated @font-face in fonts.scss). */
    --rc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', roboto, sans-serif;
    padding: 38px 16px 1px;
    overflow: visible;
    background: #fff;
  }
  /* The split grid collapses; the badge column and the rose are desktop-only. */
  .reviews-carousel__body {
    display: block;
  }
  .reviews-carousel__right,
  .reviews__ornament {
    display: none !important;
  }
  /* Desktop scroll-motion start states give way to per-item reveals. */
  .reviews-carousel--split .reviews-carousel__header,
  .reviews-carousel--split .reviews-carousel__left,
  .reviews-carousel--split .reviews-carousel__right img {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  /* Scales with the phone so the heading's 2-line wrap holds at any width. */
  .reviews-carousel--split .reviews-carousel__header {
    width: auto;
    max-width: min(91vw, 420px);
    margin: 0 auto 28px;
    padding: 0;
  }
  .reviews-carousel--split .reviews-carousel__label {
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.1px;
    color: #856713;
  }
  .reviews-carousel--split .reviews-carousel__title {
    font-family: "Cormorant Garamond", georgia, serif;
    margin-bottom: 12px;
    /* below the 7.6vw section standard so this LONG heading holds two
       lines on typical phones (owner spec 14 Jul 2026) */
    font-size: clamp(22px, 6.93vw, 30px);
    font-weight: 400 !important;
    line-height: 1.14;
    letter-spacing: 0.02em;
  }
  .reviews-carousel--split .reviews-carousel__title em {
    color: #cf8a69;
    font-weight: 700 !important;
  }
  .reviews-carousel--split .reviews-carousel__subheading {
    font-size: 13px;
    line-height: 1.45;
  }
  .reviews-carousel--split .reviews-carousel__subheading a {
    color: #856713;
    font-weight: 600;
  }
  .reviews-carousel--split .reviews-carousel__sub-trail--desktop {
    display: none;
  }
  .reviews-carousel--split .reviews-carousel__sub-trail--mobile {
    display: inline;
  }
  /* Per-item reveal start states — JS adds .is-visible.
     Short fallback animations keep static/no-IO contexts visible. */
  @keyframes reviews-card-fallback {
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes reviews-reveal-fallback {
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  .reviews-carousel--split .reviews-carousel__reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: transform 1550ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1200ms ease;
    will-change: transform, opacity;
    animation: reviews-reveal-fallback 0.15s ease 2.4s forwards;
  }
  .reviews-carousel--split .reviews-carousel__reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: none;
  }
  /* Static 2-column card grid (the mobile master drops the carousel). */
  .reviews-carousel--split .reviews-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .reviews-carousel--split .review-card {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 14px 12px 13px;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    background: var(--rc-card-bg);
    box-shadow: 0 8px 26px rgba(45, 36, 20, 0.04);
    scroll-snap-align: none;
    opacity: 0;
    transform: translate3d(0, 38px, 0);
    transition: transform 1500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1200ms ease;
    transition-delay: var(--mobile-delay, 0ms);
    will-change: transform, opacity;
    animation: reviews-card-fallback 0.15s ease 2.9s forwards;
  }
  /* The master shows six cards on phones. */
  .reviews-carousel--split .review-card:nth-child(n+7) {
    display: none;
  }
  .reviews-carousel--split .review-card:nth-child(2n) {
    --mobile-delay: 120ms;
  }
  .reviews-carousel--split .review-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: none;
  }
  .reviews-carousel--split .review-card__quote {
    top: 10px;
    right: 11px;
    font-size: 30px;
    color: var(--rc-quote);
  }
  .reviews-carousel--split .review-card__header {
    gap: 8px;
    margin-bottom: 10px;
  }
  /* Avatars and highlight dots are all brand gold on phones (the per-reviewer
     colours are desktop-only). */
  .reviews-carousel--split .review-card__avatar,
  .reviews-carousel--split .reviews-carousel__mini-avatar,
  .reviews-carousel--split .review-card__highlight-dot {
    background: var(--rc-gold) !important;
  }
  .reviews-carousel--split .review-card__avatar {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  .reviews-carousel--split .review-card__name {
    font-family: var(--rc-font-sans);
    font-size: 12px;
    font-weight: 700 !important;
  }
  .reviews-carousel--split .review-card__occasion {
    font-family: var(--rc-font-sans);
    font-size: 10px;
    line-height: 1.25;
  }
  .reviews-carousel--split .review-card__stars {
    margin-bottom: 9px;
  }
  .reviews-carousel--split .review-card__stars svg {
    width: 12px;
    height: 12px;
  }
  .reviews-carousel--split .review-card__text {
    font-family: var(--rc-font-sans);
    font-size: 11px;
    line-height: 1.48;
    color: #444;
  }
  .reviews-carousel--split .review-card__highlight {
    align-items: flex-start;
    margin-top: 11px;
    padding-top: 10px;
    gap: 6px;
  }
  .reviews-carousel--split .review-card__highlight-dot {
    width: 5px;
    height: 5px;
    margin-top: 5px;
  }
  .reviews-carousel--split .review-card__highlight-text {
    font-family: var(--rc-font-sans);
    color: var(--rc-olive);
    font-size: 10.5px;
    font-weight: 600 !important;
    line-height: 1.35;
  }
  /* No carousel chrome on the static grid. */
  .reviews-carousel--split .reviews-carousel__dots,
  .reviews-carousel--split .reviews-carousel__arrow {
    display: none;
  }
  .reviews-carousel--split .reviews-carousel__footer {
    margin-top: 24px;
    padding: 0 22px;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .reviews-carousel--split .reviews-carousel__footer-top-row {
    justify-content: space-between;
    flex-wrap: wrap; /* safety net so the badge can never bleed off-page */
    gap: 6px;
    width: 100%;
  }
  .reviews-carousel--split .reviews-carousel__avatars {
    flex-shrink: 0;
  }
  /* Tighter overlap so the row fits on one line; circles stay 30px. */
  .reviews-carousel--split .reviews-carousel__mini-avatar {
    margin-left: -11px;
  }
  .reviews-carousel--split .reviews-carousel__mini-avatar:first-child {
    margin-left: 0;
  }
  .reviews-carousel--split .reviews-carousel__badge {
    display: flex;
    flex-shrink: 0;
    background: #f4a27b; /* logo peach, sampled from the "Verified" lettering */
    font-size: 10.5px;
    padding: 4px 9px;
    gap: 4px;
  }
  .reviews-carousel--split .reviews-carousel__badge svg {
    width: 11px;
    height: 11px;
  }
  .reviews-carousel--split .reviews-carousel__verified {
    display: flex;
    justify-content: center;
  }
  .reviews-carousel--split .reviews-carousel__footer-top-row .reviews-carousel__verified {
    margin-top: 1mm;
    opacity: 1; /* the footer badge stays visible — no reveal */
    transform: none;
    align-self: center;
  }
  .reviews-carousel__verified img {
    display: block;
    width: auto;
    max-width: 94px;
    height: auto;
  }
  .reviews-carousel--split .reviews-carousel__footer-text {
    display: block;
  }
  .reviews-carousel--split .reviews-carousel__footer-text strong {
    font-weight: 700 !important;
  }
}
.gift {
  --gap: 7px;
  --panel-width: clamp(190px, 12.76vw, 245px);
  --panel-height: calc(var(--panel-width) * 1.4898);
  --text: #000;
  --muted: #5a5249;
  --gift-gold: #b88908;
  /* Gold underline tuning */
  --rule-height: 1px;
  --rule-gap: 9px; /* distance from "Make Every" down to the gold line */
  --rule-rise: 24px; /* how far the line travels up as it lands */
  --rule-delay: 3450ms; /* keeps the heading and underline in one even reveal sequence */
  width: 100%;
  padding: clamp(60px, 4.2vw, 82px) 0 clamp(64px, 5.2vw, 96px);
  overflow: clip;
  background: #fbfaf7;
  font-family: jost, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Inner section wrapper — the outer .gift provides the cream background,
   the inner .gift is the white content block. */
.gift .gift {
  background: #fff;
  padding-bottom: 30px;
}

.gift__layout {
  display: grid;
  grid-template-columns: calc(var(--panel-width) * 3 + var(--gap) * 2) calc(var(--panel-width) * 3 + var(--gap) * 2);
  column-gap: clamp(58px, 3.25vw, 64px);
  align-items: start;
  justify-content: center;
  min-height: calc(var(--panel-height) + clamp(145px, 12vw, 230px));
}

.gift__group {
  width: calc(var(--panel-width) * 3 + var(--gap) * 2);
}

.gift__group--left {
  padding-top: 0;
}

.gift__group--right {
  padding-top: 18px;
}

.gift__heading {
  display: grid;
  width: calc(var(--panel-width) * 3 + var(--gap) * 2);
  max-width: 860px;
  margin: 0 0 clamp(34px, 2.15vw, 42px) calc(var(--panel-width) * 0.1);
  color: #000;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(37.5px, 2.45vw, 47px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: none;
}

.gift__heading-line {
  display: block;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 3400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 2400ms ease;
  will-change: transform, opacity;
}

.gift__heading-line--one {
  justify-self: start;
  position: relative;
}

.gift__heading-line--two {
  justify-self: end;
  margin-top: 18px;
  margin-right: 52px;
  transform: translate3d(0, 0, 0);
}

/* Gold underline sits under "Make Every" only. The wrapper hugs those two
   words exactly, so the rule auto-matches their width. */
.gift__heading-accent {
  position: relative;
}

.gift__heading-accent::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 65px;
  top: calc(100% + var(--rule-gap));
  height: var(--rule-height);
  background: var(--gift-gold);
  opacity: 0;
  transform: translate3d(0, var(--rule-rise), 0);
  transition: transform 2200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1500ms ease;
  will-change: transform, opacity;
}

.is-visible .gift__heading-accent::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: var(--rule-delay);
}

.is-visible .gift__heading-line--one {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 2650ms;
}

.is-visible .gift__heading-line--two {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 2950ms;
}

.gift__panel-row,
.gift__label-row {
  display: grid;
  grid-template-columns: repeat(3, var(--panel-width));
  column-gap: var(--gap);
}

.gift__label-row--below {
  margin-top: 16px;
}

.gift__label-row--above {
  margin-top: 75px;
  margin-bottom: 8px;
}

.gift__panel {
  position: relative;
  display: block;
  width: var(--panel-width);
  height: var(--panel-height);
  overflow: hidden;
  background: #e8e7e3;
  text-decoration: none;
}

.gift__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gift__panel--valentine,
.gift__panel--wedding {
  background: #f7f4ef;
}

/* Video panels: the clip sits over its frame-identical placeholder image
   and fades in when gift.js adds .is-playing to the panel. */
.gift__panel-placeholder,
.gift__panel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.gift__panel--valentine .gift__panel-placeholder,
.gift__panel--valentine .gift__panel-video,
.gift__panel--wedding .gift__panel-placeholder,
.gift__panel--wedding .gift__panel-video {
  transform: none;
}

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

.gift__panel-video {
  z-index: 2;
  opacity: 0;
  transition: opacity 360ms ease;
}

.gift__panel--valentine.is-playing .gift__panel-video,
.gift__panel--wedding.is-playing .gift__panel-video {
  opacity: 1;
}

.gift__label {
  display: flex;
  flex-direction: column;
  align-items: center; /* centre the ornament under the word(s) */
  justify-self: center; /* centre each label within its grid cell */
  width: fit-content; /* label hugs the word so centring works */
  min-height: 26px;
  color: var(--text);
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  text-transform: none;
}

/* Gold ornament under each label: two short hairlines with a small rotated-
   square diamond floating in the gap between them (dash · diamond · dash). */
.gift__ornament {
  position: relative;
  display: block;
  width: 58px;
  height: 6px;
  margin-top: 4px;
}

.gift__ornament::before {
  /* the two hairline segments, with a clear gap in the middle */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(rgba(168, 128, 26, 0.85), rgba(168, 128, 26, 0.85)) 0 50%/23px 1px no-repeat, linear-gradient(rgba(168, 128, 26, 0.85), rgba(168, 128, 26, 0.85)) 100% 50%/23px 1px no-repeat;
}

.gift__ornament::after {
  /* the diamond — a real rotated square in the centre gap */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5px;
  height: 4.5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #a8801a;
}

/* ── "Shop the Collection" CTA ─────────────────────────────
   Drops into the open space below the left group's labels, centred under
   that column. Gold-gradient button matching the Hero/Footer CTA. */
.gift__cta-row--left {
  display: flex;
  justify-content: center;
  margin-top: calc(3.3vw + 35px);
}

.gift__shop-button {
  display: inline-block;
  font-family: jost, system-ui, arial, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.92vw, 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #14110b;
  background: linear-gradient(180deg, #c2a05c, #9f7b3f);
  padding: 17px 38px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.25s ease;
}
.gift__shop-button:hover {
  filter: brightness(1.07);
}
.gift__shop-button {
  white-space: nowrap;
}

.gift__shop-button:hover,
.gift__shop-button:focus-visible {
  filter: brightness(1.07);
}

/* ── Scroll reveal ─────────────────────────────────────────
   Desktop: gift.js adds .is-visible to the layout once, and the inline
   --delay values stage the whole choreographed sequence. */
.gift-reveal-up,
.gift-reveal-left {
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.gift-reveal-up {
  transform: translate3d(0, 44px, 0);
  transition: transform 3600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 2300ms ease;
  transition-delay: var(--delay, 0ms);
}

.gift-reveal-left {
  transform: translate3d(54px, 0, 0);
  transition: transform 3700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 2350ms ease;
  transition-delay: var(--delay, 0ms);
}

.is-visible .gift-reveal-up,
.is-visible .gift-reveal-left,
.gift-reveal-up.is-visible,
.gift-reveal-left.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (width <= 1060px) {
  .gift {
    --panel-width: min(29.6vw, 190px);
    padding-inline: 22px;
  }
  .gift__layout {
    grid-template-columns: 1fr;
    row-gap: 58px;
    justify-items: center;
  }
  .gift__group--right {
    padding-top: 0;
  }
  .gift__heading {
    width: auto;
    margin-left: 0;
    text-align: center;
  }
  .gift__heading-line {
    justify-self: center;
  }
}
@media (max-width: 768px) {
  .gift {
    --rule-gap: 6px;
    --rule-rise: 20px;
    --rule-delay: 2600ms; /* fires after both heading lines settle */
    padding-top: 44px;
    padding-inline: 0;
    padding-bottom: 0;
    color: rgba(0, 0, 0, 0.9);
    background: #fff;
  }
  .gift__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap) var(--gap);
    justify-items: stretch;
    min-height: 0;
  }
  /* The two groups and their rows give up their boxes; every tile, label,
     the heading and the CTA become direct grid items. Tiles come first, then
     their labels, then the centred heading, then the remaining tiles. The
     "Shop the Collection" CTA is moved from the FAQ section to the bottom of
     the gift grid on mobile. */
  .gift__group,
  .gift__panel-row,
  .gift__label-row {
    display: contents;
  }
  /* The reference mobile handover does not include a Shop CTA inside the gift
     section; keep the desktop CTA in the left column only. */
  .gift__cta-row {
    display: none;
  }
  .gift__shop-button {
    display: inline-block;
    font-family: jost, system-ui, arial, sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #14110b;
    background: linear-gradient(180deg, #c2a05c, #9f7b3f);
    padding: 11px 22px;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.25s ease;
  }
  .gift__shop-button:hover {
    filter: brightness(1.07);
  }
  .gift__shop-button {
    white-space: nowrap;
  }
  .gift__panel-row--left .gift__panel:nth-child(2) {
    order: 1;
  } /* Valentine */
  .gift__panel-row--left .gift__panel:nth-child(1) {
    order: 2;
  } /* Anniversary */
  .gift__label-row--below .gift__label:nth-child(2) {
    order: 3;
  } /* Valentine's Day */
  .gift__label-row--below .gift__label:nth-child(1) {
    order: 4;
  } /* Anniversaries */
  .gift__heading {
    order: 5;
    grid-column: 1/-1;
  }
  .gift__label-row--below .gift__label:nth-child(3) {
    order: 6;
  } /* Birthdays */
  .gift__label-row--above .gift__label:nth-child(1) {
    order: 7;
  } /* Mother's Day */
  .gift__panel-row--left .gift__panel:nth-child(3) {
    order: 8;
  } /* Birthday */
  .gift__panel-row--right .gift__panel:nth-child(1) {
    order: 9;
  } /* Mother's Day */
  .gift__panel-row--right .gift__panel:nth-child(2) {
    order: 10;
  } /* Christmas */
  .gift__panel-row--right .gift__panel:nth-child(3) {
    order: 11;
  } /* Wedding */
  .gift__label-row--above .gift__label:nth-child(2) {
    order: 12;
  } /* Christmas */
  .gift__label-row--above .gift__label:nth-child(3) {
    order: 13;
  } /* Weddings */
  .gift__panel {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1.581;
  }
  .gift__panel img {
    transform: none;
  }
  .gift__panel-video {
    transition: opacity 120ms ease;
  }
  /* Row rhythm: row-gap is 7px throughout; labels sit tight to their tiles. */
  .gift__label {
    margin-bottom: 2px;
  }
  .gift__label {
    display: block;
    justify-self: stretch;
    width: auto;
    min-height: 0;
    padding-top: 2px;
    font-family: jost, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: #474747;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .gift__ornament {
    display: none;
  }
  .gift__heading {
    grid-column: 1/-1;
    width: auto;
    margin: 28px 0 25px;
    color: rgba(0, 0, 0, 0.9);
    font-size: clamp(24px, 7.6vw, 34px);
    line-height: 0.95;
    letter-spacing: 0;
    text-align: center;
  }
  .gift__heading-line {
    justify-self: center;
    transition: transform 2800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 2000ms ease;
  }
  .gift__heading-line--one {
    transform: translate3d(-36px, 0, 0);
  }
  .gift__heading-line--two {
    margin-top: 20px;
    margin-right: 0;
    transform: translate3d(36px, 0, 0);
  }
  .is-visible .gift__heading-line--one {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 200ms;
  }
  .is-visible .gift__heading-line--two {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 1200ms;
  }
  /* Gold underline sits under the centred "Make Every" heading line. */
  .gift__heading-accent::after {
    left: 15%;
    right: 15%;
    transition: transform 2000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1400ms ease;
  }
  /* Small-viewport entrances: everything rises from below (labels a subtler
     16px), staggered per tile by the inline --delay-m values. gift.js adds
     .is-visible per tile here, not once on the layout. */
  .gift-reveal-up,
  .gift-reveal-left {
    transform: translate3d(0, 44px, 0);
    transition: transform 3200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 2000ms ease;
    transition-delay: var(--delay-m, 0ms);
  }
  .gift__label.gift-reveal-up,
  .gift__label.gift-reveal-left {
    transform: translate3d(0, 16px, 0);
  }
  .is-visible .gift-reveal-up,
  .is-visible .gift-reveal-left,
  .gift-reveal-up.is-visible,
  .gift-reveal-left.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gift-reveal-up,
  .gift-reveal-left,
  .gift__heading-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gift__heading-accent::after {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@property --slat {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}
@property --band {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 10%;
}
.faq {
  margin: 0;
  padding: 0;
  min-width: 0; /* the FAQ scales below 1280px instead of forcing a page scrollbar */
  background: #fff;
}

/* ── Split layout: fluid two-column block ─────────────────
   The whole block (copy + gap + square film) scales down uniformly to fit
   the viewport with ~60px each side. The three coefficients sum to 1.0, so
   total width == --faq-fit; the min() caps take over from ~1718px up. */
.faq-split {
  --faq-fit: calc(100vw - 120px);
  --faq-copy-width: min(700px, calc(var(--faq-fit) * 0.438));
  --faq-video-size: min(760px, calc(var(--faq-fit) * 0.476));
  display: grid;
  grid-template-columns: var(--faq-copy-width) var(--faq-video-size);
  column-gap: min(138px, var(--faq-fit) * 0.086);
  justify-content: center;
  align-items: start;
  min-height: 100vh;
  background: transparent;
  transform: translateX(-7px);
}

.faq-accordion {
  /* Theme tokens matched to the reference handoff */
  --er-bg: #F8F4EC;
  --er-ink: #1A1A1A;
  --er-body: #4A4540;
  --er-gold: #B89968;
  --er-gold-soft: rgba(184, 153, 104, 0.35);
  --er-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --er-font-body: 'Jost', system-ui, arial, sans-serif;
  width: 100%;
  min-height: 0;
  padding: 80px 48px;
  background: var(--er-bg);
  font-family: var(--er-font-body);
  color: var(--er-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.faq-accordion__inner {
  max-width: 720px;
  margin: 0 auto;
  transform: translateX(0);
}

.faq-accordion__eyebrow {
  margin: 0 0 18px;
  font-family: var(--er-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--er-gold);
}

.faq-accordion__title {
  margin: 0 0 28px;
  /* Matched to the reference handoff: Cormorant Garamond ~47px,
     weight 400, uppercase, tight tracking. */
  font-family: var(--er-font-display);
  font-weight: 400;
  font-size: clamp(37.5px, 2.45vw, 47px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--er-ink);
}

.faq-accordion__lede {
  margin: 0 0 56px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--er-ink);
}

.faq-accordion__lede sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

.faq-accordion__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--er-gold-soft);
}

.faq-accordion__item {
  border-bottom: 1px solid var(--er-gold-soft);
}

.faq-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 0;
  padding: 28px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #4c4c4c; /* softened question ink; hover/open override to gold */
  font-family: var(--er-font-display);
  font-weight: 500;
  transition: color 0.2s ease;
}

.faq-accordion__trigger:hover,
.faq-accordion__trigger:focus-visible {
  color: var(--er-gold);
  outline: none;
}

/* Open state: the question stays gold while its answer is expanded */
.faq-accordion__trigger[aria-expanded=true] {
  color: #a8801a;
}

.faq-accordion__question {
  flex: 1;
  font-family: var(--er-font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: none;
}

.faq-accordion__question sup {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
}

/* + / − icon, drawn with two pseudo-elements so it animates cleanly */
.faq-accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--er-gold);
}

.faq-accordion__icon::before,
.faq-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentcolor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.faq-accordion__icon::before {
  width: 18px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq-accordion__icon::after { /* vertical bar — hides when open */
  width: 1.5px;
  height: 18px;
  transform: translate(-50%, -50%);
}

.faq-accordion__trigger[aria-expanded=true] .faq-accordion__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.faq-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.faq-accordion__panel-inner {
  padding: 0 4px 32px;
}

.faq-accordion__panel-inner p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #68635e; /* softened answer grey */
  font-weight: 400;
}

.faq-accordion__panel-inner p:last-child {
  margin-bottom: 0;
}

.faq-accordion__panel-inner sup {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
}

.faq-video {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 88px 0 0;
  background: transparent;
}

.faq-video__wrap {
  position: relative;
  width: var(--faq-video-size);
  height: var(--faq-video-size);
  max-width: none;
  overflow: hidden;
  background: #ece5dc;
  box-shadow: 0 22px 68px rgba(42, 34, 24, 0.12);
  clip-path: inset(1px 0);
}

.faq-video__wrap video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ece5dc;
  opacity: 0;
  transition: opacity 0.65s ease-out;
  z-index: 3;
}

.faq-video__wrap.is-ready video {
  opacity: 1;
}

/* Placeholder = the loop's EXACT first frame (hero pattern), geometry
   identical to the video layer (cover + 1.006 scale) so the ready-swap is
   pixel-invisible. */
.faq-video__placeholder-frame {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

.faq-video__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(rgba(245, 240, 235, 0.74), rgba(245, 240, 235, 0.74)), radial-gradient(circle at 55% 42%, rgba(184, 137, 8, 0.14), transparent 34%), #f5f0eb;
}

.faq-video__loading-scrim {
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 2;
}

.faq-video__loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.faq-video__wrap.is-loading .faq-video__loading-overlay {
  opacity: 1;
}

/* Hide the loader once the video is ready, even if the loading class was
   left behind by a missed canplay event. */
.faq-video__wrap.is-ready .faq-video__loading-overlay {
  opacity: 0;
}

/* ── Blind reveal scene (FAQ frozen → Style Room) ────────── */
.faq {
  position: relative;
  width: 100%;
}

.faq__runway {
  position: relative;
  width: 100%;
  height: 215vh;
}

.faq__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

/* The FAQ content sits above the rising blind and the Style Room image. */
.faq__pinned {
  position: absolute;
  inset: 0;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent;
  z-index: 3;
}

.faq__pinned::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Style Room image sits behind the FAQ content and the rising blind. */
.faq__style-room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: block;
}

.faq__style-room img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* White blind is a soft gradient that rises to reveal the image underneath. */
.faq__blind {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140vh;
  background: linear-gradient(to bottom, white 0%, white 80%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
  display: block;
}

.faq__blind--film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  pointer-events: none;
  z-index: 5;
  display: none;
}

@supports (animation-timeline: view()) {
  .faq__runway {
    view-timeline: --faq-reveal block;
  }
  /* Desktop: the blind rises, exposing the image behind the pinned FAQ. */
  .faq__blind {
    animation: faq-blind-reveal linear;
    animation-timeline: --faq-reveal;
    animation-range: entry 0% exit 100%;
  }
  /* Mobile: the Style Room image is revealed through a venetian blind of
     horizontal slats inside the FAQ video frame. The mask is a repeating
     gradient of opaque bands; as the slats shrink to nothing the image is
     fully exposed. */
  .faq__blind--film {
    --band: 10%;
    --slat: 5%;
    display: block;
    -webkit-mask-image: repeating-linear-gradient(to bottom, black 0, black var(--slat), transparent var(--slat), transparent var(--band));
    mask-image: repeating-linear-gradient(to bottom, black 0, black var(--slat), transparent var(--slat), transparent var(--band));
    animation: faq-blind-slat linear;
    animation-timeline: --faq-reveal;
    animation-range: entry 0% exit 100%;
  }
  @keyframes faq-blind-reveal {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-140vh);
    }
  }
  @keyframes faq-blind-slat {
    from {
      --slat: 5%;
    }
    to {
      --slat: 0%;
    }
  }
}
/* Mobile variants of the Style Room and blind live inside the film wrap so
   the reveal is clipped to the film area only. Hidden on desktop. */
.faq__style-room--film,
.faq__blind--film {
  display: none;
}

/* FAQ overrides the shared ring-loader size, gradient, and text pulse. */
.faq .ring-loader__ring,
.faq .ring-loader__svg {
  width: 106px;
  height: 106px;
}

.faq .ring-loader__svg {
  position: relative;
}

.faq .ring-loader__arc {
  stroke: url("#faq-neon-gradient");
}

.faq .ring-loader__text {
  letter-spacing: 0.35em;
  animation: faq-text-pulse 2s ease-in-out infinite;
}

@keyframes faq-text-pulse {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-accordion__panel,
  .faq-accordion__icon::before,
  .faq-accordion__icon::after,
  .faq-accordion__trigger {
    transition: none;
  }
}
@media (max-width: 768px) {
  .faq {
    margin-top: 0;
  }
  .faq-split {
    grid-template-columns: 1fr;
    row-gap: 32px;
    min-height: 100svh;
    padding: 0 20px; /* flush with the sections above/below */
  }
  .faq-accordion {
    min-height: 0;
    padding: 56px 24px;
  }
  .faq-accordion__inner {
    max-width: none;
    transform: none;
  }
  .faq-accordion__title {
    max-width: 100%;
    font-size: 36px;
    letter-spacing: 0.055em;
  }
  .faq-accordion__lede {
    font-size: 16px;
    margin-bottom: 40px;
  }
  .faq-accordion__lede br {
    display: none;
  }
  .faq-accordion__trigger {
    min-height: 0;
    padding: 22px 2px;
    gap: 16px;
  }
  .faq-accordion__question {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.12em;
  }
  .faq-accordion__icon {
    width: 16px;
    height: 16px;
  }
  .faq-accordion__icon::before {
    width: 16px;
  }
  .faq-accordion__icon::after {
    height: 16px;
  }
  /* Film block goes full-bleed below the FAQ */
  .faq-video {
    justify-content: center;
    padding: 0;
    margin-top: 2px;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }
  .faq-video__wrap {
    width: 100%;
    max-width: none;
    aspect-ratio: 1/1;
    height: auto;
    /* keep the top edge seam clip, drop the bottom one so the film sits
       flush with the Style Room photo revealed inside it */
    clip-path: inset(1px 0 0 0);
  }
  /* Deeper gold glow for the small-viewport loader */
  .faq .ring-loader__ring::before {
    background: radial-gradient(circle, rgba(227, 194, 126, 0.16) 0%, transparent 70%);
  }
  .faq .ring-loader__svg {
    filter: drop-shadow(0 0 4px #e8c97f) drop-shadow(0 0 10px #cfa64d) drop-shadow(0 0 22px #a87f2a) drop-shadow(0 0 40px rgba(200, 160, 70, 0.5));
  }
  .faq .ring-loader__track {
    stroke: rgba(214, 178, 100, 0.18);
  }
  .faq .ring-loader__text {
    text-shadow: 0 0 8px rgba(232, 201, 127, 0.85), 0 0 20px rgba(190, 150, 60, 0.5);
  }
  /* ── Blind reveal, small-viewport scene ─────────────────
     The mobile Style Room and blind live inside the film wrap so the reveal
     is clipped to the film area only, not behind the accordion. */
  .faq__runway {
    height: auto;
  }
  .faq__stage {
    height: auto;
    overflow: visible;
  }
  .faq__pinned {
    position: static;
    overflow: visible;
  }
  .faq__style-room,
  .faq__blind {
    display: none;
  }
  .faq__style-room--film,
  .faq__blind--film {
    display: block;
  }
  .faq__style-room--film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
  }
  .faq__style-room--film img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .faq__blind--film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    pointer-events: none;
    z-index: 5;
  }
}
@media (width <= 420px) {
  .faq-split {
    padding-left: 18px;
    padding-right: 18px;
  }
  .faq-video {
    margin-left: -18px;
    margin-right: -18px;
    width: calc(100% + 36px);
  }
}
.about * {
  box-sizing: border-box;
}

.about {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #171717;
  min-width: 0;
  font-family: "Helvetica Neue", arial, sans-serif;
}

.about .about__preview {
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 72px 60px;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"), linear-gradient(90deg, #f5f0eb 0%, #f5f0eb 42%, #fff 72%, #fff 100%);
}

/* Responsive two-column layout: video stage + eyebrow/copy column. The
   percentages mirror the original 903px + 56px + 720px fixed grid but shrink
   to fit the viewport instead of being scaled down via transform. */
.about .about__layout {
  position: relative;
  width: min(100%, 1840px);
  --about-video-pct: 54%;
  --about-copy-pct: 43%;
  --about-gap-pct: 3%;
}

.about__title {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(1.91rem, 3.26vw, 2.94rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  color: #1a1a1a;
}

.about__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 48px;
}

.about__divider-line {
  display: block;
  width: 134px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 153, 104, 0.5), transparent);
}

/* Jost italic eyebrow — Cormorant's hairline italic caps read blurry.
   Now a grid item in the right column, above the copy panel. */
.about__subheading {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding-bottom: 12px;
  color: #b88908;
  font-family: jost, system-ui, sans-serif;
  font-size: clamp(14px, 1.2vw, 19.8px);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}

.about__grid {
  display: grid;
  grid-template-columns: var(--about-video-pct) var(--about-copy-pct);
  grid-template-rows: auto 1fr;
  gap: 0 var(--about-gap-pct);
  align-items: stretch;
  justify-content: center;
}

.about__video-stage {
  align-self: center;
}

/* Stage: width is set by the grid column; aspect ratio keeps the
   window/frame proportions correct as it shrinks. */
.about__video-stage {
  position: relative;
  grid-column: 1;
  grid-row: 1/3;
  width: 100%;
  aspect-ratio: 903/720;
  height: auto;
}

/* The film sits inside the window PNG's glass opening only. Percentages
   preserve the original 601 x 490px frame within the 727 x 580 window
   within the 903 x 720px stage as the stage shrinks. */
.about__placeholder-frame {
  position: absolute;
  top: 10.56%; /* 76/720 */
  left: 16.61%; /* 150/903 */
  width: 66.56%; /* 601/903 */
  aspect-ratio: 601/490;
  height: auto;
  overflow: hidden;
  background: #ece5dc;
}

.about__placeholder,
.about__placeholder-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about__placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__placeholder-frame video {
  display: block;
  object-fit: cover;
  opacity: 0;
}

.about__placeholder-frame.is-ready video {
  opacity: 1;
}

.about__window {
  position: absolute;
  top: 5.42%; /* 39/720 */
  left: 50%;
  transform: translateX(-50%);
  width: 80.51%; /* 727/903 */
  aspect-ratio: 727/580;
  height: auto;
  pointer-events: none;
  z-index: 4;
}

.about__window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.about__copy-panel {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  min-height: 100%;
  padding: clamp(20px, 3vw, 38px) clamp(24px, 4vw, 62px) clamp(30px, 5vw, 82px);
  border-top: 1px solid rgba(184, 137, 8, 0.22);
}

.about__copy {
  max-width: 620px;
}

.about__copy p {
  margin: 0 0 11px;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: #26221d;
}

.about__copy p:first-child::first-letter {
  float: left;
  font-family: "Cormorant Garamond", georgia, serif;
  font-size: 3.6em;
  line-height: 0.78;
  font-weight: 600;
  color: #b89968;
  margin: 0.04em 0.12em 0 0;
}

.about__copy p:last-child {
  margin-bottom: 0;
}

.about__copy sup {
  position: relative;
  top: -0.87em;
  font-size: 42%;
  line-height: 0;
  vertical-align: baseline;
}

.about__logo {
  position: absolute;
  right: -64px; /* extends past the right edge of the layout */
  bottom: 20px;
  width: clamp(120px, 10vw, 180px);
  height: auto;
  pointer-events: none;
}

/* Tablet: the two-column grid becomes cramped below 1024px, so switch to a
   single column with a sensible max-width. */
@media (max-width: 1024px) {
  .about .about__preview {
    padding: 48px 40px 60px;
  }
  .about__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .about__video-stage {
    grid-column: auto;
    grid-row: auto;
    max-width: 640px;
  }
  .about__subheading {
    grid-column: auto;
    grid-row: auto;
    width: min(100%, 640px);
    margin: 16px 0 0;
    padding-bottom: 0;
    text-align: right;
  }
  .about__copy-panel {
    grid-column: auto;
    grid-row: auto;
    width: min(100%, 640px);
    min-height: auto;
    margin-top: 16px;
  }
  .about__logo {
    position: static;
    display: block;
    width: min(51.8vw, 216px);
    margin: 18px 0 0 auto;
  }
}
@media (max-width: 768px) {
  .about .about__preview {
    display: block;
    width: min(100vw, 430px);
    margin: 0 auto;
    padding: 36px 0 60px;
    overflow: visible;
    background: #fff;
  }
  .about .about__layout {
    width: 100%;
  }
  .about__title {
    position: relative;
    margin: 0;
    font-size: clamp(24px, 7.6vw, 34px);
    letter-spacing: 0;
    color: #121212;
  }
  .about__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 54px;
    height: 1px;
    transform: translateX(-59px);
    background: rgba(184, 137, 8, 0.58);
  }
  .about__divider {
    display: none;
  }
  .about__subheading {
    position: static;
    width: min(100vw - 58px, 372px);
    margin: 12px auto;
    padding: 9px 8px 8px;
    background: transparent;
    font-size: clamp(11px, 3.3vw, 14.3px);
    text-align: center;
  }
  .about__grid {
    display: block;
  }
  /* Stage sized to the window PNG's 916 x 730 aspect. */
  .about__video-stage {
    --window-w: min(100vw, 430px);
    width: var(--window-w);
    height: calc(var(--window-w) * 730 / 916);
    margin: 0 auto;
  }
  .about__placeholder-frame {
    top: 6.38%;
    left: 8.53%;
    width: 82.67%;
    height: 84.48%;
    z-index: 1;
  }
  .about__window {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    z-index: 3;
  }
  .about__copy-panel {
    width: min(100vw - 12px, 418px);
    height: auto;
    margin: 14px auto 0;
    padding: 16px 16px 12px;
    background: #fff;
    border-top: none;
  }
  .about__copy {
    max-width: none;
  }
  /* Cormorant is a display Garamond — sized up and weighted so its
     hairline strokes survive phone rendering. */
  .about__copy p {
    margin: 0 0 13px;
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.35;
    letter-spacing: 0.008em;
    font-weight: 500;
  }
  .about__copy p:first-child::first-letter {
    font-size: 3.45em;
    margin: 0.04em 0.1em 0 0;
  }
  .about__logo {
    position: static;
    display: block;
    width: min(51.8vw, 216px);
    margin: 18px 16px 0 auto;
    transform: translateY(14px) scale(0.81);
    transform-origin: right center;
  }
}
.marry-me {
  background: #120f0e;
  font-family: georgia, "Times New Roman", serif;
}

/* The per-device documents reset margins/paddings section-wide. */
.marry-me * {
  margin: 0;
  padding: 0;
}

.marry-me {
  position: relative;
  width: 100%;
  height: min(1080px, 100svh);
  max-height: 1080px;
  overflow: hidden;
  line-height: 0; /* removes the inline-block gap under the still */
  background: #120f0e;
}

.marry-me__placeholder-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.marry-me__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Hidden over the still until .is-playing; .is-ending is the 3s outro
   dissolve (marry-me.js ducks the audio in step). */
.marry-me__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.marry-me.is-playing .marry-me__video {
  opacity: 1;
  pointer-events: auto;
}

.marry-me.is-playing.is-ending .marry-me__video {
  opacity: 0;
  transition: opacity 3s ease;
}

.marry-me.is-playing .marry-me__play-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* ── Loader — gold SVG ring, shown immediately on click ── */
.marry-me .ring-loader {
  position: absolute;
  right: clamp(22px, 5.2vw, 100px);
  bottom: clamp(180px, 15vw, 290px);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  min-width: 102px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: 400 clamp(11px, 0.78vw, 14px)/1 georgia, "Times New Roman", serif;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  backdrop-filter: none;
}

.marry-me.is-loading .ring-loader {
  display: inline-flex;
}

/* Marry-me overrides the shared ring-loader size, position, and gradient. */
.marry-me .ring-loader__ring,
.marry-me .ring-loader__svg {
  width: 88px;
  height: 88px;
}

.marry-me .ring-loader__ring {
  display: flex;
  align-items: center;
  justify-content: center;
}

.marry-me .ring-loader__ring::before {
  inset: -16px;
}

.marry-me .ring-loader__arc {
  stroke: url("#marry-me-gold-gradient");
}

.marry-me__play-button {
  position: absolute;
  right: clamp(18px, 5.2vw, 100px);
  bottom: clamp(18px, 5vw, 88px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.2vw, 20px);
  padding: clamp(15px, 1.3vw, 20px) clamp(26px, 2vw, 36px);
  border: 1px solid rgba(214, 170, 82, 0.6);
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 246, 224, 0.07), rgba(214, 170, 82, 0.05));
  backdrop-filter: blur(5px) saturate(1.1);
  color: #f6ecd8;
  text-align: left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  /* opacity 2.2s: when the film ends and .is-playing lifts, the button fades
     back in gently (matching the 3s dissolve) instead of snapping; the quick
     150ms vanish on click lives on the .is-playing rule above. */
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 2.2s ease;
}

.marry-me__play-button:hover,
.marry-me__play-button:focus-visible,
.marry-me__play-button.is-touching {
  background: linear-gradient(180deg, rgba(255, 246, 224, 0.14), rgba(214, 170, 82, 0.13));
  border-color: #f2c94c;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 22px rgba(245, 214, 138, 0.35);
}

.marry-me__play-button:focus-visible {
  outline: 2px solid rgba(255, 244, 210, 0.95);
  outline-offset: 4px;
}

.marry-me__play-icon {
  width: clamp(28px, 2vw, 34px);
  height: clamp(28px, 2vw, 34px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.marry-me__play-icon svg {
  width: 100%;
  height: 100%;
  fill: #f2c94c;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.marry-me__play-copy {
  display: block;
  line-height: 1;
}

.marry-me__play-eyebrow {
  display: block;
  font-family: jost, system-ui, sans-serif;
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #e3c27e;
}

.marry-me__play-title {
  display: block;
  margin-top: 6px;
  font-family: jost, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.32vw, 23px);
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .marry-me {
    height: auto;
    max-height: none;
    aspect-ratio: 720/668;
  }
  .marry-me__placeholder,
  .marry-me__video {
    background: #120f0e;
  }
  .marry-me__video {
    background: #000;
  }
  /* The still here is bright, so the glass gradient gets a dark scrim
     layer under it for the label to read. */
  .marry-me__play-button {
    right: clamp(14px, 4.7vw, 24px);
    bottom: clamp(14px, 4.5vw, 24px);
    z-index: 3;
    gap: 12px;
    padding: 13px 20px;
    background: linear-gradient(180deg, rgba(255, 246, 224, 0.07), rgba(214, 170, 82, 0.05)), rgba(25, 18, 12, 0.45);
  }
  .marry-me__play-icon {
    width: 28px;
    height: 28px;
  }
  /* No eyebrow: the small gold line was illegible over the bright still —
     the title rides alone, vertically centred. */
  .marry-me__play-eyebrow {
    display: none;
  }
  .marry-me__play-title {
    margin-top: 0;
    font-size: 16.5px;
    letter-spacing: 0.1em;
    text-transform: capitalize;
  }
  .marry-me .ring-loader {
    right: clamp(12px, 4.5vw, 22px);
    bottom: clamp(105px, 25vw, 128px);
    gap: 9px;
    min-width: 128px;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-shadow: 0 0 8px rgba(0, 160, 255, 0.85), 0 0 20px rgba(0, 100, 255, 0.58);
  }
  .marry-me.is-loading .ring-loader {
    display: flex;
  }
  /* The blue CSS border ring replaces the SVG gold ring. */
  .marry-me .ring-loader__svg {
    display: none;
  }
  .marry-me .ring-loader__ring {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid rgba(0, 120, 255, 0.16);
    border-top-color: #00c8ff;
    border-right-color: #07f;
    animation: er-spin 1.4s linear infinite;
    filter: drop-shadow(0 0 4px #0af) drop-shadow(0 0 10px #07f) drop-shadow(0 0 20px #05e);
  }
  .marry-me .ring-loader__ring::before {
    inset: -11px;
    background: radial-gradient(circle, rgba(0, 140, 255, 0.17) 0%, transparent 68%);
  }
}