.bodyfit-logo-frame {
  display: block;
  width: 180px;
  height: 64px;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}
.bodyfit-logo-frame .bodyfit-logo,
.brand-logo-frame .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 51%;
  background: transparent;
}
.brand-logo-frame {
  display: block;
  flex: 0 0 160px;
  width: 160px;
  height: 62px;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}
.bodyfit-nav-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}
.bodyfit-nav-logo {
  display: block;
  width: 168px;
  height: 62px;
  object-fit: cover;
  object-position: center 51%;
  background: transparent;
}
.photo-story {
  padding: 72px 5% 88px;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  background: rgba(12, 17, 23, .92);
}
.photo-story-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto 25px;
}
.photo-story-kicker {
  margin: 0 0 9px;
  color: var(--neon-green);
  font: 700 10px var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.photo-story-head h2 {
  margin: 0;
  color: var(--text-main);
  font: 800 clamp(28px, 3.8vw, 46px)/1.1 var(--font-title);
}
.photo-story-copy {
  max-width: 380px;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.75;
}
.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(145px, 15vw, 210px);
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}
.photo-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: #111820;
}
.photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.photo-tile:hover img {
  transform: scale(1.045);
  filter: saturate(1.08);
}
.photo-tile-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.photo-tile-feature img { object-position: 51% center; }
.photo-tile-wide { grid-column: span 2; }
.photo-tile figcaption {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  color: #f5faf6;
  background: rgba(7, 12, 10, .74);
  backdrop-filter: blur(10px);
  font: 600 9px var(--font-mono);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.photo-tile figcaption span:last-child { color: var(--neon-green); }
@media (max-width: 760px) {
  .bodyfit-logo-frame { width: 158px; height: 56px; }
  .brand-logo-frame { flex-basis: 148px; width: 148px; height: 56px; }
  .bodyfit-nav-logo { width: 148px; height: 56px; }
  .photo-story { padding: 54px 5% 62px; }
  .photo-story-head { display: block; margin-bottom: 20px; }
  .photo-story-copy { margin-top: 11px; }
  .photo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 230px); gap: 8px; }
  .photo-tile-feature { grid-column: 1 / -1; grid-row: span 1; }
  .photo-tile-wide { grid-column: 1 / -1; }
  .photo-tile figcaption { right: 7px; bottom: 7px; left: 7px; padding: 7px 8px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-tile img { transition: none; }
}