/* Molten Media / sharp-gold + real team photographs.
   Local overrides only; the original layout, fonts, gallery and copy remain. */

/* No emoji glyphs: these dots are CSS geometry on every operating system. */
.marquee-track .marquee-dot {
  width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
  display: block; background: currentColor; line-height: 0;
}
.contact-record-dot { width: 13px; height: 13px; border-radius: 50%; background: currentColor; display: block; }
.scene-orbit { display: none !important; }
.hero-scene, #molten-canvas { opacity: 1; filter: none; mix-blend-mode: normal; }
#molten-canvas { image-rendering: auto; }
.hero-scene:not(.scene-ready) #molten-canvas { opacity: 0; }
.scene-fallback { filter: none !important; }

/* Four genuine supplied images. Contain prevents heads and group members being
   cut off when photographs with different aspect ratios share a row. */
.team-photo-row { display: grid; grid-template-columns: minmax(0,.6665fr) minmax(0,1.7778fr) minmax(0,1fr) minmax(0,1.3356fr); gap: 16px; }
.team-photo-card { min-width: 0; margin: 0; }
.team-photo-open {
  display: block; position: relative; height: auto; aspect-ratio: var(--photo-ratio); flex: none;
  background: #111013; overflow: hidden; border: 1px solid #2c272c;
}
.team-photo-card:nth-child(1) { --photo-ratio: 1365 / 2048; }
.team-photo-card:nth-child(2) { --photo-ratio: 1920 / 1080; }
.team-photo-card:nth-child(3) { --photo-ratio: 1; }
.team-photo-card:nth-child(4) { --photo-ratio: 1600 / 1198; }
.team-photo-card { display: flex; flex-direction: column; }
.team-photo-open img { width: 100%; height: 100%; object-fit: contain; }
.team-photo-enlarge {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center;
  width: 30px; height: 30px; background: #101013d9; color: #f5f2ed;
  font-size: 19px; border: 1px solid #ffffff35;
}
.team-photo-open:hover .team-photo-enlarge { background: var(--hot); }
.team-photo-card figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding-top: 11px; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #4d464b;
}
.team-photo-card figcaption span:last-child { color: #86777e; font-size: 8px; }
.team-lightbox {
  width: min(1300px,calc(100vw - 32px)); max-height: 94svh;
  background: #0c0c0f; padding: 16px 22px; color: #f5f2ed;
}
.team-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.team-lightbox-bar p { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.team-lightbox > img { width: 100%; height: min(73svh,900px); object-fit: contain; margin: 12px 0; }
.team-lightbox-navigation { display: flex; align-items: center; justify-content: center; gap: 22px; }
.team-lightbox-navigation button { border: 1px solid #454047; min-width: 44px; min-height: 44px; font-size: 20px; }
.team-lightbox-navigation button:hover { border-color: var(--hot); }
.team-lightbox-navigation span { min-width: 56px; text-align: center; font-size: 11px; color: #c5bcc2; }
@media (max-width: 760px) {
  .team-photo-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
  .team-photo-open { height: clamp(185px,56vw,290px); aspect-ratio: auto; }
  .team-photo-card figcaption { font-size: 8px; letter-spacing: .045em; }
  .team-lightbox { padding: 12px; }
  .marquee-track .marquee-dot { width: 5px; height: 5px; flex-basis: 5px; }
}
@media (prefers-reduced-motion: reduce) { .team-photo-open, .team-photo-open * { transition: none; } }

/* Bright high-resolution fallback: a capture of this same 3D shader, not new AI art. */
.hero-scene .scene-fallback { inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.hero-scene #molten-canvas { z-index: 1; }
.scene-cross, .scene-label { z-index: 2; }
/* A handful of warm ember glints, below the flame and away from text. */
.flame-sparks { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.flame-sparks i { position: absolute; display: block; left: var(--x); top: var(--y);
  width: 2px; height: 4px; border-radius: 50%; background: #ffd381;
  box-shadow: 0 0 5px 1px #ff6d22a0; opacity: .05;
  animation: molten-glint-rise var(--duration,13s) ease-in-out var(--delay,0s) infinite; }
.flame-sparks i:nth-child(1) { --x: 30%; --y: 82%; --delay: -4s; --duration: 14s; }
.flame-sparks i:nth-child(2) { --x: 80%; --y: 75%; --delay: -8s; --duration: 17s; }
.flame-sparks i:nth-child(3) { --x: 70%; --y: 48%; --delay: -3s; --duration: 19s; }
.flame-sparks i:nth-child(4) { --x: 39%; --y: 39%; --delay: -12s; --duration: 21s; }
.flame-sparks i:nth-child(5) { --x: 61%; --y: 89%; --delay: -7s; --duration: 12s; }
.flame-sparks i:nth-child(6) { --x: 25%; --y: 59%; --delay: -10s; --duration: 17s; }
.flame-sparks i:nth-child(7) { --x: 74%; --y: 27%; --delay: -2s; --duration: 16s; }
@keyframes molten-glint-rise {
  0%,100% { transform: translate3d(0,0,0); opacity: 0; }
  20% { opacity: .35; }
  70% { opacity: .18; }
  95% { transform: translate3d(16px,-55px,0); opacity: 0; }
}
@media (max-width: 760px) { .flame-sparks i:nth-child(n+4) { display:none; } }
@media (prefers-reduced-motion: reduce) { .flame-sparks { display:none; } }

/* Keep the existing collective-section accents within the approved Record Red palette. */
.collective h2 em { color: var(--hot); }
.collective .person-role { color: #9e1b25; }

/* Mobile motion fallback / no WebGL:
   the exact original HD flame, never a rendered circular placeholder.
   Autoplay is slow and gentle, and both pause + OS Reduce Motion suspend it. */
@keyframes molten-mobile-flame-float {
  0% { transform: translate3d(0, 4px, 0) rotate(-1.9deg) scale(.990); }
  50% { transform: translate3d(3px, -5px, 0) rotate(1.6deg) scale(1.010); }
  100% { transform: translate3d(-3px, -9px, 0) rotate(-1.2deg) scale(1.000); }
}
@media (max-width: 760px) {
  .hero-scene:not(.scene-ready) .scene-fallback {
    animation: molten-mobile-flame-float 8s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
  }
  /* The flame should not disappear beneath decorative layers. */
  .hero-scene .scene-fallback, .hero-scene #molten-canvas { isolation: isolate; }
}
body.motion-paused .hero-scene .scene-fallback { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-scene .scene-fallback { animation: none !important; transform: none !important; }
}