/* ==========================================================================
   TRUCKBEDSUSA — ABOUT US PAGE
   ========================================================================== */

.tb-about-page h1,
.tb-about-page h2,
.tb-about-page h3 {
  font-family: "Inter", sans-serif;
  color: #111827;
}

.tb-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tb-crimson);
  margin-bottom: 10px;
}

/* Our Story */
.tb-about-story {
  padding: 70px 0;
}
.tb-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.tb-story-image {
  border-radius: 10px;
  overflow: hidden;
  background: #f0f2f5;
  aspect-ratio: 4 / 3;
}
.tb-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tb-story-image.img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-story-image.img-fallback::after {
  content: "Add /assets/images/about-story.jpg";
  color: #9aa1ab;
  font-size: 13px;
}
.tb-story-image.img-fallback img {
  display: none;
}

.tb-story-copy h2 {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 16px 0;
  line-height: 1.3;
}
.tb-story-copy p {
  font-size: 14px;
  line-height: 1.9;
  color: #444;
  margin: 0 0 16px 0;
}
.tb-btn-outline {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 26px;
  border: 2px solid var(--tb-crimson);
  color: var(--tb-crimson) !important;
  font-weight: 700;
  font-size: 13px;
  border-radius: 6px;
  text-decoration: none !important;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.tb-btn-outline:hover {
  background: var(--tb-crimson);
  color: #fff !important;
}

/* Stats */
.tb-about-stats {
  background: #f7f8fa;
  padding: 46px 0;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
}
.tb-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.tb-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tb-stat-num {
  font-size: 34px;
  font-weight: 800;
  color: var(--tb-blue);
  font-family: "Inter", sans-serif;
}
.tb-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Why Choose Us */
.tb-about-values {
  padding: 80px 0;
}
.tb-section-heading {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
}
.tb-section-heading h2 {
  font-size: 30px;
  font-weight: 800;
  margin: 0;
}
.tb-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.tb-value-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 30px 24px;
  text-align: left;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.tb-value-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}
.tb-value-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #fdf1e0;
  color: var(--tb-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.tb-value-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.tb-value-card p {
  font-size: 13.5px;
  line-height: 1.75;
  color: #555;
  margin: 0;
}

/* ==========================================================================
   CTA COMPONENT OVERRIDE MATRIX (HIGH CONTRAST FIX)
   ========================================================================== */
.tb-about-cta {
  background: #0b1a29 !important; /* Rich deep layout dark blue */
  padding: 56px 0 !important;
  width: 100% !important;
  display: block !important;
}

.tb-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.tb-cta-text-group {
  text-align: left;
}

/* Force crystal-clear readability white rules */
.tb-cta-inner h2 {
  color: #ffffff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.tb-cta-inner p {
  color: rgba(
    255,
    255,
    255,
    0.85
  ) !important; /* Crisp semi-opaque white text */
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* Call to Action Accent Button Layout */
.tb-btn-solid {
  display: inline-block;
  background-color: var(--tb-amber) !important;
  color: #111827 !important; /* Solid dark text inside the gold button block */
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 14px 32px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15) !important;
}

.tb-btn-solid:hover {
  filter: brightness(0.95) !important;
  transform: translateY(-1px);
}

/* Mobile Alignment Fix */
@media (max-width: 767px) {
  .tb-cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
  }
  .tb-cta-text-group {
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  .tb-story-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .tb-values-grid {
    grid-template-columns: 1fr;
  }
  .tb-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tb-cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
  }
  .tb-cta-text-group {
    text-align: center !important;
  }
  .tb-about-story,
  .tb-about-values {
    padding: 50px 0;
  }
}