/* royalceylongems.com, one stylesheet, no framework.
   Redesigned against 11 reference houses (Diavon, Boltenstern, Autore, Karl
   Faller, CHQ, Classic Grown, Chimento, Gorgoglione, Nomads, House of Gems,
   FreyWille). The recurring luxury signals, applied to a loose-stone trade
   house rather than a jewelry retailer:
     near-white ground, near-black ink, ONE accent (sapphire, the product);
     a light display serif over a quiet geometric sans;
     tracked uppercase for the label tier only;
     a dark full-bleed hero that the stone owns;
     hairline rules instead of heavy shadows;
     motion that is entrance-only and slow. Stillness reads as confidence. */
:root{
  --paper:#faf9f6;
  --card:#ffffff;
  --ink:#181c26;
  --ink-deep:#122457;
  --muted:#626a78;
  --line:#e7e3d9;
  --sapphire:#1d3f8f;
  --sapphire-deep:#122457;
  --night:#0b122d;           /* the dark band: hero, trust, footer */
  --night-ink:#dfe4f2;
  --padpa:#c96f4a;
  --gold:#a8843f;
  --gold-soft:#d8c79a;
  --wa:#25d366;
  --line-green:#06c755;
  --shadow:0 1px 2px rgba(18,36,87,.04), 0 12px 34px rgba(18,36,87,.06);
  --shadow-lift:0 2px 6px rgba(18,36,87,.06), 0 26px 60px rgba(18,36,87,.14);
  --serif:"Josefin Sans","Poppins","PT Sans",Verdana,system-ui,sans-serif;
  --sans:"Inter","PT Sans","Seravek",Ubuntu,Calibri,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16.5px/1.75 var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;
}
b,strong{font-weight:500}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.16;text-wrap:balance;
  color:var(--ink-deep);font-weight:300;letter-spacing:.015em}
h1{font-size:clamp(2.2rem,4.8vw,3.5rem);margin:.1em 0 .45em}
h2{font-size:clamp(1.55rem,2.8vw,2.25rem);margin:2em 0 .5em}
h3{font-size:1.22rem;margin:1.4em 0 .35em;font-weight:400}
p{margin:.7em 0}
a{color:var(--sapphire);text-decoration-thickness:1px;text-underline-offset:3px}
img,video{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 14px;z-index:99}

/* ---------- layout ---------- */
.inner{max-width:1160px;margin:0 auto;padding:88px 28px}
/* Two plain sections in a row share one breath, not two stacked paddings;
   two bands in a row share one hairline, not a double rule. */
main .inner+.inner,section.inner+section.inner{padding-top:12px}
.band+.band{border-top:0}
.inner.center{text-align:center}
.inner.center .lede{margin-inline:auto}
.inner.narrow{max-width:74ch}
.page{padding-top:72px}
.two{display:grid;grid-template-columns:1fr;gap:34px 64px}
@media(min-width:860px){.two{grid-template-columns:1.15fr .85fr}}
.eyebrow{font-size:.68rem;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.1em;display:flex;align-items:center;gap:14px}
.eyebrow::after{content:'';height:1px;flex:1;max-width:56px;background:var(--gold-soft)}
.inner.center .eyebrow{justify-content:center}
.inner.center .eyebrow::before{content:'';height:1px;flex:1;max-width:56px;background:var(--gold-soft)}
.lede{font-size:1.16rem;line-height:1.8;color:var(--muted);max-width:64ch}
.microcopy{font-size:.84rem;color:var(--muted);letter-spacing:.02em}
.sechead{max-width:66ch;margin-bottom:34px}
.sechead h2{margin-top:0}
.more{font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;
  text-decoration:none;color:var(--ink-deep);border-bottom:1px solid var(--gold-soft);
  padding-bottom:3px;transition:border-color .25s ease,color .25s ease}
.more:hover{border-color:var(--gold);color:var(--sapphire)}
.more-line{margin-top:30px}
.eyebrow+h1,.eyebrow+h2{margin-top:0}
.two>div>h2:first-child{margin-top:0}
[id]{scroll-margin-top:92px}

/* ---------- header: the same dark band as the hero, trust strip and footer,
   so the menu and the hero read as one surface. Its inner edges are padded to
   the same 1160px content column the hero and sections use. ---------- */
header.site{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  flex-wrap:nowrap;
  padding:14px max(24px, calc((100% - 1400px)/2 + 24px));
  background:rgba(11,18,45,.96);backdrop-filter:blur(10px);
  border:1px solid rgba(216,199,154,.14);border-top:0;
  border-radius:0 0 22px 22px;
  box-shadow:0 8px 24px rgba(6,10,28,.18);
  transition:box-shadow .3s ease;
}
header.site.scrolled{box-shadow:0 12px 34px rgba(0,0,0,.38)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-right:auto}
/* The Asterion mark draws its crystal from currentColor: deep navy on paper
   by default, paper ivory wherever it sits on night navy. */
.mark{color:var(--ink-deep)}
.brand .mark,.splash-mark{color:#faf9f6}
/* Drawn a size up from the row it sits in; the negative margins hand the
   extra height back, so the header never grows and the hero underlap holds. */
.brand .mark{width:36px;height:36px;margin:-3px 0;flex:none}
/* The company name wears the gate wordmark's dress: tracked uppercase
   Josefin, bold. */
.brand .name{font-family:var(--serif);font-size:.85rem;font-weight:600;color:#fff;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.3;white-space:nowrap;
  display:flex;flex-direction:column}
.brand .name small{font-family:var(--sans);font-size:.54rem;font-weight:300;color:#8d99bb;
  letter-spacing:.28em;margin-top:3px}
header.site nav{display:flex;gap:0;flex-wrap:nowrap}
header.site nav a{
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--night-ink);
  text-decoration:none;padding:9px 11px;border-radius:999px;
  white-space:nowrap;transition:color .2s ease,background .2s ease;
}
header.site nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
header.site nav a.cur{color:var(--gold-soft);background:rgba(216,199,154,.13)}
.navtoggle{display:none;background:none;border:1px solid rgba(223,228,242,.35);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;color:var(--night-ink)}
/* Small-laptop tier: the same single row, a size tighter, so nothing ever
   clips before the fold. */
@media(max-width:1366px) and (min-width:1150px){
  .brand .name{font-size:.76rem;letter-spacing:.12em}
  .brand .name small{font-size:.48rem;letter-spacing:.2em}
  .brand .mark{width:32px;height:32px;margin:-2.5px 0}
  header.site nav a{font-size:.64rem;letter-spacing:.09em;padding:8px 8px}
  .navdrop-btn{font-size:.64rem;letter-spacing:.09em;padding:8px 8px}
  header.site nav .nav-cta,header.site nav .nav-inv{padding:9px 13px 8px;
    letter-spacing:.11em}
}

/* With the dropdown the menu is short enough to hold one line beside the
   brand down to about 1024px; below that it folds behind the toggle. */
@media(max-width:1149px){
  header.site{flex-wrap:wrap}
  .navtoggle{display:block}
  header.site nav{display:none;width:100%;flex-direction:column}
  header.site nav.open{display:flex}
  header.site nav a{padding:12px 10px;border-bottom:1px solid rgba(223,228,242,.12);
    font-size:.78rem;border-radius:10px}
}

/* ---------- hero: the dark band the stone owns ----------
   The band is pulled up behind the sticky menu bar, so the bar's curved
   corners rest on hero navy rather than on the page's ivory. */
.hero{
  background:
    radial-gradient(90% 130% at 82% 18%, rgba(63,102,204,.32), transparent 55%),
    radial-gradient(70% 100% at 12% 88%, rgba(29,63,143,.22), transparent 60%),
    var(--night);
  color:var(--night-ink);
  margin-top:-76px;padding-top:76px;
}
/* Composed to the design project: the copy and a square framed film side by
   side, folding to one column when the row runs out of room. */
.hero-wrap{display:grid;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  max-width:1160px;margin:0 auto;gap:clamp(28px,4vw,56px);
  padding:clamp(36px,6vh,64px) clamp(20px,3vw,28px)}
.hero h1{color:#fff;font-weight:300}
.hero .eyebrow{color:var(--gold-soft)}
.hero .eyebrow::after{background:rgba(216,199,154,.4)}
.hero .lede{color:#aeb9d6}
.hero .microcopy{color:#8d99bb}
.hero .btn:not(.ghost){background:var(--gold);color:#0b122d;font-weight:500}
.hero .btn:not(.ghost):hover{background:#c09a4e}
.hero .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #fff}
.hero .shot{margin:0}
/* The house films its stones vertical, 9:16. The frame is portrait, height
   capped so it balances the copy, and contain, never cover: the whole video
   the house shot is the video the buyer sees. A gold hairline sets the film
   like a stone in a bezel, so the narrow column reads as intent. */
.hero-wrap>.shot{width:fit-content;margin-inline:auto;position:relative}
.hero-wrap>.shot::after,.hero-stack::after{content:"";position:absolute;
  inset:-14px;border:1px solid rgba(216,199,154,.3);border-radius:28px;
  pointer-events:none}
.hero .shot .ph,.hero .shot img,.hero .shot video{
  aspect-ratio:1/1;width:min(100%,440px);height:auto;
  margin-inline:auto;object-fit:cover;background:#060b1e;
  border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero .shot figcaption{color:#8d99bb;text-align:center}
.hero-stack{position:relative;width:min(100%,440px);aspect-ratio:1/1;
  margin-inline:auto;max-width:100%}
/* Waiting shots are visibility:hidden, not just opacity 0: video layers can
   ignore opacity in compositing, which lets a hidden stone bleed through. The
   delayed visibility flip keeps the fade intact. */
.hero-stack .shot{position:absolute;inset:0;opacity:0;visibility:hidden;
  z-index:0;transition:opacity .95s ease,visibility 0s linear .95s}
.hero-stack .shot.on{opacity:1;visibility:visible;z-index:1;
  transition:opacity .95s ease}
.hero-stack .shot .ph,.hero-stack .shot img,.hero-stack .shot video{
  width:100%;height:100%}
/* Phone reading order for the hero: title, then the film, then the words
   and actions. Desktop keeps the side-by-side composition. */
@media(max-width:749px){
  .hero-wrap{display:flex;flex-direction:column;align-items:stretch}
  .hero-copy{display:contents}
  .hero-copy .eyebrow{order:1}
  .hero-copy h1{order:2;margin-bottom:.2em}
  .hero-wrap>.shot,.hero-wrap>.hero-stack{order:3;margin-top:10px}
  .hero-copy .lede{order:4;margin-top:26px}
  .hero-copy .actions{order:5;margin-top:18px}
}

@media(max-width:640px){
  /* On the phone the film goes edge to edge: full width, square, the stone
     centred and cropped rather than letterboxed. */
  .hero-wrap>.shot{width:100%}
  .hero .shot .ph,.hero .shot img,.hero .shot video{
    width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .hero-stack{width:100%;height:auto;aspect-ratio:1/1}
  .hero-stack .shot .ph,.hero-stack .shot img,.hero-stack .shot video{
    height:100%;object-fit:cover}
  .hero-wrap>.shot::after,.hero-stack::after{inset:-8px;border-radius:26px}
  .hero-wrap{min-height:auto;padding:44px 20px 40px}
  .hero{margin-top:-62px;padding-top:62px}
}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:30px 0 14px}

/* ---------- media slots (build.py MEDIA / SHOTS) ----------
   An empty slot renders .ph: an abstract sapphire field holding the exact aspect
   ratio the photograph will occupy, so dropping the file in never reflows. */
.shot{margin:26px 0}
.shot .ph,.shot img,.shot video{
  width:100%;display:block;border-radius:18px;object-fit:cover;
  aspect-ratio:3/2;background:#0d1b3f;box-shadow:var(--shadow)}
.shot .ph{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 130% at 28% 18%,#3f66cc 0%,var(--sapphire) 34%,
      var(--sapphire-deep) 64%,#091230 100%)}
/* The empty-slot stand-in: a star sapphire cabochon, the house's own stone.
   A domed oval, one window light, the six-rayed star, a bright girdle rim. */
.shot .ph .sheen{position:absolute;inset:0;
  background:
    radial-gradient(29.5% 37.5% at 50% 50%, transparent 89%, rgba(255,255,255,.28) 95%, transparent 100%),
    radial-gradient(26% 20% at 42% 36%, rgba(255,255,255,.5), rgba(255,255,255,.06) 58%, transparent 76%),
    linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,.17) 50%, transparent 50.5%),
    linear-gradient(60deg, transparent 49.5%, rgba(255,255,255,.17) 50%, transparent 50.5%),
    linear-gradient(120deg, transparent 49.5%, rgba(255,255,255,.17) 50%, transparent 50.5%),
    radial-gradient(29% 37% at 50% 50%, rgba(150,185,255,.34), rgba(150,185,255,0) 76%);
  clip-path:ellipse(29% 37% at 50% 50%)}
.shot figcaption{font-family:var(--sans);font-size:.83rem;color:var(--muted);
  margin-top:12px;letter-spacing:.05em}
.shot.framed{margin:20px 0}
.shot.framed .ph,.shot.framed img,.shot.framed video{border-radius:12px}
.shot.framed{padding:10px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow)}
.shot.framed .ph,.shot.framed img,.shot.framed video{box-shadow:none}
.shot.framed figcaption{padding:0 4px 2px}
.shot.bleed{margin:0}
.shot.bleed .ph,.shot.bleed img,.shot.bleed video{
  aspect-ratio:16/9;border-radius:0;max-height:78vh;box-shadow:none}
.shot.bleed figcaption{max-width:1160px;margin:14px auto 0;padding:0 28px}

/* ---------- buttons: rectangular, tracked, unhurried ---------- */
.btn{
  display:inline-block;background:var(--sapphire-deep);color:#fff;text-decoration:none;
  font-weight:400;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 32px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.btn:hover{background:#0d1b42}
.btn.ghost{background:transparent;color:var(--ink-deep);
  box-shadow:inset 0 0 0 1px var(--ink-deep)}
.btn.ghost:hover{background:rgba(18,36,87,.05)}
.btn.small{padding:10px 20px;font-size:.72rem}
.btn.wa{background:#128c4a}
.btn.wa:hover{background:#0e7a40}
.btn.line{background:#059e46}

/* ---------- trust strip ---------- */
.trust{
  display:flex;flex-wrap:wrap;gap:10px 0;justify-content:center;
  padding:22px 24px;background:var(--night);color:#aab5d2;
  border-top:1px solid rgba(216,199,154,.16);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
}
.trust>span{padding:0 24px;border-right:1px solid rgba(216,199,154,.22)}
.trust>span:last-child{border-right:0}
.trust .since{font-family:var(--serif);font-size:1.05rem;color:var(--gold-soft);
  text-transform:none;letter-spacing:.08em}
@media(max-width:680px){
  .trust{gap:8px 16px;padding:16px 18px;font-size:.68rem}
  .trust>span{border-right:0;padding:0}
}

/* ---------- bands ---------- */
.band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band.origin-band{background:var(--card)}
.band.supply .aside{background:var(--paper)}
.band.fairs{background:var(--card)}
.morerow{display:flex;gap:14px 32px;flex-wrap:wrap;margin-top:14px}

/* ---------- stone cards: specimen plates, not shop cards ---------- */
.stones{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:28px}
.stone{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:none;display:flex;flex-direction:column;
  transition:box-shadow .35s ease,border-color .35s ease}
.stone:hover{box-shadow:var(--shadow-lift);border-color:#d8d2c4}
.stone .stone-img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.stone:hover .stone-img{transform:scale(1.035)}
.stone-img{aspect-ratio:5/3;position:relative;width:100%;object-fit:cover;display:block;
  background:radial-gradient(120% 120% at 32% 22%,#4a6fd0,#1d3f8f 45%,#101f4a 100%)}
.stone[data-species="ruby"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#e0577a,#a3123c 45%,#5c0620 100%)}
.stone[data-variety*="padparadscha"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#ffb07a,#e5734a 45%,#a83c22 100%)}
.stone[data-variety*="cornflower"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#7ea3ef,#3862c4 45%,#1a3378 100%)}
.stone[data-species="spinel"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#f07ab0,#c02f74 45%,#6b1440 100%)}
.stone[data-species="moonstone"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#eaf3ff,#a8c6e8 45%,#5d7fa6 100%)}
.stone[data-species="chrysoberyl"] .stone-img,
.stone[data-species="alexandrite"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#e8d98a,#a89240 45%,#4f4416 100%)}
.stone[data-species="garnet"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#d9718a,#93203c 45%,#4d0c1c 100%)}
.stone[data-species="tourmaline"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#8fd4a8,#2f8f5f 45%,#12452c 100%)}
.stone[data-species="zircon"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#a9e4f0,#3f9fc0 45%,#154a5e 100%)}
.stone[data-species="aquamarine"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#bfeaf2,#68b9cd 45%,#2a6b7d 100%)}
.stone[data-species="quartz"] .stone-img{background:radial-gradient(120% 120% at 32% 22%,#d6b8ee,#8e5cc0 45%,#432466 100%)}
.stone-img .facet{position:absolute;inset:0;
  background:
    radial-gradient(30.5% 37.5% at 50% 50%, transparent 89%, rgba(255,255,255,.28) 95%, transparent 100%),
    radial-gradient(26% 20% at 42% 36%, rgba(255,255,255,.5), rgba(255,255,255,.06) 58%, transparent 76%),
    linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,.16) 50%, transparent 50.5%),
    linear-gradient(60deg, transparent 49.5%, rgba(255,255,255,.16) 50%, transparent 50.5%),
    linear-gradient(120deg, transparent 49.5%, rgba(255,255,255,.16) 50%, transparent 50.5%),
    radial-gradient(30% 37% at 50% 50%, rgba(255,255,255,.14), rgba(255,255,255,0) 76%);
  clip-path:ellipse(30% 37% at 50% 50%)}
.stone-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.stone-body h3{margin:0}
.stone-body p{margin:0;font-size:.93rem;color:var(--muted)}
.stone-body .more{margin-top:auto;align-self:flex-start;padding-top:18px}
.onreq{font-size:.88rem!important;border-left:2px solid var(--gold-soft);padding-left:12px}
.lots{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.lot{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:.86rem;
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:var(--paper)}
.lot b{font-family:var(--sans);font-weight:500;color:var(--ink-deep);letter-spacing:.04em}
.lot .spec{color:var(--muted)}
.lot .flags{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}

/* ---------- chips, pills, tags ---------- */
.chip{display:inline-block;background:transparent;color:var(--ink-deep);border-radius:999px;
  border:1px solid var(--line);padding:2px 10px;font-size:.72rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;margin:3px 4px 3px 0;white-space:nowrap}
.shapes{margin:10px 0 16px}
.tag{background:transparent;border:1px solid var(--gold-soft);color:var(--gold);
  border-radius:999px;padding:2px 10px;font-size:.68rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.12em}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 34px}
.filterbar .cap{font-size:.66rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-right:6px}
.pill{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 18px;
  font:inherit;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;color:var(--ink);transition:border-color .2s ease,color .2s ease}
.pill:hover{border-color:var(--ink-deep)}
.pill.on{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}

/* ---------- lists ---------- */
ul.check,ul.dont{list-style:none;padding-left:0;margin:.6em 0}
ul.check li,ul.dont li{position:relative;padding-left:26px;margin:.55em 0}
ul.check li::before{content:"◆";position:absolute;left:2px;color:var(--gold);font-size:.72em;top:.4em}
ul.dont li::before{content:"✕";position:absolute;left:2px;color:var(--padpa);font-weight:500}
ul.plain{list-style:none;padding:0;margin:.4em 0}
ul.plain li{margin:.3em 0}
dl dt{font-weight:500;color:var(--ink-deep);margin-top:.9em}
dl dd{margin:.15em 0 0;color:var(--muted);font-size:.94rem}

/* ---------- steps / flow ---------- */
.steps,.flow{list-style:none;counter-reset:s;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.steps li,.flow li{counter-increment:s;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:24px 26px 26px;position:relative}
.steps li::before,.flow li::before{
  content:counter(s, decimal-leading-zero);font-family:var(--serif);font-size:1.5rem;
  color:var(--gold);display:block;margin-bottom:10px;letter-spacing:.06em}
.steps li b,.flow li b{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:500;
  color:var(--ink-deep);margin-bottom:5px}
.steps li span,.flow li span{color:var(--muted);font-size:.93rem}
.steps-sec .actions{margin-top:30px}

/* ---------- pillars / aside / callout ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:22px;margin:26px 0}
.pillars>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.pillars h3{margin-top:0}
.pillars p{margin:0;font-size:.93rem;color:var(--muted)}
.aside{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 28px;
  align-self:start}
.aside h3:first-child{margin-top:0}
.callout{border-left:2px solid var(--gold-soft);background:var(--card);padding:15px 19px;
  margin:28px 0;font-size:.9rem;color:var(--muted);border-radius:0 12px 12px 0}
.callout.small{font-size:.85rem;margin:18px 0 0}
.big-since{font-family:var(--serif);font-size:2.6rem;color:var(--ink-deep);margin:.2em 0}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:20px 0;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{text-align:left;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:400;padding:13px 18px;border-bottom:1px solid var(--gold-soft);white-space:nowrap}
td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
td small{display:block;color:var(--muted);font-size:.82em}
tr:last-child td{border-bottom:0}

/* ---------- the requirement form ---------- */
form.req{margin:34px 0 10px}
form.req fieldset{border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:10px 24px 26px;margin:0 0 24px}
form.req legend{font-family:var(--serif);font-size:1.28rem;font-weight:500;
  color:var(--ink-deep);padding:0 10px}
form.req label{display:flex;flex-direction:column;gap:6px;font-size:.72rem;font-weight:400;
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:16px 0 0}
form.req .row{display:grid;grid-template-columns:1fr;gap:0 18px}
@media(min-width:640px){form.req .row{grid-template-columns:repeat(3,1fr)}
  form.req .row:has(label:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}}
form.req input,form.req select,form.req textarea{
  font:inherit;font-size:.97rem;font-weight:300;color:var(--ink);padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);width:100%;
  letter-spacing:normal;text-transform:none}
form.req input:focus,form.req select:focus,form.req textarea:focus{
  outline:1px solid var(--sapphire);outline-offset:1px;background:#fff}
form.req textarea{resize:vertical}
.consent{font-size:.84rem;color:var(--muted);max-width:60ch}
.formnote{font-size:.9rem;font-weight:400}
.formnote.ok{color:#15803d}
.formnote.err{color:#b3261e}
.alt{border-top:1px solid var(--line);margin-top:44px;padding-top:12px}

/* The story column: one width, one shared left edge, for everything from
   the first paragraph to the pillars. Wide enough for the photo plates,
   still a comfortable reading measure for light text. */
.story-col{max-width:856px}
.story-col>h2{margin-top:1.6em}
/* A pair of photographs, equal width, edges flush with the column. */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;
  width:100%;margin:34px auto 0}
.photo-pair .shot{margin:0}
.photo-pair .shot .ph,.photo-pair .shot img,.photo-pair .shot video{
  aspect-ratio:3/2;height:auto;width:100%}
@media(max-width:720px){
  .photo-pair{grid-template-columns:1fr;width:100%;margin-left:0}
}
/* The schooling block on The cut: a quiet chapter of its own,
   text at reading measure, the photo pair at full section width below. */
.mentor{margin-top:64px}
.mentor p{max-width:70ch}
.mentor .eyebrow{margin-bottom:6px}

/* ---------- private inventory: the velvet rope ----------
   Modelled on the invitation-only gate the owner chose as reference: a pale
   centred room, the mark, a tracked wordmark, one field, one action, silence. */
.gate{min-height:calc(100svh - 72px);display:grid;place-items:center;
  background:#fff;border-bottom:1px solid var(--line);padding:64px 24px;
  text-align:center}
.gate-box{max-width:460px;display:flex;flex-direction:column;align-items:center}
.gate-mark{width:84px;height:84px;margin-bottom:26px}
.gate-word{font-family:var(--serif);font-weight:300;font-size:1.3rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink-deep);
  margin:0 0 10px;padding-left:.42em}
.gate-label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0 0 44px;padding-left:.3em}
.gate-h{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:300;margin:0 0 30px;
  color:var(--ink)}
.gate-form{display:flex;flex-direction:column;gap:18px;align-items:center;width:100%}
.gate-form input{
  width:min(320px,100%);text-align:center;font:1rem var(--sans);font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 4px;transition:border-color .25s ease}
.gate-form input::placeholder{color:#b9b4a8;letter-spacing:.3em}
.gate-form input:focus{outline:none;border-bottom-color:var(--ink-deep)}
.gate-btn{
  font:inherit;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
  color:#fff;background:var(--night);border:0;border-radius:999px;
  padding:15px 52px;cursor:pointer;margin-top:8px;
  box-shadow:0 10px 40px -10px rgba(11,18,45,.5);
  transition:background .25s ease,box-shadow .25s ease}
.gate-btn:hover{background:var(--sapphire-deep);box-shadow:0 14px 44px -10px rgba(11,18,45,.6)}
.gate .formnote{min-height:1.4em;margin:16px 0 0;font-size:.85rem;max-width:40ch}
.gate-hint{font-size:.72rem;letter-spacing:.08em;color:#9a958a;margin:26px 0 0;max-width:34ch}
.gate-links{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin:18px 0 0}
.gate-links a{color:var(--ink-deep);text-decoration:none;border-bottom:1px solid var(--gold-soft);
  padding-bottom:2px}
.gate-links a:hover{border-color:var(--gold)}
.gate-links span{color:#c5c0b4;margin:0 8px}
.invtable{font-size:.88rem}
.invtable td b{font-family:var(--sans);font-weight:500;color:var(--ink-deep);letter-spacing:.04em}
.invthumb{width:64px;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-top:8px;display:block;
  border:1px solid var(--line)}

/* When an open selection is listed above it, the gate becomes a band
   rather than a full screen. */
.gate.gate-compact{min-height:auto;padding:64px 24px;border-top:1px solid var(--line)}

/* ---------- footer ---------- */
footer.site{background:var(--night);color:#aab5d2;margin-top:24px;
  padding:60px 24px 36px;font-size:.92rem}
footer.site .fcols{max-width:1160px;margin:0 auto;display:grid;gap:30px 44px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
footer.site h4{color:#fff;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:400;margin:0 0 14px}
footer.site a{color:#b9c2da;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer.site .disclose{max-width:1160px;margin:44px auto 0;padding-top:22px;
  border-top:1px solid rgba(216,199,154,.18);font-size:.84rem;color:#9aa5c4;max-width:88ch}
footer.site .disclose strong{color:#e8ddc0;font-weight:500}
footer.site .copy{max-width:1160px;margin:16px auto 0;font-size:.78rem;color:#7f8aab;
  letter-spacing:.06em}

/* ---------- floating chat button (3% of the trade has this; every Gulf and
   Asian buyer uses it) ---------- */
.float-chat{
  position:fixed;right:20px;bottom:20px;z-index:30;width:58px;height:58px;
  display:grid;place-items:center;background:#25d366;color:#fff;
  text-decoration:none;border-radius:50%;
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.float-chat svg{width:30px;height:30px}
.float-chat:hover{background:#1fbd5a;transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.34)}
.float-chat.line{background:#059e46}

/* ---------- small screens: one calm column, full-width actions ---------- */
@media(max-width:640px){
  body{font-size:16px}
  .inner{padding:48px 20px}
  main .inner+.inner,section.inner+section.inner{padding-top:8px}
  .page{padding-top:36px}
  h1{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  h2{margin-top:1.5em;font-size:clamp(1.4rem,6vw,1.8rem)}
  .lede{font-size:1.05rem;line-height:1.7}
  .eyebrow{font-size:.62rem;letter-spacing:.26em}
  header.site{padding:11px 16px;gap:12px}
  .brand .mark{width:36px;height:36px;margin:-3px 0}
  .sechead{margin-bottom:20px}
  /* actions become a full-width stack: one thumb, one target */
  .actions{flex-direction:column;align-items:stretch;gap:10px}
  .actions .btn{text-align:center;padding:15px 20px}
  .steps li,.flow li{padding:20px 20px 22px}
  .aside{padding:20px 20px}
  .two{gap:28px}
  .stones{gap:18px}
  .stone-body{padding:18px 18px 20px}
  th,td{padding:10px 12px}
  .trust{text-align:center}
  footer.site{padding:44px 20px 30px}
  .float-chat{right:16px;bottom:16px;width:54px;height:54px}
  .float-chat svg{width:28px;height:28px}
  .gate{padding:48px 18px}
  .gate-word{font-size:1.05rem;letter-spacing:.3em}
}
@media(max-width:640px){
  .brand .name{font-size:.74rem;letter-spacing:.14em}
  .brand .name small{font-size:.5rem;letter-spacing:.22em}
}
@media(max-width:390px){
  .brand .name{font-size:.66rem}
  .brand .name small{font-size:.46rem}
  .btn{padding:12px 18px;font-size:.74rem}
}

/* ---------- the design-project components ---------- */
/* Our story opens as cinema: the Okkampitiya film at its native 16:9, full
   content width, never cropped, set in the gold hairline. */
.story-hero-in{max-width:1160px;margin:0 auto;
  padding:clamp(36px,6vh,60px) clamp(20px,3vw,28px) clamp(44px,7vh,76px)}
.story-hero .big-since{color:var(--gold-soft)}
.story-hero .shot{position:relative;margin:34px 0 0;width:100%}
.story-hero .shot::after{content:"";position:absolute;inset:-12px;
  border:1px solid rgba(216,199,154,.3);border-radius:30px;pointer-events:none}
.story-hero .shot .ph,.story-hero .shot img,.story-hero .shot video{
  aspect-ratio:16/9;width:100%;height:auto;max-height:none;
  object-fit:cover;background:#060b1e;border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.story-hero .shot figcaption{margin-top:22px}
@media(max-width:640px){
  .story-hero .shot::after{inset:-8px;border-radius:24px}
  .story-hero .shot figcaption{margin-top:16px}
}

/* Splash: the mark and wordmark on night, once per session. */
.splash{position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  pointer-events:none;
  background:
    radial-gradient(90% 120% at 78% 12%, rgba(63,102,204,.28), transparent 55%),
    radial-gradient(70% 100% at 12% 88%, rgba(29,63,143,.2), transparent 60%),
    var(--night);
  animation:rcgSplash 2.3s ease forwards}
.splash-in{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:24px}
.splash-mark{width:96px;height:96px;animation:rcgMarkIn 1s cubic-bezier(.2,.6,.2,1) both}
.splash-word{font-family:var(--serif);font-weight:300;font-size:1.25rem;
  letter-spacing:.42em;text-transform:uppercase;color:#fff;margin:26px 0 0;
  padding-left:.42em;animation:rcgRise .9s .15s cubic-bezier(.2,.6,.2,1) both}
.splash-sub{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-soft);margin:12px 0 0;padding-left:.3em;
  animation:rcgRise .9s .3s cubic-bezier(.2,.6,.2,1) both}
.splash-rule{width:56px;height:1px;background:rgba(216,199,154,.5);margin-top:26px;
  animation:rcgRise .9s .45s both}
@keyframes rcgSplash{0%,68%{opacity:1}100%{opacity:0}}
@keyframes rcgRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rcgMarkIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}

/* The two pills in the menu: Inventory in cornflower, Send requirement in
   gold. Contact closes the regular items before them. */
header.site nav .nav-cta{color:#0b122d;background:var(--gold);font-weight:500;
  border-radius:999px;padding:10px 16px 9px;margin-left:6px;
  letter-spacing:.13em;border-bottom:0}
header.site nav .nav-cta:hover{background:#c09a4e;color:#0b122d}
header.site nav .nav-inv{color:#fff;background:#3862c4;font-weight:500;
  border-radius:999px;padding:10px 16px 9px;margin-left:8px;
  letter-spacing:.13em;border-bottom:0}
header.site nav .nav-inv:hover{background:#2d54ae;color:#fff}
header.site nav .nav-inv.cur{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
  background:#2d54ae;color:#fff}
@media(max-width:1149px){
  header.site nav .nav-cta,header.site nav .nav-inv{margin:10px 0 0;
    text-align:center;padding:14px 20px;border-radius:999px;border-bottom:0}
}

/* The house: three pages under one menu item. Hover opens it on desktop,
   a tap toggles it, and in the folded mobile menu the three links simply
   appear inline. */
.navdrop{position:relative}
.navdrop-btn{display:inline-flex;align-items:center;gap:6px;background:none;
  border:0;cursor:pointer;font:inherit;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--night-ink);padding:9px 11px;
  border-radius:999px;transition:color .2s ease,background .2s ease}
.navdrop-btn svg{width:9px;height:6px;transition:transform .2s ease}
.navdrop-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.navdrop.cur .navdrop-btn{color:var(--gold-soft);background:rgba(216,199,154,.13)}
.navdrop.open .navdrop-btn svg{transform:rotate(180deg)}
.navdrop-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:184px;
  /* the invisible bridge: hover survives the gap between button and panel */
  display:none;flex-direction:column;gap:2px;padding:8px;z-index:40;
  background:rgba(13,20,48,.98);backdrop-filter:blur(10px);
  border:1px solid rgba(216,199,154,.22);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.45)}
.navdrop-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.navdrop.open .navdrop-menu{display:flex}
@media(hover:hover) and (min-width:1150px){
  .navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{display:flex}
}
.navdrop-menu a{padding:10px 14px;border-radius:10px;white-space:nowrap}
@media(max-width:1149px){
  .navdrop{width:100%}
  .navdrop-btn{display:none}
  .navdrop-menu{display:flex;position:static;min-width:0;background:none;
    border:0;box-shadow:none;padding:0;backdrop-filter:none}
  .navdrop-menu a{padding:12px 10px;border-radius:10px;
    border-bottom:1px solid rgba(223,228,242,.12);font-size:.78rem}
}

/* The gemstones picture menu: the family portraits as a tile panel under the
   nav item. The item itself is a real link; the panel is desktop courtesy.
   In the folded mobile nav the item collapses back to a plain link. */
.gemmenu{flex-direction:row;flex-wrap:wrap;width:568px;gap:8px;padding:12px}
.gemtile{display:flex;flex-direction:column;gap:7px;width:129px;
  padding:6px 6px 9px;border-radius:12px;text-decoration:none;
  transition:background .2s ease}
.gemtile:hover{background:rgba(255,255,255,.08)}
.gemtile-art{display:block;width:100%;aspect-ratio:5/3.4;border-radius:9px;
  overflow:hidden;position:relative;background:var(--night)}
.gemtile-art img{width:100%;height:100%;object-fit:cover;display:block}
.gemtile-art .facet{position:absolute;inset:22%;border:1px solid var(--gold-soft);
  transform:rotate(45deg);opacity:.6}
.gemtile-name{font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--night-ink);text-align:center;white-space:normal;line-height:1.35}
.gemtile:hover .gemtile-name{color:#fff}
@media(max-width:1149px){
  .gemdrop .navdrop-btn{display:flex;width:100%;padding:12px 10px;
    border-radius:10px;border-bottom:1px solid rgba(223,228,242,.12);
    font-size:.78rem;letter-spacing:.11em}
  .gemdrop .navdrop-btn svg{display:none}
  .gemdrop .navdrop-menu{display:none !important}
}

/* The family filter on the inventory page: the same portrait tiles on the
   paper ground, acting as a filter for the open selection and, once a code
   is in, the trade list. The chosen tile wears the gold ring. */
.gemfilter{padding-top:56px;padding-bottom:0}
.gemfilter .cap{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.gemfilter-row{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.gemfilter .gemtile{border:0;background:none;font:inherit;cursor:pointer;
  padding:6px 6px 9px;width:auto}
.gemfilter .gemtile:hover{background:rgba(18,36,87,.06)}
.gemfilter .gemtile-name{color:var(--ink-deep);letter-spacing:.08em}
.gemfilter .gemtile:hover .gemtile-name{color:var(--sapphire)}
.gemfilter .gemtile .gemtile-art{outline:2px solid transparent;outline-offset:2px;
  transition:outline-color .2s ease}
.gemfilter .gemtile.on .gemtile-art{outline-color:var(--gold)}
.gemfilter .gemtile.on .gemtile-name{color:var(--gold)}
.gemfilter .tile-mark{position:absolute;inset:0;margin:auto;width:46%;height:46%;
  color:#faf9f6}
@media(max-width:640px){
  .gemfilter-row{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* Spec chips on the stone cards. */
.stone-body .specs{display:flex;flex-wrap:wrap;gap:6px}
.stone-body .specs .chip{margin:0}

/* The journey of a stone: island map on night. */
.journey-card{background:var(--night);border:1px solid rgba(216,199,154,.25);
  border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px;
  align-self:start}
.journey-card img{margin:0 auto;display:block}
.jlabel{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-soft);margin:0}
.jcap{font-size:.78rem;color:#8d99bb;margin:0;text-align:center}

/* The lapidary line: rough to certificate, five steps on night. */
.cutline{background:var(--night);border-radius:18px;
  padding:clamp(24px,4vw,40px);margin:36px 0 8px;overflow-x:auto}
.cutline .jlabel{margin-bottom:26px}
.cutline-track{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));
  position:relative;min-width:720px}
.cutline-rule{position:absolute;top:11px;left:10%;right:10%;height:1px;
  background:rgba(216,199,154,.35)}
.cutstep{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:0 10px;position:relative}
.cutdot{width:22px;height:22px;flex:none;border-radius:50%;background:var(--gold);
  color:#0b122d;display:grid;place-items:center;font-size:.68rem;font-weight:500}
.cutstep b{font-family:var(--serif);font-weight:500;color:#fff;font-size:1.05rem}
.cutstep>span:last-child{color:#8d99bb;font-size:.84rem;line-height:1.5}

/* Origin: map beside the vertical journey. */
.origin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:34px;align-items:start;margin:36px 0}
.oflow{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.oflow li{display:grid;grid-template-columns:44px 1fr;gap:0 18px;
  padding:0 0 26px;position:relative}
.oflow li:last-child{padding-bottom:0}
.oflow .cutdot{width:26px;height:26px;font-size:.72rem;z-index:1}
.oline{position:absolute;left:12px;top:28px;bottom:0;width:1px;background:var(--gold-soft)}
.oflow .obody b{display:block;font-family:var(--serif);font-size:1.22rem;
  font-weight:500;color:var(--ink-deep);margin-bottom:4px}
.oflow .obody>span{color:var(--muted);font-size:.93rem}

/* The house is a person: the founder card. */
.founder-card{background:var(--night);border:1px solid rgba(216,199,154,.25);
  border-radius:18px;padding:clamp(24px,4vw,36px);margin:0 0 44px;
  display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.founder-face{width:132px;height:132px;flex:none;border-radius:50%;
  object-fit:cover;border:1px solid rgba(216,199,154,.45);
  background:radial-gradient(120% 130% at 30% 20%,#3f66cc,#122457 70%)}
.founder-body{flex:1;min-width:240px}
.founder-name{font-family:var(--serif);font-weight:400;font-size:1.45rem;
  color:#fff;margin:10px 0 4px}
.founder-title{font-size:.9rem;color:#8d99bb;margin:0 0 16px;max-width:52ch}
.li-btn{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--night-ink);border:1px solid rgba(223,228,242,.35);
  border-radius:999px;padding:9px 18px;
  transition:border-color .2s ease,color .2s ease}
.li-btn:hover{border-color:var(--gold-soft);color:#e9d7a7}
.li-btn svg{width:15px;height:15px}

/* Inquiry: two speeds. */
.narrow-inq{max-width:860px}
.mode-toggle{display:flex;margin:30px 0 0;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;width:fit-content;background:var(--card)}
.mode-toggle button{font:inherit;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 26px;border:0;cursor:pointer;
  background:transparent;color:var(--muted)}
.mode-toggle button.on{background:var(--ink-deep);color:#fff}
.inq-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;margin:24px 0 10px}
.inq-card-h{margin:0 0 4px;font-family:var(--serif);font-size:1.28rem;
  font-weight:500;color:var(--ink-deep)}
.inq-card-sub{margin:0 0 10px;font-size:.9rem;color:var(--muted)}
.inq-success{margin:34px 0 10px;background:var(--card);border:1px solid var(--gold-soft);
  border-radius:16px;padding:34px;text-align:center}
.success-mark{width:56px;height:56px;margin:0 auto 16px;display:block}
.inq-success h2{margin:0 0 .4em;font-size:1.6rem}
.inq-success p{margin:0;color:var(--muted)}
.inq-success .more{display:inline-block;margin-top:22px}
.stepdots{list-style:none;padding:0;display:flex;gap:0;align-items:center;
  margin:24px 0 22px}
.stepdots li{display:flex;align-items:center;flex:1;gap:10px}
.stepdots .dot{width:28px;height:28px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:500;
  background:var(--card);color:var(--muted);border:1px solid var(--line)}
.stepdots li.on .dot{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)}
.stepdots li.done .dot{background:var(--gold);color:#0b122d;border-color:var(--gold)}
.stepdots .dlabel{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#9a958a;white-space:nowrap}
.stepdots li.on .dlabel{color:var(--ink-deep)}
.stepdots .dline{height:1px;background:var(--line);flex:1;margin:0 10px}
.btn.gold{background:var(--gold);color:#0b122d;font-weight:500}
.btn.gold:hover{background:#c09a4e}
@media(max-width:640px){
  .stepdots .dlabel{display:none}
  .founder-card{padding:22px}
  .cutline-track{min-width:640px}
}

/* ---------- motion: entrance-only, slow, staggered ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-copy,.hero .shot{animation:rise .9s cubic-bezier(.2,.6,.2,1) both}
  .hero .shot{animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .rv{opacity:0;transform:translateY(16px);
    transition:opacity .55s cubic-bezier(.2,.6,.2,1),transform .55s cubic-bezier(.2,.6,.2,1);
    transition-delay:var(--rvd,0s)}
  .rv.in{opacity:1;transform:none}
}

/* ---------- keyboard focus ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible,.pill:focus-visible,
.gate-btn:focus-visible,header.site nav a:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}


/* ---------- stone pages: one page per open-listed lot ----------
   The spec block is the product; photography sits above it at full column
   width, the how-to-buy aside beside it. Sold pages keep the same dress with
   the record line in place of the request action. */
.stonepage h1{margin-bottom:18px}
.stonepix{display:grid;gap:22px;margin:10px 0 30px}
.stonepix.n2{grid-template-columns:1fr 1fr}
.stonepix.n3{grid-template-columns:1fr 1fr 1fr}
.stoneshot{margin:0}
.stoneshot img,.stoneshot video{display:block;width:100%;aspect-ratio:1/1;
  object-fit:cover;border-radius:18px;border:1px solid var(--line);
  background:var(--night)}
.stonegrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:40px;align-items:start}
.spectable{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.spectable th,.spectable td{padding:11px 16px;text-align:left;font-size:.92rem;
  border-bottom:1px solid var(--line);vertical-align:top}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
.spectable th{width:38%;font-weight:600;color:var(--ink-deep);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.stoneaside .actions{margin-top:18px}
.stonesold{background:var(--card);border:1px solid var(--gold-soft);
  border-radius:12px;padding:12px 16px;font-size:.92rem}
@media(max-width:860px){
  .stonegrid{grid-template-columns:1fr}
  .stonepix.n2,.stonepix.n3{grid-template-columns:1fr}
}

/* New in the vault: the arrivals strip on the gemstones page. */
.arrivals{margin:26px 0 8px}
.arrival-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;margin-top:14px}
.arrival{display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px 16px 12px 12px;color:inherit;
  transition:border-color .2s ease,transform .2s ease}
.arrival:hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.arrival-art{width:64px;height:64px;flex:none;border-radius:12px;overflow:hidden;
  position:relative;background:var(--night)}
.arrival-art img{width:100%;height:100%;object-fit:cover;display:block}
.arrival-art .facet{position:absolute;inset:14px;border:1px solid var(--gold-soft);
  transform:rotate(45deg);opacity:.7}
.arrival b{display:block;font-size:.92rem;color:var(--ink-deep);line-height:1.35}
.arrival span:not(.arrival-art){display:block;font-size:.78rem;color:var(--muted);margin-top:2px}

/* Sold lots in the open selection: kept, greyed, tagged. */
.soldrow td{opacity:.55}
.tag.sold{background:var(--ink-deep);color:#fff}
\n@media print{header.site,footer.site,.float-chat,.actions{display:none}}