/* ===== project case-study pages ===== */
.pmain{--acc:#b79cff;position:relative;z-index:1}
.pmain .wrap{max-width:1300px}

/* reveal */
.js [data-rv]{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.js [data-rv].in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.js [data-rv]{opacity:1;transform:none;filter:none;transition:none}}

/* hero */
.ph{position:relative;padding:calc(var(--hh) + 36px) 0 30px}
.ph>.wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,72px);align-items:center;min-height:min(78vh,720px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.9rem;color:rgba(244,241,255,.72);margin-bottom:26px}
.crumbs i{font-style:normal;opacity:.5}
.crumbs a:hover{color:#ff7ad9}
.kick{display:inline-block;padding:7px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:600;font-size:.92rem;color:#fff;margin-bottom:22px}
.ph h1{font-size:clamp(2.6rem,6vw,5.4rem);font-weight:900;line-height:1;letter-spacing:-2px;margin-bottom:22px;background:linear-gradient(90deg,#fff,#c9a6ff 55%,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.ph .lead{max-width:30em;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.65;color:rgba(244,241,255,.92);text-wrap:balance}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ph-cta .btn{padding:12px 26px}
.ph-cta .btn:not(.ghost){background:linear-gradient(90deg,#c9a6ff,#ff7ad9);color:#1a1040}
.ph-cta .btn:not(.ghost):hover{box-shadow:0 0 28px rgba(255,122,217,.55)}
.ph-vis{position:relative}
.ph-vis::before{content:"";position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 55%,transparent),transparent);filter:blur(50px);opacity:.65;z-index:0}
.ph-frame{position:relative;z-index:1;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 40px 90px -36px rgba(0,0,0,.85);cursor:zoom-in}
.ph-frame img{display:block;width:100%;height:auto}
.ph-frame.contain{padding:clamp(14px,2.4vw,36px);background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(235,226,255,.82))}
.ph-frame.contain img{max-height:560px;object-fit:contain;margin:0 auto}
.ph-phones{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:clamp(380px,46vw,620px)}
.ph-phones .phone{width:clamp(140px,15.5vw,224px);flex:none;margin:0 -2.4%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ph-phones .p0{transform:translateY(0) rotate(-5deg);z-index:1}
.ph-phones .p1{transform:translateY(-6%) scale(1.1);z-index:3}
.ph-phones .p2{transform:translateY(2%) rotate(5deg);z-index:2}
.ph-phones .phone:hover{transform:translateY(-14px) scale(1.12);z-index:5}
@media(prefers-reduced-motion:no-preference){.ph-phones .p0{animation:phf 6s ease-in-out infinite}.ph-phones .p2{animation:phf 7s ease-in-out infinite reverse}@keyframes phf{50%{translate:0 -12px}}}

/* device frames */
.phone .pf,.pshot .pf{position:relative;overflow:hidden;background:#0b0818}
.phone .pf{border-radius:clamp(22px,2.4vw,34px);padding:clamp(5px,.5vw,8px);background:linear-gradient(145deg,#3a3358,#0b0818);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 60px -22px rgba(0,0,0,.85)}
.phone .pf img{display:block;width:100%;height:auto;border-radius:clamp(17px,1.9vw,27px)}

/* facts */
.pfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;padding-top:6px;padding-bottom:10px}
.pfact{padding:20px 24px;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.pfact small{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px;letter-spacing:.2px}
.pfact b{display:block;font-size:1.08rem;font-weight:700;line-height:1.35;color:#fff}

/* chapters */
.pch{padding:clamp(54px,7.5vw,110px) 0 0}
.pch-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.pch-n{font-family:'Rubik',Arial,sans-serif;font-weight:700;font-size:1rem;color:#1a1040;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(255,92,200,.7)}
.pch-k{font-weight:700;font-size:1rem;color:var(--muted);letter-spacing:.3px}
.pch h2{font-size:clamp(1.9rem,3.8vw,3.2rem);font-weight:900;line-height:1.08;letter-spacing:-1px;margin-bottom:clamp(22px,3vw,40px);max-width:20em;background:linear-gradient(90deg,#fff,#d9c6ff 60%,#ff9be3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.ptxt p{color:rgba(244,241,255,.9);font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.8;margin-bottom:16px;max-width:42em}
.ptxt.wide p{max-width:56em}
.ptxt.big p{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.65;color:#fff}
.psplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.psplit.one{grid-template-columns:1fr}
.pfig{margin:0;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);box-shadow:0 36px 80px -34px rgba(0,0,0,.8);cursor:zoom-in}
.pfig img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pfig:hover img{transform:scale(1.03)}
.pfig.contain{padding:clamp(12px,2vw,28px);background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(235,226,255,.82))}
.pfig figcaption{padding:12px 18px;font-size:.88rem;color:var(--muted);text-align:center}
.pchips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:22px}
.pchips li{padding:9px 20px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:600;font-size:.95rem}
.pgrid{display:grid;gap:16px;margin-top:clamp(20px,3vw,34px)}
.pgrid.g3{grid-template-columns:repeat(3,1fr)}
.pcard{position:relative;padding:28px 26px 26px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pcard:hover{transform:translateY(-6px)}
.pc-i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;margin-bottom:14px;font-family:'Rubik',Arial,sans-serif;font-size:.95rem;color:#1a1040;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.pcard h3{font-size:1.18rem;font-weight:800;margin-bottom:8px}
.pcard p{color:rgba(244,241,255,.86);font-size:.98rem;line-height:1.7}

/* pains */
.ppains{display:grid;gap:22px}
.ppain{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(22px,3vw,40px);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 70px -36px rgba(0,0,0,.7)}
.ppain-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:16px;font-family:'Rubik',Arial,sans-serif;font-weight:700;color:#1a1040;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);box-shadow:0 10px 24px -8px rgba(255,92,200,.7)}
.ppain .lbl{font-size:.82rem;font-weight:800;letter-spacing:.6px;color:#ff9be3;margin-bottom:6px}
.ppain .lbl.sol{color:#9be8c0;margin-top:20px}
.ppain p{font-size:1.02rem;line-height:1.75;color:rgba(244,241,255,.92)}
.ppain p.pp{font-weight:600;color:#fff}
.ppain-i{display:flex;justify-content:center;gap:14px;align-items:flex-start}
.ppain-i .pshot{margin:0;flex:1 1 0;max-width:230px}
.ppain-i .pshot.screen{max-width:none;flex:1}
.ppain-i .pshot figcaption{display:none}

/* shots */
.pshot{margin:0}
.pshot .pf{cursor:zoom-in}
.pshot.phone .pf{border-radius:clamp(20px,2.2vw,30px);padding:clamp(4px,.45vw,7px);background:linear-gradient(145deg,#3a3358,#0b0818);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 26px 56px -22px rgba(0,0,0,.85);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pshot.phone .pf img{display:block;width:100%;height:auto;border-radius:clamp(15px,1.7vw,24px)}
.pshot.screen .pf{border-radius:18px;border:1px solid rgba(255,255,255,.24);background:#fff;box-shadow:0 26px 56px -26px rgba(0,0,0,.8);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pshot.screen .pf img{display:block;width:100%;height:auto}
.pshot:hover .pf{transform:translateY(-6px)}
.pshot figcaption{padding:12px 6px 0;font-size:.86rem;color:var(--muted);text-align:center;line-height:1.4}

/* rail */
.prail-ctl{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.prail-hint{font-size:.88rem;color:var(--muted)}
.prail-ctl>div{display:flex;gap:10px}
.prail-ctl .xbtn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s,color .25s,transform .25s}
.prail-ctl .xbtn:hover{background:#fff;color:#1a1040;transform:scale(1.06)}
.prail{display:flex;gap:clamp(14px,1.8vw,24px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:14px 4px 34px;margin:0 -4px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.prail::-webkit-scrollbar{display:none}
.prail.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.prail .rail-i{flex:none;scroll-snap-align:start}
.prail.phone .rail-i{width:clamp(170px,15vw,230px)}
.prail.screen .rail-i{width:min(560px,82vw)}

/* personas */
.ppersonas{display:grid;gap:22px}
.ppersona{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(20px,3vw,44px);padding:clamp(20px,2.6vw,34px);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 70px -36px rgba(0,0,0,.7);align-items:start}
.pp-ph{border-radius:24px;overflow:hidden;background:rgba(255,255,255,.08);aspect-ratio:4/4.6}
.pp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ppersona h3{font-size:1.5rem;font-weight:800;margin-bottom:4px}
.pp-role{color:#ff9be3;font-weight:700;font-size:.98rem;margin-bottom:14px}
.ppersona blockquote{margin:0 0 18px;padding:12px 18px;border-inline-start:3px solid #ff7ad9;background:rgba(255,255,255,.06);border-radius:0 14px 14px 0;font-size:1.05rem;line-height:1.6;color:#fff}
.ppersona dl{display:grid;gap:14px}
.ppersona dt{font-size:.8rem;font-weight:800;letter-spacing:.5px;color:#c9a6ff;margin-bottom:3px}
.ppersona dd{margin:0;font-size:.98rem;line-height:1.7;color:rgba(244,241,255,.9)}

/* process */
.psteps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(24px,3vw,40px);counter-reset:s}
.psteps li{position:relative;padding:22px 18px 20px;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.psteps li::after{content:"";position:absolute;top:44px;inset-inline-end:100%;width:14px;height:2px;background:linear-gradient(90deg,#c9a6ff,#ff7ad9)}
.psteps li:last-child::after{display:none}
.ps-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:12px;font-family:'Rubik',Arial,sans-serif;font-size:.9rem;color:#1a1040;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.psteps b{display:block;font-size:1.02rem;margin-bottom:4px}
.psteps small{display:block;color:var(--muted);font-size:.88rem;line-height:1.5}

/* groups (steps) */
.pgroups{display:grid;gap:22px}
.pgroup{display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(22px,3vw,38px);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 70px -36px rgba(0,0,0,.7)}
.pgroup.wide{grid-template-columns:1fr}
.pg-t h3{font-size:1.4rem;font-weight:800;margin-bottom:8px}
.pg-t p{font-size:1.02rem;line-height:1.75;color:rgba(244,241,255,.9);max-width:46em}
.pg-i{display:flex;gap:14px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.pg-i .pshot{margin:0;flex:1 1 0;min-width:120px;max-width:210px}
.pgroup.wide .pg-i{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pgroup.wide .pg-i.n1{grid-template-columns:1fr}
.pgroup.wide .pg-i .pshot{max-width:none;min-width:0}
.pgroup.wide .pg-i.n3,.pgroup.wide .pg-i.n4{grid-template-columns:repeat(2,1fr)}
.pg-i .pshot figcaption{display:none}

/* design system */
.pds{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.pds-t,.pds-c{padding:clamp(20px,2.6vw,32px);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pds-row{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.pds-row:last-child{border-bottom:0}
.pds-aa{font-family:'Rubik',Arial,sans-serif;font-weight:700;font-size:2.2rem;line-height:1;width:70px;text-align:center;background:linear-gradient(135deg,#fff,#c9a6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pds-row b{display:block;font-size:1.05rem}
.pds-row small{color:var(--muted);font-size:.88rem}
.pds-c{display:flex;flex-wrap:wrap;gap:18px;align-content:center}
.sw{display:grid;justify-items:center;gap:8px}
.sw i{width:78px;height:78px;border-radius:50%;border:1px solid rgba(255,255,255,.3);box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.sw b{font-family:'Rubik',Arial,sans-serif;font-size:.82rem;letter-spacing:.5px;direction:ltr}

/* benefits */
.pben{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.pben-i{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2)}
.pben-i span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-family:'Rubik',Arial,sans-serif;font-size:.9rem;color:#1a1040;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.pben-i b{font-size:1rem;line-height:1.4}

/* next / prev */
.pnav{padding-top:clamp(60px,8vw,110px)}
.pnav-in{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pnav-c{position:relative;display:flex;flex-direction:column;gap:4px;padding:26px 30px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s}
.pnav-c:hover{transform:translateY(-6px);background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}
.pnav-c small{color:var(--muted);font-size:.85rem}
.pnav-c b{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:800}
.pnav-go{position:absolute;inset-inline-end:26px;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#1a1040;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.pnav-c:nth-child(2) .pnav-go{inset-inline-end:auto;inset-inline-start:26px}

/* lightbox */
.plb{position:fixed;inset:0;z-index:10001;display:none;place-items:center;background:rgba(5,3,15,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.plb.on{display:grid}
.plb>img{max-width:min(92vw,1500px);max-height:88vh;object-fit:contain;border-radius:14px;box-shadow:0 40px 100px -30px #000;background:#fff}
.plb button{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.plb button:hover{background:#fff;color:#1a1040}
.plb-x{top:22px;inset-inline-end:22px}
.plb-p{inset-inline-start:22px;top:50%;translate:0 -50%}
.plb-n{inset-inline-end:22px;top:50%;translate:0 -50%}
.plb-c{position:absolute;bottom:22px;left:50%;translate:-50% 0;color:rgba(255,255,255,.8);font-size:.9rem}
html.lb-open{overflow:hidden}

/* responsive */
@media(max-width:1000px){
 .ph>.wrap{grid-template-columns:1fr;min-height:0}
 .ph-vis{max-width:640px;margin:0 auto;width:100%}
 .psplit,.ppain,.pgroup,.pds{grid-template-columns:1fr}
 .ppersona{grid-template-columns:1fr}
 .pp-ph{aspect-ratio:16/10;max-width:420px}
 .pgrid.g3,.pben{grid-template-columns:repeat(2,1fr)}
 .psteps{grid-template-columns:repeat(2,1fr)}
 .psteps li::after{display:none}
}
@media(max-width:600px){
 .pgrid.g3,.pben,.psteps,.pnav-in{grid-template-columns:1fr}
 .pgroup.wide .pg-i{grid-template-columns:1fr}
 .ppain-i .pshot{max-width:none}
 .prail.phone .rail-i{width:150px}
 .ph-phones{min-height:300px}
 .ph-phones .phone{width:34vw}
}

/* ===== apps & systems index ===== */
.apps-h{padding-bottom:10px}
.apps-h>.wrap{display:block;text-align:center;min-height:0;padding-top:clamp(10px,3vw,40px)}
.apps-h .crumbs{justify-content:center}
.apps-h h1{max-width:12em;margin-inline:auto}
.apps-h h1 .gr{background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.apps-h .lead{margin-inline:auto}
.apps-h .ph-cta{justify-content:center}
.apps-stats{display:flex;justify-content:center;gap:clamp(18px,4vw,60px);margin-top:clamp(28px,4vw,48px)}
.apps-stats b{display:block;font-family:'Rubik',Arial,sans-serif;font-size:clamp(2rem,3.4vw,3rem);line-height:1;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.apps-stats small{color:var(--muted);font-size:.95rem}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.acard{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;color:inherit;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 70px -38px rgba(0,0,0,.75);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
a.acard:hover{transform:translateY(-8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 44px 80px -36px rgba(0,0,0,.9)}
.ac-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#2a1f6e,#5b2bb0)}
.ac-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ac-img.contain img{object-fit:contain;padding:6%}
a.acard:hover .ac-img img{transform:scale(1.06)}
.ac-b{padding:22px 24px 84px}
.ac-cat{font-size:.8rem;font-weight:800;letter-spacing:.6px;color:#ff9be3;margin-bottom:6px}
.acard h3{font-size:1.45rem;font-weight:800;line-height:1.15;margin-bottom:8px}
.acard h3 small{display:block;font-family:'Assistant',Arial,sans-serif;font-weight:500;font-size:.85rem;color:var(--muted);margin-top:3px}
.acard p{color:rgba(244,241,255,.88);font-size:.96rem;line-height:1.65}
.acard ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-top:12px}
.acard li{padding:4px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);font-size:.8rem}
.acard.xc .ac-b{padding:16px 18px 18px}
.acard.xc h3{font-size:1.1rem;margin:0}
.agrid.xs{grid-template-columns:repeat(4,1fr)}
.acard:hover .pc-go i{transform:scale(1.1);box-shadow:0 14px 30px -8px rgba(255,92,200,.9)}
.acard:hover .pc-go i svg{transform:translate(2px,-2px)}
@media(max-width:1000px){.agrid{grid-template-columns:repeat(2,1fr)}.agrid.xs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.agrid,.agrid.xs{grid-template-columns:1fr}}
.ph>.wrap>*{min-width:0}
.ph-vis{min-width:0;max-width:100%}
@media(max-width:600px){.ph-phones .phone{width:30vw;margin:0 -3%}.ph-phones{overflow:hidden;padding-top:10px}}

/* ===== light theme: white page with drifting pink-purple circles ===== */
.pmain{background:#fff;color:#2a1a4d;position:relative;isolation:isolate;overflow:hidden;--muted:rgba(42,26,77,.68)}
.pmain>*:not(.pm-blobs){position:relative;z-index:1}
.pm-blobs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pm-blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.72;will-change:transform}
.pm-blobs i:nth-child(1){width:34vw;height:34vw;left:-8vw;top:2%;background:#cdb4ff;animation:blobA 18s ease-in-out infinite alternate}
.pm-blobs i:nth-child(2){width:30vw;height:30vw;right:-6vw;top:10%;background:#ffb8dc;animation:blobB 20s ease-in-out infinite alternate}
.pm-blobs i:nth-child(3){width:28vw;height:28vw;left:30vw;top:21%;background:#e3ccff;animation:blobC 23s ease-in-out infinite alternate}
.pm-blobs i:nth-child(4){width:26vw;height:26vw;right:20vw;top:32%;background:#ffd3ea;animation:blobD 19s ease-in-out infinite alternate}
.pm-blobs i:nth-child(5){width:32vw;height:32vw;left:-6vw;top:43%;background:#ffb8dc;animation:blobB 21s ease-in-out infinite alternate}
.pm-blobs i:nth-child(6){width:34vw;height:34vw;right:-8vw;top:54%;background:#cdb4ff;animation:blobA 17s ease-in-out infinite alternate}
.pm-blobs i:nth-child(7){width:28vw;height:28vw;left:34vw;top:65%;background:#ffd3ea;animation:blobC 24s ease-in-out infinite alternate}
.pm-blobs i:nth-child(8){width:30vw;height:30vw;left:-8vw;top:76%;background:#e3ccff;animation:blobD 20s ease-in-out infinite alternate}
.pm-blobs i:nth-child(9){width:32vw;height:32vw;right:-4vw;top:86%;background:#ffb8dc;animation:blobA 22s ease-in-out infinite alternate}
.pm-blobs i:nth-child(10){width:30vw;height:30vw;left:26vw;top:95%;background:#cdb4ff;animation:blobB 19s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate(38vw,14vw) scale(1.25)}}
@keyframes blobB{to{transform:translate(-36vw,10vw) scale(1.15)}}
@keyframes blobC{to{transform:translate(-30vw,-12vw) scale(1.3)}}
@keyframes blobD{to{transform:translate(-26vw,-8vw) scale(.85)}}
@media(prefers-reduced-motion:reduce){.pm-blobs i{animation:none}}
.crumbs{color:rgba(42,26,77,.7)}
.crumbs a:hover{color:#e0409a}
.kick{background:rgba(138,43,226,.08);border-color:rgba(138,43,226,.26);color:#5b2bb0;backdrop-filter:none;-webkit-backdrop-filter:none}
.ph h1{background:linear-gradient(90deg,#2a1a4d,#8a2be2 55%,#e0409a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph .lead{color:rgba(42,26,77,.86)}
.ph-cta .btn.ghost{color:#2a1a4d;border-color:#2a1a4d;background:transparent}
.ph-cta .btn.ghost:hover{background:#2a1a4d;color:#fff}
.ph-vis::before{opacity:.5}
.ph-frame{background:#fff;border-color:rgba(138,43,226,.18);box-shadow:inset 0 1px 0 #fff,0 40px 90px -42px rgba(90,40,160,.5)}
.ph-frame.contain,.pfig.contain{background:linear-gradient(135deg,#fff,#f3ecff)}
.pfact,.pcard,.ppain,.ppersona,.pgroup,.pds-t,.pds-c,.pben-i,.psteps li,.pnav-c,.acard,.pfig{background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.52));border-color:rgba(138,43,226,.16);box-shadow:inset 0 1px 0 #fff,0 24px 56px -34px rgba(90,40,160,.38)}
.pnav-c:hover{background:linear-gradient(135deg,#fff,rgba(255,255,255,.7))}
.pfact small,.pch-k,.pds-row small,.psteps small,.pnav-c small,.prail-hint,.pshot figcaption,.pfig figcaption,.acard h3 small,.apps-stats small{color:rgba(42,26,77,.66)}
.pfact b,.pds-row b,.pben-i b,.pcard h3,.ppersona h3,.pg-t h3,.pnav-c b,.acard h3{color:#2a1a4d}
.pch h2{background:linear-gradient(90deg,#2a1a4d,#8a2be2 60%,#e0409a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ptxt p,.pcard p,.ppain p,.ppersona dd,.pg-t p,.acard p{color:rgba(42,26,77,.88)}
.ppain p.pp,.ptxt.big p{color:#2a1a4d}
.ppersona blockquote{background:rgba(138,43,226,.07);border-inline-start-color:#e0409a;color:#2a1a4d}
.ppain .lbl{color:#c0309a}.ppain .lbl.sol{color:#1f9d63}
.pp-role{color:#c0309a}.ppersona dt{color:#7a3fd0}
.pp-ph{background:rgba(138,43,226,.08)}
.pchips li{background:rgba(255,255,255,.75);border-color:rgba(138,43,226,.26);color:#2a1a4d;backdrop-filter:none;-webkit-backdrop-filter:none}
.pds-aa{background:linear-gradient(135deg,#2a1a4d,#8a2be2);-webkit-background-clip:text;background-clip:text;color:transparent}
.pds-row{border-bottom-color:rgba(42,26,77,.12)}
.sw i{border-color:rgba(42,26,77,.18);box-shadow:0 14px 30px -12px rgba(42,26,77,.45)}
.sw b{color:#2a1a4d}
.prail-ctl .xbtn{color:#5b2bb0;border-color:rgba(91,43,176,.35);background:rgba(255,255,255,.85)}
.prail-ctl .xbtn:hover{background:#5b2bb0;color:#fff}
.pshot.screen .pf{border-color:rgba(138,43,226,.22);box-shadow:0 26px 56px -30px rgba(90,40,160,.55)}
.pmain .pc-go b{color:#2a1a4d}
.acard li{background:rgba(138,43,226,.07);border-color:rgba(138,43,226,.22);color:#2a1a4d}
.apps-h h1{background:linear-gradient(90deg,#2a1a4d,#8a2be2 55%,#e0409a);-webkit-background-clip:text;background-clip:text}
.apps-h h1 .gr{background:linear-gradient(90deg,#8a2be2,#e0409a);-webkit-background-clip:text;background-clip:text}
.ph-phones .phone .pf{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 60px -22px rgba(42,26,77,.55)}
/* prev / next cards: arrow on its own side, text never under it */
.pnav-go{inset-inline-end:auto;inset-inline-start:auto}
.pnav-c:nth-child(1) .pnav-go{right:26px;left:auto}
.pnav-c:nth-child(2) .pnav-go{left:26px;right:auto;inset-inline-start:auto}
.pnav-c:nth-child(1){padding-right:92px}
.pnav-c:nth-child(2){padding-left:92px}
/* more projects ring */
.pmore{padding:clamp(60px,8vw,110px) 0 0}
.pmore-t{text-align:center;font-size:clamp(2.2rem,4.6vw,4rem);font-weight:900;line-height:1.1;margin-bottom:clamp(14px,2vw,30px);background:linear-gradient(90deg,#8a2be2,#e0409a,#8a2be2);-webkit-background-clip:text;background-clip:text;color:transparent}
.pmore .sc-root{margin:0 calc(50% - 50vw);width:100vw}
.pmore .more-cta{display:flex;justify-content:center;margin-top:clamp(10px,2vw,24px)}
.pmore .more-cta .btn{padding:13px 30px;font-size:1rem;background:linear-gradient(90deg,#8a2be2,#e0409a);color:#fff;box-shadow:0 14px 34px -14px rgba(224,64,154,.7)}

/* ===== dark top section (hero + facts) on every page ===== */
.ph-dark{--hbg:#0b0620;position:relative;background:radial-gradient(70% 90% at 88% 0%,rgba(138,43,226,.6),transparent 62%),radial-gradient(60% 80% at 6% 100%,rgba(31,31,255,.32),transparent 62%),var(--hbg);color:#f4f1ff;border-radius:0 0 clamp(30px,4.4vw,64px) clamp(30px,4.4vw,64px);padding-bottom:clamp(34px,4vw,56px);overflow:hidden;--muted:rgba(244,241,255,.68)}
.ph-dark .crumbs{color:rgba(244,241,255,.72)}
.ph-dark .crumbs a:hover{color:#ff7ad9}
.ph-dark .kick{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ph-dark h1{background:linear-gradient(90deg,#fff,#c9a6ff 55%,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-dark .lead{color:rgba(244,241,255,.92)}
.ph-dark .ph-cta .btn.ghost{color:#fff;border-color:#fff}
.ph-dark .ph-cta .btn.ghost:hover{background:#fff;color:#1a1040}
.ph-dark .ph-vis::before{opacity:.65}
.ph-dark .ph-frame{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 40px 90px -36px rgba(0,0,0,.85)}
.ph-dark .ph-frame.contain{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(235,226,255,.82))}
.ph-dark .pfact{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ph-dark .pfact small{color:rgba(244,241,255,.68)}
.ph-dark .pfact b{color:#fff}
.ph-dark .apps-stats small{color:rgba(244,241,255,.68)}
.ph-dark .apps-h h1,.ph-dark.apps-d h1{background:linear-gradient(90deg,#fff,#c9a6ff 55%,#ff7ad9);-webkit-background-clip:text;background-clip:text}
.ph-dark .ph-phones .phone .pf{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 60px -22px rgba(0,0,0,.85)}
.ph-dark .pfacts{padding-bottom:0}
/* taxi hero video: neon road on the purple background, edges fade into it */
.ph-video{position:relative;z-index:1;margin:0;aspect-ratio:16/9;--c:var(--hbg);scale:1.08}
.ph-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph-video::after{content:"";position:absolute;inset:-2px;z-index:3;pointer-events:none;background:linear-gradient(to right,var(--c) 0,color-mix(in srgb,var(--c) 86%,transparent) 5%,color-mix(in srgb,var(--c) 58%,transparent) 11%,color-mix(in srgb,var(--c) 28%,transparent) 19%,color-mix(in srgb,var(--c) 8%,transparent) 28%,transparent 36%,transparent 64%,color-mix(in srgb,var(--c) 8%,transparent) 72%,color-mix(in srgb,var(--c) 28%,transparent) 81%,color-mix(in srgb,var(--c) 58%,transparent) 89%,color-mix(in srgb,var(--c) 86%,transparent) 95%,var(--c) 100%),linear-gradient(to bottom,var(--c) 0,color-mix(in srgb,var(--c) 86%,transparent) 5%,color-mix(in srgb,var(--c) 58%,transparent) 11%,color-mix(in srgb,var(--c) 28%,transparent) 19%,color-mix(in srgb,var(--c) 8%,transparent) 28%,transparent 36%,transparent 64%,color-mix(in srgb,var(--c) 8%,transparent) 72%,color-mix(in srgb,var(--c) 28%,transparent) 81%,color-mix(in srgb,var(--c) 58%,transparent) 89%,color-mix(in srgb,var(--c) 86%,transparent) 95%,var(--c) 100%)}
@media(max-width:1000px){.ph-video{scale:1.02}}
.pmore{padding-bottom:clamp(30px,5vw,70px)}

/* ===== hero refinements: deep home-purple, text higher, borderless facts, bigger feathered video ===== */
.ph-dark{--hbg:#14082a;background:var(--hbg);padding-bottom:clamp(26px,3vw,44px)}
.ph{padding-top:calc(var(--hh) + 2px)}
.ph>.wrap{min-height:min(60vh,560px)}
.ph.vid>.wrap{grid-template-columns:.74fr 1.26fr;min-height:min(64vh,600px)}
.ph-video{scale:1.34;transform-origin:30% 50%}
.ph-video::after{display:none}
.ph-video video{-webkit-mask-image:radial-gradient(ellipse 74% 72% at 50% 50%,#000 44%,rgba(0,0,0,.55) 66%,transparent 100%);mask-image:radial-gradient(ellipse 74% 72% at 50% 50%,#000 44%,rgba(0,0,0,.55) 66%,transparent 100%)}
@media(max-width:1000px){.ph-video{scale:1.12}.ph.vid>.wrap{grid-template-columns:1fr}}
.ph-dark .pfact{background:none;border:0;box-shadow:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:6px 26px;border-inline-start:1px solid rgba(255,255,255,.2)}
.ph-dark .pfact:first-child{border-inline-start:0;padding-inline-start:0}
.ph-dark .pfacts{gap:0;padding-top:0;padding-bottom:0}
@media(max-width:700px){.ph-dark .pfact{border-inline-start:0;padding:8px 0}}

/* ===== white glass phones, bigger Rubik pain/solution headings ===== */
.phone .pf,.pshot.phone .pf{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,226,255,.62));border:1px solid rgba(138,43,226,.26);box-shadow:inset 0 1px 0 #fff,0 26px 56px -24px rgba(90,40,160,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ph-dark .ph-phones .phone .pf{box-shadow:inset 0 1px 0 #fff,0 30px 60px -22px rgba(0,0,0,.7)}
.ppain .lbl{font-family:'Rubik',Arial,sans-serif;font-size:clamp(1.25rem,1.7vw,1.6rem);font-weight:700;letter-spacing:0;line-height:1.15;margin-bottom:10px}
.ppain .lbl.sol{margin-top:26px}
.ppain p{font-size:clamp(1.05rem,1.2vw,1.18rem);line-height:1.8}

/* ===== hero as glass over the molten background; video flush left, feathered ===== */
.ph-dark{position:relative;z-index:2;background:rgba(20,8,42,.6);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);padding-bottom:clamp(54px,6.4vw,100px);box-shadow:inset 0 -1px 0 rgba(255,255,255,.16),0 30px 80px -40px rgba(0,0,0,.6)}
.pmain{margin-top:calc(-1*clamp(30px,4.4vw,64px));padding-top:clamp(30px,4.4vw,64px)}
.ph-dark .pfacts{margin-top:clamp(44px,6vw,92px)}
.ph-video{--x:max(20px,calc((100vw - 1300px)/2 + 20px));width:calc(100% + var(--x));margin-left:calc(-1*var(--x));scale:1.12;transform-origin:0 50%}
.ph-video video{-webkit-mask-image:linear-gradient(to right,#000 0,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 0,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);mask-composite:intersect}
@media(max-width:1000px){.ph-video{width:100%;margin-left:0;scale:1.04;transform-origin:50% 50%}}

/* ===== hero tinted with the project's own colour (as on the home slide), animated title, white text ===== */
.ph-dark{background:color-mix(in srgb,var(--hbg) 74%,transparent)}
.ph-dark h1,.ph-dark.apps-d h1{background:linear-gradient(90deg,#c9a6ff,#ff7ad9,#c9a6ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 5s linear infinite}
.ph-dark .apps-h h1 .gr{background:none;color:inherit;-webkit-text-fill-color:transparent}
.ph-dark .lead{color:#fff}
.ph-dark .crumbs{color:rgba(255,255,255,.78)}
.ph-dark .pfact small{color:rgba(255,255,255,.7)}
@media(prefers-reduced-motion:reduce){.ph-dark h1{animation:none}}
/* hero picture = the same image as the home slide, blended into the tint */
.ph-himg{position:relative;z-index:1;margin:0;display:grid;place-items:center}
.ph-himg img{display:block;width:100%;max-height:560px;object-fit:contain;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.ph-himg.contain img{padding:3%}
/* Liamor scene (same floating composition as the home slide) */
.ph-vis .lia{position:relative;z-index:1;width:100%;aspect-ratio:566/363}
.ph-vis .lia img.l{position:absolute;height:auto;max-width:none;object-fit:fill;will-change:translate,rotate;animation:liaFloat var(--t,5s) ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
.ph-vis .lia img.couple,.ph-vis .lia img.screen{animation:none}
.ph-vis .lia img.logo{animation:none;z-index:5}
.ph-vis .lia img.flip{scale:-1 1}
@keyframes liaFloat{0%,100%{translate:0 0;rotate:0deg}25%{translate:2% -6%;rotate:2.5deg}50%{translate:0 -11%;rotate:0deg}75%{translate:-2% -5%;rotate:-2.5deg}}
@media(prefers-reduced-motion:reduce){.ph-vis .lia img.l{animation:none}}

/* ===== larger image sliders, squarer corners so the screens read clearly ===== */
.ppain-i.rm{display:block;min-width:0}
.prail-wrap.mini .prail-ctl{margin-bottom:8px}
.prail.screen.mini{padding:6px 2px 14px;margin:0 -2px}
.prail.screen.mini .rail-i{width:100%;scroll-snap-align:center}
.prail.screen.mini{scroll-snap-type:x mandatory}
.ppain-i.rm .pshot{max-width:none}
.pshot.screen .pf{border-radius:6px}
.pfig,.ph-frame,.pg-i .pshot .pf{border-radius:10px}
.pp-ph{border-radius:12px}
.ppain,.ppersona,.pgroup,.pcard,.pds-t,.pds-c{border-radius:20px}
@media(max-width:600px){.prail.screen .rail-i{width:92%}}
.ppain-i .prail .rail-i,.ppain-i.rm .pshot.rail-i{flex:none;width:100%;max-width:none;min-width:0}
.ppain-i.rm .pshot figcaption{display:none}

/* ===== no background boxes: parts are separated by a line that draws right-to-left; numbers are big translucent gradient numerals ===== */
.ppain,.ppersona,.pgroup,.pcard,.psteps li,.pben-i,.pds-t,.pds-c{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ppain,.ppersona,.pgroup{position:relative;padding:clamp(34px,4vw,56px) 0 clamp(14px,2vw,26px)}
.ppains,.ppersonas,.pgroups{gap:clamp(18px,2.4vw,34px)}
.pcard,.psteps li,.pben-i,.pds-t,.pds-c{position:relative;padding-top:26px}
.pcard:hover{transform:none}
.ppain::before,.ppersona::before,.pgroup::before,.pcard::before,.psteps li::before,.pben-i::before,.pds-t::before,.pds-c::before,.pch-head::before{content:"";position:absolute;top:0;right:0;left:0;height:2px;border-radius:2px;background:linear-gradient(270deg,#8a2be2,#ff7ad9 55%,rgba(255,122,217,0));transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.15s cubic-bezier(.2,.7,.2,1)}
.pch-head{position:relative;padding-top:26px}
.ppain.in::before,.ppersona.in::before,.pgroup.in::before,.pcard.in::before,.psteps li.in::before,.pben-i.in::before,.pds-t.in::before,.pds-c.in::before,.pch-head.in::before{transform:scaleX(1)}
html:not(.js) .ppain::before,html:not(.js) .ppersona::before,html:not(.js) .pgroup::before,html:not(.js) .pcard::before,html:not(.js) .psteps li::before,html:not(.js) .pben-i::before,html:not(.js) .pds-t::before,html:not(.js) .pds-c::before,html:not(.js) .pch-head::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.ppain::before,.ppersona::before,.pgroup::before,.pcard::before,.psteps li::before,.pben-i::before,.pds-t::before,.pds-c::before,.pch-head::before{transform:scaleX(1);transition:none}}
.psteps li::after{display:none}
/* numerals instead of circles */
.pch-n,.ppain-n,.pc-i,.ps-n,.pben-i span{width:auto;height:auto;border-radius:0;box-shadow:none;display:block;background:linear-gradient(135deg,#8a2be2,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:'Rubik',Arial,sans-serif;font-weight:900;opacity:.42;line-height:.95;place-items:unset}
.pch-n{font-size:clamp(3rem,5.2vw,4.8rem)}
.pch-head{align-items:flex-end;gap:18px}
.pch-k{padding-bottom:.5em}
.ppain-n{font-size:clamp(3.6rem,6.4vw,6rem);margin:0 0 6px}
.pc-i,.ps-n{font-size:clamp(2.4rem,3.6vw,3.2rem);margin:0 0 8px}
.pben-i span{font-size:clamp(2rem,3vw,2.6rem)}
.pben-i{align-items:flex-end;gap:12px}
.psteps li{padding-inline:4px}
.pds-row{border-bottom-color:rgba(42,26,77,.1)}
/* same rule for the apps index cards */
.acard{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;position:relative;padding-top:22px;overflow:visible}
a.acard:hover{box-shadow:none}
.acard::before{content:"";position:absolute;top:0;right:0;left:0;height:2px;border-radius:2px;background:linear-gradient(270deg,#8a2be2,#ff7ad9 55%,rgba(255,122,217,0));transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.15s cubic-bezier(.2,.7,.2,1)}
.acard.in::before{transform:scaleX(1)}
html:not(.js) .acard::before{transform:scaleX(1)}
.ac-img{border-radius:10px}
.ac-b{padding:16px 0 78px}
.acard.xc .ac-b{padding:12px 0 6px}
.agrid{gap:clamp(22px,2.6vw,38px)}

/* ===== "more projects" sits on the dark page background (like the footer), under the white content ===== */
.pmain{border-radius:0 0 clamp(30px,4.4vw,64px) clamp(30px,4.4vw,64px)}
.pmore{position:relative;z-index:1;color:#fff;padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(34px,5vw,70px)}
.pmore-t{background:linear-gradient(90deg,#c9a6ff,#ff7ad9,#c9a6ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 5s linear infinite}
.pmore .sc-nav .xbtn{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12)}
.pmore .sc-nav .xbtn:hover{background:#fff;color:#1a1040}
@media(prefers-reduced-motion:reduce){.pmore-t{animation:none}}

/* ===== straight edges between the page sections ===== */
.ph-dark,.pmain{border-radius:0}
.pmain{margin-top:0;padding-top:0}

/* ===== users: sticky bounce cards (personas) ===== */
.pmain{overflow:clip}
.ppersonas.sbw-root{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4vw,60px);padding:clamp(8px,1vw,16px) 0 clamp(90px,13vw,200px);--sbw-stick-pos:0.5}
.ppersonas.sbw-root .sbw-card{position:sticky!important;top:max(0px,calc((100% - var(--sbw-h,100%)) * var(--sbw-stick-pos)));width:min(1100px,100%);display:grid;grid-template-columns:minmax(190px,290px) 1fr;gap:clamp(20px,3vw,44px);align-items:start;padding:clamp(22px,2.8vw,40px);border-radius:10px;margin:0;transition:none!important;transform-origin:50% 50%!important;will-change:transform;transform:translateX(calc(var(--e-con-transform-translateX,0px) * var(--sbw-turn,1))) translateY(calc(var(--e-con-transform-translateY,0px) * var(--sbw-turn,1))) rotate(calc(var(--e-con-transform-rotateZ,0deg) * var(--sbw-turn,1))) scale(var(--sbw-sx,1),var(--sbw-sy,1))!important}
.ppersonas.sbw-root .sbw-card::before{display:none}
.sbw-card-1{--e-con-transform-rotateZ:0deg;background:#fff;color:#2a1a4d;border:1px solid rgba(138,43,226,.2);box-shadow:0 34px 80px -44px rgba(90,40,160,.55)}
.sbw-card-2{--e-con-transform-rotateZ:-3deg;background:#eadcff;color:#2a1a4d;box-shadow:0 34px 80px -44px rgba(90,40,160,.6)}
.sbw-card-3{--e-con-transform-rotateZ:3deg;background:#2a1a4d;color:#f4f1ff;box-shadow:0 34px 80px -40px rgba(20,8,42,.8)}
.sbw-card-3 h3,.sbw-card-3 blockquote{color:#fff}
.sbw-card-3 .pp-role{color:#ff9be3}
.sbw-card-3 blockquote{background:rgba(255,255,255,.08)}
.sbw-card-3 dt{color:#c9a6ff}
.sbw-card-3 dd{color:rgba(244,241,255,.92)}
.sbw-card-2 blockquote{background:rgba(255,255,255,.55)}
.sbw-card .pp-ph{border-radius:8px}
@media(max-width:900px){
 .ppersonas.sbw-root .sbw-card{position:relative!important;top:auto!important;width:100%;grid-template-columns:1fr;transform:none!important}
 .ppersonas.sbw-root{padding-bottom:30px}
}

/* ===== bigger hero picture ===== */
.ph>.wrap{grid-template-columns:.62fr 1.38fr}
.ph.vid>.wrap{grid-template-columns:.7fr 1.3fr}
.ph-vis .lia,.ph-himg,.ph-phones{scale:1.2;transform-origin:35% 50%}
.ph-himg img{max-height:640px}
.ph-phones .phone{width:clamp(150px,17vw,250px)}
@media(max-width:1000px){.ph>.wrap{grid-template-columns:1fr}.ph-vis .lia,.ph-himg,.ph-phones{scale:1.05;transform-origin:50% 50%}}
.ph-vis .lia,.ph-himg,.ph-phones{scale:1.16;transform-origin:100% 50%}
@media(max-width:1000px){.ph-vis .lia,.ph-himg,.ph-phones{scale:1.04;transform-origin:50% 50%}}

/* no clipped drop-shadows under the screens / rails (they showed up as a hard-edged smudge) */
.pshot .pf,.pshot.screen .pf,.pshot.phone .pf,.prail .pshot .pf{box-shadow:none}
.pshot.screen .pf{border:1px solid rgba(138,43,226,.22)}
.pshot:hover .pf{transform:none}
.prail{padding-bottom:6px}

/* ===== light-grey separator lines; every content section inside a white glass rectangle ===== */
.ppain::before,.ppersona::before,.pgroup::before,.pcard::before,.psteps li::before,.pben-i::before,.pds-t::before,.pds-c::before,.acard::before{background:#dedfe6;height:1.5px}
.pch-head::before{display:none}
.pch-head{padding-top:0}
.pch{padding:clamp(18px,2.4vw,34px) 0 0}
.pmain>.pch:first-of-type{padding-top:clamp(30px,4vw,56px)}
.pch>.wrap{max-width:1260px;width:calc(100% - 40px);padding:clamp(26px,3.6vw,56px);background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.58));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 30px 80px -52px rgba(90,40,160,.4);border-radius:8px}
.pmain.apps .wrap.pch{max-width:1260px;width:calc(100% - 40px);padding:clamp(26px,3.6vw,56px);background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.58));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 30px 80px -52px rgba(90,40,160,.4);border-radius:8px;margin-bottom:clamp(18px,2.4vw,34px)}
.pmain.apps .wrap.pch+.wrap.pch{margin-top:0}
.pmain{padding-bottom:clamp(40px,5vw,80px)}
@media(max-width:700px){.pch>.wrap,.pmain.apps .wrap.pch{width:calc(100% - 20px);padding:20px 16px}}

/* ===== larger text ===== */
.ppersona h3{font-size:clamp(1.6rem,2.2vw,2rem)}
.pp-role{font-size:clamp(1.05rem,1.3vw,1.2rem)}
.ppersona blockquote{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.6}
.ppersona dt{font-family:'Rubik',Arial,sans-serif;font-size:clamp(1.02rem,1.2vw,1.15rem);font-weight:700;letter-spacing:0;margin-bottom:4px}
.ppersona dd{font-size:clamp(1.05rem,1.25vw,1.2rem);line-height:1.75}
.ppersona dl{gap:18px}
.ptxt p{font-size:clamp(1.08rem,1.3vw,1.25rem)}
.pcard h3{font-size:1.3rem}
.pcard p,.pg-t p{font-size:clamp(1.05rem,1.2vw,1.18rem)}
.pg-t h3{font-size:1.55rem}
.pben-i b{font-size:1.12rem}
.psteps b{font-size:1.12rem}
.psteps small,.pds-row small,.pfact small{font-size:.95rem}
.pds-row b{font-size:1.15rem}
.pshot figcaption,.pfig figcaption,.prail-hint{font-size:.95rem}
.pfact b{font-size:1.15rem}
.ph .lead{font-size:clamp(1.15rem,1.5vw,1.4rem)}

/* ===== chapter titles on white: the same pastel pink-purple flowing gradient as the hero title ===== */
.pch h2{background:linear-gradient(90deg,#c9a6ff,#ff7ad9,#c9a6ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 5s linear infinite}
@media(prefers-reduced-motion:reduce){.pch h2{animation:none}}

/* ===== breadcrumbs aligned to the text edge; hero picture + logo placed lower, logo clear of the header ===== */
.crumbs{align-items:center;line-height:1.5}
.crumbs a,.crumbs span,.crumbs i{padding:0!important;margin:0!important;line-height:1.5}
.ph-vis .lia,.ph-himg,.ph-phones{scale:1.1;transform-origin:100% 50%}
.ph-vis .lia{translate:-2vw 8vh}
.ph-himg{translate:-1vw 3vh}
.ph-vis .lia img.logo{left:66%!important;top:2%!important}
@media(max-width:1000px){.ph-vis .lia,.ph-himg,.ph-phones{scale:1.04;translate:0 0}}

/* chapter titles: one shade darker */
.pch h2{background-image:linear-gradient(90deg,#ab7ee9,#ea5fc5,#ab7ee9)}

/* pain points: a real title instead of a number; the solution label gets its own colour (indigo instead of green) */
.pp-title{font-family:'Rubik',Arial,sans-serif;font-size:clamp(1.7rem,2.5vw,2.3rem);font-weight:800;line-height:1.15;letter-spacing:-.3px;margin:0 0 16px;background:linear-gradient(90deg,#ab7ee9,#ea5fc5,#ab7ee9);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 5s linear infinite}
@media(prefers-reduced-motion:reduce){.pp-title{animation:none}}
.ppain .lbl.sol{color:#4f46e5}

/* tighter spacing: text starts right under the chapter title */
.psplit{align-items:start}
.pch h2{margin-bottom:clamp(12px,1.5vw,20px)}
.pch-head{margin-bottom:4px}
.pch>.wrap,.pmain.apps .wrap.pch{padding:clamp(22px,3vw,44px)}
.ptxt p{margin-bottom:12px}
.pgrid{margin-top:clamp(14px,2vw,24px)}
.pchips{margin-top:16px}
.psteps{margin-top:clamp(16px,2.2vw,26px)}
.pben{margin-bottom:18px}
.pfig{align-self:start}

/* multi-screen groups: slider, two screens per view on wide layouts */
.pg-i.rm,.pgroup.wide .pg-i.rm{display:block;min-width:0}
.pg-i.rm .prail-wrap{width:100%}
.pg-i.rm .prail .rail-i,.pgroup.wide .pg-i.rm .pshot.rail-i{flex:none;width:calc(50% - 8px);max-width:none;min-width:0}
.pg-i.rm .pshot figcaption{display:none}
@media(max-width:900px){.pg-i.rm .prail .rail-i,.pgroup.wide .pg-i.rm .pshot.rail-i{width:100%}}

/* greenberg hero: green like the artwork, more opaque so the purple canvas doesn't muddy it */
.ph-dark[data-p="greenberg"]{background:color-mix(in srgb,var(--hbg) 94%,transparent)}

/* privacy page */
.legal{max-width:880px!important}
.legal h2{font-size:clamp(1.2rem,1.9vw,1.55rem)!important;margin:clamp(22px,3vw,34px) 0 8px!important}
.legal p,.legal li{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.85;color:#3a3158}
.legal ul{margin:8px 0 12px;padding-inline-start:1.3em}
.legal a{color:#6d28d9;text-decoration:underline;text-underline-offset:3px}
.legal-up{color:#7a6fa0!important;font-size:.9rem!important}

/* website case studies: full-page screenshots in browser frames that scroll on hover */
.wpages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(14px,2vw,24px)}
.wshot{margin:0;border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(138,43,226,.16);box-shadow:0 24px 50px -30px rgba(90,40,160,.45)}
.wbar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:linear-gradient(90deg,#c9a6ff,#ff7ad9)}
.wbar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85)}
.wview{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff}
.wview img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;cursor:zoom-in;transition:top 1s ease,transform 1s ease}
.wshot:hover .wview img{top:100%;transform:translateY(-100%);transition-duration:var(--dur,8s);transition-timing-function:linear}
.wshot figcaption{padding:12px 16px 14px;font-weight:700;color:#2a1a4d;font-size:1.02rem}
@media(max-width:1000px){.wpages{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wpages{grid-template-columns:1fr}}
@media(hover:none){.wshot .wview img{transition:none}}
/* lightbox for tall screenshots scrolls */
.plb.tall.on{display:block;overflow:auto;padding:76px 0 48px}
.plb.tall>img{display:block;margin:0 auto;max-height:none;width:min(92vw,900px)}
.plb.tall button,.plb.tall .plb-c{position:fixed}

/* embedded video */
.pvideo{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 30px 70px -36px rgba(70,30,140,.55);margin-top:clamp(14px,2vw,24px)}
.pvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* cut-out artwork: no edge fade, no box */
.ph-himg.cutout img{-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}

/* chapter with a long page screenshot in its own column */
.pfeat{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,25vw,340px);gap:clamp(22px,3vw,44px);align-items:start}
.pfeat-main{min-width:0}
.pfeat .pgrid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
.pfeat-col{position:sticky;top:104px}
.wlong{border-radius:26px;padding:clamp(14px,1.6vw,22px);background:linear-gradient(160deg,#e7d8ff,#ffd6ee 70%,#fff0f8);box-shadow:inset 0 1px 0 #fff,0 30px 60px -36px rgba(90,40,160,.5)}
.wl-in{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -22px rgba(70,30,140,.55)}
.wlong .wview.tall{aspect-ratio:auto;height:min(68vh,620px)}
.wlong .wview img{cursor:zoom-in}
.wlong .wview.tall img{transition:top 1s ease,transform 1s ease}
.wlong:hover .wview.tall img{top:100%;transform:translateY(-100%);transition:top 18s linear,transform 18s linear}
@media(max-width:1000px){.pfeat{grid-template-columns:1fr}.pfeat-col{position:static;order:-1;max-width:340px;margin-inline:auto}.pfeat .pgrid.g3{grid-template-columns:1fr}}

/* ===== larger texts and headings on all case-study pages ===== */
.ph .lead{font-size:clamp(1.25rem,1.75vw,1.9rem)}
.pfact small{font-size:clamp(1rem,1.05vw,1.15rem)}
.pfact b{font-size:clamp(1.2rem,1.4vw,1.5rem)}
.pmain .pch h2{font-size:clamp(2.3rem,3.9vw,4.4rem)}
.pch-k{font-size:clamp(1.05rem,1.2vw,1.3rem)}
.pmain .ptxt p,.pmain .ptxt.wide p{font-size:clamp(1.15rem,1.55vw,1.62rem);line-height:1.75}
.pmain .ptxt.big p{font-size:clamp(1.3rem,1.8vw,1.9rem)}
.pmain .pp-title{font-size:clamp(1.7rem,2.5vw,2.8rem)}
.pmain .ppain .lbl{font-size:clamp(1.1rem,1.3vw,1.4rem)}
.pmain .ppain p,.pmain .pcard p,.pmain .pg-t p,.pmain .pben-i small{font-size:clamp(1.1rem,1.4vw,1.45rem);line-height:1.7}
.pmain .pcard h3,.pmain .pgroup h3,.pmain .pg-t h3{font-size:clamp(1.35rem,1.8vw,1.9rem)}
.pmain .pben-i b{font-size:clamp(1.15rem,1.5vw,1.55rem)}
.pmain .ppersona h3{font-size:clamp(1.9rem,2.5vw,2.8rem)}
.pmain .pp-role{font-size:clamp(1.1rem,1.35vw,1.45rem)}
.pmain .ppersona blockquote{font-size:clamp(1.25rem,1.6vw,1.7rem);line-height:1.6}
.pmain .ppersona dt{font-size:clamp(.95rem,1.1vw,1.15rem)}
.pmain .ppersona dd{font-size:clamp(1.1rem,1.4vw,1.45rem)}
.pmain .psteps b{font-size:clamp(1.15rem,1.45vw,1.5rem)}
.pmain .psteps small{font-size:clamp(1rem,1.2vw,1.25rem)}
.pmain .pds-row b{font-size:clamp(1.2rem,1.5vw,1.6rem)}
.pmain .pds-row small{font-size:clamp(1rem,1.15vw,1.2rem)}
.pmain .pds-aa{font-size:clamp(2.6rem,3.2vw,3.6rem)}
.pmain .sw b{font-size:clamp(.95rem,1.1vw,1.15rem)}
.pmain .pshot figcaption,.pmain .pfig figcaption,.pmain .wshot figcaption{font-size:clamp(1rem,1.15vw,1.2rem)}
.pmain .prail-hint{font-size:clamp(1rem,1.15vw,1.2rem)}
.pmain .pchips li{font-size:clamp(1.05rem,1.25vw,1.3rem)}
.pmain .acard h3{font-size:clamp(1.5rem,2vw,2.2rem)}
.pmain .acard p{font-size:clamp(1.05rem,1.25vw,1.3rem);line-height:1.65}
.pmain .acard li{font-size:clamp(.95rem,1.1vw,1.15rem)}
.pmain .acard .ac-cat{font-size:clamp(.95rem,1.05vw,1.1rem)}
.sc-label{font-size:max(1.15vw,1.05rem)}
.sc-sub{font-size:max(.85vw,.95rem)}
@media(max-width:1024px){.sc-label{font-size:max(2.5vw,1.1rem)}.sc-sub{font-size:max(1.6vw,.95rem)}}
@media(max-width:767px){.sc-label{font-size:max(4.6vw,1.1rem)}.sc-sub{font-size:max(3.2vw,.95rem)}}
.ph-himg.cutout img{-webkit-box-reflect:below -2px linear-gradient(to bottom,transparent 58%,rgba(255,255,255,.32))}
/* hero artwork with its own background: straight crop with rounded corners, no edge fade */
.ph-himg.round img{-webkit-mask-image:none;mask-image:none;border-radius:clamp(18px,2.2vw,32px);box-shadow:0 30px 70px -30px rgba(0,0,0,.65)}
.ph-himg.cutout img{-webkit-box-reflect:initial}

/* chapter with text + image: text centred against a larger picture */
.pmain .psplit:not(.one){grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);align-items:center;gap:clamp(22px,3.4vw,56px)}
.pmain .psplit:not(.one) .pfig{align-self:center}
.pmain .psplit:not(.one) .ptxt{align-self:center}
@media(max-width:900px){.pmain .psplit:not(.one){grid-template-columns:1fr}}

/* ===== apps index: hero laid out like the project pages (text on the right, visual on the left) ===== */
.ph.apps-h>.wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,72px);align-items:center;text-align:right;min-height:min(70vh,640px);padding-top:clamp(10px,3vw,40px)}
.apps-h .ph-txt{min-width:0}
.apps-h h1{max-width:none;margin-inline:0}
.apps-h .lead{margin-inline:0}
.apps-h .crumbs{justify-content:flex-start}
.apps-h .ph-cta{justify-content:flex-start}
.apps-h .apps-stats{justify-content:flex-start}
.apps-collage{position:relative;aspect-ratio:1.18;width:100%}
.apps-collage img{position:absolute;display:block;object-fit:cover;border-radius:22px;box-shadow:0 36px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14)}
.apps-collage .c1{left:0;top:6%;width:56%;aspect-ratio:1.35;transform:rotate(-5deg)}
.apps-collage .c2{right:0;top:0;width:60%;aspect-ratio:1.35;transform:rotate(4deg);z-index:1}
.apps-collage .c3{left:22%;bottom:0;width:58%;aspect-ratio:1.35;transform:rotate(-1.5deg);z-index:2}
@media(max-width:900px){.ph.apps-h>.wrap{grid-template-columns:1fr;min-height:0}.apps-collage{max-width:560px;margin:0 auto}}

/* ===== apps index: every project in a card with a shadow, like the web-design cards ===== */
.pmain.apps .acard{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.62))!important;border:1px solid rgba(138,43,226,.16)!important;border-radius:24px!important;box-shadow:inset 0 1px 0 #fff,0 24px 56px -34px rgba(90,40,160,.45)!important;padding:0!important;overflow:hidden!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pmain.apps .acard::before{display:none!important}
.pmain.apps a.acard:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 #fff,0 34px 70px -30px rgba(90,40,160,.6)!important}
.pmain.apps .acard .ac-img{border-radius:0;margin:0}
.pmain.apps .acard .ac-b{padding:22px 24px 88px}
.pmain.apps .acard .pc-go{left:20px;bottom:20px}

/* apps index: no panel behind the cards; the "more projects" ring slider sits on the light background */
.pmain.apps #projects-list{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-inline:0!important}
.pmain.apps .pmore{color:#2a1a4d;padding-top:clamp(40px,5vw,80px)}
.pmain.apps .pmore-t{background:linear-gradient(90deg,#8a2be2,#e0409a,#8a2be2);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.pmain.apps .pmore .sc-nav .xbtn{color:#5b2bb0;border-color:rgba(91,43,176,.35);background:rgba(255,255,255,.75)}
.pmain.apps .pmore .sc-nav .xbtn:hover{background:#5b2bb0;color:#fff}
.pmain.apps .pmore .sc-root .sc-in{box-shadow:inset 0 1px 0 #fff,0 28px 60px -26px rgba(90,40,160,.55)}

/* click-to-play video grid */
.ytgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(14px,2vw,24px)}
.yt{position:relative;display:block;padding:0;border:0;border-radius:14px;overflow:hidden;background:#1a1040;aspect-ratio:16/9;cursor:pointer;box-shadow:0 24px 50px -30px rgba(70,30,140,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.yt:hover{transform:translateY(-5px);box-shadow:0 34px 60px -30px rgba(70,30,140,.75)}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:linear-gradient(135deg,#c9a6ff,#ff7ad9);box-shadow:0 12px 30px -8px rgba(255,92,200,.7)}
.yt-play::after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -7px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #1a1040}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:1000px){.ytgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ytgrid{grid-template-columns:1fr}}

/* project pages: the small coloured headings take the size of the process step titles (colours untouched) */
body .pch-k,body .ppain .lbl,body .pp-role,body .pfact b,body .psteps b,body .pben-i b,body .pds-row b,body .ppersona dt,body .pcard h3,body .pg-t h3,body .ac-cat{font-size:var(--th)!important}
body .ppersona dt{font-size:var(--tx)!important}
body .legal-up,body .mm-grid.four .mm-card span{font-size:var(--tx)!important}

.ph-vis .dsc{scale:1.06;transform-origin:100% 50%;translate:-1vw 4vh}
@media(max-width:1000px){.ph-vis .dsc{scale:1;translate:0 0}}
.ph-vis .dsc{scale:1.2}
@media(max-width:1000px){.ph-vis .dsc{scale:1}}

/* project pages: bigger reading text */
body .pmain .ptxt p,body .pmain .pcard p,body .pmain .pg-t p,body .pmain .ppain p,body .ph .lead,body .pmain .ppersona dd,body .pmain .acard p,body .legal p,body .legal li{font-size:clamp(1.3rem,1.6vw,1.8rem)!important;line-height:1.65!important}
body .pmain .psteps small,body .pmain .pds-row small,body .pmain .pfact small,body .pmain .ppersona dt,body .pmain .pshot figcaption,body .pmain .pfig figcaption,body .pmain .wshot figcaption,body .pmain .prail-hint,body .pmain .pchips li,body .pmain .acard li,body .pmain .ac-cat,body .crumbs{font-size:clamp(1.15rem,1.4vw,1.55rem)!important}
body .pmain .pfact b,body .pmain .psteps b,body .pmain .pds-row b,body .pmain .pben-i b{font-size:clamp(1.3rem,1.65vw,1.85rem)!important}

/* project pages: reading text and buttons 20px */
html:not(#a) .about-card p,html:not(#a) .about-more p,html:not(#a) .about-more li,html:not(#a) .srv-card p,html:not(#a) .pinfo p,html:not(#a) .pstep p,html:not(#a) .ptxt p,html:not(#a) .ptxt li,html:not(#a) .pcard p,html:not(#a) .pg-t p,html:not(#a) .ppain p,html:not(#a) .acard p,html:not(#a) .legal p,html:not(#a) .legal li,html:not(#a) .contact p,html:not(#a) .ph .lead,html:not(#a) .ppersona dd,html:not(#a) .cat-head p,html:not(#a) .pc-info p,html:not(#a) .pben-i p,html:not(#a) .psteps small,html:not(#a) .pds-row small,html:not(#a) .pfact small,html:not(#a) .pshot figcaption,html:not(#a) .pfig figcaption,html:not(#a) .wshot figcaption,html:not(#a) .prail-hint,html:not(#a) .apps-d .lead,html:not(#a) .pmain p,html:not(#a) .pmain li,html:not(#a) .pmain dd{font-size:20px!important;line-height:1.45!important}
@media(max-width:700px){html:not(#a) .about-card p,html:not(#a) .about-more p,html:not(#a) .about-more li,html:not(#a) .srv-card p,html:not(#a) .pinfo p,html:not(#a) .pstep p,html:not(#a) .ptxt p,html:not(#a) .ptxt li,html:not(#a) .pcard p,html:not(#a) .pg-t p,html:not(#a) .ppain p,html:not(#a) .acard p,html:not(#a) .legal p,html:not(#a) .legal li,html:not(#a) .contact p,html:not(#a) .ph .lead,html:not(#a) .ppersona dd,html:not(#a) .cat-head p,html:not(#a) .pc-info p,html:not(#a) .pben-i p,html:not(#a) .psteps small,html:not(#a) .pds-row small,html:not(#a) .pfact small,html:not(#a) .pshot figcaption,html:not(#a) .pfig figcaption,html:not(#a) .wshot figcaption,html:not(#a) .prail-hint,html:not(#a) .apps-d .lead,html:not(#a) .pmain p,html:not(#a) .pmain li,html:not(#a) .pmain dd{font-size:17px!important}}

/* ===== apps hero: one app that reflows from a phone into a tablet (brand colours) ===== */
.dmorph{position:relative;width:100%;aspect-ratio:1.18;container-type:inline-size;direction:ltr}
.dm-glow{position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,166,255,.38),rgba(255,122,217,.18) 55%,transparent 75%);filter:blur(20px)}
.dm-dev{--cy:11s;position:absolute;left:50%;top:50%;translate:-50% -50%;width:40%;height:90%;padding:1.4cqw;border-radius:6cqw;background:linear-gradient(150deg,#3a2470,#140a2e 55%,#2a1458);box-shadow:0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.25),0 4cqw 8cqw -3cqw rgba(0,0,0,.75),0 0 6cqw -1cqw rgba(255,122,217,.45);animation:dmDev var(--cy) cubic-bezier(.65,0,.35,1) infinite}
@keyframes dmDev{0%,32%{width:40%;height:90%;border-radius:6cqw}46%,84%{width:96%;height:68%;border-radius:3.4cqw}98%,100%{width:40%;height:90%;border-radius:6cqw}}
.dm-scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:4.8cqw;background:linear-gradient(160deg,#fbf8ff,#f0e8ff);animation:dmScr var(--cy,11s) cubic-bezier(.65,0,.35,1) infinite}
@keyframes dmScr{0%,32%{border-radius:4.8cqw}46%,84%{border-radius:2.2cqw}98%,100%{border-radius:4.8cqw}}
/* every block has a phone spot (--p*) and a tablet spot (--t*) and glides between them */
.dm-b{position:absolute;box-sizing:border-box;border-radius:1.6cqw;animation:dmMove 11s cubic-bezier(.65,0,.35,1) infinite}
@keyframes dmMove{0%,32%{left:var(--pl);top:var(--pt);width:var(--pw);height:var(--ph);opacity:var(--po,1)}46%,84%{left:var(--tl);top:var(--tt);width:var(--tw);height:var(--th);opacity:var(--to,1)}98%,100%{left:var(--pl);top:var(--pt);width:var(--pw);height:var(--ph);opacity:var(--po,1)}}
.dm-bar{--pl:6%;--pt:3.5%;--pw:88%;--ph:6%;--tl:3%;--tt:4%;--tw:77%;--th:8%;display:flex;align-items:center;gap:4%;padding:0 3%;background:#fff;box-shadow:0 .4cqw 1.4cqw -.6cqw rgba(90,40,160,.25)}
.dm-logo{flex:none;width:1.8cqw;aspect-ratio:1;border-radius:.6cqw;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.dm-srch{flex:1;height:34%;border-radius:2cqw;background:#efe7ff}
.dm-me{flex:none;width:2.2cqw;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#ffd23f,#ff9f43)}
.dm-nav{--pl:6%;--pt:89%;--pw:88%;--ph:7.5%;--tl:82%;--tt:4%;--tw:15%;--th:92%;background:#1a0f3a;border-radius:2.2cqw}
.dm-nav i{width:2cqw;aspect-ratio:1;border-radius:.6cqw;background:rgba(255,255,255,.28)}
.dm-nav i.on{background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.dm-nav{container-type:size}
.dm-nv{display:flex;width:100%;height:100%;justify-content:space-around;align-items:center}
@container (orientation:portrait){.dm-nv{flex-direction:column;justify-content:flex-start;gap:12%;padding-top:30%}}
.dm-hi{--pl:6%;--pt:12%;--pw:60%;--ph:5.5%;--tl:46%;--tt:15%;--tw:34%;--th:5%;display:flex;flex-direction:column;justify-content:center;gap:18%;align-items:flex-end}
.dm-hi i{display:block;height:38%;width:100%;border-radius:2cqw;background:#2a1a4d}
.dm-hi i+i{width:62%;height:26%;background:#c9b8ec}
.dm-st{display:grid;grid-template-columns:1fr;align-content:center;justify-items:end;gap:10%;padding:0 6%;background:#fff;box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(90,40,160,.35)}
.dm-st .dm-ic{width:2.4cqw;aspect-ratio:1;border-radius:.8cqw;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.dm-st b{display:block;width:55%;height:1.2cqw;border-radius:1cqw;background:#2a1a4d}
.dm-st em{display:block;width:80%;height:.7cqw;border-radius:1cqw;background:#ddd0f5}
.dm-st.s2 .dm-ic{background:linear-gradient(135deg,#ffd23f,#ff9f43)}
.dm-st.s3 .dm-ic{background:linear-gradient(135deg,#8a5cf6,#c9a6ff)}
.s1{--pl:52%;--pt:20%;--pw:42%;--ph:13%;--tl:58%;--tt:23%;--tw:22%;--th:17%}
.s2{--pl:6%;--pt:20%;--pw:42%;--ph:13%;--tl:32%;--tt:23%;--tw:22%;--th:17%}
.s3{--pl:6%;--pt:20%;--pw:42%;--ph:13%;--po:0;--tl:6%;--tt:23%;--tw:22%;--th:17%;--to:1}
.dm-ch{--pl:6%;--pt:36%;--pw:88%;--ph:21%;--tl:32%;--tt:44%;--tw:48%;--th:50%;padding:4% 4% 3%;background:#fff;box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(90,40,160,.35)}
.dm-ch svg{display:block;width:100%;height:100%;overflow:visible}
.dm-line{stroke-dasharray:420;stroke-dashoffset:420;animation:dmDraw 11s ease-in-out infinite}
@keyframes dmDraw{0%,4%{stroke-dashoffset:420}24%,100%{stroke-dashoffset:0}}
.dm-ls{--pl:6%;--pt:60%;--pw:88%;--ph:19%;--tl:6%;--tt:44%;--tw:22%;--th:36%;display:flex;flex-direction:column;justify-content:space-around;padding:2% 5%;background:#fff;box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(90,40,160,.35)}
.dm-row{display:flex;align-items:center;gap:6%}
.dm-av{flex:none;width:2cqw;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#c9a6ff,#ff7ad9)}
.dm-row:nth-child(2) .dm-av{background:linear-gradient(135deg,#ffd23f,#ff9f43)}
.dm-ln{flex:1;height:.8cqw;border-radius:1cqw;background:#ddd0f5}
.dm-tg{flex:none;position:relative;width:3cqw;height:1.6cqw;border-radius:2cqw;background:#e2d7f7}
.dm-tg::after{content:"";position:absolute;top:.25cqw;left:.25cqw;width:1.1cqw;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 .2cqw .4cqw rgba(0,0,0,.2)}
.dm-row:nth-child(1) .dm-tg,.dm-row:nth-child(3) .dm-tg{background:linear-gradient(90deg,#c9a6ff,#ff7ad9)}
.dm-row:nth-child(1) .dm-tg::after,.dm-row:nth-child(3) .dm-tg::after{left:auto;right:.25cqw}
.dm-cta{--pl:6%;--pt:81%;--pw:88%;--ph:5.6%;--tl:6%;--tt:83%;--tw:22%;--th:9%;border-radius:3cqw;background:#ffd23f;box-shadow:0 .8cqw 2cqw -.8cqw rgba(255,190,40,.8)}
/* floating UI/UX pieces around the device */
.dm-f{position:absolute;z-index:3;animation:dmFloat 6s ease-in-out infinite}
@keyframes dmFloat{0%,100%{translate:0 0}50%{translate:0 -1.6cqw}}
.dm-pal{left:0;top:10%;display:flex;gap:.8cqw;padding:1.2cqw;border-radius:2cqw;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dm-pal i{width:3.2cqw;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.dm-pal i:nth-child(1){background:#c9a6ff}.dm-pal i:nth-child(2){background:#ff7ad9}.dm-pal i:nth-child(3){background:#ffd23f}.dm-pal i:nth-child(4){background:#1a0f3a}
.dm-type{left:3%;bottom:8%;padding:1cqw 2.2cqw;border-radius:2cqw;font:800 5.4cqw/1 'Montserrat','Rubik',sans-serif;color:transparent;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;border:1px solid rgba(255,255,255,.25);animation-delay:-2s}
.dm-pill{right:2%;top:4%;padding:1cqw 2.4cqw;border-radius:4cqw;font:700 2.6cqw/1 'Montserrat','Rubik',sans-serif;color:#1a0f3a;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);box-shadow:0 1cqw 3cqw -1cqw rgba(255,122,217,.8);animation-delay:-4s}
.dm-cur{right:6%;bottom:12%;width:5cqw;animation:dmCur 11s ease-in-out infinite;filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.45))}
.dm-cur svg{display:block;width:100%}
@keyframes dmCur{0%,20%{translate:0 0;scale:1}28%{translate:-34cqw -6cqw;scale:1}30%{scale:.82}32%{scale:1}40%,100%{translate:0 0;scale:1}}
@media(prefers-reduced-motion:reduce){.dm-dev,.dm-scr,.dm-b,.dm-f,.dm-line,.dm-cur{animation:none}.dm-line{stroke-dashoffset:0}.dm-b{left:var(--tl);top:var(--tt);width:var(--tw);height:var(--th);opacity:var(--to,1)}.dm-dev{width:96%;height:68%}}
.dm-nv i{flex:none;width:2.2cqw;height:2.2cqw}
.dm-pal{top:2%;left:-1%}
.dm-type{left:-2%;bottom:3%}
@media(max-width:900px){.dmorph{max-width:560px;margin:0 auto}}
.dm-nv i{width:clamp(7px,.8vw,14px)!important;height:clamp(7px,.8vw,14px)!important;border-radius:30%!important}

/* complex systems hero: two system screens, slightly tilted */
.cx-vis{position:relative;width:100%;aspect-ratio:1.25}
.cx-vis img{position:absolute;display:block;width:82%;border-radius:18px;box-shadow:0 36px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.16)}
.cx-a{left:0;top:4%;transform:perspective(1400px) rotateY(14deg) rotate(-2deg)}
.cx-b{right:0;bottom:2%;width:66%!important;transform:perspective(1400px) rotateY(-10deg) rotate(2deg);animation:cxFloat 7s ease-in-out infinite}
@keyframes cxFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media(prefers-reduced-motion:reduce){.cx-b{animation:none}}
@media(max-width:900px){.cx-vis{max-width:560px;margin:0 auto}}
.ph h1.h1-long{font-size:clamp(2.4rem,4.4vw,4.2rem);letter-spacing:-1px}
html:not(#a) .ph h1.h1-long{font-size:clamp(2.2rem,3.6vw,3.7rem)!important;letter-spacing:0!important;white-space:nowrap}
/* apps hero: the device and the floating pieces sit at a 3D angle; the phone/tablet switch runs faster */
.dmorph{perspective:1500px;transform-style:preserve-3d}
.dm-dev{--cy:6.5s;transform-style:preserve-3d;animation:dmDev var(--cy) cubic-bezier(.65,0,.35,1) infinite,dmTilt 8s ease-in-out infinite;box-shadow:0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.25),-3cqw 5cqw 9cqw -3cqw rgba(0,0,0,.8),0 0 6cqw -1cqw rgba(255,122,217,.45)}
@keyframes dmTilt{0%,100%{transform:rotateX(9deg) rotateY(-20deg) rotateZ(1.5deg)}50%{transform:rotateX(6deg) rotateY(-11deg) rotateZ(.5deg)}}
.dm-scr,.dm-b,.dm-line,.dm-cur{animation-duration:6.5s!important}
.dm-f{transform-style:preserve-3d}
.dm-pal{transform:rotateX(10deg) rotateY(-24deg) translateZ(70px)}
.dm-type{transform:rotateX(12deg) rotateY(-20deg) translateZ(110px)}
.dm-pill{transform:rotateX(8deg) rotateY(-26deg) translateZ(90px)}
.dm-cur{transform:translateZ(120px)}
.dm-glow{transform:rotateX(60deg) translateY(18%);filter:blur(26px)}
@media(prefers-reduced-motion:reduce){.dm-dev{transform:rotateX(8deg) rotateY(-16deg)}}
.dm-glow{transform:none;filter:blur(20px)}
.dm-dev{box-shadow:0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.25),0 0 6cqw -1cqw rgba(255,122,217,.45)}
.dm-dev::after{content:"";position:absolute;inset:6% 4% -6%;z-index:-1;border-radius:inherit;background:rgba(0,0,0,.55);filter:blur(3cqw);transform:translateZ(-40px)}
.dmorph,.dm-dev,.dm-f{transform-style:flat}
.dm-dev::after{content:none}
.dm-dev{box-shadow:0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.25),0 3cqw 6cqw -2cqw rgba(0,0,0,.7),0 0 6cqw -1cqw rgba(255,122,217,.45)}

/* BUYMYCAR hero: 3D car on a stage with a wrecking ball (car3d.js); the screenshot shows until WebGL is ready */
.car3d{position:relative;width:100%;aspect-ratio:1.05}
.car3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.car3d-fb{position:absolute;inset:10% 0;width:100%;height:80%;object-fit:contain;border-radius:18px;transition:opacity .6s}
.car3d.is-3d .car3d-fb{opacity:0;pointer-events:none}
.car3d::before{content:"";position:absolute;left:12%;right:12%;bottom:6%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,217,.35),transparent);filter:blur(18px)}
@media(max-width:900px){.car3d{max-width:520px;margin:0 auto}}
.car3d{aspect-ratio:1.2;max-height:calc(100svh - 170px);margin-inline:auto}

/* ===== BUYMYCAR hero: flat motion graphic with clean outlines (car turntable + wrecking ball) ===== */
.bmg{position:relative;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:600/540;max-height:calc(100svh - 170px)}
.bmg svg{display:block;width:100%;height:100%;overflow:visible}
.bmg .ol path,.bmg .ol rect,.bmg .ol circle{stroke:#120a24;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.bmg .ol .hl,.bmg .ol text{stroke:none}
.bmg .ol .bmg-sp{stroke-width:3}
/* the car flips through four views, like a turntable seen in flat 2D */
.bmg-v{opacity:0;transform:scaleX(.3);animation:bmgFlip 8s cubic-bezier(.65,0,.35,1) infinite}
.bmg-v.v2{animation-delay:-6s}.bmg-v.v3{animation-delay:-4s}.bmg-v.v4{animation-delay:-2s}
@keyframes bmgFlip{0%{opacity:1;transform:scaleX(.3)}9%{transform:scaleX(1.04)}12%,15%{transform:scaleX(1)}25%{opacity:1;transform:scaleX(.3)}25.1%,100%{opacity:0;transform:scaleX(.3)}}
.bmg-sp{animation:bmgSpin .6s linear infinite}
@keyframes bmgSpin{to{transform:rotate(360deg)}}
.bmg-sh{transform-box:fill-box;transform-origin:center;animation:bmgShadow 2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bmgShadow{0%,100%{transform:scaleX(.75)}50%{transform:scaleX(1)}}
/* wrecking ball: a pendulum from the crane hook, speed lines flash at the bottom of each swing */
.bmg-sw{transform-origin:300px 46px;animation:bmgSwing 2.6s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes bmgSwing{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.bmg-speed{animation:bmgWhoosh 1.3s ease-in-out infinite}
@keyframes bmgWhoosh{0%,100%{opacity:0}50%{opacity:1}}
.bmg-ring{transform-origin:300px 300px;animation:bmgTurn 30s linear infinite}
@keyframes bmgTurn{to{transform:rotate(360deg)}}
.bmg-fl{animation:bmgBob 4s ease-in-out infinite}
.bmg-fl.f2{animation-delay:-1s}.bmg-fl.f3{animation-delay:-2s}.bmg-fl.f4{animation-delay:-3s}
@keyframes bmgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.bmg-tag{transform-origin:444px 142px;animation:bmgTag 3s ease-in-out infinite}
@keyframes bmgTag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.bmg *{animation:none!important}.bmg-v.v1{opacity:1;transform:none}}
@media(max-width:900px){.bmg{max-width:480px}}
html:not(#a) .pfacts .pfact b{font-size:20px!important;font-weight:400!important;line-height:1.45!important}