/* HerCar staging patch v29
   Desktop hero alignment and typography correction.
   Built on top of Patch v28. */

.hero-v27{
  padding-top:18px;
}

.hero-frame-v27{
  position:relative;
  isolation:isolate;
  aspect-ratio:1916 / 821;
  min-height:0;
  height:auto;
  overflow:hidden;
  background:#ece8e6;
}

.hero-frame-v27::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(248,246,245,.46) 0%,rgba(248,246,245,.26) 31%,rgba(248,246,245,.06) 47%,rgba(248,246,245,0) 61%);
}

.hero-media-v27,
.hero-media-v27 img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.hero-media-v27 img{
  min-height:0;
  object-fit:cover;
  object-position:center;
}

/* Match the approved reference: generous left canvas, two clean title lines,
   and the video cards fully contained inside the hero. */
.hero-copy-v27{
  position:absolute;
  z-index:2;
  left:4.7%;
  top:13.5%;
  transform:none;
  width:min(700px,58%);
  padding:0;
}

.hero-copy-v27 .hero-kicker{
  display:block;
  margin:0 0 15px;
  color:var(--red);
  font-size:clamp(.62rem,.76vw,.78rem);
  font-weight:900;
  letter-spacing:.17em;
  line-height:1.35;
  text-transform:uppercase;
}

/* Remove the decorative dash inherited from the original hero. */
.hero-copy-v27 .hero-kicker::before,
.hero-copy-v27 .hero-kicker:before{
  content:none !important;
  display:none !important;
}

.hero-copy-v27 h1{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;
  max-width:none;
  margin:0 0 16px;
  color:#111114;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:clamp(2.8rem,5vw,5.6rem);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.062em;
}

.hero-copy-v27 h1 .hero-title-dark,
.hero-copy-v27 h1 .hero-title-accent{
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  font-weight:900;
}

.hero-copy-v27 h1 .hero-title-dark{
  color:#111114 !important;
}

.hero-copy-v27 h1 .hero-title-accent{
  color:var(--red) !important;
}

.hero-support-v27{
  max-width:560px;
  margin:0;
  color:#44464d;
  font-size:clamp(.92rem,1.04vw,1.1rem);
  line-height:1.5;
}

.hero-support-v27 strong{
  color:#111114;
  font-weight:850;
}

.hero-watch-v27{
  width:min(560px,100%);
  max-width:none;
  margin-top:clamp(24px,3.1vw,48px);
}

.hero-watch-label-v27{
  margin-bottom:10px;
  color:var(--red);
  font-size:.74rem;
  font-weight:950;
  letter-spacing:.17em;
  line-height:1;
  text-transform:uppercase;
}

.hero-video-links-v27{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.hero-video-link-v27{
  appearance:none;
  min-width:0;
  min-height:68px;
  border:1px solid rgba(17,17,20,.11);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 25px rgba(17,17,20,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:11px 13px;
  display:flex;
  align-items:center;
  gap:11px;
  color:#111114;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.hero-video-link-v27:hover{
  transform:translateY(-2px);
  border-color:rgba(239,27,36,.46);
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 30px rgba(17,17,20,.11);
}

.hero-video-link-v27:focus-visible{
  outline:3px solid rgba(239,27,36,.28);
  outline-offset:2px;
}

.hero-video-play-v27{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:2px;
  background:var(--red);
  color:#fff;
  font-size:.76rem;
  box-shadow:0 7px 16px rgba(239,27,36,.24);
}

.hero-video-link-v27 strong{
  display:block;
  font-size:.79rem;
  line-height:1.16;
}

.hero-video-link-v27 small{
  display:block;
  margin-top:4px;
  color:#63646a;
  font-size:.63rem;
  line-height:1.3;
}

@media(max-width:1180px) and (min-width:651px){
  .hero-copy-v27{
    left:4.5%;
    top:12.5%;
    width:58%;
  }

  .hero-copy-v27 h1{
    font-size:clamp(2.55rem,4.85vw,4.55rem);
  }

  .hero-watch-v27{
    width:min(520px,100%);
    margin-top:clamp(20px,2.5vw,34px);
  }

  .hero-video-link-v27{
    min-height:60px;
    padding:9px 10px;
  }

  .hero-video-play-v27{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
}

@media(max-width:900px) and (min-width:651px){
  .hero-copy-v27{
    top:11.5%;
    width:59%;
  }

  .hero-copy-v27 h1{
    font-size:clamp(2.25rem,4.65vw,3.4rem);
  }

  .hero-copy-v27 .hero-kicker{
    margin-bottom:10px;
    font-size:.56rem;
  }

  .hero-support-v27{
    font-size:.84rem;
  }

  .hero-watch-v27{
    margin-top:17px;
  }

  .hero-watch-label-v27{
    margin-bottom:7px;
    font-size:.58rem;
  }

  .hero-video-links-v27{
    gap:8px;
  }

  .hero-video-link-v27{
    min-height:54px;
    padding:8px 9px;
  }

  .hero-video-link-v27 strong{
    font-size:.68rem;
  }

  .hero-video-link-v27 small{
    font-size:.55rem;
  }
}

/* Preserve the approved mobile treatment from v28. */
@media(max-width:650px){
  .hero-v27{padding-top:8px}

  .hero-frame-v27{
    aspect-ratio:941 / 1672;
    min-height:0;
    height:auto;
    border-radius:0 0 22px 22px;
  }

  .hero-frame-v27::after{
    background:linear-gradient(180deg,rgba(247,244,243,.88) 0%,rgba(247,244,243,.69) 23%,rgba(247,244,243,.17) 42%,rgba(10,10,13,0) 60%,rgba(10,10,13,.08) 76%,rgba(10,10,13,.44) 100%);
  }

  .hero-media-v27 img{object-position:center top}

  .hero-copy-v27{
    left:18px;
    right:18px;
    top:23px;
    bottom:18px;
    width:auto;
    transform:none;
    padding:0;
    display:flex;
    flex-direction:column;
  }

  .hero-copy-v27 .hero-kicker{
    max-width:330px;
    margin-bottom:10px;
    font-size:.58rem;
    letter-spacing:.14em;
  }

  .hero-copy-v27 h1{
    max-width:350px;
    margin-bottom:11px;
    font-size:clamp(2.18rem,10.8vw,2.8rem);
    line-height:.94;
  }

  .hero-copy-v27 h1 .hero-title-dark,
  .hero-copy-v27 h1 .hero-title-accent{
    width:auto;
    white-space:normal;
  }

  .hero-support-v27{
    max-width:330px;
    font-size:.84rem;
    line-height:1.45;
  }

  .hero-watch-v27{
    width:100%;
    max-width:none;
    margin-top:auto;
    padding:13px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    background:rgba(10,10,13,.76);
    box-shadow:0 16px 40px rgba(0,0,0,.21);
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
  }

  .hero-watch-label-v27{
    margin-bottom:9px;
    color:#ff8f95;
    font-size:.58rem;
    letter-spacing:.17em;
  }

  .hero-video-links-v27{
    grid-template-columns:1fr;
    gap:7px;
  }

  .hero-video-link-v27{
    min-height:52px;
    border-color:rgba(255,255,255,.12);
    border-radius:13px;
    background:rgba(255,255,255,.96);
    padding:8px 10px;
    box-shadow:none;
  }

  .hero-video-play-v27{
    width:33px;
    height:33px;
    flex-basis:33px;
  }

  .hero-video-link-v27 strong{font-size:.73rem}
  .hero-video-link-v27 small{font-size:.6rem}
}

@media(max-width:380px){
  .hero-copy-v27{left:14px;right:14px;top:18px;bottom:14px}
  .hero-copy-v27 h1{font-size:2.08rem}
  .hero-watch-v27{padding:11px}
  .hero-video-link-v27{min-height:49px}
}

@media(prefers-reduced-motion:reduce){
  .hero-video-link-v27{transition:none}
}