/* Keep navigation legible and hero art anchored at every viewport width. */
html body .global-topbar,html body main.app-main{box-sizing:border-box!important;min-width:0!important;max-width:1360px!important;width:100%!important}
html body .global-topbar .site-primary-nav .workspace-switch{flex-shrink:0!important;white-space:nowrap!important}
html body .global-topbar .site-primary-nav .workspace-switch b{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;writing-mode:horizontal-tb!important}
html body .liva-hero>*{min-width:0!important}
html body .liva-hero-art{position:relative!important;isolation:isolate}
html body .liva-hero-art .liva-portrait{position:absolute!important;top:auto!important;left:auto!important;bottom:0!important;right:9%!important;height:89%!important;width:79%!important;margin:0!important;transform:none!important}
html body .liva-hero-art .liva-portrait img{position:static!important;height:100%!important;width:100%!important;object-fit:contain!important;object-position:center bottom!important}
@media(max-width:1100px){
html body .global-topbar{display:grid!important;grid-template-columns:minmax(150px,1fr) auto!important;height:auto!important;min-height:104px!important;padding:16px 24px 8px!important;gap:8px 12px!important;align-items:center!important}
html body .global-topbar .brand{grid-column:1!important;grid-row:1!important;width:auto!important}
html body .global-topbar .topbar-actions{grid-column:2!important;grid-row:1!important;display:flex!important;width:auto!important;min-width:0!important;gap:8px!important;margin:0!important;justify-content:flex-end!important}
html body .global-topbar .site-primary-nav{grid-column:1/-1!important;grid-row:2!important;display:flex!important;width:100%!important;min-width:0!important;justify-content:flex-start!important;gap:14px!important;overflow-x:auto!important;padding:0 0 5px!important}
html body .global-topbar .site-primary-nav .workspace-switch[data-workspace-target]{padding:8px 4px!important;min-height:36px!important}
html body .global-topbar .topbar-actions .useful-links{display:block!important}
html body .global-topbar .topbar-actions>a{min-width:30px!important;width:auto!important;padding:5px!important}
html body main.app-main{padding:8px 24px 40px!important}
html body .liva-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;min-height:520px!important}
html body .liva-hero h1{white-space:normal!important;font-size:clamp(30px,4.2vw,45px)!important;overflow-wrap:normal!important}
html body .liva-hero-art{height:520px!important;min-height:0!important;width:100%!important}
html body .liva-hero-copy{padding:28px 0!important}
html body .liva-actions{flex-wrap:wrap!important}
}
@media(max-width:760px){
html body .liva-hero{display:flex!important;flex-direction:column!important;min-height:0!important}
html body .liva-hero-copy{width:100%!important;padding:24px 0 10px!important}
html body .liva-hero h1{font-size:clamp(32px,6.5vw,45px)!important}
html body .liva-hero-art{width:100%!important;height:clamp(390px,85vw,540px)!important;min-height:0!important;margin:0!important;flex:none!important}
html body .page-work-layout{grid-template-columns:minmax(0,1fr)!important}
html body .page-photo-rail .photo-rail-frame{min-height:320px!important}
}
@media(max-width:480px){
html body .global-topbar{padding:12px 14px 6px!important;grid-template-columns:minmax(110px,1fr) auto!important;gap:6px!important}
html body .global-topbar .brand{gap:6px!important}
html body .global-topbar .brand>span,html body .global-topbar .brand-light{font-size:19px!important}
html body .global-topbar .brand img{width:28px!important;height:28px!important}
html body .global-topbar .topbar-actions{gap:3px!important}
html body .global-topbar .topbar-actions>.useful-links>summary{font-size:13px!important;padding:4px!important}
html body .global-topbar .site-primary-nav{gap:12px!important}
html body main.app-main{padding:4px 14px 30px!important}
html body .liva-hero-art .glass-top{width:122px!important;right:0!important}
html body .liva-hero-art .glass-bottom{width:145px!important;right:0!important}
}

/* Couple the portrait height to its actual width, avoiding bottom letterboxing. */
html body .liva-hero-art{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important;align-self:center!important;flex:none!important}
html body .liva-hero-art .liva-portrait{width:92%!important;height:100%!important;right:4%!important;bottom:0!important;top:0!important}
html body .liva-hero-art .liva-portrait img{object-fit:contain!important;object-position:center center!important}
html body .liva-hero-art .hero-light-disc{top:7%!important}
/* Action buttons and non-interactive workflow notes have separate visual roles. */
html body .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
html body .hero-actions :is(.hero-start,.hero-alt){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;min-height:46px!important;padding:10px 20px!important;border-radius:8px!important;font-size:16px!important;cursor:pointer!important;text-decoration:none!important}
html body .hero-actions .hero-start{background:linear-gradient(#e8dccf,#e3b17d)!important;color:#202224!important;border:1px solid #eadfd3!important}
html body .hero-actions .hero-alt{background:#2c2e30!important;color:#ffffff!important;border:1px solid #e2ad75!important}
html body .hero-actions :is(.hero-start,.hero-alt):hover{filter:brightness(1.15);box-shadow:0 3px 16px #e6b98a33!important}
html body .hero-capabilities{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;border-top:1px solid #dbc8b545!important;margin-top:26px!important;padding-top:12px!important;background:transparent!important}
html body .hero-capabilities>span,html body .hero-capabilities>span:nth-child(2){display:block!important;min-width:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 14px 8px 0!important;cursor:default!important;font-size:13px!important;font-weight:400!important;color:#e7ddd3!important}
html body .hero-capabilities>span>b{display:block!important;font-size:17px!important;color:#d7c2ad!important;margin-bottom:5px!important;font-weight:400!important}
@media(max-width:480px){html body .hero-capabilities{grid-template-columns:1fr!important;gap:3px!important}html body .hero-capabilities>span{display:flex!important;align-items:center!important;gap:10px!important}html body .hero-capabilities>span>b{margin:0!important}}