/* Unique SEO photography: keep vehicles and cabins visible without the former
   near-black treatment. The page-specific mobile assets preserve the full
   source frame on a portrait canvas, so contain is intentional on phones. */
body.seo-unique-image-page .page-hero img {
  opacity: 1;
  filter: saturate(.98) brightness(1.08) contrast(1.02);
}

body.seo-unique-image-page .page-hero::after {
  background:
    linear-gradient(90deg,
      rgba(4,7,10,.68) 0%,
      rgba(4,7,10,.46) 36%,
      rgba(4,7,10,.15) 68%,
      rgba(4,7,10,.02) 100%),
    linear-gradient(0deg,
      rgba(4,7,10,.28) 0%,
      rgba(4,7,10,.04) 52%,
      rgba(4,7,10,0) 78%);
}

/* Airport Transfers: keep the Escalade's front wheel and the road visible on
   wide screens.  The lighter, narrow reading veil protects the white copy
   without muting the photograph across the rest of the hero. */
body.hero-airport-hub-hq .page-hero img {
  object-position: center 94% !important;
  filter: saturate(1.01) brightness(1.12) contrast(1.01) !important;
}

body.hero-airport-hub-hq .page-hero::after {
  background:
    linear-gradient(90deg,
      rgba(4,7,10,.52) 0%,
      rgba(4,7,10,.36) 34%,
      rgba(4,7,10,.12) 62%,
      rgba(4,7,10,.01) 100%),
    linear-gradient(0deg,
      rgba(4,7,10,.14) 0%,
      rgba(4,7,10,.03) 48%,
      rgba(4,7,10,0) 78%);
}

body.hero-airport-hub-hq .page-hero :is(.eyebrow, h1, .hero-lede) {
  text-shadow: 0 3px 18px rgba(0,0,0,.92), 0 1px 3px rgba(0,0,0,.98);
}

body.seo-unique-image-page .seo-route-hero picture::after {
  background: none !important;
}

body.seo-unique-image-page .seo-route-hero picture img {
  filter: saturate(.98) brightness(1.10) contrast(1.02) !important;
}

body.seo-unique-image-page .seo-route-hero :is(.eyebrow, h1, .hero-lede) {
  text-shadow: 0 3px 16px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,1);
}

@media (min-width: 661px) {
  /* Keep the lower edge of the real vehicle photos in frame on wide heroes. */
  body:is(.airport-page,.hero-wheel-lax,.hero-wheel-memorial,.hero-event-estate-v2) .page-hero img {
    object-position: center bottom !important;
  }

  /* Put the corporate-event copy in the tree canopy instead of across the S580. */
  body.hero-corporate-event-photo .page-hero {
    align-items: start;
  }
  body.hero-corporate-event-photo .page-hero .hero-inner {
    width: min(1680px, calc(100% - 80px));
    max-width: none;
    margin-inline: auto;
    padding-top: 58px;
    padding-bottom: 32px;
  }
  body.hero-corporate-event-photo .page-hero h1 {
    max-width: min(680px, 42vw);
    font-size: clamp(3.35rem, 4.35vw, 4.75rem);
    line-height: .98;
  }
  body.hero-corporate-event-photo .page-hero .hero-lede {
    max-width: min(640px, 42vw);
  }

  body.hero-wedding-clear .page-hero img {
    object-position: center !important;
  }
}

.service-photo-feature {
  overflow: hidden;
}

.service-photo-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.service-photo-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  background: #101316;
  box-shadow: 0 24px 60px rgba(11, 13, 15, .18);
}

.service-photo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-photo-copy {
  max-width: 650px;
}

.service-photo-copy h2 {
  margin-bottom: 20px;
}

.service-photo-copy a {
  color: inherit;
}

@media (max-width: 660px) {
  .service-photo-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .service-photo-media {
    width: 100%;
  }

  body.seo-unique-image-page .page-hero {
    background: #090b0d;
  }

  body.seo-unique-image-page .page-hero img {
    object-fit: contain !important;
    object-position: center !important;
  }

  body.seo-unique-image-page .page-hero .hero-inner {
    padding-bottom: 120px !important;
  }

  body.seo-unique-image-page .page-hero::after {
    background: linear-gradient(180deg,
      rgba(4,7,10,.66) 0%,
      rgba(4,7,10,.35) 27%,
      rgba(4,7,10,.04) 45%,
      rgba(4,7,10,.05) 70%,
      rgba(4,7,10,.42) 85%,
      rgba(4,7,10,.82) 100%);
  }

  body.seo-unique-image-page .seo-route-hero picture::after { background: none !important; }

  body.hero-airport-hub-hq .page-hero img {
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(1.01) brightness(1.08) contrast(1.01) !important;
  }

  body.hero-airport-hub-hq .page-hero::after {
    background: linear-gradient(180deg,
      rgba(4,7,10,.55) 0%,
      rgba(4,7,10,.28) 27%,
      rgba(4,7,10,.03) 44%,
      rgba(4,7,10,.03) 70%,
      rgba(4,7,10,.19) 85%,
      rgba(4,7,10,.54) 100%);
  }
}

/* LAX desktop hero: the source photograph already contains the complete LAX
   landmark and the complete Suburban. Reserve a copy column on the left and
   contain the un-cropped photograph on the right. */
@media (min-width: 1200px) {
  body.hero-wheel-lax .page-hero {
    min-height: 640px;
    align-items: center;
    background:
      radial-gradient(circle at 28% 18%, rgba(24,52,82,.34), transparent 34%),
      linear-gradient(110deg, #050a10 0%, #091421 42%, #080b0f 100%);
  }

  body.hero-wheel-lax .page-hero img {
    inset: 0 0 0 38%;
    width: 62%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.hero-wheel-lax .page-hero::after {
    background:
      linear-gradient(90deg,
        rgba(3,7,12,.97) 0%,
        rgba(3,8,14,.90) 28%,
        rgba(3,8,14,.42) 43%,
        rgba(3,8,14,.06) 62%,
        rgba(3,8,14,0) 100%),
      linear-gradient(0deg, rgba(3,7,11,.16), transparent 45%);
  }

  body.hero-wheel-lax .page-hero .hero-inner {
    width: min(1720px, calc(100% - 80px));
    max-width: none;
    padding: 86px 0 66px;
  }

  body.hero-wheel-lax .page-hero h1 {
    max-width: 610px;
    font-size: clamp(3.65rem, 4.3vw, 5.1rem);
  }

  body.hero-wheel-lax .page-hero .hero-lede {
    max-width: 590px;
  }

  /* Event hero: preserve the complete Escalade in a dedicated photo panel and
     keep every line of copy in a separate dark panel on the right. */
  body.hero-event-estate-v2 .page-hero {
    min-height: 640px;
    align-items: center;
    background:
      radial-gradient(circle at 82% 18%, rgba(44,58,66,.28), transparent 34%),
      linear-gradient(110deg, #090c0f 0%, #11161b 66%, #07090c 100%);
  }

  body.hero-event-estate-v2 .page-hero img {
    inset: 0 34% 0 0;
    width: 66%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.hero-event-estate-v2 .page-hero::after {
    background:
      linear-gradient(90deg,
        rgba(3,6,9,.04) 0%,
        rgba(3,6,9,.06) 54%,
        rgba(3,6,9,.45) 63%,
        rgba(3,6,9,.94) 71%,
        rgba(3,6,9,.99) 100%),
      linear-gradient(0deg, rgba(3,6,9,.16), transparent 48%);
  }

  body.hero-event-estate-v2 .page-hero .hero-inner {
    width: min(1720px, calc(100% - 80px));
    max-width: none;
    padding: 82px 0 58px;
  }

  body.hero-event-estate-v2 .page-hero .hero-inner > * {
    width: min(540px, 31vw);
    margin-left: auto;
  }

  body.hero-event-estate-v2 .page-hero h1 {
    max-width: 540px;
    font-size: clamp(3.25rem, 3.7vw, 4.4rem);
    line-height: 1.01;
  }

  body.hero-event-estate-v2 .page-hero .hero-lede {
    max-width: 540px;
  }

  /* Family interior: preserve the full vertical cabin depth so both captain's
     chairs and the complete third row remain visible. */
  body.family-page .page-hero {
    min-height: 640px;
    align-items: center;
    background:
      radial-gradient(circle at 28% 24%, rgba(54,62,68,.22), transparent 32%),
      linear-gradient(110deg, #070a0c 0%, #11161a 45%, #090b0d 100%);
  }

  body.family-page .page-hero img {
    inset: 0 0 0 45%;
    width: 55%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.family-page .page-hero::after {
    background:
      linear-gradient(90deg,
        rgba(4,7,9,.98) 0%,
        rgba(4,7,9,.93) 34%,
        rgba(4,7,9,.46) 49%,
        rgba(4,7,9,.08) 66%,
        rgba(4,7,9,0) 100%);
  }

  body.family-page .page-hero .hero-inner {
    width: min(1720px, calc(100% - 80px));
    max-width: none;
    padding: 82px 0 62px;
  }

  body.family-page .page-hero h1 {
    max-width: 620px;
    font-size: clamp(3.65rem, 4.25vw, 5rem);
  }

  body.family-page .page-hero .hero-lede {
    max-width: 600px;
  }
}