:root { --portfolio-bar-height: 44px; }
body { padding-top: var(--portfolio-bar-height); }
.portfolio-demo-bar { align-items: center; background: #080808; border-bottom: 1px solid #555249; box-sizing: border-box; color: #f1eee7; display: flex; font: 12px/1.4 system-ui,sans-serif; gap: 20px; height: var(--portfolio-bar-height); justify-content: space-between; left: 0; padding: 0 24px; position: fixed; right: 0; top: 0; z-index: 999; }
.portfolio-demo-bar a { align-items: center; color: #f1eee7; display: inline-flex; flex-shrink: 0; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.portfolio-demo-avenra .site-header, .direction-v2 #site-header { top: var(--portfolio-bar-height); }
.portfolio-wordmark { display: inline-block; font-size: 26px; font-weight: 750; line-height: 1.05; letter-spacing: -.035em; text-align: left; white-space: normal; }
.brand .portfolio-wordmark, .footer-logo .portfolio-wordmark { font-size: 25px; font-weight: 750; line-height: 1.05; }
.portfolio-brand-frame { align-items: center; background: transparent !important; display: flex !important; height: auto !important; justify-content: center; min-height: 44px; transform: none !important; width: auto !important; }
.direction-v2 #site-header .portfolio-brand-frame { max-width: 164px; }
.footer-logo-frame .portfolio-wordmark { color: #edf4ee; font-size: clamp(28px, 4vw, 42px); }
#portfolio-demo-info { background: #f1eee7; border: 0; border-radius: 16px; color: #080808; font: 16px/1.65 system-ui,sans-serif; margin: auto; max-width: 520px; padding: 32px; width: calc(100% - 40px); }
#portfolio-demo-info::backdrop { background: rgba(8,8,8,.7); }
#portfolio-demo-info h2 { font-size: 28px; line-height: 1.15; margin: 0 0 18px; }
#portfolio-demo-info p { margin: 0 0 24px; }
#portfolio-demo-info button { background: #080808; border: 0; border-radius: 999px; color: #f1eee7; cursor: pointer; font: inherit; min-height: 48px; padding: 10px 20px; }
.portfolio-demo-bar a:focus-visible, #portfolio-demo-info button:focus-visible { outline: 2px solid #ff6b35; outline-offset: 4px; }
.gummy-photo img, .mindset-photo img { object-fit: contain; padding: 24px; }
.gummy-photo { background: #eee9df; }
@media(max-width:480px) { .portfolio-demo-bar { font-size: 10px; gap: 12px; padding-inline: 16px; } .brand .portfolio-wordmark { font-size: 20px; max-width: 125px; } .header-call-label { max-width: 58px; white-space: normal; } }