/* ===========================================================================
   PRD About page
   =========================================================================== */

.prd-about{
font-family: var(--prd-ff-sans);
color: var(--prd-c-ink);
background: var(--prd-c-bg);
}
/* .prd-container width is inherited from base.css (1280px). */
.prd-about .prd-eyebrow{
font-size: .75rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--prd-c-accent);
margin: 0 0 .75rem;
}
.prd-about-h2{
font-family: var(--prd-ff-display);
font-weight: 600;
font-size: clamp(1.625rem, 3vw, 2.25rem);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 1rem;
color: var(--prd-c-ink);
}

/* HERO — using shared .prd-page-hero in base.css; .prd-about-hero is just a hook for page-specific tweaks if ever needed. */

/* STORY ---------------------------------------------------------------------*/
.prd-about-story{ padding-block: clamp(3rem, 6vw, 5rem); }
.prd-about-story-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: clamp(1.5rem, 5vw, 4rem);
align-items: start;
}
@media (max-width: 800px){ .prd-about-story-grid{ grid-template-columns: 1fr; gap: 1rem; } }
.prd-about-story-aside{ position: sticky; top: 110px; }
@media (max-width: 800px){ .prd-about-story-aside{ position: static; } }
.prd-about-story-photo{
margin: 1.5rem 0 0;
border-radius: 14px;
overflow: hidden;
background: var(--prd-c-line);
}
.prd-about-story-photo img{
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.prd-about-story-body{
font-size: 1rem;
line-height: 1.7;
color: var(--prd-c-ink-soft);
}
.prd-about-story-body p{ margin: 0 0 1rem; }
.prd-about-story-body p:last-child{ margin-bottom: 0; }
.prd-about-contact{
margin-top: 1.5rem !important;
padding-top: 1.25rem;
border-top: 1px solid var(--prd-c-line);
font-size: .9375rem;
color: var(--prd-c-ink) !important;
}
.prd-about-contact a{ color: var(--prd-c-accent); text-decoration: none; font-weight: 500; }
.prd-about-contact a:hover{ color: var(--prd-c-accent-ink); text-decoration: underline; }

/* PILLARS -------------------------------------------------------------------*/
.prd-about-pillars{
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--prd-c-bg-alt);
}
.prd-about-section-head{ margin: 0 0 2rem; max-width: 60ch; }
.prd-about-pillars-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
@media (max-width: 800px){ .prd-about-pillars-grid{ grid-template-columns: 1fr; } }
.prd-about-pillar{
background: #fff;
padding: 1.75rem;
border-radius: 14px;
border: 1px solid var(--prd-c-line);
transition: transform .15s ease, box-shadow .15s ease;
}
.prd-about-pillar:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17,20,24,0.06); }
.prd-about-pillar-num{
font-family: var(--prd-ff-display);
font-size: 1.25rem;
font-weight: 600;
color: var(--prd-c-accent);
margin: 0 0 .85rem;
letter-spacing: .02em;
}
.prd-about-pillar-title{
font-family: var(--prd-ff-sans);
font-size: 1.0625rem;
font-weight: 600;
margin: 0 0 .5rem;
color: var(--prd-c-ink);
}
.prd-about-pillar p{ margin: 0; color: var(--prd-c-ink-soft); font-size: .9375rem; line-height: 1.55; }

/* TEAM ----------------------------------------------------------------------*/
.prd-about-team{ padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.prd-about-team-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 5vw, 4rem);
align-items: center;
}
@media (max-width: 800px){ .prd-about-team-grid{ grid-template-columns: 1fr; } }
.prd-about-team-photo{
margin: 0;
border-radius: 16px;
overflow: hidden;
background: var(--prd-c-bg-alt);
aspect-ratio: 4 / 5;
max-height: 520px;
}
.prd-about-team-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.prd-about-team-photo.is-placeholder{
background: var(--prd-c-bg-alt);
border: 1px dashed var(--prd-c-line);
display: flex;
align-items: center;
justify-content: center;
}
.prd-about-team-placeholder{
display: flex;
flex-direction: column;
align-items: center;
gap: .85rem;
color: var(--prd-c-muted);
font-size: .8125rem;
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 500;
}
.prd-about-team-placeholder svg{ color: var(--prd-c-accent); opacity: .55; }
.prd-about-team-copy h2{ margin-block: .25rem .85rem; }
.prd-about-team-copy p{ color: var(--prd-c-ink-soft); margin: 0 0 .75rem; line-height: 1.65; font-size: 1rem; }
.prd-about-service-area{ color: var(--prd-c-ink) !important; }
.prd-about-service-area strong{ color: var(--prd-c-ink); font-weight: 600; }
.prd-about-team-actions{ display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* CTA -----------------------------------------------------------------------*/
.prd-about-cta{
background: var(--prd-c-ink);
color: #fff;
padding-block: clamp(3rem, 6vw, 4.5rem);
text-align: center;
}
.prd-about-cta-eyebrow{ color: var(--prd-c-accent) !important; }
.prd-about-cta-title{
font-family: var(--prd-ff-display);
font-weight: 600;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
line-height: 1.15;
margin: 0 0 .5rem;
color: #fff;
}
.prd-about-cta-lead{
color: rgba(255,255,255,0.78);
font-size: 1.0625rem;
margin: 0 0 1.75rem;
}
.prd-about-cta-actions{ display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.prd-about-cta .prd-btn-ghost-light{
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.35);
padding: .85rem 1.5rem;
border-radius: 999px;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
display: inline-flex; align-items: center; gap: .45rem;
transition: background .15s ease, border-color .15s ease;
}
.prd-about-cta .prd-btn-ghost-light:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.65); }
.prd-about-cta .prd-btn-ghost-light svg{ color: var(--prd-c-warm, #d4a437); }

/* Team photo caption (when using bundled placeholder) */
.prd-about-team-photo.is-placeholder{ position: relative; border: 0; aspect-ratio: 4 / 5; max-height: 520px; background: var(--prd-c-bg-alt); }
.prd-about-team-caption{
position: absolute;
left: 50%; bottom: 14px;
transform: translateX(-50%);
background: rgba(17,20,24,.78);
color: #fff;
padding: .35rem .75rem;
border-radius: 999px;
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
backdrop-filter: blur(4px);
}