/* ─────────────────────────────────────────
   ABOUT.CSS
───────────────────────────────────────── */

.about-hero { position:relative; padding:120px 0 80px; overflow:hidden; }
.about-hero-bg {
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 70% at 90% 30%, rgba(107,140,107,0.1) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 10% 70%, rgba(92,64,51,0.06) 0%, transparent 60%), var(--cream);
  z-index:0;
}
.about-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:280px 1fr; gap:60px; align-items:start; }

.about-hero-photo { display:flex; flex-direction:column; gap:20px; position:sticky; top:88px; }

.ben-headshot {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  display: block;
  box-shadow: var(--shadow-md);
}

/* Keep placeholder styles in case needed later */

.about-sidebar-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px; display:flex; flex-direction:column; gap:14px; border:1px solid var(--cream-dark); }

.about-contact-item { display:flex; align-items:center; gap:12px; text-decoration:none; transition:opacity 0.15s; }
.about-contact-item:hover { opacity:0.75; }
.about-contact-icon { font-size:16px; line-height:1; flex-shrink:0; }
.about-contact-item strong { display:block; font-size:12px; font-weight:500; color:var(--text-dark); }
.about-contact-item span { display:block; font-size:13px; color:var(--sage-dark); font-weight:500; }
.about-contact-divider { height:1px; background:var(--cream-dark); }

.about-hero-text h1 { font-size:clamp(2rem,4vw,3rem); color:var(--brown); margin:12px 0 20px; }
.about-lead { font-size:16px; color:var(--text-mid); line-height:1.75; margin-bottom:16px; max-width:600px; }

.about-stats { display:flex; gap:32px; margin-top:28px; padding-top:28px; border-top:1px solid var(--cream-dark); }
.about-stat { display:flex; flex-direction:column; gap:2px; }
.about-stat-num { font-family:'Lora',serif; font-size:2rem; font-weight:600; color:var(--sage-dark); line-height:1; }
.about-stat-label { font-size:12px; color:var(--text-light); }

/* STORY */
.story { padding:100px 0; background:var(--white); }
.story-inner { display:grid; grid-template-columns:1fr 380px; gap:80px; align-items:start; }
.story-text h2 { font-size:clamp(1.6rem,3vw,2.2rem); color:var(--brown); margin:12px 0 24px; }
.story-text p { font-size:15px; color:var(--text-mid); line-height:1.8; margin-bottom:16px; max-width:560px; }

.story-quote { margin:32px 0 0; padding:24px 28px; border-left:3px solid var(--sage-dark); background:var(--sage-pale); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-family:'Lora',serif; font-style:italic; font-size:1.05rem; color:var(--brown); line-height:1.65; }
.story-quote cite { display:block; font-style:normal; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text-light); margin-top:12px; }

.story-values h3 { font-size:1.3rem; color:var(--brown); margin:12px 0 24px; }
.values-list { display:flex; flex-direction:column; }
.value-item { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--cream-dark); align-items:flex-start; }
.value-icon { font-size:1.4rem; line-height:1; flex-shrink:0; margin-top:2px; }
.value-item h4 { font-size:0.95rem; color:var(--brown); margin-bottom:4px; }
.value-item p { font-size:13px; color:var(--text-mid); line-height:1.6; }

/* CREDENTIALS */
.credentials { padding:100px 0; background:var(--cream); }
.creds-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cred-card { background:var(--white); border-radius:var(--radius); padding:28px 24px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--cream-dark); transition:transform 0.2s, box-shadow 0.2s; }
.cred-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cred-icon { font-size:1.8rem; line-height:1; }
.cred-card h4 { font-size:0.95rem; color:var(--brown); line-height:1.3; }
.cred-card p { font-size:13px; color:var(--text-mid); line-height:1.6; }

/* CONTACT */
.about-contact { padding:100px 0; background:var(--white); }
.about-contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-contact-text h2 { font-size:clamp(1.6rem,3vw,2.2rem); color:var(--brown); margin:12px 0 16px; }
.about-contact-text p { font-size:15px; color:var(--text-mid); line-height:1.7; margin-bottom:28px; }

.contact-methods { display:flex; flex-direction:column; gap:12px; }
.contact-method { display:flex; align-items:center; gap:14px; padding:16px 20px; background:var(--cream); border-radius:var(--radius-sm); border:1px solid var(--cream-dark); text-decoration:none; transition:border-color 0.15s, transform 0.15s; }
.contact-method:hover { border-color:var(--brown-pale); transform:translateX(4px); }
.contact-method-icon { font-size:1.4rem; line-height:1; flex-shrink:0; }
.contact-method strong { display:block; font-size:13px; font-weight:500; color:var(--text-dark); margin-bottom:2px; }
.contact-method span { display:block; font-size:15px; color:var(--sage-dark); font-weight:500; }

.about-contact-form .sell-form { background:var(--cream); border-radius:var(--radius); padding:28px; border:1px solid var(--cream-dark); }

/* Form inputs (reused from sell.css — include sell.css OR duplicate here) */
.about-contact-form input[type="text"],
.about-contact-form input[type="email"],
.about-contact-form input[type="tel"],
.about-contact-form textarea {
  width:100%; padding:10px 13px; border:1px solid var(--cream-dark); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:14px; color:var(--text-dark); background:var(--white); transition:border-color 0.15s; outline:none;
}
.about-contact-form input:focus,
.about-contact-form textarea:focus { border-color:var(--sage-dark); }
.about-contact-form label { font-size:12px; font-weight:500; color:var(--text-mid); }
.about-contact-form .form-group { display:flex; flex-direction:column; gap:5px; }
.about-contact-form .sell-form { display:flex; flex-direction:column; gap:14px; }
.about-contact-form textarea { resize:vertical; min-height:100px; line-height:1.5; }
.about-contact-form .form-submit { width:100%; padding:14px; font-size:15px; border-radius:var(--radius-sm); margin-top:4px; }

.form-success { padding:40px 28px; flex-direction:column; align-items:center; text-align:center; gap:12px; background:var(--cream); border-radius:var(--radius); }
.success-icon { width:52px; height:52px; border-radius:50%; background:var(--sage-pale); color:var(--sage-dark); font-size:22px; display:flex; align-items:center; justify-content:center; }
.form-success h3 { font-size:1.3rem; color:var(--brown); }
.form-success p { font-size:14px; color:var(--text-mid); line-height:1.6; }

.nav-links .active { color:var(--sage-dark) !important; font-weight:500; }

/* RESPONSIVE */
@media (max-width:960px) {
  .about-hero-inner { grid-template-columns:1fr; }
  .about-hero-photo { position:static; flex-direction:row; align-items:flex-start; }
  .photo-placeholder { width:140px; aspect-ratio:1; flex-shrink:0; }
  .about-sidebar-card { flex:1; }
  .story-inner { grid-template-columns:1fr; gap:48px; }
  .creds-grid { grid-template-columns:repeat(2,1fr); }
  .about-contact-inner { grid-template-columns:1fr; gap:48px; }
}
@media (max-width:600px) {
  .about-hero-photo { flex-direction:column; }
  .photo-placeholder { width:100%; aspect-ratio:3/2; }
  .creds-grid { grid-template-columns:1fr; }
  .about-stats { gap:16px; flex-wrap:wrap; }
}