:root{--paper:#fcfbff;--ink:#201b2e;--muted:#736d80;--purple:#7947d5;--lavender:#eee6fa;--line:#e5dfed;--white:#fff;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:6px}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;height:108px;border-bottom:1px solid var(--line)}.brand img{object-fit:contain;filter:brightness(0)}.header nav{display:flex;gap:36px;font-size:14px}.header nav a:hover{color:var(--purple)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;background:var(--ink);color:white;padding:16px 18px 16px 25px;border-radius:99px;font-size:14px;font-weight:500;transition:transform .25s,background .25s}.button span{font-size:23px;line-height:1}.button:hover{background:var(--purple);transform:translateY(-3px)}.button.small{padding:12px 18px;gap:26px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:710px;padding-block:60px 74px;gap:40px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;display:block}.hero .eyebrow{display:flex;align-items:center;gap:10px}.dot{height:7px;width:7px;background:var(--purple);border-radius:50%}h1,h2,h3{font-family:'Manrope',sans-serif}h1{font-size:clamp(56px,5.8vw,84px);line-height:1.08;letter-spacing:-5px;font-weight:600;margin:27px 0 24px}h1>span{color:var(--purple)}.hero-copy>p{font-size:17px;line-height:1.65;color:var(--muted);margin-bottom:31px}.hero-foot{display:flex;align-items:center;gap:15px;margin-top:42px;font-size:11px;color:var(--muted)}.mini-icons{font-size:20px;color:var(--ink);border-right:1px solid var(--line);padding-right:15px}.showcase{position:relative;height:540px;isolation:isolate}.orbit{position:absolute;width:490px;height:490px;max-width:100%;top:20px;left:0;background:radial-gradient(circle,#e0cff8 0%,#f0eafa 55%,#f8f5fc 70%);border:1px solid #ebe2f6;border-radius:50%;z-index:-1}.phone{position:absolute;width:235px;border:6px solid #fff;border-radius:26px;overflow:hidden;box-shadow:0 25px 65px #42276b25;line-height:0;transition:transform .6s}.phone img{width:100%;height:auto}.phone-back{top:30px;left:14px;transform:rotate(-12deg);animation:float-back 7s ease-in-out infinite}.phone-front{right:30px;top:110px;transform:rotate(10deg);animation:float-front 7s ease-in-out infinite}.floating-label{position:absolute;z-index:3;border:1px solid #eee9f4;background:#ffffffed;border-radius:14px;padding:15px 20px;font-size:12px;box-shadow:0 12px 30px #3e265512;white-space:nowrap}.label-top{right:5px;top:32px;transform:rotate(5deg)}.label-bottom{bottom:12px;left:35px;transform:rotate(-5deg);display:flex;align-items:center;gap:10px}.purple-star{color:var(--purple);font-size:26px}.spark{position:absolute;right:6px;bottom:7px;font-size:90px;line-height:1;color:var(--purple)}.service-strip{border-block:1px solid var(--line);background:#f4f0fa}.service-strip>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:25px}.service-strip span{font-size:11px;letter-spacing:2px;font-weight:600}.service-strip i{color:var(--purple);font-size:23px;font-style:normal}.section{padding-block:100px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.section h2{font-size:clamp(34px,3.7vw,52px);font-weight:500;letter-spacing:-2.2px;line-height:1.17;margin:20px 0 0}.section-heading>p,.services p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:3px}.filters{display:flex;gap:9px;margin:38px 0 30px;flex-wrap:wrap}.filters button{background:transparent;border:1px solid var(--line);border-radius:30px;padding:11px 20px;font-size:12px;transition:background .25s,color .25s}.filters button.active{background:var(--ink);border-color:var(--ink);color:white}.filters span{opacity:.6;margin-left:7px;font-size:10px}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.project{display:block;text-align:left;border:0;padding:0;background:none;min-width:0}.project[hidden]{display:none}.project-visual{height:390px;border-radius:18px;position:relative;overflow:hidden;padding:65px 43px 0}.elite{background:#e8e3db}.moriahh{background:#ecdfe6}.academy{background:#e1e8e9}.project-tag{position:absolute;top:23px;left:23px;font-size:9px;letter-spacing:1.5px;font-weight:700}.project-visual img{display:block;width:100%;height:auto;border:4px solid #fff;border-radius:17px 17px 0 0;transform:rotate(-6deg);box-shadow:0 12px 30px #0002;transition:transform .65s cubic-bezier(.2,.75,.25,1)}.moriahh img{transform:rotate(6deg)}.project:hover .project-visual img{transform:rotate(0) translateY(-18px) scale(1.04)}.view-project{position:absolute;bottom:20px;right:20px;background:var(--white);padding:12px 18px;border-radius:30px;font-size:11px;box-shadow:0 4px 20px #0001}.project-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 0}.project-caption h3{font-size:15px;font-weight:700;margin:0 0 7px}.project-caption p{font-size:11px;color:var(--muted);margin:0}.round-arrow{border:1px solid var(--line);border-radius:50%;width:35px;height:35px;display:grid;place-items:center;flex-shrink:0}.portfolio-note{color:var(--muted);font-size:11px;margin:12px 0 0}.services{background:#f3eff9}.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.services h2 span{color:var(--purple)}.services-grid>div>p{margin-top:24px}.service-list details{border-bottom:1px solid #dbd3e7;padding:24px 0}.service-list details:first-child{border-top:1px solid #dbd3e7}.service-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font-size:20px;letter-spacing:-.6px;list-style:none}.service-list summary::-webkit-details-marker{display:none}.service-list p{max-width:350px;margin:17px 0 0}.plus:after{content:'+';font-size:25px;color:var(--purple)}details[open] .plus:after{content:'−'}.contact-card{padding:65px;text-align:center;border-radius:25px;background:#292039;color:white;position:relative;overflow:hidden}.contact-card .eyebrow{color:#c9b2e7}.contact-card h2{font-size:clamp(34px,4.4vw,60px);margin-bottom:30px}.contact-card em{font-style:normal;color:#c9a6fa}.button.light{background:white;color:var(--ink)}.button.light:hover{background:var(--lavender)}.contact-card p{font-size:11px;color:#c4b8d4;margin:22px 0 0}.contact-star{position:absolute;right:-20px;bottom:-65px;color:#ffffff08;font-size:300px;line-height:1;pointer-events:none}.footer{border-top:1px solid var(--line);display:flex;align-items:center;gap:30px;padding-block:30px;font-size:11px}.footer p{flex:1;color:var(--muted)}.footer>span{color:var(--muted)}.skip{position:fixed;top:10px;left:10px;padding:15px;background:white;z-index:10;transform:translateY(-150%)}.skip:focus{transform:none}.project-dialog{width:min(900px,calc(100% - 32px));max-height:90dvh;border:0;border-radius:22px;padding:40px;background:var(--paper);color:var(--ink)}.project-dialog::backdrop{background:#171020b3;backdrop-filter:blur(8px)}.project-dialog>img{display:block;width:min(100%,480px);height:auto;margin:30px auto 0;border-radius:16px}.dialog-copy{padding-right:35px}.dialog-copy h2{font-size:30px;letter-spacing:-1px}.dialog-copy p{line-height:1.6;color:var(--muted)}.capture-note{font-size:11px;color:var(--muted)}.close-dialog{position:sticky;top:0;float:right;width:40px;height:40px;border:1px solid var(--line);background:white;border-radius:50%;z-index:2}.motion-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.motion-ready .reveal.visible{opacity:1;transform:none}@keyframes float-back{50%{transform:translateY(-12px) rotate(-9deg)}}@keyframes float-front{50%{transform:translateY(12px) rotate(7deg)}}
@media(min-width:1000px){.hero-copy{animation:enter .8s both}.showcase{animation:enter 1s .15s both}}@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.hero{gap:20px;min-height:630px}h1{font-size:65px;letter-spacing:-4px}.phone{width:195px}.phone-back{left:0;top:55px}.phone-front{right:0;top:140px}.showcase{height:510px}.label-top{right:0}.label-bottom{left:0;bottom:0}.spark{font-size:65px}.project-visual{padding-inline:25px;height:330px}.services-grid{gap:40px}.projects{gap:18px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header{height:85px}.brand img{width:57px}.header nav{gap:16px;font-size:11px}.header .button{font-size:11px;padding:10px 14px;gap:12px}.header nav a:last-child{display:none}.hero{grid-template-columns:1fr;padding-top:48px;padding-bottom:35px;gap:25px}.hero-copy{text-align:center}.hero .eyebrow{justify-content:center;font-size:9px}h1{font-size:clamp(49px,12vw,76px);letter-spacing:-3px;margin-top:22px}.hero-copy>p{font-size:15px}.hero-foot{justify-content:center;margin-top:27px}.showcase{width:min(390px,100%);height:460px;margin:auto}.phone{width:185px}.phone-back{left:17px;top:25px}.phone-front{right:15px;top:90px}.orbit{height:350px;top:40px}.label-top{font-size:10px;padding:12px;top:8px}.label-bottom{bottom:20px;left:10px;font-size:11px;padding:10px 14px}.spark{bottom:20px;right:5px}.service-strip>div{gap:16px;padding-block:19px;justify-content:center;flex-wrap:wrap}.service-strip span{font-size:8px;letter-spacing:1px}.service-strip span:last-child,.service-strip i:last-of-type{display:none}.service-strip i{font-size:14px}.section{padding-block:65px}.section-heading{display:block}.section-heading>p{margin-top:20px;font-size:13px}.section h2{letter-spacing:-1.5px}.filters{gap:7px;margin-top:28px}.filters button{padding:10px 13px;font-size:11px}.projects{grid-template-columns:1fr;gap:20px}.project-visual{height:400px;padding:65px 65px 0}.project-caption h3{font-size:16px}.project-caption p{font-size:12px}.services-grid{grid-template-columns:1fr;gap:35px}.service-list summary{font-size:19px}.contact-card{padding:50px 20px;border-radius:20px}.contact-card h2{font-size:34px}.contact-star{font-size:200px}.footer{flex-wrap:wrap;gap:18px;font-size:10px}.footer p{flex-basis:60%}.footer>span{margin-left:auto}.project-dialog{padding:25px}.dialog-copy h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}

/* Complete phone mockups for the portfolio gallery. */
.project-visual{height:550px;padding:58px 30px 40px;display:flex;justify-content:center;align-items:center}
.device-mockup{position:relative;width:225px;max-width:85%;aspect-ratio:9/19.5;padding:6px;background:linear-gradient(115deg,#b7b6bd,#414047 18%,#aaa9b1 49%,#34333a 80%,#96959d);border:1px solid #77757e;border-radius:35px;box-shadow:18px 25px 35px #211a352b,0 2px 3px #fff9 inset;transform:rotate(-6deg);transition:transform .65s cubic-bezier(.2,.75,.25,1);flex-shrink:0}
.device-mockup:before,.device-mockup:after{content:'';position:absolute;background:#54525b;width:3px;border-radius:3px;left:-3px;top:88px;height:31px;box-shadow:0 42px 0 #54525b}
.device-mockup:after{left:auto;right:-3px;top:112px;height:48px;box-shadow:none}
.device-screen{height:100%;position:relative;overflow:hidden;border:4px solid #101014;border-radius:29px;background:#0b1014;padding-top:28px;padding-bottom:19px}
.device-camera{position:absolute;top:7px;left:50%;transform:translateX(-50%);height:13px;width:61px;border-radius:20px;background:#020204;z-index:1}
.device-camera:after{content:'';position:absolute;right:7px;top:4px;width:5px;height:5px;border-radius:50%;background:#162032;box-shadow:inset 0 0 2px #6b7197}
.project-visual .device-screen img{width:100%;height:100%;object-fit:cover;object-position:top;border:0;border-radius:0;box-shadow:none;transform:none}
.device-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);height:3px;width:65px;border-radius:4px;background:#ecebf1}
.moriahh .device-mockup{transform:rotate(6deg)}
.project:hover .device-mockup{transform:rotate(0) translateY(-8px)}
.project:hover .device-screen img{transform:none}
.view-project{z-index:2}
@media(min-width:701px) and (max-width:1050px){.project-visual{height:450px;padding-inline:16px}.device-mockup{width:180px;max-width:90%;border-radius:29px;padding:5px}.device-screen{border-radius:24px}}
@media(max-width:700px){.project-visual{height:550px;padding:60px 30px 40px}.device-mockup{width:225px}}

/* Open gallery: floating devices, without enclosing cards. */
.projects{gap:38px;align-items:start;padding-top:12px}
.project-visual{background:transparent;border-radius:0;overflow:visible;height:565px;padding:45px 20px 50px}
.project-tag{top:8px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--muted);font-size:9px;letter-spacing:2px}
.device-mockup{box-shadow:16px 28px 34px -12px #211a3538,0 2px 3px #fff9 inset;transform:translateY(5px) rotate(-9deg);transition:transform .8s cubic-bezier(.2,.75,.25,1),box-shadow .8s}
.moriahh .device-mockup{transform:translateY(25px) rotate(5deg)}
.academy .device-mockup{transform:translateY(5px) rotate(-5deg)}
.project:hover .device-mockup,.project:focus-visible .device-mockup{transform:translateY(-9px) rotate(0);box-shadow:12px 35px 42px -13px #49316a40,0 2px 3px #fff9 inset}
.view-project{bottom:10px;right:50%;transform:translateX(50%);white-space:nowrap;background:transparent;box-shadow:none;border-bottom:1px solid #d2c4e6;border-radius:0;padding:8px 0;color:var(--purple);transition:color .25s}
.project-caption{padding:22px 4px 15px;justify-content:center;text-align:center}
.project-caption .round-arrow{display:none}
.project-caption h3{font-size:16px}
.project-caption p{font-size:12px}
@media(min-width:701px) and (max-width:1050px){.projects{gap:22px}.project-visual{height:465px;padding:42px 12px 45px}.project-caption h3{font-size:14px}}
@media(max-width:700px){.projects{gap:30px}.project-visual{height:555px;padding:45px 20px 45px}.project-caption{padding-top:16px}.moriahh .device-mockup{transform:translateY(5px) rotate(7deg)}}
.project-visual{height:605px;padding-bottom:90px}
@media(min-width:701px) and (max-width:1050px){.project-visual{height:505px;padding-bottom:85px}}
@media(max-width:700px){.project-visual{height:595px;padding-bottom:85px}}

/* Hero devices share the portfolio's hardware finish. */
.showcase .phone{aspect-ratio:9/19.5;padding:6px;border:1px solid #77757e;border-radius:35px;overflow:visible;background:linear-gradient(115deg,#b7b6bd,#414047 18%,#aaa9b1 49%,#34333a 80%,#96959d);box-shadow:16px 28px 34px -12px #211a3538,0 2px 3px #fff9 inset}
.showcase .phone:before,.showcase .phone:after{content:'';position:absolute;left:-3px;top:88px;height:31px;width:3px;border-radius:3px;background:#54525b;box-shadow:0 42px 0 #54525b}
.showcase .phone:after{left:auto;right:-3px;top:112px;height:48px;box-shadow:none}
.showcase .device-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.showcase .phone-front{top:75px}
@media(max-width:1050px){.showcase .phone{border-radius:30px;padding:5px}.showcase .device-screen{border-radius:25px}.showcase .phone-front{top:100px}}
@media(max-width:700px){.showcase .phone-front{top:65px}.showcase .phone-back{top:15px}}

/* Editorial project captions with a single, integrated action. */
.project .view-project{display:none}
.project-caption{border-top:1px solid var(--line);padding:22px 0 12px;margin:0 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left}
.project-caption h3{font-size:16px;font-weight:700;letter-spacing:-.4px;line-height:1.4;margin:0 0 7px}
.project-caption p{font-size:11px;line-height:1.5;color:var(--muted)}
.project-caption .round-arrow{display:grid;width:42px;height:42px;border:1px solid #ded4ec;background:#f3edf9;color:var(--purple);font-size:21px;transition:background .25s,color .25s,transform .25s}
.project:hover .round-arrow,.project:focus-visible .round-arrow{background:var(--purple);border-color:var(--purple);color:white;transform:rotate(8deg)}
.portfolio-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:701px) and (max-width:1050px){.project-caption{margin-inline:0;gap:9px}.project-caption h3{font-size:14px}.project-caption .round-arrow{width:34px;height:34px}}
@media(max-width:700px){.project-caption{margin-inline:7px;padding-top:20px}.project-caption h3{font-size:16px}}

/* A bolder project signature, with a directional action. */
.project-caption{position:relative;border-top:0;align-items:flex-start;margin-inline:4px;padding:26px 0 15px;gap:16px}
.project-caption:before{content:'';position:absolute;top:0;left:0;width:40px;height:4px;background:var(--purple);transition:width .5s cubic-bezier(.2,.75,.25,1)}
.project-caption>div{flex:1;min-width:0;padding-top:3px}
.project-caption h3{font-size:clamp(20px,1.8vw,26px);line-height:1.15;letter-spacing:-1px;font-weight:800;max-width:245px;margin-bottom:12px}
.project-caption p{font-size:11px;line-height:1.6}
.project-action{display:flex;flex-direction:column;align-items:center;gap:9px;flex-shrink:0}
.project-action .action-label{order:2;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:var(--purple)}
.project-caption .round-arrow{display:grid;width:64px;height:64px;border:0;border-radius:19px;background:var(--purple);color:white;box-shadow:0 8px 20px #7947d526;transform:rotate(-7deg);transition:background .3s,transform .4s,box-shadow .4s;overflow:hidden}
.round-arrow svg{width:31px;height:31px;transition:transform .4s cubic-bezier(.2,.75,.25,1)}
.project:hover .project-caption:before,.project:focus-visible .project-caption:before{width:80px}
.project:hover .round-arrow,.project:focus-visible .round-arrow{background:var(--ink);transform:rotate(0) translateY(-4px);box-shadow:0 12px 25px #201b2e25}
.project:hover .round-arrow svg,.project:focus-visible .round-arrow svg{transform:translate(2px,-2px)}
@media(min-width:701px) and (max-width:1050px){.project-caption{gap:10px}.project-caption h3{font-size:19px;letter-spacing:-.6px}.project-caption .round-arrow{width:48px;height:48px;border-radius:14px}.round-arrow svg{width:26px;height:26px}.project-action .action-label{font-size:8px;letter-spacing:.6px}}
@media(max-width:700px){.project-caption{margin-inline:7px;gap:20px}.project-caption h3{font-size:25px}.project-caption .round-arrow{width:60px;height:60px}}

/* Full-width hero atmosphere, anchored in GP's requested purple. */
.hero{position:relative;isolation:isolate;color:#fff}
.hero:before{content:'';position:absolute;z-index:-2;top:0;bottom:0;left:calc((100% - 100vw)/2);width:100vw;background:radial-gradient(ellipse at 78% 105%,#bf37ff 0%,#9d2de6 20%,transparent 58%),radial-gradient(ellipse at 35% 12%,#6d239b 0%,transparent 60%),linear-gradient(120deg,#130d27 5%,#27113f 49%,#451566 100%);pointer-events:none}
.hero h1>span{color:#e5b3ff}
.hero-copy>p{color:#eee0f7}
.hero .hero-foot{color:#e1cfe9}
.hero .mini-icons{color:#fff;border-color:#ffffff40}
.hero .button{background:#fff;color:#351248;box-shadow:0 8px 30px #16052230}
.hero .button:hover{background:#f1d9ff;transform:translateY(-3px)}
.hero .orbit{background:radial-gradient(circle,#bf37ff30,transparent 70%);border-color:#ffffff14}
.hero .floating-label{color:#35213f;background:#fff;border-color:#ffffff80;box-shadow:0 12px 30px #18072430}
.hero .purple-star{color:#9820cc}
.hero .spark{color:#bf37ff}
.hero .phone{box-shadow:16px 28px 40px -12px #10051b80,0 2px 3px #fff9 inset}
.hero a:focus-visible{outline-color:#fff}

/* Continuous gradient behind the transparent header and hero. */
.header{position:relative;z-index:2;background:transparent;border-bottom-color:#ffffff24;color:#fff}
.header .brand img{filter:brightness(0) invert(1)}
.header nav a:hover{color:#edc8ff}
.header .button{background:#fff;color:#351248}
.header .button:hover{background:#f1d9ff}
.header a:focus-visible{outline-color:#fff}
.hero:before{top:-108px}
@media(max-width:700px){.hero:before{top:-85px}}

/* Glass navigation capsule over the continuous hero gradient. */
.header{height:82px;margin-top:18px;padding:0 24px;border:1px solid #ffffff30;border-radius:999px;background:linear-gradient(110deg,#c79aff24,#ffffff08 55%,#160c2b33);box-shadow:inset 0 2px 7px #e7c5ff24,inset 0 -1px 5px #c398ff12,0 8px 24px #12091e12;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header .brand img{width:68px;height:44px}
.header .button{padding:12px 20px}
.hero:before{top:-118px}
@media(max-width:700px){.header{height:68px;margin-top:12px;padding:0 14px;width:calc(100% - 24px)}.header .brand img{width:51px;height:37px}.header nav{gap:12px}.header .button{padding:10px 13px}.hero:before{top:-92px}}

/* Slim navigation with balanced logo and contact button. */
.header{height:64px;padding-inline:22px}
.header .brand{display:flex;align-items:center;justify-content:center;line-height:0}
.header .brand img{display:block;width:62px;height:40px;object-fit:contain}
.header .button{height:40px;padding:0 18px;display:inline-flex;align-items:center}
@media(max-width:700px){.header{height:58px;padding-inline:14px}.header .brand img{width:53px;height:35px}.header .button{height:35px;padding:0 13px}}

/* Compact header with navigation grouped beside the contact action. */
.header{width:min(1040px,calc(100% - 96px));gap:30px}
.header nav{margin-left:auto;gap:26px}
@media(max-width:1050px){.header{width:calc(100% - 72px);gap:24px}}
@media(max-width:700px){.header{width:calc(100% - 32px);gap:16px}.header nav{gap:12px}}

/* Signature contact action inside the glass navigation. */
.header .button{height:44px;padding:5px 5px 5px 20px;gap:20px;border:1px solid #e8b0ff70;background:linear-gradient(110deg,#a521e6,#bf37ff);color:#fff;font-size:13px;font-weight:700;box-shadow:0 4px 18px #bf37ff35,inset 0 1px 0 #ffffff30;transition:transform .3s,box-shadow .3s,background .3s}
.header .button>span{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#fff;color:#7b159f;box-shadow:0 2px 6px #45105e20}
.header .button svg{width:18px;height:18px;transition:transform .3s}
.header .button:hover{background:linear-gradient(110deg,#b52bf4,#ce64ff);transform:translateY(-1px);box-shadow:0 5px 24px #bf37ff65,inset 0 1px 0 #ffffff40}
.header .button:hover svg{transform:rotate(45deg)}
@media(max-width:700px){.header .button{height:40px;padding:4px 4px 4px 13px;font-size:11px;gap:10px}.header .button>span{width:30px;height:30px;flex-basis:30px}.header .button svg{width:16px;height:16px}}

/* Slightly smaller header logo. */
.header .brand img{width:55px;height:36px}
@media(max-width:700px){.header .brand img{width:48px;height:32px}}

/* White header contact button. */
.header .button{background:#fff;color:#251832;border-color:#fff;box-shadow:0 4px 16px #15082220}
.header .button>span{background:#f2eef6;color:#251832;box-shadow:none}
.header .button:hover{background:#fff;color:#251832;box-shadow:0 6px 22px #ffffff25}

/* Slim black iPhone-style housing and uncropped high-resolution profiles. */
.device-mockup,.showcase .phone{padding:3px;background:#161619;border:1px solid #55545b;border-radius:35px;box-shadow:12px 24px 32px -12px #15102050,inset 0 0 0 1px #ffffff18}
.device-screen,.showcase .device-screen{border:4px solid #030305;border-radius:31px;padding:30px 0 22px;background:#0b1014}
.project-visual .device-screen img,.showcase .device-screen img{width:100%;height:100%;object-fit:contain;object-position:center;border:0;border-radius:0;transform:none}
.device-mockup:before,.device-mockup:after,.showcase .phone:before,.showcase .phone:after{background:#26262b}
.device-mockup:before,.showcase .phone:before{box-shadow:0 42px 0 #26262b}
.device-camera{top:7px;width:64px;height:16px;background:#000}
.device-camera:after{top:5px;right:8px;width:6px;height:6px;background:#101723}
.hero .phone{box-shadow:12px 25px 36px -12px #08021080,inset 0 0 0 1px #ffffff18}
.hero .label-bottom{bottom:-12px;left:0}
.hero .spark{right:-15px;bottom:-5px}
@media(max-width:1050px){.device-mockup,.showcase .phone{padding:3px;border-radius:30px}.device-screen,.showcase .device-screen{border-radius:26px}}
@media(max-width:700px){.hero .label-bottom{bottom:-5px;left:0}.hero .spark{right:0;bottom:0}}

/* Hero action matches the header's white contact pill. */
.hero .button{height:44px;padding:5px 5px 5px 20px;gap:20px;border:1px solid #fff;background:#fff;color:#251832;font-size:13px;font-weight:700;box-shadow:0 4px 16px #15082220;transition:transform .3s,box-shadow .3s}
.hero .button>span{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#f2eef6;color:#251832}
.hero .button svg{width:18px;height:18px;transition:transform .3s}
.hero .button:hover{background:#fff;color:#251832;transform:translateY(-1px);box-shadow:0 6px 22px #ffffff25}
.hero .button:hover svg{transform:rotate(45deg)}
@media(max-width:700px){.hero .button{height:40px;padding:4px 4px 4px 13px;font-size:11px;gap:10px}.hero .button>span{width:30px;height:30px;flex-basis:30px}.hero .button svg{width:16px;height:16px}}

/* More compact navigation capsule. */
.header{width:min(960px,calc(100% - 96px));height:58px;padding-inline:20px;gap:26px}
.header nav{font-size:13px;gap:24px}
.header .brand img{width:50px;height:33px}
.header .button{height:40px;padding:4px 4px 4px 17px;font-size:12px;gap:17px}
.header .button>span{width:30px;height:30px;flex-basis:30px}
@media(max-width:1050px){.header{width:calc(100% - 80px)}}
@media(max-width:700px){.header{width:calc(100% - 32px);height:54px;padding-inline:13px;gap:14px}.header nav{font-size:11px;gap:12px}.header .brand img{width:44px;height:29px}.header .button{height:36px;padding:3px 3px 3px 12px;font-size:11px;gap:9px}.header .button>span{width:28px;height:28px;flex-basis:28px}}

/* Bring the logo and contact button closer to the capsule ends. */
.header{padding-left:13px;padding-right:7px}
@media(max-width:700px){.header{padding-left:10px;padding-right:5px}}

/* Typographic service ribbon connecting the hero to the portfolio. */
.service-strip{position:relative;background:#f5edfc;border:0;border-bottom:1px solid #e9daf3;overflow:hidden}
.service-strip:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#bf37ff80,transparent)}
.service-strip>div{width:min(1320px,calc(100% - 64px));padding-block:30px;gap:26px;justify-content:space-between}
.service-strip span{font-family:'Manrope',sans-serif;font-size:clamp(15px,1.5vw,23px);font-weight:600;letter-spacing:-.6px;text-transform:lowercase;color:#362044;line-height:1.3;white-space:nowrap}
.service-strip span:first-letter{text-transform:uppercase}
.service-strip i{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;font-size:28px;color:#bf37ff;line-height:1;transition:transform .5s}
.service-strip:hover i{transform:rotate(90deg)}
@media(max-width:1050px){.service-strip>div{gap:16px;width:calc(100% - 48px);padding-block:25px}.service-strip i{flex-basis:20px;width:20px;font-size:23px}}
@media(max-width:700px){.service-strip>div{width:max-content;min-width:100%;padding:22px 24px;gap:20px;flex-wrap:nowrap;justify-content:flex-start}.service-strip{overflow-x:auto;scrollbar-width:none}.service-strip::-webkit-scrollbar{display:none}.service-strip span{font-size:18px;letter-spacing:-.5px}.service-strip i{font-size:22px}.service-strip span:last-child,.service-strip i:last-of-type{display:grid}}

/* Slimmer service ribbon. */
.service-strip>div{padding-block:18px}
@media(max-width:1050px){.service-strip>div{padding-block:16px}}
@media(max-width:700px){.service-strip>div{padding-block:14px}}

/* Air between portfolio rows as the client collection grows. */
.projects{row-gap:55px}
@media(max-width:700px){.projects{row-gap:35px}}

.profile-clean{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.profile-stack{height:100%;max-width:100%;container-type:inline-size;overflow:hidden;background:#fff}
.profile-slice{position:relative;overflow:hidden;width:100%}
.project-visual .profile-slice img,.showcase .profile-slice img,.dialog-profile-preview .profile-slice img{position:absolute;left:0;width:100%;height:auto;max-width:none;object-fit:initial;display:block;border:0;border-radius:0;transform:none;margin:0}
#dialog-image[hidden]{display:none}
.dialog-profile-preview{width:min(100%,480px);margin:30px auto 0}
.dialog-profile-preview .profile-clean{height:auto;display:block}
.dialog-profile-preview .profile-stack{width:100%;height:auto}
.dialog-profile-preview>img{display:block;width:100%;height:auto;border-radius:16px}

.portfolio-more{display:flex;justify-content:center;margin-top:44px}
.portfolio-more[hidden]{display:none}
.portfolio-more .button{border:1px solid #ded0ec;min-width:165px;background:#f0e7f8;color:#49265c}
.portfolio-more .button:hover{background:#7947d5;color:#fff}

/* Portfolio expansion action, aligned with the site's pill buttons. */
.portfolio-more .button{min-width:180px;height:50px;padding:6px 6px 6px 24px;gap:28px;background:#251832;color:#fff;border:1px solid #352542;font-size:13px;font-weight:600;box-shadow:0 5px 14px #25183212;transition:background .25s,transform .25s,box-shadow .25s}
.portfolio-more .button>span{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#fff;color:#251832;font-size:23px;font-weight:400;line-height:1;transition:transform .3s}
.portfolio-more .button:hover{background:#43235c;transform:translateY(-2px);box-shadow:0 8px 20px #25183222}
.portfolio-more .button:hover>span{transform:rotate(90deg)}
.portfolio-more .button[aria-expanded="true"]:hover>span{transform:none}

/* Closing contact action with a distinct directional icon. */
.contact-card .button.light{height:50px;padding:6px 6px 6px 24px;gap:26px;background:#fff;color:#251832;border:1px solid #fff;font-size:13px;font-weight:600;box-shadow:0 5px 18px #12091e20;transition:transform .25s,box-shadow .25s}
.contact-card .button.light>span{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#251832;color:#fff}
.contact-card .button.light svg{width:19px;height:19px;transition:transform .3s}
.contact-card .button.light:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px #ffffff20}
.contact-card .button.light:hover svg{transform:rotate(45deg)}

/* Responsive layout for compact phones, large phones and tablets. */
@media(max-width:950px) and (min-width:701px){
  .hero{grid-template-columns:1fr 1fr;gap:12px;padding-block:55px;min-height:610px}
  .hero h1{font-size:clamp(46px,6.4vw,61px);letter-spacing:-3px}
  .showcase{height:460px}.showcase .phone{width:clamp(155px,22vw,195px)}
  .showcase .phone-back{left:0;top:30px}.showcase .phone-front{right:0;top:100px}
  .hero .floating-label{font-size:10px;padding:10px 12px}
  .hero .spark{right:0;font-size:55px}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 25px}
  .project-visual{height:540px}.device-mockup{width:210px}
  .project-caption h3{font-size:22px}.services-grid{gap:32px}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 40px)}
  .header{width:calc(100% - 24px);height:60px;margin-top:max(12px,env(safe-area-inset-top));gap:12px;padding-left:10px;padding-right:6px}
  .header .brand{min-width:44px;min-height:44px}
  .header nav a{display:flex;align-items:center;min-height:44px}
  .header .button{height:44px;font-size:12px;gap:10px;padding:5px 5px 5px 14px}
  .header .button>span{width:32px;height:32px;flex-basis:32px}
  .hero{padding-top:42px;padding-bottom:40px;gap:30px;min-height:0}
  .hero:before{top:calc(-90px - env(safe-area-inset-top))}
  .hero h1{font-size:clamp(45px,12.2vw,67px);letter-spacing:-.055em;line-height:1.09;margin:0 0 23px}
  .hero-copy>p{font-size:16px;line-height:1.55;margin:0 0 27px}
  .hero .button{height:48px;font-size:13px;gap:22px;padding:5px 5px 5px 20px}
  .hero .button>span{width:36px;height:36px;flex-basis:36px}
  .hero-foot{font-size:10px;gap:10px;margin-top:25px}
  .showcase{width:min(390px,100%);height:clamp(370px,112vw,465px);margin-top:6px}
  .showcase .phone{width:clamp(145px,44vw,185px)}
  .showcase .phone-back{left:9px;top:20px}
  .showcase .phone-front{right:9px;top:65px}
  .hero .label-top{top:0;right:0;font-size:9px;padding:10px 12px}
  .hero .label-bottom{bottom:0;left:4px;font-size:10px;padding:9px 12px}
  .hero .spark{font-size:52px;right:0;bottom:5px}
  .orbit{width:100%;height:auto;aspect-ratio:1;top:35px}
  .section{padding-block:56px}
  .section h2{font-size:clamp(31px,8.3vw,40px);letter-spacing:-1.5px}
  .section-heading>p{font-size:14px;line-height:1.65}
  .filters{gap:8px;margin-block:26px 24px}
  .filters button{min-height:44px;padding:10px 15px;font-size:12px}
  .projects{grid-template-columns:minmax(0,1fr);row-gap:40px;padding-top:8px}
  .project-visual{height:555px;padding:40px 20px 65px}
  .device-mockup{width:225px;max-width:85%}
  .project-caption{margin-inline:4px;padding-top:22px;gap:14px}
  .project-caption h3{font-size:24px;letter-spacing:-.8px}
  .project-caption p{font-size:12px}
  .project-caption .round-arrow{width:54px;height:54px;border-radius:16px}
  .portfolio-more{margin-top:34px}
  .service-list summary{min-height:48px;font-size:19px}
  .service-list details{padding-block:16px}
  .contact-card{padding:42px 20px}
  .contact-card h2{font-size:clamp(29px,8vw,38px);line-height:1.2}
  .contact-card h2 br{display:none}
  .contact-card .button.light{max-width:100%;gap:18px;font-size:13px}
  .footer{padding-bottom:max(24px,env(safe-area-inset-bottom));gap:16px}
  .footer>a{min-height:44px;display:flex;align-items:center}
  .project-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px);padding:18px;border-radius:20px}
  .close-dialog{width:44px;height:44px;top:0}
  .dialog-copy{padding-right:0}.dialog-copy h2{font-size:26px;padding-right:44px}
  .dialog-copy p{font-size:14px}.dialog-profile-preview{margin-top:22px}
}
@media(min-width:420px) and (max-width:700px){.header nav a:last-child{display:flex}.header nav{gap:13px;font-size:11px}}
@media(max-width:359px){
  .wrap{width:calc(100% - 32px)}
  .header{gap:8px}.header nav{font-size:10px}.header .button{font-size:11px;padding-left:11px;gap:7px}
  .hero-foot{font-size:9px}.mini-icons{font-size:17px;padding-right:10px}
  .project-visual{height:520px}.device-mockup{width:210px}
  .project-caption h3{font-size:21px}.project-caption .round-arrow{width:48px;height:48px}
}
@media(hover:none){
  .project:hover .device-mockup{transform:translateY(5px) rotate(-6deg)}
  .button:hover,.header .button:hover,.hero .button:hover,.contact-card .button.light:hover{transform:none}
}
@media(max-width:700px){.showcase .phone-back{left:22px}.showcase .phone-front{right:22px}}

/* Center the footer brand and tagline together on mobile. */
@media(max-width:700px){
  .footer{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:16px;row-gap:12px;text-align:center}
  .footer .brand{justify-content:center}
  .footer p{margin:0;flex:none}
  .footer>a:not(.brand){grid-column:1 / -1;justify-content:center}
  .footer>span{grid-column:1 / -1;margin:0;text-align:center}
}

/* Upright phone mockups on mobile, including hover and focus states. */
@media(max-width:700px){
  .project .device-mockup,.project:hover .device-mockup,.project:focus-visible .device-mockup{transform:none}
}

/* Keep Instagram and copyright together on the mobile footer's second row. */
@media(max-width:700px){
  .footer>a:not(.brand){grid-column:1;grid-row:2;justify-content:center;white-space:nowrap}
  .footer>span{grid-column:2;grid-row:2;white-space:nowrap}
}

.footer-meta{display:flex;align-items:center;justify-content:center;gap:30px}
.footer-meta>span{color:var(--muted)}
@media(max-width:700px){
  .footer-meta{grid-column:1 / -1;grid-row:2;justify-self:center;display:flex;align-items:center;justify-content:center;gap:22px;white-space:nowrap}
  .footer-meta>a{display:flex;align-items:center;min-height:44px}
}

/* More space between category labels and the phone mockups. */
.project-tag{top:-6px}