/* Compact introduction, with title and company voice aligned at the top. */
#experience{padding:44px 0}
#experience .experience-grid{align-items:start;grid-template-columns:.85fr 1.15fr;gap:48px}
#experience .section-head{margin:0;max-width:440px}
#experience .section-head h2{font-size:clamp(28px,2.6vw,36px);line-height:1.55;margin:8px 0 0;text-wrap:balance}
#experience .intro-brand-name{display:block;font-size:1.08em;line-height:1.35}
html[lang=ar] #experience .intro-brand-name{text-align:right}
html[lang=en] #experience .intro-brand-name{text-align:left}
#experience .intro-brand-line{display:block;margin-top:8px;font-size:.9em;line-height:1.65}
#experience .experience-detail{position:relative;border:0;padding-inline-start:28px}
#experience .experience-detail:before{content:'';position:absolute;inset-inline-start:0;top:4px;width:2px;height:56px;background:var(--red)}
#experience .content-paragraphs{font-size:17px;line-height:1.95}
#experience .content-paragraphs>p{font-size:inherit;line-height:inherit;color:var(--muted);margin:0}
#experience .content-paragraphs>p+p{margin-top:16px}
#experience .about-more{display:inline-block;margin-top:22px;font-size:15px;font-weight:700;padding-bottom:5px;color:#bd1c2c;border-bottom:1px solid #df263740}
#experience .about-more:hover{border-color:currentColor}
@media(max-width:800px){
 #experience .experience-grid{grid-template-columns:1fr;gap:24px}
 #experience .section-head{max-width:600px}
 #experience .experience-detail{padding-inline-start:22px}
}
@media(max-width:560px){
 #experience{padding:34px 0}
 #experience .experience-grid{gap:22px}
 #experience .section-head h2{font-size:27px;line-height:1.6}
 #experience .content-paragraphs{font-size:16px;line-height:1.95}
 #experience .content-paragraphs>p+p{margin-top:14px}
 #experience .about-more{margin-top:20px;font-size:14px}
}