/* Custom sections added in the 2026 update. Matches the dark/purple template. */

.tm_section{
	width: 100%;
	float: left;
	clear: both;
	padding: 120px 0 100px 0;
}
.tm_section .awilo_fn_title{
	margin-bottom: 60px;
}
.tm_section .awilo_fn_title h3{
	font-size: 56px;
	line-height: 64px;
}
.tm_lead{
	font-family: 'Muli', sans-serif;
	font-size: 18px;
	line-height: 30px;
	color: #bbb;
	max-width: 760px;
	margin: 20px 0 0 0;
}

/* Hero extras */
.tm_now{
	display: block;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin-left: 0;
	font-family: 'Muli', sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #eee;
	border: 1px solid #ae45ff;
	border-radius: 30px;
	padding: 8px 18px;
	margin: 0 0 26px 0;
}
.tm_now b{
	color: #ae45ff;
	font-weight: 700;
}
.about_btn .tm_btn_row{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Grids sit below the floated section titles */
.tm_cases,
.tm_edu,
.tm_skillgroups,
.tm_panel{
	clear: both;
	width: 100%;
	box-sizing: border-box;
}

/* Case studies */
.tm_cases{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tm_case{
	background: #1e1427;
	border: 1px solid rgba(174, 69, 255, .25);
	padding: 36px 32px;
	transition: border-color .3s ease, transform .3s ease;
}
.tm_case:hover{
	border-color: #ae45ff;
	transform: translateY(-4px);
}
.tm_case .tm_tag{
	font-family: 'Muli', sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ae45ff;
	margin: 0 0 14px 0;
}
.tm_case h3{
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 34px;
	color: #eee;
	margin: 0 0 14px 0;
}
.tm_case p{
	font-family: 'Muli', sans-serif;
	font-size: 16px;
	line-height: 27px;
	color: #bbb;
	margin: 0 0 12px 0;
}
.tm_case a,
.tm_case a.awilo_fn_circle_link{
	color: #ae45ff;
}
.tm_case .tm_meta{
	font-size: 14px;
	color: #777;
	margin: 18px 0 0 0;
}

/* Education and certifications */
.tm_edu{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	list-style: none;
	margin: 0 0 50px 0;
	padding: 0;
}
.tm_edu li{
	border-left: 3px solid #ae45ff;
	padding: 4px 0 4px 24px;
}
.tm_edu .tm_when{
	font-family: 'Muli', sans-serif;
	font-size: 14px;
	color: #777;
	margin: 0 0 6px 0;
}
.tm_edu h3{
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: #eee;
	margin: 0 0 4px 0;
}
.tm_edu .tm_where{
	font-family: 'Muli', sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #bbb;
	margin: 0;
}
.tm_edu a{
	color: #ae45ff;
}
.tm_subtitle{
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	font-size: 22px;
	color: #eee;
	margin: 0 0 24px 0;
}

/* Skills as grouped chips */
.tm_skillgroups{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 50px;
}
.tm_skillgroup h4{
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #eee;
	margin: 0 0 16px 0;
}
.tm_chips{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tm_chips li{
	font-family: 'Muli', sans-serif;
	font-size: 15px;
	line-height: 20px;
	color: #eee;
	background: #1e1427;
	border: 1px solid rgba(174, 69, 255, .35);
	border-radius: 30px;
	padding: 8px 16px;
}

/* Sustainability panel */
.tm_panel{
	background: #1e1427;
	border: 1px solid rgba(174, 69, 255, .25);
	padding: 44px 40px;
}
.tm_panel p{
	font-family: 'Muli', sans-serif;
	font-size: 17px;
	line-height: 29px;
	color: #bbb;
	margin: 0 0 16px 0;
}
.tm_panel p:last-child{
	margin-bottom: 0;
}
.tm_panel strong{
	color: #eee;
}

/* Links into the creative sub-portfolios */
.tm_links{
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	list-style: none;
	margin: 28px 0 0 0;
	padding: 0;
}
.tm_links a{
	font-family: 'Muli', sans-serif;
	font-size: 16px;
	color: #ae45ff;
	border-bottom: 1px solid transparent;
}
.tm_links a:hover{
	border-bottom-color: #ae45ff;
}

@media(max-width: 1040px){
	.tm_cases{
		grid-template-columns: 1fr;
	}
	.tm_section .awilo_fn_title h3{
		font-size: 44px;
		line-height: 52px;
	}
}
@media(max-width: 768px){
	.tm_section{
		padding: 70px 0 60px 0;
	}
	.tm_section .awilo_fn_title{
		margin-bottom: 36px;
	}
	.tm_section .awilo_fn_title h3{
		font-size: 32px;
		line-height: 40px;
	}
	.tm_edu,
	.tm_skillgroups{
		grid-template-columns: 1fr;
	}
	.tm_panel{
		padding: 30px 24px;
	}
	.tm_lead{
		font-size: 16px;
		line-height: 27px;
	}
}

/* Language switch in the top menu */
.tm_lang{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	margin-right: 28px;
	font-family: 'Muli', sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
}
.tm_lang_btn{
	background: none;
	border: 0;
	padding: 6px 4px;
	margin: 0;
	color: #777;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
}
.tm_lang_btn:hover,
.tm_lang_btn:focus{
	color: #eee;
	outline: none;
}
.tm_lang_btn[aria-pressed="true"]{
	color: #ae45ff;
	font-weight: 700;
}
.tm_lang_sep{
	color: #555;
}
.i18n-pending body{
	visibility: hidden;
}
@media(max-width: 768px){
	.tm_lang{
		margin-right: 14px;
		font-size: 13px;
	}
}

/* ===== Motion and atmosphere ===== */
.tm_progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:linear-gradient(90deg,#ae45ff,#ff5fa2,#ffb86b);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.tm_glow{position:fixed;top:0;left:0;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(174,69,255,.16),transparent 65%);mix-blend-mode:screen}

/* hero */
#about{position:relative;overflow:hidden}
.tm_orbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.tm_orbs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.tm_orbs span:nth-child(1){width:520px;height:520px;background:#ae45ff;top:-120px;left:-100px;animation:tmFloat 14s ease-in-out infinite}
.tm_orbs span:nth-child(2){width:420px;height:420px;background:#ff3d8b;bottom:-140px;right:8%;animation:tmFloat 17s ease-in-out -4s infinite reverse;opacity:.4}
.tm_orbs span:nth-child(3){width:320px;height:320px;background:#3d6bff;top:25%;right:-80px;animation:tmFloat 20s ease-in-out -9s infinite;opacity:.4}
@keyframes tmFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,40px) scale(1.12)}66%{transform:translate(-40px,80px) scale(.92)}}
#about .container{position:relative;z-index:2}
.awilo_fn_about .about_title h3 strong{
	background:linear-gradient(100deg,#ae45ff,#ff5fa2,#ffb86b,#ae45ff);background-size:250% 100%;
	-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
	animation:tmShine 6s linear infinite}
@keyframes tmShine{to{background-position:-250% 0}}
.awilo_fn_about .about_title h5,.awilo_fn_about .about_title h3,.tm_now,.awilo_fn_about .about_desc p,.about_btn{animation:tmUp .9s cubic-bezier(.2,.7,.2,1) both}
.awilo_fn_about .about_title h3{animation-delay:.15s}
.tm_now{animation-delay:.3s}
.awilo_fn_about .about_desc p{animation-delay:.45s}
.about_btn{animation-delay:.6s}
@keyframes tmUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.about_right .about_img{animation:tmPop 1.2s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes tmPop{from{opacity:0;transform:scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
.about_right .about_border{animation:tmPulse 5s ease-in-out infinite}
@keyframes tmPulse{0%,100%{opacity:.9}50%{opacity:.35}}

/* marquee */
.tm_marquee{width:100%;float:left;clear:both;overflow:hidden;padding:26px 0;border-top:1px solid rgba(174,69,255,.25);border-bottom:1px solid rgba(174,69,255,.25);background:rgba(30,20,39,.6)}
.tm_track{display:flex;width:max-content;animation:tmScroll 38s linear infinite}
.tm_track span{font-family:'Rubik',sans-serif;font-size:28px;color:#eee;white-space:nowrap;padding:0 34px;position:relative}
.tm_track span:after{content:"\2726";position:absolute;right:-8px;color:#ae45ff;font-size:18px;top:8px}
.tm_marquee:hover .tm_track{animation-play-state:paused}
@keyframes tmScroll{to{transform:translateX(-50%)}}

/* reveal */
.fx .tm_rv{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.fx .tm_rv.tm_in{opacity:1;transform:none}
.fx .tm_case.tm_in{transition:opacity .8s,transform .2s ease-out,border-color .3s}

/* cards */
.tm_case{position:relative;overflow:hidden}
.tm_case:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(174,69,255,.28),transparent 70%)}
.tm_case:hover:before{opacity:1}
.tm_chips li{transition:background .3s,transform .3s,border-color .3s}
.tm_chips li:hover{background:#ae45ff;border-color:#ae45ff;transform:translateY(-3px)}
.tm_lang_btn[aria-pressed="true"]{border-bottom:2px solid #ae45ff}

@media(max-width:768px){
	.tm_orbs span{filter:blur(50px)}
	.tm_orbs span:nth-child(1){width:300px;height:300px}
	.tm_orbs span:nth-child(2){width:260px;height:260px}
	.tm_track span{font-size:20px;padding:0 22px}
}
@media(prefers-reduced-motion:reduce){
	*{animation:none!important;transition:none!important}
	.awilo_fn_about .about_title h3 strong{background-position:0 0}
}

/* Prevent sideways scrolling on phones */
html,body{max-width:100%;overflow-x:hidden}
.tm_marquee{float:none;display:block;clear:both;width:100%;max-width:100%;overflow:hidden;position:relative;contain:paint;box-sizing:border-box}
.tm_marquee:after{content:"";display:block;clear:both}
.tm_orbs span:nth-child(3){right:0}

/* Extra guard for iPhone Safari: nothing may extend past the screen */
html,body{overflow-x:clip;position:relative;width:100%}
.awilo_fn_wrapper{overflow-x:clip;max-width:100%}
.awilo_fn_sidebar_header{visibility:hidden}
.awilo_fn_wrapper.opened .awilo_fn_sidebar_header{visibility:visible}
@media(max-width:768px){
	.tm_orbs{overflow:hidden;right:0;left:0;width:100%}
	.tm_orbs span:nth-child(1){left:-60px}
	.tm_orbs span:nth-child(2){right:-40px}
	.tm_orbs span:nth-child(3){display:none}
}