/* =====================================================
   About Us Page — Dedicated Stylesheet
   Velorchid Innovation
   This file only styles the About page (about.html).
   It is loaded after main.css so it can safely extend
   the site's existing design tokens (colors, fonts, etc.)
   without touching any other page.
===================================================== */

/* ---------- Breadcrumb / Hero ---------- */
.about-breadcrumb {
  background: #f4f2ee;
  padding-block: 200px 90px;
}

.about-breadcrumb-tag {
  color: hsl(var(--main-two));
  letter-spacing: 0.14em;
  font-size: 14px;
}

.about-breadcrumb-title {
  font-family: var(--heading-font);
  font-size: clamp(2.25rem, 1.2rem + 4vw, 4.5rem);
  line-height: 1.05;
  font-weight: 500;
}

.about-breadcrumb-title .text-stroke-2 {
  -webkit-text-stroke: 1.5px hsl(var(--heading-color));
  color: transparent;
}

.about-breadcrumb-text {
  max-width: 640px;
  margin: 20px auto 0;
  color: hsl(var(--body-color));
}

.about-breadcrumb-menu {
  margin-top: 28px;
  list-style: none;
  padding: 0;
}

.about-breadcrumb-menu li a,
.about-breadcrumb-menu li.active {
  font-weight: 500;
  color: hsl(var(--body-color));
}

.about-breadcrumb-menu li a:hover {
  color: hsl(var(--main-two));
}

.about-breadcrumb-menu li.active {
  color: hsl(var(--heading-color));
}

.about-breadcrumb-menu i {
  font-size: 12px;
  color: hsl(var(--body-color));
}

/* ---------- Story Section ---------- */
.about-story-thumb {
  overflow: hidden;
}

.about-story-thumb img {
  display: block;
  object-fit: cover;
}

.about-story-badge {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 22px 26px;
  color: #fff;
  text-align: center;
  line-height: 1.1;
}

.about-story-badge span {
  display: block;
  font-family: var(--heading-font);
  font-size: 40px;
  font-weight: 500;
  color: hsl(var(--main-two));
}

.about-story-badge p {
  margin: 4px 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about-story-subtitle {
  color: hsl(var(--main-two));
  letter-spacing: 0.12em;
  font-size: 14px;
}

.about-story-title {
  font-family: var(--heading-font);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
}

.about-story-list-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: hsl(var(--main-two) / 12%);
  color: hsl(var(--main-two));
  font-size: 14px;
}

/* ---------- Stats Section ---------- */
.about-stats-number {
  font-family: var(--heading-font);
  font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.75rem);
  font-weight: 500;
  margin-bottom: 8px;
}

.about-stats-item p {
  color: hsl(var(--white) / 75%);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ---------- Values / Mission Section ---------- */
.about-value-card {
  background: #f4f2ee;
  padding: 40px 32px;
  transition: transform 0.35s ease, background 0.35s ease;
}

.about-value-card:hover {
  transform: translateY(-6px);
  background: hsl(var(--main-two) / 8%);
}

.about-value-card h4 {
  font-family: var(--heading-font);
  font-weight: 500;
  color: hsl(var(--heading-color));
}

.about-value-card p {
  color: hsl(var(--body-color));
  margin: 0;
}

.about-value-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  background: hsl(var(--main-two) / 12%);
  color: hsl(var(--main-two));
  font-size: 26px;
}

/* ---------- Team Section ---------- */
.about-team-card {
  background: hsl(var(--white) / 4%);
}

.about-team-thumb img {
  display: block;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
}

.about-team-content {
  padding: 20px 16px 26px;
}

.about-team-content h5 {
  font-family: var(--heading-font);
  font-weight: 500;
}

.about-team-content p {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- CTA Section ---------- */
.about-cta-inner {
  background: #0b0d10;
  padding: 56px 60px;
  gap: 24px;
}

.about-cta-content h3 {
  font-family: var(--heading-font);
  font-weight: 500;
}

.about-cta-content p {
  margin: 6px 0 0;
  color: hsl(var(--white) / 75%);
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 767px) {
  .about-breadcrumb {
    padding-block: 150px 60px;
  }

  .about-story-badge {
    right: 12px;
    bottom: 12px;
    padding: 14px 18px;
  }

  .about-story-badge span {
    font-size: 28px;
  }

  .about-cta-inner {
    padding: 36px 28px;
    justify-content: center;
    text-align: center;
  }
}