/* Contact page: hero. Same format as every H10 hero: copy on the start side (right in Arabic), the
   visual on the other side. The whole section is a room (black wall, H10-yellow floor) and the
   fleet (car care van, enclosed flatbed, furniture truck) stands on its floor with its own yellow
   contact glow. The room and the picture drift with the mouse (js/services-hero.js,
   [data-parallax] + [data-depth]); the copy stays still.

   The wall/floor line is tied to the picture: the horizon sits at --horizon of the picture's
   height (just behind the far wheels), so the floor starts right behind the vehicles at any width. */

.contact-hero {
  --gutter: clamp(24px, 5vw, 96px);
  --img-w: min(1120px, (100vw - 2 * var(--gutter)) * 0.6);    /* the visual column */
  --bleed: calc(var(--gutter) * 0.85);                        /* the picture runs past the gutter toward the screen edge */
  --fleet-w: calc(var(--img-w) + var(--bleed));
  --img-h: calc(var(--fleet-w) * 644 / 1600);                 /* the picture's aspect ratio */
  --horizon: 0.7;                                             /* wall/floor line, share of the picture height (just above the far wheels) */
  --lift-min: clamp(28px, 7vh, 72px);                         /* floor in front of the picture's bottom, at least */
  --lift: var(--lift-min);                                    /* js/contact-hero.js raises it so the floor line meets the copy */
  --floor-h: calc(var(--img-h) * (1 - var(--horizon)) + var(--lift));
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(112px, 14vh, 150px) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--img-w);
  column-gap: clamp(24px, 3vw, 56px);
  background: #070708;
  color: var(--text-on-dark);
}

/* the room: a layer a little larger than the section so it can drift without showing an edge */
.contact-hero__room {
  position: absolute; inset: -24px;
  background: #070708;                                        /* the wall */
  pointer-events: none;
}
/* the floor: yellow, a little darker toward the wall, lit where the fleet stands */
.contact-hero__room::before {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: calc(var(--floor-h) + 24px);
  background:
    radial-gradient(45% 90% at var(--spot-x, 30%) 0%, rgba(255, 214, 90, 0.55), transparent 70%),
    linear-gradient(to bottom, #B98A00 0%, #E0A800 30%, var(--h10-yellow) 70%, #F7C21E 100%);
}
.contact-hero__room:dir(ltr) { --spot-x: 70%; }
/* the corner between wall and floor: a thin shadow line and a glow rising up the wall */
.contact-hero__room::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(var(--floor-h) + 24px); height: 28vh;
  background: linear-gradient(to top, rgba(242, 183, 5, 0.16), transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* copy: start side, centred on the wall above the floor line */
.contact-hero__copy {
  position: relative; z-index: 2;
  align-self: center;
  margin-bottom: calc(var(--img-h) * (1 - var(--horizon)) + var(--lift-min) + clamp(24px, 4vh, 48px));   /* the buttons stay clear of the floor */
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  max-width: 600px;
}
.contact-hero__copy .section-eyebrow { margin: 0; }
.contact-hero h1 { margin: 0; font-size: clamp(40px, 5.2vw, 84px); line-height: 1.15; font-weight: 700; text-wrap: balance; }
.contact-hero h1 span { color: var(--h10-yellow); }
.contact-hero__lead { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.85; color: var(--muted-on-dark); }
.contact-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.contact-hero__or { font-size: 15px; font-weight: 600; color: var(--dim-on-dark); }

/* the fleet: the other side, standing on the floor */
.contact-hero__fleet {
  position: relative; z-index: 1;
  align-self: end;
  width: var(--fleet-w);
  margin: 0 0 var(--lift);
  margin-inline-end: calc(var(--bleed) * -1);
}
.contact-hero__fleet img { display: block; width: 100%; height: auto; }

/* phones and tablets: copy on top, the fleet below it on the floor */
@media (max-width: 900px) {
  .contact-hero {
    --gutter: 16px;
    --img-w: min(124vw, 800px);
    --bleed: 0px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;   /* the picture may overflow its track, the copy may not */
    row-gap: 32px; justify-items: center;
    padding-top: 104px;
  }
  .contact-hero__copy { margin-bottom: 0; justify-self: stretch; }
}