/* Mr. Pages - editorial storefront. Graphics are CSS-built and use no image payload. */
html[data-view=choose]{--portal-ink:#eef3ff}
html[data-view=choose] body{background:#070b18;color:var(--portal-ink)}
html[data-view=choose] .site-header{background:rgba(7,11,24,.84);border-bottom:1px solid rgba(185,202,255,.11)}
html[data-view=choose] .ambient-grid{opacity:.08}
html[data-view=choose] .ambient-glow{opacity:.35}
html[data-view=choose] .header-caption{color:#8192b8}
html[data-view=choose] .site-header .brand{position:relative;z-index:1}
html[data-view=choose] .site-header .header-inner{height:78px}
.portal{position:relative;isolation:isolate;padding-block:54px 38px;overflow:hidden}
.portal::before{content:"";position:absolute;z-index:-1;top:-250px;inset-inline-start:30%;width:800px;height:700px;pointer-events:none;background:radial-gradient(ellipse,rgba(82,75,212,.19),transparent 62%)}
.portal::after{content:"";position:absolute;z-index:-1;top:340px;inset-inline-end:-360px;width:700px;height:650px;pointer-events:none;background:radial-gradient(ellipse,rgba(227,106,100,.08),transparent 67%)}
.portal-layout{display:grid;grid-template-areas:'copy art';grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);align-items:center;gap:clamp(24px,4.2vw,72px);min-height:545px}
.portal-copy{grid-area:copy;position:relative;z-index:2;max-width:700px}
.portal-eyebrow{display:inline-flex;align-items:center;gap:11px;color:#a8b6d4;font:800 .68rem/1.4 Manrope,Tajawal,sans-serif;letter-spacing:.16em}
.portal-live-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#e9a46f;box-shadow:0 0 0 5px rgba(233,164,111,.12),0 0 22px rgba(233,164,111,.6)}
.portal h1{font-size:clamp(3.5rem,5.3vw,6.4rem);line-height:1.12;letter-spacing:-.065em;margin:26px 0 22px;max-width:750px;text-wrap:balance}
.portal h1 span,.portal h1 em{display:block;animation:portal-rise .8s cubic-bezier(.18,.8,.2,1) both}
.portal h1 em{color:#f0ad8e;background:linear-gradient(105deg,#f4b48f 8%,#f1a4a9 52%,#aaa8ff 95%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation-delay:.12s}
.portal-question{color:#acb9d2;font-size:clamp(1.02rem,1.45vw,1.2rem);font-weight:500;line-height:1.85;max-width:560px;margin:0 0 33px}
.portal-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.portal-start{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-width:200px;min-height:58px;padding:13px 22px;background:#f2b196;color:#24121b;border:1px solid #f9d3c1;border-radius:14px;font-weight:800;font-size:.96rem;box-shadow:0 14px 38px rgba(243,151,139,.2);transition:transform .25s,box-shadow .25s,background .25s}
.portal-start:hover,.portal-start:focus-visible{transform:translateY(-3px);background:#ffd0b9;box-shadow:0 19px 42px rgba(243,151,139,.28);text-decoration:none}
.portal-start .icon{width:19px;height:19px}
.portal-action-note{display:flex;align-items:center;gap:11px;color:#8c9abc;font:700 .7rem Manrope,Tajawal,sans-serif;letter-spacing:.07em}
.portal-action-line{width:28px;height:1px;background:#8492bc}
.portal-art{grid-area:art;height:min(500px,41vw);min-height:410px;position:relative;display:grid;place-items:center;perspective:1200px}
.portal-orbit{position:absolute;border:1px solid rgba(154,177,236,.14);border-radius:50%;pointer-events:none;transform:rotate(-28deg)}
.portal-orbit-one{width:95%;height:75%}.portal-orbit-two{width:112%;height:94%;border-style:dashed;opacity:.65}
.portal-orbit-one::after{content:"";position:absolute;top:9%;left:13%;width:9px;height:9px;border-radius:50%;background:#a79bff;box-shadow:0 0 20px #a79bff}
.portal-visual{position:relative;width:min(91%,510px);height:73%;min-height:322px;overflow:hidden;border:1px solid rgba(182,200,255,.36);border-radius:22px;background:radial-gradient(circle at 78% 8%,rgba(188,170,255,.34),transparent 42%),linear-gradient(145deg,#17234c,#242b64 51%,#554078);box-shadow:0 35px 80px #020513a8,0 0 0 8px rgba(145,161,236,.035),inset 0 1px rgba(255,255,255,.26);transform:rotate(-7deg) rotateY(9deg);animation:visual-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.portal-visual::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 22%,rgba(255,255,255,.075) 40%,transparent 54%);mix-blend-mode:screen}
.portal-visual::after{content:"";position:absolute;left:-10%;right:-20%;bottom:-45%;height:75%;border:1px solid rgba(255,204,198,.24);border-radius:50%;transform:rotate(-18deg);box-shadow:0 -30px 100px rgba(255,125,130,.17)}
.visual-top{height:49px;padding:0 21px;display:flex;align-items:center;gap:12px;position:relative;z-index:1;border-bottom:1px solid rgba(255,255,255,.15);font:700 .65rem Manrope,sans-serif;letter-spacing:.09em}
.visual-top-mark{font-weight:800;font-size:1rem;letter-spacing:-.09em}.visual-top-mark span{font-size:.65rem;color:#f4bb99;padding:0 2px}
.visual-top-pills{display:flex;gap:5px;margin-inline:auto}.visual-top-pills i{width:5px;height:5px;border-radius:50%;background:#b9bee9;opacity:.7}.visual-top-pills i:first-child{background:#f4b597;opacity:1}
.visual-top-menu b{font-size:1rem;margin-inline-start:5px;color:#f8bfa5}
.visual-body{position:relative;z-index:1;height:calc(100% - 49px);padding:clamp(25px,4vw,46px);display:flex;flex-direction:column;align-items:flex-start;text-align:left;direction:ltr}
.visual-overline{color:#d0d4f6;font:800 .55rem Manrope,sans-serif;letter-spacing:.22em}
.visual-body strong{font:800 clamp(3.5rem,6vw,6.4rem)/.88 Manrope,sans-serif;letter-spacing:-.09em;margin-top:24px;white-space:nowrap;color:#f4efff}
.visual-body strong em{color:#ffb7a2}.visual-body strong em span{color:#fae2af}
.visual-stroke{position:absolute;right:12%;top:19%;width:130px;height:130px;border:1px solid rgba(248,207,195,.25);border-radius:50%;box-shadow:0 0 0 28px rgba(248,207,195,.035),0 0 0 55px rgba(248,207,195,.025)}
.visual-bottom-copy{margin-top:auto;color:#d7d3f1;font:700 .58rem Manrope,sans-serif;letter-spacing:.2em}
.visual-seal{position:absolute;bottom:25px;right:29px;width:75px;height:75px;display:grid;place-content:center;border:1px solid rgba(255,231,223,.5);border-radius:50%;transform:rotate(16deg);font:800 .75rem/.9 Manrope,sans-serif;letter-spacing:-.04em;text-align:center;color:#ffdbc9}.visual-seal b{font-size:.7rem;margin-top:6px}
.visual-float{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;border:1px solid rgba(196,206,250,.3);background:rgba(16,23,51,.88);box-shadow:0 18px 42px #02071378,inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#c4cce5;font:600 .64rem/1.5 Manrope,sans-serif;letter-spacing:.03em;direction:ltr;text-align:left}
.visual-float b{color:#fff;font-size:.75rem}.visual-float-one{top:7%;right:-2%;padding:12px 17px;border-radius:13px;transform:rotate(5deg);animation:float-a 6s ease-in-out infinite}.float-symbol{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:#f9b79a;color:#422249;font-size:1.4rem}
.visual-float-two{left:-4%;bottom:4%;padding:12px 16px;border-radius:13px;transform:rotate(5deg);animation:float-b 7s ease-in-out infinite}.float-graph{height:38px;width:43px;display:flex;align-items:flex-end;gap:4px}.float-graph i{width:7px;height:40%;border-radius:3px 3px 0 0;background:#aaa7ff}.float-graph i:nth-child(2){height:65%;background:#c5b3fa}.float-graph i:nth-child(3){height:52%;background:#e5b0c7}.float-graph i:nth-child(4){height:95%;background:#f5ae95}
.visual-spark{position:absolute;color:#ffbd9d;font-size:1.4rem;animation:spark-turn 22s linear infinite}.visual-spark-one{left:8%;top:5%}.visual-spark-two{right:8%;bottom:7%;font-size:.9rem;animation-duration:16s}
.portal-services{position:relative;padding-top:72px;scroll-margin-top:90px}
.portal-services::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(181,199,255,.32),transparent)}
.portal-services-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:25px}
.portal-section-number{color:#f2ad92;font:800 .68rem Manrope,sans-serif;letter-spacing:.2em}
.portal-services h2{font-size:clamp(1.7rem,3vw,2.8rem);letter-spacing:-.04em;margin-top:8px}
.portal-services-heading p{max-width:290px;color:#8f9ebe;font-size:.88rem;line-height:1.7}
.service-entry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;perspective:none}
.service-entry{--entry-accent:#a6a4ff;position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:290px;text-align:start;isolation:isolate;overflow:hidden;padding:20px;border:1px solid rgba(170,188,239,.2);border-radius:22px;background:linear-gradient(145deg,rgba(44,56,105,.64),rgba(13,20,43,.96) 66%);box-shadow:inset 0 1px rgba(255,255,255,.08),0 17px 40px rgba(2,6,21,.15);transform:none;transition:transform .36s cubic-bezier(.2,.8,.2,1),border-color .36s,box-shadow .36s}
.service-entry::before{content:"";position:absolute;inset:-35% -35% auto auto;width:95%;height:95%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--entry-accent),transparent 75%),transparent 69%);z-index:-1;transition:transform .5s,opacity .5s;opacity:.6}
.service-entry:hover,.service-entry:focus-visible{transform:translateY(-7px);border-color:color-mix(in srgb,var(--entry-accent),transparent 34%);box-shadow:0 25px 48px #02081775,inset 0 1px rgba(255,255,255,.16)}
.service-entry:hover::before{transform:scale(1.32);opacity:1}
.service-entry:focus-visible{outline:2px solid #f9c5ab;outline-offset:3px}
.service-entry-web{--entry-accent:#f1b08f}.service-entry-slides{--entry-accent:#9de0d1}.service-entry-projects{--entry-accent:#c7a8f1}
.entry-index{width:100%;display:flex;justify-content:space-between;align-items:center;color:var(--entry-accent);font:800 .68rem Manrope,sans-serif;letter-spacing:.13em}.entry-index span{font-size:1.25rem;line-height:1;font-weight:400}
.entry-graphic{position:relative;display:grid;place-items:center;width:100%;height:118px;margin:4px 0 13px}
.entry-graphic-core{position:relative;z-index:2;width:65px;height:65px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--entry-accent),transparent 35%);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--entry-accent),transparent 78%),rgba(255,255,255,.025));box-shadow:0 13px 32px color-mix(in srgb,var(--entry-accent),transparent 83%),inset 0 1px rgba(255,255,255,.2);color:var(--entry-accent);transform:rotate(-10deg);transition:transform .4s}
.entry-graphic-core .icon{width:31px;height:31px;stroke-width:1.5}.service-entry:hover .entry-graphic-core{transform:rotate(0deg) scale(1.12)}
.entry-graphic i{position:absolute;width:115px;height:65px;border:1px solid color-mix(in srgb,var(--entry-accent),transparent 78%);border-radius:50%;transform:rotate(-24deg)}.entry-graphic i:last-child{width:150px;height:90px;transform:rotate(29deg);opacity:.55}
.service-entry .persona-card-copy{display:block;position:relative;z-index:2;width:100%;margin-top:auto}
.service-entry .persona-card-copy strong{display:block;color:#f1f3ff;font-size:clamp(1.08rem,1.5vw,1.38rem);line-height:1.35;letter-spacing:-.02em}
.service-entry .persona-card-copy small{display:block;color:#a4b0ce;font-size:.8rem;line-height:1.5;margin-top:7px}
.service-entry .persona-arrow{position:absolute;bottom:19px;inset-inline-end:18px;width:25px;height:25px;display:grid;place-items:center;color:var(--entry-accent);opacity:0;transform:translateX(7px);transition:opacity .25s,transform .25s}.service-entry:hover .persona-arrow,.service-entry:focus-visible .persona-arrow{opacity:1;transform:translateX(0)}.service-entry .persona-arrow .icon{width:18px;height:18px}
.portal-quick{display:flex;align-items:center;gap:13px;flex-wrap:wrap;min-height:66px;margin-top:17px;padding:13px 19px;border:1px solid rgba(169,186,239,.16);border-radius:16px;background:rgba(46,58,101,.22);color:#b7c3dc;font-size:.88rem}.portal-quick-star{color:#f5b49a;font-size:1.4rem;line-height:1}
.portal-cv-link{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto;color:#f7c0a8;font-weight:800;font-size:.86rem;text-decoration:none}.portal-cv-link:hover,.portal-cv-link:focus-visible{color:#ffe0d2;text-decoration:underline;text-underline-offset:4px}.portal-cv-link .icon{width:16px;height:16px}
.portal-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:38px;padding-top:21px;border-top:1px solid rgba(169,186,239,.12);color:#7181a3;font:700 .64rem Manrope,sans-serif;letter-spacing:.08em}.portal-bottom a{display:inline-flex;align-items:center;gap:8px;color:#a5b3d2;letter-spacing:0}.portal-bottom .icon{width:16px;height:16px}.portal-bottom a:hover{color:#f2b196}
.header-controls .account-trigger{background:#f2b196;border:1px solid #f7c9b6;color:#24131d;box-shadow:0 8px 25px rgba(225,143,123,.14);font-weight:800;transition:transform .2s,background .2s}.header-controls .account-trigger:hover,.header-controls .account-trigger:focus-visible{background:#ffd0b9;transform:translateY(-2px)}
.account-dialog{width:min(500px,calc(100vw - 28px));border:1px solid rgba(168,183,237,.34);border-radius:25px;background:radial-gradient(circle at 85% 0%,rgba(120,105,216,.18),transparent 45%),#10182f;box-shadow:0 32px 100px #020713c9;color:#f4f6ff}.account-panel h2{font-size:clamp(2rem,4vw,2.5rem);letter-spacing:-.035em}.account-panel input{border-radius:13px;background:#17233d;border-color:#52658c}.account-panel input:focus{border-color:#f1b08f;outline:2px solid rgba(241,176,143,.3);outline-offset:1px}.account-submit{border-radius:13px;background:linear-gradient(120deg,#edab90,#f5c2ab);color:#24131d;box-shadow:0 12px 27px rgba(225,143,123,.23)}.account-orders a{border-color:rgba(168,183,237,.28);border-radius:13px;background:rgba(255,255,255,.035)}
[data-theme=light] html[data-view=choose] body,html[data-theme=light][data-view=choose] body{background:#f7f5f1;color:#19223d}
html[data-theme=light][data-view=choose] .site-header{background:rgba(250,248,245,.86);border-color:#d9dce8}html[data-theme=light][data-view=choose] .header-caption{color:#536481}
[data-theme=light] .portal-eyebrow,[data-theme=light] .portal-question,[data-theme=light] .portal-action-note{color:#586782}[data-theme=light] .portal h1 span{color:#18233e}[data-theme=light] .portal-services-heading p{color:#5e6b83}[data-theme=light] .portal-services::before{background:linear-gradient(90deg,transparent,#b6bfd6,transparent)}
[data-theme=light] .service-entry{background:linear-gradient(145deg,#fff,#f2f0f5);border-color:#d7d9e8;box-shadow:0 16px 40px #282c4a17}[data-theme=light] .service-entry .persona-card-copy strong{color:#1b2946}[data-theme=light] .service-entry .persona-card-copy small{color:#56647e}[data-theme=light] .portal-quick{background:#fff;border-color:#d8dce8;color:#40536f}[data-theme=light] .portal-bottom{border-color:#d8dce8;color:#687895}[data-theme=light] .portal-bottom a{color:#405475}[data-theme=light] .account-dialog{background:#fff;color:#19223d}
@keyframes portal-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes visual-enter{from{opacity:0;transform:translateY(35px) rotate(-13deg) rotateY(14deg) scale(.92)}to{opacity:1;transform:translateY(0) rotate(-7deg) rotateY(9deg) scale(1)}}
@keyframes float-a{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes float-b{50%{transform:translateY(10px) rotate(7deg)}}@keyframes spark-turn{to{transform:rotate(360deg)}}
@media(max-width:1080px){.portal-layout{grid-template-columns:1fr 1fr;gap:20px}.portal h1{font-size:clamp(3.4rem,6vw,5.4rem)}.portal-art{min-height:350px}.portal-visual{min-height:290px}.visual-body strong{font-size:clamp(3.2rem,6vw,5.3rem)}.service-entry-grid{gap:10px}.service-entry{padding:16px;min-height:265px}}
@media(max-width:800px){.portal{padding-top:34px}.portal-layout{grid-template-columns:1fr;grid-template-areas:'copy' 'art';gap:5px}.portal-copy{max-width:670px}.portal-art{height:440px;min-height:0;max-width:610px;width:100%;margin:auto}.portal-visual{height:75%;min-height:0}.visual-body strong{font-size:clamp(4.5rem,11vw,6rem)}.portal-services{padding-top:38px}.service-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.service-entry{min-height:245px}.entry-graphic{height:93px}.portal-services-heading{align-items:start}}
@media(max-width:600px){html[data-view=choose] .site-header .header-inner{height:65px}.portal{width:calc(100% - 36px);padding-top:34px;padding-bottom:28px}.portal-eyebrow{font-size:.58rem;letter-spacing:.11em}.portal h1{font-size:clamp(2.85rem,11vw,4.5rem);line-height:1.16;margin:19px 0 14px;letter-spacing:-.055em}.portal-question{font-size:.99rem;line-height:1.7;margin-bottom:23px}.portal-actions{gap:13px}.portal-start{min-height:49px;min-width:178px;padding:10px 16px;font-size:.87rem;border-radius:12px}.portal-action-note{font-size:.6rem}.portal-art{height:330px;margin:18px auto 2px}.portal-visual{width:84%;height:74%;border-radius:16px;transform:rotate(-7deg) rotateY(0)}.visual-top{height:35px;padding:0 12px}.visual-body{height:calc(100% - 35px);padding:23px}.visual-overline{font-size:.43rem}.visual-body strong{font-size:clamp(3.25rem,13vw,5rem);margin-top:18px}.visual-bottom-copy{font-size:.45rem}.visual-seal{width:52px;height:52px;right:15px;bottom:16px;font-size:.53rem}.visual-stroke{width:75px;height:75px}.visual-float{font-size:.48rem;gap:7px}.visual-float b{font-size:.55rem}.visual-float-one{right:0;top:4%;padding:7px 9px}.float-symbol{width:25px;height:25px;font-size:1rem;border-radius:7px}.visual-float-two{left:0;bottom:6%;padding:7px 9px}.float-graph{width:27px;height:27px;gap:2px}.float-graph i{width:5px}.portal-services{padding-top:31px}.portal-services-heading{display:block;margin-bottom:18px}.portal-services h2{font-size:1.75rem}.portal-services-heading p{margin-top:5px;font-size:.82rem}.service-entry-grid{gap:9px}.service-entry{min-height:204px;padding:13px;border-radius:15px}.entry-index{font-size:.54rem}.entry-index span{font-size:1rem}.entry-graphic{height:73px;margin:0 0 8px}.entry-graphic-core{width:46px;height:46px;border-radius:13px}.entry-graphic-core .icon{width:23px;height:23px}.entry-graphic i{width:85px;height:50px}.entry-graphic i:last-child{width:105px;height:65px}.service-entry .persona-card-copy strong{font-size:1.01rem}.service-entry .persona-card-copy small{font-size:.68rem;line-height:1.38;margin-top:4px}.service-entry .persona-arrow{display:none}.portal-quick{gap:8px;padding:12px;font-size:.75rem;line-height:1.45}.portal-cv-link{margin-inline-start:0;width:100%;font-size:.79rem}.portal-bottom{margin-top:25px;font-size:.54rem;flex-wrap:wrap;gap:9px}.portal-bottom .icon{width:13px;height:13px}.header-controls .account-trigger{padding:.5rem .62rem;font-size:.75rem}}
@media(max-width:380px){.portal{width:calc(100% - 28px)}.portal h1{font-size:2.76rem}.portal-art{height:285px}.visual-body{padding:18px}.visual-body strong{font-size:3rem}.service-entry{min-height:190px;padding:11px}.service-entry .persona-card-copy strong{font-size:.91rem}.service-entry .persona-card-copy small{font-size:.64rem}}
@media(prefers-reduced-motion:reduce){.portal h1 span,.portal h1 em,.portal-visual,.visual-float,.visual-spark{animation:none!important}.portal-start,.service-entry,.entry-graphic-core,.header-controls .account-trigger{transition:none!important}}
[data-motion=off] .portal h1 span,[data-motion=off] .portal h1 em,[data-motion=off] .portal-visual,[data-motion=off] .visual-float,[data-motion=off] .visual-spark{animation:none!important}

