/* LWD 2026-08-09 -- static hero replacing Slider Revolution.
 *
 * The "home" slider had exactly ONE slide, so it was never a slider. Geometry
 * below was MEASURED from the live revslider render at a 1440px viewport before
 * removal: hero box 1440x495 (2.909:1), text block left edge x=299 (20.76%),
 * captions at y=344 / 384 / 441 -> 38.4% / 46.5% / 58.0% of hero height.
 * Revslider scaled its 48px design type down to 35px at 1440 (a 1920 canvas),
 * so type is expressed as 2.43vw with clamps instead of fixed px.
 * Button colour/typeface come from the THEME's .rev-btn override that was in
 * effect (Karla 14/700 on rgb(254,87,34)), not revslider's own red/Raleway.
 */
.lwd-hero {
  position: relative;
  /* Revslider stretched itself to the viewport with JS (fullwidthbanner-container).
     The flattened hero sits inside a normal container row, so break it out to
     full-bleed the CSS way instead. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #E7E7E7 url("/wp-content/uploads/2019/02/sliider-bg.jpg") center center / cover no-repeat;
  height: 34.375vw;
  min-height: 320px;
  max-height: 660px;
  overflow: hidden;
  /* revslider's wrapper sat 26px higher than a normal in-flow block here
     (builder column padding); match its vertical position exactly. */
  margin-top: -26px;
}
.lwd-hero__inner { position: absolute; inset: 0; }
.lwd-hero__eyebrow,
.lwd-hero__headline {
  position: absolute;
  left: 20.76%;
  margin: 0;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: clamp(20px, 2.43vw, 48px);
  line-height: 1;
  letter-spacing: 0;
}
.lwd-hero__eyebrow  { top: 38.4%; font-weight: 300; }
.lwd-hero__headline { top: 46.5%; font-weight: 800; }
.lwd-hero__btn {
  position: absolute;
  left: 20.76%;
  top: 58%;
  display: inline-block;
  padding: 17px 30px;
  background: rgb(254, 87, 34);
  color: #fff;
  font-family: "Karla", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  /* Original measured 185x52; a 2px border accounts for the 4px height and
     ~2px letter-spacing for the 24px width. */
  border: 2px solid rgb(254, 87, 34);
  letter-spacing: 2px;
  transition: background-color .2s ease;
}
.lwd-hero__btn:hover,
.lwd-hero__btn:focus { background: rgb(226, 70, 20); color: #fff; text-decoration: none; }

/* Revslider used separate mobile layers we cannot recover, so below the theme's
   phone breakpoint the hero falls back to normal flow rather than scaling the
   desktop coordinates down to unreadable sizes. */
@media (max-width: 767px) {
  .lwd-hero { height: auto; min-height: 0; max-height: none; padding: 56px 0 64px; }
  .lwd-hero__inner { position: static; }
  .lwd-hero__eyebrow,
  .lwd-hero__headline,
  .lwd-hero__btn { position: static; left: auto; top: auto; }
  .lwd-hero__inner { padding: 0 6%; }
  .lwd-hero__eyebrow  { font-size: 22px; }
  .lwd-hero__headline { font-size: 27px; margin: 4px 0 20px; }
  .lwd-hero__btn { display: inline-block; }
}

/* The legacy theme + builder CSS constrain children of .wpb_wrapper (max-width
   and margin resets), which defeats the plain full-bleed rule above. Revslider
   achieved full width with JS; force the same geometry with enough specificity
   to win against the 2016 stylesheet. */
.wpb_wrapper > .lwd-hero,
.vc_column-inner .lwd-hero,
.vc_row .lwd-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}