/* qiiq.health home page. Design locked by Dave Brown, 15 November 2026 (canvas "Quest Loop homepage: two directions"). */
body{margin:0;background:#0D130F;color:#E9EEE4;font-family:"Atkinson Hyperlegible",Verdana,sans-serif;font-size:19px;line-height:1.6}
h1,h2,h3,.d{font-family:Anybody,"Arial Narrow",Impact,sans-serif;font-stretch:62%;font-variation-settings:"wdth" 62;margin:0}
p{margin:0}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid #FFC20E;outline-offset:4px}
img{display:block}
.skip{position:absolute;left:-9999px;top:0;background:#FFC20E;color:#0D130F;padding:12px 16px;z-index:9}
.skip:focus{left:8px;top:8px}
.dim{color:#A3B0A5}
.body{color:#C9D3CA}
.ho{color:transparent;-webkit-text-stroke:2px #9DB0A1}
.btn{display:inline-block;background:#FFC20E;color:#0D130F;font-family:Anybody,"Arial Narrow",Arial,sans-serif;font-variation-settings:"wdth" 80;font-weight:800;font-size:24px;padding:16px 30px;text-decoration:none;min-height:24px}
.btn:hover{background:#FFFFFF}
.state{display:flex;gap:12px;align-items:center;font-weight:700;font-size:18px}
.sec{padding:112px 56px;box-sizing:border-box}
.h2{font-weight:900;font-size:clamp(44px,5.6vw,76px);line-height:.92;letter-spacing:-.005em}
.lead{font-size:21px;line-height:1.55;color:#C9D3CA;max-width:34em}
.lead+.lead{margin-top:18px}
.rule{border-top:1px solid #2A372E}

/* hero */
.hero{position:relative;min-height:900px;overflow:hidden;background:#0D130F url(/art/home/rings-poster.jpg) center/cover}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.9)}
.scrim{position:absolute;inset:0;background:rgba(13,19,15,.6)}
.year{position:absolute;left:0;top:104px;width:100%;height:auto;display:block}
.mark{position:absolute;left:50px;top:26px;z-index:3;display:block;text-decoration:none}
.mark img{height:50px;width:auto}
.rail{position:absolute;right:18px;top:34px;z-index:3;writing-mode:vertical-rl;display:flex;gap:30px;font-size:18px}
.rail a{text-decoration:none;padding:4px 10px}
.rail a:hover{text-decoration:underline;text-underline-offset:5px}
.heroin{position:relative;z-index:2;min-height:900px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;padding:0 84px 60px 56px}
.h1{font-weight:900;font-size:clamp(50px,10.5vw,160px);line-height:.88;letter-spacing:-.01em;color:#F4F7EF}
.under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:56px;align-items:end;margin-top:36px}
.legend{font-size:16px;max-width:30em;color:#A3B0A5}
.lede{font-size:21px;line-height:1.55}

/* why */
.why{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:64px;align-items:center;padding:0 56px 0 0;background:#0D130F}
.why img{width:100%;height:100%;min-height:720px;object-fit:cover;object-position:50% 20%}
.whytxt{padding:96px 0}
.whytxt .h2{margin-bottom:32px}
.scale{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:56px;align-items:center;padding:88px 56px 96px;border-top:1px solid #2A372E}
.big{font-family:Anybody,"Arial Narrow",Impact,sans-serif;font-variation-settings:"wdth" 56;font-stretch:56%;font-weight:900;font-size:clamp(70px,13vw,176px);line-height:.85;white-space:nowrap}
.src{margin-top:14px;font-size:15px;color:#A3B0A5}

/* how */
.how{background:#131C16}
.how .h2{max-width:11em}
.flowsvg{display:block;width:100%;height:auto;margin-top:64px}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:8px}
.fl{padding:0 18px;text-align:center}
.fl .g{display:none}
.fl h3{font-size:30px;font-weight:800;font-variation-settings:"wdth" 74;margin-bottom:8px}
.fl p.t{font-size:17px;line-height:1.5;color:#C9D3CA}
.fl .state{justify-content:center;margin-top:14px;font-size:16px}
.flnote{margin-top:44px;font-size:19px;color:#A3B0A5;text-align:center}

/* clinicians */
.cimg{height:480px;overflow:hidden;background:#0D130F}
.cimg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.cgrid .h2{margin-bottom:28px}
.roles{display:grid;gap:0}
.role{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:28px;align-items:baseline;padding:22px 0;border-top:1px solid #2A372E}
.role:last-child{border-bottom:1px solid #2A372E}
.role h3{font-size:56px;font-weight:900;line-height:.95}
.role p{font-size:19px;line-height:1.5;color:#C9D3CA}
.summary{margin-top:56px;max-width:52em}
.summary h3{font-size:36px;font-weight:800;font-variation-settings:"wdth" 74;margin-bottom:10px}
.honest{margin-top:16px;font-size:17px;color:#A3B0A5;max-width:44em}

/* peers */
.peers{background:#131C16}
.peers .h2{max-width:9em;margin-bottom:28px}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:64px}
.path{padding:0 32px;border-left:1px solid #2A372E}
.path:first-child{padding-left:0;border-left:0}
.dots{width:100%;max-width:300px;height:auto;display:block;margin-bottom:24px}
.path h3{font-size:38px;font-weight:800;font-variation-settings:"wdth" 74;margin-bottom:10px}
.path p{font-size:18px;line-height:1.5;color:#C9D3CA}

/* devices */
.devgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
.devgrid img{width:100%;height:auto}
.devgrid .h2{margin-bottom:28px}
.readings{width:100%;max-width:610px;height:auto;display:block;margin-top:36px}
.cap{margin-top:10px;font-size:16px;color:#A3B0A5;max-width:34em}
.devs{list-style:none;margin:32px 0 0;padding:0}
.devs li{display:flex;gap:14px;align-items:center;font-size:20px;padding:8px 0}
.never{margin-top:28px;font-size:19px;font-weight:700;color:#E9EEE4;max-width:30em}

/* stages */
.stages .h2{max-width:10em;margin-bottom:28px}
.act{margin-top:72px}
.act h3{font-size:44px;font-weight:800;font-variation-settings:"wdth" 74;padding-bottom:14px;border-bottom:1px solid #2A372E}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:28px;align-items:start}
.stg .n{font-family:Anybody,"Arial Narrow",Impact,sans-serif;font-variation-settings:"wdth" 56;font-stretch:56%;font-weight:900;font-size:120px;line-height:.9;color:transparent;-webkit-text-stroke:2px #9DB0A1}
.stg h4{margin:10px 0 0;font-family:Anybody,"Arial Narrow",Arial,sans-serif;font-variation-settings:"wdth" 80;font-weight:800;font-size:25px;line-height:1.1}
.stg .k{margin-top:6px;font-size:16px;color:#A3B0A5;font-style:italic}
.stg p.b{margin-top:10px;font-size:17px;line-height:1.5;color:#C9D3CA}
.growth{height:430px;overflow:hidden;background:#0D130F}
.growth img{width:100%;height:100%;object-fit:cover;object-position:50% 88%;mix-blend-mode:screen}

/* stories */
.eps{padding:112px 0 0}
.pad{padding:0 56px}
.ep{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:44px 56px 48px;border-top:1px solid #2A372E;box-sizing:border-box}
.ep.open{position:relative;overflow:hidden;min-height:480px;align-items:end;margin-top:56px;border-top:0;background:#0D130F url(/art/site-02-carol-hero.webp) center 28%/cover}
.ep.open .scrim{background:rgba(13,19,15,.55)}
.ep>*{position:relative}
.ep.open .scrim{position:absolute}
.ep.open .nine{position:absolute;right:40px;bottom:-60px;font-family:Anybody,"Arial Narrow",Impact,sans-serif;font-variation-settings:"wdth" 56;font-weight:900;font-size:440px;line-height:.8;color:#FF6B52}
.et{font-weight:900;font-size:clamp(46px,8.6vw,120px);line-height:.9;color:transparent;-webkit-text-stroke:2px #9DB0A1}
.ep.open .et{color:#FFC20E;-webkit-text-stroke:0}
.en{margin-top:16px;font-size:20px;max-width:30em;color:#C9D3CA}
.ep.open .btn{margin-top:24px}

/* exists */
.ex{background:#131C16}
.dl{margin-top:36px}
.row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding:26px 0;border-top:1px solid #2A372E}
.row .t{display:flex;align-items:center;gap:14px;font-family:Anybody,"Arial Narrow",Arial,sans-serif;font-variation-settings:"wdth" 70;font-weight:800;font-size:30px}
.row .dd{font-size:20px;max-width:36em}

.band{background:#FFC20E;height:520px;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;mix-blend-mode:multiply;filter:contrast(1.2)}

.pp .sub{margin-top:18px;font-size:21px;max-width:34em;color:#A3B0A5}
.people{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:56px}

.slot{aspect-ratio:4/5;border:2px dashed #6E7D71;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:17px;color:#A3B0A5}
.pname{font-weight:800;font-size:44px;margin-top:20px;font-variation-settings:"wdth" 70}
.prole{margin-top:6px;font-size:19px;color:#C9D3CA}
.moment{margin-top:64px;border:2px dashed #6E7D71;padding:28px 32px;font-size:18px;max-width:44em;color:#A3B0A5}

.foot{background:#080C09;padding:56px;font-size:17px}
.footrow{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footlinks{display:flex;gap:28px;flex-wrap:wrap}
.disc{margin-top:32px;max-width:46em;font-size:16px;color:#A3B0A5}

/* colour */
.ho{-webkit-text-stroke-width:2.5px}
#why .h2.ho,#clinicians .h2.ho,#clinicians .role h3{-webkit-text-stroke-color:#3FD0E0}
.scale .big,#peers .h2.ho,#about .h2.ho{-webkit-text-stroke-color:#FF5FA2}
#how .h2.ho,#stages .h2.ho,#stories .pad .h2.ho{-webkit-text-stroke-color:#FFC20E}
#devices .h2.ho{-webkit-text-stroke-color:#A08CFF}
#stages .act:nth-of-type(1) h3{color:#FF5FA2;border-bottom-color:#FF5FA2}
#stages .act:nth-of-type(1) .stg .n{-webkit-text-stroke-color:#FF5FA2}
#stages .act:nth-of-type(2) h3{color:#A08CFF;border-bottom-color:#A08CFF}
#stages .act:nth-of-type(2) .stg .n{-webkit-text-stroke-color:#A08CFF}
#stages .act:nth-of-type(3) h3{color:#3FD0E0;border-bottom-color:#3FD0E0}
#stages .act:nth-of-type(3) .stg .n{-webkit-text-stroke-color:#3FD0E0}
.hero .scrim{background:linear-gradient(180deg,rgba(13,19,15,.5) 0%,rgba(13,19,15,.62) 45%,rgba(13,19,15,.93) 88%)}

@media (max-width:900px){
.under,.why,.scale,.cgrid,.devgrid{grid-template-columns:minmax(0,1fr);gap:28px}
.why{padding:0}
.why img{min-height:0;height:380px}
.whytxt{padding:8px 24px 56px}
.row4{grid-template-columns:repeat(2,minmax(0,1fr))}
.paths{grid-template-columns:minmax(0,1fr);gap:40px}
.path,.path:first-child{padding:0;border-left:0}
.ep{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:720px){
.mark{left:18px;top:16px}
.mark img{height:40px}
.rail{position:absolute;writing-mode:horizontal-tb;left:14px;right:14px;top:60px;gap:6px;flex-wrap:wrap;font-size:17px}
.year{top:130px;width:260%;left:-82%}
.heroin{padding:0 24px 40px;min-height:820px}
.hero{min-height:820px}
.h1{font-size:50px}
.lede{font-size:19px}
.sec,.pad,.ep,.foot,.scale{padding-left:24px;padding-right:24px}
.sec{padding-top:72px;padding-bottom:72px}
.scale{padding-top:56px;padding-bottom:64px}
.h2{font-size:42px}
.big{font-size:84px}
.flowsvg{display:none}
.flow{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
.fl{text-align:left;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;padding:0}
.fl .g{display:block;grid-row:1 / span 3;margin-top:6px}
.fl .state{justify-content:flex-start;margin-top:10px}
.flnote{text-align:left;margin-top:32px}
.cimg{height:260px}
.role{grid-template-columns:minmax(0,1fr);gap:6px}
.role h3{font-size:44px}
.summary h3{font-size:30px}
.row4{grid-template-columns:minmax(0,1fr);gap:36px}
.stg .n{font-size:84px}
.growth{height:240px}
.eps{padding-top:72px}
.ep.open{min-height:420px;margin-top:40px}
.ep.open .nine{font-size:240px;right:10px;bottom:-30px}
.et{font-size:48px}
.row{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}
.band{height:260px}
.people{grid-template-columns:minmax(0,1fr);gap:40px}
.people>div:nth-child(2){margin-top:0}
.slot{aspect-ratio:4/3}
.pname{font-size:36px}
}
@media (prefers-reduced-motion:reduce){video{display:none}*{transition:none!important;animation:none!important}}

/* production additions */
.vtoggle{position:absolute;right:84px;bottom:24px;z-index:3;background:rgba(13,19,15,.75);color:#E9EEE4;border:1px solid #6E7D71;font:700 15px "Atkinson Hyperlegible",Verdana,sans-serif;padding:10px 14px;min-height:44px;cursor:pointer}
.vtoggle:hover{border-color:#E9EEE4}
.vtoggle:focus-visible{outline:3px solid #FFC20E;outline-offset:3px}
.link{font-weight:700;color:#FFC20E}
.pname{margin-top:0}
.people{margin-top:40px}
@media (max-width:720px){.vtoggle{right:16px;bottom:12px}.heroin{padding-bottom:84px}.big{font-size:72px;white-space:normal}.stg{margin-top:0!important}}
@media (prefers-reduced-motion:reduce){.vtoggle{display:none}}