/* Shared geometry and typography for the three project actions. */
.portfolio .page .app-preview>.cta{
 --cta-width:clamp(177px,18vw,244px);
 width:var(--cta-width);height:52px;min-height:52px;
 padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;
 border:1px solid var(--cta-border);border-radius:999px;
 font:600 15px/1.2 Arial,Helvetica,sans-serif;letter-spacing:0;
 background:var(--cta-background);color:var(--cta-color);
 box-shadow:0 8px 22px #00000026;
 transition:background .2s,transform .2s;
}
.portfolio .page .app-preview>.cta svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.5}
#aqua{--cta-background:#244f3b;--cta-hover:#32694d;--cta-color:#fff;--cta-border:#ffffff66}
#fitness{--cta-background:#f17d67;--cta-hover:#ff997c;--cta-color:#371b31;--cta-border:#ffd9bc66}
#energy{--cta-background:#242525;--cta-hover:#133b35;--cta-color:#fff;--cta-border:#ffffff66}
.portfolio .page .app-preview>.cta:hover{background:var(--cta-hover);transform:translateY(-2px)}
.portfolio .page .app-preview>.cta:active{transform:translateY(1px)}
.portfolio #energy .app-preview>.cta{left:calc(50% - var(--cta-width)/2)}
.portfolio #energy.meadow-mobile .app-preview>.cta{left:auto}
@media(max-height:540px) and (min-aspect-ratio:6/5){.portfolio #energy .app-preview>.cta{left:auto;margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:reduce){.portfolio .page .app-preview>.cta{transition:none}.portfolio .page .app-preview>.cta:hover,.portfolio .page .app-preview>.cta:active{transform:none}}

#aqua .aqua-app-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}