/* ============================================================================
   INNER PAGE TEMPLATE
   These are the exact rules from about.html's own embedded <style> block,
   using the exact same class names (.page-banner, .breadcrumb-line,
   .timeline*, .value-card) so any page rendered through inner_page.php —
   About included — looks pixel-identical to the original mockup. Everything
   else the mockup uses (.hero-title, .eyebrow, .about-figure, .disc,
   .section-title, .newsletter-band, .service-icon, etc.) is already defined
   in style.css since the homepage uses those same classes.
   ============================================================================ */

.page-banner{
  margin-top:74px;padding:5rem 0 4rem;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 15% 15%, var(--plum-2) 0%, var(--plum-dark-2) 45%, var(--plum-dark) 100%);
  color:#fff;
}
.page-banner .breadcrumb-line a{color:rgba(255,255,255,.7);}
.page-banner .breadcrumb-line a:hover{color:var(--gold-light);}
.timeline{border-left:2px solid rgba(92,31,59,.15);padding-left:1.6rem;}
.timeline-item{position:relative;padding-bottom:2.2rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";position:absolute;left:-1.85rem;top:.3rem;width:12px;height:12px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px var(--ivory-2);
}
.timeline-year{font-family:'Fraunces',serif;font-weight:700;color:var(--plum);font-size:1.1rem;}
.value-card{
  background:#fff;border-radius:16px;padding:2rem 1.6rem;border:1px solid rgba(32,11,20,.07);height:100%;
  transition:.25s ease;
}
.value-card:hover{border-color:var(--gold);box-shadow:var(--shadow-soft);transform:translateY(-3px);}