/* Content below the original hero only. */
.about-page {
    --about-ink: var(--color-gray-900);
    --about-muted: var(--color-gray-600);
    --about-purple: var(--color-indigo-600);
    color: var(--about-ink);
    background: var(--color-gray-50);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page .about-container { max-width: 1140px; }
.about-page :is(h2, h3) { text-wrap: balance; }
.about-page :is(p, li) { text-wrap: pretty; }
.about-page h2 { color: var(--about-ink); line-height: 1.55; }
.about-page a:focus-visible { outline: 3px solid var(--color-indigo-500); outline-offset: 5px; border-radius: 8px; }
.about-page .about-cta-panel a:focus-visible { outline-color: var(--color-indigo-200); }
.about-page .about-cta-actions > a { min-height: 54px; padding: 14px 26px; border: 1px solid transparent; border-radius: 14px; font-size: 15px; line-height: 1.65; transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.about-page .about-cta-actions > a > svg { flex-shrink: 0; }
.about-page .about-cta-actions > a:first-child { color: var(--color-indigo-700); background: #fff; box-shadow: 0 8px 24px rgb(30 27 75 / 18%); }
.about-page .about-cta-actions > a:last-child { color: #fff; border-color: rgb(255 255 255 / 42%); background: rgb(255 255 255 / 5%); box-shadow: none; }
.about-page .about-cta-actions > a:first-child:hover { background: var(--color-indigo-50); box-shadow: 0 10px 30px rgb(30 27 75 / 24%); }
.about-page .about-cta-actions > a:last-child:hover { border-color: rgb(255 255 255 / 65%); background: rgb(255 255 255 / 12%); }

/* Warm, spacious copy and the two original audience cards. */
.about-page .about-purpose { padding-top: 80px; padding-bottom: 80px; background: radial-gradient(ellipse at 0 82%, var(--color-indigo-50) 0, transparent 50%), radial-gradient(ellipse at 100% 100%, var(--color-amber-50) 0, transparent 50%); }
.about-page .about-intro { max-width: 820px; }
.about-page .about-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--about-purple); font-size: 13px; letter-spacing: .06em; margin-bottom: 18px; }
.about-page .about-eyebrow::before, .about-page .about-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--color-indigo-200); }
.about-page .about-intro h2 { font-size: clamp(26px, 3vw, 38px); }
.about-page .about-intro h2 span { color: var(--about-purple); }
.about-page .about-story-copy { color: var(--about-muted); font-size: 17px; line-height: 1.95; margin-top: 28px; }
.about-page .about-story-copy > p + p { margin-top: 22px; }
.about-page .about-story-copy > p:nth-child(2) { color: var(--color-indigo-700); font-weight: 600; padding: 18px 24px; border-block: 1px solid var(--color-indigo-100); background: linear-gradient(90deg, transparent, var(--color-indigo-50) 50%, transparent); }
.about-page .about-audiences { margin-top: 48px; gap: 26px; align-items: stretch; }
.about-page .about-audience {
    --audience-rgb: 99 102 241;
    --audience-ink: var(--color-indigo-600);
    position: relative;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgb(var(--audience-rgb) / 17%);
    border-radius: 28px;
    background: linear-gradient(145deg, rgb(var(--audience-rgb) / 7%), rgb(var(--audience-rgb) / 1%) 72%), #fff;
    box-shadow: 0 12px 36px -26px rgb(var(--audience-rgb) / 30%), inset 0 1px 0 #fff;
}
.about-page .about-resident { --audience-rgb: 245 158 11; --audience-ink: var(--color-amber-700); }
.about-page .about-audience::after { content: ""; position: absolute; pointer-events: none; width: 140px; height: 140px; top: -42px; right: -30px; border: 22px solid rgb(var(--audience-rgb) / 4%); border-radius: 50%; }
.about-page .about-audience-icon { width: 56px; height: 56px; margin-bottom: 20px; border: 1px solid rgb(var(--audience-rgb) / 16%); border-radius: 18px; color: var(--audience-ink); background: #fff; box-shadow: 0 5px 16px -7px rgb(var(--audience-rgb) / 25%); }
.about-page .about-audience h3 { color: var(--audience-ink); font-size: 23px; line-height: 1.55; }
.about-page .about-audience > p { color: var(--about-muted); font-size: 15px; line-height: 1.9; }
.about-page .about-audience > p.mt-6 { color: var(--audience-ink); margin-top: 24px; padding-top: 22px; border-top: 1px solid rgb(var(--audience-rgb) / 14%); font-size: 14px; }
.about-page .about-audience ul { margin-top: 14px; color: var(--color-gray-700); font-size: 14px; line-height: 1.85; }
.about-page .about-audience li + li { margin-top: 12px; }
.about-page .about-audience li svg { width: 20px; height: 20px; margin-top: 3px; color: var(--audience-ink); }

/* Values retain their four-card layout with a clearer visual rhythm. */
.about-page .about-values { padding-top: 64px; padding-bottom: 76px; border-top: 1px solid var(--color-gray-100); background: #fff; }
.about-page .about-section-title { margin-bottom: 32px; font-size: 32px; }
.about-page .about-section-title::after { content: ""; display: block; width: 38px; height: 3px; border-radius: 4px; margin: 16px auto 0; background: var(--color-indigo-200); }
.about-page .about-values-grid { gap: 18px; }
.about-page .about-value { --value-accent: var(--color-indigo-600); --value-tint: var(--color-indigo-100); padding: 26px; gap: 18px; border-color: var(--color-indigo-100); border-radius: 20px; background: #fff; box-shadow: 0 4px 18px -15px rgb(49 46 129 / 16%); }
.about-page .about-value > span { width: 40px; height: 40px; border-radius: 13px; color: var(--value-accent); background: var(--value-tint); }
.about-page .about-value > div { min-width: 0; }
.about-page .about-value h3 { color: var(--about-ink); font-size: 17px; line-height: 1.6; }
.about-page .about-value p { margin-top: 8px; color: var(--about-muted); font-size: 14px; line-height: 1.85; }

.about-page .about-security { padding-top: 70px; padding-bottom: 70px; }
.about-page .about-security-panel { position: relative; margin-top: 0; padding: 40px; border-color: var(--color-emerald-100); border-radius: 30px; background: linear-gradient(135deg, var(--color-emerald-50), #fff); box-shadow: 0 14px 36px -30px rgb(5 150 105 / 25%); }
.about-page .about-security-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 36px; }
.about-page .about-security-intro, .about-page .about-security-list { width: auto; min-width: 0; }
.about-page .about-security-icon { width: 70px; height: 70px; margin-bottom: 26px; border: 1px solid var(--color-emerald-100); border-radius: 23px; color: var(--color-emerald-600); background: #fff; box-shadow: 0 0 0 7px rgb(255 255 255 / 40%), 0 8px 20px -12px rgb(5 150 105 / 40%); }
.about-page .about-security-icon svg { width: 34px; height: 34px; }
.about-page .about-security h2 { color: var(--color-emerald-800); font-size: 28px; }
.about-page .about-security-intro > p { color: var(--about-muted); font-size: 15px; line-height: 1.9; }
.about-page .about-security-list { margin-top: 0; gap: 14px; }
.about-page .about-security-list > li { padding: 20px; border: 1px solid var(--color-emerald-100); border-radius: 17px; background: rgb(255 255 255 / 88%); box-shadow: 0 3px 12px -10px rgb(5 150 105 / 15%); }
.about-page .about-security-list > li > p:first-child { color: var(--color-emerald-800); font-size: 14px; line-height: 1.7; }
.about-page .about-security-list > li > p + p { margin-top: 8px; color: var(--about-muted); font-size: 13px; line-height: 1.85; }
.about-page .about-security-footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--color-emerald-100); color: var(--about-muted); line-height: 1.9; }
.about-page .about-security-footer a { color: var(--color-indigo-600); text-underline-offset: 4px; }

.about-page .about-company { padding: 64px 0 72px; border-top: 1px solid var(--color-gray-100); background: #fff; scroll-margin-top: 88px; }
.about-page .about-company-container { max-width: 900px; }
.about-page .about-company-heading { margin-bottom: 32px; }
.about-page .about-company-heading h2 { font-size: 32px; }
.about-page .about-company-heading p { color: var(--about-muted); font-size: 16px; line-height: 1.85; }
.about-page .about-company-card { padding: 36px; border-color: var(--color-indigo-100); border-radius: 24px; background: linear-gradient(145deg, var(--color-indigo-50), #fff 50%); box-shadow: 0 12px 32px -24px rgb(49 46 129 / 22%); }
.about-page .about-company-logo { max-width: 100%; object-fit: contain; object-position: left; }
.about-page .about-company-card dl { gap: 22px 28px; line-height: 1.85; }
.about-page .about-company-card :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; }
.about-page .about-company-card dt { color: var(--color-gray-500); font-size: 14px; }
.about-page .about-company-card dd { color: var(--about-ink); }
.about-page .about-company-verification { padding: 18px 20px; border: 1px solid var(--color-indigo-100); border-radius: 14px; background: var(--color-indigo-50); color: var(--about-muted); font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }

.about-page .about-cta { padding: 0; background: var(--color-indigo-600); }
.about-page .about-cta-panel { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: none; padding: 60px 32px; border: 0; border-radius: 0; background: var(--color-indigo-600); box-shadow: none; }
.about-page .about-cta-panel::before, .about-page .about-cta-panel::after { content: ""; position: absolute; z-index: -1; width: 330px; height: 330px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; pointer-events: none; }
.about-page .about-cta-panel::before { left: -180px; top: -80px; box-shadow: 0 0 0 40px rgb(255 255 255 / 3%), 0 0 0 80px rgb(255 255 255 / 2%); }
.about-page .about-cta-panel::after { right: -150px; bottom: -220px; box-shadow: 0 0 0 50px rgb(255 255 255 / 3%); }
.about-page .about-cta h2 { color: #fff; font-size: 34px; line-height: 1.6; margin-bottom: 16px; }
.about-page .about-cta-panel > p { margin-bottom: 28px; color: var(--color-indigo-100); font-size: 16px; line-height: 1.85; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .about-page .about-audience { transition: box-shadow .25s ease, border-color .25s ease; }
    .about-page .about-audience:hover { border-color: rgb(var(--audience-rgb) / 30%); box-shadow: 0 16px 40px -26px rgb(var(--audience-rgb) / 38%); }
    .about-page .about-cta-actions > a:hover { transform: translateY(-2px); }
}
@media (max-width: 900px) {
    .about-page .about-security-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .about-page .about-security-intro { max-width: 580px; }
    .about-page .about-audience { padding: 26px; }
}
@media (max-width: 639px) {
    .about-page .about-cta-actions > a { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 14px; }
    .about-page .about-purpose { padding: 52px 0; }
    .about-page .about-intro h2 { font-size: 25px; }
    .about-page .about-story-copy { margin-top: 24px; font-size: 15px; }
    .about-page .about-story-copy > p:nth-child(2) { padding: 16px 10px; }
    .about-page .about-audiences { margin-top: 32px; gap: 20px; }
    .about-page .about-audience { padding: 24px; border-radius: 22px; }
    .about-page .about-audience h3 { font-size: 21px; }
    .about-page .about-values { padding: 46px 0; }
    .about-page .about-section-title { font-size: 26px; margin-bottom: 28px; }
    .about-page .about-value { gap: 14px; padding: 20px; }
    .about-page .about-value h3 { font-size: 16px; }
    .about-page .about-security { padding: 44px 0; }
    .about-page .about-security-panel { padding: 24px; border-radius: 24px; }
    .about-page .about-security h2 { font-size: 24px; }
    .about-page .about-security-list > li { padding: 18px; }
    .about-page .about-company { padding: 44px 0; }
    .about-page .about-company-heading h2 { font-size: 26px; }
    .about-page .about-company-card { padding: 24px; }
    .about-page .about-company-card dl { gap: 8px; }
    .about-page .about-company-card dt:not(:first-child) { margin-top: 12px; }
    .about-page .about-company-verification { padding: 16px; }
    .about-page .about-cta-panel { padding: 36px 22px; }
    .about-page .about-cta h2 { font-size: 25px; }
    .about-page .about-cta-panel > p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .about-page .about-cta-actions > a,
    .about-page .about-audience { transition: none; }
}