/* =========================================
 *    ABOUT PAGE
 * ========================================= */

:root {
	  --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Section base */
.about-section {
	  padding: 100px 0;
}

/* Hero / Content Grid Layout */
.about-grid {
	  display: grid;
	  gap: 4rem;
	  align-items: center;
}

/* Decorative Image Container */
.about-visual {
	  position: relative;
	  padding: 20px;
}

.about-accent-box {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 80%;
	  height: 90%;
	  border: 1px solid var(--color-primary);
	  z-index: 1;
}

.about-accent-box--right {
	  left: auto;
	  right: 0;
}

.about-image-frame {
	  position: relative;
	  z-index: 2;
	  overflow: hidden;
	  line-height: 0;
}

.about-image-frame img {
	  width: 100%;
	  height: auto;
	  object-fit: cover;
	  transition: var(--transition-smooth);
}

.about-image-frame:hover img {
	  transform: scale(1.05);
}

/* Typography */
.about-eyebrow {
	  display: block;
	  font-size: 0.75rem;
	  letter-spacing: 0.2em;
	  text-transform: uppercase;
	  color: var(--color-primary);
	  margin-bottom: 1rem;
	  font-weight: 600;
}

.about-heading {
	  font-size: clamp(2rem, 5vw, 3rem);
	  line-height: 1.1;
	  margin-bottom: 2rem;
	  font-weight: 300;
}

.about-body {
	  font-size: 1.25rem;
	  line-height: 1.6;
	  color: var(--color-text);
	  margin-bottom: 1.2rem;
	  opacity: 0.9;
}

/* Timeline */
.about-timeline {
	  display: grid;
	  gap: 2rem;
}

.timeline-item {
	  background: #fff;
	  padding: 3rem 2rem;
	  border-radius: 4px;
	  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
	  transition: var(--transition-smooth);
	  position: relative;
	  border-bottom: 2px solid transparent;
	  max-width: 400px;
	  width: 100%;
}

.timeline-item:hover {
	  transform: translateY(-10px);
	  border-bottom: 2px solid var(--color-primary);
}

.timeline-year {
	  font-family: var(--font-secondary);
	  font-size: 0.9rem;
	  color: var(--color-primary);
	  display: block;
	  margin-bottom: 1rem;
}

.timeline-content h3 {
	  text-transform: uppercase;
	  letter-spacing: 1px;
	  font-size: 1.2rem;
	  margin-bottom: 1rem;
}

/* Pink/Brand section narrow constraint */
.about-section--pink .page-container {
	  max-width: 800px;
	  margin: 0 auto;
}

/* Responsive */
@media (max-width: 767px) {
	.about-section {
		    padding: 60px 0;
	}
	.about-grid {
		    gap: 3rem;
	}
	.about-visual {
		    order: 2;
	}
	.about-content {
		    order: 1;
	}
}

@media (min-width: 768px) {
	.about-grid {
		    grid-template-columns: 1fr 1.2fr;
	}
	.about-grid--reverse {
		    grid-template-columns: 1.2fr 1fr;
	}
	.about-timeline {
		    grid-template-columns: repeat(3, minmax(0, 400px));
		    justify-content: center;
	}
}

@media (min-width: 1024px) {
	.about-grid {
		    gap: 6rem;
	}
}
	}
}
	}
	}
	}
}
	}
	}
	}
	}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}