.mc-material { position: relative; background: #eff1f4; color: var(--mc-color-ink); }
.mc-material__stage { position: relative; isolation: isolate; }
.mc-material__poster, .mc-material__canvas, .mc-material__veil, .mc-material__steps, .mc-material__annotations { display: none; }
.mc-material__panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; padding-block: 64px; border-block-end: 1px solid #fff; scroll-margin-block-start: calc(var(--mc-header-height) + 24px); }
.mc-material__still { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; border-radius: 12px; }
.mc-material__still img { display: block; width: 100%; height: auto; }
.mc-material__copy { grid-column: 1; grid-row: 1; max-width: 420px; }
.mc-material__eyebrow { display: flex; align-items: center; gap: 12px; margin-block-end: 20px; color: var(--mc-color-muted); font-size: 13px; font-weight: 500; }
.mc-material__eyebrow > span { color: var(--mc-color-blue); font-variant-numeric: tabular-nums; }
.mc-material__title { margin: 0; font-size: clamp(32px, 3.1vw, 56px); font-weight: 600; line-height: 1.09; letter-spacing: -.045em; }
.mc-material__accent { color: var(--mc-color-blue); }
.mc-material__description { max-width: 35ch; margin-block-start: 24px; color: var(--mc-color-muted); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.7; }
.mc-material__cta { margin-block-start: 28px; }
@media (min-width: 1024px) and (min-height: 600px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mc-material.is-animated { height: calc(100vh + (500vh + var(--mc-header-height)) * var(--material-duration, 1) - var(--mc-header-height)); }
  .is-animated .mc-material__stage { position: sticky; top: var(--mc-header-height); height: calc(100vh - var(--mc-header-height)); overflow: clip; }
  .is-animated .mc-material__poster, .is-animated .mc-material__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .is-animated .mc-material__poster img { width: 100%; height: 100%; object-fit: contain; }
  .is-animated .mc-material__canvas { opacity: 0; }
  .is-animated.has-frame .mc-material__canvas { opacity: 1; }
  .is-animated .mc-material__veil { position: absolute; z-index: 1; inset: 0; display: block; pointer-events: none; background: linear-gradient(90deg, rgb(239 241 244 / 98%) 0%, rgb(239 241 244 / 94%) 19%, rgb(239 241 244 / 76%) 32%, rgb(239 241 244 / 0%) 56%); }
  .is-animated .mc-material__layout { position: relative; z-index: 3; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 48px; height: 100%; padding-block: 36px; }
  .is-animated .mc-material__steps { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-self: center; height: min(400px, 66%); }
  .mc-material__rail { position: absolute; top: 26px; bottom: 10px; left: 15px; width: 1px; background: #d0d6df; }
  .mc-material__rail::after { content: ''; position: absolute; inset: 0; background: var(--mc-color-blue); transform: scaleY(var(--material-progress, 0)); transform-origin: top; }
  .mc-material__step { position: relative; display: flex; min-height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding-block: 6px; background: #eff1f4; color: #8a929f; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; text-decoration: none; transition: color 220ms; }
  .mc-material__step i { width: 4px; height: 4px; border-radius: 50%; background: #cbd2dd; transition: background 220ms, transform 220ms; }
  .mc-material__step.is-current { color: var(--mc-color-blue); font-weight: 700; }
  .mc-material__step.is-current i { background: var(--mc-color-blue); transform: scale(1.6); }
  .mc-material__step:focus-visible { outline: 2px solid var(--mc-color-blue); outline-offset: 3px; border-radius: 6px; }
  .is-animated .mc-material__panels { position: relative; min-width: 0; }
  .is-animated .mc-material__panel { position: absolute; inset: 0; display: flex; padding: 0; border: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); transition: opacity 380ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1), visibility 380ms; }
  .is-animated .mc-material__panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .is-animated .mc-material__still { display: none; }
  .is-animated .mc-material__annotations { position: absolute; z-index: 2; display: block; left: var(--material-image-left, 0px); top: var(--material-image-top, 0px); width: var(--material-image-width, 100%); height: var(--material-image-height, 100%); pointer-events: none; }
  .mc-material__annotation { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 260ms, visibility 260ms; }
  .mc-material__annotation.is-active { opacity: 1; visibility: visible; }
  .mc-material__annotation > svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .mc-material__leader, .mc-material__focus { stroke: var(--mc-color-blue); stroke-width: .65; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--material-stroke-length, 2000); stroke-dashoffset: var(--material-stroke-length, 2000); transition: stroke-dashoffset 560ms cubic-bezier(.22, 1, .36, 1) 80ms; }
  .mc-material__annotation.is-active .mc-material__leader, .mc-material__annotation.is-active .mc-material__focus { stroke-dashoffset: 0; }
  .mc-material__orbit { stroke: rgb(49 91 255 / 20%); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transform: scale(.82); transition: transform 900ms cubic-bezier(.22, 1, .36, 1); }
  .mc-material__annotation.is-active .mc-material__orbit { transform: scale(1); }
  .mc-material__pin { fill: var(--mc-color-blue); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .mc-material__label { position: absolute; display: grid; gap: 6px; width: clamp(140px, 10vw, 190px); padding: 14px 16px; border: 1px solid rgb(255 255 255 / 68%); border-radius: 10px; background: rgb(255 255 255 / 84%); color: var(--mc-color-muted); font-size: clamp(11px, .8vw, 13px); line-height: 1.5; backdrop-filter: blur(10px); opacity: 0; transition: opacity 300ms ease 380ms; }
  .mc-material__annotation.is-active .mc-material__label { opacity: 1; }
  .mc-material__label strong { color: var(--mc-color-ink); font-size: clamp(12px, .9vw, 14px); font-weight: 600; line-height: 1.4; }
  .mc-material__label-caption { color: var(--mc-color-blue); font-size: 10px; font-weight: 600; }
  .mc-material__label--shirt { left: 89%; top: 45%; }
  .mc-material__label--surface { left: 81%; top: 35%; }
  .mc-material__label--knit { left: 46%; top: 23%; }
  .mc-material__label--fiber-one { left: 46%; top: 23%; }
  .mc-material__label--fiber-two { left: 83%; top: 69%; }
  .mc-material__label--fiber-three { left: 80%; top: 11%; }
  .mc-material__label--result { left: 89%; top: 50%; }
}
@media (max-width: 767px) {
  .mc-material__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px 40px; }
  .mc-material__still { grid-column: 1; grid-row: 1; }
  .mc-material__copy { grid-column: 1; grid-row: 2; max-width: 100%; }
  .mc-material__title { font-size: clamp(30px, 7.4vw, 44px); }
  .mc-material__eyebrow { margin-block-end: 12px; }
  .mc-material__description { max-width: 42ch; margin-block-start: 18px; }
}