/* =========================================
   ABOUT PAGE — about.css
   ========================================= */

/* ── HERO ────────────────────────────────── */

.about-hero {
  padding:       80px 48px 80px;
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           80px;
  align-items:   start;
  border-bottom: 1px solid var(--border);
}

.about-kicker {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  color:          var(--blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:  24px;
}

.about-kicker::before {
  content:       "";
  width:         20px;
  height:        1.5px;
  background:    var(--blue);
  border-radius: 2px;
}

/* ── LEFT COLUMN ── */

.about-hero__left {
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

.about-hero__name {
  font-size:      clamp(3rem, 5.5vw, 6rem);
  line-height:    0.94;
  letter-spacing: -0.07em;
  font-weight:    300;
  color:          var(--text-primary);
}

.about-hero__name span { color: var(--blue); }

.about-hero__tagline {
  font-size:   1.05rem;
  line-height: 1.70;
  color:       var(--text-secondary);
  max-width:   40ch;
}

/* avatar + resume row */
.about-hero__identity {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.about-avatar {
  width:           64px;
  height:          64px;
  border-radius:   12px;
  background:      linear-gradient(135deg, var(--blue) 0%, #0d2880 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.2rem;
  font-weight:     700;
  color:           #ffffff;
  flex-shrink:     0;
}

.about-hero__meta {
  flex: 1;
}

.about-hero__meta-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  line-height: 1.3;
}

.about-hero__meta-role {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.4;
}

.about-hero__resume {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         9px 18px;
  border:          1.5px solid var(--border-hover);
  border-radius:   var(--radius-pill);
  font-size:       12px;
  font-weight:     600;
  letter-spacing:  0.04em;
  color:           var(--text-primary);
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:
    background   var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color        var(--t-fast) ease,
    transform    var(--t-fast) ease;
}

.about-hero__resume:hover {
  background:   var(--blue);
  border-color: var(--blue);
  color:        #ffffff;
  transform:    translateY(-2px);
}

/* ── RIGHT COLUMN ── */

.about-hero__right {
  display:        flex;
  flex-direction: column;
  gap:            28px;
  padding-top:    4px;
}

.about-summary__para {
  font-size:   15px;
  line-height: 1.80;
  color:       var(--text-secondary);
}

.about-summary__para:first-child {
  font-size:   1.05rem;
  color:       var(--text-primary);
  font-weight: 400;
  line-height: 1.65;
}

/* contact items */
.about-hero__contact {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding-top:    8px;
  border-top:     1px solid var(--border);
}

.about-contact-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   13px;
  color:       var(--text-muted);
  padding:     8px 0;
  transition:  color var(--t-fast) ease;
}

.about-contact-item a {
  color:      inherit;
  transition: color var(--t-fast) ease;
}

.about-contact-item a:hover { color: var(--blue); }

.about-contact-item__icon {
  font-size:   13px;
  opacity:     0.6;
  flex-shrink: 0;
  width:       16px;
  text-align:  center;
}

/* availability */
.about-availability {
  display:      flex;
  align-items:  center;
  gap:          8px;
  margin-top:   4px;
}

.about-availability__dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #1D9E75;
  flex-shrink:   0;
  animation:     pulseGreen 2s ease-in-out infinite;
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(29,158,117,0); }
}

.about-availability__text {
  font-size:   12px;
  font-weight: 500;
  color:       #1D9E75;
}

/* ── HERO STATS ──────────────────────────── */

.about-stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-stat {
  padding: 28px 32px;
  transition: background var(--t-fast) ease;
}

.about-stat:not(:last-child) { border-right: 1px solid var(--border); }

.about-stat:hover { background: rgba(26,70,201,0.03); }

.about-stat__value {
  display:        block;
  font-size:      2.8rem;
  font-weight:    700;
  letter-spacing: -0.05em;
  color:          var(--text-primary);
  line-height:    1;
  margin-bottom:  6px;
  transition:     color var(--t-fast) ease;
}

.about-stat:hover .about-stat__value { color: var(--blue); }

.about-stat__label {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.4;
}

/* ── PRINCIPLES ──────────────────────────── */

.about-principles {
  padding: 80px 48px;
  border-bottom: 1px solid var(--border);
}

.about-section-header {
  margin-bottom: 48px;
}

.about-section-kicker {
  font-size:      11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--blue);
  margin-bottom:  12px;
  display:        flex;
  align-items:    center;
  gap:            10px;
}

.about-section-kicker::before {
  content:    "";
  width:      20px;
  height:     1.5px;
  background: var(--blue);
  border-radius: 2px;
}

.about-section-title {
  font-size:      clamp(2rem, 3.2vw, 3.2rem);
  line-height:    1.00;
  letter-spacing: -0.055em;
  font-weight:    300;
  color:          var(--text-primary);
}

.about-section-title span { color: var(--blue); }

.principles-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   2px;
  border:                1px solid var(--border);
  border-radius:         var(--radius-lg);
  overflow:              hidden;
}

.principle-card {
  padding:    40px 36px;
  background: #ffffff;
  transition: background var(--t-base) ease;
  display:    flex;
  flex-direction: column;
  gap:        16px;
}

.principle-card:hover { background: rgba(26,70,201,0.02); }

.principle-card:hover .principle-card__number { color: var(--blue); }
.principle-card:hover .principle-card__title  { color: var(--blue); }

.principle-card__number {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.12em;
  color:          var(--text-muted);
  transition:     color var(--t-fast) ease;
}

.principle-card__title {
  font-size:      1.3rem;
  font-weight:    500;
  letter-spacing: -0.03em;
  color:          var(--text-primary);
  line-height:    1.2;
  transition:     color var(--t-fast) ease;
}

.principle-card__desc {
  font-size:   15px;
  line-height: 1.75;
  color:       var(--text-secondary);
}

/* ── COMPETENCIES ────────────────────────── */

.about-competencies {
  padding: 80px 48px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}

.competencies-grid {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.competency-row {
  display:     grid;
  grid-template-columns: 180px 1fr;
  gap:         32px;
  align-items: start;
  padding:     24px 0;
  border-bottom: 1px solid var(--border);
  transition:  background var(--t-fast) ease;
}

.competency-row:first-child { border-top: 1px solid var(--border); }

.competency-row:hover {
  padding-left:  12px;
  padding-right: 12px;
  margin-left:   -12px;
  margin-right:  -12px;
  background:    rgba(26,70,201,0.02);
  border-radius: var(--radius-sm);
}

.competency-row__area {
  font-size:   13px;
  font-weight: 600;
  color:       var(--blue);
  line-height: 1.4;
  padding-top: 2px;
}

.competency-row__skills {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.competency-skill {
  padding:        6px 12px;
  background:     var(--bg);
  border:         1px solid var(--border);
  border-radius:  var(--radius-pill);
  font-size:      12px;
  color:          var(--text-secondary);
  font-weight:    400;
  transition:
    background    var(--t-fast) ease,
    border-color  var(--t-fast) ease,
    color         var(--t-fast) ease;
}

.competency-row:hover .competency-skill {
  background:   rgba(26,70,201,0.05);
  border-color: rgba(26,70,201,0.18);
  color:        var(--blue);
}

/* ── TOOLS ───────────────────────────────── */

.about-tools {
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

.tools-heading {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.tools-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.tool-badge {
  padding:        8px 14px;
  background:     rgba(26,70,201,0.06);
  border:         1px solid rgba(26,70,201,0.14);
  border-radius:  var(--radius-pill);
  font-size:      12px;
  font-weight:    500;
  color:          var(--blue);
  transition:
    background   var(--t-fast) ease,
    transform    var(--t-fast) ease;
}

.tool-badge:hover {
  background:  rgba(26,70,201,0.12);
  transform:   translateY(-1px);
}

/* ── EDUCATION + AWARDS ──────────────────── */

.about-credentials {
  padding: 80px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     64px;
  border-bottom: 1px solid var(--border);
}

.credentials-section {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.credentials-list {
  display:        flex;
  flex-direction: column;
  margin-top:     32px;
}

.credential-item {
  display:       flex;
  gap:           20px;
  padding:       20px 0;
  border-bottom: 1px solid var(--border);
  transition:    background var(--t-fast) ease;
}

.credential-item:first-child { border-top: 1px solid var(--border); }

.credential-item:hover {
  padding-left:  10px;
  padding-right: 10px;
  margin-left:   -10px;
  margin-right:  -10px;
  background:    rgba(26,70,201,0.02);
}

.credential-item__year {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.08em;
  color:          var(--blue);
  opacity:        0.8;
  white-space:    nowrap;
  padding-top:    2px;
  min-width:      60px;
}

.credential-item__title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.credential-item__sub {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.4;
}

/* ── CTA BAND ────────────────────────────── */

.about-cta {
  padding:         72px 48px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             48px;
  background:      var(--text-primary);
  position:        relative;
  overflow:        hidden;
}

.about-cta::before {
  content:    "";
  position:   absolute;
  top:        -40%;
  left:       -5%;
  width:      50%;
  height:     200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.about-cta__text {
  position: relative;
  z-index:  1;
}

.about-cta__heading {
  font-size:      clamp(1.8rem, 3vw, 2.8rem);
  font-weight:    300;
  letter-spacing: -0.05em;
  color:          #ffffff;
  line-height:    1.1;
  margin-bottom:  10px;
}

.about-cta__sub {
  font-size:   15px;
  color:       rgba(255,255,255,0.55);
  line-height: 1.6;
}

.about-cta__actions {
  display:     flex;
  gap:         12px;
  flex-shrink: 0;
  position:    relative;
  z-index:     1;
}

.about-cta__btn {
  display:        inline-flex;
  align-items:    center;
  padding:        14px 28px;
  border-radius:  var(--radius-pill);
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 0.04em;
  transition:
    background   var(--t-fast) ease,
    transform    var(--t-fast) ease,
    border-color var(--t-fast) ease;
}

.about-cta__btn--primary {
  background:  var(--blue);
  color:       #ffffff;
  border:      1.5px solid var(--blue);
}

.about-cta__btn--primary:hover {
  background:  #1339a8;
  transform:   translateY(-2px);
}

.about-cta__btn--ghost {
  background:  transparent;
  color:       rgba(255,255,255,0.80);
  border:      1.5px solid rgba(255,255,255,0.22);
}

.about-cta__btn--ghost:hover {
  background:   rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.40);
  transform:    translateY(-2px);
}

/* ── RESPONSIVE ──────────────────────────── */

@media (max-width: 1024px) {

  .about-hero         { padding: 64px 40px; gap: 56px; }
  .about-principles   { padding: 64px 40px; }
  .about-competencies { padding: 64px 40px; grid-template-columns: 1fr; gap: 40px; }
  .about-credentials  { padding: 64px 40px; gap: 40px; }
  .about-cta          { padding: 56px 40px; }
  .about-stats .about-stat { padding: 22px 24px; }

}

@media (max-width: 768px) {

  .about-hero {
    grid-template-columns: 1fr;
    padding: 48px 20px;
    gap:     40px;
  }

  .about-hero__name   { font-size: clamp(2.6rem, 11vw, 4.4rem); }
  .about-avatar       { width: 52px; height: 52px; font-size: 1rem; border-radius: 10px; }

  .about-hero__identity { flex-wrap: wrap; gap: 12px; }
  .about-hero__resume   { order: 3; }

  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-stat:nth-child(2) { border-right: none; }
  .about-stat:nth-child(3) { border-top: 1px solid var(--border); }
  .about-stat:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
  .about-stat__value       { font-size: 2.2rem; }
  .about-stat              { padding: 20px; }

  .about-principles  { padding: 56px 20px; }
  .principles-grid   { grid-template-columns: 1fr; }
  .principle-card    { padding: 28px 24px; }

  .about-competencies  { padding: 56px 20px; }
  .competency-row      { grid-template-columns: 1fr; gap: 12px; }

  .about-credentials {
    grid-template-columns: 1fr;
    padding: 56px 20px;
    gap:     40px;
  }

  .about-cta {
    flex-direction: column;
    align-items:    flex-start;
    padding:        48px 20px;
    gap:            28px;
  }

  .about-cta__actions { flex-direction: column; width: 100%; }
  .about-cta__btn     { justify-content: center; width: 100%; }

}


/* =========================================
   ABOUT — NEW SECTIONS
   ========================================= */

/* ── LEADERSHIP PHILOSOPHY ──────────────── */

.about-leadership {
  padding:    80px 48px;
  display:    grid;
  grid-template-columns: 360px 1fr;
  gap:        80px;
  align-items: start;
  border-bottom: 1px solid var(--border);
}

.about-beliefs {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.about-belief {
  padding:       24px 0;
  border-bottom: 1px solid var(--border);
  cursor:        pointer;
}

.about-belief:first-child { border-top: 1px solid var(--border); }

.about-belief__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
}

.about-belief__text {
  font-size:   15px;
  font-weight: 500;
  color:       var(--text-primary);
  line-height: 1.4;
  transition:  color var(--t-fast) ease;
}

.about-belief.is-open .about-belief__text,
.about-belief:hover   .about-belief__text {
  color: var(--blue);
}

.about-belief__chevron {
  font-size:  12px;
  color:      var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out);
}

.about-belief.is-open .about-belief__chevron { transform: rotate(90deg); }

.about-belief__expand {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.4s var(--ease-out);
}

.about-belief.is-open .about-belief__expand { max-height: 120px; }

.about-belief__expand-text {
  padding:     12px 0 4px;
  font-size:   14px;
  line-height: 1.7;
  color:       var(--text-muted);
}

/* ── SIGNATURE MOMENTS ──────────────────── */

.about-moments {
  padding:    80px 48px;
  border-bottom: 1px solid var(--border);
}

.about-moments__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  margin-top:            48px;
}

.about-moment {
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  text-decoration: none;
  color:          inherit;
  transition:
    transform  0.4s var(--ease-out),
    box-shadow 0.4s ease;
}

.about-moment:hover {
  transform:  translateY(-5px);
  box-shadow: 0 20px 60px rgba(26,70,201,0.12);
}

/* dark variant */
.about-moment--dark {
  background: var(--text-primary);
}

/* blue variant */
.about-moment--blue {
  background: linear-gradient(145deg, #1a46c9 0%, #0d2880 100%);
}

/* light variant */
.about-moment--light {
  background: #ffffff;
  border:     1px solid var(--border);
}

.about-moment__body {
  padding:   32px 28px 24px;
  flex:      1;
  display:   flex;
  flex-direction: column;
  gap:       10px;
}

.about-moment__year {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity:        0.5;
}

.about-moment--light .about-moment__year { color: var(--text-muted); opacity: 1; }

.about-moment__company {
  font-size:   12px;
  opacity:     0.6;
}

.about-moment--light .about-moment__company { color: var(--blue); opacity: 0.8; }

.about-moment__title {
  font-size:      1.1rem;
  font-weight:    400;
  letter-spacing: -0.02em;
  line-height:    1.3;
  color:          #ffffff;
  transition:     opacity var(--t-fast) ease;
}

.about-moment--light .about-moment__title {
  color: var(--text-primary);
}

.about-moment:hover .about-moment__title { opacity: 0.85; }

.about-moment__desc {
  font-size:   13px;
  line-height: 1.65;
  color:       rgba(255,255,255,0.55);
  flex:        1;
}

.about-moment--light .about-moment__desc { color: var(--text-muted); }

.about-moment__footer {
  padding:     16px 28px;
  border-top:  1px solid rgba(255,255,255,0.10);
  display:     flex;
  flex-direction: column;
  gap:         6px;
}

.about-moment--light .about-moment__footer { border-top-color: var(--border); }

.about-moment__metrics {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.about-moment__metric {
  font-size:   11px;
  color:       rgba(255,255,255,0.55);
  background:  rgba(255,255,255,0.08);
  padding:     3px 8px;
  border-radius: var(--radius-pill);
}

.about-moment--light .about-moment__metric {
  color:       var(--blue);
  background:  rgba(26,70,201,0.07);
}

.about-moment__award {
  font-size:   11px;
  color:       #f5c842;
  display:     flex;
  align-items: center;
  gap:         5px;
}

.about-moment--light .about-moment__award { color: #b07c10; }

.about-moment__cta {
  font-size:   12px;
  color:       rgba(255,255,255,0.45);
  display:     flex;
  align-items: center;
  gap:         4px;
  margin-top:  2px;
  transition:  color var(--t-fast) ease;
}

.about-moment--light .about-moment__cta { color: var(--text-muted); }
.about-moment:hover .about-moment__cta  { color: rgba(255,255,255,0.80); }
.about-moment--light:hover .about-moment__cta { color: var(--blue); }

/* ── TESTIMONIALS (2-up on about page) ─── */

.about-testimonials {
  padding:    80px 48px;
  border-bottom: 1px solid var(--border);
}

.about-testimonials__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
  margin-top:            48px;
}

.about-testi-card {
  background:     #ffffff;
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  padding:        32px 28px 28px;
  display:        flex;
  flex-direction: column;
  gap:            20px;
  transition:
    transform    0.35s var(--ease-out),
    box-shadow   0.35s ease,
    border-color 0.3s ease;
}

.about-testi-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 16px 48px rgba(26,70,201,0.08);
  border-color: rgba(26,70,201,0.18);
}

.about-testi-card__mark {
  font-size:   2.8rem;
  line-height: 1;
  color:       var(--blue);
  opacity:     0.20;
  font-weight: 700;
  margin-bottom: -8px;
}

.about-testi-card__quote {
  font-size:   15px;
  line-height: 1.75;
  color:       var(--text-secondary);
  flex:        1;
}

.about-testi-card__footer {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding-top: 16px;
  border-top:  1px solid var(--border);
}

.about-testi-card__avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--blue);
  color:           #ffffff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     600;
  flex-shrink:     0;
}

.about-testi-card__name {
  display:     block;
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
}

.about-testi-card__role {
  display:   block;
  font-size: 12px;
  color:     var(--text-muted);
}

/* ── RESPONSIVE ──────────────────────────── */

@media (max-width: 1024px) {

  .about-leadership    { padding: 64px 40px; grid-template-columns: 1fr; gap: 40px; }
  .about-moments       { padding: 64px 40px; }
  .about-moments__grid { grid-template-columns: 1fr; gap: 12px; }
  .about-testimonials  { padding: 64px 40px; }
  .about-testimonials__grid { grid-template-columns: 1fr; gap: 12px; }

}

@media (max-width: 768px) {

  .about-leadership   { padding: 56px 20px; }
  .about-moments      { padding: 56px 20px; }
  .about-testimonials { padding: 56px 20px; }
  .about-testimonials__grid { grid-template-columns: 1fr; }

  .about-moment__body   { padding: 24px 20px 18px; }
  .about-moment__footer { padding: 14px 20px; }

}


/* ── FAQ ─────────────────────────────────── */

.about-faq {
  padding:       80px 48px;
  border-bottom: 1px solid var(--border);
  display:       grid;
  grid-template-columns: 320px 1fr;
  gap:           80px;
  align-items:   start;
}

.about-faq__intro {
  position: sticky;
  top:      100px;
}

.about-faq__desc {
  font-size:   15px;
  line-height: 1.75;
  color:       var(--text-muted);
  margin-top:  16px;
}

.about-faq__note {
  margin-top:    20px;
  padding:       14px 16px;
  background:    rgba(26,70,201,0.05);
  border-left:   2px solid var(--blue);
  border-radius: 0 6px 6px 0;
  font-size:     13px;
  line-height:   1.6;
  color:         var(--blue);
}

/* accordion list */
.about-faq__list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.about-faq__item {
  border-bottom: 1px solid var(--border);
  cursor:        pointer;
}

.about-faq__item:first-child { border-top: 1px solid var(--border); }

.about-faq__q {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             20px;
  padding:         22px 0;
}

.about-faq__q-text {
  font-size:   15px;
  font-weight: 500;
  color:       var(--text-primary);
  line-height: 1.45;
  transition:  color var(--t-fast) ease;
}

.about-faq__item.is-open .about-faq__q-text,
.about-faq__item:hover   .about-faq__q-text {
  color: var(--blue);
}

.about-faq__icon {
  width:           24px;
  height:          24px;
  border-radius:   50%;
  border:          1.5px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  color:           var(--text-muted);
  flex-shrink:     0;
  margin-top:      2px;
  transition:
    border-color var(--t-fast) ease,
    color        var(--t-fast) ease,
    background   var(--t-fast) ease,
    transform    var(--t-base) var(--ease-out);
}

.about-faq__item.is-open .about-faq__icon {
  border-color: var(--blue);
  color:        var(--blue);
  transform:    rotate(45deg);
}

.about-faq__item:hover .about-faq__icon {
  border-color: var(--blue);
  color:        var(--blue);
}

.about-faq__a {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.5s var(--ease-out);
}

.about-faq__item.is-open .about-faq__a {
  max-height: 600px;
}

.about-faq__a-text {
  padding:     0 48px 24px 0;
  font-size:   15px;
  line-height: 1.80;
  color:       var(--text-secondary);
}

/* ── RESPONSIVE ──────────────────────────── */

@media (max-width: 1024px) {
  .about-faq { padding: 64px 40px; grid-template-columns: 1fr; gap: 40px; }
  .about-faq__intro { position: static; }
}

@media (max-width: 768px) {
  .about-faq { padding: 56px 20px; }
  .about-faq__a-text { padding-right: 24px; }
}


/* ── MARQUEE (reused from testimonials.css) ── */

.about-marquee {
  background:  var(--text-primary);
  overflow:    hidden;
  padding:     18px 0;
  position:    relative;
  white-space: nowrap;
}

.about-marquee::before,
.about-marquee::after {
  content:  "";
  position: absolute;
  top:      0;
  bottom:   0;
  width:    80px;
  z-index:  2;
  pointer-events: none;
}

.about-marquee::before {
  left:       0;
  background: linear-gradient(to right, var(--text-primary), transparent);
}

.about-marquee::after {
  right:      0;
  background: linear-gradient(to left, var(--text-primary), transparent);
}

.about-marquee__track {
  display:   inline-flex;
  animation: marqueeScroll 28s linear infinite;
  will-change: transform;
}

.about-marquee:hover .about-marquee__track {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.about-marquee__item {
  display:        inline-flex;
  align-items:    center;
  padding:        0 32px;
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.80);
  white-space:    nowrap;
}

.about-marquee__item:nth-child(odd) {
  color: rgba(255,255,255,0.45);
}

@media (prefers-reduced-motion: reduce) {
  .about-marquee__track { animation: none; }
}