/* ==================================================================
   HOMEPAGE HERO — ORBIT REDESIGN            LOCAL DESIGN TEST ONLY
   Created 2026-09-06. Not staged, not deployed.

   Scope: body.hh2, which exists on the local index.html and nowhere
   else. Every rule below is prefixed with it, so the live homepage,
   the approved Vehicle Makes page, and every other page are
   structurally incapable of being affected by this file.

   WHAT THIS CHANGES
     1. The hero becomes substantially wider at desktop. The rest of the
        page keeps the approved 1280px .wrap; only the hero opens up.
     2. The right column becomes the approved Vehicle Makes orbit
        artwork, used EXACTLY as supplied - same file, no crop, no
        recolour, no re-render, no logo moved.
     3. The left rail accent is rebuilt as a full-height designed rail
        instead of the previous partial line that faded out at 78%.

   WHAT THIS DOES NOT TOUCH
     - assets/vehicle-makes-30-logo-double-orbit.jpg is referenced
       read-only. It is the approved frozen artwork.
     - The Vehicle Makes hotspot system (.vmo-hot / .vm-rgn-hot, scoped
       to body.vm in legacy-pages.css) is NOT loaded, NOT duplicated and
       NOT modified. On this page the orbit is one plain link to
       /vehicle-makes/ - navigation-capable, but it reuses nothing and
       therefore cannot destabilise the approved system.
     - home.css and home-hero-left.css are unmodified; this sheet loads
       after them and overrides only what the redesign needs.
   ================================================================== */

/* ---------- 1. WIDER HERO ----------
   The approved .wrap is 1280px. At 1440 that leaves the hero looking
   pinched. The hero alone widens to 1560 with a 40px gutter, so it
   feels commanding without touching any other section's rhythm. */
body.hh2 .hero > .wrap{
  max-width:1560px;
  padding-inline:48px;
}

/* Two columns, weighted so the orbit reads as the primary visual
   without crushing the headline. minmax() keeps both readable while the
   viewport reflows; nothing is stretched or distorted. */
body.hh2 .hero-grid{
  display:grid;
  grid-template-columns:minmax(400px, 0.92fr) minmax(480px, 1.08fr);
  gap:clamp(32px, 4vw, 76px);
  align-items:center;
}

/* ---------- 2. THE LEFT RAIL, PROPERLY INTEGRATED ----------
   Previously a skewed steel bar + orange stripe masked to fade out at
   78% of the copy height, which read as a fragment of a line rather
   than a designed element. It now runs the FULL height of the hero copy
   with a crisp cap at each end, so it frames the message instead of
   trailing off. Same charcoal + orange language as before. */
body.hh2 .hero-left3d{
  position:relative;
  padding-left:34px;
}
body.hh2 .hero-left3d .hl-rail{
  left:0; top:0;
  width:10px; height:100%;
  -webkit-mask-image:none;
  mask-image:none;
}
body.hh2 .hero-left3d .hl-rail::before{
  width:3px;
  background:var(--charcoal);
  transform:none;
  box-shadow:none;
  border-radius:2px;
}
/* The orange is now a deliberate segment on the rail rather than a
   second full-length stripe: it marks the headline block and stops. */
body.hh2 .hero-left3d .hl-rail::after{
  left:0; top:0; width:3px; height:38%;
  background:var(--red);
  transform:none;
  box-shadow:none;
  border-radius:2px;
}

/* The halftone dot field sat in the gap the photos used to occupy. With
   the orbit there it becomes visual noise behind the artwork. */
body.hh2 .hero-left3d .hl-dots{ display:none; }

/* ---------- 3. THE ORBIT AS THE HERO VISUAL ----------
   Shown whole, square, uncropped. aspect-ratio holds the box before the
   file decodes so the row never jumps. */
body.hh2 .hero-orbit{
  position:relative;
  width:100%;
  max-width:660px;
  margin-inline:auto;
  line-height:0;
}
body.hh2 .hero-orbit img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
}

/* Whole-artwork link. No hotspots, no overlay, nothing painted on top
   of the approved artwork - only a keyboard focus ring. */
body.hh2 a.hero-orbit{
  display:block;
  text-decoration:none;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
body.hh2 a.hero-orbit:focus{ outline:none; }
body.hh2 a.hero-orbit:focus-visible{
  outline:3px solid var(--red);
  outline-offset:6px;
}

/* The social row sat above the old photo pair. Keep it, but let it sit
   over the orbit column without pushing the artwork down. */
body.hh2 .hero-photo{ position:relative; }

/* ---------- 4. RELOCATED HOMEPAGE IMAGES ----------
   The real team/shop photograph and the Ford graphic are NOT deleted -
   they move to sections where they do more work. Both keep their
   original files, alt text and dimensions. */
body.hh2 .hp-move{
  margin:44px auto 0;
  max-width:1180px;
}
body.hh2 .hp-move img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
body.hh2 .hp-move-cap{
  margin:14px auto 0;
  max-width:820px;
  text-align:center;
  font-size:0.92rem;
  line-height:1.6;
  color:var(--charcoal-soft);
}
body.hh2 a.hp-move-link{ display:block; text-decoration:none; }

/* ---------- 5. TABLET ---------- */
@media (max-width:1100px){
  body.hh2 .hero > .wrap{ max-width:100%; padding-inline:28px; }
  body.hh2 .hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  body.hh2 .hero-orbit{ max-width:560px; }
}

/* ---------- 6. PHONE ----------
   Explicit reflow rather than a shrunk desktop layout:
     1. headline / message
     2. orbit artwork
     3. short copy + View Our Services
   Source order is headline -> copy -> CTA -> orbit, so the orbit is
   pulled up between the headline and the copy with order:. */
@media (max-width:640px){
  body.hh2 .hero > .wrap{ padding-inline:18px; }
  body.hh2 .hero-grid{ gap:22px; }

  body.hh2 .hero-left3d{
    display:flex;
    flex-direction:column;
    padding-left:22px;
  }
  body.hh2 .hero-left3d h1{ order:1; }
  body.hh2 .hero-left3d .hl-rule{ order:2; }
  body.hh2 .hero-left3d .lede{ order:4; }
  body.hh2 .hero-left3d .btn-row{ order:5; }

  /* The orbit is moved into the left column's flow on phones so it can
     sit directly under the headline without duplicating the markup. */
  body.hh2 .hero-orbit-slot{ order:3; margin:6px 0 22px; }

  body.hh2 .hero-orbit{ max-width:100%; }

  body.hh2 .hero-photo{ display:none; }

  body.hh2 .hp-move{ margin-top:30px; }
}

/* ---------- 7. WHICH LEDE IS SHOWN ----------
   Exactly one of the two paragraphs renders at any width. display:none
   also removes the other from the accessibility tree, so the copy is
   never announced twice. */
body.hh2 .hero-left3d .lede-sm{ display:none; }

@media (max-width:640px){
  body.hh2 .hero-left3d .lede{ display:none; }
  body.hh2 .hero-left3d .lede-sm{ display:block; order:4; }
}

/* Above the phone breakpoint the in-flow phone slot is not used. */
@media (min-width:641px){
  body.hh2 .hero-orbit-slot{ display:none; }
}