.lcs{
  --lcs-accent:#ff6a00;
  --lcs-height:420px;

  /* “bite” geometry (tweak globally) */
  --lcs-notch-w: 300px;
  --lcs-notch-h: 96px;
  --lcs-notch-r: 26px;

  /* MUST match the section background behind the block (or pass bg="" in shortcode) */
  --lcs-page-bg: #2f2f2f;
}

.lcs *{ box-sizing:border-box; }

.lcs-media{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  min-height: var(--lcs-height);
  background:#0b0d10;
}

/* Background image/video */
.lcs-preview{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
}
.lcs-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}
.lcs-fallback{ background:linear-gradient(135deg,#12151b,#0b0d10); }

.lcs-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
}

/* ---- TRUE LOOK “corner bite” (visual cutout) ----
   This matches Shape in practice: you “remove” the corner by painting it the page background.
   Because Flatsome sections vary, we make it configurable via --lcs-page-bg / shortcode bg=""
*/
.lcs--notch .lcs-media:after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width: var(--lcs-notch-w);
  height: var(--lcs-notch-h);
  background: var(--lcs-page-bg);
  border-top-left-radius: var(--lcs-notch-r);
  z-index: 2;
  pointer-events:none;
}

/* Quote card */
.lcs-quote{
  position:absolute;
  left: clamp(16px, 3.2vw, 40px);
  top: clamp(16px, 3.2vw, 40px);
  width: min(560px, 92%);
  padding: clamp(18px, 2.2vw, 28px);
  border-radius:20px;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  color:#fff;
  z-index: 3;
}

.lcs-mark{
  font-size:46px;
  line-height:1;
  opacity:.9;
  margin-bottom:8px;
}
.lcs-quote-text{
  font-size: clamp(24px, 3vw, 42px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.02em;
}

.lcs-person{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:18px;
  opacity:.95;
}
.lcs-avatar{
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:cover;
}
.lcs-name{ font-size:13px; font-weight:700; }
.lcs-title{ font-size:12px; opacity:.8; margin-top:2px; }

/* CTA “seat” that sits inside the bite */
.lcs-ctas{
  position:absolute;
  right: 22px;
  bottom: 18px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:0;
  border-radius:0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  z-index: 3;
}

/* Theme-proof buttons */
.lcs .lcs-ctas .lcs-btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  padding:8px 18px !important;
  min-height:50px !important;

  border-radius:999px !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:0 !important;

  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;

  background:rgba(0,0,0,.35) !important;
  color:#fff !important;

  box-shadow:none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.lcs .lcs-ctas .lcs-btn:hover{
  transform: translateY(-1px);
  border-color:rgba(255,255,255,.32) !important;
}

.lcs .lcs-ctas .lcs-btn--primary{
  background: color-mix(in srgb, var(--lcs-accent) 85%, #000 15%) !important;
  border-color: transparent !important;
  color:#0b0d10 !important;
padding: 8px 18px 8px 12px !important;
}
.lcs .lcs-ctas .lcs-btn.lcs-btn--ghost{
border: 1px solid rgba(255,255,255,.18) !important;
}
.lcs .lcs-ctas .lcs-btn--primary:hover{
  background: var(--lcs-accent) !important;
}

/* Play icon inside primary button */
.lcs-play-icon{
  width:28px;
  height:28px;
  border-radius:999px;
  background: #0b0d10;
  display:inline-block;
  position:relative;
  flex:0 0 auto;
}
.lcs-play-icon:before{
  content:"";
  position:absolute;
  left:11px;
  top:8px;
  width:0; height:0;
  border-left:8px solid #d95a00;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.lcs-arrow{ opacity:.9; font-size:18px; margin-left:-2px; }

/* Round play button (Shape-style fallback) */
.lcs-fab{
  position:absolute;
  left: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex !important;
  align-items:center;
  justify-content:center;

  background: color-mix(in srgb, var(--lcs-accent) 92%, #000 8%);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 3;
  text-decoration:none !important;
}
.lcs-fab-icon{
  width:0;height:0;
  border-left: 12px solid #0b0d10;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 2px;
}

/* Mobile: collapse like Shape */
@media (max-width: 760px){
  .lcs-media{
    min-height: 560px;
  }

  .lcs-overlay{
    background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.12) 100%);
  }

  .lcs-quote{
    left: 16px;
    right: 16px;
    width: auto;
    top: 16px;
    padding: 16px;
    border-radius: 22px;
  }

  .lcs-quote-text{
    font-size: 28px;
    line-height: 1.05;
  }

  /* bigger bite area in portrait */
  .lcs{
    --lcs-notch-w: 320px;
    --lcs-notch-h: 96px;
  }

  .lcs-ctas{
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translateX(-50%);
    justify-content: center;
    gap: 10px;
  }

  /* On mobile: hide the big play pill; use FAB instead */
  .lcs .lcs-ctas .lcs-btn--primary{
    display:none !important;
  }

  .lcs-ctas .lcs-btn--ghost{
    width: auto;
    min-width: 240px;
    justify-content: center;
  }

  .lcs-fab{
    left: 50%;
    bottom: 86px;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
  }
}

/* ------------------------------------------------------------------
   Native modal fallback (when Magnific Popup is missing in this timeline)
------------------------------------------------------------------ */
.lcs-modal{position:fixed;inset:0;z-index:999999;display:none;}
.lcs-modal.is-open{display:block;}
.lcs-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);}
.lcs-modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,92vw);max-height:86vh;}
.lcs-modal__content{background:#000;border-radius:18px;overflow:hidden;box-shadow:0 30px 120px rgba(0,0,0,.55);}
.lcs-modal__iframeWrap{position:relative;width:100%;padding-top:56.25%;}
.lcs-modal__iframeWrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lcs-modal__video{width:100%;height:auto;display:block;}
.lcs-modal__close{position:absolute;right:-10px;top:-10px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(0,0,0,.9);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lcs-modal__close span{font-size:26px;line-height:1;position:relative;top:-1px;}
html.lcs-modal-open{overflow:hidden;}