/* ==========================================================================
   About Us page bundle
   ========================================================================== */

/* ---------- Intro ---------- */
.pc-about-intro {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px;
  align-items: center; padding: 12px 0 48px;
}
.pc-about-intro-text p { font-size: 17px; line-height: 1.7; color: var(--pc-muted); margin: 0 0 18px; }
.pc-about-intro-text .pc-btn { margin-top: 8px; }
.pc-about-intro-art {
  background: var(--pc-yellow-soft); border-radius: var(--pc-radius-lg);
  display: flex; align-items: center; justify-content: center; padding: 46px; aspect-ratio: 4 / 3;
}
.pc-about-intro-art svg { width: 100%; max-width: 220px; height: auto; }

/* ---------- Stats ---------- */
.pc-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
.pc-stat { border-radius: var(--pc-radius); padding: 26px 22px; }
.pc-stat-num { font-family: var(--pc-serif); font-size: 34px; line-height: 1.1; color: var(--pc-ink); }
.pc-stat-lbl { font-size: 13px; font-weight: 700; color: #5F5747; margin-top: 4px; }

/* ---------- Values ----------
   Alternating rows either side of a centre line. The numbered marker gives
   the opposite side something to hold, so the zigzag isn't just empty space.
   ------------------------------------------------------------------------ */
.pc-about-values { margin-bottom: 56px; }

.pc-values { position: relative; max-width: 1080px; margin: 36px auto 0; }
.pc-values-track {
  position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--pc-border2) 7%, var(--pc-border2) 93%, transparent);
}

/* Each row is one flex unit occupying half the width, so the marker always
   sits directly beside its own text and shares its top edge. Odd rows take
   the left half and reverse, putting the disc against the centre line. */
.pc-value-row {
  position: relative; width: 50%; display: flex; align-items: flex-start;
  gap: 20px; padding: 0 46px 42px 0; flex-direction: row-reverse; text-align: right;
}
.pc-value-row:nth-of-type(even) {
  margin-left: 50%; padding: 0 0 42px 46px; flex-direction: row; text-align: left;
}
.pc-value-row:last-child { padding-bottom: 0; }

.pc-value-body { min-width: 0; }
.pc-value-marker { flex: none; display: flex; align-items: center; gap: 12px; margin-top: -8px; }
.pc-value-row:nth-of-type(even) .pc-value-marker { flex-direction: row-reverse; }
.pc-value-disc {
  position: relative; z-index: 1; width: 78px; height: 78px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  outline: 7px solid var(--pc-bg);
  box-shadow: 0 6px 18px rgba(46, 42, 34, .10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pc-value-row:hover .pc-value-disc { transform: scale(1.05); box-shadow: 0 14px 28px rgba(46, 42, 34, .15); }
.pc-value-disc .pc-icon { opacity: .9; }

.pc-value-num {
  font-family: var(--pc-serif); font-style: italic; font-weight: 700;
  font-size: 38px; color: var(--pc-border2); line-height: 1;
}

.pc-value-body h3 { font-size: 23px; margin: 0 0 8px; }
.pc-value-body p { font-size: 15px; color: var(--pc-muted); margin: 0; line-height: 1.7; }

/* Scroll-in: each row arrives from its own side (JS adds .is-in). */
.pc-value-row { opacity: 0; transform: translateX(-28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .68, .3, 1); }
.pc-value-row:nth-of-type(even) { transform: translateX(28px); }
.pc-value-row.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pc-value-row { opacity: 1; transform: none; transition: none; }
}

/* ---------- Timeline ----------
   Alternating sides of a centre line on desktop, single column on mobile.
   Steps fade in from their own side as they scroll into view.
   ------------------------------------------------------------------------ */
.pc-about-timeline { margin-bottom: 56px; }

.pc-timeline { position: relative; max-width: 1000px; margin: 34px auto 0; }
.pc-timeline::before {
  content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--pc-border2) 8%, var(--pc-border2) 92%, transparent);
}

.pc-timeline-item {
  position: relative; width: 50%; padding: 0 46px 40px 0; text-align: right;
}
.pc-timeline-item:nth-child(even) {
  margin-left: 50%; padding: 0 0 40px 46px; text-align: left;
}
.pc-timeline-item:last-child { padding-bottom: 0; }

/* Node on the centre line */
.pc-timeline-item::before {
  content: ''; position: absolute; top: 4px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--pc-yellow);
  box-shadow: 0 0 0 5px var(--pc-bg), 0 4px 12px rgba(46, 42, 34, .14);
  right: -9px;
}
.pc-timeline-item:nth-child(even)::before { right: auto; left: -9px; }

.pc-timeline-year { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-teal); }
.pc-timeline-body h3 { font-size: 22px; margin: 5px 0 7px; }
.pc-timeline-body p { font-size: 15px; color: var(--pc-muted); margin: 0; line-height: 1.65; }

/* Scroll-in animation (JS adds .is-in) */
.pc-timeline-item {
  opacity: 0; transform: translateX(-26px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .68, .3, 1);
}
.pc-timeline-item:nth-child(even) { transform: translateX(26px); }
.pc-timeline-item.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pc-timeline-item { opacity: 1; transform: none; transition: none; }
}

/* ---------- Editable content + CTA ---------- */
.pc-about-content { max-width: var(--pc-measure); margin-bottom: 48px; }
.pc-about-cta {
  background: var(--pc-teal); border-radius: var(--pc-radius-lg); padding: 38px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.pc-about-cta h2 { color: #fff; font-size: 30px; margin: 0 0 6px; }
.pc-about-cta p { color: #D8E8EB; margin: 0; font-size: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pc-about-intro { grid-template-columns: 1fr; gap: 28px; }
  .pc-about-intro-art { aspect-ratio: 16 / 9; padding: 30px; }
  .pc-about-stats { grid-template-columns: repeat(2, 1fr); }

  /* Values: full width, icon to the left of the text on every row. */
  .pc-values-track { display: none; }
  .pc-value-row,
  .pc-value-row:nth-of-type(even) {
    width: 100%; margin-left: 0; padding: 0 0 30px;
    flex-direction: row; text-align: left; gap: 16px;
    transform: translateY(20px);
  }
  .pc-value-row:nth-of-type(even) .pc-value-marker { flex-direction: row; }
  .pc-value-disc { width: 60px; height: 60px; outline-width: 0; }
  .pc-value-num { font-size: 26px; }
  .pc-value-row.is-in { transform: none; }

  /* Single column with the line down the left. */
  .pc-timeline::before { left: 9px; margin-left: 0; }
  .pc-timeline-item,
  .pc-timeline-item:nth-child(even) {
    width: 100%; margin-left: 0; padding: 0 0 32px 38px; text-align: left;
    transform: translateY(20px);
  }
  .pc-timeline-item::before,
  .pc-timeline-item:nth-child(even)::before { left: 0; right: auto; }
  .pc-timeline-item.is-in { transform: none; }
}
@media (max-width: 620px) {
  .pc-about-cta { padding: 28px; }
  .pc-about-cta .pc-btn { width: 100%; }
}