/* ==================================================================
   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;
  /* Mirrors the --hl-x clamp declared on .hero-left3d h1 in
     home-hero-left.css. Declared here under a separate name so the rail can
     read it WITHOUT touching the headline's own variable or type scale. */
  --hl-rail-x:clamp(2.6rem, 7.7vw, 7rem);
}
/* 2026-09-07: the rail previously ran the FULL height of the left column,
   which carried it past the lede and down alongside the CTA - it read as a
   leftover divider. It now spans the headline block only and stops there,
   so the vertical rail and the horizontal .hl-rule below it form a
   deliberate corner around the message.

   The headline is three line-boxes at every width (HOUSTON / SUNROOF REPAIR /
   SINCE 1979) at line-height 0.94, so 2.95 x the headline size tracks the
   H1's real height automatically - 327px at 1440, 123px at 375 - instead of
   a percentage of a column whose height changes with the layout. */
body.hh2 .hero-left3d .hl-rail{
  left:0; top:0;
  width:10px;
  height:calc(var(--hl-rail-x) * 2.95);
  -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 red cap. Held at 40% of the (now much shorter) rail so the accent
   still reads as an accent and the charcoal still reads as the body of the
   rail - the same proportion the full-height version had. */
body.hh2 .hero-left3d .hl-rail::after{
  left:0; top:0; width:3px; height:40%;
  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%;
  /* 2026-09-08 - ORBIT FIT.  Was a flat max-width:660px, which put the
     bottom of the artwork at y=963 in a 900px viewport, so the last ~60px
     fell below the opening screen (and much more on a shorter laptop).

     Two numbers matter here:
       520px  the desktop size, ~21% down from 660. The artwork, portrait,
              logo ring and proportions are untouched - only the displayed
              box is smaller, and the single whole-artwork link scales with
              it, so the clickable area stays exactly aligned.
       327px  everything stacked above the orbit at scroll 0: the 189px
              sticky header + 36px hero padding + the 60px social row and
              its 18px margin, plus a 24px breathing gap at the bottom.

     calc(100vh - 327px) is therefore "the tallest the orbit can be and
     still finish above the fold". min() takes whichever is smaller, so a
     tall screen gets the 520px design size and a short one is trimmed to
     fit. The 380px max() floor stops the logos going tiny on very short
     windows; below about 707px tall the artwork starts to run past the
     fold again, which is the right trade at that point. */
  max-width:min(520px, max(380px, calc(100vh - 327px)));
  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;
  /* 2026-09-08 - pin this column to the TOP of the hero row.  .hero-grid is
     align-items:center, and once the orbit shrinks below the left column's
     height the row height is set by the left column and the orbit column
     re-centres inside it - so every 2px taken off the artwork only lifted
     its bottom edge by 1px, and the fold could never be cleared. Top-aligned,
     a reduction moves the bottom edge 1:1. This also leaves the orbit exactly
     where it already sits today (y=225), so nothing above it moves. */
  align-self:start;
}

/* ---------- 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;
  }
  /* 2026-09-08 - same proportional reduction as the desktop size. */
  body.hh2 .hero-orbit{ max-width:440px; }
}

/* ---------- 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. */
  /* 2026-09-08 - gaps tightened (6/22 -> 4/14). The ORBIT ITSELF IS NOT
     TOUCHED: max-width stays 260px, only the space around it is smaller. */
  body.hh2 .hero-orbit-slot{ order:3; margin:4px 0 14px; }

  /* 2026-09-08 - the orbit already cleared the fold on a 390x844 phone
     (bottom at 572 of 844), but at 332px it filled the column and pushed the
     copy and the services mark a long way down. 260px is ~22% smaller, keeps
     each logo legible, and lifts everything below it by 72px.
     margin-inline:0 overrides the base auto-centring so the artwork stays
     flush with the headline, the paragraph and the services mark. */
  body.hh2 .hero-orbit{ max-width:260px; margin-inline:0; }

  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; }
}