<section id="about-intro">
  <div class="container">
    <div class="intro-grid">
      <div class="intro-visual fade-up">
        <div class="intro-img-placeholder">
          <img src="assets/image-about.jpg" alt="Solid Construction Team" class="about-image">
        </div>
        <div class="intro-badge">
          <div class="intro-badge-num">7+</div>
          <div class="intro-badge-text">Years of<br>Excellence</div>
        </div>
      </div>
      <div class="intro-text fade-up">
        <div class="section-eyebrow">About Solid Construction</div>
        <h2>Trusted. Proven.<br>Built to Last.</h2>
        <p>Founded in 2019, Solid Construction has grown from a regional contractor into a nationally recognized construction firm with a reputation built on delivering projects on time, on budget, and beyond expectation.</p>
        <p>We serve residential clients, commercial developers, government institutions, and architects — providing full-cycle construction management from design through delivery.</p>
        <div class="intro-values">
          <div class="intro-value"><div class="intro-value-dot"></div>Safety First Always</div>
          <div class="intro-value"><div class="intro-value-dot"></div>Uncompromising Quality</div>
          <div class="intro-value"><div class="intro-value-dot"></div>Transparent Integrity</div>
          <div class="intro-value"><div class="intro-value-dot"></div>Client-Centered Focus</div>
          <div class="intro-value"><div class="intro-value-dot"></div>Continuous Innovation</div>
          <div class="intro-value"><div class="intro-value-dot"></div>On-Time Delivery</div>
        </div>
        <a href="#about" class="btn-primary" style="display:inline-flex; align-items:center; gap:8px; margin-top:16px;">
          Our Full Story
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  </div>
</section>

<style>
#about-intro {
  padding: 120px 0;
  background: var(--white); /* Changed to white background */
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.intro-visual { 
  position: relative;
}
.intro-img-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.about-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 140px;
  height: 140px;
  background: var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: var(--radius);
}
.intro-badge-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  color: var(--charcoal);
  line-height: 1;
}
.intro-badge-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-align: center;
  line-height: 1.3;
}
.intro-text h2 {
  font-size: clamp(40px, 4vw, 58px);
  color: var(--charcoal); /* Changed to dark text for white background */
  margin-bottom: 24px;
}
.intro-text p {
  color: var(--stone); /* Changed to stone color for better contrast on white */
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}
.intro-values {
  margin: 40px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.intro-value {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal); /* Changed to dark text for white background */
  letter-spacing: 0.05em;
}
.intro-value-dot {
  width: 8px;
  height: 8px;
  background: var(--gold);
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Update section eyebrow for white background */
.section-eyebrow {
  color: var(--gold);
}
.section-eyebrow::before {
  background: var(--gold);
}
/* Style the button for white background */
#about-intro .btn-primary {
  background: var(--gold);
  color: var(--charcoal);
}
#about-intro .btn-primary:hover {
  background: var(--gold-dark);
}
@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr; gap: 60px; }
  .intro-visual { max-width: 500px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .intro-values { grid-template-columns: 1fr; }
  .intro-badge {
    width: 110px;
    height: 110px;
    bottom: -16px;
    right: -16px;
  }
  .intro-badge-num { font-size: 38px; }
  .intro-badge-text { font-size: 8px; }
}
</style>