/* ============================================
   ALVEX STUDIO — About Page
   ============================================ */

.about-hero {
  padding: 160px 48px 80px;
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.about-hero h1 {
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: -.05em;
  line-height: .92;
  margin-bottom: 20px;
}
.about-hero .sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(240,237,230,.5);
  max-width: 460px;
  line-height: 1.7;
}

/* --- Story + Definition (side by side) --- */
.about-story-def {
  padding: 100px 48px;
  background: var(--navy);
}
.about-story-def-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.about-story-inner h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 32px;
  line-height: 1.05;
}
.about-story-inner p {
  font-size: 16px;
  font-weight: 300;
  color: rgba(240,237,230,.55);
  line-height: 1.85;
  margin-bottom: 24px;
}

/* --- Values --- */
.values {
  padding: 100px 48px;
  background: var(--mid);
}
.values-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.values h2 {
  font-size: clamp(32px, 4.5vw, 54px);
  line-height: .98;
  margin-bottom: 60px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.value-card {
  background: var(--mid);
  padding: 40px 32px;
  border: 1px solid rgba(240,237,230,.04);
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.value-card:hover { border-color: rgba(42,94,232,.3); }
.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.value-card:hover::before { transform: scaleY(1); }
.value-card * { position: relative; z-index: 1; }
.value-num {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 700;
  color: rgba(42,94,232,.35);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 24px;
  transition: color .3s;
}
.value-card:hover .value-num { color: rgba(42,94,232,.7); }
.value-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--warm-white);
  margin-bottom: 12px;
  letter-spacing: -.02em;
}
.value-desc {
  font-size: 13px;
  font-weight: 300;
  color: rgba(240,237,230,.45);
  line-height: 1.7;
}

/* --- Personal Touch / Photo --- */
.about-photo {
  padding: 100px 48px;
  background: var(--navy);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
}
.about-photo-img {
  width: 320px;
  height: 320px;
  background: var(--mid);
  border: 1px solid rgba(240,237,230,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240,237,230,.2);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.about-photo-text {
  max-width: 400px;
}
.about-photo-text h3 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 16px;
  line-height: 1.1;
}
.about-photo-text p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(240,237,230,.5);
  line-height: 1.8;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .about-hero { padding: 140px 24px 60px; }
  .about-story-def { padding: 60px 24px; }
  .about-story-def-inner { gap: 48px; }
  .values { padding: 60px 24px; }
  .about-photo { padding: 60px 24px; gap: 48px; }
}

@media (max-width: 768px) {
  .about-hero { padding: 120px 20px 48px; }
  .about-story-def { padding: 48px 20px; }
  .about-story-def-inner { grid-template-columns: 1fr; gap: 40px; }
  .values { padding: 48px 20px; }
  .values-grid { grid-template-columns: 1fr; }
  .about-photo {
    padding: 48px 20px;
    flex-direction: column;
    gap: 32px;
  }
  .about-photo-img { width: 100%; height: 280px; }
}