.work-section {
  background: #cfd5da;
  overflow: hidden;
}

.work-section > .section-heading { margin-bottom: 34px; }
.gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.gallery-tab {
  appearance: none;
  border: 1px solid #aab2b9;
  background: rgba(255,255,255,.42);
  color: #252a2e;
  min-height: 44px;
  padding: 10px 17px;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gallery-tab:hover,.gallery-tab:focus-visible { border-color: #176fbd; }
.gallery-tab.is-active {
  background: #0b0d10;
  border-color: #0b0d10;
  color: #fff;
  box-shadow: inset 0 -4px 0 #d71920;
}
.gallery-carousel {
  max-width: 1120px;
  background: #0b0d10;
  border: 1px solid #32373c;
  box-shadow: 0 24px 60px rgba(8,10,13,.18);
}
.gallery-carousel[hidden] { display: none; }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  position: relative;
  scroll-snap-align: start;
  background: #0b0d10;
}
.carousel-slide > img {
  display: block;
  width: 100%;
  height: min(62vw, 620px);
  min-height: 360px;
  object-fit: contain;
  object-position: center;
  background: #0b0d10;
}
.deck-slide > img { object-fit: cover; }
.door-wide > img { object-fit: cover; }
.door-process-slide .comparison img { object-fit: cover; }
.carousel-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 62px 28px 24px;
  color: #fff;
  background: linear-gradient(transparent,rgba(5,7,9,.92));
}
.carousel-slide figcaption strong { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.carousel-slide figcaption span { color: #c9d0d5; font-size: .9rem; text-align: right; }
.carousel-controls {
  min-height: 62px;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid #30353a;
}
.carousel-arrow,.carousel-dots button { appearance: none; border: 0; cursor: pointer; }
.carousel-arrow { width: 44px; height: 44px; background: #20242a; color: #fff; font-size: 1.25rem; }
.carousel-arrow:hover,.carousel-arrow:focus-visible { background: #176fbd; }
.carousel-dots { display: flex; justify-content: center; align-items: center; gap: 9px; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: #626970; }
.carousel-dots button.is-active { width: 28px; border-radius: 10px; background: #d71920; }
.comparison {
  height: min(62vw, 620px);
  min-height: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: #0b0d10;
}
.comparison > div { position: relative; min-width: 0; overflow: hidden; }
.comparison img { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b0d10; }
.deck-comparison .comparison img { object-fit: cover; }
.room-comparison .comparison img { object-fit: cover; }
.comparison > div > span {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  padding: 6px 10px;
  background: rgba(8,10,13,.86);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.video-heading { margin: 68px 0 28px; max-width: 680px; }
.video-heading .eyebrow { margin-bottom: 12px; }
.video-heading h3 { font-size: clamp(2rem,4vw,3.5rem); line-height: 1; letter-spacing: -.045em; }
.video-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.video-card { margin: 0; overflow: hidden; background: #0b1c25; color: #fff; }
.video-card video { width: 100%; aspect-ratio: 9/16; display: block; object-fit: cover; background: #07141c; }
.video-card figcaption { padding: 17px 18px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1080px) { .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) {
  .gallery-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .gallery-tab { flex: 0 0 auto; }
  .carousel-slide > img,.comparison { height: 68vw; min-height: 290px; }
  .carousel-slide figcaption { align-items: flex-start; flex-direction: column; gap: 2px; padding: 54px 18px 17px; }
  .carousel-slide figcaption span { text-align: left; font-size: .82rem; }
  .carousel-controls { grid-template-columns: 48px 1fr 48px; }
  .comparison > div > span { top: 10px; left: 10px; }
  .video-grid { grid-template-columns: 1fr; }
  .video-card video { max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }