/* ============================================================
   ABOUT PAGE — BINJAN-INSPIRED, COLOR-ENHANCED
============================================================ */

.page-about{
  --max: 1200px;
  --pad: clamp(48px, 6vw, 96px);
  --gap: clamp(24px, 4vw, 56px);

  --border: rgba(17,24,39,.14);
  --muted: rgba(17,24,39,.7);

  --blue: #2563eb;
  --green: #10b981;
  --amber: #f59e0b;
}

/* ============================================================
   BASE LAYOUT
============================================================ */

.about-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.about-wrap.narrow{
  max-width: 720px;
}

.about-wrap.center{
  text-align: center;
}

.about-section{
  padding: var(--pad) 0;
}

.about-section.light{
  background:
    linear-gradient(
      180deg,
      rgba(37,99,235,.05),
      rgba(16,185,129,.04)
    );
}

/* ============================================================
   HERO
============================================================ */

.about-hero{
  padding: var(--pad) 0;
  background:
    radial-gradient(
      900px 400px at 10% 20%,
      rgba(37,99,235,.12),
      transparent 60%
    ),
    radial-gradient(
      600px 300px at 90% 10%,
      rgba(16,185,129,.10),
      transparent 60%
    ),
    #fff;
}

.about-hero-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap);
  align-items: center;
}

.about-hero h1{
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  margin-bottom: .75rem;
}

.about-hero .lead{
  font-size: 1.15rem;
  margin-bottom: .75rem;
  color: rgba(17,24,39,.85);
}

.about-hero p{
  color: var(--muted);
  max-width: 62ch;
}

/* ============================================================
   HERO STATS
============================================================ */

.about-stats{
  display: flex;
  gap: 32px;
  margin-top: 28px;
}

.about-stats div strong{
  display: block;
  font-size: 1.35rem;
}

.about-stats div:nth-child(1) strong{ color: var(--blue); }
.about-stats div:nth-child(2) strong{ color: var(--green); }
.about-stats div:nth-child(3) strong{ color: var(--amber); }

.about-stats span{
  font-size: .85rem;
  color: var(--muted);
}

/* ============================================================
   HERO PHOTO (SQUARE + COLOR SPLASH)
============================================================ */

.about-hero-photo{
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #f3f4f6;
  margin-left: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.08);
}

/* Color splash layer */
.about-hero-photo{
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1; 
  background: #f3f4f6;
  border-radius: 18px;
  overflow: hidden;
  margin-left: auto;
}

.about-hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ============================================================
   WHAT I HELP WITH
============================================================ */

.help-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.help-card{
  position: relative;
  background: #fff;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

/* Accent stripe */
.help-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background:
    linear-gradient(
      180deg,
      var(--blue),
      var(--green)
    );
}

.help-card h3{
  margin-bottom: 10px;
}

/* ============================================================
   EXPERIENCE / SPLIT SECTIONS
============================================================ */

.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.experience-list{
  list-style: none;
  padding: 0;
}

.experience-list li{
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}

.experience-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}

/* ============================================================
   QUOTES / PHILOSOPHY
============================================================ */

.about__quote{
  margin-top: 12px;
  padding: 16px 20px;
  border-left: 4px solid var(--blue);
  background:
    linear-gradient(
      90deg,
      rgba(37,99,235,.12),
      transparent
    );
  font-style: italic;
  color: rgba(17,24,39,.85);
}

/* ============================================================
   CTA
============================================================ */

.about-section .primary-btn{
  margin-top: 16px;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 900px){

  .about-hero-grid,
  .help-grid,
  .split{
    grid-template-columns: 1fr;
  }

  .about-stats{
    flex-direction: column;
    gap: 12px;
  }

  .about-hero-photo{
    max-width: 320px;
    margin: 32px auto 0;
  }

  .about-hero p{
    max-width: 100%;
  }
}