/* =============================================================================
   Aamal Aljoud — About page (D5)
   -----------------------------------------------------------------------------
   Reads as a continuation of the approved homepage rather than a second design:
   the same tokens, the same quiet elevation, the same rhythm. Where the
   homepage runs cinematic, this page runs editorial — one reading column, wide
   air between the blocks, and a single decorative motif held far back.

   Scope: this stylesheet is loaded by the About page only.
   ========================================================================== */

/* ============================================================== 0. MOTION = */

/*
 * Reveals are opt in: the marker class is set by a one line script in the head,
 * so with JavaScript disabled nothing is ever hidden. Reduced motion opts out
 * again, and both paths end at the same painted result.
 */
.aj-motion [data-aj-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms var(--aj-ease), transform 620ms var(--aj-ease);
}

.aj-motion [data-aj-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .aj-motion [data-aj-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==================================================================== HERO = */

/* The shared page hero, given a little more presence for the opening screen. */
.aj-about-hero {
    min-height: clamp(280px, 20vw + 150px, 420px);
}

/* the photograph is a low, wide building: bias the crop away from the sky */
.aj-about-hero .aj-hero__media img {
    object-position: center 62%;
}

/* ================================================================== INTRO = */

/*
 * The company photograph and the company's own words, side by side. The picture
 * is the larger half on wide frames; on narrow ones it leads and the copy
 * follows, so the reading order never changes.
 */
.aj-about-intro {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/*
 * The supplied geometric artwork, painted through a mask so its proportions
 * stay its own and only the colour is ours. It sits behind everything at a
 * whisper, fading out before it reaches the reading column.
 */
.aj-about-intro__motif {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: clamp(220px, 30vw, 460px);
    background-color: var(--aj-border-strong);
    opacity: 0.28;
    -webkit-mask-image: var(--aj-motif),
        linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    mask-image: var(--aj-motif),
        linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat: repeat, no-repeat;
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-size: 340px auto, 100% 100%;
    mask-size: 340px auto, 100% 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    pointer-events: none;
    z-index: -1;
}

[dir="ltr"] .aj-about-intro__motif {
    -webkit-mask-image: var(--aj-motif),
        linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    mask-image: var(--aj-motif),
        linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
}

/* without mask support nothing is drawn, rather than a solid block */
@supports not ((mask-image: url("#m")) or (-webkit-mask-image: url("#m"))) {
    .aj-about-intro__motif {
        display: none;
    }
}

/*
 * The copy holds the reading edge and the photograph sits opposite it, which is
 * the arrangement the approved reference uses. The picture is second in the
 * source so the page still reads heading first without JavaScript or CSS.
 */
.aj-about-intro__grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: clamp(var(--aj-space-8), 4vw, var(--aj-space-16));
}

.aj-about-intro__media {
    position: relative;
    margin: 0;
    border-radius: var(--aj-radius-xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--aj-divider), var(--aj-shadow-md);
}

/* the thin accent rail that marks the reading edge of the picture */
.aj-about-intro__media::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 4px;
    background-color: var(--aj-accent);
}

.aj-about-intro__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.aj-about-intro__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-4);
}

.aj-about-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent);
    letter-spacing: 0.02em;
}

.aj-about-intro__eyebrow::after {
    content: "";
    inline-size: 28px;
    block-size: 1px;
    background-color: var(--aj-accent-border);
}

.aj-about-intro__title {
    margin: 0;
    font-size: var(--aj-fs-h2);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    color: var(--aj-text);
}

.aj-about-intro__rule {
    display: block;
    inline-size: 56px;
    block-size: 2px;
    background-color: var(--aj-accent);
}

.aj-about-intro__text {
    margin: 0;
    max-inline-size: 62ch;
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-relaxed);
    color: var(--aj-text-secondary);
}

/* ================================================================ PILLARS = */

.aj-about-pillars {
    background-color: var(--aj-surface-muted);
}

.aj-about-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--aj-space-6);
}

/*
 * Cards, not boxes: a white surface on the muted band, a hairline instead of a
 * shadow, and the icon carried in a soft accent chip on the reading edge.
 */
.aj-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-4);
    padding: clamp(var(--aj-space-6), 2.2vw, var(--aj-space-10));
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-pillar:hover {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-sm);
}

.aj-pillar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--aj-radius-md);
    background-color: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-pillar__title {
    margin: 0;
    font-size: var(--aj-fs-h3);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
}

.aj-pillar__text {
    margin: 0;
    font-size: var(--aj-fs-body);
    line-height: var(--aj-lh-normal);
    color: var(--aj-text-secondary);
}

/* =================================================================== TEAM = */

/*
 * A centred wrap rather than a fixed column count: the dashboard decides how
 * many members there are, so the row shape has to follow the data. Four fill a
 * row comfortably; three read as a deliberate centred trio instead of a
 * four-column row with a hole in it.
 */
.aj-about-team__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--aj-space-6);
}

.aj-about-team__grid > .aj-member {
    flex: 1 1 260px;
    max-inline-size: 320px;
}

.aj-member {
    display: flex;
    flex-direction: column;
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    overflow: hidden;
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-member:hover {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-md);
}

/*
 * The portrait keeps the height its own width gives it. Without this it is a
 * stretchable flex item, so a member with a shorter biography grows a taller
 * picture than the one beside them and the rules under the portraits stop
 * lining up across the row.
 */
.aj-member__portrait {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    aspect-ratio: 4 / 5;
    background-color: var(--aj-surface-muted);
}

.aj-member__portrait img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: top center;
}

.aj-member__placeholder {
    color: var(--aj-text-muted);
    opacity: 0.5;
}

.aj-member__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--aj-space-2);
    padding: var(--aj-space-5) var(--aj-space-5) var(--aj-space-6);
    border-block-start: 2px solid var(--aj-accent);
}

.aj-member__name {
    margin: 0;
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
}

.aj-member__role {
    margin: 0;
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent);
}

/* =============================================================== SERVICES = */

/*
 * Seven services do not divide by three, and a lone card at the end of a grid
 * row reads as a leftover. Laid out as a centred wrap instead, they fall 4 + 3
 * with the short row centred under the long one — and any other count lands the
 * same way, so the balance is not a property of there being exactly seven.
 */
.aj-about-services__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--aj-space-6);
}

.aj-about-services__grid > .aj-service {
    /* four to a row: the gap is shared by the three gutters between them */
    flex: 0 1 calc((100% - 3 * var(--aj-space-6)) / 4);
    min-inline-size: 0;
}

/*
 * The ordinal is a watermark rather than a badge: it sits low in the corner in
 * a very light accent, so the eye reads the service name first.
 */
.aj-service {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-4);
    padding: clamp(var(--aj-space-6), 2vw, var(--aj-space-8));
    padding-block-end: var(--aj-space-10);
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    overflow: hidden;
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-service:hover {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-sm);
}

.aj-service__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--aj-radius-md);
    background-color: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-service__body {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-2);
}

.aj-service__title {
    margin: 0;
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
}

.aj-service__text {
    margin: 0;
    font-size: var(--aj-fs-sm);
    line-height: var(--aj-lh-normal);
    color: var(--aj-text-secondary);
}

/*
 * The cards are narrower now that they run four to a row, so the ordinal sits
 * fully inside the card rather than half off its bottom edge, where the crop
 * read as an accident instead of a watermark.
 */
.aj-service__index {
    position: absolute;
    inset-block-end: var(--aj-space-2);
    inset-inline-end: var(--aj-space-4);
    font-size: 2.75rem;
    font-weight: var(--aj-fw-bold);
    line-height: 1;
    color: var(--aj-accent);
    opacity: 0.08;
    unicode-bidi: isolate;
    pointer-events: none;
}

/* ============================================== SCOPE & PARTNER LOGO WALLS = */

/*
 * Both walls show supplied artwork exactly as delivered: every mark is fitted
 * inside a box of the same shape, so nothing is cropped and no logo outsizes
 * its neighbour because its artwork happens to be bolder. Hairlines separate
 * the cells; there are no cards and no hover treatment.
 */
/*
 * The scope band carries the alternation the removed tracks section used to
 * provide. Without it the services and the scope wall meet on the same ground
 * and their two section paddings read as one large hole — and because the team
 * block above is optional, the rhythm has to hold whether it renders or not.
 */
.aj-about-scope {
    background-color: var(--aj-surface-muted);
}

.aj-about-scope__wall,
.aj-about-partners__wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    overflow: hidden;
}

.aj-about-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 120px;
    padding: var(--aj-space-4) var(--aj-space-5);
}

/* faded hairlines between the cells, suppressed on each row's first column */
.aj-about-mark::before {
    content: "";
    position: absolute;
    inset-block: 18%;
    inset-inline-start: 0;
    inline-size: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--aj-divider) 25%,
        var(--aj-divider) 75%,
        transparent
    );
}

.aj-about-scope__wall .aj-about-mark:nth-child(4n + 1)::before,
.aj-about-partners__wall .aj-about-mark:nth-child(4n + 1)::before {
    display: none;
}

/*
 * The box is the canvas, so the box has to match it. The partner marks are
 * supplied on a 200x120 sheet and the scope marks on a nearly square 180x157
 * one; giving each wall its own ratio is what makes every logo in it land at
 * one scale without any of them being cropped.
 */
.aj-about-mark img {
    object-fit: contain;
    object-position: center;
    opacity: 1;
}

.aj-about-partners__wall .aj-about-mark img {
    inline-size: min(100%, 172px);
    aspect-ratio: 5 / 3;
}

.aj-about-scope__wall .aj-about-mark img {
    /* +12%: these marks carry more of their own whitespace than the partner
       ones, so they need a larger box to read at the same weight */
    inline-size: min(100%, 168px);
    aspect-ratio: 180 / 157;
}

/*
 * The cell is sized to the artwork rather than the other way round: the wall
 * keeps the height it had, and the space it used to waste above and below each
 * mark now belongs to the mark.
 */
.aj-about-scope__wall .aj-about-mark {
    min-block-size: 140px;
    padding-block: var(--aj-space-2);
}

/* ================================================================== STATS = */

.aj-about-stats {
    padding-block-end: var(--aj-section-y);
}

/*
 * The same panel the homepage uses, so the two pages read as one product. The
 * .aj-stats / .aj-stat rules themselves live in the shared component sheet.
 */
.aj-about-stats__plate {
    position: relative;
}

/* ============================================================ RESPONSIVE = */

@media (max-width: 1024px) {
    .aj-about-intro__grid {
        grid-template-columns: 1fr;
        gap: var(--aj-space-8);
    }
    .aj-about-intro__media img {
        aspect-ratio: 16 / 9;
    }
    .aj-about-intro__motif {
        inline-size: clamp(180px, 34vw, 300px);
        opacity: 0.2;
    }
    .aj-about-pillars__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* three to a row; the seventh still centres itself under them */
    .aj-about-services__grid > .aj-service {
        flex-basis: calc((100% - 2 * var(--aj-space-6)) / 3);
    }
    .aj-about-team__grid > .aj-member {
        flex-basis: calc((100% - var(--aj-space-6)) / 2);
        max-inline-size: none;
    }
    .aj-about-scope__wall,
    .aj-about-partners__wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .aj-about-scope__wall .aj-about-mark:nth-child(4n + 1)::before,
    .aj-about-partners__wall .aj-about-mark:nth-child(4n + 1)::before {
        display: block;
    }
    .aj-about-scope__wall .aj-about-mark:nth-child(3n + 1)::before,
    .aj-about-partners__wall .aj-about-mark:nth-child(3n + 1)::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .aj-about-services__grid > .aj-service {
        flex-basis: calc((100% - var(--aj-space-6)) / 2);
    }
}

@media (max-width: 640px) {
    .aj-about-pillars__grid {
        grid-template-columns: 1fr;
    }
    .aj-about-team__grid > .aj-member {
        flex-basis: 100%;
    }
    .aj-about-services__grid > .aj-service {
        flex-basis: 100%;
    }
    .aj-about-scope__wall,
    .aj-about-partners__wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .aj-about-scope__wall .aj-about-mark:nth-child(3n + 1)::before,
    .aj-about-partners__wall .aj-about-mark:nth-child(3n + 1)::before {
        display: block;
    }
    .aj-about-scope__wall .aj-about-mark:nth-child(2n + 1)::before,
    .aj-about-partners__wall .aj-about-mark:nth-child(2n + 1)::before {
        display: none;
    }
    .aj-about-mark {
        min-block-size: 96px;
        padding: var(--aj-space-3) var(--aj-space-4);
    }
    .aj-about-scope__wall .aj-about-mark {
        min-block-size: 112px;
    }
    .aj-about-scope__wall .aj-about-mark img {
        inline-size: min(100%, 132px);
    }
    .aj-about-intro__motif {
        display: none;
    }
    .aj-service__index {
        font-size: 2.5rem;
    }
}

/* ============================================ PHONES AND FOLDABLES ===== */

/*
 * Up to 720px — a phone, and a foldable folded or open; the iPad mini and
 * wider keep the layouts above. The same rules as the home page: a picture
 * no taller than it needs to be, buttons centred, a long run of cards
 * turned into a row that swipes, marks three to a row.
 */
@media (max-width: 720px) {

    /* ---- the company: a wide picture rather than a tall one, and the
       button centred under the words */
    .aj-about-intro__media img {
        aspect-ratio: 16 / 10;
        inline-size: 100%;
        object-fit: cover;
    }
    .aj-about-intro__body > .aj-btn {
        align-self: center;
    }

    /* ---- vision, mission, values: the icon beside the words, so the three
       read on one screen */
    .aj-pillar {
        align-items: start;
        column-gap: var(--aj-space-4);
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        padding: var(--aj-space-5);
        row-gap: var(--aj-space-1);
    }
    .aj-pillar__icon {
        block-size: 44px;
        grid-row: span 2;
        inline-size: 44px;
    }
    .aj-pillar__title,
    .aj-pillar__text {
        margin: 0;
    }

    /* ---- the services and the team: rows that swipe, the edge of the next
       card showing */
    .aj-about-services__grid,
    .aj-about-team__grid {
        flex-wrap: nowrap;
        gap: 14px;
        justify-content: flex-start;
        margin-inline: calc(50% - 50vw);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 4px 16px 14px;
        scroll-padding-inline: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .aj-about-services__grid::-webkit-scrollbar,
    .aj-about-team__grid::-webkit-scrollbar {
        display: none;
    }
    .aj-about-services__grid > .aj-service {
        flex: 0 0 min(78%, 300px);
        scroll-snap-align: start;
    }
    .aj-about-team__grid > .aj-member {
        flex: 0 0 min(66%, 260px);
        max-inline-size: none;
        scroll-snap-align: start;
    }
    .aj-member__portrait {
        aspect-ratio: 1 / 1;
    }

    /* ---- fields of business and partners: three to a row */
    .aj-about-scope__wall,
    .aj-about-partners__wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .aj-about-scope__wall .aj-about-mark::before,
    .aj-about-partners__wall .aj-about-mark::before {
        display: block;
    }
    .aj-about-scope__wall .aj-about-mark:nth-child(3n + 1)::before,
    .aj-about-partners__wall .aj-about-mark:nth-child(3n + 1)::before {
        display: none;
    }
    .aj-about-mark,
    .aj-about-scope__wall .aj-about-mark {
        min-block-size: 84px;
        padding: var(--aj-space-3);
    }
}

/* an open foldable: the pillars side by side */
@media (min-width: 560px) and (max-width: 720px) {
    .aj-about-pillars__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .aj-pillar {
        display: flex;
        flex-direction: column;
    }
}