/* ===== Our team: vertical scroll drives a horizontal story, one chapter per person ===== */
.tq{position:relative;background:#06071A;color:#fff}
/* intro: Sky tells our story (sticky, beat by beat) */
.tq-story{position:relative;background:#06071A;color:#fff;overflow:clip}
.tq-srun{position:relative}
.tq-sstage{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;align-items:center;gap:40px 5vw;padding:150px 6vw 90px;min-height:100vh}
.tq-sstage>.silk{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.tq-sstage>.silk-veil{z-index:-1}
.tq-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px}
.tq-head h1{margin:0;color:#fff;font-size:clamp(40px,6.4vw,104px);line-height:.88;letter-spacing:-.06em;text-transform:uppercase}
.tq-head h1 .red{color:#FF3D3D}
/* Sky + speech bubble */
.tq-sky{position:relative;display:grid;justify-items:center;align-self:end}
.tq-poses{position:relative;width:min(300px,24vw);aspect-ratio:200/360}
.tq-poses img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);opacity:0;transition:opacity .45s,transform .6s cubic-bezier(.2,1.3,.4,1);transform-origin:50% 100%}
.tq-poses img.on{opacity:1}
.tq-js2 .tq-poses img:not(.on){transform:translateX(-50%) scale(.94)}
.tq-floor{width:min(320px,28vw);height:22px;margin-top:-10px;border-radius:50%;background:radial-gradient(closest-side,rgba(110,120,255,.6),transparent)}
.tq-bub{position:absolute;left:58%;top:-8%;z-index:2;width:min(300px,24vw);min-height:96px;padding:16px 18px;border-radius:22px 22px 22px 6px;background:#fff;color:#0B0B0F;box-shadow:0 24px 50px rgba(0,0,0,.4);font-size:15px;font-weight:700;line-height:1.4}
.tq-bub span{display:block}
.tq-js2 .tq-bub span{position:absolute;left:18px;right:18px;top:16px;opacity:0;translate:0 6px;transition:opacity .35s,translate .35s}
.tq-js2 .tq-bub span.on{opacity:1;translate:0 0}
/* the board Sky points at */
.tq-board{position:relative;padding:30px 32px 34px;border-radius:28px;background:#F4F5FB;color:#0B0B0F;box-shadow:0 40px 80px rgba(0,0,0,.45);transform:rotate(-1.2deg)}
.tq-years{display:flex;gap:6px;margin:0 0 26px;padding:0;list-style:none;border-bottom:2px dashed #CDD1EE;padding-bottom:16px}
.tq-years li{position:relative;flex:1;font-size:clamp(18px,2vw,30px);font-weight:800;letter-spacing:-.04em;color:#B7BCE0;transition:color .3s}
.tq-years li.on{color:#2532D6}
.tq-years li.done{color:#0B0B0F}
.tq-years svg{position:absolute;left:-14px;top:-12px;width:calc(100% + 10px);height:calc(100% + 24px);fill:none;stroke:#FF3D3D;stroke-width:2.6;stroke-linecap:round;overflow:visible;opacity:0}
.tq-years li.on svg{opacity:1}
.tq-years li.on svg path{animation:tqDraw .7s ease-out both}
@keyframes tqDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.tq-years svg path{stroke-dasharray:1}
.tq-beats{position:relative;min-height:220px}
.tq-beat{display:grid;gap:12px}
.tq-beat small{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#2532D6}
.tq-beat h2{margin:0;font-size:clamp(28px,3.4vw,52px);line-height:.98;letter-spacing:-.045em;color:#0B0B0F}
.tq-beat p{margin:0;max-width:520px;font-size:17px;line-height:1.55;color:#3A3D58}
.tq-beat .stat{display:inline-flex;align-items:baseline;gap:8px;margin-top:4px;font-weight:700;color:#0B0B0F}
.tq-beat .stat b{font-size:34px;letter-spacing:-.04em;color:#2532D6}
.tq-js2 .tq-beat{position:absolute;inset:0 0 auto 0;opacity:0;translate:0 18px;transition:opacity .45s,translate .55s cubic-bezier(.2,.9,.25,1);pointer-events:none}
.tq-js2 .tq-beat.on{opacity:1;translate:0 0;pointer-events:auto}
.tq-dots{display:flex;gap:8px;margin-top:22px}
.tq-dots i{width:26px;height:4px;border-radius:2px;background:#CDD1EE;transition:background .3s}
.tq-dots i.on{background:#2532D6}
.tq-js2 .tq-srun{height:calc(100vh + 5 * 70vh);height:calc(100svh + 5 * 70svh)}
.tq-js2 .tq-sstage{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding-block:110px 40px}
@media(max-width:899px){
 .tq-sstage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:18px;padding:110px 20px 0}
 .tq-head h1{font-size:clamp(34px,10vw,56px)}
 .tq-board{order:2;padding:20px 20px 22px;transform:rotate(-.8deg)}
 .tq-years{margin-bottom:16px;padding-bottom:12px}
 .tq-beats{min-height:200px}
 .tq-beat h2{font-size:26px}.tq-beat p{font-size:14.5px}.tq-beat .stat b{font-size:26px}
 .tq-sky{order:3;justify-self:start;margin-left:6px}
 .tq-poses{width:118px}
 .tq-floor{width:140px}
 .tq-bub{left:120px;top:auto;bottom:70px;width:min(230px,calc(100vw - 160px));min-height:80px;font-size:13.5px;padding:12px 14px}
 .tq-js2 .tq-bub span{left:14px;right:14px;top:12px}
 .tq-js2 .tq-sstage{padding-block:96px 0}
}
@media(max-height:760px) and (min-width:900px){.tq-poses{width:min(240px,20vw)}.tq-beats{min-height:190px}.tq-beat p{font-size:15px}}

/* the story */
.tq-run{position:relative}
.tq-stage{position:relative;overflow:hidden}
.tq-track{display:flex;flex-direction:column}
.tq-p{position:relative;overflow:hidden;isolation:isolate;min-height:100vh;min-height:100svh;padding:120px 6vw 96px;display:grid;align-content:center}
.tq-p.blue{background:#2532D6}
.tq-p.dark{background:#06071A}
.tq-p.light{background:#F4F5FB;color:#0B0B0F}
.tq-ch{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.tq-ch i{width:34px;height:1px;background:currentColor}
.tq-name{margin:14px 0 0;font-size:clamp(56px,10.5vw,176px);font-weight:800;line-height:.84;letter-spacing:-.065em;text-transform:uppercase}
.tq-name em{font-style:normal;display:block}
.tq-p.light .tq-name em:last-child{color:#2532D6}
.tq-p.dark .tq-name em:last-child{color:#6E78FF}
.tq-role{margin-top:18px;font-size:clamp(15px,1.4vw,19px);font-weight:700;letter-spacing:-.01em}
.tq-p.blue .tq-role{color:#E4E6FF}.tq-p.dark .tq-role{color:#AEB5FF}.tq-p.light .tq-role{color:#2532D6}
.tq-zh{font-size:.3em;letter-spacing:0;font-weight:700;opacity:.65;margin-left:.2em}

/* photo with reveal */
.tq-ph{position:relative;margin:0;width:min(360px,30vw);aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.4)}
.tq-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%);transform-origin:50% 60%}
.tq-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(6,7,26,.35))}
/* the note, like a card pinned over the photo */
.tq-note{position:relative;z-index:2;width:min(380px,32vw);padding:22px 22px 20px;border-radius:18px;background:#fff;color:#0B0B0F;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotate(var(--tilt,-3deg))}
.tq-note .k{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2532D6}
.tq-note p{margin:10px 0 14px;font-size:15px;line-height:1.55;color:#2A2D45}
.tq-note ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tq-note li{height:28px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;background:#E8EAFD;color:#2532D6;font-size:12px;font-weight:700}
.tq-note .tape{position:absolute;left:50%;top:-12px;width:84px;height:24px;margin-left:-42px;background:rgba(174,181,255,.55);transform:rotate(4deg);border-radius:3px}
/* hand-drawn marks */
.tq-doodle{position:absolute;z-index:3;width:120px;height:auto;fill:none;stroke:#FF3D3D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}
.tq-doodle path{stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.tq-p.blue .tq-doodle{stroke:#fff}

/* layout of a person chapter */
.tq-person{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:0 5vw}
.tq-person .tq-who{position:relative}
.tq-person .tq-note{align-self:end;margin-left:-9vw;margin-bottom:-2vh}
.tq-big{font-size:clamp(46px,8.4vw,140px);font-weight:800;line-height:.88;letter-spacing:-.06em;text-transform:uppercase;margin:0}
.tq-big .red{color:#FF3D3D}
.tq-end .btns{margin-top:30px}
.tq-end p{max-width:520px;margin:20px 0 0;color:#C4C8EE;font-size:17px;line-height:1.55}
.tq-end .sky{position:absolute;right:12vw;bottom:0;width:220px;height:136px;overflow:hidden}
.tq-end .sky img{display:block;width:220px;height:auto}

/* progress ruler */
.tq-ruler{display:none}

/* horizontal mode (JS on, motion allowed) */
.tq-js .tq-stage{position:sticky;top:0;height:100vh;height:100svh}
.tq-js .tq-track{flex-direction:row;height:100%;will-change:transform}
.tq-js .tq-p{flex:none;height:100%;min-height:0;padding-block:110px 90px}
.tq-js .tq-p.wide{width:min(1700px,150vw)}
.tq-js .tq-p.cover{width:100vw}
.tq-js .tq-ruler{position:absolute;left:6vw;right:6vw;bottom:26px;z-index:5;display:flex;align-items:flex-end;pointer-events:none;mix-blend-mode:difference;color:#fff}
.tq-ruler span{flex:1;position:relative;padding-top:12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.45;transition:opacity .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-ruler span::before{content:"";position:absolute;left:0;right:6px;top:0;height:2px;background:currentColor;opacity:.35}
.tq-ruler span::after{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--f,0) * (100% - 6px));background:currentColor}
.tq-ruler span.cur{opacity:1}

@media(max-width:899px){
 .tq-p{padding:100px 20px 70px}
 .tq-js .tq-p{padding-block:96px 64px;align-content:start}
 .tq-js .tq-p.wide{width:100vw}
 .tq-person{grid-template-columns:1fr;align-items:start;gap:0}
 .tq-person .tq-ph{justify-self:end;width:min(52vw,230px);margin-top:14px}
 .tq-person .tq-note{width:min(80vw,340px);margin:-110px 0 0;padding:18px 18px 16px}
 .tq-note p{font-size:13.5px;margin:8px 0 12px}
 .tq-note li{height:26px;font-size:11.5px;padding:0 9px}
 .tq-name{font-size:clamp(46px,14.5vw,84px)}
 .tq-doodle{width:80px}
 .tq-js .tq-ruler{left:20px;right:20px;bottom:18px}
 .tq-ruler span{font-size:0}
 .tq-end .sky{right:20px;width:150px;height:93px}.tq-end .sky img{width:150px}
}
@media(max-height:760px) and (min-width:900px){.tq-ph{width:min(300px,26vw)}.tq-note p{font-size:14px}}