/* =====================================================================
   AS Group — About page
   Concept: "One Group. Multiple Businesses. One Foundation."
   One diagonal, taken from the left stroke of the AS monogram's "A" (0.3 across for every 1 up, ≈16.7°),
   is the page's structural signature: it cuts the corner out of the opening image, notches the story panel,
   steps the business bands up from the Group foundation, leans the plane behind the Chairman and returns as
   the stepped planes that close the page. Everything else follows the Home page: dusk architecture under a
   controlled dark gradient, Graphite / Warm Ivory / Soft Stone, bronze only as a hairline, 12px radius,
   the same buttons and the same scroll-motion system.
   Loaded on the English and Arabic About pages only.
   ===================================================================== */
.about-page { --a-angle: 16.7deg; }

/* ---------- Chapter marker (number + name), the page's recurring label ---------- */
.chapter {
    display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
    font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; line-height: 1.4;
    letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-dark);
}
.chapter__num { display: inline-flex; align-items: center; gap: 12px; color: var(--bronze); font-variant-numeric: tabular-nums; }
.chapter__num::after { content: ''; width: 28px; height: 1px; background: var(--bronze); }
.chapter--light { color: rgba(246, 245, 241, .68); }

/* =====================================================================
   01 · Opening — one full-width image (the Home skyline, cropped tighter); the words sit directly on it,
   carried by a transparent Deep Ink gradient that is strongest behind the text and fades into the city
   ===================================================================== */
.about-hero {
    position: relative; display: flex; align-items: center; min-height: clamp(460px, 63vh, 620px);
    overflow: hidden; background: var(--ink); color: var(--ivory);
}
.about-hero__media { position: absolute; inset: 0; animation: about-fade 1.1s var(--ease) both; }
.about-hero__media picture, .about-hero__media img { display: block; width: 100%; height: 100%; }
.about-hero__media img { object-fit: cover; object-position: 62% 52%; }
.about-hero__media::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(21, 23, 22, .86) 0%, rgba(21, 23, 22, .62) 34%, rgba(21, 23, 22, .18) 64%, rgba(21, 23, 22, .08) 100%),
        linear-gradient(180deg, rgba(21, 23, 22, .25) 0%, rgba(21, 23, 22, 0) 30%, rgba(21, 23, 22, .35) 100%);
}
.about-hero .container { position: relative; z-index: 2; }
.about-hero__content { max-width: 540px; padding: 72px 0 80px; }
.about-hero__eyebrow {
    display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
    font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 245, 241, .78);
}
.about-hero__eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--bronze); }
.about-hero__title {
    max-width: 20ch; margin: 0 0 20px; color: var(--ivory);
    font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.02em; text-wrap: balance;
}
.about-hero__intro { max-width: 46ch; margin: 0; font-size: var(--fs-lead); line-height: 1.7; color: rgba(246, 245, 241, .8); }
@keyframes about-fade { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   02 · Story — a short, centred, text-led transition between the opening and the business architecture
   ===================================================================== */
.about-story { padding: 72px 0 64px; background: var(--ivory); text-align: center; }
.about-story__inner { max-width: 680px; margin: 0 auto; }
.about-story__label {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
    font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-dark);
}
.about-story__label::before, .about-story__label::after { content: ''; width: 24px; height: 1px; background: var(--bronze); }
.about-story__num { font-variant-numeric: lining-nums; }
.about-story__title { margin: 0 0 14px; font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.about-story__text { max-width: 60ch; margin: 0 auto; font-size: var(--fs-lead); line-height: 1.75; color: var(--body-text); }

/* =====================================================================
   03 · Businesses — three sectors rise from the Group foundation; their left edges trace the "A"
   ===================================================================== */
.about-biz { --stepw: 15%; padding: 112px 0 96px; background: var(--stone); }   /* the foundation closes on Soft Stone, so the Chairman chapter opens on its own */
.about-biz .container { position: relative; }
/* the heading occupies the open triangle beside the indented upper bands, so the stack itself carries the section */
.about-biz__head { position: absolute; top: 0; inset-inline-start: calc(var(--bs-gutter-x) * .5); width: calc(var(--stepw) * 2 - 24px); }
.about-biz__title { max-width: 16ch; margin: 0; font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.biz-stack { display: grid; gap: 10px; margin: 0; padding: 60px 0 0; list-style: none; }
.biz-band {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 24px;
    margin-inline-start: calc(var(--step) * var(--stepw)); padding: 30px 36px;
    border-radius: 12px; background: var(--ivory);
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease);
}
.biz-band:hover { background: #fff; box-shadow: 0 18px 36px -24px rgba(21, 23, 22, .35); transform: translateX(6px); }
[dir="rtl"] .biz-band:hover { transform: translateX(-6px); }
.biz-band__num { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; color: var(--bronze); font-variant-numeric: tabular-nums; }
.biz-band__name { margin: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.biz-band__cos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 22px; margin: 0; font-size: var(--fs-small); }
.biz-band__cos a { position: relative; color: var(--grey); text-decoration: none; transition: color .25s var(--ease); }
.biz-band__cos a::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -3px; height: 1px; background: var(--bronze);
    transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease);
}
[dir="rtl"] .biz-band__cos a::after { transform-origin: right center; }
.biz-band__cos a:hover, .biz-band__cos a:focus-visible { color: var(--ink); }
.biz-band__cos a:hover::after, .biz-band__cos a:focus-visible::after { transform: scaleX(1); }
.biz-band__parent { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); }
.biz-band__parent::after { content: ''; width: 14px; height: 1px; background: var(--bronze); }   /* Africana → its brands */
/* the foundation: full width, Deep Ink, flush with the section floor so it opens into the Chairman chapter */
.biz-foundation {
    display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
    margin-top: 10px; padding: 34px 36px 36px; border-radius: 12px; background: var(--ink); color: var(--ivory);
}
.biz-foundation__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 245, 241, .6); }
.biz-foundation__name { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; }

/* =====================================================================
   04 · Leadership — Ashraf Said as a clean cutout standing in the section itself: a Graphite plane on the
   "A" diagonal behind him, a faint light behind the head to hold the dark suit's silhouette, and the figure
   grounded in a floor fade; the statement sits in a measured column and the name carries the signature
   ===================================================================== */
.chairman { position: relative; overflow: hidden; background: var(--ink); color: var(--ivory); }
/* chapter threshold: a hairline that fades in from the edges, marking where the leadership chapter begins */
.chairman::before {
    content: ''; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(154, 122, 74, 0), rgba(154, 122, 74, .55) 50%, rgba(154, 122, 74, 0));
}
.chairman__stage { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; min-height: 720px; }
.chairman__plane {
    position: absolute; z-index: 0; bottom: 0; inset-inline-start: 4%; width: 34%; height: 64%;
    background: var(--graphite); transform: skewX(calc(var(--a-angle) * -1)); transform-origin: bottom;
}
.chairman__portrait { position: relative; z-index: 1; display: flex; justify-content: center; margin: 0; padding-top: 88px; }
.chairman__light {                                                        /* separates the navy suit from Deep Ink */
    position: absolute; z-index: -1; top: 6%; left: 50%; width: 120%; aspect-ratio: 1; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(246, 245, 241, .075), rgba(246, 245, 241, .025) 55%, rgba(246, 245, 241, 0));
}
.chairman__portrait img {
    display: block; width: auto; height: clamp(560px, 46vw, 660px); max-width: 100%; object-fit: contain; object-position: bottom;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}
.chairman__portrait::after {                                              /* floor: the figure settles into the section */
    content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 90px;
    background: radial-gradient(50% 100% at 50% 100%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.chairman__body { position: relative; z-index: 2; align-self: center; max-width: 500px; padding: 104px 0; padding-inline-start: 72px; }
.chairman__label { margin-bottom: 30px; }
.chairman__quote { margin: 0; }
.chairman__quote p { max-width: 46ch; margin: 0; font-size: var(--fs-body); font-weight: 400; line-height: 1.85; color: rgba(246, 245, 241, .84); text-wrap: pretty; }
.chairman__sign { margin-top: 44px; }
.chairman__sign::before { content: ''; display: block; width: 44px; height: 1px; margin-bottom: 26px; background: var(--bronze); }
.chairman__name { margin: 0; font-family: var(--font-head); font-size: calc(var(--fs-h3) * 1.12); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--ivory); }
.chairman__title { margin: 14px 0 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 245, 241, .56); }

/* =====================================================================
   05 · Principles — three concise statements, each with a small eyebrow label, stepping from light to dark
   (Warm Ivory → Soft Stone → Graphite); one shared column keeps them aligned as one system
   ===================================================================== */
.principle-band { padding: 28px 0; }
.principle-band--mission { padding-top: 40px; background: var(--ivory); }
.principle-band--vision { background: var(--stone); }
.principle-band--values { padding-bottom: 36px; background: var(--graphite); color: var(--ivory); }
.principle-band__label {
    display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
    font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-dark);
}
.principle-band__label::before { content: ''; width: 20px; height: 1px; background: var(--bronze); }
.principle-band--values .principle-band__label { color: var(--bronze); }
.principle-band__text {
    max-width: 56ch; margin: 0; font-family: var(--font-head); color: var(--ink);
    font-size: var(--fs-statement); font-weight: 500; line-height: 1.42; letter-spacing: -0.01em; text-wrap: balance;
}
.principle-band--values .principle-band__text { color: var(--ivory); }

/* =====================================================================
   06 · Explore the Group — closes on Deep Ink and runs straight into the footer;
   the stepped planes are the business architecture seen once more, from a distance
   ===================================================================== */
.about-cta { position: relative; overflow: hidden; padding: 104px 0 112px; background: var(--ink); color: var(--ivory); }
.about-cta__steps { position: absolute; z-index: 0; bottom: 0; inset-inline-end: 0; width: 42%; display: grid; gap: 10px; }
.about-cta__steps span { display: block; height: 42px; background: #1C1F1D; border-start-start-radius: 12px; border-end-start-radius: 12px; }
.about-cta__steps span:nth-child(1) { margin-inline-start: 36%; }
.about-cta__steps span:nth-child(2) { margin-inline-start: 24%; }
.about-cta__steps span:nth-child(3) { margin-inline-start: 12%; }
.about-cta__steps span:nth-child(4) { border-end-start-radius: 0; }
.about-cta__inner { position: relative; z-index: 1; }
/* a faint ground line: the stepped planes stand on it, as the sectors stand on the foundation */
.site-footer { border-top: 1px solid rgba(246, 245, 241, .08); }
.about-cta__title { max-width: 22ch; margin: 0; font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--ivory); text-wrap: balance; }
.about-cta__text { max-width: 46ch; margin: 16px 0 30px; font-size: var(--fs-lead); line-height: 1.7; color: rgba(246, 245, 241, .7); }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-cta .about-cta__primary { background: var(--ivory); color: var(--ink); }
.about-cta .about-cta__primary:hover { background: var(--stone); color: var(--ink); }
.about-cta__secondary {
    display: inline-flex; align-items: center; padding: 13px 26px; border: 1px solid rgba(246, 245, 241, .3); border-radius: 4px;
    font-size: var(--fs-btn); font-weight: 600; letter-spacing: .01em; color: var(--ivory); background: transparent;
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.about-cta__secondary:hover, .about-cta__secondary:focus-visible { border-color: var(--ivory); color: var(--ivory); }

/* =====================================================================
   Tablet
   ===================================================================== */
@media (max-width: 991px) {
    .about-hero__content { max-width: 480px; }
    .about-biz { --stepw: 7%; padding-top: 88px; }
    .about-biz__head { position: static; width: auto; margin-bottom: 36px; }
    .biz-stack { padding-top: 0; }
    .biz-band { grid-template-columns: 40px minmax(0, 1fr); padding: 26px 28px; }
    .biz-band__cos { grid-column: 2; justify-content: flex-start; }
    .chairman__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
    .chairman__portrait img { height: 520px; }
    .chairman__body { padding: 72px 0; padding-inline-start: 32px; }
    .about-cta__steps { width: 50%; }
}

/* =====================================================================
   Mobile (designed for 390px)
   ===================================================================== */
@media (max-width: 767px) {
    .chapter { margin-bottom: 16px; }

    /* hero: shorter, image full width, words at the base on a bottom gradient */
    .about-hero { align-items: flex-end; min-height: 440px; }
    .about-hero__media img { object-position: 64% 40%; }
    .about-hero__media::after {
        background: linear-gradient(180deg, rgba(21, 23, 22, .12) 0%, rgba(21, 23, 22, .35) 38%, rgba(21, 23, 22, .88) 78%, rgba(21, 23, 22, .94) 100%);
    }
    .about-hero__content { max-width: none; padding: 150px 0 32px; }
    .about-hero__eyebrow { margin-bottom: 14px; }
    .about-hero__title { max-width: 15ch; margin-bottom: 14px; }
    .about-hero__intro { line-height: 1.65; }

    /* story */
    .about-story { padding: 48px 0 44px; }
    .about-story__label { margin-bottom: 14px; }

    .about-biz { padding: 60px 0 56px; }
    .about-biz__head { margin-bottom: 28px; }
    .biz-stack { gap: 8px; }
    .about-biz { --stepw: 18px; }
    .biz-band { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 12px; padding: 20px 18px; align-items: baseline; }
    .biz-band__name { font-size: 1.0625rem; }
    .biz-band__cos { gap: 4px 16px; }
    .biz-band:hover { transform: none; }
    .biz-foundation { padding: 24px 18px 28px; margin-top: 8px; }

    /* chairman: the figure first, standing in front of the plane; the message follows at once */
    .chairman__stage { display: block; min-height: 0; }
    .chairman__plane { inset-inline-start: 14%; top: 150px; bottom: auto; width: 52%; height: 260px; }
    .chairman__portrait { padding-top: 48px; }
    .chairman__light { top: 0; width: 110%; }
    .chairman__portrait img { height: 400px; filter: none; }
    .chairman__portrait::after { height: 60px; }
    .chairman__body { max-width: none; padding: 12px 0 56px; padding-inline-start: 0; }
    .chairman__label { margin-bottom: 18px; }
    .chairman__quote p { line-height: 1.78; }
    .chairman__sign { margin-top: 30px; }
    .chairman__sign::before { margin-bottom: 18px; }

    /* principles: label above statement */
    .principle-band { padding: 24px 0; }
    .principle-band--mission { padding-top: 32px; }
    .principle-band--values { padding-bottom: 30px; }
    .principle-band__label { margin-bottom: 10px; }
    .principle-band__text { max-width: none; line-height: 1.4; }

    /* ending */
    .about-cta { padding: 64px 0 112px; }
    .about-cta__text { margin: 14px 0 26px; }
    .about-cta__steps { width: 64%; gap: 6px; }
    .about-cta__steps span { height: 18px; border-start-start-radius: 8px; border-end-start-radius: 8px; }
}

/* =====================================================================
   Arabic — tuned separately
   ===================================================================== */
[dir="rtl"] .chapter, [dir="rtl"] .about-story__label, [dir="rtl"] .biz-foundation__label,
[dir="rtl"] .chairman__title, [dir="rtl"] .principle-band__label { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .about-hero__media::after {
    background:
        linear-gradient(270deg, rgba(21, 23, 22, .86) 0%, rgba(21, 23, 22, .62) 34%, rgba(21, 23, 22, .18) 64%, rgba(21, 23, 22, .08) 100%),
        linear-gradient(180deg, rgba(21, 23, 22, .25) 0%, rgba(21, 23, 22, 0) 30%, rgba(21, 23, 22, .35) 100%);
}
[dir="rtl"] .about-hero__media img { object-position: 38% 52%; }
[dir="rtl"] .about-hero__eyebrow { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .about-hero__title { letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] .about-hero__intro, [dir="rtl"] .about-story__text, [dir="rtl"] .about-cta__text { line-height: 1.9; }
[dir="rtl"] .about-story__title, [dir="rtl"] .about-biz__title, [dir="rtl"] .about-cta__title { letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] .about-story__num { letter-spacing: -0.02em; }
[dir="rtl"] .biz-band__name { letter-spacing: 0; line-height: 1.45; }
[dir="rtl"] .biz-foundation__name { letter-spacing: 0; }
[dir="rtl"] .chairman__plane { transform: skewX(var(--a-angle)); }
[dir="rtl"] .chairman__quote p { line-height: 1.95; }
[dir="rtl"] .chairman__name { letter-spacing: 0; line-height: 1.3; font-weight: 600; }
[dir="rtl"] .principle-band__text { font-family: var(--font-body); letter-spacing: 0; line-height: 1.7; }
@media (max-width: 767px) {
    [dir="rtl"] .about-hero__media::after { background: linear-gradient(180deg, rgba(21, 23, 22, .12) 0%, rgba(21, 23, 22, .35) 38%, rgba(21, 23, 22, .88) 78%, rgba(21, 23, 22, .94) 100%); }
    [dir="rtl"] .about-hero__media img { object-position: 36% 40%; }
    [dir="rtl"] .chairman__quote p { line-height: 1.9; }
    [dir="rtl"] .principle-band__text { line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
    .about-hero__media { animation: none; }
    .biz-band, .biz-band__cos a::after { transition: none; }
    .biz-band:hover { transform: none; }
}

/* Three sectors (desktop): the sector name keeps one line; company names wrap at the band's edge instead,
   so all three bands keep the same height and rhythm */
.biz-band__cos a, .biz-band__parent { white-space: nowrap; }   /* a company name never splits */
@media (min-width: 992px) and (max-width: 1399px) {                 /* narrower desktops: companies sit under the sector name */
    .biz-band { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
    .biz-band__cos { grid-column: 2; justify-content: flex-start; }
}
@media (min-width: 1400px) {
    .biz-band { grid-template-columns: 52px auto minmax(0, 1fr); }
    .biz-band__name { white-space: nowrap; }
    .biz-band__cos { row-gap: 4px; }
}

/* Africana links to its own page and keeps the parent weight */
.biz-band__parent a { color: var(--ink); font-weight: 600; }