/* ==========================================================================
   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; }
}

/* --------------------------------------------------------------------------
   NARROW-PHONE CTA FIT — added 2026-09-03 (health-check issue #4)

   At <=366px the double chevron was invisible. The CTA is a flex row and at
   <=560px the button is width:100%, so at 320px the content (ico 44 + gap 14
   + label 183 + gap 14 + chev 32 = 287px) overflowed its 220px content box by
   67px. The label could not shrink because `white-space:nowrap` is inherited
   from .btn in home.css, which makes its min-content its full single-line
   width — so the chevron, as the last flex item, was pushed out and then
   erased by the button's own clip-path chamfer.

   Letting the label wrap drops its min-content to 84px ("Services"), so the
   row needs 188px and fits with room to spare. Nothing else is touched: the
   hero overflow, the clip-path, the icon, the chevron, the font size, the
   gaps, the padding and the button structure are all unchanged, and the
   380px ceiling puts this out of reach of 390px and every larger viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 380px){
  .hero-left3d .hl-cta-label{
    white-space: normal;
  }
}