/* TT Overrides v1
   Load AFTER your main stylesheet.
   Goal: make About hero image more visible + improve spacing/typography.
*/

/* -----------------------------
   HERO / BANNER VISIBILITY
   ----------------------------- */

/* Lighten overlay (covers common patterns) */
.hero::before,
.page-hero::before,
.banner::before,
.header-hero::before,
.section-hero::before,
.hero-overlay,
.overlay,
.bg-overlay {
  background: rgba(0, 0, 0, 0.22) !important;
}

/* If your overlay is a gradient, this helps too */
.hero::before,
.page-hero::before,
.banner::before,
.header-hero::before,
.section-hero::before {
  opacity: 1 !important;
}

/* Add gentle punch without looking fake */
.hero,
.page-hero,
.banner,
.header-hero,
.section-hero {
  filter: contrast(1.10) saturate(1.06);
}

/* Ensure hero positions nicely */
.hero, .page-hero, .banner, .header-hero, .section-hero {
  position: relative;
}

/* -----------------------------
   ABOUT COPY: SPACING + READABILITY
   ----------------------------- */
.tt-about-copy {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 20px 64px;
  line-height: 1.55;
}

.tt-about-copy h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  letter-spacing: 0.5px;
  margin: 0 0 14px;
}

.tt-about-copy p {
  font-size: clamp(1.05rem, 1.35vw, 1.15rem);
  margin: 0 0 16px;
  opacity: 0.92;
}

/* Optional divider styling */
.tt-divider {
  display: block;
  width: min(520px, 80%);
  height: auto;
  margin: 26px auto 30px;
  opacity: 0.7;
}

/* Tighten awkward big blank space if present */
.tt-about-hero-gap-fix {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile breathing room */
@media (max-width: 600px) {
  .tt-about-copy {
    padding: 34px 16px 52px;
  }
}
.about-hero{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.about-hero__img{
  width: 100%;
  display: block;
  border-radius: 18px;
}

.about-hero__copy{
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 420px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 20px 22px;
  border-radius: 14px;
}

@media (max-width: 900px){
  .about-hero__copy{
    position: static;
    transform: none;
    margin-top: 18px;
    background: transparent;
    color: inherit;
    padding: 0;
  }
}