/* ============================================================
   APEX MARKET MENTOR & ADVISER — About page
   ============================================================
   The leadership section (CEO profile, career, education, media)
   and the refined who-we-are, vision and values blocks. Loaded
   after header.css on about.html only.
   ============================================================ */

/* ---------- Who we are ---------- */
.ab-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ab-intro__copy p + p { margin-top: 16px; }
.ab-intro__copy .hx-lead { color: var(--hx-ink); }
.ab-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hx-rule); border: 1px solid var(--hx-rule); border-radius: 18px; overflow: hidden; }
.ab-figures > div { padding: 26px 24px; background: var(--hx-paper); display: grid; gap: 4px; }
.ab-figures dd { margin: 0; font-family: var(--hx-serif); font-size: clamp(2.2rem, 3.6vw, 2.8rem); font-weight: 600; line-height: 1; color: var(--hx-green); font-variant-numeric: lining-nums; }
.ab-figures dt { order: 1; font-size: 0.8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-gold-ink); }
.ab-figures > div { display: flex; flex-direction: column; }

/* ---------- Our story ---------- */
.ab-story__head { max-width: 860px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.ab-story__head .hx-eyebrow { justify-content: center; }
.ab-story__head .hx-lead { margin-left: auto; margin-right: auto; max-width: 64ch; }
.ab-story__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ab-story__copy { display: grid; gap: 18px; }
.ab-story__copy p { margin: 0; font-size: 1.05rem; line-height: 1.8; color: var(--hx-ink-muted); }
.ab-story__copy p:first-child::first-letter { float: left; margin: 6px 12px 0 0; font-family: var(--hx-serif); font-size: 4.2rem; line-height: .8; font-weight: 600; color: var(--hx-gold); }
.ab-story__copy strong { color: var(--hx-green); font-weight: 600; }

.ab-founder { position: sticky; top: calc(var(--header-h) + 24px); padding: 28px 24px 24px; text-align: center; border-radius: 20px; background: var(--hx-green) radial-gradient(120% 80% at 50% 0%, rgba(201, 162, 75, .2), rgba(3, 42, 29, 0) 65%); color: var(--hx-on-dark); box-shadow: 0 30px 60px -36px rgba(3, 42, 29, .8); }
.ab-founder img { width: 96px; height: 96px; margin: 0 auto 14px; display: block; border-radius: 50%; object-fit: cover; border: 2px solid #dcb765; box-shadow: 0 0 0 6px rgba(220, 183, 101, .14); }
.ab-founder__name { margin: 0; font-family: var(--hx-serif); font-size: 1.6rem; font-weight: 600; color: #fff; }
.ab-founder__role { margin: 2px 0 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #dcb765; }
.ab-founder__line { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.6; color: var(--hx-on-dark-muted); }
.ab-founder__link { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(220, 183, 101, .55); color: #f0d481; font-size: 0.84rem; font-weight: 600; transition: background .2s ease; }
.ab-founder__link svg { width: 16px; height: 16px; }
.ab-founder__link:hover { background: rgba(220, 183, 101, .12); }
.ab-founder__link:focus-visible { outline: 2px solid #f0d481; outline-offset: 3px; }

.ab-pillars { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-pillars li { padding: 28px 26px; border-radius: 18px; background: var(--hx-paper); border: 1px solid var(--hx-rule); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ab-pillars li:hover { transform: translateY(-3px); border-color: var(--hx-gold); box-shadow: 0 24px 40px -30px rgba(3, 42, 29, .5); }
.ab-pillars__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: var(--hx-green); color: #dcb765; }
.ab-pillars__icon svg { width: 24px; height: 24px; }
.ab-pillars h3 { margin: 0 0 8px; font-family: var(--hx-serif); font-size: 1.45rem; font-weight: 600; color: var(--hx-green); }
.ab-pillars p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--hx-ink-muted); }

.ab-figures--row { margin-top: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-figures--row > div { padding: 24px 22px; }

/* ---------- Leadership: the CEO ---------- */
.ab-ceo { position: relative; overflow: hidden; background: var(--hx-green) radial-gradient(90% 70% at 100% 0%, rgba(201, 162, 75, .14), rgba(3, 42, 29, 0) 60%); color: var(--hx-on-dark); }
.ab-ceo .hx-eyebrow { color: var(--hx-gold-bright); }
.ab-ceo__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.ab-portrait { position: relative; margin: 0; }
.ab-portrait::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid rgba(220, 183, 101, .5); border-radius: 22px; }
.ab-portrait img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); }
.ab-portrait figcaption { position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(2, 31, 21, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(220, 183, 101, .3); }
.ab-portrait figcaption img { width: 42px; height: 42px; aspect-ratio: 1; border-radius: 50%; box-shadow: none; border: 1px solid rgba(220, 183, 101, .6); }
.ab-portrait figcaption strong { display: block; font-size: 0.92rem; color: #fff; }
.ab-portrait figcaption span { font-size: 0.78rem; color: var(--hx-on-dark-muted); }

.ab-ceo__name { margin: 6px 0 4px; font-family: var(--hx-serif); font-weight: 500; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.02; color: #fff; }
.ab-ceo__role { margin: 0 0 22px; font-size: 0.86rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-gold-bright); }
.ab-ceo__bio { display: grid; gap: 14px; max-width: 62ch; }
.ab-ceo__bio p { margin: 0; font-size: 1.02rem; line-height: 1.75; color: var(--hx-on-dark-muted); }
.ab-ceo__bio strong { color: #fff; font-weight: 600; }
.ab-ceo__stats { margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(220, 183, 101, .25); border: 1px solid rgba(220, 183, 101, .25); border-radius: 16px; overflow: hidden; }
.ab-ceo__stats > div { padding: 18px 18px; background: rgba(2, 31, 21, .7); display: flex; flex-direction: column; gap: 4px; }
.ab-ceo__stats dd { margin: 0; font-family: var(--hx-serif); font-size: 2.1rem; font-weight: 600; line-height: 1; color: #f0d481; font-variant-numeric: lining-nums; }
.ab-ceo__stats dt { order: 1; font-size: 0.8rem; line-height: 1.4; color: var(--hx-on-dark-muted); }
.ab-ceo__links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.ab-linkedin { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(247, 242, 230, .35); color: #f7f2e6; font-size: 0.86rem; font-weight: 600; letter-spacing: .04em; transition: border-color .2s ease, background .2s ease; }
.ab-linkedin svg { width: 18px; height: 18px; color: #dcb765; }
.ab-linkedin:hover { border-color: #dcb765; background: rgba(220, 183, 101, .08); }
.ab-linkedin:focus-visible { outline: 2px solid #f0d481; outline-offset: 3px; }

/* ---------- Career timeline ---------- */
.ab-career { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ab-subhead { margin: 0 0 22px; font-family: var(--hx-serif); font-weight: 600; font-size: 1.7rem; color: var(--hx-green); }
.ab-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ab-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--hx-rule); }
.ab-timeline li { position: relative; padding: 0 0 26px 36px; }
.ab-timeline li:last-child { padding-bottom: 0; }
.ab-timeline li::before { content: ''; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--hx-paper); border: 2px solid var(--hx-gold); }
.ab-timeline li.is-now::before { background: var(--hx-gold); box-shadow: 0 0 0 5px rgba(201, 162, 75, .2); }
.ab-when { display: inline-block; margin-bottom: 6px; font-size: 0.74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-gold-ink); }
.ab-timeline h4 { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--hx-green); }
.ab-org { margin: 2px 0 0; font-size: 0.92rem; color: var(--hx-ink); }
.ab-org span { color: var(--hx-ink-muted); }
.ab-timeline p.ab-desc { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.65; color: var(--hx-ink-muted); max-width: 64ch; }

.ab-side { display: grid; gap: 28px; position: sticky; top: calc(var(--header-h) + 24px); }
.ab-edu { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ab-edu li { padding: 18px 20px; border: 1px solid var(--hx-rule); border-radius: 14px; background: var(--hx-paper); }
.ab-edu h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--hx-green); }
.ab-edu p { margin: 2px 0 0; font-size: 0.9rem; color: var(--hx-ink-muted); }

.ab-media { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab-media li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--hx-rule); border-radius: 14px; background: var(--hx-paper); }
.ab-media img { width: 112px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }
.ab-media .ab-when { margin: 0 0 4px; font-size: 0.68rem; }
.ab-media h4 { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: var(--hx-green); }

/* ---------- Ornament under section titles ---------- */
.ab-orn { position: relative; display: block; width: 160px; height: 1px; margin: 18px auto 22px; color: var(--hx-gold); background: linear-gradient(90deg, transparent, currentColor, transparent); }
.ab-orn::after { content: ''; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: currentColor; }
.ab-purpose { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.ab-purpose__head { text-align: center; }
.ab-purpose__head .hx-eyebrow { justify-content: center; }

/* ---------- Founder card: the board beside him ---------- */
.ab-founder__board { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; padding-top: 16px; border-top: 1px solid rgba(220, 183, 101, .22); font-size: 0.82rem; color: var(--hx-on-dark-muted); }
.ab-founder__faces { display: flex; }
.ab-founder .ab-founder__faces img { width: 34px; height: 34px; margin: 0 0 0 -10px; border-width: 1.5px; box-shadow: 0 0 0 2px var(--hx-green); }
.ab-founder .ab-founder__faces img:first-child { margin-left: 0; }

/* ---------- Purpose: vision & mission statements, then six values ---------- */
.ab-purpose__head { margin-bottom: clamp(28px, 4vw, 44px); }
.ab-purpose__head .hx-title { margin-bottom: 0; }
.ab-vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ab-vm__card { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 40px); border-radius: 22px; background: var(--hx-paper); border: 1px solid var(--hx-rule); }
.ab-vm__card::after { content: '\201C'; position: absolute; right: 22px; top: -6px; font-family: var(--hx-serif); font-size: 9rem; line-height: 1; color: rgba(201, 162, 75, .16); pointer-events: none; }
.ab-vm__card--dark { background: var(--hx-green) radial-gradient(90% 80% at 0% 0%, rgba(201, 162, 75, .2), rgba(3, 42, 29, 0) 60%); border-color: transparent; color: var(--hx-on-dark); }
.ab-vm__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--hx-green); color: #dcb765; }
.ab-vm__card--dark .ab-vm__icon { background: rgba(220, 183, 101, .14); border: 1px solid rgba(220, 183, 101, .4); }
.ab-vm__icon svg { width: 24px; height: 24px; }
.ab-vm .ab-vm__label { margin: 18px 0 10px; font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hx-gold-ink); }
.ab-vm .ab-vm__card--dark .ab-vm__label { color: #f0d481; }
.ab-vm__text { position: relative; margin: 0; font-family: var(--hx-serif); font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 500; line-height: 1.35; color: var(--hx-green); }
.ab-vm__card--dark .ab-vm__text { color: #fff; }

.ab-values { margin-top: clamp(36px, 5vw, 56px); }
.ab-values .ab-values__intro { max-width: 60ch; margin: 0 auto 22px; text-align: center; font-size: 0.98rem; line-height: 1.6; color: var(--hx-ink-muted); }
.ab-values__intro strong { color: var(--hx-green); }
.ab-values ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-values li { padding: 24px 24px 22px; border-radius: 18px; background: var(--hx-paper); border: 1px solid var(--hx-rule); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ab-values li:hover { transform: translateY(-3px); border-color: var(--hx-gold); box-shadow: 0 24px 40px -30px rgba(3, 42, 29, .5); }
.ab-values__n { display: block; margin-bottom: 10px; font-family: var(--hx-serif); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--hx-gold); font-variant-numeric: lining-nums; }
.ab-values h4 { margin: 0 0 6px; font-family: var(--hx-serif); font-size: 1.35rem; font-weight: 600; color: var(--hx-green); }
.ab-values li p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--hx-ink-muted); }

/* ---------- Badges shared by the board and team ---------- */
.ab-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(201, 162, 75, .6); font-size: 0.68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--hx-gold-ink); white-space: nowrap; }
.ab-boardroom .ab-badge { border-color: rgba(220, 183, 101, .5); color: #f0d481; }
.ab-badge--solid, .ab-boardroom .ab-badge--solid { border-color: transparent; background: linear-gradient(135deg, #f0d481, #c9a24b); color: #032a1d; }

/* ---------- Board: intro and Chairman beside the members ---------- */
.ab-boardroom { position: relative; overflow: hidden; background: var(--hx-green) radial-gradient(60% 70% at 0% 0%, rgba(201, 162, 75, .2), rgba(3, 42, 29, 0) 65%); color: var(--hx-on-dark); }
.ab-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.ab-board__intro .hx-eyebrow { color: var(--hx-gold-bright); }
.ab-board .ab-board__title { margin: 8px 0 0; font-family: var(--hx-serif); font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 500; line-height: 1.02; color: #fff; }
.ab-board .ab-board__title em { font-style: italic; color: #f0d481; }
.ab-board .ab-orn { margin-left: 0; color: #dcb765; background: linear-gradient(90deg, currentColor, transparent); }
.ab-board .ab-orn::after { left: 0; transform: rotate(45deg); }
.ab-board__lead { max-width: 46ch; margin: 0 0 28px; font-size: 1.04rem; line-height: 1.7; color: var(--hx-on-dark-muted); }
.ab-board__chair { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; padding: 22px 24px; border-radius: 22px; background: rgba(2, 31, 21, .55); border: 1px solid rgba(220, 183, 101, .4); color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.ab-board__chair img { grid-row: span 2; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid #dcb765; box-shadow: 0 0 0 7px rgba(220, 183, 101, .14); }
.ab-board__who { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.ab-board__who strong { font-family: var(--hx-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.15; color: #fff; }
.ab-board__chair .ab-board__who strong { margin-top: 6px; font-size: 1.8rem; }
.ab-board__who em { font-style: normal; font-size: 0.85rem; color: var(--hx-on-dark-muted); }
.ab-board__go { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: #f0d481; }
.ab-board__go svg { width: 15px; height: 15px; transition: transform .2s ease; }
.ab-board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ab-member { display: grid; grid-template-columns: auto 1fr auto auto; gap: 18px; align-items: center; padding: 16px 20px; border-radius: 18px; background: rgba(2, 31, 21, .45); border: 1px solid rgba(220, 183, 101, .22); color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.ab-member img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid #dcb765; box-shadow: 0 0 0 4px rgba(220, 183, 101, .12); }
.ab-member__go { width: 18px; height: 18px; color: #dcb765; transition: transform .2s ease; }
.ab-member:hover, .ab-board__chair:hover { border-color: rgba(220, 183, 101, .75); transform: translateY(-2px); }
.ab-member:hover { background: rgba(2, 31, 21, .7); }
.ab-member:hover .ab-member__go, .ab-board__chair:hover .ab-board__go svg { transform: translateX(3px); }
.ab-member:focus-visible, .ab-board__chair:focus-visible { outline: 2px solid #f0d481; outline-offset: 3px; }

/* ---------- Team: whole card opens the profile ---------- */
.ab-team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-team__grid > li { display: flex; }
.ab-person { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 26px 26px; text-align: center; border-radius: 22px; background: var(--hx-paper); border: 1px solid var(--hx-rule); color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ab-person__top { align-self: stretch; display: grid; place-items: center; margin: 0 -26px 18px; padding: 30px 0 0; background: linear-gradient(180deg, var(--hx-green) 0 62%, transparent 62%); }
.ab-person__photo { width: 136px; height: 136px; display: block; border-radius: 50%; object-fit: cover; border: 3px solid #dcb765; box-shadow: 0 0 0 6px var(--hx-paper), 0 18px 30px -18px rgba(3, 42, 29, .7); }
.ab-person__name { margin: 0 0 10px; font-family: var(--hx-serif); font-size: 1.6rem; font-weight: 600; color: var(--hx-green); }
.ab-person__bio { flex: 1; margin: 16px 0 18px; font-size: 0.93rem; line-height: 1.65; color: var(--hx-ink-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ab-person__more { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--hx-green); color: #f0d481; font-size: 0.84rem; font-weight: 600; }
.ab-person__more svg { width: 15px; height: 15px; transition: transform .2s ease; }
.ab-person:hover { transform: translateY(-4px); border-color: var(--hx-gold); box-shadow: 0 28px 44px -30px rgba(3, 42, 29, .55); }
.ab-person:hover .ab-person__more svg { transform: translateX(3px); }
.ab-person:focus-visible { outline: 2px solid var(--hx-gold); outline-offset: 3px; }

@media (max-width: 980px) {
  .ab-board { grid-template-columns: 1fr; }
  .ab-team__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .ab-values ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ab-vm { grid-template-columns: 1fr; }
  .ab-values ul { grid-template-columns: 1fr; }
  .ab-member { grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 16px; }
  .ab-member .ab-badge { display: none; }
  .ab-member img { width: 60px; height: 60px; }
  .ab-board__chair { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ab-board__chair img { grid-row: auto; }
  .ab-board__chair .ab-board__who { justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-person, .ab-member, .ab-board__chair, .ab-values li { transition: none; }
  .ab-person:hover, .ab-member:hover, .ab-board__chair:hover, .ab-values li:hover { transform: none; }
}

/* ---------- Team profile pages (team-*.html) ---------- */
.pf-profile .ab-ceo__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.pf-portrait { margin: 0; display: grid; justify-items: center; gap: 22px; }
.pf-portrait img { width: min(320px, 70vw); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid #dcb765; box-shadow: 0 0 0 12px rgba(220, 183, 101, .12), 0 0 0 13px rgba(220, 183, 101, .3), 0 40px 70px -40px rgba(0, 0, 0, .9); }
.pf-portrait figcaption { display: grid; justify-items: center; gap: 8px; text-align: center; }
.pf-portrait figcaption strong { font-family: var(--hx-serif); font-size: 1.35rem; font-weight: 600; color: #fff; }
.pf-portrait figcaption span { padding: 4px 14px; border-radius: 999px; background: linear-gradient(135deg, #f0d481, #c9a24b); color: #032a1d; font-size: 0.68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.pf-headline { margin: 8px 0 22px; font-family: var(--hx-serif); font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 500; line-height: 1.1; color: #fff; }
.pf-headline em { font-style: italic; color: #f0d481; }
.pf-solo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.pf-portrait--small img { width: 220px; }
.pf-focus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pf-focus li { padding: 28px 24px 26px; border-radius: 20px; background: var(--hx-paper); border: 1px solid var(--hx-rule); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pf-focus li:hover { transform: translateY(-3px); border-color: var(--hx-gold); box-shadow: 0 24px 40px -30px rgba(3, 42, 29, .5); }
.pf-focus__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: var(--hx-green); color: #dcb765; }
.pf-focus__icon svg { width: 26px; height: 26px; }
.pf-focus h3 { margin: 0 0 8px; font-family: var(--hx-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.2; color: var(--hx-green); }
.pf-focus p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--hx-ink-muted); }
.pf-vision { position: relative; overflow: hidden; margin: clamp(32px, 4vw, 48px) 0 0; padding: clamp(32px, 5vw, 52px) clamp(28px, 6vw, 80px); border-radius: 24px; text-align: center; background: var(--hx-green) radial-gradient(70% 90% at 50% 0%, rgba(201, 162, 75, .22), rgba(3, 42, 29, 0) 70%); color: var(--hx-on-dark); }
.pf-vision .hx-eyebrow { position: relative; justify-content: center; color: var(--hx-gold-bright); }
.pf-vision blockquote { position: relative; max-width: 30ch; margin: 14px auto 0; font-family: var(--hx-serif); font-size: clamp(1.6rem, 3vw, 2.3rem); font-style: italic; font-weight: 500; line-height: 1.3; color: #fff; }
.pf-edu { display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; align-items: center; margin-top: 18px; padding: 22px 28px; border-radius: 20px; background: var(--hx-paper); border: 1px solid var(--hx-rule); }
.pf-edu .pf-edu__title { margin: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hx-gold-ink); }
.pf-edu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.pf-edu li { display: flex; gap: 14px; align-items: flex-start; }
.pf-edu__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .6); color: var(--hx-gold-ink); }
.pf-edu__icon svg { width: 20px; height: 20px; }
.pf-edu h4 { margin: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--hx-green); }
.pf-edu p { margin: 2px 0 0; font-size: 0.88rem; color: var(--hx-ink-muted); }
.pf-edu p span { white-space: nowrap; }
@media (max-width: 980px) {
  .pf-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-edu { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pf-focus { grid-template-columns: 1fr; }
  .pf-edu ul { grid-template-columns: 1fr; }
  .pf-portrait--small img { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-focus li { transition: none; }
  .pf-focus li:hover { transform: none; }
}
.pf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; height: 100%; padding: 18px 20px; border-radius: 18px; background: var(--hx-paper); border: 1px solid var(--hx-rule); color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pf-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #dcb765; }
.pf-card strong { display: block; font-family: var(--hx-serif); font-size: 1.25rem; font-weight: 600; color: var(--hx-green); }
.pf-card em { font-style: normal; font-size: 0.82rem; color: var(--hx-ink-muted); }
.pf-card svg { width: 18px; height: 18px; color: var(--hx-gold); transition: transform .2s ease; }
.pf-card:hover { transform: translateY(-3px); border-color: var(--hx-gold); box-shadow: 0 24px 40px -30px rgba(3, 42, 29, .5); }
.pf-card:hover svg { transform: translateX(3px); }
.pf-card:focus-visible { outline: 2px solid var(--hx-gold); outline-offset: 3px; }
@media (max-width: 980px) {
  .pf-profile .ab-ceo__grid { grid-template-columns: 1fr; }
  .pf-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-card { transition: none; }
  .pf-card:hover { transform: none; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 980px) {
  .ab-intro, .ab-ceo__grid, .ab-career { grid-template-columns: 1fr; }
  .ab-portrait { max-width: 420px; margin: 0 auto 12px; }
  .ab-side, .ab-founder { position: static; }
  .ab-story__grid { grid-template-columns: 1fr; }
  .ab-founder { max-width: 420px; width: 100%; margin: 0 auto; }
  .ab-pillars { grid-template-columns: 1fr; }
  .ab-figures--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ab-ceo__stats { grid-template-columns: 1fr; }
  .ab-ceo__stats > div { flex-direction: row; align-items: baseline; gap: 12px; }
  .ab-portrait::before { inset: 12px -10px -12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-pillars li { transition: none; }
  .ab-pillars li:hover { transform: none; }
}

/* Linked media items: the whole card opens the link (new tab). */
.ab-media li { position: relative; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ab-media__link { color: inherit; text-decoration: none; }
.ab-media__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ab-media li:has(.ab-media__link):hover { border-color: var(--hx-gold); transform: translateY(-2px); box-shadow: 0 18px 30px -24px rgba(3, 42, 29, .55); }
.ab-media__link:focus-visible { outline: none; }
.ab-media li:has(.ab-media__link:focus-visible) { outline: 2px solid var(--hx-gold); outline-offset: 2px; }
.ab-media__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.78rem; font-weight: 600; color: var(--hx-gold-ink); }
.ab-media__go svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .ab-media li { transition: none; } .ab-media li:hover { transform: none; } }
.ab-media__more { margin: 18px 0 0; }
.ab-media__toggle { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 14px; padding: 0 18px; border: 1px solid rgba(201, 162, 75, .6); border-radius: 999px; background: transparent; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--hx-green); cursor: pointer; transition: background .2s ease; }
.ab-media__toggle:hover { background: rgba(201, 162, 75, .12); }
.ab-media__toggle:focus-visible { outline: 2px solid var(--hx-gold); outline-offset: 2px; }
.ab-media__toggle[hidden], .ab-media li[hidden] { display: none; }