/*
 * Photo hero: full-bleed photo under a navy wash, with white text.
 * Used on Services and Why Rev Club; loaded only on those pages, and every
 * rule is scoped under .photo-hero. Set the photo's focal point per page with
 * an inline object-position on .photo-hero__img.
 */
.photo-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.photo-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; animation: photo-hero-drift 24s ease-in-out infinite alternate; will-change: transform; }
/* Navy washes: strongest on the left and bottom where the text sits, lighter to the right. */
.photo-hero__wash-h { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 25, .78) 0%, rgba(11, 15, 25, .5) 50%, rgba(11, 15, 25, .2) 100%); }
.photo-hero__wash-v { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 15, 25, .15) 0%, rgba(11, 15, 25, 0) 40%, rgba(11, 15, 25, .6) 100%); }
.photo-hero__inner { position: relative; min-height: clamp(420px, 46vw, 640px); padding-top: clamp(56px, 8vw, 128px); padding-bottom: clamp(56px, 6vw, 96px); align-content: end; }
.photo-hero h1 { color: #fff; }
.photo-hero__lead { max-width: 560px; color: rgba(255, 255, 255, .9); }
/* Stacked variant (label, headline, copy) sits at the bottom of the photo. */
.photo-hero__inner.stack { justify-content: flex-end; }
.photo-hero .label { color: var(--mist); }
.photo-hero .accent { color: var(--signal-light); }
.photo-hero__note { display: flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.photo-hero__note svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--signal-light); }
@keyframes photo-hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) { .photo-hero__img { animation: none; } }
/* Space between the photo and whatever follows it. */
.photo-hero + * { padding-top: clamp(40px, 5vw, 72px); }