/* Full-motion layer for kardianhealth.com. Sits on top of xk.css (the investxk design system). */

/* ---- full-bleed video hero ---- */
#hero.vhero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#05080C}
#hero.vhero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* two scrims: a vertical one so the nav and the base stay readable, and a heavy
   left-hand one so the headline always has a dark ground no matter what the footage does */
#hero.vhero .veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(5,8,12,.80) 0%,rgba(5,8,12,.42) 22%,rgba(5,8,12,.70) 58%,rgba(5,8,12,.97) 100%),
  linear-gradient(90deg,rgba(5,8,12,.94) 0%,rgba(5,8,12,.86) 26%,rgba(5,8,12,.55) 58%,rgba(5,8,12,.22) 100%)}
#hero.vhero .wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:clamp(52px,7vh,104px)}
#hero.vhero .display{max-width:17ch}
#hero.vhero .lede{max-width:52ch}
#hero.vhero .who{margin-top:30px;font-size:13px;letter-spacing:.03em;color:#8FA1AC}

/* ---- full-bleed video band with a statement over it ---- */
.vband{position:relative;min-height:min(84vh,760px);display:grid;align-items:center;overflow:hidden;background:#05080C;padding:0}
.vband>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vband .veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(5,8,12,.96) 0%,rgba(5,8,12,.90) 30%,rgba(5,8,12,.58) 62%,rgba(5,8,12,.14) 100%),
  linear-gradient(180deg,rgba(5,8,12,.62) 0%,rgba(5,8,12,.10) 32%,rgba(5,8,12,.70) 100%)}
.vband .wrap{position:relative;z-index:2;padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
.vband .title{color:#fff;max-width:19ch}
.vband .lede{color:#B4C3CC;max-width:50ch}
.vband .eyebrow{color:var(--cyan)}

/* ---- product on black ---- */
.vprod{background:#05080C}
.vprod .pv{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/10}
.vprod .pv video{width:100%;height:100%;object-fit:cover;display:block}

/* ---- film grid ---- */
.films{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.film{position:relative;border-radius:14px;overflow:hidden;background:#0B1117;border:1px solid rgba(255,255,255,.10);cursor:pointer;text-align:left;padding:0;color:inherit;font:inherit;display:block;width:100%}
.film .th{position:relative;aspect-ratio:16/9;background:#0B1117}
.film .th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.film:hover .th img{transform:scale(1.04)}
.film .pl{position:absolute;inset:0;display:grid;place-items:center}
.film .pl i{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-style:normal}
.film .pl i::after{content:"";border-left:15px solid #0E1620;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.film .cap2{padding:16px 18px 20px}
.film .cap2 b{display:block;color:#fff;font-weight:500;font-size:16.5px;letter-spacing:-.01em}
.film .cap2 span{display:block;color:#8FA1AC;font-size:13.5px;margin-top:5px}

@media (max-width:980px){ .films{grid-template-columns:1fr 1fr} }
@media (max-width:760px){
  #hero.vhero{min-height:92svh}
  #hero.vhero .wrap{padding-top:112px}
  .vband{min-height:auto}
  .vband .veil{background:linear-gradient(180deg,rgba(5,8,12,.62) 0%,rgba(5,8,12,.86) 60%,rgba(5,8,12,.96) 100%)}
  .films{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  #hero.vhero>video,.vband>video,.vprod .pv video{display:none}
  #hero.vhero{background:#05080C url("assets/video/hbc-bg.jpg") center/cover}
  .vband{background:#05080C url("assets/video/sensing.jpg") center/cover}
}

/* ---- numbered chain list on dark sections ----
   xk.css styles .chain for light backgrounds: a dark number bubble, a hairline
   border and small grey detail text. All three disappear on a dark band. */
.ch[data-theme="dark"] ol.chain li{border-bottom-color:rgba(255,255,255,.13);padding:12px 0}
.ch[data-theme="dark"] ol.chain li:before{background:rgba(255,255,255,.13);color:#fff}
.ch[data-theme="dark"] ol.chain li:last-child:before{background:var(--cyan-d);color:#05080C}
.ch[data-theme="dark"] ol.chain b{color:#fff;font-size:17px}
.ch[data-theme="dark"] ol.chain span{font-size:15px;color:#A9BAC4;margin-top:3px;line-height:1.55}

/* video used in place of a still inside the standard .frame box */
.frame video{width:100%;height:100%;display:block;object-fit:cover}
.frame.vfit{aspect-ratio:16/9;background:#000}

/* ---- full-screen menu ---- */
#nav .links .menubtn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;color:inherit;font:inherit;
  cursor:pointer;padding:6px 2px;letter-spacing:.02em}
#nav .links .menubtn i{width:16px;height:10px;position:relative;display:inline-block;font-style:normal}
#nav .links .menubtn i::before,#nav .links .menubtn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:.25s}
#nav .links .menubtn i::before{top:0}
#nav .links .menubtn i::after{bottom:0}
#menu[hidden]{display:none}
#menu{position:fixed;inset:0;z-index:200;background:rgba(6,10,14,.97);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;opacity:0;transition:opacity .28s ease}
#menu.open{opacity:1}
#menu .mtop{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,64px)}
#menu .mtop img{height:24px}
#menu .close{background:none;border:0;color:#C3D0D9;font:inherit;font-size:15px;cursor:pointer;padding:8px}
#menu .close:hover{color:#fff}
#menu .mbody{flex:1;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,6vw,88px);
  align-content:center;padding:0 clamp(20px,5vw,64px) clamp(28px,6vh,72px);overflow-y:auto}
#menu h5{color:#6C7C86;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px;font-weight:500}
#menu ul{list-style:none;margin:0;padding:0}
#menu li{border-top:1px solid rgba(255,255,255,.09)}
#menu li:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
#menu a{display:flex;align-items:baseline;gap:14px;color:#fff;text-decoration:none;
  font-size:clamp(20px,2.5vw,32px);font-weight:500;letter-spacing:-.02em;padding:14px 0;transition:.18s}
#menu a:hover{color:var(--cyan);padding-left:10px}
#menu a small{font-size:12.5px;font-weight:400;color:#6C7C86;letter-spacing:0}
#menu .side a{font-size:clamp(17px,1.7vw,21px)}
@media (max-width:860px){ #menu .mbody{grid-template-columns:1fr;align-content:start;padding-top:8px} #menu a{font-size:20px} }

/* ---- POBC first glance, treatment B: her nights as dots ---- */
.pob{display:grid;gap:12px;max-width:620px}
.pob .p{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.ch[data-theme="dark"] .pob .p{background:#141C2B;border-color:rgba(255,255,255,.12)}
.pob .ph2{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.pob .ph2 b{font-size:16px;font-weight:600;color:var(--ink)}
.ch[data-theme="dark"] .pob .ph2 b{color:#fff}
.pob .ph2 span{font-size:12px;color:var(--muted);letter-spacing:.04em}
.pob .r{display:grid;grid-template-columns:88px 1fr 42px;gap:16px;align-items:center;padding:7px 0}
.pob .lab{font-size:14px;color:var(--body)}
.ch[data-theme="dark"] .pob .lab{color:#AEBDC6}
.pob .sc{position:relative;height:14px}
.pob .sc::before{content:"";position:absolute;left:0;right:0;top:6.5px;height:1px;background:var(--line)}
.ch[data-theme="dark"] .pob .sc::before{background:rgba(255,255,255,.16)}
.pob .sc i{position:absolute;top:3px;width:8px;height:8px;border-radius:50%;background:#C6CED4;transform:translateX(-50%)}
.ch[data-theme="dark"] .pob .sc i{background:rgba(255,255,255,.36)}
.pob .sc i.now{width:12px;height:12px;top:1px;background:#1F6FE0}
.pob .val{font-size:17px;font-weight:600;color:var(--ink);text-align:right}
.ch[data-theme="dark"] .pob .val{color:#fff}
@media (max-width:600px){ .pob .r{grid-template-columns:74px 1fr 38px;gap:10px} }