/* Banner slider — full-width photo, the text over its empty left side.
   Themes: grey (ink text over a light photo), dark (white text, dark wash on the left), red (red text box). */
.tt.tt-slides { padding: 20px 0 24px; }
.tt .tt-slides__viewport { position: relative; overflow: hidden; border-radius: var(--tt-r); }
.tt .tt-slides__track { position: relative; height: clamp(400px, 36vw, 560px); }
.tt .tt-slides__slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--tt-ease), visibility 0s .5s; }
.tt .tt-slides__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s var(--tt-ease); z-index: 1; }
.tt .tt-slides__media { position: absolute; inset: 0; overflow: hidden; background-color: var(--tt-mist); }
.tt .tt-slides__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tt .tt-slides__slide.is-dark .tt-slides__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .45) 40%, rgba(10, 10, 10, 0) 70%); pointer-events: none; }
.tt .tt-slides__cover { position: absolute; inset: 0; z-index: 2; }
.tt .tt-slides__panel { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: min(48%, 560px); margin-left: clamp(28px, 5vw, 80px); color: var(--tt-ink); pointer-events: none; }
.tt .tt-slides__panel a { pointer-events: auto; }
.tt .tt-slides__slide.is-dark .tt-slides__panel { color: #fff; }
.tt .tt-slides__slide.is-red .tt-slides__panel { padding: clamp(24px, 3vw, 40px); background-color: var(--tt-red); color: #fff; border-radius: var(--tt-r); }
.tt .tt-slides__kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.tt .tt-slides__h { font-size: clamp(32px, 1.2rem + 2.8vw, 64px); font-weight: 900; letter-spacing: -.025em; line-height: 1; }
.tt .tt-slides__p { max-width: 34ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; opacity: .9; }
.tt .tt-slides__panel .tt-btn { margin-top: 8px; }
.tt .tt-btn--light { background-color: #fff; border-color: #fff; color: var(--tt-ink); }
.tt .tt-btn--light:hover, .tt .tt-btn--light:focus-visible { background-color: var(--tt-ink); border-color: var(--tt-ink); color: #fff; }
.tt .tt-slides__slide.is-dark .tt-btn--light:hover { background-color: var(--tt-red); border-color: var(--tt-red); }
.tt .tt-slides__ctrl { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; }
.tt .tt-slides__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tt-line); display: grid; place-items: center; }
.tt .tt-slides__arrow:hover, .tt .tt-slides__arrow:focus-visible { border-color: var(--tt-ink); background-color: transparent; }
.tt .tt-slides__arrow svg { width: 16px; height: 16px; }
.tt .tt-slides__dots { display: flex; }
.tt .tt-slides__dots button { width: 24px; height: 40px; display: grid; place-items: center; }
.tt .tt-slides__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background-color: #cfcfcf; transition: width .2s, background-color .2s; }
.tt .tt-slides__dots [aria-pressed="true"]::before { width: 22px; background-color: var(--tt-ink); }
@media (max-width: 767px) {
	.tt.tt-slides { padding-top: 12px; padding-bottom: 18px; }
	/* All slides share one grid cell, so the track is as tall as the tallest slide. */
	.tt .tt-slides__track { display: grid; height: auto; }
	.tt .tt-slides__slide { position: relative; inset: auto; grid-area: 1 / 1; display: grid; grid-template-rows: auto auto; }
	.tt .tt-slides__media { position: relative; inset: auto; grid-row: 1; aspect-ratio: 4 / 3; }
	.tt .tt-slides__media img { object-position: 75% center !important; }
	.tt .tt-slides__slide.is-dark .tt-slides__media::after { display: none; }
	.tt .tt-slides__panel { grid-row: 2; width: auto; margin: 0; padding: 20px; gap: 8px; background-color: var(--tt-mist); border-radius: 0; }
	.tt .tt-slides__slide.is-dark .tt-slides__panel { background-color: var(--tt-ink); }
	.tt .tt-slides__slide.is-red .tt-slides__panel { padding: 20px; border-radius: 0; }
	.tt .tt-slides__h { font-size: 28px; }
	.tt .tt-slides__p { display: none; }
	.tt .tt-slides__panel .tt-btn { min-height: 44px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .tt .tt-slides__slide { transition: none; } }