/* Grand Diamonds homepage. Fashion-house rules, their content: full-bleed media, an oversized serif wordmark over the
   film, chrome that floats and gets out of the way, and each section given a whole screen. */

body.home { background: var(--paper); }
body.home .announce { position: relative; z-index: 51; }

/* header floats over the film, then settles onto paper */
body.home .site-header { position: fixed; left: 0; right: 0; top: 34px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .5s var(--ease), box-shadow .5s var(--ease), color .5s; }
body.home .site-header.is-scrolled { top: 0; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
body.home .site-header:not(.is-scrolled) .wordmark { opacity: 0; pointer-events: none; }
body.home .wordmark { transition: opacity .5s var(--ease); }
body.home .search { border-bottom-color: currentColor; }

.kicker { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.link-line { position: relative; display: inline-flex; gap: 10px; align-items: center; padding-bottom: 6px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 400; }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .6s var(--ease); }
.link-line:hover::after { transform: scaleX(.35); }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 1. film ---------- */
.film { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--film-bg); }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: settle 2.4s var(--ease) forwards; }
@keyframes settle { to { transform: scale(1); } }
.film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--paper-rgb), .55) 0%, rgba(var(--paper-rgb), 0) 22%, rgba(var(--paper-rgb), 0) 58%, rgba(var(--paper-rgb), .62) 100%); pointer-events: none; }
body.no-fade .film::after { display: none; }   /* preview without the cream fade: index.html?fade=off */
.film .mark {
  position: absolute; left: -0.03em; right: 0; bottom: 0.04em; z-index: 2; margin: 0;
  font: 400 clamp(80px, 13.4vw, 260px)/.8 var(--serif); letter-spacing: -.045em; white-space: nowrap; color: var(--ink);
}
.film .mark span { display: inline-block; opacity: 0; transform: translateY(40%); animation: rise 1.4s var(--ease) forwards; }
.film .mark span:nth-child(2) { animation-delay: .12s; font-style: italic; }
@keyframes rise { to { opacity: 1; transform: none; } }
.film .caption { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(170px, 17vw, 300px); max-width: 320px; padding: 22px 24px; text-align: left; background: rgba(var(--paper-rgb), .74); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); opacity: 0; animation: fade 1s .9s forwards; }
.film .caption p { margin: 10px 0 18px; font-size: 14px; color: var(--ink-soft); }
@keyframes fade { to { opacity: 1; } }
.film .sound { position: absolute; z-index: 3; left: var(--pad); top: calc(var(--header) + 54px); display: flex; gap: 8px; align-items: center; opacity: 0; animation: fade 1s 1.2s forwards; }
.film .sound svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.film .scroll { position: absolute; z-index: 3; left: 50%; top: calc(var(--header) + 54px); transform: translateX(-50%); width: 1px; height: 54px; background: color-mix(in srgb, var(--ink) 25%, transparent); overflow: hidden; }
.film .scroll::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ink); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { to { top: 110%; } }

/* ---------- 2. offer ---------- */
.offer { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--ink); color: var(--paper); }
.offer figure { margin: 0; position: relative; overflow: hidden; background: #0d0c0b; display: grid; place-items: center; }
.offer figure img { width: min(78%, 520px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; clip-path: circle(41%); transform: scale(1.16); filter: contrast(1.04); }
.offer figure .ring { position: absolute; width: min(92%, 640px); aspect-ratio: 1; border: 1px solid rgba(245, 243, 238, .18); border-radius: 50%; animation: turn 60s linear infinite; }
.offer figure .ring::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--taupe); }
.offer .copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 7vw, 120px); gap: 26px; }
.offer h2 { margin: 0; font: 400 clamp(56px, 7.4vw, 128px)/.88 var(--serif); letter-spacing: -.035em; }
.offer h2 em { color: var(--stone); }
.offer .lede { font: italic 400 clamp(20px, 1.7vw, 26px)/1.3 var(--serif); margin: 0; max-width: 32ch; color: var(--stone); }
.offer .detail { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid rgba(245, 243, 238, .2); border-bottom: 1px solid rgba(245, 243, 238, .2); font-size: 13px; color: rgba(245, 243, 238, .78); }
.offer .countdown { display: flex; gap: 22px; font: 400 clamp(34px, 3.4vw, 54px)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.offer .countdown small { display: block; margin-top: 8px; font: 400 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 243, 238, .55); }
.offer .actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.offer .btn-light { display: inline-flex; height: 50px; align-items: center; padding: 0 28px; background: var(--paper); color: var(--ink); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; transition: background .35s, color .35s; }
.offer .btn-light:hover { background: var(--taupe); color: var(--paper); }

/* ---------- 3. the eleven (vertical scroll drives a horizontal track) ---------- */
.eleven { position: relative; height: var(--track-h, 400vh); }
.eleven .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.eleven header { display: flex; justify-content: space-between; align-items: end; padding: calc(var(--header) + 20px) var(--pad) 28px; gap: 24px; }
.eleven h2 { margin: 0; font: 400 clamp(54px, 7vw, 120px)/.86 var(--serif); letter-spacing: -.04em; }
.eleven h2 em { font-style: italic; }
.eleven header p { max-width: 330px; margin: 0; color: var(--ink-soft); font-size: 14px; }
.eleven .track { display: flex; gap: clamp(14px, 1.6vw, 26px); padding: 0 var(--pad); will-change: transform; }
.eleven .card { flex: 0 0 clamp(250px, 23vw, 360px); position: relative; }
.eleven .card figure { margin: 0; position: relative; aspect-ratio: 501 / 708; overflow: hidden; background: var(--stone); }
.eleven .card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity .7s var(--ease); }
.eleven .card img + img { position: absolute; inset: 0; opacity: 0; }
.eleven .card:hover img:first-child { transform: scale(1.04); }
.eleven .card:hover img + img { opacity: 1; }
.eleven .card .no { position: absolute; top: 12px; left: 14px; font: italic 400 22px var(--serif); letter-spacing: 0; z-index: 1; }
.eleven .card .badge360 { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 6px 10px; background: var(--ink); color: var(--paper); font-size: 9.5px; letter-spacing: .18em; }
.eleven .card .meta { display: flex; justify-content: space-between; padding-top: 12px; }
.eleven .card .meta b { font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; }
.eleven .card .meta span { color: var(--muted); font-size: 12px; }
.eleven .card .spec { color: var(--muted); font-size: 11.5px; }
.eleven .end { flex: 0 0 clamp(250px, 23vw, 360px); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 20px; }
.eleven .end strong { font: italic 400 clamp(30px, 2.8vw, 46px)/1.05 var(--serif); }
.eleven .progress { margin: 34px var(--pad) 0; height: 1px; background: var(--hair); position: relative; }
.eleven .progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- 4. editorial ---------- */
.editorial-home { position: relative; padding: clamp(80px, 12vw, 200px) var(--pad); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--pad); align-items: start; }
.editorial-home blockquote { grid-column: 2 / 12; grid-row: 1; margin: 0 0 clamp(40px, 6vw, 90px); font: 400 clamp(44px, 6.4vw, 112px)/.95 var(--serif); letter-spacing: -.035em; text-align: center; }
.editorial-home blockquote em { font-style: italic; color: var(--taupe); }
.editorial-home figure { margin: 0; overflow: hidden; background: var(--stone); }
.editorial-home figure img { width: 100%; height: auto; display: block; will-change: transform; }
.editorial-home .a { grid-column: 1 / 6; grid-row: 2; }
.editorial-home .b { grid-column: 7 / 12; grid-row: 2; margin-top: 16vh; }
.editorial-home .c { grid-column: 2 / 9; grid-row: 3; margin-top: 8vh; }
.editorial-home .note { grid-column: 9 / 13; grid-row: 3; align-self: end; max-width: 300px; color: var(--ink-soft); font-size: 14px; }
.editorial-home .note p { margin: 12px 0 20px; }

/* ---------- 5. 360 ---------- */
.three60 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 100svh; background: var(--stage-spin); }
.three60 .stage360 { position: relative; overflow: hidden; cursor: grab; touch-action: pan-y; }
.three60 .stage360:active { cursor: grabbing; }
.three60 .stage360 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.three60 .stage360 .dial { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); width: 180px; height: 1px; background: rgba(var(--ink-rgb), .2); }
.three60 .stage360 .dial i { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); left: var(--a, 0%); }
.three60 .stage360 .hint { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.three60 .copy { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(40px, 6vw, 110px); }
.three60 h2 { margin: 0; font: 400 clamp(52px, 6vw, 104px)/.88 var(--serif); letter-spacing: -.035em; }
.three60 h2 em { font-style: italic; }
.three60 .metals { display: flex; gap: 10px; }
.three60 .metals button { width: 28px; height: 28px; border-radius: 50%; position: relative; }
.three60 .metals button::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid transparent; transition: border-color .3s; }
.three60 .metals button[aria-pressed="true"]::after { border-color: var(--ink); }

/* ---------- 6. journey ---------- */
.journey { padding: clamp(90px, 12vw, 190px) var(--pad); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.journey figure { margin: 0; position: relative; overflow: hidden; }
.journey figure img { width: 100%; height: auto; display: block; }
.journey h2 { margin: 0 0 40px; font: 400 clamp(46px, 5.4vw, 92px)/.9 var(--serif); letter-spacing: -.035em; }
.journey h2 em { font-style: italic; }
.journey ol { list-style: none; margin: 0 0 44px; padding: 0; counter-reset: s; }
.journey li { counter-increment: s; display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 22px 0; border-top: 1px solid var(--hair); }
.journey li:last-child { border-bottom: 1px solid var(--hair); }
.journey li::before { content: "0" counter(s); grid-row: span 2; font: italic 400 30px/1 var(--serif); color: var(--taupe); }
.journey li b { font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.journey li p { margin: 0; color: var(--ink-soft); }
.journey .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.journey .cta-row .btn { padding: 0 30px; }

/* ---------- 7. moments ---------- */
.moments { padding: 0 var(--pad) clamp(90px, 12vw, 170px); }
.moments header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; gap: 20px; }
.moments h2 { margin: 0; font: italic 400 clamp(40px, 4.6vw, 78px)/.95 var(--serif); letter-spacing: -.03em; }
.moments .row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(8px, 1vw, 14px); align-items: end; }
.moments figure { margin: 0; position: relative; overflow: hidden; }
.moments figure img { width: 100%; height: auto; display: block; transition: transform 1.6s var(--ease); }
.moments figure:hover img { transform: scale(1.035); }
.moments figcaption { padding-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.moments figcaption b { display: block; font: italic 400 20px var(--serif); color: var(--ink); letter-spacing: 0; margin-bottom: 4px; }

/* ---------- 8. reviews ---------- */
.reviews { background: var(--stone); padding: clamp(80px, 9vw, 150px) var(--pad); text-align: center; overflow: hidden; display: grid; justify-items: center; gap: 26px; }
.reviews h2 { margin: 0; color: var(--ink-soft); }
.reviews .quote-wrap { margin: 0; width: 100%; max-width: 1000px; }
.reviews .quote { position: relative; margin: 0 auto 22px; min-height: 4.6em; font: 400 clamp(26px, 3vw, 46px)/1.16 var(--serif); letter-spacing: -.015em; touch-action: pan-y; }
.reviews .quote p { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.reviews .quote p.is-on { opacity: 1; transform: none; }
.reviews .who { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.reviews .review-nav { display: flex; align-items: center; gap: 18px; }
.reviews .review-nav button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(var(--ink-rgb), .2); border-radius: 50%; transition: border-color .3s, background .3s; }
.reviews .review-nav button:hover { border-color: var(--ink); background: rgba(var(--paper-rgb), .35); }
.reviews .review-nav svg { width: 12px; height: 12px; stroke: var(--ink); stroke-width: 1.3; fill: none; }
.reviews .count { font-size: 11px; letter-spacing: .16em; color: var(--muted); min-width: 44px; font-variant-numeric: tabular-nums; }
.film .caption .trust { margin-top: 14px; display: flex; }

/* ---------- 9. closing ---------- */
.closing { position: relative; min-height: 86svh; display: grid; place-items: center; text-align: center; overflow: hidden; color: var(--paper); }
.closing video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.9); }
.closing .inner { position: relative; display: grid; gap: 26px; justify-items: center; padding: var(--pad); }
.closing h2 { margin: 0; font: 400 clamp(56px, 8vw, 140px)/.86 var(--serif); letter-spacing: -.04em; }
.closing h2 em { font-style: italic; }
.closing .btn-light { display: inline-flex; height: 52px; align-items: center; padding: 0 34px; background: var(--paper); color: var(--ink); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; }
.closing .seals { width: min(420px, 70vw); filter: grayscale(1) brightness(1.35) contrast(.9); opacity: .9; }

@media (max-width: 900px) {
  /* phones: portrait film, the name stacked on two lines across the bottom, a compact caption (fashion-house mobile pattern) */
  body.home .site-header { top: 30px; }
  .film { min-height: 560px; }
  .film .mark { font-size: 23vw; line-height: .8; bottom: calc(0.3em + env(safe-area-inset-bottom)); left: calc(var(--pad) - 0.04em); white-space: normal; }
  .film .mark span { display: block; }
  .film .caption { left: var(--pad); right: auto; max-width: 74vw; text-align: left; bottom: calc(60vw + 40px); padding: 14px 16px; }
  .film .caption p { display: none; }
  .film .caption .kicker { display: block; margin-bottom: 10px; }
  .film .sound { top: calc(var(--header) + 44px); }
  .film .scroll { display: none; }
  .offer .copy { padding: 44px var(--pad) 56px; }
  .offer h2 { font-size: 15vw; }
  .offer .countdown { gap: 18px; }
  .eleven header { padding: 70px var(--pad) 20px; }
  .eleven h2 { font-size: 17vw; }
  .eleven .track { gap: 8px; padding: 0 var(--pad); scrollbar-width: none; }
  .eleven .track::-webkit-scrollbar { display: none; }
  .eleven .card { flex-basis: 76vw; }
  .eleven .end { flex-basis: 60vw; }
  .editorial-home { padding: 80px var(--pad); gap: 8px; }
  .editorial-home blockquote { font-size: 13vw; margin-bottom: 30px; }
  .three60 .copy { padding: 40px var(--pad) 60px; }
  .three60 h2 { font-size: 14vw; }
  .journey { padding: 80px var(--pad); gap: 36px; }
  .journey h2 { font-size: 13vw; }
  .journey .cta-row .btn { flex: 1 1 100%; }
  .moments h2 { font-size: 12vw; }
  .reviews .quote { font-size: 7vw; min-height: 7em; }
  .film .caption .trust { display: none; }
  .closing h2 { font-size: 15vw; }
  .offer, .three60, .journey { grid-template-columns: 1fr; }
  .offer figure { min-height: 70vw; }
  .three60 .stage360 { min-height: 100vw; }
  .eleven { height: auto !important; }
  .eleven .pin { position: static; height: auto; padding-bottom: 60px; }
  .eleven header { flex-direction: column; align-items: start; }
  .eleven .track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; }
  .eleven .card { scroll-snap-align: start; flex-basis: 72vw; }
  .eleven .progress { display: none; }
  .editorial-home { grid-template-columns: 1fr 1fr; }
  .editorial-home blockquote, .editorial-home .note { grid-column: 1 / -1; grid-row: auto; }
  .editorial-home .a, .editorial-home .b, .editorial-home .c { grid-column: auto; grid-row: auto; margin: 0; }
  .moments .row { grid-template-columns: 1fr 1fr; }
  .moments .row figure:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .film .mark span, .film .caption, .film .sound { opacity: 1; transform: none; animation: none; }
}