/* EVO promo video band (2026-10) — the homepage's opening block, sitting
   directly under the services ticker and above the "evolution of you"
   hero. Full-bleed 16:9 player on the hero's navy gradient; the video
   files live in R2 (promo/evo-promo-1080.mp4 + -720.mp4) because they
   exceed the Worker's 25MB asset limit. evo-promo.js adds the sound and
   play controls; without it the video still autoplays muted. */
/* Airy band (2026-10): the video sits inset on the ivory that the intro
   above fades into and Signature Services below continues, as a rounded,
   softly shadowed card, so there is no full-bleed hard edge on either
   side of it. */
.evo-promo{
  position:relative;
  z-index:0;
  margin:0;
  padding:0 24px 8px;
  background:#F8F4EC;
}
.evo-promo-frame{
  position:relative;
  /* True 16:9 so nothing is cropped; the 133vh cap keeps the card no
     taller than ~75% of the window, leaving room for the intro above. */
  width:min(1200px, 100%, 133vh);
  margin:0 auto;
  aspect-ratio:16 / 9;
  border-radius:var(--evo-block-radius, 40px);
  overflow:hidden;
  background:#0A1D3D;
  box-shadow:0 24px 60px -24px rgba(16,45,94,0.28), 0 2px 10px rgba(16,45,94,0.06);
  isolation:isolate;
}
.evo-promo-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#0A1D3D;
  cursor:pointer;
}

/* Controls — hidden until evo-promo.js marks the band as scripted so a
   no-JS visitor never sees buttons that do nothing. */
.evo-promo-play,
.evo-promo-sound{
  display:none;
  position:absolute;
  z-index:2;
  margin:0;
  border:1px solid rgba(210,175,118,0.55);
  background:rgba(245,238,227,0.92);
  color:var(--evo-navy, #102D5E);
  font-family:var(--evo-sans, 'Archivo', sans-serif);
  cursor:pointer;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(5,16,40,0.28);
  transition:background-color .2s ease, transform .2s ease, opacity .25s ease;
}
.evo-promo.is-scripted .evo-promo-play,
.evo-promo.is-scripted .evo-promo-sound{display:inline-flex;align-items:center;justify-content:center;}
.evo-promo-play:hover,
.evo-promo-sound:hover{background:#FFFFFF;}
.evo-promo-play:focus-visible,
.evo-promo-sound:focus-visible{outline:2px solid var(--evo-gold, #D2AF76);outline-offset:3px;}

.evo-promo-play{
  top:50%;
  left:50%;
  width:84px;
  height:84px;
  padding:0;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0.9);
  opacity:0;
  pointer-events:none;
}
.evo-promo-play svg{width:30px;height:30px;margin-left:4px;fill:currentColor;}
.evo-promo.is-paused .evo-promo-play{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.evo-promo.is-paused .evo-promo-play:hover{transform:translate(-50%,-50%) scale(1.05);}

.evo-promo-sound{
  /* bottom-left: the video's EVO watermark lives in the bottom-right.
     18px up keeps it just under the name caption shown in the opening
     seconds (which ends ~9% above the frame's bottom edge). */
  left:28px;
  bottom:18px;
  gap:10px;
  padding:12px 20px 12px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1;
}
.evo-promo-sound svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto;}
.evo-promo-sound .evo-promo-icon-on{display:none;}
.evo-promo:not(.is-muted) .evo-promo-sound .evo-promo-icon-on{display:block;}
.evo-promo:not(.is-muted) .evo-promo-sound .evo-promo-icon-off{display:none;}

@media (max-width:767px){
  .evo-promo{padding:0 16px 4px;}
  .evo-promo-frame{width:100%;}
  .evo-promo-play{width:64px;height:64px;}
  .evo-promo-play svg{width:24px;height:24px;}
  .evo-promo-sound{left:12px;bottom:12px;padding:10px 14px 10px 12px;font-size:11px;}
}

/* Block order below the video (2026-10): Signature Services butts straight
   into the video band (no gap, flat top corners — it continues the dark
   opening), and the "evolution of you" hero sits flush against the
   services band. The hero keeps its rounded top, so the services block
   is extended one block-radius down behind it (extra bottom padding +
   matching negative margin; the hero is position:relative/z-index:0 and
   later in the DOM, so it paints over the extension) — the corner
   cut-outs then reveal the services ivory instead of the white body.
   The hero used to be the page's first block and pulled itself up under
   the header/ticker with a negative margin; that pull is cancelled and
   the same 140/130px is trimmed off its top padding and 100vh min-height
   so the visible hero (bottom-aligned card, photo above it) is exactly
   what it was. */
.page-home .evo-promo + .elementor-element.home-our-signature-services{
  /* picks up the band's ivory instead of restarting from white */
  background-image:linear-gradient(180deg, #F8F4EC 0%, #F5EEE3 100%);
  padding-top:80px;
  margin-top:0;
  margin-bottom:calc(-1 * var(--evo-block-radius));
  padding-bottom:calc(100px + var(--evo-block-radius));
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.page-home .evo-promo ~ .elementor-element.home-hero{
  --margin-top:0px;
  --padding-top:95px;
  --min-height:calc(100vh - 140px);
}
@media (max-width:1024px){
  .page-home .evo-promo ~ .elementor-element.home-hero{--padding-top:70px;--min-height:calc(100vh - 130px);}
}
@media (max-width:767px){
  /* .e-con.e-parent repeated to outweigh page-home.css's flatten rule,
     which was written for when this hero met the nav bar directly. */
  .page-home .evo-promo ~ .elementor-element.home-the-evolution-of-you.e-con.e-parent{
    --margin-top:0px;
    --padding-top:147px;
    border-top-left-radius:var(--evo-block-radius);
    border-top-right-radius:var(--evo-block-radius);
  }
}