/* Hero study: Bairsites colours and type, finite device montage. */
.showcase-hero{padding:32px 0 26px;overflow:hidden;background:#fbf8f3}
.showcase-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.showcase-heading h1{font-size:clamp(46px,6.2vw,88px);line-height:.98;max-width:780px;letter-spacing:-.065em}
.showcase-heading .showcase-intro{max-width:320px;padding-bottom:5px}
.showcase-intro p{font-size:17px;line-height:1.5;margin-bottom:20px}
.showcase-intro .button{font-size:15px;padding:13px 22px}
.device-stage{position:relative;isolation:isolate;height:clamp(330px,42vw,565px);max-width:1180px;margin:32px auto 0;perspective:1400px}
.device-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(35px) rotateY(-5deg) scale(.96);transition:opacity .55s,transform .7s cubic-bezier(.2,.8,.2,1),visibility .7s;pointer-events:none}
.device-scene.is-active{opacity:1;visibility:visible;transform:none;z-index:3}
.desktop-device{position:absolute;width:78%;left:7%;top:2%;padding:9px;background:#151515;border:1px solid #666;border-radius:14px;box-shadow:0 18px 30px #0002;transform:rotate(-2deg)}
.desktop-device:after{content:'';position:absolute;left:-4%;right:-4%;bottom:-10px;height:12px;background:linear-gradient(#c9c9c9,#777);border-radius:1px 1px 65% 65%}
.desktop-device img{width:100%;aspect-ratio:1.6;object-fit:contain;object-position:top left;border-radius:6px;background:#fbf8f3}
.screen-viewport{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#fff}
.screen-detail{position:absolute;inset:0;opacity:0;background:#fff;pointer-events:none}
.desktop-device .screen-viewport .screen-detail img,.phone-device .screen-viewport .screen-detail img{width:100%;height:100%;object-fit:cover;object-position:top;transform:none}
.phone-device .screen-viewport{aspect-ratio:390/780;border-radius:22px}
.desktop-device .screen-viewport img,.phone-device .screen-viewport img{display:block;width:100%;height:auto;aspect-ratio:auto;max-width:none;border-radius:0;will-change:transform}
.device-scene{transform:none;transition:opacity .65s cubic-bezier(.4,0,.2,1),visibility .65s}
.device-scene.is-leaving{opacity:1;visibility:visible;z-index:2;transition:none}
.phone-device{position:absolute;right:3%;bottom:1%;width:19%;padding:6px;background:#141414;border:1px solid #777;border-radius:28px;box-shadow:0 15px 25px #0003;transform:rotate(5deg)}
.phone-device:before{content:'';position:absolute;z-index:2;width:28%;height:9px;border-radius:0 0 8px 8px;background:#141414;left:36%;top:5px}
.phone-device img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:22px}
.stage-backdrop{position:absolute;z-index:-1;left:0;right:0;top:16%;bottom:8%;background:#ff5c39;border-radius:50% 45% 8% 12%;transform:rotate(-3deg)}
.showcase-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px}
.project-switcher{display:flex;gap:24px;flex-wrap:wrap}
.project-switcher button,.motion-control{background:none;border:0;color:#0a0a0a;cursor:pointer;padding:9px 0;font-size:14px}
.project-switcher button{border-bottom:2px solid transparent}
.project-switcher button[aria-pressed=true]{border-color:#0a0a0a;font-weight:700}
.motion-control{min-width:118px;text-align:right;text-decoration:underline;text-underline-offset:5px}
.showcase-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;margin-top:12px;color:#514b46}
.showcase-foot a{text-decoration:underline;text-underline-offset:4px}
/* Reserve space for the rotated laptop base, not just its unrotated screen. */
.device-stage{height:auto;aspect-ratio:1.85}
.showcase-heading h1{flex:1;min-width:0}.showcase-heading .showcase-intro{flex:0 0 280px}
@media(min-width:1500px){.device-stage{height:auto}}
@media(max-width:760px){.showcase-hero{padding-top:20px}.showcase-heading{display:block}.showcase-heading h1{font-size:clamp(40px,9.5vw,65px)}.showcase-heading .showcase-intro{max-width:520px;margin-top:22px}.showcase-intro p{font-size:16px;margin-bottom:15px}.device-stage{height:clamp(235px,53vw,380px);margin-top:28px}.desktop-device{width:88%;left:0;top:3%;padding:5px;border-radius:8px}.phone-device{width:24%;right:0;bottom:0;padding:4px;border-radius:16px}.phone-device img{border-radius:12px}.phone-device:before{height:6px;top:3px}.stage-backdrop{bottom:13%}.showcase-toolbar{align-items:flex-start;gap:8px}.project-switcher{gap:10px}.project-switcher button{font-size:12px;padding:9px 0}.motion-control{font-size:12px;min-width:95px}.showcase-foot{align-items:flex-start;font-size:12px}.showcase-foot span{max-width:180px}}
@media(prefers-reduced-motion:reduce){.device-scene{transition:none;transform:none}.desktop-device,.phone-device{transform:none}}
@media(max-width:760px){.device-stage{height:auto;aspect-ratio:1.6}.showcase-heading .showcase-intro{max-width:520px}.showcase-heading h1{max-width:650px}}
@media(max-width:420px){.showcase-heading h1{font-size:9vw}.showcase-toolbar{flex-wrap:wrap}.motion-control{min-width:0;text-align:left}.showcase-intro p{font-size:15px}.showcase-foot{flex-wrap:wrap}.desktop-device{padding:3px}.phone-device{padding:3px}}
/* Existing package copy must also fit the narrow preview below this hero. */
.aftercare{display:block}
.aftercare>div{max-width:920px;margin-inline:auto}
.aftercare .cms-demo{margin:32px 0 40px}
.pv-cards{min-width:0}.pv-card{min-width:0;overflow-wrap:anywhere}


/* A restrained studio treatment: real photo, strong sans typography, one editing gesture. */
.premium-shop{container-type:inline-size;aspect-ratio:1.6;background:#fff;color:#142f24;border-radius:6px;overflow:hidden;font-family:DM,Arial,sans-serif;display:flex;flex-direction:column}
.premium-nav{display:flex;align-items:center;justify-content:space-between;padding:2.5% 4%;height:14%;gap:3%;font-size:1.15cqw}
.premium-nav strong{font-size:3.2cqw;font-weight:800;letter-spacing:-.07em}.premium-nav strong span{color:#eb713d}
.premium-nav>b{font-weight:500;text-decoration:underline;text-underline-offset:.5cqw}
.premium-layout{display:grid;grid-template-columns:44% 56%;flex:1;min-height:0}
.premium-copy{padding:8% 8% 5% 9%;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.premium-copy h2{font-family:DM,Arial,sans-serif;font-size:5.5cqw;font-weight:650;line-height:1.04;letter-spacing:-.055em;min-height:4.2em;width:100%;color:#142f24}
.premium-copy p{font-size:1.3cqw;line-height:1.5;margin-top:1.4cqw}
.premium-cta{display:inline-flex;align-items:center;gap:3cqw;background:#142f24;color:#fff;padding:1.2cqw 1.8cqw;font-size:1.15cqw;font-weight:500;margin-top:2.4cqw}
.premium-photo{min-height:0;position:relative;overflow:hidden}
.desktop-device .premium-photo img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:59% 50%;border-radius:0}
.premium-bottom{display:flex;justify-content:space-between;font-size:1cqw;padding:1.4% 4%;border-top:1px solid #142f2418}
.edit-cursor{position:absolute;left:18%;top:28%;width:3cqw;height:4cqw;opacity:0;pointer-events:none}
.is-typing .edit-cursor{animation:editor-click 1.5s both}
.is-typing .typed-heading:after{content:'';display:inline-block;width:.045em;height:.85em;background:#142f24;margin-left:.06em;vertical-align:baseline;animation:caret .65s steps(1) infinite}
@keyframes editor-click{0%{opacity:0;transform:translate(7cqw,6cqw)}25%{opacity:1}50%{opacity:1;transform:translate(0,0)}60%{opacity:1;transform:scale(.82)}70%{opacity:1;transform:none}100%{opacity:0;transform:translate(1cqw,1cqw)}}
@keyframes caret{50%{opacity:0}}
.premium-mobile{container-type:inline-size;aspect-ratio:390/844;background:white;color:#142f24;overflow:hidden;border-radius:22px;font-family:DM,Arial,sans-serif}
.premium-mobile-nav{font-size:8cqw;font-weight:800;letter-spacing:-.05em;display:flex;justify-content:space-between;padding:12% 7% 7%}
.premium-mobile-nav span{font-size:6cqw;font-weight:400}
.phone-device .premium-mobile>img{width:100%;height:auto;aspect-ratio:1.55;object-fit:cover;object-position:59% 50%;border-radius:0}
.premium-mobile-copy{padding:9% 7%}
.premium-mobile-copy h2{font:650 11cqw/1.04 DM,Arial,sans-serif;letter-spacing:-.055em;min-height:4.2em}
.premium-mobile-copy p{font-size:4.2cqw;line-height:1.4;margin-top:5%}
.premium-mobile-copy .premium-cta{font-size:4cqw;padding:7% 9%;margin-top:8%}
.premium-copy h2,.premium-mobile-copy h2{min-height:3.2em}
@media(prefers-reduced-motion:reduce){.edit-cursor,.typed-heading:after{display:none!important}}