/* About design adapted from the supplied reference; inherit site colours/fonts. */
#about{--t-base:240ms;--t-fast:180ms;--ease-out:cubic-bezier(.2,.7,.2,1);scroll-margin-top:110px;line-height:1.75}
#about .wrap{padding-inline:24px}
#about .section-title{line-height:1.3}
html.lang-ar #about .section-title{letter-spacing:0}
#about .about-card > *,#about .about-body{min-width:0}
#about .about-heading .eyebrow{letter-spacing:.02em}
#about .about-path{list-style:none;padding:0}
#about .about-more-btn[hidden],#about .about-story[hidden]{display:none}
#about .chev{width:14px;height:14px;flex:0 0 auto;transition:transform var(--t-base) var(--ease-out)}
#about [aria-expanded="true"] > .chev{transform:rotate(180deg)}
#about .about-card{
  background:var(--card-2);
  border:1px solid var(--border);
  border-radius:32px;
  padding:clamp(28px,6vw,72px);
  display:grid;
  grid-template-columns:minmax(180px,.62fr) 1.5fr;
  gap:clamp(24px,5vw,64px);
  align-items:start;
}
#about .about-heading .section-title{margin-bottom:0}
#about .about-heading .eyebrow{margin-bottom:10px}

#about .about-body{max-width:640px}
html.lang-en #about .about-body{max-width:600px}

#about .about-lead{
  font-size:clamp(20px,2.3vw,27px);
  line-height:1.75;
  font-weight:600;
  color:var(--text);
  text-wrap:pretty;
}
html.lang-en #about .about-lead{line-height:1.5;letter-spacing:-.01em}
#about .about-lead .hl{
  color:var(--accent-text);
  font-weight:700;
  font-style:normal;
  white-space:nowrap;
}

#about .about-path{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:12px;row-gap:6px;
  margin-top:clamp(18px,2.4vw,24px);
}
#about .about-path-caption{
  display:block;font-size:12.5px;font-weight:600;color:var(--text-soft);
  margin-top:clamp(22px,3vw,30px);
}
html.lang-en #about .about-path-caption{letter-spacing:.04em;text-transform:uppercase;font-size:11.5px}
#about .about-path-caption + .about-path{margin-top:8px}
#about .about-path li{
  display:inline-flex;align-items:center;gap:12px;
  font-size:15.5px;font-weight:600;color:var(--text);white-space:nowrap;
}
#about .about-path li:not(:last-child)::after{
  content:"";width:18px;height:1.5px;border-radius:2px;background:var(--accent);opacity:.7;flex:0 0 auto;
}

#about .about-support{
  margin-top:clamp(22px,3vw,30px);
  font-size:17px;line-height:2;color:var(--text-soft);
  text-wrap:pretty;
}
html.lang-en #about .about-support{line-height:1.75}
#about .about-support strong{color:var(--text);font-weight:600}

#about .about-more{margin-top:clamp(14px,2vw,18px)}
#about .about-more-btn{
  font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;
  background:none;border:none;color:var(--accent-text);font-size:14.5px;font-weight:700;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1.5px;
  transition:text-decoration-color var(--t-base) ease,opacity var(--t-fast) ease;
}
#about .about-more-btn:active{opacity:.7}
#about .about-story{padding-top:8px}
#about .about-story p{font-size:15.5px;line-height:2;color:var(--text-soft);max-width:600px}
#about .about-story p + p{margin-top:14px}
html.lang-en #about .about-story p{line-height:1.75}


@media (hover:hover) and (pointer:fine){#about .about-more-btn:hover{text-decoration-color:currentColor}}
@media (max-width:880px){
 #about .about-card{grid-template-columns:1fr;border-radius:28px;gap:18px}
 #about .about-body{max-width:none}
}
@media (max-width:640px){
 #about{scroll-margin-top:92px}
 #about .wrap{padding-inline:18px}
 #about .about-card{padding:30px 22px 26px;border-radius:24px}
 #about .about-lead{font-size:20px;line-height:1.8}
 html.lang-en #about .about-lead{font-size:19.5px;line-height:1.55}
 #about .about-path li{font-size:15px;gap:10px}
 #about .about-path{column-gap:10px}
 #about .about-path li:not(:last-child)::after{width:14px}
 #about .about-support{font-size:16px;line-height:1.95}
 html.lang-en #about .about-support{line-height:1.7}
 #about .about-story p{font-size:15px}
}
@media (max-width:400px){
 #about .wrap{padding-inline:16px}
 #about .about-card{padding:26px 18px 22px}
 #about .about-lead{font-size:19px}
 html.lang-en #about .about-lead{font-size:18.5px}
 #about .about-path li{font-size:14.5px}
 #about .about-support{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){#about *,#about *::before,#about *::after{transition:none!important;animation:none!important}}