/* Real screenshots are framed directly at the outside of each phone bezel.
   The source pixels remain unchanged; each panel is an independent crop. */
.phone-crop{position:relative;display:block;aspect-ratio:var(--crop-width)/var(--crop-height);overflow:hidden;border-radius:12% / 7%;background:transparent;isolation:isolate;flex:none}
.phone-crop>img{position:absolute;display:block;max-width:none!important;width:calc(100% * var(--source-width) / var(--crop-width))!important;height:auto!important;max-height:none!important;left:calc(-100% * var(--crop-x) / var(--crop-width));top:calc(-100% * var(--crop-y) / var(--crop-height));margin:0!important;border-radius:0!important;box-shadow:none!important;object-fit:fill!important;transform:none!important}
.hero-visual .hero-phone{position:absolute;width:40%;height:auto;transform:none;box-shadow:12px 25px 35px #08000c66,1px 1px 2px #bb99bc44;filter:none}
.hero-visual .phone-front{left:6%;top:83px;rotate:-4deg;z-index:3}
.hero-visual .phone-mid{left:56%;top:44px;rotate:4deg;z-index:2}
.hero-visual .phone-back{display:none}
.hero-visual .floating-tag{bottom:8px;left:7%;rotate:0deg;transform:none}
.hero-visual .visual-caption{bottom:-27px;left:0}
.hero-visual .orbit{bottom:34px}
.showcase-phone{--device-height:565px;position:absolute;height:var(--device-height);width:calc(var(--device-height) * 7 / 12);transform:rotate(-7deg);box-shadow:20px 25px 60px #0f001880}
.booking-images{align-items:flex-start;gap:26px;padding-inline:15px}
.booking-images>.phone-crop{width:39%;height:auto;box-shadow:5px 6px 16px #16071c55}
.booking-images>.phone-crop:last-child{margin-top:25px}
.demo-screen>.phone-crop{width:min(100%,340px,calc(62dvh * 7 / 12));box-shadow:0 15px 30px #0b000c55}
.work-phone-stage{height:405px;padding:27px 22px;display:flex;align-items:center;justify-content:center;gap:22px;border:1px solid #654469;border-radius:15px;background:radial-gradient(ellipse at 50% 70%,#503056,#29102e 72%);overflow:hidden;perspective:800px}
.work-phone-stage>.phone-crop{width:calc(50% - 11px);max-height:350px;box-shadow:0 14px 20px #12031680;border-radius:13% / 6%;transition:translate .4s cubic-bezier(.16,1,.3,1)}
.work-phone-stage>.phone-crop:only-child{width:155px;max-height:none}
.work-card:hover .work-phone-stage>.phone-crop:first-child{translate:0 -6px}.work-card:hover .work-phone-stage>.phone-crop:nth-child(2){translate:0 6px}
.work-card:active .work-phone-stage{scale:.985;transition:scale .18s}
.work-dialog-phones{display:flex;justify-content:center;align-items:center;gap:32px;padding:20px;background:radial-gradient(ellipse,#54335f,#240626 70%);border-radius:14px;overflow:hidden}
.work-dialog-phones>.phone-crop{width:min(40%,240px);box-shadow:0 15px 30px #0b000c88;border-radius:13% / 6%}
.work-dialog-phones>.phone-crop:only-child{width:min(65%,270px,calc(65dvh * .44))}
.home-screen-section{padding-bottom:95px}.home-screen-section figure{margin:0}.home-screen-section img{width:100%;height:auto;max-height:650px;object-fit:contain;border-radius:20px}.home-screen-section figcaption{font-size:12px;line-height:1.8;text-align:center;color:var(--muted);max-width:650px;margin:24px auto 0}
.hero-visual.is-on-screen .phone-front{animation:device-float 7s ease-in-out infinite}
.hero-visual.is-on-screen .phone-mid{animation:device-float 8s ease-in-out -3s infinite}
.hero-visual.is-on-screen .floating-tag{animation:tag-float 9s ease-in-out infinite}
.hero-visual.is-on-screen .hero-glow{animation:ambient-glow 8s ease-in-out infinite}
.button svg,.text-link svg,.work-card-caption svg{transition:translate .3s cubic-bezier(.16,1,.3,1)}
.button:hover svg,.text-link:hover svg,.work-card:hover .work-card-caption svg{translate:3px -2px}
.button:active{scale:.98}.feature-tab{transition:background .3s,color .3s,border-color .3s}.feature-tab .feature-icon{transition:background .3s,color .3s,scale .3s}.feature-tab.active .feature-icon{scale:1.04}
.faq-list details[open]>p,.catalogue-group[open]>ul{animation:answer-in .35s ease-out}
.process li.is-revealed:after{animation:process-line .85s ease-out both;transform-origin:left}
@keyframes device-float{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes tag-float{0%,100%{translate:0 0}50%{translate:0 6px}}
@keyframes ambient-glow{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes answer-in{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@keyframes process-line{from{scale:0 1;opacity:0}to{scale:1 1;opacity:1}}
@media(max-width:1150px){.showcase-phone{--device-height:490px}.work-phone-stage{height:350px;padding:20px 15px;gap:17px}.work-phone-stage>.phone-crop{width:calc(50% - 9px)}.work-phone-stage>.phone-crop:only-child{width:135px}}
@media(min-width:681px) and (max-width:900px){.hero-visual{transform:scale(.7);margin-left:-110px;margin-right:12px}.hero-visual .phone-front{left:1%}.hero-visual .phone-mid{left:54%}.work-phone-stage{height:280px;padding:15px 10px;gap:12px}.work-phone-stage>.phone-crop{width:calc(50% - 6px)}.work-phone-stage>.phone-crop:only-child{width:106px}.showcase-phone{--device-height:430px}}
@media(max-width:680px){.hero-visual .hero-phone{width:42%;height:auto}.hero-visual .phone-front{left:2%;top:63px;rotate:-4deg}.hero-visual .phone-mid{left:55%;top:31px;rotate:4deg}.hero-visual .floating-tag{left:3%;bottom:6px}.hero-visual .visual-caption{bottom:-20px}.showcase-phone{--device-height:445px}.booking-images{gap:20px;padding-inline:10px}.booking-images>.phone-crop{width:40%}.demo-screen>.phone-crop{width:min(85%,calc(45dvh * 7 / 12))}.home-screen-section{padding-bottom:65px}.home-screen-section img{width:100%;border-radius:12px}.home-screen-section figcaption{font-size:11px;max-width:320px;margin-top:19px}.work-phone-stage{height:390px;padding:22px;gap:24px}.work-phone-stage>.phone-crop{width:calc(50% - 12px);max-height:none}.work-phone-stage>.phone-crop:only-child{width:150px}.work-dialog-phones{gap:20px;padding:12px}.work-dialog-phones>.phone-crop{width:calc(50% - 10px)}.process li.is-revealed:after{transform-origin:top;animation:process-line-mobile .85s ease-out both}}
@media(max-width:380px){.showcase-phone{--device-height:405px}.hero-visual .phone-front{top:40px}.hero-visual .phone-mid{top:17px}.work-phone-stage{height:350px;padding:20px 15px;gap:20px}.work-phone-stage>.phone-crop{width:calc(50% - 10px)}.work-phone-stage>.phone-crop:only-child{width:133px}}
@keyframes process-line-mobile{from{scale:1 0;opacity:0}to{scale:1 1;opacity:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-phone,.floating-tag,.work-phone-stage>.phone-crop{translate:none!important}}

/* A quiet social invitation beside the contact details. */
.contact-social .instagram-follow{gap:10px;min-height:44px;color:var(--muted);transition:color .2s}
.instagram-follow>svg{width:20px;height:20px;flex:none}
.instagram-follow>span{display:grid;gap:4px}
.instagram-follow small{font-size:10px;line-height:1.4}
.instagram-follow strong{font-size:12px;font-weight:600;color:var(--cream);transition:color .2s}
.instagram-follow .instagram-arrow{width:12px;height:12px;margin-left:3px}
.contact-social .instagram-follow:hover,.instagram-follow:hover strong{color:var(--lime)}

/* Responsive foldable and iPhone refinements: use available space, not device detection. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.site-header{padding-top:env(safe-area-inset-top,0px)}
.footer{padding-bottom:max(30px,env(safe-area-inset-bottom,0px))}
dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.icon-button{min-width:44px;min-height:44px;flex-shrink:0}
@media(max-width:1100px){
 input,textarea{font-size:16px}
 .menu-toggle,.text-button,.text-link,.industry-buttons button,#demo-tabs button,.footer button,.footer>div>a{min-height:44px}
 .text-button,.text-link,.footer>div>a{display:inline-flex;align-items:center}
 .header-inner nav a{padding-block:14px}
 .hero-actions{flex-wrap:wrap}
 .hero h1{overflow-wrap:normal}
}
@media(min-width:681px) and (max-width:1000px) and (max-height:700px){
 .hero{min-height:530px;padding-block:25px 45px}
 .hero-visual{height:490px;transform:scale(.68);transform-origin:center right}
 .hero h1{font-size:48px}
 .section{padding-block:70px}
}
@media(min-width:430px) and (max-width:680px){
 .hero h1{font-size:clamp(49px,9.9vw,62px);max-width:590px}
 .hero-copy{max-width:590px;width:100%;margin-inline:auto}
 .hero-visual{height:410px;margin-top:28px}
 .hero-description{max-width:490px}
}
@media(max-height:500px) and (min-width:681px){
 .hero{min-height:430px;padding-block:20px}
 .hero-visual{height:400px;transform:scale(.6)}
 .hero-visual .visual-caption{bottom:-40px}
}
@media(prefers-reduced-motion:reduce){.instagram-follow,.instagram-follow strong{transition:none}}

/* A consistent reading rhythm, with no doubled oversized section gaps. */
:root{--section-space:clamp(48px,5.5vw,76px)}
.section{padding-block:var(--section-space)}
.showcase{padding-bottom:clamp(30px,4vw,54px)}
.home-screen-section{padding-bottom:clamp(42px,4.5vw,64px)}
.work-section{padding-bottom:var(--section-space)}
.contact-section{padding-block:var(--section-space)}
.section-heading{margin-bottom:clamp(28px,3.4vw,44px)}
.work-heading{margin-bottom:30px}
.catalogue-callout{margin-top:36px;padding-top:26px}
.process{margin-top:38px;margin-bottom:30px}
.industry-content{min-height:0}
.booking-images{--booking-height:287px;height:var(--booking-height)}
.booking-images>.phone-crop{width:min(39%,calc((var(--booking-height) - 30px) * 7 / 12))}
@media(max-width:680px){
 :root{--section-space:48px}
 .hero{padding-top:32px;padding-bottom:42px}
 .hero-visual{height:clamp(330px,90vw,410px);margin-top:20px}
 .section-heading>p{margin-top:18px}
 .showcase{gap:24px;padding-bottom:28px}
 .showcase-art{height:465px}
 .home-screen-section figcaption{margin-top:14px}
 .industry-content{min-height:0}
 .industry-footnote{margin-top:20px}
 .booking-images{--booking-height:250px}
 .process li{min-height:116px;padding-bottom:22px}
 .faq-list{margin-top:26px}
 .contact-copy h2{font-size:clamp(34px,9vw,39px)}
}
@media(max-width:380px){.showcase-art{height:425px}.booking-images{--booking-height:230px}}

/* Keep the home-screen graphic at its intrinsic ratio instead of a tall letterboxed image box. */
@media(max-width:680px){
 .showcase{padding-bottom:16px}
 .home-screen-section{padding-bottom:20px}
 .home-screen-section figcaption{margin-top:10px;margin-bottom:0}
 .showcase + .features-section{padding-top:32px}
}

/* A feathered silhouette follows the phone and text, rather than the rectangular canvas. */
.home-screen-section img{
 width:100%;max-width:975px;height:auto;max-height:none;margin-inline:auto;border-radius:0;
 -webkit-mask-image:url('assets/home-screen-mask.svg');
 mask-image:url('assets/home-screen-mask.svg');
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--lavender),var(--lime));transform-origin:left;scale:0 1;z-index:60;pointer-events:none;box-shadow:0 0 12px #c5f51a44}
.showcase-phone,.work-phone-stage>.phone-crop,.booking-images>.phone-crop,.home-screen-section img{translate:0 var(--scroll-drift,0px)}
.process li.is-revealed .step-number{animation:step-arrive .9s cubic-bezier(.16,1,.3,1) both}
@keyframes step-arrive{from{scale:.65;box-shadow:0 0 0 14px #c5f51a00}60%{scale:1.08;box-shadow:0 0 0 8px #c5f51a16}to{scale:1;box-shadow:0 0 0 0 #c5f51a00}}
@media(prefers-reduced-motion:reduce){.scroll-progress{display:none}.showcase-phone,.work-phone-stage>.phone-crop,.booking-images>.phone-crop,.home-screen-section img{translate:none!important}}

/* Larger header branding, with the same source image framing proportions. */
.site-header .brand{width:270px;height:60px}
.site-header .brand img{width:375px;left:-49px;top:-41px}
@media(max-width:1050px){.site-header .brand{width:220px;height:49px}.site-header .brand img{width:306px;left:-40px;top:-33px}}
@media(max-width:680px){.site-header .brand{width:210px;height:47px}.site-header .brand img{width:292px;left:-38px;top:-32px}}
@media(max-width:350px){.site-header .brand{width:195px;height:44px}.site-header .brand img{width:271px;left:-35px;top:-29px}}
/* Pending entrances never affect layout or observer geometry. */
.motion-pending{opacity:0}
.motion-pending:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.motion-pending{opacity:1!important}}

/* Every example presents its complete three-screen journey. */
.work-phone-stage{height:auto;aspect-ratio:1.35;padding:26px 14px;gap:12px;align-items:center}
.work-phone-stage>.phone-crop{width:calc((100% - 24px)/3);max-height:none}
.work-dialog-phones{gap:28px;padding:24px;overflow-x:auto;justify-content:center}
.work-dialog-phones>.phone-crop{width:min(calc((100% - 56px)/3),235px);max-height:none}
.features-section + .home-screen-section{padding-top:16px;padding-bottom:20px}
@media(max-width:900px) and (min-width:681px){.work-grid{grid-template-columns:1fr}.work-phone-stage{max-height:none;aspect-ratio:1.75;padding:28px 12%;gap:24px}.work-phone-stage>.phone-crop{width:calc((100% - 48px)/3)}}
@media(max-width:680px){
 .work-phone-stage{height:auto;aspect-ratio:1.3;padding:24px 12px;gap:12px}
 .work-phone-stage>.phone-crop{width:calc((100% - 24px)/3)}
 .work-dialog-phones{justify-content:flex-start;gap:24px;padding:18px 12px 25px;scroll-snap-type:x proximity}
 .work-dialog-phones>.phone-crop{width:72%;max-width:230px;scroll-snap-align:center}
 #work-dialog-caption:before{content:"Swipe to explore all three screens. ";color:var(--cream)}
 .features-section + .home-screen-section{padding-top:0;padding-bottom:12px}
}

/* Three prominent hero screens, within the existing section height. */
@media(min-width:681px){.hero{grid-template-columns:.9fr 1.1fr}}
.hero-visual{height:460px;transform:none;margin-left:-32px;margin-right:0}
.hero-visual .hero-phone{width:34%;height:auto;display:block}
.hero-visual .phone-front{left:0;top:35px;rotate:-3deg}
.hero-visual .phone-mid{left:33%;top:4px;rotate:0deg}
.hero-visual .phone-back{left:66%;top:43px;rotate:3deg;display:block}
.hero-visual .floating-tag{left:calc(50% - 120px);width:240px;bottom:-18px}
.hero-visual .visual-caption{bottom:-48px}
.hero-visual.is-on-screen .phone-back{animation:device-float 9s ease-in-out -5s infinite}
@media(max-width:680px){
 .hero-visual{width:calc(100% + 20px);max-width:none;height:clamp(280px,76vw,340px);margin:24px -10px 0}
 .hero-visual .phone-front{left:0;top:16px}
 .hero-visual .phone-mid{left:33%;top:0}
 .hero-visual .phone-back{left:66%;top:22px}
 .hero-visual .floating-tag{left:calc(50% - 120px);bottom:0;width:240px;padding:13px 17px}
 .hero-visual .visual-caption{bottom:-20px}
}