.work-hero { position: relative; overflow: hidden; background: var(--navy); }
.work-hero > img { width: 100%; height: clamp(300px, 31vw, 500px); object-fit: cover; object-position: center; filter: brightness(.85); }

.work-progress { background: #fbfcf9; }
.work-project { position: relative; isolation: isolate; overflow: hidden; padding: 66px 24px 82px; background: #fbfcf9; }
.work-project + .work-project { border-top: 1px solid #e3e7e0; }
.work-project__background { position: absolute; z-index: 0; inset: 0 0 auto; height: 58%; overflow: hidden; }
.work-project__background img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.78); }
.work-project__background::after { content: ""; position: absolute; inset: 0; background: var(--work-tint); }
.work-project--torre-tiber { --work-tint: linear-gradient(110deg, #4c6759df, #647d6cd4); }
.work-project--torre-ganges { --work-tint: linear-gradient(110deg, #e88f70df, #f6aa89d8); }
.work-project__inner { position: relative; z-index: 1; width: min(100%, 1190px); margin: auto; }
.work-period__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; color: #fff; }
.work-period__eyebrow { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.work-period h2 { font-size: max(13px, calc(clamp(36px, 4vw, 50px) * var(--content-text-scale, 1))); font-style: italic; font-weight: 400; line-height: 1.1; text-shadow: 0 2px 14px #132a2840; }
.work-period time { padding: 10px 16px; border: 1px solid #ffffffa3; border-radius: 999px; background: #ffffff24; font-size: max(13px, calc(14px * var(--content-text-scale, 1))); font-weight: 700; white-space: nowrap; backdrop-filter: blur(4px); }
.work-period__hint { display: none; }
.work-period__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px; border: 1px solid #e6eae5; border-radius: 20px; background: #ffffffee; box-shadow: 0 22px 48px #172d3330; }
.work-photo { position: relative; display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #e5e8e4; aspect-ratio: 16 / 10; cursor: zoom-in; }
.work-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.work-photo:hover img, .work-photo:focus-visible img { transform: scale(1.035); }
.work-photo__index { position: absolute; top: 11px; left: 11px; padding: 6px 9px; border-radius: 999px; background: #122147b8; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.work-photo__action { position: absolute; right: 11px; bottom: 11px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: #122147b8; color: #fff; font-size: 11px; font-weight: 700; opacity: .8; }
.work-photo__action span { font-size: max(13px, calc(16px * var(--content-text-scale, 1))); line-height: .8; }
.work-photo:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.work-period__month { position: relative; display: inline-flex; flex: none; min-width: 150px; }
.work-period__month::after { content: ""; position: absolute; top: 50%; right: 17px; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.work-period__month select { width: 100%; min-height: 46px; padding: 9px 40px 9px 17px; appearance: none; border: 1px solid #ffffffbd; border-radius: 999px; background: #ffffff29; color: #fff; font: inherit; font-size: max(13px, calc(14px * var(--content-text-scale, 1))); font-weight: 700; cursor: pointer; backdrop-filter: blur(4px); }
.work-period__month select:focus-visible { outline: none; border-color: #fff; box-shadow: 0 0 0 3px #12214799; }
.work-period__month option { color: var(--navy); }

.work-lightbox { width: min(94vw, 1200px); max-width: 94vw; max-height: 92dvh; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; color: var(--navy); box-shadow: 0 30px 85px #060d1f96; }
.work-lightbox::backdrop { background: #071022e0; backdrop-filter: blur(5px); }
.work-lightbox__toolbar { display: flex; min-height: 56px; align-items: center; justify-content: space-between; padding: 7px 14px 7px 22px; background: #101b31; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.work-lightbox__stage { display: flex; align-items: center; justify-content: center; background: #101b31; }
.work-lightbox__media { display: flex; min-width: 0; align-items: center; justify-content: center; }
.work-lightbox__media img { width: auto; max-width: 100%; max-height: min(calc(92dvh - 142px), 740px); object-fit: contain; }
.work-lightbox__close, .work-lightbox__arrow { display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 5px 16px #07102230; }
.work-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.work-lightbox__arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.work-lightbox__close:hover, .work-lightbox__arrow:hover { background: #264778; }
.work-lightbox__close { font-size: 28px; line-height: 1; }
.work-lightbox__arrow .ri-icon { font-size: 27px; }
.work-lightbox__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding: 15px 22px; font-size: max(13px, calc(14px * var(--content-text-scale, 1))); line-height: 1.4; }
.work-lightbox__footer p { min-width: 0; }
.work-lightbox__controls { display: flex; flex: none; align-items: center; gap: 14px; }
.work-lightbox__controls span { min-width: 44px; font-weight: 700; text-align: center; white-space: nowrap; }

@media (max-width: 1200px) {
  .work-hero > img { height: clamp(250px, 33vw, 400px); }
}
@media (max-width: 800px) {
  .work-project { padding: 48px 20px 58px; }
  .work-project__background { height: 49%; }
  .work-period__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
}
@media (max-width: 600px) {
  .work-hero > img { height: clamp(190px, 55vw, 230px); }
  .work-project { padding: 34px 14px 50px; }
  .work-project__background { height: 300px; }
  .work-period__heading { display: block; margin-bottom: 22px; }
  .work-period h2 { font-size: max(13px, calc(34px * var(--content-text-scale, 1))); }
  .work-period time { display: inline-block; margin-top: 14px; font-size: 12px; }
  .work-period__month { margin-top: 14px; }
  .work-period__month select { font-size: 12px; }
  .work-period__hint { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 5px #152b2b80; }
  .work-period__hint span { font-size: max(13px, calc(18px * var(--content-text-scale, 1))); }
  .work-period__grid { grid-auto-flow: column; grid-auto-columns: 88%; grid-template-columns: none; gap: 10px; padding: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; border-radius: 15px; -webkit-overflow-scrolling: touch; }
  .work-photo { aspect-ratio: 16 / 10; border-radius: 9px; scroll-snap-align: start; }
  .work-lightbox { width: 96vw; max-width: 96vw; }
  .work-lightbox__toolbar { min-height: 52px; padding: 5px 10px 5px 15px; font-size: 10px; }
  .work-lightbox__media img { max-height: calc(92dvh - 190px); }
  .work-lightbox__footer { flex-direction: column; align-items: stretch; gap: 12px; padding: 13px 15px 15px; font-size: 12px; }
  .work-lightbox__controls { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .work-photo img { transition: none; }
  .work-photo:hover img, .work-photo:focus-visible img { transform: none; }
}