/* =====================================================
   Color Splashh — about.css
   ===================================================== */

.about-hero {
  padding-top: calc(90px + var(--space-20));
  padding-bottom: var(--space-20);
  background: var(--color-emerald-pale);
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 280px;
  height: 280px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Ccircle cx='50' cy='50' r='8' fill='%2300674F' opacity='0.12'/%3E%3Ccircle cx='150' cy='30' r='5' fill='%23A6A6A6' opacity='0.1'/%3E%3Ccircle cx='230' cy='100' r='7' fill='%2300674F' opacity='0.1'/%3E%3Ccircle cx='80' cy='180' r='6' fill='%23A6A6A6' opacity='0.08'/%3E%3Ccircle cx='200' cy='220' r='8' fill='%2300674F' opacity='0.1'/%3E%3C/svg%3E");
  pointer-events: none;
}

.about-hero-inner {
  max-width: 760px;
}

/* Studio Story */
.studio-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}

.studio-story-content p + p {
  margin-top: var(--space-5);
}

.studio-story-visual {
  position: relative;
}

.studio-visual-img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-lg);
}

.studio-stat-pill {
  position: absolute;
  bottom: var(--space-8);
  right: calc(-1 * var(--space-8));
  background: var(--color-emerald);
  color: var(--color-ivory);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.studio-stat-pill .pill-number {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  display: block;
}

.studio-stat-pill .pill-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: var(--space-1);
}

/* Founder Section */
.founder-section {
  background: var(--color-emerald-deep);
  color: var(--color-ivory);
  position: relative;
  overflow: hidden;
}

.founder-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='30' cy='40' r='5' fill='%23FAF9F6' opacity='0.05'/%3E%3Ccircle cx='150' cy='20' r='4' fill='%23FAF9F6' opacity='0.04'/%3E%3Ccircle cx='180' cy='120' r='6' fill='%23B08D57' opacity='0.08'/%3E%3Ccircle cx='60' cy='160' r='4' fill='%23FAF9F6' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.founder-full-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-20);
  align-items: center;
}

.founder-full-img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-xl);
}

.founder-full-content .section-label {
  color: rgba(250, 249, 246, 0.6);
}

.founder-full-content .section-label::before {
  background: rgba(250, 249, 246, 0.4);
}

.founder-full-content h2 {
  color: var(--color-ivory);
}

.founder-full-content .pull-quote {
  color: rgba(250, 249, 246, 0.85);
  border-left: 3px solid var(--color-brass);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
}

.founder-full-content p {
  color: rgba(250, 249, 246, 0.75);
  line-height: var(--leading-relaxed);
}

.founder-full-content p + p {
  margin-top: var(--space-5);
}

/* Why Choose Us */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}


/* All responsive rules for this page are in css/responsive.css */