
:root{--purple:#5d1cb4;--dark:#251047;--lav:#f4f0ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#faf9ff;color:#251047;font-family:Montserrat,Arial,sans-serif}button,a{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.shell{max-width:1200px;margin:auto;padding:0 30px}.top{position:sticky;top:0;background:#fffefefa;backdrop-filter:blur(12px);z-index:20;box-shadow:0 2px 16px #27164b14}.top-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand img{width:190px;max-height:56px;object-fit:contain}.navlinks{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}.navlinks a.active{color:#6b1ed2;border-bottom:3px solid #6b1ed2;padding-bottom:8px}.rightnav{display:flex;align-items:center;gap:12px}.flags{display:flex;align-items:center;gap:9px}.flags button{padding:4px;border:2px solid transparent;background:transparent;border-radius:7px;display:flex}.flags button.active{border-color:#8d42ed}.flags img{width:22px;height:15px;object-fit:cover;border-radius:2px}.cta{background:linear-gradient(110deg,#7429d4,#3b1179);color:white;padding:12px 19px;border-radius:12px;font-size:13px;font-weight:700}.mobile-nav{display:none}.hero{min-height:295px;overflow:hidden;position:relative;background:linear-gradient(110deg,#21104a 0%,#48217c 55%,#9c81db 100%);color:white}.hero .shell{position:relative;z-index:2;padding-top:26px;padding-bottom:38px}.crumb{font-size:12px;margin-bottom:30px;opacity:.85}.eyebrow{color:#b780ff;font-weight:800;letter-spacing:2px;font-size:13px}.hero h1{font-size:clamp(40px,5vw,70px);line-height:1.04;letter-spacing:-2px;margin:9px 0}.hero .lead{font-size:19px;margin:0 0 12px}.hero .desc{font-size:14px;line-height:1.7;max-width:465px}.hero-art{position:absolute;inset:0 0 0 43%;background-size:cover;background-position:center;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);opacity:.88}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#52258d6b,transparent 50%)}.ribbon{position:absolute;z-index:1;right:6%;top:14%;width:55%;height:67%;border:3px solid #c8a6ff;border-radius:50px 140px 30px 110px;transform:skew(-22deg);filter:drop-shadow(0 0 9px #a36cff);pointer-events:none}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#eee8fd;border-radius:13px;margin:22px 0 38px;overflow:hidden}.tabs button{border:0;background:transparent;padding:17px 8px;font-size:13px;font-weight:700;color:#301450}.tabs button[aria-selected=true]{background:linear-gradient(120deg,#8629e7,#381075);color:#fff;border-radius:12px}.intro{position:relative;margin-bottom:22px}.intro:after{content:'P';position:absolute;right:30px;top:-32px;font-size:160px;font-weight:800;color:#e7dffc;opacity:.5;z-index:-1}.small{color:#7022ca;font-weight:800;font-size:13px}.intro h2{font-size:34px;margin:7px 0}.intro p{max-width:480px;line-height:1.55;margin:0;font-size:14px}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.service-card{position:relative;min-height:325px;border:1px solid white;border-radius:20px;overflow:hidden;background:linear-gradient(110deg,#fff 0%,#f2edff 70%,#d5c4fc);box-shadow:0 12px 30px #3e21721c;padding:24px;display:flex}.service-content{position:relative;z-index:2;width:60%}.number{color:#7320d3;font-size:18px;font-weight:800}.service-card h3{font-size:23px;line-height:1.15;margin:6px 0 12px}.service-card p{font-size:12px;line-height:1.5}.service-card ul{list-style:none;padding:0;margin:12px 0}.service-card li{font-size:11px;line-height:1.5;margin:6px 0;display:flex;gap:7px}.service-card li:before{content:'✓';border:1px solid #a364e9;color:#7626ce;width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}.service-card>img{position:absolute;right:0;top:0;width:48%;height:100%;object-fit:cover;clip-path:polygon(40% 0,100% 0,100% 100%,0 100%)}.arrowlink{display:inline-block;background:#e6d7fc;color:#6d24bd;border-radius:40px;padding:3px 16px;font-size:23px}.projects{margin:38px 0 32px}.sectionheading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}.sectionheading h2{font-size:30px;margin:5px 0}.arrows{display:flex;gap:8px}.arrows button{width:40px;height:40px;border-radius:50%;background:white;border:1px solid #d4c2ef;color:#5920a5;font-size:22px}.track{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}.track::-webkit-scrollbar{display:none}.project{position:relative;flex:0 0 270px;height:176px;overflow:hidden;border-radius:14px;scroll-snap-align:start;background:#26143d;color:white}.project img{width:100%;height:100%;object-fit:cover}.project .overlay{position:absolute;inset:auto 0 0;padding:35px 13px 12px;background:linear-gradient(transparent,#100b20ec)}.project strong{font-size:14px}.project small{display:block;margin-top:4px;font-size:10px}.reels{margin:30px 0 55px}.reel{flex:0 0 min(480px,85vw);scroll-snap-align:start;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 8px 25px #27164b14}.reel video,.reel iframe{width:100%;aspect-ratio:16/9;border:0;background:#1a1230;display:block}.reel h3{font-size:15px;margin:12px 16px 16px}.contactbar{position:fixed;right:12px;top:45%;z-index:19;background:linear-gradient(#8036d4,#511a9d);border-radius:15px;box-shadow:0 6px 20px #2c105b4a;display:flex;flex-direction:column}.contactbar a{padding:12px;color:white;font-size:20px;border-bottom:1px solid #ffffff33}.contactbar a:last-child{border:0}.foot{background:#32115e;color:white;padding:27px 0}.footinner{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}.foot img{width:175px}.foot p{font-size:12px}.foot a{font-size:13px}.foot .address{font-size:11px;max-width:270px}.note{color:#786c8b;font-size:11px;margin:10px 0 22px}.menu{display:none}
@media(max-width:850px){.shell{padding:0 18px}.navlinks{gap:12px;font-size:12px}.brand img{width:150px}.cta{display:none}.hero-art{left:40%;opacity:.5}.ribbon{width:65%}.tabs{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:1fr}.service-card{min-height:290px}}@media(max-width:570px){.top-inner{height:64px}.navlinks{display:none}.menu{display:block;background:none;border:0;font-size:25px;color:#4c168f}.mobile-nav.show{display:flex;flex-direction:column;gap:15px;padding:15px 25px;background:white}.hero{min-height:320px}.hero-art{left:30%;opacity:.25}.hero .shell{padding-top:20px}.hero h1{font-size:45px}.hero .desc{max-width:330px}.tabs button{font-size:11px;padding:14px 6px}.intro h2{font-size:28px}.service-content{width:67%}.service-card>img{width:48%;opacity:.8}.service-card h3{font-size:20px}.service-card{padding:18px}.sectionheading h2{font-size:24px}.project{flex-basis:245px}.footinner{align-items:flex-start;flex-direction:column}.contactbar{right:5px}.contactbar a{padding:10px;font-size:16px}}

/* PIXELBOX V1.5 — image masking, gradients and responsive refinement */
.hero{isolation:isolate;background:linear-gradient(112deg,#211046 0%,#442078 54%,#8661c7 100%)}
.hero .shell{z-index:5}.hero .desc,.hero .lead,.hero h1{position:relative;max-width:460px;text-shadow:0 2px 10px #17093322}
.hero-art{inset:0 0 0 42%;clip-path:none;opacity:1;background-position:center;background-size:cover;mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%)}
.hero-art:after{background:linear-gradient(90deg,#4b24887a,transparent 52%),linear-gradient(0deg,#24104455,transparent 55%)}
.ribbon{pointer-events:none;transform:none;filter:none;border:0}.ribbon-back{right:8%;top:12%;width:47%;height:71%;border:3px solid #c99dff;border-radius:65px 110px 50px 110px;transform:skew(-22deg);box-shadow:0 0 20px #a55bff99,inset 0 0 15px #b57cff4a;opacity:.85}.ribbon-front{right:-9%;top:54%;width:40%;height:75%;border:2px solid #caaaffaa;border-radius:120px 50px 110px 45px;transform:skew(-22deg);opacity:.5}
.tabs{background:linear-gradient(90deg,#f3edff,#ebe5fc);box-shadow:0 5px 20px #41207512}.tabs button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;transition:background .2s,color .2s}.tab-icon{font-size:24px;font-weight:500;line-height:1}.tab-label{font-size:12px;line-height:1.35}.tabs button:focus-visible,.arrows button:focus-visible,.flags button:focus-visible{outline:3px solid #a66cff;outline-offset:2px}
.intro:after{content:'❯';font-size:145px;opacity:.17;right:9%;top:-38px;color:#9064da}.intro h2{font-size:33px}
.service-card{padding:25px;min-height:338px;isolation:isolate;background:linear-gradient(112deg,#fff 0%,#f9f6ff 47%,#ece2ff 100%);box-shadow:0 12px 34px #4020731c;transition:transform .2s,box-shadow .2s}
.service-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px #40207329}
.service-content{width:62%;position:relative;z-index:3}.service-card h3{font-size:21px;line-height:1.16;overflow-wrap:anywhere}.service-card p{font-size:11.5px}.service-card li{font-size:10.5px}
.service-media{position:absolute;right:0;top:0;bottom:0;width:46%;overflow:hidden;border-radius:0 20px 20px 0;isolation:isolate;mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 100%)}
.service-media:before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#d9c5f07a 0%,transparent 44%),linear-gradient(0deg,#b99ce62a,transparent 60%);pointer-events:none}
.service-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;clip-path:none;transform:scale(1.01)}
.service-card:nth-child(3):last-child{grid-column:1 / -1;min-height:230px}.service-card:nth-child(3):last-child .service-content{width:68%}.service-card:nth-child(3):last-child .service-media{width:32%}
.projects{margin-top:50px}.project{flex:0 0 285px;height:184px}.project img{transition:transform .3s}.project:hover img{transform:scale(1.04)}
.reel{flex:0 0 min(440px,85vw)}.video-frame{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#29104e,#58319b);overflow:hidden}.video-frame iframe,.video-frame video{width:100%;height:100%;display:block;border:0;object-fit:cover}.video-load{border:0;width:100%;height:100%;background:radial-gradient(circle at 70% 25%,#8652d2,#29104e 72%);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;padding:20px;font-weight:700;font-size:14px}.play-icon{width:62px;height:62px;border:2px solid #ffffffbb;border-radius:50%;display:grid;place-items:center;font-size:24px;padding-left:4px;box-shadow:0 0 24px #bd87f388}.video-load:hover .play-icon{background:#ffffff22}
@media(max-width:850px){.hero-art{left:35%;opacity:.8}.service-content{width:65%}.service-media{width:44%}.tabs button{gap:5px;padding:12px 6px}.tab-icon{font-size:20px}}
@media(max-width:570px){.hero-art{left:8%;opacity:.35;mask-image:linear-gradient(to right,transparent,#000 70%);-webkit-mask-image:linear-gradient(to right,transparent,#000 70%)}.hero .desc,.hero .lead{max-width:330px}.ribbon-back{right:-12%;width:75%}.tabs{grid-template-columns:repeat(2,1fr)}.tabs button{min-height:65px}.tab-label{font-size:11px}.service-card{padding:19px;min-height:350px}.service-content{width:76%}.service-media{width:41%;opacity:.5}.service-card:nth-child(3):last-child{grid-column:auto;min-height:350px}.service-card:nth-child(3):last-child .service-content{width:76%}.service-card:nth-child(3):last-child .service-media{width:41%}.service-card h3{font-size:19px}.service-card li{font-size:10px}.service-card p{font-size:11px}.project{flex-basis:245px}.intro:after{font-size:100px;right:0}}

/* V1.6 — match approved editorial art direction, rounded flag icons, photographic video posters */
.flags{gap:8px}.flags button{padding:3px;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;border:2px solid transparent;transition:transform .18s,border-color .18s}.flags button:hover{transform:translateY(-2px)}.flags button.active{border-color:#852ce4;box-shadow:0 0 0 2px #ebdcff}.flags img{width:23px;height:23px;aspect-ratio:1;border-radius:50%;object-fit:cover;display:block;box-shadow:0 1px 3px #23104433}
.hero{min-height:310px;background:radial-gradient(ellipse at 35% 70%,#7045ae 0%,transparent 60%),linear-gradient(105deg,#241044 0%,#422078 55%,#6f4eab 100%)}
.hero .shell{padding-top:27px;padding-bottom:42px}.hero .desc{max-width:445px}.hero-art{inset:0 0 0 40%;background-position:center 53%;opacity:1;clip-path:polygon(19% 0,100% 0,100% 100%,0 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%)}
.hero-art:after{background:linear-gradient(90deg,#4a25894d,transparent 52%),linear-gradient(0deg,#24104444,transparent 55%)}
.brand-ribbon{position:absolute;z-index:3;right:-2%;top:4%;width:65%;height:103%;pointer-events:none;opacity:.96}.brand-ribbon svg{width:100%;height:100%;overflow:visible}
.intro:after{content:' ';width:230px;height:155px;right:10px;top:-20px;opacity:.14;background:linear-gradient(125deg,#8e61db,#a98de5);clip-path:polygon(0 20%,73% 20%,100% 85%,38% 85%,25% 55%,12% 55%);border-radius:40px}
.service-card{min-height:350px;background:linear-gradient(105deg,#ffffff 0%,#faf8ff 44%,#e9dffd 100%);border:1px solid #fff;box-shadow:0 12px 30px #36155b20}
.service-content{width:61%;z-index:4}.service-media{width:49%;border-radius:0 20px 20px 0;opacity:1;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 100%)}
.service-media img{object-fit:cover;object-position:50% 45%;transform:none}.service-media:before{background:linear-gradient(90deg,#e9dff966 0%,transparent 52%)}
.service-card:nth-child(3):last-child .service-media{width:37%}.service-card:nth-child(3):last-child .service-content{width:69%}
.service-card h3{font-size:22px;overflow-wrap:normal}.service-card p{line-height:1.55}.service-card li{line-height:1.6}
.video-frame{background:#ddd0ef}.video-load{position:relative;display:block;padding:0;overflow:hidden;background-image:var(--local-poster);background-size:cover;background-position:center}.video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}.video-load:hover .video-thumb{transform:scale(1.05)}.video-shade{position:absolute;inset:0;background:linear-gradient(0deg,#12082077,transparent 60%)}.video-load .play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#24104499;backdrop-filter:blur(5px);width:62px;height:62px;border:2px solid #fff;box-shadow:0 3px 18px #17072d66}.video-load:hover .play-icon{background:#6d27c8cc}
@media(max-width:850px){.hero-art{left:35%}.brand-ribbon{width:75%;right:-13%}.service-media{width:46%}}
@media(max-width:570px){.flags{gap:2px}.flags button{width:28px;height:28px;padding:2px}.flags img{width:20px;height:20px}.hero-art{left:8%;opacity:.35;clip-path:none}.brand-ribbon{right:-25%;width:95%;opacity:.6}.service-card{min-height:350px}.service-content{width:74%}.service-media{width:43%;opacity:.68}.service-card:nth-child(3):last-child .service-media{width:43%}.service-card:nth-child(3):last-child .service-content{width:74%}}

/* V1.7 — approved ribbon imagery: artwork is contained inside the logo-shaped ribbon,
   with a softly glowing outline. No harsh diagonal rectangular crop. */
.hero{min-height:340px;background:
  radial-gradient(ellipse at 48% 65%,#7040b2 0%,transparent 54%),
  linear-gradient(108deg,#241046 0%,#432077 57%,#5b3198 100%);}
.hero .shell{padding-top:28px;padding-bottom:50px}
.hero-art{
  inset:6% -1% 0 36%;opacity:1;background-position:center 54%;
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,22% 56%,0 56%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%);
}
.hero-art:after{background:linear-gradient(90deg,#4b248c88 0%,transparent 47%),linear-gradient(0deg,#2e0c5850,transparent 65%)}
.brand-ribbon{right:-1%;top:5%;width:66%;height:105%;filter:drop-shadow(0 0 8px #ad64ff)}
.brand-ribbon svg{overflow:visible}
.hero h1,.hero .lead,.hero .desc{max-width:465px}
.service-card{min-height:365px;background:linear-gradient(108deg,#fff 0%,#f9f5ff 48%,#e5d7fa 100%)}
.service-media{
  width:49%;border-radius:0 19px 19px 0;
  -webkit-mask-image:none;mask-image:none;
  clip-path:polygon(36% 0,100% 0,100% 100%,0 100%,10% 78%,14% 58%,22% 30%);
}
.service-media img{object-fit:cover;object-position:center center}
.service-media:before{background:linear-gradient(90deg,#e9dafa55 0%,transparent 55%)}
.service-card:after{content:"";pointer-events:none;position:absolute;z-index:2;right:25%;top:-10%;width:21%;height:125%;transform:rotate(15deg);background:linear-gradient(90deg,transparent,#c79bff2e,transparent);filter:blur(12px)}
.service-content{width:61%}
.reel{flex-basis:min(360px,85vw)}
.video-load{background:#ded2ee}
.video-thumb{object-fit:cover;object-position:center}
.video-load .play-icon{width:54px;height:54px}
@media(max-width:850px){
 .hero-art{left:34%}.brand-ribbon{width:77%;right:-12%}
 .service-media{width:47%}
}
@media(max-width:570px){
 .hero-art{left:9%;opacity:.3;clip-path:none}
 .brand-ribbon{right:-28%;width:95%;opacity:.58}
 .service-media{width:45%;opacity:.65;clip-path:polygon(42% 0,100% 0,100% 100%,0 100%,19% 67%)}
 .service-content{width:76%}
}
