/* About-Us.php — builds on the tokens, hero, .tq-btn and .tq-prose from site.css */

.tq-about-hero {
  position: relative;
  padding: 110px 20px 150px;
  background:
    linear-gradient(180deg, rgba(41, 45, 51, .82) 0%, rgba(41, 45, 51, .92) 100%),
    var(--hero-image, none) center / cover no-repeat,
    var(--tq-dark);
}

/* Key facts strip, overlapping the hero */
.tq-facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1100px;
  margin: -70px auto 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(16, 24, 40, .12);
  overflow: hidden;
}
.tq-fact { padding: 28px 22px; text-align: center; }
.tq-fact + .tq-fact { border-left: 1px solid #eef0f3; }
.tq-fact strong {
  display: block;
  font: 700 clamp(26px, 3vw, 34px)/1.1 "Montserrat", sans-serif;
  color: var(--tq-accent);
  margin-bottom: 8px;
}
.tq-fact span { color: var(--tq-muted); font-size: 14px; line-height: 1.4; }

/* Story */
.tq-about-story {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px 40px;
}
h2.tq-about-heading {
  font: 700 clamp(24px, 3vw, 32px)/1.25 "Montserrat", sans-serif;
  color: var(--tq-text);
  margin: 6px 0 20px;
}
.tq-about-text .tq-prose { font-size: 16px; max-width: none; }
.tq-about-text .tq-prose > .nodetitle:first-child {
  font: 600 19px/1.6 "Montserrat", sans-serif;
  color: var(--tq-text);
  margin-bottom: 18px;
  padding-left: 16px;
  border-left: 4px solid var(--tq-accent);
}
.tq-about-media {
  position: sticky;
  top: 130px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(16, 24, 40, .14);
  aspect-ratio: 4 / 5;
  background: #e5e7eb;
}
.tq-about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Timeline */
.tq-timeline-wrap { padding: 60px 20px 80px; }
.tq-timeline-wrap .tq-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.tq-timeline-wrap .tq-section-head h2 {
  font: 700 clamp(24px, 3.5vw, 32px)/1.2 "Montserrat", sans-serif;
  color: var(--tq-text);
  margin: 0 0 12px;
}
.tq-timeline-wrap .tq-section-head p { color: var(--tq-muted); margin: 0; }

.tq-timeline {
  list-style: none;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.tq-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 95px;
  width: 2px;
  background: #dbe3ec;
}
.tq-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 26px;
}
.tq-timeline li:last-child { padding-bottom: 0; }
.tq-timeline li::before {
  content: "";
  position: absolute;
  left: 89px;
  top: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tq-accent);
}
.tq-year {
  font: 700 20px/1 "Montserrat", sans-serif;
  color: var(--tq-accent);
  text-align: right;
  padding-top: 18px;
}
.tq-milestone {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
  padding: 16px 20px;
}
.tq-milestone h3 {
  font: 600 17px/1.3 "Montserrat", sans-serif;
  color: var(--tq-text);
  margin: 0 0 6px;
}
.tq-milestone p { color: var(--tq-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* Call to action */
.tq-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 90px;
  padding: 40px 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--tq-accent) 0%, #2f6aa3 100%);
  color: #fff;
}
.tq-cta h2 { font: 700 clamp(20px, 2.6vw, 26px)/1.3 "Montserrat", sans-serif; color: #fff; margin: 0 0 6px; }
.tq-cta p { margin: 0; color: rgba(255, 255, 255, .85); }
.tq-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tq-cta .tq-btn-primary { background: var(--tq-dark); border-color: var(--tq-dark); }
.tq-cta .tq-btn-primary:hover { background: #1c1f24; border-color: #1c1f24; }
.tq-btn-light { background: #fff; color: var(--tq-accent); border: 1px solid #fff; }
.tq-btn-light:hover { background: transparent; color: #fff; }

@media (max-width: 900px) {
  .tq-about-hero { padding: 72px 20px 110px; }
  .tq-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -60px 16px 0; }
  .tq-fact:nth-child(3) { border-left: 0; }
  .tq-fact:nth-child(n+3) { border-top: 1px solid #eef0f3; }
  .tq-about-story { grid-template-columns: 1fr; gap: 28px; padding: 56px 16px 24px; }
  .tq-about-media { position: static; aspect-ratio: 16 / 10; order: -1; }
  .tq-cta { margin: 0 16px 64px; padding: 28px 24px; }
}
@media (max-width: 560px) {
  .tq-fact { padding: 20px 12px; }
  .tq-timeline::before { left: 7px; }
  .tq-timeline li { grid-template-columns: 1fr; gap: 6px; padding-left: 32px; }
  .tq-timeline li::before { left: 0; top: 2px; }
  .tq-year { text-align: left; padding-top: 0; font-size: 17px; }
  .tq-cta-actions, .tq-cta-actions .tq-btn { width: 100%; }
}