/* Home page v3. Layout works without JS. .gs on <html> = GSAP is running. */

/* Hero bots: GSAP flies them in, so the CSS entrance is switched off. */
.gs #hero8 .hc{animation:none!important}

/* Marquee strip under the hero. */
.mq{background:var(--brand);border-top:1px solid rgba(255,255,255,.1);overflow:hidden;padding:18px 0;color:rgba(255,255,255,.72);font-size:1.05rem}
.mq-track{display:flex;width:max-content}
.mq-row{white-space:nowrap;flex:none;padding-right:.4em}
.mq-row b{color:#fff;font-weight:700}

/* Story progress line. */
.sprog{height:3px;background:rgba(255,255,255,.1)}
.sprog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--brand-2));transform-origin:left;transform:scaleX(0)}

/* Big statement that lights up word by word. */
.lit{background:#fff;padding:130px 0}
.litp{font-size:clamp(1.8rem,4.2vw,3.4rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);max-width:28ch;margin:0}
.litp .hl{color:var(--brand-2)}

/* Rolling digits. */
.od{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1}
.od>span,.od>span>span{display:block;height:1em}
.od>span{height:auto}

/* Trust bento: one big card, two small, one wide. */
.tr4{grid-template-columns:repeat(6,1fr)}
.tr4 .tc:nth-child(1){grid-column:1/5;grid-row:1/3;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;background:linear-gradient(140deg,#fff 40%,var(--chip))}
.tr4 .tc:nth-child(1) svg{width:96px;height:96px;margin-bottom:auto}
.tr4 .tc:nth-child(1) h3{font-size:1.7rem}.tr4 .tc:nth-child(1) p{font-size:1.05rem;max-width:40ch}
.tr4 .tc:nth-child(2),.tr4 .tc:nth-child(3){grid-column:5/7}
.tr4 .tc:nth-child(4){grid-column:1/7;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center}
.tr4 .tc:nth-child(4) svg{grid-row:1/3;margin:0}

@media (max-width:980px){
 .tr4{grid-template-columns:1fr 1fr}
 .tr4 .tc:nth-child(n){grid-column:auto;grid-row:auto}
 .tr4 .tc:nth-child(1),.tr4 .tc:nth-child(4){grid-column:1/-1}
}
@media (max-width:820px){
 .lit{padding:80px 0}
}
@media (max-width:620px){.tr4{grid-template-columns:1fr}.tr4 .tc:nth-child(4){display:block}.tr4 .tc:nth-child(4) svg{margin-bottom:12px}}

/* Story on short laptop screens: the right column must fit under the top menu even after "Approvals" appears. */
@media (min-width:981px) and (max-height:820px){
 .board{gap:10px}
 .board>div:first-child p{display:none}
 .board .h2{font-size:1.9rem}
 .bkk{padding:10px 14px}.bkk b{font-size:1.8rem}
 .fnl{padding:10px 14px}.fnl .r{padding:3px 0}
 .apc{padding:10px 14px}
}
@media (min-width:981px) and (max-height:680px){.fnl{display:none}}

/* ===== Meet the team: a row of flip cards that glides sideways while you scroll (v3.js) ===== */
.crew{background:var(--surface);padding:96px 0 90px;overflow-x:clip} /* the row is wider than the screen */
.hhead{margin-bottom:30px}
.trow{display:flex;gap:22px;width:max-content;padding:10px max(22px,calc((100vw - 1180px)/2)) 20px;will-change:transform}
.tcard{--w:300px;width:var(--w);height:440px;flex:none;perspective:1200px;cursor:pointer;outline:none}
.tc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tcard.flip .tc-in{transform:rotateY(180deg)}
.tc-f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:26px;border:1px solid var(--line);background:#fff;box-shadow:0 18px 44px rgba(30,60,97,.09);padding:22px 22px 18px;display:flex;flex-direction:column;overflow:hidden}
.tc-front::before{content:"";position:absolute;inset:0 0 auto 0;height:58%;background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 16%,#fff),#fff);z-index:0}
.tc-front>*{position:relative;z-index:1}
.tc-back{transform:rotateY(180deg);background:linear-gradient(160deg,#fff 55%,color-mix(in srgb,var(--ac) 12%,#fff))}
.tcard:hover .tc-f,.tcard:focus-visible .tc-f{border-color:var(--ac);box-shadow:0 24px 54px rgba(30,60,97,.14)}
.tc-art{position:relative;height:200px;display:grid;place-items:center;margin:4px 0 8px}
.tc-art .glow{width:190px}
.tc-art .char{height:200px;width:160px}
.tcard:hover .tc-art .char{transform:translateY(-6px);transition:transform .5s var(--ease)}
.tcard h3{font-size:1.6rem;font-weight:800;margin:0}
.tcard .role{display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:700;padding:3px 11px;border-radius:20px;margin-top:4px}
.tcard .tagl{font-size:.98rem;font-weight:600;color:var(--ink);margin:10px 0 0}
.flipme{margin-top:auto;font-size:.78rem;font-weight:700;color:var(--brand-2);letter-spacing:.02em}
.tc-back .cols{grid-template-columns:1fr;gap:8px;margin-top:8px}
.tc-back .cols li{font-size:.86rem;padding-top:2px;padding-bottom:2px}
.tc-back .rulepill{font-size:.78rem;margin-top:10px}
@media (max-width:820px){.crew{padding:80px 0 60px}.tcard{--w:260px;height:420px}.trow{gap:14px}}

/* ===== Story: the chat plays while the mouse is over it (home.js); the page itself scrolls normally ===== */
#story .sstage{position:relative;height:auto;min-height:100vh}
.win{position:relative}
.splay{margin-left:auto;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:.78rem;padding:5px 12px;border-radius:10px;cursor:pointer;transition:background .2s ease}
.splay:hover{background:rgba(97,196,202,.3)}
.shint{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:rgba(255,255,255,.8);font-weight:700;font-size:1.05rem;pointer-events:none;transition:opacity .4s ease}
.shint span{display:block;font-weight:500;font-size:.85rem;opacity:.7;margin-top:4px}
.shint::before{content:"";display:block;width:22px;height:34px;margin:0 auto 12px;border:2px solid rgba(255,255,255,.5);border-radius:14px;background:radial-gradient(circle at 50% 28%,#fff 3px,transparent 4px)}
.m .shint::before{animation:wheelhint 1.6s var(--ease) infinite}
@keyframes wheelhint{0%{background-position:0 0}60%{background-position:0 10px;opacity:1}100%{background-position:0 10px;opacity:.4}}
.shint.off{opacity:0}
.win:hover{border-color:rgba(97,196,202,.6)}
/* Without GSAP (reduced motion or a script failed) the row simply scrolls sideways by hand. */
html:not(.gs) .trow{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
html:not(.gs) .tcard{scroll-snap-align:center}