/* Real client work stays readable and media loads only when a visitor plays it. */
.work-page { --soft: #e9e9e9; }
.work-page .eyebrow { font-size: 12px; color: #595959; }
.work-intro { padding-block: 82px 62px; }
.work-intro h1 { font-size: clamp(62px, 8.5vw, 116px); letter-spacing: -.07em; margin-block: 27px 30px; }
.work-intro h1 > span { color: #626262; }
.work-lead { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.45; letter-spacing: -.03em; }
.work-summary { font-size: 17px; line-height: 1.8; color: #555; max-width: 65ch; margin-top: 19px; }
.work-facts { display: grid; grid-template-columns: .8fr 1.1fr 1fr; gap: 32px; margin: 46px 0 0; padding: 25px 0; border-block: 1px solid var(--line); }
.work-facts dt { font-size: 12px; color: #606060; margin-bottom: 9px; }
.work-facts dd { font-size: 15px; line-height: 1.6; margin: 0; }
.work-facts a { text-decoration-thickness: 1px; }
.work-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 26px; }
.work-section-heading h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.04em; }
.work-section-heading p { font-size: 14px; color: #5a5a5a; line-height: 1.6; }
.work-film-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 42px); }
.work-film { min-width: 0; margin: 0; padding: 12px; border-radius: 30px; background: linear-gradient(150deg, #ffffffc9, #e9e9e999); border: 1px solid #fff; box-shadow: inset 0 1px #fff, 0 12px 36px -22px #2223; }
.work-film video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 20px; background: #fff; color: #222; }
.work-film video:focus-visible { outline: 2px solid #555; outline-offset: 4px; }
.work-film figcaption { padding: 22px 14px 16px; }
.work-film-title { display: flex; align-items: center; gap: 12px; }
.work-film-title h3 { font-size: 21px; font-weight: 530; letter-spacing: -.035em; }
.work-film-title > span { font: 12px/1.5 var(--mono); color: #626262; }
.work-film-title > span:last-child { margin-left: auto; }
.work-film figcaption p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: #555; max-width: 47ch; }
.work-process { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-block: 98px; margin-top: 42px; }
.work-process h2, .work-next h2 { margin-top: 23px; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.1; letter-spacing: -.06em; }
.work-process ol { padding: 0; margin: 0; list-style: none; counter-reset: work-step; }
.work-process li { position: relative; padding: 22px 0 22px 42px; border-top: 1px solid var(--line); counter-increment: work-step; }
.work-process li::before { content: '0' counter(work-step); position: absolute; left: 0; top: 26px; font: 12px/1.5 var(--mono); color: #626262; }
.work-process h3 { font-size: 19px; font-weight: 520; letter-spacing: -.025em; }
.work-process li p { margin-top: 10px; font-size: 15px; line-height: 1.75; color: #555; }
.work-next { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 54px; margin-bottom: 72px; border: 1px solid #fff; border-radius: 32px; background: linear-gradient(125deg, #ffffffbf, #e4e4e47d); box-shadow: inset 0 1px #fff; }
.work-next p:not(.eyebrow) { margin-top: 22px; max-width: 43ch; font-size: 16px; line-height: 1.75; color: #555; }
.work-next .button { flex: none; }
.work-page .site-footer { padding-bottom: 32px; }
.work-page .footer-top { font-size: 13px; align-items: center; }
@media (max-width: 760px) {
  .work-intro { padding-block: 48px 42px; }
  .work-intro h1 { font-size: clamp(53px, 11vw, 82px); margin-block: 24px; }
  .work-intro .eyebrow { font-size: 11px; }
  .work-summary { font-size: 16px; }
  .work-facts { grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
  .work-section-heading { display: block; }
  .work-section-heading p { margin-top: 12px; }
  .work-film-grid { grid-template-columns: 1fr; gap: 30px; }
  .work-film { border-radius: 25px; padding: 10px; }
  .work-film video { border-radius: 16px; }
  .work-film figcaption { padding: 20px 10px 14px; }
  .work-process { grid-template-columns: 1fr; gap: 36px; padding-block: 48px 56px; margin-top: 26px; }
  .work-next { align-items: flex-start; flex-direction: column; padding: 30px 24px; gap: 28px; margin-bottom: 48px; border-radius: 25px; }
  .work-next h2 { font-size: 41px; }
}
@media (max-width: 390px) {
  .work-page .site-header .button { padding-inline: 12px; gap: 9px; }
  .work-intro h1 { font-size: 51px; }
  .work-film-title { gap: 8px; }
  .work-film-title h3 { font-size: 20px; }
  .work-next { padding-inline: 20px; }
}