@view-transition { navigation: auto; }
/* Preserve the actual screenshot proportions in the interactive device preview. */
.lab .device[data-view=mobile]{width:min(100%,260px);border-radius:28px}
.lab .device[data-view=tablet]{width:min(100%,360px)}
.lab .device[data-view=mobile] .device-scroll,
.lab .device[data-view=tablet] .device-scroll{height:auto;overflow:hidden}
.lab .device[data-view=mobile] .device-scroll img,
.lab .device[data-view=tablet] .device-scroll img{display:block;width:100%;height:auto;min-height:0;object-fit:contain}
@media(max-width:650px){.lab .device[data-view=mobile]{width:min(100%,230px)}.lab .device-stage{padding-inline:16px}}

.build-sketch{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--sketch,0);background:#141019eF;color:#e4d6ff;font-family:'Caveat',cursive;container-type:inline-size;transform:translateY(calc((1 - var(--sketch,0))*12px))}
.sketch-logo{position:absolute;left:7%;top:7%;font-size:4cqi;transform:rotate(-3deg)}
.sketch-nav{position:absolute;right:6%;top:9%;font-size:2.7cqi}
.sketch-photo{position:absolute;inset:24% 22% 35%;border:1.5px dashed #b69aff90;border-radius:47% 2% 4% 2% / 3% 3% 4% 2%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:4.2cqi;transform:rotate(-1deg)}
.sketch-photo small{font-size:2.7cqi;color:#b69aff}
.sketch-copy{position:absolute;left:18%;bottom:6%;display:flex;flex-direction:column;gap:1cqi;transform:rotate(-2deg)}
.sketch-copy strong{font-size:6cqi;font-weight:400;line-height:1}
.sketch-copy>span{font-size:3cqi}.sketch-copy i{font-size:2.6cqi;font-style:normal;text-decoration:underline;text-underline-offset:4px}
.sketch-note{position:absolute;right:5%;bottom:9%;font-size:3cqi;line-height:1.15;color:#b69aff;transform:rotate(7deg)}
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){.motion-experience .build-journey[data-scroll-scene]{height:260vh}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
::view-transition-group(project-maler),::view-transition-group(project-diana){animation-duration:.65s;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
.project-image{isolation:isolate}
.project-image::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(340px circle at var(--mouse-x,50%) var(--mouse-y,50%),#ba8cff45,transparent 75%);opacity:0;transition:opacity .35s;mix-blend-mode:screen}
.project-image:hover::after{opacity:1}
.project-image:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.project-image.is-opening .browser-frame{transform:scale(1.07)!important;transition:transform .2s}
.scene-sticky{padding:70px 5%;display:grid;grid-template-columns:.75fr 1.25fr;gap:6%;align-items:center;min-height:600px}
.scene-heading h2{font-size:clamp(36px,4vw,62px);line-height:1.06;letter-spacing:-.05em;margin:24px 0}
.scene-heading p{max-width:420px;color:var(--muted);font-size:17px}
.build-journey,.device-journey{border-top:1px solid var(--line);background:radial-gradient(ellipse at 80% 50%,#773fc321,transparent 65%)}
.build-stages{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;gap:15px;color:var(--muted);font-size:14px}
.build-stages li.active{color:var(--purple)}
.build-browser{border:1px solid #b69aff60;border-radius:12px;overflow:hidden;box-shadow:0 30px 100px #0008;transform:perspective(1400px) rotateY(calc(-10deg + var(--scene,1)*10deg))}
.build-canvas{position:relative;aspect-ratio:1400/774;background:#141019}
.build-canvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.build-content{filter:grayscale(1);opacity:var(--content,1)}
.build-color{clip-path:inset(0 calc((1 - var(--color,1))*100%) 0 0)}
.build-wire{position:absolute;inset:7%;display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:12% 1fr;gap:12%;background-image:linear-gradient(#b69aff0f 1px,transparent 1px),linear-gradient(90deg,#b69aff0f 1px,transparent 1px);background-size:20px 20px}
.build-wire>div{border:1px solid #b69aff80;border-radius:3px}
.fill-section{padding-block:110px;border-block:1px solid var(--line)}
.fill-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(45px,9.3vw,145px);font-weight:700;line-height:1.02;letter-spacing:-.055em;margin-bottom:35px;color:var(--purple)}
.motion-experience .fill-title{color:transparent;-webkit-text-stroke:1px #b69aff80;background:linear-gradient(100deg,#f3f1f8 0%,#b69aff 65%,#8860f2 100%);background-size:var(--fill,0%) 100%;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text}
.device-family{position:relative;min-height:430px;perspective:1600px}
.screen{margin:0;border:7px solid #28222f;background:#17131e;box-shadow:0 20px 50px #0008;position:absolute;border-radius:12px}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:5px}
.screen figcaption{position:absolute;bottom:-38px;left:0;color:var(--muted);font-size:13px}
.screen-desktop{width:85%;aspect-ratio:16/10;left:0;top:8%;transform:translateX(calc(var(--devices,1)*-4%)) scale(calc(1 - var(--devices,1)*.13));transform-origin:left center}
.screen-tablet{width:32%;aspect-ratio:3/4;right:8%;top:22%;transform:translateX(calc((1 - var(--devices,1))*-80%)) translateY(calc((1 - var(--devices,1))*40px));opacity:var(--devices,1)}
.screen-phone{width:18%;aspect-ratio:400/866;right:0;top:45%;transform:translateX(calc((1 - var(--devices,1))*-130%)) translateY(calc((1 - var(--devices,1))*75px));opacity:var(--devices,1)}
.case-intro h1{max-width:1100px;font-size:clamp(44px,7vw,100px)}
.case-intro .button{margin-top:30px}
.case-cover{padding-top:0;padding-bottom:40px}
.case-cover>img{border-radius:10px;border:1px solid var(--line)}
.case-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin:35px 0 60px}
.case-columns h2{font-size:28px;line-height:1.15;margin-bottom:22px}
.case-columns h3{font-size:24px;margin-bottom:18px}
.case-columns p,.included-grid p,.hosting p{color:var(--muted)}
.case-photo{border-radius:8px;max-height:700px;object-fit:cover}
.image-caption,figcaption{color:var(--muted);font-size:14px;margin-top:14px}
.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:55px}
.case-gallery figure{margin:0}.case-gallery img{border-radius:8px;border:1px solid var(--line)}
.feature-number{display:block;color:var(--purple);font-size:14px;margin-bottom:24px}
.case-quote{border-block:1px solid var(--line);background:linear-gradient(120deg,#21142f,#09090c)}
.case-quote blockquote{font-size:clamp(24px,3vw,42px);line-height:1.4;max-width:1000px;margin:30px 0}
.case-quote>p{color:var(--muted)}
.included-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:45px 0 85px}
.included-grid article{border-top:1px solid var(--line);padding-top:25px}.included-grid h3{margin-bottom:15px;font-size:23px}
.hosting{border-block:1px solid var(--line)}.hosting>h2{margin:20px 0}.hosting>p{max-width:760px}
.hosting-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.hosting-grid article{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px}
.hosting-grid article>p:last-child{margin-top:25px}.hosting-grid .hosting-price{font-size:38px;color:var(--ink);margin-top:20px}.hosting-price small{display:block;font-size:14px;color:var(--muted)}
.starter-note{border-left:2px solid var(--purple);background:#b69aff0b;padding:25px;margin-bottom:30px}.starter-note p{margin-top:10px;color:var(--muted)}
.original-contact p{margin:25px 0;color:var(--muted)}
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){
 .motion-experience .build-journey,.motion-experience .device-journey{height:220vh}
 .motion-experience .scene-sticky{position:sticky;top:96px;height:calc(100vh - 96px);min-height:500px;padding-block:35px}
}
@media(max-width:999px){.scene-sticky{grid-template-columns:1fr;gap:45px;padding-block:60px}.scene-heading p{max-width:650px}.build-browser{transform:none}.device-family{width:min(100%,680px);margin:auto;min-height:430px}.case-columns{gap:25px}.hosting-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.case-columns,.case-gallery,.included-grid,.hosting-grid{grid-template-columns:1fr}.case-columns{margin-bottom:35px}.device-family{min-height:310px}.screen{border-width:4px}.screen-tablet{top:18%}.screen-phone{top:35%}.fill-section{padding-block:70px}.case-intro h1{font-size:44px}.case-columns h2{font-size:26px}.case-gallery{gap:30px}.case-quote blockquote{margin-inline:0}.scene-sticky{min-height:0}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.build-browser,.screen{transform:none}.project-image::after{display:none}.build-content,.screen-tablet,.screen-phone{opacity:1}.build-color{clip-path:none}}

/* Preserve screenshot proportions instead of retaining HTML pixel heights. */
.case-cover>img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.case-photo{width:100%;height:auto;max-width:100%;object-fit:contain}
.projects-page main,.projects-page main .section,.case-columns>*,.type-grid>*,.palette-grid>*{min-width:0;max-width:100%}
.projects-page main h1,.projects-page main h2,.projects-page main h3,.type-alphabet{overflow-wrap:anywhere}
.gallery-toolbar>p{min-width:0;overflow-wrap:anywhere}.gallery-controls{flex-wrap:wrap}
.comparison-help-touch{display:none}
@media(hover:none) and (pointer:coarse){.comparison-help-desktop{display:none}.comparison-help-touch{display:block}}

/* Keep project scope visibly connected to its cover image. */
.projects-page .section.case-cover{padding-bottom:0}
.projects-page .case-cover+.section.case-story{padding-top:36px}
@media(max-width:760px){.projects-page .case-cover+.section.case-story{padding-top:24px}}