/* ==================================================================
   The Longevity Edge — About Dr. Dave page styles
   ================================================================== */

/* Reset Kadence page chrome */
body.page-template-page-about .entry-header,
body.page-template-page-about .page-title,
body.page-template-page-about .entry-title { display: none !important; }
body.page-template-page-about .content-area { margin-top: 0 !important; padding: 0 !important; }
body.page-template-page-about .entry-content-wrap { padding: 0 !important; }
body.page-template-page-about main#main { padding: 0 !important; }
body.page-template-page-about .primary-sidebar { display: none !important; }

/* Containers — full-bleed sections + inner 1200 max */
.about-hero,
.about-pullquote,
.about-path,
.about-credentials,
.about-why,
.about-personal,
.about-cta { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.about-hero .container,
.about-pullquote .container,
.about-path .container,
.about-credentials .container,
.about-why .container,
.about-personal .container,
.about-cta .container { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-5); }

/* Shared eyebrow + section head */
.eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; color: var(--gold-600); text-transform: uppercase; letter-spacing: var(--ls-widest); margin: 0 0 var(--s-3); }
.about-section-head { margin: 0 0 var(--s-7); max-width: 760px; }
.about-section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); color: var(--navy-900); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.about-section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.about-section-head--center h2 { margin-left: auto; margin-right: auto; }
.about-section-sub { font-size: var(--fs-base); color: var(--ink-700); margin: 0; line-height: var(--lh-relaxed); }
.about-section-head--center .about-section-sub { max-width: 60ch; margin: 0 auto; }

/* === HERO === */
.about-hero { background: var(--canvas); padding: var(--s-9) 0 var(--s-8); border-bottom: 1px solid var(--navy-100); position: relative; }
.about-hero::after { content: ""; position: absolute; right: 0; bottom: 0; width: 320px; height: 320px; background: radial-gradient(circle at 70% 30%, rgba(196,156,88,0.10) 0%, transparent 60%); pointer-events: none; }
.about-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s-8); align-items: center; position: relative; z-index: 1; }
@media (max-width: 900px) { .about-hero-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.about-hero-text h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5xl); color: var(--navy-900); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.about-hero-subtitle { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); color: var(--gold-600); font-style: italic; margin: 0 0 var(--s-5); letter-spacing: var(--ls-tight); }
.about-hero-lede { font-size: var(--fs-lg); color: var(--ink-700); line-height: var(--lh-relaxed); margin: 0 0 var(--s-6); max-width: 60ch; }

.about-hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); padding: var(--s-5) 0 0; border-top: 1px solid var(--navy-100); }
@media (max-width: 640px) { .about-hero-meta { grid-template-columns: 1fr; gap: var(--s-4); } }
.about-hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.about-hero-meta-num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: var(--gold-600); letter-spacing: var(--ls-tight); line-height: 1; }
.about-hero-meta-label { font-size: var(--fs-xs); color: var(--ink-700); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: 600; line-height: var(--lh-normal); }

.about-hero-portrait { position: relative; }
.about-hero-portrait-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 48px rgba(14, 26, 43, 0.18); transform: rotate(-1deg); transition: transform 400ms var(--ease-out); }
.about-hero-portrait-frame:hover { transform: rotate(0deg); }
.about-hero-portrait-frame::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--gold-300); border-radius: var(--r-lg); pointer-events: none; z-index: 2; }
.about-hero-portrait-frame img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/5; }
.about-hero-portrait-sig { position: absolute; bottom: -16px; right: -8px; background: var(--navy-900); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); padding: 8px 16px; border-radius: var(--r-pill); letter-spacing: var(--ls-tight); box-shadow: 0 8px 16px rgba(14,26,43,0.22); }

/* === PULL QUOTE === */
.about-pullquote { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%); color: #fff; padding: var(--s-9) 0; position: relative; overflow: hidden; }
.about-pullquote::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(229,189,92,0.12) 0%, transparent 50%); pointer-events: none; }
.about-pullquote .container { position: relative; z-index: 1; max-width: 880px; text-align: center; }
.about-pullquote-mark { color: var(--gold-300); margin: 0 auto var(--s-3); display: block; opacity: 0.7; }
.about-pullquote blockquote { margin: 0; }
.about-pullquote blockquote p { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: var(--fs-2xl); color: #fff; line-height: 1.45; margin: 0 0 var(--s-5); letter-spacing: var(--ls-tight); }
@media (max-width: 700px) { .about-pullquote blockquote p { font-size: var(--fs-xl); } }
.about-pullquote-attr { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--gold-300); text-transform: uppercase; letter-spacing: var(--ls-widest); font-weight: 700; font-style: normal; }

/* === PATH / TIMELINE === */
.about-path { background: var(--surface); padding: var(--s-9) 0; }
.about-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.about-timeline::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 80px; width: 2px; background: linear-gradient(180deg, var(--gold-300) 0%, var(--navy-100) 70%); }
@media (max-width: 700px) { .about-timeline::before { left: 16px; } }
.about-timeline-item { position: relative; padding: 0 0 var(--s-6) 130px; }
.about-timeline-item:last-child { padding-bottom: 0; }
@media (max-width: 700px) { .about-timeline-item { padding-left: 56px; } }

.about-timeline-marker { position: absolute; left: 0; top: 0; width: 96px; padding: 8px 12px; background: var(--gold-600); color: #fff; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); text-align: center; letter-spacing: var(--ls-wide); text-transform: uppercase; box-shadow: 0 4px 8px rgba(196,156,88,0.22); }
@media (max-width: 700px) {
	.about-timeline-marker { width: auto; padding: 4px 10px; font-size: 10px; left: -2px; }
}
.about-timeline-marker::after { content: ""; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); width: 14px; height: 2px; background: var(--gold-300); }
@media (max-width: 700px) { .about-timeline-marker::after { display: none; } }

.about-timeline-body h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--navy-900); margin: 0 0 var(--s-2); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.about-timeline-body p { font-size: var(--fs-base); color: var(--ink-700); line-height: var(--lh-relaxed); margin: 0; }

/* === CREDENTIALS === */
.about-credentials { background: var(--canvas); padding: var(--s-9) 0; }
.about-credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .about-credentials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .about-credentials-grid { grid-template-columns: 1fr; } }

.about-credential-card { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-5); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.about-credential-card:hover { transform: translateY(-2px); border-color: var(--gold-300); box-shadow: 0 12px 28px rgba(14,26,43,0.08); }
.about-credential-card-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--gold-50); color: var(--gold-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-4); }
.about-credential-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--navy-900); margin: 0 0 var(--s-2); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.about-credential-card p { font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-normal); margin: 0; }

/* === WHY TLE === */
.about-why { background: var(--surface); padding: var(--s-9) 0; }
.about-why-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7); align-items: start; }
@media (max-width: 900px) { .about-why-grid { grid-template-columns: 1fr; } }
.about-why-text h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); color: var(--navy-900); margin: 0 0 var(--s-5); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.about-why-text p { font-size: var(--fs-lg); color: var(--ink-700); line-height: var(--lh-relaxed); margin: 0 0 var(--s-4); }
.about-why-text p:last-of-type { font-family: var(--font-display); font-style: italic; color: var(--navy-900); font-weight: 500; font-size: var(--fs-xl); border-left: 3px solid var(--gold-600); padding-left: var(--s-4); margin-top: var(--s-5); }

.about-why-card { background: var(--canvas); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-6); position: sticky; top: 100px; }
.about-why-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--navy-900); margin: 0 0 var(--s-4); letter-spacing: var(--ls-tight); }
.about-why-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.about-why-card li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-sm); color: var(--ink-900); line-height: var(--lh-normal); }
.about-why-card li svg { color: var(--success); margin-top: 2px; flex-shrink: 0; }

/* === PERSONAL === */
.about-personal { background: var(--canvas); padding: var(--s-9) 0; }
.about-personal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 768px) { .about-personal-grid { grid-template-columns: 1fr; } }
.about-personal-stat { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-6); text-align: center; }
.about-personal-stat-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--navy-900); color: var(--gold-300); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-4); }
.about-personal-stat h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--navy-900); margin: 0 0 var(--s-2); letter-spacing: var(--ls-tight); }
.about-personal-stat p { font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-relaxed); margin: 0; }

/* === CTA === */
.about-cta { background: var(--surface); padding: var(--s-8) 0 var(--s-9); }
.about-cta-card { background: linear-gradient(105deg, var(--gold-50) 0%, var(--surface) 100%); border: 1px solid var(--gold-100); border-radius: var(--r-lg); padding: var(--s-7) var(--s-8); display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center; box-shadow: 0 8px 24px rgba(196,156,88,0.10); }
@media (max-width: 768px) { .about-cta-card { grid-template-columns: 1fr; padding: var(--s-6); } }
.about-cta-body h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: var(--navy-900); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.about-cta-body p { font-size: var(--fs-base); color: var(--ink-700); line-height: var(--lh-relaxed); margin: 0; max-width: 60ch; }
.about-cta-eyebrow { color: var(--gold-600); margin-bottom: var(--s-2); }
.about-cta .btn-lg { white-space: nowrap; padding: 0 var(--s-5); height: 56px; line-height: 56px; }