/* ==========================================================================
   ABOUT PAGE — styles specific to about/index.html
   ========================================================================== */
/* ==========================================================================
   2. WHO WE ARE — editorial two-column body
   ========================================================================== */
.who-we-are__grid{
  display:grid;
  grid-template-columns:.8fr 1.4fr;
  gap:clamp(2rem, 4vw, 3.5rem);
  max-width:960px;
  margin-inline:auto;
}
.who-we-are__label p{
  font-family:var(--font-display);
  font-size:var(--fs-h5);
  color:var(--color-navy-900);
  line-height:var(--lh-tight);
}
.who-we-are__body p+p{margin-top:1em}

@media (max-width:760px){
  .who-we-are__grid{grid-template-columns:1fr;gap:var(--space-lg)}
}

/* ==========================================================================
   3. OUR APPROACH — lightweight numbered list, no boxed cards
   ========================================================================== */
.our-approach__lead{
  max-width:64ch;
  margin-inline:auto;
  margin-bottom:clamp(2rem, 4vw, 3rem);
  text-align:center;
  font-size:var(--fs-body-lg);
}

.approach-list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.5rem, 3vw, 2rem);
  max-width:1120px;
  margin-inline:auto;
}
.approach-item{
  padding-top:1.25rem;
  border-top:2px solid var(--color-border-strong);
}
.approach-item__index{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--color-green-600);
  margin-bottom:.5rem;
}
.approach-item h4{margin-bottom:.4rem}
.approach-item p{font-size:var(--fs-body-sm)}

@media (max-width:900px){
  .approach-list{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .approach-list{grid-template-columns:1fr}
}

/* ==========================================================================
   4. WHAT WE STAND FOR — spacious 2x2, minimal styling
   ========================================================================== */
.values-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  max-width:820px;
  margin-inline:auto;
}
.values-item{padding-top:1rem;border-top:2px solid var(--color-border-strong)}
.values-item h4{margin-bottom:.5rem}

@media (max-width:600px){
  .values-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   5. MEET THE FOUNDERS — large alternating rows, no flip interaction
   ========================================================================== */
.about-founders__lead{
  max-width:64ch;
  margin-inline:auto;
  margin-bottom:clamp(2.5rem, 4vw, 3.5rem);
  text-align:center;
  font-size:var(--fs-body-lg);
}

.about-founder-list{
  display:flex;
  flex-direction:column;
  gap:clamp(3.5rem, 6vw, 5.5rem);
  max-width:1080px;
  margin-inline:auto;
}

.about-founder{
  display:flex;
  align-items:center;
  gap:clamp(2rem, 5vw, 4rem);
}
.about-founder--reverse{flex-direction:row-reverse}

.about-founder__media{
  flex:0 0 clamp(260px, 32vw, 380px);
}
.about-founder__media picture,
.about-founder__media img{
  display:block;
  width:100%;
  aspect-ratio:4/4;
  object-fit:cover;
  border-radius:var(--radius-xl);
}

.about-founder__body{flex:1;min-width:0}
.about-founder__name{margin-bottom:.2rem}
.about-founder__role{
  font-weight:700;
  color:var(--color-green-600);
  margin-bottom:1rem;
}
.about-founder__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding: .5rem .2rem;
  margin-bottom:1.25rem;
}
.about-founder__tags li{
  padding:.35rem .85rem;
  border-radius:var(--radius-full);
  background: var(--gradient-brand-soft);
  color:var(--color-mint-100);
  font-size:var(--fs-caption);
  font-weight:700;
}
.about-founder__bio{max-width:56ch;margin-bottom:1.25rem}
.about-founder__linkedin{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  font-size:var(--fs-body-sm);
  color:var(--color-navy-900);
  transition: all .55s var(--ease-out-soft);
}
.about-founder__linkedin svg{width:1.15rem;height:1.15rem}
.about-founder__linkedin:hover{color:var(--color-green-600)}

@media (max-width:820px){
  .about-founder,
  .about-founder--reverse{flex-direction:column;text-align:center}
  .about-founder__media{flex:0 0 auto;width:min(100%, 320px)}
  .about-founder__tags{justify-content:flex-start}
  .about-founder__bio{margin-inline:auto}
}

/* ==========================================================================
   6. OUR EXPERTISE — 4 pillars
   ========================================================================== */
.expertise-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.5rem, 3vw, 2rem);
  max-width:1120px;
  margin-inline:auto;
  margin-bottom:clamp(2.5rem, 4vw, 3rem);
}
.expertise-item{text-align:center}
.expertise-item__icon{
  width:3rem;
  height:3rem;
  margin-inline:auto;
  margin-bottom:1rem;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--color-mint-100);
  color:var(--color-green-600);
}
.expertise-item__icon svg{width:1.4rem;height:1.4rem}
.expertise-item h4{margin-bottom:.4rem}
.expertise-item p{font-size:var(--fs-body-sm)}

.expertise-cta{text-align:center}

@media (max-width:900px){
  .expertise-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .expertise-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   7. WHO WE WORK WITH — 2x2, text only
   ========================================================================== */
.audience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem, 3vw, 2.5rem);
  max-width:900px;
  margin-inline:auto;
}
.audience-item{
  padding:clamp(1.5rem, 2.5vw, 2rem);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background: radial-gradient(circle at 15% 10%, rgba(174, 235, 209, .4) 10%, transparent 35%), linear-gradient(225deg, var(--color-white) 0%, var(--color-mint-50) 55%, var(--color-mint-100) 100%);
}
.audience-item h4{margin-bottom:.5rem}

@media (max-width:600px){
  .audience-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   8. WHY NUMERIQ GLOBAL (about) — 5-item list, distinct from homepage cards
   ========================================================================== */
.why-about-list{
  display:flex;
  flex-direction:column;
  max-width:760px;
  margin-inline:auto;
}
.why-about-item{
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
  padding-block:1.5rem;
  border-bottom:1px solid var(--color-border);
}
.why-about-item:first-child{border-top:1px solid var(--color-border)}
.why-about-item__index{
  flex-shrink:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h5);
  color:var(--color-green-600);
}
.why-about-item h4{margin-bottom:.3rem}
.why-about-item p{font-size:var(--fs-body-sm)}

@media (max-width:520px){
  .why-about-item{gap:1rem}
}


/* ==========================================================================
   10. FINAL CTA — small addition only (secondary text link on the
   shared .cta-section component; the component itself lives in home.css)
   ========================================================================== */
.cta-section__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.75rem;
  flex-wrap:wrap;
}
.cta-section__link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  font-size:var(--fs-body-sm);
  color:var(--color-white);
}
.cta-section__link svg{
  width:1.1rem;
  height:1.1rem;
  transition:transform var(--duration-fast) var(--ease-out-soft);
}
.cta-section__link:hover svg{transform:translateX(3px)}