/* About — composes approved site.css / scenes.css / wf.css system. No new colours or typefaces. */
.ab-sec{padding:clamp(72px,10vh,112px) 0}

/* 01 Hero — full-bleed photograph below the header */
.abh{background:var(--fid-white);padding-top:var(--hdr-h)}
.abh__stage{position:relative;overflow:hidden;background:var(--fid-plum-deep);min-height:min(calc(100svh - var(--hdr-h)),880px);box-sizing:border-box;display:flex;align-items:center;padding:clamp(40px,7vh,88px) 0}
.abh__bg{position:absolute;inset:0;z-index:0}
.abh__img{position:absolute;inset:0;background-image:url("../assets/about-hero-kafd-skyline.png");background-size:cover;background-position:70% center;background-repeat:no-repeat;animation:fid-fade 500ms var(--ease-out) both}
.abh__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(36,16,41,.92) 0%,rgba(36,16,41,.8) 35%,rgba(36,16,41,.38) 62%,rgba(36,16,41,.12) 100%)}
.abh__in{position:relative;z-index:1;width:100%}
.abh__text{display:flex;flex-direction:column;gap:clamp(16px,2.8vh,28px);max-width:min(50%,660px)}
.abh__eb{color:var(--fid-violet-200)}
.abh__h{font-size:min(var(--mk-head-size),6vh);line-height:1.1;max-width:20ch;color:var(--fid-white)}
.abh__lead{color:var(--text-on-shell)}
.abh__sub{font:var(--type-body);color:var(--text-on-shell-muted);max-width:56ch}
@media (max-width:1099px){
.abh__stage{min-height:0;align-items:flex-start}
.abh__text{max-width:640px}
.abh__h{font-size:var(--mk-head-size);line-height:var(--mk-head-lead)}
.abh__veil{background:linear-gradient(180deg,rgba(36,16,41,.88) 0%,rgba(36,16,41,.78) 60%,rgba(36,16,41,.55) 100%)}
.abh__img{background-position:66% center}
}

/* 02 Evolution */
.abe{background:var(--surface-app)}
.abe__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16) var(--space-64);align-items:start}
.abe__h{font-size:min(var(--mk-head-size),6vh);line-height:1.1;max-width:14ch}
.abe__story{display:flex;flex-direction:column;gap:var(--space-16);max-width:64ch}
.abe__now{font-weight:var(--weight-medium);color:var(--text-heading)}
.abe__line{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.abe__line::before{content:"";position:absolute;inset-inline:0;top:5px;height:2px;background:var(--fid-plum-200)}
.abe__line li{position:relative;display:flex;flex-direction:column;gap:var(--space-8);padding-inline-end:var(--space-40)}
.abe__dot{width:12px;height:12px;border-radius:var(--radius-pill);background:var(--surface-app);border:var(--border-w-strong) solid var(--fid-plum-400);box-sizing:border-box;margin-bottom:var(--space-12)}
.abe__line li.is-now .abe__dot{background:var(--fid-plum);border-color:var(--fid-plum)}
.abe__k{font:var(--type-label);color:var(--text-muted);font-variant-numeric:tabular-nums}
.abe__line li.is-now .abe__k{color:var(--sem-inprogress-text)}
.abe__t{font:var(--type-h4);color:var(--text-heading)}
.abe__d{max-width:38ch;text-wrap:pretty}

/* 03 Problem + point of view */
.abv{background:var(--fid-white)}
.abv__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16) var(--space-64);align-items:end}
.abv__h{font-size:min(var(--mk-head-size),5.8vh);line-height:1.1;max-width:22ch}
.abv__pov{margin-top:clamp(48px,7vh,80px);padding-top:var(--space-32);border-top:2px solid var(--fid-plum)}
.abv__sh{font:var(--type-h2);color:var(--text-heading);max-width:28ch;text-wrap:balance}
.abv__list{list-style:none;margin:var(--space-32) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-48)}
.abv__list li{display:flex;flex-direction:column;gap:var(--space-12);padding-top:var(--space-20);border-top:var(--border-w) solid var(--border-default)}
.abv__n{font:var(--type-label);color:var(--sem-inprogress-text);font-variant-numeric:tabular-nums}
.abv__t{font:var(--type-h3);color:var(--text-heading);text-wrap:balance}
.abv__d{color:var(--text-default);text-wrap:pretty}

/* 04 Saudi context + how we build */
.abb{background:var(--surface-app)}
.abb__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-64);align-items:start}
.abb__id{display:flex;flex-direction:column;gap:var(--space-16)}
.abb__h{font-size:min(var(--mk-head-size),5.8vh);line-height:1.1;max-width:16ch}
.abb__fact{margin-top:var(--space-16);padding-top:var(--space-20);border-top:2px solid var(--fid-plum)}
.abb__fact p{font:var(--type-h4);color:var(--text-heading);max-width:30ch}
.abb__hh{font:var(--type-h4);color:var(--text-heading);padding-bottom:var(--space-12)}
.abb__list{list-style:none;margin:0;padding:0;border-top:var(--border-w) solid var(--border-default)}
.abb__list li{display:flex;gap:var(--space-16);align-items:flex-start;padding:var(--space-16) 0;border-bottom:var(--border-w) solid var(--border-default);font:var(--type-body-lg);color:var(--text-default);text-wrap:pretty}
.abb__list li .fid-icon{flex:none;margin-top:var(--space-2-sub);color:var(--fid-plum)}

/* 05 Close */
.abclose.wfc.close{min-height:0;display:block;padding:clamp(48px,9vh,80px) 0}
.abc__line{font:var(--type-h4);color:var(--fid-white)}

@media (max-width:1099px){
.abe__grid,.abv__head,.abb__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
.abe__h,.abv__h,.abb__h{font-size:var(--mk-head-size);line-height:var(--mk-head-lead)}
.abv__list{grid-template-columns:minmax(0,1fr);gap:var(--space-24)}
.abv__sh{font:var(--type-h3)}
}
@media (max-width:640px){
.abe__line{grid-template-columns:minmax(0,1fr);gap:var(--space-24);padding-inline-start:var(--space-24)}
.abe__line::before{inset-inline:5px auto;top:0;bottom:0;width:2px;height:auto}
.abe__line li{padding-inline-end:0}
.abe__dot{position:absolute;inset-inline-start:calc(-1 * var(--space-24));top:4px;margin:0}
.abb__list li{font:var(--type-body)}
}