/* Production 3D layer: white service world, restrained material depth. */
.material-experience {
  position: relative;
  min-height: 220vh;
  overflow: clip;
  background: #171716;
  color: #f5f1ea;
}

.material-experience__track { position: relative; min-height: 220vh; }
.material-experience__stage {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #171716;
  isolation: isolate;
}

.material-experience__canvas,
.material-experience__handoff {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The DOM handoff is an explicit fallback, never an unowned first-paint image. */
.material-experience [hidden] { display: none !important; }

.material-experience__canvas {
  z-index: 0;
  opacity: 1;
  background: #171716;
}

.material-experience__handoff {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease;
}

.material-experience__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(23, 23, 22, .95) 0%, rgba(23, 23, 22, .54) 42%, rgba(23, 23, 22, .08) 100%);
}

.material-experience__content {
  position: relative;
  z-index: 3;
  width: min(1200px, calc(100% - 48px));
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(100px, 15vh, 180px) 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.material-experience__eyebrow,
.material-experience__status {
  margin: 0;
  color: #f2793d;
  font: 700 .68rem/1.35 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.material-experience__content h2 {
  max-width: 8ch;
  margin: 20px 0 0;
  color: #f5f1ea;
  font: 400 clamp(3.7rem, 8vw, 9rem)/.84 Georgia, 'Times New Roman', serif;
  letter-spacing: -.08em;
}

.material-experience__lead {
  max-width: 25rem;
  margin: 0 0 8vh auto;
  color: rgba(245, 241, 234, .86);
  font: 400 clamp(1.1rem, 1.6vw, 1.45rem)/1.35 Georgia, 'Times New Roman', serif;
}

.material-experience__status { align-self: flex-end; color: rgba(245, 241, 234, .72); }

.material-experience[data-webgl-status="ready"] .material-experience__handoff { opacity: 0; visibility: hidden; }
.material-experience[data-webgl-status$="fallback"] .material-experience__handoff { opacity: 1; visibility: visible; }
.material-experience[data-webgl-status$="fallback"] .material-experience__canvas { display: none; }

@media (max-width: 700px) {
  .material-experience { min-height: 0; background: #f7f7f5; color: #171717; }
  .material-experience__track { min-height: 0; }
  .material-experience__stage { height: auto; min-height: 0; display: flex; flex-direction: column; background: #f7f7f5; }
  .material-experience__canvas { display: none; }
  .material-experience__handoff { position: relative; inset: auto; height: auto; aspect-ratio: 1 / 1; object-fit: cover; opacity: 1 !important; }
  .material-experience__veil { display: none; }
  .material-experience__content { width: calc(100% - 32px); min-height: 0; padding: 36px 0 48px; color: #171717; }
  .material-experience__content h2 { max-width: 8ch; margin: 16px 0 22px; color: #171717; font-size: clamp(3rem, 16vw, 4.6rem); }
  .material-experience__lead { max-width: 30rem; margin: 0; color: #4e504e; font: 400 1.1rem/1.45 Georgia, 'Times New Roman', serif; }
  .material-experience__status { align-self: auto; margin-top: 28px; color: #5b5d59; }
}

/* Keep functional scene labels readable without flattening the composition. */
.material-experience__eyebrow,
.material-experience__status { font-size: .7rem; }

/* Final mobile/reduced-motion recovery: never leave the material story as a
   dark empty stage when WebGL is intentionally skipped. The real handoff
   photograph becomes the first block, followed by readable editorial copy. */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .material-experience {
    min-height: 0 !important;
    background: #f7f7f5 !important;
    color: #171717 !important;
  }

  .material-experience__track,
  .material-experience__stage {
    min-height: 0 !important;
    height: auto !important;
  }

  .material-experience__stage {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    background: #f7f7f5 !important;
  }

  .material-experience__canvas {
    display: none !important;
  }

  .material-experience__handoff {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    object-position: center 28% !important;
    opacity: 1 !important;
  }

  .material-experience__veil { display: none !important; }

  .material-experience__content {
    position: relative !important;
    z-index: 2;
    display: block !important;
    width: calc(100% - 32px) !important;
    min-height: 0 !important;
    padding: 38px 0 52px !important;
    color: #171717 !important;
  }

  .material-experience__content h2 {
    max-width: 9ch;
    margin: 16px 0 22px;
    color: #171717 !important;
  }

  .material-experience__lead {
    max-width: 30rem;
    margin: 0 !important;
    color: #4e504e !important;
  }

  .material-experience__status {
    align-self: auto;
    margin-top: 28px;
    color: #5b5d59 !important;
  }
}

/* These fallbacks intentionally come last: the reference-led desktop rules
   above must never repaint a reduced-motion or narrow viewport as dark text
   on the cinematic stage. */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .material-experience {
    min-height: 0;
    background: #f7f7f5;
    color: #171717;
  }
  .material-experience__track { min-height: 0; }
  .material-experience__stage {
    height: auto;
    min-height: 0;
    background: #f7f7f5;
  }
  .material-experience__canvas { display: none; }
  .material-experience__handoff {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    opacity: 1 !important;
  }
  .material-experience__veil { display: none; }
  .material-experience__content {
    width: calc(100% - 32px);
    min-height: 0;
    padding: 40px 0 52px;
    color: #171717;
  }
  .material-experience__content h2 { color: #171717; }
  .material-experience__lead {
    max-width: 30rem;
    margin: 0;
    color: #4e504e;
  }
  .material-experience__status {
    align-self: auto;
    margin-top: 28px;
    color: #5b5d59;
  }
}

@media (prefers-reduced-motion: reduce) {
  .material-experience { min-height: 0; background: #f7f7f5; color: #171717; }
  .material-experience__track { min-height: 0; }
  .material-experience__stage { height: auto; min-height: 0; background: #f7f7f5; }
  .material-experience__canvas { display: none; }
  .material-experience__handoff { position: relative; inset: auto; height: auto; aspect-ratio: 1 / 1; object-fit: cover; opacity: 1 !important; }
  .material-experience__veil { display: none; }
  .material-experience__content { min-height: 0; padding: 40px 24px 52px; color: #171717; }
  .material-experience__content h2 { color: #171717; }
  .material-experience__lead { margin: 0; color: #4e504e; }
  .material-experience__status { align-self: auto; margin-top: 28px; color: #5b5d59; }
}

/* Reduced-motion desktop still needs the authored composition. The fallback is
   static, but it must not collapse into a raw full-width PNG before its copy. */
@media (prefers-reduced-motion: reduce) and (min-width: 701px) {
  .material-experience {
    min-height: 240vh !important;
    background: #171716 !important;
    color: #f5f1ea !important;
  }

  .material-experience__track { min-height: 240vh !important; }

  .material-experience__stage {
    position: relative !important;
    height: 100svh !important;
    min-height: 680px !important;
    overflow: hidden !important;
    background: #171716 !important;
  }

  .material-experience__canvas { display: none !important; }

  .material-experience__handoff {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .material-experience__veil {
    display: block !important;
    z-index: 1 !important;
    background:
      linear-gradient(90deg, rgba(23, 23, 22, .92) 0%, rgba(23, 23, 22, .5) 38%, rgba(23, 23, 22, .08) 75%, rgba(23, 23, 22, .22) 100%),
      linear-gradient(0deg, rgba(23, 23, 22, .74) 0%, transparent 34%, rgba(23, 23, 22, .14) 100%) !important;
  }

  .material-experience__content {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    width: min(1280px, calc(100% - 48px)) !important;
    min-height: 100svh !important;
    margin: 0 auto !important;
    padding: clamp(92px, 12vh, 148px) 0 36px !important;
    color: #f5f1ea !important;
    pointer-events: none !important;
  }

  .material-experience__content h2 { color: #f5f1ea !important; }
  .material-experience__lead { color: rgba(245, 241, 234, .86) !important; }
  .material-experience__status { color: rgba(245, 241, 234, .72) !important; }
}

/* Reference-derived material composition. The canvas remains the spatial
   layer; the DOM handoff keeps the same real client photograph available
   before initialization, on mobile, and under reduced motion. */
.material-experience {
  min-height: 240vh;
  background: #171716;
}

.material-experience__track { min-height: 240vh; }

.material-experience__stage {
  min-height: 680px;
  background: #171716;
}

.material-experience__handoff,
.material-experience__canvas { object-fit: cover; object-position: center; }

.material-experience__veil {
  background:
    linear-gradient(90deg, rgba(23, 23, 22, .92) 0%, rgba(23, 23, 22, .5) 38%, rgba(23, 23, 22, .08) 75%, rgba(23, 23, 22, .22) 100%),
    linear-gradient(0deg, rgba(23, 23, 22, .74) 0%, transparent 34%, rgba(23, 23, 22, .14) 100%);
}

.material-experience__content {
  width: min(1280px, calc(100% - 48px));
  padding: clamp(92px, 12vh, 148px) 0 36px;
}

.material-experience__eyebrow {
  color: #f2793d;
  letter-spacing: .16em;
}

.material-experience__content h2 {
  max-width: 8ch;
  margin-top: 18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(4rem, 8.2vw, 8.9rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.075em;
}

.material-experience__lead {
  max-width: 25rem;
  margin-bottom: 9vh;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.08rem, 1.55vw, 1.4rem);
  line-height: 1.38;
}

.material-experience__status {
  color: rgba(245, 241, 234, .72);
  letter-spacing: .15em;
}

@media (max-width: 700px) {
  .material-experience__content h2 {
    max-width: 8.5ch;
    font-size: clamp(3.2rem, 15vw, 5.2rem);
  }
}

/* Final fallback composition. The source halves are treated as a comparison,
   never as a single portrait image stretched across the page. */
.material-experience__handoff {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  background: #171716;
}
.material-experience__handoff figure {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.material-experience__handoff img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.material-experience__handoff figcaption {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 14px;
  padding: 7px 9px;
  background: rgba(15, 15, 14, .78);
  color: #fff;
  font: 700 .65rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.material-experience[data-webgl-status$="fallback"] .material-experience__handoff { display: grid; }

@media (max-width: 700px) {
  .material-experience__handoff {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 24px auto 0 !important;
    border: 1px solid #d4d3cd;
    background: #171716;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .material-experience__handoff img { object-position: center 22% !important; }
  .material-experience__content { padding-top: 34px !important; }
}

/* Keep functional labels above the legibility floor on every breakpoint. */
.material-experience__eyebrow,
.material-experience__status { font-size: .7rem; }

/* Reduced motion is a static story, not a shortened pin. Keep the authored
   frame and copy together, then hand off directly to the next white section.
   This final override must come after the reference-derived desktop rules. */
@media (prefers-reduced-motion: reduce) and (min-width: 701px) {
  .material-experience {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  .material-experience__track {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
  }

  .material-experience__stage {
    height: 100svh !important;
    min-height: 0 !important;
    max-height: 100svh !important;
  }
}