:root {
  --cadx-ink: #11110f;
  --cadx-brown: #2d241c;
  --cadx-cream: #f4efe7;
  --cadx-ivory: #fbf9f5;
  --cadx-paper: #eee7dc;
  --cadx-gold: #b88a2b;
  --cadx-gold-bright: #d5b660;
  --cadx-line: rgba(43, 35, 27, 0.16);
  --cadx-serif: var(--display-serif, "Cormorant Garamond", Georgia, serif);
  --cadx-sans: var(--body-sans, "Montserrat", Arial, sans-serif);
  --cadx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* CAD sequence refinement and interactive gemstone guide */
.cadX-metal-controls [data-metal="silver"] i {
  background: linear-gradient(135deg, #747c83, #f8fafb 48%, #9aa2a8);
}

.cadX-anatomy-ledger {
  min-height: 0;
  grid-template-columns: minmax(340px, 0.7fr) minmax(560px, 1.15fr);
  align-items: start;
}

.cadX-detail-ledger {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(170px, 0.48fr) minmax(340px, 1fr);
  border-top: 1px solid rgba(213, 182, 96, 0.28);
  border-bottom: 1px solid rgba(213, 182, 96, 0.28);
}

.cadX-detail-tabs {
  display: grid;
  border-right: 1px solid rgba(213, 182, 96, 0.22);
}

.cadX-detail-tabs button {
  display: grid;
  min-height: 92px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid rgba(213, 182, 96, 0.17);
  color: rgba(248, 244, 237, 0.58);
  background: transparent;
  font: 400 23px/1 var(--cadx-serif);
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
}

.cadX-detail-tabs button:last-child {
  border-bottom: 0;
}

.cadX-detail-tabs button span {
  color: rgba(213, 182, 96, 0.56);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.12em;
}

.cadX-detail-tabs button:hover,
.cadX-detail-tabs button:focus-visible,
.cadX-detail-tabs button.is-active {
  color: #fff;
  background: rgba(213, 182, 96, 0.07);
}

.cadX-detail-tabs button.is-active span {
  color: var(--cadx-gold-bright);
}

.cadX-detail-answer {
  position: relative;
  display: flex;
  min-height: 368px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 52px clamp(32px, 5vw, 78px);
  overflow: hidden;
}

.cadX-detail-answer > span {
  position: absolute;
  top: 34px;
  right: 38px;
  color: rgba(213, 182, 96, 0.28);
  font: 400 clamp(70px, 8vw, 116px)/1 var(--cadx-serif);
}

.cadX-detail-answer h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font: 400 clamp(42px, 4.5vw, 68px)/0.95 var(--cadx-serif);
}

.cadX-detail-answer p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 20px 0 0;
  color: rgba(248, 244, 237, 0.62);
  font: 400 13px/1.72 var(--cadx-sans);
}

.cadX-detail-answer i {
  position: absolute;
  top: 0;
  left: 44%;
  width: 1px;
  height: 58%;
  background: rgba(213, 182, 96, 0.12);
  transform: rotate(36deg);
  transform-origin: top;
}

.gemX-hero {
  min-height: max(620px, 78dvh);
  grid-template-columns: minmax(0, 790px);
  justify-content: start;
}

.gemX-hero-copy > .cadX-text-link {
  display: inline-block;
  margin-top: 34px;
  color: #fff;
  border-bottom-color: rgba(213, 182, 96, 0.52);
}

.gemX-intro {
  grid-template-columns: minmax(180px, 0.3fr) minmax(430px, 0.92fr) minmax(320px, 0.58fr);
}

.gemX-builder {
  grid-template-columns: minmax(500px, 1fr) minmax(500px, 0.92fr);
}

.gemX-render-stage {
  position: relative;
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  background: #f2eee6;
}

.gemX-render-stage iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  background: #f2eee6;
}

.gemX-render-stage > p {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  margin: 0;
  color: rgba(17, 17, 15, 0.5);
  font: 800 9px/1.2 var(--cadx-sans);
  letter-spacing: 0.12em;
  pointer-events: none;
  text-transform: uppercase;
}

.gemX-select-label {
  display: block;
  margin-bottom: 10px;
  color: rgba(17, 17, 15, 0.54);
  font: 800 9px/1.2 var(--cadx-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gemX-select {
  width: 100%;
  min-height: 58px;
  padding: 0 46px 0 18px;
  border: 1px solid rgba(17, 17, 15, 0.18);
  border-radius: 0;
  color: var(--cadx-ink);
  background: #fff;
  font: 600 14px/1.2 var(--cadx-sans);
}

.gemX-control-note {
  margin: 16px 0 0;
  color: rgba(17, 17, 15, 0.5);
  font: 400 11px/1.62 var(--cadx-sans);
}

.gemX-cut-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--cadx-line);
  border-left: 1px solid var(--cadx-line);
}

.gemX-cut-list button {
  display: grid;
  min-height: 84px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid var(--cadx-line);
  border-bottom: 1px solid var(--cadx-line);
  color: rgba(17, 17, 15, 0.62);
  background: rgba(255, 255, 255, 0.35);
  font: 700 9px/1.35 var(--cadx-sans);
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.gemX-cut-list button:hover,
.gemX-cut-list button:focus-visible,
.gemX-cut-list button.is-active {
  color: #11110f;
  background: #fff;
}

.gemX-cut-list button.is-active {
  box-shadow: inset 0 0 0 1px var(--cadx-gold);
}

.gemX-cut-list button i {
  display: block;
  width: 24px;
  height: 30px;
  justify-self: center;
  border: 1px solid currentColor;
  background: linear-gradient(135deg, transparent 47%, rgba(184, 138, 43, 0.28) 49% 51%, transparent 53%);
}

.gemX-cut-list [data-guide-cut="round"] i { width: 27px; height: 27px; border-radius: 50%; }
.gemX-cut-list [data-guide-cut="oval"] i { width: 22px; border-radius: 50%; }
.gemX-cut-list [data-guide-cut="cushion"] i { width: 27px; height: 27px; border-radius: 8px; }
.gemX-cut-list [data-guide-cut="cushion-square"] i { width: 27px; height: 27px; border-radius: 5px; }
.gemX-cut-list [data-guide-cut="emerald"] i,
.gemX-cut-list [data-guide-cut="radiant"] i { clip-path: polygon(20% 0, 80% 0, 100% 16%, 100% 84%, 80% 100%, 20% 100%, 0 84%, 0 16%); }
.gemX-cut-list [data-guide-cut="emerald-square"] i,
.gemX-cut-list [data-guide-cut="radiant-square"] i,
.gemX-cut-list [data-guide-cut="octagonal"] i { width: 27px; height: 27px; clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%); }
.gemX-cut-list [data-guide-cut="princess"] i,
.gemX-cut-list [data-guide-cut="flanders"] i { width: 23px; height: 23px; transform: rotate(45deg); }
.gemX-cut-list [data-guide-cut="pear"] i { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(0.78); }
.gemX-cut-list [data-guide-cut="marquise"] i { width: 20px; border-radius: 90% 0 90% 0; transform: rotate(-45deg); }
.gemX-cut-list [data-guide-cut="half-moon"] i { width: 27px; border-radius: 100% 0 0 100%; }
.gemX-cut-list [data-guide-cut="trillion"] i,
.gemX-cut-list [data-guide-cut="trillion-straight"] i,
.gemX-cut-list [data-guide-cut="triangle"] i { width: 29px; height: 27px; border: 0; background: rgba(184, 138, 43, 0.24); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gemX-cut-list [data-guide-cut="heart"] i { width: 28px; height: 27px; border: 0; background: currentColor; clip-path: polygon(50% 100%, 4% 46%, 4% 22%, 18% 4%, 37% 4%, 50% 20%, 63% 4%, 82% 4%, 96% 22%, 96% 46%); opacity: 0.5; }
.gemX-cut-list [data-guide-cut="baguette"] i { width: 15px; height: 31px; }
.gemX-cut-list [data-guide-cut="tapered-baguette"] i { width: 21px; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.gemX-cut-list [data-guide-cut="calf"] i { width: 27px; clip-path: polygon(15% 0, 85% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.gemX-cut-list [data-guide-cut="coffin"] i { clip-path: polygon(24% 0, 76% 0, 100% 28%, 88% 100%, 12% 100%, 0 28%); }
.gemX-cut-list [data-guide-cut="hexagonal"] i { width: 27px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

.gemX-size-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gemX-size-list button {
  min-height: 70px;
  border: 1px solid var(--cadx-line);
  color: rgba(17, 17, 15, 0.6);
  background: transparent;
  font: 700 10px/1 var(--cadx-sans);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.gemX-size-list button span {
  margin-right: 3px;
  color: var(--cadx-ink);
  font: 400 27px/1 var(--cadx-serif);
}

.gemX-size-list button:hover,
.gemX-size-list button:focus-visible,
.gemX-size-list button.is-active {
  border-color: var(--cadx-gold);
  background: #fff;
}

.gemX-nature {
  position: relative;
  display: flex;
  min-height: clamp(620px, 64vw, 860px);
  align-items: center;
  padding: clamp(90px, 11vw, 160px) clamp(40px, 8vw, 128px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(10, 10, 9, 0.94) 0%, rgba(10, 10, 9, 0.82) 34%, rgba(10, 10, 9, 0.16) 68%, rgba(10, 10, 9, 0.04) 100%),
    url("assets/gemstone-natural-variation-v2.png") 68% center / cover no-repeat;
  color: #fff;
}

.gemX-nature-copy {
  position: relative;
  z-index: 1;
  max-width: 570px;
}

.gemX-nature h2 {
  color: #fff;
}

.gemX-nature-copy > p:last-child {
  max-width: 500px;
  color: rgba(255, 255, 255, 0.68);
}

.gemX-nature-grid {
  display: none;
}

@media (max-width: 1180px) {
  .cadX-anatomy-ledger {
    grid-template-columns: minmax(300px, 0.68fr) minmax(480px, 1fr);
  }

  .gemX-cut-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cadX-anatomy-ledger {
    grid-template-columns: 1fr;
  }

  .gemX-builder {
    grid-template-columns: 1fr;
  }

  .gemX-preview-wrap {
    position: relative;
    top: auto;
  }
}

@media (max-width: 700px) {
  .cadX-detail-ledger {
    grid-template-columns: 1fr;
  }

  .cadX-detail-tabs {
    grid-template-columns: 1fr 1fr;
    border-right: 0;
  }

  .cadX-detail-tabs button {
    min-height: 72px;
    padding: 0 14px;
    border-right: 1px solid rgba(213, 182, 96, 0.17);
    font-size: 20px;
  }

  .cadX-detail-tabs button:nth-child(even) {
    border-right: 0;
  }

  .cadX-detail-answer {
    min-height: 300px;
    padding: 42px 24px;
    border-top: 1px solid rgba(213, 182, 96, 0.22);
  }

  .gemX-hero {
    min-height: 82dvh;
  }

  .gemX-render-stage,
  .gemX-render-stage iframe {
    min-height: 390px;
    height: 390px;
  }

  .gemX-render-stage > p {
    right: 16px;
    bottom: 15px;
  }

  .gemX-cut-list {
    grid-template-columns: 1fr 1fr;
  }

  .gemX-cut-list button {
    min-height: 76px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 8px 10px;
    font-size: 8px;
  }

  .gemX-nature {
    min-height: 680px;
    align-items: flex-start;
    padding: 72px 20px;
    background:
      linear-gradient(180deg, rgba(10, 10, 9, 0.95) 0%, rgba(10, 10, 9, 0.72) 46%, rgba(10, 10, 9, 0.08) 78%),
      url("assets/gemstone-natural-variation-v2.png") 70% center / cover no-repeat;
  }
}

/* Guided bespoke design choices */
.cadX-design-builder {
  padding: clamp(82px, 9vw, 138px) clamp(38px, 8vw, 128px) clamp(92px, 10vw, 154px);
  background: var(--cadx-ivory);
}

.cadX-design-heading {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(300px, 0.52fr);
  gap: clamp(42px, 8vw, 124px);
  align-items: end;
  max-width: 1420px;
  margin: 0 auto;
}

.cadX-design-heading h2 {
  max-width: 900px;
  margin: 22px 0 0;
  color: var(--cadx-ink);
  font: 400 clamp(58px, 6.6vw, 104px)/0.92 var(--cadx-serif);
  letter-spacing: 0;
}

.cadX-design-heading > p {
  margin: 0 0 6px;
  color: rgba(17, 17, 15, 0.61);
  font: 400 14px/1.76 var(--cadx-sans);
}

.cadX-design-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px;
  margin: clamp(46px, 6vw, 76px) auto;
  padding: 0;
  list-style: none;
}

.cadX-design-route li {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: rgba(17, 17, 15, 0.38);
  font: 800 9px/1.2 var(--cadx-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cadX-design-route li::after {
  content: "";
  width: 100%;
  height: 1px;
  margin: 0 16px;
  background: var(--cadx-line);
}

.cadX-design-route li:last-child::after {
  display: none;
}

.cadX-design-route li span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(17, 17, 15, 0.24);
  border-radius: 50%;
  font-size: 9px;
}

.cadX-design-route li.is-active,
.cadX-design-route li.is-complete {
  color: var(--cadx-ink);
}

.cadX-design-route li.is-active span,
.cadX-design-route li.is-complete span {
  border-color: var(--cadx-gold);
  background: #fff8e8;
}

.cadX-category-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  max-width: 1420px;
  margin: 0 auto;
}

.cadX-category-tabs button,
.cadX-style-grid button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 15, 0.13);
  border-radius: 2px;
  background: #fff;
  color: var(--cadx-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms var(--cadx-ease), box-shadow 220ms var(--cadx-ease), transform 220ms var(--cadx-ease);
}

.cadX-category-tabs button:hover,
.cadX-category-tabs button:focus-visible,
.cadX-category-tabs button.is-active,
.cadX-style-grid button:hover,
.cadX-style-grid button:focus-visible,
.cadX-style-grid button.is-active {
  border-color: var(--cadx-gold);
  box-shadow: 0 18px 44px rgba(49, 38, 25, 0.09);
  transform: translateY(-3px);
}

.cadX-category-tabs button.is-active::after,
.cadX-style-grid button.is-active::after {
  content: "\2713";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--cadx-ink);
  color: #fff;
  font: 700 11px/1 var(--cadx-sans);
}

.cadX-category-tabs img,
.cadX-style-grid img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #f5f0e8;
}

.cadX-category-tabs img {
  aspect-ratio: 1.15;
}

.cadX-category-tabs button > span {
  display: block;
  min-height: 54px;
  padding: 17px 16px;
  border-top: 1px solid rgba(17, 17, 15, 0.1);
  font: 400 clamp(22px, 2.1vw, 32px)/0.95 var(--cadx-serif);
}

.cadX-style-heading {
  display: grid;
  grid-template-columns: minmax(360px, 0.75fr) minmax(280px, 0.48fr);
  gap: clamp(34px, 7vw, 108px);
  align-items: end;
  max-width: 1420px;
  margin: clamp(70px, 8vw, 112px) auto 30px;
  padding-top: 34px;
  border-top: 1px solid var(--cadx-line);
}

.cadX-style-heading h3 {
  margin: 12px 0 0;
  font: 400 clamp(40px, 4vw, 62px)/0.98 var(--cadx-serif);
}

.cadX-style-heading > p {
  margin: 0;
  color: rgba(17, 17, 15, 0.58);
  font: 400 13px/1.72 var(--cadx-sans);
}

.cadX-style-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1420px;
  margin: 0 auto;
}

.cadX-style-grid img {
  aspect-ratio: 1.24;
}

.cadX-style-grid button > span {
  display: grid;
  min-height: 98px;
  align-content: start;
  gap: 8px;
  padding: 20px 20px 22px;
  border-top: 1px solid rgba(17, 17, 15, 0.1);
}

.cadX-style-grid strong {
  font: 400 clamp(27px, 2.5vw, 39px)/0.98 var(--cadx-serif);
}

.cadX-style-grid small {
  color: rgba(17, 17, 15, 0.56);
  font: 500 11px/1.5 var(--cadx-sans);
}

.cadX-design-help {
  max-width: 1420px;
  margin: 22px auto 0;
  color: rgba(17, 17, 15, 0.48);
  font: 700 9px/1.5 var(--cadx-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cadX-gem-context {
  display: grid;
  gap: 8px;
  margin-top: 30px;
  padding: 18px 0;
  border-top: 1px solid var(--cadx-line);
  border-bottom: 1px solid var(--cadx-line);
}

.cadX-gem-context span {
  color: rgba(17, 17, 15, 0.48);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cadX-gem-context strong {
  font: 400 30px/1.05 var(--cadx-serif);
}

.cadX-gem-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--cadx-line);
}

.cadX-gem-slots button {
  display: grid;
  min-height: 72px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--cadx-line);
  border-bottom: 1px solid var(--cadx-line);
  background: transparent;
  color: rgba(17, 17, 15, 0.58);
  font: 700 10px/1.35 var(--cadx-sans);
  text-align: left;
  cursor: pointer;
}

.cadX-gem-slots button:last-child {
  border-right: 0;
}

.cadX-gem-slots button span {
  color: var(--cadx-gold);
  font: 800 9px/1 var(--cadx-sans);
}

.cadX-gem-slots button:hover,
.cadX-gem-slots button:focus-visible,
.cadX-gem-slots button.is-active {
  background: #fff;
  color: var(--cadx-ink);
}

@media (max-width: 1180px) {
  .cadX-design-builder {
    padding-inline: 48px;
  }

  .cadX-design-heading {
    grid-template-columns: minmax(460px, 1fr) minmax(260px, 0.5fr);
  }

  .cadX-style-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cadX-design-heading,
  .cadX-style-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cadX-category-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cadX-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .cadX-design-builder {
    padding: 70px 20px 82px;
  }

  .cadX-design-heading h2 {
    font-size: clamp(50px, 14.5vw, 66px);
  }

  .cadX-design-route {
    margin: 34px 0 38px;
  }

  .cadX-design-route li {
    gap: 6px;
    font-size: 7px;
    letter-spacing: 0.08em;
  }

  .cadX-design-route li::after {
    margin: 0 5px;
  }

  .cadX-design-route li span {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: 8px;
  }

  .cadX-category-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .cadX-category-tabs button {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .cadX-category-tabs button:hover,
  .cadX-category-tabs button:focus-visible,
  .cadX-category-tabs button.is-active {
    box-shadow: none;
    transform: none;
  }

  .cadX-category-tabs img {
    aspect-ratio: 1;
    border: 1px solid rgba(17, 17, 15, 0.13);
    border-radius: 2px;
  }

  .cadX-category-tabs button.is-active img {
    border-color: var(--cadx-gold);
    box-shadow: 0 8px 20px rgba(49, 38, 25, 0.1);
  }

  .cadX-category-tabs button.is-active::after {
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .cadX-category-tabs button > span {
    min-height: 0;
    padding: 9px 1px 0;
    border-top: 0;
    font: 700 8px/1.2 var(--cadx-sans);
    text-align: center;
    text-transform: uppercase;
  }

  .cadX-style-heading {
    margin-top: 52px;
  }

  .cadX-style-heading h3 {
    font-size: 42px;
  }

  .cadX-style-grid {
    gap: 8px;
  }

  .cadX-style-grid img {
    aspect-ratio: 1;
  }

  .cadX-style-grid button > span {
    min-height: 104px;
    padding: 15px 13px 17px;
  }

  .cadX-style-grid strong {
    font-size: 25px;
  }

  .cadX-style-grid small {
    font-size: 10px;
  }

  .cadX-style-grid button.is-active::after {
    top: 8px;
    right: 8px;
    width: 21px;
    height: 21px;
    font-size: 9px;
  }

  .cadX-gem-slots {
    grid-template-columns: 1fr;
  }

  .cadX-gem-slots button {
    min-height: 58px;
    border-right: 0;
  }
}

html {
  scroll-behavior: smooth;
}

.cadX-body {
  background: var(--cadx-ivory);
  color: var(--cadx-ink);
}

.cadX-page {
  width: 100%;
  max-width: none;
  overflow: clip;
  background: var(--cadx-ivory);
}

.cadX-page * {
  box-sizing: border-box;
}

.cadX-page > .topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgba(213, 182, 96, 0.24);
  background: rgba(17, 17, 15, 0.88);
  color: #fff;
  backdrop-filter: blur(18px);
}

.cadX-page .shop-back-link,
.cadX-page .nav-links a,
.cadX-page .actions .icon-button {
  color: rgba(255, 255, 255, 0.86);
}

.cadX-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  padding: 12px 16px;
  background: #fff;
  color: #111;
  font: 700 12px/1 var(--cadx-sans);
  transform: translateY(-140%);
}

.cadX-skip:focus {
  transform: none;
}

.cadX-kicker {
  margin: 0;
  color: var(--cadx-gold);
  font: 800 11px/1.25 var(--cadx-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cadX-hero {
  position: relative;
  display: grid;
  min-height: max(760px, 100dvh);
  grid-template-columns: minmax(0, 5fr) minmax(520px, 7fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: 124px clamp(42px, 7vw, 120px) 66px;
  overflow: hidden;
  background: var(--cadx-ink);
  color: #f8f4ed;
}

.cadX-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(213, 182, 96, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213, 182, 96, 0.052) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.28));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.28));
}

.cadX-hero::after {
  content: "";
  position: absolute;
  right: -16vw;
  bottom: -24vw;
  width: 64vw;
  height: 64vw;
  border: 1px solid rgba(213, 182, 96, 0.11);
  border-radius: 50%;
  pointer-events: none;
}

.cadX-hero-copy {
  position: relative;
  z-index: 4;
  max-width: 700px;
}

.cadX-hero-copy h1 {
  max-width: 760px;
  margin: 28px 0 0;
  color: #f8f4ed;
  font-family: var(--cadx-serif);
  font-size: clamp(74px, 7.8vw, 138px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.82;
}

.cadX-hero-copy h1 em {
  color: var(--cadx-gold-bright);
  font-weight: 400;
}

.cadX-hero-deck {
  max-width: 580px;
  margin: 34px 0 0;
  color: rgba(248, 244, 237, 0.72);
  font: 400 15px/1.78 var(--cadx-sans);
}

.cadX-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.cadX-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid currentColor;
  color: inherit;
  font: 800 10px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 260ms ease, background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 260ms var(--cadx-ease);
}

.cadX-button:hover,
.cadX-button:focus-visible {
  transform: translateY(-2px);
}

.cadX-button-gold {
  border-color: var(--cadx-gold-bright);
  background: var(--cadx-gold-bright);
  color: #111;
}

.cadX-button-gold:hover,
.cadX-button-gold:focus-visible {
  border-color: #f6df9f;
  background: #f6df9f;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.cadX-button-ghost {
  border-color: rgba(248, 244, 237, 0.48);
  background: transparent;
  color: #fff;
}

.cadX-button-ghost:hover,
.cadX-button-ghost:focus-visible {
  border-color: var(--cadx-gold-bright);
  color: var(--cadx-gold-bright);
}

.cadX-button-ink {
  border-color: var(--cadx-ink);
  background: var(--cadx-ink);
  color: #fff;
}

.cadX-button-ink:hover,
.cadX-button-ink:focus-visible {
  border-color: var(--cadx-brown);
  background: var(--cadx-brown);
}

.cadX-text-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  padding: 4px 0 7px;
  border-bottom: 1px solid rgba(213, 182, 96, 0.52);
  color: rgba(248, 244, 237, 0.78);
  font: 700 11px/1 var(--cadx-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cadX-text-link span {
  transition: transform 240ms var(--cadx-ease);
}

.cadX-text-link:hover span,
.cadX-text-link:focus-visible span {
  transform: translate(3px, -3px);
}

.cadX-hero-object {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: min(72dvh, 760px);
}

.cadX-model-stage {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.cadX-model-stage.is-dragging {
  cursor: grabbing;
}

.cadX-model-stage canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms ease;
}

.cadX-model-stage.is-ready canvas {
  opacity: 1;
}

.cadX-model-fallback {
  position: absolute;
  inset: 13%;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: sepia(0.28) saturate(0.8) drop-shadow(0 34px 40px rgba(0, 0, 0, 0.38));
  opacity: 0.62;
  transition: opacity 400ms ease;
}

.cadX-model-stage.is-ready .cadX-model-fallback {
  opacity: 0;
}

.cadX-hero-viewer {
  position: absolute;
  inset: 0;
}

.cadX-hero-viewer::before,
.cadX-detail-viewer::before {
  display: none;
}

.cadX-hero-viewer::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 9%;
  left: 14%;
  height: 18%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(34px);
  pointer-events: none;
}

.cadX-model-status {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 5;
  margin: 0;
  color: rgba(248, 244, 237, 0.5);
  font: 700 9px/1.4 var(--cadx-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

.cadX-hero-stage {
  position: absolute;
  top: 10%;
  right: 3%;
  z-index: 5;
  display: grid;
  gap: 4px;
  padding-left: 42px;
  color: #fff;
  font-family: var(--cadx-sans);
  text-transform: uppercase;
}

.cadX-hero-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 1px;
  background: var(--cadx-gold-bright);
}

.cadX-stage-index {
  color: var(--cadx-gold-bright);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.cadX-stage-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.cadX-drag-note {
  position: absolute;
  right: 3%;
  bottom: 4%;
  z-index: 5;
  margin: 0;
  color: rgba(248, 244, 237, 0.58);
  font: 700 9px/1 var(--cadx-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

.cadX-scroll-cue {
  position: absolute;
  bottom: 26px;
  left: clamp(42px, 7vw, 120px);
  z-index: 6;
  display: flex;
  gap: 14px;
  align-items: center;
  color: rgba(248, 244, 237, 0.48);
  font: 700 9px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-scroll-cue i {
  display: block;
  width: 44px;
  height: 1px;
  overflow: hidden;
  background: rgba(248, 244, 237, 0.22);
}

.cadX-scroll-cue i::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  background: var(--cadx-gold-bright);
  animation: cadX-line 2.4s ease-in-out infinite;
}

@keyframes cadX-line {
  0%, 100% { transform: translateX(-110%); }
  50% { transform: translateX(210%); }
}

.cadX-subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 5vw, 74px);
  padding: 0 24px;
  border-bottom: 1px solid var(--cadx-line);
  background: rgba(251, 249, 245, 0.92);
  backdrop-filter: blur(18px);
}

.cadX-subnav a {
  position: relative;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  color: rgba(17, 17, 15, 0.56);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-subnav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -1px;
  left: 50%;
  height: 2px;
  background: var(--cadx-gold);
  transition: right 260ms var(--cadx-ease), left 260ms var(--cadx-ease);
}

.cadX-subnav a.is-active,
.cadX-subnav a:hover,
.cadX-subnav a:focus-visible {
  color: var(--cadx-ink);
}

.cadX-subnav a.is-active::after {
  right: 0;
  left: 0;
}

.cadX-intro {
  display: grid;
  grid-template-columns: minmax(380px, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(44px, 8vw, 128px);
  padding: clamp(90px, 11vw, 168px) clamp(38px, 8vw, 128px);
  background: var(--cadx-ivory);
}

.cadX-intro-heading h2,
.cadX-section-heading h2,
.cadX-anatomy-copy h2,
.cadX-gem-copy h2,
.cadX-metals-copy h2,
.cadX-faq-heading h2,
.cadX-enquire h2 {
  margin: 24px 0 0;
  color: var(--cadx-ink);
  font-family: var(--cadx-serif);
  font-size: clamp(58px, 7.2vw, 118px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.88;
}

.cadX-intro-copy {
  max-width: 640px;
  padding-top: 40px;
}

.cadX-intro-copy p {
  margin: 0;
  color: rgba(17, 17, 15, 0.64);
  font: 400 15px/1.84 var(--cadx-sans);
}

.cadX-intro-copy p + p {
  margin-top: 22px;
}

.cadX-intro-copy .cadX-lead {
  color: var(--cadx-brown);
  font-family: var(--cadx-serif);
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 1.18;
}

.cadX-plain-terms {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 40px 0 0;
  border-top: 1px solid var(--cadx-line);
  border-bottom: 1px solid var(--cadx-line);
}

.cadX-plain-terms div {
  display: grid;
  gap: 10px;
  padding: 26px clamp(18px, 3vw, 42px) 28px 0;
}

.cadX-plain-terms div + div {
  padding-left: clamp(18px, 3vw, 42px);
  border-left: 1px solid var(--cadx-line);
}

.cadX-plain-terms dt {
  font: 400 clamp(28px, 2.7vw, 42px)/1 var(--cadx-serif);
}

.cadX-plain-terms dd {
  margin: 0;
  color: rgba(17, 17, 15, 0.58);
  font: 400 13px/1.62 var(--cadx-sans);
}

.cadX-studio-bridge {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(360px, 1fr) auto;
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
  padding: 48px clamp(38px, 8vw, 128px);
  border-top: 1px solid rgba(213, 182, 96, 0.22);
  border-bottom: 1px solid rgba(213, 182, 96, 0.22);
  background: var(--cadx-brown);
  color: #fff;
}

.cadX-studio-bridge h2 {
  margin: 12px 0 0;
  font: 400 clamp(34px, 3.7vw, 54px)/1 var(--cadx-serif);
}

.cadX-studio-bridge > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font: 400 13px/1.7 var(--cadx-sans);
}

.cadX-studio-bridge > a {
  padding: 14px 0;
  border-bottom: 1px solid var(--cadx-gold-bright);
  color: #fff;
  font: 800 10px/1.3 var(--cadx-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cadX-process {
  padding: clamp(90px, 10vw, 150px) clamp(38px, 8vw, 128px);
  background: var(--cadx-cream);
}

.cadX-section-heading {
  display: grid;
  grid-template-columns: minmax(280px, 0.45fr) minmax(440px, 0.82fr) minmax(260px, 0.45fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(60px, 8vw, 110px);
}

.cadX-section-heading .cadX-kicker {
  align-self: start;
}

.cadX-section-heading h2 {
  margin: 0;
  font-size: clamp(58px, 6.6vw, 106px);
}

.cadX-section-heading > p:last-child {
  margin: 0;
  color: rgba(17, 17, 15, 0.6);
  font: 400 14px/1.75 var(--cadx-sans);
}

.cadX-process-layout {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(440px, 0.9fr);
  gap: clamp(52px, 8vw, 124px);
  align-items: start;
}

.cadX-process-visual {
  position: sticky;
  top: 92px;
  margin: 0;
}

.cadX-process-frame {
  position: relative;
  aspect-ratio: 1 / 0.86;
  overflow: hidden;
  border: 1px solid rgba(43, 35, 27, 0.12);
  background: #e8dfd3;
}

.cadX-process-frame::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  pointer-events: none;
}

.cadX-process-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 260ms ease, transform 700ms var(--cadx-ease);
}

.cadX-process-frame.is-changing img {
  opacity: 0;
  transform: scale(1.025);
}

.cadX-process-count {
  position: absolute;
  right: 28px;
  bottom: 25px;
  z-index: 2;
  color: rgba(17, 17, 15, 0.66);
  font: 800 10px/1 var(--cadx-sans);
  letter-spacing: 0.15em;
}

.cadX-process-visual figcaption {
  max-width: 620px;
  margin-top: 18px;
  color: rgba(17, 17, 15, 0.58);
  font: 400 12px/1.65 var(--cadx-sans);
}

.cadX-process-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cadx-line);
  list-style: none;
}

.cadX-process-list li {
  border-bottom: 1px solid var(--cadx-line);
}

.cadX-process-list button {
  display: grid;
  width: 100%;
  min-height: 154px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 24px;
  align-items: start;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: var(--cadx-ink);
  text-align: left;
  cursor: pointer;
}

.cadX-process-list button > span {
  grid-row: 1 / 3;
  padding-top: 9px;
  color: rgba(17, 17, 15, 0.35);
  font: 700 10px/1 var(--cadx-sans);
  letter-spacing: 0.12em;
}

.cadX-process-list strong {
  min-width: 0;
  font: 400 clamp(34px, 3vw, 46px)/1 var(--cadx-serif);
}

.cadX-process-list small {
  grid-column: 2;
  max-width: 410px;
  color: rgba(17, 17, 15, 0.56);
  font: 400 12px/1.62 var(--cadx-sans);
}

.cadX-process-list li.is-active button > span,
.cadX-process-list button:hover > span,
.cadX-process-list button:focus-visible > span {
  color: var(--cadx-gold);
}

.cadX-process-list li.is-active strong {
  color: var(--cadx-gold);
}

.cadX-process-refined .cadX-section-heading {
  margin-bottom: clamp(48px, 6vw, 82px);
}

.cadX-process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cadx-line);
  border-bottom: 1px solid var(--cadx-line);
  list-style: none;
}

.cadX-process-steps li {
  min-height: 310px;
  padding: clamp(30px, 3.5vw, 52px) clamp(24px, 3vw, 46px);
  border-right: 1px solid var(--cadx-line);
}

.cadX-process-steps li:last-child {
  border-right: 0;
}

.cadX-process-steps span {
  display: block;
  margin-bottom: clamp(50px, 6vw, 86px);
  color: var(--cadx-gold);
  font: 400 clamp(30px, 3vw, 46px)/1 var(--cadx-serif);
}

.cadX-process-steps strong {
  display: block;
  margin-bottom: 18px;
  font: 400 clamp(30px, 3.1vw, 48px)/1 var(--cadx-serif);
}

.cadX-process-steps p {
  max-width: 290px;
  margin: 0;
  color: rgba(17, 17, 15, 0.6);
  font: 400 13px/1.7 var(--cadx-sans);
}

@media (max-width: 900px) {
  .cadX-process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cadX-process-steps li:nth-child(2) {
    border-right: 0;
  }

  .cadX-process-steps li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--cadx-line);
  }
}

@media (max-width: 560px) {
  .cadX-process-steps {
    grid-template-columns: 1fr;
  }

  .cadX-process-steps li,
  .cadX-process-steps li:nth-child(2) {
    display: grid;
    min-height: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px 16px;
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid var(--cadx-line);
  }

  .cadX-process-steps li:last-child {
    border-bottom: 0;
  }

  .cadX-process-steps span {
    grid-row: 1 / 3;
    margin: 7px 0 0;
    font-size: 13px;
  }

  .cadX-process-steps strong {
    margin: 0;
    font-size: 34px;
  }

  .cadX-process-steps p {
    grid-column: 2;
  }
}

.cadX-anatomy {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(560px, 1.2fr);
  gap: clamp(44px, 7vw, 110px);
  align-items: center;
  min-height: 820px;
  padding: clamp(90px, 10vw, 150px) clamp(38px, 8vw, 128px);
  overflow: hidden;
  background: var(--cadx-ink);
  color: #fff;
}

.cadX-anatomy-copy {
  position: relative;
  z-index: 3;
}

.cadX-anatomy-copy h2 {
  color: #f8f4ed;
  font-size: clamp(58px, 6.6vw, 104px);
}

.cadX-anatomy-copy > p:not(.cadX-kicker) {
  max-width: 530px;
  margin: 28px 0 0;
  color: rgba(248, 244, 237, 0.64);
  font: 400 14px/1.76 var(--cadx-sans);
}

.cadX-hotspot-copy {
  position: relative;
  max-width: 520px;
  min-height: 170px;
  margin-top: 42px;
  padding: 26px 0 0 56px;
  border-top: 1px solid rgba(213, 182, 96, 0.28);
}

.cadX-hotspot-copy > span {
  position: absolute;
  top: 30px;
  left: 0;
  color: var(--cadx-gold-bright);
  font: 800 10px/1 var(--cadx-sans);
  letter-spacing: 0.14em;
}

.cadX-hotspot-copy h3 {
  margin: 0;
  font: 400 clamp(34px, 3.6vw, 52px)/1 var(--cadx-serif);
}

.cadX-hotspot-copy p {
  margin: 14px 0 0;
  color: rgba(248, 244, 237, 0.62);
  font: 400 13px/1.68 var(--cadx-sans);
}

.cadX-anatomy-model {
  position: relative;
  min-height: clamp(540px, 56vw, 760px);
}

.cadX-detail-viewer {
  position: absolute;
  inset: 0;
}

.cadX-detail-viewer::before {
  inset: 11%;
  border-color: rgba(213, 182, 96, 0.13);
  transform: rotate(4deg);
}

.cadX-hotspot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 8;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 50%;
  background: rgba(17, 17, 15, 0.72);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--cadx-ease);
}

.cadX-hotspot::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(213, 182, 96, 0.18);
  border-radius: 50%;
}

.cadX-hotspot span {
  font: 800 10px/1 var(--cadx-sans);
}

.cadX-hotspot:hover,
.cadX-hotspot:focus-visible,
.cadX-hotspot.is-active {
  border-color: var(--cadx-gold-bright);
  background: var(--cadx-gold);
  color: #111;
  box-shadow: 0 0 0 8px rgba(213, 182, 96, 0.1);
  transform: translate(-50%, -50%) scale(1.08);
}

.cadX-decisions {
  padding: clamp(84px, 9vw, 140px) clamp(38px, 8vw, 128px);
  background: var(--cadx-ivory);
}

.cadX-section-heading-compact {
  grid-template-columns: minmax(220px, 0.36fr) minmax(500px, 1fr);
  margin-bottom: 66px;
}

.cadX-section-heading-compact h2 {
  font-size: clamp(56px, 6vw, 94px);
}

.cadX-decision-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--cadx-line);
  border-bottom: 1px solid var(--cadx-line);
}

.cadX-decision-row article {
  min-height: 270px;
  padding: 30px clamp(18px, 2.2vw, 34px) 36px;
}

.cadX-decision-row article + article {
  border-left: 1px solid var(--cadx-line);
}

.cadX-decision-row span {
  color: var(--cadx-gold);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.14em;
}

.cadX-decision-row h3 {
  margin: 70px 0 16px;
  font: 400 clamp(28px, 2.7vw, 42px)/1 var(--cadx-serif);
}

.cadX-decision-row p {
  margin: 0;
  color: rgba(17, 17, 15, 0.58);
  font: 400 12px/1.62 var(--cadx-sans);
}

.cadX-gem-bridge {
  display: grid;
  min-height: 1020px;
  grid-template-columns: minmax(560px, 1.18fr) minmax(360px, 0.72fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  padding: clamp(82px, 10vw, 150px) clamp(38px, 8vw, 128px);
  overflow: hidden;
  background: var(--cadx-paper);
}

.cadX-gem-visual {
  position: relative;
  min-height: 520px;
}

.cadX-gem {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(230px, 27vw, 390px);
  aspect-ratio: 0.78;
  border: 8px solid rgba(255, 255, 255, 0.56);
  background:
    conic-gradient(from 20deg at 50% 50%, #071835, #3269a7, #0c285b, #9fbde5, #123f86, #05142f, #497ab5, #092455, #071835);
  box-shadow:
    0 54px 72px rgba(34, 29, 23, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    inset 28px 10px 70px rgba(255, 255, 255, 0.15),
    inset -28px -20px 70px rgba(0, 0, 0, 0.38);
  clip-path: polygon(50% 0, 83% 9%, 100% 37%, 91% 76%, 50% 100%, 9% 76%, 0 37%, 17% 9%);
  transform: translate(-50%, -50%) rotate(5deg);
}

.cadX-gem::before,
.cadX-gem::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, 0.44);
  clip-path: inherit;
}

.cadX-gem::after {
  inset: 31%;
  background: rgba(255, 255, 255, 0.12);
}

.cadX-gem-ring,
.cadX-gem-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(43, 35, 27, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cadX-gem-orbit {
  width: min(36vw, 480px);
  border-color: rgba(184, 138, 43, 0.26);
  transform: translate(-50%, -50%) rotate(18deg) scaleY(0.56);
}

.cadX-gem-copy h2 {
  font-size: clamp(58px, 6.3vw, 100px);
}

.cadX-gem-copy > p:not(.cadX-kicker) {
  max-width: 570px;
  margin: 28px 0 0;
  color: rgba(17, 17, 15, 0.62);
  font: 400 14px/1.76 var(--cadx-sans);
}

.cadX-gem-swatches {
  display: flex;
  gap: 12px;
  margin: 34px 0;
}

.cadX-gem-swatches span {
  width: 28px;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--stone);
  box-shadow: 0 0 0 1px rgba(17, 17, 15, 0.15);
}

.cadX-gem-studio {
  min-width: 0;
}

.cadX-gem-stage {
  position: relative;
  width: 100%;
  min-height: clamp(640px, 74vw, 900px);
  overflow: hidden;
  border: 0;
  background: #f2eee6;
  box-shadow: none;
}

.cadX-gem-stage::before,
.cadX-gem-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.cadX-gem-stage::before {
  display: none;
}

.cadX-gem-stage::after {
  right: 28px;
  bottom: 28px;
  width: 74px;
  height: 1px;
  background: #b88a2b;
}

.cadX-gem-stage iframe {
  display: block;
  width: 100%;
  height: clamp(640px, 74vw, 900px);
  border: 0;
  pointer-events: auto;
  background: #f2eee6;
}

.cadX-gem-summary {
  margin: 18px 0 0;
  color: rgba(17, 17, 15, 0.58);
  font: 700 10px/1.4 var(--cadx-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cadX-gem-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
}

.cadX-gem-controls label {
  display: grid;
  gap: 9px;
}

.cadX-gem-controls label > span {
  color: rgba(17, 17, 15, 0.62);
  font: 700 10px/1.2 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-gem-controls select {
  width: 100%;
  min-height: 54px;
  padding: 0 42px 0 16px;
  border: 1px solid rgba(17, 17, 15, 0.18);
  border-radius: 0;
  color: #11110f;
  background: #fff;
  font: 600 13px/1.2 var(--cadx-sans);
}

.cadX-gem-controls select:focus-visible {
  outline: 2px solid #b88a2b;
  outline-offset: 2px;
}

.cadX-gem-copy .cadX-gem-note {
  margin-top: 18px;
  color: rgba(17, 17, 15, 0.48);
  font-size: 11px;
  line-height: 1.65;
}

.cadX-gem-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
}

.cadX-text-link {
  color: #11110f;
  font: 700 10px/1.2 var(--cadx-sans);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(17, 17, 15, 0.35);
  padding-bottom: 5px;
}

.cadX-text-link:hover,
.cadX-text-link:focus-visible {
  border-bottom-color: #b88a2b;
}

.cadX-metals {
  display: grid;
  grid-template-columns: minmax(380px, 0.78fr) minmax(540px, 1.2fr);
  gap: clamp(50px, 8vw, 126px);
  align-items: center;
  padding: clamp(90px, 11vw, 164px) clamp(38px, 8vw, 128px);
  background: #fff;
}

.cadX-metals-copy h2 {
  font-size: clamp(58px, 6vw, 96px);
}

.cadX-metals-copy > p:not(.cadX-kicker) {
  max-width: 570px;
  margin: 28px 0 0;
  color: rgba(17, 17, 15, 0.62);
  font: 400 14px/1.75 var(--cadx-sans);
}

.cadX-metal-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid var(--cadx-line);
}

.cadX-metal-controls button {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cadx-line);
  background: transparent;
  color: rgba(17, 17, 15, 0.56);
  font: 700 10px/1.3 var(--cadx-sans);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.cadX-metal-controls button:nth-child(even) {
  padding-left: 20px;
  border-left: 1px solid var(--cadx-line);
}

.cadX-metal-controls button i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8c6925, #f1d47a 46%, #9a6f20);
  box-shadow: 0 0 0 1px rgba(17, 17, 15, 0.14);
}

.cadX-metal-controls [data-metal="white"] i { background: linear-gradient(135deg, #777b80, #f4f5f5 48%, #a2a6aa); }
.cadX-metal-controls [data-metal="rose"] i { background: linear-gradient(135deg, #9b5d4a, #e7b3a0 48%, #9c6352); }
.cadX-metal-controls [data-metal="platinum"] i { background: linear-gradient(135deg, #666b70, #fff 48%, #898e93); }

.cadX-metal-controls button.is-active {
  color: var(--cadx-ink);
}

.cadX-metal-controls button.is-active i {
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cadx-gold);
}

.cadX-metal-study {
  min-width: 0;
  margin: 0;
}

.cadX-metal-viewer {
  min-height: 620px;
  width: 100%;
  aspect-ratio: 1.2;
  overflow: hidden;
  background: transparent;
  border: 0;
}

.cadX-metal-viewer::after {
  display: none;
}

.cadX-metal-viewer canvas,
.cadX-metal-viewer .cadX-model-fallback {
  inset: 5%;
  width: 90%;
  height: 90%;
}

.cadX-metal-viewer .cadX-model-fallback {
  object-fit: contain;
  filter: sepia(0.28) saturate(0.86) brightness(1.03);
  transition-duration: 180ms;
}

.cadX-metal-viewer[data-stl-metal="white"] .cadX-model-fallback,
.cadX-metal-viewer[data-stl-metal="platinum"] .cadX-model-fallback {
  filter: grayscale(1) brightness(1.16) contrast(0.86);
}

.cadX-metal-viewer[data-stl-metal="rose"] .cadX-model-fallback {
  filter: sepia(0.44) saturate(0.8) hue-rotate(326deg) brightness(1.05);
}

.cadX-metal-viewer .cadX-model-status {
  color: rgba(17, 17, 15, 0.48);
}

.cadX-metal-study figcaption {
  max-width: 720px;
  margin-top: 14px;
  color: rgba(17, 17, 15, 0.46);
  font: 400 10px/1.6 var(--cadx-sans);
}

.cadX-evidence {
  padding: clamp(90px, 10vw, 150px) clamp(38px, 8vw, 128px);
  background: var(--cadx-cream);
}

.cadX-evidence-pair {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(20px, 3vw, 46px);
}

.cadX-evidence-pair figure {
  margin: 0;
}

.cadX-evidence-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 1.18;
  border: 1px solid rgba(43, 35, 27, 0.12);
  object-fit: cover;
  background: #fff;
}

.cadX-evidence-pair figure:first-child img {
  object-fit: contain;
}

.cadX-evidence-pair figcaption {
  display: grid;
  gap: 8px;
  padding-top: 17px;
  color: rgba(17, 17, 15, 0.56);
  font: 400 11px/1.58 var(--cadx-sans);
}

.cadX-evidence-pair figcaption span {
  color: var(--cadx-gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.cadX-evidence-link {
  margin-top: 34px;
  color: var(--cadx-ink);
}

.cadX-faq {
  display: grid;
  grid-template-columns: minmax(340px, 0.68fr) minmax(520px, 1fr);
  gap: clamp(52px, 9vw, 140px);
  align-items: start;
  padding: clamp(90px, 10vw, 150px) clamp(38px, 8vw, 128px);
  background: var(--cadx-ivory);
}

.cadX-faq-heading {
  position: sticky;
  top: 100px;
}

.cadX-faq-heading h2 {
  font-size: clamp(58px, 6.4vw, 98px);
}

.cadX-faq-list {
  border-top: 1px solid var(--cadx-line);
}

.cadX-faq-list details {
  border-bottom: 1px solid var(--cadx-line);
}

.cadX-faq-list summary {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--cadx-ink);
  font: 400 clamp(24px, 2.5vw, 36px)/1.15 var(--cadx-serif);
  cursor: pointer;
  list-style: none;
}

.cadX-faq-list summary::-webkit-details-marker {
  display: none;
}

.cadX-faq-list summary span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--cadx-gold);
  font-family: var(--cadx-sans);
  font-size: 20px;
  transition: transform 240ms ease;
}

.cadX-faq-list details[open] summary span {
  transform: rotate(45deg);
}

.cadX-faq-list details p {
  max-width: 720px;
  margin: -4px 52px 32px 0;
  color: rgba(17, 17, 15, 0.6);
  font: 400 13px/1.72 var(--cadx-sans);
}

.cadX-enquire {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) minmax(360px, 0.72fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: end;
  padding: clamp(90px, 11vw, 168px) clamp(38px, 8vw, 128px);
  background: var(--cadx-brown);
  color: #fff;
}

.cadX-enquire h2 {
  color: #fff;
  font-size: clamp(64px, 7.2vw, 116px);
}

.cadX-enquire-side > p {
  max-width: 570px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font: 400 14px/1.78 var(--cadx-sans);
}

.cadX-enquire .cadX-actions {
  margin-top: 32px;
}

.cadX-back-top {
  display: inline-flex;
  gap: 12px;
  margin-top: 30px;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.55);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cadX-page :focus-visible {
  outline: 2px solid var(--cadx-gold-bright);
  outline-offset: 4px;
}

@media (max-width: 1180px) {
  .cadX-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
    padding-inline: 48px;
  }

  .cadX-hero-copy h1 {
    font-size: clamp(68px, 8.6vw, 104px);
  }

  .cadX-intro,
  .cadX-process,
  .cadX-anatomy,
  .cadX-decisions,
  .cadX-gem-bridge,
  .cadX-metals,
  .cadX-evidence,
  .cadX-faq,
  .cadX-enquire {
    padding-inline: 48px;
  }

  .cadX-section-heading {
    grid-template-columns: 0.32fr 0.82fr 0.42fr;
    gap: 36px;
  }

  .cadX-process-layout {
    grid-template-columns: minmax(360px, 0.84fr) minmax(420px, 1fr);
    gap: 54px;
  }

  .cadX-process-list button {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .cadX-anatomy {
    grid-template-columns: minmax(330px, 0.75fr) minmax(500px, 1.2fr);
  }

  .cadX-decision-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cadX-decision-row article:nth-child(4) {
    border-left: 0;
  }

  .cadX-decision-row article:nth-child(n+4) {
    border-top: 1px solid var(--cadx-line);
  }

  .cadX-gem-bridge,
  .cadX-metals {
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.85fr);
  }

  .cadX-studio-bridge {
    grid-template-columns: minmax(260px, 0.74fr) minmax(360px, 1fr);
    padding-inline: 48px;
  }

  .cadX-studio-bridge > a {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .cadX-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 132px 34px 78px;
  }

  .cadX-hero-copy {
    max-width: 720px;
  }

  .cadX-hero-object {
    min-height: 520px;
  }

  .cadX-scroll-cue {
    display: none;
  }

  .cadX-intro,
  .cadX-anatomy,
  .cadX-gem-bridge,
  .cadX-metals,
  .cadX-faq,
  .cadX-enquire {
    grid-template-columns: 1fr;
  }

  .cadX-intro-copy {
    padding-top: 0;
  }

  .cadX-section-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cadX-section-heading > p:last-child {
    max-width: 620px;
  }

  .cadX-process-layout {
    grid-template-columns: 1fr;
  }

  .cadX-process-visual {
    position: relative;
    top: auto;
  }

  .cadX-anatomy-model {
    min-height: 620px;
  }

  .cadX-gem-visual {
    order: 2;
    min-height: 500px;
  }

  .cadX-gem-copy {
    order: 1;
  }

  .cadX-metals-copy {
    max-width: 760px;
  }

  .cadX-faq-heading {
    position: relative;
    top: auto;
  }

  .cadX-enquire-side {
    max-width: 680px;
  }
}

@media (max-width: 700px) {
  .cadX-page > .topbar {
    min-height: 82px;
  }

  .cadX-hero {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
    justify-content: center;
    padding: 118px 20px 50px;
  }

  .cadX-hero-copy h1 {
    margin-top: 18px;
    font-size: clamp(58px, 17vw, 78px);
    line-height: 0.84;
  }

  .cadX-hero-deck {
    margin-top: 24px;
    font-size: 13px;
    line-height: 1.7;
  }

  .cadX-actions,
  .cadX-actions .cadX-button {
    width: 100%;
  }

  .cadX-button {
    min-height: 52px;
  }

  .cadX-hero-object {
    min-height: 330px;
  }

  .cadX-hero-stage {
    top: 4%;
    right: 0;
  }

  .cadX-drag-note {
    right: 0;
    bottom: 1%;
  }

  .cadX-model-status {
    bottom: 8px;
    left: 8px;
    max-width: 190px;
    font-size: 8px;
  }

  .cadX-subnav {
    justify-content: flex-start;
    gap: 26px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cadX-subnav::-webkit-scrollbar {
    display: none;
  }

  .cadX-subnav a {
    flex: 0 0 auto;
  }

  .cadX-intro,
  .cadX-process,
  .cadX-anatomy,
  .cadX-decisions,
  .cadX-gem-bridge,
  .cadX-metals,
  .cadX-evidence,
  .cadX-faq,
  .cadX-enquire {
    gap: 40px;
    padding: 72px 20px;
  }

  .cadX-intro-heading h2,
  .cadX-section-heading h2,
  .cadX-anatomy-copy h2,
  .cadX-gem-copy h2,
  .cadX-metals-copy h2,
  .cadX-faq-heading h2,
  .cadX-enquire h2 {
    margin-top: 18px;
    font-size: clamp(48px, 14.5vw, 66px);
    line-height: 0.92;
  }

  .cadX-intro-copy .cadX-lead {
    font-size: 27px;
  }

  .cadX-plain-terms {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .cadX-plain-terms div,
  .cadX-plain-terms div + div {
    padding: 21px 0;
    border-top: 1px solid var(--cadx-line);
    border-left: 0;
  }

  .cadX-plain-terms div:first-child {
    border-top: 0;
  }

  .cadX-studio-bridge {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 44px 20px;
  }

  .cadX-studio-bridge > a {
    grid-column: auto;
  }

  .cadX-section-heading {
    margin-bottom: 14px;
  }

  .cadX-process-layout {
    gap: 34px;
  }

  .cadX-process-frame {
    aspect-ratio: 1;
  }

  .cadX-process-list button {
    min-height: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px 12px;
    padding: 22px 0;
  }

  .cadX-process-list button > span {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 7px;
  }

  .cadX-process-list strong {
    font-size: 34px;
  }

  .cadX-process-list small {
    grid-column: 2;
  }

  .cadX-anatomy {
    min-height: 0;
  }

  .cadX-hotspot-copy {
    min-height: 190px;
    margin-top: 32px;
  }

  .cadX-anatomy-model {
    min-height: 430px;
  }

  .cadX-hotspot {
    width: 38px;
    height: 38px;
  }

  .cadX-section-heading-compact {
    margin-bottom: 20px;
  }

  .cadX-decision-row {
    grid-template-columns: 1fr 1fr;
  }

  .cadX-decision-row article {
    min-height: 220px;
    padding: 24px 18px;
  }

  .cadX-decision-row article:nth-child(odd) {
    border-left: 0;
  }

  .cadX-decision-row article:nth-child(even) {
    border-left: 1px solid var(--cadx-line);
  }

  .cadX-decision-row article:nth-child(n+3) {
    border-top: 1px solid var(--cadx-line);
  }

  .cadX-decision-row article:last-child {
    grid-column: 1 / -1;
  }

  .cadX-decision-row h3 {
    margin-top: 42px;
    font-size: 30px;
  }

  .cadX-gem-visual {
    min-height: 380px;
  }

  .cadX-gem {
    width: 210px;
  }

  .cadX-gem-ring {
    width: 360px;
  }

  .cadX-gem-orbit {
    width: 286px;
  }

  .cadX-gem-studio {
    order: 1;
  }

  .cadX-gem-copy {
    order: 2;
  }

  .cadX-gem-stage {
    min-height: 520px;
  }

  .cadX-gem-stage iframe {
    height: 520px;
  }

  .cadX-gem-controls {
    grid-template-columns: 1fr;
  }

  .cadX-gem-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .cadX-gem-actions .cadX-button,
  .cadX-gem-actions .cadX-text-link {
    width: 100%;
    text-align: center;
  }

  .cadX-metal-controls {
    grid-template-columns: 1fr;
  }

  .cadX-metal-controls button:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .cadX-metal-viewer {
    min-height: 400px;
    aspect-ratio: 1;
  }

  .cadX-evidence-pair {
    grid-template-columns: 1fr;
  }

  .cadX-evidence-pair img {
    aspect-ratio: 1;
  }

  .cadX-faq-list summary {
    min-height: 78px;
    font-size: 24px;
  }

  .cadX-faq-list details p {
    margin-right: 0;
  }

  .cadX-enquire .cadX-actions {
    margin-top: 28px;
  }
}

@media (max-width: 390px) {
  .cadX-hero-copy h1 {
    font-size: 56px;
  }

  .cadX-hero-object {
    min-height: 300px;
  }

  .cadX-decision-row {
    grid-template-columns: 1fr;
  }

  .cadX-decision-row article,
  .cadX-decision-row article:nth-child(even),
  .cadX-decision-row article:nth-child(odd) {
    min-height: 190px;
    grid-column: auto;
    border-top: 1px solid var(--cadx-line);
    border-left: 0;
  }

  .cadX-decision-row article:first-child {
    border-top: 0;
  }

  .cadX-gem-ring {
    width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cadX-page *,
  .cadX-page *::before,
  .cadX-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Gemstone direction page */
.gemX-body {
  background: var(--cadx-ivory);
  color: var(--cadx-ink);
}

.gemX-page {
  width: 100%;
  max-width: none;
  overflow: clip;
  background: var(--cadx-ivory);
}

.gemX-page * {
  box-sizing: border-box;
}

.gemX-page > .topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgba(213, 182, 96, 0.24);
  background: rgba(17, 17, 15, 0.9);
  color: #fff;
  backdrop-filter: blur(18px);
}

.gemX-page .shop-back-link,
.gemX-page .nav-links a,
.gemX-page .actions .icon-button {
  color: rgba(255, 255, 255, 0.86);
}

.gemX-hero {
  position: relative;
  display: grid;
  min-height: max(720px, 100dvh);
  grid-template-columns: minmax(400px, 0.78fr) minmax(520px, 1fr);
  gap: clamp(40px, 8vw, 132px);
  align-items: center;
  padding: 126px clamp(40px, 8vw, 128px) 70px;
  overflow: hidden;
  background: var(--cadx-ink);
  color: #fff;
}

.gemX-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(213, 182, 96, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213, 182, 96, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
}

.gemX-hero-copy {
  position: relative;
  z-index: 2;
}

.gemX-hero h1 {
  margin: 24px 0 0;
  color: #f8f4ed;
  font: 400 clamp(76px, 8vw, 136px)/0.84 var(--cadx-serif);
}

.gemX-hero h1 em {
  color: var(--cadx-gold-bright);
  font-weight: 400;
}

.gemX-hero-copy > p:not(.cadX-kicker) {
  max-width: 560px;
  margin: 32px 0 0;
  color: rgba(248, 244, 237, 0.66);
  font: 400 14px/1.76 var(--cadx-sans);
}

.gemX-hero-stone {
  position: relative;
  z-index: 2;
  min-height: 610px;
}

.gemX-hero-stone span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30vw, 410px);
  aspect-ratio: 0.76;
  border: 9px solid rgba(255, 255, 255, 0.5);
  background: conic-gradient(from 18deg, #0d1b3b, #2e62a3, #a2c2e5, #133871, #06142f, #4b78b2, #153e7b, #0d1b3b);
  box-shadow: 0 70px 100px rgba(0, 0, 0, 0.42), inset 20px 0 50px rgba(255, 255, 255, 0.16), inset -24px -18px 60px rgba(0, 0, 0, 0.42);
  clip-path: polygon(50% 0, 82% 8%, 100% 36%, 93% 72%, 50% 100%, 7% 72%, 0 36%, 18% 8%);
  transform: translate(-50%, -50%) rotate(4deg);
}

.gemX-hero-stone span::before,
.gemX-hero-stone span::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(255, 255, 255, 0.38);
  clip-path: inherit;
}

.gemX-hero-stone span::after {
  inset: 34%;
  background: rgba(255, 255, 255, 0.13);
}

.gemX-hero-stone i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 650px);
  aspect-ratio: 1;
  border: 1px solid rgba(213, 182, 96, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(0.62) rotate(14deg);
}

.gemX-hero-note {
  position: absolute;
  right: clamp(40px, 8vw, 128px);
  bottom: 30px;
  z-index: 2;
  max-width: 420px;
  margin: 0;
  color: rgba(248, 244, 237, 0.43);
  font: 400 10px/1.58 var(--cadx-sans);
  text-align: right;
}

.gemX-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(440px, 0.9fr) minmax(320px, 0.55fr);
  gap: clamp(32px, 6vw, 92px);
  align-items: end;
  padding: clamp(88px, 10vw, 142px) clamp(40px, 8vw, 128px);
  background: var(--cadx-ivory);
}

.gemX-intro h2,
.gemX-nature h2,
.gemX-care h2 {
  margin: 0;
  font: 400 clamp(58px, 6.5vw, 104px)/0.9 var(--cadx-serif);
}

.gemX-intro > p:last-child,
.gemX-nature-copy > p:last-child,
.gemX-care > div:last-child p {
  margin: 0;
  color: rgba(17, 17, 15, 0.6);
  font: 400 14px/1.76 var(--cadx-sans);
}

.gemX-builder {
  display: grid;
  grid-template-columns: minmax(500px, 1fr) minmax(480px, 0.88fr);
  gap: clamp(50px, 8vw, 126px);
  align-items: start;
  padding: clamp(70px, 8vw, 120px) clamp(40px, 8vw, 128px);
  border-top: 1px solid var(--cadx-line);
  background: var(--cadx-cream);
}

.gemX-preview-wrap {
  position: sticky;
  top: 28px;
}

.gemX-preview {
  margin: 0;
}

.gemX-preview canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #f8f5ef;
}

.gemX-preview figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cadx-line);
  color: var(--cadx-ink);
  font: 700 10px/1.5 var(--cadx-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gemX-preview figcaption small {
  color: rgba(17, 17, 15, 0.42);
  font: inherit;
}

.gemX-controls {
  min-width: 0;
}

.gemX-fieldset {
  margin: 0;
  padding: 0 0 48px;
  border: 0;
  border-bottom: 1px solid var(--cadx-line);
}

.gemX-fieldset + .gemX-fieldset {
  padding-top: 48px;
}

.gemX-fieldset legend {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 28px;
  color: var(--cadx-ink);
  font: 400 clamp(30px, 3vw, 44px)/1 var(--cadx-serif);
}

.gemX-fieldset legend span {
  color: var(--cadx-gold);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.14em;
}

.gemX-stone-list,
.gemX-shape-list,
.gemX-metal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--cadx-line);
}

.gemX-stone-list button,
.gemX-shape-list button,
.gemX-metal-list button {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 13px;
  padding: 0 14px 0 0;
  border: 0;
  border-bottom: 1px solid var(--cadx-line);
  background: transparent;
  color: rgba(17, 17, 15, 0.58);
  font: 700 10px/1.35 var(--cadx-sans);
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.gemX-stone-list button:nth-child(even),
.gemX-shape-list button:nth-child(even),
.gemX-metal-list button:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--cadx-line);
}

.gemX-stone-list button i {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(17, 17, 15, 0.16);
}

.gemX-stone-list button.is-active,
.gemX-shape-list button.is-active,
.gemX-metal-list button.is-active {
  color: var(--cadx-ink);
}

.gemX-stone-list button.is-active i {
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cadx-gold);
}

.gemX-stone-description {
  min-height: 146px;
  margin-top: 28px;
  padding: 25px 0 0 44px;
  border-top: 1px solid var(--cadx-line);
}

.gemX-stone-description h3 {
  margin: 0;
  font: 400 34px/1 var(--cadx-serif);
}

.gemX-stone-description p {
  max-width: 560px;
  margin: 13px 0 0;
  color: rgba(17, 17, 15, 0.59);
  font: 400 12px/1.7 var(--cadx-sans);
}

.gemX-parti-control {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 12px;
  margin-top: 24px;
  color: var(--cadx-ink);
  font: 700 10px/1.4 var(--cadx-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.gemX-parti-control input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cadx-gold);
}

.gemX-parti-control small {
  grid-column: 2;
  color: rgba(17, 17, 15, 0.48);
  font: 400 10px/1.55 var(--cadx-sans);
  letter-spacing: 0;
  text-transform: none;
}

.gemX-shape-list button i {
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
}

.gemX-shape-list .shape-round { border-radius: 50%; }
.gemX-shape-list .shape-oval { border-radius: 50%; transform: scaleX(0.72); }
.gemX-shape-list .shape-cushion { border-radius: 6px; }
.gemX-shape-list .shape-emerald { height: 27px; clip-path: polygon(22% 0, 78% 0, 100% 18%, 100% 82%, 78% 100%, 22% 100%, 0 82%, 0 18%); }
.gemX-shape-list .shape-pear { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(0.82); }
.gemX-shape-list .shape-marquise { border-radius: 90% 0 90% 0; transform: rotate(-45deg) scale(0.8); }

.gemX-metal-list button i {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #8c6925, #f1d47a 46%, #9a6f20);
  box-shadow: 0 0 0 1px rgba(17, 17, 15, 0.14);
}

.gemX-metal-list [data-gem-metal="white"] i { background: linear-gradient(135deg, #777b80, #f4f5f5 48%, #a2a6aa); }
.gemX-metal-list [data-gem-metal="rose"] i { background: linear-gradient(135deg, #9b5d4a, #e7b3a0 48%, #9c6352); }
.gemX-metal-list [data-gem-metal="platinum"] i { background: linear-gradient(135deg, #666b70, #fff 48%, #898e93); }

.gemX-metal-list button.is-active i {
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cadx-gold);
}

.gemX-use-choice {
  padding-top: 48px;
}

.gemX-use-choice p {
  max-width: 570px;
  margin: 0 0 24px;
  color: rgba(17, 17, 15, 0.52);
  font: 400 11px/1.65 var(--cadx-sans);
}

.gemX-return {
  display: inline-flex;
  margin-left: 20px;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--cadx-gold);
  color: var(--cadx-ink);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gemX-nature {
  display: grid;
  grid-template-columns: minmax(400px, 0.78fr) minmax(520px, 1fr);
  gap: clamp(50px, 9vw, 144px);
  align-items: center;
  padding: clamp(90px, 11vw, 164px) clamp(40px, 8vw, 128px);
  background: var(--cadx-brown);
  color: #fff;
}

.gemX-nature h2 {
  margin-top: 24px;
  color: #fff;
}

.gemX-nature-copy > p:last-child {
  max-width: 580px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.62);
}

.gemX-nature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.gemX-nature-grid span {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: conic-gradient(from 15deg, var(--a), var(--b), var(--a), #f3e8c5, var(--b), var(--a));
  clip-path: polygon(50% 0, 84% 8%, 100% 40%, 87% 82%, 50% 100%, 13% 82%, 0 40%, 16% 8%);
}

.gemX-nature-grid span::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  clip-path: inherit;
}

.gemX-care {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(380px, 0.7fr);
  gap: clamp(52px, 9vw, 140px);
  align-items: end;
  padding: clamp(90px, 11vw, 164px) clamp(40px, 8vw, 128px);
  background: var(--cadx-ivory);
}

.gemX-care h2 {
  margin-top: 24px;
}

.gemX-care > div:last-child p + p {
  margin-top: 20px;
}

.gemX-page :focus-visible {
  outline: 2px solid var(--cadx-gold-bright);
  outline-offset: 4px;
}

@media (max-width: 1000px) {
  .gemX-hero {
    grid-template-columns: minmax(360px, 0.8fr) minmax(430px, 1fr);
    padding-inline: 48px;
  }

  .gemX-intro,
  .gemX-builder,
  .gemX-nature,
  .gemX-care {
    padding-inline: 48px;
  }

  .gemX-intro {
    grid-template-columns: 0.3fr 0.9fr;
  }

  .gemX-intro > p:last-child {
    grid-column: 2;
  }

  .gemX-builder {
    grid-template-columns: minmax(380px, 0.86fr) minmax(420px, 1fr);
    gap: 52px;
  }
}

@media (max-width: 800px) {
  .gemX-hero,
  .gemX-intro,
  .gemX-builder,
  .gemX-nature,
  .gemX-care {
    grid-template-columns: 1fr;
  }

  .gemX-hero {
    padding-top: 132px;
  }

  .gemX-hero-stone {
    min-height: 480px;
  }

  .gemX-hero-stone span {
    width: min(46vw, 330px);
  }

  .gemX-hero-note {
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 1;
    max-width: 580px;
    text-align: left;
  }

  .gemX-intro > p:last-child {
    grid-column: auto;
  }

  .gemX-preview-wrap {
    position: relative;
    top: auto;
  }
}

@media (max-width: 700px) {
  .gemX-page > .topbar {
    min-height: 82px;
  }

  .gemX-hero {
    min-height: 100dvh;
    gap: 20px;
    padding: 118px 20px 54px;
  }

  .gemX-hero h1 {
    font-size: clamp(62px, 18vw, 78px);
  }

  .gemX-hero-stone {
    min-height: 340px;
  }

  .gemX-hero-stone span {
    width: 220px;
  }

  .gemX-hero-stone i {
    width: 340px;
  }

  .gemX-intro,
  .gemX-builder,
  .gemX-nature,
  .gemX-care {
    gap: 34px;
    padding: 70px 20px;
  }

  .gemX-intro h2,
  .gemX-nature h2,
  .gemX-care h2 {
    font-size: clamp(50px, 14vw, 66px);
  }

  .gemX-preview figcaption {
    flex-direction: column;
    gap: 7px;
  }

  .gemX-fieldset {
    padding-bottom: 38px;
  }

  .gemX-fieldset + .gemX-fieldset {
    padding-top: 38px;
  }

  .gemX-stone-list,
  .gemX-shape-list,
  .gemX-metal-list {
    grid-template-columns: 1fr;
  }

  .gemX-stone-list button:nth-child(even),
  .gemX-shape-list button:nth-child(even),
  .gemX-metal-list button:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .gemX-stone-description {
    padding-left: 0;
  }

  .gemX-use-choice .cadX-button {
    width: 100%;
  }

  .gemX-return {
    margin: 18px 0 0;
  }

  .gemX-nature-grid {
    gap: 8px;
  }
}

/* Keep the latest CAD and gemstone layouts after the legacy responsive layer. */
.cadX-anatomy.cadX-anatomy-ledger {
  min-height: 0;
  grid-template-columns: minmax(340px, 0.7fr) minmax(560px, 1.15fr);
  align-items: start;
}

.gemX-page .gemX-hero {
  min-height: max(620px, 78dvh);
  grid-template-columns: minmax(0, 790px);
  justify-content: start;
}

.gemX-page .gemX-builder {
  grid-template-columns: minmax(500px, 1fr) minmax(500px, 0.92fr);
  background: #f2eee6;
}

.cadX-page .cadX-gem-bridge {
  background: #f2eee6;
}

.cadX-page .cadX-gem-stage::after {
  display: none;
}

.gemX-page .gemX-nature {
  display: flex;
  min-height: clamp(620px, 64vw, 860px);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(10, 10, 9, 0.94) 0%, rgba(10, 10, 9, 0.82) 34%, rgba(10, 10, 9, 0.16) 68%, rgba(10, 10, 9, 0.04) 100%),
    url("assets/gemstone-natural-variation-v2.png") 68% center / cover no-repeat;
}

@media (max-width: 1180px) {
  .cadX-anatomy.cadX-anatomy-ledger {
    grid-template-columns: minmax(300px, 0.68fr) minmax(480px, 1fr);
  }
}

@media (max-width: 900px) {
  .cadX-anatomy.cadX-anatomy-ledger,
  .gemX-page .gemX-builder {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .gemX-page .gemX-hero {
    min-height: 82dvh;
    grid-template-columns: 1fr;
  }

  .gemX-page .gemX-nature {
    min-height: 680px;
    align-items: flex-start;
    background:
      linear-gradient(180deg, rgba(10, 10, 9, 0.95) 0%, rgba(10, 10, 9, 0.72) 46%, rgba(10, 10, 9, 0.08) 78%),
      url("assets/gemstone-natural-variation-v2.png") 70% center / cover no-repeat;
  }
}

/* Compact bespoke journey and refined gemstone controls. */
.cadX-page .cadX-design-builder {
  padding: clamp(58px, 6vw, 92px) clamp(38px, 8vw, 128px) clamp(66px, 7vw, 104px);
}

.cadX-page .cadX-design-heading {
  gap: clamp(30px, 5vw, 76px);
}

.cadX-page .cadX-design-heading h2 {
  margin-top: 14px;
  font-size: clamp(50px, 5.7vw, 86px);
}

.cadX-page .cadX-design-route {
  margin: clamp(28px, 3.5vw, 46px) auto;
}

.cadX-page .cadX-category-tabs {
  gap: 9px;
}

.cadX-page .cadX-category-tabs img {
  aspect-ratio: 1.28;
}

.cadX-page .cadX-category-tabs button > span {
  min-height: 46px;
  padding: 13px 14px;
  font-size: clamp(19px, 1.75vw, 27px);
}

.cadX-page .cadX-style-heading {
  margin: clamp(42px, 5vw, 68px) auto 22px;
  padding-top: 24px;
}

.cadX-page .cadX-style-heading h3 {
  font-size: clamp(35px, 3.4vw, 52px);
}

.cadX-page .cadX-style-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cadX-page .cadX-style-grid img {
  aspect-ratio: 1;
}

.cadX-page .cadX-style-grid button > span {
  min-height: 82px;
  gap: 6px;
  padding: 15px 15px 17px;
}

.cadX-page .cadX-style-grid strong {
  font-size: clamp(22px, 1.8vw, 30px);
}

.cadX-page .cadX-style-grid small {
  font-size: 10px;
}

.cadX-page .cadX-gem-bridge {
  min-height: 0;
  gap: clamp(36px, 5vw, 76px);
  padding: clamp(64px, 7vw, 104px) clamp(38px, 8vw, 128px);
}

.cadX-page .cadX-gem-stage,
.cadX-page .cadX-gem-stage iframe {
  min-height: clamp(640px, 74vw, 900px);
  height: clamp(640px, 74vw, 900px);
}

.cadX-page .cadX-gem-copy h2,
.cadX-page .cadX-metals-copy h2 {
  font-size: clamp(50px, 5.2vw, 82px);
}

.cadX-page .cadX-metals {
  gap: clamp(38px, 6vw, 88px);
  padding: clamp(66px, 7vw, 108px) clamp(38px, 8vw, 128px);
}

.gemX-page .gemX-intro {
  gap: clamp(28px, 4vw, 58px);
  padding: clamp(58px, 6vw, 88px) clamp(40px, 8vw, 128px);
}

.gemX-page .gemX-intro h2 {
  font-size: clamp(50px, 5.4vw, 82px);
}

.gemX-page .gemX-builder {
  gap: clamp(36px, 5vw, 72px);
  padding: clamp(56px, 6vw, 88px) clamp(40px, 8vw, 128px);
}

.gemX-page .gemX-render-stage,
.gemX-page .gemX-render-stage iframe {
  min-height: 540px;
  height: 540px;
}

.gemX-page .gemX-fieldset {
  padding-bottom: 30px;
}

.gemX-page .gemX-fieldset + .gemX-fieldset {
  padding-top: 30px;
}

.gemX-page .gemX-fieldset legend {
  margin-bottom: 20px;
  font-size: clamp(28px, 2.5vw, 38px);
}

.gemX-page .gemX-cut-list button {
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 10px;
}

.gemX-page .gemX-cut-list button i,
.gemX-page .gemX-cut-list [data-guide-cut] i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  opacity: 1;
  transform: none;
}

.gemX-page .gemX-cut-list button i svg {
  display: block;
  width: 36px;
  height: 36px;
  overflow: visible;
}

.gemX-page .gemX-use-choice {
  padding-top: 30px;
}

@media (max-width: 1180px) {
  .cadX-page .cadX-style-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cadX-page .cadX-style-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cadX-page .cadX-gem-stage,
  .cadX-page .cadX-gem-stage iframe {
    min-height: 600px;
    height: 600px;
  }
}

@media (max-width: 700px) {
  .cadX-page .cadX-design-builder {
    padding: 52px 20px 58px;
  }

  .cadX-page .cadX-design-heading {
    gap: 16px;
  }

  .cadX-page .cadX-design-heading h2 {
    font-size: clamp(45px, 13vw, 58px);
  }

  .cadX-page .cadX-design-route {
    margin: 26px 0 30px;
  }

  .cadX-page .cadX-category-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .cadX-page .cadX-category-tabs button {
    overflow: hidden;
  }

  .cadX-page .cadX-category-tabs img {
    aspect-ratio: 1;
  }

  .cadX-page .cadX-category-tabs button > span {
    display: grid;
    min-height: 36px;
    place-items: center;
    padding: 7px 1px;
    font: 400 10px/1.1 var(--cadx-serif);
    text-align: center;
  }

  .cadX-page .cadX-category-tabs button.is-active::after {
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .cadX-page .cadX-style-heading {
    margin-top: 36px;
    padding-top: 20px;
  }

  .cadX-page .cadX-style-heading h3 {
    font-size: 36px;
  }

  .cadX-page .cadX-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .cadX-page .cadX-style-grid button > span {
    min-height: 78px;
    padding: 12px;
  }

  .cadX-page .cadX-style-grid strong {
    font-size: 23px;
  }

  .cadX-page .cadX-gem-bridge,
  .cadX-page .cadX-metals {
    gap: 30px;
    padding: 54px 20px;
  }

  .cadX-page .cadX-gem-stage,
  .cadX-page .cadX-gem-stage iframe {
    min-height: 520px;
    height: 520px;
  }

  .cadX-page .cadX-gem-copy h2,
  .cadX-page .cadX-metals-copy h2 {
    font-size: clamp(45px, 13vw, 58px);
  }

  .gemX-page .gemX-intro,
  .gemX-page .gemX-builder {
    gap: 24px;
    padding: 52px 20px;
  }

  .gemX-page .gemX-intro h2 {
    font-size: clamp(45px, 13vw, 58px);
  }

  .gemX-page .gemX-render-stage,
  .gemX-page .gemX-render-stage iframe {
    min-height: 340px;
    height: 340px;
  }

  .gemX-page .gemX-cut-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gemX-page .gemX-cut-list button {
    min-height: 68px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 6px 8px;
    font-size: 8px;
  }

  .gemX-page .gemX-cut-list button i,
  .gemX-page .gemX-cut-list [data-guide-cut] i,
  .gemX-page .gemX-cut-list button i svg {
    width: 32px;
    height: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Size and length step - 2026-08-23
   Sits between the piece choice and the gemstone stage so a size is decided
   before stones are placed. The route strip is now four steps wide.
--------------------------------------------------------------------------- */

.cadX-design-route {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 900px;
}

.cadX-sizing {
  padding: clamp(78px, 9vw, 132px) clamp(38px, 8vw, 128px);
  background: #fff;
}

.cadX-sizing-heading {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.56fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: end;
  max-width: 1420px;
  margin: 0 auto 44px;
}

.cadX-sizing-heading h2 {
  max-width: 820px;
  margin: 18px 0 0;
  color: var(--cadx-ink);
  font: 400 clamp(48px, 5.2vw, 82px)/0.94 var(--cadx-serif);
}

.cadX-sizing-heading > p {
  margin: 0 0 6px;
  color: rgba(17, 17, 15, 0.61);
  font: 400 14px/1.76 var(--cadx-sans);
}

.cadX-size-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1420px;
  margin: 0 auto;
}

.cadX-size-grid.is-chips {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.cadX-size-grid button {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 20px 22px;
  border: 1px solid rgba(17, 17, 15, 0.12);
  background: #fdfcfa;
  color: var(--cadx-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms var(--cadx-ease);
}

.cadX-size-grid.is-chips button {
  min-height: 68px;
  padding: 16px 10px;
  place-content: center;
  text-align: center;
}

.cadX-size-grid button:hover,
.cadX-size-grid button:focus-visible {
  border-color: var(--cadx-gold);
  background: #fffdf7;
  transform: translateY(-2px);
}

.cadX-size-grid button.is-active {
  border-color: var(--cadx-gold);
  background: #fff8e8;
}

.cadX-size-grid strong {
  font: 400 clamp(24px, 2.1vw, 32px)/1 var(--cadx-serif);
}

.cadX-size-grid.is-chips strong {
  font-size: clamp(22px, 1.9vw, 30px);
}

.cadX-size-grid small {
  color: rgba(17, 17, 15, 0.56);
  font: 500 11px/1.5 var(--cadx-sans);
}

.cadX-size-grid button.cadX-size-unsure {
  grid-column: 1 / -1;
  min-height: 80px;
  border-style: dashed;
  background: transparent;
}

.cadX-size-grid button.cadX-size-unsure strong {
  font-size: clamp(22px, 1.9vw, 30px);
}

.cadX-sizing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1420px;
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--cadx-line);
}

.cadX-sizing-note {
  max-width: 720px;
  margin: 0;
  color: rgba(17, 17, 15, 0.52);
  font: 400 12px/1.7 var(--cadx-sans);
}

@media (max-width: 1180px) {
  .cadX-size-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cadX-size-grid.is-chips {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cadX-sizing-heading {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .cadX-sizing {
    padding: 66px 20px 72px;
  }

  .cadX-sizing-heading {
    gap: 22px;
    margin-bottom: 30px;
  }

  .cadX-sizing-heading h2 {
    font-size: clamp(42px, 12.5vw, 58px);
  }

  .cadX-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cadX-size-grid.is-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cadX-size-grid button {
    min-height: 84px;
    padding: 16px 16px;
  }

  .cadX-sizing-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .cadX-sizing-foot .cadX-button {
    text-align: center;
  }
}

.cadX-gem-context em {
  color: rgba(17, 17, 15, 0.58);
  font: 500 11px/1.5 var(--cadx-sans);
  font-style: normal;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Size step, second pass - 2026-08-23
   The options sit in a panel beside a diagram of what is being measured, so
   the choice is understood rather than guessed.
--------------------------------------------------------------------------- */

.cadX-sizing-body {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(300px, 0.68fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: start;
  max-width: 1420px;
  margin: 0 auto;
}

.cadX-size-panel {
  min-width: 0;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(17, 17, 15, 0.14);
  background: #fdfcfa;
}

.cadX-size-panel-label {
  margin: 0 0 20px;
  color: rgba(17, 17, 15, 0.48);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-size-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cadX-size-grid.is-chips {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cadX-size-grid button {
  background: #fff;
}

.cadX-size-guide {
  display: grid;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(17, 17, 15, 0.14);
  background: var(--cadx-ivory);
}

.cadX-size-diagram {
  color: var(--cadx-ink);
}

.cadX-size-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.cadX-diagram-label {
  fill: currentColor;
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  opacity: 0.72;
}

.cadX-diagram-note {
  fill: currentColor;
  font: 700 8px/1 var(--cadx-sans);
  letter-spacing: 0.12em;
  opacity: 0.5;
}

.cadX-size-guide figcaption {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 17, 15, 0.12);
  color: rgba(17, 17, 15, 0.6);
  font: 400 12px/1.7 var(--cadx-sans);
}

/* ---------------------------------------------------------------------------
   Closing call to action - 2026-08-23
   One way to get in touch, with the copy given the width it needs and columns
   that separate early enough never to collide.
--------------------------------------------------------------------------- */

.cadX-enquire {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.62fr);
  align-items: start;
}

.cadX-enquire-copy {
  min-width: 0;
}

.cadX-enquire h2 {
  max-width: 13ch;
  margin: 20px 0 0;
  font-size: clamp(52px, 5.6vw, 92px);
  line-height: 0.94;
}

.cadX-enquire-lead {
  max-width: 62ch;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font: 400 clamp(14px, 1.15vw, 17px)/1.76 var(--cadx-sans);
}

.cadX-enquire-side {
  display: grid;
  justify-items: start;
  gap: 18px;
  min-width: 0;
  padding-top: clamp(10px, 3vw, 54px);
}

.cadX-button-wide {
  width: 100%;
  max-width: 420px;
  padding-block: 22px;
  text-align: center;
}

.cadX-enquire-reply {
  max-width: 42ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font: 400 12px/1.7 var(--cadx-sans);
}

.cadX-enquire .cadX-back-top {
  margin-top: 6px;
}

@media (max-width: 1180px) {
  .cadX-size-grid.is-chips {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .cadX-sizing-body {
    grid-template-columns: 1fr;
  }

  .cadX-size-guide {
    max-width: 520px;
  }

  .cadX-enquire {
    grid-template-columns: 1fr;
  }

  .cadX-enquire h2 {
    max-width: 16ch;
  }

  .cadX-enquire-side {
    padding-top: 0;
  }
}

@media (max-width: 700px) {
  .cadX-size-panel,
  .cadX-size-guide {
    padding: 22px 18px;
  }

  .cadX-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cadX-size-grid.is-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cadX-button-wide {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   Metals and gemstones - 2026-08-23
   The metal control reuses the shop filter's hallmark-badge buttons so the two
   parts of the site read as one. Gemstones borrow the shop's list of stones but
   keep this page's own button treatment, with colour variants revealed only for
   the stones that actually have them.
--------------------------------------------------------------------------- */

.cadX-metal-controls.metal-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 32px;
  border-top: 0;
}

.cadX-metal-controls .metal-filter {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  min-height: 48px;
  align-items: center;
  padding: 6px 12px 6px 8px;
  border: 1px solid rgba(17, 17, 15, 0.14);
  background: #fff;
  color: rgba(17, 17, 15, 0.78);
  font: 700 10px/1.3 var(--cadx-sans);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.cadX-metal-controls .metal-filter:nth-child(even) {
  padding-left: 8px;
  border-left: 1px solid rgba(17, 17, 15, 0.14);
}

.cadX-metal-controls .metal-filter span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(17, 17, 15, 0.18);
  border-radius: 50%;
  color: #111;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cadX-metal-controls .metal-filter:hover,
.cadX-metal-controls .metal-filter:focus-visible {
  border-color: var(--cadx-gold);
  background: #fffdf7;
}

.cadX-metal-controls .metal-filter.is-active {
  border-color: var(--cadx-gold);
  background: #fff8e8;
  color: var(--cadx-ink);
}

.cadX-gem-picker {
  margin-top: 28px;
}

.cadX-gem-picker-label {
  margin: 0 0 12px;
  color: rgba(17, 17, 15, 0.48);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-gem-stones {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cadX-gem-stones button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(17, 17, 15, 0.14);
  background: #fff;
  color: rgba(17, 17, 15, 0.78);
  font: 600 11px/1 var(--cadx-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.cadX-gem-stones button:hover,
.cadX-gem-stones button:focus-visible {
  border-color: var(--cadx-gold);
  background: #fffdf7;
}

.cadX-gem-stones button.is-active {
  border-color: var(--cadx-gold);
  background: #fff8e8;
  color: var(--cadx-ink);
}

.cadX-gem-stones.is-variants button {
  min-height: 34px;
  padding: 0 13px;
  border-style: dashed;
  font-size: 10px;
}

.cadX-gem-stones.is-variants button.is-active {
  border-style: solid;
}

.cadX-gem-variants {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cadx-line);
}

.cadX-gem-stone-note {
  max-width: 60ch;
  margin: 14px 0 0;
  color: rgba(17, 17, 15, 0.55);
  font: 400 11px/1.65 var(--cadx-sans);
}

.cadX-gem-controls {
  grid-template-columns: minmax(0, 1fr);
  max-width: 340px;
}

@media (max-width: 700px) {
  .cadX-metal-controls.metal-options {
    grid-template-columns: 1fr;
  }

  .cadX-metal-controls .metal-filter:nth-child(even) {
    padding-left: 8px;
    border-left: 1px solid rgba(17, 17, 15, 0.14);
  }

  .cadX-gem-controls {
    max-width: none;
  }
}

/* Gemstone guide: the same stone list, in that page's own button language. */

.gemX-stone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.gemX-stone-list button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(17, 17, 15, 0.14);
  background: #fff;
  color: rgba(17, 17, 15, 0.78);
  font: 600 11px/1 var(--cadx-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.gemX-stone-list button:hover,
.gemX-stone-list button:focus-visible {
  border-color: var(--cadx-gold);
  background: #fffdf7;
}

.gemX-stone-list button.is-active {
  border-color: var(--cadx-gold);
  background: #fff8e8;
  color: var(--cadx-ink);
}

.gemX-stone-list.is-variants button {
  min-height: 34px;
  padding: 0 13px;
  border-style: dashed;
  font-size: 10px;
}

.gemX-stone-list.is-variants button.is-active {
  border-style: solid;
}

.gemX-variant-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cadx-line);
}

.gemX-variant-label {
  margin: 0 0 12px;
  color: rgba(17, 17, 15, 0.48);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gemX-stone-note {
  max-width: 60ch;
  margin: 14px 0 0;
  color: rgba(17, 17, 15, 0.55);
  font: 400 11px/1.65 var(--cadx-sans);
}

/* The two gemstone actions wrap rather than squeezing onto one tight line. */

.cadX-gem-actions {
  flex-wrap: wrap;
}

/* The guide's two columns each demanded 500px, which overflowed the page
   between 900px and roughly 1200px wide. Neither column needs that much. */

.gemX-page .gemX-builder {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
}

.gemX-page .gemX-preview-wrap,
.gemX-page .gemX-controls {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Gemstone guide hero - 2026-08-23
   The page became a showcase: one stone turns in the hero and moves through
   the cuts and colours, so the manual picker moved to the design page.
--------------------------------------------------------------------------- */

.gemX-page .gemX-hero {
  grid-template-columns: minmax(360px, 0.82fr) minmax(420px, 1fr);
  justify-content: stretch;
  align-items: center;
}

.gemX-hero-copy > p {
  max-width: 52ch;
  margin: 26px 0 0;
  color: rgba(248, 244, 237, 0.68);
  font: 400 14px/1.78 var(--cadx-sans);
}

.gemX-hero-stage {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  min-width: 0;
  margin: 0;
}

.gemX-hero-viewer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.gemX-hero-viewer iframe {
  display: block;
  width: 100%;
  height: clamp(400px, 52vw, 660px);
  border: 0;
  background: transparent;
}

.gemX-hero-stage figcaption {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(213, 182, 96, 0.24);
}

.gemX-hero-stage figcaption strong {
  color: #f8f4ed;
  font: 400 clamp(24px, 2.2vw, 34px)/1.1 var(--cadx-serif);
}

.gemX-hero-stage figcaption span {
  color: rgba(248, 244, 237, 0.5);
  font: 700 9px/1.4 var(--cadx-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .gemX-page .gemX-hero {
    grid-template-columns: 1fr;
  }

  .gemX-hero-viewer iframe {
    height: clamp(340px, 74vw, 480px);
  }
}

@media (max-width: 700px) {
  .gemX-hero-stage figcaption {
    padding-top: 12px;
  }
}

/* With the stone now in the hero, the standing note moves under the copy
   rather than sitting on top of the live caption. */

.gemX-page .gemX-hero-note {
  right: auto;
  bottom: 34px;
  left: clamp(40px, 8vw, 128px);
  max-width: 46ch;
  text-align: left;
}

@media (max-width: 900px) {
  .gemX-page .gemX-hero-note {
    position: relative;
    bottom: auto;
    left: auto;
    grid-column: 1;
    margin-top: 10px;
  }
}

/* ---------------------------------------------------------------------------
   Closing call to action and design summary - 2026-08-23
   The button spans the whole section, and pressing it walks the page down to a
   read-back of every choice rather than jumping straight to the contact form.
--------------------------------------------------------------------------- */

.cadX-enquire {
  align-items: start;
  row-gap: clamp(34px, 4vw, 58px);
}

.cadX-megabutton {
  display: grid;
  grid-column: 1 / -1;
  gap: 14px;
  width: 100%;
  padding: clamp(38px, 5vw, 74px) clamp(24px, 4vw, 56px);
  border: 0;
  background: var(--cadx-gold);
  color: #14140f;
  cursor: pointer;
  text-align: center;
  transition: background 320ms ease, transform 520ms var(--cadx-ease);
}

.cadX-megabutton:hover,
.cadX-megabutton:focus-visible {
  background: var(--cadx-gold-bright);
  transform: translateY(-3px);
}

.cadX-megabutton-label {
  font: 400 clamp(46px, 6.4vw, 104px)/0.94 var(--cadx-serif);
  letter-spacing: -0.01em;
}

.cadX-megabutton-sub {
  color: rgba(20, 20, 15, 0.62);
  font: 800 10px/1 var(--cadx-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cadX-summary {
  padding: clamp(80px, 9vw, 140px) clamp(38px, 8vw, 128px);
  background: var(--cadx-ivory);
  scroll-margin-top: 90px;
  outline: 0;
}

.cadX-summary.is-lit .cadX-summary-list {
  animation: cadX-summary-lift 2400ms ease;
}

@keyframes cadX-summary-lift {
  0% { box-shadow: 0 0 0 0 rgba(200, 162, 74, 0); }
  22% { box-shadow: 0 0 0 6px rgba(200, 162, 74, 0.26); }
  100% { box-shadow: 0 0 0 0 rgba(200, 162, 74, 0); }
}

.cadX-summary-heading {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.58fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  max-width: 1420px;
  margin: 0 auto 40px;
}

.cadX-summary-heading h2 {
  margin: 18px 0 0;
  font: 400 clamp(46px, 5vw, 80px)/0.95 var(--cadx-serif);
}

.cadX-summary-heading > p {
  margin: 0 0 6px;
  color: rgba(17, 17, 15, 0.6);
  font: 400 14px/1.76 var(--cadx-sans);
}

.cadX-summary-list {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--cadx-line);
  background: #fdfcfa;
}

.cadX-summary-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 60px);
  align-items: baseline;
  padding: clamp(18px, 2.1vw, 28px) clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid var(--cadx-line);
}

.cadX-summary-row dt {
  color: rgba(17, 17, 15, 0.5);
  font: 800 9px/1.4 var(--cadx-sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.cadX-summary-row dd {
  margin: 0;
  color: var(--cadx-ink);
  font: 400 clamp(19px, 1.7vw, 26px)/1.34 var(--cadx-serif);
}

.cadX-summary-foot {
  display: grid;
  gap: 16px;
  justify-items: center;
  max-width: 720px;
  margin: clamp(34px, 4vw, 54px) auto 0;
  text-align: center;
}

.cadX-summary-foot p {
  margin: 0;
  color: rgba(17, 17, 15, 0.52);
  font: 400 12px/1.7 var(--cadx-sans);
}

.cadX-back-top {
  font-size: 10px;
  letter-spacing: 0.18em;
}

@media (max-width: 1080px) {
  .cadX-summary-heading {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .cadX-summary {
    padding: 66px 20px 74px;
  }

  .cadX-megabutton {
    padding: 34px 20px;
  }

  .cadX-summary-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Guided flow, tighter copy, mobile - 2026-08-23
   Each step fills the screen when you arrive at it, the closing section holds
   the summary and the button together, and the whole page is sized for a phone.
--------------------------------------------------------------------------- */

.cadX-sizing,
.cadX-gem-bridge,
.cadX-metals,
.cadX-enquire {
  min-height: 100svh;
  align-content: center;
  scroll-margin-top: 64px;
}

.cadX-continue {
  border: 0;
  cursor: pointer;
  font: 700 10px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-metals-copy .cadX-continue {
  margin-top: 30px;
  padding: 20px 30px;
}

/* The ring drifts between alloys until one is chosen. */
.cadX-metal-viewer {
  transition: opacity 620ms ease;
}

.cadX-metal-viewer.is-fading {
  opacity: 0.12;
}

.cadX-diagram-size {
  fill: currentColor;
  font: 400 34px/1 var(--cadx-serif);
  opacity: 0.32;
}

/* Closing section: what you chose, then one way to send it. */
.cadX-enquire {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 40px);
  justify-items: center;
  text-align: center;
}

.cadX-enquire-copy {
  max-width: 900px;
}

.cadX-enquire h2 {
  max-width: none;
  margin: 14px 0 0;
  font-size: clamp(42px, 4.6vw, 74px);
}

.cadX-enquire .cadX-summary-list {
  width: 100%;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.05);
  border-top-color: rgba(255, 255, 255, 0.16);
  text-align: left;
}

.cadX-enquire .cadX-summary-row {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.cadX-enquire .cadX-summary-row dt {
  color: rgba(255, 255, 255, 0.48);
}

.cadX-enquire .cadX-summary-row dd {
  color: #fff;
}

.cadX-enquire-actions {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
}

.cadX-enquire-actions .cadX-button-wide {
  max-width: none;
  padding-block: 26px;
  font-size: 12px;
  letter-spacing: 0.2em;
}

.cadX-enquire-reply {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font: 400 12px/1.7 var(--cadx-sans);
  text-align: center;
}

/* An arrow that points down into the questions. */
.cadX-faq-cue {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(38px, 5vw, 64px) 20px clamp(26px, 3vw, 40px);
  background: var(--cadx-ivory);
  color: rgba(17, 17, 15, 0.55);
  font: 700 9px/1 var(--cadx-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.cadX-faq-cue svg {
  width: 20px;
  height: 26px;
  fill: none;
  stroke: var(--cadx-gold);
  stroke-width: 1.4;
  animation: cadX-cue-drift 2400ms ease-in-out infinite;
}

@keyframes cadX-cue-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.cadX-faq-cue:hover svg {
  stroke: var(--cadx-ink);
}

/* One way back to the top, centred under the questions. */
.cadX-faq .cadX-back-top {
  display: flex;
  justify-content: center;
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--cadx-line);
  max-width: 1420px;
}

@media (prefers-reduced-motion: reduce) {
  .cadX-faq-cue svg { animation: none; }
}

/* --- Phone ------------------------------------------------------------- */

@media (max-width: 700px) {
  .cadX-sizing,
  .cadX-gem-bridge,
  .cadX-metals,
  .cadX-enquire {
    min-height: 0;
  }

  .cadX-hero-object {
    min-height: 44dvh;
  }

  .cadX-subnav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cadX-subnav::-webkit-scrollbar { display: none; }

  .cadX-gem-stage,
  .cadX-gem-stage iframe {
    min-height: 62vw;
    height: 62vw;
  }

  .cadX-metal-viewer {
    min-height: 68vw;
  }

  .cadX-gem-actions {
    gap: 14px;
  }

  .cadX-enquire h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .cadX-enquire-actions .cadX-button-wide {
    padding-block: 20px;
    font-size: 11px;
  }

  .cadX-metals-copy .cadX-continue {
    width: 100%;
    margin-top: 22px;
    text-align: center;
  }

  .cadX-sizing-foot .cadX-continue {
    width: 100%;
  }
}

/* The stone is sized to fit the screen now that each step fills it, so there
   is no need to zoom and nothing gets cropped by the stage. */

.cadX-page .cadX-gem-stage,
.cadX-page .cadX-gem-stage iframe {
  min-height: min(68svh, 760px);
  height: min(68svh, 760px);
}

@media (max-width: 700px) {
  .cadX-page .cadX-gem-stage,
  .cadX-page .cadX-gem-stage iframe {
    min-height: min(52svh, 420px);
    height: min(52svh, 420px);
  }
}

/* ---------------------------------------------------------------------------
   One screen per step - 2026-08-23
   Size, gemstones and metal each occupy exactly the space under the sticky
   sub-nav: no neighbouring section bleeds in, and nothing runs off the bottom
   at any width. Design is the exception - it has too many options to fit, so
   it scrolls normally.
--------------------------------------------------------------------------- */

.cadX-page .cadX-sizing,
.cadX-page .cadX-gem-bridge,
.cadX-page .cadX-metals {
  height: calc(100svh - var(--cadX-nav, 57px));
  min-height: 520px;
  align-content: stretch;
  overflow: hidden;
  padding-block: clamp(16px, 3.4svh, 46px);
  scroll-margin-top: var(--cadX-nav, 57px);
}

.cadX-page .cadX-enquire {
  min-height: calc(100svh - var(--cadX-nav, 57px));
  scroll-margin-top: var(--cadX-nav, 57px);
}

/* Every step is a column that owns its own height. Where the choices are too
   many for the space, they scroll inside the step rather than pushing the
   page around them. */

.cadX-page .cadX-sizing {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.6svh, 22px);
}

.cadX-page .cadX-sizing-heading {
  margin-bottom: 0;
}

.cadX-page .cadX-sizing-heading h2 {
  margin-top: 10px;
  font-size: clamp(30px, 4.4svh, 62px);
}

.cadX-page .cadX-sizing-body {
  min-height: 0;
  align-items: stretch;
}

.cadX-page .cadX-size-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: clamp(14px, 2.2svh, 32px);
}

.cadX-page .cadX-size-panel-label {
  margin-bottom: clamp(8px, 1.6svh, 18px);
}

.cadX-page .cadX-size-grid {
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
  scrollbar-width: thin;
}

.cadX-page .cadX-size-guide {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(14px, 2.2svh, 32px);
}

.cadX-page .cadX-size-diagram {
  display: grid;
  min-height: 0;
  place-items: center;
}

.cadX-page .cadX-size-diagram svg {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.cadX-page .cadX-sizing-foot {
  margin-top: 0;
  padding-top: clamp(12px, 1.8svh, 22px);
}

/* --- Gemstones --------------------------------------------------------- */

.cadX-page .cadX-gem-bridge {
  align-items: stretch;
}

.cadX-page .cadX-gem-studio {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.cadX-page .cadX-gem-stage,
.cadX-page .cadX-gem-stage iframe {
  min-height: 0;
  height: 100%;
}

.cadX-page .cadX-gem-copy {
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.cadX-page .cadX-gem-context {
  margin-top: 0;
}

/* --- Metal ------------------------------------------------------------- */

.cadX-page .cadX-metals {
  align-items: stretch;
}

.cadX-page .cadX-metals-copy {
  display: grid;
  align-content: center;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.cadX-page .cadX-metals-copy h2 {
  font-size: clamp(30px, 5svh, 74px);
}

.cadX-page .cadX-metal-controls.metal-options {
  margin-top: clamp(12px, 2.2svh, 32px);
}

.cadX-page .cadX-metal-study {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.cadX-page .cadX-metal-viewer {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

@media (max-width: 900px) {
  .cadX-page .cadX-gem-bridge,
  .cadX-page .cadX-metals {
    grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .cadX-page .cadX-sizing-body {
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

@media (max-width: 700px) {
  .cadX-page .cadX-sizing,
  .cadX-page .cadX-gem-bridge,
  .cadX-page .cadX-metals {
    gap: clamp(8px, 1.4svh, 18px);
    padding-inline: 16px;
  }

  .cadX-page .cadX-gem-bridge,
  .cadX-page .cadX-metals {
    grid-template-rows: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .cadX-page .cadX-metals-copy h2,
  .cadX-page .cadX-gem-copy h2 {
    font-size: clamp(26px, 4.4svh, 40px);
  }

  .cadX-page .cadX-metal-controls .metal-filter {
    min-height: 40px;
    font-size: 9px;
  }
}

/* Where a step's choices scroll inside it, the scrollbar stays quiet. */

.cadX-page .cadX-size-grid,
.cadX-page .cadX-gem-copy,
.cadX-page .cadX-metals-copy {
  scrollbar-color: rgba(17, 17, 15, 0.18) transparent;
  overscroll-behavior: contain;
}

.cadX-page .cadX-size-grid::-webkit-scrollbar,
.cadX-page .cadX-gem-copy::-webkit-scrollbar,
.cadX-page .cadX-metals-copy::-webkit-scrollbar {
  width: 4px;
}

.cadX-page .cadX-size-grid::-webkit-scrollbar-thumb,
.cadX-page .cadX-gem-copy::-webkit-scrollbar-thumb,
.cadX-page .cadX-metals-copy::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(17, 17, 15, 0.18);
}

.cadX-page .cadX-size-grid::-webkit-scrollbar-track,
.cadX-page .cadX-gem-copy::-webkit-scrollbar-track,
.cadX-page .cadX-metals-copy::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Hero and pinned step buttons - 2026-08-23
   The hero is a photograph with the words centred over it and one way forward.
   The button that moves you to the next step stays on screen while the choices
   above it scroll.
--------------------------------------------------------------------------- */

.cadX-page .cadX-hero-image {
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(92px, 13svh, 170px) clamp(20px, 6vw, 80px) clamp(32px, 5svh, 80px);
  overflow: hidden;
  text-align: center;
}

/* The words are centred, so anything taller than the hero would be clipped at
   both ends. The copy is capped to the space and never overflows it. */
.cadX-page .cadX-hero-image .cadX-hero-copy {
  max-height: 100%;
}

.cadX-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(0.52) saturate(0.92);
}

.cadX-page .cadX-hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(10, 10, 9, 0.24) 0%, rgba(10, 10, 9, 0.72) 72%),
    linear-gradient(180deg, rgba(10, 10, 9, 0.62) 0%, rgba(10, 10, 9, 0.18) 42%, rgba(10, 10, 9, 0.82) 100%);
  background-size: auto;
}

.cadX-page .cadX-hero-image .cadX-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 940px;
}

.cadX-page .cadX-hero-image h1 {
  margin: clamp(10px, 1.8svh, 20px) 0 0;
  color: #f8f4ed;
  font: 400 clamp(38px, min(9.4svh, 13.5vw), 122px)/0.92 var(--cadx-serif);
}

.cadX-page .cadX-hero-image h1 em {
  color: var(--cadx-gold-bright);
  font-style: italic;
}

.cadX-page .cadX-hero-image .cadX-hero-deck {
  max-width: 46ch;
  margin: clamp(16px, 2.4svh, 30px) 0 0;
  color: rgba(248, 244, 237, 0.76);
  font: 400 clamp(13px, 1.9svh, 17px)/1.72 var(--cadx-sans);
}

.cadX-hero-start {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2svh, 22px);
  margin-top: clamp(26px, 4.6svh, 58px);
  color: #f8f4ed;
  font: 800 clamp(10px, 1.5svh, 12px)/1 var(--cadx-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}

.cadX-hero-start svg {
  width: clamp(34px, 5.4svh, 52px);
  height: auto;
  fill: none;
  stroke: var(--cadx-gold-bright);
  stroke-width: 2.2;
  animation: cadX-hero-drift 2600ms ease-in-out infinite;
}

.cadX-hero-start:hover svg,
.cadX-hero-start:focus-visible svg {
  stroke: #fff;
}

@keyframes cadX-hero-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .cadX-hero-start svg { animation: none; }
}

/* --- The way forward stays put ------------------------------------------ */

.cadX-page .cadX-gem-copy,
.cadX-page .cadX-metals-copy {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  padding-right: 0;
}

.cadX-gem-scroll,
.cadX-metals-scroll {
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
  scrollbar-color: rgba(17, 17, 15, 0.18) transparent;
}

.cadX-gem-scroll::-webkit-scrollbar,
.cadX-metals-scroll::-webkit-scrollbar {
  width: 4px;
}

.cadX-gem-scroll::-webkit-scrollbar-thumb,
.cadX-metals-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(17, 17, 15, 0.18);
}

.cadX-page .cadX-gem-actions,
.cadX-page .cadX-metals-copy .cadX-continue {
  margin-top: 0;
  padding-top: clamp(12px, 1.8svh, 22px);
  border-top: 1px solid var(--cadx-line);
  background: inherit;
}

.cadX-page .cadX-metals-copy .cadX-continue {
  justify-self: start;
  padding: clamp(14px, 2.2svh, 22px) 30px;
}

@media (max-width: 700px) {
  .cadX-page .cadX-metals-copy .cadX-continue {
    justify-self: stretch;
    text-align: center;
  }

  .cadX-page .cadX-hero-image {
    padding-top: clamp(96px, 13svh, 140px);
  }
}

/* ---------------------------------------------------------------------------
   Size step, redesigned - 2026-08-23
   Laid out the way a jeweller's size guide works: pick from a single strip of
   sizes, see the actual measurements behind that size, and read how to measure
   if you do not know it. No "not sure" button - leaving it unchosen does that.
--------------------------------------------------------------------------- */

.cadX-page .cadX-sizing {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.2svh, 30px);
}

.cadX-sizing-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  max-width: 1420px;
  width: 100%;
  margin: 0 auto;
}

.cadX-sizing-head h2 {
  margin: 10px 0 0;
  font: 400 clamp(30px, 4.6svh, 66px)/0.96 var(--cadx-serif);
}

.cadX-sizing-head > p {
  margin: 0 0 4px;
  color: rgba(17, 17, 15, 0.6);
  font: 400 13px/1.72 var(--cadx-sans);
}

/* One strip of sizes, the way a size picker normally works. */
.cadX-size-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 1420px;
  width: 100%;
  margin: 0 auto;
}

.cadX-size-strip button {
  min-width: 52px;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid rgba(17, 17, 15, 0.16);
  background: #fff;
  color: var(--cadx-ink);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.cadX-size-strip button strong {
  font: 400 clamp(15px, 1.5vw, 19px)/1 var(--cadx-serif);
}

.cadX-size-strip button:hover,
.cadX-size-strip button:focus-visible {
  border-color: var(--cadx-gold);
  background: #fffdf7;
}

.cadX-size-strip button.is-active {
  border-color: var(--cadx-ink);
  background: var(--cadx-ink);
  color: #fff;
}

/* Diagram, the numbers behind the size, and how to measure. */
.cadX-size-readout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: stretch;
  max-width: 1420px;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(16px, 2.2svh, 30px);
  border: 1px solid rgba(17, 17, 15, 0.14);
  background: #fdfcfa;
}

.cadX-size-figure {
  display: grid;
  min-height: 0;
  place-items: center;
}

.cadX-size-figure .cadX-size-diagram {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
  color: var(--cadx-ink);
}

.cadX-size-figure svg {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.cadX-size-specs {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
}

.cadX-size-specs > div {
  display: grid;
  gap: 5px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cadx-line);
}

.cadX-size-specs dt {
  color: rgba(17, 17, 15, 0.5);
  font: 800 9px/1.3 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-size-specs dd {
  margin: 0;
  font: 400 clamp(20px, 2vw, 28px)/1.2 var(--cadx-serif);
}

.cadX-size-help {
  display: grid;
  align-content: center;
  min-width: 0;
  padding-left: clamp(0px, 2vw, 30px);
  border-left: 1px solid var(--cadx-line);
}

.cadX-size-help-title {
  margin: 0 0 14px;
  color: rgba(17, 17, 15, 0.5);
  font: 800 9px/1 var(--cadx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cadX-size-help ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
}

.cadX-size-help li {
  color: rgba(17, 17, 15, 0.66);
  font: 400 12.5px/1.66 var(--cadx-sans);
}

.cadX-size-help li::marker {
  color: var(--cadx-gold);
  font-weight: 700;
}

@media (max-width: 1080px) {
  .cadX-sizing-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cadX-size-readout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow-y: auto;
  }

  .cadX-size-help {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid var(--cadx-line);
  }
}

@media (max-width: 700px) {
  .cadX-size-readout {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .cadX-size-strip {
    max-height: 26svh;
    overflow-y: auto;
  }

  .cadX-size-strip button {
    min-width: 46px;
    min-height: 42px;
  }
}

/* ---------------------------------------------------------------------------
   Metal step layout - 2026-08-23
   The step was stacking into a tall column with the ring stranded below a big
   gap. Copy and ring now sit side by side down to tablet width, the alloy list
   shows all eight without an inner scrollbar, and the section is sealed so no
   part of the gemstone step shows through at its edges.
--------------------------------------------------------------------------- */

.cadX-page .cadX-metals {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 4vw, 76px);
  background: #fff;
  isolation: isolate;
}

.cadX-page .cadX-metals-copy {
  align-content: center;
  overflow: visible;
}

.cadX-metals-scroll {
  overflow: visible;
  min-height: 0;
}

.cadX-page .cadX-metals-copy h2 {
  font-size: clamp(28px, 4.4svh, 62px);
}

.cadX-page .cadX-metals-copy > .cadX-metals-scroll > p {
  max-width: 52ch;
  font-size: clamp(12px, 1.7svh, 14px);
}

/* All eight alloys visible at once, in two tight columns. */
.cadX-page .cadX-metal-controls.metal-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: clamp(10px, 1.8svh, 24px);
}

.cadX-page .cadX-metal-controls .metal-filter {
  min-height: clamp(38px, 5.4svh, 50px);
  padding: 4px 10px 4px 6px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  font-size: clamp(9px, 1.3svh, 10px);
}

.cadX-page .cadX-metal-controls .metal-filter span {
  width: 24px;
  height: 24px;
}

.cadX-page .cadX-metal-study {
  min-height: 0;
  height: 100%;
}

.cadX-page .cadX-metal-viewer {
  min-height: 0;
  height: 100%;
}

.cadX-metal-study figcaption {
  margin-top: 10px;
  font-size: 10px;
}

@media (max-width: 820px) {
  .cadX-page .cadX-metals {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.05fr);
    align-content: stretch;
  }

  .cadX-page .cadX-metal-controls.metal-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Every step holds itself to one screen - 2026-08-27
   The 2026-08-23 metal layer set `overflow: visible` on the metal copy so all
   eight alloys could show without an inner scrollbar. On a phone that block is
   475px of content in a 344px row, so it spilled 37px ABOVE the section (the
   heading was clipped by the section's own `overflow: hidden`) and pushed the
   Continue button down into the ring viewer, where it read as missing.

   The rule here: a step is a fixed-height box. Its choices scroll inside it if
   they must; the action that leaves the step never does. Nothing is allowed to
   escape a section, so no part of the next step shows through.
--------------------------------------------------------------------------- */

/* --- Metal: the way forward is pinned, the choices give way -------------- */

.cadX-page .cadX-metals-copy {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  min-height: 0;
  overflow: hidden;
}

/* Centred while it fits - matching how the step has always looked - and
   scrolling from the top only once it genuinely cannot. */
.cadX-page .cadX-metals-scroll {
  display: grid;
  align-content: center;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 15, 0.18) transparent;
}

.cadX-page .cadX-metals-scroll::-webkit-scrollbar { width: 4px; }
.cadX-page .cadX-metals-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(17, 17, 15, 0.18);
}

/* --- Gemstones: the stone, the choices, and a way on --------------------- */

.cadX-page .cadX-gem-copy {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.cadX-page .cadX-gem-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

/* The link to the gemstone guide now lives beside the action rather than at
   the bottom of the scrolling choices, where it sat 441px out of view. */
.cadX-page .cadX-gem-actions .cadX-gem-learn {
  margin-top: 0;
}

/* --- Phones: give the choices the room, shrink what is only decoration --- */

@media (max-width: 820px) {
  /* The ring and the stone are the smaller half here; the choices and their
     button need the larger one, or the action is squeezed off the step. */
  .cadX-page .cadX-metals {
    grid-template-rows: minmax(0, 1.3fr) minmax(0, 0.7fr);
  }

  .cadX-page .cadX-gem-bridge {
    grid-template-rows: minmax(0, 0.68fr) minmax(0, 1.32fr);
  }
}

@media (max-width: 700px) {
  .cadX-page .cadX-metals-copy h2 {
    font-size: clamp(23px, 3.4svh, 32px);
  }

  .cadX-page .cadX-metals-copy > .cadX-metals-scroll > p {
    font-size: 11.5px;
    line-height: 1.55;
  }

  .cadX-page .cadX-metal-controls .metal-filter {
    min-height: 38px;
  }

  .cadX-page .cadX-metals-copy .cadX-continue,
  .cadX-page .cadX-gem-actions .cadX-continue {
    min-height: 46px;
    margin-top: 0;
    padding-block: 12px;
  }

  /* Continue reads first and spans the width; the two quieter links sit under
     it, so all three stay on the step instead of wrapping off it. */
  .cadX-page .cadX-gem-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: space-between;
    gap: 12px 14px;
  }

  .cadX-page .cadX-gem-actions .cadX-continue {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .cadX-page .cadX-gem-context {
    gap: 2px;
  }

  .cadX-page .cadX-gem-context strong {
    font-size: clamp(20px, 3.2svh, 28px);
  }

  .cadX-page .cadX-gem-copy .cadX-gem-note {
    font-size: 10px;
    line-height: 1.5;
  }

  /* The closing step was 67px taller than the screen, so the summary and its
     button could not be read together. */
  .cadX-page .cadX-enquire {
    min-height: 0;
    padding-block: clamp(18px, 3svh, 34px);
  }

  .cadX-page .cadX-enquire h2 {
    font-size: clamp(28px, 8vw, 40px);
  }
}

/* --- Gemstone step: fit the choices to the phone, not the phone to them --
   664px of choices in a 348px well meant the stone list scrolled under a
   pinned button. The gaps alone were 134px of that. Tightened so the stone,
   its colours, the shape and the way forward sit on one screen together. */

@media (max-width: 700px) {
  .cadX-page .cadX-gem-scroll {
    display: grid;
    align-content: start;
    gap: 10px;
  }

  .cadX-page .cadX-gem-scroll > * {
    margin-block: 0;
  }

  .cadX-page .cadX-gem-context strong {
    font-size: clamp(17px, 2.6svh, 22px);
    line-height: 1.1;
  }

  .cadX-page .cadX-gem-context em {
    font-size: 10.5px;
  }

  .cadX-page .cadX-gem-slots button {
    min-height: 38px;
    padding-block: 0;
  }

  .cadX-page .cadX-gem-picker-label {
    margin-bottom: 6px;
    font-size: 8.5px;
  }

  .cadX-page .cadX-gem-stones button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 10.5px;
  }

  .cadX-page .cadX-gem-controls {
    gap: 6px;
  }

  .cadX-page .cadX-gem-controls select {
    min-height: 38px;
    padding-block: 0;
  }

  .cadX-page .cadX-gem-copy .cadX-gem-note {
    font-size: 9.5px;
    line-height: 1.45;
  }

  /* The stone is the subject, but it does not need half the step to read. */
  .cadX-page .cadX-gem-bridge {
    grid-template-rows: minmax(0, 0.56fr) minmax(0, 1.44fr);
  }

  .cadX-page .cadX-gem-actions {
    gap: 9px 14px;
    padding-top: 10px;
  }

  .cadX-page .cadX-gem-actions .cadX-gem-learn {
    padding: 7px 11px;
    font-size: 9.5px;
  }
}

@media (max-width: 700px) {
  /* "All I wanted to see there is the gemstones." The piece and its size are
     already carried by the sub-nav above and read back in full on the closing
     step, so on a phone this repeat is what pushed the list into a scroll.
     It stays on tablet and desktop, where there is room for it. */
  .cadX-page .cadX-gem-scroll > .cadX-gem-context {
    display: none;
  }
}

/* --- The same one-screen rule, on a laptop ------------------------------- */

/* 158px of padding top AND bottom pushed the closing step to 1058px against
   an 843px screen, so the summary and the button it leads to could not be
   read together - the one place they must be. */
@media (min-width: 701px) {
  .cadX-page .cadX-enquire {
    padding-block: clamp(40px, 6svh, 84px);
    row-gap: clamp(18px, 2.6svh, 30px);
  }

  .cadX-page .cadX-summary-list {
    gap: clamp(10px, 1.5svh, 18px);
  }

  /* Consistent rhythm instead of collapsing margins, and tight enough that
     the stone list does not scroll under its own button. */
  .cadX-page .cadX-gem-scroll {
    display: grid;
    align-content: start;
    gap: clamp(12px, 1.8svh, 22px);
  }

  .cadX-page .cadX-gem-scroll > * {
    margin-block: 0;
  }
}

/* Between phone and laptop the gemstone step stacks but keeps desktop's
   roomier type, which left the stone with more of the step than it needs and
   the choices scrolling under their button. Same rebalance as the phone. */
@media (min-width: 701px) and (max-width: 900px) {
  .cadX-page .cadX-gem-bridge {
    grid-template-rows: minmax(0, 0.62fr) minmax(0, 1.38fr);
  }
}

/* The stacked tablet layout gets the phone's tighter controls too - it has a
   phone's vertical budget for the copy, not a laptop's. */
@media (min-width: 701px) and (max-width: 900px) {
  .cadX-page .cadX-gem-scroll {
    gap: 12px;
  }

  .cadX-page .cadX-gem-context strong {
    font-size: clamp(19px, 2.6svh, 24px);
    line-height: 1.1;
  }

  .cadX-page .cadX-gem-slots button {
    min-height: 40px;
  }

  .cadX-page .cadX-gem-stones button {
    min-height: 36px;
    font-size: 11px;
  }

  .cadX-page .cadX-gem-controls select {
    min-height: 40px;
  }

  .cadX-page .cadX-gem-copy .cadX-gem-note {
    font-size: 10px;
  }
}