:root{--ink:#102d46;--pale:#e6f4fb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--pale);color:var(--ink);font-family:Montserrat,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}header{position:fixed;z-index:20;top:0;width:100%;height:74px;padding:0 3%;display:flex;align-items:center;color:white;font:10px 'IBM Plex Mono',monospace;transition:color .5s}header.on-light{color:#123951}header .logo{width:110px;margin-right:16%}.logo img{width:100%;display:block}header.on-light .logo img{filter:brightness(0) saturate(100%) invert(17%) sepia(16%) saturate(2500%) hue-rotate(165deg)}nav{display:flex;gap:35px}header button{color:inherit;background:none;border:0;font:inherit}.talk{border:1px solid #ffffffb3;border-radius:40px;padding:12px 22px;margin-left:auto;background:#ffffff25}.on-light .talk{border-color:#92bdd2}.mobile-menu{display:none}.tag{display:inline-block;border-radius:30px;padding:4px 10px;background:#168fd0;color:white;font:9px 'IBM Plex Mono';letter-spacing:.03em}.work,.contact{background:#e9f5fb;color:#142e43}.services-title h2{font-size:clamp(30px,3.5vw,62px);line-height:1.1;letter-spacing:-.06em;font-weight:400;margin:24px 0 35px}.small-pill{display:inline-block;border:1px solid #9cc5d9;border-radius:30px;padding:12px 19px;font:10px 'IBM Plex Mono';background:#d1edfa;color:#173a52}.work{padding:12vh 3%}.work-head h2,.contact h2{font-weight:400;font-size:clamp(55px,8vw,130px);line-height:.95;letter-spacing:-.07em;margin:30px 0}.work-head p{max-width:370px;font-size:15px;line-height:1.5}.work-head small{font:9px 'IBM Plex Mono';opacity:.6}.project-grid{margin-top:100px;display:grid;grid-template-columns:repeat(4,1fr);gap:11vw 5vw;align-items:start}.project:nth-child(4n+2){transform:translateY(100px)}.project:nth-child(4n+4){transform:translateY(130px)}.project-visual{height:clamp(220px,28vw,440px);border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(145deg,#122536,#417798);box-shadow:0 8px 30px #1a4c631c}.project-visual:before{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8faff,#72c4e8 25%,#244b68 62%,#091b2b 75%);box-shadow:0 0 30px #79d5ff8a}.project:nth-child(3n+2) .project-visual{background:linear-gradient(140deg,#0a1519,#5d8190)}.project:nth-child(3n) .project-visual{background:linear-gradient(145deg,#b0c9d4,#31576c)}.project-meta{display:flex;justify-content:space-between;font:9px 'IBM Plex Mono';padding-top:14px}.project h3{font-size:18px;font-weight:400;letter-spacing:-.03em}.contact{margin-top:15vh;padding:15vh 3% 12vh;display:grid;grid-template-columns:1fr 1fr;gap:10%}.contact em{font-weight:400}.contact p{max-width:420px;line-height:1.5;font-size:14px}.contact form{padding-top:50px}.contact label{display:block;font:11px 'IBM Plex Mono';margin-bottom:35px}.contact input,.contact textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #a6c4d3;padding:16px 0;outline:0;color:#142e43;font:16px Montserrat}.notice{font-size:12px!important}footer{padding:25px 3%;display:flex;justify-content:space-between;background:#e9f5fb;font:9px 'IBM Plex Mono';border-top:1px solid #bed9e8}body.dark .work,body.dark .contact,body.dark footer{background:#0d2535;color:#d9f2ff}@media(max-width:700px){header{height:60px}header .logo{width:88px;margin-right:auto}header nav,.talk{display:none}.mobile-menu{display:block}.contact{grid-template-columns:1fr;padding:80px 5%}.project-grid{grid-template-columns:1fr 1fr;gap:65px 15px}.project:nth-child(n){transform:none}.project-visual{height:240px}.work{padding:80px 5%}.contact{margin-top:0}}
@media(max-width:700px){nav.mobile-open{position:absolute;display:flex;top:60px;left:0;right:0;padding:30px 5%;flex-direction:column;background:#e9f5fb;color:#102d46;gap:25px;font-size:14px}}
/* A softly moving atmosphere adds depth while preserving contrast for the copy. */
/* The entry screen sits over the actual scene, so the blur resolves into it. */
.work,.contact,footer{background:#18cbfe;color:#fff}.small-pill{background:#113c5a;border-color:#113c5a;color:#fff}.small-pill:hover{background:#0a2a43}.contact input,.contact textarea{color:#fff;border-color:#ffffffa8}.contact input::placeholder,.contact textarea::placeholder{color:#ffffffb8}.work-head small{opacity:.9}footer{border-color:#ffffff75}header.on-light{color:#fff}header.on-light .logo img{filter:none}header.on-light .talk{border-color:#ffffffb3}.services-title h2,.work-head h2,.contact h2{text-shadow:0 1px 6px #08739955}
@media(max-width:700px){nav.mobile-open{background:#18cbfe;color:#fff}}
header{ text-shadow:0 1px 8px rgba(0,38,68,.72)}
.work-head p,.contact p,.contact label,.project-meta,.project h3,footer{ text-shadow:0 1px 4px rgba(0,70,99,.65)}
/* Navigation and opening message */
header .logo{width:88px;margin:0}
header nav{position:absolute;left:50%;transform:translateX(-50%);gap:38px}
header .talk{margin-left:auto}
@media(max-width:700px){header .logo{width:76px}header nav.mobile-open{left:0;transform:none}}
/* Keep the opening copy in normal flow so the eyebrow cannot collide with it. */
header .logo{width:135px}
@media(max-width:700px){header .logo{width:115px}}
/* One landscape, changing light and a quieter visual rhythm through the journey. */
/* A soft, continuous sky beyond the portal. */
.work,.contact,footer{background:linear-gradient(rgba(4,28,57,.72),rgba(4,25,48,.80)),url('sky.png') center/cover fixed;color:#fff;position:relative;isolation:isolate}
.work::before,.contact::before,footer::before{content:'';position:absolute;inset:0;z-index:-1;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);pointer-events:none}
.work,.contact{overflow:hidden}.work{min-height:75vh}.contact{margin-top:0}.tag{background:#e4f7ff25;border:1px solid #d4efff80}.small-pill{background:#d8f5ff;color:#123951;border-color:#d8f5ff}.small-pill:hover{background:#fff;color:#102d46}
.brand-reel{overflow:hidden;margin:95px -3.2% 0;border-top:1px solid #ffffff55;border-bottom:1px solid #ffffff55;padding:55px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.brand-track{display:flex;width:max-content;animation:reel 22s linear infinite}.brand-set{display:flex;align-items:center;gap:12vw;padding-right:12vw;white-space:nowrap}.brand-name{font-weight:600;font-size:clamp(35px,4vw,64px);letter-spacing:.12em}.brand-name small{display:block;font:10px 'IBM Plex Mono';letter-spacing:.45em;text-align:center}.brand-note{font:10px 'IBM Plex Mono';letter-spacing:.08em;text-transform:uppercase;opacity:.7}@keyframes reel{to{transform:translateX(-50%)}}
@media(max-width:700px){.work,.contact,footer{background-attachment:scroll}.brand-reel{margin:60px -5.5% 0}.brand-set{gap:70px;padding-right:70px}}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none}}
.work::before,.contact::before,footer::before{inset:-8%;background:linear-gradient(rgba(4,28,57,.74),rgba(4,25,48,.82)),url('sky.png') center/cover;filter:blur(18px);backdrop-filter:none;-webkit-backdrop-filter:none;animation:ambient-sky 24s ease-in-out infinite alternate}
@keyframes ambient-sky{from{transform:translate3d(-2%,-1%,0) scale(1.02)}to{transform:translate3d(2%,1.5%,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.work::before,.contact::before,footer::before{animation:none}}
/* A sun that sets and returns as the landscape moves through the day. */
/* Each scene has its own composition, while keeping the same type scale. */
/* An animated, deep-space environment beyond the cloud. */
.work,.contact,.site-footer{background:#07162d;color:#fff}
.work::before,.contact::before,.site-footer::before{inset:-10%;filter:none;backdrop-filter:none;background-color:#07162d;background-image:radial-gradient(circle at 18% 22%,#d7f5ff 0 1px,transparent 2px),radial-gradient(circle at 72% 63%,#a5dfff 0 1px,transparent 2px),radial-gradient(circle at 46% 35%,#fff 0 1px,transparent 2px),radial-gradient(ellipse at 65% 42%,rgba(42,104,155,.35),transparent 48%),radial-gradient(ellipse at 12% 80%,rgba(35,72,133,.28),transparent 45%);background-size:177px 163px,233px 193px,289px 257px,100% 100%,100% 100%;animation:space-drift 32s ease-in-out infinite alternate;opacity:.88}
.work::after,.contact::after{content:'';position:absolute;width:clamp(100px,15vw,250px);aspect-ratio:1;right:11%;top:9%;border-radius:50%;border:1px solid #ace7ff45;box-shadow:inset -22px -25px 45px #44a7db22,0 0 65px #4baee01c;pointer-events:none;z-index:-1;animation:float-space 12s ease-in-out infinite alternate}
.work::after{right:14%;top:24%;width:clamp(80px,11vw,170px);animation-delay:-4s}.contact::after{right:5%;top:55%;width:clamp(100px,10vw,170px);animation-delay:-7s}
@keyframes space-drift{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.05)}}@keyframes float-space{from{transform:translate3d(0,-14px,0)}to{transform:translate3d(20px,22px,0)}}
.site-footer{position:relative;isolation:isolate;display:block;padding:90px 3.5% 30px;border-top:1px solid #ffffff35;font-family:Montserrat,Arial,sans-serif;overflow:hidden}.site-footer::before{content:'';position:absolute;z-index:-1;pointer-events:none}.footer-main{display:grid;grid-template-columns:2fr 1fr 1.35fr 1.2fr;gap:5vw;padding-bottom:70px}.footer-brand img{width:155px}.footer-brand p,.footer-column p{font-size:13px;line-height:1.6;color:#d6e7f4}.footer-brand p{max-width:230px;margin-top:25px}.footer-column span{display:block;font:10px 'IBM Plex Mono';letter-spacing:.08em;color:#aad1e5;margin-bottom:23px}.footer-column a{display:block;font-size:13px;margin:0 0 15px;color:#fff}.footer-column a:hover,.footer-bottom a:hover{color:#79ddff}.footer-column .footer-contact{display:inline-block;border-bottom:1px solid #b6eaff;padding-bottom:6px}.footer-bottom{border-top:1px solid #ffffff35;padding-top:25px;display:flex;justify-content:space-between;font:10px 'IBM Plex Mono';color:#bfd4e3}
@media(max-width:700px){.footer-main{grid-template-columns:1fr 1fr;gap:42px 25px}.footer-brand{grid-column:1/-1}.site-footer{padding:65px 5% 25px}.footer-bottom{gap:20px}}
@media(prefers-reduced-motion:reduce){.work::before,.contact::before,.site-footer::before,.work::after,.contact::after{animation:none}}
.space-object{position:absolute;pointer-events:none;z-index:-1;animation:float-space 16s ease-in-out infinite alternate}.object-one{width:46px;height:46px;left:58%;top:23%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#d8f8ff,#76b5d5 17%,#1a527d 58%,#08172e);box-shadow:0 0 30px #8ddcff50}.object-two{width:90px;height:30px;right:10%;bottom:18%;border:1px solid #a6dff760;border-radius:50%;transform:rotate(-24deg);animation-delay:-8s}.work .object-one{left:22%;top:48%;width:28px;height:28px}.work .object-two{right:18%;bottom:26%;width:120px}
@media(prefers-reduced-motion:reduce){.space-object{animation:none}}
/* A more dramatic sunset before the transition into space. */
/* The portal now reveals only the environment; the content appears once. */
.services-content{position:relative;padding:110px 3.5% 120px;background:#07162d;isolation:isolate}.services-content::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 15%,#1b4b73 0%,transparent 42%),radial-gradient(ellipse at 10% 85%,#102c55,transparent 45%)}.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-card{min-height:235px;border:1px solid #b3e8ff30;border-radius:18px;background:linear-gradient(145deg,rgba(83,145,180,.16),rgba(11,38,65,.5));padding:28px;display:flex;flex-direction:column;transition:transform .35s,border-color .35s,background .35s}.service-card:hover{transform:translateY(-5px);border-color:#a9edff88;background:linear-gradient(145deg,rgba(96,166,202,.24),rgba(11,38,65,.62))}.service-card span{font:10px 'IBM Plex Mono';letter-spacing:.06em;color:#a2d7ec}.service-card h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.035em;font-weight:500;margin:auto 0 12px}.service-card p{font-size:14px;line-height:1.55;color:#c4d9e8;max-width:360px;margin:0}.services-content>.small-pill{margin-top:35px}
@media(max-width:700px){.services-content{padding:80px 5%}.bento{grid-template-columns:1fr;gap:12px}.service-card{min-height:190px;padding:24px}}
/* The landscape stays at night through the final scene and into the portal. */
/* Lunar sequence: the landscape moves laterally as if turning to each scene. */
/* The lunar world sits under the opening journey: the aperture exposes the live scene itself. */
/* Moon launch: a deliberate doorway into the studio. */.skip-launch{font:10px 'IBM Plex Mono';margin-top:16px;color:#c3e8f8}
/* Cloudcom studio: Dovv-inspired editorial structure with Cloudcom colours. */
.studio{position:relative;background:#eef8fc;color:#0a304d;font-family:Montserrat,Arial,sans-serif}.studio-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 4% 100px;position:relative;overflow:hidden}.availability{border:1px solid #c5dfeb;border-radius:40px;background:#fff;padding:12px 18px;font-size:12px;box-shadow:0 5px 20px #316a831a}.availability span{display:inline-block;width:8px;height:8px;background:#21c971;border-radius:50%;margin-right:8px;box-shadow:0 0 0 4px #d8f9e7}.availability i{display:inline-block;height:14px;border-left:1px solid #d3e5ec;margin:0 10px;vertical-align:middle}.studio-hero h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-stretch:condensed;font-size:clamp(62px,8.6vw,150px);line-height:.88;letter-spacing:-.025em;margin:36px 0;color:#072c49}.studio-hero>p{font-size:17px;line-height:1.55;max-width:550px;color:#4e6a7a;margin:0}.studio-actions{display:flex;gap:12px;margin-top:30px}.studio-button{padding:16px 23px;border:1px solid #a9c8d7;border-radius:30px;font-size:13px;font-weight:600}.studio-button.primary{background:#0a3858;border-color:#0a3858;color:#fff}.studio-button:hover{background:#18cbfe;color:#082a42;border-color:#18cbfe}.sticker{position:absolute;border:4px solid white;box-shadow:0 10px 35px #245d7933;color:#0a3858;font-weight:700;user-select:none;animation:sticker-float 5s ease-in-out infinite alternate}.sticker-one{left:12%;top:28%;background:#6fe3ff;border-radius:40px;padding:18px 27px;transform:rotate(-12deg);font-size:18px}.sticker-two{right:12%;top:25%;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:#d8f9ff;font-size:65px;animation-delay:-2s}.sticker-three{left:10%;top:58%;background:#b4efff;clip-path:polygon(50% 0,59% 16%,75% 5%,77% 24%,95% 20%,87% 38%,100% 50%,84% 58%,95% 77%,75% 75%,72% 95%,55% 84%,45% 100%,35% 84%,16% 94%,19% 75%,0 72%,12% 57%,0 46%,17% 38%,7% 19%,27% 24%,29% 5%,44% 16%);padding:35px;font-size:14px;line-height:1.1;animation-delay:-1s}.sticker-four{right:10%;top:58%;border-radius:40px;padding:18px 25px;background:#a7eaff;transform:rotate(9deg);font-size:16px;animation-delay:-3s}@keyframes sticker-float{to{translate:0 -12px}}
.trusted{display:flex;align-items:center;gap:24px;margin:0 5%;padding:45px 0 70px;color:#7794a4;font-size:12px}.trusted-line{height:1px;flex:1;background:#c7dfe9}.trusted strong{font-size:27px;letter-spacing:.14em;color:#96b2c0}.trusted strong small{display:block;font:8px 'IBM Plex Mono';letter-spacing:.4em;text-align:center}.studio-services{padding:70px 3.5% 130px}.studio-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}.studio-section-head>span,.studio-about>span,.process-title>span{font:11px 'IBM Plex Mono';letter-spacing:.12em}.studio-section-head h2,.process-title h2{font-size:clamp(42px,5vw,78px);line-height:.95;letter-spacing:-.06em;margin:0}.studio-section-head p{font-size:14px;color:#587386;max-width:260px;line-height:1.5}.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.build-card{border-radius:26px;background:#092d48;padding:12px;box-shadow:0 8px 25px #0d3b542b}.build-visual{height:clamp(330px,39vw,620px);border-radius:18px;display:grid;place-items:center;overflow:hidden}.visual-web{background:radial-gradient(circle at 50% 25%,#8be7ff,#258ec0 65%,#0d4b76)}.visual-app{background:radial-gradient(circle at 60% 20%,#b5efff,#528fbb 60%,#143c67)}.mock-browser{width:80%;height:75%;border-radius:12px;background:#f2fbff;box-shadow:0 25px 50px #03244188;transform:rotate(-3deg);overflow:hidden}.mock-bar{height:26px;background:#dceef7;display:flex;align-items:center;gap:5px;padding:0 10px}.mock-bar i{width:6px;height:6px;border-radius:50%;background:#87aabb}.mock-web{height:100%;padding:14% 9%;background:linear-gradient(125deg,#e9fbff,#92daf1);display:flex;flex-direction:column;align-items:flex-start;gap:15px}.mock-web span{font:900 clamp(23px,3vw,50px)/.95 Impact,sans-serif;color:#103b5c}.mock-web small{color:#52778e;font-size:10px}.mock-web b{background:#0a3c5c;color:white;padding:9px 14px;border-radius:20px;font-size:9px}.mock-phone{width:38%;height:82%;border:7px solid #0a1f2e;border-radius:35px;background:#d8f6ff;box-shadow:0 25px 50px #041c3288;transform:rotate(8deg);padding:18px}.phone-notch{width:40%;height:10px;background:#0a1f2e;border-radius:10px;margin:-10px auto 22px}.phone-ui{color:#0b3957}.phone-ui small{font:8px 'IBM Plex Mono'}.phone-ui strong{display:block;margin-top:18px;font-size:clamp(16px,2vw,27px);letter-spacing:-.05em}.phone-orb{display:grid;place-items:center;margin:25px auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#18cbfe 45%,#126191);font-size:45px;color:white;box-shadow:0 10px 25px #1f9bc666}.phone-lines{height:30px;border-radius:8px;background:linear-gradient(#adddeb 40%,transparent 40% 60%,#adddeb 60%)}.build-caption{display:flex;align-items:center;justify-content:space-between;padding:20px 15px 12px;color:white}.build-caption h3{font-size:25px;font-weight:500;margin:0}.build-caption span{font-size:11px;border-radius:20px;background:#ffffff20;padding:8px 12px}.studio-about{background:#082a43;color:#fff;padding:110px 3.5%;display:grid;grid-template-columns:1fr 3fr;gap:30px}.studio-about h2{font-size:clamp(36px,4.4vw,68px);line-height:1.1;letter-spacing:-.055em;font-weight:500;margin:0}.about-notes{display:grid;grid-template-columns:1fr 1fr;gap:5px 30px;margin-top:50px;color:#b2cedd;font-size:14px}.studio-process{padding:120px 3.5%;display:grid;grid-template-columns:1fr 2fr;gap:8%;background:#e3f4fa}.process-title h2{margin-top:30px}.process-list article{display:grid;grid-template-columns:55px 1fr 1.4fr;gap:20px;align-items:start;border-top:1px solid #a7c8d7;padding:28px 0}.process-list article span{font:11px 'IBM Plex Mono';color:#7398ab}.process-list h3{font-size:20px;margin:0}.process-list p{font-size:14px;line-height:1.5;margin:0;color:#567284}.studio-dock{position:sticky;bottom:22px;z-index:15;display:flex;justify-content:center;gap:0;width:max-content;max-width:94%;margin:-80px auto 20px;background:#082c47;border:1px solid #ffffff44;border-radius:45px;padding:9px;box-shadow:0 8px 25px #062c4966}.studio-dock a{color:white;font-size:12px;padding:12px 18px;border-radius:30px;white-space:nowrap}.studio-dock a:hover{background:#ffffff22}.studio-contact{margin:0}.in-studio{color:#0a3858;text-shadow:none}.in-studio .logo img{filter:brightness(0) saturate(100%) invert(22%) sepia(44%) saturate(1080%) hue-rotate(163deg)}.in-studio .talk{background:#0a3858;color:#fff;border-color:#0a3858}.in-studio nav{color:#0a3858}.in-studio.on-dark{color:#fff}.in-studio.on-dark .logo img{filter:none}.in-studio.on-dark nav{color:#fff}
@media(max-width:700px){.studio-hero{min-height:90vh;padding:120px 5% 80px}.studio-hero h2{font-size:clamp(52px,13vw,85px)}.studio-hero>p{font-size:14px;max-width:90%}.sticker-one{left:2%;top:18%;font-size:11px;padding:10px}.sticker-two{right:3%;top:19%;width:60px;height:60px;font-size:36px}.sticker-three{left:0;top:60%;padding:20px;font-size:9px}.sticker-four{right:0;top:66%;font-size:10px;padding:10px}.trusted{padding:30px 0 60px;gap:12px}.trusted strong{font-size:18px}.studio-section-head{display:block}.studio-section-head h2{margin:20px 0}.build-grid{grid-template-columns:1fr}.build-visual{height:340px}.mock-phone{width:42%}.studio-about,.studio-process{grid-template-columns:1fr;padding:80px 5%}.studio-about h2{font-size:34px}.process-list article{grid-template-columns:35px 1fr;gap:12px}.process-list p{grid-column:2}.studio-dock{bottom:12px}.studio-dock a{font-size:10px;padding:10px}.footer-main{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.sticker{animation:none}}
.studio-hero h2{font-family:Anton,Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:0;line-height:1}
header.in-studio.on-light .logo img{filter:brightness(0) saturate(100%) invert(61%) sepia(85%) saturate(2012%) hue-rotate(157deg) brightness(101%)}
header.in-studio.on-dark .logo img{filter:none}
/* The Earth landing is a visible, interactive arrival point. */
[hidden]{display:none!important}.tag{font-size:12px;letter-spacing:.08em;padding:7px 13px;line-height:1.2}.earth-rocket{position:absolute;z-index:2;left:58%;top:9%;width:clamp(180px,28vw,400px);opacity:0;pointer-events:none;filter:drop-shadow(0 20px 25px #061d36aa);will-change:transform,opacity}.earth-rocket img{width:100%;display:block}.earth-launch{pointer-events:auto;display:inline-flex;align-items:center;gap:16px;border:1px solid #d2f5ff;background:#093b5eea;color:white;border-radius:8px;padding:13px 18px;font:600 12px 'IBM Plex Mono';text-transform:uppercase;letter-spacing:.08em;box-shadow:0 0 20px #52ceff4d;cursor:pointer}.earth-launch:hover{background:#18cbfe;color:#062b45}.studio{background:#fff}.studio-hero{background:#fff}.studio-process{background:#f5fbfd}.studio-hero h2{color:#082f4c}.scroll-reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease}.scroll-reveal.revealed{opacity:1;transform:none}.studio-about h2 span{transition:opacity .12s linear}
@media(max-width:700px){.tag{font-size:11px}.earth-rocket{left:68%;top:10%;width:clamp(160px,43vw,260px)}.earth-launch{font-size:10px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;transform:none;transition:none}.studio-about h2 span{opacity:1!important}}
.earth-rocket{top:23%}.earth-rocket::after{content:'';position:absolute;left:17%;right:12%;bottom:4%;height:9%;border-radius:50%;background:rgba(1,15,30,.36);filter:blur(16px);z-index:-1}
@media(max-width:700px){.earth-rocket{top:22%}}
/* A landed rocket awaits on the moon, then lifts away on launch. */
/* A conventional light footer, independent of the space environment. */
.site-footer{background:#fff;color:#0a304d;border-top:1px solid #d4e4eb;text-shadow:none}.site-footer::before{display:none}.site-footer .footer-brand img{filter:brightness(0) saturate(100%) invert(61%) sepia(85%) saturate(2012%) hue-rotate(157deg) brightness(101%)}.site-footer .footer-brand p,.site-footer .footer-column p{color:#4c687a;text-shadow:none}.site-footer .footer-column span{color:#5d7e91}.site-footer .footer-column a{color:#0a304d;text-shadow:none}.site-footer .footer-column a:hover,.site-footer .footer-bottom a:hover{color:#009ec9}.site-footer .footer-contact{border-color:#18aacc}.site-footer .footer-bottom{border-color:#d4e4eb;color:#627e8e;text-shadow:none}
/* Land the rocket in the lunar landscape, keeping the controls separate from the scene. */
/* The experience opens with one clear skip control; the studio has its own navigation. */
header nav{visibility:hidden}header.in-studio nav{visibility:visible}header:not(.in-studio) .mobile-menu{display:none}header:not(.in-studio) .talk{display:block;margin-left:auto}.studio-contact,.site-footer{background:#fff!important;color:#0a304d;text-shadow:none}.studio-contact::before,.studio-contact::after,.site-footer::before,.site-footer::after{display:none!important;background:none!important;animation:none!important}.studio-contact p,.studio-contact label{color:#466276;text-shadow:none}.studio-contact .tag{background:#e1f7ff;color:#0c4564;border-color:#90d9ef}.studio-contact input,.studio-contact textarea{color:#0a304d;border-color:#a9c8d7}.studio-contact input::placeholder,.studio-contact textarea::placeholder{color:#7693a4}.studio-contact .small-pill{background:#0a3858;color:#fff;border-color:#0a3858}.site-footer{box-shadow:none;background-image:none!important}.site-footer .footer-bottom{background:#fff}
@media(max-width:700px){header:not(.in-studio) .talk{font-size:10px;padding:10px 14px}header.in-studio nav{visibility:visible}}
/* Tactile headline and sticker hover. */
.hover-line{display:block;white-space:nowrap}.hover-letter{display:inline-block;transform:translateY(var(--lift,0px)) rotate(var(--twist,0deg));transition:transform .25s cubic-bezier(.2,.8,.2,1);will-change:transform}.sticker{translate:var(--hover-x,0px) var(--hover-y,0px);transition:translate .4s ease,box-shadow .35s}.sticker:hover{box-shadow:0 18px 38px #167ca54a}.studio-button{transition:transform .25s,background .25s,color .25s}.studio-button:hover{transform:translateY(-3px)}
/* Clean centred introduction. */
.studio-about{background:#fff;color:#0a304d;display:flex;flex-direction:column;align-items:center;text-align:center;padding:125px 6%}.studio-about>span{color:#608699}.studio-about>div{max-width:910px}.studio-about h2{font-size:clamp(26px,3.1vw,46px);line-height:1.22;letter-spacing:-.035em;margin:30px auto 0;font-weight:500}.about-notes{max-width:700px;margin:38px auto 0;color:#5e7c8d;text-align:center;font-size:13px}.about-notes p{margin:8px}
/* Brilean-inspired connected process, with the active step opening on scroll. */
.studio-process{display:block;background:#fff;color:#0a304d;height:370vh;padding:0;position:relative}.process-pin{position:sticky;top:0;height:100vh;min-height:600px;padding:12vh 5% 8vh;display:grid;grid-template-columns:30% 1fr;gap:5%;overflow:hidden}.process-label{font:11px 'IBM Plex Mono';letter-spacing:.1em;align-self:start;border:1px solid #b9dce9;border-radius:20px;padding:8px 12px;width:max-content;color:#32647d}.process-track{position:relative;height:100%;padding-left:90px}.process-line{position:absolute;left:19px;top:0;bottom:0;width:1px;background:#c7dbe4}.process-line span{display:block;height:0;background:#18cbfe;transition:height .55s ease;width:2px}.process-steps{height:100%;display:flex;flex-direction:column}.process-step{position:relative;flex:0 0 auto;min-height:69px;transition:flex .65s ease,color .45s ease;overflow:visible}.process-step.active{flex:1 1 auto}.process-step button{position:relative;width:100%;display:flex;align-items:center;background:transparent;border:0;padding:0;text-align:left;color:#9ab0bd;cursor:pointer}.process-step.active button{color:#0a304d}.step-number{position:absolute;right:calc(100% + 47px);font:11px 'IBM Plex Mono';color:#7898a9}.step-dot{position:absolute;right:calc(100% + 66px);width:9px;height:9px;border-radius:50%;background:#bdcfd8;transform:translateX(50%)}.process-step.active .step-dot{background:#18cbfe;box-shadow:0 0 0 5px #18cbfe26}.step-title{font-size:clamp(38px,4.7vw,70px);font-weight:500;letter-spacing:-.055em;line-height:1.05}.step-inner{opacity:0;visibility:hidden;max-height:0;overflow:hidden;transition:opacity .4s,visibility .4s,max-height .6s}.process-step.active .step-inner{opacity:1;visibility:visible;max-height:44vh}.step-inner p{max-width:390px;font-size:15px;line-height:1.5;margin:20px 0;color:#45687d}.step-graphic{height:100px;width:clamp(200px,27vw,370px);position:relative;margin-top:6vh;border:1px solid #18cbfe;border-radius:70px;opacity:.7}.step-graphic i{position:absolute;top:17%;width:64px;height:64px;border:1px solid #18cbfe;border-radius:50%;animation:process-float 3s ease-in-out infinite alternate}.step-graphic i:first-child{left:5%}.step-graphic i:last-child{right:5%;animation-delay:-1.5s}.graphic-design{border-radius:10px;transform:rotate(-5deg)}.graphic-build{border-radius:10px}.graphic-build i{border-radius:5px}.graphic-launch{border-radius:50%;width:110px;height:110px}.graphic-launch i{left:20%!important;right:auto!important;top:20%;width:65%;height:65%}@keyframes process-float{to{transform:translateX(12px) rotate(15deg)}}
/* A compact contact and footer framed by a soft cloudscape. */
.closing-frame{position:relative;margin:30px 3% 35px;border:1px solid #c5e1ed;border-radius:30px;overflow:hidden;background:#eef9ff url('footer-clouds.png') center bottom/cover no-repeat;box-shadow:0 18px 50px #35657b20}.studio-contact,.site-footer{background:transparent!important}.studio-contact{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding:65px 5% 35px;margin:0}.studio-contact h2{font-size:clamp(37px,4.3vw,62px);line-height:1.05;letter-spacing:-.055em;margin:20px 0}.studio-contact>div>p{font-size:14px;max-width:330px;line-height:1.5}.studio-contact form{padding-top:0}.studio-contact label{margin-bottom:16px;font-size:10px}.studio-contact input,.studio-contact textarea{font-size:14px;padding:10px 0}.studio-contact textarea{min-height:65px}.studio-contact .small-pill{margin-top:0}.site-footer{padding:35px 5% 25px;border-top:1px solid #7ba2b85c}.footer-main{padding-bottom:45px}.footer-bottom{background:transparent!important}.closing-frame .site-footer::before,.closing-frame .studio-contact::before,.closing-frame .studio-contact::after{display:none!important}
@media(max-width:700px){.studio-about{padding:80px 6%}.studio-about h2{font-size:27px}.about-notes{grid-template-columns:1fr}.studio-process{height:330vh}.process-pin{min-height:0;padding:12vh 5% 7vh;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:25px}.process-track{padding-left:64px}.process-line{left:12px}.step-number{right:calc(100% + 32px)}.step-dot{right:calc(100% + 52px)}.step-title{font-size:37px}.process-step{min-height:55px}.step-inner p{font-size:13px;margin:15px 0}.step-graphic{margin-top:3vh;height:75px;width:200px}.step-graphic i{width:46px;height:46px}.graphic-launch{width:75px;height:75px}.studio-contact{grid-template-columns:1fr;padding:45px 6% 30px;gap:25px}.closing-frame{margin:15px 3% 25px;border-radius:20px}.site-footer{padding:35px 6% 25px}.hover-line{white-space:normal}.studio-hero h2{font-size:clamp(49px,12vw,85px)}}
@media(prefers-reduced-motion:reduce){.hover-letter,.sticker{transition:none!important}.step-graphic i{animation:none}.process-step,.step-inner{transition:none}}
.closing-frame .site-footer{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.66))!important}.closing-frame .footer-bottom{background:transparent!important}.closing-frame .footer-column span,.closing-frame .footer-bottom{color:#365a70}.closing-frame .studio-contact h2{text-shadow:none}

/* ACTUAL SITE refinements */
.in-studio nav,.in-studio .talk,.studio-dock{font-family:Montserrat,Arial,sans-serif;font-weight:600;letter-spacing:0}
.in-studio nav a,.in-studio .talk{font-size:12px}
.studio-hero h2{font-family:'Roboto Condensed',Impact,sans-serif;font-weight:900;font-stretch:condensed;letter-spacing:-.055em;position:relative;z-index:1}
.hover-letter{font-variation-settings:'wght' var(--letter-weight,900);transform:none;transition:font-variation-settings .18s ease;will-change:font-variation-settings}
.sticker{z-index:3}.sticker-one{left:14%;top:30%}.sticker-two{right:14%;top:28%}.sticker-three{left:12%;top:48%}.sticker-four{right:12%;top:52%}
.studio-process{height:auto;display:block;padding:110px 4% 150px;background:#fff;overflow:hidden}.process-heading{margin-bottom:65px}.process-heading span{font:11px 'IBM Plex Mono';letter-spacing:.1em;color:#608699}.process-heading h2{font-size:clamp(36px,4vw,60px);letter-spacing:-.055em;margin:20px 0 0}.process-cards{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start;padding:30px 0 100px}.process-connector{position:absolute;left:-5%;top:0;width:110%;height:260px;overflow:visible}.process-connector path{fill:none;stroke:#b6e9f7;stroke-width:4}.process-card{position:relative;z-index:1;min-height:350px;border-radius:22px;padding:25px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 16px 35px #103d5015;transition:transform .35s ease,box-shadow .35s ease}.process-card:hover{transform:translateY(-12px) rotate(0deg);box-shadow:0 24px 40px #103d5025}.process-card h3{font-family:'Roboto Condensed',sans-serif;font-size:clamp(26px,2.6vw,42px);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;margin:0 0 12px}.process-card p{font-size:14px;line-height:1.5;margin:0;max-width:245px}.process-number{font:12px 'IBM Plex Mono',monospace}.card-one{background:#b5efff;transform:rotate(-3deg)}.card-two{background:#ddf6ff;transform:translateY(80px) rotate(3deg)}.card-three{background:#18cbfe;transform:translateY(15px) rotate(-2deg)}.card-four{background:#0b4468;color:#fff;transform:translateY(90px) rotate(3deg)}
.closing-frame{background:#fff;box-shadow:none}.closing-frame .site-footer{background:#fff!important}
@media(max-width:700px){.studio-hero h2{font-size:clamp(45px,11vw,80px)}.sticker-one{left:2%;top:29%}.sticker-two{right:2%;top:26%}.sticker-three{left:1%;top:47%}.sticker-four{right:0;top:51%}.studio-process{height:auto;padding:75px 5% 100px}.process-heading{margin-bottom:35px}.process-cards{grid-template-columns:1fr 1fr;gap:14px;padding:10px 0 40px}.process-connector{display:none}.process-card{min-height:260px;padding:19px;border-radius:16px}.process-card h3{font-size:25px}.process-card p{font-size:12px}.card-two,.card-four{transform:translateY(30px) rotate(2deg)}.card-one,.card-three{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.hover-letter{font-variation-settings:'wght' 900!important}.process-card{transition:none}}

/* Small illustrated details for the process cards. */
.process-icon{position:absolute;right:22px;top:20px;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#ffffffa8;color:#0a4465;transform:rotate(9deg);box-shadow:0 6px 18px #10527414;transition:transform .35s ease,background .35s ease}.process-icon svg{width:30px;height:30px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.process-card:hover .process-icon{transform:rotate(-12deg) scale(1.1);background:#fff}.card-four .process-icon{background:#ffffff26;color:white}.card-four:hover .process-icon{background:#ffffff40}.process-cards{padding-bottom:40px}
@media(max-width:700px){.process-icon{width:44px;height:44px;right:16px;top:15px}.process-icon svg{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.process-icon{transition:none}}

/* Cloudcom typography on the entry screen. */
/* A separate moonlit landscape replaces the daytime scene as night arrives. */

/* Cloudcom blue and navy treatment for the actual site. */
body.studio-active{background:#18cbfe}
.studio{background:#18cbfe;color:#fff}
.studio-hero{background:#18cbfe;color:#fff}
.studio-hero h2,.studio-hero>p{color:#fff}
.studio-hero h2{text-shadow:0 3px 20px #007da32b}
.availability{background:#083454;color:#fff;border-color:#ffffff60;box-shadow:0 5px 20px #003a5833}
.availability i{border-color:#ffffff55}
.studio-button{color:#fff;border-color:#ffffffa6;background:transparent}
.studio-button.primary{background:#082e4a;border-color:#082e4a;color:#fff}
.studio-button:hover,.studio-button.primary:hover{background:#fff;border-color:#fff;color:#082e4a}
.sticker{background:#083454;color:#fff;border-color:#fff;box-shadow:0 10px 35px #00365445}
.sticker-two{background:#d5f8ff;color:#083454}
.sticker-three{background:#0b5276;color:#fff}
.sticker-four{background:#082e4a;color:#fff}
.trusted{color:#fff}.trusted-line{background:#ffffff77}.trusted strong{color:#fff}
.studio-services{background:linear-gradient(180deg,#18cbfe 0%,#0c8db7 45%,#082e4a 100%);color:#fff}
.studio-section-head p{color:#e7faff}
.studio-about{background:#082e4a;color:#fff}.studio-about>span{color:#b7edff}
.studio-process{background:linear-gradient(180deg,#082e4a 0%,#0b5478 46%,#18cbfe 100%);color:#fff}
.process-heading span{color:#c3f1ff}.process-connector path{stroke:#c4f4ff}
.process-card{color:#fff;border:1px solid #ffffff40}
.card-one{background:#0a3858}.card-two{background:#126687}.card-three{background:#087da5}.card-four{background:#082e4a}
.process-icon{background:#ffffff2e;color:#fff}.process-card:hover .process-icon{background:#ffffff4a}
.closing-frame{background:#082e4a;border-color:#ffffff55}
.studio-contact{background:#082e4a!important;color:#fff}
.studio-contact p,.studio-contact label{color:#e0f5ff}.studio-contact .tag{background:#18cbfe;color:#082e4a;border-color:#18cbfe}
.studio-contact input,.studio-contact textarea{color:#fff;border-color:#ffffff78}.studio-contact input::placeholder,.studio-contact textarea::placeholder{color:#b2d5e3}
.studio-contact .small-pill{background:#18cbfe;color:#082e4a;border-color:#18cbfe}
.closing-frame .site-footer{background:#082e4a!important;color:#fff;border-color:#ffffff48}
.site-footer .footer-brand img{filter:none}.site-footer .footer-brand p,.site-footer .footer-column p,.site-footer .footer-column span,.closing-frame .footer-column span,.closing-frame .footer-bottom{color:#c2e8f6}
.site-footer .footer-column a,.site-footer .footer-bottom a{color:#fff}.site-footer .footer-column a:hover,.site-footer .footer-bottom a:hover{color:#18cbfe}
.site-footer .footer-bottom{border-color:#ffffff40}
header.in-studio{color:#fff;background:linear-gradient(180deg,#082e4a9c,transparent);text-shadow:0 1px 8px #05314c55}
header.in-studio nav{color:#fff}header.in-studio .logo img,header.in-studio.on-light .logo img{filter:none}
header.in-studio .talk{background:#082e4a;color:#fff;border-color:#ffffff70;text-shadow:none}
.studio-hero>p{font-weight:500;text-shadow:0 1px 5px #006b8f88}
/* A consistent white presentation of the supplied client marks. */
.trusted{display:block;margin:0;padding:60px 5% 100px;text-align:center;color:#fff}.trusted>span{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:38px}.brand-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 40px;align-items:center;list-style:none;margin:0 auto;padding:0;max-width:1200px}.brand-logo{height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden}.brand-logo img{display:block;width:100%;max-width:170px;max-height:74px;object-fit:contain;mix-blend-mode:screen}.brand-logo.white-mark img{filter:brightness(0) invert(1)}.brand-logo.black-background img{filter:grayscale(1) contrast(1.3)}.brand-logo.white-background img{filter:grayscale(1) invert(1) contrast(2) brightness(1.5)}.brand-logo.dark-logo img{filter:grayscale(1) brightness(14) contrast(1.8)}.brand-logo.mixed-mark img{filter:grayscale(1) brightness(2) contrast(1.5)}.brand-logo.square-logo img{max-height:125px;max-width:150px}
@media(max-width:700px){.trusted{padding:45px 6% 70px}.trusted>span{margin-bottom:25px}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 20px}.brand-logo{height:74px}.brand-logo img{max-width:140px;max-height:60px}.brand-logo.square-logo img{max-height:100px}}
.brand-grid{display:flex;flex-wrap:wrap;justify-content:center}.brand-logo{width:calc((100% - 160px)/5)}
@media(max-width:700px){.brand-logo{width:calc((100% - 20px)/2)}}
/* Smaller, visually balanced client marks. */
.brand-logo{height:76px}.brand-logo img{max-width:130px;max-height:54px}.brand-logo.square-logo img{max-width:125px;max-height:104px}.brand-logo img[alt="Cosi Care"]{max-height:48px}.brand-logo img[alt="Au Vodka"]{max-height:58px}.brand-logo img[alt="Oh So Yum"]{max-width:150px;max-height:74px}.brand-logo img[alt="The Resin Co"]{max-height:54px}
@media(max-width:700px){.brand-logo{height:64px}.brand-logo img{max-width:112px;max-height:48px}.brand-logo.square-logo img{max-width:105px;max-height:88px}.brand-logo img[alt="Cosi Care"]{max-height:43px}.brand-logo img[alt="Au Vodka"]{max-height:51px}.brand-logo img[alt="Oh So Yum"]{max-width:130px;max-height:64px}.brand-logo img[alt="The Resin Co"]{max-height:48px}}
/* Featured sites transition in place as the visitor scrolls. */
.featured-work{height:410vh;position:relative;background:linear-gradient(180deg,#18cbfe 0%,#0c8db7 48%,#082e4a 100%);color:#fff}
.featured-pin{position:sticky;top:0;height:100vh;min-height:600px;display:flex;flex-direction:column;padding:95px 5% 30px;overflow:hidden}
.featured-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.featured-heading span{font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em}.featured-heading h2{font-size:clamp(34px,4vw,58px);letter-spacing:-.055em;line-height:1;margin:12px 0 0}.featured-heading p{font-size:13px;margin:0 0 5px;color:#e4f8ff}
.work-stage{position:relative;flex:1;min-height:0}.work-slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(25px) scale(.97);transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1),visibility .55s}.work-slide.active{opacity:1;visibility:visible;transform:none}.work-preview{flex:1;min-height:0;overflow:hidden;border-radius:15px;background:#0a304d;box-shadow:0 18px 55px #05283a55;border:1px solid #ffffff50}.work-preview img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}.work-meta{display:flex;justify-content:space-between;align-items:end;gap:20px;padding-top:15px}.work-meta span{font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#d9f5ff}.work-meta h3{font-size:clamp(21px,2.1vw,30px);letter-spacing:-.04em;margin:5px 0 0}.work-meta a{font-size:12px;font-weight:600;background:#082e4a;color:#fff;border:1px solid #ffffff70;border-radius:30px;padding:12px 19px;white-space:nowrap}.work-meta a:hover{background:#fff;color:#082e4a}.work-meta a span{font:inherit;color:inherit;margin-left:5px}.work-pagination{display:flex;align-items:center;gap:8px;margin-top:18px}.work-pagination button{color:#d6f7ff;border:1px solid #ffffff66;border-radius:30px;background:transparent;padding:7px 13px;font:10px Montserrat,sans-serif;transition:background .2s,color .2s}.work-pagination button[aria-current="true"]{background:#fff;color:#082e4a;border-color:#fff}
@media(max-width:700px){.featured-work{height:370vh}.featured-pin{min-height:0;padding:85px 5% 25px}.featured-heading{display:block;margin-bottom:18px}.featured-heading h2{font-size:38px}.featured-heading p{margin:10px 0 0;font-size:12px}.work-preview{border-radius:12px}.work-preview img{object-fit:cover;object-position:center top}.work-meta h3{font-size:22px}.work-meta a{font-size:11px;padding:11px 13px}.work-pagination{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.work-slide{transition:none}}
/* Keep the colour transition continuous as the work follows About. */
.studio-about{background:linear-gradient(180deg,#18cbfe 0%,#0c80a6 48%,#082e4a 100%)}
.featured-work{background:linear-gradient(180deg,#082e4a 0%,#0b7296 55%,#082e4a 100%)}


/* Preserve the original studio composition with a deeper Cloudcom palette. */
body.studio-active,.studio{background:#08263c;color:#fff}
.studio-hero{background:radial-gradient(ellipse at 50% 25%,#0c4565,#08263c 72%);color:#fff}
.studio-hero h2,.studio-hero>p{color:#fff}.studio-hero>p{color:#d8eff9;text-shadow:none}
.trusted{background:#08263c}.studio-about{background:linear-gradient(180deg,#08263c,#0c4565 50%,#08263c);color:#fff}.studio-about>span{color:#a7ddec}
.featured-work{background:linear-gradient(180deg,#08263c,#0b5273 52%,#08263c)}
.studio-process{background:linear-gradient(180deg,#08263c,#0b5273 60%,#08263c)}
.closing-frame,.studio-contact,.closing-frame .site-footer{background:#08263c!important}
.work-stage{overflow:hidden}.work-slide{visibility:visible;transition:opacity .18s linear}.work-slide:not(.active){pointer-events:none}.work-preview{border-color:#c6eaff55}
@media(prefers-reduced-motion:reduce){.work-slide{transition:none}}
/* Cloudcom accents and horizontal featured-work transitions. */
.studio-hero .sticker{background:#18cbfe;color:#082e4a;border-color:#fff}
.studio-button.primary,.in-studio .talk,.studio-contact .small-pill{background:#18cbfe!important;border-color:#18cbfe!important;color:#082e4a!important}
.studio-button:not(.primary),.work-meta a{background:#fff!important;border-color:#fff!important;color:#082e4a!important}
.studio-button.primary:hover,.in-studio .talk:hover,.studio-contact .small-pill:hover{background:#fff!important;border-color:#fff!important;color:#082e4a!important}
.studio-button:not(.primary):hover,.work-meta a:hover{background:#18cbfe!important;border-color:#18cbfe!important;color:#082e4a!important}
.studio-process{background:linear-gradient(180deg,#08263c,#0b5273 60%,#08263c)}
/* Compact closing invitation and quieter project heading. */
.featured-heading h2{font-family:Montserrat,Arial,sans-serif;font-size:clamp(30px,3.2vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1.1}
.studio-contact{align-items:end;grid-template-columns:1fr auto;gap:40px;padding:70px 5% 60px}.studio-contact h2{font-size:clamp(34px,4vw,56px);font-weight:500;line-height:1.1;letter-spacing:-.045em;margin:20px 0 15px}.studio-contact .contact-copy>p{margin:0;font-size:14px;color:#d1e8f3;max-width:420px}.contact-action{padding-bottom:5px}.contact-cta{border:1px solid #18cbfe;border-radius:30px;background:#18cbfe;color:#082e4a;padding:16px 25px;font:600 12px Montserrat,Arial,sans-serif;transition:background .25s,border-color .25s,transform .25s}.contact-cta:hover{background:#fff;border-color:#fff;transform:translateY(-3px)}.contact-notice{font-size:12px!important;color:#d1e8f3!important;margin:12px 0 0;max-width:220px}
@media(max-width:700px){.featured-heading h2{font-size:32px}.studio-contact{grid-template-columns:1fr;gap:25px;padding:45px 6%}.studio-contact h2{font-size:38px}.contact-action{padding:0}}
/* A laptop browser for the featured websites. */
.featured-work{height:180vh;--laptop-progress:1}.featured-pin{height:100vh;min-height:640px;padding:95px 5% 30px;gap:0}.featured-heading{margin-bottom:14px}.featured-heading p{max-width:270px;line-height:1.5}.laptop-scene{flex:1;min-height:0;width:min(100%,1160px);margin:0 auto;display:flex;flex-direction:column;justify-content:center;transform:translateY(calc((1 - var(--laptop-progress))*35px)) scale(calc(.94 + var(--laptop-progress)*.06));transform-origin:center;will-change:transform}.laptop-screen{height:min(100%,650px);min-height:0;display:flex;flex-direction:column;padding:10px 10px 0;border-radius:16px 16px 0 0;background:linear-gradient(120deg,#384b5a,#0c151e 15%,#263b4a 100%);box-shadow:0 30px 75px #000c1c88,0 0 0 1px #b2d4e365}.laptop-bezel{position:relative;background:#080f16;border-radius:8px 8px 0 0;padding:12px 9px 0;display:flex;flex:1;min-height:0}.laptop-camera{position:absolute;top:4px;left:50%;height:4px;width:4px;border-radius:50%;background:#566c78}.browser-window{display:flex;flex-direction:column;background:#e9eef2;color:#253749;border-radius:6px 6px 0 0;overflow:hidden;flex:1;min-height:0}.browser-top{display:flex;align-items:center;gap:14px;background:#d8e1e7;padding:7px 12px 0;min-height:37px}.window-controls{display:flex;gap:5px;flex:none}.window-controls i{width:8px;height:8px;border-radius:50%;background:#aabac4}.window-controls i:first-child{background:#ff8178}.window-controls i:nth-child(2){background:#edc266}.window-controls i:nth-child(3){background:#73ca8b}.laptop-tabs{display:flex;gap:3px;align-self:stretch;overflow-x:auto;scrollbar-width:none}.laptop-tabs::-webkit-scrollbar{display:none}.laptop-tab{display:flex;align-items:center;gap:7px;border:0;border-radius:7px 7px 0 0;background:#c5d1d9;color:#506171;padding:8px 14px;font:500 10px Montserrat,Arial,sans-serif;white-space:nowrap;min-width:110px}.laptop-tab.active{background:#f5f7f8;color:#122b40}.laptop-tab:focus-visible{outline:2px solid #087ea5;outline-offset:-2px}.tab-dot{height:7px;width:7px;border-radius:50%;background:#18cbfe;flex:none}.browser-address{display:flex;gap:14px;align-items:center;padding:7px 12px;background:#f5f7f8;font:12px Arial,sans-serif;color:#66808e}.browser-url{display:block;flex:1;text-align:center;border-radius:5px;background:#e5ebee;padding:6px;color:#405b69;font-size:11px}.laptop-content{flex:1;min-height:0;background:#fff;overflow:hidden;position:relative}.laptop-panel{height:100%;width:100%}.laptop-panel img,.laptop-panel iframe{width:100%;height:100%;display:block;border:0}.laptop-panel img{object-fit:cover;object-position:center top}.laptop-panel iframe{background:white}.laptop-base{height:14px;flex:none;background:linear-gradient(#abb9c3,#6e8190 48%,#364b5a);border-radius:0 0 50% 50% / 0 0 100% 100%;margin:0 -2%;box-shadow:0 17px 35px #00101dcc}.laptop-base span{display:block;margin:auto;width:13%;height:4px;background:#526a7a;border-radius:0 0 8px 8px}.laptop-actions{width:min(100%,1160px);margin:17px auto 0;display:flex;justify-content:space-between;align-items:end;gap:15px}.project-count{font:10px 'IBM Plex Mono',monospace;color:#a5d7e8}.laptop-actions h3{font-size:clamp(19px,2vw,28px);font-weight:500;letter-spacing:-.03em;margin:5px 0 0}.project-actions{display:flex;gap:8px;align-items:center}.project-actions button,.project-actions a{border-radius:26px;padding:12px 16px;font:600 11px Montserrat,Arial,sans-serif;white-space:nowrap;transition:background .2s,color .2s}.project-live{background:#18cbfe;color:#082e4a;border:1px solid #18cbfe}.project-actions a{background:#fff;color:#082e4a;border:1px solid #fff}.project-live:hover,.project-actions a:hover{background:#b9efff;border-color:#b9efff}.embed-note{font-size:10px;line-height:1.4;color:#d5eefa;text-align:right;margin:8px auto 0;width:min(100%,1160px)}
@media(max-width:700px){.featured-work{height:auto;min-height:0;padding:0}.featured-pin{height:auto;min-height:0;position:relative;padding:80px 5% 90px}.featured-heading{margin-bottom:25px}.laptop-scene{height:340px;transform:none}.laptop-screen{height:100%;padding:6px 6px 0;border-radius:12px 12px 0 0}.laptop-bezel{padding:9px 5px 0}.browser-top{gap:7px;padding:5px 7px 0}.window-controls{gap:3px}.window-controls i{width:6px;height:6px}.laptop-tab{min-width:auto;font-size:9px;padding:8px 10px}.browser-address{font-size:10px;padding:5px 7px}.browser-url{font-size:9px}.laptop-panel img{object-position:center top}.laptop-actions{align-items:start;flex-direction:column;gap:14px;margin-top:20px}.project-actions{flex-wrap:wrap}.project-actions button,.project-actions a{font-size:10px;padding:11px 14px}.embed-note{text-align:left}}
@media(prefers-reduced-motion:reduce){.laptop-scene{transform:none}}
/* Show the entire desktop viewport inside the laptop screen. */
.laptop-scene{width:min(100%,1100px,calc((100vh - 340px)*1.7778));align-items:center}.laptop-screen{width:100%;height:auto;flex:none}.laptop-bezel{flex:none}.browser-window{flex:none;width:100%}.laptop-content{flex:none;width:100%;height:auto;aspect-ratio:16/9;position:relative}.laptop-panel{position:absolute;inset:0;overflow:hidden;background:#111d27}.laptop-panel img{object-fit:contain;object-position:center center;background:#111d27}.laptop-panel iframe{position:absolute;top:0;left:0;width:1920px!important;height:1080px!important;transform:scale(var(--desktop-scale, .5));transform-origin:top left;max-width:none}.laptop-base{width:104%;margin:0}
@media(max-width:700px){.laptop-scene{width:100%;height:auto}.laptop-screen{height:auto}.laptop-panel img{object-fit:contain;object-position:center center}}
/* The laptop matches the proportions of the captured browser previews. */
.laptop-scene{width:min(100%,1100px,calc((100vh - 340px)*1.4557))}.laptop-content{aspect-ratio:1348/926}.laptop-panel img{object-fit:contain;background:#111d27}.mobile-preview-note{display:none}
@media(max-width:700px){
 .featured-pin{overflow:visible}.laptop-scene{width:100%;height:auto;margin:75px auto 0;overflow:visible}.laptop-screen{position:relative;width:min(260px,72vw);height:auto;border-radius:37px;padding:8px;background:linear-gradient(115deg,#647684,#15202a 28%,#415663 100%);box-shadow:0 18px 45px #000b1c88,0 0 0 2px #a9bdc7}
 .laptop-bezel{position:relative;padding:0;border-radius:30px;overflow:visible;background:#0b1118}.laptop-camera{z-index:5;top:7px;left:50%;transform:translateX(-50%);height:16px;width:68px;border-radius:20px;background:#080c11}
 .browser-window{border-radius:28px;overflow:visible;position:relative}.browser-top{position:absolute;z-index:6;top:-65px;left:50%;transform:translateX(-50%);width:min(90vw,410px);padding:0;background:transparent;min-height:0;justify-content:center}.window-controls{display:none}.laptop-tabs{max-width:100%;gap:5px;justify-content:flex-start}.laptop-tab{background:#0d3b56;color:#d9effb;border:1px solid #ffffff55;border-radius:20px;padding:8px 11px;font-size:9px}.laptop-tab.active{background:#18cbfe;border-color:#18cbfe;color:#082e4a}.browser-address{order:2;padding:10px 9px 12px;border-radius:0 0 28px 28px}.browser-url{font-size:9px}.laptop-content{order:1;aspect-ratio:9/17;overflow:hidden;border-radius:28px 28px 0 0;background:#f2f5f7}.laptop-panel{background:#f2f5f7}.laptop-panel img{object-fit:contain;object-position:center;background:#f2f5f7}.laptop-base{display:none}.mobile-preview-note{display:block;margin:20px auto 0;text-align:center;color:#c4e1ee;font-size:10px;line-height:1.5;max-width:250px}.laptop-actions{margin-top:14px;align-items:center;text-align:center}.project-actions{justify-content:center}
}
/* Keep the MacBook display widescreen and fit the full preview within it. */
@media(min-width:701px){.laptop-scene{width:min(100%,1100px,calc((100vh - 340px)*1.7778))}.laptop-content{aspect-ratio:16/9}.laptop-panel img{object-fit:fill}}
/* Clear company, service and contact information in the footer. */
.contact-cta{display:inline-block}.footer-main .footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.footer-main nav.footer-column{visibility:visible}.footer-column h2{font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#c2e8f6;margin:0 0 10px;text-transform:uppercase}.site-footer .footer-column p{margin:0;line-height:1.5}.footer-legal{display:flex;justify-content:space-between;gap:35px;color:#c2e8f6;font:12px/1.65 Montserrat,Arial,sans-serif;padding:0 0 30px}.footer-legal strong{color:#fff;font-weight:600}.footer-legal address{font:inherit;font-style:normal;min-width:240px}.site-footer .footer-contact{overflow-wrap:anywhere}.footer-brand p{max-width:290px}
@media(max-width:700px){.footer-legal{flex-direction:column;gap:20px;font-size:11px}.footer-legal address{min-width:0}.footer-main .footer-column{gap:9px}}
/* Preserve the screenshot aspect ratio within the wide laptop display. */
@media(min-width:701px){.laptop-panel img{object-fit:contain;background:transparent}.laptop-panel[data-url*="numerisfootwear"]{background:#1d2024}.laptop-panel[data-url*="auvodka"]{background:#080808}.laptop-panel[data-url*="cosi-care"]{background:#b0dbc8}.laptop-panel[data-url*="u-test"]{background:#fff}}
.footer-local{border-top:1px solid #ffffff35;padding:28px 0 35px;display:grid;grid-template-columns:1fr 2fr;gap:10px 40px}.footer-local h2{font:600 14px/1.4 Montserrat,Arial,sans-serif;color:#fff;margin:0}.footer-local p{font:12px/1.7 Montserrat,Arial,sans-serif;color:#c2e8f6;max-width:620px;margin:0}.footer-local a{grid-column:2;width:max-content;font:600 11px Montserrat,Arial,sans-serif;color:#fff;border-bottom:1px solid #18cbfe;padding-bottom:4px}.footer-local a:hover{color:#18cbfe}@media(max-width:700px){.footer-local{grid-template-columns:1fr;gap:12px;padding:25px 0}.footer-local a{grid-column:1}}
/* A simple browser tab bar and full website preview, without device framing. */
.featured-work{height:160vh}.featured-pin{height:100vh;min-height:600px;padding:95px 5% 30px}.project-browser{width:min(100%,1160px);margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#e9eef2;box-shadow:0 24px 60px #00111e70}.project-browser-toolbar{display:flex;align-items:center;gap:14px;min-height:40px;background:#d8e1e7;padding:7px 12px 0}.project-browser-dots{display:flex;gap:5px;flex:none}.project-browser-dots i{height:9px;width:9px;background:#aabac4;border-radius:50%}.project-browser-dots i:first-child{background:#ff8178}.project-browser-dots i:nth-child(2){background:#edc266}.project-browser-dots i:nth-child(3){background:#73ca8b}.project-browser .laptop-tabs{align-self:stretch}.project-browser .laptop-tab{cursor:pointer}.project-browser-address{display:flex;align-items:center;gap:14px;background:#f5f7f8;padding:7px 12px;color:#66808e;font:12px Arial,sans-serif}.project-browser-address #browserUrl{flex:1;text-align:center;background:#e5ebee;border-radius:5px;padding:6px;color:#405b69;font-size:11px}.project-browser .laptop-content{position:relative;flex:1;min-height:0;height:auto;aspect-ratio:auto;background:#101d27;overflow:hidden}.project-browser .laptop-panel{position:absolute;inset:0}.project-browser .laptop-panel img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent}.laptop-actions{margin-top:15px}
@media(max-width:700px){.featured-work{height:auto}.featured-pin{height:auto;min-height:0;position:relative;overflow:hidden;padding:80px 5%}.project-browser{width:100%;flex:none;border-radius:9px}.project-browser-toolbar{gap:7px;padding:5px 7px 0}.project-browser .laptop-tabs{position:static;transform:none;width:auto;max-width:100%;gap:3px;justify-content:flex-start}.project-browser .laptop-tab{border:0;border-radius:7px 7px 0 0;background:#c5d1d9;color:#506171;font-size:9px;padding:8px 10px}.project-browser .laptop-tab.active{background:#f5f7f8;color:#122b40}.project-browser-address{padding:6px 8px;font-size:10px}.project-browser-address #browserUrl{font-size:9px}.project-browser .laptop-content{aspect-ratio:1348/926;flex:none;min-height:0}.project-browser .laptop-panel img{object-fit:contain}.mobile-preview-note{margin-top:12px;text-align:left;max-width:none}.laptop-actions{align-items:start;text-align:left}}
/* Size the entire browser around the selected screenshot. */
.featured-pin{--screenshot-ratio:1.4557}.project-browser{width:min(100%,1160px,calc((100vh - 335px)*var(--screenshot-ratio)));flex:none;min-height:0}.project-browser .laptop-content{flex:none;width:100%;height:auto;aspect-ratio:1348/926}.project-browser .laptop-panel img{object-fit:contain;width:100%;height:100%}.laptop-actions{width:min(100%,1160px,calc((100vh - 335px)*var(--screenshot-ratio)))}
@media(max-width:700px){.project-browser,.laptop-actions{width:100%}.project-browser .laptop-content{height:auto;flex:none;aspect-ratio:1348/926}}
/* Readable Earth copy and a distant wayfinding sign that approaches. */
.journey-sign{position:absolute;z-index:1;right:6%;bottom:12%;width:clamp(150px,17vw,270px);opacity:0;pointer-events:none;transform-origin:50% 100%;filter:drop-shadow(0 10px 12px #071c2c88);will-change:transform,opacity}.journey-sign svg{width:100%;height:auto;display:block}
/* Light-touch VR markers let the lunar environment take the lead. */
@media(max-width:700px){.journey-sign{right:1%;bottom:24%;width:150px}}
/* Keep the moon copy simple and let the landscape lead. */