/* OLE reference: mobile hero only; desktop frozen appearance stays intact. */
@media (max-width: 960px) {
/* Homepage hero only: preserve the current controller and real slide links. */
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-hero {
  --r5-hero-ink: #18251f; --r5-hero-muted: #4b6359;
  position: relative !important; height: clamp(236px,22vw,320px) !important; min-height: 0 !important;
  padding: 0 !important; margin-block: 12px 20px !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; overflow: hidden !important; color: var(--r5-hero-ink) !important;
}
html:root[data-portal-theme="dark"] body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-hero,
html:root[data-theme="dark"] body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-hero {
  --r5-hero-ink: #e6f0eb; --r5-hero-muted: #adbfB6;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-hero::after,
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-poster,.keke-family-hero-poster)::after { display: none !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-hero::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse at 36% 50%,rgba(57,146,112,.20),rgba(121,167,140,.08) 46%,transparent 77%) !important;
  pointer-events: none !important; opacity: 1 !important; z-index: 0 !important; filter: none !important;
}
html:root[data-portal-theme="dark"] body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-hero::before {
  background: radial-gradient(ellipse at 36% 50%,rgba(52,134,108,.38),rgba(33,89,69,.15) 46%,transparent 77%) !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-slide,.keke-family-hero-slide) {
  display: block !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important;
  position: absolute !important; inset: 0 !important; width: 100% !important;
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-slide,.keke-family-hero-slide).active {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-poster,.keke-family-hero-poster) {
  position: absolute !important; grid-area: auto !important; top: 0 !important; bottom: 0 !important;
  width: 36% !important; max-width: 260px !important; height: 100% !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .oletv-hero-poster { left: 0 !important; right: auto !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-family-hero-poster { left: 0 !important; right: auto !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-poster,.keke-family-hero-poster) :is(picture,img) {
  display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 10px !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .oletv-hero-backdrop { display: none !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .oletv-hero-focus {
  position: absolute !important; inset: 0 !important; padding: 0 !important; margin: 0 !important;
  width: 100% !important; height: 100% !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-copy,.keke-family-hero-copy) {
  position: absolute !important; grid-area: auto !important; top: 0 !important; bottom: 0 !important; width: auto !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  padding: 12px 8px !important; min-width: 0 !important; max-width: none !important; background: transparent !important;
  box-sizing: border-box !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important;
  color: var(--r5-hero-ink) !important; text-shadow: none !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .oletv-hero-copy { left: min(38%,276px) !important; right: 12px !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-family-hero-copy { left: min(38%,276px) !important; right: 12px !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-copy,.keke-family-hero-copy) :is(h1,h2) {
  color: var(--r5-hero-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important;
  font-size: clamp(24px,2.6vw,36px) !important; line-height: 1.25 !important; margin: 6px 0 10px !important;
}
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-family-hero-copy h2 a { color: var(--r5-hero-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-family-hero-credits,
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-family-hero-credits :is(p,strong,span,a) { color: var(--r5-hero-muted) !important; }
html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-copy,.keke-family-hero-copy) > p {
  color: inherit !important; margin-block: 4px !important;
}
@media (max-width: 960px) {
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-hero { height: clamp(166px,49vw,218px) !important; margin-block: 8px 14px !important; }
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-poster,.keke-family-hero-poster) { width: 38.2% !important; max-width: none !important; transform: none !important; }
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .keke-family-hero-copy { left: calc(38.2% + 10px) !important; right: 8px !important; }
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .oletv-hero-copy { left: calc(38.2% + 10px) !important; right: 8px !important; }
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-copy,.keke-family-hero-copy) { padding: 8px 0 !important; }
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.oletv-hero-copy,.keke-family-hero-copy) :is(h1,h2) { font-size: clamp(18px,5vw,24px) !important; line-height: 1.22 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] :is(.keke-eyebrow,.keke-family-hero-credits,.oletv-hero-copy > p) { font-size: clamp(11px,3vw,13px) !important; line-height: 1.45 !important; }
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .oletv-hero-copy > p:not(.keke-eyebrow) { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }
}


}

/* OLE's frozen credits use both RGBA alpha and opacity. On mobile the
   compact labels need a solid foreground against either theme's gradient. */
@media (max-width: 960px) {
  html:root body.front.portal.tpl-keke.keke-template.keke-home[class] .oletv-hero-copy strong {
    color: var(--r5-hero-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    font-size: clamp(11px, 3vw, 13px) !important;
  }
}