/* About page layout & timeline (safe, minimal) */
:root{ --accent: var(--bs-primary, #64a19d); }

/* Section spacing (keep whatever you had; adjust only if needed) */
.about-section{
  padding: 5rem 0 4rem;
}

/* WIDER hero on desktop so the lead fits on a single line */
.about-hero{
  max-width: 1280px;            /* ⬅️ widened (was smaller) */
  margin: 0 auto 2.25rem;
}

/* Give a little more width at larger breakpoints */
@media (min-width: 1200px){
  .about-hero{ max-width: 1400px; }
}
@media (min-width: 1400px){
  .about-hero{ max-width: 1500px; }
}

/* Heading + lead */
.about-title{
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  font-size: clamp(1.9rem, 2.6vw + .7rem, 2.6rem);
  margin-bottom: .5rem;
}
.about-lead{
  color: rgba(255,255,255,.75);
  font-size: clamp(1rem, 1.2vw + .5rem, 1.25rem);
}
/* Keep the lead on one line on desktop */
@media (min-width: 992px){
  .about-lead{ white-space: nowrap; }
}

/* Blocks */
.about-block{ margin-top: 2.5rem; }
.about-subtitle{ font-weight: 700; letter-spacing: .01em; font-size: 1.25rem; margin: 0 0 1rem; }

/* Cards */
.about-card{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.03);
  padding: 1.25rem 1.25rem 1rem;
  height: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.15);
}
.about-icon{ width: 44px; height: 44px; color: var(--accent); margin-bottom: .5rem; }
.about-card-title{ font-weight: 700; margin: 0 0 .25rem; font-size: 1.1rem; }
.about-card-desc{ color: rgba(255,255,255,.75); margin: 0; }

/* Timeline */
.timeline{ list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid rgba(255,255,255,.12); }
.timeline-item{ position: relative; margin: 0 0 1.25rem; }
.timeline-dot{
  position: absolute; left: -8px; top: .25rem;
  width: 12px; height: 12px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(100,161,157,.15);
}
.timeline-content{ padding-left: .5rem; }
.timeline-date{ font-weight: 700; color: rgba(255,255,255,.9); }
.timeline-text{ color: rgba(255,255,255,.75); }

@media (max-width: 575.98px){
  .about-card{ padding: 1rem; }
  .timeline{ padding-left: 1rem; }
}

/* Bigger cards */
@media (min-width: 1200px){
  .about-section .container{
    max-width: 1500px;
  }
}

@media (min-width: 1400px){
  .about-section .container{
    max-width: min(1500px, 92vw);
  }
}