@charset "UTF-8";
/* ==========================================================================
   ELEVATED ROOFING PARTNERS — hero-video.css

   "Who You're Hiring" band directly below the homepage hero. Ported from the
   free-roof-inspection LP (#why in that page's inline styles): same olive
   ground, stripe texture and top accent line, same four white credential
   cards. The two owner photo tiles are replaced by Steven's 56-second video.

   This band replaces the old "Why Homeowners Choose ERP" stats bar. Its CSS
   is left in place in homepage-v2.css: that file is content-hash pinned in
   scripts/test-asset-versions.js, so deleting dead rules there would force a
   version bump on every page that links it for no visible gain.

   Everything is scoped under #vsl. The LP class names are reused verbatim for
   the card block because nothing on the homepage defines them, but the
   eyebrow is .vsl__eyb rather than .eyb, which lp-port.css already owns.

   The video never loads until it is clicked. Wired by js/hero-video.js.
   ========================================================================== */

/* "shingles" carries the headline. Gold gives the line a focal point instead
   of letting it read as one flat run of caps. */
#vsl .vsl__head h2 em { font-style: normal; color: #D9B05A; }

/* --------------------------------------------------------------------------
   The band. Values copied from the LP so the two pages match rather than
   approximate each other.
   -------------------------------------------------------------------------- */
.vsl {
  position: relative;
  padding: 78px 0;
  background:
    radial-gradient(85% 60% at 12% -5%, rgba(197, 160, 89, 0.20), transparent 60%),
    radial-gradient(70% 55% at 95% 10%, rgba(123, 117, 54, 0.30), transparent 62%),
    #2A2B22;
}

.vsl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 24px, rgba(255, 255, 255, 0.035) 24px, rgba(255, 255, 255, 0.035) 25px);
  pointer-events: none;
}

.vsl::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(21, 21, 23, 0.5), transparent 15%, transparent 85%, rgba(21, 21, 23, 0.5));
  pointer-events: none;
}

/* Without this the stripe texture paints over the content: an absolutely
   positioned pseudo-element sorts after in-flow content. */
.vsl__wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 26px; display: flex; flex-direction: column; }

/* Order is set per variant below. Only the play button is focusable in here,
   and the cards hold nothing tabbable, so reordering visually does not put
   focus order out of step with what is on screen. */
.vsl__head { order: 1; }
.vsl__stage { order: 2; }
.why__lead { order: 3; }
.why { order: 4; }
.vsl__cta { order: 5; }

/* --------------------------------------------------------------------------
   Section header
   -------------------------------------------------------------------------- */
.vsl__head { text-align: center; max-width: 900px; margin: 0 auto 40px; }

.vsl__eyb {
  display: inline-block;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D9B05A;
}

#vsl .vsl__head h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.08;
  color: #fff;
  margin: 12px 0 0;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The player. aspect-ratio reserves the box before the poster decodes, so
   nothing shifts on load.
   -------------------------------------------------------------------------- */
.vsl__stage { margin-bottom: 6px; }

.hvid {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #131315;
  aspect-ratio: 16/9;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.hvid video { display: block; width: 100%; height: 100%; object-fit: cover; }

.hvid__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: linear-gradient(to top, rgba(15, 15, 16, 0.62) 0%, rgba(15, 15, 16, 0.12) 42%, rgba(15, 15, 16, 0) 65%);
  transition: opacity 0.25s ease;
}

.hvid--playing .hvid__overlay { opacity: 0; pointer-events: none; }

.hvid__btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #D9B05A;
  display: grid;
  place-items: center;
  color: #1c1b18;
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.7);
  transition: transform 0.18s ease;
}

.hvid__btn svg { margin-left: 4px; }
.hvid__overlay:hover .hvid__btn { transform: scale(1.07); }
.hvid__overlay:focus-visible { outline: 3px solid #D9B05A; outline-offset: -3px; }

/* One line beside the video. It carries the whole column, so it is set as a
   display statement rather than body copy: heading face, tight leading, and a
   short gold rule above it echoing the hero eyebrow. */
.vsl__line {
  position: relative;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: clamp(1.45rem, 2.35vw, 2.05rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  padding-top: 26px;
  text-wrap: balance;
}

.vsl__line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: #D9B05A;
}


/* A's column carries a real paragraph rather than a one-line statement, so it
   drops out of the display scale into a reading scale. The gold rule and the
   top padding stay, which keeps both variants anchored the same way. */
.vsl__line--body {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
  color: #fff;
  text-wrap: initial;
}

/* --------------------------------------------------------------------------
   Credential cards, 1-for-1 from the LP
   -------------------------------------------------------------------------- */
.why__lead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 46px 0 22px;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D9B05A;
}

.why__lead::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.22); }

.why { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; }

.why__card {
  background: #fff;
  border: 1px solid #e3dccd;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 18px 40px -34px rgba(21, 21, 23, 0.75);
}

.why__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(123, 117, 54, 0.15);
  color: #7B7536;
}

.why__icon svg { width: 21px; height: 21px; }
.why__badge { display: block; }
.why__badge img { display: block; width: 62px; height: 59px; }

#vsl .why__title {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #1c1b18;
  margin: 14px 0 0;
}

.why__text { color: #6b665d; font-size: 0.86rem; line-height: 1.6; margin-top: 7px; }

@media (max-width: 900px) {
  .why { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .vsl { padding: 56px 0; }
  .why { grid-template-columns: 1fr; }
}

/* ----- the split: video left, copy right ----- */
@media (min-width: 900px) {
  .vsl__stage {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;
  }
}

/* ----- below the split breakpoint it stacks ----- */
@media (max-width: 899px) {
  .vsl__aside { margin-top: clamp(1.5rem, 4vw, 2rem); }
}

/* --------------------------------------------------------------------------
   C only: caption under the video, and the closing CTA.

   C's chip is hidden because the caption below the video already names the
   length and the speaker, and running both says it twice.
   -------------------------------------------------------------------------- */
.vsl__cap { margin-top: 16px; }

.vsl__cap-k {
  display: block;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D9B05A;
}

/* C's copy is two <p> children inside the styled block, so main.css's global
   p{color:var(--color-text-muted)} matches them directly and beats the colour
   they would otherwise inherit. A puts the class on the <p> itself and never
   hit this. Inherit the type as well so the two variants stay identical. */
.vsl__line--body p,
.vsl__line--body li {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.vsl__line--body p + p { margin-top: 1.05em; }

.vsl__cta { margin-top: clamp(2.25rem, 4vw, 3.25rem); text-align: center; }

.vsl__cta-btn {
  display: inline-block;
  padding: 1rem 2.25rem;
  border-radius: 10px;
  background: #D9B05A;
  color: #1c1b18;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

.vsl__cta-btn:hover { background: #e6c274; transform: translateY(-1px); }
.vsl__cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --------------------------------------------------------------------------

/* --------------------------------------------------------------------------
   Phones. Measured at 390px: the eyebrow was overrunning its line by a few
   pixels and wrapping, and the CTA label was too long for the button, which
   turned it into a two-line 77px block. Tightening the eyebrow's tracking
   fits it on one line; the CTA becomes a deliberate full-width bar rather
   than an accidental one.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .vsl__wrap { padding: 0 20px; }

  .vsl__eyb { font-size: 0.7rem; letter-spacing: 0.14em; }
  .vsl__head { margin-bottom: 30px; }

  .vsl__line--body { font-size: 0.98rem; line-height: 1.68; padding-top: 22px; }
  .vsl__cap { margin-top: 14px; }

  .why__lead { margin: 34px 0 18px; }
  .why__card { padding: 20px 18px; }

  .vsl__cta { margin-top: 2rem; }

  .vsl__cta-btn {
    display: block;
    width: 100%;
    padding: 1.05rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
}