/* ==========================================================================
   PURE ID  Luxury Jewelry House Design System & Stylesheet
   Color Palette:
   - Soft Ivory: #F5F1E8 (Primary canvas, purity, still water)
   - 24K Gold: #C9A227 (Origin, gold within, precious moment accent)
   - Champagne Gold: #D8C279 (Secondary material accent)
   - Grey-Taupe: #9FAE8E (Primary text, structure, contrast)
   - Deep Sage: #3F4B36 (Headings & high contrast text)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@400;600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --c-ivory: #FFFFFF;
  --c-ivory-light: #FFFFFF;
  --c-ivory-dark: #EAE4D6;
  --c-gold: #C9A227;
  --c-gold-hover: #B28E1F;
  --c-gold-light: #EAD074;
  --c-gold-glow: rgba(201, 162, 39, 0.28);
  --c-gold-subtle: rgba(201, 162, 39, 0.12);
  --c-taupe: #9FAE8E;
  --c-taupe-light: #8E8474;
  --c-taupe-dark: #3F4B36;
  --c-sage: #9FAE8E;
  --c-logo-sage: #A5B18D;
  --c-white: #FFFFFF;
  --c-shadow: rgba(63, 75, 54, 0.06);
  --c-shadow-hover: rgba(63, 75, 54, 0.12);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --transition-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --nav-height: 84px;
}

/* PURE ID wordmark: one code-native lockup used in every brand position. */
.brand-wordmark {
  display: inline-flex;
  width: 184px;
  height: 58px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px 12px 6px;
  background: var(--c-logo-sage);
  color: #FFFFFF;
  line-height: 1;
  text-align: center;
}

.brand-wordmark-name {
  display: block;
  color: #000000;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark-tagline {
  display: block;
  margin-top: 0.28rem;
  color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  line-height: 1;
  white-space: nowrap;
}

.nav-brand,
`r`n .footer-brand-lockup {
  line-height: 0;
}

.footer .footer-brand-lockup {
  display: inline-flex;
  width: auto;
  height: auto;
  overflow: visible;
}

@media (max-width: 480px) {
  .brand-wordmark {
    width: 142px;
    height: 48px;
    padding: 3px 9px 5px;
  }

  .brand-wordmark-name {
    font-size: 1.38rem;
  }

  .brand-wordmark-tagline {
    margin-top: 0.22rem;
    font-size: 0.34rem;
  }

  .footer .footer-brand-lockup {
    width: auto;
    height: auto;
  }
}

/* Brand-aware text selection: gold on light, quiet ivory on dark. */
::selection {
  background: rgba(201, 162, 39, .38);
  color: #000000;
  text-shadow: none;
}

::-moz-selection {
  background: rgba(201, 162, 39, .38);
  color: #000000;
  text-shadow: none;
}

.collection-story-hero ::selection,
.footer ::selection {
  background: rgba(245, 241, 232, .2);
  color: #000000;
  text-shadow: none;
}

.collection-story-hero ::-moz-selection,
.footer ::-moz-selection {
  background: rgba(245, 241, 232, .2);
  color: #000000;
  text-shadow: none;
}

/* ==========================================================================
   PURE ID  IDENTITY-FIRST HOMEPAGE
   Quiet ivory outside. Gold appears only at the point of inner meaning.
   ========================================================================== */

.story-home {
  background: var(--c-ivory);
  color: #000000;
}

.story-home h1,
.story-home h2,
.story-home h3 {
  color: #000000;
}

.story-home em {
  font-weight: 400;
}

/* Navigation on the new quiet-ivory hero */
.home-brand-story .navbar {
  background: rgba(159, 174, 142, .96);
  border-bottom: 1px solid rgba(245, 241, 232, .22);
  backdrop-filter: blur(14px);
}

.home-brand-story .logo-main,
.home-brand-story .nav-link,
.home-brand-story .nav-btn {
  color: #FFFFFF;
}

.home-brand-story .navbar .logo-sub {
  color: #C9A227;
}

.nav-logo-image {
  display: block;
  width: 184px;
  height: 58px;
  object-fit: cover;
  object-position: center;
}

/* Mounted homepage shell and closing CTA. */
.mark-story-hero,
.mark-story-cta {
  background: var(--c-ivory);
}

.mark-story-hero {
  padding: calc(var(--nav-height) + 2.5rem) 0 4.5rem;
}

.mark-story-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  aspect-ratio: 19 / 5;
  min-height: 0;
  place-items: center;
  padding: 0 0 0;
  overflow: hidden;
  border-top: 0;
  background-color: #090A0B;
  background-image: url('assets/cta-water-ripple-pure-id-collection-v2.png');
  background-position: center 58%;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.mark-story-cta::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .4) 36%, rgba(0, 0, 0, .08) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .24));
  content: '';
}

.mark-story-cta .container {
  position: relative;
  z-index: 1;
}

.mark-story-cta span {
  display: block;
  background: transparent;
  color: #C9A227;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mark-story-cta h2 {
  max-width: 780px;
  margin: 1rem auto 2.5rem;
  color: #FFFFFF;
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
}

.mark-story-cta h2 em {
  color: #D7B66B;
  font-weight: 400;
}

.mark-story-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2rem;
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(0, 0, 0, .16);
  color: #FFFFFF;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.mark-story-cta a:hover,
.mark-story-cta a:focus-visible {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: #000000;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .mark-story-hero {
    padding-top: calc(var(--nav-height) + 1.5rem);
  }

  .mark-story-cta {
    aspect-ratio: auto;
    min-height: 340px;
    background-position: 24% 58%;
  }
}

/* Reset & Global Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--c-ivory);
  color: #000000;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  background-color: var(--c-ivory);
}

/* Keep every page scrollable while removing the browser's visual scrollbar. */
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
.font-serif {
  font-family: var(--font-serif);
  color: #000000;
  font-weight: 400;
  letter-spacing: 0;
}

.text-gold {
  color: #C9A227;
}

.text-taupe-light {
  color: #000000;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Structural Layout Container */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-narrow {
  max-width: 960px;
}

/* Navigation Bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 100;
  transition: background-color 0.4s var(--transition-smooth), backdrop-filter 0.4s ease, border-bottom 0.4s ease;
  display: flex;
  align-items: center;
}

.navbar.scrolled {
  background-color: #9FAE8E;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
  box-shadow: 0 4px 20px rgba(63, 75, 54, 0.04);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-decoration: none;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-serif);
  line-height: 1;
}

.logo-main {
  font-size: 1.55rem;
  letter-spacing: 0.25em;
  font-weight: 500;
  color: #FFFFFF;
  transition: color 0.4s ease;
  text-transform: uppercase;
}

.logo-sub {
  font-size: 0.525rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #C9A227;
  margin-top: 3px;
  font-weight: 600;
}

.navbar.scrolled .logo-main {
  color: #000000;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3rem;
  list-style: none;
}

.nav-link {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #FFFFFF;
  position: relative;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.navbar.scrolled .nav-link {
  color: #000000;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 1.5px;
  background-color: var(--c-gold);
  transition: width 0.3s var(--transition-smooth), left 0.3s var(--transition-smooth);
}

.nav-link:hover,
.nav-link.active {
  color: #FFFFFF;
}

.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active {
  color: #000000;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #FFFFFF;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}

.navbar.scrolled .nav-btn {
  color: #000000;
}

.nav-btn:hover {
  background-color: rgba(201, 162, 39, 0.15);
  color: #C9A227;
}

/* Page View Sections (SPA Architecture) */
.view-section {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  min-height: 100vh;
}

.view-section.active-view {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   HOMEPAGE SECTIONS
   ========================================================================== */

/* Fullscreen Cinematic Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #F5F1E8;
}

.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 1.5s var(--transition-smooth);
}

.hero-video-wrapper.fade-out {
  opacity: 0;
  pointer-events: none;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  filter: contrast(1.05) brightness(0.95);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: radial-gradient(circle at center, rgba(13, 12, 10, 0.1) 0%, rgba(13, 12, 10, 0.5) 100%);
  pointer-events: none;
}

/* Hero Soft Ivory Stage & Interactive Ripple Portal */
.hero-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: var(--c-ivory);
  background-image: linear-gradient(90deg, rgba(201, 162, 39, 0.035) 1px, transparent 1px), linear-gradient(0deg, rgba(201, 162, 39, 0.025) 1px, transparent 1px), radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.92), rgba(245, 241, 232, 0.5) 52%, rgba(201, 162, 39, 0.09));
  background-size: 88px 88px, 88px 88px, 100% 100%;
  opacity: 1;
  transition: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  pointer-events: auto;
}

.hero-stage.active-stage {
  opacity: 1;
  pointer-events: auto;
}

/* Static hero opening: one diamond falls, touches the origin, then waves unfold. */
.hero-origin-drop {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 30%;
  width: 58px;
  height: 58px;
  opacity: 0;
  transform: translate(-50%, -70vh) scale(.38) rotate(-12deg);
  transition: transform .95s cubic-bezier(.72, .02, .22, 1), opacity .18s ease, filter .45s ease;
  pointer-events: none;
}

.hero-origin-drop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(201, 162, 39, .65);
  border-radius: 50%;
  box-shadow: 0 15px 35px rgba(63, 75, 54, .2);
}

.hero-origin-drop span {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  transform: translateX(-50%);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, .38);
}

.hero-stage.drop-stage .hero-origin-drop {
  opacity: 1;
  transform: translate(-50%, -50%) scale(.82) rotate(0);
}

.hero-stage.impact-stage .hero-origin-drop {
  opacity: 0;
  filter: blur(5px);
  transform: translate(-50%, -38%) scale(.28);
}

.hero-stage.impact-stage .hero-origin-drop span {
  animation: hero-drop-impact .9s ease-out forwards;
}

@keyframes hero-drop-impact {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, .48);
  }

  100% {
    box-shadow: 0 0 0 95px rgba(201, 162, 39, 0);
  }
}

/* Concentric Ripple Portal Elements */
.ripple-portal-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.ripple-portal-wrapper::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.35);
  opacity: 0;
  z-index: 0;
}

.hero-stage.wave-stage .ripple-portal-wrapper::before {
  animation: hero-origin-pulse 1.25s ease-out forwards;
}

@keyframes hero-origin-pulse {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.45);
  }

  28% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 0 0 110px rgba(201, 162, 39, 0);
  }
}

.ripple-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 1.4s var(--transition-smooth), transform 1.4s var(--transition-smooth);
  pointer-events: none;
}

.ripple-ring.ring-1 {
  width: 380px;
  height: 380px;
  border-color: rgba(201, 162, 39, 0.25);
  transition-delay: 0.36s;
}

.ripple-ring.ring-2 {
  width: 330px;
  height: 330px;
  border-color: rgba(201, 162, 39, 0.45);
  transition-delay: 0.18s;
}

.ripple-ring.ring-3 {
  width: 280px;
  height: 280px;
  border-color: rgba(201, 162, 39, 0.7);
  transition-delay: 0s;
}

.hero-stage.wave-stage .ripple-ring.ring-1 {
  opacity: 0.45;
  transform: scale(1.15);
}

.hero-stage.wave-stage .ripple-ring.ring-2 {
  opacity: 0.65;
  transform: scale(1.08);
}

.hero-stage.wave-stage .ripple-ring.ring-3 {
  opacity: 0.85;
  transform: scale(1.02);
}

/* Central Interactive Gold Portal Circle (First appears as gold ring) */
.gold-portal-circle {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #FFFFFF 0%, #F5F1E8 85%);
  border: 2px solid var(--c-gold);
  box-shadow: 0 12px 40px rgba(201, 162, 39, 0.25), inset 0 0 20px rgba(201, 162, 39, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(34px) scale(0.22);
  opacity: 0;
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease, box-shadow 0.4s ease;
}

.hero-stage.diamond-stage .gold-portal-circle {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.gold-portal-circle:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 16px 50px rgba(201, 162, 39, 0.45), inset 0 0 30px rgba(201, 162, 39, 0.25);
  border-color: var(--c-gold-hover);
}

.portal-jewelry-img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(63, 75, 54, 0.15));
  animation: float-slow 6s ease-in-out infinite alternate;
}

/* Refined Smaller Diamond Image inside Portal Frame */
.portal-diamond-img {
  width: 68%;
  height: 68%;
  max-width: 68%;
  max-height: 68%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(18px) scale(0.25) rotate(-8deg);
  transition: opacity 0.75s ease, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.12s;
}

.hero-stage.diamond-stage .portal-diamond-img {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

.portal-hint {
  position: absolute;
  bottom: 10px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: #C9A227;
  background: rgba(255, 255, 255, 0.94);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 1.2s;
}

.hero-stage.copy-stage .portal-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Copy Revealed After Diamond Sequence */
.hero-content-reveal {
  text-align: center;
  max-width: 860px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-stage.copy-stage .hero-content-reveal {
  opacity: 1;
  transform: translateY(0);
}

.hero-content-reveal>* {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-stage.copy-stage .hero-tagline-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.hero-stage.copy-stage .hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

.hero-stage.copy-stage .hero-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.hero-stage.copy-stage .hero-ctas {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.72s;
}

@media (prefers-reduced-motion: reduce) {

  .hero-stage,
  .ripple-ring,
  .gold-portal-circle,
  .portal-diamond-img,
  .portal-hint,
  .hero-content-reveal,
  .hero-content-reveal>*,
  .hero-origin-drop {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.hero-tagline-sub {
  color: #C9A227;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero-title {
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1.18;
  margin-bottom: 1.25rem;
  color: #000000;
}

.hero-title span {
  font-style: italic;
  color: #C9A227;
  font-family: var(--font-serif);
}

.hero-subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  color: #000000;
  max-width: 660px;
  margin: 0 auto 2.2rem;
  line-height: 1.7;
}


.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Button Component Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.25rem;
  border-radius: var(--radius-full);
  font-size: 0.825rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  transition: all 0.4s var(--transition-smooth);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-gold {
  background-color: var(--c-gold);
  color: #FFFFFF;
  box-shadow: 0 4px 20px var(--c-gold-glow);
}

.btn-gold:hover {
  background-color: var(--c-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201, 162, 39, 0.4);
}

.btn-outline {
  background: rgba(245, 241, 232, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 241, 232, 0.4);
  color: #FFFFFF;
}

.btn-outline:hover {
  background: rgba(245, 241, 232, 0.25);
  border-color: var(--c-ivory);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-outline-dark {
  background: transparent;
  border: 1px solid var(--c-taupe);
  color: #000000;
}

.btn-outline-dark:hover {
  background: var(--c-taupe-dark);
  color: #FFFFFF;
  border-color: var(--c-taupe-dark);
  transform: translateY(-2px);
}

/* Video Control Button */
.video-control-btn {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-full);
  background: rgba(13, 12, 10, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: #FFFFFF;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.video-control-btn:hover {
  background: rgba(201, 162, 39, 0.4);
  border-color: var(--c-gold);
  color: #FFFFFF;
}

/* ==========================================================================
   ORIGIN STORY ARCHITECTURE SECTION (WHY CHOOSE PURE ID)
   ========================================================================== */
.origin-story {
  position: relative;
  padding: 8rem 0 6rem;
  background-color: #f4f1e9;
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.72), transparent 48%), radial-gradient(circle at 76% 30%, rgba(201, 162, 39, 0.13), transparent 38%);
  overflow: hidden;
  border-bottom: 1px solid rgba(201, 162, 39, 0.15);
}

.origin-story::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: rgba(201, 162, 39, 0.12);
}

.origin-atmosphere {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.origin-ghost {
  position: absolute;
  font-family: var(--font-serif);
  font-size: 13rem;
  font-weight: 300;
  color: #C9A227;
  letter-spacing: 0.1em;
  user-select: none;
  line-height: 1;
}

.ghost-left {
  top: 5%;
  left: -2%;
}

.ghost-right {
  bottom: 5%;
  right: -2%;
}

.optical-rings {
  position: absolute;
  top: 43%;
  left: 74%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  pointer-events: none;
}

.optical-rings i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.12);
  animation: ring-pulse 10s ease-in-out infinite alternate;
}

.optical-rings i:nth-child(1) {
  width: 100%;
  height: 100%;
  animation-delay: 0s;
}

.optical-rings i:nth-child(2) {
  width: 80%;
  height: 80%;
  animation-delay: 1.5s;
  border-color: rgba(201, 162, 39, 0.18);
}

.optical-rings i:nth-child(3) {
  width: 60%;
  height: 60%;
  animation-delay: 3s;
}

.optical-rings i:nth-child(4) {
  width: 40%;
  height: 40%;
  animation-delay: 4.5s;
  border-color: rgba(201, 162, 39, 0.22);
}

.optical-rings i:nth-child(5) {
  width: 20%;
  height: 20%;
  animation-delay: 6s;
}

@keyframes ring-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0.5;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 1;
  }
}

.coord {
  position: absolute;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #C9A227;
  font-weight: 600;
  text-transform: uppercase;
}

.coord-a {
  top: 3rem;
  left: 3rem;
}

.coord-b {
  bottom: 3rem;
  right: 3rem;
}

.origin-architecture-header {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  max-width: 1180px;
  margin: 0 auto 4.5rem;
}

.origin-heading-main {
  max-width: 520px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #C9A227;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.origin-main-title {
  font-size: 6rem;
  color: #000000;
  margin-bottom: 1.5rem;
  line-height: 0.88;
}

.origin-tagline-quote {
  font-size: 3.25rem;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1.08;
}

.origin-quote-block {
  position: relative;
  min-height: 300px;
  padding: 3.25rem 3.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--c-taupe-dark);
  color: #FFFFFF;
  overflow: hidden;
}

.origin-quote-block::after {
  content: '';
  position: absolute;
  right: -90px;
  top: -90px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(234, 208, 116, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(234, 208, 116, 0.06), 0 0 0 88px rgba(234, 208, 116, 0.035);
}

.origin-quote-mark {
  position: absolute;
  top: -0.8rem;
  left: 1.5rem;
  color: #000000;
  font-size: 10rem;
  line-height: 1;
}

.origin-quote-caption {
  margin-top: 2rem;
  color: #C9A227;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.origin-subtext {
  font-size: 0.96rem;
  color: #000000;
  line-height: 1.7;
  max-width: 430px;
}

.origin-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 2rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  border-top: 1px solid rgba(159, 174, 142, 0.25);
  border-bottom: 1px solid rgba(159, 174, 142, 0.25);
}

.origin-line {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: #000000;
  padding: 1rem 2rem;
}

.origin-line.line-divider {
  color: #C9A227;
  padding-left: 0;
  padding-right: 0;
}

/* 3 Insight Architectural Cards */
.origin-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 5;
}

.insight {
  background: rgba(253, 251, 247, 0.92);
  border: 1px solid rgba(159, 174, 142, 0.16);
  border-radius: 2px;
  padding: 0;
  transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.insight:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 54px rgba(63, 75, 54, 0.14);
  border-color: var(--c-gold);
}

.insight-media {
  position: relative;
  height: 235px;
  overflow: hidden;
  background: #ded8ca;
}

.insight-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(30, 26, 20, 0.58));
}

.insight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--transition-smooth);
}

.insight:hover .insight-media img {
  transform: scale(1.045);
}

.insight-media-object {
  background: linear-gradient(145deg, #eadfbe, #f7f1e6);
}

.insight-media-object img {
  object-fit: contain;
  padding: 1.15rem;
}

.insight-media span {
  position: absolute;
  z-index: 2;
  left: 1.4rem;
  bottom: 1rem;
  color: #FFFFFF;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.insight-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem 1.6rem 1.8rem;
}

.insight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.insight-num {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: #C9A227;
  font-weight: 500;
  line-height: 1;
}

.insight-symbol {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-gold-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.insight-symbol b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
}

.insight h3 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: #000000;
}

.insight-main {
  font-size: 0.95rem;
  color: #000000;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.insight em {
  font-size: 0.875rem;
  font-style: italic;
  color: #000000;
  line-height: 1.6;
  font-family: var(--font-serif);
  margin-top: auto;
  border-top: 1px solid rgba(201, 162, 39, 0.12);
  padding-top: 1rem;
}

.chapter-index {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: #C9A227;
  text-transform: uppercase;
  width: max-content;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(201, 162, 39, 0.22);
}

.chapter-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

/* Manifesto Ribbon Strip */
.manifesto-strip {
  height: 54px;
  border-top: 1px solid rgba(159, 174, 142, .22);
  border-bottom: 1px solid rgba(159, 174, 142, .22);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--c-ivory-light);
}

.manifesto-strip>div {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  white-space: nowrap;
  animation: manifesto 26s linear infinite;
  font-size: 9px;
  letter-spacing: .28em;
  color: #000000;
}

.manifesto-strip i {
  width: 4px;
  height: 4px;
  background: var(--c-gold);
  border-radius: 50%;
}

@keyframes manifesto {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   SECTION 2.5: BRAND VOICE & STORY FORMULA (NATURAL LUXURY EDITORIAL)
   ========================================================================== */
.section-brand-voice {
  padding: 7rem 0;
  background-color: #3F4B36;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
  position: relative;
  overflow: hidden;
}

.brand-voice-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4.5rem;
  align-items: center;
}

/* Editorial Image Frame */
.brand-voice-visual-col {
  position: relative;
}

.brand-lockup-tile {
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: clamp(150px, 13vw, 190px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 8px solid #3F4B36;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.brand-lockup-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-brand-lockup {
  width: 190px;
  height: 68px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.footer-brand-lockup img {
  width: 230px;
  height: 230px;
  max-width: none;
  transform: translate(-7px, -88px);
}

.editorial-image-frame {
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(201, 162, 39, 0.25);
  aspect-ratio: 4/5;
}

.brand-voice-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--transition-smooth);
}

.editorial-image-frame:hover .brand-voice-img {
  transform: scale(1.04);
}

/* Content Column & Quotes */
.brand-voice-content-col {
  display: flex;
  flex-direction: column;
}

.brand-voice-header {
  margin-bottom: 2.25rem;
}

.brand-voice-title {
  font-size: 3.8rem;
  color: #FFFFFF;
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
}

.brand-voice-sub {
  font-size: 1.35rem;
  font-style: italic;
  color: #C9A227;
  line-height: 1.4;
}

/* Natural Editorial Quote List */
.voice-quotes-list {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin-bottom: 2.5rem;
}

.voice-quote-item {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.voice-gold-line {
  width: 18px;
  height: 2px;
  background-color: var(--c-gold);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.6);
}

.voice-quote-item p {
  font-size: 1.45rem;
  color: #000000;
  font-style: italic;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Product Copy Formula Card */
.product-copy-card {
  background: rgba(30, 26, 20, 0.85);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  position: relative;
}

.copy-card-label {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: #C9A227;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.75rem;
}

.copy-formula-steps {
  font-size: 0.95rem;
  color: #000000;
  margin-bottom: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}

.copy-formula-quote {
  font-size: 1.05rem;
  font-style: italic;
  color: #000000;
  line-height: 1.6;
  border-top: 1px solid rgba(201, 162, 39, 0.25);
  padding-top: 1.15rem;
  margin: 0;
}

.voice-footnote {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: #FFFFFF;
  letter-spacing: 0.05em;
}

/* Section Header Shared Component */
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem;
}

.section-label {
  color: #C9A227;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.section-title {
  font-size: 3.2rem;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  color: #000000;
}

.section-desc {
  font-size: 1.05rem;
  color: #000000;
  line-height: 1.7;
}

/* Section 2: Brand Philosophy & Meaning */
.section-philosophy {
  padding: 7rem 0;
  background-color: var(--c-ivory);
  position: relative;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.philosophy-card {
  background: var(--c-ivory-light);
  padding: 3.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201, 162, 39, 0.15);
  box-shadow: 0 10px 40px var(--c-shadow);
  position: relative;
  overflow: hidden;
}

.philosophy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--c-gold), #D8C279);
}

.philosophy-quote {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.35;
  color: #000000;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.philosophy-text {
  font-size: 1rem;
  color: #000000;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.philosophy-pills {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.philosophy-pill {
  padding: 0.5rem 1.25rem;
  background-color: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.55);
  color: #000000;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
}

.philosophy-visual-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(63, 75, 54, 0.1);
}

.philosophy-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform 0.8s var(--transition-smooth);
}

.philosophy-visual-wrapper:hover .philosophy-img {
  transform: scale(1.04);
}

/* Section 3: Interactive Water Drop & Ripple Canvas */
.section-ripple-canvas {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--c-ivory) 0%, #EFE8D9 100%);
  position: relative;
  text-align: center;
  overflow: hidden;
}

.ripple-interactive-box {
  position: relative;
  width: 100%;
  height: 440px;
  background-color: #ECE5D5;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201, 162, 39, 0.2);
  margin-top: 2.5rem;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(159, 174, 142, 0.08);
}

canvas#rippleCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.ripple-canvas-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  color: #000000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--c-gold-subtle);
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Section 4: Pure ID Mark (The Gold Within) */
.section-hidden-mark {
  padding: 8.5rem 0 7rem;
  background: #2d2923;
  position: relative;
  overflow: hidden;
}

.section-hidden-mark::before {
  content: 'WITHIN';
  position: absolute;
  right: -0.05em;
  bottom: -0.2em;
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: 18rem;
  line-height: 0.8;
  pointer-events: none;
}

.mark-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
  gap: clamp(4rem, 8vw, 8rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.mark-media-column {
  min-width: 0;
}

.mark-media-container {
  position: relative;
  height: min(68vw, 680px);
  min-height: 560px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(234, 208, 116, 0.32);
  background: #191612;
}

.mark-media-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 13, 0.42), transparent 25%, transparent 68%, rgba(18, 16, 13, 0.68));
  pointer-events: none;
}

.mark-media-meta {
  position: absolute;
  z-index: 3;
  top: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  color: #FFFFFF;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s ease, transform 0.8s var(--transition-smooth);
}

.mark-media-container:hover .mark-img {
  transform: scale(1.025);
}

.mark-hotspot {
  position: absolute;
  top: 48%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-gold);
  border: 2px solid var(--c-white);
  box-shadow: 0 0 0 7px rgba(201, 162, 39, 0.28);
  cursor: pointer;
  animation: pulse-ring 2s infinite;
  z-index: 4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mark-hotspot span {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  padding: 0.45rem 0.65rem;
  color: #FFFFFF;
  background: rgba(20, 18, 15, 0.76);
  backdrop-filter: blur(8px);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mark-hotspot.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0px rgba(201, 162, 39, 0.6);
  }

  70% {
    box-shadow: 0 0 0 16px rgba(201, 162, 39, 0);
  }

  100% {
    box-shadow: 0 0 0 0px rgba(201, 162, 39, 0);
  }
}

.mark-toggle-bar {
  position: absolute;
  z-index: 4;
  left: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 18, 15, 0.66);
  backdrop-filter: blur(12px);
}

.mark-toggle-btn {
  padding: 0.65rem 1.2rem;
  border-radius: 0;
  border: 0;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  transition: all 0.3s ease;
  color: #FFFFFF;
}

.mark-toggle-btn.active {
  background-color: var(--c-ivory-light);
  color: #000000;
}

.mark-media-caption {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1rem;
  color: #FFFFFF;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mark-details {
  padding-right: clamp(0rem, 2vw, 2rem);
}

.mark-details .section-label {
  color: #C9A227;
}

.mark-title {
  max-width: 620px;
  font-size: 5.2rem;
  line-height: 0.96;
  margin: 0.8rem 0 2rem;
  color: #FFFFFF;
}

.mark-title em {
  color: #C9A227;
  font-weight: 400;
}

.mark-details>.philosophy-text {
  max-width: 560px;
  color: #FFFFFF;
  font-size: 0.98rem;
  line-height: 1.75;
}

.mark-quote {
  margin: 2rem 0 2.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--c-gold);
  color: #C9A227;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
}

.mark-quote span {
  display: block;
  margin-top: 0.35rem;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mark-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
}

.mark-list-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 0;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  font-size: 0.88rem;
}

.mark-list-item strong {
  color: #FFFFFF;
}

.mark-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  color: #C9A227;
  border: 1px solid rgba(234, 208, 116, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.mark-signature-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  color: #FFFFFF;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mark-signature-line i {
  width: 48px;
  height: 1px;
  background: var(--c-gold);
}

/* Section 5: The Collections Preview */
.section-collections {
  padding: 7rem 0;
  background-color: var(--c-ivory);
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.collection-card {
  background-color: var(--c-ivory-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.15);
  transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}

.collection-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(63, 75, 54, 0.1);
  border-color: var(--c-gold);
}

.collection-img-wrapper {
  position: relative;
  height: 380px;
  overflow: hidden;
}

.collection-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--transition-smooth);
}

.collection-card:hover .collection-img {
  transform: scale(1.06);
}

.collection-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: rgba(245, 241, 232, 0.9);
  backdrop-filter: blur(6px);
  color: #000000;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.collection-info {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.collection-name {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.collection-tagline {
  font-style: italic;
  color: #C9A227;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
}

.collection-desc {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.collection-cta {
  margin-top: auto;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #000000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
}

.collection-card:hover .collection-cta {
  color: #C9A227;
}

/* Section 6: Featured Products */
.section-products {
  padding: 7rem 0;
  background-color: var(--c-ivory-light);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.product-card {
  background: var(--c-ivory);
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 162, 39, 0.12);
  overflow: hidden;
  transition: all 0.4s var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(63, 75, 54, 0.08);
  border-color: var(--c-gold);
}

.product-img-box {
  position: relative;
  height: 280px;
  background-color: #F8F5EE;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
}

.product-img {
  max-height: 85%;
  max-width: 85%;
  object-fit: contain;
  transition: transform 0.5s var(--transition-smooth);
}

.product-card:hover .product-img {
  transform: scale(1.08);
}

.product-hover-ripple {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1.5px solid var(--c-gold);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.5s var(--transition-smooth);
  pointer-events: none;
}

.product-card:hover .product-hover-ripple {
  opacity: 0.3;
  transform: scale(1.4);
}

.product-quick-view {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.product-card:hover .product-quick-view {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.product-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
}

.product-category {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #000000;
  margin-bottom: 0.35rem;
}

.product-name {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.35rem;
  color: #000000;
}

.product-poetic {
  font-size: 0.825rem;
  font-style: italic;
  font-family: var(--font-serif);
  color: #C9A227;
  margin-bottom: 0.75rem;
}

.product-price {
  font-size: 1.05rem;
  font-weight: 600;
  color: #000000;
  margin-top: auto;
}

/* Section 7: The Double Hold / Craft Protection Story */
.section-double-hold {
  padding: 7rem 0;
  background-color: var(--c-ivory);
}

.double-hold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.double-hold-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(63, 75, 54, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.2);
}

.double-hold-img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.double-hold-card-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.double-hold-feature {
  background: var(--c-ivory-light);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--c-gold);
}

.double-hold-feature h4 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.double-hold-feature p {
  font-size: 0.9rem;
  color: #000000;
}

/* Section 8: Packaging / The Reveal */
.section-packaging {
  padding: 7rem 0;
  background: linear-gradient(180deg, var(--c-ivory-light) 0%, var(--c-ivory) 100%);
  text-align: center;
}

.packaging-box {
  max-width: 900px;
  margin: 3rem auto 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(63, 75, 54, 0.12);
}

.packaging-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.packaging-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3rem;
  background: linear-gradient(to top, rgba(63, 75, 54, 0.85) 0%, transparent 100%);
  color: #FFFFFF;
}

.packaging-overlay h3 {
  color: #FFFFFF;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

/* Section 9: Final Brand CTA */
.section-brand-cta {
  padding: 8rem 0;
  background-color: #1A1713;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-gold-glow) 0%, transparent 70%);
  pointer-events: none;
}

.cta-title {
  color: #FFFFFF;
  font-size: 3.8rem;
  margin-bottom: 1.5rem;
}

.cta-subtitle {
  font-size: 1.1rem;
  color: #FFFFFF;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* ==========================================================================
   COLLECTIONS PAGE STYLES
   ========================================================================== */
.collections-page-hero {
  padding: 9rem 0 4rem;
  text-align: center;
  background: radial-gradient(circle at center, rgba(201, 162, 39, 0.08) 0%, var(--c-ivory) 80%);
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 0.6rem 1.6rem;
  border-radius: var(--radius-full);
  background: var(--c-ivory-light);
  border: 1px solid rgba(159, 174, 142, 0.2);
  color: #000000;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.filter-pill:hover,
.filter-pill.active {
  background-color: var(--c-gold);
  color: #FFFFFF;
  border-color: var(--c-gold);
  box-shadow: 0 4px 15px var(--c-gold-glow);
}

/* Collection index: three concentric chapters */
.collection-index {
  min-height: 100vh;
  padding: calc(var(--nav-height) + 3.5rem) 0 5rem;
  background: var(--c-ivory-light);
  overflow: hidden;
}

.collection-index-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  align-items: end;
}

.collection-index-head .section-label {
  grid-column: 1 / -1;
  margin-bottom: 1.1rem;
}

.collection-index-title {
  font-size: 6.5rem;
  line-height: 0.88;
}

.collection-index-head p {
  max-width: 470px;
  font-size: 0.95rem;
  color: #000000;
}

.collection-orbit-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) minmax(380px, 0.8fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
  margin-top: 4rem;
}

.collection-orbit {
  position: relative;
  width: min(42vw, 570px);
  aspect-ratio: 1;
  justify-self: center;
}

.orbit-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(159, 174, 142, 0.28);
  background: rgba(245, 241, 232, 0.72);
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

.orbit-layer:hover,
.orbit-layer:focus-visible {
  background: rgba(201, 162, 39, 0.11);
  border-color: var(--c-gold);
  box-shadow: 0 0 0 12px rgba(201, 162, 39, 0.035);
}

.orbit-layer-outer {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.orbit-layer-middle {
  width: 70%;
  height: 70%;
  z-index: 2;
  background: rgba(253, 251, 247, 0.9);
}

.orbit-layer-inner {
  width: 40%;
  height: 40%;
  z-index: 3;
  background: var(--c-ivory-light);
}

.orbit-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-gold);
  box-shadow: 0 0 0 8px rgba(201, 162, 39, 0.12);
  pointer-events: none;
}

.orbit-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #000000;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  white-space: nowrap;
}

.orbit-label b {
  font-family: var(--font-sans);
  color: #C9A227;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.orbit-label-outer {
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
}

.orbit-label-middle {
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
}

.orbit-label-inner {
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
}

.collection-chapters {
  border-top: 1px solid rgba(159, 174, 142, 0.2);
}

.collection-chapter {
  width: 100%;
  display: grid;
  grid-template-columns: 118px 1fr 28px;
  gap: 1.25rem;
  align-items: start;
  padding: 1.6rem 0;
  text-align: left;
  color: #000000;
  border-bottom: 1px solid rgba(159, 174, 142, 0.2);
}

.chapter-number {
  padding-top: 0.5rem;
  color: #C9A227;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chapter-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chapter-copy strong {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.chapter-copy small {
  color: #000000;
  font-size: 0.78rem;
  line-height: 1.55;
  max-width: 340px;
}

.chapter-arrow {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.collection-chapter:hover .chapter-arrow {
  transform: translate(4px, -4px);
  color: #C9A227;
}

/* Individual collection story */
.collection-story-hero {
  position: relative;
  height: min(92vh, 900px);
  min-height: 620px;
  overflow: hidden;
  color: #FFFFFF;
}

.collection-story-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.collection-story-vow .collection-story-hero-img {
  object-position: center 38%;
}

.collection-story-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 24, 18, 0.28), rgba(30, 24, 18, 0.04) 42%, rgba(30, 24, 18, 0.52));
}

.collection-back {
  position: absolute;
  top: calc(var(--nav-height) + 1.5rem);
  left: max(2rem, calc((100vw - 1360px) / 2 + 2rem));
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.collection-story-heading {
  position: absolute;
  z-index: 2;
  left: max(2rem, calc((100vw - 1360px) / 2 + 2rem));
  bottom: 4.5rem;
}

.collection-story-heading span,
.collection-scroll-cue {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.collection-story-heading h1 {
  color: #FFFFFF;
  font-size: 8.5rem;
  line-height: 0.88;
  margin: 0.6rem 0 1rem;
}

.collection-story-heading p {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
}

.collection-diamond-code {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.collection-diamond-code i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold-light);
}

.collection-scroll-cue {
  position: absolute;
  right: 2rem;
  bottom: 4.5rem;
  z-index: 2;
  writing-mode: vertical-rl;
}

.collection-ring-nav {
  position: absolute;
  z-index: 3;
  right: max(2rem, calc((100vw - 1360px) / 2 + 2rem));
  bottom: 4rem;
  display: flex;
  gap: 0.55rem;
}

.collection-ring-nav a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 0.65rem;
  letter-spacing: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.collection-ring-nav a:hover,
.collection-ring-nav a.active {
  background: var(--c-white);
  color: #000000;
  border-color: var(--c-white);
}

.collection-manifesto {
  padding: 7rem 0;
}

.collection-manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

.collection-intro {
  max-width: 900px;
  color: #000000;
  font-size: 3.5rem;
  line-height: 1.08;
}

.collection-note {
  margin-top: 2rem;
  color: #C9A227;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.collection-editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: min(42vw, 620px) min(28vw, 400px);
  gap: 1rem;
  padding-bottom: 7rem;
}

.editorial-frame {
  overflow: hidden;
  background: var(--c-ivory-dark);
}

.editorial-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--transition-smooth);
}

.editorial-frame:hover img {
  transform: scale(1.025);
}

.editorial-frame-tall {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
}

.editorial-frame-wide {
  grid-column: 7 / 13;
  grid-row: 1;
}

.editorial-frame-square {
  grid-column: 7 / 10;
  grid-row: 2;
}

.editorial-frame-object {
  grid-column: 10 / 13;
  grid-row: 2;
}

.editorial-frame-object img {
  object-fit: contain;
  padding: 2rem;
}

.physical-collection-story .editorial-frame-tall img,
.physical-collection-story .editorial-frame-square img,
.physical-collection-story .editorial-frame-object img {
  object-fit: contain;
  padding: clamp(1rem, 3vw, 3rem);
}

.physical-collection-story .editorial-frame-wide img {
  object-fit: cover;
}

.collection-pieces {
  padding: 6rem 0 7rem;
  background: var(--c-ivory-light);
}

.collection-pieces-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 3rem;
}

.collection-pieces-head h2 {
  font-size: 4.5rem;
  line-height: 1;
}

.collection-pieces-head>span {
  color: #000000;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.collection-product-grid.pieces-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
}

.collection-product-grid.pieces-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collection-product-grid.pieces-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (PDP) STYLES
   ========================================================================== */
.pdp-wrapper {
  padding: 8rem 0 6rem;
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4.5rem;
  align-items: start;
}

.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pdp-main-img-box {
  width: 100%;
  height: 520px;
  background-color: var(--c-ivory-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-shadow: 0 15px 40px var(--c-shadow);
}

.pdp-main-img {
  max-height: 90%;
  max-width: 90%;
  object-fit: contain;
}

.pdp-thumbs {
  display: flex;
  gap: 1rem;
}

.pdp-thumb {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(159, 174, 142, 0.2);
  background: var(--c-ivory-light);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  object-fit: contain;
}

.pdp-thumb.active,
.pdp-thumb:hover {
  border-color: var(--c-gold);
  box-shadow: 0 4px 12px var(--c-gold-glow);
}

.pdp-info {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.pdp-header {
  border-bottom: 1px solid rgba(159, 174, 142, 0.15);
  padding-bottom: 1.5rem;
}

.pdp-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #C9A227;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pdp-title {
  font-size: 2.8rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.pdp-tagline {
  font-style: italic;
  font-family: var(--font-serif);
  color: #000000;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.pdp-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000000;
}

.pdp-option-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pdp-option-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #000000;
}

.pdp-metal-swatches {
  display: flex;
  gap: 0.85rem;
}

.metal-swatch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(159, 174, 142, 0.25);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--c-ivory-light);
}

.metal-swatch.active {
  border-color: var(--c-gold);
  background-color: var(--c-gold-subtle);
  color: #000000;
  font-weight: 600;
}

.swatch-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.swatch-gold {
  background: #C9A227;
}

.swatch-white {
  background: #E5E5E5;
}

.swatch-rose {
  background: #E8B4A2;
}

.pdp-size-selector {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.size-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(159, 174, 142, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  background: var(--c-ivory-light);
}

.size-btn.active,
.size-btn:hover {
  border-color: var(--c-gold);
  background: var(--c-gold);
  color: #FFFFFF;
}

.pdp-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* Accordion Component */
.accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(159, 174, 142, 0.15);
  margin-top: 1rem;
}

.accordion-item {
  border-bottom: 1px solid rgba(159, 174, 142, 0.15);
}

.accordion-header {
  width: 100%;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #000000;
  text-align: left;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.7;
}

.accordion-item.active .accordion-content {
  max-height: 300px;
  padding-bottom: 1.25rem;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */
.footer {
  position: relative;
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(201, 162, 39, 0.08) 0%, transparent 75%),
    linear-gradient(180deg, #151310 0%, #0C0B09 100%);
  color: #FFFFFF;
  padding: 6rem 0 3rem;
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 240, 179, 0.12);
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-brand-col p {
  color: #FFFFFF;
  font-size: 0.9rem;
  margin-top: 1.25rem;
  max-width: 320px;
  line-height: 1.7;
}

.footer-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #000000;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-links a {
  color: #FFFFFF;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #C9A227;
}

.footer-bottom {
  border-top: 1px solid rgba(245, 241, 232, 0.1);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #FFFFFF;
}

/* ==========================================================================/* ==========================================================================
   RESPONSIVE MEDIA QUERIES FOR PERFECT MOBILE SPACING
   ========================================================================== */

.mobile-menu-btn {
  display: none;
}

@media (max-width: 1024px) {
  .container {
    padding: 0 1.5rem;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-product-grid.pieces-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .philosophy-grid,
  .mark-grid,
  .double-hold-grid,
  .pdp-grid,
  .origin-insights,
  .brand-voice-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .mark-details {
    padding-right: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 68px;
  }

  body {
    overflow-x: hidden;
  }

  .collection-index {
    padding: calc(var(--nav-height) + 2rem) 0 3rem;
  }

  .collection-index-head {
    display: block;
  }

  .collection-index-head .section-label {
    display: block;
    margin-bottom: 0.8rem;
  }

  .collection-index-title {
    font-size: 3.6rem;
  }

  .collection-index-head p {
    margin-top: 1rem;
    font-size: 0.86rem;
  }

  .collection-orbit-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2.5rem;
  }

  .collection-orbit {
    width: min(88vw, 390px);
  }

  .orbit-label {
    font-size: 1rem;
  }

  .orbit-label b {
    font-size: 0.55rem;
  }

  .orbit-label-inner {
    top: 20%;
  }

  .collection-chapter {
    grid-template-columns: 88px 1fr 20px;
    gap: 0.8rem;
    padding: 1.3rem 0;
  }

  .chapter-copy strong {
    font-size: 1.65rem;
  }

  .chapter-copy small {
    font-size: 0.72rem;
  }

  .chapter-number {
    font-size: 0.54rem;
  }

  .collection-story-hero {
    height: 82vh;
    min-height: 560px;
  }

  .physical-collection-story .collection-story-hero-img {
    object-position: 68% center;
  }

  .collection-story-heading {
    left: 1.15rem;
    right: 1.15rem;
    bottom: 2.4rem;
  }

  .collection-story-heading h1 {
    font-size: 4.5rem;
  }

  .collection-story-heading p {
    font-size: 1.1rem;
  }

  .collection-diamond-code {
    flex-wrap: wrap;
    max-width: 280px;
    line-height: 1.45;
  }

  .collection-back {
    top: calc(var(--nav-height) + 1rem);
    left: 1.15rem;
  }

  .collection-scroll-cue {
    display: none;
  }

  .collection-ring-nav {
    top: calc(var(--nav-height) + 0.65rem);
    right: 1.15rem;
    bottom: auto;
    gap: 0.35rem;
  }

  .collection-ring-nav a {
    width: 36px;
    height: 36px;
    font-size: 0.58rem;
  }

  .collection-manifesto {
    padding: 4rem 0;
  }

  .collection-manifesto-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .collection-intro {
    font-size: 2rem;
  }

  .collection-editorial {
    grid-template-columns: 1fr;
    grid-template-rows: 118vw 82vw 82vw 82vw;
    gap: 0.65rem;
    padding-bottom: 4rem;
  }

  .editorial-frame-tall,
  .editorial-frame-wide,
  .editorial-frame-square,
  .editorial-frame-object {
    grid-column: 1;
    grid-row: auto;
  }

  .collection-pieces {
    padding: 4rem 0;
  }

  .collection-pieces-head {
    margin-bottom: 2rem;
  }

  .collection-pieces-head h2 {
    font-size: 3rem;
  }

  .collection-product-grid.pieces-2,
  .collection-product-grid.pieces-3,
  .collection-product-grid.pieces-4 {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .container {
    padding: 0 1.15rem;
    width: 100%;
    box-sizing: border-box;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .navbar {
    height: var(--nav-height);
  }

  .nav-brand {
    gap: 0.5rem;
  }

  .nav-logo-text .logo-main {
    font-size: 1.15rem;
    letter-spacing: 0.18em;
  }

  .nav-logo-text .logo-sub {
    font-size: 0.425rem;
    letter-spacing: 0.25em;
  }

  .brand-lockup-tile {
    width: 118px;
    right: 0.75rem;
    bottom: -0.75rem;
    border-width: 6px;
  }

  .footer-brand-lockup {
    width: 170px;
    height: 62px;
  }

  .nav-actions {
    gap: 0.5rem;
  }

  .nav-btn {
    width: 36px;
    height: 36px;
  }

  /* Mobile Navigation Menu Overlay */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background-color: rgba(245, 241, 232, 0.98);
    backdrop-filter: blur(16px);
    padding: 1.75rem 0;
    gap: 1.25rem;
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
    box-shadow: 0 10px 30px rgba(63, 75, 54, 0.1);
    transform: translateY(-150%);
    transition: transform 0.4s var(--transition-smooth);
    z-index: 99;
    text-align: center;
  }

  .nav-links.open {
    transform: translateY(0);
  }

  .nav-links .nav-link {
    color: #000000;
    font-size: 1rem;
    letter-spacing: 0.12em;
    padding: 0.35rem 0;
  }

  /* Section 1: Hero Section */
  .hero-section {
    height: 100vh;
    min-height: 580px;
  }

  .hero-stage {
    padding: 4.25rem 1rem 1.25rem;
    justify-content: center;
  }

  .ripple-portal-wrapper {
    width: 200px;
    height: 200px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  .ripple-ring.ring-1 {
    width: 230px;
    height: 230px;
  }

  .ripple-ring.ring-2 {
    width: 195px;
    height: 195px;
  }

  .ripple-ring.ring-3 {
    width: 160px;
    height: 160px;
  }

  .gold-portal-circle {
    width: 140px;
    height: 140px;
  }

  .portal-diamond-img {
    width: 62%;
    height: 62%;
    max-width: 62%;
    max-height: 62%;
  }

  .portal-hint {
    bottom: 5px;
    font-size: 0.525rem;
    padding: 2px 7px;
  }

  .hero-content-reveal {
    max-width: 100%;
    padding: 0;
  }

  .hero-tagline-sub {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.5rem;
  }

  .hero-title {
    font-size: 1.65rem;
    line-height: 1.22;
    margin-bottom: 0.6rem;
  }

  .hero-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
  }

  .btn {
    padding: 0.8rem 1.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }

  /* Shared Section Headers Spacing */
  .section-header {
    margin-bottom: 2rem;
  }

  .section-label {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
  }

  .section-title {
    font-size: 1.85rem;
    line-height: 1.25;
    margin-bottom: 0.85rem;
  }

  .section-desc {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* Section: Origin Story Architecture */
  .origin-story {
    padding: 4rem 0;
  }

  .coord {
    display: none;
  }

  .origin-ghost {
    font-size: 7rem;
  }

  .origin-architecture-header {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .origin-heading-main {
    max-width: none;
  }

  .origin-main-title {
    font-size: 3.2rem;
    margin-bottom: 1rem;
  }

  .origin-tagline-quote {
    font-size: 1.85rem;
    line-height: 1.1;
  }

  .origin-quote-block {
    min-height: 230px;
    padding: 2.5rem 1.5rem 1.75rem;
  }

  .origin-quote-mark {
    left: 0.75rem;
    font-size: 7rem;
  }

  .origin-quote-caption {
    margin-top: 1.5rem;
  }

  .origin-subtext {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .origin-copy {
    gap: 0;
    margin-bottom: 2.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .origin-copy::-webkit-scrollbar {
    display: none;
  }

  .origin-line {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    padding: 0.9rem 0.75rem;
    white-space: nowrap;
  }

  .origin-insights {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .insight {
    padding: 0;
    border-radius: 2px;
  }

  .insight-media {
    height: 230px;
  }

  .insight-body {
    padding: 1.5rem 1.25rem 1.6rem;
  }

  .insight-num {
    font-size: 1.8rem;
  }

  .insight h3 {
    font-size: 1.35rem;
    margin-bottom: 0.65rem;
  }

  .insight-main {
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 1rem;
  }

  .insight em {
    font-size: 0.825rem;
    padding-top: 0.75rem;
  }

  /* Section: Brand Voice Mobile Styling */
  .section-brand-voice {
    padding: 4rem 0;
  }

  .brand-voice-grid {
    gap: 2.5rem;
  }

  .editorial-image-frame {
    aspect-ratio: 4/3;
  }

  .voice-quotes-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .product-copy-card {
    padding: 1.5rem 1.25rem;
  }

  /* Section 2: Philosophy */
  .section-philosophy {
    padding: 3.5rem 0;
  }

  .philosophy-card {
    padding: 1.75rem 1.15rem;
    border-radius: var(--radius-md);
  }

  .philosophy-quote {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }

  .philosophy-text {
    font-size: 0.875rem;
    line-height: 1.65;
    margin-bottom: 1rem;
  }

  .philosophy-pills {
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .philosophy-pill {
    padding: 0.4rem 0.9rem;
    font-size: 0.72rem;
  }

  .philosophy-img {
    height: 260px;
    border-radius: var(--radius-md);
  }

  /* Section 3: Canvas */
  .section-ripple-canvas {
    padding: 3.5rem 0;
  }

  .ripple-interactive-box {
    height: 270px;
    margin-top: 1.5rem;
    border-radius: var(--radius-md);
  }

  .ripple-canvas-hint {
    font-size: 0.68rem;
    padding: 0.35rem 0.85rem;
    width: 90%;
    bottom: 1rem;
  }

  /* Section 4: Pure ID Mark */
  .section-hidden-mark {
    padding: 4.5rem 0 4rem;
  }

  .mark-media-container {
    height: min(118vw, 520px);
    min-height: 0;
  }

  .mark-img {
    height: 100%;
    border-radius: 0;
  }

  .mark-title {
    font-size: 2.75rem;
    line-height: 0.98;
    margin: 0.65rem 0 1.35rem;
  }

  .mark-details>.philosophy-text {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .mark-quote {
    margin: 1.5rem 0 2rem;
    font-size: 1.1rem;
  }

  .mark-media-caption {
    flex-direction: column;
    gap: 0.35rem;
    line-height: 1.45;
  }

  .mark-media-meta {
    top: 1rem;
    left: 1rem;
    right: 1rem;
  }

  .mark-hotspot {
    left: 55%;
  }

  .mark-hotspot span {
    display: none;
  }

  .mark-list {
    margin: 1.25rem 0;
    gap: 0.85rem;
  }

  .mark-list-item {
    font-size: 0.875rem;
    grid-template-columns: 38px 1fr;
    gap: 0.85rem;
  }

  .mark-icon {
    width: 38px;
    height: 38px;
  }

  .mark-toggle-bar {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    gap: 0.25rem;
    margin: 0;
  }

  .mark-toggle-btn {
    flex: 1;
    padding: 0.65rem 0.75rem;
    font-size: 0.62rem;
  }

  /* Section 5: Collections */
  .section-collections {
    padding: 3.5rem 0;
  }

  .collections-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .collection-img-wrapper {
    height: 260px;
  }

  .collection-info {
    padding: 1.25rem;
  }

  .collection-name {
    font-size: 1.4rem;
  }

  .collection-desc {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  /* Section 6: Featured Products */
  .section-products {
    padding: 3.5rem 0;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .product-img-box {
    height: 230px;
    padding: 1rem;
  }

  .product-content {
    padding: 1.15rem 1rem;
  }

  .product-name {
    font-size: 1.15rem;
  }

  .product-price {
    font-size: 1rem;
  }

  /* Section 7: Double Hold */
  .section-double-hold {
    padding: 3.5rem 0;
  }

  .double-hold-img {
    height: 260px;
    border-radius: var(--radius-md);
  }

  .double-hold-card-list {
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .double-hold-feature {
    padding: 1.15rem 1rem;
  }

  .double-hold-feature h4 {
    font-size: 1.05rem;
  }

  .double-hold-feature p {
    font-size: 0.85rem;
  }

  /* Section 8: Packaging */
  .section-packaging {
    padding: 3.5rem 0;
  }

  .packaging-box {
    margin-top: 1.5rem;
    border-radius: var(--radius-md);
  }

  .packaging-img {
    height: 260px;
  }

  .packaging-overlay {
    padding: 1.5rem 1rem;
  }

  .packaging-overlay h3 {
    font-size: 1.4rem;
  }

  .packaging-overlay p {
    font-size: 0.85rem;
  }

  /* Section 9: Brand CTA */
  .section-brand-cta {
    padding: 4rem 0;
  }

  .cta-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }

  .cta-subtitle {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
  }

  /* View 2: Collections Page Filter Bar */
  .collections-page-hero {
    padding: 5.5rem 0 1.5rem;
  }

  .filter-bar {
    gap: 0.4rem;
    margin: 1.5rem 0 1rem;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar for Chrome/Safari/Firefox */
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-pill {
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* View 3: Product Detail Page (PDP) */
  .pdp-wrapper {
    padding: 5.5rem 0 3rem;
  }

  .pdp-grid {
    gap: 2.25rem;
  }

  .pdp-main-img-box {
    height: 300px;
    padding: 0.75rem;
    border-radius: var(--radius-md);
  }

  .pdp-thumbs {
    gap: 0.5rem;
    justify-content: center;
  }

  .pdp-thumb {
    width: 64px;
    height: 64px;
    padding: 0.35rem;
  }

  .pdp-header {
    padding-bottom: 1rem;
  }

  .pdp-title {
    font-size: 1.85rem;
  }

  .pdp-tagline {
    font-size: 0.95rem;
  }

  .pdp-price {
    font-size: 1.25rem;
  }

  .pdp-option-group {
    gap: 0.5rem;
  }

  .pdp-metal-swatches {
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .metal-swatch {
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
  }

  .size-btn {
    width: 38px;
    height: 38px;
    font-size: 0.8rem;
  }

  .pdp-actions {
    flex-direction: column;
    gap: 0.65rem;
  }

  .accordion-header {
    padding: 1rem 0;
    font-size: 0.825rem;
  }

  .accordion-content {
    font-size: 0.85rem;
  }

  /* Footer */
  .footer {
    padding: 3.5rem 0 2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-bottom: 2.5rem;
  }

  .footer-heading {
    margin-bottom: 1rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.85rem;
    text-align: center;
    padding-top: 1.5rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  .ripple-portal-wrapper {
    width: 180px;
    height: 180px;
    margin-top: 0.25rem;
    margin-bottom: 0.85rem;
  }

  .ripple-ring.ring-1 {
    width: 210px;
    height: 210px;
  }

  .ripple-ring.ring-2 {
    width: 175px;
    height: 175px;
  }

  .ripple-ring.ring-3 {
    width: 145px;
    height: 145px;
  }

  .gold-portal-circle {
    width: 130px;
    height: 130px;
  }

  .portal-diamond-img {
    width: 58%;
    height: 58%;
    max-width: 58%;
    max-height: 58%;
  }

  .hero-title {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .hero-subtitle {
    font-size: 0.8rem;
    line-height: 1.48;
    margin-bottom: 1rem;
  }

  .section-title {
    font-size: 1.65rem;
  }

  .philosophy-card {
    padding: 1.5rem 1rem;
  }

  .philosophy-quote {
    font-size: 1.2rem;
  }

  .philosophy-img,
  .mark-img,
  .double-hold-img,
  .packaging-img {
    height: 230px;
  }

  .collection-img-wrapper {
    height: 230px;
  }

  .product-img-box {
    height: 200px;
  }

  .pdp-main-img-box {
    height: 260px;
  }
}

/* ==========================================================================
   BRAND-FIRST EDITORIAL REFINEMENT
   ========================================================================== */

/* Legacy typographic lockup fallback. */
.nav-logo-text {
  display: block;
  width: 176px;
  height: 56px;
  flex: 0 0 176px;
  background: var(--c-ivory-light);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.nav-logo-text>* {
  display: none;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 68px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.footer-brand-lockup img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
  transform: none;
}

/* Protection and craftsmanship */
.section-double-hold {
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  background: #2D2923;
  color: #FFFFFF;
}

.section-double-hold::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(201, 162, 39, 0.07) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 100%);
}

.section-double-hold .container {
  position: relative;
  z-index: 1;
}

.craft-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
}

.craft-title {
  max-width: 760px;
  margin-top: 1rem;
  color: #FFFFFF;
  font-size: 6rem;
  line-height: 0.92;
}

.craft-title em {
  color: #C9A227;
  font-weight: 400;
}

.craft-heading-copy {
  max-width: 500px;
  padding-bottom: 0.5rem;
}

.craft-heading-copy p {
  font-size: 1rem;
  line-height: 1.85;
}

.craft-heading-copy span {
  display: block;
  margin-top: 1.25rem;
  color: #C9A227;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.double-hold-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: stretch;
  margin-top: 4rem;
}

.double-hold-media {
  position: relative;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(234, 208, 116, 0.28);
  border-radius: 0;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

.double-hold-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(18, 16, 13, 0.88) 100%);
}

.double-hold-img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: right center;
  border-radius: 0;
}

.double-hold-media figcaption {
  position: absolute;
  right: 2rem;
  bottom: 1.8rem;
  left: 2rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: #FFFFFF;
}

.double-hold-media figcaption span {
  color: #C9A227;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.double-hold-media figcaption strong {
  max-width: 230px;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.1;
  text-align: right;
}

.craft-marker {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(245, 241, 232, 0.65);
  background: rgba(26, 23, 19, 0.72);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.craft-marker::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--c-gold-light);
  box-shadow: 0 0 0 4px rgba(234, 208, 116, 0.18);
}

.craft-marker-claw {
  top: 16%;
  left: 43%;
}

.craft-marker-bezel {
  top: 48%;
  left: 46%;
}

.craft-protection-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.craft-material-key {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 1.35rem;
  padding: 1.7rem 0;
  border-top: 1px solid rgba(245, 241, 232, 0.18);
  border-bottom: 1px solid rgba(245, 241, 232, 0.18);
}

.craft-material-key>div {
  display: flex;
  flex-direction: column;
}

.craft-material-key>i {
  width: 1px;
  background: rgba(234, 208, 116, 0.34);
}

.craft-material-key span {
  margin-bottom: 0.55rem;
  color: #C9A227;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.craft-material-key strong {
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
}

.craft-material-key small {
  margin-top: 0.55rem;
  color: #FFFFFF;
  font-size: 0.73rem;
  line-height: 1.55;
}

.double-hold-card-list {
  gap: 0;
  margin-top: 2.25rem;
}

.double-hold-feature {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.25rem;
  padding: 1.65rem 0;
  border: 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.15);
  border-radius: 0;
  background: transparent;
}

.double-hold-feature>span {
  color: #C9A227;
  font-family: var(--font-serif);
  font-size: 1.4rem;
}

.double-hold-feature h4 {
  margin-bottom: 0.3rem;
  color: #FFFFFF;
  font-size: 1.5rem;
}

.double-hold-feature p {
  max-width: 420px;
  color: #FFFFFF;
  font-size: 0.87rem;
  line-height: 1.7;
}

.craft-belief {
  margin-top: 2.6rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--c-gold);
  color: #FFFFFF;
  font-size: 2.1rem;
  font-style: italic;
  line-height: 1.25;
}

/* The reveal */
.section-packaging {
  padding: 8rem 0;
  background: #F7F4ED;
  text-align: left;
}

.packaging-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
}

.packaging-title {
  margin-top: 0.8rem;
  color: #000000;
  font-size: 6.6rem;
  line-height: 0.88;
}

.packaging-heading>p {
  max-width: 520px;
  padding-bottom: 0.35rem;
  font-size: 1rem;
  line-height: 1.85;
}

.packaging-experience {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.78fr);
  min-height: 620px;
  margin-top: 4rem;
  box-shadow: 0 28px 70px rgba(63, 75, 54, 0.12);
}

.packaging-box {
  position: relative;
  max-width: none;
  min-height: 620px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.packaging-img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: right center;
  border-radius: 0;
}

.packaging-box figcaption {
  position: absolute;
  bottom: 1.6rem;
  left: 1.6rem;
  padding: 0.55rem 0.75rem;
  background: rgba(253, 251, 247, 0.9);
  color: #000000;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.packaging-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem);
  background: #D8C279;
  color: #000000;
}

.packaging-index {
  margin-bottom: 2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.packaging-story h3 {
  color: #000000;
  font-size: 4.6rem;
  line-height: 0.92;
}

.packaging-story h3 em {
  color: #000000;
  font-weight: 400;
}

.packaging-story>p {
  max-width: 430px;
  margin-top: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.75;
}

.packaging-steps {
  margin-top: 2.5rem;
  list-style: none;
}

.packaging-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(45, 41, 35, 0.22);
}

.packaging-steps li>span {
  color: #000000;
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.packaging-steps li div {
  display: flex;
  flex-direction: column;
}

.packaging-steps strong {
  font-size: 0.83rem;
}

.packaging-steps small {
  margin-top: 0.2rem;
  color: #000000;
  font-size: 0.72rem;
  line-height: 1.5;
}

/* Identity signature */
.section-brand-cta {
  padding: 0;
  background: #1A1713;
  color: #FFFFFF;
  text-align: left;
}

.cta-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
  gap: 4rem;
  align-items: center;
  min-height: 650px;
}

.cta-copy {
  position: relative;
  z-index: 2;
  max-width: 750px;
  padding: 6rem 0;
}

.section-brand-cta .section-label {
  color: #C9A227;
}

.cta-title {
  margin: 1.25rem 0 1.5rem;
  color: #FFFFFF;
  font-size: 6rem;
  line-height: 0.93;
}

.cta-title em {
  color: #C9A227;
  font-weight: 400;
}

.cta-subtitle {
  max-width: 560px;
  margin: 0 0 2.25rem;
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1.75;
}

.cta-ripple-mark {
  position: relative;
  width: min(42vw, 540px);
  aspect-ratio: 1;
  justify-self: end;
}

.cta-ripple-mark i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid rgba(234, 208, 116, 0.32);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cta-ripple-mark i:nth-child(1) {
  width: 100%;
  height: 100%;
}

.cta-ripple-mark i:nth-child(2) {
  width: 72%;
  height: 72%;
  border-color: rgba(234, 208, 116, 0.48);
}

.cta-ripple-mark i:nth-child(3) {
  width: 44%;
  height: 44%;
  border-color: rgba(234, 208, 116, 0.72);
}

.cta-ripple-mark span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-gold-light);
  box-shadow: 0 0 0 12px rgba(234, 208, 116, 0.09);
  transform: translate(-50%, -50%);
}

.cta-ripple-mark b {
  position: absolute;
  top: calc(50% + 54px);
  left: 50%;
  width: 220px;
  height: 76px;
  overflow: hidden;
  background: var(--c-ivory-light);
  color: #000000;
  font-size: 0;
  transform: translateX(-50%);
}

/* Shared compact footer for collection index and story pages */
.site-footer-compact {
  padding: 3.5rem 0 1.75rem;
}

.collection-footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(260px, 0.8fr);
  gap: 4rem;
  align-items: end;
  padding-bottom: 2.5rem;
}

.collection-footer-brand p {
  max-width: 560px;
  color: #FFFFFF;
  font-size: 0.86rem;
  line-height: 1.75;
}

.collection-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem 1.5rem;
}

.collection-footer-nav a {
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.collection-footer-nav a:hover {
  color: #C9A227;
}

.collection-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  color: #FFFFFF;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {

  .craft-heading,
  .packaging-heading {
    gap: 3rem;
  }

  .double-hold-stage,
  .packaging-experience {
    grid-template-columns: 1fr 0.88fr;
    gap: 2.5rem;
  }

  .packaging-experience {
    gap: 0;
  }

  .cta-identity-grid {
    grid-template-columns: 1fr 400px;
    gap: 2rem;
  }

  .cta-ripple-mark {
    width: 400px;
  }

  .craft-title,
  .cta-title {
    font-size: 4.8rem;
  }

  .packaging-title {
    font-size: 5.2rem;
  }

  .packaging-story h3 {
    font-size: 3.8rem;
  }

  .craft-belief {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .nav-logo-text {
    width: 142px;
    height: 46px;
    flex-basis: 142px;
    background-size: 100% auto;
  }

  .section-double-hold,
  .section-packaging {
    padding: 5rem 0;
  }

  .craft-heading,
  .packaging-heading {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  .craft-title,
  .packaging-title,
  .cta-title {
    font-size: 3.3rem;
  }

  .craft-heading-copy {
    max-width: none;
  }

  .double-hold-stage,
  .packaging-experience {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2.25rem;
  }

  .double-hold-stage {
    gap: 2.25rem;
  }

  .double-hold-media,
  .double-hold-img {
    min-height: 440px;
    height: 440px;
  }

  .double-hold-media figcaption {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: block;
  }

  .double-hold-media figcaption strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.35rem;
    text-align: left;
  }

  .craft-marker {
    padding: 0.42rem 0.55rem;
    font-size: 0.55rem;
  }

  .craft-material-key {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .craft-material-key>i {
    width: 100%;
    height: 1px;
  }

  .packaging-experience,
  .packaging-box,
  .packaging-img {
    min-height: 0;
  }

  .packaging-img {
    height: 72vw;
    max-height: 500px;
  }

  .packaging-story {
    padding: 2.5rem 1.4rem;
  }

  .packaging-story h3 {
    font-size: 3.25rem;
  }

  .cta-identity-grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding-top: 4.5rem;
  }

  .cta-copy {
    padding: 0;
  }

  .cta-ripple-mark {
    width: min(88vw, 430px);
    margin: 1rem auto 2.5rem;
    justify-self: center;
  }

  .cta-ripple-mark b {
    top: calc(50% + 42px);
    width: 178px;
    height: 62px;
    background-size: 100% auto;
  }

  .collection-footer-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .collection-footer-nav {
    justify-content: flex-start;
  }

  .collection-footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .nav-logo-text {
    width: 128px;
    height: 42px;
    flex-basis: 128px;
    background-size: 100% auto;
  }

  .double-hold-media,
  .double-hold-img {
    height: 360px;
    min-height: 360px;
  }

  .craft-marker-bezel {
    top: 47%;
    right: 4%;
  }

  .craft-marker-claw {
    left: 4%;
  }

  .cta-ripple-mark {
    width: 94vw;
    max-width: 360px;
  }

  .craft-title,
  .packaging-title,
  .cta-title {
    font-size: 2.75rem;
  }
}

/* The brand story reads as one editorial canvas, not a floating content card. */
.section-philosophy {
  padding: 8rem 0;
  background: var(--c-ivory-light);
}

.philosophy-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 660px;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-top: 1px solid rgba(201, 162, 39, 0.3);
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.philosophy-card {
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 52%;
  max-width: 650px;
  padding: 4rem 2.5rem 4rem 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.philosophy-card::before {
  display: none;
}

.philosophy-quote {
  max-width: 580px;
  margin: 0.7rem 0 1.9rem;
  color: #000000;
  font-size: 2.6rem;
  line-height: 1.18;
}

.philosophy-text {
  max-width: 590px;
  font-size: 0.94rem;
  line-height: 1.8;
}

.philosophy-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
  max-width: 560px;
  margin-top: 2rem;
}

.philosophy-pill {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0;
  border: 0;
  border-top: 1px solid rgba(159, 174, 142, 0.22);
  border-radius: 0;
  background: transparent;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.philosophy-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--c-gold);
}

.philosophy-visual-wrapper {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  height: 660px;
  border-radius: 0;
  box-shadow: none;
}

.philosophy-visual-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(253, 251, 247, 0.98) 0%, rgba(253, 251, 247, 0.91) 36%, rgba(253, 251, 247, 0.08) 66%, transparent 100%);
}

.philosophy-img {
  width: 100%;
  height: 660px;
  object-fit: cover;
  object-position: center;
}

/* The ripple is an interaction surface, presented as part of the page architecture. */
.section-ripple-canvas {
  padding: 8rem 0;
  background: #EFE8D9;
  text-align: left;
}

.section-ripple-canvas .section-header,
.section-collections .section-header,
.section-products .section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  grid-template-rows: auto auto;
  gap: 0.8rem 5rem;
  align-items: end;
  max-width: none;
  margin: 0 0 3.5rem;
  text-align: left;
}

.section-ripple-canvas .section-label,
.section-collections .section-label,
.section-products .section-label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.section-ripple-canvas .section-title,
.section-collections .section-title,
.section-products .section-title {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 4.7rem;
  line-height: 0.95;
}

.section-ripple-canvas .section-desc,
.section-collections .section-desc,
.section-products .section-desc {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  max-width: 520px;
  font-size: 0.96rem;
  line-height: 1.8;
}

.ripple-interactive-box {
  position: relative;
  height: 520px;
  margin-top: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(201, 162, 39, 0.32);
  border-bottom: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 0;
  box-shadow: inset 0 0 90px rgba(159, 174, 142, 0.1);
}

.diamond-model-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: grab;
  touch-action: pan-y;
}

.diamond-model-stage.is-dragging {
  cursor: grabbing;
}

.diamond-model-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.diamond-model-stage.is-ready canvas {
  opacity: 1;
}

.diamond-model-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: clamp(112px, 11vw, 168px);
  height: auto;
  filter: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
}

.diamond-model-fallback.media-loading,
.diamond-model-fallback.media-loading.is-loaded {
  filter: none;
  opacity: 1;
}

.diamond-model-stage.is-ready .diamond-model-fallback {
  opacity: 0;
}

.diamond-model-stage.is-ready .diamond-model-fallback.media-loading,
.diamond-model-stage.is-ready .diamond-model-fallback.media-loading.is-loaded {
  opacity: 0;
}

.diamond-origin-orbits {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 2;
  width: min(43vw, 430px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.diamond-origin-orbits i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 50%;
}

.diamond-origin-orbits i:nth-child(2) {
  inset: 12%;
  border-color: rgba(63, 75, 54, 0.16);
}

.diamond-origin-orbits i:nth-child(3) {
  inset: 25%;
  border-color: rgba(201, 162, 39, 0.46);
}

.diamond-origin-gem {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 4;
  width: clamp(118px, 11vw, 170px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.diamond-origin-gem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transform: translateZ(0);
}

.diamond-origin-gem img.media-loading,
.diamond-origin-gem img.media-loading.is-loaded {
  filter: none;
  opacity: 1;
}

.diamond-origin-gem span {
  position: absolute;
  bottom: -10%;
  left: 50%;
  width: 42%;
  height: 8%;
  border-radius: 50%;
  background: rgba(63, 75, 54, 0.18);
  filter: blur(8px);
  opacity: 0.5;
  transform: translateX(-50%);
}

.ripple-interactive-box:hover .diamond-origin-gem img {
  animation: origin-diamond-light 1.8s ease-in-out;
}

@keyframes origin-diamond-light {

  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.045);
  }
}

.diamond-model-stage.is-impacting+.diamond-stage-meta {
  color: #C9A227;
}

.diamond-stage-meta {
  position: absolute;
  top: 1.5rem;
  z-index: 5;
  display: grid;
  gap: 0.35rem;
  pointer-events: none;
  text-transform: uppercase;
}

.diamond-stage-meta-left {
  left: 1.5rem;
}

.diamond-stage-meta-right {
  right: 1.5rem;
  text-align: right;
}

.diamond-stage-meta span {
  color: #C9A227;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

.diamond-stage-meta strong {
  color: #000000;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
}

.ripple-canvas-hint {
  right: 1.5rem;
  bottom: 1.25rem;
  left: auto;
  padding: 0.55rem 0 0;
  border: 0;
  border-top: 1px solid rgba(63, 75, 54, 0.34);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #000000;
  font-size: 0.65rem;
  transform: none;
}

/* Collection chapters and pieces use a precise catalog grid. */
.section-collections {
  padding: 8rem 0;
  background: var(--c-ivory);
}

.collections-grid {
  grid-template-columns: 1.08fr 1fr 0.92fr;
  gap: 1px;
  padding: 1px;
  background: rgba(201, 162, 39, 0.24);
}

.collection-card {
  border: 0;
  border-radius: 0;
  background: var(--c-ivory-light);
  box-shadow: none;
  color: #000000;
}

.collection-card:hover {
  border-color: transparent;
  background: #FFFFFF;
  box-shadow: none;
  transform: none;
}

.collection-card:focus-visible,
.product-card:focus-visible {
  z-index: 3;
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

.collection-img-wrapper {
  height: 440px;
}

.collection-card:nth-child(2) .collection-img {
  object-position: 58% center;
}

.collection-badge {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(63, 75, 54, 0.12);
  border-radius: 0;
  background: rgba(253, 251, 247, 0.9);
}

.collection-info {
  min-height: 286px;
  padding: 2rem 1.75rem 2.2rem;
}

.collection-name {
  font-size: 2.15rem;
}

.collection-cta {
  padding-top: 1rem;
  border-top: 1px solid rgba(159, 174, 142, 0.16);
}

.section-products {
  padding: 8rem 0;
  background: var(--c-ivory-light);
}

.product-grid {
  gap: 1px;
  padding: 1px;
  background: rgba(201, 162, 39, 0.22);
}

.product-card {
  border: 0;
  border-radius: 0;
  background: var(--c-ivory);
  box-shadow: none;
  color: #000000;
}

.product-card:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.product-img-box {
  height: 320px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.12);
}

.product-content {
  min-height: 190px;
  padding: 1.65rem 1.25rem 1.75rem;
}

.product-quick-view {
  border: 1px solid rgba(63, 75, 54, 0.12);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1024px) {
  .philosophy-card {
    width: 62%;
  }

  .section-ripple-canvas .section-header,
  .section-collections .section-header,
  .section-products .section-header {
    gap: 0.8rem 3rem;
  }

  .section-ripple-canvas .section-title,
  .section-collections .section-title,
  .section-products .section-title {
    font-size: 3.8rem;
  }

  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-card:last-child {
    grid-column: 1 / -1;
  }

  .collection-card:last-child .collection-img-wrapper {
    height: 380px;
  }
}

@media (max-width: 768px) {

  .section-philosophy,
  .section-ripple-canvas,
  .section-collections,
  .section-products {
    padding: 5rem 0;
  }

  .philosophy-grid {
    grid-template-rows: auto auto;
  }

  .philosophy-card {
    grid-row: 1;
    width: 100%;
    max-width: none;
    padding: 2.5rem 0;
  }

  .philosophy-quote {
    font-size: 2.1rem;
  }

  .philosophy-visual-wrapper {
    grid-row: 2;
    height: 78vw;
    min-height: 320px;
    max-height: 520px;
  }

  .philosophy-visual-wrapper::after {
    display: none;
  }

  .philosophy-img {
    height: 100%;
    object-position: 62% center;
  }

  .section-ripple-canvas .section-header,
  .section-collections .section-header,
  .section-products .section-header {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.75rem;
    margin-bottom: 2.25rem;
  }

  .section-ripple-canvas .section-label,
  .section-collections .section-label,
  .section-products .section-label,
  .section-ripple-canvas .section-title,
  .section-collections .section-title,
  .section-products .section-title,
  .section-ripple-canvas .section-desc,
  .section-collections .section-desc,
  .section-products .section-desc {
    grid-column: 1;
    grid-row: auto;
  }

  .section-ripple-canvas .section-title,
  .section-collections .section-title,
  .section-products .section-title {
    font-size: 3.1rem;
  }

  .section-ripple-canvas .section-desc,
  .section-collections .section-desc,
  .section-products .section-desc {
    margin-top: 0.5rem;
  }

  .ripple-interactive-box {
    height: 360px;
  }

  .diamond-origin-orbits {
    width: min(72vw, 350px);
  }

  .collections-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .collection-card:last-child {
    grid-column: auto;
  }

  .collection-img-wrapper,
  .collection-card:last-child .collection-img-wrapper {
    height: 340px;
  }

  .collection-info {
    min-height: 0;
  }

  .product-img-box {
    height: 290px;
  }
}

@media (max-width: 480px) {
  .philosophy-pills {
    grid-template-columns: 1fr;
  }

  .philosophy-quote {
    font-size: 1.8rem;
  }

  .section-ripple-canvas .section-title,
  .section-collections .section-title,
  .section-products .section-title {
    font-size: 2.6rem;
  }

  .ripple-interactive-box {
    height: 300px;
  }

  .diamond-stage-meta {
    top: 0.85rem;
  }

  .diamond-stage-meta-left {
    left: 0.8rem;
  }

  .diamond-stage-meta-right {
    right: 0.8rem;
  }

  .diamond-stage-meta strong {
    display: none;
  }

  .diamond-origin-gem {
    width: 104px;
  }

  .ripple-canvas-hint {
    right: 0.8rem;
    bottom: 0.8rem;
  }

  .collection-img-wrapper,
  .collection-card:last-child .collection-img-wrapper {
    height: 290px;
  }

  .product-img-box {
    height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ripple-interactive-box:hover .diamond-origin-gem img {
    animation: none;
  }
}

/* ==========================================================================
   LEGACY WORDMARK, MEDIA LOADING & DIAMOND DROP
   ========================================================================== */

/* Return every brand position to the original typographic lockup. */
.nav-logo-text {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
}

.nav-logo-text>* {
  display: block;
}

.footer-brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  height: auto;
  margin-bottom: 1.25rem;
  overflow: visible;
  background: none;
}

.footer-brand-lockup span,
.brand-lockup-tile>span {
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

.footer-brand-lockup small,
.brand-lockup-tile>small {
  margin-top: 0.42rem;
  color: #C9A227;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-lockup-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 76px;
  aspect-ratio: auto;
  border: 4px solid #3F4B36;
  background: var(--c-ivory-light);
}

.brand-lockup-tile>span {
  color: #000000;
  font-size: 1.45rem;
}

.brand-lockup-tile>small {
  color: #C9A227;
  font-size: 0.46rem;
}

.cta-ripple-mark b {
  top: calc(50% + 56px);
  width: auto;
  height: auto;
  overflow: visible;
  background: none;
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;
}

.cta-ripple-mark b::after {
  content: 'Jewelry House';
  display: block;
  margin-top: 0.5rem;
  color: #C9A227;
  font-family: var(--font-sans);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
}

.collection-footer-bottom {
  color: #FFFFFF;
}

#featuredProductsGrid {
  scroll-margin-top: calc(var(--nav-height) + 2rem);
}

#forms-of-identity {
  scroll-margin-top: var(--nav-height);
}

.btn:focus-visible,
.nav-brand:focus-visible,
.nav-link:focus-visible,
.collection-footer-nav a:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 4px;
}

/* JS adds these classes, so images remain visible when scripting is unavailable. */
img.media-loading {
  opacity: 0;
  filter: blur(7px);
  transition-property: opacity, filter, transform;
  transition-duration: 0.7s, 0.85s, 0.7s;
  transition-timing-function: ease, ease, var(--transition-smooth);
}

img.media-loading.is-loaded {
  opacity: 1;
  filter: blur(0);
}

canvas#rippleCanvas {
  z-index: 1;
}

.ripple-drop-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  perspective: 900px;
  pointer-events: none;
}

.ripple-diamond-drop {
  position: absolute;
  top: calc(50% - 108px);
  left: calc(50% - 54px);
  width: 108px;
  height: 108px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(63, 75, 54, 0.2));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.ripple-drop-shadow {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 46px);
  width: 92px;
  height: 16px;
  border-radius: 50%;
  background: rgba(63, 75, 54, 0.26);
  filter: blur(7px);
  will-change: transform, opacity;
}

.ripple-impact-flash {
  position: absolute;
  top: calc(50% - 37px);
  left: calc(50% - 37px);
  width: 74px;
  height: 74px;
  border: 1px solid rgba(201, 162, 39, 0.88);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(201, 162, 39, 0.22);
  opacity: 0;
  will-change: transform, opacity;
}

.ripple-water-depression {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 78px);
  width: 156px;
  height: 40px;
  border: 2px solid rgba(253, 251, 247, 0.92);
  border-radius: 50%;
  box-shadow:
    inset 0 -8px 18px rgba(159, 174, 142, 0.1),
    0 0 0 1px rgba(201, 162, 39, 0.38);
  opacity: 0;
  will-change: transform, opacity;
}

.ripple-water-splash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.ripple-water-splash i {
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 6px;
  height: 18px;
  border-radius: 60% 60% 48% 48%;
  background: rgba(253, 251, 247, 0.96);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.28);
  opacity: 0;
  will-change: transform, opacity;
}

.ripple-water-splash i:nth-child(2n) {
  width: 5px;
  height: 13px;
}

.ripple-diamond-drop.media-loading,
.ripple-diamond-drop.media-loading.is-loaded {
  filter: drop-shadow(0 18px 18px rgba(63, 75, 54, 0.2));
}

.ripple-diamond-static {
  opacity: 1;
  transform: translateY(-8px);
}

.ripple-canvas-hint {
  z-index: 4;
}

@media (max-width: 1024px) {
  .hero-title {
    font-size: 3.6rem;
  }

  .origin-main-title {
    font-size: 5rem;
  }

  .origin-tagline-quote {
    font-size: 2.7rem;
  }

  .brand-voice-title {
    font-size: 3.2rem;
  }

  .mark-title {
    font-size: 4.4rem;
  }

  .collection-index-title {
    font-size: 5.2rem;
  }

  .collection-story-heading h1 {
    font-size: 6.2rem;
  }

  .collection-intro {
    font-size: 3rem;
  }

  .collection-pieces-head h2 {
    font-size: 3.8rem;
  }
}

@media (max-width: 768px) {
  .brand-lockup-tile {
    right: 0.65rem;
    bottom: -0.5rem;
    width: 166px;
    height: 62px;
    border-width: 3px;
  }

  .brand-lockup-tile>span {
    font-size: 1.1rem;
  }

  .brand-lockup-tile>small {
    font-size: 0.4rem;
  }

  .ripple-diamond-drop {
    top: calc(50% - 82px);
    left: calc(50% - 41px);
    width: 82px;
    height: 82px;
  }

  .ripple-drop-shadow {
    left: calc(50% - 34px);
    width: 68px;
  }

  .cta-ripple-mark b {
    top: calc(50% + 46px);
    width: auto;
    height: auto;
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  img.media-loading {
    filter: none;
    transition: none;
  }
}

@media (max-width: 480px) {
  .craft-marker-claw {
    top: 15%;
    left: 32%;
  }

  .craft-marker-bezel {
    top: 48%;
    right: auto;
    left: 42%;
  }
}

/* ==========================================================================
   FULL-PAGE MOTION & INTERACTION POLISH
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 220;
  width: 100%;
  height: 2px;
  background: var(--c-gold-light);
  box-shadow: 0 1px 8px rgba(201, 162, 39, 0.22);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.section-label {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 0.8rem;
}

.section-label::after {
  content: '';
  width: 28px;
  height: 1px;
  flex: 0 0 28px;
  background: currentColor;
  opacity: 0.45;
}

.collection-card::after,
.product-card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 2px;
  background: var(--c-gold);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--transition-smooth);
}

.collection-card:hover::after,
.collection-card:focus-visible::after,
.product-card:hover::after,
.product-card:focus-visible::after {
  transform: scaleX(1);
}

@media (max-width: 480px) {
  .section-label {
    gap: 0.55rem;
  }

  .section-label::after {
    width: 20px;
    flex-basis: 20px;
  }
}

/* The confirmed final logo artwork is the only footer brand lockup. */
.footer .footer-brand-lockup {
  display: block;
  width: 190px;
  height: 68px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.footer .footer-brand-lockup img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  object-fit: cover;
  object-position: center;
  transform: none;
}

/* Persistent sage navigation; the playing video hero temporarily overrides it. */
.navbar,
.navbar.scrolled {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  isolation: isolate;
  transform: translateZ(0);
  background: rgba(159, 174, 142, .96);
  border-bottom: 1px solid rgba(245, 241, 232, .22);
  box-shadow: 0 4px 22px rgba(63, 75, 54, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.navbar .nav-link,
.navbar.scrolled .nav-link,
.navbar .nav-btn,
.navbar.scrolled .nav-btn {
  color: #FFFFFF;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active {
  color: #FFFFFF;
}

.navbar .nav-link::after,
.navbar.scrolled .nav-link::after {
  background-color: var(--c-ivory);
}

@media (max-width: 768px) {

  .home-brand-story .nav-links,
  .nav-links {
    background: rgba(159, 174, 142, .98);
  }

  .home-brand-story .nav-link,
  .nav-links .nav-link {
    color: #FFFFFF;
  }
}

@media (max-width: 480px) {
  .footer .footer-brand-lockup {
    width: 170px;
    height: 62px;
  }

  .hero-origin-drop {
    top: 24%;
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   THE CIRCLE OF ORIGIN  COLLECTIONS LANDING PAGE
   Scoped so individual sub-collection pages remain unchanged.
   ========================================================================== */
.circle-origin-page {
  width: 100%;
  overflow-x: clip;
  background: var(--c-ivory);
}

.circle-origin-page main,
.circle-origin-page section {
  min-width: 0;
}

.circle-origin-page .container {
  min-width: 0;
}

.circle-origin-page img,
.circle-origin-page video {
  max-width: 100%;
}

.circle-section {
  position: relative;
  overflow: hidden;
  padding: clamp(5.5rem, 8vw, 8rem) 0;
}

.circle-kicker,
.circle-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: #C9A227;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.circle-kicker::before,
.circle-eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.circle-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(3rem, 4.5vw, 4.5rem);
}

.circle-section-head h2 {
  /* margin-top: 1.1rem; */
  color: #000000;
  font-size: clamp(4rem, 7vw, 8rem);
  line-height: .8;
  letter-spacing: -.05em;
}

.circle-section-head h2 em {
  color: #000000;
  font-weight: 400;
}

.circle-section-head>p {
  max-width: 480px;
  padding-left: 1.6rem;
  border-left: 1px solid rgba(201, 162, 39, .75);
  color: #000000;
  font-size: .92rem;
  line-height: 1.9;
}

/* Video hero */
.circle-origin-page.circle-film-active.circle-film-in-view .navbar {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.circle-origin-page.circle-film-active.circle-film-in-view .navbar .nav-link,
.circle-origin-page.circle-film-active.circle-film-in-view .navbar .nav-btn {
  color: #FFFFFF;
}

.circle-origin-page.circle-film-active.circle-film-in-view .navbar .nav-link::after {
  background: var(--c-gold-light);
}

.circle-video-hero {
  position: relative;
  min-height: max(720px, 100svh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #9FAE8E;
  color: #FFFFFF;
}

.circle-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--c-ivory);
  opacity: 1;
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1);
}

.circle-video-hero:not(.film-ready) .circle-video {
  opacity: 0;
}

.circle-video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(35, 30, 23, .78) 0%, rgba(63, 75, 54, .38) 47%, rgba(63, 75, 54, .1) 75%), linear-gradient(180deg, rgba(63, 75, 54, .08) 48%, rgba(35, 30, 23, .78) 100%);
  transition: background 1s ease;
}

.circle-hero-content {
  position: relative;
  z-index: 3;
  padding-top: calc(var(--nav-height) + 1.5rem);
  padding-bottom: 1.5rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s .35s ease, transform 1s .35s cubic-bezier(.16, 1, .3, 1);
}

.circle-hero-content h1 {
  margin: 1.15rem 0 1.6rem;
  max-width: 920px;
  color: #FFFFFF;
  font-size: clamp(5rem, 11vw, 11.5rem);
  line-height: .72;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.circle-hero-content h1 em {
  color: #C9A227;
  font-weight: 400;
}

.circle-hero-content>p {
  max-width: 560px;
  color: #FFFFFF;
  font-size: clamp(.96rem, 1.25vw, 1.15rem);
  line-height: 1.8;
}

.circle-hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
}

.circle-primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 255px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(245, 241, 232, .55);
  color: #FFFFFF;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.circle-primary-link:hover {
  background: var(--c-ivory);
  color: #000000;
}

.circle-replay {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #FFFFFF;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.circle-replay>span {
  width: 8px;
  height: 8px;
  border: 1px solid var(--c-gold-light);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .1);
}

.circle-replay:hover {
  color: #C9A227;
}

.circle-hero-rings {
  position: absolute;
  z-index: 2;
  right: -0.4vw;
  top: calc(50% + (var(--nav-height) / 2));
  width: min(57vw, 840px);
  aspect-ratio: 1;
  transform: translateY(-50%) scale(1);
  opacity: .62;
  pointer-events: none;
  transition: opacity 1s .25s ease, transform 1.25s .2s cubic-bezier(.16, 1, .3, 1);
}


.circle-hero-rings i {
  position: absolute;
  border: 1px solid rgba(234, 208, 116, .38);
  border-radius: 50%;
  animation: circleHeroBreathe 6s ease-in-out infinite;
}

.circle-hero-rings i:nth-child(1) {
  inset: 3%;
}

.circle-hero-rings i:nth-child(2) {
  inset: 19%;
  animation-delay: .35s;
}

.circle-hero-rings i:nth-child(3) {
  inset: 35%;
  animation-delay: .7s;
}

.circle-hero-rings>span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(270px, 31vw, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 28px 40px rgba(20, 16, 12, .3));
}

.circle-hero-rings>span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: identityCoreFloat 6s ease-in-out infinite;
}

.circle-hero-meta {
  position: absolute;
  z-index: 3;
  right: 2rem;
  bottom: 1.5rem;
  left: 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 2.2rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(245, 241, 232, .25);
  color: #FFFFFF;
  font-size: .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity .8s .7s ease;
}

.circle-video-hero.film-playing .circle-hero-content,
.circle-video-hero.film-playing .circle-hero-meta {
  opacity: 0;
  pointer-events: none;
}

.circle-video-hero.film-playing .circle-hero-content {
  transform: translateY(28px);
}

.circle-video-hero.film-playing .circle-hero-rings {
  opacity: 0;
  transform: translateY(-50%) scale(.72);
}

.circle-video-hero.film-playing .circle-video-shade {
  background: radial-gradient(circle at center, transparent 48%, rgba(63, 75, 54, .18) 100%);
}

.circle-video-hero.film-complete .circle-video {
  opacity: 0;
  pointer-events: none;
}

.circle-video-hero.film-complete .circle-video-shade {
  background: radial-gradient(circle at 77% 50%, rgba(201, 162, 39, .13), transparent 32%), linear-gradient(110deg, #3F4B36 0%, #7C8D6B 54%, #9FAE8E 100%);
}

.circle-video-hero.film-complete .circle-hero-rings {
  opacity: .88;
}

@keyframes circleHeroBreathe {

  0%,
  100% {
    transform: scale(.985);
    opacity: .65;
  }

  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

@keyframes identityCoreFloat {

  0%,
  100% {
    transform: translateY(-4px) rotate(-.4deg);
  }

  50% {
    transform: translateY(7px) rotate(.4deg);
  }
}

/* Compact collection guide, inspired by the three-circle brand system. */
.circle-architecture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 162, 39, .08), transparent 28%),
    #f8f4eb;
}

.circle-architecture::before {
  position: absolute;
  z-index: -1;
  top: .06em;
  right: -.04em;
  color: rgba(201, 162, 39, .055);
  content: 'CREATION';
  font-family: var(--font-serif);
  font-size: clamp(8rem, 18vw, 21rem);
  line-height: .82;
  pointer-events: none;
}

.creation-system {
  position: relative;
  z-index: 1;
}

.creation-intro {
  max-width: 66rem;
  margin: 0 auto;
  text-align: center;
}

.creation-kicker {
  display: block;
  color: #000000;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.creation-intro h2 {
  margin: 1.05rem 0 0;
  color: #000000;
  font-size: clamp(3.2rem, 5.8vw, 6.8rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
}

.creation-intro h2 em {
  color: #000000;
  font-weight: 400;
}

.creation-intro>p {
  margin: 1.15rem 0 0;
  color: #000000;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.creation-swipe-hint {
  margin-top: 2rem;
}

.creation-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.75rem, 5vw, 5rem);
  padding: 1px;
  background: rgba(159, 174, 142, .2);
}

.creation-choice {
  position: relative;
  display: flex;
  scroll-margin-top: calc(var(--nav-height) + 1rem);
  min-width: 0;
  min-height: clamp(410px, 38vw, 520px);
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  flex-direction: column;
  background: rgba(252, 249, 242, .96);
  color: #000000;
  text-align: center;
  transition: background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

.creation-choice:hover,
.creation-choice:focus-visible {
  z-index: 1;
  background: #fffdf8;
  box-shadow: 0 26px 70px rgba(63, 75, 54, .13);
  outline: 0;
  transform: translateY(-7px);
}

.creation-rings {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  margin-bottom: 1.35rem;
  place-items: center;
}

.creation-rings i {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #b98b16;
  border-radius: 50%;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.creation-rings i:nth-child(2) {
  width: 52px;
  height: 52px;
}

.creation-rings i:nth-child(3) {
  width: 76px;
  height: 76px;
}

.creation-choice-vow .creation-rings i:nth-child(n+2),
.creation-choice-layers .creation-rings i:nth-child(3) {
  display: none;
}

.creation-choice:hover .creation-rings i:nth-child(2),
.creation-choice:focus-visible .creation-rings i:nth-child(2) {
  transform: scale(1.08);
}

.creation-choice:hover .creation-rings i:nth-child(3),
.creation-choice:focus-visible .creation-rings i:nth-child(3) {
  transform: scale(1.12);
}

.creation-circle-label {
  color: #000000;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.creation-choice h3 {
  margin: .8rem 0 0;
  font-size: clamp(2.5rem, 3.8vw, 4.2rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
}

.creation-choice>p {
  max-width: 22rem;
  margin: 1.35rem auto 0;
  color: #000000;
  font-size: clamp(.82rem, 1vw, .94rem);
  line-height: 1.6;
}

.creation-choice>em {
  margin-top: 1.25rem;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.creation-choice-action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.7rem;
  color: #000000;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.creation-choice-action b {
  color: #000000;
  font-size: .85rem;
  font-weight: 400;
}

.creation-intro,
.creation-choice {
  opacity: 1;
  transform: none;
}

.circle-motion-ready .creation-intro,
.circle-motion-ready .creation-choice {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
}

.circle-motion-ready .creation-intro.is-visible,
.circle-motion-ready .creation-choice.is-visible {
  opacity: 1;
  transform: none;
}

.circle-motion-ready .creation-choice.is-visible:hover,
.circle-motion-ready .creation-choice.is-visible:focus-visible {
  transform: translateY(-7px);
}

@media (max-width: 900px) {
  .creation-choices {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 390px);
    gap: .75rem;
    padding: 0 0 1rem;
    overflow-x: auto;
    background: transparent;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .creation-choices::-webkit-scrollbar {
    display: none;
  }

  .creation-choice {
    min-height: 450px;
    border: 1px solid rgba(159, 174, 142, .2);
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .circle-architecture::before {
    top: .3rem;
    font-size: 30vw;
  }

  .creation-intro h2 {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }
}

/* Exact original zigzag collection UI, restored with concise copy. */
.circle-origin-page .circle-architecture.circle-section {
  padding-top: clamp(2.75rem, 4vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 4vw, 3.75rem);
}

.architecture-zigzag-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.architecture-zigzag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.15rem, 2vw, 1.75rem);
  border: 1px solid rgba(159, 174, 142, .14);
  background: rgba(251, 249, 244, .88);
  box-shadow: 0 16px 40px -12px rgba(63, 75, 54, .08);
}

.zigzag-media {
  position: relative;
  display: flex;
  height: clamp(230px, 23vw, 310px);
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  background: #f0ebe1;
}

.zigzag-media img {
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  object-fit: contain;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}

.architecture-zigzag-row:hover .zigzag-media img {
  transform: scale(1.06);
}

.zigzag-media-badge {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  padding: .35rem .75rem;
  background: rgba(63, 75, 54, .86);
  color: #FFFFFF;
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.zigzag-content {
  display: flex;
  justify-content: center;
  padding: clamp(.5rem, 1.5vw, 1.5rem);
  flex-direction: column;
}

.zigzag-tagline {
  margin-bottom: .75rem;
  color: #000000;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.zigzag-content h3 {
  margin: 0 0 1rem;
  color: #000000;
  font-size: clamp(2.35rem, 3.25vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.zigzag-content p {
  max-width: 31rem;
  margin: 0;
  color: #000000;
  font-size: clamp(.82rem, .95vw, .92rem);
  line-height: 1.65;
}

.zigzag-identity {
  margin-top: 1.1rem;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 1.45vw, 1.3rem);
}

.zigzag-action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .8rem;
  margin-top: 1.25rem;
  padding: .72rem 1.15rem;
  border: 1px solid var(--c-taupe-dark);
  color: #000000;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

.zigzag-action:hover,
.zigzag-action:focus-visible {
  background: var(--c-taupe-dark);
  color: #FFFFFF;
  outline: 0;
  transform: translateY(-2px);
}

.architecture-zigzag-row {
  opacity: 1;
  transform: none;
}

.circle-motion-ready .architecture-zigzag-row {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
}

.circle-motion-ready .architecture-zigzag-row.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .architecture-zigzag-row {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: .8rem;
  }

  .zigzag-reverse .zigzag-content {
    order: 2;
  }

  .zigzag-reverse .zigzag-media {
    order: 1;
  }

  .zigzag-media {
    height: min(70vw, 300px);
  }

  .zigzag-content {
    padding: .75rem .5rem 1.1rem;
  }
}

/* Restored editorial rhythm: image/content, content/image, image/content. */
.creation-alternating {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.75rem, 5vw, 5rem);
}

.creation-row {
  display: grid;
  min-height: clamp(430px, 38vw, 540px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(159, 174, 142, .18);
  background: rgba(252, 249, 242, .96);
  box-shadow: 0 20px 58px rgba(63, 75, 54, .065);
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.creation-row-media {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  place-items: center;
  background: #e7dfd2;
}

.creation-row-media-vow {
  background: linear-gradient(145deg, #e7dece, #f5efe4);
}

.creation-row-media-layers {
  background: linear-gradient(145deg, #d8d0c2, #efe8dc);
}

.creation-row-media-everyday {
  background: linear-gradient(145deg, #e3dbcf, #f7f2e8);
}

.creation-row-media::after {
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, .52);
  content: '';
  pointer-events: none;
}

.creation-row-media img {
  width: 100%;
  height: 100%;
  padding: clamp(1.25rem, 3vw, 3rem);
  object-fit: contain;
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}

.creation-row-media:hover img,
.creation-row-media:focus-visible img {
  transform: scale(1.045);
}

.creation-row-media>span {
  position: absolute;
  z-index: 2;
  top: 1.7rem;
  left: 1.7rem;
  padding: .45rem .65rem;
  background: rgba(63, 75, 54, .86);
  color: #000000;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.creation-row-copy {
  display: flex;
  min-width: 0;
  justify-content: center;
  padding: clamp(2.25rem, 5vw, 5rem);
  flex-direction: column;
}

.creation-row-copy>span {
  color: #000000;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.creation-row-copy h3 {
  margin: .85rem 0 0;
  color: #000000;
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.045em;
}

.creation-row-copy>p {
  max-width: 29rem;
  margin: 1.35rem 0 0;
  color: #000000;
  font-size: clamp(.84rem, 1vw, .96rem);
  line-height: 1.65;
}

.creation-row-copy>em {
  margin-top: 1.15rem;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
}

.creation-row-copy>a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: .85rem 0;
  border-bottom: 1px solid #9a7311;
  color: #000000;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: gap .3s ease, color .3s ease;
}

.creation-row-copy>a:hover,
.creation-row-copy>a:focus-visible {
  gap: 2rem;
  color: #000000;
  outline: 0;
}

.creation-row-copy>a b {
  font-size: .88rem;
  font-weight: 400;
}

.creation-row {
  opacity: 1;
  transform: none;
}

.circle-motion-ready .creation-row {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
}

.circle-motion-ready .creation-row.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 800px) {
  .creation-row {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .creation-row-media {
    min-height: min(88vw, 460px);
    order: -1;
  }

  .creation-row-copy {
    min-height: 340px;
    padding: 2.5rem 1.25rem 2.75rem;
  }

  .creation-row-copy h3 {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }
}

.architecture-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: rgba(159, 174, 142, .2);
}

.architecture-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 2.2rem);
  background: rgba(251, 249, 244, .96);
}

.architecture-mark {
  background: var(--c-taupe-dark);
  color: #FFFFFF;
}

.architecture-card-top {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: #000000;
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.architecture-mark .architecture-card-top {
  color: #FFFFFF;
}

.architecture-symbol {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
}

.architecture-symbol i,
.architecture-symbol b {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.symbol-ripple i:first-child {
  inset: 0;
  border: 1px solid rgba(201, 162, 39, .55);
}

.symbol-ripple i:nth-child(2) {
  inset: 15px;
  border: 1px solid var(--c-gold);
}

.symbol-ripple b {
  inset: 29px;
  background: var(--c-gold);
}

.symbol-mark i {
  inset: 8px;
  border: 8px solid var(--c-gold);
}

.symbol-mark b {
  inset: 27px;
  border: 3px solid var(--c-ivory);
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, .7);
}

.symbol-hold i:first-child {
  inset: 4px;
  border: 1px solid var(--c-gold);
}

.symbol-hold i:nth-child(2) {
  inset: 17px;
  border: 5px double var(--c-gold);
}

.symbol-hold b {
  inset: 28px;
  background: radial-gradient(circle at 35% 30%, #fff, #d9dce2 45%, #fff 70%);
  transform: rotate(45deg);
  border-radius: 2px;
}

.architecture-media {
  height: clamp(280px, 29vw, 430px);
  margin: .5rem -1rem 2rem;
  overflow: hidden;
  background: rgba(245, 241, 232, .72);
}

.architecture-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}

.architecture-creation .architecture-media img {
  object-fit: contain;
  padding: 2rem;
}

.architecture-mark .architecture-media {
  background: #e7e1d5;
}

.architecture-mark .architecture-media img {
  object-fit: contain;
  padding: clamp(2.4rem, 5vw, 4.5rem);
  filter: drop-shadow(0 22px 24px rgba(70, 55, 31, .16));
}

.architecture-hold .architecture-media img {
  object-fit: contain;
  padding: 2rem;
}

.architecture-card .architecture-media {
  margin-top: 0;
}

.architecture-card .architecture-media img {
  object-fit: contain;
  padding: 0;
}

.architecture-card:hover .architecture-media img {
  transform: scale(1.035);
}

.architecture-copy {
  margin-top: auto;
}

.architecture-copy h3 {
  color: #000000;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: .95;
}

.architecture-mark .architecture-copy h3 {
  color: #FFFFFF;
}

.architecture-copy p {
  min-height: 4.7em;
  margin-top: 1rem;
  color: #000000;
  font-size: .82rem;
  line-height: 1.65;
}

.architecture-copy em {
  display: block;
  min-height: 5.2em;
  padding-top: 1rem;
  border-top: 1px solid rgba(159, 174, 142, .2);
  color: #C9A227;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.35;
}

.architecture-mark .architecture-copy em {
  border-top-color: rgba(245, 241, 232, .18);
  color: #C9A227;
}

.architecture-statement {
  position: relative;
  max-width: 1320px;
  margin: clamp(3.5rem, 6vw, 6rem) auto 0;
  padding: 0 clamp(1rem, 3vw, 3rem);
  color: #000000;
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: .98;
  text-align: center;
}

.architecture-statement span {
  color: #C9A227;
}

/* Three collection circles */
.circle-collections {
  padding-bottom: 0;
  background: #f8f5ee;
}

.life-current {
  position: relative;
  margin-top: 0;
}

.life-current::before {
  display: none;
}

.life-current-chapters {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}

.life-current-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #000000;
  text-align: center;
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.life-current-card:nth-child(2),
.life-current-card:nth-child(3) {
  margin-top: 0;
  background: transparent;
}

.life-current-card-media {
  position: relative;
  width: 88%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  overflow: visible;
  border-radius: 50%;
  background: #eee7da;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .7), 0 0 0 13px #f8f5ee, 0 0 0 14px rgba(201, 162, 39, .32), 0 26px 65px rgba(71, 62, 48, .14);
  transition: box-shadow .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

.life-current-card:nth-child(2) .life-current-card-media,
.life-current-card:nth-child(3) .life-current-card-media {
  width: 88%;
}

.life-current-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent 62%, rgba(63, 75, 54, .13));
  pointer-events: none;
}

.life-current-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.life-current-card-media>i {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 8%;
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(201, 162, 39, .72);
  border-radius: 50%;
  background: rgba(245, 241, 232, .82);
  color: #C9A227;
  font-size: .56rem;
  font-style: normal;
  letter-spacing: .08em;
  backdrop-filter: blur(10px);
}

.life-current-card-copy {
  display: flex;
  width: 100%;
  min-height: 315px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.4rem, 3.5vw, 3.5rem) clamp(.5rem, 1.5vw, 1.5rem) 0;
}

.life-current-card-copy>span {
  color: #C9A227;
  font-size: .56rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.life-current-card h3 {
  margin-top: 1rem;
  font-size: clamp(2.8rem, 4.2vw, 4.7rem);
  line-height: .86;
}

.life-current-card small {
  display: block;
  margin-top: .85rem;
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.life-current-card em {
  display: block;
  margin-top: 1.4rem;
  color: #C9A227;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
}

.life-current-card p {
  max-width: 31em;
  margin-top: .7rem;
  color: #000000;
  font-size: .76rem;
  line-height: 1.7;
}

.life-current-card b {
  display: inline-block;
  align-self: center;
  margin-top: auto;
  padding-top: 1.4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(159, 174, 142, .3);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

@media (hover: hover) and (min-width: 769px) {
  .life-current-card:hover {
    z-index: 2;
    transform: translateY(-10px);
  }

  .life-current-card:hover .life-current-card-media {
    box-shadow: 0 0 0 1px rgba(201, 162, 39, .95), 0 0 0 18px #f8f5ee, 0 0 0 19px rgba(201, 162, 39, .5), 0 34px 80px rgba(71, 62, 48, .2);
    transform: scale(1.015);
  }

  .life-current-card:hover .life-current-card-media img {
    transform: scale(1.04);
  }

  .life-current-card:hover b {
    border-color: #C9A227;
    color: #C9A227;
  }
}

.life-current-controls {
  display: none;
}

.circle-equality-banner {
  position: relative;
  width: calc(100% - clamp(2.4rem, 6vw, 6rem));
  max-width: 1360px;
  min-height: clamp(560px, 52vw, 760px);
  margin: clamp(3.5rem, 6vw, 6rem) auto 0;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, .2);
  background-color: var(--c-taupe-dark);
  background-image: linear-gradient(90deg, rgba(40, 34, 27, .97) 0%, rgba(40, 34, 27, .86) 26%, rgba(40, 34, 27, .42) 52%, rgba(40, 34, 27, .06) 78%), url('assets/identity-equality-banner-v1.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFFFFF;
  box-shadow: 0 30px 80px rgba(63, 75, 54, .12);
}

.circle-equality-image,
.circle-equality-shade {
  display: none;
}

.circle-equality-banner .container {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: clamp(4.5rem, 7vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 7.5rem);
}

.circle-equality-banner .container>span {
  color: #C9A227;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.circle-equality-banner p {
  max-width: 700px;
  margin-top: 1.5rem;
  color: #FFFFFF;
  font-size: clamp(3rem, 5.4vw, 6.5rem);
  line-height: .88;
}

.circle-equality-banner p em {
  color: #C9A227;
}

.circle-equality-banner .container>small {
  max-width: 560px;
  margin-top: 2rem;
  color: #FFFFFF;
  font-size: clamp(.72rem, 1vw, .9rem);
  line-height: 1.8;
}

/* Brand pillars */
.circle-pillars {
  overflow: visible;
  background: linear-gradient(145deg, var(--c-ivory), #fbf9f4 58%, #ece9df);
}

.circle-pillars .circle-section-head h2 {
  font-size: clamp(3.5rem, 5.5vw, 6.2rem);
}

.pillar-orbit-stage {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.pillar-orbit-core {
  position: sticky;
  top: calc(var(--nav-height) + 1.25rem);
  display: flex;
  min-height: min(620px, calc(100svh - var(--nav-height) - 2.5rem));
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 3.5vw, 3.5rem);
  overflow: hidden;
  background: var(--c-taupe-dark);
  color: #FFFFFF;
}

.pillar-orbit-core::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 68% 34%, rgba(201, 162, 39, .18), transparent 33%), linear-gradient(145deg, transparent, rgba(159, 174, 142, .1));
  pointer-events: none;
}

.pillar-orbit-core>span,
.pillar-orbit-core>p,
.pillar-orbit-core>small {
  position: relative;
  z-index: 2;
}

.pillar-orbit-core>span {
  color: #C9A227;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.pillar-orbit-core>p {
  margin-top: 1.1rem;
  color: #FFFFFF;
  font-size: clamp(3rem, 4.3vw, 5rem);
  line-height: .82;
}

.pillar-orbit-core>p em {
  color: #C9A227;
}

.pillar-orbit-core>small {
  margin-top: 2rem;
  color: #FFFFFF;
  font-size: .68rem;
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pillar-orbit-rings {
  position: absolute;
  top: 8%;
  right: -10%;
  width: 78%;
  aspect-ratio: 1;
}

.pillar-orbit-rings i {
  position: absolute;
  border: 1px solid rgba(229, 200, 91, .3);
  border-radius: 50%;
}

.pillar-orbit-rings i:nth-child(1) {
  inset: 0;
}

.pillar-orbit-rings i:nth-child(2) {
  inset: 17%;
}

.pillar-orbit-rings i:nth-child(3) {
  inset: 34%;
}

.pillar-orbit-rings b {
  position: absolute;
  inset: 47%;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 12px rgba(201, 162, 39, .1);
}

.pillar-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(159, 174, 142, .2);
}

.pillar-card {
  position: relative;
  min-height: 215px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-content: center;
  padding: clamp(1.75rem, 2.8vw, 2.8rem) clamp(6rem, 9vw, 9rem) clamp(1.75rem, 2.8vw, 2.8rem) 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(159, 174, 142, .2);
  background: transparent;
  transition: padding-left .5s cubic-bezier(.16, 1, .3, 1), background .45s ease;
}

.pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--c-gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.pillar-card>span {
  grid-row: 1 / span 2;
  color: #C9A227;
  font-size: .6rem;
  letter-spacing: .16em;
}

.pillar-card h3 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.6rem);
  line-height: .92;
}

.pillar-card p {
  max-width: 580px;
  margin-top: .9rem;
  color: #000000;
  font-size: .8rem;
  line-height: 1.7;
}

.pillar-card-dark,
.pillar-card-sage {
  background: transparent;
  color: #000000;
}

.pillar-card-dark h3 {
  color: #000000;
}

.pillar-card-dark p {
  color: #000000;
}

.pillar-card:hover {
  padding-left: 1.15rem;
  background: rgba(255, 255, 255, .58);
}

.pillar-card:hover::before {
  transform: scaleY(1);
}

.pillar-glyph {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2.5rem);
  top: 50%;
  width: 86px;
  height: 86px;
  opacity: .66;
  transform: translateY(-50%);
}

.pillar-glyph i,
.pillar-glyph b {
  position: absolute;
  display: block;
}

.glyph-equality i {
  border: 1px solid var(--c-gold);
  border-radius: 50%;
}

.glyph-equality i:first-child {
  inset: 0;
}

.glyph-equality i:nth-child(2) {
  inset: 22%;
}

.glyph-equality b {
  inset: 44%;
  border-radius: 50%;
  background: var(--c-gold);
}

.glyph-secret i {
  inset: 8px;
  border: 1px solid rgba(159, 174, 142, .42);
  border-radius: 50%;
}

.glyph-secret b {
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 5px solid var(--c-gold);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.glyph-stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.glyph-stages i {
  position: static;
  width: 18%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
}

.glyph-stages i:nth-child(2) {
  width: 30%;
  height: auto;
}

.glyph-stages i:nth-child(3) {
  width: 44%;
  height: auto;
}

.glyph-shield i {
  inset: 3px 14px;
  border: 1px solid var(--c-taupe-dark);
  border-radius: 50% 50% 55% 55%;
  clip-path: polygon(0 0, 100% 0, 88% 72%, 50% 100%, 12% 72%);
}

.glyph-shield b {
  left: 50%;
  top: 48%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-gold);
  transform: translate(-50%, -50%);
}

/* Scroll reveal */
.circle-motion-ready .circle-section-head,
.circle-motion-ready .architecture-card,
.circle-motion-ready .architecture-statement,
.circle-motion-ready .life-current-art,
.circle-motion-ready .life-current-card,
.circle-motion-ready .pillar-card {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.circle-motion-ready .architecture-card:nth-child(2),
.circle-motion-ready .life-current-card:nth-child(2),
.circle-motion-ready .pillar-card:nth-child(2) {
  transition-delay: .09s;
}

.circle-motion-ready .architecture-card:nth-child(3),
.circle-motion-ready .life-current-card:nth-child(3),
.circle-motion-ready .pillar-card:nth-child(3) {
  transition-delay: .18s;
}

.circle-motion-ready .pillar-card:nth-child(4) {
  transition-delay: .27s;
}

.circle-motion-ready .is-visible {
  opacity: 1;
  transform: translateY(0);
}

.circle-primary-link:focus-visible,
.circle-replay:focus-visible,
.life-current-card:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 4px;
}

.circle-video-hero ::selection,
.architecture-mark ::selection,
.circle-equality-banner ::selection,
.pillar-card-dark ::selection {
  background: rgba(245, 241, 232, .2);
  color: #FFFFFF;
}

/* Tablet */
@media (max-width: 1024px) {
  .circle-section-head {
    grid-template-columns: 1fr .55fr;
    gap: 3.5rem;
  }

  .architecture-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .architecture-hold {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 2rem;
  }

  .architecture-hold .architecture-card-top {
    grid-column: 1 / -1;
  }

  .architecture-hold .architecture-media {
    margin: 0;
    height: 420px;
  }

  .architecture-hold .architecture-copy {
    align-self: end;
  }

  .life-current-card-copy {
    min-height: 330px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  html {
    overflow-x: clip;
  }

  .circle-origin-page .container {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .circle-origin-page .mobile-menu-btn {
    display: flex !important;
    color: #FFFFFF;
  }

  .circle-origin-page.circle-film-active.circle-film-in-view .mobile-menu-btn {
    color: #FFFFFF;
  }

  .circle-section {
    padding: clamp(4.25rem, 14vw, 5rem) 0;
  }

  .circle-section-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .circle-section-head h2 {
    font-size: clamp(3.4rem, 15vw, 5.2rem);
  }

  .circle-section-head>p {
    padding-left: 1rem;
    font-size: .86rem;
    line-height: 1.75;
  }

  .circle-video-hero {
    min-height: max(620px, 100svh);
  }

  .circle-video {
    object-fit: cover;
    object-position: 50% 50%;
  }

  .circle-video-shade {
    background: linear-gradient(180deg, rgba(63, 75, 54, .18) 0%, rgba(35, 30, 23, .8) 82%);
  }

  .circle-hero-content {
    padding-top: calc(var(--nav-height) + 3.25rem);
    padding-bottom: 5.25rem;
  }

  .circle-hero-content h1 {
    max-width: 100%;
    margin: .85rem 0 1.2rem;
    font-size: clamp(3.65rem, 17vw, 5.4rem);
    line-height: .8;
    letter-spacing: -.045em;
  }

  .circle-hero-content>p {
    max-width: 84%;
    color: #FFFFFF;
    font-size: .9rem;
    line-height: 1.65;
  }

  .circle-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.8rem;
  }

  .circle-primary-link {
    width: 100%;
    min-width: 0;
  }

  .circle-hero-rings {
    right: -38vw;
    width: 98vw;
  }

  .circle-video-hero.film-complete .circle-hero-rings {
    opacity: .42;
  }

  .circle-hero-rings>span {
    width: clamp(185px, 49vw, 250px);
  }

  .circle-hero-meta {
    right: 1.15rem;
    left: 1.15rem;
    justify-content: space-between;
    gap: .5rem;
    font-size: .42rem;
  }

  .architecture-card-grid {
    grid-template-columns: 1fr;
  }

  .architecture-hold {
    grid-column: auto;
    display: flex;
  }

  .architecture-hold .architecture-card-top {
    grid-column: auto;
  }

  .architecture-hold .architecture-media {
    height: min(92vw, 430px);
    margin: .5rem -1rem 2rem;
  }

  .architecture-media {
    height: min(92vw, 430px);
  }

  .architecture-copy p,
  .architecture-copy em {
    min-height: 0;
  }

  .architecture-statement {
    margin-top: 3rem;
    padding: 0;
    font-size: clamp(2.4rem, 11vw, 4rem);
  }

  .architecture-statement-break {
    display: none;
  }

  .life-current {
    --life-card-max: 520px;
    --life-carousel-gutter: max(1.2rem, calc((100vw - var(--life-card-max)) / 2));
    display: block;
    margin-right: -1.2rem;
    margin-left: -1.2rem;
    padding: 0;
    background: transparent;
  }

  .life-current::before {
    display: none;
  }

  .life-current-chapters {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(var(--life-card-max), calc(100vw - 2.4rem));
    gap: .8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 var(--life-carousel-gutter) 1.2rem;
    border: 0;
    scroll-padding-inline: var(--life-carousel-gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .life-current-chapters::-webkit-scrollbar {
    display: none;
  }

  .life-current-card,
  .life-current-card:nth-child(2),
  .life-current-card:nth-child(3) {
    min-height: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(159, 174, 142, .16);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #fbf9f4;
    box-shadow: 0 20px 55px rgba(71, 62, 48, .12);
  }

  .life-current-card-media,
  .life-current-card:nth-child(2) .life-current-card-media,
  .life-current-card:nth-child(3) .life-current-card-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .life-current-card-media::after,
  .life-current-card-media img {
    border-radius: 0;
  }

  .life-current-card-media>i {
    top: 1rem;
    left: 1rem;
    width: 2.5rem;
  }

  .life-current-card-copy {
    min-height: 315px;
    align-items: flex-start;
    padding: 1.35rem;
    text-align: left;
  }

  .life-current-card h3 {
    max-width: 100%;
    font-size: clamp(2.7rem, 11.8vw, 3.7rem);
    white-space: normal;
    text-wrap: balance;
  }

  .life-current-card b {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 1.25rem;
  }

  .life-current-card:hover {
    color: #000000;
    transform: none;
  }

  .life-current-card:hover p {
    color: #000000;
  }

  .life-current-card:hover b {
    border-color: rgba(159, 174, 142, .3);
    color: #000000;
  }

  .life-current-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .7rem;
    padding: .35rem var(--life-carousel-gutter) 0;
  }

  .life-current-dots {
    display: flex;
    gap: .35rem;
  }

  .life-current-dots i {
    width: 1.6rem;
    height: 2px;
    background: rgba(159, 174, 142, .2);
    transition: width .35s ease, background .35s ease;
  }

  .life-current-dots i.is-active {
    width: 2.8rem;
    background: var(--c-gold);
  }

  .life-current-count {
    color: #000000;
    font-family: var(--font-serif);
    font-size: .9rem;
    white-space: nowrap;
  }

  .life-current-controls>div:last-child {
    display: flex;
    gap: .4rem;
  }

  .life-current-arrow {
    display: grid;
    width: 2.5rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(159, 174, 142, .28);
    border-radius: 50%;
    color: #000000;
    font-size: .9rem;
  }

  .life-current-arrow:disabled {
    cursor: default;
    opacity: .28;
  }

  .circle-motion-ready .life-current-art,
  .circle-motion-ready .life-current-card {
    opacity: 1;
    transform: none;
  }

  .circle-equality-banner {
    width: calc(100% - 2.4rem);
    min-height: 700px;
    margin-top: 3.5rem;
    background-image: linear-gradient(180deg, rgba(40, 34, 27, .96) 0%, rgba(40, 34, 27, .88) 43%, rgba(40, 34, 27, .3) 76%, rgba(40, 34, 27, .08) 100%), url('assets/identity-equality-banner-v1.png');
    background-position: 62% center;
  }

  .circle-equality-banner .container {
    min-height: 700px;
    justify-content: flex-start;
    padding-top: 5rem;
    padding-bottom: 13rem;
  }

  .circle-equality-banner p {
    font-size: clamp(2rem, 9vw, 3.2rem);
  }

  .pillar-orbit-stage {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .pillar-orbit-core {
    position: relative;
    top: auto;
    min-height: 420px;
    padding: 2rem;
  }

  .circle-pillars .circle-section-head h2 {
    font-size: clamp(3.1rem, 13vw, 4.4rem);
  }

  .pillar-orbit-core>p {
    font-size: clamp(3.2rem, 13vw, 4.5rem);
  }

  .pillar-orbit-rings {
    top: -4%;
    right: -5%;
    width: min(78vw, 360px);
  }

  .pillar-grid {
    width: 100%;
  }

  .pillar-card {
    min-height: 300px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 5.6rem 1.2rem 2rem 0;
  }

  .pillar-card h3 {
    font-size: clamp(2.1rem, 9vw, 3rem);
  }

  .pillar-card:hover {
    padding-left: 0;
  }

  .pillar-glyph {
    width: 72px;
    height: 72px;
    right: 1rem;
    top: 1rem;
    transform: none;
  }
}

@media (max-width: 480px) {
  .circle-video-hero {
    min-height: max(640px, 100svh);
  }

  .circle-hero-content h1 {
    font-size: clamp(3.35rem, 16.5vw, 4.25rem);
  }

  .circle-hero-meta span:nth-child(2) {
    display: none;
  }

  .architecture-card {
    padding: 1.15rem;
  }

  .architecture-card-top {
    min-height: 78px;
  }

  .architecture-symbol {
    width: 58px;
    height: 58px;
    transform: scale(.86);
    transform-origin: top right;
  }

  .life-current-card h3 {
    font-size: clamp(2.6rem, 11.5vw, 3.5rem);
  }

  .pillar-orbit-core {
    min-height: 380px;
  }

  .pillar-card {
    min-height: 285px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .circle-hero-rings i,
  .circle-hero-rings>span img,
  .circle-motion-ready .circle-section-head,
  .circle-motion-ready .architecture-card,
  .circle-motion-ready .architecture-statement,
  .circle-motion-ready .life-current-art,
  .circle-motion-ready .life-current-card,
  .circle-motion-ready .pillar-card {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   GLOBAL COMPACT TYPE & SPACING RHYTHM
   Keeps every page editorial without oversized headings or empty vertical gaps.
   ========================================================================== */
html {
  font-size: 15px;
}

.circle-section {
  padding-top: clamp(4.5rem, 6vw, 5.75rem);
  padding-bottom: clamp(4.5rem, 6vw, 5.75rem);
}

.section-header {
  margin-bottom: 3rem;
}

.section-title {
  font-size: clamp(2.35rem, 3.5vw, 2.9rem);
}

.circle-section-head {
  gap: clamp(2rem, 4.5vw, 4.5rem);
  margin-bottom: clamp(2.4rem, 3.5vw, 3.5rem);
}

.circle-section-head h2,
.circle-pillars .circle-section-head h2 {
  font-size: clamp(3.25rem, 5.5vw, 6.2rem);
}

.circle-hero-content h1 {
  font-size: clamp(4.25rem, 8.5vw, 8.8rem);
}

.architecture-statement {
  font-size: clamp(2.25rem, 3.5vw, 3.6rem);
}

.circle-equality-banner {
  margin-top: clamp(2.75rem, 4vw, 4rem);
}

.circle-equality-banner p {
  font-size: clamp(2.6rem, 4.5vw, 5.2rem);
}

.pillar-orbit-stage {
  gap: clamp(2rem, 3.5vw, 4rem);
}

.pillar-card h3 {
  font-size: clamp(2rem, 2.8vw, 3.35rem);
}

.collection-story-heading h1 {
  font-size: clamp(4.4rem, 7vw, 7rem);
}

@media (max-width: 768px) {
  html {
    font-size: 14.5px;
  }

  .circle-section {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .circle-section-head {
    gap: 1.2rem;
    margin-bottom: 2rem;
  }

  .circle-section-head h2,
  .circle-pillars .circle-section-head h2 {
    font-size: clamp(2.9rem, 12vw, 4rem);
  }

  .circle-hero-content h1 {
    font-size: clamp(3.2rem, 15vw, 4.7rem);
  }

  .architecture-statement {
    margin-top: 2.4rem;
    font-size: clamp(2.15rem, 9vw, 3.2rem);
  }

  .circle-equality-banner {
    min-height: 620px;
    margin-top: 2.75rem;
  }

  .circle-equality-banner .container {
    min-height: 620px;
    padding-top: 4rem;
    padding-bottom: 10rem;
  }

  .pillar-orbit-stage {
    gap: 2rem;
  }

  .pillar-orbit-core {
    min-height: 350px;
  }

  .pillar-card {
    min-height: 255px;
    padding-top: 5rem;
    padding-bottom: 1.6rem;
  }

  .pillar-card h3 {
    font-size: clamp(2rem, 8.2vw, 2.8rem);
  }

  .collection-story-heading h1 {
    font-size: clamp(3.5rem, 14vw, 5.5rem);
  }
}

/* Final wordmark placement: transparent everywhere; its surface supplies the background. */
.brand-wordmark,
.navbar .brand-wordmark,
.footer .brand-wordmark {
  width: max-content;
  height: auto;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.brand-wordmark .brand-wordmark-name {
  color: #FFFFFF;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.85rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
}

.brand-wordmark .brand-wordmark-tagline {
  margin-top: 0.42rem;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
}

.footer .footer-brand-lockup {
  display: inline-flex;
  width: auto;
  height: auto;
  overflow: visible;
}

@media (max-width: 480px) {

  .brand-wordmark,
  .navbar .brand-wordmark,
  .footer .brand-wordmark {
    width: max-content;
    height: auto;
    min-width: 0;
    padding: 0;
  }

  .brand-wordmark .brand-wordmark-name {
    font-size: 2.05rem;
  }

  .brand-wordmark .brand-wordmark-tagline {
    margin-top: 0.28rem;
    font-size: 0.48rem;
    letter-spacing: 0.1em;
  }

  .footer .footer-brand-lockup {
    width: auto;
    height: auto;
  }
}

/* Normal system cursor with a small rounded PURE ID follower beside it. */
@media (hover: hover) and (pointer: fine) {

  html,
  body {
    cursor: auto;
  }

  a,
  button,
  summary,
  label,
  select,
  [role='button'],
  [tabindex]:not([tabindex='-1']) {
    cursor: pointer;
  }

  input:not([type='button']):not([type='submit']):not([type='reset']),
  textarea,
  [contenteditable='true'] {
    cursor: text;
  }

}

/* Single-link house navigation: wordmark left, story link right. */
.navbar-container {
  gap: 1.25rem;
}

.navbar .nav-links {
  margin-left: auto;
}

@media (max-width: 768px) {
  .navbar .nav-links {
    position: static;
    top: auto;
    left: auto;
    display: flex;
    width: auto;
    flex-direction: row;
    margin-left: auto;
    padding: 0;
    gap: 0;
    transform: none;
    transition: none;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
    text-align: right;
  }

  .navbar .nav-links .nav-link {
    padding: 0.45rem 0;
    color: #FFFFFF;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .navbar-container {
    gap: 0.7rem;
  }

  .navbar .nav-links .nav-link {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }
}

/* PURE ID Mark homepage hero - entirely code based, with no video layer. */
.mark-hero {
  isolation: isolate;
  height: clamp(660px, 88svh, 820px);
  min-height: 660px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .98) 0, rgba(245, 241, 232, .82) 34%, transparent 62%),
    linear-gradient(135deg, #fbf8f1 0%, #f5f1e8 58%, #e9e3d8 100%);
}

.mark-hero-stage {
  position: absolute;
  top: calc(var(--nav-height) + .9rem);
  right: auto;
  bottom: 1.1rem;
  left: 50%;
  width: calc(100% - 4rem);
  max-width: 1296px;
  overflow: hidden;
  border: 1px solid rgba(159, 174, 142, .15);
  background:
    radial-gradient(circle at 72% 42%, rgba(255, 255, 255, .94), rgba(245, 241, 232, .72) 34%, transparent 58%),
    linear-gradient(120deg, rgba(255, 255, 255, .55), rgba(233, 227, 216, .28));
  box-shadow: 0 28px 70px rgba(159, 174, 142, .08);
  color: #000000;
  transform: translateX(-50%);
  --hero-x: 0px;
  --hero-y: 0px;
  --hero-grid-edge: 0px;
}

.mark-hero-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: linear-gradient(90deg, rgba(159, 174, 142, .055) 1px, transparent 1px);
  background-size: 12.5vw 100%;
  pointer-events: none;
}

.mark-hero-atmosphere {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(52vw, 610px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left 1.25s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
  pointer-events: none;
}

.mark-hero-atmosphere i {
  position: absolute;
  border: 1px solid rgba(201, 162, 39, .28);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.22);
  transition: opacity .9s ease, transform 1.5s cubic-bezier(.16, 1, .3, 1);
}

.mark-hero-atmosphere i:nth-child(1) {
  inset: 3%;
}

.mark-hero-atmosphere i:nth-child(2) {
  inset: 20%;
  transition-delay: .12s;
}

.mark-hero-atmosphere i:nth-child(3) {
  inset: 37%;
  transition-delay: .24s;
}

.mark-hero-atmosphere span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 5px rgba(255, 255, 255, .9), 0 0 34px 12px rgba(201, 162, 39, .22);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  transition: opacity .5s ease, transform .8s ease;
}

.mark-phase-light .mark-hero-atmosphere span {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mark-phase-pulse .mark-hero-atmosphere i {
  opacity: 1;
  transform: scale(1);
}

.mark-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translate3d(var(--hero-x), var(--hero-y), 0);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.mark-origin-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(185px, 19vw, 280px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.025);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .8s ease, filter .8s ease;
}

.mark-origin-light {
  position: absolute;
  inset: 48%;
  z-index: 4;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 24px 12px rgba(255, 255, 255, .95), 0 0 60px 25px rgba(201, 162, 39, .2);
  opacity: 0;
  transition: opacity .45s ease;
}

.mark-phase-light .mark-origin-core {
  transform: translate(-50%, -50%) scale(.045);
}

.mark-phase-light .mark-origin-light {
  opacity: 1;
}

.mark-phase-diamond .mark-origin-core {
  transform: translate(-50%, -50%) scale(1);
}

.mark-phase-diamond .mark-origin-light {
  opacity: 0;
}

.mark-origin-diamond {
  position: absolute;
  inset: 11%;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transform: scale(.35) rotate(-12deg);
  filter: saturate(.82) contrast(1.06) drop-shadow(0 20px 34px rgba(63, 75, 54, .18));
  transition: opacity .65s ease, transform 1.05s cubic-bezier(.16, 1, .3, 1);
}

.mark-phase-diamond .mark-origin-diamond {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.mark-origin-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 20px rgba(167, 125, 11, .18));
  transform: rotate(-90deg);
}

.mark-origin-bezel circle {
  stroke-dasharray: 591;
  stroke-dashoffset: 591;
  transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .2, 1);
}

.mark-phase-gold .mark-origin-bezel circle {
  stroke-dashoffset: 0;
}

.mark-origin-sheen {
  position: absolute;
  inset: -9%;
  border: 1px solid rgba(201, 162, 39, .26);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.7);
}

.mark-phase-pulse .mark-origin-sheen {
  animation: markHeroPulse 1.7s ease-out 1;
}

@keyframes markHeroPulse {
  0% {
    opacity: 0;
    transform: scale(.72);
  }

  28% {
    opacity: .75;
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.mark-placement-frame,
.mark-jewel-frame {
  position: absolute;
  right: var(--hero-grid-edge);
  top: 50%;
  width: min(35vw, 460px);
  aspect-ratio: 1;
  margin: 0;
  opacity: 0;
  transform: translateY(-50%) scale(.86);
  transition: opacity .85s ease, transform 1.25s cubic-bezier(.16, 1, .3, 1);
}

.mark-placement-frame {
  overflow: hidden;
  border-radius: 50%;
  background: #d8aa66;
  box-shadow: 0 30px 80px rgba(159, 174, 142, .18);
  clip-path: circle(0 at 50% 50%);
  transition: opacity .8s ease, transform 1.15s cubic-bezier(.16, 1, .3, 1), clip-path 1.2s cubic-bezier(.16, 1, .3, 1);
}

.mark-placement-frame::after {
  content: '';
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(245, 241, 232, .58);
  border-radius: 50%;
}

.mark-placement-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}

.mark-phase-placement .mark-origin-core {
  opacity: 0;
  filter: blur(7px);
  transform: translate(30vw, -50%) scale(.045);
}

.mark-phase-placement .mark-placement-frame {
  opacity: 1;
  clip-path: circle(51% at 50% 50%);
  transform: translateY(-50%) scale(1);
}

.mark-jewel-frame {
  display: grid;
  place-items: center;
}

.mark-jewel-frame img {
  position: relative;
  z-index: 2;
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 28px 32px rgba(159, 174, 142, .2));
  transform: scale(.82) rotate(-4deg);
  transition: transform 1.3s cubic-bezier(.16, 1, .3, 1);
}

.mark-jewel-orbit {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(201, 162, 39, .45);
  border-radius: 50%;
}

.mark-jewel-orbit::before,
.mark-jewel-orbit::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(201, 162, 39, .22);
  border-radius: 50%;
}

.mark-jewel-orbit::before {
  inset: 12%;
}

.mark-jewel-orbit::after {
  inset: 28%;
}

.mark-phase-jewel .mark-placement-frame {
  opacity: 0;
  transform: translateY(-50%) scale(1.08);
}

.mark-phase-jewel .mark-jewel-frame {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.mark-phase-jewel .mark-jewel-frame img {
  transform: scale(1) rotate(0);
}

.mark-phase-jewel .mark-hero-atmosphere {
  left: calc(100% - var(--hero-grid-edge) - min(17.5vw, 230px));
  opacity: .52;
}

.mark-hero-copy {
  position: absolute;
  z-index: 4;
  left: var(--hero-grid-edge);
  top: 50%;
  width: min(40vw, 560px);
  opacity: 0;
  transform: translateY(-43%);
  transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.mark-phase-copy .mark-hero-copy {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}

.mark-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: #C9A227;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.mark-hero-kicker::before {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--c-gold);
}

.mark-hero-copy h1 {
  margin: 1.3rem 0 1.25rem;
  font-size: clamp(3rem, 4.3vw, 5rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.045em;
}

.mark-hero-copy h1 em {
  color: #C9A227;
  font-weight: 400;
}

.mark-hero-copy>p {
  max-width: 500px;
  color: #000000;
  font-size: .88rem;
  line-height: 1.68;
}

.mark-hero-actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2rem;
}

.mark-hero-replay {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border: 0;
  color: #000000;
  background: transparent;
  font: inherit;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mark-hero-replay span {
  width: 9px;
  height: 9px;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .09);
}

.mark-hero-replay:hover {
  color: #C9A227;
}

.mark-hero-progress {
  position: absolute;
  z-index: 5;
  right: var(--hero-grid-edge);
  bottom: 1.15rem;
  left: var(--hero-grid-edge);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #000000;
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .8s ease;
}

.mark-phase-copy .mark-hero-progress {
  opacity: 1;
}

.mark-hero-progress span {
  display: flex;
  gap: .45rem;
  white-space: nowrap;
}

.mark-hero-progress b {
  color: #C9A227;
  font-weight: 700;
}

.mark-hero-progress i {
  height: 1px;
  flex: 1;
  background: rgba(159, 174, 142, .18);
}

.mark-phase-complete .mark-hero-atmosphere i:nth-child(1) {
  animation: markOrbitBreathe 7s ease-in-out infinite;
}

.mark-phase-complete .mark-hero-atmosphere i:nth-child(2) {
  animation: markOrbitBreathe 7s 1s ease-in-out infinite reverse;
}

.mark-phase-complete .mark-hero-atmosphere i:nth-child(3) {
  animation: markOrbitBreathe 7s 2s ease-in-out infinite;
}

.mark-phase-complete .mark-jewel-orbit {
  animation: markOrbitTurn 24s linear infinite;
}

@keyframes markOrbitBreathe {

  0%,
  100% {
    opacity: .28;
    transform: scale(.985);
  }

  50% {
    opacity: .72;
    transform: scale(1.025);
  }
}

@keyframes markOrbitTurn {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .mark-hero {
    height: clamp(650px, 100svh, 780px);
    min-height: 650px;
  }

  .mark-hero-stage {
    top: calc(var(--nav-height) + .6rem);
    right: 0;
    bottom: .65rem;
    left: 0;
    width: 100%;
    max-width: none;
    border-right: 0;
    border-left: 0;
    transform: none;
  }

  .mark-hero-stage::before {
    background-size: 25vw 100%;
  }

  .mark-hero-atmosphere {
    left: 50%;
    top: 32%;
    width: min(102vw, 560px);
  }

  .mark-origin-core {
    left: 50%;
    top: 32%;
    width: clamp(170px, 44vw, 245px);
  }

  .mark-placement-frame,
  .mark-jewel-frame {
    right: 50%;
    top: 31%;
    width: min(66vw, 330px);
    transform: translate(50%, -50%) scale(.86);
  }

  .mark-phase-placement .mark-origin-core {
    transform: translate(-50%, 5vh) scale(.045);
  }

  .mark-phase-placement .mark-placement-frame,
  .mark-phase-jewel .mark-jewel-frame {
    transform: translate(50%, -50%) scale(1);
  }

  .mark-phase-jewel .mark-placement-frame {
    transform: translate(50%, -50%) scale(1.08);
  }

  .mark-phase-jewel .mark-hero-atmosphere {
    left: 50%;
    opacity: .38;
  }

  .mark-hero-copy {
    left: 2rem;
    right: 2rem;
    top: auto;
    bottom: 4.4rem;
    width: auto;
    text-align: center;
    transform: translateY(26px);
  }

  .mark-phase-copy .mark-hero-copy {
    transform: translateY(0);
  }

  .mark-hero-kicker {
    justify-content: center;
  }

  .mark-hero-copy h1 {
    margin: .8rem auto .85rem;
    font-size: clamp(2.8rem, 10.5vw, 4.25rem);
    line-height: .9;
  }

  .mark-hero-copy>p {
    max-width: 540px;
    margin: 0 auto;
    font-size: .86rem;
    line-height: 1.6;
  }

  .mark-hero-actions {
    justify-content: center;
    margin-top: 1.25rem;
  }

  .mark-hero-actions .story-button {
    min-height: 46px;
    padding: .7rem 1.05rem;
    font-size: .62rem;
  }

  .mark-hero-progress {
    right: 2rem;
    bottom: 1rem;
    left: 2rem;
    gap: .55rem;
    font-size: .46rem;
  }

  .mark-hero-progress span {
    gap: .25rem;
  }
}

@media (max-width: 520px) {
  .mark-hero {
    height: clamp(640px, 100svh, 740px);
    min-height: 640px;
  }

  .mark-hero-stage {
    top: calc(var(--nav-height) + .45rem);
    right: 0;
    bottom: .45rem;
    left: 0;
  }

  .mark-hero-atmosphere {
    top: 29%;
    width: 108vw;
  }

  .mark-origin-core {
    top: 29%;
    width: min(52vw, 205px);
  }

  .mark-placement-frame,
  .mark-jewel-frame {
    top: 28%;
    width: min(70vw, 280px);
  }

  .mark-hero-copy {
    right: 2rem;
    bottom: 3.7rem;
    left: 2rem;
  }

  .mark-hero-kicker {
    font-size: .52rem;
    letter-spacing: .15em;
  }

  .mark-hero-kicker::before {
    width: 26px;
  }

  .mark-hero-copy h1 {
    max-width: 355px;
    font-size: clamp(2.45rem, 11.5vw, 3.4rem);
  }

  .mark-hero-copy>p {
    max-width: 345px;
    font-size: .78rem;
  }

  .mark-hero-actions {
    flex-direction: column;
    gap: .75rem;
  }

  .mark-hero-actions .story-button {
    width: auto;
    min-width: 220px;
  }

  .mark-hero-replay {
    font-size: .55rem;
  }

  .mark-hero-progress span {
    font-size: 0;
  }

  .mark-hero-progress span b {
    font-size: .48rem;
  }
}

@media (max-height: 720px) and (max-width: 900px) {

  .mark-placement-frame,
  .mark-jewel-frame {
    width: min(58vw, 285px);
  }

  .mark-origin-core {
    width: min(46vw, 220px);
  }

  .mark-hero-copy h1 {
    font-size: clamp(2.35rem, 9vw, 3.25rem);
  }

  .mark-hero-copy>p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mark-origin-core,
  .mark-origin-diamond,
  .mark-origin-bezel circle,
  .mark-hero-atmosphere,
  .mark-hero-atmosphere i,
  .mark-placement-frame,
  .mark-jewel-frame,
  .mark-jewel-frame img,
  .mark-hero-copy,
  .mark-hero-progress {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* PURE ID opening film and quiet mark reveal. */
.mark-film-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #F5F1E8;
}

.mark-film-layer,
.mark-hero-reveal {
  position: absolute;
  inset: 0;
}

.mark-film-layer {
  z-index: 2;
  background: #F5F1E8;
  opacity: 1;
  visibility: visible;
  transition: opacity .95s cubic-bezier(.22, .61, .36, 1), visibility 0s 1s;
}

.mark-film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mark-hero-reveal {
  z-index: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 3rem;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .98) 0, rgba(245, 241, 232, .82) 29%, rgba(245, 241, 232, 1) 68%),
    #F5F1E8;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s .18s ease, transform 1.15s .18s cubic-bezier(.16, 1, .3, 1);
}

.mark-film-hero.is-revealed .mark-film-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mark-film-hero.is-revealed .mark-hero-reveal {
  z-index: 3;
  opacity: 1;
  transform: translateY(0);
}

.mark-hero-reveal-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mark-hero-emblem {
  position: relative;
  width: clamp(126px, 11vw, 172px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: clamp(1.35rem, 2.6vh, 2rem);
}

.mark-hero-emblem img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(91, 71, 30, .16));
}

.mark-hero-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: rgba(201, 162, 39, .24);
  filter: blur(22px);
  opacity: .7;
}

.mark-film-hero.is-revealed .mark-hero-emblem img {
  animation: markHeroFloat 5.8s ease-in-out infinite;
}

.mark-film-hero.is-revealed .mark-hero-glow {
  animation: markHeroGlow 3.8s ease-in-out infinite;
}

.mark-hero-name {
  color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1;
}

.mark-hero-reveal h1 {
  max-width: 820px;
  margin: .9rem auto 0;
  color: #000000;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(3rem, 5.4vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
}

.mark-hero-reveal h1 em {
  color: #000000;
  font-weight: 400;
}

.mark-hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin-top: clamp(2rem, 4vh, 3rem);
}

.mark-hero-cta-row a {
  min-width: 184px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.25rem;
  border: 1px solid #9FAE8E;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.mark-hero-primary {
  background: #9FAE8E;
  color: #000000;
}

.mark-hero-secondary {
  background: rgba(245, 241, 232, .36);
  color: #000000;
}

.mark-hero-primary:hover,
.mark-hero-primary:focus-visible {
  border-color: #C9A227;
  background: #C9A227;
  color: #FFFFFF;
}

.mark-hero-secondary:hover,
.mark-hero-secondary:focus-visible {
  background: #F5F1E8;
  border-color: #C9A227;
  color: #000000;
}

.mark-hero-ripples {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 43%;
  width: min(68vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mark-hero-ripples i {
  position: absolute;
  border: 1px solid rgba(201, 162, 39, .24);
  border-radius: 50%;
  opacity: 0;
}

.mark-hero-ripples i:nth-child(1) {
  inset: 33%;
}

.mark-hero-ripples i:nth-child(2) {
  inset: 19%;
}

.mark-hero-ripples i:nth-child(3) {
  inset: 4%;
}

.mark-film-hero.is-revealed .mark-hero-ripples i {
  animation: markHeroRipple 5.2s ease-out infinite;
}

.mark-film-hero.is-revealed .mark-hero-ripples i:nth-child(2) {
  animation-delay: .8s;
}

.mark-film-hero.is-revealed .mark-hero-ripples i:nth-child(3) {
  animation-delay: 1.6s;
}

body.mark-film-playing .navbar,
body.mark-film-playing .navbar.scrolled {
  background: linear-gradient(to bottom, rgba(37, 32, 25, .26), rgba(37, 32, 25, 0));
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Homepage header stays line-free over both the film and the revealed hero. */
.home-brand-story .navbar,
.home-brand-story .navbar.scrolled {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

@keyframes markHeroFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.012);
  }
}

@keyframes markHeroGlow {

  0%,
  100% {
    opacity: .42;
    transform: scale(.9);
  }

  50% {
    opacity: .82;
    transform: scale(1.14);
  }
}

@keyframes markHeroRipple {
  0% {
    opacity: 0;
    transform: scale(.82);
  }

  28% {
    opacity: .55;
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@media (max-width: 768px) {
  .mark-film-hero {
    height: 100svh;
    min-height: 620px;
  }

  .mark-film-layer {
    display: grid;
    place-items: center;
  }

  .mark-film-video {
    height: auto;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .mark-hero-reveal {
    padding: calc(var(--nav-height) + 1.5rem) 1.25rem 2rem;
  }

  .mark-hero-emblem {
    width: clamp(112px, 31vw, 142px);
  }

  .mark-hero-reveal h1 {
    max-width: 360px;
    font-size: clamp(2.65rem, 11.5vw, 4rem);
    line-height: .96;
  }

  .mark-hero-ripples {
    top: 40%;
    width: 118vw;
  }

  .mark-hero-cta-row {
    width: min(100%, 340px);
    flex-direction: column;
    gap: .7rem;
    margin-top: 2rem;
  }

  .mark-hero-cta-row a {
    width: 100%;
    min-width: 0;
  }
}

@media (max-height: 700px) {
  .mark-hero-emblem {
    width: 104px;
    margin-bottom: 1rem;
  }

  .mark-hero-reveal h1 {
    font-size: clamp(2.45rem, 8vh, 4.25rem);
  }

  .mark-hero-cta-row {
    margin-top: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark-film-layer {
    display: none;
  }

  .mark-hero-reveal {
    z-index: 3;
    opacity: 1;
    transform: none;
  }

  .mark-hero-emblem img,
  .mark-hero-glow,
  .mark-hero-ripples i {
    animation: none !important;
  }
}

/* Refined film ending: keep the last frame, wash to ivory, then reveal from above. */
.mark-film-layer {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #F5F1E8;
  transition: opacity 1.25s cubic-bezier(.22, .61, .36, 1), visibility 0s 1.3s;
}

.mark-film-video {
  width: min(100%, 1600px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  background: #F5F1E8;
  filter: contrast(1.035) saturate(1.015);
  backface-visibility: hidden;
  transform: translateZ(0);
}

.mark-hero-reveal {
  z-index: 3;
  transform: none;
  pointer-events: none;
  transition: opacity 1.25s cubic-bezier(.22, .61, .36, 1);
}

.mark-film-hero.is-film-ended .mark-film-video {
  animation: none;
}

.mark-film-hero.is-ivory-wash .mark-film-layer {
  opacity: 0;
}

.mark-film-hero.is-ivory-wash .mark-hero-reveal {
  opacity: 1;
}

.mark-film-hero.is-revealed .mark-film-layer {
  visibility: hidden;
}

.mark-film-hero.is-revealed .mark-hero-reveal {
  opacity: 1;
  pointer-events: auto;
}

.mark-hero-emblem {
  opacity: 0;
  transform: translateY(-24vh) scale(.84);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform 1.35s cubic-bezier(.16, 1, .3, 1);
}

.mark-hero-name,
.mark-hero-reveal h1,
.mark-hero-cta-row {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.mark-film-hero.is-revealed .mark-hero-emblem {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mark-film-hero.is-revealed .mark-hero-name {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .48s;
}

.mark-film-hero.is-revealed .mark-hero-reveal h1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .64s;
}

.mark-film-hero.is-revealed .mark-hero-cta-row {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .84s;
}

@media (max-width: 768px) {
  .mark-film-video {
    width: 100%;
    max-width: 1280px;
    filter: contrast(1.025) saturate(1.01);
  }

  .mark-hero-emblem {
    transform: translateY(-18vh) scale(.86);
  }
}

@media (prefers-reduced-motion: reduce) {

  .mark-hero-emblem,
  .mark-hero-name,
  .mark-hero-reveal h1,
  .mark-hero-cta-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Full-width 1080p film and visual-first PURE ID Mark hero. */
.mark-film-video {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.035) saturate(1.015);
}

.mark-hero-reveal {
  padding: calc(var(--nav-height) + 1.5rem) 0 1.4rem;
}

.mark-hero-reveal-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 2.75rem) clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  text-align: left;
}

.mark-hero-visual {
  --hero-hotspot-x: 50%;
  --hero-hotspot-y: 52%;
  position: relative;
  min-width: 0;
  height: clamp(380px, 54vh, 540px);
  display: grid;
  place-items: center;
}

.mark-hero-visual .mark-hero-ripples {
  left: 50%;
  top: 50%;
  width: min(78%, 520px);
}

.mark-hero-visual .mark-hero-ripples i {
  border-color: rgba(201, 162, 39, .21);
}

.mark-hero-visual .mark-hero-emblem {
  width: clamp(230px, 21vw, 330px);
  margin: 0;
}

.mark-hero-mark-image,
.mark-hero-product-image {
  transition: opacity .65s ease, transform .9s cubic-bezier(.16, 1, .3, 1), filter .65s ease;
}

.mark-hero-product-image {
  position: absolute !important;
  inset: -10% !important;
  z-index: 3 !important;
  width: 120% !important;
  height: 120% !important;
  object-fit: contain !important;
  opacity: 0;
  transform: scale(.82) rotate(-3deg);
  filter: drop-shadow(0 28px 38px rgba(76, 61, 34, .16));
}

.mark-hero-visual.has-product .mark-hero-mark-image {
  opacity: 0;
  transform: scale(.72);
}

.mark-hero-visual.has-product .mark-hero-product-image {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.mark-hero-placement {
  position: absolute;
  z-index: 5;
  left: var(--hero-hotspot-x);
  top: var(--hero-hotspot-y);
  width: 20px;
  height: 20px;
  border: 1px solid rgba(245, 241, 232, .95);
  border-radius: 50%;
  background: #C9A227;
  box-shadow: 0 0 0 8px rgba(201, 162, 39, .18), 0 0 26px rgba(201, 162, 39, .65);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  transition: opacity .35s .3s ease, transform .55s .3s cubic-bezier(.16, 1, .3, 1);
}

.mark-hero-placement i {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(201, 162, 39, .52);
  border-radius: 50%;
  animation: markPlacementRipple 1.9s ease-out infinite;
}

.mark-hero-visual.has-product .mark-hero-placement {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mark-hero-callout {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  opacity: 0;
  transition: opacity .55s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
}

.mark-hero-callout b,
.mark-hero-callout p {
  margin: 0;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.mark-hero-callout span {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .92rem;
  font-style: italic;
}

.mark-hero-callout::after {
  content: '';
  position: absolute;
  background: rgba(201, 162, 39, .72);
}

.mark-hero-callout-left {
  left: 0;
  top: 42%;
  transform: translateX(-12px);
}

.mark-hero-callout-left::after {
  left: calc(100% + .75rem);
  top: .45rem;
  width: clamp(42px, 5vw, 78px);
  height: 1px;
}

.mark-hero-callout-right {
  right: 0;
  top: 28%;
  text-align: right;
  transform: translateX(12px);
}

.mark-hero-callout-right::after {
  right: calc(100% + .75rem);
  top: .45rem;
  width: clamp(42px, 5vw, 78px);
  height: 1px;
}

.mark-hero-callout-bottom {
  left: 50%;
  bottom: 1.5%;
  text-align: center;
  transform: translate(-50%, 12px);
}

.mark-hero-callout-bottom::after {
  left: 50%;
  bottom: calc(100% + .65rem);
  width: 1px;
  height: 44px;
}

.mark-film-hero.is-revealed .mark-hero-callout {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: .56s;
}

.mark-film-hero.is-revealed .mark-hero-callout-bottom {
  transform: translate(-50%, 0);
}

.mark-hero-visual.has-product .mark-hero-callout {
  opacity: .16;
}

.mark-hero-copy-panel {
  position: relative;
  z-index: 4;
  align-self: center;
}

.mark-hero-copy-panel .mark-hero-name {
  display: inline-block;
}

.mark-hero-copy-panel h1 {
  max-width: 600px;
  margin: 1.1rem 0 1.2rem;
  font-size: clamp(3.25rem, 4.8vw, 5.4rem);
  line-height: .92;
}

.mark-hero-copy-panel>p {
  max-width: 470px;
  margin: 0;
  color: #000000;
  font-size: .86rem;
  line-height: 1.75;
}

.mark-hero-copy-panel .mark-hero-primary {
  width: max-content;
  min-width: 0;
  margin-top: 1.75rem;
  padding: .85rem 0;
  border-width: 0 0 1px;
  background: transparent;
  color: #000000;
}

.mark-hero-copy-panel .mark-hero-primary span {
  margin-left: 1.2rem;
  color: #C9A227;
}

.mark-hero-copy-panel>p,
.mark-hero-copy-panel .mark-hero-primary,
.mark-hero-product-nav {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.mark-film-hero.is-revealed .mark-hero-copy-panel>p {
  opacity: 1;
  transform: none;
  transition-delay: .78s;
}

.mark-film-hero.is-revealed .mark-hero-copy-panel .mark-hero-primary {
  opacity: 1;
  transform: none;
  transition-delay: .94s;
}

.mark-hero-product-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto repeat(4, minmax(110px, 1fr)) minmax(190px, 1.2fr);
  align-items: center;
  border-top: 1px solid rgba(159, 174, 142, .18);
}

.mark-film-hero.is-revealed .mark-hero-product-nav {
  opacity: 1;
  transform: none;
  transition-delay: 1.02s;
}

.mark-hero-product-nav>span {
  padding-right: 1.25rem;
  color: #000000;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.mark-hero-product-nav button {
  position: relative;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .75rem;
  overflow: hidden;
  border: 0;
  border-left: 1px solid rgba(159, 174, 142, .16);
  background: transparent;
  color: #000000;
}

.mark-hero-product-nav button::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201, 162, 39, .38);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.45);
  transition: opacity .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.mark-hero-product-nav button:hover::after,
.mark-hero-product-nav button:focus-visible::after,
.mark-hero-product-nav button[aria-pressed='true']::after {
  opacity: 1;
  transform: scale(1.7);
}

.mark-hero-product-nav button b {
  position: relative;
  z-index: 2;
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.mark-hero-product-nav small {
  padding-left: 1.25rem;
  color: #000000;
  font-size: .61rem;
  line-height: 1.45;
}

.mark-product-icon {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: inline-block;
  color: #C9A227;
}

.mark-product-ring {
  border: 1px solid currentColor;
  border-radius: 50%;
}

.mark-product-ring::before,
.mark-product-earring::before,
.mark-product-pendant::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  background: #F5F1E8;
  transform: translateX(-50%) rotate(45deg);
}

.mark-product-earring {
  width: 14px;
  height: 14px;
  margin: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.mark-product-pendant {
  border-top: 1px solid currentColor;
  transform: translateY(4px) rotate(12deg);
}

.mark-product-pendant::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.mark-product-bangle {
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: scaleX(1.18);
}

body.mark-film-playing,
body.mark-film-playing a,
body.mark-film-playing button {
  cursor: auto !important;
}

@keyframes markPlacementRipple {
  0% {
    opacity: .75;
    transform: scale(.65);
  }

  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

@media (max-width: 900px) {
  .mark-film-hero.is-revealed {
    height: max(100svh, 920px);
  }

  .mark-film-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mark-hero-reveal {
    align-items: start;
    padding: calc(var(--nav-height) + 1.25rem) 0 2rem;
    overflow-y: auto;
  }

  .mark-hero-reveal-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.35rem;
  }

  .mark-hero-visual {
    grid-column: 1;
    height: 350px;
  }

  .mark-hero-visual .mark-hero-emblem {
    width: clamp(190px, 52vw, 250px);
  }

  .mark-hero-callout-left {
    left: .2rem;
    top: 44%;
  }

  .mark-hero-callout-right {
    right: .2rem;
    top: 23%;
  }

  .mark-hero-callout-bottom {
    bottom: 0;
  }

  .mark-hero-callout-left::after,
  .mark-hero-callout-right::after {
    width: clamp(24px, 8vw, 52px);
  }

  .mark-hero-copy-panel {
    grid-column: 1;
    text-align: center;
  }

  .mark-hero-copy-panel h1 {
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2.75rem, 10vw, 4.25rem);
  }

  .mark-hero-copy-panel>p {
    margin-right: auto;
    margin-left: auto;
  }

  .mark-hero-copy-panel .mark-hero-primary {
    margin-right: auto;
    margin-left: auto;
  }

  .mark-hero-product-nav {
    grid-column: 1;
    grid-template-columns: repeat(4, 1fr);
  }

  .mark-hero-product-nav>span,
  .mark-hero-product-nav small {
    grid-column: 1 / -1;
    padding: .75rem 0;
    text-align: center;
  }

  .mark-hero-product-nav button {
    min-height: 62px;
    flex-direction: column;
    gap: .35rem;
  }
}

/* Product strip spans the viewport and locks flush to the hero bottom edge. */
.mark-hero-reveal {
  padding-bottom: 0;
}

.mark-hero-reveal-inner {
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-bottom: 0;
}

.mark-hero-product-gallery {
  width: 100vw;
  max-width: none;
  align-self: end;
  justify-self: center;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-top: 0;
  gap: 0;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
}

.mark-hero-product-gallery figure {
  height: clamp(100px, 12vh, 138px);
  border: 0;
}

@media (max-width: 900px) {
  .mark-hero-reveal-inner {
    height: 100%;
  }

  .mark-hero-product-gallery {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
}

@media (max-width: 560px) {
  .mark-film-hero.is-revealed {
    height: max(100svh, 950px);
  }

  .mark-hero-visual {
    height: 330px;
  }

  .mark-hero-callout b,
  .mark-hero-callout p {
    font-size: .46rem;
    letter-spacing: .1em;
  }

  .mark-hero-callout span {
    font-size: .76rem;
  }

  .mark-hero-callout-left::after,
  .mark-hero-callout-right::after {
    width: 25px;
  }

  .mark-hero-callout-bottom::after {
    height: 28px;
  }

  .mark-hero-copy-panel h1 {
    font-size: clamp(2.55rem, 11.5vw, 3.45rem);
  }

  .mark-hero-copy-panel>p {
    max-width: 330px;
    font-size: .76rem;
  }

  .mark-hero-product-nav button {
    padding: .6rem .2rem;
  }

  .mark-hero-product-nav button b {
    font-size: .52rem;
  }
}

/* Final gallery sizing: full inside the site container, never viewport-wide. */
.mark-hero-reveal {
  padding-bottom: 0;
}

.mark-hero-reveal-inner {
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-bottom: 0;
}

.mark-hero-product-gallery {
  width: 100%;
  max-width: 100%;
  align-self: end;
  justify-self: stretch;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.mark-hero-product-gallery figure {
  width: 100%;
  height: clamp(120px, 15vh, 170px);
  border: 0;
}

.mark-hero-product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .mark-hero-product-gallery {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* Absolute final product-fit rule: whole image remains visible. */
.mark-hero-product-gallery figure {
  height: clamp(190px, 18vw, 290px);
  background: #F5F1E8;
}

.mark-hero-product-gallery img,
.mark-hero-product-gallery figure:hover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
}

@media (max-width: 900px) {
  .mark-hero-product-gallery figure {
    height: 220px;
  }
}

/* Preserve every product image edge: no cover crop or zoom. */
.mark-hero-product-gallery figure {
  height: clamp(190px, 18vw, 290px);
  background: #F5F1E8;
}

.mark-hero-product-gallery img,
.mark-hero-product-gallery figure:hover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
}

@media (max-width: 900px) {
  .mark-hero-product-gallery figure {
    height: 220px;
  }
}

/* Generated campaign views expand from the Mark without losing the shared ivory field. */
.mark-hero-visual .mark-hero-emblem {
  transition:
    width 1s cubic-bezier(.16, 1, .3, 1),
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform 1.35s cubic-bezier(.16, 1, .3, 1);
}

.mark-hero-visual.has-product .mark-hero-emblem {
  width: clamp(390px, 34vw, 540px);
}

.mark-hero-visual.has-product .mark-hero-product-image {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  clip-path: circle(49% at 50% 50%);
}

.mark-hero-visual.has-product .mark-hero-placement {
  box-shadow: 0 0 0 7px rgba(245, 241, 232, .76), 0 0 0 10px rgba(201, 162, 39, .32), 0 0 32px rgba(201, 162, 39, .72);
}

@media (max-width: 900px) {
  .mark-hero-visual.has-product .mark-hero-emblem {
    width: clamp(285px, 76vw, 390px);
  }
}

/* Final hero uses the house Mark only; no product-image swap layer. */
.mark-hero-reveal-inner {
  grid-template-rows: 1fr;
}

.mark-hero-visual .mark-hero-emblem {
  width: clamp(260px, 23vw, 360px);
}

@media (max-width: 900px) {
  .mark-hero-visual .mark-hero-emblem {
    width: clamp(210px, 58vw, 280px);
  }
}

/* Four jewellery forms stay visible as a direct editorial image strip. */
.mark-hero-product-gallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding-top: .8rem;
  border-top: 1px solid rgba(159, 174, 142, .16);
  background: rgba(159, 174, 142, .14);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.mark-film-hero.is-revealed .mark-hero-product-gallery {
  opacity: 1;
  transform: none;
  transition-delay: 1s;
}

.mark-hero-product-gallery figure {
  position: relative;
  height: clamp(82px, 10vh, 112px);
  margin: 0;
  overflow: hidden;
  background: #F5F1E8;
}

.mark-hero-product-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.03);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
}

.mark-hero-product-gallery figure:hover img {
  transform: scale(1.12);
  filter: saturate(1.06) contrast(1.02);
}

.mark-hero-product-gallery figcaption {
  position: absolute;
  left: .7rem;
  bottom: .6rem;
  padding: .3rem .5rem;
  background: rgba(245, 241, 232, .86);
  color: #000000;
  font-family: 'Manrope', sans-serif;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
  .mark-film-hero.is-revealed {
    height: max(100svh, 950px);
  }

  .mark-hero-product-gallery {
    width: 100%;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mark-hero-product-gallery::-webkit-scrollbar {
    display: none;
  }

  .mark-hero-product-gallery figure {
    height: 105px;
    scroll-snap-align: start;
  }
}

/* Intro film is locked to the physical viewport, never to a content container. */
.mark-film-hero {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 !important;
}

.mark-film-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.mark-film-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0;
  outline: 0;
  box-shadow: none;
  object-fit: contain !important;
  object-position: 50% 50%;
  background: #f5f1e8;
  filter: none !important;
  transform: none !important;
  backface-visibility: visible !important;
}

@supports not (height: 100dvh) {

  .mark-film-hero,
  .mark-film-layer,
  .mark-film-video {
    height: 100vh !important;
    min-height: 100vh;
  }
}

@media (max-width: 900px) {

  .mark-film-hero:not(.is-revealed),
  .mark-film-hero:not(.is-revealed) .mark-film-layer,
  .mark-film-hero:not(.is-revealed) .mark-film-video {
    height: 100dvh !important;
    min-height: 100dvh;
  }

  .mark-film-hero:not(.is-revealed) .mark-film-video {
    object-fit: cover !important;
    object-position: 50% 50%;
  }
}

/* Minimal editorial typography: Instrument Serif with precise Manrope UI. */
.mark-hero-callout,
.mark-hero-callout b,
.mark-hero-callout p,
.mark-hero-copy-panel>p,
.mark-hero-copy-panel .mark-hero-primary,
.mark-hero-product-nav button {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
}

.mark-hero-callout {
  gap: 0;
}

.mark-hero-callout b,
.mark-hero-callout p {
  font-size: .54rem;
  line-height: 1.3;
  letter-spacing: .17em;
}

.mark-hero-copy-panel h1 {
  max-width: none;
  margin-top: 0;
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.3rem, 4.35vw, 5rem);
  line-height: .92;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.mark-hero-copy-panel h1 em {
  font-family: inherit;
}

.mark-hero-copy-panel>p {
  max-width: none;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .005em;
}

.mark-hero-copy-panel .mark-hero-primary {
  margin-top: 1.35rem;
  font-size: .59rem;
  letter-spacing: .13em;
}

.mark-hero-product-nav {
  width: min(100%, 660px);
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  justify-self: center;
  border-bottom: 1px solid rgba(159, 174, 142, .14);
}

.mark-hero-product-nav>span,
.mark-hero-product-nav small,
.mark-product-icon {
  display: none;
}

.mark-hero-product-nav button {
  min-height: 50px;
  padding: .65rem 1rem;
  border-left: 0;
}

.mark-hero-product-nav button:not(:first-of-type)::before {
  content: '\00b7';
  position: absolute;
  left: 0;
  top: 50%;
  color: #000000;
  font-size: .9rem;
  transform: translate(-50%, -52%);
}

.mark-hero-product-nav button b {
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .mark-film-hero.is-revealed {
    height: max(100svh, 850px);
  }

  .mark-hero-reveal-inner {
    gap: 1rem;
  }

  .mark-hero-copy-panel h1 {
    white-space: normal;
  }

  .mark-hero-product-nav {
    grid-template-columns: repeat(4, 1fr);
  }

  .mark-hero-product-nav button {
    min-height: 48px;
    flex-direction: row;
  }
}

@media (max-width: 560px) {
  .mark-film-hero.is-revealed {
    height: max(100svh, 835px);
  }

  .mark-hero-copy-panel h1 {
    font-size: clamp(2.65rem, 11vw, 3.4rem);
  }

  .mark-hero-product-nav button {
    padding: .55rem .15rem;
  }

  .mark-hero-product-nav button b {
    font-size: .48rem;
    letter-spacing: .07em;
  }
}

/* Authoritative gallery layout: contained, fully filled, and bottom-flush. */
.mark-hero-reveal {
  padding-bottom: 0;
}

.mark-hero-reveal-inner {
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-bottom: 0;
}

.mark-hero-product-gallery {
  width: 100%;
  max-width: 100%;
  align-self: end;
  justify-self: stretch;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.mark-hero-product-gallery figure {
  width: 100%;
  height: clamp(120px, 15vh, 170px);
  border: 0;
}

.mark-hero-product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .mark-hero-product-gallery {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* Whole product image must remain visible from every edge. */
.mark-hero-product-gallery figure {
  height: clamp(190px, 18vw, 290px);
  background: #F5F1E8;
}

.mark-hero-product-gallery img,
.mark-hero-product-gallery figure:hover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
}

@media (max-width: 900px) {
  .mark-hero-product-gallery figure {
    height: 220px;
  }
}

/* Meaning chapter: one continuous canvas, never a card grid. */
.mark-meaning-story {
  position: relative;
  height: 400svh;
  background:
    radial-gradient(circle at 76% 45%, rgba(201, 162, 39, .08), transparent 34%),
    var(--c-ivory);
}

.mark-meaning-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}

.mark-meaning-shell {
  height: 100%;
  padding-top: clamp(7rem, 12vh, 9rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vh, 3rem);
}

.mark-meaning-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid rgba(159, 174, 142, .18);
  padding-bottom: clamp(1rem, 2vh, 1.5rem);
}

.mark-meaning-intro h2 {
  margin: 0;
  color: #000000;
  font-family: 'Instrument Serif', var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.025em;
}

.mark-meaning-intro h2 em {
  color: #C9A227;
  font-weight: 400;
}

.mark-meaning-intro p {
  margin: 0;
  color: #000000;
  font-family: 'Manrope', var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mark-meaning-experience {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 35%) minmax(0, 65%);
  align-items: stretch;
}

.mark-meaning-nav {
  position: relative;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: clamp(1rem, 3vh, 2rem) clamp(2rem, 4vw, 4.5rem) clamp(1rem, 3vh, 2rem) 0;
  display: grid;
  align-content: center;
}

.mark-meaning-nav::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: rgba(159, 174, 142, .2);
}

.mark-meaning-nav li {
  position: relative;
  opacity: .36;
  transform: translateX(0);
  transition: opacity .6s var(--transition-smooth), transform .6s var(--transition-smooth);
}

.mark-meaning-nav li::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ivory);
  border: 1px solid var(--c-gold);
  transform: translate(-50%, -50%);
  transition: background .4s ease, box-shadow .4s ease;
}

.mark-meaning-nav li.is-active {
  opacity: 1;
  transform: translateX(clamp(.75rem, 1.5vw, 1.5rem));
}

.mark-meaning-nav li.is-active::before {
  background: var(--c-gold);
  box-shadow: 0 0 0 7px rgba(201, 162, 39, .11);
}

.mark-meaning-nav button {
  width: 100%;
  padding: clamp(.65rem, 1.4vh, 1rem) 0 clamp(.65rem, 1.4vh, 1rem) clamp(1.5rem, 2.5vw, 2.5rem);
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  grid-template-areas: 'index title' '. line';
  align-items: baseline;
  gap: .1rem .8rem;
  border: 0;
  background: transparent;
  color: #000000;
  text-align: left;
  cursor: pointer;
}

.mark-meaning-nav button span {
  grid-area: index;
  color: #C9A227;
  font: 600 .58rem/1 'Manrope', var(--font-sans);
  letter-spacing: .12em;
}

.mark-meaning-nav button strong {
  grid-area: title;
  font: 400 clamp(2rem, 3vw, 3.55rem)/.95 'Instrument Serif', var(--font-serif);
}

.mark-meaning-nav button em {
  grid-area: line;
  color: #000000;
  font: 400 clamp(.95rem, 1.3vw, 1.2rem)/1.25 'Instrument Serif', var(--font-serif);
}

.mark-meaning-visuals {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.mark-meaning-visuals::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--c-ivory) 0, rgba(245, 241, 232, .22) 12%, transparent 27%),
    linear-gradient(180deg, var(--c-ivory) 0, transparent 12%, transparent 88%, var(--c-ivory) 100%);
}

.mark-meaning-visuals figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.055);
  filter: saturate(.9);
  transition:
    opacity .85s var(--transition-smooth),
    transform 1.35s var(--transition-smooth),
    filter 1s ease;
}

.mark-meaning-visuals figure.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  filter: saturate(1);
}

.mark-meaning-visuals img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.mark-meaning-index {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: auto minmax(60px, 8vw) auto;
  align-items: center;
  gap: .75rem;
  color: #000000;
  font: 600 .55rem/1 'Manrope', var(--font-sans);
  letter-spacing: .12em;
}

.mark-meaning-index i {
  --meaning-progress: 25%;
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(159, 174, 142, .28);
}

.mark-meaning-index i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meaning-progress);
  background: var(--c-gold);
  transition: width .6s var(--transition-smooth);
}

.mark-meaning-index b {
  font-weight: 600;
  opacity: .5;
}

@media (max-width: 900px) {
  .mark-meaning-story {
    height: auto;
    padding: 0;
  }

  .mark-meaning-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .mark-meaning-shell {
    height: auto;
    padding-top: clamp(5.5rem, 16vw, 7rem);
    padding-bottom: clamp(4rem, 14vw, 6rem);
    gap: 1.5rem;
  }

  .mark-meaning-intro {
    display: block;
  }

  .mark-meaning-intro h2 {
    max-width: 9em;
    font-size: clamp(2.8rem, 12vw, 4.4rem);
  }

  .mark-meaning-intro p {
    margin-top: .9rem;
    white-space: normal;
  }

  .mark-meaning-experience {
    display: flex;
    flex-direction: column;
  }

  .mark-meaning-visuals {
    order: 1;
    height: clamp(390px, 115vw, 620px);
    min-height: 0;
  }

  .mark-meaning-visuals::after {
    background:
      linear-gradient(180deg, var(--c-ivory) 0, transparent 9%, transparent 87%, var(--c-ivory) 100%);
  }

  .mark-meaning-nav {
    order: 2;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    align-content: stretch;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0;
    border-bottom: 1px solid rgba(159, 174, 142, .18);
  }

  .mark-meaning-nav::-webkit-scrollbar {
    display: none;
  }

  .mark-meaning-nav::before,
  .mark-meaning-nav li::before {
    display: none;
  }

  .mark-meaning-nav li {
    scroll-snap-align: start;
    opacity: .48;
    border-top: 1px solid rgba(159, 174, 142, .18);
    transform: none;
  }

  .mark-meaning-nav li.is-active {
    opacity: 1;
    transform: none;
    border-top-color: var(--c-gold);
  }

  .mark-meaning-nav button {
    min-height: 112px;
    padding: 1rem .75rem;
    grid-template-columns: 1fr;
    grid-template-areas: 'index' 'title' 'line';
    gap: .28rem;
  }

  .mark-meaning-nav button strong {
    font-size: 1.75rem;
  }

  .mark-meaning-nav button em {
    font-size: .9rem;
  }

  .mark-meaning-index {
    bottom: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mark-meaning-nav li,
  .mark-meaning-visuals figure,
  .mark-meaning-index i::after {
    transition: none;
  }
}

/* Discovery: Hidden Origin product carousel. */
.hidden-origin-carousel {
  position: relative;
  height: 400svh;
  padding: 0;
  overflow: clip;
  background:
    radial-gradient(circle at 55% 48%, rgba(201, 162, 39, .09), transparent 33%),
    linear-gradient(180deg, #fbf8f1 0%, var(--c-ivory) 55%, #f1ebdf 100%);
  color: #000000;
}

.hidden-origin-shell {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 720px;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: clamp(6.5rem, 11vh, 8rem);
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
}

.hidden-origin-head {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, .45fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
  padding-bottom: clamp(1.75rem, 3vw, 3rem);
}

.hidden-origin-head h2 {
  margin: 0;
  font: 400 clamp(3.4rem, 6.4vw, 7.2rem)/.82 'Instrument Serif', var(--font-serif);
  letter-spacing: -.035em;
}

.hidden-origin-head h2 em {
  color: #C9A227;
  font-weight: 400;
}

.hidden-origin-head p {
  max-width: 28rem;
  margin: 0 0 .4rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(201, 162, 39, .7);
  color: #000000;
  font: 500 clamp(.72rem, .9vw, .9rem)/1.65 'Manrope', var(--font-sans);
  letter-spacing: .045em;
}

.hidden-origin-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 78%) minmax(170px, 22%);
  border-top: 1px solid rgba(159, 174, 142, .16);
  border-bottom: 1px solid rgba(159, 174, 142, .16);
}

.hidden-origin-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle at 50% 67%, transparent 0 85px, rgba(201, 162, 39, .035) 86px 87px, transparent 88px 142px);
}

.hidden-origin-media::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--c-ivory) 0, transparent 8%, transparent 92%, rgba(245, 241, 232, .8) 100%),
    linear-gradient(180deg, rgba(245, 241, 232, .5) 0, transparent 13%, transparent 88%, rgba(245, 241, 232, .55) 100%);
}

.hidden-origin-media figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateX(4%) scale(1.025);
  transition: opacity .85s var(--transition-smooth), transform 1.15s var(--transition-smooth);
}

.hidden-origin-media figure::after {
  content: '';
  position: absolute;
  inset: 8% 5%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.7);
  background: radial-gradient(circle, transparent 38%, rgba(201, 162, 39, .08) 39%, transparent 40%);
}

.hidden-origin-media figure.is-active {
  z-index: 2;
  opacity: 1;
  transform: translateX(0) scale(1);
}

.hidden-origin-media figure.is-active::after {
  animation: hiddenOriginRipple 1.15s var(--transition-smooth);
}

.hidden-origin-media figure>img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(.93) contrast(.99);
  transition: transform 1s var(--transition-smooth), filter .7s ease;
}

.hidden-origin-media figure.is-revealed>img {
  transform: scale(1.035);
  filter: saturate(1.02) contrast(1);
}

.hidden-origin-hotspot {
  position: absolute;
  z-index: 8;
  left: var(--hotspot-x);
  top: var(--hotspot-y);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

.hidden-origin-hotspot>i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--c-ivory-light);
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 1px rgba(63, 75, 54, .18), 0 0 24px rgba(201, 162, 39, .75);
  transform: translate(-50%, -50%);
}

.hidden-origin-hotspot>i::after {
  content: '';
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(201, 162, 39, .65);
  border-radius: inherit;
  animation: hiddenOriginPulse 2.2s ease-out infinite;
}

.hidden-origin-hotspot>span {
  position: absolute;
  right: -150px;
  bottom: 28px;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(201, 162, 39, .55);
  border-radius: 50%;
  background: rgba(253, 251, 247, .94);
  box-shadow: 0 18px 45px rgba(63, 75, 54, .14);
  opacity: 0;
  transform: translateY(10px) scale(.86);
  transition: opacity .4s ease, transform .55s var(--transition-smooth);
}

.hidden-origin-hotspot>span::before {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 24px;
  width: 76px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold));
  transform: rotate(-21deg);
  transform-origin: right;
}

.hidden-origin-hotspot>span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hidden-origin-hotspot:hover>span,
.hidden-origin-hotspot:focus-visible>span,
.hidden-origin-media figure.is-revealed .hidden-origin-hotspot>span {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hidden-origin-detail {
  position: relative;
  z-index: 8;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 4vw, 4.25rem) clamp(1.5rem, 3vw, 3.25rem);
  border-left: 1px solid rgba(159, 174, 142, .16);
  background: rgba(245, 241, 232, .7);
  backdrop-filter: blur(14px);
}

.hidden-origin-detail>span {
  margin-bottom: auto;
  color: #C9A227;
  font: 600 .62rem/1 'Manrope', var(--font-sans);
  letter-spacing: .16em;
}

.hidden-origin-detail h3 {
  margin: 0;
  font: 400 clamp(2.6rem, 4vw, 4.8rem)/.9 'Instrument Serif', var(--font-serif);
}

.hidden-origin-detail p {
  margin: 1rem 0 0;
  color: #000000;
  font: 500 .76rem/1.5 'Manrope', var(--font-sans);
  letter-spacing: .04em;
}

.hidden-origin-controls {
  position: relative;
  padding-top: 0;
}

.hidden-origin-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hidden-origin-tabs button {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem clamp(.6rem, 1.5vw, 1.35rem);
  border: 0;
  background: transparent;
  color: #000000;
  font: 600 .63rem/1 'Manrope', var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .35s ease, background .35s ease;
}

.hidden-origin-tabs button+button {
  border-left: 1px solid rgba(159, 174, 142, .12);
}

.hidden-origin-tabs button span {
  color: #C9A227;
  font-size: .52rem;
}

.hidden-origin-tabs button.is-active {
  color: #000000;
  background: rgba(255, 255, 255, .25);
}

.hidden-origin-scrub {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
}

.hidden-origin-scrub::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background:
    radial-gradient(circle, var(--c-gold) 0 2px, transparent 2.5px) left center / 33.333% 7px repeat-x,
    rgba(159, 174, 142, .22);
  transform: translateY(-50%);
}

.hidden-origin-scrub input {
  --hidden-origin-progress: 0%;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 30px;
  margin: 0;
  appearance: none;
  background: transparent;
}

.hidden-origin-scrub input::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold) 0 var(--hidden-origin-progress), transparent var(--hidden-origin-progress));
}

.hidden-origin-scrub input::-moz-range-track {
  height: 2px;
  background: rgba(159, 174, 142, .18);
}

.hidden-origin-scrub input::-moz-range-progress {
  height: 2px;
  background: var(--c-gold);
}

.hidden-origin-scrub input::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -8px;
  appearance: none;
  border: 4px solid var(--c-ivory-light);
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .55), 0 4px 14px rgba(63, 75, 54, .18);
}

.hidden-origin-scrub input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 4px solid var(--c-ivory-light);
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .55);
}

.hidden-origin-controls>p {
  margin: 1rem 0 0;
  color: #000000;
  font: 500 .58rem/1 'Manrope', var(--font-sans);
  letter-spacing: .18em;
  text-align: right;
  text-transform: uppercase;
}

.hidden-origin-cursor {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .18s ease, width .35s var(--transition-smooth), height .35s var(--transition-smooth), transform .35s var(--transition-smooth);
}

.hidden-origin-cursor img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {

  .hidden-origin-carousel.is-cursor-active,
  .hidden-origin-carousel.is-cursor-active * {
    cursor: none !important;
  }

  .hidden-origin-carousel.is-cursor-active .hidden-origin-cursor {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .hidden-origin-carousel.is-inspecting-mark .hidden-origin-cursor {
    width: 72px;
    height: 72px;
    box-shadow: none;
  }
}

@keyframes hiddenOriginPulse {
  0% {
    opacity: .9;
    transform: scale(.45);
  }

  75%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes hiddenOriginRipple {
  0% {
    opacity: 0;
    transform: scale(.7);
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@media (max-width: 900px) {
  .hidden-origin-carousel {
    height: auto;
    padding: clamp(4.5rem, 16vw, 7rem) 0;
  }

  .hidden-origin-shell {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hidden-origin-head {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .hidden-origin-head h2 {
    font-size: clamp(3.4rem, 15vw, 5.5rem);
  }

  .hidden-origin-head p {
    max-width: 22rem;
  }

  .hidden-origin-stage {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .hidden-origin-media {
    min-height: min(112vw, 620px);
  }

  .hidden-origin-media figure>img {
    object-fit: cover;
  }

  .hidden-origin-detail {
    min-height: 130px;
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    grid-template-areas:
      'number title'
      '. location';
    align-content: center;
    padding: 1.35rem 1rem;
    border-top: 1px solid rgba(159, 174, 142, .15);
    border-left: 0;
  }

  .hidden-origin-detail>span {
    grid-area: number;
    margin: .35rem 0 0;
  }

  .hidden-origin-detail h3 {
    grid-area: title;
    font-size: clamp(2.35rem, 11vw, 3.6rem);
  }

  .hidden-origin-detail p {
    grid-area: location;
    margin-top: .4rem;
  }

  .hidden-origin-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hidden-origin-tabs::-webkit-scrollbar {
    display: none;
  }

  .hidden-origin-tabs button {
    min-width: 130px;
  }

  .hidden-origin-hotspot>span {
    right: -84px;
    width: 105px;
    height: 105px;
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hidden-origin-media figure,
  .hidden-origin-media figure>img,
  .hidden-origin-hotspot>span,
  .hidden-origin-cursor {
    transition: none;
  }

  .hidden-origin-hotspot>i::after,
  .hidden-origin-media figure.is-active::after {
    animation: none;
  }
}

/* Discovery Lens: the wearer finds the hidden origin personally. */
.discovery-lens-section {
  position: relative;
  padding: clamp(6rem, 10vw, 10rem) 0 clamp(5rem, 8vw, 8rem);
  overflow: clip;
  background:
    radial-gradient(circle at 42% 40%, rgba(255, 255, 255, .85), transparent 30%),
    linear-gradient(145deg, #f8f5ee 0%, #ece7dc 52%, #f7f3eb 100%);
  color: #000000;
}

.discovery-lens-shell {
  position: relative;
}

.discovery-lens-head {
  position: absolute;
  z-index: 12;
  left: clamp(1.25rem, 4vw, 4rem);
  top: clamp(1.5rem, 4vw, 4rem);
  max-width: min(600px, 52%);
  pointer-events: none;
}

.discovery-lens-head h2 {
  margin: 0;
  font: 400 clamp(3rem, 5.5vw, 6.3rem)/.9 'Instrument Serif', var(--font-serif);
  letter-spacing: -.03em;
}

.discovery-lens-head h2 em {
  color: #C9A227;
  font-weight: 400;
}

.discovery-lens-head p {
  margin: 1rem 0 0;
  color: #000000;
  font: 400 clamp(1rem, 1.4vw, 1.3rem)/1 'Instrument Serif', var(--font-serif);
  font-style: italic;
}

.discovery-lens-canvas {
  --lens-x: 50%;
  --lens-y: 50%;
  --lens-size: clamp(105px, 11vw, 155px);
  position: relative;
  height: clamp(680px, 66vw, 880px);
  overflow: hidden;
  border-top: 1px solid rgba(159, 174, 142, .13);
  border-bottom: 1px solid rgba(159, 174, 142, .13);
  background:
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, .38) 49%, transparent 55%),
    radial-gradient(ellipse at 56% 54%, rgba(201, 162, 39, .07), transparent 45%);
}

.discovery-lens-canvas::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .36;
  background:
    repeating-radial-gradient(ellipse at 52% 56%, transparent 0 105px, rgba(159, 174, 142, .055) 106px 107px, transparent 108px 170px);
  pointer-events: none;
}

.discovery-lens-layer {
  position: absolute;
  inset: 0;
}

.discovery-scene-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.discovery-lens-normal {
  z-index: 1;
}

.discovery-lens-hidden {
  z-index: 4;
  pointer-events: none;
  clip-path: circle(0 at var(--lens-x) var(--lens-y));
  transition: clip-path .28s var(--transition-smooth);
}

.discovery-lens-section.is-lens-active .discovery-lens-hidden {
  clip-path: circle(var(--lens-size) at var(--lens-x) var(--lens-y));
}

.discovery-piece {
  position: absolute;
  margin: 0;
  cursor: inherit;
}

.discovery-piece img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at center, #000 47%, rgba(0, 0, 0, .92) 58%, transparent 83%);
  mask-image: radial-gradient(ellipse 72% 70% at center, #000 47%, rgba(0, 0, 0, .92) 58%, transparent 83%);
  filter: saturate(.92) contrast(.99);
  transition: filter .5s ease, transform .7s var(--transition-smooth);
}

.discovery-piece-ring {
  left: 4%;
  top: 8%;
  width: 36%;
  height: 43%;
  transform: rotate(-3deg);
}

.discovery-piece-earring {
  right: 4%;
  top: 7%;
  width: 31%;
  height: 36%;
  transform: rotate(4deg);
}

.discovery-piece-pendant {
  left: 22%;
  bottom: 1%;
  width: 31%;
  height: 42%;
  transform: rotate(2deg);
}

.discovery-piece-bangle {
  right: 10%;
  bottom: 1%;
  width: 37%;
  height: 47%;
  transform: rotate(-2deg);
}

.discovery-lens-hidden .discovery-piece img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.04);
}

.discovery-lens-hidden .discovery-piece.is-found img {
  animation: discoveryMarkCatch 1s ease;
}

.discovery-piece figcaption {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  padding: .55rem .7rem;
  border-left: 1px solid var(--c-gold);
  background: rgba(245, 241, 232, .8);
  color: #000000;
  font: 600 .52rem/1.25 'Manrope', var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(22px, 18px);
  backdrop-filter: blur(8px);
}

.discovery-piece figcaption span {
  display: block;
  margin-top: .25rem;
  color: #C9A227;
  font-size: .46rem;
}

.discovery-lens-ring {
  position: absolute;
  z-index: 9;
  left: var(--lens-x);
  top: var(--lens-y);
  width: calc(var(--lens-size) * 2);
  height: calc(var(--lens-size) * 2);
  border: 1px solid rgba(201, 162, 39, .48);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, .8),
    0 0 28px rgba(201, 162, 39, .1);
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity .25s ease, transform .45s var(--transition-smooth);
  backdrop-filter: blur(1px);
}

.discovery-lens-ring::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(201, 162, 39, .7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.discovery-lens-section.is-lens-active .discovery-lens-ring {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.discovery-lens-section.is-on-mark .discovery-lens-canvas {
  --lens-size: clamp(82px, 8.5vw, 118px);
}

.discovery-lens-section.is-on-mark .discovery-lens-ring {
  border-color: rgba(201, 162, 39, .72);
  box-shadow: 0 0 24px rgba(201, 162, 39, .16);
}

.discovery-targets {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}

.discovery-targets button {
  position: absolute;
  width: 20%;
  height: 28%;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: auto;
}

.discovery-targets button:nth-child(1) {
  left: 19%;
  top: 55%;
}

.discovery-targets button:nth-child(2) {
  left: 66%;
  top: 20%;
}

.discovery-targets button:nth-child(3) {
  left: 43%;
  top: 44%;
}

.discovery-targets button:nth-child(4) {
  left: 68%;
  top: 58%;
}

.discovery-lens-label {
  position: absolute;
  z-index: 10;
  left: var(--lens-x);
  top: var(--lens-y);
  min-width: 118px;
  padding: .65rem .8rem;
  border-left: 1px solid rgba(201, 162, 39, .75);
  background: rgba(245, 241, 232, .86);
  color: #000000;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(var(--lens-size) * .72), calc(var(--lens-size) * .55));
  backdrop-filter: blur(10px);
  transition: opacity .25s ease;
}

.discovery-lens-label b,
.discovery-lens-label span {
  display: block;
  font-family: 'Manrope', var(--font-sans);
  line-height: 1.2;
  text-transform: uppercase;
}

.discovery-lens-label b {
  font-size: .56rem;
  letter-spacing: .12em;
}

.discovery-lens-label span {
  margin-top: .25rem;
  color: #C9A227;
  font-size: .48rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.discovery-lens-section.is-on-mark .discovery-lens-label {
  opacity: 1;
}

.discovery-lens-instruction {
  position: absolute;
  z-index: 8;
  right: clamp(1.25rem, 3vw, 3rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
  color: #000000;
  font: 600 .57rem/1 'Manrope', var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity .3s ease;
}

.discovery-lens-section.is-lens-active .discovery-lens-instruction {
  opacity: .25;
}

.discovery-lens-foot {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem clamp(.25rem, 1vw, 1rem);
}

.discovery-lens-progress {
  display: flex;
  gap: clamp(.8rem, 2vw, 1.8rem);
}

.discovery-lens-progress span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #000000;
  font: 600 .5rem/1 'Manrope', var(--font-sans);
  letter-spacing: .1em;
}

.discovery-lens-progress i {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(201, 162, 39, .65);
  border-radius: 50%;
  transition: background .35s ease, box-shadow .35s ease;
}

.discovery-lens-progress span.is-found {
  color: #000000;
}

.discovery-lens-progress span.is-found i {
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .1);
}

.discovery-lens-foot>p {
  margin: 0;
  color: #000000;
  font: 400 clamp(1rem, 1.4vw, 1.35rem)/1 'Instrument Serif', var(--font-serif);
  font-style: italic;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease, transform .7s var(--transition-smooth);
}

.discovery-lens-foot>p.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {

  .discovery-lens-canvas,
  .discovery-lens-canvas * {
    cursor: none !important;
  }
}

@keyframes discoveryMarkCatch {

  0%,
  100% {
    filter: saturate(1.08) brightness(1);
  }

  45% {
    filter: saturate(1.25) brightness(1.18) drop-shadow(0 0 14px rgba(201, 162, 39, .45));
  }
}

@media (max-width: 900px) {
  .discovery-lens-section {
    padding: clamp(4.5rem, 16vw, 6.5rem) 0;
  }

  .discovery-lens-head {
    position: relative;
    left: auto;
    top: auto;
    max-width: none;
    margin-bottom: 1.5rem;
  }

  .discovery-lens-head h2 {
    font-size: clamp(3.15rem, 14vw, 5rem);
  }

  .discovery-lens-canvas {
    --lens-size: 92px;
    height: min(118vw, 640px);
  }

  .discovery-scene-image {
    object-position: 58% center;
  }

  .discovery-targets button {
    width: 28%;
    height: 32%;
  }

  .discovery-targets button:nth-child(1) {
    left: 8%;
    top: 54%;
  }

  .discovery-targets button:nth-child(2) {
    left: 67%;
    top: 16%;
  }

  .discovery-targets button:nth-child(3) {
    left: 36%;
    top: 42%;
  }

  .discovery-targets button:nth-child(4) {
    left: 69%;
    top: 57%;
  }

  .discovery-lens-label {
    transform: translate(32px, 58px);
  }

  .discovery-piece-ring {
    left: -2%;
    top: 5%;
    width: 59%;
    height: 34%;
  }

  .discovery-piece-earring {
    right: -4%;
    top: 11%;
    width: 54%;
    height: 30%;
  }

  .discovery-piece-pendant {
    left: -1%;
    bottom: 8%;
    width: 58%;
    height: 37%;
  }

  .discovery-piece-bangle {
    right: -4%;
    bottom: 6%;
    width: 58%;
    height: 39%;
  }

  .discovery-piece figcaption {
    font-size: .46rem;
    transform: translate(10px, 10px);
  }

  .discovery-lens-instruction {
    right: 1rem;
    bottom: 1rem;
  }

  .discovery-lens-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .discovery-lens-hidden,
  .discovery-lens-ring,
  .discovery-lens-foot>p,
  .discovery-piece img {
    transition: none;
  }
}

/* New Transformation artwork: contained, smaller and optically centered. */
.transformation-placed img[src$='pure-id-transformation-placement-v2.webp'] {
  width: min(58%, 540px);
  height: 64%;
  max-height: 520px;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

.transformation-worn img[src$='pure-id-transformation-jewellery-v2.webp'] {
  width: min(72%, 690px);
  height: 74%;
  max-height: 610px;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 900px) {
  .transformation-placed img[src$='pure-id-transformation-placement-v2.webp'] {
    width: min(68vw, 390px);
    height: 68%;
  }

  .transformation-worn img[src$='pure-id-transformation-jewellery-v2.webp'] {
    width: min(82vw, 470px);
    height: 76%;
  }
}


/* Mark transformation: one continuous process, from loose diamond to worn form. */
.mark-transformation {
  position: relative;
  height: 340svh;
  min-height: 1900px;
  border-top: 1px solid rgba(159, 174, 142, .14);
  background: #f7f3ea;
}

.mark-transformation-sticky {
  position: sticky;
  top: 0;
  display: flex;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-height) + 1.25rem) 0 1.35rem;
}

.mark-transformation-shell {
  display: grid;
  width: 100%;
  height: calc(100svh - var(--nav-height) - 2.6rem);
  min-height: 620px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(1.1rem, 2.1vh, 1.8rem);
}

.mark-transformation-head {
  display: grid;
  grid-template-columns: minmax(190px, 3fr) minmax(0, 9fr);
  align-items: start;
}

.mark-transformation-head>span {
  padding-top: .55rem;
  color: #C9A227;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.mark-transformation-head h2 {
  max-width: 850px;
  margin: 0;
  color: #000000;
  font-size: clamp(2.55rem, 4vw, 4.75rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.042em;
}

.mark-transformation-head h2 em {
  color: #C9A227;
  font-weight: 400;
}

.mark-transformation-experience {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(210px, 3fr) minmax(0, 9fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.mark-transformation-steps {
  position: relative;
  display: grid;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mark-transformation-steps::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 4px;
  width: 1px;
  background: rgba(159, 174, 142, .2);
}

.mark-transformation-steps li {
  position: relative;
  opacity: .38;
  transform: translateX(0);
  transition: opacity .55s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

.mark-transformation-steps li::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(159, 174, 142, .42);
  border-radius: 50%;
  background: #f7f3ea;
  transform: translateY(-50%);
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}

.mark-transformation-steps li.is-active {
  opacity: 1;
  transform: translateX(8px);
}

.mark-transformation-steps li.is-active::before {
  border-color: var(--c-gold);
  background: var(--c-gold);
  box-shadow: 0 0 0 6px rgba(201, 162, 39, .1);
}

.mark-transformation-steps button {
  display: grid;
  width: 100%;
  min-height: clamp(70px, 9.5vh, 94px);
  grid-template-columns: 36px 1fr;
  grid-template-areas: 'number title' 'number copy';
  align-content: center;
  gap: .12rem .8rem;
  padding: .7rem .5rem .7rem 1.65rem;
  border: 0;
  color: #000000;
  background: transparent;
  text-align: left;
  font: inherit;
}

.mark-transformation-steps button>span {
  grid-area: number;
  align-self: center;
  color: #C9A227;
  font-size: .55rem;
  letter-spacing: .13em;
}

.mark-transformation-steps button strong {
  grid-area: title;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1.28rem, 1.65vw, 1.7rem);
  font-weight: 400;
  line-height: 1;
}

.mark-transformation-steps button small {
  grid-area: copy;
  color: #000000;
  font-size: .69rem;
  line-height: 1.4;
}

.mark-transformation-steps button:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: -3px;
}

.mark-transformation-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(159, 174, 142, .15);
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, .98), rgba(251, 248, 241, .82) 40%, rgba(234, 227, 215, .54) 100%);
  box-shadow: 0 30px 80px rgba(124, 141, 107, .085);
  isolation: isolate;
}

.mark-transformation-stage::before {
  content: '';
  position: absolute;
  z-index: 7;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, .2), transparent 35%, transparent 67%, rgba(117, 97, 67, .04));
  pointer-events: none;
}

.mark-transformation-grid,
.mark-transformation-grid i,
.mark-transformation-orbit,
.mark-transformation-orbit i {
  position: absolute;
  pointer-events: none;
}

.mark-transformation-grid {
  z-index: 1;
  inset: 0;
  opacity: .34;
}

.mark-transformation-grid::before,
.mark-transformation-grid::after,
.mark-transformation-grid i {
  content: '';
  position: absolute;
  background: rgba(159, 174, 142, .105);
}

.mark-transformation-grid::before {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}

.mark-transformation-grid::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.mark-transformation-grid i:first-child {
  top: 0;
  bottom: 0;
  left: 25%;
  width: 1px;
}

.mark-transformation-grid i:last-child {
  top: 0;
  bottom: 0;
  left: 75%;
  width: 1px;
}

.mark-transformation-orbit {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(56%, 480px);
  aspect-ratio: 1;
  border: 1px solid rgba(201, 162, 39, .3);
  border-radius: 50%;
  opacity: .62;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.mark-transformation-orbit i {
  border: 1px solid rgba(159, 174, 142, .13);
  border-radius: 50%;
}

.mark-transformation-orbit i:first-child {
  inset: 14%;
}

.mark-transformation-orbit i:last-child {
  inset: 32%;
}

.mark-transformation-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.91);
  transition: opacity .72s ease, transform 1.05s cubic-bezier(.16, 1, .3, 1), filter .72s ease;
  pointer-events: none;
}

.mark-transformation-layer img {
  display: block;
  max-width: none;
}

.transformation-diamond img,
.transformation-held img {
  width: min(42%, 340px);
  height: auto;
  filter: drop-shadow(0 24px 27px rgba(63, 75, 54, .16));
}

.transformation-diamond img {
  width: min(34%, 270px);
  animation: transformationFloat 5.8s ease-in-out infinite;
}

.transformation-held img {
  width: min(43%, 360px);
}

.transformation-placed,
.transformation-worn {
  transform: scale(1.07);
}

.transformation-placed::after,
.transformation-worn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 243, 234, .16), transparent 28%, transparent 74%, rgba(247, 243, 234, .25));
}

.transformation-placed img,
.transformation-worn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transformation-placed img {
  object-position: center;
}

.transformation-worn img {
  object-position: 52% center;
}

.transformation-placement-point {
  position: absolute;
  z-index: 3;
  left: 54.6%;
  top: 60.5%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .9), 0 0 0 9px rgba(201, 162, 39, .14);
  opacity: 0;
}

.mark-transformation-stage[data-state='0'] .transformation-diamond,
.mark-transformation-stage[data-state='1'] .transformation-held,
.mark-transformation-stage[data-state='2'] .transformation-placed,
.mark-transformation-stage[data-state='3'] .transformation-worn {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.mark-transformation-stage[data-state='1'] .mark-transformation-orbit {
  opacity: .9;
  transform: translate(-50%, -50%) scale(1);
}

.mark-transformation-stage[data-state='2'] .mark-transformation-orbit,
.mark-transformation-stage[data-state='3'] .mark-transformation-orbit {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.45);
}

.mark-transformation-stage[data-state='2'] .transformation-placement-point {
  opacity: 1;
  animation: transformationPoint 2.2s ease-in-out infinite;
}

.mark-transformation-stage figcaption {
  position: absolute;
  z-index: 9;
  right: 1.2rem;
  bottom: 1rem;
  left: 1.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #000000;
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mark-transformation-stage figcaption span {
  color: #C9A227;
}

.mark-transformation-stage figcaption b {
  font-weight: 600;
}

.mark-transformation-foot {
  display: grid;
  grid-template-columns: minmax(210px, 3fr) minmax(0, 9fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.mark-transformation-foot p {
  display: flex;
  align-items: center;
  margin: 0;
  color: #000000;
  font-family: var(--font-serif);
  font-size: .83rem;
  letter-spacing: .015em;
}

.mark-transformation-foot p i {
  width: 22px;
  height: 1px;
  margin: 0 .55rem;
  background: rgba(159, 174, 142, .32);
}

.mark-transformation-foot>small {
  color: #000000;
  font-size: .74rem;
  letter-spacing: .02em;
}

@keyframes transformationFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-8px) rotate(1.2deg);
  }
}

@keyframes transformationPoint {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(201, 162, 39, .9), 0 0 0 6px rgba(201, 162, 39, .1);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(201, 162, 39, .9), 0 0 0 14px rgba(201, 162, 39, .16);
  }
}

@media (max-width: 900px) {
  .mark-transformation {
    height: auto;
    min-height: 0;
  }

  .mark-transformation-sticky {
    position: relative;
    min-height: 0;
    overflow: visible;
    padding: clamp(4.5rem, 12vw, 6.5rem) 0;
  }

  .mark-transformation-shell {
    height: auto;
    min-height: 0;
    gap: 2rem;
  }

  .mark-transformation-head,
  .mark-transformation-experience,
  .mark-transformation-foot {
    grid-template-columns: 1fr;
  }

  .mark-transformation-head {
    gap: .8rem;
  }

  .mark-transformation-head>span {
    padding: 0;
  }

  .mark-transformation-head h2 {
    max-width: 720px;
  }

  .mark-transformation-experience {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mark-transformation-stage {
    order: 1;
    height: min(76vw, 610px);
    min-height: 410px;
  }

  .mark-transformation-steps {
    order: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(159, 174, 142, .18);
  }

  .mark-transformation-steps::-webkit-scrollbar {
    display: none;
  }

  .mark-transformation-steps::before,
  .mark-transformation-steps li::before {
    display: none;
  }

  .mark-transformation-steps li {
    scroll-snap-align: start;
    border-top: 1px solid rgba(159, 174, 142, .18);
    transform: none;
  }

  .mark-transformation-steps li.is-active {
    border-top-color: var(--c-gold);
    transform: none;
  }

  .mark-transformation-steps button {
    min-height: 110px;
    grid-template-columns: 1fr;
    grid-template-areas: 'number' 'title' 'copy';
    gap: .2rem;
    padding: 1rem .75rem;
  }

  .mark-transformation-steps button strong {
    font-size: 1.45rem;
  }

  .mark-transformation-foot {
    gap: .65rem;
  }

  .mark-transformation-foot p {
    font-size: .78rem;
  }
}

@media (max-width: 520px) {
  .mark-transformation-sticky {
    padding: 4.5rem 0;
  }

  .mark-transformation-head h2 {
    font-size: clamp(2.55rem, 12vw, 3.65rem);
  }

  .mark-transformation-stage {
    width: calc(100% + 2rem);
    height: 108vw;
    min-height: 390px;
    margin-left: -1rem;
  }

  .transformation-diamond img {
    width: 44%;
  }

  .transformation-held img {
    width: 53%;
  }

  .mark-transformation-stage figcaption {
    right: .9rem;
    bottom: .8rem;
    left: .9rem;
  }

  .mark-transformation-stage figcaption b {
    display: none;
  }

  .mark-transformation-foot p {
    overflow: hidden;
  }

  .mark-transformation-foot p i {
    width: 14px;
    margin: 0 .38rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mark-transformation-steps li,
  .mark-transformation-orbit,
  .mark-transformation-layer {
    transition: none;
  }

  .transformation-diamond img,
  .transformation-placement-point {
    animation: none;
  }
}

/* Cinematic process theatre: intentionally distinct from the meaning section above. */
@media (min-width: 901px) {
  .mark-transformation {
    background:
      radial-gradient(ellipse at 50% 0, rgba(201, 162, 39, .08), transparent 32%),
      linear-gradient(180deg, #eee7db 0%, #f7f3ea 18%, #f7f3ea 100%);
  }

  .mark-transformation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1320px, 112vw);
    height: 190px;
    border: 1px solid rgba(201, 162, 39, .22);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    opacity: .65;
    transform: translate(-50%, -88%);
    pointer-events: none;
  }

  .mark-transformation-shell {
    max-width: 1320px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(.9rem, 1.7vh, 1.4rem);
  }

  .mark-transformation-head {
    display: block;
    text-align: center;
  }

  .mark-transformation-head h2 {
    max-width: none;
    font-size: clamp(2.6rem, 3.55vw, 4.25rem);
    line-height: .94;
  }

  .mark-transformation-experience {
    display: grid;
    min-height: 0;
    grid-template: minmax(0, 1fr) auto / 1fr;
    gap: 0;
  }

  .mark-transformation-stage {
    grid-area: 1 / 1;
    width: min(100%, 1120px);
    height: 100%;
    min-height: 0;
    justify-self: center;
    border-color: rgba(159, 174, 142, .12);
    border-bottom: 0;
    border-radius: 52% 52% 0 0 / 8% 8% 0 0;
    box-shadow: 0 34px 90px rgba(124, 141, 107, .09);
  }

  .mark-transformation-steps {
    grid-area: 2 / 1;
    width: min(100%, 1120px);
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: stretch;
    border-top: 1px solid rgba(159, 174, 142, .18);
    border-bottom: 1px solid rgba(159, 174, 142, .18);
    background: rgba(247, 243, 234, .9);
    backdrop-filter: blur(14px);
  }

  .mark-transformation-steps::before {
    top: -1px;
    right: 12.5%;
    bottom: auto;
    left: 12.5%;
    width: auto;
    height: 1px;
    background: rgba(159, 174, 142, .24);
  }

  .mark-transformation-steps li {
    opacity: .42;
    transform: none;
  }

  .mark-transformation-steps li+li {
    border-left: 1px solid rgba(159, 174, 142, .12);
  }

  .mark-transformation-steps li::before {
    top: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    background: #f7f3ea;
    transform: translateX(-50%);
  }

  .mark-transformation-steps li::after {
    content: '';
    position: absolute;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 1px;
    background: var(--c-gold);
    opacity: 0;
    transform: scaleX(.15);
    transition: opacity .4s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
  }

  .mark-transformation-steps li.is-active {
    opacity: 1;
    transform: none;
  }

  .mark-transformation-steps li.is-active::before {
    background: var(--c-gold);
  }

  .mark-transformation-steps li.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .mark-transformation-steps button {
    min-height: clamp(78px, 9.4vh, 94px);
    grid-template-columns: 34px auto;
    grid-template-areas: 'number title' 'number copy';
    justify-content: center;
    padding: .75rem 1rem;
    text-align: left;
  }

  .mark-transformation-steps button strong {
    font-size: clamp(1.18rem, 1.4vw, 1.55rem);
  }

  .mark-transformation-foot {
    display: block;
    text-align: center;
  }

  .mark-transformation-foot>small {
    font-family: var(--font-serif);
    font-size: .8rem;
    font-style: italic;
  }

  .transformation-placement-point {
    left: 55.7%;
    top: 50.8%;
  }
}

@media (max-width: 900px) {
  .mark-transformation-head {
    text-align: center;
  }

  .mark-transformation-head h2 {
    max-width: 760px;
    margin-inline: auto;
  }

  .mark-transformation-foot {
    display: block;
    text-align: center;
  }

  .mark-transformation-foot>small {
    font-family: var(--font-serif);
    font-size: .82rem;
    font-style: italic;
  }

  .transformation-placement-point {
    left: 55.7%;
    top: 50.8%;
  }
}

/* Editorial origin flow v2: borderless, airy and fully uncropped. */
.mark-transformation {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .88), transparent 34%),
    linear-gradient(180deg, #eee8dd 0, #f7f3ea 16%, #f7f3ea 100%);
}

.mark-transformation::before {
  display: none;
}

.mark-transformation-sticky {
  align-items: stretch;
  padding: calc(var(--nav-height) + .85rem) 0 1rem;
}

.mark-transformation-shell {
  height: calc(100svh - var(--nav-height) - 1.85rem);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.55rem, 1.2vh, 1rem);
}

.mark-transformation-head {
  position: relative;
  z-index: 8;
  display: block;
  text-align: center;
}

.mark-transformation-head h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.45rem, 3.55vw, 4.2rem);
  line-height: .92;
}

.mark-transformation-experience {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template: minmax(0, 1fr) auto / 1fr;
  gap: 0;
}

.mark-transformation-stage {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  justify-self: stretch;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mark-transformation-stage::before,
.mark-transformation-grid,
.transformation-placed::after,
.transformation-worn::after,
.transformation-placement-point {
  display: none;
}

.mark-transformation-word {
  position: absolute;
  z-index: 1;
  top: 47%;
  left: 50%;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(7rem, 15vw, 13.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: .7;
  letter-spacing: -.075em;
  opacity: .042;
  transform: translate(-50%, -50%);
  transition: opacity .55s ease;
  white-space: nowrap;
  pointer-events: none;
}

.mark-transformation-orbit {
  width: min(44vh, 390px);
  max-width: 40vw;
  opacity: .38;
}

.mark-transformation-layer {
  inset: .25rem 0 2.8rem;
  overflow: visible;
}

.transformation-diamond img {
  width: min(29vh, 245px);
  max-width: 30vw;
}

.transformation-held img {
  width: min(36vh, 310px);
  max-width: 37vw;
}

.transformation-placed,
.transformation-worn {
  transform: translateY(10px) scale(.975);
}

.transformation-placed img,
.transformation-worn img {
  width: min(100%, 1120px);
  height: 100%;
  max-height: 100%;
  padding: 0 clamp(1rem, 4vw, 4.5rem);
  object-fit: contain;
  object-position: center;
  filter: none;
}

.mark-transformation-stage[data-state='2'] .transformation-placed,
.mark-transformation-stage[data-state='3'] .transformation-worn {
  transform: translateY(0) scale(1);
}

.mark-transformation-stage figcaption {
  right: auto;
  bottom: .2rem;
  left: clamp(.5rem, 2vw, 1.5rem);
  display: grid;
  justify-content: start;
  gap: .15rem;
  letter-spacing: 0;
  text-transform: none;
}

.mark-transformation-stage figcaption span {
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
}

.mark-transformation-stage figcaption b {
  color: #000000;
  font-size: .67rem;
  font-weight: 400;
  letter-spacing: .04em;
}

.mark-transformation-steps {
  grid-area: 2 / 1;
  position: relative;
  width: min(88%, 900px);
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: stretch;
  overflow: visible;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.mark-transformation-steps::before {
  display: block;
  top: 0;
  right: 12.5%;
  bottom: auto;
  left: 12.5%;
  width: auto;
  height: 1px;
  background: rgba(159, 174, 142, .24);
}

.mark-transformation-steps li,
.mark-transformation-steps li.is-active {
  opacity: .38;
  border: 0;
  transform: none;
}

.mark-transformation-steps li+li {
  border: 0;
}

.mark-transformation-steps li::before {
  display: block;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-color: rgba(159, 174, 142, .35);
  background: #f7f3ea;
  transform: translateX(-50%);
}

.mark-transformation-steps li::after {
  display: none;
}

.mark-transformation-steps li.is-active {
  opacity: 1;
}

.mark-transformation-steps li.is-active::before {
  border-color: var(--c-gold);
  background: var(--c-gold);
  box-shadow: 0 0 0 6px rgba(201, 162, 39, .09);
}

.mark-transformation-steps button {
  display: grid;
  min-height: clamp(58px, 8vh, 72px);
  grid-template-columns: 1fr;
  grid-template-areas: 'number' 'title';
  justify-content: stretch;
  gap: .12rem;
  padding: .8rem .5rem .25rem;
  text-align: center;
}

.mark-transformation-steps button>span {
  justify-self: center;
  font-size: .5rem;
}

.mark-transformation-steps button strong {
  justify-self: center;
  font-size: clamp(.92rem, 1.25vw, 1.22rem);
}

.mark-transformation-steps button small {
  display: none;
}

.mark-transformation-foot {
  display: block;
  text-align: center;
}

.mark-transformation-foot>small {
  color: #000000;
  font-family: var(--font-serif);
  font-size: .75rem;
  font-style: italic;
}

@media (max-height: 760px) and (min-width: 901px) {
  .mark-transformation-sticky {
    padding-top: calc(var(--nav-height) + .45rem);
    padding-bottom: .55rem;
  }

  .mark-transformation-shell {
    height: calc(100svh - var(--nav-height) - 1rem);
    gap: .35rem;
  }

  .mark-transformation-head h2 {
    font-size: clamp(2.1rem, 3vw, 3rem);
  }

  .mark-transformation-layer {
    bottom: 2.2rem;
  }

  .mark-transformation-steps button {
    min-height: 54px;
    padding-top: .65rem;
  }

  .mark-transformation-foot {
    display: none;
  }
}

@media (max-width: 900px) {
  .mark-transformation {
    height: auto;
    min-height: 0;
  }

  .mark-transformation-sticky {
    position: relative;
    min-height: 0;
    padding: clamp(4.5rem, 12vw, 6rem) 0;
  }

  .mark-transformation-shell {
    height: auto;
    min-height: 0;
    gap: 1.75rem;
  }

  .mark-transformation-head h2 {
    font-size: clamp(2.45rem, 10.5vw, 3.7rem);
  }

  .mark-transformation-stage {
    width: 100%;
    height: min(86vw, 560px);
    min-height: 350px;
    margin: 0;
  }

  .mark-transformation-word {
    font-size: clamp(5.8rem, 25vw, 10rem);
  }

  .mark-transformation-layer {
    inset: 0 0 3rem;
  }

  .transformation-diamond img {
    width: min(43vw, 230px);
    max-width: none;
  }

  .transformation-held img {
    width: min(54vw, 285px);
    max-width: none;
  }

  .transformation-placed img,
  .transformation-worn img {
    width: 100%;
    padding: 0;
  }

  .mark-transformation-steps {
    width: 100%;
    justify-self: stretch;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .mark-transformation-steps button {
    min-height: 66px;
    padding: .8rem .15rem .2rem;
  }

  .mark-transformation-steps button strong {
    font-size: clamp(.78rem, 3.4vw, 1rem);
  }

  .mark-transformation-stage figcaption {
    left: .25rem;
  }
}

@media (max-width: 520px) {
  .mark-transformation-stage {
    width: 100%;
    height: 102vw;
    min-height: 365px;
    margin-left: 0;
  }

  .mark-transformation-stage figcaption b {
    display: block;
  }

  .mark-transformation-foot>small {
    font-size: .72rem;
  }
}

/* Clean caption row: no connector line, dots or detached image caption. */
.mark-transformation-stage figcaption {
  display: none;
}

.mark-transformation-layer {
  bottom: 0;
}

.mark-transformation-steps {
  z-index: 20;
  width: min(100%, 980px);
  justify-self: center;
  margin-top: .35rem;
  padding: 0;
}

.mark-transformation-steps::before,
.mark-transformation-steps li::before,
.mark-transformation-steps li.is-active::before {
  display: none !important;
}

.mark-transformation-steps li,
.mark-transformation-steps li.is-active {
  border: 0;
}

.mark-transformation-steps li {
  opacity: .62;
}

.mark-transformation-steps li.is-active {
  opacity: 1;
}

.mark-transformation-steps button {
  min-height: 66px;
  grid-template-columns: 1fr;
  grid-template-areas: 'number' 'title' 'copy';
  align-content: start;
  gap: .12rem;
  padding: .45rem .6rem .2rem;
  text-align: center;
}

.mark-transformation-steps button>span,
.mark-transformation-steps button strong,
.mark-transformation-steps button small {
  justify-self: center;
}

.mark-transformation-steps button small {
  display: block;
  color: #000000;
  font-size: .62rem;
  line-height: 1.3;
}

@media (max-height: 760px) and (min-width: 901px) {
  .mark-transformation-steps button {
    min-height: 58px;
    padding-top: .25rem;
  }
}

@media (max-width: 900px) {
  .mark-transformation-steps {
    width: 100%;
    margin-top: .5rem;
  }

  .mark-transformation-steps button {
    min-height: 72px;
    padding-inline: .2rem;
  }

  .mark-transformation-steps button small {
    font-size: .55rem;
  }
}

/* Material Theatre: the exterior world shifts while the Mark stays constant. */
.material-theatre {
  position: relative;
  height: 430svh;
  min-height: 2600px;
  border-top: 1px solid rgba(159, 174, 142, .14);
  background: #f4f0e8;
}

.material-theatre-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  padding: calc(var(--nav-height) + .8rem) 0 1rem;
}

.material-theatre-shell {
  display: grid;
  height: calc(100svh - var(--nav-height) - 1.8rem);
  min-height: 610px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.8rem, 1.5vh, 1.3rem);
}

.material-theatre-head {
  position: relative;
  z-index: 20;
  max-width: 790px;
}

.material-theatre-head h2 {
  margin: 0;
  color: #000000;
  font-size: clamp(2.65rem, 4vw, 4.7rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.04em;
}

.material-theatre-head h2 em {
  color: #C9A227;
  font-weight: 400;
}

.material-theatre-head p {
  margin: .75rem 0 0;
  color: #000000;
  font-size: .76rem;
  letter-spacing: .035em;
}

.material-theatre-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(159, 174, 142, .13);
  background: #e7e7e3;
  box-shadow: 0 28px 76px rgba(63, 75, 54, .09);
  isolation: isolate;
  transition: background 1s cubic-bezier(.16, 1, .3, 1);
}

.material-theatre-stage[data-material-world='silver'] {
  background: linear-gradient(120deg, #d9dcdd, #f5f5f2 48%, #c8cbcc);
}

.material-theatre-stage[data-material-world='gold'] {
  background: linear-gradient(120deg, #ead9b9, #faf3e5 48%, #c8a562);
}

.material-theatre-stage[data-material-world='platinum'] {
  background: linear-gradient(120deg, #d4d5d4, #f8f7f2 48%, #b9bcbd);
}

.material-theatre-worlds {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
}

.material-theatre-worlds span {
  position: relative;
  padding: .85rem 1rem;
  border-right: 1px solid rgba(255, 255, 255, .3);
  color: #000000;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.material-theatre-worlds span::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .18;
}

.material-theatre-worlds span:nth-child(1)::after {
  background: linear-gradient(180deg, rgba(152, 160, 164, .28), transparent 34%);
}

.material-theatre-worlds span:nth-child(2)::after {
  background: linear-gradient(180deg, rgba(201, 162, 39, .24), transparent 34%);
}

.material-theatre-worlds span:nth-child(3)::after {
  background: linear-gradient(180deg, rgba(222, 225, 225, .34), transparent 34%);
}

.material-theatre-scene {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .85s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.material-theatre-scene.is-active {
  opacity: 1;
  transform: scale(1);
}

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

.material-theatre-scene[data-material-scene='0'] img,
.material-theatre-scene[data-material-scene='2'] img {
  object-fit: contain;
}

.material-theatre-scene[data-material-scene='2'] img {
  padding: 1rem clamp(1rem, 4vw, 4rem);
}

.material-theatre-stage::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 19, 15, .08), transparent 24%, transparent 67%, rgba(22, 19, 15, .18));
  pointer-events: none;
}

.material-theatre-mark {
  position: absolute;
  z-index: 12;
  top: 50%;
  right: clamp(1.15rem, 2.5vw, 2.6rem);
  display: grid;
  grid-template-columns: 68px auto;
  align-items: center;
  gap: .8rem;
  padding: .65rem .9rem .65rem .65rem;
  border: 1px solid rgba(255, 255, 255, .52);
  background: rgba(247, 243, 234, .76);
  box-shadow: 0 18px 42px rgba(63, 75, 54, .12);
  backdrop-filter: blur(16px);
  transform: translateY(-50%);
}

.material-theatre-mark img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 8px 11px rgba(63, 75, 54, .16));
}

.material-theatre-mark span {
  display: grid;
  gap: .08rem;
}

.material-theatre-mark b {
  color: #C9A227;
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.material-theatre-mark small {
  color: #000000;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
}

.material-theatre-copy {
  position: absolute;
  z-index: 10;
  bottom: 1.2rem;
  left: 1.25rem;
  max-width: 520px;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.12;
  text-shadow: 0 2px 18px rgba(22, 19, 15, .34);
}

.material-theatre-count {
  position: absolute;
  z-index: 10;
  right: 1.1rem;
  bottom: .8rem;
  color: #FFFFFF;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.material-theatre-controls {
  width: min(100%, 920px);
  justify-self: center;
}

.material-theatre-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: #000000;
  font-family: var(--font-serif);
  font-size: .78rem;
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
}

.material-theatre-labels span:first-child {
  text-align: left;
}

.material-theatre-labels span:last-child {
  text-align: right;
}

.material-theatre-controls input[type='range'] {
  width: 100%;
  height: 24px;
  margin: .15rem 0 0;
  appearance: none;
  background: transparent;
}

.material-theatre-controls input[type='range']::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(159, 174, 142, .36);
}

.material-theatre-controls input[type='range']::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5.5px;
  appearance: none;
  border: 1px solid var(--c-gold-hover);
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .1);
}

.material-theatre-controls input[type='range']::-moz-range-track {
  height: 1px;
  background: rgba(159, 174, 142, .36);
}

.material-theatre-controls input[type='range']::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid var(--c-gold-hover);
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .1);
}

@media (max-width: 900px) {
  .material-theatre {
    height: 420svh;
    min-height: 2300px;
  }

  .material-theatre-sticky {
    padding: calc(var(--nav-height) + .55rem) 0 .75rem;
  }

  .material-theatre-shell {
    height: calc(100svh - var(--nav-height) - 1.3rem);
    min-height: 600px;
    gap: .65rem;
  }

  .material-theatre-head h2 {
    font-size: clamp(2.35rem, 8vw, 3.7rem);
  }

  .material-theatre-head p {
    margin-top: .45rem;
  }

  .material-theatre-worlds span {
    padding-inline: .2rem;
    font-size: .42rem;
  }

  .material-theatre-mark {
    top: auto;
    right: .75rem;
    bottom: 2.9rem;
    grid-template-columns: 48px auto;
    padding: .45rem .6rem .45rem .45rem;
    transform: none;
  }

  .material-theatre-mark img {
    width: 48px;
    height: 48px;
  }

  .material-theatre-mark small {
    font-size: .85rem;
  }

  .material-theatre-copy {
    right: 7.5rem;
    bottom: .8rem;
    left: .8rem;
    font-size: 1rem;
  }

  .material-theatre-count {
    display: none;
  }
}

@media (max-width: 520px) {
  .material-theatre {
    min-height: 2100px;
  }

  .material-theatre-shell {
    min-height: 560px;
  }

  .material-theatre-head h2 {
    font-size: clamp(2.05rem, 10vw, 3rem);
  }

  .material-theatre-head p {
    font-size: .68rem;
  }

  .material-theatre-scene[data-material-scene='1'] img,
  .material-theatre-scene[data-material-scene='3'] img {
    object-position: center;
  }

  .material-theatre-mark {
    bottom: 2.35rem;
  }

  .material-theatre-copy {
    right: .8rem;
    bottom: .55rem;
    max-width: 260px;
  }

  .material-theatre-labels {
    font-size: .62rem;
  }
}

@media (max-height: 730px) and (min-width: 901px) {


  .material-theatre-shell {
    min-height: 0;
  }

  .material-theatre-head h2 {
    font-size: clamp(2.2rem, 3vw, 3.1rem);
  }

  .material-theatre-head p {
    margin-top: .4rem;
  }

  .material-theatre-mark {
    grid-template-columns: 52px auto;
  }

  .material-theatre-mark img {
    width: 52px;
    height: 52px;
  }

  .material-theatre-controls input[type='range'] {
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .material-theatre-stage,
  .material-theatre-scene {
    transition: none;
  }
}

/* Discovery showcase: one clear form at a time, controlled by vertical scroll. */
.discovery-showcase {
  position: relative;
  height: 400svh;
  min-height: 2400px;
  background: #f5f1e8;
  border-top: 1px solid rgba(159, 174, 142, .16);
}

.discovery-showcase-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}

.discovery-showcase-shell {
  height: 100%;
  padding-top: clamp(7.2rem, 13vh, 9.5rem);
  padding-bottom: clamp(1.4rem, 3vh, 2.6rem);
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 5vw, 6rem);
}

.discovery-showcase-copy {
  align-self: center;
  position: relative;
  z-index: 3;
  padding: 0 0 3vh;
}

.discovery-showcase-kicker {
  margin: 0 0 clamp(1.25rem, 2.5vh, 2rem);
  color: #000000;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.discovery-showcase-copy h2 {
  max-width: 7.2ch;
  margin: 0;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(3.7rem, 6.3vw, 7.15rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.045em;
}

.discovery-showcase-copy h2 em {
  display: block;
  color: #C9A227;
  font-weight: 400;
}

.discovery-showcase-intro {
  max-width: 31rem;
  margin: clamp(1.4rem, 3vh, 2.35rem) 0 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: clamp(.9rem, 1vw, 1.05rem);
  line-height: 1.7;
}

.discovery-showcase-caption {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  align-items: start;
  max-width: 26rem;
  margin-top: clamp(2rem, 5vh, 4rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(159, 174, 142, .26);
}

.discovery-showcase-caption>span {
  padding-top: .35rem;
  color: #C9A227;
  font: 700 .68rem/1 var(--font-sans);
  letter-spacing: .16em;
}

.discovery-showcase-caption h3 {
  margin: 0;
  color: #000000;
  font: 400 clamp(1.65rem, 2.4vw, 2.55rem)/1 var(--font-serif);
}

.discovery-showcase-caption p {
  margin: .45rem 0 0;
  color: #000000;
  font: 400 .84rem/1.55 var(--font-sans);
}

.discovery-showcase-stage {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #f8f4eb;
  box-shadow: inset 0 0 0 1px rgba(159, 174, 142, .08);
}

.discovery-showcase-stage::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(245, 241, 232, .14) 72%, rgba(245, 241, 232, .72) 100%),
    linear-gradient(90deg, rgba(245, 241, 232, .35), transparent 18%, transparent 82%, rgba(245, 241, 232, .3));
}

.discovery-showcase-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: 0;
  transform: translateY(22px) scale(.975);
  transition: opacity .7s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.discovery-showcase-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.discovery-showcase-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.discovery-showcase-seal {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 2vw, 1.75rem);
  top: clamp(1rem, 2vw, 1.75rem);
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-content: center;
  border: 1px solid rgba(201, 162, 39, .62);
  border-radius: 50%;
  color: #000000;
  text-align: center;
  font: 700 .51rem/1.25 var(--font-sans);
  letter-spacing: .13em;
}

.discovery-showcase-seal i {
  color: #C9A227;
  font-family: var(--font-serif);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
}

.discovery-showcase-rail {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(1.1rem, 2.5vh, 2rem);
  border-top: 1px solid rgba(159, 174, 142, .2);
}

.discovery-showcase-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  overflow: hidden;
}

.discovery-showcase-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #c9a227;
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.discovery-showcase-rail button {
  appearance: none;
  border: 0;
  padding: 1rem .5rem .25rem;
  background: transparent;
  color: #000000;
  text-align: left;
  font: 700 .68rem/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}

.discovery-showcase-rail button span {
  display: block;
  margin-bottom: .45rem;
  color: #C9A227;
  font-size: .55rem;
}

.discovery-showcase-rail button.is-active,
.discovery-showcase-rail button:hover,
.discovery-showcase-rail button:focus-visible {
  color: #000000;
}

@media (max-width: 900px) {
  .discovery-showcase {
    height: auto;
    min-height: 0;
  }

  .discovery-showcase-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .discovery-showcase-shell {
    height: auto;
    padding-top: clamp(5.5rem, 14vw, 7rem);
    padding-bottom: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .discovery-showcase-copy {
    padding: 0;
  }

  .discovery-showcase-copy h2 {
    max-width: 9ch;
    font-size: clamp(3.25rem, 15vw, 5.25rem);
  }

  .discovery-showcase-intro {
    max-width: 25rem;
    font-size: .88rem;
  }

  .discovery-showcase-caption {
    margin-top: 1.7rem;
  }

  .discovery-showcase-stage {
    order: 2;
    width: 100%;
    height: min(112vw, 560px);
    margin-top: 1.8rem;
  }

  .discovery-showcase-rail {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .discovery-showcase-rail::-webkit-scrollbar {
    display: none;
  }

  .discovery-showcase-rail button {
    min-width: 5.7rem;
    text-align: center;
  }

  .discovery-showcase-seal {
    width: 3.8rem;
    height: 3.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .discovery-showcase-slide,
  .discovery-showcase-progress i {
    transition: none;
  }
}

/* Collection box hierarchy */
.collection-box-showcase {
  /* width: calc(100% - clamp(2.4rem, 6vw, 6rem)); */
  max-width: 1360px;
  margin: clamp(3rem, 5vw, 5rem) auto 0;
  padding: clamp(1rem, 2vw, 1.6rem);
}

.collection-box-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.5vw, 1.4rem);
  align-items: end;
}

.collection-box-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #e9dfcf;
  color: #000000;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .7s ease;
}

.collection-box-card figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9dfcf;
}

.collection-box-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: none;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.collection-box-card:nth-child(2) img {
  object-fit: cover;
  object-position: center 40%;
  transform: none;
}

.collection-box-card:nth-child(2):hover img,
.collection-box-card:hover img {
  transform: scale(1.05);
}

.collection-box-card>div {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(1.2rem, 2vw, 2rem);
  background: linear-gradient(180deg, transparent, rgba(49, 41, 31, .72));
  color: #FFFFFF;
}

.collection-box-card span {
  display: block;
  color: #C9A227;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.collection-box-card h3 {
  margin-top: .5rem;
  color: #fff;
  font-size: clamp(2.2rem, 3.5vw, 4rem);
  line-height: .9;
}

@media (hover: hover) {
  .collection-box-card:hover {
    z-index: 2;
    transform: translateY(-8px);
    box-shadow: 0 30px 65px rgba(63, 75, 54, .18);
  }

  .collection-box-card:hover img {
    transform: scale(1.035);
  }
}

.circle-motion-ready .collection-box-card {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1), box-shadow .7s ease;
}

.circle-motion-ready .collection-box-card:nth-child(2) {
  transition-delay: .1s;
}

.circle-motion-ready .collection-box-card:nth-child(3) {
  transition-delay: .2s;
}

.circle-motion-ready .collection-box-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .collection-box-showcase {
    width: calc(100% - 2.4rem);
    padding: .75rem;
  }

  .collection-box-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .collection-box-card figure {
    aspect-ratio: 4 / 5;
  }

  .collection-box-card h3 {
    font-size: clamp(2.7rem, 12vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .collection-box-card,
  .collection-box-card img {
    transition: none;
  }
}

/* Focused collection landing: image-led with minimal copy. */
.circle-collections>.container {
  position: relative;
  z-index: 2;
}

.circle-collections .circle-section-head {
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

.circle-collections .circle-section-head>p {
  max-width: none;
  align-self: end;
  color: #C9A227;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-style: italic;
}

.collection-box-showcase {
  margin-top: 0;
}

.collection-box-card>div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.collection-box-card>div>span,
.collection-box-card>div>h3,
.collection-box-card>div>small {
  grid-column: 1;
}

.collection-box-card>div>small {
  display: block;
  margin-top: .7rem;
  color: #FFFFFF;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.collection-box-card>div>b {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(245, 241, 232, .48);
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 400;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}

@media (hover: hover) {
  .collection-box-card:hover>div>b {
    border-color: var(--c-gold-light);
    background: var(--c-gold-light);
    color: #000000;
  }
}

.collection-orbit-story {
  position: relative;
  width: calc(100% - clamp(2.4rem, 6vw, 4rem));
  max-width: 1360px;
  min-height: clamp(540px, 52vw, 720px);
  margin: clamp(3rem, 5vw, 5rem) auto 0;
  overflow: hidden;
  background: #FFFFFF;
  color: #FFFFFF;
}

.collection-orbit-story::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 54%, rgba(255, 255, 255, .035));
  pointer-events: none;
}

.collection-orbit-story-inner {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: inherit;
  grid-template-columns: minmax(360px, 1.15fr) minmax(280px, .85fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.collection-orbit-graphic {
  position: relative;
  width: min(100%, 590px);
  aspect-ratio: 1;
  justify-self: center;
}

.collection-orbit-graphic i {
  position: absolute;
  border: 1px solid rgba(229, 200, 91, .55);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(201, 162, 39, .025);
}

.collection-orbit-graphic i:nth-child(1) {
  inset: 4%;
}

.collection-orbit-graphic i:nth-child(2) {
  inset: 22%;
}

.collection-orbit-graphic i:nth-child(3) {
  inset: 40%;
}

.collection-orbit-graphic b {
  position: absolute;
  inset: 48%;
  border-radius: 50%;
  background: var(--c-gold-light);
  box-shadow: 0 0 0 13px rgba(201, 162, 39, .09), 0 0 50px rgba(229, 200, 91, .38);
}

.collection-orbit-graphic span {
  position: absolute;
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(229, 200, 91, .65);
  border-radius: 50%;
  background: #FFFFFF;
  color: #C9A227;
  font-size: .55rem;
  letter-spacing: .08em;
}

.orbit-label-vow {
  top: 43%;
  left: 39%;
}

.orbit-label-layers {
  top: 25%;
  right: 20%;
}

.orbit-label-everyday {
  top: 6%;
  left: 46%;
}

.collection-orbit-copy>span {
  color: #C9A227;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.collection-orbit-copy h2 {
  margin-top: 1.2rem;
  color: #000000;
  font-size: clamp(3.4rem, 5.5vw, 6.4rem);
  line-height: .86;
}

.collection-orbit-copy h2 em {
  color: #C9A227;
}

.collection-orbit-copy>div {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.4rem;
  margin-top: 2.2rem;
}

.collection-orbit-copy small {
  color: #FFFFFF;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.circle-motion-ready .collection-orbit-graphic,
.circle-motion-ready .collection-orbit-copy {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.circle-motion-ready .collection-orbit-copy {
  transition-delay: .15s;
}

.circle-motion-ready .collection-orbit-graphic.is-visible,
.circle-motion-ready .collection-orbit-copy.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .circle-collections .circle-section-head>p {
    margin-top: 1rem;
  }

  .collection-box-card>div {
    padding: 1.3rem;
  }

  .collection-orbit-story {
    width: calc(100% - 2.4rem);
    min-height: 0;
  }

  .collection-orbit-story-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 3rem 1.2rem 3.5rem;
  }

  .collection-orbit-graphic {
    width: min(100%, 430px);
  }

  .collection-orbit-copy {
    padding: 0 .5rem;
  }

  .collection-orbit-copy h2 {
    font-size: clamp(3rem, 13vw, 4.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .collection-orbit-graphic,
  .collection-orbit-copy {
    transition: none;
  }
}

.collection-life-stages {
  padding: clamp(5rem, 9vw, 9rem) 0 clamp(4rem, 7vw, 7rem);
}

.collection-life-stages .circle-section-head {
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.collection-life-stages .life-current-card-copy {
  min-height: 270px;
}

@media (max-width: 768px) {
  .collection-life-stages {
    padding: 4.5rem 0 4rem;
  }

  .collection-life-stages .life-current-card-copy {
    min-height: 245px;
  }
}

/* Compact collection page rhythm */
.circle-origin-page .circle-section {
  padding-top: clamp(2.75rem, 4vw, 4.75rem);
  padding-bottom: clamp(2.75rem, 4vw, 4.75rem);
}

.circle-origin-page .circle-section-head {
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(1rem, 2vw, 2rem);
}

.circle-origin-page .circle-section-head h2,
.circle-origin-page .circle-pillars .circle-section-head h2 {
  font-size: clamp(3.1rem, 4.8vw, 5.4rem);
}

.circle-origin-page .circle-section-head>p {
  font-size: .8rem;
}

.circle-collections .circle-section-head {
  padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}

.collection-box-showcase {
  padding: 0;
}

.collection-box-card>div {
  padding: clamp(1rem, 1.5vw, 1.4rem);
}

.collection-box-card h3 {
  font-size: clamp(1.9rem, 2.6vw, 3rem);
}

.collection-box-card>div>small {
  margin-top: .45rem;
}

.collection-box-card>div>b {
  width: 2.35rem;
}

.collection-orbit-story {
  min-height: clamp(460px, 43vw, 600px);
  margin-top: clamp(2.25rem, 3.5vw, 3.5rem);
}

.collection-orbit-story-inner {
  padding-top: clamp(2.5rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.collection-orbit-graphic {
  width: min(88%, 500px);
}

.collection-orbit-copy h2 {
  font-size: clamp(3rem, 4.5vw, 4.9rem);
}

.collection-orbit-copy>div {
  margin-top: 1.5rem;
}

.architecture-card {
  padding: clamp(1rem, 1.8vw, 1.6rem);
}

.architecture-card-top {
  min-height: 68px;
}

.architecture-media,
.architecture-hold .architecture-media {
  height: clamp(235px, 24vw, 350px);
  margin-bottom: 1.25rem;
}

.architecture-copy h3 {
  font-size: clamp(1.75rem, 2.2vw, 2.45rem);
}

.architecture-copy p {
  margin-top: .7rem;
  font-size: .72rem;
}

.pillar-orbit-stage {
  gap: clamp(1.5rem, 3vw, 3rem);
}

.pillar-orbit-core {
  min-height: min(520px, calc(100svh - var(--nav-height) - 2.5rem));
}

.pillar-card {
  min-height: 160px;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.pillar-card h3 {
  font-size: clamp(1.75rem, 2.3vw, 2.7rem);
}

.pillar-card p {
  margin-top: .55rem;
  font-size: .7rem;
}

@media (max-width: 768px) {
  .circle-origin-page .circle-section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .circle-origin-page .circle-section-head h2,
  .circle-origin-page .circle-pillars .circle-section-head h2 {
    font-size: clamp(2.65rem, 11vw, 3.65rem);
  }

  .collection-orbit-story-inner {
    padding-top: 2.2rem;
    padding-bottom: 2.75rem;
  }

  .collection-orbit-copy h2 {
    font-size: clamp(2.7rem, 11.5vw, 3.8rem);
  }

  .architecture-media,
  .architecture-hold .architecture-media {
    height: min(76vw, 330px);
  }

  .pillar-orbit-core {
    min-height: 300px;
  }

  .pillar-card {
    min-height: 190px;
    padding-top: 4rem;
    padding-bottom: 1.25rem;
  }

  .pillar-card h3 {
    font-size: clamp(1.85rem, 7.8vw, 2.5rem);
  }
}

/* Homepage editorial rhythm v3: every chapter uses a different interaction. */
.mark-meaning-story,
.mark-transformation,
.discovery-showcase,
.material-theatre {
  height: auto;
  min-height: 0;
}

.mark-meaning-sticky,
.mark-transformation-sticky,
.discovery-showcase-sticky,
.material-theatre-sticky {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Meaning: quiet editorial split-screen selector. */
.mark-meaning-story {
  padding: clamp(6.5rem, 10vw, 10rem) 0;
  background: #f5f1e8;
}

.mark-meaning-shell {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.mark-meaning-intro {
  align-items: end;
  padding-bottom: clamp(1.25rem, 2vw, 2rem);
}

.mark-meaning-intro h2 {
  font-size: clamp(3.6rem, 6.5vw, 7.25rem);
  line-height: .87;
}

.mark-meaning-experience {
  min-height: 620px;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 6vw, 7rem);
}

.mark-meaning-nav {
  padding: 0;
  align-content: stretch;
  border-top: 1px solid rgba(159, 174, 142, .2);
}

.mark-meaning-nav::before,
.mark-meaning-nav li::before {
  display: none;
}

.mark-meaning-nav li,
.mark-meaning-nav li.is-active {
  opacity: 1;
  transform: none;
  border-bottom: 1px solid rgba(159, 174, 142, .2);
}

.mark-meaning-nav button {
  min-height: 25%;
  padding: 1.2rem 0;
  grid-template-columns: 2.25rem 1fr auto;
  grid-template-areas: 'index title line';
  gap: 1rem;
}

.mark-meaning-nav button strong {
  font-size: clamp(1.8rem, 2.75vw, 3.15rem);
  transition: color .3s ease;
}

.mark-meaning-nav button em {
  align-self: center;
  max-width: 12rem;
  text-align: right;
  font-size: clamp(.86rem, 1vw, 1.02rem);
}

.mark-meaning-nav li.is-active button strong {
  color: #C9A227;
}

.mark-meaning-visuals {
  min-height: 620px;
  background: #f2ede3;
}

.mark-meaning-visuals img {
  object-fit: contain;
  object-position: center center;
}

.mark-meaning-visuals::after {
  background: linear-gradient(180deg, rgba(245, 241, 232, .12), transparent 70%, rgba(245, 241, 232, .3));
}

.mark-meaning-index {
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}

/* Transformation: a wide jeweller's process bench, not another pinned chapter. */
.mark-transformation {
  padding: clamp(6.5rem, 10vw, 10rem) 0;
  background: #e9e5dc;
}

.mark-transformation-sticky {
  display: block;
  padding: 0;
}

.mark-transformation-shell {
  height: auto;
  min-height: 0;
  grid-template-rows: auto auto auto;
  gap: clamp(2rem, 4vw, 4rem);
}

.mark-transformation-head {
  text-align: left;
}

.mark-transformation-head h2 {
  max-width: 12ch;
  font-size: clamp(3.25rem, 5.8vw, 6.3rem);
  line-height: .9;
}

.mark-transformation-experience {
  display: grid;
  grid-template: auto minmax(520px, 65vh) / 1fr;
  gap: 1.4rem;
}

.mark-transformation-steps {
  grid-area: 1 / 1;
  width: 100%;
  justify-self: stretch;
  margin: 0;
  border-top: 1px solid rgba(159, 174, 142, .24);
  border-bottom: 1px solid rgba(159, 174, 142, .24);
}

.mark-transformation-steps button {
  min-height: 108px;
  padding: 1.25rem 1rem;
  text-align: left;
  justify-items: start;
}

.mark-transformation-steps button>span,
.mark-transformation-steps button strong,
.mark-transformation-steps button small {
  justify-self: start;
}

.mark-transformation-steps li.is-active {
  background: rgba(201, 162, 39, .08);
}

.mark-transformation-stage {
  grid-area: 2 / 1;
  height: auto;
  min-height: 520px;
  border: 0;
  background: #f8f5ee;
  box-shadow: 0 30px 90px rgba(55, 49, 39, .09);
}

.mark-transformation-foot {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(159, 174, 142, .18);
  padding-top: 1rem;
}

/* Discovery: a compact manual lookbook. No vertical-scroll interception. */
.discovery-showcase {
  padding: clamp(6.5rem, 10vw, 10rem) 0;
  background: #FFFFFF;
  border-top: 0;
}

.discovery-showcase-sticky {
  overflow: hidden;
}

.discovery-showcase-shell {
  height: auto;
  min-height: 690px;
  padding-top: 0;
  padding-bottom: 0;
  grid-template-columns: minmax(270px, .66fr) minmax(0, 1.34fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

.discovery-showcase-copy h2,
.discovery-showcase-caption h3 {
  color: #000000;
}

.discovery-showcase-intro,
.discovery-showcase-caption p {
  color: #FFFFFF;
}

.discovery-showcase-caption,
.discovery-showcase-rail {
  border-color: rgba(245, 241, 232, .2);
}

.discovery-showcase-stage {
  background: #f5f1e8;
  box-shadow: none;
}

.discovery-showcase-rail button {
  color: #FFFFFF;
}

.discovery-showcase-rail button.is-active,
.discovery-showcase-rail button:hover,
.discovery-showcase-rail button:focus-visible {
  color: #000000;
}

/* Circle of Origin: the emotional hand-off from house to collection. */
.circle-origin-bridge {
  position: relative;
  overflow: hidden;
  padding: clamp(7rem, 11vw, 11rem) 0 clamp(4rem, 7vw, 7rem);
  background: #f5f1e8;
  border-top: 1px solid rgba(159, 174, 142, .14);
}

.circle-origin-shell {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(380px, 1fr) minmax(300px, .85fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}

.circle-origin-heading span {
  color: #000000;
  font: 700 .62rem/1 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.circle-origin-heading h2 {
  margin: 1.4rem 0 0;
  color: #000000;
  font: 400 clamp(3.8rem, 6vw, 7rem)/.86 var(--font-serif);
  letter-spacing: -.04em;
}

.circle-origin-heading h2 em {
  color: #C9A227;
  font-weight: 400;
}

.circle-origin-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}

.circle-origin-visual img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: ellipse(44% 49% at 50% 50%);
}

.circle-origin-rings,
.circle-origin-rings i {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(201, 162, 39, .28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.circle-origin-rings {
  z-index: 1;
  width: 116%;
  aspect-ratio: 1;
}

.circle-origin-rings i:nth-child(1) {
  inset: 8%;
  transform: none;
}

.circle-origin-rings i:nth-child(2) {
  inset: 18%;
  transform: none;
}

.circle-origin-rings i:nth-child(3) {
  inset: 31%;
  transform: none;
}

.circle-origin-point {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #f5f1e8;
  border-radius: 50%;
  background: #c9a227;
  box-shadow: 0 0 0 1px #c9a227, 0 0 0 12px rgba(201, 162, 39, .12);
  transform: translate(-50%, -50%);
}

.circle-origin-story blockquote {
  margin: 0;
  color: #000000;
  font: 400 clamp(2rem, 3vw, 3.3rem)/1.02 var(--font-serif);
}

.circle-origin-story blockquote em {
  color: #C9A227;
  font-weight: 400;
}

.circle-origin-story>p {
  margin: 1.6rem 0 0;
  color: #000000;
  font: 400 .9rem/1.75 var(--font-sans);
}

.circle-origin-callout {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 7rem;
  gap: .12rem;
  padding: .6rem .7rem;
  background: rgba(245, 241, 232, .92);
  box-shadow: 0 12px 35px rgba(55, 49, 39, .08);
  pointer-events: none;
}

.circle-origin-callout::before {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(2rem, 5vw, 4.5rem);
  height: 1px;
  background: rgba(201, 162, 39, .72);
}

.circle-origin-callout b {
  color: #000000;
  font: 700 .55rem/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.circle-origin-callout small {
  color: #000000;
  font: 400 .9rem/1 var(--font-serif);
}

.callout-frame {
  left: -12%;
  top: 21%;
}

.callout-frame::before {
  left: 100%;
}

.callout-stone {
  right: -12%;
  top: 45%;
}

.callout-stone::before {
  right: 100%;
}

.callout-mark {
  left: -8%;
  bottom: 17%;
}

.callout-mark::before {
  left: 100%;
}

.circle-origin-story>a {
  display: inline-flex;
  gap: .75rem;
  margin-top: 2rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid #c9a227;
  color: #000000;
  font: 700 .66rem/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.circle-origin-line {
  margin: clamp(4rem, 7vw, 7rem) 0 0;
  color: #000000;
  text-align: center;
  font: 400 clamp(2rem, 4vw, 4.5rem)/1 var(--font-serif);
}

/* Materials: a tactile comparison stage controlled only by its scrubber. */
.material-theatre {
  padding: clamp(7rem, 11vw, 11rem) 0;
  background: #e8e3d8;
}

.material-theatre-sticky {
  padding: 0;
}

.material-theatre-shell {
  height: auto;
  min-height: 0;
  grid-template-rows: auto minmax(560px, 68vh) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.material-theatre-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  max-width: none;
}

.material-theatre-head h2 {
  max-width: none;
  font-size: clamp(3.4rem, 5.7vw, 6.2rem);
}

.material-theatre-head h2 span,
.material-theatre-head h2 em {
  display: block;
  white-space: nowrap;
}

.material-theatre-stage {
  min-height: 560px;
}

.material-theatre-labels {
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--font-sans);
  font-size: .62rem;
  letter-spacing: .14em;
}

@media (max-width: 900px) {

  .mark-meaning-story,
  .mark-transformation,
  .discovery-showcase,
  .material-theatre,
  .circle-origin-bridge {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .mark-meaning-experience {
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    gap: 1.5rem;
  }

  .mark-meaning-visuals {
    min-height: min(112vw, 520px);
  }

  .mark-meaning-nav button {
    grid-template-columns: 2rem 1fr;
    grid-template-areas: 'index title' '. line';
  }

  .mark-meaning-nav button em {
    text-align: left;
  }

  .mark-transformation-experience {
    grid-template-rows: auto minmax(390px, 105vw);
  }

  .mark-transformation-steps {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(128px, 1fr));
    scrollbar-width: none;
  }

  .mark-transformation-steps::-webkit-scrollbar {
    display: none;
  }

  .mark-transformation-steps button {
    min-height: 92px;
  }

  .mark-transformation-stage {
    min-height: min(105vw, 500px);
  }

  .discovery-showcase-shell {
    min-height: 0;
  }

  .circle-origin-shell {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .circle-origin-heading h2 {
    font-size: clamp(3.8rem, 17vw, 6.2rem);
  }

  .circle-origin-visual {
    width: min(100%, 520px);
    justify-self: center;
  }

  .circle-origin-callout {
    min-width: 6.4rem;
    padding: .5rem .6rem;
  }

  .callout-frame {
    left: 0;
  }

  .callout-stone {
    right: 0;
  }

  .callout-mark {
    left: 3%;
  }

  .circle-origin-story {
    max-width: 34rem;
  }

  .material-theatre-shell {
    grid-template-rows: auto minmax(420px, 110vw) auto;
  }

  .material-theatre-head {
    display: block;
  }

  .material-theatre-stage {
    min-height: min(110vw, 520px);
  }

  .material-theatre-labels {
    font-size: .5rem;
  }
}

/* Restrained type scale across the mounted homepage story. */
.mark-meaning-intro h2,
.mark-transformation-head h2,
.discovery-showcase-copy h2,
.circle-origin-heading h2,
.material-theatre-head h2,
.mark-story-cta h2 {
  font-size: clamp(2.9rem, 4.45vw, 5rem);
  letter-spacing: -.035em;
}

.mark-meaning-nav button strong {
  font-size: clamp(1.45rem, 1.9vw, 2.25rem);
}

.discovery-showcase-caption h3 {
  font-size: clamp(1.45rem, 1.9vw, 2.15rem);
}

.circle-origin-story blockquote {
  font-size: clamp(1.75rem, 2.25vw, 2.55rem);
  line-height: 1.08;
}

.circle-origin-line {
  font-size: clamp(1.75rem, 3vw, 3.25rem);
}

@media (max-width: 900px) {

  .mark-meaning-intro h2,
  .mark-transformation-head h2,
  .discovery-showcase-copy h2,
  .circle-origin-heading h2,
  .material-theatre-head h2,
  .mark-story-cta h2 {
    font-size: clamp(2.65rem, 11vw, 3.8rem);
    line-height: .94;
  }

  .mark-meaning-nav button strong {
    font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  }

  .circle-origin-story blockquote {
    font-size: clamp(1.65rem, 7.5vw, 2.2rem);
  }

  .circle-origin-line {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }
}

/* Final mobile interaction system: clear carousels where browsing is horizontal,
   compact grids where side-by-side comparison is useful. */
.mobile-swipe-hint {
  display: none;
}

@media (max-width: 900px) {

  .home-brand-story,
  .circle-origin-page,
  .physical-collection-story {
    overflow-x: clip;
  }

  .mobile-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin: .8rem 0;
    color: #000000;
    font: 700 .58rem/1 var(--font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .mobile-swipe-hint i {
    color: #C9A227;
    font-size: .9rem;
    font-style: normal;
    letter-spacing: 0;
  }

  .home-brand-story .container,
  .physical-collection-story .container {
    padding-right: 1.15rem;
    padding-left: 1.15rem;
  }

  /* Home hero: four forms are a short, clearly signposted carousel. */
  .mobile-swipe-hint-hero {
    grid-column: 1 / -1;
    margin: .35rem 0 .55rem;
  }

  .mark-hero-product-gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 280px);
    gap: .55rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: .25rem;
    scrollbar-width: none;
  }

  .mark-hero-product-gallery::-webkit-scrollbar {
    display: none;
  }

  .mark-hero-product-gallery figure {
    height: 120px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Meaning: image first, then swipeable/tappable meaning cards. */
  .mark-meaning-story,
  .mark-transformation,
  .discovery-showcase,
  .circle-origin-bridge,
  .material-theatre {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
  }

  .mark-meaning-intro {
    display: block;
  }

  .mark-meaning-intro p {
    margin-top: .75rem;
    white-space: normal;
  }

  .mark-meaning-experience {
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  .mark-meaning-visuals {
    order: 1;
    width: 100%;
    min-height: min(104vw, 480px);
  }

  .mobile-swipe-hint-meaning {
    order: 2;
  }

  .mark-meaning-nav {
    order: 3;
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 270px);
    gap: .55rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: .1rem;
    border: 0;
    scrollbar-width: none;
  }

  .mark-meaning-nav::-webkit-scrollbar {
    display: none;
  }

  .mark-meaning-nav li,
  .mark-meaning-nav li.is-active {
    min-width: 0;
    border: 1px solid rgba(159, 174, 142, .18);
    background: rgba(255, 255, 255, .22);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mark-meaning-nav li.is-active {
    border-color: rgba(201, 162, 39, .7);
    background: rgba(201, 162, 39, .07);
  }

  .mark-meaning-nav button {
    min-height: 104px;
    padding: .9rem;
  }

  /* Transformation: visual first, then four swipeable process steps. */
  .mark-transformation-experience {
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  .mark-transformation-stage {
    order: 1;
    width: 100%;
    min-height: min(102vw, 470px);
  }

  .mobile-swipe-hint-transformation {
    order: 2;
  }

  .mark-transformation-steps {
    order: 3;
    display: grid;
    width: 100%;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(62vw, 230px);
    gap: .55rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: .1rem;
    border: 0;
    scrollbar-width: none;
  }

  .mark-transformation-steps::-webkit-scrollbar {
    display: none;
  }

  .mark-transformation-steps li,
  .mark-transformation-steps li.is-active {
    border: 1px solid rgba(159, 174, 142, .2);
    background: rgba(255, 255, 255, .22);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mark-transformation-steps li.is-active {
    border-color: rgba(201, 162, 39, .72);
    background: rgba(201, 162, 39, .08);
  }

  .mark-transformation-steps button {
    min-height: 88px;
    padding: .8rem;
  }

  /* Discovery: stage stacks; selector remains a tap-friendly horizontal rail. */
  .discovery-showcase-shell {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .discovery-showcase-copy {
    order: 1;
  }

  .discovery-showcase-stage {
    order: 2;
    height: min(105vw, 510px);
    margin-top: 1.25rem;
  }

  .discovery-showcase-rail {
    order: 3;
    grid-template-columns: repeat(4, minmax(38vw, 1fr));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .discovery-showcase-rail::-webkit-scrollbar {
    display: none;
  }

  .discovery-showcase-rail button {
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mobile-swipe-hint-discovery {
    margin-top: 1.2rem;
    color: #FFFFFF;
  }

  /* Collection landing: generated boxes and architecture become swipe rails. */
  .collection-box-showcase {
    width: 100%;
    padding: .75rem 0 .75rem 1.15rem;
    overflow: hidden;
  }

  .collection-box-showcase>.mobile-swipe-hint {
    width: calc(100% - 1.15rem);
    margin-right: 1.15rem;
  }

  .collection-box-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 370px);
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 1.15rem .35rem 0;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
  }

  .collection-box-grid::-webkit-scrollbar {
    display: none;
  }

  .collection-box-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .architecture-card-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 370px);
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 1.15rem .5rem 0;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    background: transparent;
  }

  .architecture-card-grid::-webkit-scrollbar {
    display: none;
  }

  .architecture-card,
  .architecture-hold {
    grid-column: auto;
    display: flex;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Four principles compare best as a 2 x 2 grid. */
  .pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(159, 174, 142, .18);
  }

  .pillar-card {
    min-height: 190px;
    grid-template-columns: 1fr;
    padding: 4rem .9rem 1.1rem;
    border: 0;
    background: #f5f1e8;
  }

  .pillar-card-dark {
    background: var(--c-taupe-dark);
  }

  .pillar-card-sage {
    background: var(--c-sage);
  }

  .pillar-card>span {
    top: .9rem;
    left: .9rem;
  }

  .pillar-glyph {
    top: .75rem;
    right: .65rem;
    width: 56px;
    height: 56px;
  }

  .pillar-card h3 {
    font-size: clamp(1.55rem, 6.8vw, 2.1rem);
  }

  .pillar-card p {
    font-size: .65rem;
  }

  /* Sub-collection galleries and product lists: four/three items collapse to two. */
  .physical-collection-story .collection-editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: .65rem;
    padding-bottom: 3rem;
  }

  .physical-collection-story .collection-editorial>figure {
    grid-area: auto;
    aspect-ratio: 4 / 5;
  }

  .physical-collection-story .collection-product-grid.pieces-2,
  .physical-collection-story .collection-product-grid.pieces-3,
  .physical-collection-story .collection-product-grid.pieces-4 {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .7rem;
  }

  .physical-collection-story .product-content {
    padding-top: .85rem;
  }

  .physical-collection-story .product-name {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  }

  .physical-collection-story .product-poetic {
    display: none;
  }

  /* Footer: brand spans full width, link groups compare in two columns. */
  .home-brand-story .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }

  .home-brand-story .footer-brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {

  .pillar-grid,
  .physical-collection-story .collection-editorial,
  .physical-collection-story .collection-product-grid.pieces-2,
  .physical-collection-story .collection-product-grid.pieces-3,
  .physical-collection-story .collection-product-grid.pieces-4,
  .home-brand-story .footer-grid {
    grid-template-columns: 1fr;
  }

  .physical-collection-story .collection-editorial>figure {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 900px) {

  /* Keep both material-story sentences intact, even on narrow phones. */
  .material-theatre-head h2 {
    font-size: clamp(1.25rem, 6.3vw, 3.2rem);
    line-height: 1;
  }

  /* Mobile alignment correction: full slides only, with no clipped next card. */
  .mark-meaning-intro,
  .mark-transformation-head {
    width: 100%;
    text-align: center;
  }

  .mark-meaning-intro h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(2.15rem, 9vw, 3.25rem);
    line-height: .96;
  }

  .mark-meaning-intro h2 em {
    display: block;
  }

  .mark-meaning-intro p {
    text-align: center;
  }

  .mark-transformation-head h2 {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    font-size: clamp(.8rem, 3.7vw, 2.8rem);
    line-height: .96;
    white-space: nowrap;
  }

  .mark-meaning-visuals,
  .mark-transformation-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    overflow: hidden;
  }

  .mark-meaning-visuals img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .mark-transformation-layer {
    inset: 0;
    place-items: center;
  }

  .mark-hero-product-gallery,
  .mark-meaning-nav,
  .mark-transformation-steps,
  .collection-box-grid,
  .architecture-holds {
    grid-auto-columns: 100%;
    gap: 0;
    scroll-padding-inline: 0;
  }

  .mark-hero-product-gallery figure,
  .mark-meaning-nav li,
  .mark-transformation-steps li,
  .collection-box-card,
  .architecture-hold {
    width: 100%;
    scroll-snap-align: center;
  }

  .mark-meaning-nav button {
    grid-template-columns: 1fr;
    grid-template-areas: 'index' 'title' 'line';
    justify-items: center;
    gap: .35rem;
    text-align: center;
  }

  .mark-transformation-steps button {
    grid-template-columns: 1fr;
    grid-template-areas: 'number' 'title' 'copy';
    justify-items: center;
    gap: .35rem;
    text-align: center;
  }

  .mark-meaning-nav button span,
  .mark-meaning-nav button strong,
  .mark-meaning-nav button em,
  .mark-transformation-steps button>span,
  .mark-transformation-steps button strong,
  .mark-transformation-steps button small {
    justify-self: center;
    text-align: center;
  }

  .discovery-showcase-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .discovery-showcase-copy {
    width: 100%;
    text-align: center;
  }

  .discovery-showcase-copy h2 {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1.75rem, 8vw, 2.7rem);
    line-height: 1;
    white-space: nowrap;
  }

  .discovery-showcase-copy h2 em {
    display: inline;
  }

  .discovery-showcase-intro {
    margin-inline: auto;
    text-align: center;
  }
}

/* Desktop transformation title stays as one complete editorial line. */
@media (min-width: 901px) {
  .mark-transformation-head h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(2.25rem, 3.35vw, 3.35rem);
    white-space: nowrap;
  }
}

/* Final transformation chapter: vertical scroll advances all four states. */
.mark-transformation[data-transformation-story] {
  position: relative;
  height: 340svh;
  min-height: 2200px;
  padding: 0;
}

.mark-transformation[data-transformation-story] .mark-transformation-sticky {
  position: sticky;
  top: 0;
  display: flex;
  width: 100%;
  height: 100svh;
  min-height: 0;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-height) + .65rem) 0 .65rem;
}

.mark-transformation[data-transformation-story] .mark-transformation-shell {
  width: 100%;
  height: calc(100svh - var(--nav-height) - 1.3rem);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.65rem, 1.4vh, 1.1rem);
}

.mark-transformation[data-transformation-story] .mark-transformation-experience {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.mark-transformation[data-transformation-story] .mark-transformation-stage {
  height: 100%;
  min-height: 0;
}

.mark-transformation-stage[data-state='1'] .transformation-held {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.mark-transformation-stage[data-state='1'] .transformation-held img {
  width: min(38vh, 330px);
  min-width: 190px;
  opacity: 1;
}

/* Hidden in every form: center-based cover crop on every active image. */
.discovery-showcase-stage .discovery-showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The two generated exterior-story images fill their scene from the center. */
.material-theatre-scene[data-material-scene='2'] img,
.material-theatre-scene[data-material-scene='3'] img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 900px) {
  .mark-transformation[data-transformation-story] {
    height: 290svh;
    min-height: 1850px;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-sticky {
    padding: calc(var(--nav-height) + .35rem) 0 .45rem;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-shell {
    height: calc(100svh - var(--nav-height) - .8rem);
    gap: .4rem;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-experience {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: .4rem;
    overflow: hidden;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-stage {
    order: 1;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .mark-transformation[data-transformation-story] .mobile-swipe-hint-transformation {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps {
    order: 2;
    flex: 0 0 82px;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps button {
    min-height: 80px;
    padding: .65rem .8rem;
  }
}

/* Hidden in every form: full-bleed imagery controlled by vertical scroll. */
.discovery-showcase[data-discovery-lens] {
  position: relative;
  height: 400svh;
  min-height: 2500px;
  padding: 0;
  overflow: visible;
  background: #FFFFFF;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
  position: relative;
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  grid-template: minmax(0, 1fr) auto / 1fr;
  gap: 0;
  margin: 0;
  padding: var(--nav-height) 0 0;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  background: #f5f1e8;
  box-shadow: none;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-stage::before {
  background: linear-gradient(90deg, rgba(28, 24, 19, .68), transparent 42%, transparent 78%, rgba(28, 24, 19, .08));
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-slide,
.discovery-showcase[data-discovery-lens] .discovery-showcase-slide img {
  width: 100%;
  height: 100%;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-slide img {
  object-fit: cover;
  object-position: 50% 50%;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
  position: relative;
  z-index: 5;
  grid-area: 1 / 1;
  align-self: end;
  width: min(100%, 520px);
  margin: 0 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.15rem, 4vw, 4rem);
  padding: clamp(1rem, 2vw, 1.75rem);
  background: rgba(48, 43, 35, .72);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2,
.discovery-showcase[data-discovery-lens] .discovery-showcase-caption h3 {
  color: #000000;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
  max-width: none;
  font-size: clamp(2.8rem, 5vw, 5.7rem);
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 em {
  display: inline;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-intro,
.discovery-showcase[data-discovery-lens] .discovery-showcase-caption p {
  color: #FFFFFF;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
  display: block;
  margin-top: 1rem;
  padding-top: .75rem;
  border-color: rgba(245, 241, 232, .28);
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
  position: relative;
  z-index: 6;
  grid-area: 2 / 1;
  width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 4rem);
  border-color: rgba(245, 241, 232, .24);
  background: #FFFFFF;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-rail button {
  padding: 1.15rem .5rem;
  color: #FFFFFF;
  text-align: center;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-rail button.is-active,
.discovery-showcase[data-discovery-lens] .discovery-showcase-rail button:hover,
.discovery-showcase[data-discovery-lens] .discovery-showcase-rail button:focus-visible {
  color: #000000;
}

@media (max-width: 900px) {
  .discovery-showcase[data-discovery-lens] {
    height: 330svh;
    min-height: 2100px;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    display: grid;
    height: 100%;
    padding: var(--nav-height) 0 0;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
    order: initial;
    height: 100%;
    margin: 0;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    width: calc(100% - 2rem);
    margin: 0 1rem 1rem;
    padding: .85rem 1rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-kicker,
  .discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
    display: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 3rem);
    white-space: nowrap;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
    margin-top: .55rem;
    padding-top: .55rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption h3 {
    font-size: 1.35rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption p {
    margin-top: .2rem;
    font-size: .72rem;
  }

  .discovery-showcase[data-discovery-lens] .mobile-swipe-hint-discovery,
  .discovery-showcase[data-discovery-lens] .discovery-showcase-seal {
    display: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
    order: initial;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    padding: 0 .35rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail button {
    min-width: 0;
    padding: 1rem .2rem;
    font-size: .56rem;
  }
}

/* Tablet and mobile: keep the jewellery visible instead of covering it with copy. */
@media (max-width: 1100px) {
  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage::before {
    background: linear-gradient(180deg, transparent 58%, rgba(28, 24, 19, .4));
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    align-self: end;
    width: auto;
    max-width: calc(100% - 2rem);
    margin: 0 1rem 1rem;
    padding: .7rem .85rem;
    background: rgba(48, 43, 35, .52);
    backdrop-filter: blur(4px);
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-kicker,
  .discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
    display: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    max-width: none;
    font-size: clamp(1.45rem, 4.5vw, 2.2rem);
    line-height: 1;
    white-space: nowrap;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
    margin-top: .45rem;
    padding-top: .45rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption h3 {
    font-size: 1.15rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption p {
    display: none;
  }
}

/* Discovery desktop balance: intentional heading wrap and compact vertical rhythm. */
@media (min-width: 1101px) {
  .discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    grid-template-columns: minmax(520px, .78fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 3.6vw, 4.25rem);
    row-gap: .55rem;
    padding-top: clamp(.65rem, 1.2vh, 1rem);
    padding-bottom: .45rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    align-self: start;
    padding-top: clamp(2rem, 6vh, 4.5rem);
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    max-width: none;
    font-size: clamp(3.75rem, 4.45vw, 5.35rem);
    line-height: .9;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 span,
  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 em {
    display: block;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 span {
    white-space: nowrap;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
    max-width: 30rem;
    margin-top: 1.15rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
    width: min(100%, 30rem);
    margin-top: 1.35rem;
    padding-top: .85rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
    align-self: start;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
    min-height: 46px;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail button {
    padding-top: .7rem;
    padding-bottom: .5rem;
  }
}

/* Hero film fills the physical viewport while the lightweight source starts instantly. */
.mark-film-hero,
.mark-film-layer,
.mark-film-video {
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh;
  max-width: none !important;
  max-height: none !important;
}

.mark-film-video {
  display: block;
  object-fit: cover !important;
  object-position: 50% 50%;
  background: #f5f1e8;
}

@supports not (height: 100svh) {

  .mark-film-hero,
  .mark-film-layer,
  .mark-film-video {
    height: 100vh !important;
    min-height: 100vh;
  }
}

.mark-film-hero:not(.is-segment-ready) .mark-film-video {
  opacity: 0;
}

.mark-film-hero.is-segment-ready .mark-film-video {
  opacity: 1;
}

/* Transformation story — four transparent objects connected as one making journey. */
.mark-transformation[data-transformation-story] {
  --transformation-progress: 25%;
  height: 360svh;
  min-height: 2380px;
  background:
    radial-gradient(circle at 76% 46%, rgba(190, 146, 45, .12), transparent 29%),
    radial-gradient(circle at 15% 90%, rgba(255, 255, 255, .72), transparent 32%),
    #f5f0e7;
  color: #000000;
}

.mark-transformation[data-transformation-story] .mark-transformation-sticky {
  height: 100svh;
  padding: calc(var(--nav-height) + clamp(.7rem, 1.5vh, 1.2rem)) 0 clamp(.7rem, 1.5vh, 1.2rem);
}

.mark-transformation[data-transformation-story] .mark-transformation-shell {
  display: grid;
  width: min(1440px, calc(100% - clamp(2rem, 6vw, 7rem)));
  height: calc(100svh - var(--nav-height) - clamp(1.4rem, 3vh, 2.4rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.8rem, 1.8vh, 1.35rem);
  margin-inline: auto;
  padding: 0;
}

.mark-transformation[data-transformation-story] .mark-transformation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
  margin: 0;
  padding: 0 0 clamp(.8rem, 1.7vh, 1.25rem);
  border-bottom: 1px solid rgba(72, 61, 46, .18);
}

.mark-transformation-kicker {
  display: block;
  margin-bottom: .55rem;
  color: #000000;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.mark-transformation[data-transformation-story] .mark-transformation-head h2 {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #000000;
  font-size: clamp(2rem, 3.05vw, 3.35rem);
  line-height: .98;
  white-space: nowrap;
}

.mark-transformation[data-transformation-story] .mark-transformation-head h2 em {
  color: #000000;
}

.mark-transformation[data-transformation-story] .mark-transformation-head>p {
  max-width: 31rem;
  margin: 0 0 .15rem;
  color: #000000;
  font-size: clamp(.76rem, .9vw, .9rem);
  line-height: 1.65;
}

.mark-transformation[data-transformation-story] .mark-transformation-experience {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3.25rem);
}

.mark-transformation[data-transformation-story] .mobile-swipe-hint-transformation {
  display: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps {
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  height: 100%;
  min-height: 0;
  gap: 0;
  margin: 0;
  padding: 0 0 0 1.6rem;
  overflow: visible;
  list-style: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps::before,
.mark-transformation[data-transformation-story] .mark-transformation-steps::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  display: block;
  width: 1px;
  height: auto;
  content: '';
  transform: none;
  transform-origin: top;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps::before {
  background: rgba(72, 61, 46, .2);
}

.mark-transformation[data-transformation-story] .mark-transformation-steps::after {
  bottom: auto;
  height: var(--transformation-progress);
  background: #bd920f;
  transition: height .7s cubic-bezier(.16, 1, .3, 1);
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li,
.mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  opacity: 1;
  transform: none;
  border-top: 1px solid rgba(72, 61, 46, .14);
  background: transparent;
  transition: background .45s ease;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active {
  background: linear-gradient(90deg, rgba(190, 146, 45, .1), transparent 76%);
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li:last-child {
  border-bottom: 1px solid rgba(72, 61, 46, .14);
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li::before {
  position: absolute;
  top: 50%;
  left: -1.85rem;
  display: block;
  width: 9px;
  height: 9px;
  content: '';
  border: 1px solid #a88627;
  border-radius: 50%;
  background: #f5f0e7;
  transform: translateY(-50%);
  transition: background .35s ease, box-shadow .35s ease;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active::before {
  background: #c79d22;
  box-shadow: 0 0 0 7px rgba(199, 157, 34, .13);
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li::after {
  display: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps button {
  display: grid;
  width: 100%;
  min-height: 0;
  grid-template: auto auto / 2.5rem 1fr;
  grid-template-areas: 'number title' 'number copy';
  align-content: center;
  align-items: center;
  gap: .25rem .75rem;
  padding: .65rem .5rem;
  color: #000000;
  text-align: left;
  transition: color .35s ease, padding-left .45s cubic-bezier(.16, 1, .3, 1);
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active button {
  padding-left: .85rem;
  color: #000000;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps button>span {
  grid-area: number;
  align-self: center;
  color: #000000;
  font-size: .58rem;
  letter-spacing: .18em;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps button strong {
  grid-area: title;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.55vw, 1.7rem);
  font-weight: 400;
  line-height: 1;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps button small {
  display: block;
  grid-area: copy;
  color: #000000;
  font-size: clamp(.64rem, .72vw, .75rem);
  line-height: 1.35;
  opacity: .72;
  transition: opacity .35s ease;
}

.mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active button small {
  opacity: 1;
}

.mark-transformation[data-transformation-story] .mark-transformation-stage {
  position: relative;
  grid-area: 1 / 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(111, 91, 58, .13);
  border-radius: clamp(1.4rem, 2.7vw, 2.75rem);
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .98) 0 22%, rgba(252, 249, 242, .88) 45%, rgba(230, 219, 199, .68) 100%);
  box-shadow: 0 30px 90px rgba(75, 62, 40, .12);
  isolation: isolate;
}

.mark-transformation[data-transformation-story] .mark-transformation-stage::before {
  position: absolute;
  inset: 9%;
  z-index: 0;
  display: block;
  content: '';
  border: 1px solid rgba(181, 138, 10, .25);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-stage::after {
  position: absolute;
  top: 50%;
  right: 7%;
  left: 7%;
  z-index: 0;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(181, 138, 10, .22), transparent);
  pointer-events: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  opacity: .42;
  background:
    radial-gradient(circle at center, rgba(181, 138, 10, .08), transparent 38%),
    linear-gradient(120deg, rgba(255, 255, 255, .5), transparent 48%);
}

.mark-transformation[data-transformation-story] .mark-transformation-grid i {
  display: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(58vh, 62%);
  aspect-ratio: 1;
  opacity: .62;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-orbit i {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid rgba(181, 138, 10, .18);
  border-radius: 50%;
}

.mark-transformation[data-transformation-story] .mark-transformation-orbit i:last-child {
  inset: 15%;
}

.transformation-stage-seal {
  position: absolute;
  top: clamp(.8rem, 2vw, 1.5rem);
  right: clamp(.8rem, 2vw, 1.5rem);
  z-index: 4;
  display: grid;
  grid-template-columns: auto 28px auto;
  align-items: center;
  gap: .65rem;
  color: #000000;
  font-size: .5rem;
  letter-spacing: .16em;
  padding: .55rem .7rem;
  border: 1px solid rgba(181, 138, 10, .2);
  border-radius: 999px;
  background: rgba(255, 252, 245, .64);
  backdrop-filter: blur(8px);
  text-transform: uppercase;
}

.transformation-stage-seal span {
  color: #000000;
  font-weight: 700;
}

.transformation-stage-seal i {
  display: block;
  height: 1px;
  background: rgba(181, 138, 10, .5);
}

.mark-transformation[data-transformation-story] .mark-transformation-layer {
  position: absolute;
  inset: 2.5rem 1rem 3.5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(.9) rotate(-1.5deg);
  transition: opacity .65s ease, visibility .65s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.mark-transformation[data-transformation-story] .mark-transformation-stage[data-state='0'] .transformation-diamond,
.mark-transformation[data-transformation-story] .mark-transformation-stage[data-state='1'] .transformation-held,
.mark-transformation[data-transformation-story] .mark-transformation-stage[data-state='2'] .transformation-placed,
.mark-transformation[data-transformation-story] .mark-transformation-stage[data-state='3'] .transformation-worn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mark-transformation[data-transformation-story] .mark-transformation-layer img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 24px rgba(58, 48, 33, .15));
}

.mark-transformation[data-transformation-story] .transformation-diamond img {
  width: min(42vh, 46%);
  height: auto;
  animation: transformationFloat 5.8s ease-in-out infinite;
}

.mark-transformation[data-transformation-story] .transformation-held img {
  width: min(46vh, 51%);
  min-width: 0;
  height: auto;
}

.mark-transformation[data-transformation-story] .transformation-placed,
.mark-transformation[data-transformation-story] .transformation-worn {
  transform: scale(.9) rotate(-1.5deg);
}

.mark-transformation[data-transformation-story] .transformation-placed img,
.mark-transformation[data-transformation-story] .transformation-worn img {
  width: min(94%, 980px);
  height: min(92%, 660px);
  object-fit: contain;
  object-position: center;
}

.mark-transformation[data-transformation-story] .mark-transformation-stage figcaption {
  position: absolute;
  right: auto;
  bottom: clamp(.75rem, 1.6vw, 1.25rem);
  left: clamp(.85rem, 2vw, 1.5rem);
  z-index: 4;
  display: flex;
  width: auto;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000000;
  text-transform: none;
}

.mark-transformation[data-transformation-story] .mark-transformation-stage figcaption span {
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
}

.mark-transformation[data-transformation-story] .mark-transformation-stage figcaption b {
  color: #000000;
  font-size: .68rem;
  font-weight: 500;
}

.mark-transformation[data-transformation-story] .mark-transformation-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
  padding: .15rem 0 0;
  border: 0;
}

.mark-transformation-progress-meta {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.mark-transformation-progress-meta>span {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  color: #000000;
  font-size: .55rem;
  letter-spacing: .12em;
}

.mark-transformation-progress-meta>span b {
  color: #000000;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
}

.mark-transformation-progress-meta>span i {
  font-style: normal;
}

.mark-transformation-progress-meta>small {
  display: block;
  color: #000000;
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mark-transformation-next {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(155, 115, 5, .42);
  color: #000000;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateX(-12px);
  transition: color .3s ease, opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.mark-transformation-next span {
  font-size: 1rem;
  line-height: 0;
  transition: transform .3s ease;
}

.mark-transformation[data-story-state='3'] .mark-transformation-next {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.mark-transformation-next:hover,
.mark-transformation-next:focus-visible {
  color: #000000;
  outline: 0;
}

.mark-transformation-next:hover span,
.mark-transformation-next:focus-visible span {
  transform: translateX(4px);
}

@media (min-width: 901px) and (max-width: 1120px) {
  .mark-transformation[data-transformation-story] .mark-transformation-head {
    grid-template-columns: 1fr;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-head>p {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-head h2 {
    font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  }
}

@media (max-width: 900px) {
  .mark-transformation[data-transformation-story] {
    height: auto;
    min-height: 0;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-sticky {
    position: relative;
    top: auto;
    height: auto;
    align-items: stretch;
    padding: calc(var(--nav-height) + 2.25rem) 0 3.5rem;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-shell {
    width: calc(100% - 1.5rem);
    height: auto;
    grid-template-rows: auto auto auto;
    gap: 1rem;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-head {
    display: block;
    padding-bottom: .55rem;
  }

  .mark-transformation-kicker {
    margin-bottom: .3rem;
    font-size: .48rem;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-head h2 {
    font-size: clamp(1.55rem, 7vw, 2.35rem);
    line-height: .98;
    white-space: normal;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-head>p {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-experience {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: .8rem;
    overflow: visible;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-stage {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    min-height: 430px;
    aspect-ratio: 4 / 5;
  }

  .mark-transformation[data-transformation-story] .mobile-swipe-hint-transformation {
    display: flex;
    grid-area: 2 / 1;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 .15rem;
    color: #000000;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .mark-transformation[data-transformation-story] .mobile-swipe-hint-transformation i {
    color: #000000;
    font-size: 1rem;
    font-style: normal;
  }

  .transformation-stage-seal {
    top: .65rem;
    right: .65rem;
  }

  .transformation-stage-seal small,
  .transformation-stage-seal i {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-stage::before {
    inset: 13% 7%;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-layer {
    inset: 1.8rem .35rem 3rem;
  }

  .mark-transformation[data-transformation-story] .transformation-diamond img {
    width: min(56vw, 260px);
  }

  .mark-transformation[data-transformation-story] .transformation-held img {
    width: min(64vw, 300px);
  }

  .mark-transformation[data-transformation-story] .transformation-placed img,
  .mark-transformation[data-transformation-story] .transformation-worn img {
    width: 100%;
    height: 100%;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-stage figcaption {
    right: .7rem;
    bottom: .65rem;
    left: .7rem;
    justify-content: space-between;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-stage figcaption span {
    font-size: 1.05rem;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-stage figcaption b {
    display: block;
    max-width: 48%;
    font-size: .57rem;
    text-align: right;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps {
    grid-area: 3 / 1;
    display: flex;
    height: auto;
    gap: .65rem;
    margin-inline: -.75rem;
    padding: .15rem .75rem .8rem;
    overflow-x: auto;
    scroll-padding-inline: .75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps::-webkit-scrollbar {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps::before,
  .mark-transformation[data-transformation-story] .mark-transformation-steps::after {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps li,
  .mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active,
  .mark-transformation[data-transformation-story] .mark-transformation-steps li:last-child {
    flex: 0 0 min(72vw, 270px);
    width: min(72vw, 270px);
    min-width: 0;
    border: 1px solid rgba(72, 61, 46, .13);
    background: rgba(255, 252, 245, .48);
    scroll-snap-align: center;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps li::before {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active {
    border-color: rgba(155, 115, 5, .5);
    background: rgba(255, 252, 245, .88);
    box-shadow: 0 14px 34px rgba(75, 62, 40, .08);
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps button,
  .mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active button {
    display: grid;
    min-height: 118px;
    grid-template: auto auto auto / 1fr;
    grid-template-areas: 'number' 'title' 'copy';
    justify-items: start;
    align-content: center;
    gap: .45rem;
    padding: 1rem 1.15rem;
    text-align: left;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps button>span {
    justify-self: start;
    font-size: .5rem;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps button strong {
    justify-self: start;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    text-align: left;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps button small {
    display: block;
    justify-self: start;
    max-width: 22ch;
    font-size: .65rem;
    text-align: left;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-foot {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    padding-top: .5rem;
  }

  .mark-transformation-progress-meta {
    width: 100%;
    justify-content: space-between;
  }

  .mark-transformation-progress-meta>small {
    font-size: .48rem;
  }

  .mark-transformation-next {
    align-self: flex-end;
    font-size: .52rem;
  }
}

@media (max-width: 390px),
(max-height: 690px) and (max-width: 900px) {
  .mark-transformation[data-transformation-story] .mark-transformation-head h2 {
    font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  }

  .mark-transformation-kicker {
    display: none;
  }

  .mark-transformation[data-transformation-story] .mark-transformation-steps button,
  .mark-transformation[data-transformation-story] .mark-transformation-steps li.is-active button {
    min-height: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mark-transformation[data-transformation-story] .mark-transformation-layer,
  .mark-transformation[data-transformation-story] .mark-transformation-steps::after,
  .mark-transformation-next,
  .mark-transformation-next span {
    animation: none;
    transition: none;
  }
}

/* Footer refresh: available journeys plus a clear concierge contact path. */
.home-brand-story .footer {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 7rem) 0 2.5rem;
  border-top: 1px solid rgba(201, 162, 39, 0.4);
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(201, 162, 39, 0.09) 0%, transparent 75%),
    radial-gradient(circle at 88% 12%, rgba(201, 162, 39, 0.05), transparent 23%),
    linear-gradient(180deg, #151310 0%, #0C0B09 100%);
  color: #000000;
  box-shadow: inset 0 1px 0 rgba(255, 240, 179, 0.12);
}

.home-brand-story .footer::before {
  position: absolute;
  top: -34vw;
  right: -18vw;
  width: 58vw;
  aspect-ratio: 1;
  content: '';
  border: 1px solid rgba(201, 162, 39, .14);
  border-radius: 50%;
  pointer-events: none;
}

.footer-contact-panel {
  position: relative;
  display: grid;
  min-height: 210px;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .75fr) minmax(150px, .42fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(3.5rem, 6vw, 6rem);
  padding: clamp(1.8rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.28);
  background: linear-gradient(135deg, rgba(32, 28, 22, 0.88) 0%, rgba(18, 16, 12, 0.96) 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 240, 179, 0.12);
  backdrop-filter: blur(12px);
  border-radius: 4px;
}

.footer-contact-copy,
.footer-contact-actions {
  position: relative;
  z-index: 2;
}

.footer-contact-copy>span {
  display: block;
  margin-bottom: .7rem;
  color: #C9A227;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.footer-contact-copy h3 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3.7vw, 4rem);
  font-weight: 400;
  line-height: .95;
}

.footer-contact-copy p {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: #FFFFFF;
  font-size: clamp(.78rem, .95vw, .92rem);
  line-height: 1.68;
}

.footer-contact-actions {
  display: grid;
  gap: .65rem;
}

.footer-contact-actions a,
.footer-contact-actions button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.25rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  border-radius: 2px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.footer-contact-primary {
  border: 1px solid #d9b445;
  background: linear-gradient(135deg, #e5c358 0%, #c9a227 100%);
  color: #000000;
  box-shadow: 0 4px 16px rgba(201, 162, 39, 0.25);
}

.footer-contact-primary span {
  font-size: 1rem;
  line-height: 1;
}

.footer-contact-secondary {
  border: 1px solid rgba(245, 241, 232, .3);
  background: rgba(245, 241, 232, .04);
  color: #000000;
}

.footer-contact-actions a:hover,
.footer-contact-actions a:focus-visible,
.footer-contact-actions button:hover,
.footer-contact-actions button:focus-visible {
  transform: translateY(-2px);
}

.footer-contact-primary:hover,
.footer-contact-primary:focus-visible {
  border-color: #f5da78;
  background: linear-gradient(135deg, #f5da78 0%, #d9b445 100%);
  color: #000000;
  box-shadow: 0 6px 22px rgba(201, 162, 39, 0.4);
}

.footer-contact-secondary:hover,
.footer-contact-secondary:focus-visible {
  border-color: rgba(234, 208, 116, .6);
  background: rgba(234, 208, 116, .12);
  color: #FFFFFF;
}

.footer-contact-mark {
  position: relative;
  z-index: 1;
  width: min(13vw, 160px);
  aspect-ratio: 1;
  justify-self: end;
}

.footer-contact-mark i {
  position: absolute;
  border: 1px solid rgba(224, 190, 92, .38);
  border-radius: 50%;
}

.footer-contact-mark i:first-child {
  inset: 0;
}

.footer-contact-mark i:nth-child(2) {
  inset: 20%;
}

.footer-contact-mark span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #d9b445;
  border-radius: 50%;
  background: #f8f3e9;
  box-shadow: 0 0 0 10px rgba(217, 180, 69, .11);
  transform: translate(-50%, -50%);
}

.home-brand-story .footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.home-brand-story .footer-brand-col {
  padding-right: clamp(0rem, 3vw, 3rem);
}

.home-brand-story .footer .footer-brand-lockup {
  margin-bottom: 0;
}

.home-brand-story .footer-brand-col p {
  max-width: 30rem;
  margin-top: 1.5rem;
  color: #FFFFFF;
  font-size: .83rem;
  line-height: 1.75;
}

.home-brand-story .footer-heading {
  margin-bottom: 1.3rem;
  color: #C9A227;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .24em;
}

.home-brand-story .footer-links {
  gap: .72rem;
}

.home-brand-story .footer-links a {
  position: relative;
  display: inline-block;
  color: #FFFFFF;
  font-size: .78rem;
  line-height: 1.35;
}

.home-brand-story .footer-links a::after {
  position: absolute;
  right: 0;
  bottom: -.2rem;
  left: 0;
  height: 1px;
  content: '';
  background: #e0be5c;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.home-brand-story .footer-links a:hover,
.home-brand-story .footer-links a:focus-visible {
  color: #FFFFFF;
}

.home-brand-story .footer-links a:hover::after,
.home-brand-story .footer-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.home-brand-story .footer-bottom {
  position: relative;
  z-index: 2;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 241, 232, .16);
  color: #FFFFFF;
  font-size: .65rem;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.home-brand-story .footer-bottom a {
  color: #FFFFFF;
  transition: color .3s ease;
}

.home-brand-story .footer-bottom a:hover,
.home-brand-story .footer-bottom a:focus-visible {
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .footer-contact-panel {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .7fr);
    min-height: 0;
  }

  .footer-contact-mark {
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    width: 180px;
    opacity: .45;
  }

  .home-brand-story .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
  }

  .home-brand-story .footer-brand-col {
    grid-column: 1 / -1;
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  .home-brand-story .footer {
    padding-top: 1rem;
  }

  .footer-contact-panel {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    margin-right: -1rem;
    margin-left: -1rem;
    padding: 1.5rem 1rem;
    border-right: 0;
    border-left: 0;
  }

  .footer-contact-copy h3 {
    font-size: clamp(2.25rem, 12vw, 3.4rem);
  }

  .footer-contact-actions {
    max-width: none;
  }

  .home-brand-story .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
  }

  .home-brand-story .footer-brand-col {
    grid-column: 1 / -1;
  }

  .home-brand-story .footer-grid>div:last-child {
    grid-column: 1 / -1;
  }

  .home-brand-story .footer-bottom {
    align-items: flex-start;
    text-align: left;
  }

  .footer-legal-links {
    justify-content: flex-start;
  }
}

@media (max-width: 380px) {
  .home-brand-story .footer-grid {
    grid-template-columns: 1fr;
  }

  .home-brand-story .footer-grid>div:last-child {
    grid-column: auto;
  }
}

/* Collection portfolio pages — editorial showcase, never a shop grid. */
.physical-collection-story {
  --collection-gutter: max(1.15rem, calc((100vw - 1360px) / 2 + 2rem));
  --collection-section-space: clamp(5rem, 9vw, 9rem);
  background: #f3efe6;
  color: #000000;
}

.collection-page-map {
  position: sticky;
  z-index: 24;
  top: var(--nav-height);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 var(--collection-gutter);
  border-bottom: 1px solid rgba(159, 174, 142, .18);
  background: rgba(243, 239, 230, .94);
  backdrop-filter: blur(16px);
}

.collection-page-map a {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: .6rem .75rem;
  border-right: 1px solid rgba(159, 174, 142, .14);
  color: #000000;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  transition: color .3s ease, background .3s ease;
}

.collection-page-map a:first-child {
  border-left: 1px solid rgba(159, 174, 142, .14);
}

.collection-page-map a::after {
  position: absolute;
  right: 22%;
  bottom: 0;
  left: 22%;
  height: 2px;
  content: '';
  background: #b4870a;
  transform: scaleX(0);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.collection-page-map a:hover,
.collection-page-map a:focus-visible {
  color: #000000;
  background: rgba(183, 140, 20, .06);
}

.collection-page-map a:hover::after,
.collection-page-map a:focus-visible::after {
  transform: scaleX(1);
}

#collection-expression,
#collection-study,
#forms-of-identity,
#collection-presentation {
  scroll-margin-top: calc(var(--nav-height) + 54px);
}

.physical-collection-story .collection-story-hero {
  height: 100svh;
  min-height: 680px;
}

.physical-collection-story .collection-story-shade {
  background: linear-gradient(180deg, rgba(25, 22, 18, .38), rgba(25, 22, 18, .03) 42%, rgba(25, 22, 18, .63));
}

.physical-collection-story .collection-story-heading {
  bottom: clamp(3rem, 7vh, 5.5rem);
}

.physical-collection-story .collection-story-heading h1 {
  font-size: clamp(5.5rem, 10vw, 10.5rem);
}

.physical-collection-story .collection-ring-nav {
  right: max(2rem, calc((100vw - 1360px) / 2 + 2rem));
  bottom: clamp(3rem, 7vh, 5.5rem);
  align-items: center;
  gap: .45rem;
}

.physical-collection-story .collection-ring-nav a {
  width: auto;
  height: auto;
  min-height: 36px;
  padding: .55rem .8rem;
  border-radius: 999px;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.physical-collection-story .collection-manifesto {
  /* padding: var(--collection-section-space) 0; */
  background: #f3efe6;
}

.physical-collection-story .collection-manifesto-grid {
  grid-template-columns: minmax(160px, .7fr) minmax(0, 2fr);
  gap: clamp(2rem, 8vw, 8rem);
}

.physical-collection-story .collection-intro {
  max-width: 1050px;
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.collection-portfolio-lead {
  position: relative;
  min-height: min(76vw, 900px);
  overflow: hidden;
  background: #ded8cb;
}

.collection-portfolio-lead>figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.collection-portfolio-lead>figure::after {
  position: absolute;
  inset: 0;
  content: '';
  /* background:
    radial-gradient(circle at 20% 50%, rgba(25, 21, 17, .32), transparent 42%),
    linear-gradient(90deg, rgba(25, 21, 17, .84) 0%, rgba(25, 21, 17, .62) 34%, rgba(25, 21, 17, .2) 58%, transparent 78%); */
}

.collection-portfolio-lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.collection-portfolio-lead-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: max(2rem, calc((100vw - 1360px) / 2 + 2rem));
  width: min(56vw, 860px);
  color: #000000;
  transform: translateY(-50%);
}

.collection-portfolio-lead-copy>span {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .7rem;
  color: #C9A227;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.collection-portfolio-lead-copy>span::after {
  width: clamp(2.75rem, 5vw, 5rem);
  height: 1px;
  content: '';
  background: linear-gradient(90deg, rgba(223, 185, 77, .95), rgba(223, 185, 77, .12));
}

.collection-portfolio-lead-copy h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.6rem, 3vw, 3.65rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(18, 15, 12, .28);
}

.collection-portfolio-lead-copy h2 em {
  display: inline;
  color: #C9A227;
  font-weight: 400;
  font-style: italic;
}

.collection-portfolio-lead-copy p {
  max-width: 31rem;
  margin: .85rem 0 0;
  font-size: clamp(.92rem, 1vw, 1.05rem);
  line-height: 1.65;
}

.physical-collection-story .collection-pieces {
  padding: var(--collection-section-space) 0;
  background: #ede8de;
}

.physical-collection-story .collection-pieces-head {
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(159, 174, 142, .22);
}

.physical-collection-story .collection-pieces-head h2 {
  font-size: clamp(3.2rem, 6vw, 6.8rem);
}

.physical-collection-story .collection-pieces-head>p {
  max-width: 23rem;
  margin: 0 0 .4rem;
  color: #000000;
  font-size: .78rem;
  line-height: 1.6;
  text-align: right;
}

.collection-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.5rem);
}

.collection-portfolio-grid.pieces-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-portfolio-piece {
  min-width: 0;
}

.collection-portfolio-piece figure {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(159, 174, 142, .13);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .9), transparent 37%),
    #e5dfd3;
}

.collection-portfolio-piece figure::after {
  position: absolute;
  right: 9%;
  bottom: 7%;
  left: 9%;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(183, 140, 20, .4), transparent);
}

.collection-portfolio-piece img {
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 2.6vw, 2.75rem);
  object-fit: contain;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}

.collection-portfolio-piece:hover img {
  transform: scale(1.035);
}

.collection-portfolio-piece-copy {
  padding: 1.1rem .15rem 0;
}

.collection-portfolio-piece-copy>span {
  display: block;
  color: #000000;
  font-size: .51rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.collection-portfolio-piece-copy h3 {
  margin: .5rem 0 0;
  color: #000000;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1;
}

.collection-portfolio-piece-copy p {
  margin: .6rem 0 0;
  color: #000000;
  font-size: .7rem;
  line-height: 1.5;
}

.collection-object-story {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  background: #FFFFFF;
}

.collection-object-story figure {
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  align-self: start;
  justify-self: center;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #ded8cb;
}

.collection-object-story figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.collection-object-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.75rem, 4.5vw, 4.5rem);
  color: #000000;
}

.collection-object-story-copy .section-label {
  color: #C9A227;
}

.collection-object-story-copy h2 {
  margin: 1.25rem 0 0;
  color: #000000;
  font-size: clamp(3.6rem, 5.2vw, 6rem);
  font-weight: 400;
  line-height: .86;
}

.collection-object-story-copy h2 em {
  color: #C9A227;
}

.collection-object-story-copy p {
  max-width: 32rem;
  margin: 1.35rem 0 0;
  color: #000000;
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.75;
}

.physical-collection-story .collection-editorial {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

.collection-gold-edit-head {
  width: 100%;
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 1rem clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid rgba(57, 49, 39, .2);
  text-align: center;
}

.collection-gold-edit-head .section-label {
  display: block;
  color: #000000;
}

.collection-gold-edit-head h2 {
  max-width: none;
  margin: clamp(1.35rem, 2.5vw, 2.25rem) auto 0;
  color: #000000;
  font-size: clamp(2.65rem, 4.35vw, 5.3rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
}

.collection-gold-edit-head h2 em {
  color: #000000;
  font-style: italic;
  font-weight: 400;
}

.collection-gold-edit-head p {
  max-width: 32rem;
  margin: 1.15rem auto 0;
  color: #000000;
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.7;
}

.collection-gold-edit-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.65rem, 1.2vw, 1.15rem);
}

.collection-gold-card {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(149, 111, 24, .14);
  background: #f8f3e9;
  color: #000000;
  text-decoration: none;
  transition: border-color .25s ease, transform .35s ease, box-shadow .35s ease;
}

.collection-gold-card figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(149, 111, 24, .12);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .95) 0, rgba(248, 242, 229, .82) 40%, rgba(232, 222, 201, .74) 100%);
}

.collection-gold-card figure>span {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  color: #000000;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.collection-gold-card img {
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(1.15rem, 2.4vw, 2.5rem);
  object-fit: contain;
  object-position: center;
  transition: transform .65s cubic-bezier(.2, .75, .2, 1);
}

.collection-gold-card-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .45rem .75rem;
  align-items: center;
  padding: 1rem 1.05rem 1.15rem;
}

.collection-gold-card-copy small {
  grid-column: 1;
  color: #000000;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.collection-gold-card-copy small i {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 .4rem .12rem;
  border-radius: 50%;
  background: currentColor;
}

.collection-gold-card-copy strong {
  grid-column: 1;
  min-width: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  font-weight: 400;
  line-height: 1.05;
}

.collection-gold-card-copy em {
  display: grid;
  grid-column: 2;
  grid-row: 1 / 3;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(49, 42, 34, .25);
  border-radius: 50%;
  color: #000000;
  font-size: .85rem;
  font-style: normal;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.collection-gold-card:hover img,
.collection-gold-card:focus-visible img {
  transform: scale(1.04);
}

.collection-gold-card:hover .collection-gold-card-copy em,
.collection-gold-card:focus-visible .collection-gold-card-copy em {
  border-color: #a87f19;
  background: #a87f19;
  color: #FFFFFF;
}

.collection-gold-card:hover,
.collection-gold-card:focus-visible {
  border-color: rgba(149, 111, 24, .4);
  box-shadow: 0 18px 44px rgba(73, 54, 24, .08);
  transform: translateY(-4px);
}

.collection-gold-card:focus-visible {
  outline: 2px solid #a87f19;
  outline-offset: 4px;
}

.collection-next-chapter {
  padding: clamp(2rem, 2vw, 2rem);
  background: #7c896f;
  color: #000000;
}

.collection-next-chapter>span {
  display: block;
  margin-bottom: 1rem;
  color: #000000;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.collection-next-chapter a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  border-top: 1px solid rgba(244, 239, 230, .26);
  color: #FFFFFF;
}

.collection-next-chapter strong {
  color: #FFFFFF;
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 400;
  line-height: .8;
}

.collection-next-chapter em {
  padding-bottom: .35rem;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.7vw, 1.45rem);
}

.collection-next-chapter i {
  padding-bottom: .25rem;
  font-size: 2rem;
  font-style: normal;
  transition: transform .35s ease;
}

.collection-next-chapter a:hover i {
  transform: translateX(8px);
}

@media (max-width: 900px) {
  .physical-collection-story {
    --collection-section-space: clamp(4rem, 14vw, 6rem);
  }

  .collection-page-map {
    grid-template-columns: repeat(4, minmax(125px, 1fr));
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .collection-page-map::-webkit-scrollbar {
    display: none;
  }

  .collection-page-map a {
    min-height: 46px;
    scroll-snap-align: start;
    font-size: .44rem;
  }

  #collection-expression,
  #collection-study,
  #forms-of-identity,
  #collection-presentation {
    scroll-margin-top: calc(var(--nav-height) + 46px);
  }

  .physical-collection-story .collection-story-hero {
    height: 88svh;
    min-height: 580px;
  }

  .physical-collection-story .collection-story-heading {
    bottom: 2rem;
  }

  .physical-collection-story .collection-story-heading h1 {
    font-size: clamp(4rem, 18vw, 6.2rem);
  }

  .physical-collection-story .collection-ring-nav {
    top: calc(var(--nav-height) + .65rem);
    right: .75rem;
    bottom: auto;
    left: .75rem;
    justify-content: flex-end;
  }

  .physical-collection-story .collection-ring-nav a {
    min-height: 30px;
    padding: .42rem .55rem;
    font-size: .42rem;
  }

  .physical-collection-story .collection-manifesto-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .physical-collection-story .collection-intro {
    font-size: clamp(2.1rem, 9.5vw, 3.5rem);
  }

  .collection-portfolio-lead {
    display: grid;
    min-height: 0;
    background: #FFFFFF;
  }

  .collection-portfolio-lead>figure {
    position: relative;
    inset: auto;
    aspect-ratio: 3 / 2;
  }

  .collection-portfolio-lead>figure::after {
    display: none;
  }

  .collection-portfolio-lead-copy {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    padding: 2.75rem 1.15rem 3.25rem;
    transform: none;
  }

  .collection-portfolio-lead-copy h2 {
    max-width: none;
    font-size: clamp(2.55rem, 11vw, 4rem);
    white-space: normal;
  }

  .collection-portfolio-lead-copy p {
    max-width: 31rem;
    font-size: .96rem;
  }

  .physical-collection-story .collection-pieces-head {
    display: block;
  }

  .physical-collection-story .collection-pieces-head>p {
    margin-top: 1rem;
    text-align: left;
  }

  .collection-portfolio-grid,
  .collection-portfolio-grid.pieces-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem .65rem;
  }

  .collection-portfolio-piece-copy h3 {
    font-size: clamp(1.15rem, 5vw, 1.55rem);
  }

  .collection-object-story {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .collection-object-story figure {
    width: min(100%, 600px);
    aspect-ratio: 1 / 1;
  }

  .collection-object-story-copy {
    padding: 2.75rem 1.15rem 3rem;
  }

  .collection-object-story-copy h2 {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }

  .physical-collection-story .collection-editorial {
    display: block;
  }

  .collection-gold-edit-head {
    margin-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2rem;
    border-bottom: 0;
  }

  .collection-gold-edit-head h2 {
    max-width: none;
    margin-top: 1.5rem;
  }

  .collection-gold-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collection-gold-card:first-child {
    grid-column: auto;
  }

  .collection-next-chapter {
    padding-right: 1.15rem;
    padding-left: 1.15rem;
  }

  .collection-next-chapter a {
    grid-template-columns: 1fr auto;
  }

  .collection-next-chapter strong {
    font-size: clamp(3.4rem, 16vw, 5.5rem);
  }

  .collection-next-chapter em {
    display: none;
  }
}

@media (max-width: 480px) {

  .collection-portfolio-grid,
  .collection-portfolio-grid.pieces-2 {
    grid-template-columns: 1fr;
  }

  .collection-portfolio-piece figure {
    aspect-ratio: 1 / 1;
  }

  .physical-collection-story .collection-editorial {
    display: block;
  }

  .collection-gold-edit-grid {
    grid-template-columns: 1fr;
  }

  .collection-gold-card:first-child {
    grid-column: auto;
  }

  .collection-gold-card-copy em {
    font-size: .8rem;
  }
}

/* Material contrast theatre — the exterior moves while the gold Mark stays fixed. */
.material-theatre[data-material-theatre] {
  --material-progress: 25%;
  position: relative;
  height: 380svh;
  min-height: 2500px;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 76% 44%, rgba(192, 150, 39, .12), transparent 25%),
    #211e19;
  color: #000000;
}

.material-theatre[data-material-theatre] .material-theatre-sticky {
  position: sticky;
  top: 0;
  display: flex;
  width: 100%;
  height: 100svh;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  padding: calc(var(--nav-height) + clamp(.65rem, 1.4vh, 1rem)) 0 clamp(.65rem, 1.4vh, 1rem);
}

.material-theatre[data-material-theatre] .material-theatre-shell {
  display: grid;
  width: min(1460px, calc(100% - clamp(2rem, 6vw, 7rem)));
  height: calc(100svh - var(--nav-height) - clamp(1.3rem, 2.8vh, 2rem));
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.75rem, 1.6vh, 1.2rem);
  margin-inline: auto;
  padding: 0;
}

.material-theatre[data-material-theatre] .material-theatre-head {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
  padding-bottom: clamp(.7rem, 1.5vh, 1rem);
  border-bottom: 1px solid rgba(244, 239, 229, .15);
}

.material-theatre-kicker {
  display: block;
  margin-bottom: .5rem;
  color: #C9A227;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.material-theatre[data-material-theatre] .material-theatre-head h2 {
  max-width: none;
  margin: 0;
  color: #000000;
  font-size: clamp(2.05rem, 3.2vw, 3.7rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
}

.material-theatre[data-material-theatre] .material-theatre-head h2 span,
.material-theatre[data-material-theatre] .material-theatre-head h2 em {
  display: inline;
  white-space: normal;
}

.material-theatre[data-material-theatre] .material-theatre-head h2 em {
  color: #C9A227;
}

.material-theatre[data-material-theatre] .material-theatre-head>p {
  max-width: 30rem;
  margin: 0 0 .15rem;
  color: #000000;
  font-size: clamp(.72rem, .85vw, .86rem);
  line-height: 1.65;
}

.material-theatre[data-material-theatre] .material-theatre-stage {
  position: relative;
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 50%) minmax(245px, 50%);
  overflow: hidden;
  border: 1px solid rgba(244, 239, 229, .17);
  background: #171511;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .3);
  isolation: isolate;
}

.material-theatre[data-material-theatre] .material-theatre-visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(244, 239, 229, .14);
  background: #d8d7d3;
}

.material-theatre[data-material-theatre] .material-theatre-visual::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: '';
  background:
    linear-gradient(180deg, rgba(20, 17, 13, .15), transparent 24%, transparent 70%, rgba(20, 17, 13, .34)),
    linear-gradient(90deg, transparent 72%, rgba(20, 17, 13, .14));
  pointer-events: none;
}

.material-theatre[data-material-theatre] .material-theatre-worlds {
  position: absolute;
  top: clamp(.7rem, 1.5vw, 1.15rem);
  right: clamp(.7rem, 1.5vw, 1.15rem);
  bottom: auto;
  left: clamp(.7rem, 1.5vw, 1.15rem);
  z-index: 7;
  display: flex;
  height: auto;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  pointer-events: none;
}

.material-theatre[data-material-theatre] .material-theatre-worlds span {
  position: static;
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: 0;
  align-items: center;
  flex: 0 0 auto;
  padding: .35rem .55rem;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  color: #000000;
  font-size: .44rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.material-theatre[data-material-theatre] .material-theatre-worlds span:nth-child(1) {
  background: linear-gradient(135deg, #f4f5f5 0%, #aeb4b7 48%, #e4e7e8 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 5px 16px rgba(32, 29, 24, .12);
}

.material-theatre[data-material-theatre] .material-theatre-worlds span:nth-child(2) {
  border-color: rgba(255, 232, 157, .82);
  background: linear-gradient(135deg, #f4d778 0%, #b7830d 48%, #eecb62 100%);
  color: #000000;
  box-shadow: inset 0 1px rgba(255, 247, 210, .72), 0 6px 18px rgba(164, 117, 9, .28);
}

.material-theatre[data-material-theatre] .material-theatre-worlds span:nth-child(3) {
  background: linear-gradient(135deg, #ffffff 0%, #c5c8c9 48%, #f0f1f1 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 5px 16px rgba(32, 29, 24, .12);
}

.material-theatre[data-material-theatre] .material-theatre-worlds span::after {
  display: none;
}

.material-theatre[data-material-theatre] .material-theatre-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity .7s ease, visibility .7s ease, transform 1.15s cubic-bezier(.16, 1, .3, 1);
}

.material-theatre[data-material-theatre] .material-theatre-scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.material-theatre[data-material-theatre] .material-theatre-scene img,
.material-theatre[data-material-theatre] .material-theatre-scene[data-material-scene='0'] img,
.material-theatre[data-material-theatre] .material-theatre-scene[data-material-scene='2'] img,
.material-theatre[data-material-theatre] .material-theatre-scene[data-material-scene='3'] img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

.material-theatre[data-material-theatre] .material-theatre-stage::after {
  display: none;
}

.material-theatre-visual-label {
  position: absolute;
  bottom: clamp(.75rem, 1.6vw, 1.2rem);
  left: clamp(.8rem, 1.7vw, 1.3rem);
  z-index: 8;
  color: #FFFFFF;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.material-theatre-visual-label::before {
  display: inline-block;
  width: 28px;
  height: 1px;
  margin: 0 .6rem .15rem 0;
  content: '';
  background: #d1a52a;
}

.material-theatre-constant {
  position: relative;
  z-index: 10;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.1rem, 2.5vw, 2.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(209, 165, 42, .16), transparent 34%),
    #29251f;
  text-align: center;
}

.material-theatre-constant::before,
.material-theatre-constant::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  border: 1px solid rgba(209, 165, 42, .17);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.material-theatre-constant::before {
  width: min(25vw, 330px);
  aspect-ratio: 1;
}

.material-theatre-constant::after {
  width: min(19vw, 245px);
  aspect-ratio: 1;
}

.material-theatre-constant-kicker {
  position: absolute;
  top: clamp(.85rem, 1.8vw, 1.35rem);
  left: 50%;
  z-index: 3;
  width: 100%;
  color: #000000;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.material-theatre[data-material-theatre] .material-theatre-mark {
  position: relative;
  z-index: 3;
  top: auto;
  right: auto;
  bottom: auto;
  display: flex;
  grid-template-columns: none;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.material-theatre[data-material-theatre] .material-theatre-mark img {
  width: clamp(110px, 10vw, 170px);
  height: clamp(110px, 10vw, 170px);
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .32));
}

.material-theatre[data-material-theatre] .material-theatre-mark span {
  display: grid;
  gap: .15rem;
}

.material-theatre[data-material-theatre] .material-theatre-mark b {
  color: #C9A227;
  font-size: .53rem;
  letter-spacing: .2em;
}

.material-theatre[data-material-theatre] .material-theatre-mark small {
  color: #000000;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
}

.material-theatre[data-material-theatre] .material-theatre-copy {
  position: relative;
  z-index: 3;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: 18rem;
  min-height: 2.7em;
  margin: clamp(1rem, 2.5vh, 1.8rem) 0 0;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.15;
  text-shadow: none;
}

.material-theatre-promise {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
  padding-top: .75rem;
  border-top: 1px solid rgba(244, 239, 229, .14);
  color: #000000;
  font-size: .49rem;
  line-height: 1.55;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.material-theatre[data-material-theatre] .material-theatre-controls {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-rows: auto auto;
  gap: .5rem;
  justify-self: stretch;
}

.material-theatre[data-material-theatre] .material-theatre-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  color: #000000;
  font-family: var(--font-sans);
  text-transform: none;
}

.material-theatre[data-material-theatre] .material-theatre-labels button {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: .65rem;
  min-height: 42px;
  padding: .3rem clamp(.35rem, 1.2vw, 1rem);
  border-right: 1px solid rgba(244, 239, 229, .12);
  color: #000000;
  text-align: left;
  transition: color .35s ease, background .35s ease;
}

.material-theatre[data-material-theatre] .material-theatre-labels button:last-child {
  border-right: 0;
}

.material-theatre[data-material-theatre] .material-theatre-labels button.is-active,
.material-theatre[data-material-theatre] .material-theatre-labels button:hover,
.material-theatre[data-material-theatre] .material-theatre-labels button:focus-visible {
  color: #000000;
  background: rgba(244, 239, 229, .035);
}

.material-theatre[data-material-theatre] .material-theatre-labels button span {
  color: #C9A227;
  font-size: .48rem;
  letter-spacing: .15em;
}

.material-theatre[data-material-theatre] .material-theatre-labels button b {
  font-family: var(--font-serif);
  font-size: clamp(.85rem, 1.1vw, 1.05rem);
  font-weight: 400;
}

.material-theatre-progress {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(244, 239, 229, .17);
}

.material-theatre-progress i {
  display: block;
  width: var(--material-progress);
  height: 100%;
  background: #d1a52a;
  transition: width .65s cubic-bezier(.16, 1, .3, 1);
}

.material-theatre[data-material-theatre] .material-theatre-controls input[type='range'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .material-theatre[data-material-theatre] {
    height: 340svh;
    min-height: 2150px;
    padding: 0;
  }

  .material-theatre[data-material-theatre] .material-theatre-sticky {
    padding: calc(var(--nav-height) + .5rem) 0 .5rem;
  }

  .material-theatre[data-material-theatre] .material-theatre-shell {
    width: calc(100% - 1.5rem);
    height: calc(100svh - var(--nav-height) - 1rem);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .5rem;
  }

  .material-theatre[data-material-theatre] .material-theatre-head {
    display: block;
    padding-bottom: .5rem;
  }

  .material-theatre-kicker {
    margin-bottom: .28rem;
    font-size: .46rem;
  }

  .material-theatre[data-material-theatre] .material-theatre-head h2 {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    line-height: .98;
  }

  .material-theatre[data-material-theatre] .material-theatre-head h2 span,
  .material-theatre[data-material-theatre] .material-theatre-head h2 em {
    display: block;
  }

  .material-theatre[data-material-theatre] .material-theatre-head>p {
    display: none;
  }

  .material-theatre[data-material-theatre] .material-theatre-stage {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 132px;
  }

  .material-theatre[data-material-theatre] .material-theatre-visual {
    border-right: 0;
    border-bottom: 1px solid rgba(244, 239, 229, .14);
  }

  .material-theatre[data-material-theatre] .material-theatre-worlds {
    top: .55rem;
    right: .55rem;
    left: .55rem;
    gap: .25rem;
  }

  .material-theatre[data-material-theatre] .material-theatre-worlds span {
    padding: .28rem .38rem;
    font-size: .36rem;
  }

  .material-theatre[data-material-theatre] .material-theatre-constant {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: .15rem .7rem;
    padding: .6rem .75rem;
    text-align: left;
  }

  .material-theatre-constant::before {
    left: 47px;
    width: 112px;
  }

  .material-theatre-constant::after {
    left: 47px;
    width: 80px;
  }

  .material-theatre-constant-kicker {
    position: static;
    grid-area: 1 / 2;
    width: auto;
    font-size: .4rem;
    transform: none;
  }

  .material-theatre[data-material-theatre] .material-theatre-mark {
    grid-area: 1 / 1 / 3 / 2;
    gap: 0;
  }

  .material-theatre[data-material-theatre] .material-theatre-mark img {
    width: 76px;
    height: 76px;
  }

  .material-theatre[data-material-theatre] .material-theatre-mark span {
    display: none;
  }

  .material-theatre[data-material-theatre] .material-theatre-copy {
    grid-area: 2 / 2;
    align-self: start;
    min-height: 0;
    margin: .15rem 0 0;
    font-size: clamp(.85rem, 4vw, 1rem);
    text-align: left;
  }

  .material-theatre-promise {
    display: none;
  }

  .material-theatre[data-material-theatre] .material-theatre-labels button {
    display: grid;
    min-height: 42px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .15rem;
    padding: .25rem .05rem;
    text-align: center;
  }

  .material-theatre[data-material-theatre] .material-theatre-labels button span {
    font-size: .4rem;
  }

  .material-theatre[data-material-theatre] .material-theatre-labels button b {
    font-family: var(--font-sans);
    font-size: clamp(.52rem, 2.5vw, .68rem);
    font-weight: 700;
  }

  .material-theatre-visual-label {
    bottom: .55rem;
    left: .6rem;
    font-size: .4rem;
  }
}

@media (max-width: 390px),
(max-height: 690px) and (max-width: 900px) {
  .material-theatre-kicker {
    display: none;
  }

  .material-theatre[data-material-theatre] .material-theatre-stage {
    grid-template-rows: minmax(0, 1fr) 108px;
  }

  .material-theatre[data-material-theatre] .material-theatre-constant {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .material-theatre[data-material-theatre] .material-theatre-mark img {
    width: 60px;
    height: 60px;
  }
}

/* Final Discovery UI: contained heading, full image, controls below — no overlay. */
.discovery-showcase[data-discovery-lens] {
  height: 400svh;
  min-height: 2500px;
  background: #FFFFFF;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-sticky {
  display: flex;
  align-items: stretch;
  padding: var(--nav-height) 0 0;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
  display: grid;
  width: 100%;
  max-width: 1360px;
  height: calc(100svh - var(--nav-height));
  grid-template: auto minmax(0, 1fr) auto / 1fr;
  gap: clamp(.65rem, 1.4vh, 1rem);
  margin: 0 auto;
  padding: clamp(.7rem, 1.5vw, 1.25rem) 2rem clamp(.65rem, 1.2vw, 1rem);
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
  position: relative;
  z-index: 4;
  grid-area: 1 / 1;
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
  align-items: end;
  gap: 2rem;
  margin: 0;
  padding: 0 0 .65rem;
  border-bottom: 1px solid rgba(245, 241, 232, .2);
  background: transparent;
  backdrop-filter: none;
  pointer-events: auto;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-kicker,
.discovery-showcase[data-discovery-lens] .mobile-swipe-hint-discovery {
  display: none;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
  max-width: none;
  margin: 0;
  color: #000000;
  font-size: clamp(2rem, 3.7vw, 4rem);
  line-height: .92;
  white-space: nowrap;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 em {
  display: inline;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
  display: block;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  max-width: 28rem;
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(.98rem, 1.08vw, 1.14rem);
  line-height: 1.65;
  text-shadow: 0 1px 10px rgba(18, 15, 12, .32);
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translateY(.15rem);
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-caption h3 {
  color: #000000;
  font-size: clamp(1.4rem, 1.7vw, 1.75rem);
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-caption p {
  display: none;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
  position: relative;
  grid-area: 2 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, .18);
  background: #f5f1e8;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-stage::before {
  background: none;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
  grid-area: 3 / 1;
  min-height: 52px;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(245, 241, 232, .2);
  background: transparent;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-rail button {
  padding: .9rem .35rem .7rem;
  font-size: .67rem;
  letter-spacing: .14em;
}

.discovery-showcase[data-discovery-lens] .discovery-showcase-seal {
  top: 1rem;
  right: 1rem;
}

@media (max-width: 900px) {
  .discovery-showcase[data-discovery-lens] {
    height: 340svh;
    min-height: 2100px;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    height: calc(100svh - var(--nav-height));
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .55rem;
    padding: .7rem 1rem .55rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 .55rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.35rem);
    white-space: nowrap;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
    display: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
    position: absolute;
    right: 0;
    bottom: .55rem;
    display: block;
    transform: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption h3 {
    font-size: 1rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
    order: initial;
    height: 100%;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
    order: initial;
    min-height: 48px;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail button {
    padding: .8rem .15rem .55rem;
    font-size: .52rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-seal {
    display: none;
  }
}

/* Square discovery assets: copy beside a true 1:1 stage on wide screens. */
@media (min-width: 1101px) {
  .discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    grid-template-columns: minmax(280px, .58fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    grid-area: 1 / 1;
    display: block;
    align-self: center;
    padding: 0;
    border: 0;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    max-width: 7ch;
    font-size: clamp(3.3rem, 5.8vw, 6.5rem);
    line-height: .88;
    white-space: normal;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 em {
    display: block;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
    display: block;
    margin-top: 1.5rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
    display: block;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(245, 241, 232, .2);
    transform: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
    grid-area: 1 / 2;
    align-self: center;
    justify-self: end;
    width: min(100%, calc(100svh - var(--nav-height) - 105px));
    height: auto;
    max-height: 100%;
    aspect-ratio: 1 / 1;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
    grid-area: 2 / 2;
    justify-self: end;
    width: min(100%, calc(100svh - var(--nav-height) - 105px));
  }
}

/* Tablet/mobile: heading, exact square image, then navigation. */
@media (max-width: 1100px) {
  .discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    gap: .55rem;
    padding: .65rem 1rem .5rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    width: 100%;
    max-width: none;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0 0 .5rem;
    border-bottom: 1px solid rgba(245, 241, 232, .2);
    background: transparent;
    backdrop-filter: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.45rem, 5vw, 2.2rem);
    line-height: 1;
    white-space: nowrap;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
    display: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
    position: static;
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    transform: none;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption h3 {
    font-size: 1rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
    grid-area: 2 / 1;
    align-self: center;
    justify-self: center;
    width: min(100%, calc(100svh - var(--nav-height) - 125px));
    height: auto;
    max-height: 100%;
    aspect-ratio: 1 / 1;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-slide img {
    object-fit: cover;
    object-position: 50% 50%;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
    grid-area: 3 / 1;
    width: min(100%, calc(100svh - var(--nav-height) - 125px));
  }
}

/* Discovery desktop balance: intentional heading wrap and compact vertical rhythm. */
@media (min-width: 1101px) {
  .discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    grid-template-columns: minmax(520px, .78fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 3.6vw, 4.25rem);
    row-gap: .55rem;
    padding-top: clamp(.65rem, 1.2vh, 1rem);
    padding-bottom: .45rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    align-self: center;
    padding-top: clamp(2rem, 6vh, 4.5rem);
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    max-width: none;
    font-size: clamp(3.75rem, 4.45vw, 5.35rem);
    line-height: .9;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 span,
  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 em {
    display: block;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 span {
    white-space: nowrap;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-intro {
    max-width: 30rem;
    margin-top: 1.15rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption {
    width: min(100%, 30rem);
    margin-top: 1.35rem;
    padding-top: 1rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption p {
    display: block;
    margin: .45rem 0 0;
    color: #FFFFFF;
    font-size: .92rem;
    line-height: 1.55;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
    align-self: start;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
    min-height: 46px;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail button {
    padding-top: .7rem;
    padding-bottom: .5rem;
  }
}

/* Unified footer used across every PURE ID page. */
.footer.site-footer-unified {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 7vw, 7rem) 0 2.5rem;
  border-top: 1px solid rgba(201, 162, 39, .4);
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(201, 162, 39, .09) 0%, transparent 75%),
    radial-gradient(circle at 88% 12%, rgba(201, 162, 39, .05), transparent 23%),
    linear-gradient(180deg, #151310 0%, #0c0b09 100%);
  color: #000000;
  box-shadow: inset 0 1px 0 rgba(255, 240, 179, .12);
}

.footer.site-footer-unified::before {
  position: absolute;
  top: -34vw;
  right: -18vw;
  width: 58vw;
  aspect-ratio: 1;
  border: 1px solid rgba(201, 162, 39, .14);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.site-footer-unified .footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) minmax(230px, .65fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.site-footer-unified .footer-brand-col {
  padding: 0;
}

.site-footer-unified .footer-brand-lockup {
  display: inline-flex;
  margin: 0;
}

.site-footer-unified .footer-brand-col p {
  max-width: 31rem;
  margin: 1.5rem 0 0;
  color: #FFFFFF;
  font-size: .83rem;
  line-height: 1.75;
}

.site-footer-unified .footer-origin-nav {
  width: min(100%, 320px);
  justify-self: end;
}

.site-footer-unified .footer-heading {
  margin: 0 0 1.3rem;
  color: #C9A227;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.site-footer-unified .footer-heading-link,
.footer-heading-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.site-footer-unified .footer-heading-link:hover,
.footer-heading-link:hover {
  color: #E2C46C;
}

.site-footer-unified .footer-heading-arrow,
.footer-heading-arrow {
  display: inline-block;
  font-size: 0.85em;
  transition: transform 0.3s ease;
}

.site-footer-unified .footer-heading-link:hover .footer-heading-arrow,
.footer-heading-link:hover .footer-heading-arrow {
  transform: translate(2px, -2px);
}

.site-footer-unified .footer-links {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: .78rem;
  list-style: none;
}

.site-footer-unified .footer-links a {
  position: relative;
  display: inline-block;
  color: #FFFFFF;
  font-size: .78rem;
  line-height: 1.35;
  text-decoration: none;
}

.site-footer-unified .footer-links a::after {
  position: absolute;
  right: 0;
  bottom: -.2rem;
  left: 0;
  height: 1px;
  background: #e0be5c;
  content: '';
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.site-footer-unified .footer-links a:hover,
.site-footer-unified .footer-links a:focus-visible {
  color: #FFFFFF;
  outline: 0;
}

.site-footer-unified .footer-links a:hover::after,
.site-footer-unified .footer-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-footer-unified .footer-brand-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.75rem;
  margin-top: 1.5rem;
}

.site-footer-unified .footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}

.site-footer-unified .footer-contact-icon,
.footer-contact-icon,
.footer-contact-item svg {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  color: #C9A227 !important;
  stroke: currentColor;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer-unified .footer-contact-item:hover,
.site-footer-unified .footer-contact-item:focus-visible {
  color: #C9A227;
  outline: none;
}

.site-footer-unified .footer-contact-item:hover .footer-contact-icon,
.site-footer-unified .footer-contact-item:focus-visible .footer-contact-icon {
  transform: scale(1.12);
}

.site-footer-unified .footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 241, 232, .16);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.site-footer-unified .footer-copyright {
  text-align: left;
}

.site-footer-unified .footer-address {
  text-align: right;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer-unified .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.site-footer-unified .footer-legal-links a {
  color: #FFFFFF;
}

@media (max-width: 700px) {
  .footer.site-footer-unified {
    padding: 4rem 0 2rem;
  }

  .site-footer-unified .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .site-footer-unified .footer-brand-contact {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .site-footer-unified .footer-origin-nav {
    width: 100%;
    justify-self: start;
  }

  .site-footer-unified .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
  }

  .site-footer-unified .footer-copyright,
  .site-footer-unified .footer-address {
    text-align: left;
  }

  .site-footer-unified .footer-legal-links {
    justify-content: flex-start;
  }
}

body.consultation-open {
  overflow: hidden;
}

.consultation-modal[hidden] {
  display: none;
}

.consultation-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  padding: 1rem;
  place-items: center;
}

.consultation-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(20, 17, 13, .78);
  backdrop-filter: blur(12px);
}

.consultation-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: clamp(2.25rem, 5vw, 4rem);
  overflow-y: auto;
  background: #fbf8f1;
  color: #000000;
  box-shadow: 0 30px 100px rgba(20, 17, 13, .45);
}

.consultation-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(55, 48, 39, .2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.consultation-close span::before,
.consultation-close span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1px;
  background: #373027;
  content: '';
}

.consultation-close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.consultation-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.consultation-kicker,
.consultation-form label>span {
  color: #000000;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.consultation-dialog h2 {
  max-width: 400px;
  margin: 1rem 0 0;
  color: #000000;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
}

.consultation-dialog>p {
  max-width: 440px;
  margin: 1.15rem 0 0;
  color: #000000;
  font-size: .84rem;
  line-height: 1.7;
}

.consultation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.consultation-form label {
  display: grid;
  gap: .6rem;
}

.consultation-email-field,
.consultation-submit,
.consultation-status {
  grid-column: 1 / -1;
}

.consultation-form input {
  width: 100%;
  height: 50px;
  padding: 0 .85rem;
  border: 1px solid rgba(55, 48, 39, .2);
  border-radius: 0;
  background: transparent;
  color: #000000;
  font: inherit;
  outline: 0;
}

.consultation-form input:focus {
  border-color: #b78c14;
  box-shadow: 0 0 0 2px rgba(183, 140, 20, .1);
}

.consultation-submit {
  width: 100%;
  min-height: 52px;
  margin-top: .35rem;
  padding: .9rem 1.15rem;
  border: 1px solid #29241e;
  background: #29241e;
  color: #FFFFFF;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.consultation-submit:hover,
.consultation-submit:focus-visible {
  border-color: #b78c14;
  background: #b78c14;
  outline: 0;
  transform: translateY(-2px);
}

.consultation-status {
  min-height: 1.2em;
  margin: 0;
  color: #000000;
  font-size: .72rem;
}

@media (max-width: 600px) {
  .consultation-dialog {
    padding: 3.5rem 1.25rem 1.5rem;
  }

  .consultation-dialog h2 {
    font-size: 2.8rem;
  }

  .consultation-form {
    grid-template-columns: 1fr;
  }

  .consultation-email-field,
  .consultation-submit,
  .consultation-status {
    grid-column: auto;
  }
}

/* ==========================================================================
   CINEMATIC ZOOM JOURNEY — "The making of meaning"
   Full-screen scroll-driven macro camera experience (PURE ID Ivory & Gold Brand Palette)
   ========================================================================== */
.mark-transformation-cinematic {
  position: relative;
  height: 450vh;
  /* 4 scroll frames + release threshold */
  background: var(--c-ivory, #F5F1E8);
  color: #000000;
  overflow: visible;
}

.cinematic-sticky-viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, var(--c-ivory-light, #FDFBF7) 0%, var(--c-ivory, #F5F1E8) 85%);
}

.cinematic-ambient-glow {
  position: absolute;
  width: 55vw;
  height: 55vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0.05) 50%, rgba(0, 0, 0, 0) 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
}

.cinematic-journey-head {
  position: absolute;
  top: 7vh;
  z-index: 10;
  text-align: center;
  pointer-events: none;
  padding: 0 1.5rem;
}

.cinematic-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #C9A227;
  font-family: var(--font-sans);
  margin-bottom: 0.6rem;
  display: block;
}

.cinematic-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.9rem);
  font-weight: 300;
  color: #000000;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
}

.cinematic-title em {
  font-style: italic;
  color: #C9A227;
}

.cinematic-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.cinematic-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.65) translateZ(-120px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}

.cinematic-layer img {
  max-width: min(72vw, 650px);
  max-height: min(60vh, 540px);
  object-fit: contain;
  filter: drop-shadow(0 20px 45px rgba(63, 75, 54, 0.14));
  will-change: transform, opacity;
}

.cinematic-layer.layer-origin img {
  max-width: min(45vw, 360px);
  filter: drop-shadow(0 0 35px rgba(201, 162, 39, 0.35)) drop-shadow(0 15px 35px rgba(63, 75, 54, 0.15));
}

.cinematic-layer.is-active {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

.cinematic-layer.is-exiting-up {
  opacity: 0;
  transform: scale(1.35) translateZ(100px);
}

.cinematic-layer.is-entering-down {
  opacity: 0;
  transform: scale(0.6) translateZ(-150px);
}

.cinematic-chapter-nav {
  position: absolute;
  bottom: 7vh;
  z-index: 10;
  display: flex;
  gap: 2.2rem;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(63, 75, 54, 0.12);
  padding-bottom: 0.85rem;
}

.nano-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #000000;
  transition: color 0.4s ease, transform 0.4s ease;
  position: relative;
  font-family: var(--font-sans);
  cursor: pointer;
}

.nano-label span {
  font-size: 0.58rem;
  color: #C9A227;
  font-family: var(--font-serif);
}

.nano-label b {
  font-weight: 500;
}

.nano-label.is-active {
  color: #000000;
  transform: translateY(-2px);
}

.nano-label.is-active span {
  color: #C9A227;
}

.nano-label.is-active::after {
  content: '';
  position: absolute;
  bottom: -0.9rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-gold, #C9A227);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.6);
}

@media (max-width: 768px) {
  .cinematic-journey-head {
    top: 5vh;
  }

  .cinematic-chapter-nav {
    bottom: 5vh;
    gap: 1.2rem;
    padding-bottom: 0.65rem;
  }

  .nano-label {
    font-size: 0.58rem;
    letter-spacing: 0.15em;
  }

  .cinematic-layer img {
    max-width: 88vw;
    max-height: 52vh;
  }
}

/* ==========================================================================
   COUTURE EDITORIAL BRAND MANIFESTO
   ========================================================================== */
.editorial-manifesto-section {
  padding: 9rem 0;
  background: var(--c-ivory, #F5F1E8);
  border-top: 1px solid rgba(159, 174, 142, 0.15);
  border-bottom: 1px solid rgba(159, 174, 142, 0.15);
}

.editorial-manifesto-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 50% Image | 50% Content Equal Split */
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

/* Left Image Stage */
.editorial-stage-wrapper {
  position: relative;
  width: 100%;
}

.editorial-image-frame {
  position: relative;
  width: 100%;
  height: clamp(380px, 42vh, 440px);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.3);
  box-shadow: 0 25px 60px rgba(63, 75, 54, 0.1);
  background: #FDFBF7;
}

.editorial-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease, transform 1s ease;
  transform: scale(1.03);
}

.editorial-img.is-active {
  opacity: 1;
  transform: scale(1);
}

.editorial-tab-selector {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.editorial-tab-btn {
  flex: 1;
  padding: 0.9rem 1.2rem;
  background: var(--c-ivory-light, #FDFBF7);
  border: 1px solid rgba(159, 174, 142, 0.18);
  font-family: var(--font-futura-medium);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.4s ease;
}

.editorial-tab-btn span {
  color: #C9A227;
  font-family: var(--font-serif);
}

.editorial-tab-btn.is-active {
  border-color: #C9A227;
  color: #000000;
  background: #FFFFFF;
  box-shadow: 0 10px 25px rgba(201, 162, 39, 0.15);
}

/* Right Content */
.editorial-kicker {
  font-family: var(--font-futura-medium);
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: 0.8rem;
  display: block;
}

.editorial-headline {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 5.5vw, 5.5rem);
  font-weight: 300;
  color: #000000;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

.editorial-headline em {
  font-style: italic;
  color: #C9A227;
}

.editorial-lead {
  font-family: var(--font-futura-book);
  font-size: 1.18rem;
  line-height: 1.6;
  color: #000000;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.editorial-description p {
  font-family: var(--font-futura-book);
  font-size: 0.96rem;
  line-height: 1.7;
  color: #000000;
  margin-bottom: 1rem;
}

.editorial-quote {
  margin-top: 2.5rem;
  padding-left: 2rem;
  border-left: 3px solid #C9A227;
}

.editorial-quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  color: #000000;
  line-height: 1.2;
}

.editorial-quote strong {
  color: #C9A227;
}

@media (max-width: 900px) {
  .editorial-manifesto-shell {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .editorial-image-frame {
    height: 380px;
  }
}

/* ==========================================================================
   PURE ID — THREE IDENTITY CHAPTERS
   ========================================================================== */
.identity-chapter {
  position: relative;
  overflow: hidden;
}

.identity-chapter-copy {
  position: relative;
  z-index: 2;
}

.identity-chapter-index {
  display: block;
  margin-bottom: 3rem;
  font: 500 .67rem/1 var(--font-futura-medium);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #000000;
}

.identity-chapter-eyebrow {
  margin: 0 0 1rem !important;
  font: 500 .72rem/1.2 var(--font-futura-medium) !important;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.identity-chapter h2 {
  margin: 0 0 1.8rem;
  font: 300 clamp(3rem, 5.7vw, 6.4rem)/.96 var(--font-serif);
  letter-spacing: -.035em;
}

.identity-chapter h2 em {
  color: #000000;
  font-weight: 300;
}

.identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  max-width: 34rem;
  margin: 0;
  font: 400 clamp(1rem, 1.25vw, 1.16rem)/1.8 var(--font-futura-book);
}

.identity-expression {
  min-height: min(900px, 92vh);
  background: #16130f;
  color: #FFFFFF;
}

.identity-expression-media {
  position: absolute;
  inset: 0;
}

.identity-expression-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 10, 8, .92) 0%, rgba(12, 10, 8, .7) 32%, rgba(12, 10, 8, .08) 70%), linear-gradient(0deg, rgba(12, 10, 8, .2), transparent 45%);
}

.identity-expression-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.identity-expression-shell {
  min-height: min(900px, 92vh);
  display: flex;
  align-items: center;
}

.identity-expression .identity-chapter-copy {
  width: min(46%, 37rem);
  padding: 8rem 0 5rem;
}

.identity-expression .identity-chapter-eyebrow {
  color: #000000;
}

.identity-expression .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  color: #000000;
}

.identity-expression .identity-chapter-copy>strong {
  display: inline-block;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 162, 39, .55);
  font: italic 400 1.25rem/1.4 var(--font-serif);
  color: #C9A227;
}

.identity-craft {
  padding: clamp(6rem, 10vw, 10rem) 0;
  background: #f5f1e8;
  color: #000000;
}

.identity-craft::before {
  content: 'PURE';
  position: absolute;
  top: 2%;
  left: 42%;
  font: 300 clamp(9rem, 22vw, 22rem)/1 var(--font-serif);
  color: #000000;
  pointer-events: none;
}

.identity-craft-shell {
  display: grid;
  grid-template-columns: minmax(300px, .76fr) minmax(520px, 1.24fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.identity-craft .identity-chapter-eyebrow {
  color: #000000;
}

.identity-craft .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  color: #000000;
}

.identity-material-list {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(63, 75, 54, .16);
}

.identity-material-list li {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(63, 75, 54, .12);
  font: 500 .72rem/1.4 var(--font-futura-medium);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.identity-material-list span {
  color: #000000;
}

.identity-craft-gallery {
  position: relative;
  min-height: clamp(530px, 57vw, 720px);
}

.identity-craft-card {
  position: absolute;
  margin: 0;
  background: #fff;
  box-shadow: 0 24px 70px rgba(60, 48, 30, .13);
}

.identity-craft-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.identity-craft-card figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .9rem 1rem;
  border-top: 1px solid rgba(63, 75, 54, .08);
}

.identity-craft-card figcaption span {
  font: 500 .66rem/1 var(--font-futura-medium);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.identity-craft-card figcaption small {
  font: italic 400 .95rem/1 var(--font-serif);
  color: #000000;
}

.identity-craft-card-silver {
  width: 59%;
  left: 0;
  top: 0;
  transform: rotate(-2deg);
}

.identity-craft-card-gold {
  width: 56%;
  right: 0;
  bottom: 0;
  transform: rotate(2.5deg);
}

.identity-signature {
  padding: 0;
  background: #211c16;
  color: #FFFFFF;
}

.identity-signature::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #9FAE8E;
}

.identity-signature-shell {
  display: grid;
  grid-template-columns: minmax(440px, 1.05fr) minmax(340px, .95fr);
  gap: clamp(4rem, 8vw, 9rem);
  align-items: center;
}

.identity-signature-visual {
  position: relative;
  z-index: 2;
}

.identity-signature-visual figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 50% 50% 4px 4px;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
}

.identity-signature-visual figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(215, 182, 107, .26);
  border-radius: inherit;
}

.identity-signature-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.identity-signature-note {
  position: absolute;
  right: -2.2rem;
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  background: #f5f1e8;
  color: #000000;
  font: 500 .63rem/1 var(--font-futura-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .24);
}

.identity-signature-note i {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #c9a227;
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .15);
}

.identity-signature .identity-chapter-index {
  color: #C9A227;
}

.identity-signature .identity-chapter-eyebrow {
  color: #C9A227;
}

.identity-signature .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  color: #000000;
}

.identity-signature blockquote {
  margin: 3rem 0 0;
  padding: 1.35rem 0 1.35rem 1.6rem;
  border-left: 1px solid #c9a227;
  font: italic 400 clamp(1.35rem, 2.2vw, 2rem)/1.35 var(--font-serif);
  color: #000000;
}

.identity-signature blockquote strong {
  color: #C9A227;
  font-weight: 400;
}

.identity-signature-orbit {
  position: absolute;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  left: -17%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .15;
}

.identity-signature-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid #c9a227;
  border-radius: 50%;
}

.identity-signature-orbit i:nth-child(2) {
  inset: 10%;
}

.identity-signature-orbit i:nth-child(3) {
  inset: 22%;
}

@media (max-width: 980px) {
  .identity-expression {
    min-height: 850px;
  }

  .identity-expression-media img {
    object-position: 60% center;
  }

  .identity-expression-media::after {
    background: linear-gradient(90deg, rgba(12, 10, 8, .9), rgba(12, 10, 8, .32) 72%);
  }

  .identity-expression .identity-chapter-copy {
    width: min(58%, 34rem);
  }

  .identity-craft-shell,
  .identity-signature-shell {
    grid-template-columns: 1fr;
  }

  .identity-craft-gallery {
    width: min(100%, 700px);
    margin: 0 auto;
  }

  .identity-signature-visual {
    width: min(82%, 620px);
    margin: 0 auto;
  }

  .identity-signature .identity-chapter-copy {
    max-width: 650px;
  }
}

@media (max-width: 640px) {
  .identity-chapter-index {
    margin-bottom: 2rem;
  }

  .identity-chapter h2 {
    font-size: clamp(2.7rem, 13vw, 4.3rem);
  }

  .identity-expression {
    min-height: 780px;
  }

  .identity-expression-media img {
    object-position: 67% center;
  }

  .identity-expression-media::after {
    background: linear-gradient(0deg, rgba(12, 10, 8, .94) 0%, rgba(12, 10, 8, .65) 53%, rgba(12, 10, 8, .06) 83%);
  }

  .identity-expression-shell {
    align-items: flex-end;
    min-height: 780px;
  }

  .identity-expression .identity-chapter-copy {
    width: 100%;
    padding: 5rem 0 4.5rem;
  }

  .identity-craft {
    padding: 6rem 0 5rem;
  }

  .identity-craft-shell {
    gap: 3.5rem;
  }

  .identity-craft-gallery {
    min-height: 520px;
  }

  .identity-craft-card {
    width: 72%;
  }

  .identity-craft-card-gold {
    bottom: 0;
  }

  .identity-craft-card figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }

  .identity-signature {
    padding: 0;
  }

  .identity-signature-shell {
    gap: 2.5rem;
  }

  .identity-signature-visual {
    width: 90%;
    margin-left: 0;
  }

  .identity-signature-note {
    right: -10%;
    bottom: 8%;
  }

  .identity-signature-orbit {
    width: 115vw;
    left: -58%;
    top: 29%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .identity-craft-card {
    transform: none;
  }
}

/* Identity chapter type and colour refinement */
.identity-expression h2 {
  color: #FFFFFF;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .18);
}

.identity-expression h2 em {
  color: #C9A227;
}

.identity-expression .identity-chapter-index {
  color: #C9A227;
}

.identity-expression .identity-chapter-eyebrow {
  color: #000000;
}

.identity-expression .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  color: #000000;
}

.identity-craft h2 {
  color: #000000;
}

.identity-craft h2 em {
  color: #000000;
}

.identity-signature h2 {
  color: #FFFFFF;
}

.identity-signature h2 em {
  color: #C9A227;
}

.identity-expression .identity-chapter-copy>strong {
  display: none;
}

@media (max-width: 640px) {
  .identity-chapter-index {
    margin-bottom: 1.55rem;
  }

  .identity-chapter-eyebrow {
    margin-bottom: .75rem !important;
    font-size: .64rem !important;
    letter-spacing: .24em;
  }

  .identity-chapter h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(2.5rem, 11.5vw, 3.8rem);
    line-height: .98;
  }

  .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
    max-width: 29rem;
    font-size: .96rem;
    line-height: 1.62;
  }

  .identity-expression .identity-chapter-copy {
    padding-bottom: 3.5rem;
  }

  .identity-material-list {
    margin-top: 2rem;
  }

  .identity-signature blockquote {
    margin-top: 2rem;
    font-size: 1.35rem;
  }
}

/* Lab-grown brilliance chapter */
.identity-diamond {
  padding: clamp(6rem, 10vw, 11rem) 0;
  background: linear-gradient(135deg, #ece8e1 0%, #FFF 52%, #e1ddd6 100%);
  color: #000000;
}

.identity-diamond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 45%, rgba(255, 255, 255, .88), transparent 33%), linear-gradient(115deg, transparent 55%, rgba(178, 150, 95, .08));
  pointer-events: none;
}

.identity-diamond-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(440px, 1.08fr) minmax(340px, .92fr);
  gap: clamp(4rem, 8vw, 9rem);
  align-items: center;
}

.identity-diamond-wordmark {
  position: absolute;
  inset: 5% auto auto 47%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font: 300 clamp(7rem, 15vw, 15rem)/.72 var(--font-serif);
  letter-spacing: -.06em;
  color: #000000;
  pointer-events: none;
}

.identity-diamond-visual {
  position: relative;
}

.identity-diamond-visual figure {
  position: relative;
  z-index: 2;
  width: min(88%, 620px);
  margin: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 85px rgba(50, 44, 35, .14);
}

.identity-diamond-visual figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  pointer-events: none;
}

.identity-diamond-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.identity-diamond-orbit {
  position: absolute;
  z-index: 1;
  width: 74%;
  aspect-ratio: 1;
  right: -4%;
  top: 8%;
}

.identity-diamond-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(168, 132, 59, .2);
  border-radius: 50%;
}

.identity-diamond-orbit i:nth-child(2) {
  inset: 10%;
  border-color: rgba(168, 132, 59, .28);
}

.identity-diamond-orbit i:nth-child(3) {
  inset: 22%;
  border-color: rgba(168, 132, 59, .38);
}

.identity-diamond-label {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 9%;
  padding: .85rem 1.1rem;
  background: #302b25;
  color: #000000;
  font: 500 .64rem/1 var(--font-futura-medium);
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(48, 43, 37, .18);
}

.identity-diamond .identity-chapter-index {
  color: #000000;
}

.identity-diamond .identity-chapter-eyebrow {
  color: #000000;
}

.identity-diamond h2 {
  color: #000000;
}

.identity-diamond h2 em {
  color: #000000;
}

.identity-diamond .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  color: #000000;
}

.identity-diamond-values {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2.4rem;
}

.identity-diamond-values span {
  padding: .65rem .85rem;
  border: 1px solid rgba(157, 116, 40, .34);
  color: #000000;
  font: 500 .61rem/1 var(--font-futura-medium);
  letter-spacing: .17em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .identity-diamond-shell {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .identity-diamond-visual {
    width: min(90%, 650px);
  }

  .identity-diamond-wordmark {
    left: 44%;
    top: 25%;
  }

  .identity-diamond .identity-chapter-copy {
    max-width: 650px;
  }
}

@media (max-width: 640px) {
  .identity-diamond {
    padding: 5.5rem 0;
  }

  .identity-diamond-shell {
    gap: 3.5rem;
  }

  .identity-diamond-visual {
    width: 92%;
  }

  .identity-diamond-visual figure {
    width: 100%;
  }

  .identity-diamond-orbit {
    width: 78%;
    right: -14%;
  }

  .identity-diamond-label {
    right: -9%;
    bottom: 7%;
    font-size: .56rem;
  }

  .identity-diamond-wordmark {
    left: 42%;
    top: 31%;
    font-size: 8rem;
  }

  .identity-diamond-values {
    margin-top: 1.75rem;
    gap: .45rem;
  }

  .identity-diamond-values span {
    padding: .58rem .68rem;
    font-size: .56rem;
    letter-spacing: .13em;
  }
}

/* Paused-film hero + independent Mark introduction */
.mark-video-pure-hero {
  min-height: 100svh;
  background: #17130f;
}

.mark-video-pure-hero .mark-film-layer,
.mark-video-pure-hero.is-revealed .mark-film-layer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.mark-video-pure-hero .mark-film-video,
.mark-video-pure-hero.is-revealed .mark-film-video {
  opacity: 1 !important;
  transform: none !important;
}

.mark-video-pure-hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 13, 10, .78) 0%, rgba(16, 13, 10, .42) 38%, rgba(16, 13, 10, .08) 70%), linear-gradient(0deg, rgba(16, 13, 10, .42), transparent 48%);
  pointer-events: none;
}

.mark-video-pure-copy {
  position: absolute;
  z-index: 3;
  left: max(5vw, calc((100vw - 1280px) / 2));
  bottom: clamp(3.5rem, 9vh, 7rem);
  width: min(34rem, 43vw);
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease .18s, transform .8s cubic-bezier(.2, .7, .2, 1) .18s;
}

.mark-video-pure-hero.is-revealed .mark-video-pure-copy {
  opacity: 1;
  transform: translateY(0);
}

.mark-video-pure-copy>span {
  display: block;
  margin-bottom: 1.1rem;
  color: #C9A227;
  font: 500 .66rem/1 var(--font-futura-medium);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.mark-video-pure-copy h1 {
  margin: 0 0 1.25rem;
  color: #FFFFFF;
  font: 300 clamp(3.4rem, 6vw, 6.7rem)/.9 var(--font-serif);
  letter-spacing: -.04em;
  text-shadow: 0 3px 30px rgba(0, 0, 0, .22);
}

.mark-video-pure-copy h1 em {
  color: #C9A227;
  font-weight: 300;
}

.mark-video-pure-copy p {
  max-width: 30rem;
  margin: 0;
  color: #000000;
  font: 400 clamp(.94rem, 1.15vw, 1.08rem)/1.65 var(--font-futura-book);
}

.mark-video-pure-copy a {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.7rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(214, 182, 110, .7);
  color: #FFFFFF;
  font: 500 .65rem/1 var(--font-futura-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mark-video-pure-copy a i {
  color: #C9A227;
  font-style: normal;
}

.mark-ui-second-section {
  position: relative !important;
  inset: auto !important;
  min-height: 0;
  padding: clamp(2rem, 3vw, 3rem) 0;
  background: #fff;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.mark-ui-second-section .mark-hero-reveal-inner {
  display: flex;
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
  grid-template-rows: auto;
  align-items: center;
  width: min(100%, 1280px);
  height: auto;
  min-height: 0;
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  row-gap: 0;
  padding-inline: clamp(2.5rem, 4.5vw, 4.5rem);
  text-align: left;
}

.mark-ui-second-section .mark-hero-visual {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 700px;
  height: clamp(300px, 28vw, 380px);
  justify-self: start;
}

.mark-ui-second-section .mark-hero-copy-panel {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 360px;
  margin: 0;
  justify-self: end;
  text-align: left;
}

.mark-ui-second-section .mark-hero-emblem,
.mark-ui-second-section .mark-hero-callout,
.mark-ui-second-section .mark-hero-copy-panel>p,
.mark-ui-second-section .mark-hero-copy-panel .mark-hero-primary,
.mark-ui-second-section .mark-hero-product-gallery {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.mark-ui-second-section .mark-hero-emblem {
  width: clamp(220px, 18vw, 270px);
}

.mark-ui-second-section .mark-hero-copy-panel h2 {
  max-width: 360px;
  margin: 0;
  color: #000000;
  font: 300 clamp(2.8rem, 4.6vw, 5rem)/1 var(--font-serif);
  letter-spacing: -.04em;
}

.mark-ui-second-section .mark-hero-copy-panel h2 em {
  color: #000000;
  font-weight: 300;
}

/* Keep every Mark annotation locked to the emblem's visual axis. */
.mark-ui-second-section .mark-hero-callout p {
  font-size: .5rem;
  letter-spacing: .12em;
  white-space: nowrap;
}

.mark-ui-second-section .mark-hero-callout-left::after,
.mark-ui-second-section .mark-hero-callout-right::after {
  top: 50%;
  transform: translateY(-50%);
}

.mark-ui-second-section .mark-hero-callout-left {
  left: auto;
  right: calc(50% + clamp(146px, calc(9vw + 36px), 171px));
  top: 47%;
}

.mark-ui-second-section .mark-hero-callout-right {
  right: auto;
  left: calc(50% + clamp(146px, calc(9vw + 36px), 171px));
  top: 29%;
  text-align: left;
}

.mark-ui-second-section .mark-hero-callout-left::after,
.mark-ui-second-section .mark-hero-callout-right::after {
  width: 24px;
}

.mark-ui-second-section .mark-hero-callout-bottom {
  left: 50%;
  width: max-content;
  transform: translateX(-50%) !important;
}

.mark-ui-second-section .mark-hero-callout-bottom::after {
  left: 50%;
  transform: translateX(-50%);
}

/* The product gallery is not active in this version of the section. */
.mark-ui-second-section .mobile-swipe-hint-hero {
  display: none;
}

.mark-ui-second-section .mark-hero-copy-panel>p {
  max-width: 340px;
  margin: clamp(1.15rem, 1.8vw, 1.5rem) 0 0;
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  font-weight: 400;
  line-height: 1.65;
}

/* Circle of Origin: an emotional reading of the protective setting. */
.origin-meaning {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #F6F2EA;
  color: #000000;
}

.origin-meaning-inner {
  display: grid;
  width: min(100%, 1440px);
  min-height: clamp(620px, 76vw, 880px);
  margin: 0 auto;
  grid-template-columns: minmax(280px, .72fr) minmax(480px, 1.28fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(4.5rem, 8vw, 8rem) clamp(2rem, 6vw, 6rem);
}

.origin-meaning-copy {
  position: relative;
  z-index: 2;
  max-width: 430px;
}

.origin-meaning-copy>span,
.origin-meaning-note {
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.origin-meaning-copy>span {
  display: block;
  margin-bottom: 1.2rem;
  color: #9A7620;
}

.origin-meaning-copy h2 {
  margin: 0;
  color: #000000;
  font: 300 clamp(3rem, 5.4vw, 6rem)/.92 var(--font-serif);
  letter-spacing: -.045em;
}

.origin-meaning-copy h2 em {
  color: #9A7620;
  font-weight: inherit;
}

.origin-meaning-copy p {
  max-width: 350px;
  margin: 1.7rem 0 0;
  font-family: var(--font-sans);
  font-size: clamp(.92rem, 1.05vw, 1.04rem);
  line-height: 1.7;
}

.origin-meaning-visual {
  position: relative;
  width: min(100%, 760px);
  margin: 0;
  justify-self: end;
  isolation: isolate;
}

.origin-meaning-visual::before {
  position: absolute;
  z-index: -2;
  inset: 11%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .94) 0%, rgba(232, 213, 169, .35) 43%, transparent 70%);
  content: '';
  filter: blur(10px);
}

.origin-meaning-orbit {
  position: absolute;
  z-index: -1;
  inset: 8%;
  border: 1px solid rgba(154, 118, 32, .28);
  border-radius: 50%;
}

.origin-meaning-orbit::before,
.origin-meaning-orbit::after {
  position: absolute;
  border: 1px solid rgba(154, 118, 32, .16);
  border-radius: inherit;
  content: '';
}

.origin-meaning-orbit::before {
  inset: 7%;
}

.origin-meaning-orbit::after {
  inset: 15%;
}

.origin-meaning-visual img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 28px rgba(92, 65, 14, .12));
  transform: rotate(-3deg);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}

.origin-meaning-visual:hover img {
  transform: rotate(0deg) scale(1.015);
}

.origin-meaning-note {
  position: absolute;
  z-index: 2;
  color: #6A5834;
  white-space: nowrap;
}

.origin-meaning-note::after {
  position: absolute;
  top: 50%;
  width: clamp(34px, 5vw, 72px);
  height: 1px;
  background: rgba(106, 88, 52, .45);
  content: '';
}

.origin-meaning-note-circle {
  top: 20%;
  right: 0;
  transform: translateX(28%);
}

.origin-meaning-note-circle::after {
  right: calc(100% + .75rem);
}

.origin-meaning-note-self {
  bottom: 24%;
  left: 8%;
  transform: translateX(-35%);
}

.origin-meaning-note-self::after {
  left: calc(100% + .75rem);
}

@media (max-width: 920px) {
  .origin-meaning-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding: 4.5rem 2rem 3rem;
  }

  .origin-meaning-copy {
    max-width: 640px;
    text-align: center;
    justify-self: center;
  }

  .origin-meaning-copy p {
    max-width: 410px;
    margin-right: auto;
    margin-left: auto;
  }

  .origin-meaning-visual {
    width: min(92vw, 680px);
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .origin-meaning-inner {
    padding: 4rem 1rem 2.25rem;
  }

  .origin-meaning-copy h2 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .origin-meaning-copy p {
    max-width: 310px;
    margin-top: 1.25rem;
    font-size: .92rem;
  }

  .origin-meaning-note {
    font-size: .52rem;
    letter-spacing: .16em;
  }

  .origin-meaning-note-circle {
    right: 6%;
    transform: none;
  }

  .origin-meaning-note-self {
    bottom: 19%;
    left: 5%;
    transform: none;
  }

  .origin-meaning-note::after {
    width: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-meaning-visual img {
    transition: none;
  }
}

/* Circle of Origin: three scroll-controlled moments using the supplied film. */
.origin-scroll-story {
  --origin-progress: 0%;
  --origin-canvas: #FFFFFF;
  position: relative;
  width: 100%;
  height: 300svh;
  background: var(--origin-canvas);
  color: #000000;
}

.origin-scroll-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--origin-canvas);
}

.origin-scroll-inner {
  display: grid;
  width: min(100%, 1440px);
  height: 100%;
  margin: 0 auto;
  grid-template-columns: minmax(300px, .78fr) minmax(390px, 1.22fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(5rem, 8vh, 7rem) clamp(2rem, 6vw, 6rem) clamp(2.5rem, 5vh, 4rem);
}

.origin-scroll-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 470px;
}

.origin-scroll-eyebrow,
.origin-scroll-moment>span {
  display: block;
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.origin-scroll-eyebrow {
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  color: #9A7620;
}

.origin-scroll-moments {
  position: relative;
  min-height: clamp(230px, 29vh, 300px);
}

.origin-scroll-moment {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.16, 1, .3, 1), visibility .55s;
}

.origin-scroll-moment.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.origin-scroll-moment>span {
  margin-bottom: 1.1rem;
  color: #6A5834;
}

.origin-scroll-moment h2 {
  max-width: 450px;
  margin: 0;
  color: #000000;
  font: 300 clamp(3rem, 5vw, 5.8rem)/.92 var(--font-serif);
  letter-spacing: -.045em;
}

.origin-scroll-moment h2 em {
  color: #9A7620;
  font-weight: inherit;
}

.origin-scroll-moment p {
  max-width: 390px;
  margin: 1.5rem 0 0;
  font-family: var(--font-sans);
  font-size: clamp(.92rem, 1vw, 1.02rem);
  line-height: 1.7;
}

.origin-scroll-footer {
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

.origin-scroll-progress {
  width: min(100%, 300px);
  height: 1px;
  overflow: hidden;
  background: rgba(0, 0, 0, .15);
}

.origin-scroll-progress i {
  display: block;
  width: var(--origin-progress);
  height: 100%;
  background: #9A7620;
}

.origin-scroll-footer p {
  margin: 1rem 0 0;
  font: italic 400 clamp(1rem, 1.3vw, 1.2rem)/1.4 var(--font-serif);
}

.origin-scroll-visual {
  position: relative;
  width: auto;
  height: min(82svh, 820px);
  max-width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  justify-self: end;
  overflow: hidden;
  contain: paint;
  background: var(--origin-canvas);
}

.origin-scroll-visual video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
  filter: contrast(1.1) brightness(1.04) saturate(1.06);
  opacity: 1;
  transform: translateZ(0);
  transition: opacity .18s linear;
  will-change: transform, opacity;
}

.origin-scroll-video-reverse {
  opacity: 0 !important;
}

.origin-scroll-story.is-reversing .origin-scroll-video-forward {
  opacity: 0;
}

.origin-scroll-story.is-reversing .origin-scroll-video-reverse {
  opacity: 1 !important;
}

.origin-scroll-visual figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 2;
  align-items: center;
  gap: .75rem;
  color: #6A5834;
  font: 600 .58rem/1 var(--font-sans);
  letter-spacing: .16em;
}

.origin-scroll-visual figcaption i {
  width: 34px;
  height: 1px;
  background: rgba(106, 88, 52, .45);
}

@media (max-width: 820px) {
  .origin-scroll-sticky {
    min-height: 680px;
  }

  .origin-scroll-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .75rem;
    padding: 5.5rem 1rem 1.25rem;
  }

  .origin-scroll-copy {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }

  .origin-scroll-eyebrow {
    margin-bottom: 1.35rem;
  }

  .origin-scroll-moments {
    min-height: 148px;
  }

  .origin-scroll-moment h2 {
    max-width: none;
    font-size: clamp(2.5rem, 11vw, 4rem);
  }

  .origin-scroll-moment p {
    max-width: 360px;
    margin: .85rem auto 0;
    font-size: .86rem;
    line-height: 1.55;
  }

  .origin-scroll-footer {
    margin-top: .85rem;
  }

  .origin-scroll-progress {
    width: min(100%, 220px);
    margin: 0 auto;
  }

  .origin-scroll-footer p {
    margin-top: .7rem;
    font-size: .95rem;
  }

  .origin-scroll-visual {
    width: auto;
    height: min(54svh, 540px);
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-scroll-moment {
    transition: none;
  }
}

@media (max-width: 1180px) {
  .mark-ui-second-section .mark-hero-reveal-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 1.5rem;
    padding-inline: 2rem;
    text-align: center;
  }

  .mark-ui-second-section .mark-hero-copy-panel {
    grid-column: 1;
    grid-row: 1;
    max-width: 680px;
    margin: 0 auto;
    justify-self: center;
    text-align: center;
  }

  .mark-ui-second-section .mark-hero-copy-panel h2,
  .mark-ui-second-section .mark-hero-copy-panel>p {
    margin-right: auto;
    margin-left: auto;
  }

  .mark-ui-second-section .mark-hero-visual {
    grid-column: 1;
    grid-row: 2;
    max-width: 680px;
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .mark-video-pure-hero::after {
    background: linear-gradient(0deg, rgba(16, 13, 10, .88) 0%, rgba(16, 13, 10, .42) 52%, rgba(16, 13, 10, .06) 82%);
  }

  .mark-video-pure-copy {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 3rem;
    width: auto;
  }

  .mark-video-pure-copy h1 {
    font-size: clamp(3rem, 15vw, 4.7rem);
  }

  .mark-video-pure-copy p {
    max-width: 22rem;
    font-size: .92rem;
  }

  .mark-ui-second-section {
    min-height: auto;
  }

  .mark-ui-second-section .mark-hero-reveal-inner {
    min-height: auto;
  }

  .mark-ui-second-section .mark-hero-visual {
    height: 310px;
  }

  .mark-ui-second-section .mark-hero-copy-panel h2 {
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2.55rem, 10.5vw, 3.7rem);
  }

  .mark-ui-second-section .mark-hero-copy-panel>p {
    max-width: 380px;
    margin: 1.25rem auto 0;
    font-size: .95rem;
    line-height: 1.6;
  }
}

@media (max-width: 560px) {
  .mark-ui-second-section .mark-hero-callout-left {
    left: 0;
    right: auto;
    top: 46%;
    max-width: 96px;
  }

  .mark-ui-second-section .mark-hero-callout-right {
    right: 0;
    left: auto;
    top: 24%;
    max-width: 96px;
  }

  .mark-ui-second-section .mark-hero-callout p {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark-video-pure-copy {
    transition: none;
  }
}

/* Compact discovery composition for narrow mobile screens. */
@media (max-width: 600px) {
  .discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    gap: .8rem;
    padding: .85rem 1rem .6rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy {
    align-items: center;
    gap: .75rem;
    padding-bottom: .65rem;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 {
    font-size: clamp(1.35rem, 6.1vw, 1.65rem);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-copy h2 em {
    margin-left: .12em;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-caption h3 {
    font-size: .88rem;
    line-height: 1.1;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-stage {
    align-self: start;
    width: 100%;
    max-width: 430px;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail {
    width: 100%;
    min-height: 44px;
  }

  .discovery-showcase[data-discovery-lens] .discovery-showcase-rail button {
    padding: .72rem .12rem .48rem;
    font-size: .54rem;
    letter-spacing: .1em;
  }
}

/* Mobile pillar-card contrast correction. */
@media (max-width: 900px) {
  .pillar-card-dark h3 {
    color: #000000;
  }

  .pillar-card-dark p {
    color: #FFFFFF;
  }

  .pillar-card-dark>span {
    color: #000000;
  }

  .pillar-card-dark .glyph-secret i {
    border-color: rgba(245, 241, 232, .3);
  }

  .pillar-card-dark .glyph-secret b {
    border-color: #c9a227;
    background: #f5f1e8;
  }

  .pillar-card-sage h3 {
    color: #000000;
  }

  .pillar-card-sage p {
    color: #000000;
  }

  .pillar-card-sage>span {
    color: #000000;
  }

  .pillar-card-sage .glyph-shield i {
    border-color: rgba(47, 42, 35, .68);
  }
}

/* Preserve themed pillar surfaces on hover. */
@media (max-width: 900px) {

  .pillar-card-dark:hover,
  .pillar-card-dark:focus-within {
    background: var(--c-taupe-dark);
  }

  .pillar-card-sage:hover,
  .pillar-card-sage:focus-within {
    background: var(--c-sage);
  }
}

/* Global typography and colour standardisation */
:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --c-taupe: #9FAE8E;
}

body,
p,
li,
button,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Playfair Display', Georgia, serif;
}

main p:not(.identity-chapter-eyebrow):not(.discovery-showcase-kicker) {
  font-size: 14px;
  max-width: 600px;
  line-height: 24px;
  /* margin: 24px auto 0; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: 2.24px !important;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .textcontentblock_content_block__HUPuA h2 {
    font-size: 14px !important;
    letter-spacing: 1.9px !important;
  }
}

/* Compact single-line craft heading, matching the reference title treatment. */

/* Shared footer: solid black across every page. */
.footer,
.home-brand-story .footer,
.footer.site-footer-unified {
  background: #000000;
}

/* Footer contact panel and text colour policy. */
.footer-contact-panel {
  /* background: linear-gradient(135deg, #000000 0%, #9FAE8E 100%); */
  border-color: #C9A227;
}

.footer-contact-copy>span,
.footer-contact-copy h3 {
  color: #C9A227;
}

.footer-contact-copy p,
.footer-contact-secondary {
  color: #FFFFFF;
}

/* White text retained on dark visual and footer surfaces. */
.identity-expression .identity-chapter-eyebrow,
.identity-expression .identity-chapter-copy>p:not(.identity-chapter-eyebrow),
.identity-signature .identity-chapter-copy>p:not(.identity-chapter-eyebrow),
.identity-signature blockquote,
.mark-video-pure-copy p {
  color: #FFFFFF;
}

.identity-expression .identity-chapter-index,
.identity-expression h2 em,
.identity-signature .identity-chapter-index,
.identity-signature .identity-chapter-eyebrow,
.identity-signature h2 em,
.mark-video-pure-copy>span,
.mark-video-pure-copy h1 em {
  color: #C9A227;
}

/* Approved gold highlights: heading emphasis and editorial accent labels. */
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.identity-material-list span,
.identity-craft-card figcaption small,
.identity-diamond .identity-chapter-index,
.identity-diamond .identity-chapter-eyebrow,
.identity-diamond h2 em,
.mark-ui-second-section .mark-hero-copy-panel h2 em {
  color: #C9A227 !important;
}

/* Decorative background wordmarks stay subtle and never compete with content. */
.identity-craft::before {
  color: rgba(201, 162, 39, 0.055);
}

.identity-diamond-wordmark {
  color: rgba(201, 162, 39, 0.055);
}

/* Gold material story: expandable to six assets when the silver set is ready. */
.identity-material-gallery {
  padding: clamp(2rem, 6vw, 7rem) 0 0;
  overflow: hidden;
  background: #FFFFFF;
}

.identity-material-gallery-intro {
  max-width: 52rem;
  margin: 0 auto clamp(2.5rem, 4vw, 4rem);
  text-align: center;
}

.identity-material-gallery-intro h2 {
  margin: 0;
  color: #111111;
  font: 300 clamp(2.7rem, 4.5vw, 4.8rem)/.98 var(--font-serif);
  letter-spacing: -.04em;
}

.identity-material-gallery-intro p {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  color: #252525;
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.7;
}

.identity-material-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 0;
}

.identity-material-gallery-card {
  margin: 0;
  min-width: 0;
  background: #FFFFFF;
}

.identity-material-gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.identity-material-gallery-card figcaption {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem clamp(1rem, 2vw, 2rem) .2rem;
  background: #FFFFFF;
}

.identity-material-gallery-card figcaption span {
  color: #C9A227;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.identity-material-gallery-card figcaption strong {
  color: #111111;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .identity-material-gallery-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .identity-material-gallery-card {
    width: 100%;
  }
}

.identity-editorial-duo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.identity-material-gallery-editorial {
  padding-top: clamp(2.5rem, 5vw, 5rem);
}

@media (max-width: 900px) {
  .identity-editorial-duo-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Identity category collection discovery. */
.identity-collection-discovery {
  overflow: hidden;
  padding: clamp(2rem, 3vw, 3rem) 0;
  background: #FFFFFF;
}

.identity-collection-intro {
  max-width: 44rem;
  margin: 0 auto clamp(2.25rem, 5vw, 2.5rem);
  text-align: center;
}

.identity-collection-intro>span {
  display: block;
  margin-bottom: .9rem;
  color: #C9A227;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
}

.identity-collection-intro h2 {
  margin: 0;
  color: #000000;
}

.identity-collection-intro h2 em {
  color: #C9A227;
}

.identity-collection-intro p {
  max-width: 40rem;
  margin: 24px auto 0;
  color: #000000;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}

.identity-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.identity-collection-feature {
  width: 100%;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  background: #EAE7E1;
}

.identity-collection-feature img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.identity-collection-card {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000000;
}

.identity-collection-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) !important;
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

.identity-collection-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, .86) 100%);
  content: '';
  opacity: 0;
  transition: opacity .45s ease;
}

.identity-collection-card-content {
  position: absolute;
  z-index: 2;
  right: 1.35rem;
  bottom: 1.25rem;
  left: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity .45s ease, transform .45s ease;
}

.identity-collection-card-content strong {
  color: #FFFFFF;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.identity-collection-card-content i {
  color: #C9A227;
  font-size: 1.45rem;
  font-style: normal;
  line-height: 1;
}

.identity-collection-card:hover img,
.identity-collection-card:focus-visible img {
  filter: grayscale(100%) contrast(1.04) !important;
  transform: scale(1.045);
}

.identity-collection-card:hover::after,
.identity-collection-card:focus-visible::after,
.identity-collection-card:hover .identity-collection-card-content,
.identity-collection-card:focus-visible .identity-collection-card-content {
  opacity: 1;
  transform: translateY(0);
}

.identity-collection-card:focus-visible {
  outline: 2px solid #C9A227;
  outline-offset: 4px;
}

@media screen and (max-width: 767px) {
  .identity-collection-intro {
    margin-bottom: 2rem;
  }

  .identity-collection-intro p {
    padding: 0 .25rem;
  }

  .identity-collection-feature {
    aspect-ratio: auto;
  }

  .identity-collection-feature img {
    height: auto;
  }

  .identity-collection-grid {
    display: flex;
    gap: .85rem;
    margin-right: -1rem;
    padding: 0 20% .7rem 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .identity-collection-grid::-webkit-scrollbar {
    display: none;
  }

  .identity-collection-card {
    flex: 0 0 min(76vw, 300px);
    scroll-snap-align: start;
  }

  .identity-collection-card::after,
  .identity-collection-card-content {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Simplified Mark journey: the scroll-controlled images carry the story. */
.mark-transformation-cinematic {
  height: 360vh;
}

.cinematic-journey-head {
  top: clamp(1.5rem, 4vh, 3rem);
}

.cinematic-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2.24px;
}

@media screen and (max-width: 767px) {
  .mark-transformation-cinematic {
    height: 320vh;
  }

  .cinematic-title {
    font-size: 14px;
    letter-spacing: 1.9px;
  }
}

/* Two-column Mark journey: text progresses beside the scroll-changing image. */
.cinematic-journey-head {
  top: 24%;
  left: max(5vw, calc((100vw - 1280px) / 2));
  width: min(29vw, 23rem);
  padding: 0;
  text-align: left;
}

.cinematic-chapter-nav.cinematic-split-list {
  top: calc(24% + 4.25rem);
  bottom: auto;
  left: max(5vw, calc((100vw - 1280px) / 2));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  width: min(29vw, 23rem);
  border: 0;
  padding: 0;
}

.cinematic-split-list .nano-label {
  color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cinematic-split-list .nano-label::before {
  width: 1.5rem;
  height: 1px;
  margin-right: .7rem;
  background: #C9A227;
  content: '';
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left;
  transition: opacity .35s ease, transform .35s ease;
}

.cinematic-split-list .nano-label.is-active {
  color: #C9A227;
  transform: none;
}

.cinematic-split-list .nano-label.is-active::before {
  opacity: 1;
  transform: scaleX(1);
}

.cinematic-split-list .nano-label.is-active::after {
  display: none;
}

.cinematic-stage,
.cinematic-layer {
  box-sizing: border-box;
  justify-content: flex-end;
  padding-left: 36vw;
  padding-right: max(4vw, calc((100vw - 1320px) / 2));
}

.cinematic-layer img {
  max-width: min(52vw, 650px);
}

@media screen and (max-width: 767px) {
  .cinematic-journey-head {
    top: 8vh;
    right: 1.25rem;
    left: 1.25rem;
    width: auto;
    text-align: center;
  }

  .cinematic-chapter-nav.cinematic-split-list {
    top: auto;
    right: 1.25rem;
    bottom: 5vh;
    left: 1.25rem;
    flex-direction: row;
    justify-content: center;
    width: auto;
    gap: .75rem;
  }

  .cinematic-split-list .nano-label {
    font-size: .54rem;
    letter-spacing: .08em;
  }

  .cinematic-split-list .nano-label::before {
    display: none;
  }

  .cinematic-stage,
  .cinematic-layer {
    justify-content: center;
    padding: 0 1.25rem;
  }

  .cinematic-layer img {
    max-width: 88vw;
  }
}

/* Editorial progression panel for the Mark journey. */
.mark-transformation-cinematic .cinematic-journey-head {
  top: 19%;
  left: max(5vw, calc((100vw - 1280px) / 2));
  width: min(28vw, 21rem);
  padding: 1.35rem 1.5rem;
  background: #000000;
  border: 1px solid #C9A227;
  text-align: left;
}

.mark-transformation-cinematic .cinematic-title {
  color: #FFFFFF !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: 2.24px !important;
  text-align: left;
}

.mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
  top: calc(19% + 5rem);
  left: max(5vw, calc((100vw - 1280px) / 2));
  display: grid;
  gap: 0;
  width: min(28vw, 21rem);
  background: #FFFFFF;
  border: 1px solid #C9A227;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label {
  display: flex;
  width: 100%;
  min-height: 3.1rem;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.9px;
  line-height: 24px;
  text-transform: uppercase;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label:last-child {
  border-bottom: 0;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label::before {
  width: .5rem;
  height: .5rem;
  flex: 0 0 .5rem;
  margin-right: .8rem;
  border: 1px solid #C9A227;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 1;
  transform: none;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label.is-active {
  background: #000000;
  color: #C9A227;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label.is-active::before {
  background: #C9A227;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .2);
}

@media screen and (max-width: 767px) {
  .mark-transformation-cinematic .cinematic-journey-head {
    top: 6vh;
    right: 1.25rem;
    left: 1.25rem;
    width: auto;
    padding: 1rem 1.1rem;
    text-align: center;
  }

  .mark-transformation-cinematic .cinematic-title {
    font-size: 14px !important;
    line-height: 24px !important;
    letter-spacing: 1.9px !important;
    text-align: center;
  }

  .mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
    top: auto;
    right: 1.25rem;
    bottom: 4vh;
    left: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  }

  .mark-transformation-cinematic .cinematic-split-list .nano-label {
    min-height: 2.75rem;
    padding: .55rem .65rem;
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  .mark-transformation-cinematic .cinematic-split-list .nano-label:nth-last-child(2) {
    border-bottom: 0;
  }

  .mark-transformation-cinematic .cinematic-split-list .nano-label:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, .12);
  }
}

/* Desktop Mark journey: fixed 30% editorial column and 70% visual column. */
@media screen and (min-width: 768px) {
  .mark-transformation-cinematic .cinematic-journey-head {
    left: 0;
    width: 30vw;
    box-sizing: border-box;
    padding: clamp(1.25rem, 2vw, 2rem);
  }

  .mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
    left: 0;
    width: 30vw;
    box-sizing: border-box;
  }

  .mark-transformation-cinematic .cinematic-stage,
  .mark-transformation-cinematic .cinematic-layer {
    justify-content: center;
    padding-right: 0;
    padding-left: 40vw;
  }

  .mark-transformation-cinematic .cinematic-layer img {
    max-width: min(58vw, 760px);
    max-height: min(70vh, 680px);
  }
}

/* Light Mark journey panel: no black background. */
.mark-transformation-cinematic .cinematic-journey-head {
  background: #FFFFFF;
}

.mark-transformation-cinematic .cinematic-title {
  color: #000000 !important;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label.is-active {
  background: #9FAE8E;
  color: #000000;
}

/* Mark journey follows the shared page container, including its 30/70 split. */
.cinematic-journey-container {
  position: relative;
  height: 100%;
}

@media screen and (min-width: 768px) {

  .mark-transformation-cinematic .cinematic-journey-head,
  .mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
    left: 0;
    width: 30%;
  }

  .mark-transformation-cinematic .cinematic-stage,
  .mark-transformation-cinematic .cinematic-layer {
    justify-content: center;
    padding-right: 0;
    padding-left: 30%;
  }

  .mark-transformation-cinematic .cinematic-layer img {
    max-width: 86%;
    max-height: min(70vh, 680px);
  }
}

@media screen and (max-width: 767px) {
  .cinematic-journey-container {
    padding: 0;
  }
}

/* Keep the Mark journey editorial and open: no enclosing or row borders. */
.mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list,
.mark-transformation-cinematic .cinematic-split-list .nano-label,
.mark-transformation-cinematic .cinematic-split-list .nano-label:nth-child(odd) {
  border: 0;
}

/* PURE ID mark story copy. */
.mark-transformation-cinematic .cinematic-eyebrow {
  display: block;
  margin: 0 0 .75rem;
  color: #C9A227;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.9px;
  line-height: 1.2;
}

.mark-transformation-cinematic .cinematic-intro {
  max-width: 425px;
  margin: 24px 0 0;
  color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

@media screen and (min-width: 768px) {
  .mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
    top: calc(19% + clamp(13.5rem, 18vw, 15.5rem));
  }
}

@media screen and (max-width: 767px) {
  .mark-transformation-cinematic .cinematic-intro {
    margin-top: 16px;
    text-align: center;
  }
}

/* Hero navigation: transparent at rest, with a sage surface on hover or scroll. */
.home-brand-story .navbar:not(.scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-brand-story .navbar:not(.scrolled):hover,
.home-brand-story .navbar.scrolled {
  background: rgba(159, 174, 142, .96) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .08) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Open editorial treatment for the PURE ID mark story. */
.mark-transformation-cinematic .cinematic-journey-head {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
  display: grid;
  gap: .6rem;
  background: transparent !important;
  border: 0 !important;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label,
.mark-transformation-cinematic .cinematic-split-list .nano-label.is-active {
  min-height: auto;
  padding: .35rem 0;
  background: transparent !important;
  color: #000000;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label.is-active {
  color: #C9A227;
}

.mark-transformation-cinematic .cinematic-split-list .nano-label.is-active::before {
  background: #C9A227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .12);
}

/* The hero header stays transparent after the film ends as well. */
body.mark-film-playing .home-brand-story .navbar:not(.scrolled),
.home-brand-story .mark-film-hero.is-revealed~* .navbar:not(.scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.home-brand-story.mark-film-playing .navbar:not(.scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Align the Mark story copy to the shared container gutter. */
@media screen and (min-width: 768px) {

  .mark-transformation-cinematic .cinematic-journey-head,
  .mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
    left: 2rem;
    width: calc(30% - 2rem);
  }
}

/* Mark story desktop split: 40% editorial copy and 60% visual. */
@media screen and (min-width: 768px) {

  .mark-transformation-cinematic .cinematic-journey-head,
  .mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
    width: calc(40% - 2rem);
  }

  .mark-transformation-cinematic .cinematic-stage,
  .mark-transformation-cinematic .cinematic-layer {
    padding-left: 40%;
  }
}

/* Keep the Mark story copy and its scroll points visually connected. */
@media screen and (min-width: 768px) {
  .mark-transformation-cinematic .cinematic-chapter-nav.cinematic-split-list {
    top: calc(19% + clamp(9rem, 10vw, 10.5rem));
  }
}

/* Keep the Mark details as one compact editorial content block. */
.mark-transformation-cinematic .cinematic-journey-head .cinematic-chapter-nav.cinematic-split-list {
  position: static;
  width: 100%;
  margin: 1.5rem 0 0;
  gap: .4rem;
}

.mark-transformation-cinematic .cinematic-journey-head .cinematic-split-list .nano-label,
.mark-transformation-cinematic .cinematic-journey-head .cinematic-split-list .nano-label.is-active {
  padding: .25rem 0;
  transform: none;
}

/* Vertically align the Mark story copy with its visual and use the viewport more fully. */
@media screen and (min-width: 768px) {
  .mark-transformation-cinematic .cinematic-journey-head {
    top: 50%;
    transform: translateY(-50%);
  }

  .mark-transformation-cinematic .cinematic-layer img {
    max-width: 90%;
    max-height: min(76vh, 720px);
  }
}

/* Start every Mark detail from the same left edge as the heading and copy. */
.mark-transformation-cinematic .cinematic-journey-head .cinematic-chapter-nav.cinematic-split-list {
  justify-content: flex-start;
  align-items: flex-start;
  grid-template-columns: 1fr;
}

.mark-transformation-cinematic .cinematic-journey-head .cinematic-split-list .nano-label {
  justify-content: flex-start;
  text-align: left;
}

/* Private signature: clean white editorial chapter. */
.identity-signature {
  padding: 0;
  background: #FFFFFF;
  color: #000000;
}

.identity-signature::before,
.identity-signature-orbit {
  display: none;
}

.identity-signature-shell {
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.identity-signature .identity-chapter-copy {
  order: 1;
  max-width: 425px;
}

.identity-signature .identity-signature-visual {
  order: 2;
  width: 100%;
  margin: 0;
}

.identity-signature-visual figure {
  border-radius: 0;
  box-shadow: none;
}

.identity-signature-visual figure::after {
  display: none;
}

.identity-signature-visual img {
  aspect-ratio: 4 / 5;
}

.identity-signature h2,
.identity-signature h2 em,
.identity-signature .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  color: #000000;
}

.identity-signature h2 em {
  color: #C9A227;
}

.identity-signature blockquote {
  margin: 2rem 0 0;
  padding: 0;
  border: 0;
  color: #C9A227 !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}

.identity-signature-note {
  right: 1.25rem;
  bottom: 1.25rem;
  background: #000000;
  color: #FFFFFF;
  box-shadow: none;
}

@media screen and (max-width: 767px) {
  .identity-signature-shell {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .identity-signature .identity-chapter-copy,
  .identity-signature .identity-signature-visual {
    width: 100%;
    max-width: none;
  }

  .identity-signature-visual img {
    aspect-ratio: 1 / 1;
  }
}

/* Fade between the three paused hero-video frames. */
.mark-video-pure-hero .mark-film-video {
  transition: opacity .28s ease;
}

.mark-video-pure-hero.is-frame-transition .mark-film-video {
  opacity: 0 !important;
}

/* Hero description doubles as the next-section link. */
.mark-video-pure-copy .mark-video-pure-description {
  display: inline-flex;
  max-width: 425px;
  align-items: center;
  gap: .8rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  text-align: left;
  text-transform: none;
}

.mark-video-pure-copy .mark-video-pure-description i {
  flex: 0 0 auto;
  color: #C9A227;
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  transition: transform .25s ease;
}

.mark-video-pure-copy .mark-video-pure-description:hover i,
.mark-video-pure-copy .mark-video-pure-description:focus-visible i {
  transform: translate(3px, -3px);
}

/* Hero-arrow interaction and full collection-section anchor position. */
.identity-collection-discovery {
  scroll-margin-top: var(--nav-height);
}

.mark-video-pure-copy .mark-video-pure-description i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #C9A227;
  border-radius: 50%;
}

.mark-video-pure-copy .mark-video-pure-description:hover i,
.mark-video-pure-copy .mark-video-pure-description:focus-visible i {
  background: #C9A227;
  color: #000000;
  transform: translate(3px, -3px) rotate(45deg);
}

/* Collection signature: concise copy paired with the PURE ID mark graphic. */
.identity-signature-kicker {
  display: block;
  margin: 0 0 1rem;
  color: #C9A227;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.9px;
  line-height: 1.2;
}

.identity-signature-visual {
  isolation: isolate;
  overflow: hidden;
  background: #9FAE8E;
}

.identity-signature-visual::before,
.identity-signature-visual::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(201, 162, 39, .72);
  border-radius: 50%;
  content: '';
}

.identity-signature-visual::before {
  width: 76%;
  aspect-ratio: 1;
  top: 12%;
  left: 12%;
}

.identity-signature-visual::after {
  width: 50%;
  aspect-ratio: 1;
  top: 25%;
  left: 25%;
}

.identity-signature-visual figure {
  display: grid;
  min-height: clamp(360px, 36vw, 570px);
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  background: transparent;
}

.identity-signature-visual img {
  width: min(78%, 430px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .18));
}

.identity-signature .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  margin: 24px 0 0;
  text-align: left;
}

.identity-signature-note {
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .identity-signature-visual figure {
    min-height: 340px;
  }
}

.identity-signature-visual::before,
.identity-signature-visual::after {
  z-index: 0;
}

.identity-signature-visual figure,
.identity-signature-note {
  z-index: 1;
}

/* Precisely align the hero sentence with its linked arrow. */
.mark-video-pure-copy .mark-video-pure-description {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 28px;
  width: fit-content;
  max-width: 425px;
  column-gap: 12px;
  align-items: center;
}

.mark-video-pure-copy .mark-video-pure-description>span {
  display: block;
}

.mark-video-pure-copy .mark-video-pure-description i {
  width: 28px;
  height: 28px;
  margin: 0;
  justify-self: center;
  align-self: center;
}

.mark-video-pure-copy .mark-video-pure-description:hover i,
.mark-video-pure-copy .mark-video-pure-description:focus-visible i {
  transform: translateX(3px);
}

/* Collection signature: full-width content followed by the supplied 8:3 image. */
.identity-signature {
  padding: 0;
}

.identity-signature-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2rem);
  align-items: stretch;
}

.identity-signature .identity-chapter-copy {
  order: initial;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.identity-signature .identity-signature-kicker,
.identity-signature .identity-chapter-copy h2,
.identity-signature .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  text-align: center;
}

.identity-signature .identity-chapter-copy>p:not(.identity-chapter-eyebrow) {
  max-width: 600px;
  margin: 24px auto 0;
}

.identity-signature .identity-signature-visual {
  order: initial;
  width: 100%;
  margin: 0;
  overflow: hidden;
  isolation: auto;
  background: transparent;
}

.identity-signature .identity-signature-visual::before,
.identity-signature .identity-signature-visual::after {
  display: none;
}

.identity-signature .identity-signature-visual figure {
  min-height: 0;
  aspect-ratio: 8 / 3;
  padding: 0;
  background: #000000;
}

.identity-signature .identity-signature-visual img {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  filter: none;
}

/* Compact the scroll-driven Mark story and tighten its editorial spacing. */
.mark-transformation-cinematic {
  height: 260vh;
}

.mark-transformation-cinematic .cinematic-intro {
  margin-top: 16px;
}

.mark-transformation-cinematic .cinematic-journey-head .cinematic-chapter-nav.cinematic-split-list {
  margin-top: 1rem;
  gap: .2rem;
}

.mark-transformation-cinematic .cinematic-journey-head .cinematic-split-list .nano-label,
.mark-transformation-cinematic .cinematic-journey-head .cinematic-split-list .nano-label.is-active {
  padding-block: .15rem;
}

@media screen and (max-width: 767px) {
  .mark-transformation-cinematic {
    height: 240vh;
  }
}

/* Collection identity statements are the links; only the arrow carries button styling. */
a.zigzag-identity {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .75rem;
  width: fit-content;
  color: #000000;
  text-decoration: none;
}

a.zigzag-identity em {
  color: inherit;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  line-height: 24px;
  transition: color .25s ease;
}

a.zigzag-identity i {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid #C9A227;
  border-radius: 50%;
  color: #C9A227;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

a.zigzag-identity:hover em,
a.zigzag-identity:focus-visible em {
  color: #C9A227;
}

a.zigzag-identity:hover i,
a.zigzag-identity:focus-visible i {
  background: #C9A227;
  color: #000000;
  transform: translate(3px, -3px);
}

a.zigzag-identity:focus-visible {
  outline: 2px solid #C9A227;
  outline-offset: 5px;
}

/* Scroll-led uploaded circle story */
.collection-orbit-story {
  width: 100%;
  max-width: none;
  height: 300svh;
  min-height: 0;
  margin: 0;
  overflow: visible;
  background: #FFFFFF;
  color: #000000;
}

.collection-orbit-story::before {
  display: none;
}

.collection-orbit-story .collection-orbit-story-inner {
  position: sticky;
  top: 0;
  display: grid;
  width: min(100% - clamp(2.5rem, 8vw, 9rem), 1440px);
  height: 100svh;
  min-height: 620px;
  grid-template-columns: minmax(320px, 40%) minmax(0, 60%);
  grid-template-areas: "copy graphic";
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  padding: clamp(5rem, 8vw, 8rem) 0 clamp(3rem, 5vw, 5rem);
}

.collection-orbit-story .collection-orbit-graphic {
  grid-area: graphic;
  position: relative;
  width: min(72vh, 100%, 720px);
  justify-self: center;
  aspect-ratio: 1;
  opacity: 1;
  transform: none;
}

.collection-orbit-story .collection-orbit-graphic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: circle(18% at 50% 50%);
  transform: scale(1.72);
  transform-origin: center;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .08));
  will-change: clip-path, transform;
  transition: clip-path .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}

.collection-orbit-story[data-orbit-state="1"] .collection-orbit-graphic img {
  clip-path: circle(36% at 50% 50%);
  transform: scale(1.18);
}

.collection-orbit-story[data-orbit-state="2"] .collection-orbit-graphic img {
  clip-path: circle(50% at 50% 50%);
  transform: scale(1);
}

.collection-orbit-story .collection-orbit-copy {
  grid-area: copy;
  align-self: center;
  opacity: 1;
  transform: none;
}

.collection-orbit-story .collection-orbit-kicker,
.collection-orbit-panel small {
  display: block;
  color: #C9A227;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.collection-orbit-story .collection-orbit-copy h2,
.collection-orbit-panel h3 {
  color: #000000;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
}

.collection-orbit-story .collection-orbit-copy h2 {
  margin: 1rem 0 0;
}

.collection-orbit-story .collection-orbit-copy h2 em {
  color: #C9A227;
  font-weight: inherit;
}

.collection-orbit-panels {
  position: relative;
  display: block;
  min-height: 125px;
  margin-top: 1.5rem;
}

.collection-orbit-panel {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}

.collection-orbit-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.collection-orbit-panel h3 {
  margin: .75rem 0 0;
}

.collection-orbit-panel p {
  max-width: 425px;
  margin: 1.25rem 0 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
}

.collection-orbit-copy .collection-orbit-progress {
  display: flex;
  gap: 1.5rem;
  margin-top: .75rem;
}

.collection-orbit-progress button {
  position: relative;
  padding: 0 0 .55rem;
  border: 0;
  background: transparent;
  color: #000000;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.collection-orbit-progress button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #C9A227;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.collection-orbit-progress button.is-active {
  color: #C9A227;
}

.collection-orbit-progress button.is-active::after,
.collection-orbit-progress button:hover::after {
  transform: scaleX(1);
}

@media (max-width: 767px) {
  .collection-orbit-story {
    height: 270svh;
  }

  .collection-orbit-story .collection-orbit-story-inner {
    width: calc(100% - 2rem);
    min-height: 560px;
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "graphic";
    grid-template-rows: auto minmax(0, 1fr);
    gap: .75rem;
    padding: 5.25rem 0 1rem;
  }

  .collection-orbit-story .collection-orbit-copy {
    padding: 0;
  }

  .collection-orbit-story .collection-orbit-copy h2,
  .collection-orbit-panel h3 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.9px;
  }

  .collection-orbit-panels {
    min-height: 120px;
    margin-top: 1rem;
  }

  .collection-orbit-panel p {
    margin-top: .75rem;
  }

  .collection-orbit-copy .collection-orbit-progress {
    gap: 1rem;
    margin-top: .5rem;
  }

  .collection-orbit-story .collection-orbit-graphic {
    width: min(48vh, 92vw, 450px);
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .collection-orbit-story .collection-orbit-graphic img,
  .collection-orbit-panel {
    transition: none;
  }
}

.collection-orbit-intro {
  max-width: 425px;
  margin: 24px 0 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
}

.collection-orbit-intro strong {
  font-weight: 600;
}

/* Vertical Circle of Origin correction */
.collection-orbit-story {
  height: 225svh;
}

.collection-orbit-story .collection-orbit-story-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: min(calc(100% - 2rem), 1000px);
  gap: .75rem;
  padding: clamp(5.5rem, 9vh, 7rem) 0 1rem;
}

.collection-orbit-story .collection-orbit-copy {
  width: 100%;
  flex: 0 0 auto;
  text-align: center;
}

.collection-orbit-intro {
  margin: 12px auto 0;
}

.collection-orbit-panels {
  min-height: 92px;
  margin-top: .9rem;
}

.collection-orbit-panel h3 {
  margin-top: .35rem;
}

.collection-orbit-panel p {
  margin: .35rem auto 0;
}

.collection-orbit-copy .collection-orbit-progress {
  justify-content: center;
  margin-top: .4rem;
}

.collection-orbit-story .collection-orbit-graphic {
  width: min(52vh, 74vw, 600px);
  max-height: 55vh;
  flex: 1 1 auto;
  align-self: center;
}

@media (max-width: 767px) {
  .collection-orbit-story {
    height: 220svh;
  }

  .collection-orbit-story .collection-orbit-story-inner {
    display: flex;
    width: calc(100% - 2rem);
    gap: .5rem;
    padding: 5.25rem 0 .75rem;
  }

  .collection-orbit-panels {
    min-height: 96px;
    margin-top: .75rem;
  }

  .collection-orbit-copy .collection-orbit-progress {
    margin-top: .25rem;
  }

  .collection-orbit-story .collection-orbit-graphic {
    width: min(42vh, 90vw, 400px);
    max-height: 44vh;
  }
}

/* Sticky containment and visual order fix */
.circle-collections.circle-section {
  overflow: visible;
  background: #FFFFFF;
}

.collection-orbit-story .collection-orbit-copy {
  order: 1;
}

.collection-orbit-story .collection-orbit-graphic {
  order: 2;
}

/* Refined editorial orbit composition */
.collection-orbit-story {
  height: 210svh;
}

.collection-orbit-story .collection-orbit-story-inner {
  width: min(calc(100% - clamp(3rem, 8vw, 8rem)), 1120px);
  gap: clamp(1rem, 2.5vh, 2rem);
  padding: clamp(4.75rem, 7vh, 6rem) 0 1rem;
}

.collection-orbit-story .collection-orbit-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(4rem, 9vw, 8rem);
  align-items: start;
  text-align: left;
}

.collection-orbit-story .collection-orbit-kicker {
  grid-column: 1;
  grid-row: 1;
}

.collection-orbit-story .collection-orbit-copy h2 {
  grid-column: 1;
  grid-row: 2;
  margin-top: .8rem;
}

.collection-orbit-intro {
  grid-column: 1;
  grid-row: 3 / span 2;
  margin: .9rem 0 0;
}

.collection-orbit-panels {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 100%;
  min-height: 112px;
  margin: 0;
}

.collection-orbit-panel h3 {
  margin-top: .7rem;
}

.collection-orbit-panel p {
  margin: .7rem 0 0;
}

.collection-orbit-copy .collection-orbit-progress {
  grid-column: 2;
  grid-row: 4;
  justify-content: flex-start;
  margin-top: .55rem;
}

.collection-orbit-story .collection-orbit-graphic {
  width: min(57vh, 70vw, 640px);
  max-height: 58vh;
}

@media (max-width: 767px) {
  .collection-orbit-story {
    height: 205svh;
  }

  .collection-orbit-story .collection-orbit-story-inner {
    width: calc(100% - 2rem);
    gap: .75rem;
    padding: 5rem 0 .75rem;
  }

  .collection-orbit-story .collection-orbit-copy {
    display: block;
    text-align: center;
  }

  .collection-orbit-intro {
    margin: .65rem auto 0;
  }

  .collection-orbit-panels {
    min-height: 104px;
    margin-top: 1.1rem;
  }

  .collection-orbit-panel p {
    margin: .45rem auto 0;
  }

  .collection-orbit-copy .collection-orbit-progress {
    justify-content: center;
    margin-top: .35rem;
  }

  .collection-orbit-story .collection-orbit-graphic {
    width: min(44vh, 90vw, 430px);
    max-height: 46vh;
  }
}

/* Simple static Circle of Origin */
.collection-orbit-story {
  height: auto;
  min-height: 0;
  padding: clamp(4.5rem, 7vw, 7rem) 0;
  overflow: hidden;
}

.collection-orbit-story .collection-orbit-story-inner {
  position: relative;
  top: auto;
  display: flex;
  width: min(calc(100% - clamp(3rem, 8vw, 8rem)), 1120px);
  height: auto;
  min-height: 0;
  gap: clamp(3rem, 6vw, 6rem);
  padding: 0;
}

.collection-orbit-story .collection-orbit-copy {
  order: 1;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  column-gap: clamp(4rem, 9vw, 8rem);
  align-items: start;
  text-align: left;
}

.collection-orbit-story .collection-orbit-copy h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.collection-orbit-intro {
  grid-column: 1;
  grid-row: 2;
  margin: 1rem 0 0;
}

.collection-orbit-panels {
  position: relative;
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 0;
  margin: 0;
  gap: 1.5rem;
}

.collection-orbit-panel,
.collection-orbit-panel.is-active {
  position: relative;
  inset: auto;
  display: block;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.collection-orbit-panel h3 {
  margin-top: .45rem;
}

.collection-orbit-panel p {
  margin: .4rem 0 0;
}

.collection-orbit-story .collection-orbit-graphic {
  order: 2;
  width: min(58vw, 650px);
  max-height: none;
  flex: 0 0 auto;
}

.collection-orbit-story .collection-orbit-graphic img,
.collection-orbit-story[data-orbit-state] .collection-orbit-graphic img {
  clip-path: none;
  transform: none;
}

@media (max-width: 767px) {
  .collection-orbit-story {
    height: auto;
    padding: 3.5rem 0;
  }

  .collection-orbit-story .collection-orbit-story-inner {
    width: calc(100% - 2rem);
    gap: 2.5rem;
  }

  .collection-orbit-story .collection-orbit-copy {
    display: block;
    text-align: center;
  }

  .collection-orbit-intro {
    margin: .75rem auto 0;
  }

  .collection-orbit-panels {
    display: grid;
    margin-top: 2rem;
    gap: 1.35rem;
  }

  .collection-orbit-panel p {
    margin: .35rem auto 0;
  }

  .collection-orbit-story .collection-orbit-graphic {
    width: min(90vw, 430px);
  }
}

/* Final simple SVG orbit layout */
.collection-orbit-story {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background: #FFFFFF;
}

.collection-orbit-story .collection-orbit-story-inner {
  display: grid;
  width: min(calc(100% - clamp(3rem, 8vw, 8rem)), 1200px);
  grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr);
  gap: clamp(3.5rem, 8vw, 8rem);
  align-items: center;
}

.collection-orbit-story .collection-orbit-graphic {
  order: 1;
  width: min(100%, 520px);
  max-height: none;
  justify-self: center;
}

.collection-orbit-graphic svg {
  display: block;
  width: 100%;
  height: auto;
}

.orbit-svg-ring {
  fill: none;
  stroke: #9FAE8E;
  stroke-width: 2;
}

.orbit-svg-ring-outer {
  opacity: .42;
}

.orbit-svg-ring-middle {
  opacity: .58;
}

.orbit-svg-ring-inner {
  opacity: .78;
}

.orbit-svg-core-halo {
  fill: #C9A227;
  opacity: .12;
}

.orbit-svg-core {
  fill: #C9A227;
}

.collection-orbit-story .collection-orbit-copy {
  order: 2;
  display: block;
  width: 100%;
  text-align: left;
}

.collection-orbit-story .collection-orbit-copy h2 {
  margin: 0;
}

.collection-orbit-intro {
  margin: 1rem 0 0;
}

.collection-orbit-panels {
  display: grid;
  margin-top: clamp(2rem, 4vw, 3rem);
  gap: 1.25rem;
}

.collection-orbit-panel,
.collection-orbit-panel.is-active {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: baseline;
}

.collection-orbit-panel small {
  color: #C9A227;
  font-size: 10px;
  letter-spacing: .18em;
}

.collection-orbit-panel p {
  max-width: 425px;
  margin: 0;
}

@media (max-width: 767px) {
  .collection-orbit-story {
    padding: 3.5rem 0;
  }

  .collection-orbit-story .collection-orbit-story-inner {
    display: grid;
    width: calc(100% - 2rem);
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .collection-orbit-story .collection-orbit-graphic {
    width: min(82vw, 380px);
  }

  .collection-orbit-story .collection-orbit-copy {
    text-align: center;
  }

  .collection-orbit-intro {
    margin: .75rem auto 0;
  }

  .collection-orbit-panels {
    margin-top: 2rem;
    text-align: left;
  }

  .collection-orbit-panel,
  .collection-orbit-panel.is-active {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 1rem;
  }
}

/* Premium interactive Circle of Origin */
.collection-orbit-story {
  height: 245svh;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #FFF;
  color: #191712;
}

.collection-orbit-story .collection-orbit-story-inner {
  position: sticky;
  top: 0;
  display: grid;
  width: min(calc(100% - clamp(3rem, 7vw, 7rem)), 1380px);
  height: 100svh;
  min-height: 640px;
  grid-template-columns: minmax(340px, 38%) minmax(0, 62%);
  grid-template-areas: "copy graphic";
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(5.5rem, 8vh, 7rem) 0 clamp(2rem, 4vh, 3.5rem);
}

.collection-orbit-story .collection-orbit-copy {
  grid-area: copy;
  order: 1;
  display: block;
  width: 100%;
  text-align: left;
}

.collection-orbit-story .collection-orbit-kicker {
  display: block;
  color: #B99332;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.collection-orbit-story .collection-orbit-copy h2 {
  margin: 1rem 0 0;
  color: #191712;
  font-family: var(--font-serif);
  font-size: clamp(36px, 3.15vw, 44px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.collection-orbit-story .collection-orbit-copy h2 em {
  color: #B99332;
  font-weight: inherit;
}

.collection-orbit-intro {
  max-width: 430px;
  margin: 1.25rem 0 0;
  color: #191712;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 25px;
}

.collection-orbit-panels {
  position: relative;
  display: block;
  width: 100%;
  min-height: 176px;
  margin-top: clamp(2.25rem, 5vh, 3.5rem);
}

.collection-orbit-panel,
.collection-orbit-panel.is-active {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .55s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}

.collection-orbit-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.collection-orbit-panel small {
  display: block;
  color: #B99332;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
}

.collection-orbit-panel h3 {
  margin: .7rem 0 0;
  color: #191712;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .14em;
}

.collection-orbit-panel p {
  max-width: 430px;
  margin: 1rem 0 0;
  color: #191712;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 25px;
}

.collection-orbit-panel p strong {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}

.collection-orbit-panel p span {
  display: block;
}

.collection-orbit-copy .collection-orbit-progress {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  margin-top: .25rem;
}

.collection-orbit-progress i {
  width: 28px;
  height: 1px;
  background: rgba(25, 23, 18, .2);
}

.collection-orbit-progress button {
  padding: .4rem 0;
  border: 0;
  background: transparent;
  color: rgba(25, 23, 18, .38);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  cursor: pointer;
  transition: color .3s ease, transform .3s ease;
}

.collection-orbit-progress button::after {
  display: none;
}

.collection-orbit-progress button.is-active,
.collection-orbit-progress button:hover {
  color: #B99332;
  transform: translateY(-2px);
}

.collection-orbit-controls {
  display: flex;
  justify-content: space-between;
  max-width: 310px;
  margin-top: 1.4rem;
}

.collection-orbit-controls button {
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: #191712;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .3s ease, transform .3s ease;
}

.collection-orbit-controls button:hover:not(:disabled) {
  color: #B99332;
  transform: translateX(3px);
}

.collection-orbit-controls button:first-child:hover:not(:disabled) {
  transform: translateX(-3px);
}

.collection-orbit-controls button:disabled {
  opacity: .22;
  cursor: default;
}

.collection-orbit-story .collection-orbit-graphic {
  grid-area: graphic;
  order: 2;
  width: min(76vh, 100%, 800px);
  max-height: none;
  justify-self: end;
  aspect-ratio: 1;
}

.collection-orbit-graphic svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.orbit-svg-ring {
  fill: none;
  stroke: #9FAE8E;
  stroke-width: 1.5;
  opacity: .18;
  transform: scale(.96);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .6s ease, stroke .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}

.collection-orbit-story[data-orbit-state="0"] .orbit-svg-ring-inner,
.collection-orbit-story[data-orbit-state="1"] .orbit-svg-ring-middle,
.collection-orbit-story[data-orbit-state="2"] .orbit-svg-ring-outer {
  stroke: #B99332;
  stroke-width: 2.25;
  opacity: .95;
  transform: scale(1);
  filter: drop-shadow(0 0 9px rgba(185, 147, 50, .42));
}

.orbit-svg-core-halo {
  fill: #B99332;
  opacity: .12;
  transform-origin: center;
  animation: orbitCorePulse 2.8s ease-in-out infinite;
}

.orbit-svg-core {
  fill: #B99332;
  filter: drop-shadow(0 0 7px rgba(185, 147, 50, .55));
}

.orbit-svg-spark {
  fill: #FFFFFF;
  opacity: .92;
}

@keyframes orbitCorePulse {

  0%,
  100% {
    transform: scale(.9);
    opacity: .08;
  }

  50% {
    transform: scale(1.15);
    opacity: .18;
  }
}

@media (max-width: 767px) {
  .collection-orbit-story {
    height: 230svh;
    padding: 0;
  }

  .collection-orbit-story .collection-orbit-story-inner {
    display: grid;
    width: calc(100% - 2rem);
    height: 100svh;
    min-height: 600px;
    grid-template-columns: 1fr;
    grid-template-areas: "graphic" "copy";
    grid-template-rows: minmax(220px, 40vh) minmax(0, 1fr);
    gap: .65rem;
    padding: 5rem 0 .8rem;
  }

  .collection-orbit-story .collection-orbit-graphic {
    grid-area: graphic;
    order: 1;
    width: min(38vh, 80vw, 360px);
    align-self: center;
    justify-self: center;
  }

  .collection-orbit-story .collection-orbit-copy {
    grid-area: copy;
    order: 2;
    text-align: center;
  }

  .collection-orbit-story .collection-orbit-copy h2 {
    margin-top: .65rem;
    font-size: clamp(28px, 8.5vw, 34px);
  }

  .collection-orbit-intro {
    max-width: 360px;
    margin: .7rem auto 0;
    font-size: 14px;
    line-height: 22px;
  }

  .collection-orbit-panels {
    min-height: 140px;
    margin-top: 1.1rem;
  }

  .collection-orbit-panel p {
    margin: .65rem auto 0;
    font-size: 14px;
    line-height: 22px;
  }

  .collection-orbit-panel p strong {
    font-size: 18px;
  }

  .collection-orbit-copy .collection-orbit-progress {
    justify-content: center;
  }

  .collection-orbit-controls {
    max-width: 280px;
    margin: .8rem auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .orbit-svg-ring,
  .collection-orbit-panel {
    transition: none;
  }

  .orbit-svg-core-halo {
    animation: none;
  }
}

/* Gold-only editorial discovery story */
#mark-discovery.discovery-showcase[data-discovery-lens] {
  position: relative;
  height: 360svh;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #FFFFFF;
  border: 0;
  color: #000000;
}

#mark-discovery.discovery-showcase[data-discovery-lens] .discovery-showcase-sticky {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
}

#mark-discovery.discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
  display: grid;
  width: min(calc(100% - clamp(3rem, 7vw, 7rem)), 1360px);
  max-width: 1360px;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(320px, 40%) minmax(0, 60%);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  margin: 0 auto;
  padding: calc(var(--nav-height) + clamp(1.5rem, 4vh, 3rem)) 0 clamp(1.25rem, 3vh, 2.25rem);
}

#mark-discovery .discovery-showcase-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: block;
  align-self: center;
  width: 100%;
  padding: 0;
  background: transparent;
  color: #000000;
}

#mark-discovery .discovery-showcase-kicker {
  display: block;
  margin: 0;
  color: #C9A227;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

#mark-discovery .discovery-showcase-copy h2 {
  max-width: 425px;
  margin: 1rem 0 0;
  color: #000000;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2.24px;
  white-space: normal;
  text-transform: uppercase;
}

#mark-discovery .discovery-showcase-copy h2 span,
#mark-discovery .discovery-showcase-copy h2 em {
  display: block;
}

#mark-discovery .discovery-showcase-copy h2 em {
  color: #C9A227;
  font-weight: inherit;
}

#mark-discovery .discovery-showcase-intro {
  display: block;
  max-width: 425px;
  margin: 24px 0 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  text-shadow: none;
}

#mark-discovery .discovery-showcase-caption {
  display: block;
  width: min(100%, 425px);
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  padding: 0;
  border: 0;
  transform: none;
}

#mark-discovery .discovery-showcase-caption h3 {
  margin: 0;
  color: #000000;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
}

#mark-discovery .discovery-showcase-caption p {
  display: block;
  max-width: 425px;
  margin: .8rem 0 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
}

#mark-discovery .mobile-swipe-hint-discovery {
  display: none;
}

#mark-discovery .discovery-showcase-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  height: min(70vh, 720px);
  min-height: 440px;
  overflow: hidden;
  border: 0;
  background: #FFFFFF;
  box-shadow: none;
}

#mark-discovery .discovery-showcase-stage::before {
  display: none;
}

#mark-discovery .discovery-showcase-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  pointer-events: none;
  transition: opacity .6s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
}

#mark-discovery .discovery-showcase-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#mark-discovery .discovery-showcase-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#mark-discovery .discovery-showcase-crop-diamond img {
  transform: scale(1.24);
}

#mark-discovery .discovery-showcase-profile-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, 1vw, 1rem);
}

#mark-discovery .discovery-showcase-profile-pair img {
  width: 100%;
  min-width: 0;
  object-fit: contain;
}

#mark-discovery .discovery-showcase-crop-identity img {
  transform: scale(1.14);
}

#mark-discovery .discovery-showcase-rail {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

#mark-discovery .discovery-showcase-progress {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  overflow: hidden;
  background: rgba(0, 0, 0, .12);
}

#mark-discovery .discovery-showcase-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #C9A227;
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

#mark-discovery .discovery-showcase-rail button {
  min-width: 0;
  padding: 1rem .5rem .35rem;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, .4);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}

#mark-discovery .discovery-showcase-rail button.is-active,
#mark-discovery .discovery-showcase-rail button:hover,
#mark-discovery .discovery-showcase-rail button:focus-visible {
  color: #C9A227;
}

@media (max-width: 900px) {
  #mark-discovery.discovery-showcase[data-discovery-lens] {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  #mark-discovery.discovery-showcase[data-discovery-lens] .discovery-showcase-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #mark-discovery.discovery-showcase[data-discovery-lens] .discovery-showcase-shell {
    display: flex;
    width: calc(100% - 2rem);
    height: auto;
    min-height: 0;
    flex-direction: column;
    gap: 0;
    padding: 5rem 0 3.5rem;
  }

  #mark-discovery .discovery-showcase-copy {
    order: 1;
    text-align: center;
  }

  #mark-discovery .discovery-showcase-copy h2,
  #mark-discovery .discovery-showcase-intro,
  #mark-discovery .discovery-showcase-caption {
    margin-right: auto;
    margin-left: auto;
  }

  #mark-discovery .discovery-showcase-copy h2 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.9px;
  }

  #mark-discovery .discovery-showcase-caption {
    margin-top: 1.5rem;
  }

  #mark-discovery .discovery-showcase-caption h3 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.9px;
  }

  #mark-discovery .mobile-swipe-hint-discovery {
    display: block;
    margin-top: 1.25rem;
    color: #C9A227;
  }

  #mark-discovery .discovery-showcase-stage {
    order: 2;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 1.5rem;
    aspect-ratio: 1 / 1;
  }

  #mark-discovery .discovery-showcase-crop-diamond img {
    transform: scale(1.12);
  }

  #mark-discovery .discovery-showcase-crop-identity img {
    transform: scale(1.05);
  }

  #mark-discovery .discovery-showcase-rail {
    order: 3;
    display: flex;
    width: 100%;
    margin-top: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  #mark-discovery .discovery-showcase-rail::-webkit-scrollbar {
    display: none;
  }

  #mark-discovery .discovery-showcase-rail button {
    flex: 0 0 30%;
    min-width: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {

  #mark-discovery .discovery-showcase-slide,
  #mark-discovery .discovery-showcase-progress i {
    transition: none;
  }
}

/* Discovery caption alignment correction */
#mark-discovery .discovery-showcase-caption {
  position: static;
  inset: auto;
  right: auto;
  bottom: auto;
  left: auto;
  grid-column: auto;
  grid-row: auto;
  justify-self: start;
  align-self: auto;
  text-align: left;
}

#mark-discovery .discovery-showcase-caption>div {
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  #mark-discovery .discovery-showcase-caption {
    justify-self: center;
    text-align: center;
  }
}

/* Circle of Origin supplied image visual */
.collection-orbit-story .collection-orbit-graphic {
  width: min(100%, 820px);
  max-height: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
}

.collection-orbit-story .collection-orbit-graphic img,
.collection-orbit-story[data-orbit-state] .collection-orbit-graphic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: none;
  filter: none;
  transform: scale(1.06);
  transform-origin: center;
  will-change: transform;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .55s ease;
}

.collection-orbit-story[data-orbit-state="1"] .collection-orbit-graphic img {
  transform: scale(1.03);
}

.collection-orbit-story[data-orbit-state="2"] .collection-orbit-graphic img {
  transform: scale(1);
}

@media (max-width: 767px) {
  .collection-orbit-story .collection-orbit-graphic {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 9;
  }
}

/* Full-bleed generated Circle of Origin background */
.collection-orbit-story .collection-orbit-story-inner {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 640px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #F8F6F1;
  background-image: url("assets/circle-origin-fullwidth-ripple.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.collection-orbit-story .collection-orbit-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(2rem, 10vw, 11rem);
  display: block;
  width: min(36vw, 460px);
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .collection-orbit-story .collection-orbit-story-inner {
    min-height: 620px;
    background-position: 68% top;
    background-size: auto 43svh;
  }

  .collection-orbit-story .collection-orbit-copy {
    top: 44svh;
    right: 1rem;
    left: 1rem;
    width: auto;
    transform: none;
  }
}

/* Craft to final editorial story */
.craft-final-story {
  width: 100%;
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem);
  background: #FFFFFF;
  color: #000000;
}

.craft-final-heading {
  width: min(100%, 680px);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.craft-final-heading>span,
.craft-final-card small {
  display: block;
  color: #C9A227;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.craft-final-heading h2,
.craft-final-card h3 {
  color: #000000;
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: uppercase;
}

.craft-final-heading h2 {
  margin: 1rem 0 0;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.08;
  letter-spacing: .055em;
}

.craft-final-heading h2 em {
  color: #C9A227;
  font-weight: inherit;
}

.craft-final-heading p {
  max-width: 580px;
  margin: 1.25rem auto 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
}

.craft-final-grid {
  display: grid;
  width: min(100%, 1400px);
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: start;
}

.craft-final-card {
  min-width: 0;
  margin: 0;
}

.craft-final-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #F7F7F5;
}

.craft-final-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.craft-final-card:first-child .craft-final-media img {
  filter: grayscale(1);
}

.craft-final-card:hover .craft-final-media img {
  transform: scale(1.025);
}

.craft-final-card figcaption {
  padding-top: 1.2rem;
}

.craft-final-card h3 {
  margin: .55rem 0 0;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 2.24px;
}

@media (max-width: 767px) {
  .craft-final-story {
    padding: 3.5rem 1rem 4rem;
  }

  .craft-final-heading {
    margin-bottom: 2.5rem;
    text-align: left;
  }

  .craft-final-heading h2 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .craft-final-heading p {
    margin-left: 0;
  }

  .craft-final-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .craft-final-card h3 {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 1.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .craft-final-media img {
    transition: none;
  }
}

/* Centre the collection architecture introduction */
.circle-origin-page .circle-architecture .creation-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.circle-origin-page .circle-architecture .creation-intro h2,
.circle-origin-page .circle-architecture .creation-intro>p {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* Circle of Origin editorial image story */
.origin-editorial-story {
  position: relative;
  width: 100%;
  padding: clamp(4.5rem, 4vw, 4rem) 0;
  overflow: hidden;
  background: #FFFFFF;
  color: #000000;
}

.origin-editorial-shell {
  width: min(calc(100% - clamp(2rem, 8vw, 8rem)), 1440px);
}

.origin-editorial-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 2.5rem);
}

.origin-editorial-heading span,
.origin-editorial-grid figcaption small {
  display: block;
  color: #C9A227;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.origin-editorial-heading h2 {
  margin: .9rem 0 0;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.1vw, 58px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.origin-editorial-heading h2 em {
  color: #C9A227;
  font-weight: inherit;
}

.origin-editorial-heading p {
  max-width: 760px;
  margin: 24px 0 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
}

.origin-editorial-copy {
  max-width: 650px;
}

.origin-editorial-copy strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 600;
  line-height: 1.35;
}

.origin-editorial-copy p {
  max-width: 590px;
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
}

.origin-editorial-grid {
  display: grid;
  height: clamp(620px, 65vw, 880px);
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.35rem);
}

.origin-editorial-grid figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #F6F4EF;
}

.origin-editorial-main {
  grid-column: 1;
  grid-row: 1 / 3;
}

.origin-editorial-detail {
  grid-column: 2;
}

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

.origin-editorial-main img {
  object-position: center;
}

.origin-editorial-detail img {
  object-fit: contain;
  object-position: 50% 50%;
}

.origin-editorial-grid figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem clamp(1rem, 2vw, 1.5rem) 1.15rem 0;
  text-align: left;
  background: rgba(255, 255, 255, .94);
}

.origin-editorial-grid figcaption strong {
  display: block;
  margin-top: .35rem;
  color: #000000;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .origin-editorial-story {
    padding: 3.75rem 0 4rem;
  }

  .origin-editorial-shell {
    width: calc(100% - 2rem);
  }

  .origin-editorial-heading {
    display: block;
    margin-bottom: 2.5rem;
  }

  .origin-editorial-heading h2 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .origin-editorial-copy {
    margin-top: 1.75rem;
  }

  .origin-editorial-grid {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: .75rem;
  }

  .origin-editorial-main {
    grid-column: 1 / 3;
    grid-row: 1;
    aspect-ratio: 4 / 5;
  }

  .origin-editorial-detail {
    grid-column: auto;
    grid-row: 2;
    aspect-ratio: 4 / 5;
  }

  .origin-editorial-grid figcaption {
    padding: .8rem .8rem .8rem 0;
  }

  .origin-editorial-grid figcaption small {
    font-size: 9px;
    letter-spacing: .14em;
  }

  .origin-editorial-grid figcaption strong {
    font-size: 13px;
  }
}

/* Origin editorial caption flow correction */
.origin-editorial-grid {
  height: auto;
  grid-template-rows: repeat(2, auto);
}

.origin-editorial-grid figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.origin-editorial-detail {
  aspect-ratio: auto;
}

.origin-editorial-detail img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}

.origin-editorial-grid figcaption {
  position: static;
  inset: auto;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .origin-editorial-detail {
    aspect-ratio: auto;
  }
}

/* Infinite-loop montage video hero */
.montage-video-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #000000;
}

.montage-video-hero-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .montage-video-hero {
    min-height: 620px;
  }
}

/* Persistent montage hero copy */
.montage-video-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .14) 34%, transparent 60%);
}

.montage-video-hero-copy {
  position: absolute;
  z-index: 2;
  bottom: clamp(2.5rem, 8vh, 6rem);
  left: max(2rem, calc((100vw - 1360px) / 2 + 2rem));
  width: min(90%, 520px);
  opacity: 1;
  visibility: visible;
  transform: none;
}

.montage-video-hero-copy h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-serif);
  /* font-size: clamp(28px, 3vw, 42px) !important; */
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.montage-video-hero-copy h1 em {
  color: #C9A227;
  font-weight: inherit;
}

.montage-video-hero-copy a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.25rem;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
}

.montage-video-hero-copy a i {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid #C9A227;
  border-radius: 50%;
  color: #C9A227;
  font-style: normal;
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

.montage-video-hero-copy a:hover i {
  background: #C9A227;
  color: #000000;
  transform: translate(2px, -2px);
}

@media (max-width: 767px) {
  .montage-video-hero::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .08) 55%, transparent 75%);
  }

  .montage-video-hero-copy {
    right: 1rem;
    bottom: 2rem;
    left: 1rem;
    width: auto;
  }

  .montage-video-hero-copy h1 {
    /* font-size: clamp(25px, 8vw, 34px) !important; */
  }
}

/* ==========================================================================
   SITE FOOTER: Social / Contact Links & Address Bar
   ========================================================================== */
.site-footer-unified .footer-brand-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.75rem;
  margin-top: 1.5rem;
}

.site-footer-unified .footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}

.site-footer-unified .footer-contact-icon,
.footer-contact-icon,
.footer-contact-item svg {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  color: #C9A227 !important;
  stroke: currentColor;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer-unified .footer-contact-item:hover,
.site-footer-unified .footer-contact-item:focus-visible {
  color: #C9A227;
  outline: none;
}

.site-footer-unified .footer-contact-item:hover .footer-contact-icon,
.site-footer-unified .footer-contact-item:focus-visible .footer-contact-icon {
  transform: scale(1.12);
}

.site-footer-unified .footer-bottom {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 241, 232, .16);
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em;
}

.site-footer-unified .footer-copyright {
  text-align: left;
}

.site-footer-unified .footer-address {
  text-align: right;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 700px) {
  .site-footer-unified .footer-brand-contact {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .site-footer-unified .footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    text-align: left !important;
  }

  .site-footer-unified .footer-copyright,
  .site-footer-unified .footer-address {
    text-align: left !important;
  }
}