/* ============================================================
   KaeCo Capital — About Page
   Uses design tokens from base.css / components.css.
   Only page-specific layout & component overrides here.
============================================================ */

/* ── HERO ───────────────────────────────────────────────── */
.ab-hero {
  position:   relative;
  min-height: 100svh;
  display:    flex;
  align-items: center;
  padding-top: var(--navbar-h, 76px);
  background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=85');
  background-size:     cover;
  background-position: center 40%;
  background-attachment: fixed;
  overflow: hidden;
}

.ab-hero-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    135deg,
    rgba(10,15,30,.94) 0%,
    rgba(10,15,30,.78) 55%,
    rgba(19,24,94,.28) 100%
  );
  z-index: 1;
}

/* Decorative floating shapes — mirrors hero-shapes */
.ab-hero-shapes {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  overflow:       hidden;
}

.ab-shape {
  position:     absolute;
  border-radius: 50%;
  background:   var(--color-gold, #DFBC67);
}

.ab-shape-1 {
  width: 480px; height: 480px;
  top: -140px;  right: -80px;
  opacity: .05;
}
.ab-shape-2 {
  width: 240px; height: 240px;
  bottom: 80px; right: 18%;
  opacity: .04;
}
.ab-shape-3 {
  width: 110px; height: 110px;
  top: 42%;     left: 7%;
  opacity: .06;
}

.ab-hero-content {
  position:    relative;
  z-index:     2;
  padding-top: 60px;
  padding-bottom: 100px;
  max-width:   760px;
}

.ab-hero-eyebrow {
  display:        inline-block;
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.62);
  background:     rgba(19,24,94,.35);
  border:         1px solid rgba(19,24,94,.5);
  padding:        5px 14px;
  border-radius:  30px;
  margin-bottom:  24px;
}

.ab-hero-heading {
  font-family:   var(--font-serif, 'Playfair Display', serif);
  font-size:     clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight:   800;
  line-height:   1.1;
  color:         #fff;
  margin-bottom: 24px;
}

.ab-hero-heading em {
  font-style: italic;
  color:      rgba(255,255,255,.75);
}

.ab-hero-sub {
  font-size:     clamp(1rem, 1.6vw, 1.15rem);
  color:         rgba(255,255,255,.72);
  line-height:   1.7;
  max-width:     560px;
  margin-bottom: 40px;
}

.ab-hero-ctas {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}

/* ── MISSION — light background ─────────────────────────── */
.ab-mission {
  padding: 96px 0;
  background: var(--color-bg-alt, #F8FAFC);

  /* scene-engine fallback perspective */
  perspective:        1600px;
  perspective-origin: 50% 52%;
}

.ab-beliefs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Mirrors .vp-card style */
.ab-belief {
  background:    #fff;
  border-radius: var(--radius-md, 12px);
  padding:       2.25rem 2rem;
  box-shadow:    var(--shadow-card, 0 2px 12px rgba(15,23,42,.08));
  border-top:    3px solid var(--color-gold, #DFBC67);
  transition:    box-shadow var(--transition, .25s ease),
                 transform  var(--transition, .25s ease);
  will-change:   transform;
}

.ab-belief:hover {
  box-shadow: var(--shadow-card-hover, 0 12px 40px rgba(15,23,42,.14));
  transform:  translateY(-3px);
}

.ab-belief-icon {
  width:         48px;
  height:        48px;
  border-radius: var(--radius-sm, 6px);
  background:    var(--gradient-brand, linear-gradient(135deg,#13185E,#0D1248));
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size:     1.4rem;
  line-height:   1;
}

.ab-belief-title {
  font-family:   var(--font-serif, 'Playfair Display', serif);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--color-charcoal, #0F172A);
  margin-bottom: .6rem;
}

.ab-belief-text {
  font-size:   .94rem;
  line-height: 1.65;
  color:       var(--color-slate, #64748B);
}

/* ── TEAM — white background ────────────────────────────── */
.ab-team {
  padding:    96px 0;
  background: #fff;

  perspective:        1100px;
  perspective-origin: 50% 45%;
}

.ab-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:     2.25rem;
}

/* 2-person layout — fixed 2 columns, constrained width */
.ab-team-duo {
  grid-template-columns: 1fr 1fr;
  max-width: 780px;
  margin: 0 auto;
}

.ab-team-duo .ab-member-photo {
  aspect-ratio: 3 / 4;
}

@media (max-width: 600px) {
  .ab-team-duo {
    grid-template-columns: 1fr;
  }
}

/* ── SIDE-BY-SIDE MEMBER CARDS (long bio layout) ────────── */
.ab-team-list {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         2rem;
  align-items: start;
}

.ab-member-h {
  display:        flex;
  flex-direction: column;
  border-radius:  var(--radius-lg, 16px);
  overflow:       hidden;
  background:     #fff;
  box-shadow:     0 2px 8px rgba(15,23,42,.06), 0 12px 40px rgba(15,23,42,.10);
  transition:     box-shadow var(--transition), transform var(--transition);
  will-change:    transform;
}

.ab-member-h:hover {
  box-shadow: 0 4px 16px rgba(15,23,42,.08), 0 24px 64px rgba(15,23,42,.16);
  transform:  translateY(-4px);
}

.ab-member-h-photo {
  position:   relative;
  overflow:   hidden;
  background: linear-gradient(160deg, #0D1248 0%, #13185E 100%);
  flex-shrink: 0;
}

.ab-member-h-photo img {
  width:   100%;
  height:  auto;
  display: block;
}

/* Dark gradient rising from photo bottom */
.ab-member-h-photo::after {
  content:  '';
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  height:   55%;
  background: linear-gradient(
    to bottom,
    transparent              0%,
    rgba(10,15,30,.15)       35%,
    rgba(10,15,30,.65)       68%,
    rgba(10,15,30,.92)       100%
  );
  pointer-events: none;
}

/* Name + role overlaid on photo */
.ab-member-h-overlay {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  padding:  1.5rem 1.75rem 1.4rem;
  z-index:  2;
}

.ab-member-h-role {
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--color-gold, #DFBC67);
  margin-bottom:  .3rem;
}

.ab-member-h-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size:   1.7rem;
  font-weight: 800;
  color:       #fff;
  line-height: 1.1;
  margin:      0;
  text-shadow: 0 1px 8px rgba(10,15,30,.4);
}

.ab-member-h-info {
  padding:        1.25rem 1.75rem 1.75rem;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.ab-member-h-bio {
  font-size:   .88rem;
  line-height: 1.8;
  color:       var(--color-slate, #64748B);
  min-height:  0;
  overflow:    hidden;
  padding-top: .25rem;
}

/* ── Collapsible bio ─────────────────────────────────────── */
.ab-bio-wrap {
  display:    grid;
  grid-template-rows: 1fr;
  overflow:   hidden;
  transition: grid-template-rows .35s ease;
}

.ab-bio-wrap.ab-bio-collapsed {
  grid-template-rows: 0fr;
}

.ab-bio-toggle {
  margin-top:    1.25rem;
  background:    var(--color-navy, #13185E);
  border:        none;
  border-radius: 30px;
  padding:       8px 20px;
  font-size:     .75rem;
  font-weight:   600;
  font-family:   var(--font-sans);
  letter-spacing: .05em;
  color:         #fff;
  cursor:        pointer;
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  align-self:    flex-start;
  transition:    background .2s, transform .15s;
}

.ab-bio-toggle:hover {
  background: var(--color-primary-dk, #0D1248);
  transform:  translateY(-1px);
}

.ab-bio-toggle[aria-expanded="true"] {
  background: var(--color-gold, #DFBC67);
  color:      var(--color-primary-dk, #0D1248);
}

.ab-bio-toggle[aria-expanded="true"]:hover {
  background: #C4A044;
}

.ab-bio-arrow {
  display:    inline-block;
  transition: transform .3s ease;
  font-size:  .85rem;
}

.ab-bio-toggle[aria-expanded="true"] .ab-bio-arrow {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .ab-team-list {
    grid-template-columns: 1fr;
  }

  .ab-member-h-info {
    padding: 1.75rem 1.5rem 2rem;
  }

  .ab-member-h-name {
    font-size: 1.3rem;
  }
}

.ab-member {
  border-radius: var(--radius-md, 12px);
  overflow:      hidden;
  background:    var(--color-bg-alt, #F8FAFC);
  box-shadow:    var(--shadow-card, 0 2px 12px rgba(15,23,42,.08));
  transition:    box-shadow var(--transition), transform var(--transition);
  will-change:   transform;
}

.ab-member:hover {
  box-shadow: var(--shadow-card-hover);
  transform:  translateY(-4px);
}

.ab-member-photo {
  aspect-ratio:        4/3;
  background-size:     cover;
  background-position: center top;
  position:            relative;
  overflow:            hidden;
}

.ab-member-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center top;
  display:    block;
}

/* Initials fallback — shown when no photo is set */
.ab-member-photo-initials {
  position:        absolute;
  inset:           0;
  background:      var(--gradient-brand, linear-gradient(135deg,#13185E,#1A1F7A));
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-serif, 'Playfair Display', serif);
  font-size:       2.8rem;
  font-weight:     800;
  color:           rgba(223,188,103,.55);
  letter-spacing:  .06em;
}

.ab-member-info { padding: 1.5rem; }

.ab-member-name {
  font-family:   var(--font-serif, 'Playfair Display', serif);
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--color-charcoal, #0F172A);
  margin-bottom: .2rem;
}

.ab-member-role {
  font-size:      .78rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--color-gold, #DFBC67);
  margin-bottom:  .75rem;
}

.ab-member-bio {
  font-size:   .9rem;
  line-height: 1.65;
  color:       var(--color-slate, #64748B);
}

/* ── FEATURED SINGLE MEMBER ────────────────────────────── */
.ab-featured-member {
  display: grid;
  grid-template-columns: 380px 1fr;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15,23,42,0.13);
  background: var(--color-bg-alt, #F8FAFC);
  min-height: 520px;
}

.ab-featured-photo {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand, linear-gradient(160deg,#13185E 0%,#1A1F7A 100%));
}

.ab-featured-photo .ab-member-photo-initials {
  font-size: 5rem;
  color: rgba(223,188,103,0.45);
}

.ab-featured-info {
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.ab-featured-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold, #DFBC67);
  margin-bottom: 0.6rem;
}

.ab-featured-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-charcoal, #0F172A);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.ab-featured-divider {
  width: 48px;
  height: 3px;
  background: var(--color-gold, #DFBC67);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

.ab-featured-bio {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-slate, #64748B);
  margin-bottom: 1rem;
}

.ab-featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.75rem;
}

.ab-tag {
  display: inline-block;
  padding: 5px 14px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid rgba(19,24,94,0.18);
  border-radius: 30px;
  color: var(--color-navy, #13185E);
  background: rgba(19,24,94,0.05);
}

@media (max-width: 768px) {
  .ab-featured-member {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .ab-featured-photo {
    aspect-ratio: 3/2;
  }

  .ab-featured-info {
    padding: 2rem 1.75rem;
  }

  .ab-featured-name {
    font-size: 1.6rem;
  }
}

/* ── VALUES — dark background ───────────────────────────── */
.ab-values {
  padding:    96px 0;
  background: var(--color-footer-bg, #0A0F1E);

  perspective:        1800px;
  perspective-origin: 50% 50%;
}

/* Override shared .section-eyebrow color on dark bg */
.ab-values .section-eyebrow { color: var(--color-gold, #DFBC67); }
.ab-values .section-heading  { color: #fff; }
.ab-values .section-sub      { color: rgba(255,255,255,.6); }

.ab-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:     1.5rem;
  counter-reset: value-counter;
}

.ab-value-item {
  padding:       1.75rem;
  border:        1px solid rgba(223,188,103,.16);
  border-radius: var(--radius-md, 12px);
  will-change:   transform;
  transition:    border-color var(--transition), transform var(--transition);
  position:      relative;
  counter-increment: value-counter;
}

.ab-value-item::before {
  content:        counter(value-counter, decimal-leading-zero);
  display:        block;
  font-family:    var(--font-serif, 'Playfair Display', serif);
  font-size:      2rem;
  font-weight:    800;
  color:          rgba(223,188,103,.18);
  line-height:    1;
  margin-bottom:  .75rem;
  letter-spacing: -.02em;
}

.ab-value-item:hover {
  border-color: rgba(223,188,103,.4);
  transform:    translateY(-2px);
}

.ab-value-item:hover::before {
  color: rgba(223,188,103,.35);
}

.ab-value-label {
  font-size:      .78rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--color-gold, #DFBC67);
  margin-bottom:  .5rem;
}

.ab-value-text {
  font-size:   .93rem;
  line-height: 1.65;
  color:       rgba(255,255,255,.65);
}

/* ── CTA — gold section ─────────────────────────────────── */
.ab-cta {
  padding:    96px 0;
  background: linear-gradient(135deg, var(--color-gold,#DFBC67) 0%, #C4A044 100%);
  text-align: center;
}

.ab-cta .section-eyebrow {
  color:       rgba(13,18,72,.6);
  background:  rgba(13,18,72,.08);
  border-color: rgba(13,18,72,.12);
}

.ab-cta .section-heading { color: var(--color-primary-dk, #0D1248); }

.ab-cta .section-sub {
  color:  rgba(13,18,72,.72);
  margin: 0 auto 2.5rem;
}

.ab-cta-actions {
  display:         flex;
  gap:             16px;
  justify-content: center;
  flex-wrap:       wrap;
}

/* Dark/outline button variant for gold backgrounds */
.btn-on-gold {
  background:    var(--color-primary, #13185E);
  color:         #fff;
  border-radius: var(--radius-sm, 6px);
  padding:       .875rem 2rem;
  font-weight:   700;
  font-size:     .9rem;
  font-family:   var(--font-sans);
  letter-spacing: .02em;
  cursor:        pointer;
  border:        none;
  transition:    background var(--transition), transform var(--transition);
  text-decoration: none;
  display:       inline-flex;
  align-items:   center;
}
.btn-on-gold:hover {
  background: var(--color-primary-dk, #0D1248);
  transform:  translateY(-1px);
}

.btn-outline-on-gold {
  background:    transparent;
  color:         var(--color-primary, #13185E);
  border:        2px solid var(--color-primary, #13185E);
  border-radius: var(--radius-sm, 6px);
  padding:       .875rem 2rem;
  font-weight:   600;
  font-size:     .9rem;
  font-family:   var(--font-sans);
  letter-spacing: .02em;
  cursor:        pointer;
  transition:    background var(--transition), color var(--transition);
  text-decoration: none;
  display:       inline-flex;
  align-items:   center;
}
.btn-outline-on-gold:hover {
  background: var(--color-primary, #13185E);
  color:      #fff;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .ab-mission, .ab-team, .ab-values {
    perspective: none !important;
  }
  .ab-belief, .ab-member, .ab-value-item {
    will-change: auto;
    transform:   none !important;
  }
}

@media (max-width: 768px) {
  .ab-hero          { background-attachment: scroll; }
  .ab-hero-heading  { font-size: 2.1rem; }
  .ab-hero-ctas     { gap: 12px; }
  .ab-beliefs       { grid-template-columns: 1fr; }
  .ab-team-grid     { grid-template-columns: 1fr; }
  .ab-values-grid   { grid-template-columns: 1fr 1fr; }
  .ab-mission, .ab-team, .ab-values, .ab-cta { padding: 64px 0; }
}

@media (max-width: 480px) {
  .ab-values-grid { grid-template-columns: 1fr; }
  .ab-cta-actions { flex-direction: column; align-items: center; }
}