/* Fonts served from the site (Latin subsets of Geist, Geist Mono and Instrument Serif, all SIL Open Font License),
   so the first paint waits on no other server. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/geist.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/geist-mono.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Lincoln Park Gems. Two themes in one sheet. The base is Light: a white ground, live stones, quiet type, the
   default. MotusMagic, the night theme, is a layer at the end of this file scoped to :root[data-theme="magic"].
   Mobile first. */

@view-transition { navigation: auto; }

:root {
  --bg: #ffffff;
  --mist: #f4f5f7;
  --mist-2: #eaecf0;
  --ink: #0b0c10;
  --body: #3a3e48;
  --mute: #636978;
  --gold: #9a7a2e;
  --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --pad: 20px;
  --max: 1240px;
  --hdr: 64px;
  color-scheme: light;
}
@media (min-width: 700px) { :root { --pad: 40px; } }
@media (min-width: 1100px) { :root { --pad: 64px; --hdr: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  background: var(--bg); color: var(--body);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
@media (min-width: 1100px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
ol, ul { list-style: none; }
::selection { background: #0b0c10; color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - var(--pad) * 2, var(--max)); margin-inline: auto; }
.narrow { max-width: 760px; }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------- type ---------- */
.display {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: clamp(48px, 12.6vw, 128px); line-height: .94; letter-spacing: -.015em;
  text-wrap: balance;
}
.display em, .h2 em { font-style: italic; }
.h2 { font: 400 clamp(38px, 8.4vw, 80px)/.98 var(--serif); color: var(--ink); letter-spacing: -.012em; text-wrap: balance; }
.h3 { font: 400 clamp(27px, 4.4vw, 36px)/1.1 var(--serif); color: var(--ink); letter-spacing: -.005em; }
.lead { font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.big { font: 400 clamp(26px, 4vw, 38px)/1.25 var(--serif); color: var(--ink); text-wrap: pretty; }
.label { font: 500 12px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.label a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11,12,16,.25); }
.num { font: 500 12.5px/1 var(--mono); letter-spacing: .12em; color: var(--gold); }
.note { font-size: 15px; color: var(--mute); padding: 16px 20px; background: var(--mist); border-radius: 18px; }
p { text-wrap: pretty; }

/* ---------- buttons (squircles) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 22px; corner-shape: superellipse(2.15);
  font: 500 15.5px/1 var(--sans); letter-spacing: .005em; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  -webkit-user-select: none; user-select: none;
}
.btn-solid { background: var(--ink); color: #fff; }
.btn-ghost { background: var(--mist); color: var(--ink); }
@media (hover: hover) {
  .btn-solid:hover { background: #262932; }
  .btn-ghost:hover { background: var(--mist-2); }
}
.btn:active { transform: scale(.97); }
.btn-xl { min-height: 64px; padding: 0 30px; font-size: 18px; border-radius: 26px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); min-height: 44px; }
.link .ic { width: 18px; transition: transform .25s var(--ease); }
@media (hover: hover) { .link:hover .ic { transform: translateX(4px); } }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .5s var(--expo), background-color .35s var(--ease); view-transition-name: hdr; }
.hdr.is-solid { background: rgba(255, 255, 255, .94); }
@media (hover: hover) and (pointer: fine) { .hdr.is-solid { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } }
.hdr.is-hidden { transform: translateY(-101%); }
.hdr-in { height: var(--hdr); width: min(100% - var(--pad) * 2, 1400px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* the shop's logo, from the original site: lion and name on phones, with the line beneath from desktop up */
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.brand .logo { display: block; height: 36px; width: auto; }
.brand .logo-l { display: none; }
@media (min-width: 1100px) { .brand .logo-s { display: none; } .brand .logo-l { display: block; height: 56px; } }
.brand-ftr .logo { height: 62px; --lion-lw: 22; }
.nav { display: none; }
.hdr-tel { display: none; }
.hdr-act { display: flex; align-items: center; gap: 8px; }
.hdr-act .btn { min-height: 42px; padding: 0 18px; border-radius: 16px; font-size: 14.5px; }
@media (max-width: 420px) {
  .hdr-in { gap: 10px; }
  .brand .logo-s { height: 33px; }
  .hdr-act { gap: 4px; }
  .hdr-act .btn { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 350px) { .brand .logo-s { height: 29px; } }
.burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border-radius: 16px; corner-shape: superellipse(2.15); }
.burger i { display: block; width: 22px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--expo); }
.menu-open .burger i:first-child { transform: translateY(3.8px) rotate(45deg); }
.menu-open .burger i:last-child { transform: translateY(-3.8px) rotate(-45deg); }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav > a, .nav-item > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; color: var(--body); border-radius: 14px; transition: color .2s; }
  .nav a.on, .nav a:hover { color: var(--ink); }
  .nav a.on { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
  .hdr-tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 500 14px var(--mono); letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
  .burger { display: none; }
}
/* the number needs the room the nav leaves from 1240px; narrower, it is on Book, in the footer and on every page's call button */
@media (min-width: 1000px) and (max-width: 1239px) { .hdr-tel { display: none; } }
.nav-item { position: relative; }
.menu { position: absolute; left: -18px; top: 100%; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .35s var(--expo), visibility 0s .25s; }
.has-menu:hover .menu, .has-menu:focus-within .menu, .has-menu.open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .35s var(--expo); }
.menu-in { width: 360px; background: #fff; border-radius: 26px; padding: 10px; box-shadow: 0 1px 2px rgba(11,12,16,.06), 0 24px 60px -20px rgba(11,12,16,.22); }
.menu-in a { display: flex; align-items: baseline; gap: 14px; padding: 12px 14px; border-radius: 16px; color: var(--ink); transition: background-color .2s; }
.menu-in a:hover { background: var(--mist); }
.menu-in .n { font: 500 11.5px var(--mono); color: var(--gold); }
.menu-in .t { font: 400 20px/1.2 var(--serif); }

/* mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 45; background: #fff; overflow-y: auto; overscroll-behavior: contain; }
.sheet[hidden] { display: none; }
.sheet-in { padding: calc(var(--hdr) + 20px) var(--pad) 40px; display: flex; flex-direction: column; gap: 2px; min-height: 100%; }
.sheet-big { font: 400 40px/1.15 var(--serif); color: var(--ink); padding: 6px 0; opacity: 0; transform: translateY(14px); }
.sheet-sub { display: grid; gap: 2px; padding: 4px 0 14px 2px; }
.sheet-sub a { font-size: 16px; color: var(--body); padding: 11px 0; opacity: 0; transform: translateY(10px); }
.sheet-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 16px; opacity: 0; }
.sheet-foot .btn { width: 100%; min-height: 58px; font-size: 17px; }
.sheet-foot p { color: var(--mute); font-size: 15px; }
.sheet.open .sheet-big, .sheet.open .sheet-sub a, .sheet.open .sheet-foot { opacity: 1; transform: none; transition: opacity .6s var(--expo), transform .7s var(--expo); }

/* ---------- reveal ---------- */
.js .rise { opacity: 0; transform: translateY(18px); }
.js .rise.in { opacity: 1; transform: none; transition: opacity .9s var(--expo), transform 1s var(--expo); }
/* The opening section's text rises on its own from the first paint, so it never waits for the script. */
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-fade { from { opacity: 0; } to { opacity: 1; } }
.js main > section:first-child .rise { animation: rise-in 1s var(--expo) both; }
.js main > section:first-child .rise:nth-child(2) { animation-delay: .07s; }
.js main > section:first-child .rise:nth-child(3) { animation-delay: .14s; }
.js main > section:first-child .rise:nth-child(n+4) { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { transform: none; }
  .js .rise.in { transition: opacity .4s linear; }
  .js main > section:first-child .rise { animation-name: rise-fade; animation-duration: .4s; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- stones ---------- */
[data-gem-scope] { position: relative; }
.gem-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); }
.gem-canvas.is-ready { opacity: 1; }
.stone { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.stone:active { cursor: grabbing; }
.stone .fallback { position: absolute; inset: 22%; width: 56%; height: 56%; color: var(--ink); opacity: .5; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; padding-top: var(--hdr); display: flex; flex-direction: column; overflow: clip; }
.hero-lattice {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease);
  background-image: radial-gradient(circle, rgba(11, 12, 16, .13) 1px, transparent 1.4px);
  background-size: 26px 26px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 62% 48% at 50% 38%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 48% at 50% 38%, #000 10%, transparent 72%);
}
.hero-stone { position: relative; flex: 1 1 auto; min-height: min(54svh, 104vw); }
.hero-shadow { position: absolute; left: 50%; top: 86%; width: min(46%, 62vh); height: 26px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(11, 12, 16, .16), rgba(11, 12, 16, 0)); pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease) .2s; }
.gems-on .hero-lattice, .gems-on .hero-shadow { opacity: 1; }
.hero-text { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 8px 0 48px; }
.hero-h { font-size: clamp(50px, 13.4vw, 136px); }
.hero .lead { margin-inline: auto; }
.hero .actions { justify-content: center; }
@media (max-width: 420px) { .hero .actions .btn { width: 100%; } }

/* ---------- section heads ---------- */
section { position: relative; }
.svc, .proc, .work, .edu, .quote, .visit, .prose-sec, .cs, .birth, .pair, .anat, .gal { padding-block: clamp(72px, 12vw, 150px); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 6vw, 64px); }
.sec-head > p:not(.label) { max-width: 30em; }
@media (min-width: 900px) {
  .sec-head.split { grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
  .sec-head.split > p, .sec-head.split > .link { max-width: 24em; justify-self: end; }
}

/* ---------- service index ---------- */
.svc-list { display: grid; }
.svc-list a {
  display: grid; grid-template-columns: 1fr 44px; gap: 6px 14px; align-items: center;
  padding: 22px 18px; margin-inline: -18px; border-radius: 26px; corner-shape: superellipse(1.6);
  transition: background-color .3s var(--ease);
}
.svc-list .n { grid-column: 1; display: flex; align-items: center; gap: 12px; font: 500 12px var(--mono); letter-spacing: .12em; color: var(--gold); }
.svc-ic { width: 34px; height: 34px; flex: none; color: var(--ink); }
.svc-list .t { grid-column: 1; font: 400 clamp(30px, 7vw, 54px)/1.02 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.svc-list .d { grid-column: 1; font-size: 15.5px; color: var(--mute); max-width: 34em; }
.svc-list .go { grid-column: 2; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: var(--mist); color: var(--ink); transition: transform .35s var(--expo), background-color .3s; }
@media (hover: hover) {
  .svc-list a:hover { background: var(--mist); }
  .svc-list a:hover .go { background: var(--ink); color: #fff; transform: translateX(4px); }
}
@media (min-width: 900px) {
  .svc-list a { grid-template-columns: 104px minmax(0, 1.2fr) minmax(0, 1fr) 52px; padding: 26px 24px; margin-inline: -24px; }
  .svc-ic { width: 40px; height: 40px; }
  .svc-list .n, .svc-list .t, .svc-list .d { grid-column: auto; }
  .svc-list .go { grid-column: auto; grid-row: auto; }
}
.svc-peek { position: fixed; left: 0; top: 0; width: 232px; height: 174px; z-index: 30; pointer-events: none; opacity: 0; transform: translate3d(-999px, 0, 0) scale(.92); transition: opacity .35s var(--ease); display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .svc-peek { display: block; } }
.svc-peek.on { opacity: 1; }
.svc-peek-in { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(11,12,16,.06), 0 30px 60px -24px rgba(11,12,16,.28); }
.svc-peek-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.svc-peek-in img.on { opacity: 1; }

/* ---------- process ---------- */
.proc { background: linear-gradient(#fff, var(--mist) 18%, var(--mist) 82%, #fff); }
.proc-grid { display: grid; gap: 0; }
.proc-stage { position: sticky; top: 0; z-index: 2; height: calc(min(44svh, 76vw) + var(--hdr) + 12px); padding-top: calc(var(--hdr) + 12px); margin-top: calc(-1 * (var(--hdr) + 12px)); margin-bottom: 8px; background: var(--mist); }
.proc-stage::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(var(--mist), rgba(244, 245, 247, 0)); pointer-events: none; }
.proc-frame { position: absolute; inset: calc(var(--hdr) + 12px) 0 26px; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(11,12,16,.05), 0 30px 70px -40px rgba(11,12,16,.3); }
.proc-layer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.03); transition: opacity .9s var(--expo), transform 1.2s var(--expo); }
.proc-layer.is-on { opacity: 1; transform: none; }
.proc-layer img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.proc-layer[data-layer="2"] img, .proc-layer[data-layer="3"] img { object-fit: contain; padding: 4%; }
.proc-layer[data-layer="4"].is-on { animation: render-in 1.3s var(--expo) both; }
@keyframes render-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.proc-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(transparent, rgba(11,12,16,.55) 20%, rgba(11,12,16,.55) 80%, transparent); opacity: 0; pointer-events: none; }
.proc-sweep.go { animation: sweep 1.3s var(--expo) both; }
@keyframes sweep { 0% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--sweep-w, 600px)); } }
.proc-paper { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--ink);
  background-image: radial-gradient(circle, rgba(11,12,16,.12) 1px, transparent 1.4px); background-size: 22px 22px; }
.proc-paper .lion-paper { width: min(26%, 130px); height: auto; --lion-lw: 14; }
.proc-tel { font: 400 clamp(26px, 4vw, 40px)/1 var(--serif); }
.proc-stage .gem-canvas { opacity: 0; transition: opacity .8s var(--expo); }
.proc-stage[data-active="1"] .gem-canvas.is-ready { opacity: 1; }
.proc-stage .gem-canvas { z-index: 1; top: calc(var(--hdr) + 12px); bottom: 26px; height: auto; }
.proc-dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 8px; }
.proc-dots li { width: 6px; height: 6px; border-radius: 3px; background: rgba(11,12,16,.18); transition: width .5s var(--expo), background-color .4s; }
.proc-dots li.on { width: 22px; background: var(--ink); }
.proc-steps { display: grid; }
.proc-step { min-height: 56svh; display: grid; align-content: center; gap: 12px; padding: 32px 0; opacity: .32; transition: opacity .6s var(--ease); }
.proc-step.on { opacity: 1; }
.proc-step p:not(.num) { max-width: 30em; }
.proc-mobile-fig { display: none; }
@media (min-width: 900px) {
  .proc-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; }
  .proc-stage { top: calc(50svh - min(34vw, 62svh) / 2 + 20px); height: min(34vw, 62svh); padding-top: 0; margin-top: 0; background: none; }
  .proc-stage::after { display: none; }
  .proc-frame { inset: 0 0 26px; }
  .proc-stage .gem-canvas { top: 0; }
  .proc-step { min-height: 62svh; }
}

/* ---------- rail ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--pad); scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px; }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .rail { grid-auto-columns: minmax(300px, 30vw); gap: 24px; padding-inline: max(var(--pad), (100vw - var(--max)) / 2); scroll-padding-inline: max(var(--pad), (100vw - var(--max)) / 2); } }
.rail .piece { scroll-snap-align: start; }

/* ---------- piece cards ---------- */
.piece { display: grid; gap: 4px; }
.piece-img { display: block; aspect-ratio: 4 / 3; border-radius: 26px; corner-shape: superellipse(1.6); overflow: hidden; background: #fff; margin-bottom: 12px; box-shadow: inset 0 0 0 1px rgba(11,12,16,.04); }
.piece-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--expo); }
@media (hover: hover) { .piece:hover .piece-img img { transform: scale(1.045); } }
.piece-t { font: 400 24px/1.15 var(--serif); color: var(--ink); }
.piece-s { font: 500 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }

/* ---------- quote ---------- */
.quote-in { display: grid; gap: 20px; align-items: center; }
.quote-stone { position: relative; aspect-ratio: 1; width: min(100%, 520px); margin-inline: auto; }
.quote-text blockquote p { font: italic 400 clamp(36px, 7vw, 72px)/1.04 var(--serif); color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }
.quote-text figcaption { margin-top: 18px; font: 500 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.quote-text .link { margin-top: 18px; }
@media (min-width: 900px) { .quote-in { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- education ---------- */
.art-grid { display: grid; grid-template-columns: 1fr; gap: 36px 20px; }
@media (min-width: 560px) { .art-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .art-grid { grid-template-columns: repeat(4, 1fr); } .art-grid.three { grid-template-columns: repeat(3, 1fr); } }
.art { display: grid; gap: 6px; align-content: start; }
.art-img { display: block; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #fff; margin-bottom: 10px; box-shadow: inset 0 0 0 1px rgba(11,12,16,.04); }
.art-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--expo); }
@media (hover: hover) { .art:hover .art-img img { transform: scale(1.045); } }
.art-d { font: 500 12px var(--mono); letter-spacing: .08em; color: var(--mute); text-transform: uppercase; }
.art-t { font: 400 26px/1.12 var(--serif); color: var(--ink); }
.art-x { font-size: 15.5px; color: var(--mute); }
.art-list { display: grid; }
.art-row { display: grid; grid-template-columns: 1fr 96px; gap: 4px 18px; padding: 24px 18px; margin-inline: -18px; border-radius: 26px; transition: background-color .3s; }
.art-row .art-d, .art-row .art-t, .art-row .art-x { grid-column: 1; }
.art-row .art-img { grid-column: 2; grid-row: 1 / span 3; margin: 0; width: 96px; border-radius: 18px; align-self: center; }
@media (hover: hover) { .art-row:hover { background: var(--mist); } }
@media (min-width: 900px) {
  .art-row { grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr) 140px; align-items: center; gap: 24px; padding: 28px 24px; margin-inline: -24px; }
  .art-row .art-d, .art-row .art-t, .art-row .art-x { grid-column: auto; }
  .art-row .art-t { font-size: 34px; }
  .art-row .art-img { grid-column: auto; grid-row: auto; width: 140px; }
}

/* ---------- visit ---------- */
.visit-in { display: grid; gap: 40px; }
.visit-text { display: grid; gap: 20px; align-content: start; }
.visit h2 em { color: var(--mute); }
@media (min-width: 900px) { .visit-in { grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; } }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 16px; color: var(--body); }
.hours li + li { box-shadow: 0 -1px 0 rgba(11,12,16,.06); }
.hours li.today { color: var(--ink); font-weight: 600; }
.hours li span:last-child { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }
.hours-mini li { padding: 4px 0; font-size: 14px; box-shadow: none !important; }
.hours-mini li span:last-child { font-size: 12.5px; }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--body); min-height: 28px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #b9bec9; flex: none; position: relative; }
.status.open i { background: #1f9d55; }
.status.open i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: #1f9d55; opacity: .3; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }

/* ---------- band (call to action) ---------- */
.band { padding-block: 24px clamp(72px, 10vw, 120px); }
.band-in { background: var(--mist); border-radius: 36px; corner-shape: superellipse(1.6); padding: clamp(32px, 6vw, 72px); display: grid; gap: 28px; }
.band-text { display: grid; gap: 14px; }
.band-text p { max-width: 32em; }
@media (min-width: 900px) { .band-in { grid-template-columns: 1fr auto; align-items: end; gap: 48px; } }

/* ---------- page heads ---------- */
.phead { padding-top: calc(var(--hdr) + clamp(40px, 8vw, 96px)); padding-bottom: clamp(32px, 6vw, 64px); }
.phead-in { display: grid; gap: 36px; align-items: center; }
.phead-text { display: grid; gap: 20px; align-content: start; }
.phead-vis { position: relative; }
.vis-stone { position: relative; aspect-ratio: 1; width: min(100%, 620px); margin-inline: auto; }
.vis-img { border-radius: 30px; corner-shape: superellipse(1.6); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,12,16,.04); }
.vis-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.phead.solo .phead-text { max-width: 980px; }
@media (min-width: 900px) {
  .phead:not(.solo) .phead-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; }
  .phead-stone .phead-in { min-height: calc(100svh - var(--hdr) - 140px); }
}

/* ---------- prose ---------- */
.prose-grid { display: grid; gap: 56px; }
@media (min-width: 900px) { .prose-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.prose { display: grid; gap: 18px; align-content: start; }
.prose .h3 + p { margin-top: -4px; }
.prose .h3:not(:first-child) { margin-top: 14px; }
.terms { display: grid; gap: 6px; }
.terms > div { display: grid; gap: 6px; padding: 18px 0; }
.terms > div + div { box-shadow: 0 -1px 0 rgba(11,12,16,.07); }
.terms dt { font: 400 24px/1.2 var(--serif); color: var(--ink); }
.terms dd { color: var(--body); }
@media (min-width: 700px) { .terms > div { grid-template-columns: 170px 1fr; gap: 24px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 11px 16px; background: var(--mist); border-radius: 15px; corner-shape: superellipse(2); font-size: 15px; color: var(--ink); }
.chips li a { text-decoration: underline; text-underline-offset: 3px; }
.center-note { text-align: center; margin: 48px auto 0; max-width: 32em; color: var(--mute); }

.flow { display: grid; gap: 14px; counter-reset: f; }
.flow li { background: var(--mist); border-radius: 28px; corner-shape: superellipse(1.6); padding: 28px; display: grid; gap: 10px; align-content: start; }
.flow h2 { font: 400 26px/1.15 var(--serif); color: var(--ink); }
.flow p { font-size: 15.5px; }
@media (min-width: 700px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .flow { grid-template-columns: repeat(4, 1fr); } .flow li { min-height: 260px; } }

/* ---------- 4Cs ---------- */
.cs-grid { display: grid; }
.cs-stage { position: sticky; top: calc(var(--hdr) + 4px); height: min(42svh, 82vw); z-index: 2; background: linear-gradient(#fff 82%, rgba(255,255,255,0)); }
.cs-stage .stone { inset: 4% 10%; }
.cs-steps { display: grid; }
.cs-step { min-height: 74svh; display: grid; align-content: center; gap: 14px; padding: 24px 0; opacity: .3; transition: opacity .6s var(--ease); }
.cs-step.on { opacity: 1; }
/* Readers who ask for more contrast see every grade at full strength. */
@media (prefers-contrast: more) { .cs-step { opacity: 1; } }
.cs-step p:not(.num) { max-width: 30em; }
.scale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.scale li { font: 500 12.5px/1 var(--mono); letter-spacing: .06em; padding: 9px 11px; border-radius: 12px; background: var(--mist); color: var(--mute); }
.scale li:first-child { background: var(--ink); color: #fff; }
@media (min-width: 900px) {
  .cs-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .cs-stage { top: calc(var(--hdr) + 6svh); height: calc(100svh - var(--hdr) - 12svh); background: none; }
  .cs-step { min-height: 86svh; }
}

/* ---------- anatomy ---------- */
.anat { padding-top: 0; }
.anat-in { display: grid; gap: 32px; align-items: center; }
.anat-in > div { display: grid; gap: 14px; }
.anatomy { width: 100%; max-width: 640px; margin-inline: auto; color: var(--ink); overflow: visible; }
.anatomy .an-text { font-family: var(--mono); fill: var(--mute); letter-spacing: .04em; }
@media (max-width: 899px) { .anatomy .an-text { font-size: 19px; } }
.anatomy .an-lines { color: var(--gold); }
@media (min-width: 900px) { .anat-in { grid-template-columns: .8fr 1.2fr; gap: 64px; } }

/* ---------- birthstones ---------- */
.birth-grid { display: grid; gap: 28px; }
.birth-stage { position: relative; aspect-ratio: 1; width: min(100%, 560px); margin-inline: auto; }
.birth-stage .stone { inset: 0 0 18%; }
.birth-name { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; display: grid; gap: 2px; }
.birth-stone-name { font: 400 clamp(40px, 7vw, 64px)/1 var(--serif); color: var(--ink); }
.birth-color { font-size: 15px; color: var(--mute); }
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.months button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 14px 14px 13px; border-radius: 20px; corner-shape: superellipse(1.8); background: var(--mist); transition: background-color .3s var(--ease), color .3s var(--ease), transform .25s var(--ease); min-height: 44px; }
.months button:active { transform: scale(.97); }
.months .m { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.months .s { font: 400 21px/1.15 var(--serif); color: var(--ink); }
.months .c { font-size: 12.5px; color: var(--mute); }
.months button[aria-pressed="true"] { background: var(--ink); }
.months button[aria-pressed="true"] .s { color: #fff; }
.months button[aria-pressed="true"] .m, .months button[aria-pressed="true"] .c { color: rgba(255,255,255,.72); }
@media (hover: hover) { .months button:hover:not([aria-pressed="true"]) { background: var(--mist-2); } }
@media (min-width: 900px) { .birth-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } .months { grid-template-columns: repeat(3, 1fr); } }

/* ---------- wedding pair ---------- */
.pair { padding-top: 0; }
.pair-in { display: grid; gap: 40px; }
.pair-card { display: grid; gap: 16px; align-content: start; }
.pair-card figure { border-radius: 28px; overflow: hidden; background: #fff; aspect-ratio: 4 / 3; margin-bottom: 8px; }
.pair-card figure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .pair-in { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ---------- repairs ---------- */
.repairs { display: grid; gap: 14px; }
.repair { background: var(--mist); border-radius: 30px; corner-shape: superellipse(1.6); padding: clamp(26px, 4vw, 40px); display: grid; gap: 12px; align-content: start; }
@media (min-width: 800px) { .repairs { grid-template-columns: 1fr 1fr; } .repairs.three { grid-template-columns: repeat(3, 1fr); } }
.also { margin-top: 36px; display: grid; gap: 14px; }

/* watch face */
.dial { width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.dial-face { position: relative; width: 86%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(11,12,16,.06), 0 40px 80px -40px rgba(11,12,16,.35), inset 0 0 0 10px var(--mist); }
.dial-face i { position: absolute; left: 50%; top: 0; width: 1px; height: 50%; margin-left: -.5px; transform-origin: 50% 100%; background: linear-gradient(rgba(11,12,16,.32) 0 5%, transparent 5%); }
.dial-face i.h { width: 2px; margin-left: -1px; background: linear-gradient(var(--ink) 0 9%, transparent 9%); }
.dial-face b { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 2px; background: var(--ink); transition: transform .3s cubic-bezier(.4, 2.2, .5, 1); }
.dh { width: 4px; height: 26%; margin-left: -2px; }
.dm { width: 2.5px; height: 38%; margin-left: -1.25px; }
.ds { width: 1px; height: 42%; margin-left: -.5px; background: var(--gold) !important; }
.dc { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--ink); }

/* ---------- gallery ---------- */
.gal { padding-top: 16px; }
.gal-grid { display: grid; gap: 40px 20px; }
@media (min-width: 560px) { .gal-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .gal-grid { grid-template-columns: repeat(3, 1fr); gap: 56px 28px; } }

/* ---------- piece ---------- */
.pc { padding-top: calc(var(--hdr) + 20px); padding-bottom: clamp(24px, 4vw, 48px); }
.more { padding-top: clamp(48px, 7vw, 96px); }
.pc-in { display: grid; gap: 32px; }
.pc-media { display: grid; gap: 12px; }
.pc-main { position: relative; aspect-ratio: 4 / 3; border-radius: 30px; corner-shape: superellipse(1.6); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,12,16,.04); touch-action: pan-y; }
.pc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--expo); }
.pc-slide.is-on { opacity: 1; }
.pc-slide img { width: 100%; height: 100%; object-fit: contain; }
.pc-zoom { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 1px 2px rgba(11,12,16,.1); }
.pc-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pc-thumbs button { flex: none; width: 76px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #fff; opacity: .5; transition: opacity .3s; box-shadow: inset 0 0 0 1px rgba(11,12,16,.06); }
.pc-thumbs button[aria-selected="true"] { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--ink); }
.pc-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pc-text { display: grid; gap: 18px; align-content: start; }
.pc-title { font-size: clamp(44px, 9vw, 84px); }
.spec { font: 500 13px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pc-nav a { display: grid; gap: 4px; padding: 16px 18px; background: var(--mist); border-radius: 22px; color: var(--ink); font: 400 19px/1.2 var(--serif); transition: background-color .25s; }
.pc-nav a:last-child { text-align: right; }
@media (hover: hover) { .pc-nav a:hover { background: var(--mist-2); } }
@media (min-width: 900px) { .pc-in { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 64px; align-items: start; } .pc-text { position: sticky; top: calc(var(--hdr) + 32px); } }
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; background: #fff; padding: 0; }
.lightbox::backdrop { background: #fff; }
.lb-track { height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-track figure { flex: none; width: 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; padding: 64px 12px; }
.lb-track img { max-height: 100%; width: auto; object-fit: contain; }
.lb-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 48px; height: 48px; border-radius: 18px; background: var(--mist); font-size: 28px; line-height: 1; color: var(--ink); }

/* ---------- articles ---------- */
.post-head { padding-top: calc(var(--hdr) + clamp(40px, 8vw, 96px)); display: grid; gap: 18px; max-width: 900px; }
.post-head .display { font-size: clamp(44px, 9.4vw, 96px); }
.byline { color: var(--mute); font-size: 15px; }
.post-fig { margin-top: 36px; max-width: 900px; }
.post-fig img { width: 100%; max-height: 70svh; object-fit: contain; border-radius: 30px; background: #fff; }
.post-body { max-width: 720px; padding-block: 48px 40px; display: grid; gap: 20px; font-size: 18px; line-height: 1.7; }
.post-body .h3 { margin-top: 20px; }
@media (min-width: 1100px) { .post-head, .post-fig, .post-body { margin-left: max(var(--pad), (100vw - var(--max)) / 2); } }

/* ---------- appointment ---------- */
.appt { padding-top: calc(var(--hdr) + clamp(40px, 8vw, 96px)); padding-bottom: clamp(64px, 10vw, 120px); }
.appt-in { display: grid; gap: 40px; }
.appt-main { display: grid; gap: 22px; align-content: start; }
.appt-call { display: grid; gap: 12px; margin-top: 6px; }
.appt-call .btn-xl { width: 100%; }
.appt-more { display: flex; flex-wrap: wrap; gap: 10px; }
.appt-more .btn { flex: 1 1 200px; }
@media (min-width: 700px) { .appt-call .btn-xl { width: auto; justify-self: start; } .appt-more .btn { flex: none; } }
.appt-side { background: var(--mist); border-radius: 32px; corner-shape: superellipse(1.6); padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; align-content: start; }
.appt-side .hours li + li { box-shadow: 0 -1px 0 rgba(11,12,16,.07); }
.appt-side .label:not(:first-child) { margin-top: 16px; }
.addr a { color: var(--ink); font-size: 17px; }
@media (min-width: 900px) { .appt-in { grid-template-columns: 1.3fr .9fr; gap: 72px; align-items: start; } }
.map { margin-top: 48px; position: relative; aspect-ratio: 4 / 3; border-radius: 32px; overflow: hidden; background: var(--mist); }
@media (min-width: 700px) { .map { aspect-ratio: 16 / 7; } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.map-poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px;
  background-image: radial-gradient(circle, rgba(11,12,16,.12) 1px, transparent 1.4px); background-size: 22px 22px; color: var(--ink); }
.map-poster .lion-map { width: 64px; height: auto; --lion-lw: 20; }
.msg { display: grid; gap: 14px; margin-top: 20px; }
.msg label { display: grid; gap: 6px; font-size: 14px; color: var(--mute); }
.msg input, .msg textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--mist); border: 0; border-radius: 16px; padding: 14px 16px; }
.msg button { justify-self: start; }

/* ---------- collections ---------- */
.coll { min-height: 100svh; padding-top: var(--hdr); display: flex; flex-direction: column; overflow: clip; }
.coll-stone { position: relative; flex: 1 1 auto; min-height: min(52svh, 100vw); }
.coll-text { display: grid; justify-items: center; text-align: center; gap: 18px; padding-bottom: 56px; }
.coll .actions { justify-content: center; }

/* ---------- footer ---------- */
.ftr { background: var(--mist); padding-top: clamp(56px, 8vw, 96px); margin-top: 0; }
.ftr-top { display: grid; gap: 36px; }
.ftr-brand { display: grid; gap: 14px; max-width: 26em; }
.ftr-brand p { font-size: 15.5px; color: var(--mute); }
.ftr-col { display: grid; gap: 10px; align-content: start; font-size: 15.5px; }
.ftr-col a { color: var(--ink); }
.ftr-links { display: grid; gap: 2px; }
.ftr-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--body); }
.ftr-links a:hover { color: var(--ink); }
.ftr-base { display: grid; gap: 6px; padding-block: 40px 48px; margin-top: 48px; font-size: 13.5px; color: var(--mute); box-shadow: 0 -1px 0 rgba(11,12,16,.07); }
.ftr-base a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .ftr-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .ftr-base { grid-template-columns: 1fr 1fr; } .ftr-base p:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; } .ftr-base p:nth-child(3) { grid-column: 1 / -1; } }

/* stones above the page, text above stones */
.gem-canvas { z-index: 1; }
.hero-text, .coll-text { z-index: 2; }
.soft { color: var(--mute); }
/* sections that hold a stone never widen the page (clip, unlike hidden, keeps sticky working) */
.quote, .phead, .birth, .cs, .coll, .proc, .visit, .anat { overflow-x: clip; }

/* how a ring is made: one object scrolled from rough crystal to ring */
.forge { position: relative; height: 1000svh; }
.forge-stick { position: sticky; top: 0; height: 100svh; overflow: clip; }
.forge-slot { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + 8px); height: 58svh; }
.forge-intro { position: absolute; left: var(--pad); right: var(--pad); bottom: 12svh; z-index: 2; transition: opacity .6s var(--ease); }
.forge-intro.gone { opacity: 0; pointer-events: none; }
.forge-caps { position: absolute; left: var(--pad); right: var(--pad); bottom: 10svh; z-index: 2; }
.forge-cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.forge-cap.on { opacity: 1; pointer-events: auto; }
.forge-cap p { font: 400 clamp(26px, 6.4vw, 40px)/1.15 var(--serif); color: var(--ink); max-width: 18em; text-wrap: balance; }
.forge-cap .actions { margin-top: 20px; }
.forge-track { position: absolute; left: var(--pad); right: var(--pad); bottom: 5svh; height: 1px; background: rgba(11, 12, 16, .1); z-index: 2; }
.forge-track i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
@media (min-width: 900px) {
  .forge-slot { left: 38%; top: var(--hdr); bottom: 0; height: auto; }
  .forge-caps, .forge-intro { left: max(var(--pad), (100vw - var(--max)) / 2); right: auto; width: min(32vw, 460px); bottom: auto; top: 50%; transform: translateY(-50%); }
  .forge-caps { height: 0; }
  .forge-cap { bottom: auto; top: 0; transform: translateY(-50%); }
  .forge-track { left: max(var(--pad), (100vw - var(--max)) / 2); right: max(var(--pad), (100vw - var(--max)) / 2); bottom: 6svh; }
}

/* hero: the stone, then the name */
.hero { display: flex; flex-direction: column; }
.hero > .gem-canvas { z-index: 1; }
.hero-stone { position: relative; flex: none; width: 100%; height: min(44svh, 96vw); min-height: 0; }
.hero-name { position: relative; z-index: 2; margin: 0 0 28px; text-align: center; color: var(--ink);
  font: 400 clamp(64px, 21vw, 220px)/.86 var(--serif); letter-spacing: -.02em; }
.hero-name .hw { display: block; }
.hero-tag { font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.hero-text { position: relative; z-index: 2; padding: 0 0 40px; gap: 16px; }
@media (min-width: 900px) {
  .hero-stone { height: min(52svh, 44vw); }
  .hero-name { font-size: min(11.6vw, 21svh); line-height: 1; white-space: nowrap; margin-bottom: 24px; }
  .hero-name .hw { display: inline; }
  .hero-text { padding-bottom: 48px; }
}

/* The dive: past the first screen, scrolling takes the camera down through the table into the stone.
   The hero holds still (its bottom edge on screen when it is taller than the screen) while .hero-run
   scrolls by; site.js turns that distance into the dive. */
.hero { display: block; min-height: 0; padding-top: 0; overflow: visible; }
.hero-pin { position: sticky; top: var(--pin-top, 0px); min-height: 100svh; padding-top: var(--hdr); display: flex; flex-direction: column; overflow: clip; }
.hero-pin > .gem-canvas { z-index: 1; }
.hero-white { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.hero-run { display: none; }
.js .hero-run { display: block; height: 210svh; }
.hero-pin.no-gl + .hero-run, .hero-pin.still + .hero-run { display: none; }
.hero-pin.diving .hero-text { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .js .hero-run { display: none; } }

/* lab list */
.labs { list-style: none; padding: 0; margin: 4px 0 0; border-top: 1px solid var(--mist-2); }
.labs li { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--mist-2); color: var(--ink); font: 400 28px/1.1 var(--serif); }
.labs li span { min-width: 2.2em; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--mute); }

/* process on phones: each step shows its own picture instead of a sticky card */
@media (max-width: 899px) {
  .proc-stage { display: none; }
  .proc-step { min-height: 0; opacity: 1; padding: 28px 0; border-top: 1px solid var(--mist-2); }
  .proc-step:first-child { border-top: 0; }
  .proc-mobile-fig { display: block; margin: 8px 0 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(11,12,16,.05), 0 24px 48px -32px rgba(11,12,16,.28); }
  .proc-mobile-fig img { display: block; width: 100%; height: auto; }
}

/* ---------- ring designer ---------- */
.dz { display: grid; }
/* the stage runs up under the header, so nothing shows above it when the header slides away */
.dz-stage { position: sticky; top: 0; z-index: 3; height: calc(var(--hdr) + min(44svh, 104vw)); background: var(--bg); }
.dz-stage::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--bg), rgba(255, 255, 255, 0)); pointer-events: none; }
.dz-slot { position: absolute; inset: var(--hdr) 0 0; touch-action: pan-y; cursor: grab; }
.dz-wait { position: absolute; inset: var(--hdr) 0 0; display: grid; place-items: center; transition: opacity .8s var(--ease), visibility 0s linear .8s; pointer-events: none; }
.dz-wait svg { width: 72px; height: auto; animation: dz-plan 2.6s ease-in-out infinite alternate; }
@keyframes dz-plan { from { opacity: .35; transform: rotate(0deg) scale(.96); } to { opacity: 1; transform: rotate(22.5deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .dz-wait svg { animation: none; } }
.gems-on .dz-wait { opacity: 0; visibility: hidden; }
/* the studio's first picture, out of focus, gone as the live ring is drawn over it */
.dz-poster { position: absolute; left: 50%; top: calc(var(--hdr) + (100% - var(--hdr)) / 2); width: min(78%, 40svh); height: auto; transform: translate(-50%, -50%); filter: blur(12px); opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.dz-poster.is-on { opacity: .8; }
.dz-stage:has(> .gem-canvas.is-ready) .dz-poster { opacity: 0; }
@media (min-width: 900px) { .dz-poster { width: min(78%, 64svh); } }
.dz-panel { padding: 8px var(--pad) 64px; display: grid; gap: 28px; }
.dz-head { display: grid; gap: 12px; }
.dz-head .display { font-size: clamp(44px, 11vw, 88px); }
.dz-form { display: grid; gap: 22px; }
.dz-group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.dz-group legend { padding: 0; margin-bottom: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.dz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 16px; corner-shape: superellipse(2.15);
  background: var(--mist); color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); }
.dz-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.dz-chip:has(input:checked) { background: var(--ink); color: #fff; }
.dz-chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.dz-chip:active { transform: scale(.97); }
.dz-chip.off { opacity: .35; cursor: not-allowed; }
@media (hover: hover) { .dz-chip:not(.off):hover:not(:has(input:checked)) { background: var(--mist-2); } }
.dz-shape { width: 22px; height: 22px; margin-left: -4px; }
.sw { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(11, 12, 16, .14); }
.sw-diamond { background: radial-gradient(circle at 35% 30%, #fff, #dfe4ec 55%, #b9c1cd); }
.sw-sapphire { background: radial-gradient(circle at 35% 30%, #6d8cff, #1b3bb0 60%, #0b1c63); }
.sw-ruby { background: radial-gradient(circle at 35% 30%, #ff6b8a, #b3123a 60%, #5e0718); }
.sw-emerald { background: radial-gradient(circle at 35% 30%, #5fd39a, #0f7a48 60%, #063d23); }
.sw-aquamarine { background: radial-gradient(circle at 35% 30%, #d6f4fb, #7cc6d8 60%, #3f8ea3); }
.sw-amethyst { background: radial-gradient(circle at 35% 30%, #c79bf2, #7a3fb0 60%, #3e1a63); }
.sw-platinum { background: linear-gradient(135deg, #f4f5f7, #c9ccd2 55%, #9ea3ac); }
.sw-white { background: linear-gradient(135deg, #fbfaf6, #dcd9d0 55%, #aeaa9f); }
.sw-yellow { background: linear-gradient(135deg, #ffe7a6, #e0b04d 55%, #a8761c); }
.sw-rose { background: linear-gradient(135deg, #ffd9cb, #e3a08a 55%, #b06a55); }
.dz-chip:has(input:checked) .sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.dz-out { display: grid; gap: 16px; padding-top: 4px; }
.dz-sum { font: 400 clamp(26px, 6.4vw, 36px)/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
.dz-note { font-size: 14px; color: var(--mute); max-width: 34em; }
@media (max-width: 420px) { .dz .actions .btn { width: 100%; } }
@media (min-width: 900px) {
  .dz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .dz-head .display { font-size: clamp(48px, 4.6vw, 72px); }
  .dz-panel { gap: 24px; }
  .dz-stage { height: 100svh; }
  .dz-stage::after { display: none; }
  /* the panel starts below the header, which sits over this column */
  .dz-panel { padding: calc(var(--hdr) + clamp(16px, 3svh, 40px)) max(var(--pad), (100vw - var(--max)) / 2) 72px 24px; }
}

/* booking page: a design brought from the designer */
.appt-design { display: grid; gap: 18px; padding: 20px 22px; border-radius: 24px; corner-shape: superellipse(2.15); background: var(--mist); }
.appt-design-one { display: grid; gap: 14px; }
.appt-design-one[hidden], .appt-saved[hidden] { display: none; }
.appt-design-txt { display: grid; gap: 6px; align-content: start; }
.appt-design-img { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; border-radius: 18px; corner-shape: superellipse(2.15); background: #fff; }
@media (min-width: 640px) { .appt-design-one:has(.appt-design-img) { grid-template-columns: 220px 1fr; align-items: center; gap: 22px; } }
.appt-saved { display: grid; gap: 10px; }
.appt-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.appt-saved-list a { display: grid; gap: 6px; color: var(--ink); }
.appt-saved-list img { width: 100%; aspect-ratio: 1; border-radius: 14px; corner-shape: superellipse(2.15); background: #fff; }
.appt-saved-list span { font: 400 15px/1.15 var(--serif); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.appt-design-t { font: 400 clamp(24px, 5.6vw, 32px)/1.15 var(--serif); color: var(--ink); }
.appt-design-n { font-size: 14px; color: var(--mute); }
.appt-design-w { font: italic 400 20px/1.3 var(--serif); color: var(--ink); }
.appt-design-w[hidden] { display: none; }
.appt-design-n a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- design studio: paths, steps, fields ---------- */
.dz-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dz-path { position: relative; display: grid; place-items: center; min-height: 52px; padding: 0 12px; border-radius: 18px; corner-shape: superellipse(2.15);
  background: var(--mist); color: var(--ink); font: 500 15px/1.15 var(--sans); text-align: center; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.dz-path input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.dz-path:has(input:checked) { background: var(--ink); color: #fff; }
.dz-path:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 520px) { .dz-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dz-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; scroll-margin-top: calc(var(--hdr) + min(44svh, 104vw) + 8px); }
.dz-step { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px 0 8px; border-radius: 15px; corner-shape: superellipse(2.15);
  background: transparent; color: var(--mute); font: 500 14.5px/1 var(--sans); transition: background-color .25s var(--ease), color .25s var(--ease); }
.dz-step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9px; corner-shape: superellipse(2.15); background: var(--mist); color: var(--ink); font: 500 12px/1 var(--mono); }
.dz-step[aria-selected="true"] { background: var(--mist); color: var(--ink); }
.dz-step[aria-selected="true"] span { background: var(--ink); color: #fff; }
.dz-fields { display: grid; gap: 22px; padding-top: 14px; }
.dz-group[hidden] { display: none; }
.dz-select, .dz-text { width: 100%; max-width: 360px; min-height: 50px; padding: 0 16px; border: 0; border-radius: 16px; corner-shape: superellipse(2.15); background: var(--mist); color: var(--ink); font: 400 16px/1 var(--sans); }
.dz-select:focus-visible, .dz-text:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dz-text::placeholder { color: var(--mute); }
.dz-nav { display: flex; gap: 10px; padding-top: 18px; }
.dz-nav [hidden] { display: none; }
.dz-nav [data-dz-next] { margin-left: auto; }
.dz-engr { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; margin: 0; text-align: center; font: italic 400 17px/1.3 var(--serif); color: var(--mute); pointer-events: none; }
.sw-lab { background: radial-gradient(circle at 35% 30%, #fff, #e3e8ef 55%, #c3cad6); }
.sw-moissanite { background: radial-gradient(circle at 35% 30%, #fff, #e9ecf6 45%, #b7bfd4), conic-gradient(#ffd3e0, #d2f4ff, #fff1c2, #ffd3e0); }
.sw-pinkSapphire { background: radial-gradient(circle at 35% 30%, #ffc6dc, #e0558f 60%, #8c2050); }
.sw-yellowSapphire { background: radial-gradient(circle at 35% 30%, #fff2b0, #f1c232 60%, #a07a08); }
.sw-morganite { background: radial-gradient(circle at 35% 30%, #ffe3dc, #eba895 60%, #a8665a); }
.sw-tourmaline { background: radial-gradient(circle at 35% 30%, #a8e8b8, #2f8f55 60%, #164a2b); }
.sw-tanzanite { background: radial-gradient(circle at 35% 30%, #b8b4ff, #4b46c8 60%, #241f72); }
.sw-alexandrite { background: linear-gradient(135deg, #3fa58a, #2a7b6a 50%, #9b3b6a); }

/* ---------- design studio: directions and designs to start from ---------- */
.dz-dirs { display: grid; gap: 14px; padding-bottom: 6px; }
.dz-dirs-h { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.dz-dir-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-dir { min-height: 40px; padding: 0 14px; border-radius: 14px; corner-shape: superellipse(2.15); background: transparent; color: var(--mute); font: 500 14.5px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--mist-2); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.dz-dir[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) { .dz-dir:not([aria-selected="true"]):hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } }
.dz-dir-note { color: var(--body); font-size: 15px; min-height: 1.4em; }
.dz-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dz-cards [hidden] { display: none; }
.dz-card { display: grid; gap: 6px; padding: 8px 8px 12px; border-radius: 20px; corner-shape: superellipse(2.15); background: var(--mist); text-align: left; color: var(--ink); cursor: pointer; transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.dz-card-img { display: block; aspect-ratio: 1; border-radius: 14px; corner-shape: superellipse(2.15); overflow: hidden; background: #fff; }
.dz-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--expo); }
.dz-card-t { padding: 0 4px; font: 400 18px/1.15 var(--serif); }
.dz-card-k { padding: 0 4px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.dz-card.on { background: var(--ink); color: #fff; }
.dz-card.on .dz-card-k { color: rgba(255, 255, 255, .62); }
@media (hover: hover) { .dz-card:hover .dz-card-img img { transform: scale(1.06); } }
.dz-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 1100px) { .dz-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dz-card-t { font-size: 16px; } }
.dz-envision { justify-self: start; }
/* The plan in violet and cyan: this button opens a blank plan for Viktor. It turns one eighth, the cut's own symmetry. */
.btn-plan .bp-g { width: 24px; height: 24px; flex: none; margin-left: -4px; transition: transform .9s var(--expo); }
@media (hover: hover) { .btn-plan:hover .bp-g { transform: rotate(45deg); } }
.starts { padding-block: clamp(72px, 10vw, 140px); }
.starts .sec-head p { margin-top: 12px; }
.starts-rail { grid-auto-columns: min(40vw, 260px); gap: 12px; }
.starts-rail .dz-card { scroll-snap-align: start; }
.starts-more { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: clamp(28px, 4vw, 44px); }
.starts-more p { font-size: 15px; color: var(--mute); }

/* ---------- Envision Something Else? ---------- */
.ev { width: min(640px, 100vw); max-width: 100vw; max-height: min(92dvh, 980px); margin: auto; padding: 0; border: 0; border-radius: 28px; corner-shape: superellipse(2.15); background: #fff; color: var(--body); box-shadow: 0 30px 90px -30px rgba(11, 12, 16, .45); overflow: auto; overscroll-behavior: contain; }
.ev::backdrop { background: rgba(11, 12, 16, .32); }
@media (max-width: 640px) { .ev { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } .ev.is-sent .ev-in { min-height: 100dvh; align-content: center; } }
.ev:focus { outline: none; }
.ev-in { position: relative; display: grid; gap: 18px; padding: 28px var(--pad) 32px; }
@media (min-width: 641px) { .ev-in { padding: 34px 40px 36px; } }
.ev-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; corner-shape: superellipse(2.15); background: var(--mist); color: var(--ink); }
.ev-x svg { width: 20px; height: 20px; fill: none; }
.ev-plan { width: 96px; height: 96px; }
.ev-plan-svg { width: 100%; height: 100%; overflow: visible; }
.ev-plan-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; fill: transparent; transition: fill 1.2s var(--ease); }
.ev.drawn .ev-plan-svg path { animation: ev-draw 1.8s var(--expo) .15s forwards; }
@keyframes ev-draw { to { stroke-dashoffset: 0; } }
/* sending: the plan glows; sent: the plan becomes a stone and catches colour */
.ev.is-sending .ev-plan-svg { animation: ev-glow 1.1s ease-in-out infinite alternate; }
@keyframes ev-glow { from { filter: drop-shadow(0 0 0 rgba(107, 43, 255, 0)); } to { filter: drop-shadow(0 0 8px rgba(0, 184, 255, .55)); } }
.ev.is-sent .ev-plan-svg path { fill: url(#ev-grad); fill-opacity: .14; }
.ev.is-sent .ev-plan { animation: ev-sent 1.4s var(--expo) both; }
@keyframes ev-sent { 0% { transform: scale(.92) rotate(-8deg); } 100% { transform: none; } }
.ev-h { font: 400 clamp(34px, 8vw, 48px)/1.02 var(--serif); color: var(--ink); padding-right: 52px; }
.ev-lead { font-size: 16px; line-height: 1.55; max-width: 34em; }
.ev-form { display: grid; gap: 18px; }
.ev-form[hidden], .ev-done[hidden] { display: none; }
.ev-field { display: grid; gap: 8px; }
.ev-field > span { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ev-field textarea { width: 100%; min-height: 128px; padding: 14px 16px; border: 0; border-radius: 16px; corner-shape: superellipse(2.15); background: var(--mist); color: var(--ink); font: 400 16px/1.5 var(--sans); resize: vertical; }
.ev-field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ev-field textarea::placeholder { color: var(--mute); }
.ev-field .dz-text, .ev-field .dz-select { max-width: none; }
.ev-drop { position: relative; display: grid; gap: 4px; justify-items: start; padding: 18px; border-radius: 18px; corner-shape: superellipse(2.15); background: var(--mist); cursor: pointer; transition: background-color .25s var(--ease); }
.ev-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ev-drop.over { background: #efe9ff; }
.ev-drop.full { opacity: .5; pointer-events: none; }
.ev-drop-t { font: 500 16px/1.2 var(--sans); color: var(--ink); }
.ev-drop-n { font-size: 14px; color: var(--mute); }
.ev-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-thumbs:empty { display: none; }
.ev-thumbs li { position: relative; width: 84px; height: 84px; border-radius: 14px; corner-shape: superellipse(2.15); overflow: hidden; background: var(--mist); animation: ev-in .5s var(--expo) both; }
@keyframes ev-in { from { opacity: 0; transform: scale(.9); } }
.ev-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ev-thumbs button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 11px; corner-shape: superellipse(2.15); background: rgba(11, 12, 16, .7); color: #fff; font-size: 18px; line-height: 1; }
.ev-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.ev-check[hidden] { display: none; }
.ev-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink); flex: none; }
.ev-check em { font-style: normal; color: var(--ink); }
.ev-who { display: grid; gap: 14px; }
@media (min-width: 560px) { .ev-who { grid-template-columns: 1fr 1fr; } .ev-who .ev-field:first-child { grid-column: 1 / -1; } }
.ev-hint { font-size: 14px; color: var(--mute); margin-top: -8px; }
.ev-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ev-send .btn { min-width: 200px; }
.ev-send .btn:disabled { opacity: .6; }
.ev-status { font-size: 15px; color: var(--ink); min-height: 1.4em; }
.ev-status.bad { color: #a2122f; }
.ev-note { font-size: 13px; color: var(--mute); }
.ev-done a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ev-done { display: grid; gap: 14px; justify-items: start; }
.nowrap { white-space: nowrap; }

/* studio: surprise me, and the designs saved on this device */
.dz-dir-more { display: flex; flex-wrap: wrap; gap: 10px; }
.dz-saved { display: grid; gap: 12px; padding-top: 18px; }
.dz-saved[hidden] { display: none; }
.dz-saved-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .dz-saved-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dz-saved-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dz-saved-list li { position: relative; min-width: 0; }
.dz-saved-list li.new { animation: dz-saved-in .8s var(--expo) both; }
@keyframes dz-saved-in { from { opacity: 0; transform: translateY(12px) scale(.92); } }
.dz-saved-list .dz-card { width: 100%; }
.dz-saved-list .dz-card-t { font-size: 16px; line-height: 1.15; min-height: 2.3em; padding-right: 32px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dz-saved-list li:has(.dz-card.on) .dz-saved-x { color: rgba(255, 255, 255, .7); }
.dz-saved-x { position: absolute; bottom: 6px; right: 4px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; corner-shape: superellipse(2.15); background: transparent; color: var(--mute); transition: color .2s var(--ease), background-color .2s var(--ease); }
@media (hover: hover) { .dz-saved-x:hover { color: var(--ink); background: var(--mist); } }
.dz-saved-x::before { content: ''; position: absolute; inset: -6px; }
.dz-saved-x svg { width: 16px; height: 16px; fill: none; }
.dz-saved-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dz-saved-foot p { font-size: 14px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .dz-saved-list li.new { animation: none; } }

/* what went to Viktor, shown back once it is sent */
.ev-sent { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-sent:empty { display: none; }
.ev-sent li { width: 76px; height: 76px; border-radius: 14px; corner-shape: superellipse(2.15); overflow: hidden; background: var(--mist); animation: ev-sent-in .9s var(--expo) both; }
.ev-sent img { width: 100%; height: 100%; object-fit: cover; }
@keyframes ev-sent-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .ev-sent li { animation: none; } }

/* the original site's graphics, shown no wider than they were made */
.orig-fig { margin: 28px 0 0; border-radius: 22px; corner-shape: superellipse(1.6); overflow: hidden; background: #fff; }
.orig-fig img { display: block; width: 100%; height: auto; }
.also-row { display: grid; gap: 20px 32px; align-items: end; margin-top: clamp(22px, 3vw, 34px); }
.also-row .also { margin-top: 0; }
.also-row .bench-fig { margin: 0; }
@media (min-width: 760px) { .also-row { grid-template-columns: auto 1fr; } .also-row .bench-fig { width: 288px; } }
.proc-report { position: absolute; right: 5%; bottom: 6%; width: min(30%, 220px); margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(11,12,16,.08), 0 18px 40px -18px rgba(11,12,16,.35); }
.proc-report img { display: block; width: 100%; height: auto; object-fit: contain; padding: 0; }
.menu-in .svc-ic { width: 24px; height: 24px; align-self: center; }
/* the home page's original slides */
.slides { padding-block: clamp(56px, 8vw, 110px) 0; }
.slides-in { display: grid; gap: 14px; justify-items: center; }
.slide { width: 100%; max-width: 940px; margin: 0; border-radius: 24px; corner-shape: superellipse(1.6); overflow: hidden; background: var(--mist); }
.slide img { display: block; width: 100%; height: auto; aspect-ratio: 940 / 327; object-fit: cover; }
.proc-step[data-step="1"] .proc-mobile-fig { max-width: 297px; }

/* ---------- the age of a diamond ---------- */
.deep { position: relative; height: 1300svh; }
.deep-stick { position: sticky; top: 0; height: 100svh; overflow: clip; }
.deep-slot { position: absolute; left: 26%; right: 0; top: calc(var(--hdr) + 4px); height: 56svh; }
.deep-ruler { position: absolute; left: 0; top: calc(var(--hdr) + 10px); width: 40%; height: calc(62svh - var(--hdr)); pointer-events: none; }
.deep-intro { position: absolute; left: var(--pad); right: var(--pad); bottom: 9svh; z-index: 2; display: grid; gap: 12px; transition: opacity .6s var(--ease), transform .8s var(--expo); }
.deep-intro .display { font-size: clamp(44px, 12vw, 96px); }
.deep-intro .lead { max-width: 26em; }
.deep-intro.gone { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.deep-events { position: absolute; left: var(--pad); right: var(--pad); bottom: 8svh; z-index: 2; }
.deep-ev { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .7s var(--expo); pointer-events: none; }
.deep-ev.on { opacity: 1; transform: none; }
.deep-when { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.deep-text { font: 400 clamp(25px, 6.2vw, 40px)/1.15 var(--serif); color: var(--ink); max-width: 17em; text-wrap: balance; }
.deep-words { font: italic 400 clamp(22px, 5.4vw, 32px)/1.2 var(--serif); color: var(--ink); }
.deep-words[hidden] { display: none; }
@media (min-width: 900px) {
  .deep-slot { left: 40%; top: var(--hdr); bottom: 0; height: auto; }
  .deep-ruler { left: max(var(--pad), (100vw - var(--max)) / 2); width: 30vw; top: calc(var(--hdr) + 6svh); height: calc(88svh - var(--hdr)); }
  .deep-intro, .deep-events { left: calc(max(var(--pad), (100vw - var(--max)) / 2) + 15vw); right: auto; width: min(30vw, 440px); }
  .deep-intro { bottom: auto; top: 50%; transform: translateY(-50%); }
  .deep-intro.gone { transform: translateY(calc(-50% - 14px)); }
  .deep-events { bottom: auto; top: 50%; height: 0; }
  .deep-ev { bottom: auto; top: 0; transform: translateY(calc(-50% + 10px)); }
  .deep-ev.on { transform: translateY(-50%); }
}
.deep-end { padding-block: clamp(80px, 12vw, 160px); }
.deep-end-in { display: grid; gap: 48px; }
.deep-end-in > div { display: grid; gap: 16px; align-content: start; }
.deep-lab { font-size: 15px; color: var(--mute); max-width: 30em; }
.deep-src ul { display: grid; }
.deep-src a { display: inline-block; padding-block: 13px; font-size: 14px; line-height: 18px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .deep-end-in { grid-template-columns: 1.2fr 1fr; } }
.deep-card { display: grid; grid-template-columns: 1fr 44px; gap: 6px 16px; align-items: center; margin-bottom: clamp(36px, 5vw, 56px); padding: 26px 24px; border-radius: 26px; corner-shape: superellipse(1.6); background: var(--mist); color: var(--ink); }
.deep-card .label, .deep-card-t, .deep-card-x { grid-column: 1; }
.deep-card-t { font: 400 clamp(30px, 6vw, 48px)/1.05 var(--serif); }
.deep-card-x { font-size: 15.5px; color: var(--mute); max-width: 34em; }
.deep-card .go { grid-column: 2; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 16px; corner-shape: superellipse(2.15); display: grid; place-items: center; background: #fff; transition: transform .35s var(--expo); }
@media (hover: hover) { .deep-card:hover .go { transform: translateX(4px); } }

.forge-age { margin-top: 18px; }
.deep-yours { display: grid; gap: 12px; grid-column: 1 / -1; }
.deep-yours[hidden] { display: none; }
.deep-yours-card { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 18px; padding: 12px 16px 12px 12px; border-radius: 26px; corner-shape: superellipse(1.6); background: var(--mist); color: var(--ink); max-width: 640px; }
.deep-yours-img { width: 96px; height: 96px; border-radius: 18px; corner-shape: superellipse(2.15); background: #fff; }
.deep-yours-t { font: 400 clamp(20px, 4.6vw, 26px)/1.2 var(--serif); }
.deep-yours-card .go { width: 44px; height: 44px; border-radius: 16px; corner-shape: superellipse(2.15); display: grid; place-items: center; background: #fff; transition: transform .35s var(--expo); }
@media (hover: hover) { .deep-yours-card:hover .go { transform: translateX(4px); } }

/* ---------- ring sizes ---------- */
.dz-help { justify-self: start; margin-top: 10px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding-block: 12px; }
.size-ways { display: grid; gap: 14px; }
@media (min-width: 900px) { .size-ways { grid-template-columns: repeat(3, 1fr); } }
.size-print { margin: 0; padding: clamp(16px, 3vw, 32px); border-radius: 26px; corner-shape: superellipse(1.6); background: #fff; box-shadow: 0 1px 2px rgba(11,12,16,.05), 0 30px 70px -40px rgba(11,12,16,.3); overflow-x: auto; }
.size-print .sizer { display: block; width: 100%; max-width: 760px; height: auto; }
.size-table { width: 100%; border-collapse: collapse; font: 400 15px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.size-table caption { text-align: left; font-size: 14px; color: var(--mute); padding-bottom: 10px; }
.size-table th, .size-table td { text-align: left; padding: 9px 0; }
.size-table thead th { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.size-table tbody tr { box-shadow: 0 -1px 0 rgba(11,12,16,.07); }
.size-table tbody tr:not(.whole) { color: var(--mute); }
.size-table tbody th { font: 400 20px/1 var(--serif); color: var(--ink); width: 30%; }
@media print {
  @page { margin: 12mm; }
  body.size-page > *:not(main), body.size-page main > section:not(.size-print-sec), .size-print-sec .sec-head { display: none !important; }
  .size-print-sec { padding: 0 !important; }
  .size-print { box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
  .size-print .sizer { width: 180mm; max-width: none; height: 132mm; }
  .rise { opacity: 1 !important; transform: none !important; }
}

/* ---------- small helpers ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- call or text: the shop's number takes both ---------- */
.ct { display: inline-flex; gap: 12px; }
@media (max-width: 420px) { .actions .ct { display: flex; width: 100%; } .actions .ct .btn { flex: 1 1 0; width: auto; padding: 0 12px; } }
.sheet-foot .ct { display: flex; gap: 10px; }
.sheet-foot .ct .btn { flex: 1 1 0; width: auto; }
.visit-sms { font-size: 16px; color: var(--body); max-width: 30em; }
.visit-sms a, .ftr-sms a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.appt-sms { font-size: 15px; color: var(--mute); max-width: 32em; }
.ftr-sms { font-size: 14px; color: var(--mute); max-width: 18em; }

/* ---------- the theme switch ----------
   Its words say where it goes. In Light it is a small window onto the night; in MotusMagic, a pearl window back
   into the day. */
.tm { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 16px; corner-shape: superellipse(2.15);
  font: 500 14.5px/1 var(--sans); white-space: nowrap; cursor: pointer; background: #0b1030; color: #ece2ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 22px -12px rgba(76, 48, 180, .75);
  transition: transform .25s var(--ease), box-shadow .35s var(--ease); }
.tm > span { display: inline-flex; align-items: center; gap: 8px; }
.tm .ic { width: 18px; height: 18px; color: #c084fc; }
.tm-to-light { display: none !important; }
@media (hover: hover) { .tm:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 28px -10px rgba(120, 80, 240, .9), 0 0 30px -12px rgba(192, 132, 252, .8); } }
.tm:active { transform: scale(.97); }
.tm-hdr { display: none; }
@media (min-width: 1000px) { .tm-hdr { display: inline-flex; min-height: 42px; padding: 0 12px; } .tm-hdr .tm-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 1280px) { .tm-hdr { padding: 0 14px; } .tm-hdr .tm-t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } }
.hero-tm { display: flex; justify-content: center; margin-top: 4px; }
/* without the script there is nothing to switch, so the switches step aside */
:root:not(.js) .tm, :root:not(.js) .tm-seg { display: none; }
.ftr-theme { justify-self: start; }
.tm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 20px; corner-shape: superellipse(2.15); background: var(--mist); }
.tm-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 15px; corner-shape: superellipse(2.15); font: 500 15px/1 var(--sans); color: var(--body); transition: background-color .3s var(--ease), color .3s var(--ease); }
.tm-seg .ic { width: 18px; height: 18px; }
.tm-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11, 12, 16, .08), 0 6px 16px -10px rgba(11, 12, 16, .3); }
/* switching themes: the new theme opens out from the switch like an iris, and the stones re-light behind it */
:root.theming * { view-transition-name: none !important; }
:root.theming::view-transition-old(root) { animation: none; }
:root.theming::view-transition-new(root) { animation: tm-iris .95s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes tm-iris { from { clip-path: circle(0 at var(--tx, 50%) var(--ty, 50%)); } to { clip-path: circle(var(--tr, 150vmax) at var(--tx, 50%) var(--ty, 50%)); } }

/* ---------- reviews ----------
   Five live diamonds for the five stars; the bars are the Yelp count at each star level, one hue, the number beside
   each bar. */
.rv { padding-block: clamp(72px, 12vw, 150px); }
.rv-page { padding-top: 0; }
.rv-stones { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); width: min(100%, 520px); height: clamp(84px, 22vw, 128px); margin: 0 0 4px -10px; opacity: 0; transition: opacity .7s var(--ease); }
.rv.on .rv-stones, :root:not(.js) .rv-stones { opacity: 1; }
.rv-stone { position: relative; }
.rv-head .h2 { max-width: 12em; }
.rv-asof { font-size: 14px; color: var(--mute); }
.rv-bars { display: grid; gap: 10px; width: min(100%, 460px); margin-top: 16px; }
.rv-bars li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 30px; align-items: center; gap: 14px; font-size: 14.5px; color: var(--body); }
.rv-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.rv-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(11, 12, 16, .07); }
.rv-bar i { position: absolute; inset: 0; border-radius: 4px; background: var(--gold); clip-path: inset(0 100% 0 0 round 4px); transition: clip-path 1.3s var(--expo); }
.rv.on .rv-bar i, :root:not(.js) .rv-bar i { clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0 round 4px); }
.rv-bars-topics li { grid-template-columns: 11.8em minmax(48px, 1fr) 30px; white-space: nowrap; }
.rv-bars li:nth-child(2) i { transition-delay: .08s; } .rv-bars li:nth-child(3) i { transition-delay: .16s; } .rv-bars li:nth-child(4) i { transition-delay: .24s; } .rv-bars li:nth-child(5) i { transition-delay: .32s; }
.rv-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rv-themes li { padding: 11px 16px; border-radius: 15px; corner-shape: superellipse(2.15); background: var(--mist); font-size: 15px; color: var(--ink); }
.rv .btn .ic { width: 18px; height: 18px; }
.rv-leave { padding-block: clamp(24px, 4vw, 48px) 0; }
.rv-leave-in { display: grid; gap: 12px; justify-items: start; padding-block: clamp(32px, 5vw, 56px); box-shadow: 0 -1px 0 rgba(11, 12, 16, .07); }
@media (prefers-reduced-motion: reduce) { .rv-bar i { transition: none; } .rv-stones { transition: none; } }

/* reviews, second form: both platforms, a card each */
.rv-head { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(32px, 5vw, 56px); }
.rv-cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .rv-cards { grid-template-columns: 1fr 1fr; gap: 20px; } }
.rv-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3.4vw, 36px); border-radius: 30px; corner-shape: superellipse(1.6); background: var(--mist); }
.rv-plat { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.rv-score { font: 400 clamp(64px, 10vw, 104px)/.9 var(--serif); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rv-count { font-size: 15px; color: var(--body); }
.rv-card .rv-bars { margin-top: 6px; }
.rv-card .link .ic { width: 16px; height: 16px; }
.rv-links { display: grid; gap: 2px; justify-items: start; }
/* the links sit at the foot of each card, so the two cards line up */
.rv-card > .link:last-child, .rv-card > .rv-links { margin-top: auto; padding-top: 8px; }
.rv-card > .link { align-self: flex-start; }
.rv-mention { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 56px); justify-items: start; }

/* reviews in full: each in Yelp's own frame, on a mat; a rail on phones, columns on wide screens */
.rv-voices { display: grid; gap: clamp(18px, 2.6vw, 28px); margin-top: clamp(44px, 7vw, 84px); }
.rv-wall { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 10px; }
.rv-wall::-webkit-scrollbar { display: none; }
/* Yelp's review needs about 340px or its right edge is cut, so the frame never gets less */
.rv-yelp { position: relative; flex: 0 0 max(348px, min(88vw, 400px)); scroll-snap-align: center; margin: 0; padding: 4px; border-radius: 12px; corner-shape: superellipse(1.6); background: var(--mist); }
.rv-yelp iframe { display: block; width: 100%; height: 0; border: 0; opacity: 0; transition: opacity .8s var(--ease); }
.rv-yelp.is-live iframe { opacity: 1; }
.rv-yelp.is-live .rv-yelp-alt { display: none; }
.rv-yelp-alt { display: grid; gap: 6px; justify-items: start; padding: 20px 20px 22px; border-radius: 18px; corner-shape: superellipse(1.6); background: var(--bg); color: var(--ink); }
.rv-yelp-stars { color: #d32323; letter-spacing: .14em; font-size: 15px; }
.rv-yelp-who { font-weight: 500; }
.rv-yelp-when { font-size: 14px; color: var(--mute); }
.rv-yelp-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 12, 16, .25); }
.rv-yelp-go .ic { width: 15px; height: 15px; }
@media (min-width: 900px) {
  .rv-wall { display: block; columns: 2; column-gap: 18px; overflow: visible; margin-inline: 0; padding: 0; }
  .rv-yelp { break-inside: avoid; margin: 0 0 18px; padding: 10px; border-radius: 26px; }
}
@media (min-width: 1240px) { .rv-wall:not(.rv-wall-4) { columns: 3; } }
@media (prefers-reduced-motion: reduce) { .rv-yelp iframe { transition: none; } }

/* Questions: a topic per group, and each question with its answer in plain view */
.qa { padding-block: 0 clamp(40px, 6vw, 80px); }
.qa-group { display: grid; gap: 0 48px; padding-block: clamp(20px, 3vw, 32px); }
.qa-group + .qa-group { box-shadow: 0 -1px 0 rgba(11,12,16,.07); }
.qa-group > .label { padding-top: 24px; }
.qa-item { display: grid; gap: 10px; padding-block: 24px; max-width: 46em; scroll-margin-top: calc(var(--hdr) + 24px); }
.qa-item + .qa-item { box-shadow: 0 -1px 0 rgba(11,12,16,.07); }
.qa-item h3 { font: 400 clamp(25px, 3.4vw, 31px)/1.15 var(--serif); color: var(--ink); letter-spacing: -.005em; }
.qa-item .link { margin-top: 2px; }
.qa-tel { white-space: nowrap; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11,12,16,.25); }
@media (min-width: 900px) {
  .qa-group { grid-template-columns: minmax(180px, 250px) 1fr; }
  .qa-group > .label { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; }
}

/* =====================================================================================================
   MotusMagic: the night theme. A navy night where glass holds light and purple binds a spectrum of ice, pink and
   amber; the stones are lit by evening spotlights and are the light of the page. Every rule is scoped to
   :root[data-theme="magic"], so the light base above stays as it is.
   ===================================================================================================== */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/sora.woff2) format('woff2'); }
:root[data-theme="magic"] { --bg: #060b22; --night: #060b22; --abyss: #0a1331; --indigo: #10183c; --dusk: #171b3a; --plum: #1c1334; --deep: #04071a; --ink: #f7f5ff; --body: #dcdaf6; --mute: #c4c4e6; --violet: #8b5cf6; --orchid: #c084fc; --lilac: #d8b4fe; --ice: #d8effc; --azure: #9cc3ef; --cobalt: #7282ed; --pink: #f18ac6; --coral: #e8786a; --peach: #f5a183; --amber: #fdc26f; --gold: #fcd9a5; --growth: #6ee7c8; --pearl: #f8f1fb; --mist: rgba(168, 160, 255, .08); --mist-2: rgba(190, 182, 255, .15); --line: rgba(196, 206, 255, .12); --glass: linear-gradient(180deg, rgba(58, 48, 98, .44), rgba(26, 22, 58, .5)); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .1); --rim: linear-gradient(160deg, rgba(226, 238, 255, .42), rgba(156, 195, 239, .14) 26%, transparent 52%, rgba(241, 138, 198, .18) 82%, rgba(168, 85, 247, .24)); --drop: 0 30px 70px -34px rgba(2, 3, 14, .85); --grad-text: linear-gradient(118deg, #f4eeff 0%, #dccbff 30%, #bb9bfa 62%, #9a84f3 100%); --grad-cta: linear-gradient(135deg, #a77af8 0%, #8a63f4 52%, #745cee 100%); --voice: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --engrave: 'Instrument Serif', Georgia, 'Times New Roman', serif; color-scheme: dark; }
:root[data-theme="magic"] ::selection { background: rgba(168, 85, 247, .45); }
:root[data-theme="magic"] :focus-visible { outline: 2px solid var(--lilac); }
:root[data-theme="magic"] .skip { background: var(--pearl); color: #1f1a44; }
:root[data-theme="magic"] .display { font-family: var(--voice); font-weight: 560; font-size: clamp(40px, 9.6vw, 96px); line-height: 1.02; letter-spacing: -.04em; }
:root[data-theme="magic"] .display, :root[data-theme="magic"] .h2, :root[data-theme="magic"] .hero-name, :root[data-theme="magic"] .pc-title { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; margin-bottom: -.08em; }
:root[data-theme="magic"] .display em, :root[data-theme="magic"] .h2 em { font-style: normal; }
:root[data-theme="magic"] .h2 { font: 560 clamp(30px, 6.4vw, 58px)/1.06 var(--voice); letter-spacing: -.036em; }
:root[data-theme="magic"] .h3 { font: 560 clamp(21px, 3.2vw, 27px)/1.2 var(--voice); letter-spacing: -.02em; }
:root[data-theme="magic"] .big { font: 500 clamp(20px, 3vw, 28px)/1.35 var(--voice); letter-spacing: -.018em; }
:root[data-theme="magic"] .label { font: 500 13.5px/1.45 var(--voice); letter-spacing: -.005em; color: var(--orchid); text-transform: none; }
:root[data-theme="magic"] .label a { text-decoration-color: rgba(216, 180, 254, .45); }
:root[data-theme="magic"] .num { font: 560 13px/1 var(--voice); font-variant-numeric: tabular-nums; letter-spacing: normal; }
:root[data-theme="magic"] .note { color: var(--body); background: var(--glass); box-shadow: var(--glass-hi); corner-shape: superellipse(2.15); }
:root[data-theme="magic"] .btn { font: 500 15.5px/1 var(--voice); letter-spacing: -.01em; transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .45s var(--expo); }
:root[data-theme="magic"] .btn-solid { background: var(--grad-cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(40, 10, 90, .35), 0 10px 28px -10px rgba(140, 100, 255, .6); }
:root[data-theme="magic"] .btn-ghost { box-shadow: inset 0 0 0 1px var(--line), var(--glass-hi); }
:root[data-theme="magic"] .link { font: 500 15.5px/1.3 var(--voice); letter-spacing: -.01em; color: var(--lilac); }
:root[data-theme="magic"] .hdr.is-solid { background: rgba(6, 11, 34, .9); box-shadow: 0 1px 0 var(--line); }
:root[data-theme="magic"] .brand { color: var(--pearl); --lion-ink: #f8f1fb; --lion-body: #0a0f2c; --lion-tag: #d8b4fe; }
:root[data-theme="magic"] .brand-ftr { --lion-body: var(--deep); }
:root[data-theme="magic"] .menu-in { position: relative; background: linear-gradient(180deg, rgba(30, 26, 70, .97), rgba(12, 14, 40, .98)); corner-shape: superellipse(1.6); box-shadow: var(--glass-hi), 0 30px 70px -24px rgba(2, 3, 14, .9); }
:root[data-theme="magic"] .menu-in .n { font: 560 12px var(--voice); }
:root[data-theme="magic"] .menu-in .t { font: 540 16px/1.25 var(--voice); letter-spacing: -.015em; }
:root[data-theme="magic"] .sheet { background: var(--bg); }
:root[data-theme="magic"] .sheet-big { font: 560 30px/1.2 var(--voice); letter-spacing: -.03em; }
:root[data-theme="magic"] .sheet-sub a { display: flex; align-items: center; gap: 12px; --hue: var(--orchid); }
:root[data-theme="magic"] .sheet-sub a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--hue); box-shadow: 0 0 10px var(--hue); }
:root[data-theme="magic"] .sheet-sub a[href*="loose-diamonds"] { --hue: var(--ice); }
:root[data-theme="magic"] .sheet-sub a[href*="colored-stones"] { --hue: var(--pink); }
:root[data-theme="magic"] .sheet-sub a[href*="wedding"] { --hue: var(--amber); }
:root[data-theme="magic"] .sheet-sub a[href*="appraisals"] { --hue: var(--azure); }
:root[data-theme="magic"] .sheet-sub a[href*="repair"] { --hue: var(--peach); }
:root[data-theme="magic"] .stone .fallback { opacity: .7; }
:root[data-theme="magic"] .hero-h { font-size: clamp(40px, 10vw, 100px); }
:root[data-theme="magic"] .sec-head > p:not(.label) { color: var(--body); }
:root[data-theme="magic"] .svc-list a { transition: background-color .3s var(--ease), box-shadow .3s var(--ease); --hue: var(--orchid); }
:root[data-theme="magic"] .svc-list li + li a { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .svc-list a[href*="loose-diamonds"] { --hue: var(--ice); }
:root[data-theme="magic"] .svc-list a[href*="colored-stones"] { --hue: var(--pink); }
:root[data-theme="magic"] .svc-list a[href*="wedding"] { --hue: var(--amber); }
:root[data-theme="magic"] .svc-list a[href*="appraisals"] { --hue: var(--azure); }
:root[data-theme="magic"] .svc-list a[href*="repair"] { --hue: var(--peach); }
:root[data-theme="magic"] .svc-list .n { font: 560 13px var(--voice); font-variant-numeric: tabular-nums; color: var(--hue); letter-spacing: normal; }
:root[data-theme="magic"] .svc-list .svc-ic { color: var(--hue); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hue) 55%, transparent)); }
:root[data-theme="magic"] .svc-list .t { font: 560 clamp(23px, 5vw, 38px)/1.1 var(--voice); letter-spacing: -.03em; }
:root[data-theme="magic"] .svc-list .d { color: var(--body); }
:root[data-theme="magic"] .svc-list .go { corner-shape: superellipse(2.15); box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--expo), background-color .3s, color .3s; }
:root[data-theme="magic"] .svc-peek-in { corner-shape: superellipse(1.6); box-shadow: 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .proc { background: var(--plum); }
:root[data-theme="magic"] .proc-stage { background: var(--plum); }
:root[data-theme="magic"] .proc-stage::after { background: linear-gradient(var(--plum), transparent); }
:root[data-theme="magic"] .proc-frame { corner-shape: superellipse(1.6); box-shadow: 0 0 0 1px var(--line), var(--drop), 0 0 80px -40px rgba(168, 85, 247, .5); }
:root[data-theme="magic"] .proc-sweep { background: linear-gradient(transparent, rgba(139, 92, 246, .8) 20%, rgba(156, 195, 239, .8) 80%, transparent); }
:root[data-theme="magic"] .proc-paper { color: #0b0c10; }
:root[data-theme="magic"] .proc-paper .lion-paper { --lion-ink: #0b0c10; --lion-body: #fff; }
:root[data-theme="magic"] .proc-tel { font: 540 clamp(20px, 3vw, 30px)/1 var(--voice); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root[data-theme="magic"] .proc-dots li { background: rgba(216, 180, 254, .3); }
:root[data-theme="magic"] .proc-dots li.on { background: var(--lilac); box-shadow: 0 0 10px rgba(192, 132, 252, .7); }
:root[data-theme="magic"] .piece-img { box-shadow: 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .piece-t { font: 540 18px/1.25 var(--voice); letter-spacing: -.02em; }
:root[data-theme="magic"] .piece-s { font-size: 14px; line-height: 1.5; letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .quote-text blockquote p { font: 540 clamp(27px, 5vw, 50px)/1.12 var(--voice); letter-spacing: -.035em; background: linear-gradient(118deg, #f4eeff 0%, #d8effc 34%, #bb9bfa 70%, #f18ac6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="magic"] .quote-text figcaption { font: 500 14px var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .art-img { corner-shape: superellipse(1.6); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="magic"] .art-d { font: 500 13px var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .art-t { font: 540 19px/1.25 var(--voice); letter-spacing: -.02em; }
:root[data-theme="magic"] .art-x { color: var(--body); }
:root[data-theme="magic"] .art-row + .art-row { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .visit { background: linear-gradient(180deg, #f8f4fd, #ece7f8); color-scheme: light; --ink: #1f1a44; --body: #3a3566; --mute: #4b4677; --gold: #8a5a12; --orchid: #6d3fc4; --lilac: #5b34b0; --mist: rgba(70, 56, 160, .07); --mist-2: rgba(70, 56, 160, .13); --line: rgba(40, 30, 100, .1); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .7); }
:root[data-theme="magic"] .visit .h2 { background: linear-gradient(118deg, #2a2160 0%, #5b34b0 60%, #9a4fd0 100%); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="magic"] .hours li + li { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .hours li span:last-child { font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: normal; }
:root[data-theme="magic"] .status i { background: #8e8bb4; }
:root[data-theme="magic"] .status.open i { background: #12a06a; box-shadow: 0 0 10px rgba(110, 231, 200, .8); }
:root[data-theme="magic"] .status.open i::after { background: #12a06a; }
:root[data-theme="magic"] .band-in { position: relative; background: linear-gradient(180deg, rgba(62, 50, 106, .55), rgba(22, 18, 54, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 48px -28px rgba(168, 85, 247, .4), 0 0 44px -10px rgba(168, 85, 247, .38), 0 0 120px -34px rgba(241, 138, 198, .3), 0 36px 90px -40px rgba(5, 4, 20, .9); }
:root[data-theme="magic"] .vis-img { box-shadow: 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .terms > div + div { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .terms dt { font: 540 18px/1.3 var(--voice); letter-spacing: -.02em; }
:root[data-theme="magic"] .chips li { box-shadow: inset 0 0 0 1px var(--line); corner-shape: superellipse(2.15); }
:root[data-theme="magic"] .center-note { color: var(--body); }
:root[data-theme="magic"] .flow li { position: relative; background: var(--glass); box-shadow: var(--glass-hi), var(--drop); }
:root[data-theme="magic"] .flow h2 { font: 560 19px/1.25 var(--voice); letter-spacing: -.02em; }
:root[data-theme="magic"] .cs-stage { background: linear-gradient(var(--sec-bg, var(--bg)) 82%, transparent); }
:root[data-theme="magic"] .scale li { font: 500 13px/1 var(--voice); corner-shape: superellipse(2.15); box-shadow: inset 0 0 0 1px var(--line); color: var(--body); letter-spacing: normal; }
:root[data-theme="magic"] .scale li:first-child { background: var(--pearl); color: #1f1a44; box-shadow: 0 0 18px -4px rgba(216, 239, 252, .7); }
:root[data-theme="magic"] .anatomy .an-text { font-family: var(--voice); fill: var(--body); letter-spacing: normal; }
:root[data-theme="magic"] .birth-stone-name { font: 560 clamp(30px, 5vw, 46px)/1.05 var(--voice); letter-spacing: -.035em; }
:root[data-theme="magic"] .birth-color { color: var(--body); }
:root[data-theme="magic"] .months button { corner-shape: superellipse(2.15); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .months .m { font: 500 12.5px var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .months .s { font: 540 16px/1.2 var(--voice); letter-spacing: -.015em; }
:root[data-theme="magic"] .months button[aria-pressed="true"] { background: var(--pearl); box-shadow: 0 0 24px -6px rgba(216, 239, 252, .6); }
:root[data-theme="magic"] .months button[aria-pressed="true"] .s { color: #1f1a44; }
:root[data-theme="magic"] .months button[aria-pressed="true"] .m, :root[data-theme="magic"] .months button[aria-pressed="true"] .c { color: #4b4677; }
:root[data-theme="magic"] .pair-card figure { corner-shape: superellipse(1.6); box-shadow: 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .repair { position: relative; background: var(--glass); box-shadow: var(--glass-hi), var(--drop); }
:root[data-theme="magic"] .dial-face { background: radial-gradient(circle at 50% 38%, #1e2350, #0b1030 70%); box-shadow: 0 0 0 1px var(--line), var(--drop), inset 0 0 0 10px rgba(168, 160, 255, .06), 0 0 60px -20px rgba(156, 195, 239, .4); }
:root[data-theme="magic"] .dial-face i { background: linear-gradient(rgba(216, 226, 255, .45) 0 5%, transparent 5%); }
:root[data-theme="magic"] .dial-face b { background: var(--pearl); }
:root[data-theme="magic"] .dc { background: var(--pearl); }
:root[data-theme="magic"] .pc-main { box-shadow: 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .pc-zoom { corner-shape: superellipse(2.15); background: rgba(10, 14, 40, .78); color: #f7f5ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
:root[data-theme="magic"] .pc-thumbs button { corner-shape: superellipse(2.15); opacity: .55; box-shadow: none; }
:root[data-theme="magic"] .pc-thumbs button[aria-selected="true"] { box-shadow: 0 0 0 2px var(--lilac); }
:root[data-theme="magic"] .pc-title { font-size: clamp(34px, 6.6vw, 60px); }
:root[data-theme="magic"] .spec { font: 500 14px/1.5 var(--voice); color: var(--gold); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .pc-nav a { box-shadow: inset 0 0 0 1px var(--line); corner-shape: superellipse(2.15); font: 540 15px/1.25 var(--voice); letter-spacing: -.015em; }
:root[data-theme="magic"] .lightbox { background: var(--deep); }
:root[data-theme="magic"] .lightbox::backdrop { background: var(--deep); }
:root[data-theme="magic"] .lb-close { corner-shape: superellipse(2.15); background: var(--mist-2); }
:root[data-theme="magic"] .post-head .display { font-size: clamp(34px, 7vw, 70px); }
:root[data-theme="magic"] .byline { color: var(--orchid); font: 500 14px var(--voice); }
:root[data-theme="magic"] .post-fig img { corner-shape: superellipse(1.6); }
:root[data-theme="magic"] .appt-side { position: relative; background: var(--glass); box-shadow: var(--glass-hi), var(--drop); }
:root[data-theme="magic"] .appt-side .hours li + li { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .map { corner-shape: superellipse(1.6); background: var(--glass); box-shadow: var(--glass-hi); }
:root[data-theme="magic"] .map iframe { filter: grayscale(1) invert(.92) hue-rotate(200deg) contrast(.9); }
:root[data-theme="magic"] .map-poster { background-image: radial-gradient(circle, rgba(216, 180, 254, .16) 1px, transparent 1.4px); --lion-ink: #f8f1fb; --lion-body: #10183c; }
:root[data-theme="magic"] .msg label { color: var(--body); }
:root[data-theme="magic"] .msg input, :root[data-theme="magic"] .msg textarea { box-shadow: inset 0 0 0 1px var(--line); corner-shape: superellipse(2.15); }
:root[data-theme="magic"] .coll { background: linear-gradient(180deg, #070b23 0%, #120e2e 50%, #24163a 100%); }
:root[data-theme="magic"] .ftr { background: var(--deep); box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .ftr-brand p { color: var(--body); }
:root[data-theme="magic"] .ftr-base { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .forge { background: var(--night); }
:root[data-theme="magic"] .forge-cap p { font: 540 clamp(21px, 4.8vw, 30px)/1.25 var(--voice); letter-spacing: -.025em; }
:root[data-theme="magic"] .forge-track { background: var(--line); }
:root[data-theme="magic"] .forge-track i { background: linear-gradient(90deg, var(--cobalt), var(--orchid), var(--pink)); box-shadow: 0 0 10px rgba(192, 132, 252, .7); }
:root[data-theme="magic"] .hero-name { margin: 0 0 24px; font: 560 clamp(46px, 14.6vw, 150px)/1 var(--voice); letter-spacing: -.045em; }
:root[data-theme="magic"] .hero-tag { font: 500 15px/1.4 var(--voice); letter-spacing: -.005em; color: var(--lilac); text-transform: none; }
:root[data-theme="magic"] .hero-pin { background: linear-gradient(180deg, #070b23 0%, #120e2e 48%, #26173a 100%); }
:root[data-theme="magic"] .hero-white { background: var(--night); }
:root[data-theme="magic"] .labs { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .labs li { box-shadow: 0 1px 0 var(--line); font: 560 21px/1.15 var(--voice); letter-spacing: -.025em; }
:root[data-theme="magic"] .labs li span { min-width: 2.6em; font: 500 13px/1 var(--voice); color: var(--gold); letter-spacing: normal; }
:root[data-theme="magic"] .dz-stage::after { background: linear-gradient(var(--bg), transparent); }
:root[data-theme="magic"] .dz-head .display { font-size: clamp(34px, 8vw, 64px); }
:root[data-theme="magic"] .dz-group legend { font: 500 14px/1 var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .dz-chip { box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
:root[data-theme="magic"] .dz-chip:has(input:checked) { background: rgba(139, 92, 246, .3); box-shadow: inset 0 0 0 1px rgba(216, 180, 254, .7), 0 0 22px -6px rgba(168, 85, 247, .7); }
:root[data-theme="magic"] .dz-chip:has(input:focus-visible) { outline: 2px solid var(--lilac); }
:root[data-theme="magic"] .dz-chip.off { opacity: .4; }
:root[data-theme="magic"] .sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-theme="magic"] .dz-sum { font: 540 clamp(20px, 4.6vw, 26px)/1.3 var(--voice); letter-spacing: -.025em; }
:root[data-theme="magic"] .dz-note { color: var(--body); }
:root[data-theme="magic"] .appt-design { background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .appt-saved-list span { font: 540 13.5px/1.25 var(--voice); letter-spacing: -.01em; }
:root[data-theme="magic"] .appt-design-t { font: 540 clamp(19px, 4.2vw, 24px)/1.25 var(--voice); letter-spacing: -.025em; }
:root[data-theme="magic"] .appt-design-n { color: var(--body); }
:root[data-theme="magic"] .appt-design-w { font: italic 400 22px/1.3 var(--engrave); color: var(--gold); }
:root[data-theme="magic"] .dz-path { padding: 0 8px; box-shadow: inset 0 0 0 1px var(--line); font: 500 14.5px/1.15 var(--voice); letter-spacing: -.02em; transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
:root[data-theme="magic"] .dz-path:has(input:checked) { background: var(--grad-cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 10px 28px -12px rgba(140, 100, 255, .7); }
:root[data-theme="magic"] .dz-path:has(input:focus-visible) { outline: 2px solid var(--lilac); }
:root[data-theme="magic"] .dz-step { font: 500 14.5px/1 var(--voice); letter-spacing: -.01em; }
:root[data-theme="magic"] .dz-step span { font: 560 12px/1 var(--voice); }
:root[data-theme="magic"] .dz-step[aria-selected="true"] span { background: var(--lilac); color: #1f1a44; box-shadow: 0 0 12px rgba(192, 132, 252, .6); }
:root[data-theme="magic"] .dz-select, :root[data-theme="magic"] .dz-text { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .dz-select option { background: #10183c; color: #f7f5ff; }
:root[data-theme="magic"] .dz-select:focus-visible, :root[data-theme="magic"] .dz-text:focus-visible { outline: 2px solid var(--lilac); }
:root[data-theme="magic"] .dz-engr { font: italic 400 19px/1.3 var(--engrave); color: var(--gold); }
:root[data-theme="magic"] .dz-dirs-h { font: 500 14px/1 var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .dz-dir { min-height: 44px; color: var(--body); font: 500 14.5px/1 var(--voice); letter-spacing: -.01em; }
:root[data-theme="magic"] .dz-dir[aria-selected="true"] { background: rgba(139, 92, 246, .3); box-shadow: inset 0 0 0 1px rgba(216, 180, 254, .7), 0 0 22px -6px rgba(168, 85, 247, .7); }
:root[data-theme="magic"] .dz-card { background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .dz-card-t { font: 540 14.5px/1.25 var(--voice); letter-spacing: -.015em; }
:root[data-theme="magic"] .dz-card-k { font: 500 12.5px/1.2 var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .dz-card.on { background: rgba(139, 92, 246, .3); box-shadow: inset 0 0 0 1px rgba(216, 180, 254, .7), 0 0 26px -8px rgba(168, 85, 247, .7); }
:root[data-theme="magic"] .dz-card.on .dz-card-k { color: var(--lilac); }
:root[data-theme="magic"] .dz-card:focus-visible { outline: 2px solid var(--lilac); }
:root[data-theme="magic"] .starts { background: var(--abyss); }
:root[data-theme="magic"] .starts-more p { color: var(--body); }
:root[data-theme="magic"] .ev { background: linear-gradient(180deg, #1b1840, #0c1030); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px var(--line), 0 0 60px -20px rgba(168, 85, 247, .5), 0 30px 90px -30px rgba(0, 0, 0, .8); }
:root[data-theme="magic"] .ev::backdrop { background: rgba(3, 5, 18, .72); }
:root[data-theme="magic"] .ev-x { background: var(--mist-2); }
:root[data-theme="magic"] .ev-h { font: 560 clamp(26px, 6vw, 36px)/1.1 var(--voice); letter-spacing: -.035em; }
:root[data-theme="magic"] .ev-field > span { font: 500 14px/1 var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .ev-field textarea { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .ev-field textarea:focus-visible { outline: 2px solid var(--lilac); }
:root[data-theme="magic"] .ev-drop { box-shadow: inset 0 0 0 1px rgba(216, 180, 254, .35); }
:root[data-theme="magic"] .ev-drop.over { background: rgba(139, 92, 246, .22); }
:root[data-theme="magic"] .ev-drop-n { color: var(--body); }
:root[data-theme="magic"] .ev-check input { accent-color: var(--violet); }
:root[data-theme="magic"] .ev-hint { color: var(--body); }
:root[data-theme="magic"] .ev-status.bad { color: #fda4af; }
:root[data-theme="magic"] .dz-saved-foot p { color: var(--body); }
:root[data-theme="magic"] .orig-fig { box-shadow: 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .proc-report { box-shadow: 0 1px 2px rgba(11,12,16,.12), 0 18px 40px -18px rgba(11,12,16,.45); }
:root[data-theme="magic"] .slides { background: var(--night); padding-bottom: clamp(56px, 8vw, 110px); }
:root[data-theme="magic"] .slide { box-shadow: 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .deep-intro .display { font-size: clamp(34px, 9vw, 72px); }
:root[data-theme="magic"] .deep-when { font: 560 14px/1.2 var(--voice); font-variant-numeric: tabular-nums; letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .deep-text { font: 540 clamp(20px, 4.6vw, 30px)/1.25 var(--voice); letter-spacing: -.025em; }
:root[data-theme="magic"] .deep-words { font: italic 400 clamp(24px, 5.6vw, 34px)/1.2 var(--engrave); color: var(--gold); }
:root[data-theme="magic"] .deep-lab { color: var(--body); }
:root[data-theme="magic"] .deep-src a { color: var(--azure); }
:root[data-theme="magic"] .deep-card { position: relative; background: linear-gradient(180deg, rgba(46, 60, 120, .5), rgba(18, 22, 58, .56)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 40px -14px rgba(156, 195, 239, .4), var(--drop); }
:root[data-theme="magic"] .deep-card-t { font: 560 clamp(23px, 4.4vw, 35px)/1.1 var(--voice); letter-spacing: -.035em; }
:root[data-theme="magic"] .deep-card-x { color: var(--body); }
:root[data-theme="magic"] .deep-card .go { background: var(--ice); color: #0a0d26; }
:root[data-theme="magic"] .deep-yours-card { background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .deep-yours-t { font: 540 clamp(16px, 3.6vw, 20px)/1.3 var(--voice); letter-spacing: -.02em; }
:root[data-theme="magic"] .deep-yours-card .go { background: var(--mist-2); }
:root[data-theme="magic"] .dz-help { color: var(--lilac); }
:root[data-theme="magic"] .size-print { box-shadow: 0 0 0 1px var(--line), var(--drop), 0 0 70px -30px rgba(216, 239, 252, .35); }
:root[data-theme="magic"] .size-table caption { color: var(--body); }
:root[data-theme="magic"] .size-table thead th { font: 500 13.5px/1 var(--voice); color: var(--orchid); letter-spacing: normal; text-transform: none; }
:root[data-theme="magic"] .size-table tbody tr { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .size-table tbody th { font: 560 16px/1 var(--voice); }
:root[data-theme="magic"] .svc { background: var(--indigo); }
:root[data-theme="magic"] .work { background: var(--night); }
:root[data-theme="magic"] .quote { background: var(--dusk); }
:root[data-theme="magic"] .edu { background: var(--indigo); }
:root[data-theme="magic"] .phead, :root[data-theme="magic"] .post-head-wrap { background: linear-gradient(180deg, #070b23 0%, #140f30 100%); }
:root[data-theme="magic"] main > section.prose-sec:nth-of-type(odd), :root[data-theme="magic"] main > section.cs, :root[data-theme="magic"] main > section.gal { background: var(--abyss); --sec-bg: var(--abyss); }
:root[data-theme="magic"] main > section.prose-sec:nth-of-type(even), :root[data-theme="magic"] main > section.anat, :root[data-theme="magic"] main > section.pair, :root[data-theme="magic"] main > section.birth { background: var(--night); --sec-bg: var(--night); }
:root[data-theme="magic"] main > section.band { background: var(--night); }
:root[data-theme="magic"] .appt, :root[data-theme="magic"] .pc, :root[data-theme="magic"] .more, :root[data-theme="magic"] .deep-end, :root[data-theme="magic"] .dz, :root[data-theme="magic"] .size-page main > section { --sec-bg: var(--bg); }
:root[data-theme="magic"] .band-in::after, :root[data-theme="magic"] .appt-side::after, :root[data-theme="magic"] .repair::after, :root[data-theme="magic"] .flow li::after, :root[data-theme="magic"] .deep-card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(190, 214, 255, .12), rgba(241, 138, 198, .05) 40%, transparent 64%); }
:root[data-theme="magic"] .band-in::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: radial-gradient(72% 64% at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .9), rgba(156, 195, 239, .55) 22%, rgba(168, 85, 247, .4) 46%, rgba(241, 138, 198, .28) 70%, rgba(168, 85, 247, .14) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
:root[data-theme="magic"] .band-in, :root[data-theme="magic"] .appt-side, :root[data-theme="magic"] .repair, :root[data-theme="magic"] .flow li, :root[data-theme="magic"] .deep-card { isolation: isolate; }
:root[data-theme="magic"] .band-in > * { position: relative; z-index: 1; }
@media (hover: hover) {
  :root[data-theme="magic"] .btn-solid:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(40, 10, 90, .35), 0 14px 34px -10px rgba(150, 110, 255, .75), 0 0 44px -14px rgba(192, 132, 252, .5); background: none; }
  :root[data-theme="magic"] .link:hover { color: var(--ink); }
  :root[data-theme="magic"] .svc-list a:hover { background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, transparent), 0 0 40px -18px var(--hue); }
  :root[data-theme="magic"] .svc-list a:hover .go { background: var(--hue); color: #0a0d26; }
  :root[data-theme="magic"] .art-row:hover { background: var(--glass); box-shadow: var(--glass-hi); }
  :root[data-theme="magic"] .dz-dir:not([aria-selected="true"]):hover { box-shadow: inset 0 0 0 1px var(--lilac); }
  :root[data-theme="magic"] .band-in:hover::after, :root[data-theme="magic"] .appt-side:hover::after, :root[data-theme="magic"] .repair:hover::after, :root[data-theme="magic"] .flow li:hover::after, :root[data-theme="magic"] .deep-card:hover::after { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="magic"] .hdr.is-solid { background: rgba(6, 11, 34, .72); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
}
@media (min-width: 1000px) {
  :root[data-theme="magic"] .nav > a, :root[data-theme="magic"] .nav-item > a { font: 500 15px/1 var(--voice); letter-spacing: -.01em; }
  :root[data-theme="magic"] .nav a.on { text-decoration-color: var(--orchid); }
  :root[data-theme="magic"] .hdr-tel { font: 500 14px var(--voice); font-variant-numeric: tabular-nums; letter-spacing: normal; }
}
@media (min-width: 900px) {
  :root[data-theme="magic"] .art-row .art-t { font-size: 25px; }
  :root[data-theme="magic"] .hero-stone { height: min(52svh, 44vw); }
  :root[data-theme="magic"] .hero-name { font-size: min(8.4vw, 17svh); line-height: 1.05; margin-bottom: 22px; }
  :root[data-theme="magic"] .dz-head .display { font-size: clamp(38px, 3.6vw, 54px); }
}
@media (max-width: 899px) {
  :root[data-theme="magic"] .proc-step { box-shadow: 0 -1px 0 var(--line); }
  :root[data-theme="magic"] .proc-step:first-child { box-shadow: none; }
  :root[data-theme="magic"] .proc-mobile-fig { corner-shape: superellipse(1.6); box-shadow: 0 0 0 1px var(--line), var(--drop); }
}
@media (min-width: 1100px) {
  :root[data-theme="magic"] .dz-card-t { font-size: 13.5px; }
}
@media print {
  html[data-theme="magic"], :root[data-theme="magic"] body { background: #fff !important; }
}
:root[data-theme="magic"] { --serif: var(--voice); --mono: var(--voice); }
:root[data-theme="magic"] .piece-s { font: 400 14px/1.5 var(--sans); }
:root[data-theme="magic"] .hours li span:last-child { font-family: inherit; }
:root[data-theme="magic"] .labs { border-top: 0; }
:root[data-theme="magic"] .labs li { border-bottom: 0; }
@media (max-width: 899px) { :root[data-theme="magic"] .proc-step { border-top: 0; } }

/* ---------- MotusMagic: the new pieces ---------- */
:root[data-theme="magic"] .tm-to-light { display: inline-flex !important; }
:root[data-theme="magic"] .tm-to-magic { display: none !important; }
:root[data-theme="magic"] .tm { font-family: var(--voice); background: linear-gradient(180deg, #ffffff, #ece8f8); color: #1f1a44;
  box-shadow: inset 0 -1px 0 rgba(120, 110, 170, .25), 0 0 26px -8px rgba(216, 239, 252, .6), 0 10px 26px -14px rgba(160, 167, 229, .9); }
:root[data-theme="magic"] .tm .ic { color: #b7791f; }
:root[data-theme="magic"] .tm-seg { background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .tm-seg button { font-family: var(--voice); color: var(--body); }
:root[data-theme="magic"] .tm-seg button[aria-pressed="true"] { background: rgba(139, 92, 246, .3); color: #fff; box-shadow: inset 0 0 0 1px rgba(216, 180, 254, .6), 0 0 18px -6px rgba(168, 85, 247, .7); }
:root[data-theme="magic"] .visit-sms a, :root[data-theme="magic"] .ftr-sms a { color: var(--ink); }
:root[data-theme="magic"] .appt-sms, :root[data-theme="magic"] .ftr-sms { color: var(--body); }
:root[data-theme="magic"] .rv { background: linear-gradient(180deg, #0c1030, #150f2f); }
:root[data-theme="magic"] .rv-page { background: var(--night); }
:root[data-theme="magic"] .rv-bar { background: rgba(216, 226, 255, .1); }
:root[data-theme="magic"] .rv-bar i { background: linear-gradient(90deg, #f5a183, #fdc26f); box-shadow: 0 0 12px rgba(253, 194, 111, .55); }
:root[data-theme="magic"] .rv-themes li { background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line); }
:root[data-theme="magic"] .rv-leave { background: var(--abyss); }
:root[data-theme="magic"] .rv-leave-in { box-shadow: none; }

:root[data-theme="magic"] .rv-card { position: relative; isolation: isolate; background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .rv-plat { font: 500 14px/1.4 var(--voice); letter-spacing: -.005em; text-transform: none; color: var(--orchid); }
:root[data-theme="magic"] .rv-score { font: 560 clamp(56px, 8vw, 88px)/1 var(--voice); letter-spacing: -.05em;
  background: linear-gradient(118deg, #fff7e6 0%, #fdc26f 46%, #f5a183 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(253, 194, 111, .28)); }
:root[data-theme="magic"] .qa-group + .qa-group, :root[data-theme="magic"] .qa-item + .qa-item { box-shadow: 0 -1px 0 var(--line); }
:root[data-theme="magic"] .qa-group > .label { color: var(--orchid); }
:root[data-theme="magic"] .qa-item h3 { font: 540 clamp(20px, 2.6vw, 24px)/1.3 var(--voice); letter-spacing: -.02em; }
:root[data-theme="magic"] .qa-tel { color: var(--ink); text-decoration-color: rgba(216, 180, 254, .45); }
/* each review catches the evening light once as it arrives */
:root[data-theme="magic"] .rv-yelp { isolation: isolate; background: var(--glass); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line), var(--drop); }
:root[data-theme="magic"] .rv-yelp::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1px rgba(216, 239, 252, .55), 0 0 46px -8px rgba(241, 138, 198, .5), 0 0 90px -20px rgba(168, 85, 247, .55); }
:root[data-theme="magic"] .rv-yelp.is-live::after { animation: rv-catch 2.4s var(--ease) calc(var(--i, 0) * .22s) both; }
@keyframes rv-catch { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: .18; } }
:root[data-theme="magic"] .rv-yelp-alt { background: rgba(248, 241, 251, .06); }
:root[data-theme="magic"] .rv-yelp-stars { color: #fdc26f; }
:root[data-theme="magic"] .rv-yelp-go { text-decoration-color: rgba(216, 180, 254, .45); }
@media (prefers-reduced-motion: reduce) { :root[data-theme="magic"] .rv-yelp.is-live::after { animation: none; opacity: .18; } }
/* photographs on white sit in a lit case: the light falls on the middle and the edges turn to violet */
:root[data-theme="magic"] :is(.vis-img, .piece-img, .art-img, .orig-fig, .post-fig) { position: relative; }
:root[data-theme="magic"] :is(.vis-img, .piece-img, .art-img, .pc-main, .orig-fig, .post-fig)::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; mix-blend-mode: multiply; background: radial-gradient(118% 100% at 50% 36%, rgba(255, 255, 255, 0) 50%, rgba(214, 200, 250, .5) 80%, rgba(146, 122, 222, .85) 100%); }
:root[data-theme="magic"] .post-fig::after { border-radius: 30px; }
:root[data-theme="magic"] .pc-zoom { z-index: 2; }