@font-face { font-family: Nexa; src: url(../fonts/Nexa-ExtraLight.woff2) format("woff2"); font-weight: 100 399; font-display: swap; }
@font-face { font-family: Nexa; src: url(../fonts/Nexa-Heavy.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
/* James The Jeweler: one-pager. Black satin, thin serif, white pills, gold only as an accent. */
:root {
  --bg: #0B0B0A;
  --gold: #D1AF37;
  --gold-hi: #E9CC6A;
  --text: #FFFFFF;
  --soft: #D9D6CE;
  --mute: #A9A59C;
  --dim: #8F8B80;
  --glass: rgba(255, 255, 255, .045);
  --glass-line: rgba(255, 255, 255, .09);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --light: Montserrat, Inter, system-ui, sans-serif;   /* Montserrat Light (Nexa ExtraLight is set up in /fonts if wanted back) */
  --serif: "Playfair Display", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 26px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s, border-color .25s, box-shadow .25s; }
.pill svg { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.pill-white { background: #fff; color: var(--bg); }
.pill-white:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 255, 255, .05); }
.pill-white:hover svg { transform: translate(2px, -2px); }
.pill-white:active, .pill-line:active { transform: translateY(0) scale(.98); }
.pill-line { border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-weight: 500; }
.pill-line:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.pill-sm { min-height: 40px; padding: 0 20px; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; }
.pill-lg { min-height: 50px; padding: 0 30px; font-size: 14px; }
.pill-lg svg { width: 17px; height: 17px; stroke-width: 2; }
.txt-narrow { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; height: 900px; overflow: hidden; background: var(--bg); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* short fade at the bottom edge: on wide screens the image is cropped, so its own baked fade can be cut off */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1; }

.nav { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 26px 56px; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 40px; }
.nav-right { justify-content: flex-end; }
.nav a:not(.pill):not(.brand) { position: relative; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--soft); transition: color .2s; padding: 12px 0; }
.nav a:not(.pill):not(.brand)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 1px; background: var(--gold); transition: right .3s cubic-bezier(.2, .7, .2, 1); }
.nav a:not(.pill):not(.brand):hover { color: #fff; }
.nav a:not(.pill):not(.brand):hover::after { right: 0; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 46px; width: auto; }
.brand span { font: 500 17px var(--serif); letter-spacing: 3.4px; text-transform: uppercase; white-space: nowrap; }

.stage { position: absolute; inset: 0; }
.ghost { position: absolute; z-index: 1; top: 122px; left: 0; right: 0; display: flex; justify-content: center; will-change: transform; }
.ghost span { flex-shrink: 0; white-space: nowrap; font: 700 198px/1 var(--serif); letter-spacing: 4px; text-transform: uppercase; background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .13) 52%, rgba(255, 255, 255, 0) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stone { position: absolute; z-index: 2; top: -10px; left: 50%; width: 780px; height: 780px; margin-left: -390px; will-change: transform; }
.stone-float { position: absolute; inset: 0; animation: float 6.5s ease-in-out infinite; will-change: transform; }
@keyframes float { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
.stone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#glitterCanvas { mix-blend-mode: screen; pointer-events: none; }
.gem-live #stoneCanvas, .gem-live #glitterCanvas { display: none; }      /* the live 3D stone replaces the frames */

.hero-card { position: absolute; z-index: 3; top: 596px; width: 216px; min-height: 148px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 18px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .3s, background .3s; }
.hero-card:hover { border-color: rgba(209, 175, 55, .35); background: rgba(255, 255, 255, .06); }
.hero-card-left { left: 56px; }
.hero-card-right { right: 56px; gap: 14px; }
.hero-card-right a { display: flex; flex-direction: column; gap: 2px; }
.hero-card-right a:hover .card-handle { color: var(--gold-hi); }
.tag { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); }
.tag svg { width: 13px; height: 13px; flex-shrink: 0; }
.card-title { font: 400 19px/1.2 var(--serif); }
.card-handle { font: 400 17px var(--serif); transition: color .2s; }
.card-sub { font-size: 11px; line-height: 1.5; color: var(--mute); }
.rule { height: 1px; background: var(--glass-line); }

.hero-copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 37px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 0 24px; }
.hero-copy h1 { margin: 10px 0 0; font: 400 34px/1.15 var(--serif); letter-spacing: -.2px; }
.hero-copy h1 b { font-style: italic; font-weight: 700; color: var(--gold); }
.hero-copy p { margin: 0; max-width: 430px; font-size: 14px; line-height: 1.65; color: var(--mute); }

/* entrance */
.hero .nav, .hero .ghost, .hero .stone, .hero .hero-card, .hero .hero-copy > * { opacity: 0; }
.ready .hero .nav { animation: fade .8s .05s both; }
.ready .hero .ghost { animation: rise 1.3s 0s cubic-bezier(.2, .7, .2, 1) both; }
.ready .hero .stone { animation: stoneIn 1.4s .05s cubic-bezier(.2, .7, .2, 1) both; }
.ready .hero .hero-card { animation: rise .9s .45s cubic-bezier(.2, .7, .2, 1) both; }
.ready .hero .hero-copy > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.ready .hero .hero-copy > :nth-child(1) { animation-delay: .3s; }
.ready .hero .hero-copy > :nth-child(2) { animation-delay: .4s; }
.ready .hero .hero-copy > :nth-child(3) { animation-delay: .5s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes stoneIn { from { opacity: 0; scale: .9; translate: 0 26px; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* ---------- sections ---------- */
.section-head { max-width: 1040px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: 3.3px; text-transform: uppercase; color: var(--gold); }
h2 { margin: 0; font: 400 58px/1.08 var(--serif); letter-spacing: -.8px; }
h2 em { font-style: normal; color: var(--gold); }
.ornament { width: 262px; height: 38px; fill: var(--gold); stroke: none; color: var(--gold); margin-top: 4px; }
.lede { margin: 0; max-width: 520px; font-size: 17px; color: #B9B5AA; }
/* hvd.gg reveal: each piece rises out of a blur. A whole section plays at once, top to bottom, the first time it is seen */
.ready [data-group]:not(.in) [data-reveal], .ready [data-group]:not(.in) [data-split] .w { opacity: 0; }
[data-group].in [data-reveal] { animation: revealIn 1.1s var(--ease) both; animation-delay: var(--d, 0s); }
[data-split] .w { display: inline-block; }
[data-group].in [data-split] .w { animation: wordIn 1s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes revealIn { from { opacity: 0; translate: 0 26px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes wordIn { from { opacity: 0; translate: 0 .3em; filter: blur(10px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* ---------- reviews ---------- */
.reviews { padding: 112px 0 120px; }
.rv { margin-top: 52px; }
.rv-track { --card: 330px; display: flex; align-items: center; gap: 52px; padding: 70px calc(50% - var(--card) / 2) 140px; margin-bottom: -76px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { position: relative; flex: 0 0 var(--card); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; scroll-snap-align: center; background: #111; border: 1px solid rgba(255, 255, 255, .12); opacity: .34; scale: 1; cursor: pointer; transition: opacity .45s, scale .5s var(--ease), border-color .45s, box-shadow .45s; isolation: isolate; }
.rv-card.on:hover { scale: 1.215; box-shadow: 0 3px 6px rgba(0, 0, 0, .38), 0 10px 22px rgba(0, 0, 0, .32); }
.rv-card.near { opacity: .55; }
.rv-card.on { opacity: 1; scale: 1.165; border-color: var(--gold); box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .3); cursor: default; z-index: 2; }
.rv-card img, .rv-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-card video { opacity: 0; transition: opacity .3s; }
.rv-card.playing video { opacity: 1; }
.rv-chip { position: absolute; z-index: 3; top: 14px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(11, 11, 10, .6); color: #fff; font-size: 10.500px; font-weight: 500; letter-spacing: .6px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s, background .2s; }
.rv-card.on .rv-chip { opacity: 1; }
.rv-time { right: 14px; }
.rv-mute { left: 14px; cursor: pointer; }
.rv-mute::before { content: ""; position: absolute; inset: -9px; }                 /* bigger tap area than it looks */
.rv-mute:hover { background: rgba(11, 11, 10, .85); }
.rv-mute svg { width: 13px; height: 13px; }
.rv-mute .on-icon, .rv.sound .rv-mute .off-icon { display: none; }
.rv.sound .rv-mute .on-icon { display: block; }
.rv-play { position: absolute; z-index: 3; top: 50%; left: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(11, 11, 10, .5); color: #fff; cursor: pointer; opacity: 0; scale: .9; transition: opacity .25s, scale .25s cubic-bezier(.2, .7, .2, 1), background .2s; pointer-events: none; }
.rv-play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.rv-play .play-icon, .rv-card.paused .rv-play .pause-icon { display: none; }
.rv-card.paused .rv-play .play-icon { display: block; }
.rv-card.on:hover .rv-play, .rv-card.on.paused .rv-play, .rv-card.on.peek .rv-play { opacity: 1; scale: 1; pointer-events: auto; }
.rv-play:hover { background: rgba(11, 11, 10, .8); }
.rv-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .2); opacity: 0; transition: opacity .3s; }
.rv-card.on .rv-bar { opacity: 1; }
.rv-bar i { display: block; width: 100%; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }

.rv-controls { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 8px; }
.circle { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 999px; background: transparent; border: 1px solid rgba(209, 175, 55, .6); color: var(--gold); cursor: pointer; transition: background .25s, color .25s, transform .25s cubic-bezier(.2, .7, .2, 1); }
.circle svg { width: 18px; height: 18px; stroke-width: 1.8; }
.circle:hover { background: var(--gold); color: var(--bg); }
.circle:active { transform: scale(.94); }
.rv-count { margin: 0; font: 400 22px var(--serif); color: var(--dim); font-variant-numeric: tabular-nums; }
.rv-count #rvNow { color: var(--gold); font-weight: 600; }
.rv-hint { margin: 24px 0 0; text-align: center; font-size: 13px; color: var(--dim); }

/* ---------- contact ---------- */
.contact { padding: 120px 48px 128px; border-top: 1px solid rgba(209, 175, 55, .18); }
.phone { margin-top: 8px; font: 400 60px/1.1 var(--serif); letter-spacing: -1px; color: var(--gold); transition: color .25s, text-shadow .25s; }
.phone:hover { color: var(--gold-hi); }
.btn-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
/* social cards: the same glass as the hero cards */
.social-cards { max-width: 760px; margin: 64px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.social { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 8px; overflow: hidden; isolation: isolate; transition: border-color .35s, background .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.social::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(209, 175, 55, .14), transparent 60%); opacity: 0; transition: opacity .45s; }
.social:hover { border-color: rgba(209, 175, 55, .38); background: rgba(255, 255, 255, .06); transform: translateY(-3px); }
.social:hover::before { opacity: 1; }
.social .tag { margin-bottom: 4px; }
.social-handle { font: 400 24px/1.15 var(--serif); transition: color .25s; }
.social:hover .social-handle { color: var(--gold-hi); }
.social-sub { font-size: 12px; color: var(--mute); }
.social-go { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--glass-line); color: var(--soft); transition: background .3s, color .3s, border-color .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.social-go svg { width: 15px; height: 15px; stroke-width: 2; }
.social:hover .social-go { background: var(--gold); border-color: var(--gold); color: var(--bg); transform: rotate(45deg); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid rgba(209, 175, 55, .18); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 32px 48px; }
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand img { height: 40px; width: auto; }
.foot-brand span { font: 600 13px var(--serif); letter-spacing: 3.2px; text-transform: uppercase; color: var(--gold); }
.foot p { margin: 0; font-size: 13px; color: var(--dim); }
.foot nav { display: flex; align-items: center; gap: 28px; }
.foot nav a { font-size: 13px; color: #C9C5BA; transition: color .2s; }
.foot nav a:hover { color: #fff; }

/* ---------- desktop and laptop: the hero fits the window ---------- */
/* --sw is the stone's size; everything in the hero is placed from the top (word, stone) or the bottom (text, cards) */
.hero { --sw: min(780px, 58vw, calc(100svh - 120px)); height: clamp(720px, 100svh, 920px); }
.stone { top: calc(42% - var(--sw) / 2); width: var(--sw); height: var(--sw); margin-left: calc(var(--sw) / -2); }
.hero-card { top: auto; bottom: 156px; }
@media (max-width: 1240px) {
  .ghost span { font-size: 15.4vw; }
  .ghost { top: calc(122px + (198px - 15.4vw) * .5); }
  .hero-card-left { left: 28px; }
  .hero-card-right { right: 28px; }
  .nav { padding: 22px 28px; }
  .nav-left, .nav-right { gap: 26px; }
}

/* ---------- tablet and phone: one column, the stone sized to the screen ---------- */
@media (max-width: 1080px) {
  .nav-right .nav-wide { display: none; }                     /* Instagram and TikTok live in the card below */
  .hero { --sw: min(520px, 76vw); height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          grid-template-areas: "stage stage" "copy copy" "a b"; column-gap: 14px; padding: 96px 24px 60px; }
  .stage { position: relative; inset: auto; grid-area: stage; height: calc(var(--sw) * .8); margin: 0 -24px; }
  .ghost { top: calc(var(--sw) * .03); }
  .ghost span { font-size: min(14.1vw, 108px); letter-spacing: 2px; }
  .stone { top: calc(var(--sw) * -.12); }
  .hero-copy { position: relative; bottom: auto; grid-area: copy; gap: 14px; padding: 0; }
  .hero-copy h1 { margin-top: 4px; }
  .hero-copy .pill { order: 3; margin-top: 10px; }            /* headline and line first, then the button */
  .hero-card { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: min(300px, 100%); min-height: 0; margin-top: 36px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero-card-left { grid-area: a; justify-self: end; }
  .hero-card-right { grid-area: b; justify-self: start; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .nav-wide, .txt-wide { display: none; }
  .txt-narrow { display: inline; }
  .nav { padding: 14px 20px; gap: 12px; }
  .nav a:not(.pill):not(.brand) { font-size: 11px; letter-spacing: 2px; }
  .brand span { display: none; }
  .pill-sm { min-height: 44px; padding: 0 16px; font-size: 11px; letter-spacing: 2px; }

  .hero { --sw: min(330px, 86vw); padding: 78px 20px 48px; column-gap: 12px; }
  .stage { margin: 0 -20px; height: calc(var(--sw) * .8); }
  .ghost span { font-size: 14.1vw; letter-spacing: 1px; }
  .hero-copy .pill { min-height: 50px; padding: 0 28px; font-size: 14px; }
  .hero-copy h1 { font-size: 29px; }
  .hero-copy p { max-width: 320px; }
  .hero-card { width: 100%; margin-top: 28px; }
  .hero-card-left { padding: 14px 12px; }
  .tag { font-size: 10px; letter-spacing: 2.2px; gap: 6px; }
  .tag svg { width: 12px; height: 12px; }
  .card-title { font-size: 17px; }
  .card-handle { font-size: 15px; }

  h2 { font-size: 38px; letter-spacing: -.5px; line-height: 1.1; }
  .section-head { gap: 16px; }
  .ornament { width: 214px; height: 31px; margin-top: 2px; }
  .lede { font-size: 16px; }
  .reviews { padding: 72px 0 76px; }
  .rv { margin-top: 20px; }
  .rv-track { --card: 214px; gap: 28px; padding-top: 44px; padding-bottom: 96px; margin-bottom: -50px; }
  .rv-card { border-radius: 18px; }
  .rv-card.on { scale: 1.12; }
  .rv-chip { top: 11px; }
  .rv-time { right: 11px; }
  .rv-mute { left: 11px; }
  .rv-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .circle { width: 48px; height: 48px; }
  .rv-count { font-size: 20px; }
  .rv-controls { gap: 28px; }
  .rv-hint { margin-top: 20px; padding: 0 24px; }

  .contact { padding: 72px 24px 76px; }
  .phone { font-size: 38px; letter-spacing: -.6px; margin-top: 6px; }
  .btn-row { width: 100%; flex-direction: column; gap: 12px; margin-top: 12px; }
  .btn-row .pill { width: 100%; min-height: 52px; font-size: 15px; }
  .social-cards { margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .social { padding: 18px 20px; }
  .social-handle { font-size: 20px; }
  .foot { flex-direction: column; text-align: center; gap: 16px; padding: 32px 24px 36px; }
  .foot nav { gap: 24px; }
  .foot p { font-size: 12px; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .nav, .hero .ghost, .hero .stone, .hero .hero-card, .hero .hero-copy > * { opacity: 1; animation: none !important; }
  [data-reveal], [data-split] .w { opacity: 1 !important; animation: none !important; filter: none !important; translate: none !important; }
  #glitterCanvas { display: none; }
  .stone-float { animation: none; }
}

/* a barely-there shadow under everything that sits straight on the background */
.nav a:not(.pill), .brand span, .hero-copy h1, .hero-copy p, .hero-card .tag, .card-title, .card-handle, .card-sub,
.eyebrow, h2, .lede, .phone, .rv-count, .rv-hint, .social .tag, .social-handle, .social-sub, .foot p, .foot nav a, .foot-brand span {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.ornament, .brand img, .foot-brand img, .tag svg, .circle svg, .social-go svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
.circle, .pill-line, .social-go, .hero-card, .social { box-shadow: 0 4px 18px rgba(0, 0, 0, .28); }
.social:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, .34); }

/* the soft gold glow at the bottom edges of the page (a dithered image: a CSS gradient bands on near-black) */
body { position: relative; }
.page-glow { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 1100px; pointer-events: none; background: url(../assets/edge-glow.png) center bottom / 100% 100% no-repeat; }
.reviews, .contact, .foot { position: relative; z-index: 3; }


/* hero cards: all text lines up on the left edge; each icon sits on the right, centred on its label + value pair */
.hero-card .entry, .hero-card-right a { position: relative; display: flex; flex-direction: column; gap: 2px; padding-right: 26px; }
.hero-card .card-title { white-space: nowrap; }
.hero-card .entry { gap: 8px; }
.hero-card .tag svg { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 16px; height: 16px; }
.hero-card-left { gap: 10px; }

@media (min-width: 1081px) { .hero-card { width: 236px; } }
@media (max-width: 1240px) and (min-width: 1081px) { .hero-card { width: 216px; } }
@media (max-width: 760px) {
  .hero-card .entry, .hero-card-right a { padding-right: 20px; }
  .hero-card .card-title { font-size: 15px; }
  .hero-card .card-handle { font-size: 14px; }
  .hero-card .tag svg { width: 14px; height: 14px; }
}

/* socials card: each half is one whole button, edge to edge, with a full-width divider between them */
.hero-card-right { padding: 0; gap: 0; overflow: hidden; }
.hero-card-right a { flex: 1; justify-content: center; padding: 14px 44px 14px 18px; transition: background .25s; }
.hero-card-right a:hover { background: rgba(255, 255, 255, .055); }
.hero-card-right a:active { background: rgba(255, 255, 255, .08); }
.hero-card-right a .tag svg { right: 18px; }
.hero-card-right .rule { flex-shrink: 0; }
@media (max-width: 760px) {
  .hero-card-right { padding: 0; }
  .hero-card-right a { padding: 12px 34px 12px 12px; }
  .hero-card-right a .tag svg { right: 12px; }
}

/* the hero text block spans the full width and overlaps the bottom of the side cards: let clicks pass through
   its empty space, so only its own button and text catch the pointer */
.hero-copy { pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.stage { pointer-events: none; }

/* side videos pop up a little on hover so it is clear they can be clicked; their outline lightens too */
@media (hover: hover) {
  .rv-card:not(.on):hover { scale: 1.06; opacity: .78; border-color: rgba(255, 255, 255, .32); }
  .rv-card.near:not(.on):hover { opacity: .9; }
}

/* small icon in front of the section labels */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow svg { width: 15px; height: 15px; stroke-width: 1.7; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }

/* Google Material Symbols (outlined, weight 300) are filled shapes, not strokes */
.eyebrow svg.mi { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* phone number: area code in gold, the rest in white */
.phone .pn-rest { color: #fff; transition: color .25s; }
.phone:hover .pn-rest { color: var(--soft); }

/* description text: a light geometric sans (Nexa Light look) */
.hero-copy p, .lede, .card-sub, .social-sub, .rv-hint, .foot p { font-family: var(--light); font-weight: 300; letter-spacing: .2px; }

/* loading splash: the logo alone on black, breathing softly; it lifts away once the page and the stone are ready */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg) url(../assets/splash-glow.png) center / 640px 640px no-repeat; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.splash-logo { height: 96px; width: auto; animation: splashBreathe 2.4s ease-in-out infinite; transition: transform 1s var(--ease), opacity .7s var(--ease), filter 1s var(--ease); }
@keyframes splashBreathe { 0%, 100% { opacity: .82; transform: scale(.985); } 50% { opacity: 1; transform: scale(1); } }
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash.leaving .splash-logo, .splash.out .splash-logo { animation: splashOut .75s cubic-bezier(.5, 0, .2, 1) forwards; transition: none; }
@keyframes splashOut {
  0%   { transform: scale(1); opacity: 1; }
  28%  { transform: scale(1.06); opacity: 1; }                      /* a small swell first */
  100% { transform: scale(.55); opacity: 0; }                       /* then it shrinks away */
}
.splash.out { transition: opacity .55s var(--ease), visibility 0s linear .55s; }      /* backdrop fades only once the logo has finished */
@media (prefers-reduced-motion: reduce) { .splash-logo { animation: none; } }

/* header "Text Me" button: gold outline on hover */
.nav .pill-line:hover { border-color: var(--gold); background: rgba(209, 175, 55, .06); }

/* ---------- phone header: a floating bar with a gold outline, logo left, burger right; opening the menu makes the bar taller ---------- */
.burger, .menu { display: none; }
@media (max-width: 760px) {
  .nav { position: fixed; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 10px 20px; }       /* a 64px bar, edge to edge, stuck to the top while scrolling */
  .nav-left, .nav-right { display: none; }
  #reviews, #contact { scroll-margin-top: 64px; }            /* menu links land below the sticky bar */
  .brand img { height: 38px; }
  /* logo on the left; the name centred in the bar */
  .brand span { display: inline; position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; font-size: 14px; letter-spacing: 2.6px; }
  .menu-open .hero .nav { z-index: 60; }

  /* three lines: white, a short gold one in the middle, white; they fold into an X */
  .burger { display: block; position: relative; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .burger i { position: absolute; left: 12px; width: 18px; height: 1.5px; border-radius: 2px; background: #fff; transition: translate .45s var(--ease), rotate .45s var(--ease), width .35s var(--ease), opacity .25s, background .3s; }
  .burger i:nth-child(1) { top: 14.5px; }
  .burger i:nth-child(2) { top: 20.5px; width: 11px; left: 19px; background: var(--gold); }
  .burger i:nth-child(3) { top: 26.5px; }
  .burger:active { scale: .95; }
  .menu-open .burger i:nth-child(1) { translate: 0 6px; rotate: 45deg; background: var(--gold); }
  .menu-open .burger i:nth-child(2) { width: 0; opacity: 0; }
  .menu-open .burger i:nth-child(3) { translate: 0 -6px; rotate: -45deg; background: var(--gold); }

  /* the bar: always there behind the logo and burger, edge to edge, 64px tall, a gold line along its bottom;
     opening the menu grows it downward to fit links 01 to 04 and the gold divider */
  .menu { display: grid; grid-template-rows: 0fr; position: absolute; z-index: 1; top: 0; left: 0; right: 0; padding-top: 63px;
          background: rgba(14, 14, 13, .95); border-bottom: 1px solid rgba(209, 175, 55, .45); box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
          transition: grid-template-rows .45s cubic-bezier(.6, 0, .2, 1), border-color .3s, box-shadow .3s; }
  .menu-open .menu { grid-template-rows: 1fr; border-color: rgba(209, 175, 55, .5); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); transition: grid-template-rows .55s cubic-bezier(.6, 0, .2, 1), border-color .3s, box-shadow .3s; }
  .menu-inner { min-height: 0; overflow: hidden; padding: 0 24px; }
  .menu-open .menu-inner { padding-bottom: 12px; }
  .menu-inner { transition: padding-bottom .45s cubic-bezier(.6, 0, .2, 1); }
  .brand { z-index: 2; }                                     /* the logo stays on top of the open sheet */
  .menu-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .nav .menu-links a:not(.pill):not(.brand) { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--glass-line); font: 400 21px/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; }
  .nav .menu-links a:not(.pill):not(.brand)::after { display: none; }
  .nav .menu-links a:not(.pill):not(.brand):nth-child(n+3) { border-bottom: 0; }
  .nav .menu-links a:not(.pill):not(.brand):active { color: var(--gold-hi); }
  .menu .mn { min-width: 16px; font: 400 10px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 1.5px; color: var(--gold); translate: 0 -2px; }
  .menu .ornament { width: 200px; height: 28px; margin: 14px auto 0; }
  /* links rise in one after another as the panel opens */
  .menu-links a, .menu .ornament { opacity: 0; translate: 0 8px; transition: opacity .15s, translate .15s; }
  .menu-open .menu-links a, .menu-open .menu .ornament { opacity: 1; translate: 0 0; transition: opacity .4s var(--ease), translate .5s var(--ease); }
  .menu-open .menu-links a:nth-child(1) { transition-delay: .16s; }
  .menu-open .menu-links a:nth-child(2) { transition-delay: .2s; }
  .menu-open .menu-links a:nth-child(3) { transition-delay: .24s; }
  .menu-open .menu-links a:nth-child(4) { transition-delay: .28s; }
  .menu-open .menu .ornament { transition-delay: .34s; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .menu, .menu-open .menu { transition: visibility 0s; } }

/* scrollbar: a slightly lighter track than the page, with a gold pill */
html { scrollbar-color: var(--gold) #1A1A18; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1A1A18; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; border: 2px solid #1A1A18; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-hi); }
.rv-track::-webkit-scrollbar { display: none; }

/* tablet and phone hero cards: one full-width row each.
   Location: label + city on the left, the line about meetups on the right, a thin divider between.
   Socials: Instagram and TikTok side by side, each half still one whole button. */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "copy" "a" "b"; }
  .hero-card { justify-self: center; width: min(460px, 100%); min-height: 0; margin-top: 0; }
  .hero-card-left { grid-area: a; justify-self: center; margin-top: 32px; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .hero-card-left .entry { flex: 0 0 auto; }
  .hero-card-left .rule, .hero-card-right .rule { width: 1px; height: auto; align-self: stretch; flex-shrink: 0; }
  .hero-card-left .card-sub { flex: 1; min-width: 0; }
  .hero-card-right { grid-area: b; justify-self: center; margin-top: 10px; flex-direction: row; }
  .hero-card-right a { flex: 1 1 0; min-width: 0; padding: 13px 34px 13px 16px; }
  .hero-card-right a .tag svg { right: 14px; }
}
@media (max-width: 760px) {
  .hero-card-left { margin-top: 26px; padding: 13px 14px; gap: 12px; }
  .hero-card-left .entry { padding-right: 22px; }
  .hero-card-right a { padding: 12px 30px 12px 14px; }
  .hero-card-right a .tag svg { right: 12px; }
  .hero-card .card-handle { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* location card built like the socials card on every screen size: no inner padding, each part padded on its own,
   so its divider runs edge to edge exactly like the one between Instagram and TikTok */
.hero-card-left { padding: 0; gap: 0; overflow: hidden; }
.hero-card-left .entry { flex: 1; justify-content: center; padding: 14px 44px 14px 18px; }
.hero-card-left .entry .tag svg { right: 18px; }
.hero-card-left .card-sub { padding: 14px 18px; }
.hero-card-left .rule { flex-shrink: 0; }
@media (max-width: 1080px) {
  /* side by side: both cards split at exactly half, so the two dividers line up */
  .hero-card-left { gap: 0; padding: 0; align-items: stretch; }
  .hero-card-left .entry, .hero-card-left .card-sub, .hero-card-right a { flex: 1 1 0; min-width: 0; }
  .hero-card-left .entry { padding: 13px 34px 13px 16px; }
  .hero-card-left .entry .tag svg { right: 14px; }
  .hero-card-left .card-sub { display: flex; align-items: center; padding: 13px 16px; }
}
@media (max-width: 760px) {
  .hero-card-left { padding: 0; gap: 0; }
  .hero-card-left .entry { padding: 12px 30px 12px 14px; }
  .hero-card-left .entry .tag svg { right: 12px; }
  .hero-card-left .card-sub { padding: 12px 14px; }
}
@media (max-width: 1080px) {
  /* a grid, not flex: flex adds each side's padding on top of the half, which pushed the dividers 8px apart */
  .hero-card-left, .hero-card-right { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); align-items: stretch; }
  .hero-card-left .rule, .hero-card-right .rule { width: 1px; height: auto; }
}
@media (max-width: 380px) {
  /* smallest phones: "San Francisco, CA" needs a little more room in its half */
  .hero-card-left .entry { padding: 12px 26px 12px 12px; }
  .hero-card-left .entry .tag svg { right: 10px; }
  .hero-card .card-title { font-size: 14px; }
  .hero-card-left .card-sub { padding: 12px; }
}
@media (max-width: 1080px) {
  /* the top line of the background shape sat right on the top edge of the word: lift the shape above it */
  .hero-lines { translate: 0 -24px; }
}
/* the background picture element must not become a grid cell in the stacked phone/tablet hero */
.hero > picture { display: contents; }

@media (max-width: 760px) {
  /* menu: one column, Call / Text / Reviews, a gold icon in front of each */
  .menu-links { grid-template-columns: minmax(0, 1fr); }
  .nav .menu-links a:not(.pill):not(.brand) { align-items: center; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--glass-line); }
  .nav .menu-links a:not(.pill):not(.brand):nth-child(n+3) { border-bottom: 1px solid var(--glass-line); }
  .nav .menu-links a:not(.pill):not(.brand):last-child { border-bottom: 0; }
  .menu .mi-ic { width: 19px; height: 19px; flex-shrink: 0; color: var(--gold); stroke-width: 1.6; }
}

/* the header is there from the start: no fade-in on any screen size */
.hero .nav, .ready .hero .nav { opacity: 1; animation: none; }
@media (max-width: 760px) {
  /* phones: the word and stone sit lower, in the dark middle of the background instead of on the bright folds at the top */
  .hero { padding-top: 168px; }
}
@media (max-width: 760px) { .hero-lines { translate: 0 44px; } }   /* keep the shape's top line just above the lowered word */
@media (max-width: 760px) { .hero-bg { translate: 0 -100px; } }   /* the two folds frame the stone evenly; the image's own bottom is page colour, so nothing shows below it */
@media (max-width: 760px) {
  /* everything 30px higher on phones: content, background lines and background together */
  .hero { padding-top: 138px; }
  .hero-lines { translate: 0 14px; }
  .hero-bg { translate: 0 -130px; }
}
@media (max-width: 760px) {
  /* another 40px higher on phones (content, background lines and background together) */
  .hero { padding-top: 98px; }
  .hero-lines { translate: 0 -26px; }
  .hero-bg { translate: 0 -170px; }
}
@media (max-width: 760px) {
  /* back down 10px on phones */
  .hero { padding-top: 108px; }
  .hero-lines { translate: 0 -16px; }
  .hero-bg { translate: 0 -160px; }
}
@media (max-width: 1080px) {
  /* solid card fills (same colour the see-through glass had over the page), so the background lines don't show through */
  .hero-card { background: #161615; }
  .hero-card:hover { background: #191918; }
}
@media (max-width: 760px) { .hero-lines g { opacity: .12; } }   /* phones: background lines a bit brighter (desktop stays .07) */
@media (max-width: 760px) {
  /* the background lines stop at the letters of the see-through word: a solid copy of the word sits just
     under it, covering the lines inside each letter */
  .ghost span { position: relative; }
  .ghost span::before { content: "Moissanite"; position: absolute; inset: 0; z-index: -1; background: none; color: #0B0B0A; -webkit-text-fill-color: #0B0B0A; }
}

/* every screen size: the copy of the word under the see-through word is filled with the hero background picture,
   lined up with the real background by site.js (--occ-*), so the background lines stop at the letters while the
   satin still shows inside them. Page colour is the fallback until it is measured. */
.ghost span { position: relative; }
.ghost span::before { content: "Moissanite"; position: absolute; inset: 0; z-index: -1;
  color: transparent; -webkit-text-fill-color: transparent;
  background: var(--occ-img, none) var(--occ-x, 0) var(--occ-y, 0) / var(--occ-w, auto) var(--occ-h, auto) no-repeat, #0B0B0A;
  -webkit-background-clip: text; background-clip: text; }

/* contact: less crowded. The divider gets room above and below, the number sits on its own, and the line
   under it is two calm lines with only "WATCH" picked out in white (no extra gold) */
.contact .section-head { gap: 18px; }
.contact .ornament { margin: 4px 0 14px; }
.contact .phone { margin-top: 0; }
.contact .lede { margin-top: 4px; line-height: 1.75; }
.lede b { font-weight: 400; color: #fff; letter-spacing: .6px; }
@media (max-width: 760px) {
  .contact .ornament { margin: 2px 0 10px; }
  .contact .lede { font-size: 15px; }
}
@media (max-width: 760px) { .contact .section-head { padding: 0; } }   /* the section already has side padding: the doubled padding broke "reach me." onto its own line */

/* hero buttons: Text (main, white) and Watch Reviews (secondary, outline) side by side */
.hero-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-btns .pill-line { background: rgba(11, 11, 10, .35); }
.hero-btns .pill-line:hover { border-color: var(--gold); background: rgba(209, 175, 55, .06); }
.hero-btns .pill-line svg.play { width: 16px; height: 16px; stroke-width: 1.7; color: var(--gold); }
@media (max-width: 1080px) {
  .hero-copy .pill { order: 0; margin-top: 0; }
  .hero-copy .hero-btns { order: 3; margin-top: 10px; }        /* headline and line first, then the buttons */
}
@media (max-width: 760px) {
  .hero-btns { gap: 10px; flex-wrap: nowrap; }
  .hero-btns .pill { min-height: 48px; padding: 0 16px; font-size: 13px; gap: 7px; }
  .hero-btns .pill svg { width: 13px; height: 13px; }
  .hero-btns .pill-line svg.play { width: 15px; height: 15px; }
}
@media (max-width: 370px) {
  .hero-btns .pill { padding: 0 13px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  /* phone: the two buttons share the content width exactly, lining up with the cards below */
  .hero-copy .hero-btns { width: 100%; }
  .hero-btns .pill { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 13px; }
}
@media (max-width: 760px) {
  /* phone: no room for two buttons, so only the Text button, at its full original size */
  .hero-btns .pill-line { display: none; }
  .hero-copy .hero-btns { width: auto; }
  .hero-btns .pill { flex: none; min-height: 50px; padding: 0 28px; font-size: 14px; gap: 9px; }
  .hero-btns .pill svg { width: 14px; height: 14px; }
}
@media (min-width: 761px) { #reviews { scroll-margin-top: -150px; } }   /* links to the reviews land 150px further down, on the videos */
.hero-copy p b { font-weight: 400; color: #fff; letter-spacing: .6px; }   /* same treatment as "WATCH" in the contact line */
@media (max-width: 1240px) and (min-width: 1081px) { .hero-card { width: 236px; } }   /* "Orange County, CA" needs the room */
.contact .lede-top { margin: -2px 0 -6px; }   /* sits right above the number, as its label */
/* Google Material chat icon (same as "Contact Me") wherever a Text button has an icon: a filled shape, not a stroke */
svg.ms { fill: currentColor; stroke: none; }
.pill svg.ms { width: 17px; height: 17px; }
.menu svg.mi-ic.ms { width: 20px; height: 20px; }

/* trust strip: the four ways James sells, in one bar built like the hero cards (solid fill, thin outline,
   full-height dividers). One row of four on desktop, a 2 x 2 grid on phones, so it stays symmetrical */
.trust { position: relative; z-index: 3; padding: 28px 48px 0; }
.trust-row { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #161615; border: 1px solid var(--glass-line); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, .28); }
.trust-row li { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 16px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.trust-row li + li { border-left: 1px solid var(--glass-line); }
.trust-row svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--gold); stroke-width: 1.5; }
.reviews { padding-top: 96px; }
@media (max-width: 1100px) {
  .trust-row li { font-size: 12px; letter-spacing: 1.2px; gap: 10px; padding: 18px 10px; }
  .trust-row svg { width: 20px; height: 20px; }
}
@media (max-width: 1080px) {
  .trust { padding: 0 24px; margin-top: -24px; }
  .trust-row { max-width: 460px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-row li { justify-content: flex-start; padding: 15px 14px; }
  .trust-row li:nth-child(3) { border-left: 0; }
  .trust-row li:nth-child(n+3) { border-top: 1px solid var(--glass-line); }
  .reviews { padding-top: 72px; }
}
@media (max-width: 760px) {
  .trust { padding: 0 20px; margin-top: -36px; }
  .trust-row li { font-size: 10.5px; letter-spacing: 1px; gap: 8px; padding: 14px 10px; white-space: normal; line-height: 1.35; }
  .trust-row svg { width: 18px; height: 18px; }
}
@media (max-width: 1080px) and (min-width: 761px) { .trust { margin-top: -50px; } }   /* tablet: same 10px step as between the cards */
@media (max-width: 1080px) and (min-width: 761px) {
  /* tablet: the cards and the strip use more of the width (640 instead of 460), so the side margins aren't so wide */
  .hero-card { width: min(640px, 100%); }
  .trust-row { max-width: 640px; }
}
@media (max-width: 1080px) { .hero-card-right { display: none; } }   /* tablet and phone: Instagram/TikTok live in the contact section and footer */

/* how it works, in the site's own language: each step is a cut-stone diamond holding a gold icon, linked by a gold
   line that draws across when the section appears, with a huge fading ghost numeral behind it (like the giant
   "MOISSANITE" behind the stone). No boxes. */
.how { position: relative; z-index: 3; padding: 0 48px 120px; }
.how-steps { position: relative; list-style: none; margin: 72px auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.how-steps::before { content: ""; position: absolute; z-index: 0; top: 32px; left: calc((100% - 96px) / 8); right: calc((100% - 96px) / 8); height: 1px;
  background: linear-gradient(90deg, rgba(209, 175, 55, .15), rgba(209, 175, 55, .5) 20%, rgba(209, 175, 55, .5) 80%, rgba(209, 175, 55, .15));
  transform-origin: 50% 50%; scale: 0 1; }
.how.in .how-steps::before { animation: howLine 1.6s .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes howLine { from { scale: 0 1; } to { scale: 1 1; } }
.how-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.how-ghost { position: absolute; z-index: -1; top: 30px; left: 50%; translate: -50% 0; pointer-events: none; user-select: none;
  font: 700 150px/1 var(--serif); letter-spacing: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0) 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.how-gem { position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: var(--gold); transition: scale .4s var(--ease); }
.how-gem::before, .how-gem::after { content: ""; position: absolute; rotate: 45deg; transition: border-color .3s, box-shadow .3s; }
.how-gem::before { inset: 10px; background: var(--bg); border: 1px solid rgba(209, 175, 55, .65); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }   /* cuts the line */
.how-gem::after { inset: 15px; border: 1px solid rgba(209, 175, 55, .2); }                                                                      /* inner facet */
.how-gem svg { position: relative; z-index: 1; width: 20px; height: 20px; stroke-width: 1.5; }
.how-gem svg.ms { width: 20px; height: 20px; }
.how-steps li:hover .how-gem { scale: 1.08; }
.how-steps li:hover .how-gem::before { border-color: var(--gold); box-shadow: 0 0 16px rgba(209, 175, 55, .16), 0 4px 14px rgba(0, 0, 0, .45); }
.how-k { margin-top: 26px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.how-steps h3 { margin: 10px 0 0; font: 400 25px/1.2 var(--serif); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.how-steps p { margin: 10px 0 0; max-width: 240px; font: 300 14px/1.7 var(--light); letter-spacing: .2px; color: var(--mute); }
.how-steps p a { color: var(--soft); border-bottom: 1px solid rgba(209, 175, 55, .45); transition: color .2s, border-color .2s; }
.how-steps p a:hover { color: #fff; border-color: var(--gold); }
@media (max-width: 1080px) {
  .how { padding: 0 32px 96px; }
  .how-steps { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 32px; margin-top: 56px; }
  .how-steps::before { display: none; }
  .how-ghost { font-size: 130px; }
}
@media (max-width: 760px) {
  /* phone: a vertical chain. Diamonds down the left joined by the gold line, text to the right, ghost numeral behind it */
  .how { padding: 0 20px 76px; }
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 44px; max-width: 420px; }
  .how-steps::before { display: block; top: 30px; bottom: 30px; left: 30px; right: auto; width: 1px; height: auto; transform-origin: 50% 0; scale: 1 0;
    background: linear-gradient(180deg, rgba(209, 175, 55, .5), rgba(209, 175, 55, .5) 85%, rgba(209, 175, 55, .15)); }
  @keyframes howLineV { from { scale: 1 0; } to { scale: 1 1; } }
  .how.in .how-steps::before { animation-name: howLineV; }
  .how-steps li { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; padding: 0; }
  .how-gem { grid-row: 1 / span 3; width: 60px; height: 60px; }
  .how-gem::before { inset: 9px; } .how-gem::after { inset: 14px; }
  .how-ghost { top: -18px; left: auto; right: 0; translate: none; font-size: 92px; }
  .how-k { margin-top: 6px; font-size: 10px; letter-spacing: 2.6px; }
  .how-steps h3 { margin-top: 6px; font-size: 21px; }
  .how-steps p { margin-top: 6px; max-width: none; }
}

/* tablet: hero cards, trust strip and steps all as wide as the Instagram/TikTok cards (760) */
@media (max-width: 1080px) and (min-width: 761px) {
  .hero-card { width: min(760px, 100%); }
  .trust-row { max-width: 760px; }
}
/* gold section separators: inset from the page edges (not edge to edge), one above How It Works and one above Contact */
.contact { border-top: 0; }
.how, .contact { position: relative; }
.how::before, .contact::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, calc(100% - 96px)); height: 1px; translate: -50% 0; background: rgba(209, 175, 55, .22); }
.how { padding-top: 104px; }
.reviews { padding-bottom: 104px; }
@media (max-width: 1080px) {
  .how { padding-top: 84px; }
  .reviews { padding-bottom: 84px; }
  .how::before, .contact::before { width: min(640px, calc(100% - 64px)); }
}
@media (max-width: 760px) {
  .how { padding-top: 64px; }
  .reviews { padding-bottom: 64px; }
  .how::before, .contact::before { width: calc(100% - 40px); }
}
/* separators shorter than the content: a centred accent, not a full rule */
.how::before, .contact::before { width: min(560px, 55%); }
@media (max-width: 1080px) { .how::before, .contact::before { width: min(400px, 55%); } }
@media (max-width: 760px) { .how::before, .contact::before { width: 55%; } }

/* desktop: the hero AND the trust strip under it fit the first screen. The hero leaves 112px at the bottom of the
   window for the strip (28 gap + 64 strip + 20 air), and the stone scales with that shorter hero */
@media (min-width: 1081px) {
  .hero { --hh: clamp(600px, calc(100svh - 112px), 920px); height: var(--hh); --sw: min(780px, 58vw, calc(var(--hh) - 150px)); }
}

/* detailed section separators: the gold line fades out to both ends and breaks in the middle for a small
   jewel motif (diamond outline, filled centre, a dot either side), so it belongs with the ornaments */
.how::before, .contact::before {
  background: linear-gradient(90deg, rgba(209, 175, 55, 0) 0%, rgba(209, 175, 55, .5) 34%, rgba(209, 175, 55, .55) 43%, rgba(209, 175, 55, 0) 45.5%,
                                     rgba(209, 175, 55, 0) 54.5%, rgba(209, 175, 55, .55) 57%, rgba(209, 175, 55, .5) 66%, rgba(209, 175, 55, 0) 100%);
}
.how::after, .contact::after { content: ""; position: absolute; top: -7px; left: 50%; width: 64px; height: 15px; translate: -50% 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 15'%3E%3Cpath d='M32 1.5 38 7.5 32 13.5 26 7.5Z' fill='none' stroke='%23D1AF37' stroke-width='1.1'/%3E%3Cpath d='M32 4.8 34.7 7.5 32 10.2 29.3 7.5Z' fill='%23D1AF37'/%3E%3Ccircle cx='20.5' cy='7.5' r='1.35' fill='%23D1AF37'/%3E%3Ccircle cx='43.5' cy='7.5' r='1.35' fill='%23D1AF37'/%3E%3C/svg%3E") center / 64px 15px no-repeat; }
@media (max-width: 760px) {
  .how::before, .contact::before { width: 70%; }
  .how::after, .contact::after { width: 54px; height: 13px; top: -6px; background-size: 54px 13px; }
}
/* richer jewel: centre diamond (outline + filled core), small solid diamonds either side, then a dot, then a short tapering dash */
.how::after, .contact::after { width: 132px; height: 20px; top: -9.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 20'%3E%3Cg fill='%23D1AF37'%3E%3Cpath d='M66 2.2 73.8 10 66 17.8 58.2 10Z' fill='none' stroke='%23D1AF37' stroke-width='1.1'/%3E%3Cpath d='M66 6.2 69.8 10 66 13.8 62.2 10Z'/%3E%3Cpath d='M48 7 51 10 48 13 45 10Z'/%3E%3Cpath d='M84 7 87 10 84 13 81 10Z'/%3E%3Ccircle cx='37' cy='10' r='1.3'/%3E%3Ccircle cx='95' cy='10' r='1.3'/%3E%3Cpath d='M30 9.6h-24l-6 .4 6 .4h24Z' opacity='.7'/%3E%3Cpath d='M102 9.6h24l6 .4-6 .4h-24Z' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 20px; }
.how::before, .contact::before {
  background: linear-gradient(90deg, rgba(209, 175, 55, 0) 0%, rgba(209, 175, 55, .5) 30%, rgba(209, 175, 55, .55) 36%, rgba(209, 175, 55, 0) 38.5%,
                                     rgba(209, 175, 55, 0) 61.5%, rgba(209, 175, 55, .55) 64%, rgba(209, 175, 55, .5) 70%, rgba(209, 175, 55, 0) 100%);
}
@media (max-width: 760px) {
  .how::after, .contact::after { width: 112px; height: 17px; top: -8px; background-size: 112px 17px; }
  .how::before, .contact::before { width: 78%; }
}
/* one continuous line either side: the gap is measured in pixels from the centre (matches the jewel at any width),
   and the jewel has no dashes of its own */
.how::after, .contact::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 20'%3E%3Cg fill='%23D1AF37'%3E%3Cpath d='M66 2.2 73.8 10 66 17.8 58.2 10Z' fill='none' stroke='%23D1AF37' stroke-width='1.1'/%3E%3Cpath d='M66 6.2 69.8 10 66 13.8 62.2 10Z'/%3E%3Cpath d='M48 7 51 10 48 13 45 10Z'/%3E%3Cpath d='M84 7 87 10 84 13 81 10Z'/%3E%3Ccircle cx='37' cy='10' r='1.3'/%3E%3Ccircle cx='95' cy='10' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); }
.how::before, .contact::before {
  background: linear-gradient(90deg, rgba(209, 175, 55, 0) 0%, rgba(209, 175, 55, .5) 28%, rgba(209, 175, 55, .6) calc(50% - 40px), rgba(209, 175, 55, 0) calc(50% - 35px),
                                     rgba(209, 175, 55, 0) calc(50% + 35px), rgba(209, 175, 55, .6) calc(50% + 40px), rgba(209, 175, 55, .5) 72%, rgba(209, 175, 55, 0) 100%);
}
@media (max-width: 760px) {
  .how::before, .contact::before {
    background: linear-gradient(90deg, rgba(209, 175, 55, 0) 0%, rgba(209, 175, 55, .5) 24%, rgba(209, 175, 55, .6) calc(50% - 34px), rgba(209, 175, 55, 0) calc(50% - 30px),
                                       rgba(209, 175, 55, 0) calc(50% + 30px), rgba(209, 175, 55, .6) calc(50% + 34px), rgba(209, 175, 55, .5) 76%, rgba(209, 175, 55, 0) 100%);
  }
}
/* ghost numeral sits behind the diamond (like MOISSANITE behind the stone), clear of the text */
@media (min-width: 761px) {
  .how-steps { margin-top: 96px; }
  .how-ghost { top: -58px; font-size: 140px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 88%);
    -webkit-background-clip: text; background-clip: text; }
}
@media (max-width: 1080px) and (min-width: 761px) { .how-steps { margin-top: 84px; row-gap: 96px; } .how-ghost { font-size: 124px; top: -50px; } }
/* the linking line draws last: after the heading, divider and all four steps have come in */
.how.in .how-steps::before { animation-duration: 1.2s; animation-delay: 1.45s; }
.how.in .how-steps::before { animation-delay: 1.7s; }   /* steps land at 0.42-0.72s + 1.1s reveal, so the line follows the last one */
/* ghost numerals a little clearer: less fade toward the bottom */
.how-ghost, .how-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .11) 55%, rgba(255, 255, 255, .02) 96%);
  -webkit-background-clip: text; background-clip: text; }
/* in between: a clear fade again, just slightly gentler than the original */
.how-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, 0) 90%);
  -webkit-background-clip: text; background-clip: text; }
/* clear at the top, fully invisible by the bottom edge of the digits (they end around 78% of the line box) */
.how-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 42%, rgba(255, 255, 255, 0) 76%);
  -webkit-background-clip: text; background-clip: text; }
/* back to the version Chris liked */
.how-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, 0) 90%);
  -webkit-background-clip: text; background-clip: text; }

/* contact on desktop: wide, two columns across the same 1100px as the steps. Left: the message, the number (bigger)
   and the buttons, left-aligned. Right: Instagram, TikTok and location cards stacked */
.social-loc { cursor: default; }
.social-loc:hover { transform: none; border-color: var(--glass-line); background: var(--glass); }
.social-loc:hover::before { opacity: 0; }
.social-loc:hover .social-handle { color: inherit; }
@media (min-width: 1081px) {
  .contact { padding: 128px 48px 136px; }
  .contact-wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 88px; align-items: center; }
  .contact .contact-main { max-width: none; margin: 0; padding: 0; align-items: flex-start; text-align: left; gap: 18px; }
  .contact-main h2 { font-size: 66px; }
  .contact-main .ornament { margin: 2px 0 12px; }
  .contact-main .lede-top { margin: 0; max-width: none; }
  .contact-main .phone { font-size: 78px; letter-spacing: -1.4px; margin: 2px 0 4px; }
  .contact-main .btn-row { justify-content: flex-start; margin-top: 8px; }
  .contact .social-cards { max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact .social { padding: 24px 26px; }
  .contact .social-handle { font-size: 26px; }
}
@media (max-width: 1080px) { .social-loc { display: none; } }   /* tablet and phone keep the centred stack; the hero already shows the location */
/* number first, then the two lines under it */
.contact .lede-top { margin: -4px 0 0; }
.contact .phone { margin-top: 0; }
@media (min-width: 1081px) { .contact-main .phone { margin: 0; } .contact-main .lede-top { margin: -4px 0 6px; } }

/* video cards come in from the centre outwards: the strip itself does not animate, each card does, delayed by its
   distance from the centre (--rd, set in site.js) on top of the strip's place in the section (--d).
   Only a "from" frame, so each card settles on its own dimmed / highlighted look afterwards */
[data-group].in #rv[data-reveal] { animation: none; }
.ready [data-group]:not(.in) .rv-card { opacity: 0; }
[data-group].in .rv-card { animation: rvIn 1.1s var(--ease) backwards; animation-delay: calc(var(--d, 0s) + var(--rd, 0s)); }
@keyframes rvIn { from { opacity: 0; translate: 0 34px; filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { [data-group].in .rv-card { animation: none; } }
.rv.entered .rv-card { animation: none !important; }   /* entrance done: moved cards never replay it */

/* large blocks fade + rise without the blur (animating blur on big areas is what stalls Firefox); text keeps it */
@keyframes revealSoft { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
[data-group].in .trust-row[data-reveal], [data-group].in .how-steps li[data-reveal], [data-group].in .social[data-reveal] { animation-name: revealSoft; }
@keyframes rvIn { from { opacity: 0; translate: 0 34px; } }