/* Larger marks and centered names in the existing designation cards. */
#credentials .credential-trigger{text-align:center}
#credentials .credential-logo{height:146px;padding:8px;margin-bottom:18px}
#credentials .credential-logo img{width:116px;height:116px;max-height:116px;max-width:100%;object-fit:contain}
#credentials .credential-name{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:48px}
#credentials .credential-value{text-align:center}
#credentials .credential-hint{justify-content:center;text-align:center}
/* Extend the homepage canvas underneath mobile safe areas. Browser controls remain OS-managed. */
@media(max-width:1024px){
 html.arete-home{background:#152845}
 .arete-home body{background:#152845}
 .arete-home main{background:#fff}
 .arete-home .hero{height:100vh;height:100dvh;min-height:100vh;min-height:100dvh}
 .arete-home .hero-frame{background:#152845}
 .arete-home .header{top:calc(12px + env(safe-area-inset-top,0px))}
 .arete-home .hero-content{padding-top:calc(105px + env(safe-area-inset-top,0px));padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
 .arete-home .hero-bottom{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
 .arete-home .motion-toggle{bottom:calc(28px + env(safe-area-inset-bottom,0px))}
 .arete-home .hero-note{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:760px){
 .arete-home .hero-content{padding-top:calc(100px + env(safe-area-inset-top,0px));padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))}
 #credentials .credential-logo{height:158px}
 #credentials .credential-logo img{width:132px;height:132px;max-height:132px}
}

/* Safari's translucent controls need actual hero pixels underneath them, not the next section. */
@media(max-width:1024px){
 .arete-home body{background:transparent}
 .arete-home .hero{height:100vh;height:100lvh;min-height:100vh;min-height:100lvh}
 .arete-home .hero-content{height:100vh;height:100dvh}
 .arete-home .hero-bottom{bottom:calc(32px + env(safe-area-inset-bottom,0px) + max(0px,100lvh - 100dvh))}
 .arete-home .motion-toggle{bottom:calc(28px + env(safe-area-inset-bottom,0px) + max(0px,100lvh - 100dvh))}
 .arete-home .hero-note{bottom:calc(80px + env(safe-area-inset-bottom,0px) + max(0px,100lvh - 100dvh))}
 /* Keep the opening transparent header in document flow for Safari's edge sampling. */
 .arete-home.at-hero-top .header.over-hero{position:absolute;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Safari 26 can reveal content beyond the measured large viewport beneath its floating toolbar.
   Continue the same video below that boundary; keep the existing controls above the toolbar. */
@media(max-width:1024px){
 .arete-home .hero{--home-browser-bleed:calc(72px + env(safe-area-inset-bottom,0px));height:calc(100vh + var(--home-browser-bleed));height:calc(100lvh + var(--home-browser-bleed));min-height:calc(100vh + var(--home-browser-bleed));min-height:calc(100lvh + var(--home-browser-bleed))}
 .arete-home .hero-bottom{bottom:calc(32px + env(safe-area-inset-bottom,0px) + max(0px,100lvh - 100dvh) + var(--home-browser-bleed))}
 .arete-home .motion-toggle{bottom:calc(28px + env(safe-area-inset-bottom,0px) + max(0px,100lvh - 100dvh) + var(--home-browser-bleed))}
 .arete-home .hero-note{bottom:calc(80px + env(safe-area-inset-bottom,0px) + max(0px,100lvh - 100dvh) + var(--home-browser-bleed))}
}