/* AURUM, a Premium Design concept (concepts/premium-aurum.html). A blue hour over still water,
   platinum white and one emerald accent; Inter Tight for display, Inter for reading (both
   self-hosted, OFL). Layers: the world (-1, world.js) under the giant words (1), under the 3D stage
   (2), every other word above it (3), so the diamond passes in front of the giant type and never
   over the copy, and the giant word stands on the world's horizon. */
@font-face { font-family: 'Inter Tight'; src: url(../fonts/inter-tight-latin-wght.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../fonts/inter-latin-wght.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #04050e;
  --ink: #eceef1;
  --ink2: #c4c8ce;
  --muted: #8b9199;
  --line: rgba(236, 238, 241, .12);
  --line2: rgba(236, 238, 241, .24);
  --em: #2fd49a;
  --em-ink: #03140d;
  --head: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gut: 60px;
  --max: 1320px;
  --nav: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); }
html, body { margin: 0; }
/* The body has no background of its own, so the world (behind everything, z -1) shows through. */
body { color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--em); outline-offset: 4px; border-radius: 4px; }
.wrap { width: min(var(--max), calc(100% - 2 * var(--gut))); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3, .giant, .said, .fact b, .note.num b { font-family: var(--head); text-wrap: balance; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.eyebrow.dim { color: var(--muted); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--em); box-shadow: 0 0 14px 2px rgba(47, 212, 154, .45); flex: none; }
.lead { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 34em; }
.nw { white-space: nowrap; }
/* No paragraph ends on a word or two alone. */
p { text-wrap: pretty; }
.visit .lead, .note p { text-wrap: balance; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: transform .5s var(--ease), background .3s, box-shadow .3s, color .3s; }
.btn.sm { height: 42px; padding: 0 20px; font-size: 13.5px; }
.btn.pri { background: var(--em); color: var(--em-ink); box-shadow: 0 10px 40px -12px rgba(47, 212, 154, .55); }
.btn.pri:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(47, 212, 154, .7); }
.btn.ghost { box-shadow: inset 0 0 0 1px var(--line2); color: var(--ink); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn svg { width: 20px; height: 20px; flex: none; }
.link { position: relative; font-size: 15px; font-weight: 500; color: var(--ink2); padding: 6px 0; white-space: nowrap; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(.35); transition: transform .5s var(--ease); }
.link:hover::after { transform-origin: left; transform: scaleX(1); }

/* ---------- navigation ---------- */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 20; overflow-x: clip; }
/* Scrolled, the bar is frosted: its tint and blur on a layer of their own that fades in. One fixed blur,
   so the browser makes it once, before the first scroll turns it on (::before below); a blur that grew
   would need a new one for every radius it passed, made at the first scroll, which then stopped a moment. */
.nav-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(5, 5, 6, .62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity .4s; }
.nav-wrap.scrolled::after { opacity: 1; }
.nav-wrap.scrolled { box-shadow: 0 1px 0 var(--line); }
/* the same frosting once, unseen (1% strong, for a moment), so the browser has made it before the first
   scroll: once the 3D's programs are on their way (frost-ready, set by scene.js), or at
   once without the 3D (aurum.js); not in the 3D's first moments, when the GPU is busiest and the page
   would stop to wait for it */
.nav-wrap::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .01; pointer-events: none; }
.nav-wrap.frost-ready::before { animation: frost-ready .4s .25s; }
@keyframes frost-ready { from, to { background: rgba(5, 5, 6, .62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } }
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-family: var(--head); font-size: 15px; font-weight: 600; letter-spacing: .38em; white-space: nowrap; }
.brand .nm { margin-right: -.38em; }
.brand .mk { width: 22px; height: 22px; flex: none; background: url(img/mark.webp) center / contain no-repeat; }
/* A long business name (the previews show the visitor's own) steps down and may take two lines. */
.brand.long { gap: 10px; font-size: 12.5px; letter-spacing: .1em; line-height: 1.2; white-space: normal; }
.brand.long .nm { margin-right: 0; }
.links { display: flex; gap: 38px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.links a { transition: color .3s; }
.links a:hover { color: var(--ink); }
.menu-i { display: none; width: 44px; height: 44px; flex: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; }
.menu-i i { display: block; height: 1.5px; width: 24px; background: currentColor; transition: transform .4s var(--ease), width .4s var(--ease); }
.menu-i i + i { width: 16px; }
.menu-i[aria-expanded='true'] i { width: 22px; transform: translateY(4.25px) rotate(45deg); }
.menu-i[aria-expanded='true'] i + i { transform: translateY(-4.25px) rotate(-45deg); }
.menu { position: fixed; inset: var(--nav) 0 0; z-index: 19; display: flex; flex-direction: column; gap: 6px; padding: 28px 20px 40px; background: var(--bg); }
.menu[hidden] { display: none; }
.menu a:not(.btn) { font-family: var(--head); font-size: 34px; font-weight: 500; letter-spacing: -.02em; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu .btn { margin-top: 28px; }

/* ---------- the world, the 3D stage and the still pictures they replace ---------- */
.world { position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
html.world-on .world { opacity: 1; }
.stage { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); }
html.gl-on .stage { opacity: 1; }
.gem-spot { position: relative; z-index: 2; aspect-ratio: 1; }
.gem-spot img { width: 100%; height: 100%; object-fit: contain; transition: opacity .8s var(--ease); }
html.gl-on .gem-spot img, html.gl-on .ring-view img { opacity: 0; }
/* The world's still pictures (world.js FRAMES, drawn by its own shader): frames larger than any screen,
   placed by the horizon and sized by the ring, so they line up at any size. The first screen's horizon is
   the giant word's baseline (.752 of its size below the top of its row); the visit's is under its spot.
   Their edges fade into the night. */
.world-still { position: absolute; z-index: -1; left: 50%; max-width: none; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent); transition: opacity 1.2s var(--ease); }
html.world-on .world-still { opacity: 0; }
html.world-on .visit .world-still { display: none; }
.hero .giant-wrap { --fs: 24.6vw; --rr: calc(min(37vw, 52vh, 540px) * .66); }
.hero .world-still { top: calc(var(--fs) * .752); width: calc(var(--rr) * 2600 / 309); transform: translate(-50%, -54.2857%); }
.visit .gem-spot .world-still { top: 50%; width: calc(100% * 2600 / 300); height: auto; object-fit: fill; transform: translate(-50%, -43.0769%); }
/* The opening (opening.js; aurum.js plays it): the page's head sets html.intro when motion is fine, so from
   the first paint the first screen is the night: the stone and AURUM still under the water, the words not
   there yet. If the opening never plays (no world, or too late), everything arrives by itself. */
html.intro .hero .world-still { filter: brightness(.07); }
html.intro :is(.hero .gem-spot img, .hero .giant, .hero-meta, .hero-copy, .hero-cta, .scroll-cue) { opacity: 0; }
html.intro:not(.intro-on) .hero .world-still { animation: aurum-lit 1.2s var(--ease) 3.4s forwards; }
html.intro:not(.intro-on) :is(.hero .gem-spot img, .hero .giant, .hero-meta, .hero-copy, .hero-cta, .scroll-cue) { animation: aurum-arrive 1s var(--ease) 3.4s forwards; }
html.intro.intro-stone .hero .gem-spot img { opacity: 1; transition: opacity .8s var(--ease); }
@keyframes aurum-arrive { to { opacity: 1; } }
@keyframes aurum-lit { to { filter: none; } }
/* BRILLIANT's halo, drawn by the world on the page; a ring of light here for the still page. */
.brilliant .gem-spot::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px rgba(236, 240, 255, .85), 0 0 16px 2px rgba(140, 150, 255, .5), 0 0 80px 14px rgba(70, 76, 210, .2), inset 0 0 16px 2px rgba(140, 150, 255, .35); transition: opacity 1.2s var(--ease); }
html.world-on .brilliant .gem-spot::before { opacity: 0; }

/* ---------- giant words ---------- */
.giant-wrap { position: relative; z-index: 1; width: min(var(--max), calc(100% - 2 * var(--gut))); margin-inline: auto; text-align: center; pointer-events: none; }
/* The padding gives the gradient room for tall letters and descenders (a "y" in another name); the
   negative margin keeps the word's place as if it were not there. */
.giant { display: inline-block; font-weight: 600; line-height: .78; letter-spacing: -.045em; white-space: nowrap; padding: .08em .045em .22em 0; margin: -.08em 0 -.22em; }
.giant.solid { font-size: 24.6vw; background: linear-gradient(180deg, #f7f8fa 0%, #e2e5e9 40%, #8e949c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.giant.outline { font-size: 14.2vw; font-weight: 700; color: transparent; -webkit-text-stroke: 1.4px rgba(236, 238, 241, .5); letter-spacing: -.03em; }

/* ---------- hero ---------- */
.hero { position: relative; overflow-x: clip; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100vh; min-height: 100svh; padding-top: var(--nav); }
.hero-meta { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; }
.hero .giant-wrap { grid-row: 2; grid-column: 1; align-self: center; margin-top: -1.5vh; }
.hero .gem-spot { grid-row: 2; grid-column: 1; align-self: center; justify-self: center; width: min(37vw, 52vh, 540px); }
.hero.long-word .giant-wrap { align-self: end; margin-bottom: 4vh; }
.hero-foot { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 8px 0 54px; }
.hero h1 { font-size: clamp(26px, 2.35vw, 36px); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; max-width: 15em; }
.hero .lead { margin-top: 14px; font-size: 16px; max-width: 27em; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex: none; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-right: -.3em; }
.scroll-cue i { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: var(--line); }
.scroll-cue i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--ink); transform: translateY(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---------- statement ---------- */
.statement { position: relative; padding: 84px 0 70px; }
.statement-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 60px; }
.statement-copy { position: relative; z-index: 3; }
.said { margin-top: 30px; font-size: clamp(30px, 3.25vw, 50px); font-weight: 450; line-height: 1.16; letter-spacing: -.022em; color: var(--ink); }
html.js .said .w { opacity: .2; transition: opacity .5s var(--ease); }
html.js .said .w.on { opacity: 1; }
.statement .gem-spot { width: min(100%, 400px); justify-self: center; }
.facts { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--line); }
.fact { padding: 34px 32px 0 0; }
.fact + .fact { padding-left: 32px; border-left: 1px solid var(--line); }
.fact b { display: block; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.fact span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; max-width: 19em; }

/* ---------- collections ---------- */
.collections { position: relative; padding: 100px 0 40px; }
.coll-head { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.coll-head h2 { margin-top: 22px; font-size: clamp(44px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.coll-head p { color: var(--muted); font-size: 16px; max-width: 22em; padding-bottom: 6px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { position: relative; z-index: 1; }
/* Each ring stands in the page's world: a night sky, the light on a horizon, still water. */
.ring-view { --hz: 71%; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: radial-gradient(64% 20% at 50% var(--hz), rgba(122, 132, 255, .34), transparent 72%), radial-gradient(90% 46% at 50% 100%, rgba(30, 34, 96, .55), transparent 70%), linear-gradient(180deg, #05060f 0%, #0a0c26 42%, #171b4f calc(var(--hz) - .5%), #090b22 calc(var(--hz) + .5%), #04050c 100%); box-shadow: inset 0 0 0 1px rgba(236, 238, 241, .09); transition: box-shadow .6s var(--ease); }
.ring-view::before { content: ''; position: absolute; left: 0; right: 0; top: var(--hz); height: 1px; background: linear-gradient(90deg, transparent, rgba(220, 226, 255, .9) 28%, rgba(240, 243, 255, 1) 50%, rgba(220, 226, 255, .9) 72%, transparent); box-shadow: 0 0 14px 1px rgba(132, 142, 255, .6); }
.ring-view img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.card:hover .ring-view { box-shadow: inset 0 0 0 1px rgba(236, 238, 241, .2); }
.card-meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding: 22px 2px 0; }
.card-meta h3 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.card-meta p { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-size: 15px; }
.price { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 500; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- the outlined word ---------- */
.brilliant { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; min-height: 100vh; min-height: 100svh; padding: 100px 0; overflow: clip; }
.brilliant .giant-wrap { grid-row: 1; grid-column: 1; }
/* (On a layer of its own, so its drift with scrolling moves it without painting the outlined letters again.) */
.brilliant .giant { transform: translateX(calc(var(--drift, 0) * 1%)); will-change: transform; }
.brilliant .gem-spot { grid-row: 1; grid-column: 1; justify-self: center; width: min(38vw, 56vh, 560px); }
.brill-notes { position: absolute; inset: 100px 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; left: 0; right: 0; }
.note { max-width: 330px; }
.note p { margin-top: 16px; color: var(--ink2); font-size: 16px; }
.note.num { align-self: flex-end; text-align: right; }
.note.num b { display: block; font-size: clamp(64px, 7vw, 112px); font-weight: 300; line-height: .9; letter-spacing: -.04em; }
.note.num span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }

/* ---------- bespoke: pinned while the four steps play ---------- */
/* (Clipped at its end, so nothing of a story taller than a short screen spills into the last screen; clip, not
   hidden, keeps the pinning.) */
.bespoke { position: relative; height: 290vh; overflow: clip; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: var(--nav); }
.bespoke-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 40px; }
.bespoke-copy { position: relative; z-index: 3; }
.bespoke h2 { margin: 22px 0 38px; font-size: clamp(38px, 3.9vw, 58px); font-weight: 500; line-height: 1.02; letter-spacing: -.032em; max-width: 11em; }
.steps { display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); opacity: .34; transition: opacity .6s var(--ease); }
.step .n { font-family: var(--head); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--muted); padding-top: 4px; transition: color .6s; }
.step h3 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.step p { margin-top: 6px; color: var(--muted); font-size: 15px; max-width: 30em; }
.step.on { opacity: 1; }
.step.on .n { color: var(--em); }
.progress { height: 1px; margin-top: 4px; background: var(--line); }
.progress i { display: block; height: 100%; background: var(--em); transform-origin: left; transform: scaleX(var(--p, 0)); }
.bespoke .gem-spot { justify-self: center; width: min(100%, 64vh, 600px); }

/* ---------- visit: the last screen, the page ends on its scene ---------- */
/* The ring over the water in its ring of light, the words under it, the visit's details small under them and
   the footer at the very bottom, all on one screen, the last, over the world's water: the footer is taken out
   of the flow into this screen's foot (aurum.js keeps its height in --foot). The page's links to #visit land
   on the whole screen. */
body { position: relative; }
.visit { position: relative; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav) + 2vh) 0 calc(var(--foot, 72px) + 3vh); padding: calc(var(--nav) + 2svh) 0 calc(var(--foot, 72px) + 3svh); scroll-margin-top: calc(-1 * var(--nav)); }
.visit-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.visit .gem-spot { width: min(300px, 62vw, 25vh); width: min(300px, 62vw, 25svh); margin-bottom: 10px; }
.visit h2 { position: relative; z-index: 3; font-size: clamp(46px, 7.4vw, 112px); font-size: clamp(46px, min(7.4vw, 11.5svh), 112px); font-weight: 500; line-height: .98; letter-spacing: -.04em; max-width: 9em; }
.visit .lead { position: relative; z-index: 3; margin-top: clamp(12px, 2.2svh, 26px); text-align: center; }
.visit-cta { position: relative; z-index: 3; display: flex; gap: 14px; margin-top: clamp(16px, 3svh, 36px); }
.visit-info { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: clamp(20px, 4svh, 48px); text-align: left; }
.visit-info div { padding: 0 24px; }
.visit-info div + div { border-left: 1px solid var(--line); }
.visit-info span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.visit-info b { display: block; margin-top: 6px; font-family: var(--head); font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; }

/* ---------- footer: small, at the very bottom of the last screen ---------- */
.foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 0 20px; font-size: 13px; color: var(--muted); }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.foot .brand { color: var(--ink); max-width: 100%; white-space: normal; line-height: 1.3; }
.fl { display: flex; gap: 24px; }
.fl a:hover { color: var(--ink); }

/* ---------- arriving as you scroll ---------- */
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }

/* ---------- smaller computers and tablets ---------- */
@media (max-width: 1100px) {
  :root { --gut: 40px; }
  .links { gap: 26px; }
  .statement-grid { gap: 30px; }
  .cards { gap: 16px; }
  .bespoke-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .links { display: none; }
  .menu-i { display: flex; }
  .top .btn { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 26px; }
  .statement-grid { grid-template-columns: 1fr; }
  /* One column: the stone would have to fly across the words to reach the statement, so here the
     statement has none; the stone leaves with the first screen and comes back at BRILLIANT. */
  .statement .gem-spot { display: none; }
  .cards { grid-template-columns: 1fr; gap: 40px; }
  .ring-view { aspect-ratio: 5 / 4; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact + .fact { padding: 24px 0; border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--line); }
  /* The visit's details in one column: a short line each, its label beside it. */
  .visit-info { flex-direction: column; align-items: center; gap: 6px; }
  .visit-info div, .visit-info div + div { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; }
  .visit-info span { font-size: 10.5px; }
  .visit-info b { margin-top: 0; font-size: 14px; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  :root { --gut: 20px; --nav: 64px; }
  .brand { font-size: 14px; letter-spacing: .34em; }
  .brand .nm { margin-right: -.34em; }
  .hero-meta .eyebrow.dim { display: none; }
  /* On a phone the stone rests on the word instead of hiding its middle, so AURUM stays readable:
     the stone at the top of its row, the word under its lowest point, the pair centred in the screen. */
  .hero { --gs: min(88vw, 47svh); grid-template-rows: auto auto auto; align-content: space-between; }
  .hero .gem-spot { width: var(--gs); align-self: start; }
  .hero .giant-wrap { align-self: start; margin-top: calc(var(--gs) * .76 - var(--wh, 82px) / 2); --rr: calc(var(--gs) * .56); }
  .hero.long-word .giant-wrap { align-self: start; margin: calc(var(--gs) * .84) 0 0; }
  .hero .world-still { width: calc(var(--rr) * 1000 / 192); transform: translate(-50%, -54.6667%); }
  .visit .gem-spot .world-still { width: calc(100% * 1000 / 242); transform: translate(-50%, -40%); }
  .brilliant .gem-spot::before { width: 100%; }
  .hero-foot { padding-bottom: 34px; gap: 22px; }
  .hero h1 { font-size: 27px; }
  .hero .lead { font-size: 15.5px; margin-top: 10px; }
  .hero-cta { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-cta .link { align-self: center; }
  .hero-cta .link::after { transform-origin: center; }
  .scroll-cue { display: none; }
  .statement { padding: 60px 0 36px; }
  .said { margin-top: 22px; font-size: 27px; line-height: 1.22; }
  .facts { margin-top: 64px; }
  .fact b { font-size: 28px; }
  .collections { padding: 64px 0 20px; }
  .coll-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 36px; }
  .coll-head h2 { font-size: 44px; }
  .ring-view { aspect-ratio: 1; }
  .card-meta h3 { font-size: 22px; }
  /* The same on a phone for BRILLIANT: the stone above, the word under its point. */
  .brilliant { --gs: min(80vw, 360px); padding: 64px 0 56px; min-height: 0; grid-template-rows: auto auto auto; }
  .brill-notes { position: static; display: contents; }
  .brilliant .note:first-child { grid-row: 1; padding: 0 var(--gut); max-width: none; margin-bottom: 4px; }
  .brilliant .giant-wrap, .brilliant .gem-spot { grid-row: 2; align-self: start; }
  .brilliant .gem-spot { width: var(--gs); }
  .brilliant .giant-wrap { margin-top: calc(var(--gs) * .66); }
  .brilliant .note.num { grid-row: 3; align-self: auto; justify-self: end; padding: 6px var(--gut) 0; }
  .note.num b { font-size: 72px; }
  .visit .gem-spot { width: min(54vw, 28vh); width: min(54vw, 28svh); }
  .visit-cta { width: 100%; }
  .visit-cta .btn { width: 100%; }
  .foot { padding-bottom: 16px; font-size: 12.5px; }
  .foot-in { padding-top: 12px; gap: 6px 20px; }
  .fl { gap: 18px; }
  /* The pinned story on a phone: the heading, the stone, then one step at a time. */
  .bespoke { height: 320vh; }
  .pin { align-items: center; padding-top: var(--nav); }
  .bespoke-grid { grid-template-columns: 1fr; gap: 0; }
  .bespoke-copy { display: contents; }
  .bespoke-copy > * { position: relative; z-index: 3; }
  .bespoke h2 { margin: 12px 0 0; font-size: 29px; }
  .bespoke .gem-spot { order: 1; width: min(84vw, 42svh); margin: 4px 0 2px; justify-self: center; }
  .steps { order: 2; display: grid; }
  .progress { order: 3; }
  .step { grid-area: 1 / 1; opacity: 0; padding: 14px 0 12px; }
  .step.on { opacity: 1; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 14.5px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 24px; }
  .said { font-size: 25px; }
  .coll-head h2 { font-size: 40px; }
}

/* ---------- still and calm: for people who ask their device for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage, .world { display: none; }
  .scroll-cue i::after { animation: none; transform: none; }
  html.js .rv, html.js .rv.in { opacity: 1; transform: none; transition: none; }
  html.js .said .w { opacity: 1; transition: none; }
  .btn, .link::after { transition: none; }
  .bespoke { height: auto; padding: 120px 0; }
  .pin { position: static; height: auto; padding-top: 0; }
  .step { grid-area: auto; opacity: 1; }
  .step .n { color: var(--em); }
  .progress { display: none; }
}