/* ==========================================================================
   HOMEPAGE HERO — LEFT COLUMN ONLY, 3D redesign
   Created 2026-09-02. Reference (approved):
     Graphics/homepage-hero-left-3d-redesign-reference.png

   SCOPE: every selector is under `.hero-left3d`, a class added to the
   homepage hero's left column and nowhere else. `.hero-copy` on its own is
   used by ~20 other pages, so it is never targeted alone here. This file is
   linked ONLY by index.html and loads AFTER home.css.

   THE RIGHT COLUMN IS NOT TOUCHED. .hero-photo, .hero-social,
   .hero-photo-pair and both images keep every rule they already had.
   The one thing that could disturb them is column height: .hero-grid is
   `align-items:center`, so a left column taller than the right (811px) would
   re-centre the row and move the photographs. The type here is sized so the
   left column stays well under that — see the note on --hl-x below.
   ========================================================================== */

.hero-left3d{
  position:relative;
  min-width:0;                  /* never let the headline widen the 1fr track */
  padding-left:30px;            /* clearance for the metallic rail */
  z-index:1;
}

/* --------------------------------------------------------------------------
   THE METALLIC RAIL
   Brushed steel edge with an orange stripe, fading into its own reflection —
   the vertical element down the left of the reference.
   -------------------------------------------------------------------------- */
.hero-left3d .hl-rail{
  position:absolute;
  left:0; top:4px;
  width:15px; height:78%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.22) 82%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.22) 82%, rgba(0,0,0,0) 100%);
}
/* brushed steel face */
.hero-left3d .hl-rail::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:8px;
  background:linear-gradient(90deg, #6E6A66 0%, #2A2724 22%, #4A4642 48%, #1C1917 74%, #57534E 100%);
  box-shadow:0 6px 16px rgba(23,20,18,0.28);
  transform:skewY(-1.1deg);
  transform-origin:top left;
}
/* orange stripe alongside it */
.hero-left3d .hl-rail::after{
  content:"";
  position:absolute; left:9px; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--orange) 0%, #D95A0B 55%, #9E3F06 100%);
  box-shadow:0 0 12px rgba(242,96,12,0.45);
  transform:skewY(-1.1deg);
  transform-origin:top left;
}

/* --------------------------------------------------------------------------
   HALFTONE FIELD
   A restrained dot grid in the open area beside the headline. It sits behind
   the type at z-index 0 and is masked so it never runs under a word.
   -------------------------------------------------------------------------- */
.hero-left3d .hl-dots{
  position:absolute;
  right:-46px; top:16%;
  width:250px; height:250px;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(23,20,18,0.30) 1.4px, rgba(0,0,0,0) 1.5px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(closest-side at 76% 40%, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 82%);
  mask-image:radial-gradient(closest-side at 76% 40%, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 82%);
}

/* --------------------------------------------------------------------------
   HEADLINE
   Same words, same order, same single <h1>; the four lines are spans so each
   can take its own weight and colour. --hl-x is the size of the two big
   lines and everything else is derived from it in em, so the block scales as
   one unit and cannot outgrow its column.
   -------------------------------------------------------------------------- */
.hero-left3d h1{
  position:relative; z-index:1;
  --hl-x:clamp(2.6rem, 7.7vw, 7rem);    /* ~111px at 1440; sized so SUNROOF,
                                           the longest line, stays inside the
                                           523px column and never overflows */
  font-family:var(--font-sans);
  font-size:var(--hl-x);
  font-weight:900;
  text-transform:uppercase;
  line-height:0.94;
  letter-spacing:-0.028em;
  color:var(--black);
  margin:0;
}
.hero-left3d h1 span{ display:block; }
.hero-left3d .hl-l1{                    /* HOUSTON */
  font-size:0.43em;
  letter-spacing:0.012em;
  line-height:1.06;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(23,20,18,0.14);
}
.hero-left3d .hl-l2,                    /* SUNROOF */
.hero-left3d .hl-l3{                    /* REPAIR  */
  font-size:1em;
  text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(23,20,18,0.20);
}
.hero-left3d .hl-l3{ color:var(--red); text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(165,15,21,0.26); }
.hero-left3d .hl-l4{                    /* SINCE 1979 */
  font-size:0.53em;
  letter-spacing:0.004em;
  line-height:1.12;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(23,20,18,0.14);
}

/* --------------------------------------------------------------------------
   ACCENT RULE — orange line broken by three slanted dashes
   -------------------------------------------------------------------------- */
.hero-left3d .hl-rule{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:9px;
  margin:20px 0 24px;
  max-width:480px;
}
.hero-left3d .hl-rule::before,
.hero-left3d .hl-rule::after{
  content:"";
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(242,96,12,0.15) 0%, var(--orange) 40%, var(--orange) 100%);
}
.hero-left3d .hl-rule::before{ flex:1 1 auto; }
.hero-left3d .hl-rule::after{
  flex:0 0 96px;
  background:linear-gradient(90deg, var(--orange) 0%, var(--orange) 60%, rgba(242,96,12,0.15) 100%);
}
.hero-left3d .hl-rule i{
  display:block;
  width:9px; height:15px;
  background:linear-gradient(180deg, var(--orange) 0%, #D95A0B 100%);
  transform:skewX(-22deg);
  box-shadow:0 1px 4px rgba(242,96,12,0.4);
}

/* --------------------------------------------------------------------------
   PARAGRAPH — wording unchanged, set for reading
   -------------------------------------------------------------------------- */
.hero-left3d p.lede{
  position:relative; z-index:1;
  margin-top:0;
  font-size:1.22rem;                    /* 19.5px */
  line-height:1.66;
  color:#3B3531;
  max-width:47ch;
}

/* --------------------------------------------------------------------------
   "VIEW OUR SERVICES" — larger moulded automotive control
   The chamfered cream face, the recessed orange trim and the href all come
   from the existing rule in home.css; this enlarges it and replaces the
   single text arrow with an icon + label + double chevron.
   -------------------------------------------------------------------------- */
.hero-left3d .btn-row{ margin-top:30px; }

.hero-copy.hero-left3d .btn-row .btn-outline-dark.btn-lg{
  display:inline-flex; align-items:center; gap:20px;
  padding:20px 34px 20px 20px;
  font-size:1.2rem;                     /* 19.2px */
  font-weight:900; letter-spacing:0.045em; text-transform:uppercase;
  border:1px solid #2A2724;
  clip-path:polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px),
                    calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -3px 0 rgba(0,0,0,0.09),
    0 3px 5px rgba(23,20,18,0.14),
    0 16px 32px rgba(23,20,18,0.22);
}
/* the recessed orange trim, scaled to the larger key */
.hero-copy.hero-left3d .btn-row .btn-outline-dark.btn-lg::before{
  inset:8px;
  clip-path:polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px),
                    calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}
/* home.css appends a "→" here; this key carries a real double chevron instead */
.hero-copy.hero-left3d .btn-row .btn-outline-dark.btn-lg::after{ content:none; }

.hero-left3d .hl-cta-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:58px; flex-shrink:0;
  color:#FFFFFF;
  background:linear-gradient(168deg, #FF8A3D 0%, var(--orange) 45%, #C24E07 100%);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter:drop-shadow(0 5px 10px rgba(242,96,12,0.42));
}
.hero-left3d .hl-cta-ico svg{ width:26px; height:26px; }
.hero-left3d .hl-cta-label{ line-height:1; }
.hero-left3d .hl-cta-chev{
  display:inline-flex; align-items:center;
  margin-left:auto; padding-left:6px;
  color:var(--orange-dark);
}
.hero-left3d .hl-cta-chev svg{ width:26px; height:26px; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   The rail, the dot field and the chamfer scale down; nothing here changes
   the right column, which keeps its own existing breakpoints from home.css.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px){
  .hero-left3d .hl-dots{ display:none; }
}
@media (max-width: 900px){
  .hero-left3d{ padding-left:22px; }
  .hero-left3d .hl-rail{ width:11px; }
  .hero-left3d .hl-rail::before{ width:6px; }
  .hero-left3d .hl-rail::after{ left:7px; width:3px; }
  .hero-left3d p.lede{ max-width:60ch; }
}
@media (max-width: 560px){
  .hero-left3d{ padding-left:16px; }
  .hero-left3d .hl-rule{ margin:16px 0 20px; }
  .hero-copy.hero-left3d .btn-row .btn-outline-dark.btn-lg{
    width:100%; justify-content:flex-start;
    padding:16px 20px 16px 14px; gap:14px;
    font-size:1.06rem;
  }
  .hero-left3d .hl-cta-ico{ width:44px; height:50px; }
  .hero-left3d .hl-cta-ico svg{ width:22px; height:22px; }
}