/* App-first presentation. Supplied app screenshots remain unaltered. */
.hero-panel{grid-template-columns:1.04fr 1fr;
background:radial-gradient(ellipse at 84% 51%,#543729 0,transparent 44%),#17161b}

.hero h1{font-size:clamp(64px,6.6vw,100px)}

.hero-app-stage{position:relative;
min-height:520px;
isolation:isolate;
align-self:center}

.app-stage-orbit{position:absolute;
width:580px;
height:580px;
left:-15px;
top:-20px;
border:1px solid #dfb29518;
border-radius:50%;
box-shadow:0 0 0 55px #dfb29505,0 0 0 110px #dfb29504}

.hero-device{position:absolute;
width:222px;
border:6px solid #272426;
border-radius:32px;
background:#17161b;
box-shadow:0 35px 50px #0007,0 0 0 1px #a99c8b7a;
will-change:transform;
transition:filter .3s}

.hero-device img{display:block;
width:100%;
height:auto;
aspect-ratio:739/1600;
object-fit:cover;
border-radius:25px}

.hero-device>span{position:absolute;
bottom:-37px;
left:8px;
right:0;
display:flex;
align-items:center;
gap:12px;
color:#eee7e2;
font-size:12px;
font-weight:600;
letter-spacing:.04em;
white-space:nowrap}

.hero-device small{font-size:7px;
font-weight:500;
letter-spacing:.16em;
color:#c4b6ae}

.hero-device-sports{left:0;
top:35px;
transform:rotate(-12deg);
animation:device-sports 8s ease-in-out infinite}

.hero-device-imi{width:244px;
left:44%;
top:8px;
transform:rotate(8deg);
animation:device-imi 9s ease-in-out infinite}

.hero-device:hover{filter:brightness(1.1)}

.hero-product-tag{position:absolute;
top:-35px;
left:25px;
display:flex;
align-items:center;
gap:10px;
font-size:10px;
letter-spacing:.03em;
color:#e0d0c5}

.hero-stage-label{position:absolute;
right:-14px;
bottom:25px;
background:#f4ece4;
color:#2b2425;
border:1px solid #fff9;
border-radius:17px;
padding:18px 42px 18px 20px;
box-shadow:0 16px 38px #0005;
transform:rotate(-4deg)}

.hero-stage-label>span{font-size:7px;
letter-spacing:.12em;
color:#8c7370;
display:block;
margin-bottom:8px}
.hero-stage-label strong{font-size:15px;
line-height:1.3;
font-weight:550}
.hero-stage-label svg{position:absolute;
right:14px;
top:19px;
width:17px}

.client-names>a{display:flex;
align-items:center}
.studio-note{font-size:10px;
line-height:1.65;
color:#88818b;
font-weight:400}
.studio-note strong{color:#504852;
font-weight:500}

.portfolio{padding-top:75px;
padding-bottom:24px}
.project-jump-links{display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:15px;
margin-bottom:32px}
.project-jump-links a{border-top:1px solid #d8d4cf;
display:flex;
align-items:center;
gap:14px;
padding:20px 3px;
font-size:15px;
font-weight:600;
transition:border-color .2s,color .2s}
.project-jump-links a:hover{color:#a3445f;
border-color:#a3445f}
.project-jump-links span{font-size:10px;
font-weight:400;
color:#a1959d}
.project-jump-links small{font-size:11px;
font-weight:400;
color:#93858e;
margin-left:auto;
margin-right:9px}

.imi-app-feature{background:#211b18;
color:#f5eee7;
border:1px solid #423328;
border-radius:30px;
overflow:hidden;
margin-bottom:30px;
position:relative}

.imi-app-heading{display:grid;
grid-template-columns:1.2fr 1fr;
gap:65px;
padding:62px 65px 0;
position:relative;
z-index:1}
.imi-app-heading .eyebrow{color:#c39a76;
font-size:9px}
.imi-app-heading h3{font-size:clamp(45px,4.5vw,66px);
line-height:1.06;
margin-top:23px}
.imi-app-heading h3 span{color:#cfad92}
.imi-app-intro{padding-top:31px}
.imi-app-intro>p{color:#cabfb5;
font-size:14px;
max-width:400px;
line-height:1.85}
.app-specs{display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:23px}
.app-specs span{font-size:9px;
border:1px solid #ffffff23;
padding:7px 11px;
border-radius:99px;
color:#d6bfae}

.imi-screen-stage{position:relative;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:65px;
align-items:start;
padding:68px 110px 40px;
isolation:isolate}
.imi-stage-glow{position:absolute;
inset:0 0 35%;
z-index:-1;
background:radial-gradient(ellipse at 50% 64%,#d477314a,transparent 68%)}
.imi-screen-item{margin:0;
min-width:0}
.imi-screen-button{position:relative;
display:block;
padding:0;
background:transparent;
color:inherit;
border:0;
width:100%;
max-width:254px;
margin-inline:auto;
transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.screen-device{display:block;
background:#171717;
padding:7px;
border-radius:31px;
box-shadow:0 0 0 1px #c9b3a57a,0 35px 42px #0006;
overflow:hidden}
.screen-device img{display:block;
width:100%;
height:auto;
border-radius:24px;
aspect-ratio:739/1600;
object-fit:contain;
background:#312823}
.imi-screen-0 .imi-screen-button{transform:translateY(15px) rotate(-5deg)}
.imi-screen-1 .imi-screen-button{transform:translateY(-10px)}
.imi-screen-2 .imi-screen-button{transform:translateY(15px) rotate(5deg)}
.imi-screen-button:hover,.imi-screen-button:focus-visible{transform:translateY(-15px) rotate(0)!important}
.screen-expand{position:absolute;
right:-12px;
bottom:21px;
display:grid;
place-items:center;
width:40px;
height:40px;
border-radius:50%;
background:#efcaa9;
color:#372b20;
font-size:23px;
box-shadow:0 5px 20px #0004}
.imi-screen-item figcaption{display:flex;
gap:13px;
margin-top:43px}
.screen-index{color:#ab7750;
font-size:10px;
padding-top:5px}
.imi-screen-item h4{font-size:16px;
line-height:1.35;
letter-spacing:-.025em;
font-weight:500}
.imi-screen-item figcaption p{color:#b5a496;
font-size:11px;
line-height:1.7;
margin-top:9px;
max-width:225px}

.imi-project-footer{border-top:1px solid #ffffff14;
margin:0 65px;
padding-top:28px;
display:flex;
justify-content:space-between;
gap:20px;
align-items:center}
.imi-project-footer>p{display:flex;
align-items:center;
gap:10px;
font-size:10px;
color:#c4af9b}
.imi-project-footer .live-dot{background:#c6a986;
box-shadow:none;
width:5px;
height:5px}
.imi-project-footer>div{display:flex;
gap:25px;
flex-wrap:wrap}
.imi-project-footer .text-link{font-size:11px;
color:#f5ddc4}
.imi-scope{margin:20px 65px 30px;
color:#9e8e80;
font-size:9px;
line-height:1.6}

.portfolio-additional{border-bottom:1px solid var(--line);
margin-top:42px;
padding-bottom:24px}
.portfolio-additional>summary{display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
list-style:none;
padding:18px 0;
font-size:27px;
font-family:'Space Grotesk',sans-serif;
letter-spacing:-.03em}
.portfolio-additional>summary::-webkit-details-marker{display:none}
.portfolio-additional summary small{display:block;
font-family:'DM Sans',sans-serif;
font-size:8px;
letter-spacing:.15em;
color:#9c8590;
margin-bottom:12px}
.additional-plus{width:46px;
height:46px;
border:1px solid #d9cbd2;
border-radius:50%;
display:grid;
place-items:center;
font-size:28px;
font-weight:400;
flex:none;
margin-left:20px}
.portfolio-additional[open] .additional-plus{transform:rotate(45deg)}
.portfolio-additional .portfolio-more-heading{margin:0 0 25px}
.portfolio-additional .portfolio-project{opacity:1;
transform:none}

.app-screen-dialog{position:fixed;
width:min(610px,calc(100% - 24px));
height:min(950px,calc(100dvh - 30px));
max-height:calc(100dvh - 30px);
padding:20px 25px 14px;
border:1px solid #564034;
border-radius:24px;
background:#211b18;
color:#f7eee7;
overflow:hidden;
box-shadow:0 25px 100px #0009}
.app-screen-dialog::backdrop{background:#08070bdd;
backdrop-filter:blur(9px)}
.app-screen-dialog[open]{display:flex;
flex-direction:column;
gap:13px}
body:has(.app-screen-dialog[open]){overflow:hidden}
.screen-viewer-head{display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
flex:none}
.screen-viewer-head p{font-size:8px;
letter-spacing:.15em;
color:#c6aa90}
.screen-viewer-head h3{font-size:23px;
margin-top:7px;
letter-spacing:-.03em}
.screen-viewer-close{width:43px;
height:43px;
border-radius:50%;
border:1px solid #705647;
background:transparent;
color:white;
flex:none}
.screen-viewer-image{min-height:0;
flex:1;
text-align:center;
display:flex;
justify-content:center}
.screen-viewer-image img{max-height:100%;
max-width:100%;
width:auto;
height:100%;
object-fit:contain;
border-radius:16px}
.screen-viewer-controls{display:flex;
align-items:center;
justify-content:center;
gap:28px;
flex:none}
.screen-viewer-controls button{border:1px solid #68513d;
border-radius:50%;
background:transparent;
color:#ebc9a5;
width:42px;
height:42px;
font-size:20px}
.screen-viewer-count{font-size:12px;
color:#c9b4a2}

@keyframes device-sports{0%,100%{transform:translateY(0) rotate(-12deg)}
50%{transform:translateY(-12px) rotate(-10deg)}
}

@keyframes device-imi{0%,100%{transform:translateY(0) rotate(8deg)}
50%{transform:translateY(10px) rotate(6deg)}
}

.motion-paused .hero-device{animation-play-state:paused}

@media(min-width:1500px){.hero-device-sports{left:25px}
.hero-device-imi{left:48%}
.hero-app-stage{margin-left:20px}
}

@media(max-width:1100px){.hero h1{font-size:72px}
.hero-panel{padding-inline:40px;
grid-template-columns:1fr 1fr;
gap:20px}
.hero-device{width:180px}
.hero-device-imi{width:200px;
left:43%;
top:35px}
.hero-device-sports{top:65px}
.hero-app-stage{min-height:510px}
.hero-stage-label{bottom:25px;
right:-15px}
.imi-app-heading{padding:42px 40px 0;
gap:35px}
.imi-screen-stage{padding:60px 55px 32px;
gap:35px}
.imi-project-footer{margin-inline:40px;
align-items:flex-start}
.imi-project-footer>div{gap:14px}
.imi-scope{margin-inline:40px}
.imi-screen-item h4{font-size:14px}
.studio-note{display:none}
}

@media(max-width:850px){.hero-panel{grid-template-columns:1fr;
padding-bottom:95px}
.hero-copy{max-width:570px}
.hero h1{font-size:80px}
.hero-app-stage{width:480px;
max-width:100%;
margin:65px auto 0;
min-height:575px}
.hero-device{width:215px;
left:10px}
.hero-device-imi{width:237px;
left:47%;
top:10px}
.hero-device-sports{top:37px}
.hero-stage-label{bottom:15px;
right:0}
.imi-screen-stage{gap:25px;
padding-inline:35px}
.imi-app-heading{grid-template-columns:1fr;
gap:15px}
.imi-app-intro{padding-top:0}
.imi-app-intro>p{max-width:560px}
.imi-project-footer{flex-direction:column}
.imi-screen-item figcaption{gap:8px}
.project-jump-links small{display:none}
}

@media(max-width:600px){.hero-panel{padding:38px 25px 72px;
gap:0;
border-radius:25px}
.hero h1{font-size:clamp(51px,12.7vw,73px);
margin:27px 0}
.hero-intro{font-size:14px}
.hero-app-stage{width:320px;
min-height:425px;
margin-top:64px}
.hero-device{width:148px;
border-width:5px;
border-radius:25px;
left:4px;
top:28px}
.hero-device img{border-radius:19px}
.hero-device-imi{width:166px;
left:46%;
top:5px}
.hero-device>span{font-size:10px;
gap:8px;
bottom:-30px}
.hero-device small{font-size:6px}
.hero-product-tag{font-size:8px;
left:6px;
top:-25px}
.hero-stage-label{bottom:0;
right:0;
padding:13px 35px 13px 15px;
border-radius:12px}
.hero-stage-label strong{font-size:12px}
.hero-stage-label>span{font-size:6px;
margin-bottom:6px}
.hero-stage-label svg{right:11px;
top:13px;
width:14px}
.hero-baseline{flex-wrap:wrap;
font-size:9px;
margin-top:25px;
gap:9px}
.hero-actions{flex-wrap:wrap;
gap:20px}
.hero-actions .button{font-size:12px}
.hero-footer{left:24px;
right:20px}
.app-stage-orbit{width:390px;
height:390px;
left:-40px;
top:-15px}
.client-names{display:flex;
flex-wrap:wrap;
gap:20px 25px;
width:100%;
justify-content:space-between}
.client-names .grypx-logo{font-size:24px}
.client-names .food-logo{font-size:23px}
.client-names .imi-logo{font-size:31px}
.client-names .imi-logo>span{font-size:6px;
max-width:45px}
.client-strip{padding-block:28px;
gap:19px}
.portfolio{padding-top:36px}
.work-heading h2{font-size:44px}
.work-heading>p{font-size:14px}
.project-jump-links{gap:13px;
margin-bottom:24px}
.project-jump-links a{font-size:12px;
gap:7px;
padding:17px 0;
flex-wrap:wrap}
.project-jump-links span{font-size:8px}
.imi-app-feature{border-radius:23px}
.imi-app-heading{padding:33px 25px 0;
gap:19px}
.imi-app-heading .eyebrow{font-size:8px}
.imi-app-heading h3{font-size:47px;
margin-top:20px}
.imi-app-intro>p{font-size:13px}
.app-specs{gap:6px;
margin-top:17px}
.app-specs span{font-size:8px;
padding:6px 9px}
.imi-screen-stage{display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:25px;
padding:45px 34px 32px;
scroll-padding-inline:34px;
scrollbar-width:thin;
scrollbar-color:#87634a #2c201b}
.imi-screen-item{flex:0 0 76%;
scroll-snap-align:center;
max-width:260px}
.imi-screen-button{max-width:220px}
.imi-screen-0 .imi-screen-button,.imi-screen-1 .imi-screen-button,.imi-screen-2 .imi-screen-button{transform:none}
.screen-device{border-radius:28px;
padding:6px}
.screen-device img{border-radius:22px}
.imi-screen-item figcaption{margin-top:26px;
gap:12px}
.imi-screen-item h4{font-size:16px}
.imi-screen-item figcaption p{font-size:12px}
.imi-project-footer{margin:0 25px;
padding-top:23px;
gap:21px}
.imi-project-footer>p{font-size:9px;
gap:8px}
.imi-project-footer>div{gap:20px}
.imi-project-footer .text-link{font-size:11px}
.imi-scope{margin:22px 25px 28px;
font-size:9px}
.portfolio-additional>summary{font-size:22px}
.additional-plus{width:39px;
height:39px}
.portfolio-additional summary small{font-size:7px}
.app-screen-dialog{padding:17px 16px 12px;
border-radius:19px}
.screen-viewer-head h3{font-size:19px}
.screen-viewer-close{width:39px;
height:39px}
}

@media(prefers-reduced-motion:reduce){.hero-device{animation:none}
.imi-screen-button,.project-jump-links a{transition:none}
}