/* Visual additions */
.hero-bg{position:absolute;inset:0;opacity:.55;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
.hero-bg svg{width:100%;height:100%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 6%,rgba(5,9,20,.6) 52%,rgba(5,9,20,.05))}
.banner{position:absolute;right:0;top:0;bottom:0;width:min(62%,860px);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}
.banner svg{width:100%;height:100%}
.page-head>.wrap{position:relative;z-index:1}
@media (max-width:760px){.banner{width:100%;opacity:.22}}
.mock{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--surface-2),var(--surface));padding:22px;overflow:hidden}
.mock-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:.9rem;flex-wrap:wrap}
.mock-h .up{color:#3ddc84;font-weight:600;font-size:.85rem}
.mock svg{width:100%;height:auto;display:block}
.kw{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.kw div{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.kw i{font-style:normal;color:#3ddc84;font-weight:700}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal span{aspect-ratio:1.6;border-radius:8px;background:var(--bg-2);border:1px solid var(--line)}
.cal .a{background:var(--orange);border-color:transparent}.cal .b{background:#2f6bff;border-color:transparent}.cal .c{background:#8a3dff;border-color:transparent}.cal .d{background:#0aa58c;border-color:transparent}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.ppc{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:center}
.hb{display:grid;gap:14px}
.hb span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px}
.hb div{position:relative}
.hb i{display:block;height:10px;border-radius:6px;width:var(--w);background:linear-gradient(90deg,var(--orange-2),var(--orange))}
@media (max-width:560px){.kw{grid-template-columns:1fr}.ppc{grid-template-columns:1fr}}
.industries{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1100px){.industries{grid-template-columns:repeat(3,1fr)}}
.itile{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);padding:0;text-align:left;background:var(--surface)}
.itile .art{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.itile .art svg{width:100%;height:100%;display:block}
.itile:hover .art{transform:scale(1.08)}
.itile:hover{border-color:rgba(99,19,171,.6)}
.itile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,9,20,.92));pointer-events:none}
.itile .info{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.itile h4{font-size:1.1rem}
.itile p{font-size:.84rem;color:#c2cce6;margin-top:4px;line-height:1.45}
@media (max-width:900px){.industries{grid-template-columns:1fr 1fr}}
.showreel{position:relative;display:block;width:100%;aspect-ratio:21/9;min-height:300px;border-radius:28px;overflow:hidden;border:1px solid var(--line-2);padding:0;text-align:left;background:var(--surface)}
.showreel .art{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.showreel .art svg{width:100%;height:100%;display:block}
.showreel:hover .art{transform:scale(1.05)}
.showreel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,20,.88),rgba(5,9,20,.1) 70%);pointer-events:none}
.showreel .txt{position:absolute;left:clamp(22px,4vw,56px);bottom:clamp(22px,4vw,48px);z-index:2;max-width:420px}
.bigplay{position:absolute;z-index:3;right:clamp(24px,8vw,120px);top:50%;margin-top:-48px;width:96px;height:96px;border-radius:50%;background:var(--orange);display:grid;place-items:center;animation:pulse 2.6s infinite;transition:transform .3s}
.showreel:hover .bigplay{transform:scale(1.1)}
.bp-center{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-52px 0 0 -42px;border-radius:50%;background:rgba(99,19,171,.92);display:grid;place-items:center;animation:pulse 2.6s infinite;z-index:3}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gtile{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.gtile .gv{aspect-ratio:4/3;overflow:hidden}
.gtile .gv svg{width:100%;height:100%;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gtile:hover .gv svg{transform:scale(1.07)}
.gtile .gt{padding:16px 18px 20px}
.gtile h4{font-size:1.02rem}
.gtile p{color:var(--muted);font-size:.84rem;margin-top:4px;line-height:1.5}
@media (max-width:980px){.gallery{grid-template-columns:1fr 1fr}}
.case-vis>*{position:relative;z-index:1}
.case-vis>.cv-art{position:absolute;inset:0;z-index:0;opacity:.5}
.case-vis>.cv-art svg{width:100%;height:100%;display:block}
.case-vis::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,16,40,.35),rgba(8,16,40,.85))}


.itile .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Work hero: copy on the left, rounded-edge stage on the right that cycles through work */
.wh{position:relative;overflow:hidden;background:#000;min-height:clamp(440px,40vw,600px);display:flex;align-items:center;margin:calc(var(--hdr) + env(safe-area-inset-top,0px) + 14px) clamp(12px,2vw,28px) 0;border-radius:28px;border:1px solid var(--line)}
.wh-ghost{position:absolute;left:4%;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:800;font-size:clamp(7rem,20vw,18rem);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);pointer-events:none;user-select:none}
.wh-stage{position:absolute;right:0;top:0;bottom:0;width:58%;border-radius:clamp(170px,22vw,320px) 0 0 clamp(170px,22vw,320px);overflow:hidden;background:#0a0618;box-shadow:-30px 0 70px -40px rgba(99,19,171,.35)}
.wh-slide{position:absolute;inset:0;opacity:0;transform:scale(1.12);transition:opacity .4s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.wh-slide.on{opacity:1;transform:none}
.wh-slide img,.wh-slide svg{width:100%;height:100%;object-fit:cover;display:block}
.wh-wrap{position:relative;z-index:2;width:100%}
.wh-copy{max-width:min(460px,46%)}
.wh-h{font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 22px}
.wh-meta{color:var(--muted);margin:0;font-size:1.02rem;min-height:1.6em}
.wh-meta b{color:var(--text);font-weight:600}
.wh-ctl{display:flex;align-items:center;gap:12px;margin-top:34px}
.wh-arrow{width:46px;height:46px;border-radius:14px;border:1px solid var(--line-2);background:transparent;color:var(--text);font-size:1.1rem;display:grid;place-items:center;transition:background .2s,border-color .2s}
.wh-arrow:hover{background:rgba(160,80,255,.2);border-color:rgba(160,80,255,.6)}
.wh-count{margin-left:8px;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .wh{flex-direction:column;align-items:stretch;padding-top:28px}
  .wh-stage{position:relative;order:2;width:100%;height:320px;border-radius:50% 50% 0 0/22% 22% 0 0;margin-top:28px}
  .wh-wrap{order:1}.wh-copy{max-width:none}
  .wh-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){.wh-slide{transition:opacity .3s;transform:none}}
/* Contact: full-width banner image under the navbar */
.ct-banner{background:#000;padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))}
.ct-banner img{display:block;width:100%;height:auto;max-height:calc(100vh - var(--hdr));object-fit:contain;margin:0 auto}
.ct-head{padding-top:clamp(36px,5vw,64px)}