/* ==========================================================================
   WHITE MOON — homepage sections + shared card / pickers
   ========================================================================== */

/* ---- 03 HERO ------------------------------------------------------------ */
.m-hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--midnight); color: var(--moon); overflow: hidden;
  display: flex; align-items: center;
  padding-top: calc(var(--head-h) + 40px); padding-bottom: 120px;
}
.m-hero__media { position: absolute; inset: -6% 0 -6% 0; }
.m-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; display: block; animation: m-breathe 18s ease-in-out infinite alternate; }
@keyframes m-breathe { from { transform: scale(1.02); } to { transform: scale(1.08); } }
.m-hero__beam {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(38% 46% at 74% 56%, rgb(217 203 163 / .18), transparent 70%),
    linear-gradient(118deg, transparent 38%, rgb(247 246 242 / .06) 50%, transparent 62%);
  animation: m-beam 9s ease-in-out infinite alternate;
}
@keyframes m-beam { from { opacity: .55; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }
.m-hero__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(11 15 26 / .92) 0%, rgb(11 15 26 / .55) 42%, rgb(11 15 26 / 0) 70%), linear-gradient(0deg, rgb(11 15 26 / .7), transparent 30%); }
.m-hero__inner { position: relative; z-index: 2; }
.m-hero__copy { max-width: 640px; }
.m-hero__kicker { color: var(--glow); display: inline-flex; align-items: center; margin-bottom: 28px; }
.m-hero__kicker .m-crescent { width: 14px; height: 14px; }
.m-hero__title { margin: 0 0 28px; font-size: clamp(3.5rem, 7.4vw, 7rem); }
.m-hero__title em { color: var(--glow); font-weight: 300; }
.m-hero__sub { margin: 0 0 44px; max-width: 30em; font-size: 1.0625rem; line-height: 1.7; color: #D3D6DC; }
.m-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.m-hero__seal { position: absolute; z-index: 2; left: var(--gutter); bottom: 36px; width: 108px; height: 108px; color: var(--silver); }
.m-hero__seal-ring { width: 100%; height: 100%; animation: m-spin 40s linear infinite; }
.m-hero__seal-ring text { font: 600 9.5px var(--f-ui); letter-spacing: .26em; fill: currentColor; }
.m-hero__seal-core { position: absolute; inset: 0; display: grid; place-items: center; }
.m-hero__seal-core .m-crescent { width: 26px; height: 26px; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-hero__scroll { position: absolute; z-index: 2; right: var(--gutter); bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--silver); text-decoration: none; font: 600 10.5px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; min-width: 44px; }
.m-hero__scroll span { writing-mode: vertical-rl; }
.m-hero__scroll i { display: block; width: 1px; height: 64px; background: rgb(154 160 172 / .3); position: relative; overflow: hidden; }
.m-hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--glow); animation: m-drip 2.4s var(--ease) infinite; }
@keyframes m-drip { to { top: 100%; } }
@media (max-width: 749px) {
  .m-hero { align-items: flex-end; padding-bottom: 140px; }
  .m-hero__img { object-position: 78% 40%; }
  .m-hero__veil { background: linear-gradient(0deg, rgb(11 15 26 / .96) 0%, rgb(11 15 26 / .7) 48%, rgb(11 15 26 / .15) 80%); }
  .m-hero__ctas .m-btn { width: 100%; }
  .m-hero__seal { width: 84px; height: 84px; bottom: 28px; left: auto; right: 20px; }
  .m-hero__scroll { display: none; }
}

/* ---- 04 PROOF ----------------------------------------------------------- */
.m-proof { background: var(--ink); color: var(--moon); border-top: 1px solid var(--hair-dark); }
.m-proof__list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.m-proof__item { display: flex; align-items: center; gap: 18px; padding: 36px 24px; }
.m-proof__item + .m-proof__item { border-left: 1px solid var(--hair-dark); }
.m-proof__item:first-child { padding-left: 0; }
.m-proof__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--glow); border: 1px solid rgb(217 203 163 / .35); border-radius: 50%; }
.m-proof__icon svg { width: 20px; height: 20px; }
.m-proof__item strong { display: block; font: 300 21px/1.2 var(--f-display); letter-spacing: -.01em; }
.m-proof__item small { display: block; margin-top: 4px; font-size: 13px; color: var(--silver); }
@media (max-width: 989px) {
  .m-proof__list { grid-template-columns: 1fr 1fr; }
  .m-proof__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .m-proof__item:nth-child(n+3) { border-top: 1px solid var(--hair-dark); }
}
@media (max-width: 549px) {
  .m-proof__list { grid-template-columns: 1fr; }
  .m-proof__item { padding: 20px 0; border-left: 0 !important; }
  .m-proof__item + .m-proof__item { border-top: 1px solid var(--hair-dark); }
}

/* ---- dawn seam between the dark opening and the moonlit page -------------- */
.m-dawn { height: 160px; background: linear-gradient(180deg, var(--ink) 0%, #3A3F4D 30%, #B9B8B4 72%, var(--pearl) 100%); }

/* ---- 05 SHAPES ---------------------------------------------------------- */
.m-shapes { padding-top: 0; }
.m-shapes__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; padding-top: 32px; margin-bottom: 40px; }
.m-shapes__head .m-lead { color: var(--graphite); }
.m-shapes__stage { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; min-height: 460px; border-top: 1px solid var(--hair-light); }
.m-shapes__light { position: absolute; left: 0; top: 0; width: 58%; height: 100%; background: radial-gradient(42% 52% at 50% 52%, #FFFFFF 0%, rgb(255 255 255 / .55) 45%, transparent 75%); transition: opacity .6s; pointer-events: none; }
.m-shapes__fig { grid-area: 1 / 1; margin: 0; height: 460px; display: grid; place-items: center; opacity: 0; transform: scale(.94) rotate(-4deg); transition: opacity .7s var(--ease), transform 1s var(--ease); }
.m-shapes__fig.is-on { opacity: 1; transform: none; }
.m-shapes__fig img { width: auto; height: 360px; max-width: 90%; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.06); }
.m-shapes__caption { grid-area: 1 / 2; position: relative; display: grid; }
.m-shapes__cap { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.m-shapes__cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.m-shapes__cap .m-h4 { margin: 0 0 12px; color: var(--midnight); }
.m-shapes__cap p:not(.m-h4) { margin: 0 0 20px; max-width: 26em; color: var(--graphite); }
.m-shapes__row { display: grid; grid-template-columns: repeat(10, 1fr); border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light); }
.m-shapes__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 4px 24px; text-decoration: none; color: var(--graphite); }
.m-shapes__btn + .m-shapes__btn { border-left: 1px solid var(--hair-light); }
.m-shapes__icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; transition: color .5s var(--ease), background .5s var(--ease); }
.m-shapes__icon::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgb(217 203 163 / .55), transparent 68%); opacity: 0; transform: scale(.6); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.m-shapes__icon svg { position: relative; transition: transform .6s var(--ease); }
.m-shapes__name { font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.m-shapes__btn::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; background: var(--midnight); transform: scaleX(0); transition: transform .6s var(--ease); }
.m-shapes__btn.is-on { color: var(--midnight); }
.m-shapes__btn.is-on .m-shapes__icon { color: #6E5C33; }
.m-shapes__btn.is-on .m-shapes__icon::before { opacity: 1; transform: none; }
.m-shapes__btn.is-on .m-shapes__icon svg { transform: scale(1.08); }
.m-shapes__btn.is-on::after { transform: none; }
@media (max-width: 989px) {
  .m-shapes__head { grid-template-columns: 1fr; gap: 16px; }
  .m-shapes__stage { grid-template-columns: 1fr; min-height: 0; }
  .m-shapes__light { width: 100%; height: 320px; }
  .m-shapes__fig { height: 320px; }
  .m-shapes__fig img { height: 260px; }
  .m-shapes__caption { grid-area: 2 / 1; padding: 8px 0 32px; }
  .m-shapes__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .m-shapes__row::-webkit-scrollbar { display: none; }
  .m-shapes__btn { flex: 0 0 96px; scroll-snap-align: start; }
}

/* ---- 06 BENTO ------------------------------------------------------------ */
.m-bento__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.m-bento__tile { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--midnight); }
.m-bento__tile--1 { grid-column: 1 / span 6; grid-row: span 4; }
.m-bento__tile--2 { grid-column: 7 / span 3; grid-row: span 4; }
.m-bento__tile--3 { grid-column: 10 / span 3; grid-row: span 2; }
.m-bento__tile--4 { grid-column: 10 / span 3; grid-row: span 2; }
.m-bento__tile--5 { grid-column: 7 / span 6; grid-row: span 2; }
.m-bento__img { position: relative; flex: 1; min-height: 180px; overflow: hidden; background: var(--pearl); }
.m-bento__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.m-bento__tile:hover .m-bento__img img { transform: scale(1.04); }
.m-bento__copy { display: flex; flex-direction: column; gap: 2px; padding: 16px 48px 0 0; }
.m-bento__title { font: 300 var(--t-28)/1.15 var(--f-display); letter-spacing: -.01em; }
.m-bento__tile--1 .m-bento__title { font-size: var(--t-40); }
.m-bento__desc { font-size: 14px; color: var(--muted-light); }
.m-bento__arrow { position: absolute; right: 0; bottom: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hair-light); border-radius: 50%; transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease); }
.m-bento__arrow svg { width: 16px; height: 16px; }
.m-bento__tile:hover .m-bento__arrow { background: var(--midnight); color: var(--moon); border-color: var(--midnight); transform: translateX(4px); }
@media (max-width: 989px) {
  .m-bento__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .m-bento__tile { grid-column: auto !important; grid-row: auto !important; }
  .m-bento__tile--1 { grid-column: 1 / -1 !important; }
  .m-bento__img { min-height: 0; aspect-ratio: 4 / 5; flex: none; }
  .m-bento__tile--1 .m-bento__img { aspect-ratio: 4 / 3; }
  .m-bento__tile--5 { grid-column: 1 / -1 !important; }
  .m-bento__tile--5 .m-bento__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 549px) { .m-bento__grid { gap: 28px 12px; } .m-bento__title { font-size: 22px; } .m-bento__desc { font-size: 13px; } .m-bento__arrow { display: none; } .m-bento__copy { padding-right: 0; } }

/* ---- 07 GROWN BY LIGHT ---------------------------------------------------- */
.m-light { background: var(--moon); }
.m-light__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.m-light__sticky { position: sticky; top: calc(var(--head-h) + 32px); }
.m-light__media { margin: 0; background: var(--midnight); aspect-ratio: 4 / 5; overflow: hidden; }
.m-light__media img { width: 100%; height: 112%; object-fit: cover; object-position: 45% 50%; display: block; }
.m-light__copy { padding-top: 24px; }
.m-light__copy .m-h2 { color: var(--midnight); }
.m-light__lead { margin: 24px 0 48px; font-size: 17px; }
.m-light__list { list-style: none; margin: 0 0 56px; padding: 0; border-top: 1px solid var(--hair-light); }
.m-light__item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--hair-light); }
.m-light__num { font: 300 italic 22px/1.2 var(--f-display); color: #6E5C33; }
.m-light__item h3 { margin: 0 0 6px; color: var(--midnight); }
.m-light__item p { margin: 0; color: var(--graphite); }
.m-compare { background: var(--midnight); color: var(--moon); padding: 32px; margin-bottom: 32px; }
.m-compare__head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.m-compare__head .m-label { color: var(--glow); }
.m-compare__title { margin: 0; font: 300 24px/1.2 var(--f-display); }
.m-compare__legend { display: flex; gap: 24px; margin: 20px 0 8px; font-size: 12.5px; color: var(--silver); }
.m-compare__legend i { display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; }
.m-compare__legend i.is-lab, .m-bar.is-lab::before { background: var(--glow); }
.m-compare__legend i.is-mined, .m-bar.is-mined::before { background: #5C6372; }
.m-compare__rows { margin: 0; }
.m-compare__row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair-dark); }
.m-compare__row dt { font-size: 13px; color: #C9CDD5; }
.m-compare__row dd { margin: 0; display: grid; gap: 8px; }
.m-bar { position: relative; display: flex; align-items: center; height: 18px; font-size: 11.5px; }
.m-bar::before { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: calc(var(--v) * 74%); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
.m-bar b { position: relative; margin-left: calc(var(--v) * 74% + 10px); font-weight: 600; color: var(--moon); opacity: 0; transition: opacity .6s var(--ease) 1s; }
.m-compare.is-filled .m-bar::before { transform: none; }
.m-compare.is-filled .m-bar b { opacity: 1; }
.m-compare.is-filled .m-bar.is-mined::before { transition-delay: .2s; }
.m-compare__note { margin: 16px 0 0; font-size: 12px; color: var(--silver); }
.m-light__cta { color: var(--midnight); }
@media (max-width: 989px) {
  .m-light__grid { grid-template-columns: 1fr; gap: 40px; }
  .m-light__sticky { position: relative; top: 0; }
  .m-light__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 549px) { .m-compare { padding: 24px 20px; } .m-compare__row { grid-template-columns: 1fr; gap: 8px; } .m-light__item { grid-template-columns: 44px 1fr; } }

/* ---- shared: product card (curated + catalogue) --------------------------- */
.m-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.m-card__media { position: relative; display: block; aspect-ratio: 1; background: var(--pearl); overflow: hidden; }
.m-card__img, .m-card__hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease), transform 1.4s var(--ease), filter .6s var(--ease); }
.m-card__media.is-packshot .m-card__img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.m-card__hover { opacity: 0; }
.m-card:hover .m-card__hover, .m-card:focus-within .m-card__hover { opacity: 1; }
.m-card:hover .m-card__img { transform: scale(1.04); }
.m-card__badge { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 6px 10px; background: var(--moon); color: var(--midnight); font: 600 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.m-card__wish { position: absolute; right: 8px; top: 8px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--midnight); cursor: pointer; border-radius: 50%; transition: background .3s; }
.m-card__wish:hover { background: rgb(247 246 242 / .8); }
.m-card__wish svg { width: 19px; height: 19px; transition: fill .3s; }
.m-card__wish[aria-pressed="true"] svg { fill: var(--midnight); }
.m-card__body { padding-top: 16px; display: grid; gap: 2px; }
.m-card__metals { display: flex; gap: 2px; margin: 0 0 6px -8px; }
.m-card__name { margin: 0; font: 400 21px/1.25 var(--f-display); letter-spacing: -.005em; color: var(--midnight); }
.m-card__name a { text-decoration: none; }
.m-card__name a::after { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 1; }
.m-card__price { margin: 4px 0 0; font: 600 15px/1.4 var(--f-ui); color: var(--midnight); letter-spacing: .01em; }
.m-card__meta { margin: 0; font: 600 10.5px/1.6 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }

/* metal swatch dots (44px tap target, 16px visible dot) */
.m-dot { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.m-dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--metal); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.m-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; transition: opacity .3s; }
.m-dot.is-on::after { opacity: .9; }
.m-dot--white { --metal: linear-gradient(135deg, #F4F4F2, #C9CACC); }
.m-dot--platinum { --metal: linear-gradient(135deg, #E3E5E8, #9EA3AA); }
.m-dot--yellow { --metal: linear-gradient(135deg, #F1DCA0, #C9A24E); }
.m-dot--rose { --metal: linear-gradient(135deg, #F2CDBF, #C98C78); }
.m-card[data-metal="yellow"] .m-card__img { filter: sepia(.55) saturate(1.5) hue-rotate(-8deg) brightness(1.02); }
.m-card[data-metal="rose"] .m-card__img { filter: sepia(.45) saturate(1.35) hue-rotate(-28deg) brightness(1.02); }
.m-card[data-metal="platinum"] .m-card__img { filter: grayscale(.6) contrast(1.06) brightness(1.02); }
@media (hover: none) { .m-card__hover { display: none; } }

/* ---- 08 RAIL --------------------------------------------------------------- */
.m-rail { overflow: hidden; }
.m-rail__nav { display: flex; align-items: center; gap: 12px; }
.m-rail__nav .m-link { margin-right: 16px; color: var(--midnight); }
.m-rail__viewport { padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.m-rail__track { list-style: none; margin: 0; padding: 0 var(--gutter) 8px 0; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.m-rail__track::-webkit-scrollbar { display: none; }
.m-rail__slide { flex: 0 0 clamp(250px, 23vw, 340px); scroll-snap-align: start; }
.m-rail__progress { position: relative; height: 1px; margin-top: 40px; background: var(--hair-light); }
.m-rail__progress span { position: absolute; left: 0; top: -0.5px; height: 2px; width: 20%; background: var(--midnight); transition: transform .5s var(--ease), width .5s var(--ease); }
@media (max-width: 749px) { .m-rail__nav .m-arrow { display: none; } .m-rail__slide { flex-basis: 72vw; } .m-rail__track { gap: 16px; } }

/* ---- 09 BUILDER ------------------------------------------------------------- */
.m-builder { overflow: hidden; }
.m-builder__glow { position: absolute; right: -10%; top: 10%; width: 60%; height: 80%; background: radial-gradient(circle, rgb(217 203 163 / .12), transparent 62%); pointer-events: none; }
.m-builder__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.m-steps { list-style: none; display: flex; gap: 0; margin: 40px 0 36px; padding: 0; border-top: 1px solid var(--hair-dark); }
.m-steps li { flex: 1; padding: 16px 0 0; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); position: relative; }
.m-steps li span { display: block; margin-bottom: 8px; font: 300 italic 18px/1 var(--f-display); letter-spacing: 0; }
.m-steps li.is-on { color: var(--moon); }
.m-steps li.is-on::before { content: ""; position: absolute; left: 0; right: 24px; top: -1px; height: 2px; background: var(--glow); }
.m-pick { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.m-pick__legend { padding: 0; margin-bottom: 12px; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.m-pick__legend b { margin-left: 8px; color: var(--moon); font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: 13px; }
.m-pick__shapes { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.m-pick__shape { height: 52px; display: grid; place-items: center; background: none; border: 1px solid var(--hair-dark); color: #C9CDD5; cursor: pointer; transition: color .3s, border-color .3s, background .3s; }
.m-pick__shape:hover { color: var(--moon); border-color: var(--silver); }
.m-pick__shape.is-on { color: var(--glow); border-color: var(--glow); background: rgb(217 203 163 / .06); }
.m-pick__row { display: flex; gap: 48px; flex-wrap: wrap; }
.m-pick__metals { display: flex; gap: 4px; margin-left: -6px; }
.m-pick__metals .m-dot { width: 44px; height: 44px; color: var(--glow); }
.m-pick__metals .m-dot::before { inset: 11px; }
.m-pick__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.m-chip { min-width: 64px; min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--hair-dark); color: #C9CDD5; font: 500 13px/1 var(--f-ui); cursor: pointer; transition: border-color .3s, color .3s; }
.m-chip:hover { border-color: var(--silver); color: var(--moon); }
.m-chip.is-on { border-color: var(--glow); color: var(--glow); }
.m-builder__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--hair-dark); }
.m-builder__price { margin: 0; display: grid; gap: 6px; }
.m-builder__price b { font: 300 44px/1 var(--f-display); color: var(--glow); letter-spacing: -.01em; }
.m-builder__plate { position: relative; background: var(--moon); color: var(--graphite); aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; }
.m-builder__plate::before { content: ""; position: absolute; inset: 16px; border: 1px solid var(--hair-light); pointer-events: none; }
.m-builder__stone { width: 66%; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle, #FFFFFF 30%, transparent 70%); }
.m-builder__stone img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .35s var(--ease), transform .7s var(--ease); }
.m-builder__stone img.is-swap { opacity: 0; transform: scale(.92) rotate(-6deg); }
.m-builder__band { width: 74%; margin-top: -8%; --band-a: #9EA3AA; --band-b: #EEF0F2; transition: filter .4s; }
.m-builder__band path { transition: stroke .4s; }
.m-builder__plate-cap { position: absolute; bottom: 36px; left: 0; right: 0; margin: 0; text-align: center; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
@media (max-width: 989px) { .m-builder__grid { grid-template-columns: 1fr; gap: 48px; } .m-builder__plate { order: -1; aspect-ratio: 1; max-width: 520px; width: 100%; margin: 0 auto; } }
@media (max-width: 549px) { .m-pick__shapes { grid-template-columns: repeat(5, 1fr); } .m-pick__row { gap: 20px; } .m-builder__foot .m-btn { width: 100%; } }

/* ---- 10 GEMS ------------------------------------------------------------- */
.m-gems { background: var(--gem-bg, #E6E9F0); color: var(--graphite); transition: background 1s var(--ease); }
.m-gems__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 96px; align-items: center; }
.m-gems .m-h2 { color: var(--midnight); }
.m-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 40px 0 32px; border-bottom: 1px solid var(--hair-light); }
.m-tab { position: relative; min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer; font: 300 22px/1 var(--f-display); color: var(--muted-light); transition: color .3s; }
.m-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--midnight); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.m-tab:hover { color: var(--midnight); }
.m-tab.is-on { color: var(--midnight); }
.m-tab.is-on::after { transform: none; }
.m-gems__panel { min-height: 150px; }
.m-gems__panel.is-on { animation: m-fadeup .7s var(--ease); }
.m-gems__story { margin: 0 0 20px; max-width: 24em; color: var(--midnight); }
.m-gems__panel .m-link { color: var(--midnight); }
@keyframes m-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.m-gems__media { position: relative; display: grid; aspect-ratio: 1; }
.m-gems__fig { grid-area: 1 / 1; margin: 0; overflow: hidden; opacity: 0; transition: opacity .9s var(--ease); }
.m-gems__fig.is-on { opacity: 1; }
.m-gems__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.m-gems__fig.is-on img { transform: none; }
@media (max-width: 989px) { .m-gems__grid { grid-template-columns: 1fr; gap: 32px; } .m-gems__media { order: -1; aspect-ratio: 4 / 3; } }
@media (max-width: 549px) { .m-tabs { gap: 0 18px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .m-tab { font-size: 19px; white-space: nowrap; } }

/* ---- 11 BESPOKE ------------------------------------------------------------ */
.m-bespoke { position: relative; overflow: hidden; color: var(--moon); background: var(--midnight); min-height: 92vh; display: flex; align-items: center; padding: var(--sec-y) 0; }
.m-bespoke__media { position: absolute; inset: 0; }
.m-bespoke__media img { width: 100%; height: 115%; object-fit: cover; display: block; filter: saturate(.7); }
.m-bespoke__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 15 26 / .93) 0%, rgb(11 15 26 / .78) 45%, rgb(11 15 26 / .45) 100%); }
.m-bespoke__inner { position: relative; }
.m-bespoke .m-h2 { max-width: 13em; margin: 16px 0 28px; }
.m-bespoke .m-h2 em { color: var(--glow); }
.m-bespoke .m-lead { color: #D3D6DC; margin-bottom: 44px; }
.m-bespoke__ctas { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 549px) { .m-bespoke { min-height: 0; } .m-bespoke__ctas .m-btn { width: 100%; padding: 0 20px; } }

/* ---- 12 REVIEWS ------------------------------------------------------------ */
.m-reviews__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 96px; align-items: center; }
.m-reviews__num { margin: 12px 0 0; font: 300 clamp(96px, 11vw, 168px)/.9 var(--f-display); letter-spacing: -.04em; color: var(--midnight); }
.m-reviews__stars { margin: 16px 0 4px; letter-spacing: .3em; color: #6E5C33; font-size: 14px; }
.m-reviews__sub { margin: 0 0 32px; color: var(--muted-light); font-size: 14px; }
.m-reviews__nav { display: flex; align-items: center; gap: 16px; color: var(--midnight); }
.m-reviews__count { font: 400 14px/1 var(--f-ui); color: var(--muted-light); min-width: 56px; text-align: center; }
.m-reviews__count b { color: var(--midnight); font-weight: 600; }
.m-reviews__viewport { position: relative; border-left: 1px solid var(--hair-light); padding-left: 64px; }
.m-reviews__track { list-style: none; margin: 0; padding: 0; display: grid; }
.m-review { grid-area: 1 / 1; opacity: 0; transform: translateX(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.m-review.is-on { opacity: 1; transform: none; pointer-events: auto; }
.m-review .m-crescent { width: 28px; height: 28px; color: #6E5C33; }
.m-review__quote { margin: 24px 0 32px; font: 300 clamp(26px, 2.9vw, 42px)/1.25 var(--f-display); letter-spacing: -.015em; color: var(--midnight); }
.m-review__who { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.m-review__who b { font: 600 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--midnight); }
.m-review__who span { font-size: 14px; color: var(--muted-light); }
@media (max-width: 989px) { .m-reviews__grid { grid-template-columns: 1fr; gap: 40px; } .m-reviews__viewport { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair-light); padding-top: 40px; } .m-reviews__nav { order: 2; } }

/* ---- 13 JOURNAL ------------------------------------------------------------- */
.m-journal__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; }
.m-journal__feature { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--midnight); }
.m-journal__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 10px; }
.m-journal__img img, .m-journal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.m-journal__feature:hover img, .m-journal__item:hover img { transform: scale(1.04); }
.m-journal__title { display: block; margin: 0; color: var(--midnight); }
.m-journal__dek { font-size: 15px; color: var(--graphite); max-width: 34em; }
.m-journal__list { display: flex; flex-direction: column; border-top: 1px solid var(--hair-light); }
.m-journal__item { display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--hair-light); text-decoration: none; color: var(--midnight); }
.m-journal__thumb { display: block; aspect-ratio: 1; overflow: hidden; }
.m-journal__item .m-journal__title { margin: 8px 0 10px; font-size: 24px; line-height: 1.2; }
.m-journal__more { font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
@media (max-width: 989px) { .m-journal__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 549px) { .m-journal__item { grid-template-columns: 96px 1fr; gap: 16px; } .m-journal__item .m-journal__title { font-size: 20px; } }

/* ---- 14 UGC --------------------------------------------------------------- */
.m-ugc { padding-bottom: 0; }
.m-ugc .m-link { color: var(--midnight); }
.m-ugc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.m-ugc__tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.m-ugc__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.m-ugc__over { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(11 15 26 / .5); color: var(--moon); opacity: 0; transition: opacity .5s var(--ease); }
.m-ugc__over svg { width: 28px; height: 28px; }
.m-ugc__tile:hover img { transform: scale(1.06); }
.m-ugc__tile:hover .m-ugc__over, .m-ugc__tile:focus-visible .m-ugc__over { opacity: 1; }
@media (max-width: 749px) { .m-ugc__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- 15 NEWSLETTER ---------------------------------------------------------- */
.m-news__inner { max-width: 760px; text-align: center; }
.m-news .m-divider { max-width: 240px; margin: 0 auto 32px; color: #6E5C33; }
.m-news .m-h2 { margin: 0 0 20px; color: var(--midnight); }
.m-news .m-lead { margin: 0 auto 40px; }
.m-news__row { display: flex; gap: 16px; align-items: flex-end; max-width: 560px; margin: 0 auto; }
.m-news__input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--midnight); background: transparent; color: var(--midnight); font: 400 16px/1 var(--f-ui); border-radius: 0; }
.m-news__input::placeholder { color: var(--muted-light); }
.m-news__input:focus { outline: none; border-bottom-width: 2px; }
.m-news__note { margin: 16px 0 0; min-height: 1.5em; font-size: 12.5px; color: var(--muted-light); }
.m-news__note.is-ok { font: 300 24px/1.3 var(--f-display); color: var(--midnight); }
@media (max-width: 549px) { .m-news__row { flex-direction: column; align-items: stretch; } }

/* ---- round-2 fixes ----------------------------------------------------------- */
/* bento: four fixed rows for the first four tiles, bracelets as a wide editorial band */
.m-bento__grid { grid-auto-rows: unset; grid-template-rows: repeat(4, 172px) 340px; }
.m-bento__tile--1 { grid-column: 1 / span 6; grid-row: 1 / span 4; }
.m-bento__tile--2 { grid-column: 7 / span 3; grid-row: 1 / span 4; }
.m-bento__tile--3 { grid-column: 10 / span 3; grid-row: 1 / span 2; }
.m-bento__tile--4 { grid-column: 10 / span 3; grid-row: 3 / span 2; }
.m-bento__tile--5 { grid-column: 1 / -1; grid-row: 5; color: var(--moon); }
.m-bento__tile--5 .m-bento__img { position: absolute; inset: 0; }
.m-bento__tile--5 .m-bento__img img { object-position: 50% 60%; }
.m-bento__tile--5 .m-bento__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 15 26 / .72), rgb(11 15 26 / .1) 60%); }
.m-bento__tile--5 .m-bento__copy { position: relative; z-index: 1; margin-top: auto; padding: 40px; }
.m-bento__tile--5 .m-bento__title { font-size: var(--t-40); }
.m-bento__tile--5 .m-bento__desc { color: #D3D6DC; }
.m-bento__tile--5 .m-bento__arrow { z-index: 1; right: 40px; bottom: 40px; color: var(--moon); border-color: rgb(247 246 242 / .5); }
.m-bento__tile--5:hover .m-bento__arrow { background: var(--moon); color: var(--midnight); }
.m-bento__copy { padding-top: 14px; }
.m-bento__tile--3 .m-bento__title, .m-bento__tile--4 .m-bento__title { font-size: 24px; }
@media (max-width: 989px) {
  .m-bento__grid { grid-template-rows: none; }
  .m-bento__tile--5 { min-height: 280px; }
}
@media (max-width: 549px) { .m-bento__tile--5 .m-bento__copy { padding: 24px; } .m-bento__tile--5 .m-bento__title { font-size: 28px; } }

/* rail: lifestyle photos sit lower in frame */
.m-card__media:not(.is-packshot) .m-card__img { object-position: 50% 72%; }

/* builder: band drawn as a ring shank behind the stone */
.m-builder__plate { aspect-ratio: 1; }
.m-builder__stone { position: relative; z-index: 1; width: 58%; }
.m-builder__band { position: absolute; left: 50%; top: 50%; width: 70%; margin: 0; transform: translate(-50%, 4%); z-index: 0; }
.m-builder__plate-cap { bottom: 40px; }

/* gems: the stone sits low in each photograph */
.m-gems__fig img { object-position: 50% 82%; }

/* floats stay hidden over the hero (moon.js), so the seal and the pill never collide */
.m-builder__stage { position: relative; width: 78%; aspect-ratio: 1 / .9; }
.m-builder__stone { position: absolute; left: 50%; top: 0; width: 58%; transform: translateX(-50%); }
.m-builder__band { position: absolute; left: 0; right: 0; bottom: 6%; top: auto; width: 100%; height: auto; transform: none; }
/* builder stone: a soft circular crop instead of a blend, so no white box and the band stays behind it */
.m-builder__stone { transform: none; left: 21%; background: none; overflow: visible; }
.m-builder__stone img { mix-blend-mode: normal; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 70%); }
@media (max-width: 989px) {
  /* bento on tablet/phone: hero tile full, then two clean pairs; bracelets drops its overlay */
  .m-bento__tile--5 { grid-column: auto !important; min-height: 0; color: var(--midnight); }
  .m-bento__tile--5 .m-bento__img { position: relative; inset: auto; aspect-ratio: 4 / 5; flex: none; }
  .m-bento__tile--5 .m-bento__img::after { display: none; }
  .m-bento__tile--5 .m-bento__copy { padding: 14px 48px 0 0; margin-top: 0; }
  .m-bento__tile--5 .m-bento__title { font-size: var(--t-28); }
  .m-bento__tile--5 .m-bento__desc { color: var(--muted-light); }
  .m-bento__tile--5 .m-bento__arrow { right: 0; bottom: 6px; color: var(--midnight); border-color: var(--hair-light); }
}
@media (max-width: 549px) { .m-bento__tile--5 .m-bento__copy { padding-right: 0; } .m-bento__tile--5 .m-bento__title { font-size: 22px; } }
/* 5 shapes: the row closes the section, no dead band under it */
.m-shapes { padding-bottom: 72px; }
/* 6 hero sub-line keeps "New York" together */
.m-hero__sub { max-width: 27em; text-wrap: balance; }

/* ---- round 6 ------------------------------------------------------------------------ */
/* moonrise: the pearl page rises over the ink strip as a lit, curved horizon */
.m-dawn { position: relative; height: 200px; background: var(--ink); overflow: hidden; }
.m-dawn__moon { position: absolute; left: -20%; right: -20%; top: 92px; height: 1400px; border-radius: 50%; background: var(--pearl);
  box-shadow: 0 0 0 1px rgb(217 203 163 / .45), 0 -18px 60px rgb(217 203 163 / .18), 0 -60px 160px rgb(247 246 242 / .10); }
.m-dawn__mark { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); }
.m-dawn__mark .m-crescent { width: 22px; height: 22px; color: var(--glow); filter: drop-shadow(0 0 10px rgb(217 203 163 / .6)); }
@media (max-width: 749px) { .m-dawn { height: 130px; } .m-dawn__moon { left: -70%; right: -70%; top: 64px; } .m-dawn__mark { top: 24px; } }
.m-shapes__head { padding-top: 0; }

/* curated cards: focus crop so the ring, not the cloth, fills the frame */
.m-card__media:not(.is-packshot) .m-card__img { object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%); }
.m-card:hover .m-card__media:not(.is-packshot) .m-card__img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
.m-card__img { filter: contrast(1.05); }

/* tighter rhythm where content ends early */
.m-light { padding-bottom: 72px; }
.m-journal__img { aspect-ratio: 16 / 10; }
.m-journal__item { padding: 24px 0; }
.m-gems__fig img { filter: contrast(1.08) saturate(1.06); }
.m-reviews { padding-bottom: 96px; }