.video-process { position: relative; padding: clamp(4.5rem, 7vw, 7.5rem) max(var(--gutter), calc((100vw - var(--content)) / 2 + var(--gutter))); overflow: hidden; background: var(--warm); border-block: 1px solid rgba(184, 137, 71, .25); }
.video-process::before { position: absolute; top: -170px; right: -120px; width: 430px; height: 430px; content: ""; border: 1px solid rgba(184, 137, 71, .16); border-radius: 50%; box-shadow: 0 0 0 55px rgba(184, 137, 71, .035), 0 0 0 110px rgba(184, 137, 71, .025); pointer-events: none; }
.video-process__intro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr); gap: clamp(2rem, 7vw, 8rem); align-items: end; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.video-process__intro h2 { max-width: 760px; margin: 0; }
.video-process__intro > p { max-width: 580px; margin: 0 0 .35rem; color: var(--muted); }
.video-process__grid { position: relative; z-index: 1; display: grid; }
.video-card { position: relative; min-width: 0; }
.video-card__step { display: block; margin-bottom: 1rem; color: var(--bronze); font-family: var(--heading); font-size: 1.35rem; font-weight: 600; letter-spacing: -.04em; }
.video-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.video-card__media iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-trigger { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--navy); }
.video-trigger img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.03); transition: transform .45s ease, filter .45s ease; }
.video-trigger__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,21,34,.02), rgba(7,21,34,.5)); transition: background .35s ease; }
.video-trigger__play { position: absolute; top: 50%; left: 50%; display: grid; width: 48px; height: 48px; place-items: center; background: rgba(7,21,34,.84); color: #fff; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; box-shadow: 0 10px 30px rgba(2,11,18,.28); transform: translate(-50%, -50%); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.video-trigger__play svg { width: 25px; height: 25px; fill: currentColor; }
.video-trigger__duration { position: absolute; right: .65rem; bottom: .65rem; padding: .2rem .42rem; background: rgba(2,11,18,.82); color: #fff; font-family: var(--heading); font-size: .58rem; font-weight: 700; letter-spacing: .04em; }
.video-trigger:hover img, .video-trigger:focus-visible img { filter: saturate(.95) contrast(1.05); transform: scale(1.035); }
.video-trigger:hover .video-trigger__shade, .video-trigger:focus-visible .video-trigger__shade { background: linear-gradient(180deg, transparent, rgba(7,21,34,.32)); }
.video-trigger:hover .video-trigger__play, .video-trigger:focus-visible .video-trigger__play { background: var(--bronze); border-color: var(--bronze-light); color: var(--navy); transform: translate(-50%, -50%) scale(1.08); }
.video-card__copy { padding-top: 1.35rem; }
.video-card__copy > span { display: none; color: var(--bronze); font-family: var(--heading); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.video-card__copy h3 { margin-bottom: .6rem; font-size: clamp(1rem, 1.2vw, 1.2rem); }
.video-card__copy h3 a:hover, .video-card__copy h3 a:focus-visible { color: var(--bronze); }
.video-card__copy p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }

.video-process--sequence .video-process__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgba(184, 137, 71, .28); border: 1px solid rgba(184, 137, 71, .28); }
.video-process--sequence .video-card { padding: clamp(1rem, 1.6vw, 1.55rem); background: rgba(255,255,255,.93); }

.video-process--feature { background: var(--navy); color: #fff; border-block-color: rgba(210,170,106,.28); }
.video-process--feature::before { border-color: rgba(210,170,106,.2); box-shadow: 0 0 0 55px rgba(210,170,106,.035), 0 0 0 110px rgba(210,170,106,.02); }
.video-process--feature .video-process__intro > p, .video-process--feature .video-card__copy p { color: rgba(255,255,255,.62); }
.video-process--feature .video-process__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.4rem; }
.video-process--feature .video-card { grid-column: span 3; padding: 1rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); }
.video-process--feature .video-card:first-child { grid-column: span 6; grid-row: span 2; padding: 1.35rem; }
.video-process--feature .video-card:first-child .video-card__media { aspect-ratio: 16 / 9; }
.video-process--feature .video-card:first-child .video-card__copy h3 { max-width: 620px; font-size: clamp(1.35rem, 2vw, 2.25rem); }

.video-process--timeline { background: #fbfaf7; }
.video-process--timeline .video-process__grid { max-width: 1180px; margin-inline: auto; border-top: 1px solid var(--line); }
.video-process--timeline .video-card { display: grid; grid-template-columns: 70px minmax(240px, 370px) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: center; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.video-process--timeline .video-card__step { margin: 0; font-size: 2rem; font-weight: 500; }
.video-process--timeline .video-card__media { aspect-ratio: 16 / 7.5; }
.video-process--timeline .video-card__copy { padding: 0; }
.video-process--timeline .video-card__copy > span { display: block; margin-bottom: .45rem; }
.video-process--timeline .video-card__copy h3 { margin-bottom: .45rem; font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
.video-process--timeline .video-card__copy p { max-width: 620px; }

@media (max-width: 1180px) {
  .video-process--sequence .video-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-process--feature .video-card { grid-column: span 6; }
  .video-process--feature .video-card:first-child { grid-column: span 12; grid-row: auto; }
}

@media (max-width: 900px) {
  .video-process__intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .video-process--timeline .video-card { grid-template-columns: 55px minmax(210px, 310px) minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 650px) {
  .video-process--sequence .video-process__grid, .video-process--feature .video-process__grid { grid-template-columns: 1fr; }
  .video-process--feature .video-card, .video-process--feature .video-card:first-child { grid-column: auto; }
  .video-process--timeline .video-card { grid-template-columns: 1fr; gap: .85rem; padding: 1.5rem 0; }
  .video-process--timeline .video-card__step { font-size: 1.4rem; }
  .video-process--timeline .video-card__media { aspect-ratio: 16 / 9; }
}