/* ============================================
   Off The Clock Gallery
   ============================================ */
.offtheclockgallery-container{
  background: #FFFFFF;
  color: #09181F;
  padding: clamp(80px, 12vw, 160px) 0;
}
.otc-head{
  max-width: 1400px; margin: 0 auto clamp(40px, 5vw, 72px);
}
.otc-head h2{
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.02; letter-spacing: -.028em; font-weight: 600;
  max-width: 22ch;
  margin: 0;
}
.otc-head h2 em{ font-style: normal; color: var(--secondary) }

.otc-grid{
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 14px;
}
.otc-cell{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #F5F6F7;
  border: 1px solid rgba(9,24,31,.10);
  margin: 0;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.otc-cell:hover{ transform: translateY(-4px) }
.otc-cell__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.otc-cell:hover .otc-cell__img{ transform: scale(1.03) }

.otc-cell__caption{
  position: absolute; left: 14px; bottom: 14px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #09181F;
}
.otc-cell__caption em{ font-style: normal; color: var(--secondary) }

.otc-cell--1{ background: linear-gradient(135deg,#3A6F68,#0C2924); }
.otc-cell--2{ background: linear-gradient(135deg,#CFE2DD,#86B0A8); }
.otc-cell--3{ background: linear-gradient(135deg,#274D48,#0A1D1B); }
.otc-cell--4{ background: linear-gradient(135deg,#99C8BF,#2F625A); }
.otc-cell--5{ background: linear-gradient(135deg,#E7EDEB,#A8BFBA); }
.otc-cell--6{ background: linear-gradient(135deg,#4E7F77,#0F2D29); }

@media (max-width: 991px){
  .otc-grid{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px }
  .otc-cell{ grid-column: span 4 !important; grid-row: span 3 !important }
}
