:root {
  --ink: #17130f;
  --muted: #5c534a;
  --line: rgba(31, 25, 19, 0.24);
  --ivory: #eee6db;
  --warm: #d8cbbb;
  --champagne: #c7b8a4;
  --paper: #f5efe6;
  --dark: #100e0b;
  --max: 1440px;
  --serif: "Cormorant Garamond", "Bodoni 72", "Didot", Georgia, serif;
  --sans: "Inter", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, input, select, textarea { font: inherit; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: 270px 1fr 54px;
  align-items: center;
  gap: 34px;
  padding: 44px 56px 24px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(226, 217, 204, 0.72), rgba(226, 217, 204, 0));
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
  text-align: center;
  line-height: 1;
}
.brand span {
  font-family: var(--serif);
  font-size: clamp(25px, 2.2vw, 36px);
  text-transform: uppercase;
}
.brand small {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.main-nav {
  justify-self: center;
  display: flex;
  /* The gap answers to the space that is actually left over, not to a
     fraction of the viewport. 5vw was fine for five short labels; with
     "Custom Sourcing" added on 15 August the six labels measure 592px and
     five gaps of 72px pushed the row past the header, which threw the
     hamburger button off-screen at 1280. The header spends 473px on the
     brand, the button, its own padding and the grid gaps, so what remains
     for the row is 100vw - 473px and each of the five gaps may have a fifth
     of whatever is left after the labels. */
  gap: clamp(20px, calc((100vw - 1065px) / 5), 72px);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.main-nav a {
  position: relative;
  padding: 8px 0;
}
.main-nav a::after,
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after,
.text-link:hover::after { transform: scaleX(1); transform-origin: left; }
.auth-nav-link {
  padding-left: 22px !important;
}
.auth-nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 18px;
  background: rgba(23,19,15,0.26);
  transform: translateY(-50%);
}

.menu-button {
  justify-self: end;
  display: grid;
  gap: 7px;
  width: 35px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-button span { display: block; height: 1px; background: var(--ink); }
.mobile-menu-panel {
  position: absolute;
  top: 100%;
  right: 24px;
  width: min(320px, calc(100vw - 48px));
  padding: 28px;
  background: rgba(242,234,223,0.96);
  border: 1px solid rgba(23,19,15,0.12);
  box-shadow: 0 28px 60px rgba(28,20,12,0.16);
}
.mobile-menu-panel nav {
  display: grid;
  gap: 18px;
}
.mobile-menu-panel a {
  position: relative;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.mobile-menu-panel a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.panel,
.origins-section,
.selection,
.collection,
.custom,
.testimonials,
.private-viewing,
.contact {
  position: relative;
  overflow: hidden;
}

.fabric-panel {
  background:
    radial-gradient(1200px 600px at 50% 23%, rgba(255,255,255,0.43), transparent 58%),
    linear-gradient(109deg, transparent 6%, rgba(255,255,255,0.24) 12%, transparent 21%),
    linear-gradient(78deg, transparent 57%, rgba(255,255,255,0.36) 66%, transparent 76%),
    radial-gradient(800px 900px at 83% 55%, rgba(129,112,92,0.28), transparent 68%),
    linear-gradient(180deg, #d8cdbe, #eee7dd 74%, #d1c1ad);
}
.fabric-panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(100deg, transparent 0 80px, rgba(255,255,255,0.12) 82px 91px, transparent 102px 186px),
    radial-gradient(900px 500px at 18% 75%, rgba(75,60,45,0.18), transparent 70%);
  filter: blur(7px);
  opacity: 0.8;
  pointer-events: none;
}

.hero {
  /* Was max(100vh, 980px). The 980px floor outlived its purpose: once the
     scene was sized to fit the viewport the content came in under 900px, and
     the floor was the only thing still stretching the section past the fold —
     it held the plinths 80px below it on a 900px screen. Plain 100vh lets the
     hero be exactly one screen, which is the point of the composition. */
  min-height: 100vh;
  padding: 190px 56px 0;
  display: grid;
  align-items: end;
}
.hero-copy {
  position: relative;
  z-index: 3;
  align-self: start;
  text-align: center;
  margin: 0 auto;
  width: min(820px, 92vw);
}
.eyebrow,
.section-kicker {
  margin: 0 0 28px;
  font-size: 13px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
}
.section-kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #302923;
  font-size: 12px;
}
.section-kicker i {
  width: 76px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(54px, 6.4vw, 90px);
}
h2 {
  font-size: clamp(36px, 4.4vw, 67px);
}
.lead {
  margin: 30px 0 34px;
  font-size: 19px;
  line-height: 1.65;
}
.outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 40px;
  border: 1px solid rgba(23,19,15,0.54);
  background: rgba(245,239,230,0.1);
  font-size: 12px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  transition: transform 0.55s ease, background 0.55s ease, border-color 0.55s ease;
}
.outline-button:hover { transform: translateY(-3px); background: rgba(255,255,255,0.24); border-color: rgba(23,19,15,0.9); }

.pedestal-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: end;
  gap: clamp(20px, 6vw, 86px);
  width: min(1280px, 92vw);
  margin: 190px auto 0;
}
.pedestal {
  position: relative;
  height: 370px;
  border-radius: 26px 26px 0 0;
  background:
    linear-gradient(90deg, rgba(133,113,85,0.2), transparent 18%, rgba(255,255,255,0.68) 38%, transparent 58%, rgba(127,105,78,0.24)),
    repeating-linear-gradient(90deg, #e9dfcf 0 10px, #fff5e7 11px 19px, #cdbda7 20px 23px);
  box-shadow: inset 0 13px 0 rgba(255,255,255,0.55), inset 0 -20px 35px rgba(87,67,44,0.15), 0 34px 54px rgba(69,53,36,0.26);
}
.pedestal::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: -19px;
  height: 43px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #f8efe2 0 58%, #c8b79e 61%, #f7ecdc 68%);
  box-shadow: 0 10px 20px rgba(58,43,28,0.22);
}
.pedestal-low { height: 270px; }
.pedestal-mid { height: 350px; }
.pedestal-tall { height: 430px; }
.pedestal .gem {
  position: absolute;
  left: 50%;
  top: -150px;
  transform: translateX(-50%);
}
.pedestal-low .gem { top: -112px; }
.pedestal-mid .gem { top: -138px; }

.gem {
  position: relative;
  width: 160px;
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 12px rgba(39,25,14,0.34));
  transform-style: preserve-3d;
}
.gem::before,
.gem::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
}
.gem::before {
  background:
    linear-gradient(132deg, rgba(255,255,255,0.72), transparent 16% 76%, rgba(255,255,255,0.22)),
    linear-gradient(42deg, transparent 0 26%, rgba(0,0,0,0.45) 27% 34%, transparent 35% 61%, rgba(255,255,255,0.45) 62% 68%, transparent 69%),
    repeating-conic-gradient(from 13deg, rgba(255,255,255,0.34) 0 10deg, rgba(0,0,0,0.33) 12deg 22deg, transparent 25deg 42deg);
  mix-blend-mode: screen;
}
.gem::after {
  inset: 15%;
  opacity: 0.72;
  background: radial-gradient(circle at 50% 44%, transparent 0 23%, rgba(0,0,0,0.44) 24% 32%, transparent 33%);
}
.cushion { border-radius: 23%; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); }
.asscher { clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%); }
.pear { clip-path: polygon(50% 0, 72% 13%, 91% 43%, 82% 74%, 50% 100%, 18% 74%, 9% 43%, 28% 13%); }
.emerald-cut { clip-path: polygon(17% 0, 83% 0, 100% 17%, 100% 83%, 83% 100%, 17% 100%, 0 83%, 0 17%); }
.gem-ruby { background: radial-gradient(circle at 42% 38%, #ff655c, #a70008 43%, #3e0005 100%); }
.gem-sapphire { background: radial-gradient(circle at 38% 24%, #7fabff, #042e91 42%, #010718 100%); }
.gem-emerald, .gem-tourmaline { background: radial-gradient(circle at 47% 36%, #8dff96, #0c852d 45%, #05230d 100%); }
.gem-spinel { background: radial-gradient(circle at 46% 34%, #ff7add, #8e0878 44%, #26001f 100%); }
.slow-spin { animation: slowSpin 14s ease-in-out infinite alternate; }

.side-scroll,
.right-scroll,
.center-scroll {
  position: absolute;
  z-index: 5;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.side-scroll {
  left: 52px;
  bottom: 32%;
  display: grid;
  justify-items: center;
  gap: 14px;
}
.side-scroll i {
  width: 1px;
  height: 170px;
  background: rgba(23,19,15,0.42);
}
.side-scroll i::after { content: "↓"; position: relative; top: 156px; left: -4px; }
.center-scroll {
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
}
.center-scroll span {
  width: 17px;
  height: 17px;
  border: 1px solid white;
  border-radius: 50%;
}
.center-scroll i {
  width: 1px;
  height: 48px;
  background: white;
}
.center-scroll b { font-weight: 400; }

.origin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  align-items: center;
  gap: 70px;
  padding: 160px max(64px, calc((100vw - var(--max)) / 2 + 64px)) 90px;
}
.origin-copy { position: relative; z-index: 2; }
.origin-copy p:not(.section-kicker), .split-copy > p, .collection-head p, .contact-details p { color: var(--muted); }
.text-link {
  position: relative;
  display: inline-flex;
  gap: 16px;
  margin-top: 26px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(23,19,15,0.34);
  font-size: 12px;
  letter-spacing: 0.33em;
  text-transform: uppercase;
}
.floating-wrap {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
}
/* Origin section: once origin-formation.jpg lands (see images/README.txt),
   the CSS stand-in (the drifting sapphire cut-out) gives way to a real
   photo card, styled like the other photographic slots on the page. */
.origin-visual.has-photo {
  border-radius: 2px;
  box-shadow: 0 34px 54px rgba(69,53,36,0.26);
}
.origin-visual.has-photo .floating-gem-photo,
.origin-visual.has-photo .gem-shadow {
  display: none;
}
.floating-gem {
  width: min(39vw, 460px);
  animation: hoverGem 7s ease-in-out infinite, slowSpin 13s ease-in-out infinite alternate;
}
.gem-shadow {
  position: absolute;
  bottom: 80px;
  width: 330px;
  height: 45px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(3,45,148,0.38), rgba(35,25,18,0.2) 45%, transparent 72%);
  filter: blur(7px);
}
.right-scroll {
  right: 58px;
  top: 56%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  writing-mode: vertical-rl;
}
.right-scroll i { width: 1px; height: 160px; background: rgba(255,255,255,0.55); }

.origins-section {
  padding: 110px max(64px, calc((100vw - var(--max)) / 2 + 64px)) 68px;
  background: linear-gradient(180deg, #ede5da, #d9cab7);
}
.center-intro { text-align: center; margin: 0 auto 64px; }
.center-intro .hairline { display: block; width: 1px; height: 32px; margin: 24px auto; background: rgba(23,19,15,0.27); }
.origin-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 500px;
}
.place-card {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 520px;
  padding: 48px;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.place-card::before,
.place-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.place-card::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(230,217,201,0.34), rgba(203,184,161,0.72)),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.18), transparent 55%);
}
/* Real landscape photo assets. Replace these Wikimedia URLs with owned photography when available. */
.sri::before {
  background: url("https://upload.wikimedia.org/wikipedia/commons/7/7c/Coco_beach.jpg") center / cover;
  filter: sepia(0.45) saturate(0.55) contrast(0.92);
}
.mada::before {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Adansonia_grandidieri04.jpg/1280px-Adansonia_grandidieri04.jpg") center / cover;
  filter: sepia(0.48) saturate(0.6) contrast(0.95);
}
.tan::before {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Trekking_Barranco_Valley_Kilimanjaro_Tanzania.jpg/1280px-Trekking_Barranco_Valley_Kilimanjaro_Tanzania.jpg") center / cover;
  filter: sepia(0.5) saturate(0.58) contrast(0.9);
}
.place-card h3 { margin-top: 28px; font-size: 34px; }
.place-card p, .product-info p, .testimonial-card footer, .site-footer h3 {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.line-icon, .circle-icon {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(23,19,15,0.26);
}
.line-icon {
  width: 39px;
  height: 44px;
  clip-path: polygon(50% 0, 85% 22%, 85% 75%, 50% 100%, 15% 75%, 15% 22%);
}
.journey-cue { margin-top: 30px; text-align: center; font-size: 11px; letter-spacing: 0.38em; text-transform: uppercase; }
.journey-cue span { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 14px; border: 1px solid white; border-radius: 50%; color: white; font-size: 24px; }

.split-section {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 56px;
  min-height: 760px;
  padding: 110px max(64px, calc((100vw - var(--max)) / 2 + 64px));
  background: linear-gradient(180deg, #efe7dc, #dfd1c0);
}
.split-copy { position: relative; z-index: 3; max-width: 470px; }
.split-copy > p { font-size: 18px; }
.feature-list {
  display: grid;
  gap: 26px;
  margin-top: 38px;
}
.feature-list article, .contact-details article {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 22px;
  align-items: start;
}
.circle-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  position: relative;
}
.circle-icon::before, .circle-icon::after { content: ""; position: absolute; }
.search-icon::before { width: 19px; height: 19px; border: 1px solid currentColor; border-radius: 50%; }
.search-icon::after { width: 17px; height: 1px; background: currentColor; transform: translate(12px, 13px) rotate(45deg); }
.diamond-icon::before { width: 25px; height: 25px; border: 1px solid currentColor; transform: rotate(45deg); }
.cert-icon::before { width: 22px; height: 28px; border: 1px solid currentColor; }
.eye-icon::before { width: 30px; height: 17px; border: 1px solid currentColor; border-radius: 50%; }
.eye-icon::after { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.globe-icon::before { width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; }
.shield-icon::before { width: 25px; height: 29px; border: 1px solid currentColor; border-radius: 14px 14px 18px 18px; }
.mail-icon::before { width: 27px; height: 18px; border: 1px solid currentColor; }
.phone-icon::before { width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 8px 8px 11px 11px; transform: rotate(-28deg); }
.pin-icon::before { width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.feature-list h3, .contact-details h3 {
  margin: 0 0 3px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
}
.feature-list p, .contact-details p { margin: 0; font-size: 14px; line-height: 1.65; }

.lifestyle {
  min-height: 600px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 58% 48%, rgba(255,255,255,0.7), transparent 18%),
    radial-gradient(circle at 74% 30%, rgba(98,60,34,0.5), transparent 25%),
    linear-gradient(138deg, #f2e8dc, #d4bfaa);
  box-shadow: inset 0 0 95px rgba(105,80,55,0.16);
}
.selection-visual { position: relative; }
.certificate {
  position: absolute;
  left: 24%;
  top: 13%;
  width: 180px;
  height: 245px;
  display: grid;
  place-items: center;
  transform: rotate(4deg);
  background: #171716;
  color: #d9c7a8;
  font-family: var(--serif);
  font-size: 42px;
  text-align: center;
  filter: blur(0.6px);
  opacity: 0.88;
}
.certificate small { font-family: var(--sans); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; }
.hand {
  position: absolute;
  border-radius: 45% 55% 42% 52%;
  background: linear-gradient(120deg, #9d6842, #e2aa7b 46%, #7a4527);
  box-shadow: inset 18px 10px 26px rgba(255,255,255,0.18);
}
.hand-one { right: -8%; bottom: 4%; width: 390px; height: 230px; transform: rotate(-24deg); }
.hand-two { right: 12%; top: 32%; width: 220px; height: 126px; transform: rotate(28deg); }
.loupe {
  position: absolute;
  right: 21%;
  top: 31%;
  width: 86px;
  height: 86px;
  border: 18px solid #17130f;
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.18);
}
.loupe::after { content: ""; position: absolute; width: 92px; height: 17px; background: #17130f; right: -82px; bottom: -36px; transform: rotate(39deg); border-radius: 10px; }
.tweezer {
  position: absolute;
  right: 28%;
  bottom: 20%;
  width: 350px;
  height: 5px;
  background: #2d2a26;
  transform: rotate(19deg);
  box-shadow: 0 13px 0 #59524b;
}
.mini-gem {
  position: absolute;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 24%;
  clip-path: polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%);
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.25));
}
.mini-gem.blue { background: radial-gradient(circle at 35% 28%, #89b8ff, #063895 56%, #020714); }
.mini-gem.red { background: radial-gradient(circle at 35% 28%, #ff796b, #b10307 56%, #260006); }
.mini-gem.green { background: radial-gradient(circle at 35% 28%, #85f39d, #10732f 56%, #051c0b); }
.mini-gem.violet { background: radial-gradient(circle at 35% 28%, #ff9dea, #8e0878 56%, #230020); }
.mini-gem.yellow { background: radial-gradient(circle at 35% 28%, #fff3a0, #b88716 56%, #342000); }
.mini-gem.teal { background: radial-gradient(circle at 35% 28%, #9bfff3, #088072 56%, #001c1a); }
.selection-visual .blue { right: 36%; bottom: 27%; }
.selection-visual .red { left: 28%; bottom: 27%; }
.selection-visual .green { left: 35%; bottom: 40%; }
.selection-visual .violet { left: 24%; bottom: 18%; }

.collection, .testimonials, .contact {
  padding: 100px max(64px, calc((100vw - var(--max)) / 2 + 64px));
  background: linear-gradient(180deg, #e9dfd3, #d7c7b5);
}
.collection-head, .testimonial-head {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 70px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.product-card {
  overflow: hidden;
  border-radius: 7px;
  background: rgba(246,239,229,0.66);
  transition: transform 0.65s ease, box-shadow 0.65s ease;
}
.product-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 28px 45px rgba(66,49,34,0.18);
}
.product-image {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 270px;
  padding-bottom: 26px;
  background:
    radial-gradient(circle at 48% 38%, rgba(255,255,255,0.75), transparent 33%),
    linear-gradient(145deg, #e5d8c9, #cdbba7);
}
.marble-plinth {
  width: 150px;
  height: 64px;
  border-radius: 50% 50% 12px 12px;
  background: radial-gradient(ellipse at 50% 22%, #fff8ed, #c7b49d);
}
.product-image .gem {
  position: absolute;
  bottom: 76px;
  width: 130px;
  transition: transform 0.7s ease;
}
.product-card:hover .gem { transform: scale(1.08) rotateY(18deg); }
.photo-product {
  display: block;
  min-height: 285px;
  padding: 0;
  background: #d5c7b8;
}
.photo-product::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(219,202,184,0.18)),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,0.34), transparent 42%);
  pointer-events: none;
}
.photo-product img {
  width: 100%;
  height: 285px;
  display: block;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
  transition: transform 0.85s ease, filter 0.85s ease;
}
.ruby-photo img { object-position: center 52%; }
.sapphire-photo img { object-position: center 50%; }
.tourmaline-photo img { object-position: center 45%; }
.spinel-photo img { object-position: center 50%; }
.product-card:hover .photo-product img {
  transform: scale(1.055);
  filter: saturate(1.05) contrast(1.04);
}
.product-info { padding: 31px 38px 34px; }
.product-info h3 { font-size: 24px; }
.product-info a {
  display: block;
  margin-top: 24px;
  padding-top: 19px;
  border-top: 1px solid rgba(23,19,15,0.28);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.quote {
  margin: 64px 0 0;
  text-align: center;
  color: #302923;
}
.quote::before {
  content: "✦";
  display: block;
  margin-bottom: 20px;
  font-size: 24px;
}
.quote cite { font-style: normal; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }

.custom {
  background: linear-gradient(180deg, #ede3d6, #dac9b6);
}
.feature-list.compact { gap: 18px; }
.sketch-visual { position: relative; background: linear-gradient(135deg, #e7dbcd, #c5ad95); }
.paper {
  position: absolute;
  left: 24%;
  top: 8%;
  width: 470px;
  height: 580px;
  padding: 46px;
  transform: rotate(7deg);
  background: #f4eadb;
  box-shadow: 0 28px 40px rgba(57,42,28,0.2);
}
.paper span, .paper em {
  position: absolute;
  font-family: "Bradley Hand", "Segoe Print", cursive;
  color: #8c7b68;
  font-size: 26px;
  line-height: 1.25;
}
.paper span { left: 55px; top: 35px; }
.note-one { right: 58px; top: 205px; }
.note-two { left: 52px; bottom: 155px; }
.ring-sketch {
  position: absolute;
  left: 72px;
  top: 166px;
  width: 310px;
  height: 108px;
  border: 2px solid rgba(30,26,22,0.38);
  border-radius: 50%;
}
.ring-sketch::before {
  content: "";
  position: absolute;
  left: 110px;
  top: -28px;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(30,26,22,0.45);
  transform: rotate(45deg);
}
.sketch-visual .long { width: 530px; right: 8%; top: 55%; transform: rotate(-12deg); }
.sketch-visual .dark { right: 6%; top: 5%; }
.sketch-visual .big { width: 68px; right: 33%; top: 50%; }
.sketch-visual .red { right: 45%; bottom: 19%; }
.sketch-visual .green { right: 58%; bottom: 28%; }

.testimonial-head { align-items: center; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.testimonial-card {
  min-height: 255px;
  padding: 38px 42px 32px;
  background: rgba(238,229,218,0.75);
}
.testimonial-card b {
  font-family: var(--serif);
  font-size: 54px;
  line-height: 1;
}
.testimonial-card p {
  margin: 5px 0 28px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.45;
}
.testimonial-card footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-top: 22px;
  border-top: 1px solid rgba(23,19,15,0.24);
}
.testimonial-card i { font-family: var(--serif); font-size: 29px; font-style: normal; letter-spacing: 0; }

.private-viewing {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 60px;
  min-height: 370px;
  padding: 70px max(64px, calc((100vw - var(--max)) / 2 + 64px));
  color: #f3eadc;
  background:
    radial-gradient(circle at 82% 28%, rgba(211,158,83,0.24), transparent 18%),
    radial-gradient(circle at 68% 55%, rgba(255,255,255,0.08), transparent 35%),
    linear-gradient(112deg, #0c0a08, #2a1c11 58%, #090807);
}
.private-viewing .section-kicker { color: #f3eadc; }
.outline-button.dark { color: #f3eadc; border-color: rgba(243,234,220,0.56); }
.gem-box {
  position: relative;
  height: 270px;
}
.box-lid {
  position: absolute;
  left: 18%;
  top: 12px;
  width: 410px;
  height: 120px;
  display: grid;
  place-items: center;
  transform: perspective(600px) rotateX(56deg);
  background: linear-gradient(145deg, #17130f, #050403);
  border: 1px solid rgba(226,190,119,0.18);
  color: #d1ad69;
  font-family: var(--serif);
  text-align: center;
  letter-spacing: 0.06em;
}
.box-lid small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; }
.box-tray {
  position: absolute;
  left: 14%;
  bottom: 15px;
  width: 470px;
  height: 170px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  transform: perspective(700px) rotateX(58deg) rotateZ(-2deg);
  background: linear-gradient(145deg, #221a14, #060504);
  border: 14px solid #15100c;
  box-shadow: 0 28px 65px rgba(0,0,0,0.55);
}
.box-tray .mini-gem { position: static; }

.contact {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr 0.7fr;
  align-items: center;
  gap: 60px;
  min-height: 330px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.contact-details { display: grid; gap: 22px; }
.rough-crystals {
  position: relative;
  height: 220px;
}
.rough-crystals span {
  position: absolute;
  bottom: 30px;
  width: 150px;
  height: 135px;
  clip-path: polygon(30% 0, 72% 8%, 100% 52%, 72% 100%, 20% 89%, 0 42%);
  background:
    linear-gradient(128deg, rgba(255,255,255,0.72), transparent 22% 68%, rgba(255,255,255,0.32)),
    radial-gradient(circle at 48% 45%, #fff9ed, #a8957f);
  opacity: 0.78;
  filter: drop-shadow(0 24px 18px rgba(76,55,37,0.24));
}
.rough-crystals span:nth-child(1) { left: 0; transform: rotate(-18deg); }
.rough-crystals span:nth-child(2) { left: 92px; bottom: 18px; transform: rotate(11deg) scale(1.1); }
.rough-crystals span:nth-child(3) { left: 184px; transform: rotate(28deg) scale(0.78); }

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.75fr 0.85fr 1.15fr;
  gap: 70px;
  padding: 72px max(64px, calc((100vw - var(--max)) / 2 + 64px)) 92px;
  color: #eee4d4;
  background:
    linear-gradient(130deg, transparent 0 44%, rgba(255,255,255,0.04) 45% 46%, transparent 47%),
    radial-gradient(circle at 90% 24%, rgba(146,111,70,0.1), transparent 35%),
    #0d0b09;
}
.brand.light { color: #eee4d4; }
.site-footer p, .site-footer a {
  display: block;
  color: rgba(238,228,212,0.78);
  font-size: 13px;
}
.site-footer h3 {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 500;
}
.socials { display: flex; gap: 18px; margin-top: 26px; }
.socials a {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(238,228,212,0.6);
}
.newsletter label {
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  margin-top: 24px;
  border-bottom: 1px solid rgba(238,228,212,0.42);
}
.newsletter span { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; }
.newsletter input, .newsletter button {
  height: 36px;
  border: 0;
  color: #eee4d4;
  background: transparent;
}
.copyright {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  letter-spacing: 0.19em;
  white-space: nowrap;
}

.gemstones-page {
  background: linear-gradient(180deg, #ede3d7, #f1e9de 34%, #dfd0be 100%);
  max-width: 100vw;
  overflow-x: hidden;
}
.collection-hero {
  min-height: 54vh;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 60px;
  padding: 150px max(64px, calc((100vw - var(--max)) / 2 + 72px)) 64px;
  overflow: hidden;
}
.collection-hero-copy,
.collection-hero-visual {
  position: relative;
  z-index: 2;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 48px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.breadcrumb b {
  font-weight: 400;
}
.collection-hero h1 {
  font-size: clamp(54px, 6vw, 88px);
}
.collection-hero-copy p:not(.breadcrumb) {
  margin: 28px 0 0;
  color: #3f3831;
  font-size: 20px;
  line-height: 1.65;
}
.collection-hero-visual {
  min-height: 340px;
  contain: paint;
}
.raw-marble {
  position: absolute;
  right: -8%;
  top: 7%;
  width: min(620px, 58vw);
  height: 260px;
  border-radius: 26px 18px 34px 20px;
  transform: rotate(-4deg);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.75), transparent 24% 66%, rgba(113,92,70,0.14)),
    radial-gradient(circle at 22% 38%, rgba(255,255,255,0.9), transparent 26%),
    repeating-linear-gradient(112deg, transparent 0 48px, rgba(111,92,75,0.08) 51px 54px, transparent 58px 98px),
    #ded1c2;
  box-shadow: 0 36px 80px rgba(63,45,30,0.22), inset 0 -22px 42px rgba(79,60,40,0.1);
}
.collection-hero-gem {
  position: absolute;
  right: min(13vw, 170px);
  top: 40px;
  width: 190px;
  animation: slowSpin 12s ease-in-out infinite alternate;
}
.blue-reflection {
  position: absolute;
  right: min(10vw, 134px);
  top: 230px;
  width: 190px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(5,68,181,0.34), transparent 68%);
  filter: blur(7px);
}

.filter-bar {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 27px max(64px, calc((100vw - var(--max)) / 2 + 72px));
  border-top: 1px solid rgba(23,19,15,0.11);
  border-bottom: 1px solid rgba(23,19,15,0.11);
  background: rgba(245,238,228,0.68);
  backdrop-filter: blur(10px);
}
.filter-left,
.filter-right {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 54px);
}
.filter-bar span,
.filter-control {
  color: #302923;
  font-size: 11px;
  letter-spacing: 0.31em;
  text-transform: uppercase;
  white-space: nowrap;
}
.filter-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.filter-control i {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s ease;
}
.filter-control:hover i {
  transform: rotate(45deg) translate(2px, 0);
}

.gemstone-listing {
  padding: 54px max(64px, calc((100vw - var(--max)) / 2 + 72px)) 70px;
  background: linear-gradient(180deg, #eee5da, #e6d8c8);
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.collection-card {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(246,239,230,0.64);
  box-shadow: 0 20px 44px rgba(72,52,34,0.08);
  transition: transform 0.75s ease, box-shadow 0.75s ease, background 0.75s ease;
}
.collection-card:hover {
  transform: translateY(-7px);
  background: rgba(248,241,231,0.82);
  box-shadow: 0 30px 54px rgba(67,48,31,0.15);
}
.wishlist-button {
  position: absolute;
  right: 22px;
  top: 21px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.wishlist-button::before,
.wishlist-button::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 18px;
  border: 1px solid rgba(23,19,15,0.7);
  border-left: 0;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  transform-origin: bottom center;
}
.wishlist-button::before {
  left: 7px;
  top: 5px;
  transform: rotate(-45deg);
}
.wishlist-button::after {
  left: 10px;
  top: 5px;
  transform: rotate(45deg);
}
.collection-card:hover .wishlist-button::before,
.collection-card:hover .wishlist-button::after,
.wishlist-button.is-active::before,
.wishlist-button.is-active::after {
  background: rgba(23,19,15,0.09);
}
.collection-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 310px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.72), transparent 34%),
    radial-gradient(ellipse at 50% 77%, rgba(52,36,21,0.22), transparent 28%),
    linear-gradient(145deg, #e3d7c9, #cdbba7);
}
.collection-visual::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 58px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43,31,21,0.22), transparent 70%);
  filter: blur(5px);
}
.collection-visual .gem {
  width: 176px;
  z-index: 2;
  transition: transform 0.85s ease;
}
.collection-card:hover .collection-visual .gem {
  transform: scale(1.055) rotateY(14deg);
}
.gem-bicolour {
  background:
    linear-gradient(90deg, #879b43 0 42%, #d15b9a 66%, #431622),
    radial-gradient(circle at 46% 36%, rgba(255,255,255,0.8), transparent 38%);
}
.gem-garnet {
  background: radial-gradient(circle at 43% 29%, #ff8c39, #b7330e 48%, #300a03 100%);
}
.gem-champagne {
  background: radial-gradient(circle at 42% 32%, #fff7d9, #837b61 45%, #242119 100%);
}
.kite {
  clip-path: polygon(50% 0, 88% 70%, 50% 100%, 12% 70%);
}
.oval {
  border-radius: 50%;
  clip-path: ellipse(48% 42% at 50% 50%);
}
.collection-card-info {
  padding: 34px 36px 36px;
}
.collection-card-info h2 {
  font-size: 25px;
}
.collection-card-info p {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.21em;
  text-transform: uppercase;
}
.collection-card-info a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(23,19,15,0.24);
  font-size: 12px;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}
.collection-card-info a span {
  transition: transform 0.45s ease;
}
.collection-card:hover .collection-card-info a span {
  transform: translateX(7px);
}

.custom-stone-band {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 36px;
  padding: 48px max(64px, calc((100vw - var(--max)) / 2 + 72px));
  background: rgba(215,201,184,0.64);
  border-top: 1px solid rgba(23,19,15,0.1);
  border-bottom: 1px solid rgba(23,19,15,0.1);
}
.large-icon {
  width: 78px;
  height: 78px;
}
.custom-stone-band h2 {
  font-size: clamp(24px, 2.2vw, 34px);
}
.custom-stone-band p {
  margin: 8px 0 0;
  color: var(--muted);
}

.collection-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 42px;
  padding: 46px max(64px, calc((100vw - var(--max)) / 2 + 72px));
  background: rgba(242,234,224,0.82);
  border-bottom: 1px solid rgba(23,19,15,0.1);
}
.collection-trust-strip article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
}
.collection-trust-strip h3 {
  margin: 0 0 5px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
}
.collection-trust-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.editorial-collection-cta {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 74px;
  align-items: center;
  padding: 96px max(64px, calc((100vw - var(--max)) / 2 + 72px));
  background: linear-gradient(180deg, #e8ddcf, #d7c7b5);
  overflow: hidden;
}
.editorial-image {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(circle at 42% 44%, rgba(255,255,255,0.75), transparent 25%),
    linear-gradient(135deg, #efe4d6, #c7b49f);
}
.macro-surface {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(105deg, transparent 0 90px, rgba(255,255,255,0.13) 94px 108px, transparent 112px 180px),
    radial-gradient(circle at 70% 24%, rgba(87,66,45,0.18), transparent 31%);
  filter: blur(1px);
}
.editorial-tweezer {
  right: 6%;
  top: 47%;
  width: 620px;
  transform: rotate(-12deg);
}
.editorial-pear {
  position: absolute;
  left: 45%;
  top: 34%;
  width: 155px;
  transform: rotate(-18deg);
}
.editorial-copy p:not(.section-kicker) {
  color: var(--muted);
  font-size: 19px;
}

.appointment-page {
  max-width: 100vw;
  overflow-x: hidden;
  background: linear-gradient(180deg, #eadfd2, #f2eae0 42%, #ddcdbb 100%);
}
.appointment-hero {
  min-height: 82vh;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: 52px;
  padding: 142px max(64px, calc((100vw - var(--max)) / 2 + 72px)) 72px;
  overflow: hidden;
}
.appointment-copy,
.appointment-hero-visual {
  position: relative;
  z-index: 2;
}
.appointment-copy h1 {
  font-size: clamp(50px, 5.4vw, 82px);
}
.appointment-copy > p:not(.appointment-lead) {
  max-width: 480px;
  color: #4e453d;
  font-size: 16px;
}
.appointment-lead {
  margin: 24px 0 22px;
  color: #312b25;
  font-size: 19px;
  line-height: 1.65;
}
.appointment-features {
  display: grid;
  gap: 19px;
  margin-top: 34px;
  max-width: 460px;
}
.appointment-features article {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
.appointment-features .circle-icon {
  width: 52px;
  height: 52px;
}
.appointment-features h3,
.appointment-info-strip h3,
.appointment-contact h2 {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}
.appointment-features p {
  margin: 0;
  color: #4e453d;
  font-size: 14px;
  line-height: 1.55;
}
.calendar-icon::before {
  width: 25px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.calendar-icon::after {
  width: 25px;
  height: 1px;
  background: currentColor;
  transform: translateY(-7px);
}
.chat-icon::before {
  width: 28px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.chat-icon::after {
  width: 8px;
  height: 8px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-8px, 12px) rotate(-18deg);
}
.lock-icon::before {
  width: 24px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 2px;
  transform: translateY(5px);
}
.lock-icon::after {
  width: 15px;
  height: 14px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  transform: translateY(-7px);
}
.clock-icon::before {
  width: 29px;
  height: 29px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.clock-icon::after {
  width: 10px;
  height: 12px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(3px, -3px);
}
.people-icon::before {
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-8px, -6px);
}
.people-icon::after {
  width: 27px;
  height: 17px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  transform: translate(4px, 12px);
}

.appointment-hero-visual {
  min-height: 610px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 69% 23%, rgba(244,209,138,0.18), transparent 18%),
    radial-gradient(circle at 47% 42%, rgba(255,255,255,0.36), transparent 26%),
    linear-gradient(110deg, rgba(239,229,216,0.9), rgba(164,128,91,0.45)),
    #d4c1aa;
  box-shadow: inset 0 0 120px rgba(79,57,38,0.17);
  overflow: hidden;
  contain: paint;
}
.atelier-wall-logo {
  position: absolute;
  right: 25%;
  top: 15%;
  color: rgba(117,82,46,0.58);
  font-family: var(--serif);
  font-size: 43px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  filter: blur(0.3px);
}
.atelier-wall-logo small {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.35em;
}
.viewing-table {
  position: absolute;
  left: 11%;
  right: -5%;
  bottom: -15%;
  height: 360px;
  border-radius: 50% 0 0 0;
  background:
    repeating-linear-gradient(125deg, transparent 0 82px, rgba(95,72,51,0.16) 85px 88px, transparent 92px 150px),
    radial-gradient(circle at 47% 18%, rgba(255,255,255,0.74), transparent 22%),
    #cdbba8;
  box-shadow: 0 -22px 58px rgba(68,48,32,0.18);
}
.table-lamp {
  position: absolute;
  right: 7%;
  top: 26%;
  width: 94px;
  height: 150px;
  border-bottom: 90px solid #191410;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-radius: 70px 70px 0 0;
  filter: drop-shadow(0 16px 24px rgba(31,20,12,0.28));
}
.table-lamp::before {
  content: "";
  position: absolute;
  left: 41px;
  top: 88px;
  width: 4px;
  height: 180px;
  background: #b98c49;
}
.table-lamp::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 252px;
  width: 84px;
  height: 16px;
  border-radius: 50%;
  background: #191410;
}
.dried-vase {
  position: absolute;
  left: 15%;
  top: 28%;
  width: 54px;
  height: 115px;
  border-radius: 45% 45% 12px 12px;
  background: linear-gradient(90deg, #cfc1ad, #f3eadc 52%, #b49c82);
}
.dried-vase::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 92px;
  width: 140px;
  height: 170px;
  background:
    linear-gradient(62deg, transparent 48%, rgba(68,47,28,0.45) 49%, transparent 51%),
    linear-gradient(118deg, transparent 50%, rgba(68,47,28,0.35) 51%, transparent 53%),
    radial-gradient(circle at 70% 16%, rgba(68,47,28,0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 33%, rgba(68,47,28,0.4) 0 2px, transparent 3px);
  opacity: 0.62;
}
.appointment-cert {
  position: absolute;
  left: 28%;
  bottom: 7%;
  width: 165px;
  height: 230px;
  display: grid;
  place-items: center;
  transform: rotate(-9deg);
  background: #171716;
  color: #caa45e;
  font-family: var(--serif);
  font-size: 38px;
  text-align: center;
  box-shadow: 0 22px 34px rgba(28,20,14,0.34);
}
.appointment-cert small {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.viewing-box {
  position: absolute;
  right: 17%;
  bottom: 17%;
  width: 390px;
  height: 250px;
  transform: perspective(700px) rotateX(7deg) rotateZ(1deg);
}
.viewing-lid {
  position: absolute;
  inset: 0 0 auto;
  height: 115px;
  display: grid;
  place-items: center;
  transform-origin: bottom;
  transform: perspective(500px) rotateX(-34deg);
  background: linear-gradient(145deg, #c7ad91, #efe2d1);
  border: 8px solid #b79f84;
  color: #5e432c;
  font-family: var(--serif);
  text-align: center;
  text-transform: uppercase;
}
.viewing-lid small {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
}
.viewing-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 145px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
  padding: 18px;
  background: linear-gradient(145deg, #d5bea3, #f2e5d4);
  border: 10px solid #b79f84;
  box-shadow: 0 24px 44px rgba(56,39,24,0.28);
}
.viewing-tray .mini-gem {
  position: static;
  width: 20px;
}
.appointment-loupe {
  right: 6%;
  bottom: 13%;
  top: auto;
  width: 58px;
  height: 58px;
  border-width: 12px;
}
.appointment-tweezer {
  right: 3%;
  bottom: 11%;
  width: 240px;
  transform: rotate(-16deg);
}

.appointment-info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 54px max(64px, calc((100vw - var(--max)) / 2 + 72px));
  background: rgba(243,235,225,0.88);
  border-top: 1px solid rgba(23,19,15,0.1);
  border-bottom: 1px solid rgba(23,19,15,0.1);
}
.appointment-info-strip article {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 0 38px;
  border-right: 1px solid rgba(23,19,15,0.17);
}
.appointment-info-strip article:last-child {
  border-right: 0;
}
.appointment-info-strip .circle-icon {
  margin-bottom: 20px;
  border: 0;
}
.appointment-info-strip p {
  margin: 0;
  max-width: 230px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.booking-section {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  align-items: stretch;
  background: linear-gradient(180deg, #e8ddcf, #d9c7b5);
}
.atelier-visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 23%, rgba(255,255,255,0.23), transparent 22%),
    linear-gradient(90deg, rgba(12,10,8,0.42), transparent 50%),
    linear-gradient(145deg, #211a14, #8c7059 48%, #201811);
}
.atelier-door {
  position: absolute;
  left: 13%;
  top: 0;
  width: 290px;
  height: 390px;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #e6ded3, #aa9986);
  color: #1d1915;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 38px rgba(0,0,0,0.2), 0 20px 44px rgba(0,0,0,0.24);
}
.atelier-door small {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
}
.atelier-table {
  position: absolute;
  left: 17%;
  right: 7%;
  bottom: 25%;
  height: 95px;
  transform: perspective(700px) rotateX(57deg);
  background: #18120e;
  box-shadow: 0 36px 44px rgba(0,0,0,0.42);
}
.atelier-box {
  position: absolute;
  left: 45%;
  bottom: 38%;
  width: 150px;
  height: 65px;
  transform: perspective(500px) rotateX(58deg) rotateZ(-4deg);
  background:
    radial-gradient(circle at 18% 45%, #d30606 0 4px, transparent 5px),
    radial-gradient(circle at 38% 42%, #0a55c8 0 4px, transparent 5px),
    radial-gradient(circle at 58% 44%, #0a7e34 0 4px, transparent 5px),
    radial-gradient(circle at 78% 41%, #a3138b 0 4px, transparent 5px),
    #120e0b;
  border: 8px solid #1e1712;
}
.wall-light {
  position: absolute;
  right: 19%;
  top: 24%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5d991;
  box-shadow: 0 0 42px 20px rgba(245,217,145,0.38);
}
.atelier-chair {
  position: absolute;
  width: 90px;
  height: 130px;
  border-radius: 46px 46px 20px 20px;
  background: #33261e;
  box-shadow: 0 20px 28px rgba(0,0,0,0.25);
}
.chair-one { left: 20%; bottom: 7%; transform: rotate(-8deg); }
.chair-two { left: 49%; bottom: 3%; transform: rotate(9deg); }
.chair-three { right: 12%; bottom: 15%; transform: rotate(11deg); }

.appointment-form {
  padding: 62px max(46px, 6vw);
  background: rgba(239,229,217,0.9);
}
.appointment-form h2 {
  font-size: clamp(30px, 3vw, 44px);
}
.form-line {
  display: block;
  width: 48px;
  height: 1px;
  margin: 18px 0 28px;
  background: rgba(23,19,15,0.35);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}
.form-grid label {
  display: grid;
  gap: 0;
}
.form-grid label.full {
  grid-column: 1 / -1;
}
.form-grid span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(23,19,15,0.22);
  border-radius: 2px;
  padding: 0 18px;
  color: var(--ink);
  background: rgba(245,238,228,0.22);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  outline: 0;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.form-grid textarea {
  padding-top: 18px;
  resize: vertical;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(23,19,15,0.55);
  background: rgba(255,255,255,0.24);
}
.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: rgba(23,19,15,0.54);
}
.submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 58px;
  margin-top: 22px;
  border: 0;
  color: #f3eadc;
  background: #1c1915;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.45s ease, transform 0.45s ease;
}
.submit-button span {
  transition: transform 0.45s ease;
}
.submit-button:hover {
  background: #2b251f;
}
.submit-button:hover span {
  transform: translateX(7px);
}
.form-note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.form-confirmation {
  display: none;
  margin: 18px 0 0;
  padding: 18px;
  border: 1px solid rgba(23,19,15,0.16);
  background: rgba(255,255,255,0.18);
  font-family: var(--serif);
  font-size: 20px;
}
.appointment-form.is-submitted .form-confirmation {
  display: block;
}

.appointment-bottom {
  display: grid;
  grid-template-columns: 0.85fr 0.78fr 1fr;
  align-items: center;
  gap: 62px;
  padding: 70px max(64px, calc((100vw - var(--max)) / 2 + 72px)) 82px;
  background: linear-gradient(180deg, #e7dacb, #d8c6b4);
}
.appointment-quote {
  margin: 0;
  padding: 46px 52px;
  background: rgba(238,228,216,0.72);
  box-shadow: 0 22px 46px rgba(83,61,39,0.11);
}
.appointment-quote b {
  font-family: var(--serif);
  font-size: 58px;
  line-height: 0.6;
}
.appointment-quote p {
  margin: 8px 0 24px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.38;
}
.appointment-quote cite {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.appointment-contact p {
  color: var(--muted);
}
.appointment-contact a {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 15px;
  color: #332b24;
  font-size: 14px;
}
.mini-contact-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.appointment-macro {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(circle at 66% 52%, rgba(255,255,255,0.58), transparent 26%),
    linear-gradient(145deg, #efe5d8, #cdb9a2);
}
.macro-tweezer {
  right: -6%;
  top: 39%;
  width: 520px;
  transform: rotate(-12deg);
}
.macro-gem {
  position: absolute;
  left: 44%;
  top: 43%;
  width: 100px;
  transform: rotate(-14deg);
}
.macro-reflection {
  right: auto;
  left: 39%;
  top: 70%;
}

.violet-gem {
  background: radial-gradient(circle at 46% 34%, #cf95ff, #5b1c86 45%, #170420 100%);
}

.product-detail-page {
  background: var(--ivory);
}
.product-detail-hero {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(360px, 42fr);
  gap: clamp(42px, 5vw, 82px);
  align-items: center;
  padding: 152px max(58px, calc((100vw - var(--max)) / 2 + 58px)) 70px;
  overflow: hidden;
}
.product-detail-hero > * {
  position: relative;
  z-index: 2;
}
.product-breadcrumb {
  position: absolute;
  top: 126px;
  left: max(58px, calc((100vw - var(--max)) / 2 + 58px));
}
.product-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  min-height: 560px;
}
.product-thumbs {
  display: grid;
  gap: 17px;
  align-self: start;
  padding-top: 54px;
}
.product-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255,255,255,0.86);
  border-radius: 4px;
  background: rgba(245,238,228,0.58);
  cursor: pointer;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.product-thumb.is-active,
.product-thumb:hover {
  border-color: rgba(23,19,15,0.48);
  background: rgba(249,244,236,0.84);
  transform: translateY(-2px);
}
.thumb-gem {
  width: 42px;
}
.thumb-gem.angled-view { transform: rotate(-14deg) skewY(-5deg); }
.thumb-gem.side-view { transform: scaleY(0.54) rotate(180deg); }
.thumb-cert {
  display: grid;
  place-items: center;
  width: 38px;
  height: 52px;
  border-radius: 2px;
  color: #c7a86f;
  background: #14120f;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.product-main-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 530px;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.product-marble {
  position: absolute;
  left: 8%;
  right: 0;
  bottom: 86px;
  height: 185px;
  border-radius: 18px 18px 26px 26px;
  background:
    linear-gradient(120deg, transparent 0 30%, rgba(120,104,86,0.16) 31% 33%, transparent 34% 100%),
    linear-gradient(16deg, rgba(255,255,255,0.7), transparent 40%),
    #d6c8b7;
  box-shadow: 0 34px 60px rgba(58,41,25,0.18);
  transform: perspective(900px) rotateX(55deg) skewX(-9deg);
}
.product-main-gem {
  position: relative;
  z-index: 2;
  width: clamp(230px, 29vw, 390px);
  filter: drop-shadow(0 32px 22px rgba(16,11,6,0.32));
}
.product-main-gem.hero-view { transform: translateY(-22px); }
.product-main-gem.angled-view { transform: translateY(-12px) rotate(-15deg) skewY(-4deg); }
.product-main-gem.side-view { transform: translateY(-8px) scaleY(0.52) rotate(180deg); }
.product-main-gem.tweezers-view { transform: translateY(-6px) rotate(-12deg); }
.product-reflection {
  right: auto;
  left: 45%;
  top: 73%;
}
.product-tweezer {
  position: absolute;
  z-index: 3;
  left: 13%;
  top: 47%;
  width: 56%;
  height: 7px;
  border-radius: 10px;
  background: linear-gradient(90deg, #1f1d1a, #8d8377 45%, #171410);
}
.product-tweezer.one { transform: rotate(-16deg); }
.product-tweezer.two { transform: translateY(48px) rotate(-9deg); }
.product-scroll {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.product-scroll span {
  width: 18px;
  height: 31px;
  border: 1px solid rgba(23,19,15,0.64);
  border-radius: 20px;
}
.product-info-panel {
  align-self: center;
  max-width: 450px;
}
.product-info-panel h1 {
  font-size: clamp(43px, 4.4vw, 72px);
}
.product-meta,
.product-price-status {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.product-meta span,
.product-price-status span {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 18px 3px;
  border-radius: 50%;
  background: currentColor;
}
.product-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 28px 0;
  background: rgba(23,19,15,0.28);
}
.product-short {
  max-width: 430px;
  color: #342c25;
}
.product-price-status {
  margin-top: 34px;
}
.product-actions {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.product-actions .submit-button {
  margin-top: 0;
}
.product-primary-action,
.inquiry-button {
  justify-content: center;
  width: 100%;
}
.product-primary-action {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #f2eadf;
}
.inquiry-button {
  color: var(--ink);
  background: transparent;
}
.inquiry-button.is-added {
  background: rgba(23,19,15,0.08);
}
.product-cert-line {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 36px;
}
.product-cert-line h2 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.product-cert-line p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.product-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(246,239,230,0.7);
  border-top: 1px solid rgba(23,19,15,0.08);
  border-bottom: 1px solid rgba(23,19,15,0.08);
  padding: 34px max(58px, calc((100vw - var(--max)) / 2 + 58px));
}
.product-trust-strip article {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 30px;
  text-align: center;
  border-right: 1px solid rgba(23,19,15,0.16);
}
.product-trust-strip article:last-child {
  border-right: 0;
}
.product-trust-strip h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.product-trust-strip p {
  max-width: 210px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.product-details-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 74px;
  padding: 72px max(58px, calc((100vw - var(--max)) / 2 + 58px)) 62px;
}
.product-details-section h2,
.certificate-panel h2,
.related-products h2 {
  font-size: 28px;
}
.spec-list {
  margin: 18px 0 0;
}
.spec-list div {
  display: grid;
  grid-template-columns: minmax(170px, 0.85fr) 1fr;
  padding: 8px 0;
  border-top: 1px solid rgba(23,19,15,0.18);
}
.spec-list dt {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.spec-list dd {
  margin: 0;
  color: #3e342c;
  font-size: 13px;
}
.spec-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}
.certificate-panel {
  position: relative;
  min-height: 365px;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: 36px;
  background:
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.48), transparent 36%),
    linear-gradient(145deg, #e4d7c7, #cbb8a2);
}
.certificate-panel p {
  max-width: 280px;
  color: #3b322a;
  font-size: 14px;
}
.certificate-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: min(210px, 100%);
  aspect-ratio: 0.68;
  justify-self: center;
  border-radius: 5px;
  color: #c9ab72;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 28%),
    #11100e;
  box-shadow: 0 18px 36px rgba(22,15,9,0.28);
  font-family: var(--serif);
  font-size: 39px;
  text-transform: uppercase;
  transform: rotate(-7deg);
}
.certificate-placeholder small {
  position: absolute;
  bottom: 42px;
  max-width: 80%;
  color: #e6c98c;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.product-certificate-visual {
  z-index: 2;
  width: 190px;
}
.product-editorial {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 360px;
}
.editorial-product-visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 60% 40%, rgba(255,255,255,0.54), transparent 30%),
    linear-gradient(145deg, #e7dccc, #cdbba7);
}
.editorial-product-visual::before,
.editorial-product-visual::after {
  content: "";
  position: absolute;
  left: -8%;
  width: 76%;
  height: 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #191714, #a0968b 50%, #1d1a17);
  transform-origin: left center;
}
.editorial-product-visual::before { top: 42%; transform: rotate(-15deg); }
.editorial-product-visual::after { top: 57%; transform: rotate(-8deg); }
.editorial-product-gem {
  position: relative;
  z-index: 2;
  width: min(210px, 42vw);
  transform: rotate(-12deg);
  filter: drop-shadow(0 24px 18px rgba(31,22,14,0.28));
}
.editorial-product-copy {
  display: grid;
  align-content: center;
  padding: 56px max(58px, calc((100vw - var(--max)) / 2 + 58px)) 56px 74px;
}
.editorial-product-copy p:not(.eyebrow) {
  max-width: 520px;
  color: #3b322a;
}
.related-products {
  padding: 82px max(58px, calc((100vw - var(--max)) / 2 + 58px)) 92px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.related-card .collection-visual {
  min-height: 240px;
}
.related-card .collection-visual .gem {
  width: 132px;
}
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(15,12,9,0.72);
  backdrop-filter: blur(10px);
}
.product-lightbox[hidden] {
  display: none;
}
.product-lightbox > button {
  position: absolute;
  right: 32px;
  top: 24px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(246,239,230,0.42);
  color: #f4ece0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}
.lightbox-preview {
  width: min(900px, 86vw);
  min-height: min(650px, 78vh);
  background: rgba(236,226,213,0.88);
}
.has-lightbox {
  overflow: hidden;
}
.product-not-found {
  min-height: 70vh;
  display: grid;
  align-content: center;
  padding: 160px 58px;
}
.appointment-interest {
  margin: 0 0 22px;
  padding: 15px 18px;
  border: 1px solid rgba(23,19,15,0.18);
  color: #342c25;
  font-size: 13px;
}
.professional-login-page {
  background: #efe7dc;
}
.professional-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(390px, 46fr) minmax(0, 54fr);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(245,240,233,0.96) 0 39%, rgba(239,231,220,0.82) 53%, rgba(213,190,158,0.42) 100%),
    #efe7dc;
}
.professional-access {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(470px, calc(100vw - 44px));
  min-height: 100vh;
  margin-left: clamp(42px, 6.2vw, 92px);
  padding: 142px 0 74px;
}
.login-copy h1 {
  font-size: clamp(54px, 5.3vw, 74px);
  line-height: 1.02;
  letter-spacing: 0.02em;
}
.login-copy p {
  max-width: 380px;
  margin: 28px 0 0;
  color: #24201c;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.75;
}
.professional-login-form {
  display: grid;
  gap: 23px;
  margin-top: 52px;
}
.professional-login-form label {
  display: grid;
  gap: 12px;
}
.professional-login-form label > span:first-child,
.professional-login-form .remember-option span {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.professional-login-form input {
  width: 100%;
  min-height: 64px;
  padding: 0 22px;
  border: 1px solid rgba(28,25,22,0.22);
  border-radius: 3px;
  color: #1c1916;
  background: rgba(245,240,233,0.38);
  font-size: 17px;
  outline: 0;
  transition: border-color 0.28s ease, background 0.28s ease;
}
.professional-login-form input:focus {
  border-color: rgba(28,25,22,0.62);
  background: rgba(245,240,233,0.56);
  box-shadow: 0 0 0 3px rgba(28,25,22,0.08);
}
.password-shell {
  position: relative;
  display: block;
}
.password-shell input {
  padding-right: 62px;
}
.password-toggle {
  position: absolute;
  right: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}
.eye-icon-shape {
  position: relative;
  width: 25px;
  height: 15px;
  border: 1.4px solid #1c1916;
  border-radius: 50%;
}
.eye-icon-shape::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1c1916;
  transform: translate(-50%, -50%);
}
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 2px;
}
.remember-option {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px !important;
  cursor: pointer;
}
.remember-option input {
  width: 26px;
  min-height: 26px;
  height: 26px;
  padding: 0;
  appearance: none;
  background: rgba(245,240,233,0.28);
}
.remember-option input:checked {
  background:
    linear-gradient(135deg, transparent 0 42%, #1c1916 43% 55%, transparent 56%),
    linear-gradient(45deg, transparent 0 45%, #1c1916 46% 58%, transparent 59%),
    rgba(245,240,233,0.28);
}
.professional-login-form .remember-option span {
  letter-spacing: 0;
  text-transform: none;
}
.login-options a {
  border-bottom: 1px solid currentColor;
  line-height: 1.35;
}
.login-submit {
  margin-top: 38px;
  border-radius: 3px;
}
.login-submit b {
  font-weight: 400;
  transition: transform 0.35s ease;
}
.login-submit:hover b {
  transform: translateX(6px);
}
.login-submit:disabled {
  cursor: wait;
  opacity: 0.78;
}
.professional-application {
  margin-top: 52px;
}
.professional-application p {
  margin: 0 0 20px;
  color: #24201c;
}
.professional-application .text-link {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.auth-status-message {
  display: none;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid rgba(92,45,35,0.24);
  color: #5d2e25;
  background: rgba(123,72,54,0.07);
  font-size: 13px;
  line-height: 1.5;
}
.auth-status-message.is-visible {
  display: block;
}
.login-editorial {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 71% 35%, rgba(255,255,255,0.45), transparent 27%),
    radial-gradient(circle at 82% 82%, rgba(91,61,28,0.24), transparent 35%),
    linear-gradient(125deg, rgba(255,255,255,0.38), transparent 34%),
    #d7bea0;
}
.login-editorial::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    repeating-linear-gradient(88deg, transparent 0 46px, rgba(255,255,255,0.11) 48px 53px, transparent 55px 116px),
    radial-gradient(ellipse at 58% 50%, rgba(255,255,255,0.33), transparent 58%);
  filter: blur(2px);
}
.login-travertine {
  position: absolute;
  right: -7%;
  bottom: 12%;
  width: min(650px, 58vw);
  height: min(360px, 32vw);
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.72) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 42%, rgba(121,93,61,0.22) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 35%, rgba(255,255,255,0.62) 0 2px, transparent 3px),
    linear-gradient(126deg, rgba(255,255,255,0.55), transparent 34%),
    linear-gradient(24deg, #c9aa83, #e7d5ba 42%, #b99467);
  box-shadow: 0 38px 82px rgba(65,42,20,0.26);
  transform: perspective(900px) rotateX(58deg) rotateZ(-2deg);
}
.login-tweezers {
  position: absolute;
  right: -9%;
  bottom: 30%;
  width: min(560px, 50vw);
  height: 72px;
  transform: rotate(14deg);
}
.login-tweezers::before,
.login-tweezers::after {
  content: "";
  position: absolute;
  right: 0;
  width: 100%;
  height: 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #070604, #6f665b 45%, #1a1713 70%, #050403);
}
.login-tweezers::before { top: 0; }
.login-tweezers::after { bottom: 0; }
.login-sapphire {
  position: absolute;
  right: clamp(190px, 24vw, 340px);
  bottom: clamp(210px, 24vw, 320px);
  width: clamp(118px, 13vw, 178px);
  z-index: 3;
  transform: rotate(10deg);
  filter: drop-shadow(0 26px 18px rgba(14,9,4,0.34));
}
.login-blue-reflection {
  right: clamp(220px, 27vw, 380px);
  top: auto;
  bottom: clamp(180px, 20vw, 270px);
}
.login-flower {
  position: absolute;
  right: 5%;
  top: 16%;
  width: 260px;
  height: 210px;
  opacity: 0.38;
}
.login-flower::before,
.login-flower::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 210px;
  background: rgba(137,94,46,0.55);
  transform-origin: bottom center;
}
.login-flower::before { left: 90px; transform: rotate(48deg); }
.login-flower::after { left: 120px; transform: rotate(62deg); }
.login-flower {
  background:
    radial-gradient(circle at 48% 18%, rgba(147,96,35,0.65) 0 4px, transparent 5px),
    radial-gradient(circle at 57% 26%, rgba(147,96,35,0.55) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 30%, rgba(147,96,35,0.5) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 43%, rgba(147,96,35,0.48) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 51%, rgba(147,96,35,0.46) 0 4px, transparent 5px);
}
.auth-placeholder {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 150px max(30px, 7vw) 80px;
  background:
    radial-gradient(circle at 72% 28%, rgba(255,255,255,0.42), transparent 34%),
    linear-gradient(110deg, #f5f0e9, #efe7dc);
}
.auth-placeholder section {
  max-width: 640px;
}
.auth-placeholder h1 {
  font-size: clamp(44px, 5vw, 68px);
}
.auth-placeholder p {
  color: #3d342c;
}
.compact-auth-form {
  max-width: 460px;
}
.product-price-status.is-protected {
  line-height: 1.7;
}
.professional-application-page {
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,0.5), transparent 35%),
    linear-gradient(115deg, #f5f0e9, #eee5da 72%, #e2d5c6);
}
.professional-application-main {
  min-height: 100vh;
  padding: 148px max(56px, calc((100vw - 1280px) / 2 + 56px)) 72px;
}
.application-shell {
  max-width: 1210px;
}
.application-intro h1 {
  font-size: clamp(50px, 5.3vw, 70px);
  line-height: 1.08;
  letter-spacing: 0.02em;
}
.application-intro p {
  max-width: 650px;
  margin: 28px 0 0;
  color: #24201c;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.78;
}
.professional-application-form {
  margin-top: 48px;
}
.application-section-label,
.field-label {
  display: block;
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 34px;
}
.professional-application-form label,
.application-full-field {
  display: grid;
  gap: 9px;
}
.professional-application-form label > span:first-child,
.application-full-field > span:first-child {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.professional-application-form input:not([type="checkbox"]):not([type="file"]),
.professional-application-form select,
.professional-application-form textarea {
  width: 100%;
  min-height: 64px;
  padding: 0 22px;
  border: 1px solid rgba(29,25,21,0.2);
  border-radius: 3px;
  color: #1d1915;
  background: rgba(255,255,255,0.12);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  outline: 0;
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.professional-application-form input::placeholder,
.professional-application-form textarea::placeholder {
  color: rgba(29,25,21,0.58);
  letter-spacing: 0;
  text-transform: none;
}
.professional-application-form select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #1d1915 50%) calc(100% - 25px) 29px / 9px 9px no-repeat,
    linear-gradient(135deg, #1d1915 50%, transparent 50%) calc(100% - 18px) 29px / 9px 9px no-repeat,
    rgba(255,255,255,0.12);
}
.professional-application-form textarea {
  min-height: 138px;
  padding-top: 19px;
  line-height: 1.6;
  resize: vertical;
  text-transform: none;
  letter-spacing: 0;
}
.professional-application-form input:focus,
.professional-application-form select:focus,
.professional-application-form textarea:focus,
.application-upload:focus {
  border-color: rgba(29,25,21,0.62);
  background-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 0 3px rgba(29,25,21,0.08);
}
.professional-application-form [aria-invalid="true"] {
  border-color: rgba(122,62,53,0.68) !important;
}
.professional-application-form small {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.professional-application-form .field-error {
  color: #7a3e35;
}
.profession-other {
  grid-column: 2;
}
.application-full-field {
  margin-top: 26px;
}
.application-full-field > small {
  justify-self: end;
}
.application-upload {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 124px;
  border: 1px solid rgba(29,25,21,0.2);
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  color: #6f655b;
  font-size: 18px;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.28s ease, background 0.28s ease;
}
.application-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.application-upload small {
  color: #6f655b;
  font-size: 16px;
}
.application-upload.is-dragging,
.application-upload.has-file {
  border-color: rgba(29,25,21,0.48);
  background: rgba(255,255,255,0.22);
}
.upload-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-bottom: 2px solid #1d1915;
}
.upload-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 26px;
  background: #1d1915;
  transform: translateX(-50%);
}
.upload-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 13px;
  height: 13px;
  border-left: 2px solid #1d1915;
  border-top: 2px solid #1d1915;
  transform: translateX(-50%) rotate(45deg);
}
.upload-selected,
.upload-error,
.upload-note {
  margin: 10px 0 0;
  font-size: 13px;
}
.upload-selected button {
  margin-left: 14px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #1d1915;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.upload-error {
  color: #7a3e35;
}
.upload-note {
  color: var(--muted);
}
.application-consent {
  display: grid;
  gap: 13px;
  margin-top: 28px;
}
.application-consent label {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 14px;
  color: #322b24;
}
.application-consent input {
  width: 24px;
  height: 24px;
  margin: 3px 0 0;
  appearance: none;
  border: 1px solid rgba(29,25,21,0.52);
  background: rgba(255,255,255,0.16);
}
.application-consent input:checked {
  background:
    linear-gradient(135deg, transparent 0 42%, #1d1915 43% 55%, transparent 56%),
    linear-gradient(45deg, transparent 0 45%, #1d1915 46% 58%, transparent 59%),
    rgba(255,255,255,0.16);
}
.application-consent a {
  border-bottom: 1px solid currentColor;
}
.application-submit {
  margin-top: 38px;
  border-radius: 3px;
}
.application-submit b {
  font-weight: 400;
  transition: transform 0.32s ease;
}
.application-submit:hover b {
  transform: translateX(6px);
}
.application-submit:disabled {
  opacity: 0.75;
  cursor: wait;
}
.application-review-note {
  margin: 22px 0 0;
  color: #2f2923;
  font-size: 17px;
}
.screen-reader-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}
.application-received-page {
  background:
    radial-gradient(circle at 50% 21%, rgba(255,255,255,0.46), transparent 34%),
    linear-gradient(180deg, #f5f0e9 0%, #eee5da 62%, #dcc9b3 100%);
}
.application-received {
  overflow: hidden;
  padding-top: 142px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.42), transparent 42%),
    linear-gradient(180deg, rgba(245,240,233,0.96), rgba(238,229,218,0.9) 62%, rgba(214,194,170,0.7));
}
.received-confirmation,
.received-empty-state {
  display: grid;
  justify-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 82px 24px 62px;
  text-align: center;
}
.received-empty-state {
  min-height: 62vh;
  align-content: center;
}
.received-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 36px;
}
.received-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #151310;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.received-confirmation h1,
.received-empty-state h1 {
  font-size: clamp(56px, 5.2vw, 74px);
  line-height: 1;
  letter-spacing: 0.08em;
}
.received-empty-state h1 {
  font-size: clamp(42px, 4.8vw, 60px);
}
.received-status {
  margin: 26px 0 0;
  font-size: 16px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.received-copy {
  display: grid;
  gap: 28px;
  max-width: 610px;
  margin-top: 52px;
  color: #1f1b17;
  font-size: clamp(19px, 1.65vw, 22px);
  line-height: 1.75;
}
.received-copy p {
  margin: 0;
}
.received-home-button {
  width: min(460px, 100%);
  margin-top: 54px;
  border-radius: 3px;
}
.received-home-button span {
  transition: transform 0.34s ease;
}
.received-home-button:hover span {
  transform: translateX(6px);
}
.received-editorial {
  position: relative;
  min-height: 660px;
  margin-top: 10px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.54), transparent 46%),
    repeating-linear-gradient(105deg, transparent 0 52px, rgba(255,255,255,0.12) 54px 62px, transparent 64px 140px),
    linear-gradient(180deg, #eadbc8, #c9ab86);
}
.received-editorial::before {
  content: "";
  position: absolute;
  inset: -12% -4%;
  background:
    radial-gradient(ellipse at 42% 64%, rgba(83,57,31,0.19), transparent 34%),
    radial-gradient(ellipse at 76% 72%, rgba(57,38,21,0.23), transparent 30%);
  filter: blur(9px);
}
.received-tray {
  position: absolute;
  left: clamp(90px, 12vw, 190px);
  bottom: 86px;
  width: min(560px, 49vw);
  height: 310px;
  border: 26px solid #d8b98f;
  border-radius: 14px;
  background:
    linear-gradient(130deg, rgba(255,255,255,0.38), transparent 46%),
    #cda97b;
  box-shadow: 0 32px 74px rgba(71,45,21,0.28);
  transform: perspective(900px) rotateX(57deg) rotateZ(-7deg);
}
.tray-divider {
  position: absolute;
  background: #e7cda8;
  box-shadow: 0 3px 10px rgba(75,49,24,0.14);
}
.tray-divider.vertical {
  left: 50%;
  top: -12px;
  bottom: -12px;
  width: 20px;
  transform: translateX(-50%);
}
.tray-divider.horizontal {
  left: -12px;
  right: -12px;
  top: 50%;
  height: 20px;
  transform: translateY(-50%);
}
.tray-gem {
  position: absolute;
  z-index: 2;
  width: 68px;
  filter: drop-shadow(0 16px 11px rgba(26,15,6,0.3));
}
.blue-square { left: 18%; top: 20%; }
.red-cushion { left: 15%; bottom: 17%; }
.aqua-pear {
  left: 44%;
  top: 40%;
  background: radial-gradient(circle at 46% 31%, #79f1ff, #037c9d 48%, #032331 100%);
}
.green-square { right: 17%; top: 31%; }
.purple-cushion { right: 28%; bottom: 10%; }
.received-certificate {
  position: absolute;
  right: clamp(70px, 12vw, 190px);
  bottom: 82px;
  display: grid;
  justify-items: center;
  align-content: center;
  width: min(330px, 29vw);
  height: 440px;
  border-radius: 8px;
  color: #d1af70;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,0.03), transparent 16%),
    #12110f;
  box-shadow: 0 34px 70px rgba(24,16,9,0.34);
  transform: perspective(900px) rotateX(55deg) rotateZ(9deg);
}
.received-certificate span {
  font-family: var(--serif);
  font-size: 66px;
  letter-spacing: 0.05em;
}
.received-certificate small {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.17em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
.received-certificate b {
  margin-top: 48px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.received-flower {
  position: absolute;
  left: 0;
  bottom: 42px;
  width: 250px;
  height: 250px;
  opacity: 0.48;
  transform: rotate(-18deg);
  background:
    radial-gradient(circle at 34% 18%, rgba(151,100,43,0.72) 0 4px, transparent 5px),
    radial-gradient(circle at 48% 29%, rgba(151,100,43,0.6) 0 4px, transparent 5px),
    radial-gradient(circle at 59% 42%, rgba(151,100,43,0.55) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 50%, rgba(151,100,43,0.5) 0 4px, transparent 5px);
}
.received-flower::before,
.received-flower::after {
  content: "";
  position: absolute;
  left: 52px;
  bottom: 0;
  width: 2px;
  height: 230px;
  background: rgba(137,94,46,0.55);
  transform-origin: bottom;
}
.received-flower::before { transform: rotate(45deg); }
.received-flower::after { transform: rotate(61deg); }
.application-received.is-empty .received-editorial {
  min-height: 420px;
}
.account-review-page {
  background: #eee6dc;
}
.account-review {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(460px, 52fr) minmax(0, 48fr);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(245,240,233,0.96) 0 45%, rgba(238,230,220,0.76) 58%, rgba(207,186,160,0.5) 100%),
    #eee6dc;
}
.review-copy-panel {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(540px, calc(100vw - 44px));
  min-height: 100vh;
  margin-left: clamp(48px, 7vw, 108px);
  padding: 150px 0 72px;
}
.review-status-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 62px;
}
.review-status-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #151310;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.review-copy-panel h1 {
  font-size: clamp(58px, 5.2vw, 76px);
  line-height: 1.06;
  letter-spacing: 0.04em;
}
.review-intro {
  margin: 34px 0 0;
  color: #1f1b17;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
}
.review-body {
  max-width: 490px;
  margin: 32px 0 0;
  color: #1f1b17;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.8;
}
.review-capabilities {
  width: min(500px, 100%);
  margin-top: 54px;
  padding: 38px 42px 36px;
  border: 1px solid rgba(29,25,21,0.08);
  border-radius: 5px;
  background: rgba(235,223,209,0.58);
}
.review-capabilities h2 {
  margin-bottom: 25px;
  font-size: 27px;
  letter-spacing: 0.08em;
}
.review-capabilities a {
  display: grid;
  grid-template-columns: 27px 1fr;
  align-items: center;
  gap: 17px;
  margin-top: 18px;
  color: #1f1b17;
  font-size: 18px;
}
.review-capabilities a span {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1.3px solid #151310;
  border-radius: 50%;
}
.review-capabilities a span::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #151310;
  border-bottom: 1.5px solid #151310;
  transform: rotate(-45deg) translate(1px, -1px);
}
.review-cta {
  justify-content: center;
  width: min(500px, 100%);
  min-height: 66px;
  margin-top: 42px;
  background: transparent;
}
.review-cta:hover {
  color: #f5f0e9;
  background: #151310;
}
.review-cta span {
  transition: transform 0.34s ease;
}
.review-cta:hover span {
  transform: translateX(6px);
}
.review-editorial {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 52%, rgba(255,255,255,0.42), transparent 29%),
    linear-gradient(115deg, #eadfce 0%, #cbb498 72%, #a98d68 100%);
}
.review-wall {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,0.08) 60px 69px, transparent 71px 140px),
    radial-gradient(circle at 45% 45%, rgba(255,255,255,0.34), transparent 48%);
  filter: blur(1px);
}
.review-table {
  position: absolute;
  right: -18%;
  bottom: -5%;
  width: 116%;
  height: 36%;
  border-radius: 50px 0 0 0;
  background:
    linear-gradient(125deg, transparent 0 34%, rgba(95,70,48,0.24) 35% 37%, transparent 38%),
    linear-gradient(35deg, rgba(255,255,255,0.48), transparent 38%),
    #c2aa8a;
  box-shadow: 0 -22px 55px rgba(72,49,28,0.16);
}
.review-vase {
  position: absolute;
  left: 25%;
  bottom: 25%;
  width: 135px;
  height: 205px;
  border-radius: 48% 48% 38% 38%;
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,0.58), transparent 26%),
    linear-gradient(120deg, #d9c9b4, #aa9479);
  box-shadow: 0 28px 40px rgba(55,37,20,0.2);
}
.review-vase::before {
  content: "";
  position: absolute;
  left: 34%;
  top: -18px;
  width: 54px;
  height: 32px;
  border-radius: 50%;
  background: #b7a186;
}
.review-branches {
  position: absolute;
  left: 20%;
  bottom: 39%;
  width: 335px;
  height: 470px;
  opacity: 0.72;
  background:
    radial-gradient(circle at 42% 18%, #8f622c 0 3px, transparent 4px),
    radial-gradient(circle at 58% 25%, #8f622c 0 3px, transparent 4px),
    radial-gradient(circle at 67% 38%, #8f622c 0 3px, transparent 4px),
    radial-gradient(circle at 78% 48%, #8f622c 0 3px, transparent 4px),
    radial-gradient(circle at 52% 54%, #8f622c 0 3px, transparent 4px),
    radial-gradient(circle at 31% 42%, #8f622c 0 3px, transparent 4px);
}
.review-branches::before,
.review-branches::after {
  content: "";
  position: absolute;
  left: 48%;
  bottom: 0;
  width: 2px;
  height: 440px;
  background: rgba(103,70,34,0.7);
  transform-origin: bottom center;
}
.review-branches::before { transform: rotate(-21deg); }
.review-branches::after { transform: rotate(24deg); }
.review-lamp {
  position: absolute;
  right: -38px;
  bottom: 28%;
  width: 220px;
  height: 310px;
}
.review-lamp::before {
  content: "";
  position: absolute;
  right: 78px;
  bottom: 0;
  width: 12px;
  height: 255px;
  background: linear-gradient(90deg, #5d421c, #c49742, #4c3415);
}
.review-lamp::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 220px;
  height: 110px;
  border-radius: 120px 120px 16px 16px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.26), transparent 28%),
    #11100e;
  box-shadow: 0 18px 30px rgba(22,14,7,0.28);
}
.admin-page {
  min-height: 100vh;
  background: #f4eee6;
}
.admin-control-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 74% 4%, rgba(236,226,213,0.9), transparent 34%),
    #f7f2eb;
}
.control-center {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}
.control-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 48px 20px 28px;
  border-right: 1px solid rgba(28,25,22,0.12);
  background: rgba(250,247,242,0.72);
}
.control-brand {
  margin: 0 0 42px;
  text-align: center;
}
.control-brand span {
  font-size: 26px;
}
.control-brand small {
  font-size: 10px;
  letter-spacing: 0.34em;
}
.control-sidebar nav {
  display: grid;
  gap: 2px;
}
.control-sidebar nav a,
.control-logout {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #151310;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.control-sidebar nav a:hover,
.control-logout:hover,
.control-sidebar nav .is-active {
  background: rgba(226,214,199,0.66);
}
.control-sidebar nav b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dfcfb8;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.orders-icon::before {
  left: 6px;
  top: 5px;
  width: 14px;
  height: 17px;
  border-radius: 3px;
}
.orders-icon::after {
  left: 10px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 5px;
}
.inventory-icon::before {
  left: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
  transform: rotate(30deg) skewY(-22deg);
}
.inventory-icon::after {
  left: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-left: 0;
  border-top: 0;
  transform: rotate(30deg);
}
.reports-icon::before {
  left: 5px;
  bottom: 4px;
  width: 3px;
  height: 12px;
  background: transparent;
  box-shadow: 7px -5px 0 -1px transparent, 14px -10px 0 -1px transparent;
}
.reports-icon::after {
  left: 5px;
  bottom: 4px;
  width: 16px;
  height: 18px;
  border-top: 0;
}
.activity-icon::before {
  left: 2px;
  top: 12px;
  width: 22px;
  height: 0;
  border-left: 0;
  border-right: 0;
}
.activity-icon::after {
  left: 4px;
  top: 8px;
  width: 18px;
  height: 10px;
  border: 0;
  border-top: 1.5px solid #151310;
  transform: skewX(-30deg);
}
.owner-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: auto;
  padding: 18px;
  border: 1px solid rgba(151,112,70,0.42);
  border-radius: 6px;
  background: rgba(250,246,239,0.82);
}
.owner-initial {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eadfce;
  font-family: var(--serif);
  font-size: 30px;
}
.owner-card strong,
.owner-card small,
.owner-card a {
  display: block;
}
.owner-card strong {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.owner-card small {
  margin-top: 5px;
  line-height: 1.5;
}
.owner-card a {
  margin-top: 11px;
  color: #7c5a34;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.control-logout {
  width: 100%;
  margin-top: 22px;
}
.control-workspace {
  min-width: 0;
}
.control-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 66px;
  padding: 0 34px;
  border-bottom: 1px solid rgba(28,25,22,0.1);
  background: rgba(250,247,242,0.86);
  backdrop-filter: blur(14px);
}
.control-topbar nav {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 5vw, 70px);
}
.control-topbar nav a {
  color: #151310;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.control-top-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}
.control-icon-button {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.notification-button::before,
.notification-button::after,
.profile-button::before,
.profile-button::after {
  content: "";
  position: absolute;
  border: 1.5px solid #151310;
}
.notification-button::before {
  left: 10px;
  top: 8px;
  width: 13px;
  height: 16px;
  border-radius: 10px 10px 4px 4px;
}
.notification-button::after {
  left: 14px;
  bottom: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.notification-badge {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b99b6b;
  color: #fff;
  font-size: 9px;
}
.profile-button::before {
  top: 5px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.profile-button::after {
  left: 7px;
  bottom: 5px;
  width: 20px;
  height: 12px;
  border-radius: 16px 16px 3px 3px;
}
.control-profile-menu {
  position: absolute;
  top: 44px;
  right: 0;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgba(28,25,22,0.14);
  border-radius: 6px;
  background: #fbf7f1;
  box-shadow: 0 18px 40px rgba(28,25,22,0.1);
}
.control-profile-menu a,
.control-profile-menu button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #151310;
  font-size: 12px;
  text-align: left;
}
.control-profile-menu a:hover,
.control-profile-menu button:hover {
  background: rgba(226,214,199,0.5);
}
.control-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 42px 42px;
}
.control-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 36px;
  align-items: center;
  margin-bottom: 28px;
}
.control-welcome p {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.control-welcome h1 {
  font-size: clamp(54px, 5vw, 78px);
  line-height: 0.98;
  letter-spacing: 0.08em;
}
.control-welcome h2 {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.owner-access-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  align-items: center;
  min-height: 130px;
  padding: 28px;
  border: 1px solid rgba(28,25,22,0.1);
  border-radius: 7px;
  background: rgba(239,230,217,0.7);
}
.owner-access-card .circle-icon {
  width: 58px;
  height: 58px;
}
.owner-access-card h2,
.control-panel-head h2,
.control-kpi-card h2 {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
}
.owner-access-card h2 {
  font-size: 15px;
  letter-spacing: 0.16em;
}
.owner-access-card p {
  margin: 10px 0 12px;
  line-height: 1.55;
}
.owner-access-card a,
.control-panel-head a {
  color: #7c5a34;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.control-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.control-kpi-card,
.control-panel {
  border: 1px solid rgba(28,25,22,0.1);
  border-radius: 7px;
  background: rgba(250,247,242,0.72);
}
.control-kpi-card {
  display: grid;
  min-height: 176px;
  padding: 24px 20px 12px;
  color: #151310;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.control-kpi-card:hover,
.control-panel a:hover {
  background: rgba(238,229,216,0.58);
  border-color: rgba(151,112,70,0.2);
}
.control-kpi-card > .portal-icon {
  margin-bottom: 10px;
}
.control-kpi-card h2 {
  font-size: 11px;
  letter-spacing: 0.11em;
}
.control-kpi-card strong {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(32px, 2.8vw, 46px);
  font-weight: 400;
  line-height: 1;
}
.control-kpi-card p {
  margin: 8px 0 0;
  font-size: 12px;
}
.control-kpi-card p b {
  font-weight: 700;
}
.control-kpi-card svg {
  width: 100%;
  height: 34px;
  margin-top: auto;
}
.control-kpi-card polyline {
  fill: none;
  stroke: #c49b62;
  stroke-width: 1.5;
}
.control-grid-main {
  display: grid;
  grid-template-columns: minmax(420px, 1.28fr) minmax(330px, 1fr) minmax(300px, 0.95fr);
  gap: 12px;
  margin-bottom: 14px;
}
.control-grid-bottom {
  display: grid;
  grid-template-columns: 0.8fr 1.25fr 0.85fr;
  gap: 12px;
}
.control-panel {
  min-width: 0;
  padding: 22px;
}
.control-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.control-panel-head h2 {
  font-size: 14px;
  letter-spacing: 0.14em;
}
.control-panel-head select {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(28,25,22,0.12);
  border-radius: 4px;
  background: rgba(250,247,242,0.8);
  color: #151310;
}
.inquiry-chart {
  position: relative;
  min-height: 270px;
}
.inquiry-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-grid line {
  stroke: rgba(28,25,22,0.09);
}
.chart-axis text {
  fill: rgba(21,19,16,0.68);
  font: 11px var(--sans);
}
.chart-area {
  fill: rgba(196,155,98,0.14);
}
.chart-line {
  fill: none;
  stroke: #c49b62;
  stroke-width: 2;
}
.chart-marker-line {
  stroke: rgba(151,112,70,0.32);
  stroke-dasharray: 2 3;
}
.chart-marker {
  fill: #c49b62;
}
.chart-tooltip {
  position: absolute;
  left: 57%;
  top: 30px;
  padding: 10px 14px;
  border: 1px solid rgba(28,25,22,0.1);
  border-radius: 6px;
  background: rgba(250,247,242,0.92);
  font-size: 12px;
  text-align: center;
  box-shadow: 0 14px 32px rgba(28,25,22,0.08);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.inquiry-chart:hover .chart-tooltip,
.inquiry-chart:focus .chart-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.recent-inquiry-list,
.viewing-list,
.activity-panel ol {
  display: grid;
  gap: 8px;
}
.recent-inquiry-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas: "gem title date" "gem meta badge";
  gap: 4px 12px;
  align-items: center;
  min-height: 58px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(28,25,22,0.08);
  color: #151310;
}
.mini-gem {
  grid-area: gem;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 8px 7px rgba(25,13,8,0.18));
}
.recent-inquiry-list strong {
  grid-area: title;
  font-size: 12px;
}
.recent-inquiry-list small {
  grid-area: meta;
  font-size: 11px;
}
.recent-inquiry-list time {
  grid-area: date;
  font-size: 11px;
}
.recent-inquiry-list b {
  grid-area: badge;
  justify-self: end;
  padding: 4px 8px;
  border-radius: 4px;
  background: #e7dccb;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.viewing-list a {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid rgba(28,25,22,0.08);
  border-radius: 6px;
  color: #151310;
}
.viewing-list time {
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(239,230,217,0.7);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
}
.viewing-list time span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.viewing-list strong {
  align-self: end;
  font-size: 12px;
}
.viewing-list small {
  line-height: 1.5;
}
.inventory-content {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 22px;
  align-items: center;
}
.donut-chart {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#315b9c 0 31%, #a79a65 31% 69%, #c76f8a 69% 84%, #6f8b5c 84% 92%, #cbb89d 92% 100%);
}
.donut-chart::after {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background: #fbf7f1;
}
.donut-chart span {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  font-family: var(--serif);
  font-size: 28px;
}
.donut-chart small {
  font-family: var(--sans);
  font-size: 11px;
}
.inventory-content ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inventory-content li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.inventory-content i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--swatch);
}
.added-gems-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.added-gems-row a {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(28,25,22,0.09);
  border-radius: 6px;
  color: #151310;
}
.added-gems-row .gem {
  width: 70px;
  height: 70px;
  margin: 2px auto 0;
}
.added-gems-row small {
  line-height: 1.45;
}
.activity-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-panel li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid rgba(28,25,22,0.08);
}
.activity-panel p {
  margin: 0;
  font-size: 12px;
}
.activity-panel time {
  color: rgba(21,19,16,0.62);
  font-size: 11px;
  white-space: nowrap;
}
.control-mobile-toggle {
  display: none;
}
.client-management-page {
  background: #f8f4ef;
}
.crm-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 42px 42px 44px;
}
.crm-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(28,25,22,0.11);
}
.crm-header h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 3.4vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crm-header p {
  margin-top: 16px;
  color: rgba(21,19,16,0.68);
  font-size: 15px;
}
.crm-actions {
  display: flex;
  gap: 14px;
}
.crm-outline-button,
.crm-primary-button,
.crm-panel-head button,
.crm-modal button[type="submit"] {
  min-height: 42px;
  padding: 0 28px;
  border: 1px solid rgba(151,112,70,0.38);
  border-radius: 5px;
  background: transparent;
  color: #151310;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}
.crm-primary-button,
.crm-modal button[type="submit"] {
  border-color: transparent;
  background: #dcc4a8;
}
.crm-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(140px, 0.72fr)) auto;
  gap: 16px;
  align-items: end;
  margin: 24px 0;
}
.crm-filters label {
  display: grid;
  gap: 6px;
}
.crm-filters label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.crm-filters input,
.crm-filters select {
  min-height: 44px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid rgba(28,25,22,0.11);
  border-radius: 5px;
  background: rgba(250,247,242,0.72);
  color: #151310;
  font: inherit;
}
.crm-reset {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: rgba(21,19,16,0.68);
  cursor: pointer;
}
.crm-grid {
  display: grid;
  grid-template-columns: minmax(285px, 0.74fr) minmax(500px, 1.33fr) minmax(360px, 1fr);
  gap: 12px;
  align-items: start;
}
.crm-panel,
.crm-detail-card {
  border: 1px solid rgba(28,25,22,0.1);
  border-radius: 7px;
  background: rgba(250,247,242,0.74);
}
.crm-panel {
  min-width: 0;
  padding: 22px;
}
.crm-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}
.crm-panel-head h2,
.crm-detail-card h2,
.crm-detail-card h3 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.crm-panel-head p {
  margin-top: 8px;
  color: rgba(21,19,16,0.62);
  font-size: 12px;
}
.crm-panel-head button {
  min-height: 38px;
  padding: 0 16px;
  background: rgba(250,247,242,0.8);
}
.client-list {
  display: grid;
  max-height: 660px;
  overflow: auto;
  border-top: 1px solid rgba(28,25,22,0.08);
}
.client-list button {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 13px;
  align-items: center;
  min-height: 84px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid rgba(28,25,22,0.08);
  background: transparent;
  color: #151310;
  text-align: left;
  cursor: pointer;
}
.client-list button.is-active {
  border: 1px solid rgba(151,112,70,0.2);
  border-radius: 6px;
  background: rgba(232,219,203,0.55);
}
.client-avatar,
.detail-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0e8dd;
  font-family: var(--serif);
}
.client-avatar {
  width: 48px;
  height: 48px;
  font-size: 20px;
}
.client-main strong,
.client-main small,
.client-meta,
.client-stats {
  display: block;
}
.client-main strong {
  font-size: 13px;
}
.client-main small {
  margin-top: 4px;
  color: rgba(21,19,16,0.62);
  font-size: 11px;
}
.client-stats {
  margin-top: 8px;
  color: rgba(21,19,16,0.76);
  font-size: 11px;
}
.client-meta {
  align-self: start;
  color: rgba(21,19,16,0.56);
  font-size: 11px;
}
.crm-text-link {
  display: inline-flex;
  gap: 12px;
  margin-top: 18px;
  color: #7c5a34;
  font-size: 12px;
}
.crm-table-scroll {
  overflow-x: auto;
}
.crm-inquiry-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.crm-inquiry-table th {
  height: 46px;
  color: rgba(21,19,16,0.72);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-align: left;
  text-transform: uppercase;
}
.crm-inquiry-table td {
  min-height: 72px;
  padding: 13px 8px;
  border-top: 1px solid rgba(28,25,22,0.08);
  font-size: 12px;
  vertical-align: middle;
}
.crm-inquiry-table tr {
  cursor: pointer;
}
.crm-inquiry-table tr:hover {
  background: rgba(232,219,203,0.3);
}
.request-cell strong,
.request-cell small {
  display: block;
}
.gem-thumb-group {
  display: flex;
  gap: 5px;
}
.crm-gem-thumb {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 7px 6px rgba(25,13,8,0.18));
}
.crm-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 5px;
  color: #30261b;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.crm-status.new { background: #eadfd1; }
.crm-status.looking_for_stone { background: #e4e9ed; }
.crm-status.supplier_contacted { background: #e8e1ef; }
.crm-status.quote_sent { background: #f1dfcf; }
.crm-status.waiting_response { background: #efe6c9; }
.crm-status.reserved { background: #dfeadb; }
.crm-status.in_discussion { background: #e9e6e2; }
.crm-status.cancelled { background: #ecdada; }
.crm-empty {
  padding: 40px 0;
  text-align: center;
}
.crm-detail-column {
  display: grid;
  gap: 12px;
}
.crm-detail-card {
  padding: 22px;
}
.client-summary-card {
  display: grid;
  gap: 20px;
}
.client-summary-top {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 18px;
  align-items: start;
}
.detail-avatar {
  width: 70px;
  height: 70px;
  font-size: 28px;
}
.client-summary-top h2 {
  margin: 5px 0 5px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.active-client-badge {
  align-self: start;
  padding: 7px 12px;
  border-radius: 4px;
  background: #dfeadb;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-icons {
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(28,25,22,0.09);
}
.contact-icons a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(28,25,22,0.13);
  border-radius: 50%;
  color: #151310;
  font-size: 12px;
}
.client-summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.client-summary-stats div {
  padding: 0 12px;
  border-right: 1px solid rgba(28,25,22,0.09);
}
.client-summary-stats div:last-child {
  border-right: 0;
}
.client-summary-stats small {
  display: block;
  color: rgba(21,19,16,0.58);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.client-summary-stats strong {
  display: block;
  margin-top: 8px;
  font-weight: 400;
}
.preferences-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 22px;
}
.preferences-grid ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.preferences-grid li,
.preferences-grid p {
  font-size: 12px;
  line-height: 1.65;
}
.preferences-grid strong {
  display: block;
  margin-bottom: 5px;
  color: rgba(21,19,16,0.64);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.activity-timeline {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.activity-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
}
.timeline-dot {
  width: 8px;
  height: 8px;
  margin: 8px auto 0;
  border-radius: 50%;
  background: #c49b62;
}
.activity-timeline time {
  display: block;
  color: rgba(21,19,16,0.56);
  font-size: 11px;
}
.activity-timeline strong {
  font-size: 12px;
}
.activity-timeline p {
  margin: 3px 0 0;
  color: rgba(21,19,16,0.68);
  font-size: 12px;
}
.full-profile-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  border: 1px solid rgba(151,112,70,0.34);
  border-radius: 5px;
  color: #151310;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.inventory-management-page {
  background: #f8f4ef;
}
.inventory-content-wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 42px 42px 44px;
}
.inventory-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(28,25,22,0.11);
}
.inventory-header h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 3.4vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inventory-header p {
  max-width: 780px;
  margin-top: 16px;
  color: rgba(21,19,16,0.68);
  font-size: 15px;
  line-height: 1.75;
}
.inventory-actions {
  display: flex;
  gap: 14px;
}
.inventory-filters {
  display: grid;
  grid-template-columns: minmax(270px, 1.4fr) repeat(4, minmax(140px, 0.72fr)) auto;
  gap: 16px;
  align-items: end;
  margin: 24px 0 18px;
}
.inventory-filters label {
  display: grid;
}
.inventory-filters label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.inventory-filters input,
.inventory-filters select {
  min-height: 44px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid rgba(28,25,22,0.11);
  border-radius: 5px;
  background: rgba(250,247,242,0.72);
  color: #151310;
  font: inherit;
}
.inventory-summary {
  display: grid;
  grid-template-columns: 0.75fr repeat(4, 0.72fr) 1fr;
  margin-bottom: 20px;
  border: 1px solid rgba(28,25,22,0.1);
  border-radius: 7px;
  background: rgba(250,247,242,0.72);
}
.inventory-summary article {
  position: relative;
  min-height: 86px;
  padding: 20px 22px;
  border-right: 1px solid rgba(28,25,22,0.08);
}
.inventory-summary article:last-child {
  border-right: 0;
}
.inventory-summary small {
  display: block;
  color: rgba(21,19,16,0.62);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inventory-summary strong {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}
.inventory-summary p {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  color: rgba(21,19,16,0.7);
  font-size: 11px;
}
.inventory-summary .portal-icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.available { background: #5f8a5f; }
.status-dot.reserved { background: #b99b6b; }
.status-dot.hold { background: #a58ac0; }
.status-dot.sold { background: #9d9a94; }
.inventory-layout {
  display: grid;
  grid-template-columns: minmax(680px, 1fr) minmax(330px, 360px);
  gap: 16px;
  align-items: start;
}
.inventory-table-card,
.inventory-detail-panel {
  border: 1px solid rgba(28,25,22,0.1);
  border-radius: 7px;
  background: rgba(250,247,242,0.74);
}
.inventory-table-card {
  min-width: 0;
}
.inventory-table-scroll {
  overflow-x: auto;
}
.inventory-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}
.inventory-table th {
  height: 54px;
  padding: 0 16px;
  color: rgba(21,19,16,0.68);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-align: left;
  text-transform: uppercase;
}
.inventory-table td {
  min-height: 76px;
  padding: 14px 16px;
  border-top: 1px solid rgba(28,25,22,0.08);
  font-size: 12px;
  vertical-align: middle;
}
.inventory-table tr {
  cursor: pointer;
}
.inventory-table tr:hover,
.inventory-table tr.is-selected {
  background: rgba(232,219,203,0.42);
}
.inventory-gem-cell {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}
.inventory-gem-cell .gem {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 8px 8px rgba(25,13,8,0.18));
}
.inventory-gem-cell strong,
.inventory-gem-cell small,
.inventory-detail-panel small,
.inventory-detail-panel strong {
  display: block;
}
.inventory-gem-cell strong {
  font-size: 13px;
}
.inventory-gem-cell small {
  margin-top: 3px;
  color: rgba(21,19,16,0.6);
}
.inventory-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.inventory-status.available { background: #dfeadb; }
.inventory-status.reserved { background: #efe3cf; }
.inventory-status.on-hold { background: #e8e1ef; }
.inventory-status.sold { background: #e5e2dd; }
.inventory-row-actions {
  display: flex;
  gap: 8px;
}
.inventory-row-actions button,
.inventory-table-footer button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(28,25,22,0.12);
  border-radius: 5px;
  background: rgba(250,247,242,0.72);
  color: #151310;
  cursor: pointer;
}
.inventory-table-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-top: 1px solid rgba(28,25,22,0.08);
  color: rgba(21,19,16,0.65);
  font-size: 12px;
}
.inventory-table-footer div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.inventory-detail-panel {
  position: sticky;
  top: 88px;
  padding: 18px;
}
.inventory-detail-visual {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin-bottom: 18px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 58% 70%, rgba(180,137,79,0.18), transparent 28%),
    linear-gradient(145deg, #f5eee5, #e9dece);
}
.inventory-detail-visual .gem {
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 22px 18px rgba(25,13,8,0.24));
}
.inventory-detail-panel h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
}
.inventory-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
  color: rgba(21,19,16,0.68);
  font-size: 12px;
}
.inventory-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(28,25,22,0.08);
  border-left: 1px solid rgba(28,25,22,0.08);
}
.inventory-detail-grid div {
  min-height: 64px;
  padding: 12px;
  border-right: 1px solid rgba(28,25,22,0.08);
  border-bottom: 1px solid rgba(28,25,22,0.08);
}
.inventory-detail-grid small {
  color: rgba(21,19,16,0.55);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inventory-detail-grid strong {
  margin-top: 7px;
  font-weight: 400;
  line-height: 1.4;
}
.inventory-detail-notes {
  margin: 16px 0;
  color: rgba(21,19,16,0.68);
  font-size: 12px;
  line-height: 1.65;
}
.inventory-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.inventory-detail-actions a,
.inventory-detail-actions button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(151,112,70,0.34);
  border-radius: 5px;
  background: transparent;
  color: #151310;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
}
.inventory-detail-actions button {
  background: #dcc4a8;
  border-color: transparent;
}
.inventory-empty {
  padding: 46px 18px;
  color: rgba(21,19,16,0.62);
  text-align: center;
}
.inventory-modal {
  width: min(620px, 100vw);
}
.crm-drawer {
  position: fixed;
  z-index: 75;
  top: 0;
  right: 0;
  width: min(520px, 100vw);
  height: 100vh;
  padding: 86px 42px 42px;
  background: #f8f4ef;
  box-shadow: -18px 0 40px rgba(28,25,22,0.14);
  transform: translateX(105%);
  transition: transform 0.25s ease;
}
.crm-drawer.is-open {
  transform: translateX(0);
}
.crm-modal {
  position: relative;
  max-height: calc(100vh - 44px);
  overflow: auto;
}
.crm-modal form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.crm-modal label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.crm-modal label.full {
  grid-column: 1 / -1;
}
.crm-modal input,
.crm-modal select,
.crm-modal textarea {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(28,25,22,0.16);
  border-radius: 4px;
  background: rgba(250,247,242,0.78);
  color: #151310;
  font: inherit;
}
.crm-modal textarea {
  min-height: 96px;
  padding-top: 12px;
  resize: vertical;
}
.crm-modal .form-error {
  grid-column: 1 / -1;
  min-height: 18px;
  color: #7a2525;
  font-size: 12px;
}
.crm-modal .modal-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}
.admin-shell {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 46px;
  min-height: 100vh;
  padding: 170px max(26px, calc((100vw - 1500px) / 2 + 26px)) 90px;
}
.admin-sidebar {
  position: sticky;
  top: 145px;
  align-self: start;
  min-height: calc(100vh - 190px);
  border-right: 1px solid rgba(28,25,22,0.2);
}
.admin-sidebar nav {
  display: grid;
  gap: 0;
  padding-right: 8px;
}
.admin-sidebar a,
.admin-sidebar button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 0 24px;
  border: 0;
  border-radius: 7px;
  color: #151310;
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.admin-sidebar a:hover,
.admin-sidebar button:hover,
.admin-sidebar .is-active {
  background: rgba(226,214,199,0.72);
}
.users-icon::before {
  left: 2px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.users-icon::after {
  right: 1px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: -10px 13px 0 -7px transparent;
}
.diamond-mini-icon::before {
  inset: 4px 2px;
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
}
.pricing-icon::before {
  inset: 4px;
  border-radius: 3px;
}
.pricing-icon::after {
  left: 7px;
  top: 6px;
  width: 10px;
  height: 14px;
  border: 0;
  border-left: 1.5px solid #151310;
  border-right: 1.5px solid #151310;
}
.settings-icon::before {
  inset: 5px;
  border-radius: 50%;
}
.settings-icon::after {
  left: 11px;
  top: 2px;
  width: 4px;
  height: 22px;
  border-left: 0;
  border-right: 0;
}
.admin-main {
  min-width: 0;
}
.admin-page-heading {
  max-width: 760px;
  margin-bottom: 64px;
}
.admin-page-heading h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 4.3vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-page-heading p {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.8;
}
.approvals-heading {
  margin-bottom: 58px;
}
.admin-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 210px 190px;
  gap: 18px;
  margin-bottom: 34px;
}
.admin-toolbar label {
  display: grid;
  gap: 8px;
}
.admin-toolbar span {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.admin-toolbar input,
.admin-toolbar select {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(28,25,22,0.2);
  border-radius: 3px;
  background: rgba(250,246,240,0.68);
  color: #151310;
  font: inherit;
}
.admin-tabs {
  display: flex;
  gap: 52px;
  border-bottom: 1px solid rgba(28,25,22,0.2);
}
.admin-tabs button {
  position: relative;
  min-height: 60px;
  border: 0;
  background: transparent;
  color: rgba(21,19,16,0.55);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.admin-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: transparent;
}
.admin-tabs button.is-active {
  color: #151310;
}
.admin-tabs button.is-active::after {
  background: #151310;
}
.admin-table-card {
  position: relative;
}
.admin-table-scroll {
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}
.admin-table th {
  height: 92px;
  color: #151310;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-align: left;
  text-transform: uppercase;
}
.admin-table td {
  height: 118px;
  border-top: 1px solid rgba(28,25,22,0.16);
  font-size: 15px;
  vertical-align: middle;
}
.admin-actions-head {
  text-align: right;
}
.admin-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
}
.admin-row-link {
  border: 0;
  background: transparent;
  color: #151310;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.admin-row-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.admin-status-badge {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-status-badge.approved {
  color: #1f5b36;
}
.admin-status-badge.rejected {
  color: #7a2525;
}
.admin-action-button {
  min-width: 118px;
  min-height: 58px;
  padding: 0 22px;
  border: 1px solid #151310;
  border-radius: 3px;
  background: transparent;
  color: #151310;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.admin-action-button.approve {
  background: #11100f;
  color: #f6f0e8;
}
.admin-action-button.text {
  min-width: auto;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.admin-empty {
  padding: 54px 0;
  border-top: 1px solid rgba(28,25,22,0.16);
}
.admin-empty h2,
.admin-activity-preview h2,
.admin-security-note h2 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.admin-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding-top: 26px;
}
.admin-pagination button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(28,25,22,0.18);
  background: transparent;
  color: #151310;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-pagination button:disabled {
  opacity: 0.35;
}
.admin-activity-preview,
.admin-security-note {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) 1fr;
  gap: 36px;
  margin-top: 54px;
  padding: 30px;
  border: 1px solid rgba(28,25,22,0.14);
  border-radius: 7px;
  background: rgba(246,240,232,0.55);
}
.admin-activity-preview ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-activity-preview li {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(28,25,22,0.1);
}
.admin-activity-preview li span {
  color: rgba(21,19,16,0.64);
  font-size: 13px;
}
.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.admin-overview-card {
  display: grid;
  gap: 14px;
  min-height: 210px;
  padding: 32px;
  border: 1px solid rgba(28,25,22,0.14);
  border-radius: 7px;
  background: rgba(246,240,232,0.62);
  color: #151310;
}
.admin-overview-card span {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
}
.admin-overview-card strong {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.application-drawer {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  width: min(520px, 100vw);
  height: 100vh;
  padding: 92px 46px 46px;
  background: #f6f0e8;
  box-shadow: -18px 0 40px rgba(28,25,22,0.14);
  transform: translateX(105%);
  transition: transform 0.28s ease;
}
.application-drawer.is-open {
  transform: translateX(0);
}
.drawer-close {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(28,25,22,0.22);
  border-radius: 50%;
  background: transparent;
  font-size: 28px;
  line-height: 1;
}
.application-drawer h2 {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.05;
}
.admin-kicker {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.application-drawer dl {
  display: grid;
  gap: 18px;
  margin: 38px 0;
}
.application-drawer dl div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(28,25,22,0.12);
}
.application-drawer dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.application-drawer dd {
  margin: 0;
}
.admin-secure-copy {
  color: rgba(21,19,16,0.7);
  line-height: 1.8;
}
.admin-dialog-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(21,19,16,0.34);
}
.admin-dialog {
  width: min(560px, 100%);
  padding: 42px;
  border-radius: 7px;
  background: #f6f0e8;
  box-shadow: 0 30px 70px rgba(21,19,16,0.24);
}
.admin-dialog h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  text-transform: uppercase;
}
.admin-dialog p {
  margin: 18px 0 22px;
  line-height: 1.8;
}
.admin-dialog textarea {
  width: 100%;
  min-height: 110px;
  padding: 16px;
  border: 1px solid rgba(28,25,22,0.2);
  background: rgba(250,246,240,0.7);
  resize: vertical;
}
.admin-dialog div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}
@media (max-width: 1100px) {
  .control-center {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .control-sidebar {
    padding: 28px 12px;
  }
  .control-brand span,
  .control-brand small,
  .control-sidebar nav a,
  .control-logout,
  .owner-card {
    font-size: 0;
  }
  .control-brand {
    height: 48px;
    margin-bottom: 26px;
  }
  .control-brand::before {
    content: "A&CO";
    font-family: var(--serif);
    font-size: 20px;
    letter-spacing: 0.08em;
  }
  .control-sidebar nav a,
  .control-logout {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }
  .control-sidebar nav b {
    position: absolute;
    right: 12px;
    min-width: 18px;
    height: 18px;
    font-size: 9px;
  }
  .owner-card {
    grid-template-columns: 1fr;
    place-items: center;
    padding: 10px;
  }
  .owner-initial {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .control-topbar nav {
    gap: 24px;
  }
  .control-hero,
  .control-grid-main,
  .control-grid-bottom {
    grid-template-columns: 1fr;
  }
  .control-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .control-content {
    padding: 28px 24px 36px;
  }
  .added-gems-row {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    overflow-x: auto;
  }
  .crm-content {
    padding: 30px 24px 38px;
  }
  .crm-grid {
    grid-template-columns: minmax(280px, 0.75fr) minmax(430px, 1.25fr);
  }
  .crm-detail-column {
    grid-column: 1 / -1;
  }
  .crm-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventory-header,
  .inventory-layout {
    grid-template-columns: 1fr;
  }
  .inventory-content-wrap {
    padding: 30px 24px 38px;
  }
  .inventory-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inventory-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .inventory-summary article:nth-child(3n) {
    border-right: 0;
  }
  .inventory-detail-panel {
    position: static;
  }
  .crm-reset {
    justify-self: start;
  }
  .admin-shell {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .admin-sidebar a,
  .admin-sidebar button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding: 0;
    font-size: 0;
  }
  .admin-toolbar,
  .admin-activity-preview,
  .admin-security-note {
    grid-template-columns: 1fr;
  }
  .admin-actions {
    gap: 10px;
  }
  .admin-action-button {
    min-width: 96px;
  }
}
@media (max-width: 760px) {
  .control-center {
    display: block;
  }
  .control-mobile-toggle {
    position: sticky;
    z-index: 40;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    border-bottom: 1px solid rgba(28,25,22,0.1);
    background: rgba(250,247,242,0.94);
    color: #151310;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .control-sidebar {
    position: static;
    display: none;
    height: auto;
    padding: 24px 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(28,25,22,0.12);
  }
  .control-sidebar.is-open {
    display: flex;
  }
  .control-brand span,
  .control-brand small,
  .control-sidebar nav a,
  .control-logout,
  .owner-card {
    font-size: inherit;
  }
  .control-brand::before {
    content: none;
  }
  .control-brand {
    height: auto;
    margin-bottom: 24px;
  }
  .control-sidebar nav a,
  .control-logout {
    grid-template-columns: 28px 1fr auto;
    justify-items: start;
    padding: 0 16px;
    font-size: 11px;
  }
  .owner-card {
    grid-template-columns: 64px 1fr;
    justify-items: start;
    font-size: 12px;
  }
  .control-topbar {
    position: static;
    grid-template-columns: 1fr auto;
    padding: 0 16px;
  }
  .control-topbar nav {
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
  }
  .control-topbar nav a {
    flex: 0 0 auto;
    font-size: 11px;
  }
  .control-content {
    padding: 24px 16px 34px;
  }
  .control-hero {
    gap: 20px;
  }
  .control-welcome h1 {
    font-size: 46px;
  }
  .control-welcome h2 {
    font-size: 13px;
    line-height: 1.6;
  }
  .owner-access-card,
  .inventory-content {
    grid-template-columns: 1fr;
  }
  .control-kpis {
    grid-template-columns: 1fr;
  }
  .control-panel {
    padding: 18px;
  }
  .control-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .recent-inquiry-list a {
    grid-template-columns: 42px 1fr;
    grid-template-areas: "gem title" "gem meta" "date badge";
  }
  .recent-inquiry-list time {
    justify-self: start;
  }
  .viewing-list a {
    grid-template-columns: 58px 1fr;
  }
  .activity-panel li {
    grid-template-columns: 28px 1fr;
  }
  .activity-panel time {
    grid-column: 2;
  }
  .crm-content {
    padding: 24px 16px 34px;
  }
  .crm-header,
  .inventory-header,
  .crm-grid,
  .crm-filters,
  .inventory-filters,
  .inventory-summary,
  .client-summary-top,
  .preferences-grid,
  .client-summary-stats,
  .crm-modal form {
    grid-template-columns: 1fr;
  }
  .inventory-content-wrap {
    padding: 24px 16px 34px;
  }
  .inventory-actions {
    flex-wrap: wrap;
  }
  .inventory-summary article,
  .inventory-summary article:nth-child(3n) {
    border-right: 0;
    border-bottom: 1px solid rgba(28,25,22,0.08);
  }
  .inventory-table {
    min-width: 780px;
  }
  .inventory-table-footer,
  .inventory-detail-actions {
    grid-template-columns: 1fr;
  }
  .inventory-table-footer {
    display: grid;
  }
  .crm-actions {
    flex-wrap: wrap;
  }
  .crm-grid {
    gap: 14px;
  }
  .crm-inquiry-table {
    min-width: 0;
  }
  .crm-inquiry-table thead {
    display: none;
  }
  .crm-inquiry-table,
  .crm-inquiry-table tbody,
  .crm-inquiry-table tr,
  .crm-inquiry-table td {
    display: block;
    width: 100%;
  }
  .crm-inquiry-table tr {
    padding: 12px 0;
    border-top: 1px solid rgba(28,25,22,0.08);
  }
  .crm-inquiry-table td {
    min-height: auto;
    padding: 5px 0;
    border-top: 0;
  }
  .client-summary-stats div {
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(28,25,22,0.08);
  }
  .crm-drawer {
    padding: 74px 24px 32px;
  }
  .admin-shell {
    display: block;
    padding: 120px 18px 56px;
  }
  .admin-menu-toggle {
    display: flex;
  }
  .admin-sidebar {
    position: static;
    display: none;
    min-height: auto;
    margin-bottom: 22px;
    border: 1px solid rgba(28,25,22,0.16);
    border-radius: 7px;
  }
  .admin-sidebar.is-open {
    display: block;
  }
  .admin-shell > .admin-sidebar:not([data-admin-sidebar]) {
    display: block;
  }
  .admin-sidebar a,
  .admin-sidebar button {
    grid-template-columns: 34px 1fr;
    justify-items: start;
    gap: 16px;
    min-height: 58px;
    padding: 0 18px;
    font-size: 12px;
  }
  .admin-page-heading {
    margin-bottom: 36px;
  }
  .admin-toolbar,
  .admin-overview-grid {
    grid-template-columns: 1fr;
  }
  .admin-tabs {
    gap: 22px;
    overflow-x: auto;
  }
  .admin-tabs button {
    flex: 0 0 auto;
    font-size: 13px;
  }
  .admin-table th,
  .admin-table td {
    height: 78px;
  }
  .admin-pagination {
    justify-content: space-between;
  }
  .application-drawer {
    padding: 72px 24px 32px;
  }
  .application-drawer dl div,
  .admin-dialog div {
    grid-template-columns: 1fr;
  }
}
.professional-dashboard-page {
  background: #f2ebe2;
}
.dashboard-header {
  grid-template-columns: 300px 1fr 54px 44px;
}
.account-icon-link {
  justify-self: end;
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
}
.account-icon-link span,
.account-icon-link::before {
  content: "";
  position: absolute;
  border: 1.6px solid #151310;
}
.account-icon-link span {
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.account-icon-link::before {
  bottom: 8px;
  width: 24px;
  height: 14px;
  border-radius: 16px 16px 4px 4px;
  border-bottom-width: 1.6px;
}
.professional-portal {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 48px;
  min-height: 100vh;
  padding: 150px max(26px, calc((100vw - 1520px) / 2 + 26px)) 80px;
}
.portal-sidebar {
  position: sticky;
  top: 125px;
  align-self: start;
  min-height: calc(100vh - 170px);
  border: 1px solid rgba(28,25,22,0.12);
  border-right-color: rgba(28,25,22,0.18);
  border-radius: 7px 0 0 0;
  background: rgba(246,240,232,0.7);
  overflow: hidden;
}
.portal-sidebar nav {
  display: grid;
}
.portal-sidebar a,
.portal-sidebar button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 0 28px;
  border: 0;
  border-bottom: 1px solid rgba(28,25,22,0.06);
  color: #1c1916;
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.28s ease;
}
.portal-sidebar a:hover,
.portal-sidebar button:hover,
.portal-sidebar .is-active {
  background: rgba(226,214,199,0.64);
}
.portal-icon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
}
.portal-icon::before,
.portal-icon::after {
  content: "";
  position: absolute;
  border: 1.5px solid #151310;
}
.home-icon::before {
  left: 5px;
  top: 10px;
  width: 15px;
  height: 12px;
}
.home-icon::after {
  left: 5px;
  top: 4px;
  width: 15px;
  height: 15px;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.saved-icon::before,
.arrivals-icon::before {
  inset: 4px;
  clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%);
}
.viewing-icon::before {
  inset: 3px 6px;
  border-radius: 7px;
}
.viewing-icon::after {
  left: 10px;
  top: 0;
  width: 6px;
  height: 8px;
  border-radius: 5px;
  background: transparent;
}
.inquiry-icon::before {
  inset: 5px 3px;
  border-radius: 2px;
}
.inquiry-icon::after {
  left: 5px;
  top: 8px;
  width: 15px;
  height: 9px;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
.certificates-icon::before {
  inset: 3px 5px;
  border-radius: 2px;
}
.certificates-icon::after {
  left: 9px;
  top: 9px;
  width: 8px;
  height: 0;
  box-shadow: 0 5px 0 #151310, 0 10px 0 #151310;
  border: 0;
  border-top: 1.5px solid #151310;
}
.account-icon::before {
  left: 8px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.account-icon::after {
  left: 4px;
  bottom: 4px;
  width: 18px;
  height: 10px;
  border-radius: 14px 14px 3px 3px;
}
.logout-icon::before {
  left: 3px;
  top: 4px;
  width: 14px;
  height: 18px;
  border-radius: 2px;
}
.logout-icon::after {
  right: 2px;
  top: 11px;
  width: 12px;
  height: 0;
  border-left: 0;
  border-bottom: 0;
}
.portal-main {
  min-width: 0;
}
.dashboard-content {
  display: grid;
  gap: 36px;
}
.dashboard-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 50px;
  align-items: center;
}
.dashboard-welcome p {
  margin: 0 0 16px;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.dashboard-welcome h1 {
  font-size: clamp(52px, 5vw, 72px);
  line-height: 1;
  letter-spacing: 0.08em;
}
.dashboard-welcome h2 {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.member-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin-top: 26px;
  padding: 0 18px;
  border: 1px solid rgba(28,25,22,0.72);
  border-radius: 5px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.badge-gem-icon {
  width: 20px;
  height: 20px;
  border: 1.4px solid #151310;
  clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%);
}
.pricing-active-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 26px;
  align-items: center;
  min-height: 235px;
  padding: 44px;
  border-radius: 7px;
  background: rgba(230,217,202,0.72);
}
.pricing-active-card .circle-icon {
  width: 72px;
  height: 72px;
  border: 0;
}
.pricing-active-card h2 {
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pricing-active-card p {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.8;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.dashboard-metric-card {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 350px;
  padding: 34px 32px 0;
  border: 1px solid rgba(28,25,22,0.14);
  border-radius: 7px;
  background: rgba(246,240,232,0.55);
}
.dashboard-metric-card h2,
.newest-arrivals-head h2 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.metric-number {
  margin: 42px 0 0;
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
}
.metric-label {
  margin: 6px 0 0;
}
.metric-body {
  margin-top: 26px;
}
.metric-visual {
  position: absolute;
  right: 20px;
  top: 102px;
  width: 145px;
  height: 145px;
}
.saved-visual .gem {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 96px;
  filter: drop-shadow(0 17px 12px rgba(25,13,8,0.26));
}
.paper-calendar {
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 118px;
  height: 126px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(28,25,22,0.12) 19px 20px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(28,25,22,0.12) 19px 20px),
    #eee4d6;
  transform: rotate(-10deg);
}
.gold-pen {
  position: absolute;
  right: -16px;
  bottom: 7px;
  width: 160px;
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, #4b3414, #c29a4d, #5a3b13);
  transform: rotate(-34deg);
}
.dashboard-metric-card > a {
  align-self: end;
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0 -32px;
  padding: 24px 32px 28px;
  border-top: 1px solid rgba(28,25,22,0.14);
  font-size: 13px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.dashboard-metric-card > a span,
.newest-arrivals-head a span {
  transition: transform 0.32s ease;
}
.dashboard-metric-card > a:hover span,
.newest-arrivals-head a:hover span {
  transform: translateX(6px);
}
.newest-arrivals-panel {
  padding: 36px 34px;
  border: 1px solid rgba(28,25,22,0.14);
  border-radius: 7px;
  background: rgba(246,240,232,0.46);
}
.newest-arrivals-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.newest-arrivals-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px;
  margin-top: 28px;
}
.arrival-card {
  display: grid;
  place-items: center;
  min-height: 150px;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(34,24,16,0.18), transparent 28%),
    linear-gradient(145deg, #e5d9c9, #cdbba7);
}
.arrival-card .gem {
  width: min(122px, 100%);
  transition: transform 0.34s ease;
}
.arrival-card:hover .gem {
  transform: scale(1.05);
}
.arrival-card small {
  margin-top: 10px;
  color: #3d342c;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dashboard-loading {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dashboard-loading span {
  height: 170px;
  border-radius: 7px;
  background: rgba(230,217,202,0.52);
}
.dashboard-error {
  max-width: 620px;
  padding: 80px 0;
}
.portal-menu-toggle {
  display: none;
}
.my-account-page {
  background: #f2ebe2;
}
.account-portal {
  grid-template-columns: 330px minmax(0, 1fr);
}
.account-main {
  max-width: 1060px;
  padding-top: 12px;
}
.account-heading h1 {
  font-size: clamp(46px, 4.4vw, 58px);
  letter-spacing: 0.05em;
}
.account-heading p {
  margin: 16px 0 0;
  color: #2f2923;
  font-size: 18px;
}
.account-form {
  margin-top: 48px;
}
.account-section-title {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}
.account-section-title span {
  flex: none;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.account-section-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(28,25,22,0.17);
}
.account-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 42px;
}
.account-field-grid label {
  display: grid;
  gap: 8px;
}
.account-field-grid label > span:first-child {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.account-field-grid input,
.account-field-grid select {
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  border: 1px solid rgba(28,25,22,0.16);
  border-radius: 3px;
  color: #1c1916;
  background: rgba(255,255,255,0.12);
  font-size: 17px;
  outline: 0;
}
.account-field-grid select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #1d1915 50%) calc(100% - 25px) 27px / 9px 9px no-repeat,
    linear-gradient(135deg, #1d1915 50%, transparent 50%) calc(100% - 18px) 27px / 9px 9px no-repeat,
    rgba(255,255,255,0.12);
}
.account-field-grid input:focus,
.account-field-grid select:focus {
  border-color: rgba(28,25,22,0.56);
  box-shadow: 0 0 0 3px rgba(28,25,22,0.08);
}
.account-field-grid small {
  min-height: 17px;
  color: var(--muted);
  font-size: 12px;
}
.account-field-grid .field-error {
  color: #7a3e35;
}
.password-account-form {
  margin-top: 44px;
}
.password-grid .full-width {
  grid-column: 1 / -1;
  max-width: calc(50% - 21px);
}
.account-save-button {
  margin-top: 28px;
  border-radius: 3px;
}
.account-save-button:disabled {
  opacity: 0.75;
  cursor: wait;
}
.account-status-message {
  display: none;
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid rgba(92,45,35,0.24);
  color: #5d2e25;
  background: rgba(123,72,54,0.07);
  font-size: 13px;
}
.account-status-message.is-visible {
  display: block;
}
.account-status-message.is-success {
  border-color: rgba(79,98,81,0.3);
  color: #3f5644;
  background: rgba(79,98,81,0.08);
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes slowSpin {
  0% { rotate: y -10deg; }
  100% { rotate: y 18deg; }
}
@keyframes hoverGem {
  0%, 100% { transform: translateY(-7px) rotate(-5deg); }
  50% { transform: translateY(18px) rotate(3deg); }
}

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 240px 1fr 45px; padding: 28px; }
  .main-nav { display: none; }
  .hero { padding-inline: 24px; }
  .pedestal-stage { gap: 22px; }
  .split-section, .origin, .private-viewing, .contact, .collection-hero, .editorial-collection-cta, .appointment-hero, .booking-section, .appointment-bottom, .product-detail-hero, .product-details-section, .product-editorial { grid-template-columns: 1fr; }
  .product-grid, .origin-cards, .collection-grid, .collection-trust-strip, .appointment-info-strip, .product-trust-strip { grid-template-columns: repeat(2, 1fr); }
  .place-card:last-child { grid-column: 1 / -1; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { align-items: flex-start; }
  .filter-left { overflow-x: auto; padding-bottom: 4px; }
  .custom-stone-band { grid-template-columns: 72px 1fr; }
  .custom-stone-band .outline-button { grid-column: 2; justify-self: start; }
  .appointment-hero-visual { min-height: 520px; }
  .appointment-info-strip article:nth-child(2) { border-right: 0; }
  .appointment-info-strip article { padding: 28px; border-bottom: 1px solid rgba(23,19,15,0.12); }
  .appointment-info-strip article:nth-child(3),
  .appointment-info-strip article:nth-child(4) { border-bottom: 0; }
  .atelier-visual { min-height: 520px; }
  .product-detail-hero {
    padding-top: 142px;
  }
  .product-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
  }
  .product-gallery {
    min-height: 510px;
  }
  .product-info-panel {
    max-width: 640px;
  }
  .product-trust-strip article:nth-child(2) {
    border-right: 0;
  }
  .product-trust-strip article {
    padding: 24px;
    border-bottom: 1px solid rgba(23,19,15,0.12);
  }
  .product-trust-strip article:nth-child(3),
  .product-trust-strip article:nth-child(4) {
    border-bottom: 0;
  }
  .editorial-product-copy {
    padding-left: max(58px, calc((100vw - var(--max)) / 2 + 58px));
  }
  .professional-login {
    grid-template-columns: minmax(340px, 0.9fr) 1.1fr;
  }
  .professional-access {
    margin-left: 34px;
  }
  .login-travertine {
    width: 58vw;
  }
  .professional-application-main {
    padding-left: 34px;
    padding-right: 34px;
  }
  .application-grid {
    gap: 18px 22px;
  }
  .received-editorial {
    min-height: 560px;
  }
  .received-tray {
    left: 40px;
    width: 55vw;
  }
  .received-certificate {
    right: 35px;
    width: 31vw;
    height: 390px;
  }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .site-header { padding: 20px 18px; grid-template-columns: 1fr 38px; }
  .brand span { font-size: 24px; }
  .brand small { font-size: 9px; letter-spacing: 0.38em; }
  .hero { min-height: 920px; padding: 128px 18px 0; }
  h1 { font-size: 47px; }
  h2 { font-size: 35px; }
  .eyebrow, .section-kicker { letter-spacing: 0.28em; }
  .side-scroll, .right-scroll { display: none; }
  .pedestal-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
    margin-top: 34px;
  }
  .pedestal, .pedestal-low, .pedestal-mid, .pedestal-tall { height: 230px; }
  .pedestal .gem { width: 95px; top: -82px; }
  .origin, .origins-section, .split-section, .collection, .custom, .testimonials, .private-viewing, .contact, .site-footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .origin { padding-top: 120px; }
  .floating-wrap { min-height: 360px; }
  .floating-gem { width: 260px; }
  .origin-cards, .product-grid, .collection-head, .testimonial-head, .site-footer, .collection-grid, .collection-trust-strip, .appointment-info-strip, .product-trust-strip, .related-grid { grid-template-columns: 1fr; }
  .place-card, .place-card:last-child { grid-column: auto; min-height: 390px; }
  .split-section { gap: 36px; min-height: auto; }
  .lifestyle { min-height: 470px; }
  .certificate { width: 128px; height: 175px; font-size: 31px; }
  .hand-one { width: 260px; height: 160px; }
  .paper { left: 10%; width: 330px; height: 430px; }
  .paper span, .paper em { font-size: 18px; }
  .ring-sketch { width: 210px; }
  .product-info { padding: 25px; }
  .private-viewing { padding-top: 58px; padding-bottom: 58px; }
  .box-lid, .box-tray { left: 0; width: min(100%, 410px); }
  .contact { gap: 30px; }
  .collection-hero, .gemstone-listing, .filter-bar, .custom-stone-band, .collection-trust-strip, .editorial-collection-cta {
    padding-left: 22px;
    padding-right: 22px;
  }
  .collection-hero { padding-top: 128px; }
  .collection-hero-copy p:not(.breadcrumb) { font-size: 16px; }
  .collection-hero-visual { min-height: 280px; }
  .raw-marble { width: 76vw; right: 2%; height: 190px; transform: none; }
  .collection-hero-gem { width: 135px; right: 18%; top: 45px; }
  .filter-bar { display: block; overflow: hidden; }
  .filter-left, .filter-right { width: 100%; max-width: 100%; flex-wrap: wrap; gap: 16px 24px; overflow: hidden; margin-bottom: 15px; }
  .collection-visual { min-height: 285px; }
  .custom-stone-band { grid-template-columns: 1fr; gap: 18px; }
  .custom-stone-band .outline-button { grid-column: auto; justify-self: stretch; }
  .collection-trust-strip article { grid-template-columns: 58px 1fr; }
  .editorial-image { min-height: 330px; }
  .editorial-tweezer { width: 240px; right: 0; transform: rotate(-8deg); }
  .editorial-pear { left: 34%; width: 118px; }
  .appointment-hero, .appointment-info-strip, .appointment-form, .appointment-bottom {
    padding-left: 22px;
    padding-right: 22px;
  }
  .appointment-hero {
    padding-top: 126px;
    min-height: auto;
  }
  .appointment-copy h1 { font-size: 45px; }
  .appointment-hero-visual {
    min-height: 430px;
  }
  .atelier-wall-logo {
    right: 12%;
    top: 11%;
    font-size: 28px;
  }
  .viewing-table {
    left: 0;
    right: -20%;
    height: 255px;
  }
  .viewing-box {
    right: 6%;
    bottom: 18%;
    width: 285px;
    height: 190px;
  }
  .viewing-lid { height: 92px; }
  .viewing-tray { height: 108px; }
  .appointment-cert {
    left: 7%;
    bottom: 7%;
    width: 96px;
    height: 136px;
    font-size: 24px;
  }
  .dried-vase { left: 8%; top: 28%; transform: scale(0.72); }
  .table-lamp { right: -6%; top: 25%; transform: scale(0.72); }
  .appointment-loupe, .appointment-tweezer { display: none; }
  .appointment-info-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(23,19,15,0.12);
  }
  .appointment-info-strip article:last-child { border-bottom: 0; }
  .booking-section { grid-template-columns: 1fr; }
  .atelier-visual { min-height: 430px; }
  .atelier-door {
    width: 210px;
    height: 300px;
    font-size: 26px;
  }
  .appointment-form {
    padding-top: 44px;
    padding-bottom: 48px;
  }
  .form-grid { grid-template-columns: 1fr; }
  .appointment-bottom {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .appointment-quote {
    padding: 34px 30px;
  }
  .appointment-macro { min-height: 220px; }
  .macro-tweezer {
    width: 280px;
    right: -4%;
  }
  .macro-gem {
    width: 82px;
    left: 38%;
  }
  .copyright { position: static; transform: none; grid-column: 1; white-space: normal; }
  .mobile-menu-panel {
    right: 14px;
    width: calc(100vw - 28px);
  }
  .professional-login {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .professional-access {
    order: 1;
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 128px 22px 48px;
  }
  .login-copy h1 {
    font-size: 46px;
  }
  .login-copy p {
    font-size: 17px;
  }
  .professional-login-form {
    gap: 20px;
    margin-top: 38px;
  }
  .professional-login-form input {
    min-height: 60px;
  }
  .login-options {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .login-submit {
    margin-top: 22px;
  }
  .professional-application {
    margin-top: 38px;
  }
  .professional-application .text-link {
    line-height: 1.7;
  }
  .login-editorial {
    order: 2;
    min-height: 390px;
  }
  .login-travertine {
    right: -24%;
    bottom: 9%;
    width: 118vw;
    height: 265px;
  }
  .login-tweezers {
    right: -30%;
    bottom: 33%;
    width: 92vw;
  }
  .login-sapphire {
    right: 23%;
    bottom: 42%;
    width: 118px;
  }
  .login-blue-reflection {
    right: 27%;
    bottom: 29%;
  }
  .login-flower {
    right: -10%;
    top: 6%;
    transform: scale(0.72);
  }
  .auth-placeholder {
    padding: 128px 22px 60px;
  }
  .account-icon-link {
    display: none;
  }
  .professional-portal {
    display: block;
    padding: 120px 18px 56px;
  }
  .portal-menu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 52px;
    margin-bottom: 18px;
    padding: 0 18px;
    border: 1px solid rgba(28,25,22,0.18);
    background: rgba(246,240,232,0.72);
    color: #1c1916;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .portal-sidebar {
    position: static;
    display: none;
    min-height: auto;
    margin-bottom: 22px;
    border-radius: 7px;
  }
  .portal-sidebar.is-open {
    display: block;
  }
  .portal-sidebar a,
  .portal-sidebar button {
    grid-template-columns: 34px 1fr;
    justify-items: start;
    gap: 16px;
    min-height: 58px;
    padding: 0 18px;
    font-size: 12px;
  }
  .dashboard-top {
    gap: 28px;
  }
  .account-main {
    padding-top: 0;
  }
  .account-heading h1 {
    font-size: 42px;
  }
  .account-field-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .password-grid .full-width {
    grid-column: auto;
    max-width: 100%;
  }
  .account-field-grid input,
  .account-field-grid select {
    min-height: 58px;
  }
  .account-form {
    margin-top: 38px;
  }
  .account-section-title {
    gap: 16px;
  }
  .dashboard-welcome h1 {
    font-size: 44px;
  }
  .dashboard-welcome h2 {
    font-size: 17px;
    line-height: 1.7;
  }
  .pricing-active-card {
    grid-template-columns: 58px 1fr;
    gap: 18px;
    min-height: auto;
    padding: 28px;
  }
  .pricing-active-card .circle-icon {
    width: 52px;
    height: 52px;
  }
  .metric-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dashboard-metric-card {
    min-height: 310px;
  }
  .metric-visual {
    transform: scale(0.82);
    transform-origin: right center;
  }
  .newest-arrivals-panel {
    padding: 26px 18px;
  }
  .newest-arrivals-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .arrival-card {
    min-width: 180px;
    scroll-snap-align: start;
  }
  .professional-application-main {
    padding: 126px 22px 52px;
  }
  .application-intro h1 {
    font-size: 43px;
  }
  .application-intro p {
    font-size: 17px;
  }
  .professional-application-form {
    margin-top: 38px;
  }
  .application-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .profession-other {
    grid-column: auto;
  }
  .professional-application-form input:not([type="checkbox"]):not([type="file"]),
  .professional-application-form select,
  .professional-application-form textarea {
    min-height: 58px;
    font-size: 14px;
  }
  .application-full-field {
    margin-top: 22px;
  }
  .application-upload {
    min-height: 142px;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    font-size: 16px;
  }
  .application-consent label {
    font-size: 14px;
  }
  .application-submit {
    margin-top: 28px;
  }
  .application-review-note {
    font-size: 15px;
  }
  .application-received {
    padding-top: 118px;
  }
  .received-confirmation,
  .received-empty-state {
    padding: 54px 22px 46px;
  }
  .received-icon {
    width: 74px;
    height: 74px;
    margin-bottom: 28px;
  }
  .received-confirmation h1,
  .received-empty-state h1 {
    font-size: 45px;
    letter-spacing: 0.06em;
  }
  .received-status {
    font-size: 12px;
    letter-spacing: 0.24em;
    line-height: 1.8;
  }
  .received-copy {
    gap: 20px;
    margin-top: 34px;
    font-size: 18px;
  }
  .received-home-button {
    margin-top: 36px;
  }
  .received-editorial {
    min-height: 470px;
  }
  .received-tray {
    left: -35px;
    bottom: 82px;
    width: 78vw;
    height: 235px;
    border-width: 18px;
  }
  .tray-divider.vertical {
    width: 14px;
  }
  .tray-divider.horizontal {
    height: 14px;
  }
  .tray-gem {
    width: 44px;
  }
  .received-certificate {
    right: -26px;
    bottom: 72px;
    width: 44vw;
    height: 290px;
  }
  .received-certificate span {
    font-size: 38px;
  }
  .received-certificate small {
    font-size: 9px;
  }
  .received-certificate b {
    margin-top: 28px;
    font-size: 19px;
  }
  .received-flower {
    left: -80px;
    bottom: 20px;
    transform: scale(0.72) rotate(-18deg);
  }
  .account-review {
    grid-template-columns: 1fr;
  }
  .review-copy-panel {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 126px 22px 54px;
  }
  .review-status-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 42px;
  }
  .review-copy-panel h1 {
    font-size: 43px;
  }
  .review-intro,
  .review-body {
    font-size: 18px;
  }
  .review-capabilities {
    padding: 30px 28px;
  }
  .review-capabilities h2 {
    font-size: 24px;
  }
  .review-capabilities a {
    font-size: 16px;
  }
  .review-cta {
    width: 100%;
  }
  .review-editorial {
    min-height: 470px;
  }
  .review-table {
    right: -48%;
    width: 150%;
    height: 34%;
  }
  .review-vase {
    left: 30%;
    bottom: 24%;
    width: 105px;
    height: 162px;
  }
  .review-branches {
    left: 16%;
    bottom: 37%;
    transform: scale(0.72);
    transform-origin: bottom center;
  }
  .review-lamp {
    right: -98px;
    bottom: 27%;
    transform: scale(0.78);
  }
  .dashboard-header {
    grid-template-columns: 240px 1fr 44px 38px;
  }
  .professional-portal {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .portal-sidebar a,
  .portal-sidebar button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding: 0;
    font-size: 0;
  }
  .dashboard-top {
    grid-template-columns: 1fr;
  }
  .account-portal {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .account-field-grid {
    gap: 22px;
  }
  .password-grid .full-width {
    max-width: 100%;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .newest-arrivals-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-detail-hero,
  .product-trust-strip,
  .product-details-section,
  .related-products {
    padding-left: 22px;
    padding-right: 22px;
  }
  .product-detail-hero {
    gap: 26px;
    min-height: auto;
    padding-top: 126px;
    padding-bottom: 44px;
  }
  .product-gallery {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
  }
  .product-thumbs {
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    order: 2;
    padding-top: 0;
  }
  .product-thumb {
    width: 100%;
    height: 68px;
  }
  .product-main-visual {
    min-height: 380px;
  }
  .product-main-gem {
    width: min(245px, 70vw);
  }
  .product-marble {
    left: 0;
    bottom: 58px;
    height: 138px;
  }
  .product-scroll {
    display: none;
  }
  .product-info-panel h1 {
    font-size: 42px;
  }
  .product-meta,
  .product-price-status {
    line-height: 2;
  }
  .product-meta span,
  .product-price-status span {
    margin-inline: 10px;
  }
  .product-trust-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(23,19,15,0.12);
  }
  .product-trust-strip article:last-child {
    border-bottom: 0;
  }
  .product-details-section {
    gap: 34px;
    padding-top: 48px;
  }
  .spec-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .certificate-panel {
    grid-template-columns: 1fr;
    min-height: 360px;
  }
  .certificate-placeholder {
    width: 155px;
  }
  .product-editorial {
    grid-template-columns: 1fr;
  }
  .editorial-product-visual {
    min-height: 310px;
  }
  .editorial-product-copy {
    padding: 44px 22px;
  }
  .related-products {
    padding-top: 52px;
    padding-bottom: 62px;
  }
  .product-lightbox {
    padding: 18px;
  }
  .lightbox-preview {
    min-height: 520px;
  }
}

/* ---------------------------------------------------------------------- */
/* 3D gemstones (Three.js) — homepage hero + origin section.              */
/* Anchored to each pedestal top; nudged down/left so the stone sits      */
/* visually centred on the rim. A soft ellipse shadow (::after) grounds   */
/* the gem on the pedestal.                                               */
/* ---------------------------------------------------------------------- */
.gem-3d-canvas {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, 34px);
  touch-action: none;
  pointer-events: none;
  z-index: 2;
}
.pedestal-low  .gem-3d-canvas { width: 132px; height: 132px; transform: translate(-50%, 29px); }
.pedestal-mid  .gem-3d-canvas { width: 142px; height: 142px; transform: translate(-50%, 31px); }
.pedestal-tall .gem-3d-canvas { width: 158px; height: 158px; transform: translate(-50%, 35px); }

/* Contact shadow cast by the gem onto the pedestal top.
   Geometry is matched to the plate: .pedestal::before is a 43px-tall
   ellipse spanning 104% of the column, so its centre sits 2.5px below the
   pedestal's top edge — hence top:3px with a -50% Y translate. The width
   to height ratio (~0.115) copies the plate's own squash, so the shadow
   reads as lying flat on that surface rather than standing up.
   Opacity, size and blur are driven per frame from gems3d.js: the stone
   dropping toward the pedestal tightens and darkens its shadow. */
.pedestal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 138px;
  height: 16px;
  transform: translate(-50%, -50%) scale(var(--gem-shadow-scale, 1));
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--gem-shadow-core, rgba(58, 43, 26, 0.62)) 0%,
    var(--gem-shadow-mid, rgba(58, 43, 26, 0.3)) 46%,
    rgba(58, 43, 26, 0) 73%
  );
  opacity: var(--gem-shadow-opacity, 0.36);
  filter: blur(var(--gem-shadow-blur, 3px));
  z-index: 1;
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.pedestal-low::after  { width: 130px; height: 15px; }
.pedestal-mid::after  { width: 138px; height: 16px; }
.pedestal-tall::after { width: 155px; height: 18px; }

.floating-wrap { position: relative; }
.floating-gem-3d {
  width: min(40vw, 440px);
  aspect-ratio: 1;
  animation: hoverGem 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
  .pedestal-low  .gem-3d-canvas { width: 96px; height: 96px; transform: translate(-50%, 21px); }
  .pedestal-mid  .gem-3d-canvas { width: 102px; height: 102px; transform: translate(-50%, 23px); }
  .pedestal-tall .gem-3d-canvas { width: 110px; height: 110px; transform: translate(-50%, 25px); }
  .pedestal-low::after  { width: 92px;  height: 11px; }
  .pedestal-mid::after  { width: 98px;  height: 11px; }
  .pedestal-tall::after { width: 106px; height: 12px; }
  .floating-gem-3d { width: 270px; }
}

/* ---------------------------------------------------------------------- */
/* Admin passcode gate (admin-gate.js). Deterrent only — see the comment  */
/* at the top of that file for what this does and doesn't protect against.*/
/* ---------------------------------------------------------------------- */
/* Blur the page content but NOT the overlay itself — the overlay is a child
   of the same element, so blurring the parent would blur the passcode form
   along with everything behind it. */
.admin-gate-locked > *:not(.admin-gate-overlay) {
  filter: blur(14px);
  pointer-events: none;
  user-select: none;
}
.admin-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 24, 18, 0.82);
  backdrop-filter: blur(2px);
}
.admin-gate-form {
  width: min(360px, 88vw);
  background: #fbf6ee;
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 30px 60px rgba(20, 14, 8, 0.4);
  text-align: center;
}
.admin-gate-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #8a7a63;
}
.admin-gate-form h1 { margin: 0 0 22px; font-size: 22px; }
.admin-gate-label { display: block; text-align: left; margin-bottom: 18px; }
.admin-gate-label span { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b5c47; margin-bottom: 6px; }
.admin-gate-label input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9cbb2;
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
}
.admin-gate-error { color: #a3212b; font-size: 13px; margin: -8px 0 16px; }
.admin-gate-form button {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: #1e1812;
  color: #fbf6ee;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.admin-gate-form button:hover { background: #332920; }

/* ---------------------------------------------------------------------- */
/* Legal pages — Privacy Policy, Terms & Conditions, Shipping & Delivery, */
/* Returns. Plain, readable prose styling reusing the site's type system. */
/* ---------------------------------------------------------------------- */
.legal-page { max-width: var(--max); margin: 0 auto; }
.legal-hero {
  padding: 64px clamp(24px, 6vw, 96px) 40px;
  border-bottom: 1px solid var(--line);
}
.legal-hero h1 { font-family: var(--serif); font-size: clamp(36px, 5vw, 54px); margin: 10px 0 8px; }
.legal-updated { color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
.legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px clamp(24px, 6vw, 0) 120px;
}
.legal-body h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 44px 0 14px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-family: var(--sans); font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; margin: 26px 0 10px; color: var(--ink); }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.legal-body ul, .legal-body ol { padding-left: 22px; margin: 12px 0; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { color: var(--ink); }
.legal-note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 36px;
}
.legal-note strong { display: block; margin-bottom: 4px; color: var(--ink); }
@media (max-width: 720px) {
  .legal-hero { padding: 44px 20px 28px; }
  .legal-body { padding: 36px 20px 90px; }
}

/* ---------------------------------------------------------------------- */
/* Header dropdown — "About us" holds Sourcing and Certification, keeping  */
/* the top level to four items so it stays evenly spaced. Opens on hover   */
/* and on keyboard focus (:focus-within), so it's reachable by tab too.    */
/* ---------------------------------------------------------------------- */
.main-nav .nav-item { position: relative; display: flex; align-items: center; }
.main-nav .nav-item > a::before {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.55;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.main-nav .nav-item:hover > a::before,
.main-nav .nav-item:focus-within > a::before {
  transform: translateY(-20%) rotate(225deg);
  opacity: 1;
}
.main-nav .nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 190px;
  margin-top: 14px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(245, 239, 230, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 44px rgba(38, 28, 18, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
/* Invisible bridge so the menu doesn't close while crossing the gap. */
.main-nav .nav-submenu::before {
  content: "";
  position: absolute;
  inset: -16px 0 100% 0;
}
.main-nav .nav-item:hover .nav-submenu,
.main-nav .nav-item:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Mobile menu: submenu entries are flattened by script.js, so indent them
   to keep the hierarchy readable. */
.mobile-menu-panel a.is-sub {
  padding-left: 20px;
  opacity: 0.75;
}

/* ---------------------------------------------------------------------- */
/* Header panel (the ☰ button). Two sections:                             */
/*   .menu-panel-mirror — a copy of the main nav, ONLY shown below 1100px  */
/*     where .main-nav is hidden and this panel is the only navigation.    */
/*     Hidden on desktop so the panel doesn't just repeat the visible nav. */
/*   .menu-panel-portal — account routes, always shown.                    */
/* ---------------------------------------------------------------------- */
.menu-panel-mirror { display: none; gap: 18px; }
.menu-panel-portal { display: grid; gap: 18px; }
.menu-panel-heading {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.72;
}
.menu-panel-portal .menu-panel-heading:not(:first-child) {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(23, 19, 15, 0.12);
}

@media (max-width: 1100px) {
  .menu-panel-mirror { display: grid; }
  .menu-panel-portal {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(23, 19, 15, 0.12);
  }
}

/* ---------------------------------------------------------------------- */
/* Text-clipping safety net.                                              */
/* The layout was designed around Cormorant Garamond, a narrow display    */
/* serif. If it fails to load (offline, blocked CDN), the browser falls   */
/* back to a much wider serif such as Georgia, and long single words like */
/* "Professional" no longer fit the space reserved for them — they then   */
/* overflow their container and get visually cut off.                     */
/* These rules make headings wrap instead of overflowing, so a missing    */
/* font degrades gracefully rather than losing letters.                   */
/* ---------------------------------------------------------------------- */
h1, h2, h3, h4,
.legal-body p,
.mobile-menu-panel a {
  overflow-wrap: break-word;
}
/* Trailing letter-spacing adds a gap after the final character, which can
   push it past the edge of a tightly-sized box. Trimming it on the big
   display headings keeps the last letter inside. */
.login-copy h1,
.dashboard-welcome h1,
.control-welcome h1,
.review-copy-panel h1 {
  padding-right: 0.08em;
}

/* ---------------------------------------------------------------------- */
/* Gemstone photographs.                                                  */
/* These replace the CSS gem shapes wherever a product has a photo. Sizes  */
/* mirror the .gem variants they stand in for, so nothing shifts:          */
/*   .gem = 160px, .product-main-gem = clamp(230px,29vw,390px),            */
/*   .editorial-product-gem = min(210px,42vw), .thumb-gem = 42px.          */
/* If an image fails to load, script.js swaps the figure back to the CSS   */
/* gem, so a broken URL is invisible to the visitor.                       */
/* ---------------------------------------------------------------------- */
.gem-photo {
  position: relative;
  width: 160px;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #e6dccd;
  box-shadow:
    0 20px 30px rgba(39, 25, 14, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.gem-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.collection-card:hover .gem-photo img { transform: scale(1.06); }

.gem-photo.product-main-gem {
  width: clamp(230px, 29vw, 390px);
  z-index: 2;
  box-shadow: 0 34px 44px rgba(16, 11, 6, 0.34), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.gem-photo.editorial-product-gem {
  width: min(210px, 42vw);
  z-index: 2;
  transform: rotate(-6deg);
}
.gem-photo.collection-hero-gem {
  position: absolute;
  right: min(13vw, 170px);
  top: 40px;
  width: 190px;
}
.gem-photo.thumb-gem {
  width: 42px;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(39, 25, 14, 0.24);
}

@media (max-width: 1100px) {
  .gem-photo { width: 128px; }
  .gem-photo.collection-hero-gem { width: 135px; right: 18%; top: 45px; }
}

/* Photo sizes for the remaining gem contexts, matched to the .gem shapes
   they replace: dashboard arrivals (122px), admin inventory row (38px)
   and the admin inventory detail panel (112px). */
.gem-photo.arrival-gem { width: min(122px, 100%); }
.arrival-card:hover .gem-photo img { transform: scale(1.06); }
.gem-photo.inventory-gem {
  width: 38px;
  border-radius: 9px;
  flex: 0 0 auto;
  box-shadow: 0 5px 10px rgba(25, 13, 8, 0.2);
}
.gem-photo.inventory-detail-gem { width: 112px; border-radius: 16px; }

/* ---------------------------------------------------------------------- */
/* Section photography slots (section-photos.js).                         */
/* Every large visual block carries data-photo. When that file exists the  */
/* script sets it as a cover background and adds .has-photo, which hides   */
/* the CSS stand-in artwork underneath. No file = artwork stays. This is   */
/* what turns the built site into the design comp once photography lands.  */
/* ---------------------------------------------------------------------- */
[data-photo].has-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Decorative CSS shapes are hidden once a real photo is in place. */
[data-photo].has-photo > span:not(.line-icon),
[data-photo].has-photo > .certificate,
[data-photo].has-photo > .hand,
[data-photo].has-photo > .loupe,
[data-photo].has-photo::before,
[data-photo].has-photo::after {
  display: none !important;
}
/* Place cards keep their label legible over the photograph. */
.place-card.has-photo {
  position: relative;
  color: #f6efe4;
}
.place-card.has-photo > * { position: relative; z-index: 2; }
.place-card.has-photo::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(24,18,12,0.12) 0%, rgba(24,18,12,0.62) 100%);
}

/* ---------------------------------------------------------------------- */
/* Collection card photography — matched to the design comps.             */
/* The comps show the stone photographed against a soft cream ground,     */
/* filling the card's visual area edge to edge, rather than a cut-out.    */
/* Product photos should therefore be shot (or masked) on a pale, even    */
/* background; square framing crops best here.                            */
/* ---------------------------------------------------------------------- */
.collection-visual .gem-photo,
.product-card .gem-photo {
  width: 100%;
  height: 100%;
  min-height: 310px;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.collection-visual .gem-photo img {
  object-fit: cover;
  object-position: center;
}
/* Slow, restrained zoom on hover — luxury reads as calm, not busy. */
.collection-card .gem-photo img { transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.collection-card:hover .gem-photo img { transform: scale(1.045); }

/* ====================================================================== */
/* DESIGN REFINEMENT PASS                                                 */
/* Differences between the build and the design comps that are purely     */
/* typographic or spatial — everything achievable without photography.    */
/* Grouped here rather than edited in place so it stays reviewable and    */
/* reversible.                                                            */
/* ====================================================================== */

/* --- 1. Display type in Light -----------------------------------------
   The single biggest gap. The comps set the large serif headings in a
   light weight; the build used regular, which at 60-90px reads heavy and
   blunt. Light weight is what makes large type feel expensive. Small
   headings stay at regular so they don't turn fragile. */
h1, h2 {
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: 0.012em;
}
.collection-card-info h2,
.arrival-card h3,
h3, h4 { font-weight: 400; }

/* --- 2. Hairlines ------------------------------------------------------
   Comp rules are barely-there; the build drew them at 24% opacity, which
   reads as a border rather than a division. Halving it lets the type do
   the structuring. */
:root { --line: rgba(31, 25, 19, 0.13); }
.collection-card-info a { border-top-color: rgba(23, 19, 15, 0.13); }
.outline-button { border-color: rgba(23, 19, 15, 0.32); }

/* --- 3. Small-caps labels ---------------------------------------------
   0.48em tracking stretched these past the point where they read as a
   word. The comps sit nearer 0.3em: still airy, but legible at a glance. */
.eyebrow, .section-kicker { letter-spacing: 0.34em; }
.section-kicker { font-size: 11px; gap: 20px; }
.section-kicker i { width: 64px; opacity: 0.4; }
.main-nav a { letter-spacing: 0.2em; }

/* --- 4. Body copy ------------------------------------------------------
   Lighter weight and more leading. The comps' paragraphs are noticeably
   airier than the build's, which is most of why they feel calmer. */
.lead {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.78;
}
.panel p, .selection p, .custom p, .contact p { line-height: 1.75; }

/* --- 5. Vertical rhythm ------------------------------------------------
   Comps breathe roughly 15% more than the build at every section break. */
.origins-section, .selection, .collection,
.custom, .testimonials, .contact { padding-block: clamp(96px, 11vw, 168px); }

/* --- 6. Product cards --------------------------------------------------
   Comp card titles are smaller relative to the card and the spec lines
   tighter, so the photograph stays the loudest element. */
.collection-card-info { padding: 30px 32px 32px; }
.collection-card-info h2 { font-size: 21px; letter-spacing: 0.03em; }
.collection-card-info p {
  font-size: 11px;
  line-height: 1.95;
  letter-spacing: 0.17em;
}
.collection-card-info a { margin-top: 24px; padding-top: 18px; font-size: 11px; letter-spacing: 0.2em; }
.collection-card {
  /* opacity must stay in here: .reveal fades these in, and a transition
     shorthand replaces rather than extends the earlier declaration. */
  transition: opacity 1.1s ease,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px rgba(38, 27, 16, 0.13);
}

/* --- 7. Buttons --------------------------------------------------------
   Slightly taller, wider tracking, lighter border: less "web button",
   more "printed invitation". */
.outline-button {
  min-height: 62px;
  padding: 0 46px;
  font-size: 11px;
  letter-spacing: 0.28em;
  background: transparent;
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
.outline-button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- 8. Header ---------------------------------------------------------
   The comps let the masthead sit lighter over the page. */
.brand span { font-weight: 300; letter-spacing: 0.055em; }
.brand small { letter-spacing: 0.42em; opacity: 0.78; }

@media (max-width: 1100px) {
  .lead { font-size: 17px; }
  .origins-section, .selection, .collection,
  .custom, .testimonials, .contact { padding-block: clamp(64px, 12vw, 96px); }
}

/* Hairlines were thinned for the marketing pages, where restraint reads as
   refinement. Data-dense screens need their structure back, so the admin
   panel and professional portal keep the original weight. */
[data-auth-state="admin"],
[data-auth-state="approved_b2b"] { --line: rgba(31, 25, 19, 0.2); }

/* The gem box on the homepage is drawn in CSS; once the photograph is in
   place its lid and tray shapes must go, or they float on top of it. */
.gem-box.has-photo > .box-lid,
.gem-box.has-photo > .box-tray { display: none !important; }
.gem-box.has-photo { min-height: 340px; border-radius: 4px; }

/* ====================================================================== */
/* PHOTOGRAPHIC HERO — backdrop and pedestals                             */
/*                                                                        */
/* The satin-and-marble backdrop is layered ABOVE the old fabric gradient */
/* rather than replacing it: if the file ever goes missing the gradient   */
/* still renders, so the hero never turns blank.                          */
/*                                                                        */
/* Each pedestal is now a cut-out photograph carried on ::before. The     */
/* geometry matters: in those photographs the top surface sits a fixed    */
/* fraction down from the top of the image (11.0% / 7.4% / 8.6% for the   */
/* low, tall and mid columns). The gemstone and its contact shadow are    */
/* pinned to exactly those percentages, so they land on the surface at    */
/* every screen width instead of being nudged with fixed pixel offsets.   */
/* ====================================================================== */
.hero.fabric-panel {
  background-image:
    url("images/sections/hero-backdrop.jpg"),
    radial-gradient(1200px 600px at 50% 23%, rgba(255,255,255,0.43), transparent 58%),
    linear-gradient(180deg, #d8cdbe, #eee7dd 74%, #d1c1ad);
  background-size: cover, auto, auto;
  background-position: center bottom, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* The pedestal box becomes a positioning frame only — the photo carries
   all of the shading, fluting and form. */
.pedestal {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.pedestal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  /* auto 100% keeps the photographed proportions: the CSS column is wider
     than the pedestal in the photo, and stretching to fill would smear the
     fluting sideways. Height governs, width follows, centred in the box. */
  background-size: auto 100%;
  background-position: center bottom;
  box-shadow: none;
  /* drop-shadow follows the cut-out silhouette, unlike box-shadow which
     would draw a rectangle around a cylinder. */
  filter: drop-shadow(0 22px 24px rgba(72, 54, 34, 0.3));
}
.pedestal-low::before  { background-image: url("images/sections/pedestal-low.png"); }
.pedestal-tall::before { background-image: url("images/sections/pedestal-tall.png"); }
.pedestal-mid::before  { background-image: url("images/sections/pedestal-mid.png"); }

/* Contact shadow, re-pinned to the surface height of each photograph. */
.pedestal::after { top: auto; }
.pedestal-low::after  { top: 11.0%; }
.pedestal-tall::after { top: 7.4%; }
.pedestal-mid::after  { top: 8.6%; }

/* Gemstones, likewise pinned to the photographed surface. */
.pedestal-low  .gem-3d-canvas { bottom: 89.0%; transform: translate(-50%, 34px); }
.pedestal-tall .gem-3d-canvas { bottom: 92.6%; transform: translate(-50%, 38px); }
.pedestal-mid  .gem-3d-canvas { bottom: 91.4%; transform: translate(-50%, 36px); }

@media (max-width: 1100px) {
  .pedestal-low  .gem-3d-canvas { transform: translate(-50%, 24px); }
  .pedestal-tall .gem-3d-canvas { transform: translate(-50%, 27px); }
  .pedestal-mid  .gem-3d-canvas { transform: translate(-50%, 25px); }
}

/* ====================================================================== */
/* PHOTOGRAPHED GEMSTONES ON THE PEDESTALS                                */
/*                                                                        */
/* The stones are now cut-outs from the same photograph as the pedestals, */
/* so they share its lighting, grain and depth of field — which is why    */
/* they sit convincingly on the plinths where the WebGL versions read as  */
/* pasted-on graphics.                                                    */
/*                                                                        */
/* Sizing is a percentage of the pedestal height, taken from the original */
/* photograph (ruby 45%, sapphire 30%, emerald 43% of their plinth), so   */
/* the proportions survive at any screen width. Each stone's base is      */
/* pinned to its plinth's top surface, at the same percentages used for   */
/* the contact shadow.                                                    */
/* ====================================================================== */
.pedestal-gem {
  position: absolute;
  left: 50%;
  width: auto;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, 0);
  filter: drop-shadow(0 6px 7px rgba(60, 44, 28, 0.3));
  animation: pedestalGemFloat 6.5s ease-in-out infinite;
}
/* Heights recomputed for the re-cut stones. Each file is now trimmed to
   the stone itself, so the CSS height is the intended stone height (42.2%,
   23.5%, 40.4% of its plinth, measured from the original artwork) divided
   by how much of the file the stone fills (~96%). */
.pedestal-low  .pedestal-gem { height: 44.2%; bottom: 89.0%; }
.pedestal-tall .pedestal-gem { height: 24.5%; bottom: 92.6%; }
.pedestal-mid  .pedestal-gem { height: 41.8%; bottom: 91.4%; }

/* The contact shadow breathes with the stone: tight and dark when it
   settles, spread and faint at the top of the drift. Delays match each
   stone so shadow and gem stay in step. */
.pedestal::after { opacity: 0.42; filter: blur(2px); transform: translate(-50%, -50%) scale(0.86); }

/* Floating stone in the Origin section, same treatment. */
.floating-gem-photo {
  display: block;
  width: min(40vw, 430px);
  height: auto;
  filter: drop-shadow(0 26px 26px rgba(46, 34, 22, 0.3));
  animation: hoverGem 7s ease-in-out infinite;
}

@media (max-width: 1100px) {
  .floating-gem-photo { width: 270px; }
  }

/* Respect a reduced-motion preference: the stones settle and stay put. */
@media (prefers-reduced-motion: reduce) {
  .pedestal-gem, .pedestal::after, .floating-gem-photo { animation: none; }
}

/* The scroll cue sat centred at the foot of the hero, which put it on top
   of the middle plinth now that the plinths are photographs — the circle
   and rule read as marks on the stone. Moving it below the pedestal row
   and darkening it (it was white, on a pale marble ledge) restores the
   comp, where the cue sits on the floor in front of the display. */
.hero .center-scroll {
  bottom: 14px;
  z-index: 4;
  color: rgba(38, 29, 20, 0.62);
}
.hero .center-scroll span { border-color: rgba(38, 29, 20, 0.45); }
.hero .center-scroll i { background: rgba(38, 29, 20, 0.32); height: 30px; }

/* ====================================================================== */
/* GROUNDING THE PEDESTALS IN THE SCENE                                   */
/*                                                                        */
/* Cut-outs read as stickers until three things are present: a shadow     */
/* cast onto the floor, darkening where the object meets that floor, and  */
/* a colour temperature that matches the surroundings. The latter two are */
/* baked into the PNGs (the pedestals were colour-shifted 45% toward the  */
/* measured marble tone, and their bases darkened). This is the first:    */
/* the shadow the pedestal throws across the marble ledge.                */
/*                                                                        */
/* Width follows the pedestal's own rendered width. Because the image is  */
/* scaled by height (auto 100%), that width equals the box height times   */
/* the photo's aspect ratio — 0.879, 0.584 and 0.665 respectively — so    */
/* the shadow is derived from the same number and can never drift out of  */
/* proportion at another screen size.                                     */
/* ====================================================================== */
.pedestal { --ped-h: 270px; }
.pedestal-low  { --ped-h: 270px; --ped-ar: 0.879; }
.pedestal-tall { --ped-h: 430px; --ped-ar: 0.584; }
.pedestal-mid  { --ped-h: 350px; --ped-ar: 0.665; }

.pedestal-ground {
  position: absolute;
  left: 50%;
  bottom: -2%;
  z-index: 0;
  width: calc(var(--ped-h) * var(--ped-ar) * 1.55);
  height: calc(var(--ped-h) * var(--ped-ar) * 0.3);
  /* Offset right and slightly forward: the backdrop is lit from the upper
     left, so everything in the scene throws its shadow this way. */
  transform: translate(-44%, 0);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 42% 34%,
      rgba(78, 60, 42, 0.46) 0%,
      rgba(78, 60, 42, 0.26) 34%,
      rgba(78, 60, 42, 0.10) 58%,
      rgba(78, 60, 42, 0) 76%);
  filter: blur(7px);
  pointer-events: none;
}

/* A tight, dark contact shadow immediately under the base — the small
   hard core that sits directly beneath any object resting on a surface. */
.pedestal-ground::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 66%;
  height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(62, 46, 30, 0.5) 0%, rgba(62, 46, 30, 0.18) 52%, rgba(62, 46, 30, 0) 78%);
  filter: blur(4px);
}

/* The silhouette shadow on the pedestal photo itself can now be lighter:
   the floor shadow does the grounding, so this only needs to lift the form
   a little off the backdrop. Too much of it is what made them look stuck on. */
.pedestal::before {
  /* z-index 1 keeps the pedestal photo above its floor shadow (0); the gem
     and its contact shadow sit above that again. */
  z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(74, 56, 36, 0.16));
}

@media (max-width: 1100px) {
  .pedestal, .pedestal-low, .pedestal-tall, .pedestal-mid { --ped-h: 230px; }
}

/* ====================================================================== */
/* HERO — GEOMETRY TAKEN FROM THE CLIENT'S COMP                           */
/*                                                                        */
/* Every number below was measured off the client's reference image by    */
/* locating each cut-out (pedestal-low/tall/mid, gem-ruby/sapphire/       */
/* emerald) inside it. In that image the tall plinth is 638px high, and   */
/* every other dimension is expressed as a ratio of that one number:      */
/*                                                                        */
/*   plinth      width×height (÷638)   left (÷638)   base, above lowest   */
/*   low         0.5737 × 0.6521       0.0000        0.0000              */
/*   tall        0.5831 × 1.0000       0.5470        0.0329              */
/*   mid         0.5596 × 0.8417       1.1755        0.0235              */
/*                                                                        */
/* Two things about that table are easy to miss and both matter:          */
/*                                                                        */
/* 1. The spacing is NOT even. Centre-to-centre is 0.552 of the tall      */
/*    plinth on the left pair and 0.617 on the right pair, and the low    */
/*    plinth actually overlaps the tall one slightly. The old grid put    */
/*    all three at equal, much wider intervals — that was the single      */
/*    biggest difference from the comp.                                   */
/* 2. The bases do NOT line up. The low plinth sits lowest and the tall   */
/*    one highest, which is what reads as depth: nearer objects fall      */
/*    lower in frame. `align-items: end` had flattened all three onto     */
/*    one line, and with them the perspective.                            */
/*                                                                        */
/* Everything derives from --tall-h, so the composition holds its         */
/* proportions at any width. To make the scene bigger or smaller, change  */
/* that one value and nothing else.                                       */
/* ====================================================================== */

.hero {
  /* The scene has to be readable as one composition, and it was not: at
     1440x900 the hero measured 1362.6px, putting 462.6px (34%) below the fold
     and leaving only 24.6% of the plinth stage on screen. A visitor's first
     two seconds were headline plus the tops of three stones with nothing
     holding them up.

     The vh cap is what fixes it, so it is the tightest of the three. At 900px
     tall it resolves to 324px, which with the copy block, the stone's overhang
     and the padding lands the whole scene inside one viewport. The px and vw
     caps only take over on tall or narrow screens, where they scale the scene
     uniformly and the proportions survive. */
  --tall-h: min(520px, 38vw, 36vh);
  /* Scales with viewport height for the same reason. */
  padding-top: clamp(64px, 8vh, 96px);
}

.pedestal-stage {
  display: block;
  position: relative;
  width: calc(var(--tall-h) * 1.7351);
  height: calc(var(--tall-h) * 1.0329);
  gap: 0;
  /* The sapphire overhangs the top of the stage box by 0.1975 × the tall
     plinth height (it is 25.24% high and only 5.49% of it is below the lid).
     The stage's own box does not account for that, so the gap above it has
     to, or the stone climbs into the Explore Our Collection button — which
     is exactly what it was doing. That term has to stay; it is the overhang,
     not padding. The gap sitting on top of it was a separate 72px at desktop,
     and that was pure dead air in a hero that already did not fit. */
  margin: calc(var(--tall-h) * 0.1975 + clamp(28px, 3.4vw, 44px)) auto 0;
}

.pedestal {
  position: absolute;
  border-radius: 0;
}
.pedestal-low {
  left: 0;
  width: calc(var(--tall-h) * 0.5737);
  height: calc(var(--tall-h) * 0.6521);
  bottom: 0;
  z-index: 3;
}
.pedestal-tall {
  left: calc(var(--tall-h) * 0.5470);
  width: calc(var(--tall-h) * 0.5831);
  height: var(--tall-h);
  bottom: calc(var(--tall-h) * 0.0329);
  z-index: 1;
}
.pedestal-mid {
  left: calc(var(--tall-h) * 1.1755);
  width: calc(var(--tall-h) * 0.5596);
  height: calc(var(--tall-h) * 0.8417);
  bottom: calc(var(--tall-h) * 0.0235);
  z-index: 2;
}

/* The box now has exactly the photograph's aspect ratio, so the cut-out
   can fill it edge to edge with no stretching. */
.pedestal::before {
  background-size: 100% 100%;
  background-position: center;
}

/* --- Stones ----------------------------------------------------------- */
/* Height as a percentage of its own plinth, and horizontal centre, both
   measured from the comp. The ruby is offset 6% to the right of its plinth
   and the sapphire 2% to the left — they are not centred, and centring
   them is what made the row look mechanical. */
/* Sizes and offsets recomputed against the rebuilt plinth artwork: each file
   is now trimmed to the lid's crown, so a stone's resting height is its own
   height in the master photograph over the plinth's, and `bottom` puts its
   base on the centre of the lid ellipse — where it actually contacts in the
   reference. The stones are not centred on their plinths there and centring
   them is what made the row look mechanical. */
.pedestal-low  .pedestal-gem { height: 44.05%; bottom: 89.52%; left: 54.95%; }
.pedestal-tall .pedestal-gem { height: 26.65%; bottom: 87.30%; left: 46.79%; }
.pedestal-mid  .pedestal-gem { height: 41.74%; bottom: 90.34%; left: 50.21%; }

/* --- Contact shadow --------------------------------------------------- */
/* Pinned to where each stone actually meets the lid, matching the same
   left/bottom the stone itself rests at (see .pedestal-gem below), now
   that all three plinths are clean cut-outs with no baked-in shadow. */
.pedestal::after { top: auto; }
/* Pinned to each stone's own contact point — the same mapped master-photo
   base the stone itself is placed from — so shadow and stone cannot drift
   apart. Each shadow is flattened by its lid's perspective: the tall plinth
   is seen almost edge-on, so its ellipse is much shallower than the low
   plinth's, and a shadow that ignored that would read as standing up. */
/* Pinned to each stone's own contact point — the same mapped master-photo base
   the stone itself is placed from — so shadow and stone cannot drift apart.
   Each is flattened by its lid's perspective: the tall plinth is seen almost
   edge-on, so its ellipse is far shallower than the low plinth's.

   These are deliberately faint. The plinth artwork keeps the real contact
   shadow from the photograph, which already grounds each stone; this layer
   exists to give that shadow something that reacts to the float, so stacking
   it at full strength would only double the darkness at rest. */
.pedestal-low::after {
  top: 9.24%;
  left: 54.95%;
  width: 44%;
  height: 6.4%;
  opacity: 0.18;
}
.pedestal-mid::after {
  top: 8.4%;
  left: 50.21%;
  width: 42%;
  height: 5.0%;
  opacity: 0.16;
}
.pedestal-tall::after {
  top: 11.96%;
  left: 46.79%;
  width: 44%;
  height: 4.0%;
  opacity: 0.17;
}

/* --- Float -------------------------------------------------------------- */
/* The drift promised above: each stone lifts a few pixels off the plinth
   and settles back down, on a negative animation-delay per stone so the
   three don't move in unison. The contact shadow breathes in step —
   tighter and darker when the stone settles, softer and fainter at the
   top of the lift — using each pedestal's own resting opacity so the
   breathing reads as a variation, not a flat override. */
@keyframes pedestalGemFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}
@keyframes pedestalShadowBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.88); opacity: var(--shadow-opacity-rest); }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: var(--shadow-opacity-peak); }
}
.pedestal-low  .pedestal-gem { animation-delay: 0s; }
.pedestal-mid  .pedestal-gem { animation-delay: -2.2s; }
.pedestal-tall .pedestal-gem { animation-delay: -4.3s; }
/* Rest/peak are kept in step with the faint base opacities above: the stone
   settling tightens and darkens its shadow, lifting spreads and fades it. */
.pedestal-low::after {
  --shadow-opacity-rest: 0.18;
  --shadow-opacity-peak: 0.10;
  animation: pedestalShadowBreathe 6.5s ease-in-out infinite;
  animation-delay: 0s;
}
.pedestal-mid::after {
  --shadow-opacity-rest: 0.16;
  --shadow-opacity-peak: 0.09;
  animation: pedestalShadowBreathe 6.5s ease-in-out infinite;
  animation-delay: -2.2s;
}
.pedestal-tall::after {
  --shadow-opacity-rest: 0.17;
  --shadow-opacity-peak: 0.09;
  animation: pedestalShadowBreathe 6.5s ease-in-out infinite;
  animation-delay: -4.3s;
}

/* Floor shadow now sizes off the plinth's own width instead of the old
   --ped-h × --ped-ar pair, which assumed the box was wider than the photo. */
.pedestal-ground {
  width: 155%;
  height: auto;
  aspect-ratio: 5.17;
  bottom: -2%;
  transform: translate(-44%, 0);
}

/* --- Scroll cue ------------------------------------------------------- */
/* In the comp this sits ON the tall plinth, centred on it rather than on
   the section, with the ring about 80% of the way down and the wordmark
   just below the base. It had been moved down onto the floor earlier to
   stop it clashing with the plinth; the comp shows the clash is intended. */
.hero .center-scroll {
  left: calc(50% - var(--tall-h) * 0.029);
  bottom: calc(var(--tall-h) * 0.011);
  z-index: 6;
  gap: calc(var(--tall-h) * 0.012);
  font-size: calc(var(--tall-h) * 0.022);
  color: rgba(48, 37, 26, 0.66);
}
.hero .center-scroll span {
  width: calc(var(--tall-h) * 0.0157);
  height: calc(var(--tall-h) * 0.0157);
  border-color: rgba(48, 37, 26, 0.5);
}
.hero .center-scroll i {
  width: 1px;
  height: calc(var(--tall-h) * 0.1896 - 36px);
  background: rgba(48, 37, 26, 0.34);
}

/* --- Narrow screens --------------------------------------------------- */
/* The comp's proportions are kept rather than falling back to three even
   columns; only the scale changes. */
@media (max-width: 1100px) {
  .hero { --tall-h: min(430px, 47vw); }
  .pedestal-stage { gap: 0; margin-top: clamp(50px, 8vw, 90px); }
}
@media (max-width: 760px) {
  .hero { --tall-h: 52vw; }
  .pedestal-stage {
    display: block;
    grid-template-columns: none;
    width: calc(var(--tall-h) * 1.7351);
    margin: 44px auto 0;
  }
  .pedestal-low  { height: calc(var(--tall-h) * 0.6521); }
  .pedestal-tall { height: var(--tall-h); }
  .pedestal-mid  { height: calc(var(--tall-h) * 0.8417); }
}

/* ====================================================================== */
/* HERO AS A SINGLE SCENE PLATE — switched off, not deleted.              */
/*                                                                        */
/* This flattened the whole display (fabric, plinths, stones, floor,     */
/* scroll cues) into one baked image so nothing needed keying. The       */
/* trade-off documented at the time was explicit: the stones could no    */
/* longer move independently. That trade-off is exactly what the floating */
/* / bouncing gem request needs to undo, so this block is disabled again  */
/* in favour of the layered pedestal-stage system below (separate plinth  */
/* and gem cut-outs), which already carries its own float animation.      */
/* Re-enable by uncommenting this block and re-adding the display:none    */
/* overrides beneath it.                                                  */
/* ====================================================================== */
/*
.hero.fabric-panel {
  --scene-w: min(100vw, 1024px);

  background-image:
    url("images/sections/hero-scene.jpg"),
    url("images/sections/hero-backdrop.jpg"),
    linear-gradient(180deg, #d8cdbe, #eee7dd 74%, #d1c1ad);
  background-size: calc(var(--scene-w) * 2.3438) auto, cover, auto;
  background-position: bottom center, center bottom, center;
  background-repeat: no-repeat;
  padding-bottom: calc(var(--scene-w) * 0.7832 + clamp(48px, 5.5vw, 96px));
  padding-top: clamp(90px, 9vw, 150px);
  min-height: 100vh;
}

.pedestal-stage { display: none; }

.hero .center-scroll,
.hero .side-scroll { display: none; }
*/

/* ====================================================================== */
/* HERO ART DIRECTION                                                     */
/*                                                                        */
/* Scoped to the hero on purpose. The display-type rules these override   */
/* are global (h1, h2 across every page), and the brief was the hero, so  */
/* widening the blast radius to every heading on the site would be a      */
/* change nobody asked for.                                               */
/* ====================================================================== */

/* Uppercase needs positive tracking; the global rule sets 0.012em, which at
   90px read as jammed-together capitals. Luxury display uppercase sits around
   0.04-0.08em. Weight goes back to regular for the same reason: Cormorant's
   Light hairlines at display size thin out to nothing on non-retina screens.
   The size drop is what buys the fold back — two lines at 90px cost 187px of
   a hero that was already 462px too tall. */
.hero h1 {
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: 0.045em;
  line-height: 1.06;
}

/* Eyebrow, headline and lead were all rgb(23,19,15) — three elements at
   identical weight in the colour hierarchy, so nothing led. Stepping the
   supporting type back lets the headline own the composition. Both stay well
   clear of contrast minimums: 0.62 gives 4.9:1 and 0.74 gives 6.2:1 on the
   measured backdrop (#B9AA9B), against a 4.5:1 floor. */
.hero-copy .eyebrow {
  color: rgba(23, 19, 15, 0.62);
  margin-bottom: 24px;
}
.hero-copy .lead {
  color: rgba(23, 19, 15, 0.74);
  font-size: 17px;
  line-height: 1.55;
  margin: 26px 0 30px;
}

/* ====================================================================== */
/* GEM-HERO — homepage hero, rebuilt as a self-contained component.        */
/*                                                                        */
/* Namespaced under .gem-hero so it shares nothing with the legacy        */
/* .hero / .pedestal-* rules above, which other pages (policy pages,      */
/* the gemstones listing) still depend on. Every dimension that matters   */
/* for the composition — pedestal height, the row's gap, the safety gap   */
/* above the stones — derives from one variable (--tall-h), so the three  */
/* plinths and the stones resting on them scale together at any viewport  */
/* from 320px to 4K without ever drifting apart.                          */
/* ====================================================================== */

.gem-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-block: clamp(128px, 10vh + 72px, 196px) clamp(28px, 4vh, 56px);
  padding-inline: 24px;
  /* Warm marble backdrop: a soft top-lit radial over a cream-to-champagne
     vertical gradient, so the scene reads as one lit room rather than a
     flat colour fill. */
  background:
    radial-gradient(1200px 600px at 50% 23%, rgba(255, 255, 255, 0.43), transparent 58%),
    linear-gradient(109deg, transparent 6%, rgba(255, 255, 255, 0.24) 12%, transparent 21%),
    linear-gradient(78deg, transparent 57%, rgba(255, 255, 255, 0.36) 66%, transparent 76%),
    radial-gradient(800px 900px at 83% 55%, rgba(129, 112, 92, 0.28), transparent 68%),
    linear-gradient(180deg, #d8cdbe, #eee7dd 74%, #d1c1ad);
}
@media (min-width: 768px) {
  .gem-hero { padding-inline: 48px; }
}
@media (min-width: 1024px) {
  .gem-hero { padding-inline: 80px; }
}

/* Diagonal light beams drifting across the backdrop, oversized past the
   section edges so the repeating pattern never shows a hard seam. Sits
   behind .gem-hero__inner (z-index: 1) without needing its own z-index. */
.gem-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(100deg, transparent 0 80px, rgba(255, 255, 255, 0.12) 82px 91px, transparent 102px 186px),
    radial-gradient(900px 500px at 18% 75%, rgba(75, 60, 45, 0.18), transparent 70%);
  filter: blur(7px);
  opacity: 0.8;
  pointer-events: none;
}

.gem-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  /* Centers the copy+display group as a unit within the section's
     available height, so any slack (tall/narrow viewports, where the
     content is shorter than 100svh) splits evenly above and below the
     composition instead of collecting as one gap between the CTA and the
     stones — which is what happened while .gem-hero__display carried its
     own flex:1 and bottom-aligned the pedestals inside it. */
  justify-content: center;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

/* --- Copy --------------------------------------------------------------- */
.gem-hero__copy {
  max-width: 46rem;
  text-align: center;
}
.gem-hero__eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--sans);
  font-size: clamp(0.68rem, 0.5vw + 0.56rem, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(23, 19, 15, 0.62);
}
.gem-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.05rem + 4.6vw, 6rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.gem-hero__lead {
  margin: clamp(18px, 2.6vw, 30px) 0 0;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.2rem);
  line-height: 1.6;
  color: rgba(23, 19, 15, 0.74);
}
.gem-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(26px, 3vw, 40px);
  min-height: clamp(48px, 2.4vw + 38px, 60px);
  padding-inline: clamp(24px, 2.6vw, 42px);
  border: 1px solid rgba(23, 19, 15, 0.54);
  background: rgba(245, 239, 230, 0.1);
  font-family: var(--sans);
  font-size: clamp(0.7rem, 0.12vw + 0.66rem, 0.8125rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.55s ease, background 0.55s ease, border-color 0.55s ease;
}
.gem-hero__cta:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(23, 19, 15, 0.9);
}

/* --- Display: pedestals + stones ---------------------------------------- */
.gem-hero__display {
  --tall-h: clamp(128px, 30vw, 460px);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  /* Derived from --tall-h rather than a fixed clamp of its own, so the gap
     above the stones always outpaces the stones' own overhang (worst case
     ~32% of tall-h on the mid plinth — see .gem-hero__gem below) at every
     viewport, which is what keeps them off the copy block above without a
     breakpoint-specific fudge. */
  margin-top: calc(var(--tall-h) * 0.55);
}

.gem-hero__scroll-side {
  position: absolute;
  left: 0;
  top: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  padding: 6px;
  font-size: clamp(10px, 0.5vw + 8px, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(23, 19, 15, 0.5);
  transition: color 0.35s ease;
}
.gem-hero__scroll-side:hover,
.gem-hero__scroll-side:focus-visible {
  color: rgba(23, 19, 15, 0.85);
}
.gem-hero__scroll-side i {
  position: relative;
  width: 1px;
  height: clamp(90px, 14vw, 170px);
  background: rgba(23, 19, 15, 0.38);
  animation: gemHeroScrollDrift 2.6s ease-in-out infinite;
}
.gem-hero__scroll-side i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(23, 19, 15, 0.5);
  border-bottom: 1px solid rgba(23, 19, 15, 0.5);
  transform: translateX(-50%) rotate(45deg);
}

/* Real marble, not a gradient standing in for it: cropped from the
   project's own original scene photo (hero-scene.jpg) — the same shoot
   the pedestal and gem cutouts came from — so the stone grain and light
   match the rest of the composition exactly. The mask feathers its own
   top edge to transparent so it blends into the backdrop above it
   instead of showing as a hard rectangle.

   Sized against .gem-hero itself (it's a direct child of the section,
   not of .gem-hero__display) and anchored to the section's own bottom
   edge, so it always reaches the true floor of the hero — including the
   section's own bottom padding — rather than stopping at the bottom of
   the display box above whatever slack .gem-hero__inner's centring
   leaves beneath it. 38% comfortably reaches above the pedestals' bases
   at every breakpoint tested (320–2560px). */
.gem-hero__floor {
  position: absolute;
  z-index: 0;
  inset: auto 0 0 0;
  height: 38%;
  background-image: url("images/sections/hero-floor-marble.jpg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 30%, black 52%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 30%, black 52%);
  pointer-events: none;
}

.gem-hero__pedestals {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 5vw, 64px);
}

.gem-hero__pedestal {
  position: relative;
  flex: 0 0 auto;
  width: auto;
}
.gem-hero__pedestal--low {
  height: calc(var(--tall-h) * 0.7013);
  aspect-ratio: 495 / 563;
}
.gem-hero__pedestal--tall {
  height: var(--tall-h);
  aspect-ratio: 468 / 803;
}
.gem-hero__pedestal--mid {
  height: calc(var(--tall-h) * 0.8892);
  aspect-ratio: 475 / 714;
}
.gem-hero__pedestal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.gem-hero__pedestal--low::before { background-image: url("images/sections/pedestal-low.png"); }
.gem-hero__pedestal--tall::before { background-image: url("images/sections/pedestal-tall.png"); }
.gem-hero__pedestal--mid::before { background-image: url("images/sections/pedestal-mid.png"); }

.gem-hero__ground {
  /* Was bottom:-4%/height:20%, which put the ellipse's top 16% of the way
     up the pedestal's own box — painting over the plinth's lower third
     instead of the floor beneath it, which is what read as "too dark".
     z-index:-1 (inside .gem-hero__pedestal's own stacking context, from
     its position:relative) plus keeping the whole ellipse at/below the
     pedestal's bottom edge (bottom + height <= 0) now guarantees it can
     never paint on top of the plinth photo again.

     Sized off --tall-h (inherited from .gem-hero__display) rather than
     each pedestal's own height: all three plinths stand on the same
     floor under the same light, so their contact shadows should be the
     same size regardless of how tall the plinth itself is. Percentage-
     of-own-height was giving the short "low" plinth a barely-there
     shadow and the tall one an oversized one. Darker and wider than
     before, with a two-stop fade, so it reads as a real contact shadow
     melting into the marble instead of a faint smudge. */
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--tall-h) * -0.11);
  width: 210%;
  height: calc(var(--tall-h) * 0.11);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(32, 24, 15, 0.48), rgba(32, 24, 15, 0.2) 45%, transparent 78%);
  filter: blur(6px);
}

/* Each stone: an independent, absolutely-positioned element sized and
   placed as a percentage of its own plinth (never a fixed pixel value),
   so it scales exactly in step with --tall-h. Percentages are calibrated
   to where each plinth's photographed lid actually sits, which is why
   they differ per stone rather than sharing one value. overflow is never
   clipped on any ancestor in this chain, so the crown is never cropped.

   The shadow is offset right instead of straight down: the backdrop's
   own highlight (.gem-hero's radial-gradient at 50% 23%) and light beams
   both read as coming from the upper-left, so a shadow falling straight
   down made each stone look lit independently of the scene behind it. */
.gem-hero__gem {
  /* Positioning and the float animation live here; filter lives on the
     inner .gem-hero__gem-img instead (see below) — this element itself
     is never filtered, only translated. Combining a `filter` with an
     animated transform on the SAME element is what caused the pixelated
     "laggy" look reported on the contact shadow (filter forces the
     element onto a rasterized bitmap; animating it then either stretches
     that bitmap or gets re-rasterized at reduced quality every frame).
     The gem's own drop-shadow was on exactly that kind of element —
     filtered AND animated via gemHeroFloat's translate — so it was
     doing the same thing, just less obviously since translate doesn't
     stretch. Splitting it the same way removes the last of it: this
     wrapper only ever translates, so the browser can composite it by
     just repositioning a layer, no re-rasterizing required. Needs its
     own aspect-ratio now that it's a plain span rather than an <img>,
     so width:auto still derives correctly from the height percentage. */
  position: absolute;
  left: 50%;
  width: auto;
  animation: gemHeroFloat 6.5s ease-in-out infinite;
}
.gem-hero__gem--ruby {
  height: 44.05%;
  bottom: 89.52%;
  aspect-ratio: 240 / 248;
  transform: translateX(-54.95%);
  animation-delay: 0s;
}
.gem-hero__gem--sapphire {
  /* Sized up from the plinth's raw lid-to-crown ratio (26.65%): at that
     literal scale the asscher cut — flatter and more compact than the
     cushion or pear — read as the smallest stone in the row even though
     it sits on the tallest, structurally dominant centre plinth. Bottom
     stays anchored to the same resting point, so it grows upward from
     where it actually contacts the lid rather than sinking into it. */
  height: 35%;
  bottom: 87.3%;
  aspect-ratio: 238 / 214;
  transform: translateX(-46.79%);
  animation-delay: -4.3s;
}
.gem-hero__gem--emerald {
  height: 41.74%;
  bottom: 90.34%;
  aspect-ratio: 220 / 298;
  transform: translateX(-50.21%);
  animation-delay: -2.2s;
}

.gem-hero__gem-img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(9px 18px 16px rgba(39, 25, 14, 0.32));
}

@keyframes gemHeroFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6%; }
}

/* --- Contact shadow ------------------------------------------------------
   The drop-shadow on .gem-hero__gem is soft and offset — good for ambient
   light, useless for weight. Without a second, tight, dark mark exactly
   at the point where each stone meets the lid, the stones read as
   hovering rather than resting. Inserted before its .gem-hero__gem in the
   DOM (see markup) so it paints underneath the stone, not over it.

   The static shadow looked disconnected from the gem the moment the
   float animation lifted it — the mark just sat there while the stone
   drifted away from it. Animating opacity/scale on the same 6.5s timing
   and the same per-stone animation-delay as .gem-hero__gem's own
   gemHeroFloat keeps them phase-locked: the shadow tightens and darkens
   exactly as its stone settles, and softens and spreads exactly as it
   lifts — using the standalone `scale` property (not `transform`) so it
   layers on top of each variant's own translateX centering below
   instead of overwriting it. */
.gem-hero__contact {
  /* Widening AND tallening it to fix visibility (previous comment here)
     overcorrected: sampled the actual plinth photos pixel-by-pixel
     (sharp, vertical scanline down the lid) and the flat lid top only
     runs from roughly the gem's own contact line up to the crown — at
     11% tall starting a point below that line, the shadow's lower half
     was landing on the rim's underside and the fluted column below it,
     which is what read as smeared "over the pedestal" rather than
     resting on it, and an ellipse that tall put its own widest point
     level with the gem's sides instead of beneath it. Back to a flat,
     short ellipse anchored right at each gem's own bottom (see the
     matching bottom% on .gem-hero__gem below) — wide enough to read,
     shallow enough to stay on the lid.

     Positioning lives on THIS element only, and it never animates.
     `left` is set to each gem's own measured centre (as a % of the
     pedestal, derived from the gem's own width/offset — see the
     per-variant comments) with a plain translateX(-50%), instead of
     reusing the gem's left:50%/translateX(-X%) pair: that trick's
     percentage is relative to the element's OWN width, so the same X%
     centres two elements of different widths (a wide gem, a wider
     shadow) at two different points. That was worth ~1-2% of pedestal
     width on its own — real, but not what broke alignment visibly. */
  position: absolute;
  height: 6%;
  border-radius: 50%;
  transform: translateX(-50%);
}
.gem-hero__contact--ruby {
  /* gem centre = 47.60% of pedestal width (65.5/135.1 wide, offset by
     .gem-hero__gem--ruby's translateX(-54.95%)) */
  width: 46%;
  bottom: 89%;
  left: 47.6%;
}
.gem-hero__contact--sapphire {
  /* gem centre = 52.14% (85.3/127.7 wide, translateX(-46.79%)) */
  width: 42%;
  bottom: 86.8%;
  left: 52.14%;
}
.gem-hero__contact--emerald {
  /* gem centre = 49.90% (60.0/129.6 wide, translateX(-50.21%)) */
  width: 36%;
  bottom: 89.8%;
  left: 49.9%;
}

/* The pulse used to animate `scale` directly on .gem-hero__contact, right
   alongside its static transform:translateX(-50%) positioning. That was
   the actual misalignment bug: individual transform properties (scale)
   and the legacy `transform` property compose in a fixed order (translate
   -> rotate -> scale -> transform), so animating scale on an element that
   also carries a translateX-for-centring shifted its rendered centre by
   several pixels every frame — up to ~9px on the widest shadow, measured.
   Moving the animation to this inner element (position:absolute; inset:0
   — no transform of its own beyond the animated scale) means it scales
   around its own centre, which is fixed by its parent's layout and can
   never drift regardless of what the animation does. */
/* Dropping the blur here (previous comment above) traded one problem for
   another: without it, the gradient's outer edge is a hard mathematical
   boundary sitting right on the lid — no softening at all — which is what
   kept reading as a flaw in that exact spot no matter what the pedestal
   photo itself looked like. The real fix is to never animate `scale` on a
   filtered element in the first place, not to leave it unfiltered: blur
   is back, and the keyframes below only ever touch `opacity` now. Opacity
   is safe to animate alongside a filter — it's a pure compositing blend
   of an already-rasterized bitmap, nothing about the element's size or
   shape changes, so there's no bitmap-stretch step for the browser to do
   badly. */
.gem-hero__contact-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 10, 6, 0.6) 0%, rgba(15, 10, 6, 0.42) 32%, rgba(15, 10, 6, 0.16) 62%, transparent 85%);
  filter: blur(1.5px);
  animation: gemHeroContactPulse 6.5s ease-in-out infinite;
}
.gem-hero__contact--ruby .gem-hero__contact-pulse { animation-delay: 0s; }
.gem-hero__contact--sapphire .gem-hero__contact-pulse { animation-delay: -4.3s; }
.gem-hero__contact--emerald .gem-hero__contact-pulse { animation-delay: -2.2s; }

@keyframes gemHeroContactPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.gem-hero__scroll-center {
  position: absolute;
  left: 50%;
  bottom: clamp(-10px, -1.5vw, 4px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.8vw, 8px);
  padding: 6px;
  font-size: clamp(9px, 0.4vw + 7.5px, 11px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(23, 19, 15, 0.6);
  transition: color 0.35s ease;
}
.gem-hero__scroll-center:hover,
.gem-hero__scroll-center:focus-visible {
  color: rgba(23, 19, 15, 0.9);
}
.gem-hero__scroll-center span {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(23, 19, 15, 0.5);
  border-radius: 50%;
  animation: gemHeroRingPulse 2.6s ease-in-out infinite;
}
.gem-hero__scroll-center i {
  width: 1px;
  height: clamp(28px, 4vw, 44px);
  background: rgba(23, 19, 15, 0.4);
}
.gem-hero__scroll-center b { font-weight: 400; }

/* on-brand replacement for the browser's default focus ring, used
   anywhere in the hero a keyboard user can land. */
.gem-hero__cta:focus-visible,
.gem-hero__scroll-side:focus-visible,
.gem-hero__scroll-center:focus-visible {
  outline: 2px solid rgba(23, 19, 15, 0.75);
  outline-offset: 4px;
}

@keyframes gemHeroScrollDrift {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes gemHeroRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 640px) {
  .gem-hero__scroll-side { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gem-hero__gem,
  .gem-hero__contact-pulse,
  .gem-hero__scroll-side i,
  .gem-hero__scroll-center span {
    animation: none;
  }
}

/* ====================================================================== */
/* MAISON PASS — design tokens + shared chrome                            */
/*                                                                        */
/* Two parts, both purely additive.                                       */
/*                                                                        */
/* 1. A namespaced token set (--a-*). Namespaced on purpose: this file    */
/*    already defines --ink, --ivory, --line, --paper and every one of    */
/*    the 29 pages depends on those exact values. Reusing those names for */
/*    the new palette would have silently repainted the whole site, so    */
/*    the new system had to be able to sit alongside the old one. The     */
/*    homepage (home.css) uses only --a-*; everything else still reads    */
/*    the original tokens until it is migrated deliberately.              */
/*                                                                        */
/* 2. Header and footer moved onto those tokens site-wide (agreed scope). */
/*    Restricted to colour, type and hairlines — no layout, no geometry.  */
/*    The footer markup is NOT identical across pages (index has four     */
/*    columns, professional-login one, admin none), so a layout change    */
/*    would need verifying 21 times; colour and type cannot reflow.       */
/*                                                                        */
/* Previous values: _legacy/styles.pre-maison-20260812.css                */
/* ====================================================================== */

:root {
  /* --- Colour ---------------------------------------------------------
     Ink is never pure black — #1A1714 is a warm near-black that sits on
     ivory without the hard cutout look #000 gives. Gold is reserved for
     micro-detail only: hairlines, hover underlines, focus rings. It is
     never a fill. */
  --a-ivory: #faf8f4;
  --a-shell: #f2eee7;
  --a-marble: #e9e4db;
  --a-ink: #1a1714;
  --a-ink-soft: rgba(26, 23, 20, 0.66);
  /* 0.46 was the design intent and it measured 2.98:1 on ivory — the
     small-caps labels, the spec lines and the quote attributions all sit
     at 11px in this colour, so that was a real failure, not a rounding
     one. 0.62 is the first step of the 8-point alpha scale that clears
     4.5:1 (measured 4.51 at 0.595). */
  --a-ink-mute: rgba(26, 23, 20, 0.62);
  --a-gold: #b9975b;
  /* Gold is specified for hairlines and micro-detail, where no contrast
     minimum applies. As TEXT it measures 2.59:1 on ivory and fails, so
     type that happens to be gold — the section numbers — uses this
     darkened variant: the same hue scaled toward black until it clears
     4.5:1 against the DARKEST of the three light surfaces it can land on.
     Solving against ivory alone was not enough; the first attempt passed
     on ivory and still failed at 4.18:1 on --a-shell.
         on --a-marble 4.53:1   on --a-shell 4.96:1   on --a-ivory 5.40:1
     Hairlines keep the lighter --a-gold. */
  --a-gold-ink: #79633c;
  --a-gold-soft: rgba(185, 151, 91, 0.42);
  --a-hairline: rgba(26, 23, 20, 0.08);
  --a-hairline-strong: rgba(26, 23, 20, 0.16);
  /* The one colour in the set that is not part of the brand palette: a
     failed sign-in has to read as a failure, and gold does not say that.
     Not a new hue — #5d2e25 is the colour styles.css already uses for
     .auth-status-message, so nothing new enters the site. It measures
     9.86:1 on ivory, and it is never the only signal: the message itself
     says what went wrong. */
  --a-alert: #5d2e25;
  --a-alert-wash: rgba(93, 46, 37, 0.05);
  /* Its counterpart, on the same terms: #3f5644 is the green styles.css
     already uses for .account-status-message.is-success. 7.15:1 on ivory.
     Only ever used where a message also says in words what happened —
     colour is never the only carrier. */
  --a-ok: #3f5644;
  --a-ok-wash: rgba(63, 86, 68, 0.06);
  --a-night: #14110e;
  --a-night-ink: #efe9df;
  --a-night-mute: rgba(239, 233, 223, 0.62);
  --a-night-hairline: rgba(239, 233, 223, 0.14);
  /* Channel triplets, for the places that need the same colour at an
     arbitrary alpha — gradient scrims mainly, where a fixed rgba() token
     per stop would mean a token per stop. */
  --a-ivory-rgb: 250, 248, 244;
  --a-night-ink-rgb: 239, 233, 223;
  /* Two washes that are too faint to read as fills but too specific to
     re-derive at each use. */
  --a-gold-wash: rgba(185, 151, 91, 0.05);
  /* A wash you are actually meant to notice: it replaces the operating
     system's blue selection highlight in menus. --a-gold-wash at 0.05 is
     tuned to sit under a button border and is invisible as a highlight. */
  --a-gold-highlight: rgba(185, 151, 91, 0.16);
  --a-night-wash: rgba(239, 233, 223, 0.06);

  /* --- Space: one 8px scale, no values outside it ---------------------- */
  --a-s1: 8px;
  --a-s2: 16px;
  --a-s3: 24px;
  --a-s4: 32px;
  --a-s5: 40px;
  --a-s6: 56px;
  --a-s7: 72px;
  --a-s8: 96px;
  --a-s9: 120px;
  --a-s10: 160px;
  /* 72px floor on mobile, 144px ceiling on desktop — the brief's minimum
     of 120/72 with headroom, since space is the luxury signal here. */
  --a-section-y: clamp(72px, 9vw, 144px);
  --a-container: 1240px;
  --a-gutter: clamp(22px, 4vw, 64px);
  --a-measure: 62ch;

  /* --- Type ------------------------------------------------------------ */
  --a-display: clamp(40px, 6vw, 84px);
  --a-h2: clamp(32px, 4.2vw, 60px);
  --a-h3: clamp(19px, 1.3vw, 24px);
  --a-lead: clamp(17px, 0.6vw + 15px, 20px);
  --a-body: 16px;
  --a-small: 14px;
  --a-label: 11px;
  --a-lh-display: 1.15;
  --a-lh-body: 1.7;
  --a-ls-label: 0.18em;
  --a-w-display: 300;

  /* --- Form ------------------------------------------------------------ */
  --a-r0: 0px;
  --a-r1: 2px;

  /* --- Motion ---------------------------------------------------------- */
  --a-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --a-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --a-d-fast: 300ms;
  --a-d-mid: 600ms;
  --a-d-slow: 820ms;

  /* --- Elevation -------------------------------------------------------
     One shadow, and it is only ever allowed under a gemstone. UI elements
     get hairlines instead. */
  --a-shadow-gem: 0 30px 50px -20px rgba(40, 30, 18, 0.35);
}

/* Smooth scrolling is motion too, and the global rule near the top of this
   file had no guard on it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* A visible, on-brand focus ring everywhere a keyboard user can land.
   Applied globally rather than per-component: the previous state was the
   browser default, which disappears entirely against the dark portal and
   footer surfaces. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--a-gold);
  outline-offset: 3px;
}

/* --- Header ------------------------------------------------------------
   Colour and type only. The scrolled state's background and shadow are set
   as inline styles by setHeaderState() in script.js, so those two strings
   were updated there rather than fought with !important here. */
.site-header {
  background: linear-gradient(180deg, rgba(250, 248, 244, 0.92), rgba(250, 248, 244, 0));
  color: var(--a-ink);
}
.site-header .brand span {
  font-weight: 300;
  letter-spacing: 0.055em;
  color: var(--a-ink);
}
.site-header .brand small {
  font-size: var(--a-label);
  letter-spacing: 0.38em;
  color: var(--a-ink-mute);
}
.main-nav a {
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  color: var(--a-ink-soft);
  transition: color var(--a-d-fast) var(--a-ease-soft);
  /* A nav label is a name, not a paragraph: it breaks as a whole or not at
     all. Without this, adding "Custom Sourcing" on 15 August pushed the six
     items past the header's nav track and three of them wrapped mid-phrase —
     "Private Viewings" and "Trade Login" among them, which had fitted on one
     line for months. Measured at 1440: the six labels are 592px unwrapped and
     five gaps of 72px make 952px, and the track grows to take it. Below
     1100px the nav is display:none and the mobile panel carries it. */
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: var(--a-ink);
}
/* The gold hairline. The existing rule already grows it left-to-right on
   hover and retracts it to the right on leave (transform-origin flips
   between the base and :hover rules) — that behaviour is kept; only the
   colour and the timing change. */
.main-nav a::after,
.text-link::after {
  background: var(--a-gold);
  transition: transform var(--a-d-fast) var(--a-ease);
}
.auth-nav-link::before { background: var(--a-hairline-strong); }
.menu-button span { background: var(--a-ink); }

/* --- Footer ------------------------------------------------------------
   The three stacked gradients over #0d0b09 are replaced by one flat warm
   near-black, matched to --a-night so the footer and the homepage's dark
   band read as the same material rather than two different blacks. The
   single gold hairline across the top is the one place gold is allowed to
   run full width. */
.site-footer {
  border-top: 1px solid var(--a-gold-soft);
  color: var(--a-night-ink);
  background: var(--a-night);

  /* Only the column headings were too small — Navigation, Legal, Let's
     Connect. They ran on --a-label at 11px, the same step as an eyebrow in a
     light section, and reversed out of the near-black band they read smaller
     than they measure. They now have their own size, larger than the list
     beneath them, which is what a heading should be.

     The lists and the running text are back on 14px. They were briefly raised
     to 16 and then 18 while I had the wrong element; that made the columns
     shout over their own headings.

     All three are set here and not on the tokens: --a-small and --a-label are
     used across all 38 pages and moving them would resize the whole site.
     Colour is untouched, so contrast stays where it was measured — 14.95 for
     the links, 15.58 for everything muted. */
  --footer-heading: 15px;
  --footer-body: 14px;
  --footer-label: 11px;
}
.site-footer .brand.light span { color: var(--a-night-ink); font-weight: 300; }
.site-footer .brand.light small { color: var(--a-night-mute); }
.site-footer h3 {
  font-size: var(--footer-heading);
  font-weight: 500;
  letter-spacing: var(--a-ls-label);
  color: var(--a-night-mute);
}
.site-footer p,
.site-footer a {
  font-size: var(--footer-body);
  line-height: var(--a-lh-body);
  color: var(--a-night-mute);
}
.site-footer a { transition: color var(--a-d-fast) var(--a-ease-soft); }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--a-night-ink); }
.socials a {
  border-color: var(--a-night-hairline);
  font-size: var(--footer-label);
  letter-spacing: 0.06em;
  transition: border-color var(--a-d-fast) var(--a-ease-soft),
              color var(--a-d-fast) var(--a-ease-soft);
}
.socials a:hover { border-color: var(--a-gold); color: var(--a-night-ink); }
.newsletter label {
  border-bottom-color: var(--a-night-hairline);
  transition: border-color var(--a-d-fast) var(--a-ease-soft);
}
.newsletter label:focus-within { border-bottom-color: var(--a-gold); }
.newsletter span {
  font-size: var(--footer-label);
  letter-spacing: var(--a-ls-label);
  color: var(--a-night-mute);
}
.newsletter input,
.newsletter button { color: var(--a-night-ink); }
.newsletter input::placeholder { color: var(--a-night-mute); }
.copyright {
  font-size: var(--footer-label);
  letter-spacing: var(--a-ls-label);
  color: var(--a-night-mute);
}

/* Six labels need roughly 1145px of header to sit in one row. Below that the
   row pushes the third grid column out: measured at 1102, the hamburger sat
   at 1105-1140 against a client width of 1086, so it was off-screen and
   unreachable. The site-wide switch to the mobile panel is at 1100px and
   eleven other rules share that number, so it is left alone. Instead the nav
   and the panel's mirrored copy of it cross over 45px earlier, and they cross
   together — otherwise there would be a band with a hamburger and no main
   links behind it. */
@media (max-width: 1145px) {
  .main-nav { display: none; }
  .menu-panel-mirror { display: grid; }
}

/* --- Language switch (15 October) ---------------------------------------
   EN / NL, regenerated on every page by scripts/build-nl.cjs between its
   <!-- lang-switch --> markers. It lives in .header-tools with the hamburger
   (or, on the portal screens, with the account icon), which takes the grid
   slot that element had on its own. So the header grid keeps its columns,
   and the measured 1145px point where the nav gives way is unchanged.

   Above 1145px the nav fills the row, so the switch is lifted out of it into
   the header's top padding. Below that it is an ordinary flex item, always
   just left of the icon beside it, whichever column the icon has landed in.
   The tools box may be wider than its track; it is end-aligned, so the extra
   width falls to the left, into space the hidden nav left empty. min-width: 0
   keeps it from widening an fr track and pushing the page sideways.
   Each link is a 24px target (WCAG 2.2). */
.header-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.lang-switch {
  position: absolute;
  top: 10px;
  right: 56px;
  display: flex;
  align-items: center;
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  line-height: 1;
  white-space: nowrap;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0 0 10px;
  color: var(--a-ink-soft);
  transition: color var(--a-d-fast) var(--a-ease-soft);
}
.lang-switch a + a {
  margin-left: 10px;
  border-left: 1px solid var(--a-hairline-strong);
}
.lang-switch a:hover,
.lang-switch a:focus-visible { color: var(--a-ink); }
.lang-switch a[aria-current] {
  color: var(--a-ink);
  text-decoration: underline;
  text-decoration-color: var(--a-gold);
  text-underline-offset: 5px;
}
@media (max-width: 1145px) {
  .lang-switch { position: static; }
}
/* The three admin screens without a site header carry it in their top
   action row, where it is an ordinary flex item. */
.control-top-actions .lang-switch { position: static; margin-right: 8px; }

/* ======================================================================
   MOBILE PASS (23 October)
   ======================================================================
   Measured on every public page at 390 and 360 wide before going live:
   no page scrolled sideways but one, form fields were already 16px, and
   what remained was small type and small targets. Each rule names what it
   fixes. Targets go to at least 40px tall where a thumb is the pointer;
   desktop is untouched. */

/* The breadcrumb never wrapped, so a long Dutch stone name
   ("Perzikkleurig fantasieslijpsel") pushed a 360px page to 350+ wide. */
.hm-breadcrumb { flex-wrap: wrap; row-gap: 2px; }
.hm-breadcrumb b { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  /* The logo's line under the name was 9px. */
  .site-header .brand small,
  .site-footer .brand small { font-size: 10px; }

  /* Footer links were 24px tall, one under another: a thumb hits the
     neighbour. 40px each, same text size. */
  .site-footer a:not(.brand) {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  .site-footer .socials a { display: inline-flex; min-width: 40px; justify-content: center; }

  /* The menu panel is the only navigation on a phone, and its links were
     19px tall with no space between. 44px each, the size a thumb needs. */
  /* With 44px links the panel runs past a short screen, and it hangs from
     a fixed header so the page cannot scroll it into view. It scrolls on
     its own instead. */
  .mobile-menu-panel {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu-panel nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Breadcrumb links were 19px tall. Padding grows the target; the
     negative margin keeps the line where it was. */
  .hm-breadcrumb a,
  .legal-page .breadcrumb a { display: inline-block; padding-block: 11px; margin-block: -11px; }

  /* Password "Show" was 22px tall, right against the field. */
  .page-login .hm-password button { min-height: 40px; padding-inline: 8px 0; }

  /* The hero's scroll cue was 19px tall. */
  .hm-hero__scroll { padding-block: 11px; margin-bottom: -11px; }
}

/* The professional dashboard on a phone. Its content grid has one auto
   column, which grew to the widest child (1001px) inside a 313px box, so the
   whole dashboard scrolled sideways at 360. The column is held to the box;
   the cards inside then reflow. portal.css promises to move nothing, so the
   fix lives here with the other phone rules. */
@media (max-width: 760px) {
  .dashboard-content { grid-template-columns: minmax(0, 1fr); }
  .dashboard-content > * { min-width: 0; }
}

/* iPhone zooms the page into any field set below 16px when it is tapped,
   and leaves it zoomed. The collection filters are 11px capitals by design;
   on a touch screen they take 16px so the page stays where it is. A mouse
   keeps the original. */
@media (hover: none) and (pointer: coarse) {
  /* Attribute selectors: collection.css loads after this file with the
     same specificity, so the plain selector would lose. */
  .page-collection .hm-select select[data-filter],
  .page-collection .hm-select select[data-sort] {
    font-size: 16px;
    letter-spacing: 0.04em;
  }
}

/* ======================================================================
   TRADE LOGIN SWITCH (7 November)
   ======================================================================
   Trade accounts have no backend yet: an approved client could not sign in,
   and the only account is the demo one. Until there is, every link to the
   sign-in page is hidden — the nav item, the footer link, "Already have an
   account?". Applying still works (by email), and the pages themselves
   still exist.

   9 November: the portal exists now, so the switch is automatic. portal.js
   puts .portal-live on <html> as soon as supabase-config.js carries the
   project URL and key; until then the links stay hidden as before. */
html:not(.portal-live) a[href$="professional-login.html"] { display: none !important; }

/* KvK number in the footer (9 November) — a legal requirement for a Dutch
   business. Sits after the copyright line and never breaks inside itself. */
.copyright__kvk { white-space: nowrap; margin-left: 1.5em; }
@media (max-width: 760px) { .copyright__kvk { display: block; margin: 6px 0 0; } }


/* ======================================================================
   TRADE PORTAL (9 November) — portal.js on Supabase
   ====================================================================== */

/* Portal and admin pages stay blank until portal.js has confirmed the
   account (or sent the visitor to sign in). Visibility, not display, so
   the layout is in place the moment it shows. */
body[data-auth-state="approved_b2b"] main,
body[data-auth-state="admin"] main { visibility: hidden; }
html.portal-ready body[data-auth-state="approved_b2b"] main,
html.portal-ready body[data-auth-state="admin"] main { visibility: visible; }
.portal-fail { padding: var(--a-s9) var(--a-gutter); max-width: 40rem; }
.portal-fail h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: var(--a-h2); margin: 0 0 var(--a-s2); }

/* Parts of a form that only exist with the portal on (the password on the
   application form). */
html:not(.portal-live) [data-portal-only] { display: none !important; }

/* A fact row switched off with [hidden]: .hm-facts > div sets a display
   that would otherwise win over the attribute. */
.hm-facts > [hidden] { display: none !important; }

/* Status lines outside the sign-in pages (the review page's "confirmed"). */
.hm-alert[data-confirmed-note] {
  margin: 0 0 var(--a-s4);
  padding: var(--a-s2) 0 var(--a-s2) var(--a-s3);
  border-left: 1px solid var(--a-ok);
  background: var(--a-ok-wash);
  color: var(--a-ok);
  font-size: var(--a-small);
}
.hm-alert[data-confirmed-note][hidden] { display: none; }
/* The reset page's region is a confirmation by default; a failure there
   (rate limit, no connection) takes the alert colours. */
.page-login .hm-alert--ok.is-error {
  border-left-color: var(--a-alert);
  background: var(--a-alert-wash);
  color: var(--a-alert);
}

/* The trade price: on a card, a quiet line under the specification; on a
   stone's page, a line of its own above the actions. Hidden (empty) for
   everyone without an approved account. */
.trade-price[hidden] { display: none !important; }
.trade-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45em;
  margin: 6px 0 10px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--a-ink-soft);
}
.trade-price span { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.16em; color: var(--a-gold-ink); }
.trade-price b { font-weight: 600; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.trade-price small { font-size: 12px; color: var(--a-ink-mute); }
.trade-price--product {
  margin: var(--a-s3) 0 0;
  padding: var(--a-s2) 0;
  border-top: 1px solid var(--a-hairline);
  border-bottom: 1px solid var(--a-hairline);
  font-size: var(--a-body);
}
.trade-price--product span { font-size: var(--a-label); }
.trade-price--product b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; font-weight: 500; line-height: 1; }

/* ---- the real admin ---------------------------------------------------- */
.admin-live .admin-main { min-width: 0; }
.admin-live .admin-page-heading p { max-width: 62ch; }
.admin-notice {
  margin: 0 0 var(--a-s3);
  padding: 12px 16px;
  border-left: 2px solid var(--a-alert);
  background: var(--a-alert-wash);
  color: var(--a-alert);
  font-size: var(--a-small);
  line-height: 1.5;
}
.admin-notice.is-ok { border-left-color: var(--a-ok); background: var(--a-ok-wash); color: var(--a-ok); }
.admin-notice[hidden] { display: none; }

.admin-live__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--a-s2);
  margin: 0 0 var(--a-s3);
  border-bottom: 1px solid var(--a-hairline-strong);
}
.admin-live__tabs { display: flex; gap: var(--a-s3); }
.admin-live__tabs button {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: inherit;
  font-size: var(--a-small);
  letter-spacing: 0.04em;
  color: var(--a-ink-soft);
  cursor: pointer;
}
.admin-live__tabs button.is-active { color: var(--a-ink); border-bottom-color: var(--a-gold); }
.admin-live__tabs [data-count] { color: var(--a-gold-ink); margin-left: 4px; }
.admin-live__search { display: grid; gap: 4px; padding-bottom: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-ink-mute); }
.admin-live__search input {
  width: min(280px, 70vw);
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--a-hairline-strong);
  background: transparent;
  font: inherit;
  font-size: var(--a-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--a-ink);
}
.admin-live__search input:focus { outline: none; border-bottom-color: var(--a-gold); }
.admin-live__empty { color: var(--a-ink-mute); font-size: var(--a-small); }

.approval-list { display: grid; gap: var(--a-s2); }
.approval-card {
  padding: var(--a-s3);
  border: 1px solid var(--a-hairline-strong);
  background: rgba(var(--a-ivory-rgb), 0.7);
}
.approval-card__head { display: flex; justify-content: space-between; gap: var(--a-s2); flex-wrap: wrap; }
.approval-card__head h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.15; }
.approval-card__head p { margin: 4px 0 0; font-size: var(--a-small); color: var(--a-ink-soft); }
.approval-card__date { white-space: nowrap; }
.approval-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px var(--a-s3);
  margin: var(--a-s3) 0;
  padding: var(--a-s2) 0 0;
  border-top: 1px solid var(--a-hairline);
}
.approval-card__facts div { min-width: 0; }
.approval-card__facts dt { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-gold-ink); }
.approval-card__facts dd { margin: 3px 0 0; font-size: var(--a-small); overflow-wrap: anywhere; white-space: pre-line; }
.approval-card__facts dd a { color: inherit; }
.approval-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-s2) var(--a-s3); }
.approval-card__actions button:disabled { opacity: 0.5; cursor: progress; }
.approval-card__note { margin: 0; font-size: 13px; color: var(--a-ink-mute); }

.pricing-list { display: grid; border-top: 1px solid var(--a-hairline-strong); }
.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--a-s2);
  padding: 14px 0;
  border-bottom: 1px solid var(--a-hairline);
}
.pricing-row label { display: grid; gap: 2px; min-width: 0; }
.pricing-row label b { font-weight: 500; }
.pricing-row label small { font-size: 12.5px; color: var(--a-ink-mute); }
.pricing-row__field { display: flex; align-items: baseline; gap: 6px; flex: none; }
.pricing-row__field span { color: var(--a-ink-mute); }
.pricing-row__field input {
  width: 8.5em;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--a-hairline-strong);
  background: transparent;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--a-ink);
}
.pricing-row__field input:focus { outline: none; border-bottom-color: var(--a-gold); }
.pricing-row__field input[aria-invalid] { border-bottom-color: var(--a-alert); }
.pricing-form__actions { margin-top: var(--a-s4); }