.case-text {
  order: 0;
}

@media (max-width: 991px) {
  .case-text {
    order: -1;
  }
}

article {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

article + article {
  margin-top: 10rem;
}

/* sticky tabs bar */

/* style.css (clean reset for this project) */

/* ---------- base helpers ---------- */

:root {
  --grey-muted: rgba(0,0,0,.55);
  --grey-light: rgba(0,0,0,.10);
}

.text-grey-muted {
  color: var(--grey-muted) !important;
}

.border-grey-light {
  border-color: var(--grey-light) !important;
}

.ls-widest {
  letter-spacing: .14em;
}

.tracking-tight {
  letter-spacing: -0.02em;
}

.transition-700 {
  transition: all 700ms ease;
}

.min-vh-75 {
  min-height: 75vh;
}

/* ---------- case studies ---------- */

/* sticky tabs bar */

/* matches .py-4 (roughly 24px) */

.case-study {
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--grey-light);
}

/* ---------- image tile hover + view overlay ---------- */

.lb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0 !important;
}

.lb img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.01);
  transition: transform 500ms ease, filter 500ms ease;
}

.lb::after {
  content: "View";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
  opacity: 0;
  transition: opacity 250ms ease;
  background: rgba(0,0,0,.28);
  pointer-events: none;
}

.lb:hover img {
  transform: scale(1.06);
}

.lb:hover::after {
  opacity: 1;
}

.no-radius, .no-radius * {
  border-radius: 0 !important;
}

/* ---------- lightbox modal ---------- */

/* force modal layers so controls are always on top */

#lightboxModal {
  z-index: 2000 !important;
}

#lightboxModal .modal-dialog {
  z-index: 2001 !important;
}

#lightboxModal .modal-content {
  position: relative !important;
  overflow: visible !important;
  /*important: don’t clip arrows;*/
  border-radius: 0 !important;
}

#lightboxModal .modal-body {
  position: relative !important;
  z-index: 1 !important;
}

#lightboxImg {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 0 !important;
}

/* arrows */

#lightboxPrev, #lightboxNext {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(0,0,0,.25) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  font-size: 36px !important;
  line-height: 1 !important;
}

#lightboxPrev {
  left: 12px !important;
}

#lightboxNext {
  right: 12px !important;
}

#lightboxPrev:hover, #lightboxNext:hover {
  background: rgba(0,0,0,.38) !important;
}

/* caption styling */

#lightboxTitle {
  letter-spacing: .08em;
}

/* lightbox: force controls + captions visible */

#lightboxModal .modal-content {
  position: relative !important;
  overflow: visible !important;
}

#lightboxPrev, #lightboxNext {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 99999 !important;
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(0,0,0,.30) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  pointer-events: auto !important;
}

#lightboxPrev {
  left: 12px !important;
}

#lightboxNext {
  right: 12px !important;
}

#lightboxModal .modal-body {
  position: relative !important;
  z-index: 1 !important;
}

#hero {
  position: relative;
}

#lightboxImg {
  border-radius: 0 !important;
}

#lightboxTitle, #lightboxCaption {
  position: relative !important;
  z-index: 99999 !important;
}

/* sticky tabs (wrapper) */

.sticky-shell {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.object-fit-cover {
  object-fit: cover;
}