/* About page base */
body.page-template-about { margin: 0 !important; padding: 0 !important; background: rgba(32, 33, 38, 1); }
.aboutpage { margin: 0 !important; padding: 0 !important; background: rgba(32, 33, 38, 1); }
.aboutpage .container { max-width: 1600px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem); box-sizing: border-box; }
.site-footer .footer-container, .site-header .header-container { max-width: 1600px; margin: 0 auto; padding-left: clamp(1.5rem, 5vw, 5rem); padding-right: clamp(1.5rem, 5vw, 5rem); }
.about-section { box-sizing: border-box; margin: 0; min-height: 100vh; }

/* Breadcrumbs */
/* Header: 48px top padding + 72px logo height + 24px gap = 144px */
.about-breadcrumbs { background: transparent; padding-top: 144px; padding-bottom: 54px; margin: 0; }
.breadcrumbs-inner { display: flex; align-items: center; gap: 8px; }
.crumb { font-family: 'Reddit Sans', sans-serif; font-size: 16px; line-height: 24px; letter-spacing: 0; text-decoration: none; }
.crumb--home { color: rgba(244,244,244,1); font-weight: 300; }
.crumb--current { color: rgba(244,244,244,1); font-weight: 500; }
.crumb-icon { width: 24px; height: 24px; display: inline-block; }

/* Hero */
.about-hero { position: relative; background: rgba(32, 33, 38, 1); color: rgba(244,244,244,1); padding-bottom: 84px; }
.about-hero-inner { position: relative; padding-top: 0; padding-bottom: 0; }
.about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.about-hero-col--media img { width: 100%; height: auto; display: block; filter: grayscale(100%); }
.about-hero-title { font-family: 'Aboreto', serif; font-weight: 400; font-size: 50px; line-height: 60px; text-transform: none; margin: 0; color: rgba(244,244,244,1); }
.about-hero-text p { font-family: 'Reddit Sans', sans-serif; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; color: rgba(244,244,244,1); max-width: 780px; margin: 0; }

/* Values */
.about-values { background: rgba(32, 33, 38, 1); color: rgba(244,244,244,1); padding-bottom: 84px; }
.about-values-inner { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; padding-top: 48px; padding-bottom: 0; }
.about-values-title { font-family: 'Aboreto', serif; font-weight: 400; font-size: 50px; line-height: 56px; margin: 0; text-align: left; }
.about-values-card { width: 100%; padding: clamp(48px, 8vw, 108px) clamp(32px, 6vw, 80px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: none; box-sizing: border-box; }
.about-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; align-items: start; justify-items: center; position: relative; }
.about-values-grid .value-item { position: relative; }
/* Centered separators between columns, spanning 75% height, aligned to middle of 64px gutter */
.about-values-grid .value-item:nth-child(-n+2)::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -32px; /* half of 64px gutter */
  width: 1px;
  height: 75%;
  background: rgba(244, 244, 244, 0.1);
  pointer-events: none;
}
.value-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.value-icon { width: 48px; height: 48px; margin-bottom: 16px; }
.value-title { margin: 0 0 12px; font-family: 'Aboreto', serif; font-weight: 400; font-size: 24px; line-height: 30px; color: rgba(244,244,244,1); }
.value-desc { font-family: 'Reddit Sans', sans-serif; font-weight: 300; font-size: 16px; line-height: 24px; color: rgba(244,244,244,0.9); margin: 0; }

/* Large Desktop Optimization */
@media (min-width: 1920px) {
  .aboutpage .container,
  .site-footer .footer-container,
  .site-header .header-container {
    max-width: 1800px;
  }
}

@media (min-width: 2560px) {
  .aboutpage .container,
  .site-footer .footer-container,
  .site-header .header-container {
    max-width: 2200px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .aboutpage .container { padding: 0 clamp(1.5rem, 4vw, 2rem); }
  .about-section { padding-bottom: 60px; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-values-grid { grid-template-columns: 1fr; }
  .about-values-grid .value-item::after { content: none; }
  .about-hero-title, .about-values-title { font-size: 36px; line-height: 44px; }
}

@media (max-width: 480px) {
  .aboutpage .container { padding-left: 24px; padding-right: 24px; }
  .about-section { padding-bottom: 40px; }
  .about-values-grid { grid-template-columns: 1fr; }
}