/* Trinity Trailer — Hero Image Slider */
.tt-hero * { box-sizing: border-box; }
.tt-hero {
  --blue: #1b5fa8;
  --blue-deep: #0c3f78;
  --ink: #1f2933;
  --page: #ffffff;
  --scrim-top: rgba(8,12,20,.15);
  --scrim-bot: rgba(8,12,20,.55);
  --display: "trade-gothic-next-condensed", sans-serif;
  --body: "Lato", sans-serif;
  font-family: var(--body);
  background: var(--page);
  width: 100%;
  margin: 0 auto;
  color: var(--ink);
}
.tt-hero h1,
.tt-hero h2 {
  font-family: "trade-gothic-next-condensed", sans-serif !important;
  font-style: normal;
}
.tt-hero h1 {
  font-weight: 800 !important;
  font-size: 126px;
  line-height: 1 !important;
}
.tt-hero h2 {
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 5.5vw, 70px);   /* scales with viewport, caps at 70px */
  line-height: 1.15 !important;            /* roomier for the wrapping subhead */
}
/* viewport */
.tt-hero__viewport {
  position: relative;
  width: 100%;
  height: clamp(360px, 80vh, var(--tt-height, 600px));
  overflow: hidden;
  background: #0b1622;
  /* bottom edge angles down to a center point (above the CTA button) */
  --tt-point: 90px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tt-point)), 50% 100%, 0 calc(100% - var(--tt-point)));
}

.tt-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem clamp(1rem, 6vw, 6rem) 4.25rem;
  text-align: center;
  background: #1c2836;               /* fallback behind the photo */
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease;
  will-change: opacity;
}
/* real <img> background (crawlable + better LCP than a CSS background) */
.tt-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* dark scrim over the photo for white-text legibility */
.tt-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--scrim-top) 0%, transparent 35%, var(--scrim-bot) 100%);
}
.tt-slide.is-active { opacity: 1; visibility: visible; }

.tt-slide__inner {
  position: relative;   /* above the .tt-slide::before scrim */
  z-index: 2;
  width: 100%;          /* so wrapping text breaks at the slide edge, not beyond it */
  max-width: 80rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 68px;
  align-items: center;
  gap: .75rem;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .7s ease .15s, transform .7s ease .15s;
}
.tt-slide__inner .t3-logo {
  margin-top: 16px; 
}
.tt-slide.is-active .tt-slide__inner { transform: none; opacity: 1; }

.tt-slide__title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .01em;
  line-height: .95;
  font-size: clamp(2.25rem, 6.5vw, 5rem);
  margin: 0;
  max-width: 100%;              /* stay within the slide (desktop: JS fits one line) */
  white-space: nowrap;          /* desktop: one line via module.js shrink; mobile: wraps (below) */
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  font-stretch: condensed;
}
.tt-slide__sub {
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  font-weight: 400;
  color: rgba(255,255,255,.94);
  margin: 0;
  max-width: min(42ch, 100%);  /* readable column, but never wider than the slide */
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* financing slide: brand-blue field instead of a photo */
.tt-slide--finance {
  background: linear-gradient(135deg, #0c3f78, #1b5fa8);
}
.tt-slide--finance::before { background: none; }   /* keep the brand field bright (no dark scrim) */
/* .tt-wordmark {
  margin-top: .4rem;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
} */
.tt-wordmark b { font-size: clamp(1.4rem, 3.4vw, 2.3rem); font-weight: 800; }
.tt-wordmark .three { color: #7fb2e6; }
.tt-wordmark small { font-size: .42em; letter-spacing: .42em; margin-top: .35em; }

/* dots (raised to sit above the scroll chevron) */
.tt-dots {
  position: absolute;
  left: 0; right: 0; bottom: 2.9rem;
  display: flex;
  justify-content: center;
  gap: .7rem;
  z-index: 3;
}
.tt-dots button {
  width: 12px; height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.tt-dots button[aria-selected="true"] { background: #fff; }
.tt-dots button:hover { transform: scale(1.15); }
.tt-dots button:focus-visible { outline: 3px solid #7fb2e6; outline-offset: 3px; }

/* arrows */
.tt-arrow {
  position: absolute; top: calc(50% - 2rem); z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(11,22,34,.32); color: #fff; cursor: pointer;
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  transition: background .2s ease;
}
.tt-arrow:hover { background: rgba(11,22,34,.6); }
.tt-arrow:focus-visible { outline: 3px solid #7fb2e6; outline-offset: 2px; }
.tt-arrow--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.tt-arrow--next { right: clamp(.5rem, 2vw, 1.5rem); }

/* CTA strip below the slider */
.tt-hero__cta {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--page);
}
/* .tt-btn {
  font-family: var(--body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  color: #fff;
  background: var(--blue);
  padding: .85rem 1.6rem;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease;
}
.tt-btn:hover { background: var(--blue-deep); }
.tt-btn:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; } */
.tt-btn[hidden] { display: none !important; }   /* beats theme .button display rules */


.tt-hero h1 {
    font-size: 126px;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.tt-hero h1, .tt-hero h2 {
    font-family: trade-gothic-next-condensed, sans-serif !important;
    font-style: normal;
}
.tt-slide__title {
    color: #fff;
    font-family: var(--display);
    font-size: clamp(2.25rem, 6.5vw, 5rem);
    font-stretch: condensed;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: .95;
    margin: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    text-transform: uppercase;
    white-space: nowrap;
}
.tt-hero * {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .tt-slide, .tt-slide__inner { transition: none; }
}

/* Mobile: let the H1 WRAP (no forced single line) and keep the type large so it fills
   the space rather than shrinking to fit one line. module.js skips its shrink here. */
@media (max-width: 767px) {
  .tt-hero h1 {
    font-size: clamp(2.5rem, 15vw, 5rem);
    white-space: normal;         /* wrap word-by-word within the slide */
    overflow-wrap: break-word;   /* safety: a single over-wide word breaks instead of overflowing */
  }
  .tt-hero h2 {
    font-size: clamp(1.75rem, 6.5vw, 3rem);
  }
  .tt-hero__viewport {
    height: clamp(360px, 62vh, var(--tt-height, 600px));
  }
}

}