/* ---------------------------------------------------------------------------
   Block: Split hero (merged from live #bolt-hero + #bolt-hero-mobile).

   Live shipped the SAME hero twice: the desktop grid version inside an
   Elementor container carrying .elementor-hidden-tablet .elementor-hidden-mobile
   and the stacked version inside .elementor-hidden-desktop. Elementor's default
   breakpoints put the split at 1024px, so the desktop rules below are the base
   layer and the former #bolt-hero-mobile rules are re-scoped to #bolt-hero
   inside @media (max-width:1024px). The Google Fonts @import from both source
   <style> blocks is deleted — fonts are global now.

   DECLARED DEVIATIONS FROM THE SOURCE. This list is the complete set; the
   merge itself (re-scoping the mobile block into a media query, and lifting
   three inline style attributes off the markup into .bh-video / .bh-poster /
   .bh-scrim) is described above and is not repeated as a numbered item.

   1. `#bolt-hero .bh-btn:focus-visible` is added alongside the source's
      `:hover` rule (see the .bh-btn rule further down). Live styles the CTA on
      hover only, so a keyboard user tabbing to it gets no visible state change
      beyond the UA focus ring, which this button's own background largely
      swallows. The added selector reuses the hover declarations verbatim — no
      new values, no change to any pointer-driven rendering. Deliberate
      accessibility improvement, kept knowingly.
   --------------------------------------------------------------------------- */

/* SECTION (was the inline style attribute on <section id="bolt-hero">) */
#bolt-hero{
  position:relative;
  overflow:hidden;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

/* BACKGROUND VIDEO + POSTER (were inline style attributes) */
#bolt-hero .bh-video,
#bolt-hero .bh-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
#bolt-hero .bh-poster{z-index:-3;}

/* DARK OVERLAY (was an inline style attribute) */
#bolt-hero .bh-scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:-1;
}

/* WRAPPER */
#bolt-hero .bh-wrap{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  column-gap:64px;
  width:min(1200px,92vw);
  height:100%;
  z-index:1;
}

/* COLUMNS — PERFECT CENTERING */
#bolt-hero .bh-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* TITLE */
#bolt-hero .bh-title{
  font-family:"DM Serif Display",serif;
  font-size:52px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:.02em;
  margin:0 0 18px;
  color:#fff;
}

/* DIVIDER */
#bolt-hero .bh-divider{
  width:1px;
  height:320px;
  background:rgba(255,255,255,.65);
  border-radius:2px;
}

/* BUTTONS */
#bolt-hero .bh-btn{
  --blue:var(--mp-blue);
  --pink:var(--mp-pink);
  display:inline-block;
  font-family:"Montserrat",sans-serif;
  font-size:14px;
  font-weight:500;
  color:#fff;
  text-decoration:none;
  padding:12px 24px;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
#bolt-hero .bh-blue{background:var(--blue);}
#bolt-hero .bh-pink{background:var(--pink);}

/* GLOW SWEEP */
#bolt-hero .bh-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:55%;
  height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%
  );
  animation:bhSweep 3s linear infinite;
}
@keyframes bhSweep{
  0%{left:-120%;}
  50%{left:130%;}
  100%{left:130%;}
}

/* Source has :hover only. :focus-visible is declared deviation 1 in the header
   comment — same declarations, keyboard parity. */
#bolt-hero .bh-btn:hover,
#bolt-hero .bh-btn:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------------------
   MOBILE / TABLET — verbatim from live #bolt-hero-mobile, re-scoped.
   Elementor default desktop breakpoint is 1025px, so the stacked version was
   what every viewport at or below 1024px actually saw.
   --------------------------------------------------------------------------- */
@media (max-width:1024px){

  /* Layout */
  #bolt-hero{
    height:88vh;
  }
  #bolt-hero .bh-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:32px;
    width:min(560px,92vw);
    margin:0 auto;
    text-align:center;
    z-index:1;
  }
  #bolt-hero .bh-col{
    width:100%;
  }

  /* Titles */
  #bolt-hero .bh-title{
    font-family:"DM Serif Display",serif !important;
    color:#fff !important;
    font-weight:400;
    line-height:1.05;
    letter-spacing:.02em;
    font-size:36px;
    margin:0 0 16px;
  }

  /* Mobile Divider */
  #bolt-hero .bh-divider{
    width:64px;
    height:1.5px;
    background:rgba(255,255,255,.65);
    border-radius:2px;
  }

  /* Buttons */
  #bolt-hero .bh-btn{
    padding:11px 22px;
  }
}

/* Home hero: pulled up under the header as on live (container margin -77px under
   a 132px header, so the 100vh hero starts at y 55). */
@media (min-width: 1025px) {
  main#main > #bolt-hero:first-child { margin-top: -77px; }
}