/* sections/about-team.php */
.tm-section {
	box-sizing: border-box; width: 100%;
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	background: var(--c-bg-alt); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.tm-section *, .tm-section *::before, .tm-section *::after { box-sizing: border-box; }
.tm-icon { flex: none; width: 1.375rem; height: 1.375rem; }
.tm-inner { display: grid; gap: var(--space-7); max-width: var(--container); margin: 0 auto; }
.tm-inner > * { min-width: 0; }

.tm-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.tm-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.tm-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.tm-section .tm-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.tm-p { margin: var(--space-4) 0 0; color: var(--c-text-muted); font-size: var(--fs-lg); }

/* Buttons: the Google rating pill, and outside the About page a navy pill to it */
.tm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.tm-section .tm-about {
	display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
	border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark)); color: var(--c-on-dark);
	box-shadow: var(--shadow-md); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s;
}
.tm-section .tm-about:hover, .tm-section .tm-about:focus { color: var(--c-on-dark); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.tm-section .tm-about:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.tm-about:hover .tm-badge .tm-icon { transform: rotate(0deg); }
.tm-section .tm-rating {
	display: inline-flex; align-items: center; gap: var(--space-3);
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-pill);
	background: var(--c-surface); color: var(--c-text-muted); box-shadow: var(--shadow-sm);
	font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: border-color 0.25s, transform 0.25s;
}
.tm-section .tm-rating:hover, .tm-section .tm-rating:focus { border-color: var(--c-primary); color: var(--c-text-muted); transform: translateY(-2px); }
.tm-section .tm-rating:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.tm-rating-logo { flex: none; width: 1.25rem; height: 1.25rem; }
.tm-rating-score { color: var(--c-heading); font: 800 var(--fs-lg)/1 var(--f-heading); }
.tm-stars { display: inline-flex; gap: 0.0625rem; color: var(--c-star); }
.tm-stars .tm-icon { width: 0.9375rem; height: 0.9375rem; fill: currentColor; stroke: none; }
.tm-badge { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.tm-badge .tm-icon { width: 1.125rem; height: 1.125rem; transform: rotate(-45deg); transition: transform 0.25s; }
.tm-rating:hover .tm-badge .tm-icon { transform: rotate(0deg); }

/* Photo wall: two columns scrolling in opposite directions, faded top and bottom */
.tm-wall {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); height: 30rem; overflow: hidden;
	-webkit-mask-image: linear-gradient(transparent, var(--c-bg-dark) 12%, var(--c-bg-dark) 88%, transparent);
	mask-image: linear-gradient(transparent, var(--c-bg-dark) 12%, var(--c-bg-dark) 88%, transparent);
}
.tm-col { min-width: 0; }
/* Spacing is padding inside each item (not a gap) so the copy starts exactly at -50% */
.tm-track { display: flex; flex-direction: column; animation: tm-up 42s linear infinite; }
.tm-col--down .tm-track { animation-name: tm-down; }
.tm-wall:hover .tm-track { animation-play-state: paused; }
@keyframes tm-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes tm-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.tm-item { margin: 0; padding-bottom: var(--space-4); }
/* Two classes: Elementor's ".elementor img" (radius 0, no shadow) must not win on the real page. */
.tm-section .tm-img, .tm-item--empty {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
	border-radius: 2.5rem; box-shadow: var(--shadow-md); /* one round frame for every photo, both columns (client's request of 2026-10-07) */
}
.tm-item--empty { display: grid; place-items: center; padding: 0; border: 2px dashed color-mix(in srgb, var(--c-primary) 25%, transparent); background: var(--c-primary-soft); color: color-mix(in srgb, var(--c-primary) 35%, transparent); box-shadow: none; }
.tm-item--empty .tm-icon { width: 3rem; height: 3rem; }

@media (min-width: 1024px) {
	.tm-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
	.tm-wall { height: 36rem; }
}
@media (prefers-reduced-motion: reduce) {
	.tm-track { animation: none; }
	.tm-section * { transition: none !important; }
}