/* A true CSS 3D display plaque carrying the supplied artwork, not a generated tooth mesh. */
.hero-visual.brand-visual {
  padding: 0;
  width: 100%;
  max-width: 600px;
  justify-self: center;
}
.hero-visual.brand-visual::before { content: none; }
.brand-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 21px;
  padding: 34px 42px 26px;
  isolation: isolate;
  border: 1px solid rgba(217,168,66,.25);
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 43%, rgba(217,168,66,.15), transparent 69%), linear-gradient(150deg, #f8fcfb, #e9f4f3);
}
.brand-stage::after {
  content: '';
  position: absolute;
  bottom: 86px;
  left: 18%;
  width: 64%;
  height: 23px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74,53,13,.32), transparent 70%);
  filter: blur(9px);
  z-index: -1;
}
.brand-perspective {
  width: min(100%, 370px);
  aspect-ratio: 5 / 6;
  perspective: 1600px;
  perspective-origin: 50% 43%;
}
.brand-sculpture {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: mas-brand-turn 24s linear infinite;
  will-change: transform;
}
.brand-face {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border: 3px solid #d9a842;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #241d15;
  box-shadow: 0 2px 2px rgba(255,232,152,.7) inset;
}
.brand-face-front { transform: translateZ(12px); }
.brand-face-back { transform: rotateY(180deg) translateZ(12px); }
.brand-face img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 8px;
}
.brand-edge {
  position: absolute;
  backface-visibility: hidden;
  background: linear-gradient(90deg, #9c681e, #ffe4a0 32%, #c99430 65%, #5f3d15);
  pointer-events: none;
}
.brand-edge-left, .brand-edge-right { top: 0; height: 100%; width: 24px; }
.brand-edge-left { left: -12px; transform: rotateY(-90deg); }
.brand-edge-right { right: -12px; transform: rotateY(90deg); }
.brand-edge-top, .brand-edge-bottom { left: 0; width: 100%; height: 24px; }
.brand-edge-top { top: -12px; transform: rotateX(90deg); }
.brand-edge-bottom { bottom: -12px; transform: rotateX(-90deg); }
.brand-toggle {
  position: relative;
  z-index: 1;
  padding: 9px 20px;
  border: 1px solid #d9a842;
  border-radius: 99px;
  color: #092a43;
  background: #fff;
  font: 700 12px 'Cairo', sans-serif;
  cursor: pointer;
}
.brand-toggle:hover { background: #fff8e8; }
.brand-stage.is-paused .brand-sculpture,
.brand-perspective:hover .brand-sculpture { animation-play-state: paused; }
@keyframes mas-brand-turn {
  0%, 12% { transform: rotateX(-3deg) rotateY(0deg); }
  38%, 62% { transform: rotateX(-3deg) rotateY(180deg); }
  88%, 100% { transform: rotateX(-3deg) rotateY(360deg); }
}
@media (max-width: 1100px) {
  .hero-visual.brand-visual { max-width: 570px; }
  .brand-perspective { width: min(100%, 350px); }
}
@media (max-width: 600px) {
  .hero-visual.brand-visual { width: 100%; }
  .brand-stage { padding: 24px 28px 22px; gap: 18px; border-radius: 25px; }
  .brand-perspective { width: min(100%, 290px); perspective: 1100px; }
  .brand-stage::after { bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-sculpture { animation: none !important; transform: none; will-change: auto; }
  .brand-toggle { display: none; }
}
@media print {
  .brand-sculpture { animation: none !important; transform: none; }
  .brand-toggle { display: none; }
}