/* Shared spatial details for static quality records and product guides. */
.hero, .record-section, .details, .catalogue, .na-guide, .contact-band { position: relative; }
.hero { perspective: 1200px; background-color: #f2eee5; }
.hero::before {
  content: "";
  position: absolute;
  inset: 16px 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(166,59,0,.5), transparent);
}
.hero-inner > div:first-child { transform: translateZ(28px); }
.hero-inner > div:last-child { transform: translateZ(12px); }
.photo {
  position: relative;
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateZ(20px);
  transform-origin: center;
  box-shadow: 13px 14px 0 #fce9df, 23px 28px 38px rgba(27,32,41,.13);
  background: radial-gradient(ellipse at 48% 40%, #fffefa, #e9e5dc);
}
.photo::before {
  content: "CATALOG / COMPONENT";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 7px 9px;
  background: rgba(253,251,247,.88);
  color: #59616b;
  font: 8px "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}
.photo:has(.photo-placeholder)::before { display: none; }
.photo img { filter: drop-shadow(14px 19px 12px rgba(27,32,41,.2)); }
.record-section { perspective: 1000px; }
.records { perspective: 1100px; }
.record {
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 5px 6px 0 rgba(27,32,41,.045);
  transition: border-color .28s, transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s;
}
.record::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8px;
  right: -8px;
  bottom: -8px;
  height: 8px;
  background: #e5dfd5;
  transform: skewX(35deg);
  transform-origin: top;
}
.record:hover, .record:focus-within {
  transform: translateY(-7px) rotateX(1.5deg) rotateY(-1deg);
  box-shadow: 12px 19px 27px rgba(27,32,41,.13);
}
.private-preview {
  background:
    linear-gradient(135deg, rgba(250,107,24,.045), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(27,32,41,.025) 22px 23px),
    linear-gradient(135deg,#ede9e3,#f7f4ef);
  transform: translateZ(7px);
}
.preview-label { box-shadow: 5px 6px 0 rgba(27,32,41,.09); }
.record-body { background: #fffefa; }
.privacy-note, .trademark-note {
  box-shadow: 8px 9px 0 rgba(27,32,41,.045);
}
.contact-band { background: linear-gradient(125deg,#fff4ec,#f3e7dc); }
.contact-inner .button { box-shadow: 7px 8px 0 rgba(27,32,41,.15); transition: transform .25s, box-shadow .25s, background .2s; }
.contact-inner .button:hover { transform: translate(-2px,-3px); box-shadow: 10px 12px 0 rgba(27,32,41,.14); }

@media (max-width: 900px) {
  .photo { transform: none; }
}
@media (max-width: 600px) {
  .record::after { display: none; }
  .record:hover, .record:focus-within { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .record, .contact-inner .button { transition: none !important; }
  .record:hover, .record:focus-within, .contact-inner .button:hover { transform: none; }
}
/* ===== Corporate supplier layer ===== */
.hero { perspective:none; background-color:#f6f4f1; border-bottom:1px solid #dedad4; }
.hero::before { background:linear-gradient(90deg,#f26b0f,#f26b0f 80px,transparent 80px); height:3px; inset:0 0 auto; }
.hero-inner > div:first-child, .hero-inner > div:last-child, .private-preview { transform:none; }
.hero-inner > div { min-width:0; }
.hero h1 { overflow-wrap:anywhere; }
.hero .button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.photo, .photo:hover { transform:none; box-shadow:none; background:#fff; border:1px solid #dedad4; border-top:3px solid #f26b0f; }
.photo img { filter:drop-shadow(0 10px 8px rgba(20,17,15,.14)); }
.record-section, .records { perspective:none; }
.record { transform-style:flat; box-shadow:none; transition:border-color .2s, box-shadow .2s; }
.record::after { display:none; }
.record:hover, .record:focus-within { transform:none; border-color:#f26b0f; box-shadow:0 8px 24px rgba(20,17,15,.08); }
.preview-label, .privacy-note, .trademark-note { box-shadow:none; }
.record-body { background:#fff; }
.contact-band { background:#14110f; color:#fff; }
.contact-band p { color:#e8e3dc; }
.contact-band p a { color:#fff; text-decoration-color:#f26b0f; }
.contact-band h2 { color:#fff; }
.contact-band .eyebrow { color:#ff9247; }
.contact-inner .button.button-dark { background:#f26b0f; color:#14110f; border:1px solid #f26b0f; }
.contact-inner .button { box-shadow:none; }
.contact-inner .button:hover { transform:none; box-shadow:none; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }