/* About page — generated by the conservative CSS/JS modular refactor. */

.page-hero--about {background-image:
    linear-gradient(135deg, rgba(26, 74, 31, 0.88) 0%, rgba(45, 122, 53, 0.75) 100%),
    url("/assets/images/factory.jpg");
  background-image:
    linear-gradient(135deg, rgba(26, 74, 31, 0.88) 0%, rgba(45, 122, 53, 0.75) 100%),
    image-set(url("/assets/images/performance-optimized/factory.jpg.webp") type("image/webp") 1x, url("/assets/images/factory.jpg") type("image/jpeg") 1x);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;}

.about-intro-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;}

.about-intro-text p {color: var(--text-mid); line-height: 1.8;}

.about-cta-row {display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap;}

.about-img-stack {position: relative;}

.about-img-main {border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover;}

.about-img-badge {position: absolute; bottom: -20px; left: -20px;
  background: var(--green-main); color: var(--white);
  border-radius: var(--radius); padding: 16px 20px;
  text-align: center; box-shadow: var(--shadow);}

.badge-year {font-family: var(--font-head); font-size: 2rem; font-weight: 800; line-height: 1;}

.badge-label {font-size: 0.75rem; opacity: 0.85; margin-top: 2px;}

.about-img-small {position: absolute; top: -24px; right: -24px;
  width: 140px; height: 100px; object-fit: cover;
  border-radius: var(--radius); border: 4px solid var(--white);
  box-shadow: var(--shadow);}

@media (max-width: 860px) {
.about-intro-grid {grid-template-columns: 1fr;}

.about-img-small {display: none;}

.about-img-badge {left: 16px;}
}

.stats-grid-4 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;}

.stat-item-light {text-align: center; padding: 40px 20px; border-right: 1px solid rgba(255,255,255,0.12);}

.stat-item-light:last-child {border-right: none;}

.stat-number-light {font-family: var(--font-head); font-size: 3rem; font-weight: 800; color: var(--white); display: inline;}

.stat-unit-light {font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--green-light); display: inline;}

.stat-label-light {font-size: 0.88rem; color: rgba(255,255,255,0.65); margin-top: 6px;}

@media (max-width: 700px) {
.stats-grid-4 {grid-template-columns: 1fr 1fr;}

.stat-item-light {border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12);}
}

.timeline {position: relative; max-width: 900px; margin: 0 auto;}

.timeline::before {content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%);}

.timeline-item {display: flex; justify-content: flex-end; padding-right: calc(50% + 32px); margin-bottom: 40px; position: relative;}

.timeline-item.right {justify-content: flex-start; padding-right: 0; padding-left: calc(50% + 32px);}

.timeline-dot {position: absolute; left: 50%; top: 20px; width: 14px; height: 14px; background: var(--green-main); border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--green-pale); transform: translateX(-50%); z-index: 1;}

.timeline-card {background: var(--white); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); border-left: 4px solid var(--green-main); max-width: 380px;}

.timeline-item.right .timeline-card {border-left: none; border-right: 4px solid var(--green-light);}

.timeline-year {font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--green-main); margin-bottom: 4px;}

.timeline-card h3 {font-size: 1rem; font-weight: 700; margin-bottom: 6px;}

.timeline-card p {font-size: 0.88rem; color: var(--text-mid); line-height: 1.65;}

@media (max-width: 700px) {
.timeline::before {left: 16px;}

.timeline-item,
.timeline-item.right {padding: 0 0 0 48px; justify-content: flex-start;}

.timeline-dot {left: 16px;}

.timeline-card {max-width: 100%;}
}

.team-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}

.team-card {background: var(--white); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; box-shadow: var(--shadow); transition: var(--transition); border: 1px solid var(--border);}

.team-card:hover {transform: translateY(-6px); box-shadow: var(--shadow-lg);}

.team-avatar {width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; color: var(--white); margin: 0 auto 14px;}

.team-name {font-size: 1.05rem; font-weight: 700; margin-bottom: 4px;}

.team-title {font-size: 0.82rem; color: var(--green-main); font-weight: 600; margin-bottom: 10px;}

.team-bio {font-size: 0.83rem; color: var(--text-mid); line-height: 1.65; margin-bottom: 14px;}

.team-social {display: flex; justify-content: center; gap: 10px;}

.team-social a {width: 32px; height: 32px; border-radius: 50%; background: var(--green-pale); color: var(--green-main); display: flex; align-items: center; justify-content: center; font-size: 0.85rem;}

.team-social a:hover {background: var(--green-main); color: var(--white);}

@media (max-width: 860px) {
.team-grid {grid-template-columns: 1fr 1fr;}
}

@media (max-width: 500px) {
.team-grid {grid-template-columns: 1fr;}
}

.cert-strip {display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;}

.cert-item {background: var(--white); border-radius: var(--radius); padding: 24px 16px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: var(--transition); border: 1px solid var(--border);}

.cert-item:hover {transform: translateY(-4px); box-shadow: var(--shadow);}

.cert-icon {font-size: 2rem; color: var(--green-main); margin-bottom: 10px;}

.cert-name {font-size: 0.88rem; font-weight: 700; margin-bottom: 4px;}

.cert-desc {font-size: 0.75rem; color: var(--text-light);}

@media (max-width: 900px) {
.cert-strip {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 500px) {
.cert-strip {grid-template-columns: 1fr 1fr;}
}

.partner-logos {display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;}

.partner-logo-item {background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 32px; font-weight: 700; font-size: 0.95rem; color: var(--text-mid); transition: var(--transition);}

.partner-logo-item:hover {border-color: var(--green-main); color: var(--green-main); background: var(--green-pale);}

/* Conservative image-format wrapper: keeps the existing image box in layout. */
.about-img-stack > .performance-picture {display: contents;}