:root{
  --paper:#f7f6f3;
  --ink:#111;
  --muted:rgba(255,255,255,.68);
  --espresso:#2f1d1d;
  --serif:"Italiana", Georgia, serif;
  --sans:"SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.hero{
  position:relative;
  height:220vh; /* about 120vh of actual scroll controls the full film after the viewport */
  background:#090807;
}
.hero-media{
  position:sticky;
  top:0;
  z-index:0;
  width:100%;
  height:100svh;
  overflow:hidden;
  background:#090807;
}
.hero-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.84) contrast(1.04);
}
.hero-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.22),transparent 22%,transparent 72%,rgba(0,0,0,.42)),
    radial-gradient(circle at 50% 48%,transparent 28%,rgba(0,0,0,.38) 100%);
}
.hero-film-grain{
  position:absolute;
  inset:-50%;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain .2s steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}

.site-header{
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  width:100%;
  height:78px;

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;

  padding:0 34px;
  color:#fff;

  transform:translateY(0);
  opacity:1;

  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    opacity .55s ease;

  pointer-events:auto;
}

.site-header.nav-hidden{
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
}
.brand{display:flex;align-items:center;width:max-content;transition:opacity .35s ease}
.brand:hover{opacity:.62}
.brand img{width:132px;height:auto;display:block;filter:brightness(0) invert(1)}
.brand-fallback{display:none;font-size:14px;letter-spacing:-.05em}
.brand-fallback span,.footer-brand span{font-family:var(--serif);font-style:italic}
.main-nav{display:flex;gap:25px;align-items:center}
.main-nav a{font-size:13px;letter-spacing:-.03em;position:relative;padding:8px 0}
.main-nav a:after{
  content:"";position:absolute;left:0;bottom:3px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s cubic-bezier(.16,1,.3,1)
}
.main-nav a:hover:after{transform:scaleX(1);transform-origin:left}
.header-actions{justify-self:end;display:flex;gap:8px}

/* Soft shadow behind navbar for readability */
.site-header {
  position: fixed;
  z-index: 50;
  isolation: isolate;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: 0;
  left: 0;

  width: 100%;
  height: 115px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.32),
    rgba(0, 0, 0, 0.12) 50%,
    transparent
  );

  pointer-events: none;
}
.icon-btn{
  width:28px;height:28px;border:0;background:transparent;padding:3px;cursor:pointer;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s
}
.icon-btn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{transform:translateY(-2px) scale(1.06);opacity:.7}

.hero-copy{
  position:sticky;
  top:0;
  left:0;
  z-index:5;

  width:100%;
  max-width:none;
  height:100svh;

  margin:-100svh 0 0;
  padding:0 5vw;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  transform:none;
  text-align:center;

  color:#fff;
  pointer-events:none;

  /* IMPORTANT */
  opacity:0;

  transition:opacity .8s cubic-bezier(.16,1,.3,1);
}
.hero-copy > *{pointer-events:auto}
.eyebrow{font-size:9px;letter-spacing:.22em;margin:0 0 18px;color:rgba(255,255,255,.72)}
h1,h2{font-weight:400;margin:0;letter-spacing:-.055em;line-height:.96}
h1{font-size:clamp(52px,6.25vw,100px);text-shadow:0 8px 30px rgba(0,0,0,.16)}
h1 em,h2 em{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:-.06em}
.pill-btn{
  position:relative;display:inline-flex;justify-content:center;align-items:center;
  min-width:208px;height:48px;border:1px solid rgba(255,255,255,.72);border-radius:999px;
  margin-top:31px;overflow:hidden;background:rgba(255,255,255,.025);
  color:#fff;cursor:pointer;backdrop-filter:blur(8px);
  transition:color .5s ease,transform .5s cubic-bezier(.16,1,.3,1),border-color .4s
}
.pill-btn:before{
  content:"";position:absolute;inset:0;background:#fff;
  transform:translateY(105%);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  border-radius:50%;
}
.pill-btn span{position:relative;z-index:1;font-size:12px}
.pill-btn:hover{color:#111;transform:translateY(-3px);border-color:#fff}
.pill-btn:hover:before{transform:translateY(0)}

.scroll-cue{
  position:fixed;z-index:20;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.78);
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.scroll-cue span{font-size:9px;letter-spacing:.24em;white-space:nowrap}
.scroll-line{width:1px;height:38px;background:rgba(255,255,255,.26);overflow:hidden;animation:cueLineNudge 2.2s ease-in-out infinite}
@keyframes cueLineNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.scroll-line i{display:block;width:100%;height:50%;background:#fff;animation:scrollPulse 1.7s ease-in-out infinite}
@keyframes scrollPulse{0%{transform:translateY(-100%)}50%{transform:translateY(100%)}100%{transform:translateY(200%)}}

.hero-progress{
  position:fixed;z-index:15;left:50%;bottom:20px;transform:translateX(-50%);
  width:110px;height:1px;background:rgba(255,255,255,.2);
  opacity:0;pointer-events:none;transition:opacity .4s
}
.hero-progress i{display:block;height:100%;width:0;background:#fff}

.next-section{
  min-height:100svh;
  background:var(--paper);
  display:grid;
  place-items:center;
  text-align:center;
  padding:100px 7vw;
}
.next-section-inner h2{font-size:clamp(60px,9vw,130px)}
.next-section .eyebrow{color:#77736e}
.placeholder-section{min-height:80vh;padding:8vw;background:#eae7e1;display:flex;flex-direction:column;justify-content:space-between}
.placeholder-section span{font-size:10px;letter-spacing:.18em;color:#77736e}
.placeholder-section h2{font-size:clamp(70px,13vw,190px)}
.placeholder-section.dark{background:var(--espresso);color:#f4f1eb}
footer{background:#2f1d1d;color:#FAF5F5;padding:100px 4vw 30px}
.footer-brand{font-size:clamp(60px,12vw,180px);letter-spacing:-.075em;line-height:.8}
.footer-bottom{margin-top:100px;border-top:1px solid #FAF5F5;padding-top:13px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.16em;color:#FAF5F5}
.page-loader{
  position:fixed;inset:0;z-index:100;background:#090807;color:#fff;
  display:grid;place-items:center;transition:opacity .8s ease,visibility .8s ease
}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{font-size:12px;letter-spacing:.06em}
.loader-mark span{font-family:var(--serif);font-style:italic}
.loader-line{position:absolute;bottom:40px;width:120px;height:1px;background:rgba(255,255,255,.25);overflow:hidden}
.loader-line i{
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s linear;
}
.page-loader.is-indeterminate .loader-line i{
  width:42%;
  transform:translateX(-115%);
  animation:loaderIndeterminate 1.05s ease-in-out infinite;
}
@keyframes loaderIndeterminate{to{transform:translateX(340%)}}

@media(max-width:800px){
  .hero{height:190vh}
  .site-header{height:68px;padding:0 18px;grid-template-columns:1fr auto}
  .main-nav{display:none}
  .brand img{width:120px}
  .hero-copy{width:92vw}
  h1{font-size:52px}
  .hero-progress{bottom:14px;width:85px}
  .next-section{min-height:90svh}
  .footer-bottom{flex-direction:column;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-film-grain,.scroll-line i,.scroll-cue{animation:none}
  *,*:before,*:after{transition-duration:.01ms!important}
}

/* =========================================
   ENGAGEMENT RINGS
   ========================================= */

.engagement-rings {
  width: 100%;
  padding: 96px 0 110px;
  background: #FAF5F5;
  color: #2f1d1d;
  overflow: hidden;
}

.engagement-header {
  width: calc(100% - 164px);
  margin: 0 auto 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.engagement-header h2 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 3.1vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.engagement-controls {
  display: flex;
  align-items: center;
  gap: 42px;
}

.engagement-controls > a {
  font-family: "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #302526;
}

.engagement-arrows {
  display: flex;
  align-items: center;
  gap: 5px;
}

.engagement-arrows button {
  width: 25px;
  height: 25px;

  border: 0;
  border-radius: 50%;

  background: #ddd8d8;
  color: #302526;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.engagement-arrows button:hover {
  background: #cfc9c9;
  transform: scale(1.06);
}


/* -----------------------------------------
   CAROUSEL
   ----------------------------------------- */

.engagement-track {
  display: flex;
  gap: 23px;

  width: max-content;

  padding-left: 81px;
  padding-right: 81px;

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}

.engagement-card {
  display: block;

  width: 317px;

  flex: 0 0 317px;

  color: inherit;
  text-decoration: none;

  overflow: hidden;
}


/* -----------------------------------------
   IMAGE
   ----------------------------------------- */

.engagement-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #e6e2e2;
}

.engagement-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}

.engagement-card:hover .engagement-image img {
  transform: scale(1.055);
}


/* -----------------------------------------
   PRODUCT NAME
   ----------------------------------------- */

.engagement-card h3 {
  margin: 24px 0 0;

  font-family: "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;

  text-align: center;
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 800px) {

  .engagement-rings {
    padding: 70px 0 80px;
  }

  .engagement-header {
    width: calc(100% - 36px);
    margin-bottom: 32px;
  }

  .engagement-header h2 {
    font-size: 36px;
  }

  .engagement-controls {
    gap: 15px;
  }

  .engagement-controls > a {
    display: none;
  }

  .engagement-track {
    gap: 14px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .engagement-card {
    width: 78vw;
    flex-basis: 78vw;
  }

  .engagement-card h3 {
    margin-top: 18px;
    font-size: 17px;
  }

}

.engagement-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  /* IMPORTANT:
     Don't trap vertical page scrolling */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.engagement-viewport::-webkit-scrollbar {
  display: none;
}

.engagement-track {
  display: flex;
  gap: 23px;
  width: max-content;

  padding-left: 81px;
  padding-right: 81px;

  /* Make sure the old transform carousel is disabled */
  transform: none !important;
}



/* =========================================
   3D RINGS
   ========================================= */

.three-d-rings {
  width: 100%;
  padding: 96px 0 110px;
  background: #2f1d1d;
  color: #FAF5F5;
  overflow: hidden;
}

.three-d-rings-header {
  width: calc(100% - 164px);
  margin: 0 auto 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.three-d-rings-header h2 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 3.1vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.three-d-rings-controls {
  display: flex;
  align-items: center;
  gap: 42px;
}

.three-d-rings-controls > a {
  font-family: "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FAF5F5;
}

.three-d-rings-arrows {
  display: flex;
  align-items: center;
  gap: 5px;
}

.three-d-rings-arrows button {
  width: 25px;
  height: 25px;

  border: 0;
  border-radius: 50%;

  background: #ddd8d8;
  color: #302526;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.three-d-rings-arrows button:hover {
  background: #cfc9c9;
  transform: scale(1.06);
}


/* -----------------------------------------
   CAROUSEL
   ----------------------------------------- */

.three-d-rings-track {
  display: flex;
  gap: 23px;

  width: max-content;

  padding-left: 81px;
  padding-right: 81px;

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}

.three-d-rings-card {
  display: block;

  width: 317px;

  flex: 0 0 317px;

  color: inherit;
  text-decoration: none;

  overflow: hidden;
}


/* -----------------------------------------
   IMAGE
   ----------------------------------------- */

.three-d-rings-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #2f1d1d;
}

.three-d-rings-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}

.three-d-rings-card:hover .three-d-rings-image img {
  transform: scale(1.055);
}


/* -----------------------------------------
   PRODUCT NAME
   ----------------------------------------- */

.three-d-rings-card h3 {
  margin: 24px 0 0;

  font-family: "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;

  text-align: center;
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 800px) {

  .three-d-rings {
    padding: 70px 0 80px;
  }

  .three-d-rings-header {
    width: calc(100% - 36px);
    margin-bottom: 32px;
  }

  .three-d-rings-header h2 {
    font-size: 36px;
  }

  .three-d-rings-controls {
    gap: 15px;
  }

  .three-d-rings-controls > a {
    display: none;
  }

  .three-d-rings-track {
    gap: 14px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .three-d-rings-card {
    width: 78vw;
    flex-basis: 78vw;
  }

  .three-d-rings-card h3 {
    margin-top: 18px;
    font-size: 17px;
  }

}

.three-d-rings-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  /* IMPORTANT:
     Don't trap vertical page scrolling */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.three-d-rings-viewport::-webkit-scrollbar {
  display: none;
}

.three-d-rings-track {
  display: flex;
  gap: 23px;
  width: max-content;

  padding-left: 81px;
  padding-right: 81px;

  /* Make sure the old transform carousel is disabled */
  transform: none !important;
}



.earrings {
  width: 100%;
  padding: 96px 0 110px;
  background: #FAF5F5;
  color: #2f1d1d;
  overflow: hidden;
}

.earrings-header {
  width: calc(100% - 164px);
  margin: 0 auto 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.earrings-header h2 {
  margin: 0;

  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 3.1vw, 52px);
  font-weight: 400;

  line-height: 1;
  letter-spacing: -.045em;
}

.earrings-controls {
  display: flex;
  align-items: center;
  gap: 42px;
}

.earrings-controls > a {
  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.02em;

  color: #2f1d1d;
  text-decoration: none;
}

.earrings-arrows {
  display: flex;
  align-items: center;
  gap: 5px;
}

.earrings-arrows button {
  width: 25px;
  height: 25px;

  border: 0;
  border-radius: 50%;

  background: #ddd8d8;
  color: #2f1d1d;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.earrings-arrows button:hover {
  background: #cfc9c9;
  transform: scale(1.06);
}


/* HORIZONTAL SCROLL */

.earrings-viewport {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.earrings-viewport::-webkit-scrollbar {
  display: none;
}


.earrings-track {
  display: flex;

  gap: 23px;

  width: max-content;

  padding-left: 81px;
  padding-right: 81px;
}


.earrings-card {
  display: block;

  width: 317px;
  flex: 0 0 317px;

  color: inherit;
  text-decoration: none;

  overflow: hidden;
}


.earrings-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #FAF5F5;
}


.earrings-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}


.earrings-card:hover .earrings-image img {
  transform: scale(1.055);
}


.earrings-card h3 {
  margin: 24px 0 0;

  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 600;

  line-height: 1.05;
  letter-spacing: -.035em;

  text-align: center;
}


/* MOBILE */

@media (max-width: 800px) {

  .earrings {
    padding: 70px 0 80px;
  }

  .earrings-header {
    width: calc(100% - 36px);
    margin-bottom: 32px;
  }

  .earrings-header h2 {
    font-size: 36px;
  }

  .earrings-controls {
    gap: 15px;
  }

  .earrings-controls > a {
    display: none;
  }

  .earrings-track {
    gap: 14px;

    padding-left: 18px;
    padding-right: 18px;
  }

  .earrings-card {
    width: 78vw;
    flex-basis: 78vw;
  }

  .earrings-card h3 {
    margin-top: 18px;
    font-size: 17px;
  }

}

.pendants {
  width: 100%;
  padding: 96px 0 110px;
  background: #FAF5F5;
  color: #2f1d1d;
  overflow: hidden;
}

.pendants-header {
  width: calc(100% - 164px);
  margin: 0 auto 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pendants-header h2 {
  margin: 0;

  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 3.1vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.pendants-controls {
  display: flex;
  align-items: center;
  gap: 42px;
}

.pendants-controls > a {
  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.02em;

  color: #2f1d1d;
  text-decoration: none;
}

.pendants-arrows {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pendants-arrows button {
  width: 25px;
  height: 25px;

  border: 0;
  border-radius: 50%;

  background: #ddd8d8;
  color: #2f1d1d;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.pendants-arrows button:hover {
  background: #cfc9c9;
  transform: scale(1.06);
}


/* HORIZONTAL SCROLL */

.pendants-viewport {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.pendants-viewport::-webkit-scrollbar {
  display: none;
}


.pendants-track {
  display: flex;
  gap: 23px;

  width: max-content;

  padding-left: 81px;
  padding-right: 81px;
}


/* CARDS */

.pendants-card {
  display: block;

  width: 317px;
  flex: 0 0 317px;

  color: inherit;
  text-decoration: none;

  overflow: hidden;
}


/* IMAGE */

.pendants-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #FAF5F5;
}

.pendants-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}


/* SUBTLE HOVER ZOOM */

.pendants-card:hover .pendants-image img {
  transform: scale(1.055);
}


/* PRODUCT NAME */

.pendants-card h3 {
  margin: 24px 0 0;

  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 600;

  line-height: 1.05;
  letter-spacing: -.035em;

  text-align: center;
}


/* MOBILE */

@media (max-width: 800px) {

  .pendants {
    padding: 70px 0 80px;
  }

  .pendants-header {
    width: calc(100% - 36px);
    margin-bottom: 32px;
  }

  .pendants-header h2 {
    font-size: 36px;
  }

  .pendants-controls {
    gap: 15px;
  }

  .pendants-controls > a {
    display: none;
  }

  .pendants-track {
    gap: 14px;

    padding-left: 18px;
    padding-right: 18px;
  }

  .pendants-card {
    width: 78vw;
    flex-basis: 78vw;
  }

  .pendants-card h3 {
    margin-top: 18px;
    font-size: 17px;
  }

}

.bracelets {
  width: 100%;
  padding: 96px 0 110px;
  background: #2f1d1d;
  color: #FAF5F5;
  overflow: hidden;
}

.bracelets-header {
  width: calc(100% - 164px);
  margin: 0 auto 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bracelets-header h2 {
  margin: 0;

  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 3.1vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.bracelets-controls {
  display: flex;
  align-items: center;
  gap: 42px;
}

.bracelets-controls > a {
  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.02em;

  color: #FAF5F5;
  text-decoration: none;
}

.bracelets-arrows {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bracelets-arrows button {
  width: 25px;
  height: 25px;

  border: 0;
  border-radius: 50%;

  background: #ddd8d8;
  color: #2f1d1d;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.bracelets-arrows button:hover {
  background: #cfc9c9;
  transform: scale(1.06);
}


/* HORIZONTAL SCROLL */

.bracelets-viewport {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.bracelets-viewport::-webkit-scrollbar {
  display: none;
}


.bracelets-track {
  display: flex;

  gap: 23px;

  width: max-content;

  padding-left: 81px;
  padding-right: 81px;
}


/* CARDS */

.bracelets-card {
  display: block;

  width: 317px;
  flex: 0 0 317px;

  color: inherit;
  text-decoration: none;

  overflow: hidden;
}


/* IMAGE */

.bracelets-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #2f1d1d;
}

.bracelets-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}


/* SUBTLE HOVER ZOOM */

.bracelets-card:hover .bracelets-image img {
  transform: scale(1.055);
}


/* PRODUCT NAME */

.bracelets-card h3 {
  margin: 24px 0 0;

  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 600;

  line-height: 1.05;
  letter-spacing: -.035em;

  text-align: center;
}


/* MOBILE */

@media (max-width: 800px) {

  .bracelets {
    padding: 70px 0 80px;
  }

  .bracelets-header {
    width: calc(100% - 36px);
    margin-bottom: 32px;
  }

  .bracelets-header h2 {
    font-size: 36px;
  }

  .bracelets-controls {
    gap: 15px;
  }

  .bracelets-controls > a {
    display: none;
  }

  .bracelets-track {
    gap: 14px;

    padding-left: 18px;
    padding-right: 18px;
  }

  .bracelets-card {
    width: 78vw;
    flex-basis: 78vw;
  }

  .bracelets-card h3 {
    margin-top: 18px;
    font-size: 17px;
  }

}

.neckpieces {
  width: 100%;
  padding: 96px 0 110px;
  background: #2f1d1d;
  color: #FAF5F5;
  overflow: hidden;
}

.neckpieces-header {
  width: calc(100% - 164px);
  margin: 0 auto 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.neckpieces-header h2 {
  margin: 0;

  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 3.1vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.neckpieces-controls {
  display: flex;
  align-items: center;
  gap: 42px;
}

.neckpieces-controls > a {
  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.02em;

  color: #FAF5F5;
  text-decoration: none;
}

.neckpieces-arrows {
  display: flex;
  align-items: center;
  gap: 5px;
}

.neckpieces-arrows button {
  width: 25px;
  height: 25px;

  border: 0;
  border-radius: 50%;

  background: #ddd8d8;
  color: #302526;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.neckpieces-arrows button:hover {
  background: #cfc9c9;
  transform: scale(1.06);
}


/* HORIZONTAL SCROLL */

.neckpieces-viewport {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.neckpieces-viewport::-webkit-scrollbar {
  display: none;
}


.neckpieces-track {
  display: flex;

  gap: 23px;

  width: max-content;

  padding-left: 81px;
  padding-right: 81px;
}


/* CARDS */

.neckpieces-card {
  display: block;

  width: 317px;
  flex: 0 0 317px;

  color: inherit;
  text-decoration: none;

  overflow: hidden;
}


/* IMAGE */

.neckpieces-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #2f1d1d;
}

.neckpieces-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform .8s cubic-bezier(.16, 1, .3, 1);
}


/* SUBTLE HOVER ZOOM */

.neckpieces-card:hover .neckpieces-image img {
  transform: scale(1.055);
}


/* PRODUCT NAME */

.neckpieces-card h3 {
  margin: 24px 0 0;

  font-family:
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 600;

  line-height: 1.05;
  letter-spacing: -.035em;

  text-align: center;
}


/* MOBILE */

@media (max-width: 800px) {

  .neckpieces {
    padding: 70px 0 80px;
  }

  .neckpieces-header {
    width: calc(100% - 36px);
    margin-bottom: 32px;
  }

  .neckpieces-header h2 {
    font-size: 36px;
  }

  .neckpieces-controls {
    gap: 15px;
  }

  .neckpieces-controls > a {
    display: none;
  }

  .neckpieces-track {
    gap: 14px;

    padding-left: 18px;
    padding-right: 18px;
  }

  .neckpieces-card {
    width: 78vw;
    flex-basis: 78vw;
  }

  .neckpieces-card h3 {
    margin-top: 18px;
    font-size: 17px;
  }

}

.nose-rings {
  width: 100%;
  padding: 96px 0 110px;
  background: #FAF5F5;
  color: #2f1d1d;
  overflow: hidden;
}

.nose-rings-header {
  width: calc(100% - 164px);
  margin: 0 auto 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nose-rings-header h2 {
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(38px, 3.1vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.nose-rings-controls {
  display: flex;
  align-items: center;
  gap: 42px;
}

.nose-rings-controls > a {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #2f1d1d;
  text-decoration: none;
}

.nose-rings-arrows {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nose-rings-arrows button {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  background: #ddd8d8;
  color: #2f1d1d;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.nose-rings-arrows button:hover {
  background: #cfc9c9;
  transform: scale(1.06);
}

.nose-rings-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.nose-rings-viewport::-webkit-scrollbar {
  display: none;
}

.nose-rings-track {
  display: flex;
  gap: 23px;

  width: max-content;

  padding-left: 81px;
  padding-right: 81px;
}

.nose-rings-card {
  display: block;

  width: 317px;
  flex: 0 0 317px;

  color: inherit;
  text-decoration: none;

  overflow: hidden;
}

.nose-rings-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #FAF5F5;
}

.nose-rings-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.nose-rings-card:hover .nose-rings-image img {
  transform: scale(1.055);
}

.nose-rings-card h3 {
  margin: 24px 0 0;

  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;

  text-align: center;
}

@media (max-width: 800px) {
  .nose-rings {
    padding: 70px 0 80px;
  }

  .nose-rings-header {
    width: calc(100% - 36px);
    margin-bottom: 32px;
  }

  .nose-rings-header h2 {
    font-size: 36px;
  }

  .nose-rings-controls {
    gap: 15px;
  }

  .nose-rings-controls > a {
    display: none;
  }

  .nose-rings-track {
    gap: 14px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .nose-rings-card {
    width: 78vw;
    flex-basis: 78vw;
  }

  .nose-rings-card h3 {
    margin-top: 18px;
    font-size: 17px;
  }
}


/* ==================================================
   MOBILE NAVBAR + VIEW ALL VISIBILITY FIX
   ================================================== */
@media (max-width: 800px) {

  /* Keep the header visible and make room for a second nav row. */
  .site-header {
    height: 106px;
    padding: 12px 18px 10px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 44px 36px;
    align-items: center;
  }

  /* Do not allow scroll-hide behavior to remove the mobile navbar. */
  .site-header.nav-hidden {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .brand img {
    width: 112px;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  /* Restore the navigation links on mobile as a full-width second row. */
  .main-nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
  }

  .main-nav a {
    font-size: 10px;
    letter-spacing: 0.01em;
    padding: 7px 0;
    white-space: nowrap;
  }

  /* Extend the soft navbar shadow behind the taller mobile header. */
  .site-header::before {
    height: 138px;
  }

  /* Keep VIEW ALL visible on every homepage collection. */
  .engagement-controls > a,
  .three-d-rings-controls > a,
  .earrings-controls > a,
  .neckpieces-controls > a,
  .pendants-controls > a,
  .bracelets-controls > a,
  .nose-rings-controls > a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  /* Give the title and controls enough room to coexist cleanly. */
  .engagement-header,
  .three-d-rings-header,
  .earrings-header,
  .neckpieces-header,
  .pendants-header,
  .bracelets-header,
  .nose-rings-header {
    gap: 14px;
  }

  .engagement-controls,
  .three-d-rings-controls,
  .earrings-controls,
  .neckpieces-controls,
  .pendants-controls,
  .bracelets-controls,
  .nose-rings-controls {
    gap: 9px;
    flex-shrink: 0;
  }

  .engagement-arrows,
  .three-d-rings-arrows,
  .earrings-arrows,
  .neckpieces-arrows,
  .pendants-arrows,
  .bracelets-arrows,
  .nose-rings-arrows {
    gap: 4px;
  }

  /* Slightly reduce long section titles on narrow phones. */
  .engagement-header h2,
  .three-d-rings-header h2,
  .earrings-header h2,
  .neckpieces-header h2,
  .pendants-header h2,
  .bracelets-header h2,
  .nose-rings-header h2 {
    font-size: clamp(28px, 8.6vw, 36px);
  }
}


/* Search-friendly editorial section: visible, useful copy that fits the existing luxury palette. */
.seo-editorial{background:#100e0c;color:#f2ece4;padding:clamp(54px,8vw,112px) 7vw;}
.seo-editorial-inner{max-width:920px;margin:0 auto;}
.seo-editorial-kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c9b8a4;margin:0 0 20px;}
.seo-editorial h2{font-size:clamp(30px,4.4vw,58px);line-height:1.1;font-weight:300;max-width:760px;margin:0 0 26px;}
.seo-editorial p{font-size:15px;line-height:1.85;color:rgba(242,236,228,.78);max-width:800px;}
.seo-editorial a{text-decoration:underline;text-decoration-color:rgba(201,184,164,.65);text-underline-offset:4px;}
.seo-editorial-faq{margin-top:42px;border-top:1px solid rgba(242,236,228,.18);padding-top:26px;}
.seo-editorial h3{font-size:22px;font-weight:400;margin:0 0 14px;}
.seo-editorial details{border-bottom:1px solid rgba(242,236,228,.15);padding:16px 0;}
.seo-editorial summary{cursor:pointer;font-size:14px;letter-spacing:.02em;}
.seo-editorial details p{margin:12px 0 0;font-size:14px;}