/* =============================================================================
   Aamal Aljoud — Homepage (D4 → D4.1 → D4.2 visual elevation)
   -----------------------------------------------------------------------------
   The page is composed as one journey rather than a stack of equal cards:
   the hero and the showcase run edge to edge, the portrait and the featured
   media bleed out of the gutter, and the remaining blocks stay contained.
   Colour, type, spacing, radius and motion all come from the D1 tokens.
   ========================================================================== */

/* ============================================================== 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 = */

/*
 * Cinematic: the footage fills the frame, the header sits inside it rather than
 * on top of it, and the copy is anchored low on the reading edge behind a thin
 * accent rail — not floated in the middle of the picture.
 */
.aj-home-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-block-size: clamp(560px, 88vh, 880px);
    margin-block-start: calc(-1 * var(--aj-header-h));
    padding-block-start: var(--aj-header-h);
    background-color: var(--aj-charcoal);
    overflow: hidden;
}

.aj-home-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.aj-home-hero__media video,
.aj-home-hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* Directional wash: dense under the copy, clearing across the frame so the
   footage stays legible instead of being uniformly dimmed. */
.aj-home-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to left,
            rgba(18, 21, 26, 0.9) 0%,
            rgba(18, 21, 26, 0.72) 24%,
            rgba(18, 21, 26, 0.36) 52%,
            rgba(18, 21, 26, 0.08) 80%,
            rgba(18, 21, 26, 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(18, 21, 26, 0) 0%,
            rgba(18, 21, 26, 0) 58%,
            rgba(18, 21, 26, 0.42) 100%
        );
}

[dir="ltr"] .aj-home-hero__scrim {
    background:
        linear-gradient(
            to right,
            rgba(18, 21, 26, 0.9) 0%,
            rgba(18, 21, 26, 0.72) 24%,
            rgba(18, 21, 26, 0.36) 52%,
            rgba(18, 21, 26, 0.08) 80%,
            rgba(18, 21, 26, 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(18, 21, 26, 0) 0%,
            rgba(18, 21, 26, 0) 58%,
            rgba(18, 21, 26, 0.42) 100%
        );
}

/* A single hairline inset: the architectural framing device, nothing more. */
.aj-home-hero__frame {
    position: absolute;
    inset: calc(var(--aj-header-h) + 1rem) clamp(0.75rem, 1.2vw, 1.25rem)
        clamp(0.75rem, 1.2vw, 1.25rem);
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--aj-radius-sm);
    pointer-events: none;
}

.aj-home-hero__stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
}

/*
 * Mark, rail, words. The company mark leads on the reading edge, the accent
 * rail stands between it and the statement, and the rail still runs exactly
 * the height of the words beside it.
 */
.aj-home-hero__inner {
    --aj-hero-mark: clamp(7.5rem, 5rem + 4vw, 9.25rem);
    --aj-hero-gap: clamp(var(--aj-space-5), 2.4vw, var(--aj-space-8));
    display: grid;
    grid-template-columns: var(--aj-hero-mark) 2px minmax(0, 1fr);
    gap: var(--aj-hero-gap);
    align-items: stretch;
    /* the words keep the 46rem they always had; the mark and its gap are added
       beside them rather than taken out of them, so the title wraps as before */
    max-inline-size: calc(46rem + var(--aj-hero-mark) + var(--aj-hero-gap));
    /* the lower padding clears the stat plate that overlaps this edge */
    padding-block: var(--aj-space-20) clamp(7rem, 12vh, 10rem);
}

.aj-home-hero__rail {
    display: block;
    inline-size: 2px;
    border-radius: var(--aj-radius-pill);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0%,
        var(--aj-accent) 22%,
        var(--aj-accent) 62%,
        rgba(255, 255, 255, 0.05) 100%
    );
}

.aj-home-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(var(--aj-space-4), 1.6vw, var(--aj-space-6));
}

.aj-home-hero__title {
    font-size: clamp(2.75rem, 1.5rem + 4.4vw, 4.75rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 32px rgba(18, 21, 26, 0.34);
}

.aj-home-hero__lead {
    font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
    font-weight: var(--aj-fw-regular);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-inline-size: 36rem;
    white-space: pre-line; /* the stored copy carries its own line break */
}

.aj-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-3);
    margin-block-start: var(--aj-space-2);
}

/*
 * One short line travels the rounded square around the mark — a quarter of
 * the perimeter, clockwise, at an even pace — with a small point at its head.
 * The square itself is only a whisper. All three strokes share one path and
 * one pathLength of 100, so the dash lengths read as percentages of the
 * perimeter and the line and its head can never drift apart.
 */
/* centred on the words beside it, not on the hero */
.aj-home-hero__emblem {
    align-self: center;
    inline-size: var(--aj-hero-mark);
    pointer-events: none;
}

.aj-home-hero__emblem-box {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 1;
}

/* two thirds of the frame: large enough to read, with a clear margin all
   round so the travelling line never brushes it */
.aj-home-hero__emblem-mark {
    inline-size: 66%;
    block-size: auto;
    opacity: 0.94;
}

.aj-home-hero__orbit {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
}

.aj-home-hero__orbit path {
    fill: none;
    stroke-linecap: round;
}

.aj-home-hero__orbit-track {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

/* the resting position — the top corner on the far side — is also where
   reduced motion leaves the line */
.aj-home-hero__orbit-line {
    stroke: rgba(255, 255, 255, 0.82);
    stroke-width: 1.6;
    stroke-dasharray: 24 76;
    stroke-dashoffset: -10.2;
    animation: aj-orbit-line 7s linear infinite;
}

/* a zero length dash with a round cap is a dot, riding the line's head */
.aj-home-hero__orbit-head {
    stroke: #fff;
    stroke-width: 4;
    stroke-dasharray: 0 100;
    stroke-dashoffset: -34.2;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
    animation: aj-orbit-head 7s linear infinite;
}

/* the head sits at the line's leading end: both run 0 → 100 of the path */
@keyframes aj-orbit-line {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: -76; }
}

@keyframes aj-orbit-head {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -100; }
}

/* quiet scroll affordance on the far edge */
.aj-home-hero__cue {
    position: absolute;
    inset-block-end: clamp(6.5rem, 11vh, 9rem);
    inset-inline-end: clamp(1.75rem, 3.4vw, 3.5rem);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--aj-radius-pill);
    animation: aj-cue 2.6s var(--aj-ease) infinite;
}

@keyframes aj-cue {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* play affordance shown only when the browser blocks autoplay */
.aj-home-hero__gate {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(18, 21, 26, 0.45);
    backdrop-filter: blur(2px);
}

.aj-home-hero__gate.is-visible {
    display: flex;
}

@media (max-width: 1024px) {
    .aj-home-hero__inner {
        padding-block: var(--aj-space-16) clamp(6rem, 11vh, 8rem);
    }
}

/*
 * From 1024 the statement reads as two lines: the name on one, the promise on
 * the other. The type steps down a little and the column opens to 50rem so
 * the name fits whole; the lead's stored line break folds into a space. The
 * mark is sized to the height of those two lines, so mark, rail and words
 * stand the same height. Wrapping stays allowed as the fallback for a longer
 * name typed in later.
 */
@media (min-width: 1024px) {
    .aj-home-hero__inner {
        --aj-hero-mark: clamp(7.5rem, 5rem + 3.9vw, 8.5rem);
        max-inline-size: calc(50rem + var(--aj-hero-mark) + var(--aj-hero-gap));
    }
    .aj-home-hero__title {
        font-size: clamp(2.75rem, 1.9rem + 2.8vw, 4rem);
    }
    .aj-home-hero__lead {
        font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.375rem);
        white-space: normal;
    }
}

/*
 * Below 1024 a third column would take its width out of the title, so the
 * mark takes a row of its own above the rail and the words — smaller, on the
 * same reading edge — and the words keep the width they always had.
 */
@media (max-width: 1023.98px) {
    .aj-home-hero__inner {
        --aj-hero-mark: clamp(5.5rem, 4.25rem + 3vw, 6.5rem);
        grid-template-columns: 2px minmax(0, 1fr);
        max-inline-size: 46rem;
    }
    .aj-home-hero__emblem {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .aj-home-hero {
        min-block-size: clamp(460px, 72vh, 620px);
    }
    .aj-home-hero__inner {
        gap: var(--aj-space-4);
        padding-block: var(--aj-space-12) clamp(5.5rem, 14vh, 7rem);
    }
    .aj-home-hero__title {
        font-size: clamp(2rem, 1.2rem + 4.4vw, 2.75rem);
    }
    .aj-home-hero__actions .aj-btn {
        inline-size: 100%;
        justify-content: center;
    }
    .aj-home-hero__cue {
        display: none;
    }
    .aj-home-hero__frame {
        inset: calc(var(--aj-header-h) + 0.75rem) 0.75rem 0.75rem;
    }
    /* on a narrow frame the wash has to work vertically, not sideways */
    .aj-home-hero__scrim {
        background: linear-gradient(
            to top,
            rgba(18, 21, 26, 0.92) 0%,
            rgba(18, 21, 26, 0.68) 46%,
            rgba(18, 21, 26, 0.34) 80%,
            rgba(18, 21, 26, 0.28) 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .aj-home-hero__cue {
        animation: none;
    }
    /* the line rests on the far top corner, its point at the head */
    .aj-home-hero__orbit-line,
    .aj-home-hero__orbit-head {
        animation: none;
    }
}

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

/* An architectural plate riding the hero edge, not a row of four boxes. Its
   edges line up with the hero copy and every section below it. */
.aj-home-stats {
    position: relative;
    z-index: var(--aj-z-base);
    margin-block-start: clamp(-6.5rem, -5vw - 2rem, -4rem);
    padding-block-end: var(--aj-section-y);
}

.aj-home-stats__plate {
    position: relative;
}

@media (max-width: 1024px) {
    .aj-home-stats {
        margin-block-start: -4rem;
    }
}

@media (max-width: 768px) {
    .aj-home-stats {
        margin-block-start: -3rem;
    }
}

/* ======================================================= PROMO BANNER == */

/*
 * One picture under the statistics, cut to the plate: the same width, the
 * same radius, the same hairline and shadow, so the two read as a pair.
 *
 * The frame holds a fixed ratio rather than the plate's height, which moves
 * with the type from one screen to the next. Both ratios were measured from
 * the plate (1360×145 at 1920px, 358×309 at 390px) and are the ratios the
 * dashboard asks for. A picture of another shape is cropped, never stretched.
 */

.aj-home-stats--before-promo {
    padding-block-end: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
}

.aj-home-promo {
    padding-block: var(--aj-section-y);
}

.aj-home-stats--before-promo + .aj-home-promo {
    padding-block-start: 0;
}

.aj-home-promo__frame {
    position: relative;
    aspect-ratio: 2720 / 290;
    background-color: var(--aj-surface);
    border-radius: var(--aj-radius-xl);
    box-shadow:
        0 0 0 1px var(--aj-divider),
        var(--aj-shadow-md);
    overflow: hidden;
}

.aj-home-promo__link,
.aj-home-promo picture {
    display: block;
    height: 100%;
}

.aj-home-promo__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--aj-duration-slow) var(--aj-ease);
}

.aj-home-promo__link:hover .aj-home-promo__image {
    transform: scale(1.015);
}

/* The frame clips anything drawn outside it, so the ring is drawn inside. */
.aj-home-promo .aj-home-promo__link:focus-visible {
    outline: 3px solid var(--aj-focus-ring);
    outline-offset: -3px;
    border-radius: inherit;
}

/* The phone picture's ratio, only when there is one: without it the desktop
   picture is shown here too, and keeps its own shape. */
@media (max-width: 767.98px) {
    .aj-home-promo--has-mobile .aj-home-promo__frame {
        aspect-ratio: 1160 / 1000;
    }
}

/* ============================================= MESSAGE — كلمة الإدارة == */

/*
 * Executive message block. Everything this block needs lives in this one
 * section; no other part of the page reads or writes these rules.
 *
 * Composition: a light, open section with the message on the reading edge and
 * a mounted portrait beside it. The photograph is a studio shot on a flat two
 * tone backdrop, so it is framed like a mounted print — matted, ruled and
 * shadowed — rather than laid on the page as a slab. Should a cut out image
 * ever replace it in the dashboard, the same frame carries it unchanged.
 */

.aj-home-message {
    position: relative;
    padding-block: clamp(3.75rem, 2.5rem + 4vw, 6.5rem);
    background-color: var(--aj-page);
    overflow: hidden;
}

/* A soft glow behind the portrait, edgeless by construction: a radial stop
   never draws the hard grey block the old treatment did. */
.aj-home-message::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        closest-side at 24% 52%,
        rgba(74, 117, 140, 0.09) 0%,
        rgba(74, 117, 140, 0.03) 62%,
        rgba(74, 117, 140, 0) 100%
    );
    pointer-events: none;
}

[dir="ltr"] .aj-home-message::before {
    background: radial-gradient(
        closest-side at 76% 52%,
        rgba(74, 117, 140, 0.09) 0%,
        rgba(74, 117, 140, 0.03) 62%,
        rgba(74, 117, 140, 0) 100%
    );
}

.aj-home-message__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 22.5rem);
    gap: clamp(var(--aj-space-8), 4vw, var(--aj-space-16));
    align-items: center;
    /* a narrower measure than the full width sections around it, so the two
       columns read as one balanced spread rather than two distant halves */
    max-inline-size: 1120px;
    margin-inline: auto;
}

/* ---- message ---- */

.aj-home-message__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* a whisper of a quotation mark behind the heading, never a graphic */
.aj-home-message__quote {
    position: absolute;
    inset-block-start: -3.25rem;
    inset-inline-start: -1.75rem;
    z-index: 0;
    color: var(--aj-accent);
    opacity: 0.12;
    transform: scale(2.8);
    transform-origin: top right;
    pointer-events: none;
}

[dir="ltr"] .aj-home-message__quote {
    transform-origin: top left;
}

.aj-home-message__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--aj-space-4);
    margin-block-end: var(--aj-space-6);
}

.aj-home-message__eyebrow {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1.2;
    letter-spacing: var(--aj-ls-tight);
    color: var(--aj-text);
}

/* the accent stroke that pairs the heading with the signature below */
.aj-home-message__rule {
    inline-size: clamp(48px, 8vw, 96px);
    block-size: 2px;
    border-radius: var(--aj-radius-pill);
    background: linear-gradient(
        to left,
        var(--aj-accent) 0%,
        rgba(74, 117, 140, 0.15) 100%
    );
}

[dir="ltr"] .aj-home-message__rule {
    background: linear-gradient(
        to right,
        var(--aj-accent) 0%,
        rgba(74, 117, 140, 0.15) 100%
    );
}

.aj-home-message__text {
    position: relative;
    z-index: 1;
    margin: 0;
    max-inline-size: 40rem;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 2.1;
    color: var(--aj-text-secondary);
    text-align: justify;
    text-justify: inter-word;
}

/* ---- signature ---- */

.aj-home-message__author {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    gap: 3px;
    margin-block-start: var(--aj-space-8);
    padding-block-start: var(--aj-space-5);
    max-inline-size: 40rem;
    text-align: end;
    border-block-start: 1px solid var(--aj-divider);
}

.aj-home-message__name {
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
    letter-spacing: var(--aj-ls-tight);
    color: var(--aj-text);
}

.aj-home-message__role {
    font-size: var(--aj-fs-sm);
    color: var(--aj-accent);
}

/*
 * The sign-off, measured against the name.
 *
 * The name sets the width of this group, so the role and the signature centre
 * on the name's own axis instead of lining up along the column edge beside it —
 * which left the shorter role looking pushed aside.
 */
.aj-home-message__signoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: fit-content;
    gap: 3px;
}

/*
 * The signature is deliberately wider than the name, so it hangs from a slot
 * with no width of its own: the slot cannot widen the group (which would shift
 * the name off the edge it sits on), and the ink spreads evenly either side of
 * the name's centre line.
 */
.aj-home-message__signature-slot {
    display: flex;
    justify-content: center;
    inline-size: 0;
    margin-block-start: var(--aj-space-3);
}

/*
 * The handwritten signature, sized to a signature rather than to the column:
 * never a graphic in its own right. The artwork is pure black ink on
 * transparency, so it is eased back a little to read as ink on paper instead of
 * a second heading. It keeps its own width rather than being shrunk to the
 * empty slot around it.
 */
.aj-home-message__signature {
    flex: 0 0 auto;
    display: block;
    inline-size: clamp(140px, 15vw, 190px);
    /* the global img reset caps images at 100% of their container, and this
       container is deliberately zero wide — without this the signature
       collapses to nothing at all */
    max-inline-size: none;
    block-size: auto;
    opacity: 0.85;
}

/* ---- mounted portrait ---- */

.aj-home-message__portrait {
    position: relative;
    margin: 0;
    justify-self: center;
    inline-size: 100%;
    max-inline-size: 22.5rem;
}

/* a hairline rule offset behind the mount, the one decorative device here */
.aj-home-message__portrait::before {
    content: "";
    position: absolute;
    inset-block: var(--aj-space-8) calc(-1 * var(--aj-space-8));
    inset-inline: var(--aj-space-8) calc(-1 * var(--aj-space-8));
    border: 1px solid rgba(74, 117, 140, 0.26);
    border-radius: var(--aj-radius-lg);
    pointer-events: none;
}

/* the mount itself: a white mat, a hairline, a soft lift */
.aj-home-message__plate {
    position: relative;
    display: block;
    padding: clamp(10px, 1vw, 14px);
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    box-shadow: var(--aj-shadow-md);
}

.aj-home-message__plate img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /*
     * The stored photograph is 700x900 with the subject occupying roughly
     * x 144-556 and y 308-896. Anchoring low and scaling in keeps the person
     * filling the mount and trims most of the flat studio backdrop.
     */
    object-position: 50% 100%;
    transform: scale(1.5);
    transform-origin: 50% 100%;
    border-radius: var(--aj-radius-md);
}

/* the mat clips the scaled photograph */
.aj-home-message__plate {
    overflow: hidden;
}

/* A whisper of the mat washed back over the corners, so the flat studio
   backdrop settles into the mount instead of ending on a hard edge. The
   subject sits in the clear centre and stays crisp. */
.aj-home-message__plate::after {
    content: "";
    position: absolute;
    inset: clamp(10px, 1vw, 14px);
    border-radius: var(--aj-radius-md);
    background: radial-gradient(
        120% 78% at 50% 62%,
        rgba(255, 255, 255, 0) 52%,
        rgba(255, 255, 255, 0.18) 78%,
        rgba(255, 255, 255, 0.42) 100%
    );
    pointer-events: none;
}

@media (max-width: 960px) {
    .aj-home-message::before {
        background: radial-gradient(
            closest-side at 50% 26%,
            rgba(74, 117, 140, 0.09) 0%,
            rgba(74, 117, 140, 0) 100%
        );
    }
    .aj-home-message__grid {
        grid-template-columns: 1fr;
        gap: clamp(var(--aj-space-10), 8vw, var(--aj-space-16));
    }
    /* the portrait leads on a narrow frame */
    .aj-home-message__portrait {
        order: -1;
        max-inline-size: 20rem;
    }
    .aj-home-message__body,
    .aj-home-message__text,
    .aj-home-message__author {
        max-inline-size: none;
    }
    .aj-home-message__author {
        align-items: flex-start;
        text-align: start;
    }
    .aj-home-message__quote {
        inset-block-start: -2rem;
        transform: scale(2);
    }
}

@media (max-width: 640px) {
    /* a narrow measure justifies badly in Arabic: the word gaps open up */
    .aj-home-message__text {
        text-align: start;
    }
}

@media (max-width: 560px) {
    .aj-home-message__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--aj-space-3);
    }
    .aj-home-message__portrait::before {
        inset-block: var(--aj-space-4) calc(-1 * var(--aj-space-4));
        inset-inline: var(--aj-space-4) calc(-1 * var(--aj-space-4));
    }
}

/* ======================================================== FEATURED PROJECT = */

/*
 * The strongest block on the page: the media runs out of the gutter and the
 * copy panel steps over it, held on an accent rail.
 */
.aj-home-featured {
    position: relative;
    padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem);
    background-color: var(--aj-surface-muted);
    overflow: hidden;

    /* the project's own quiet violet — scoped to this block, not a global
       token, because it belongs to one project's identity */
    --aj-narjas: #6a5a8c;
}

.aj-home-featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: center;
}

.aj-home-featured__media {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    margin-inline-end: calc(-1 * var(--aj-container-pad));
    min-block-size: clamp(380px, 42vw, 620px);
    overflow: hidden;
    background-color: var(--aj-surface-band);
    border-start-start-radius: var(--aj-radius-lg);
    border-end-start-radius: var(--aj-radius-lg);
    box-shadow: var(--aj-shadow-md);
}

/* Status mark on the media's leading corner: a quiet glass pill, deliberately
   secondary to the project name and nothing like an alert. */
.aj-home-featured__status {
    position: absolute;
    z-index: 1;
    inset-block-start: clamp(var(--aj-space-4), 2vw, var(--aj-space-6));
    /* the block's outer top corner: inline-end is the left in this direction */
    inset-inline-end: clamp(var(--aj-space-5), 2.5vw, var(--aj-space-8));
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    padding: 7px var(--aj-space-4);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-charcoal);
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--aj-radius-pill);
    box-shadow: var(--aj-shadow-sm);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aj-home-featured__status {
        background-color: rgba(255, 255, 255, 0.96);
    }
}

.aj-home-featured__status-dot {
    inline-size: 7px;
    block-size: 7px;
    flex: 0 0 auto;
    border-radius: var(--aj-radius-pill);
    background-color: var(--aj-accent);
}

.aj-home-featured__media video,
.aj-home-featured__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/*
 * A strip along the foot of the film: the company on the reading edge, the
 * project's own mark in the middle, the number on the far edge. No ground of
 * its own — the white marks sit straight on the footage, each carrying only
 * a soft shadow of its own shape so it still reads over a bright frame.
 *
 * Both marks are sized from one measure, so the company's square mark and
 * the project's wide lockup carry the same visual weight.
 */
.aj-home-featured__bar {
    --aj-bar-mark: clamp(96px, 9vw, 124px);
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--aj-space-4);
    padding-block: clamp(0.75rem, 1.2vw, 1rem);
    padding-inline: clamp(var(--aj-space-5), 2.5vw, var(--aj-space-8));
    /* the panel steps over the film's reading edge by its negative margin
       (clamp(2rem, 3vw, 4.5rem)); the strip starts that far in, so the
       company mark is never tucked under the card */
    padding-inline-start: calc(clamp(2rem, 3vw, 4.5rem) + clamp(var(--aj-space-5), 2.5vw, var(--aj-space-8)));
    color: #fff;
}

/* a shadow of each mark's own shape, never a box behind it */
.aj-home-featured__bar-company,
.aj-home-featured__bar-project,
.aj-home-featured__bar-phone {
    filter: drop-shadow(0 1px 6px rgba(18, 21, 26, 0.55));
}

/* scoped to the strip so the rule that makes the film fill its box, which
   targets every image in the media, does not stretch the logo with it.
   The square file's mark is smaller than its box, so it stands a little
   taller than the project's lockup to read at the same size. */
.aj-home-featured__bar .aj-home-featured__bar-company {
    position: static;
    justify-self: start;
    display: block;
    block-size: calc(var(--aj-bar-mark) * 0.52);
    inline-size: auto;
    object-fit: contain;
}

/* the project's mark, painted white through its own shape */
.aj-home-featured__bar-project {
    display: none;
    justify-self: center;
    inline-size: var(--aj-bar-mark);
    aspect-ratio: 350 / 138;
}

@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
    .aj-home-featured__bar-project {
        display: block;
        background-color: #fff;
        -webkit-mask-image: var(--aj-mark);
        mask-image: var(--aj-mark);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 108% auto;
        mask-size: 108% auto;
    }
}

.aj-home-featured__bar-phone {
    justify-self: end;
    font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.125rem);
    font-weight: var(--aj-fw-medium);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-decoration: none;
    transition: opacity 160ms var(--aj-ease);
}

.aj-home-featured__bar-phone:hover {
    opacity: 0.8;
}

.aj-home-featured__bar-phone:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: var(--aj-radius-sm);
}

.aj-home-featured__panel {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-5);
    /* steps over the media instead of sitting beside it */
    margin-inline-end: clamp(-4.5rem, -3vw, -2rem);
    padding: clamp(var(--aj-space-8), 3vw, var(--aj-space-12));
    background-color: var(--aj-surface);
    border-radius: var(--aj-radius-lg);
    box-shadow: var(--aj-shadow-md);
}

/* the accent rail on the reading edge of the panel */
.aj-home-featured__panel::before {
    content: "";
    position: absolute;
    inset-block: clamp(var(--aj-space-8), 3vw, var(--aj-space-12));
    inset-inline-start: 0;
    inline-size: 3px;
    background-color: var(--aj-accent);
    border-start-start-radius: var(--aj-radius-pill);
    border-end-start-radius: var(--aj-radius-pill);
}

.aj-home-featured__title {
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1.16;
    letter-spacing: var(--aj-ls-tight);
    color: var(--aj-text);
    margin: 0;
}

.aj-home-featured__lead {
    font-size: var(--aj-fs-body);
    color: var(--aj-text-secondary);
    line-height: 1.95;
    margin: 0;
    max-inline-size: 32rem; /* a comfortable measure, ~60-70 characters */
}

/* classification chips, one per stored tag */
.aj-home-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aj-home-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--aj-space-4);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent-active);
    background-color: var(--aj-accent-soft);
    border-radius: var(--aj-radius-pill);
}

/* compact fact items rather than another run of paragraph text */
.aj-home-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-3) var(--aj-space-8);
    inline-size: 100%;
    margin: 0;
    padding-block: var(--aj-space-5);
    border-block: 1px solid var(--aj-divider);
    list-style: none;
}

.aj-home-fact {
    display: flex;
    align-items: flex-start;
    gap: var(--aj-space-3);
    font-size: var(--aj-fs-sm);
    color: var(--aj-text);
    line-height: var(--aj-lh-snug);
}

.aj-home-fact .aj-icon {
    color: var(--aj-accent);
    flex: 0 0 auto;
    margin-block-start: 1px;
}

/* The card closes on one row: the project's mark where the button used to sit,
   and the call to action on the far edge. */
.aj-home-featured__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-5);
    inline-size: 100%;
    margin-block-start: var(--aj-space-2);
    padding-block-start: var(--aj-space-5);
    border-block-start: 1px solid var(--aj-divider);
}

.aj-home-featured__cta {
    display: flex;
    flex: 0 0 auto;
}

/*
 * The supplied artwork is a white silhouette with an alpha channel, so it is
 * painted as a mask rather than tinted with a filter: the outline and its
 * proportions come from the file untouched and only the paint is ours. Without
 * mask support nothing is drawn, which is quieter than a stray violet block.
 */
.aj-home-featured__mark {
    display: none;
    flex: 0 0 auto;
    inline-size: clamp(116px, 13vw, 156px);
    /* the ink inside the square file is a horizontal lockup */
    aspect-ratio: 350 / 138;
}

/*
 * The rosette turns, the words hold still.
 *
 * Eight fold symmetry means a 45 degree turn lands the ornament back on itself,
 * so a slow full rotation reads as a drift rather than a spinning graphic. One
 * turn a minute: present if you watch it, never competing with the button
 * beside it.
 */
@keyframes aj-featured-rosette {
    to {
        transform: rotate(360deg);
    }
}

@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
    .aj-home-featured__mark {
        display: block;
        background-color: var(--aj-mark-ink, var(--aj-narjas));
        -webkit-mask-image: var(--aj-mark);
        mask-image: var(--aj-mark);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        /* crops the empty margin of the square file down to the lockup */
        -webkit-mask-size: 108% auto;
        mask-size: 108% auto;
    }

    /*
     * Two layers instead of one. The container stops being a painted mask of
     * its own and becomes the frame the two halves sit in, at the proportions
     * the original file gives them.
     */
    .aj-home-featured__mark--split {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6%;
        background-color: transparent;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .aj-home-featured__mark-orn,
    .aj-home-featured__mark-word {
        display: block;
        background-color: var(--aj-mark-ink, var(--aj-narjas));
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    /*
     * The halves are shipped assets rather than stored media, so their paths
     * live here beside the colour that belongs to the same project — the view
     * can still override either with --aj-mark-orn / --aj-mark-word.
     *
     * The proportions come from each half's own viewBox, not from guesswork.
     */
    .aj-home-featured__mark-orn {
        flex: 0 0 auto;
        inline-size: 30%;
        aspect-ratio: 44.05 / 45.55;
        -webkit-mask-image: var(--aj-mark-orn, url("../../../images/redesign/narjis-ornament.svg"));
        mask-image: var(--aj-mark-orn, url("../../../images/redesign/narjis-ornament.svg"));
        animation: aj-featured-rosette 60s linear infinite;
    }

    .aj-home-featured__mark-word {
        flex: 0 1 auto;
        inline-size: 62%;
        aspect-ratio: 69.47 / 37.34;
        -webkit-mask-image: var(--aj-mark-word, url("../../../images/redesign/narjis-wordmark.svg"));
        mask-image: var(--aj-mark-word, url("../../../images/redesign/narjis-wordmark.svg"));
    }
}

/*
 * This has to come after the block above, not before it: @supports and @media
 * add no specificity of their own, so whichever rule is written last wins. Put
 * earlier in the file it looked like a reduced motion guard and did nothing at
 * all — the rosette kept turning for the very people who asked it not to.
 */
@media (prefers-reduced-motion: reduce) {
    .aj-home-featured__mark-orn {
        animation: none;
    }
}

@media (max-width: 960px) {
    .aj-home-featured__grid {
        grid-template-columns: 1fr;
    }
    /* media first on a narrow frame: the block stays image led */
    .aj-home-featured__media {
        grid-column: 1;
        grid-row: 1;
        margin-inline: calc(-1 * var(--aj-container-pad));
        min-block-size: clamp(240px, 56vw, 380px);
        border-radius: 0;
    }
    .aj-home-featured__panel {
        grid-column: 1;
        grid-row: 2;
        margin-inline: var(--aj-space-4);
        margin-block-start: -3rem;
        padding: var(--aj-space-6);
    }
    .aj-home-featured__footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--aj-space-5);
    }
    .aj-home-featured__mark {
        align-self: flex-start;
        inline-size: 128px;
    }
    .aj-home-featured__cta .aj-btn {
        inline-size: 100%;
        justify-content: center;
    }
    /* the pill sits clear of the panel that rides up over the media */
    .aj-home-featured__status {
        inset-block-start: var(--aj-space-4);
        inset-inline-end: var(--aj-space-4);
    }
    /* and so does the strip: the panel covers the last 3rem of the film */
    .aj-home-featured__bar {
        --aj-bar-mark: 92px;
        inset-block-end: 3rem;
        padding-inline: var(--aj-space-5);
        gap: var(--aj-space-3);
    }
}

/* ================================================================ AUCTIONS = */

.aj-home-auctions {
    background-color: var(--aj-surface);
}

.aj-home-auctions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

/* ============================================== SHOWCASE — مشاريعنا == */

/*
 * Projects showcase. One project at a time, its own photograph carrying the
 * block and a light panel stepping over it. Everything this block needs lives
 * in this section; nothing else on the page reads these rules.
 */

.aj-home-showcase {
    padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem);
    background-color: var(--aj-surface);
    overflow: hidden;
}

/* ---- header row ---- */

.aj-showcase__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-5);
    margin-block-end: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-10));
}

.aj-home-showcase .aj-section-heading {
    margin-block-end: 0;
}

/* a text action, never a button */
.aj-showcase__all {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    flex: 0 0 auto;
    padding-block-end: 3px;
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent-active);
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: var(--aj-transition);
}

.aj-showcase__all:hover,
.aj-showcase__all:focus-visible {
    color: var(--aj-accent);
    border-block-end-color: var(--aj-accent-border);
}

.aj-showcase__all .aj-icon {
    transition: transform var(--aj-duration) var(--aj-ease);
}

.aj-showcase__all:hover .aj-icon {
    transform: translateX(-4px);
}

[dir="ltr"] .aj-showcase__all:hover .aj-icon {
    transform: translateX(4px);
}

/* ---- stage ---- */

.aj-showcase {
    position: relative;
}

.aj-showcase__stage {
    position: relative;
}

.aj-showcase__slide {
    display: none;
}

.aj-showcase__slide.is-active {
    display: grid;
    /* the picture takes a little under two thirds of the block */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
    align-items: center;
}

/* ---- picture ---- */

.aj-showcase__media {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--aj-surface-muted);
    border-radius: var(--aj-radius-lg);
    box-shadow: var(--aj-shadow-md);
}

.aj-showcase__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    animation: aj-showcase-in var(--aj-duration-slow) var(--aj-ease);
}

/* the slightest settle as a slide arrives — no parallax, no drift */
@keyframes aj-showcase-in {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- panel ---- */

.aj-showcase__panel {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* runs the height of the picture so the column carries no dead space */
    align-self: stretch;
    gap: var(--aj-space-4);
    /* steps over the picture rather than sitting beside it */
    margin-inline-end: clamp(-5rem, -3.5vw, -2.5rem);
    margin-block: clamp(var(--aj-space-6), 3vw, var(--aj-space-12));
    padding: clamp(var(--aj-space-8), 2.6vw, var(--aj-space-12));
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
    box-shadow: var(--aj-shadow-md);
    animation: aj-showcase-in var(--aj-duration-slow) var(--aj-ease);
}

@media (prefers-reduced-motion: reduce) {
    .aj-showcase__media img,
    .aj-showcase__panel {
        animation: none;
    }
}

.aj-showcase__rule {
    inline-size: 44px;
    block-size: 2px;
    border-radius: var(--aj-radius-pill);
    background-color: var(--aj-accent);
}

.aj-showcase__index {
    /* latin counter, kept in 01 / 02 order */
    direction: ltr;
    align-self: flex-start;
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    letter-spacing: 0.14em;
    color: var(--aj-text-muted);
}

[dir="rtl"] .aj-showcase__index {
    align-self: flex-start;
}

.aj-showcase__title {
    margin: 0;
    font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1.18;
    letter-spacing: var(--aj-ls-tight);
    color: var(--aj-text);
}

.aj-showcase__text {
    margin: 0;
    font-size: var(--aj-fs-body);
    line-height: 1.95;
    color: var(--aj-text-secondary);
    /* the stored copy is untouched; only its display is capped */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aj-showcase__action {
    margin-block-start: var(--aj-space-2);
}

/* ---- controls ---- */

.aj-showcase__nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(var(--aj-space-4), 2vw, var(--aj-space-8));
    margin-block-start: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-8));
}

.aj-showcase__arrows {
    display: flex;
    align-items: center;
    gap: var(--aj-space-2);
    flex: 0 0 auto;
}

.aj-showcase__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    color: var(--aj-text);
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border-strong);
    border-radius: var(--aj-radius-pill);
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-showcase__arrow:hover,
.aj-showcase__arrow:focus-visible {
    color: var(--aj-accent);
    border-color: var(--aj-accent-border);
    background-color: var(--aj-accent-soft);
}

/* the other projects, shown by their own picture */
.aj-showcase__thumbs {
    display: flex;
    align-items: center;
    gap: var(--aj-space-3);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.aj-showcase__thumbs::-webkit-scrollbar {
    display: none;
}

.aj-showcase__thumb {
    position: relative;
    flex: 0 0 auto;
    inline-size: 88px;
    block-size: 58px;
    padding: 0;
    overflow: hidden;
    background-color: var(--aj-surface-muted);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-md);
    cursor: pointer;
    opacity: 0.55;
    transition: var(--aj-transition);
}

.aj-showcase__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.aj-showcase__thumb-name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.aj-showcase__thumb:hover,
.aj-showcase__thumb:focus-visible {
    opacity: 0.85;
}

.aj-showcase__thumb[aria-current="true"] {
    opacity: 1;
    border-color: var(--aj-accent);
    box-shadow: 0 0 0 3px var(--aj-accent-soft);
}

/* ---- narrow frames ---- */

@media (max-width: 960px) {
    .aj-showcase__slide.is-active {
        grid-template-columns: 1fr;
    }
    /* the picture leads, then the panel steps up under it */
    .aj-showcase__media {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 16 / 11;
    }
    .aj-showcase__panel {
        grid-column: 1;
        grid-row: 2;
        align-self: auto;
        margin-inline: var(--aj-space-5);
        margin-block: -3.5rem 0;
        /* NOTE: this read var(--aj-space-7), which is not in the scale, so the
           declaration was dropped and the panel kept its desktop padding. The
           showcase is out of scope for this change, so the rendered result is
           left exactly as it was. */
        padding: clamp(var(--aj-space-8), 2.6vw, var(--aj-space-12));
    }
}

@media (max-width: 640px) {
    .aj-showcase__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--aj-space-3);
    }
    .aj-showcase__media {
        aspect-ratio: 4 / 3;
    }
    .aj-showcase__panel {
        margin-inline: var(--aj-space-3);
        margin-block-start: -2.5rem;
    }
    .aj-showcase__action .aj-btn {
        inline-size: 100%;
        justify-content: center;
    }
    .aj-showcase__nav {
        gap: var(--aj-space-4);
    }
    .aj-showcase__thumb {
        inline-size: 72px;
        block-size: 48px;
    }
}

/* ==================================================================== NEWS = */

.aj-home-news {
    background-color: var(--aj-surface-muted);
}

.aj-home-news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-5);
    margin-block-end: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-10));
}

.aj-home-news__head .aj-section-heading {
    margin-block-end: 0;
}

/* a text action beside the heading, never a button */
.aj-home-news__more {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    flex: 0 0 auto;
    padding-block-end: 3px;
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent-active);
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: var(--aj-transition);
}

.aj-home-news__more:hover,
.aj-home-news__more:focus-visible {
    color: var(--aj-accent);
    border-block-end-color: var(--aj-accent-border);
}

.aj-home-news__more .aj-icon {
    transition: transform var(--aj-duration) var(--aj-ease);
}

.aj-home-news__more:hover .aj-icon {
    transform: translateX(-4px);
}

[dir="ltr"] .aj-home-news__more:hover .aj-icon {
    transform: translateX(4px);
}

/* One lead story, the others as a light list beside it. */
.aj-home-news__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(var(--aj-space-6), 3vw, var(--aj-space-10));
}

/* the list sits centred against the lead, its stories parted by a hairline */
.aj-home-news__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aj-home-news__list > * + * {
    margin-block-start: clamp(var(--aj-space-4), 1.4vw, var(--aj-space-5));
    padding-block-start: clamp(var(--aj-space-4), 1.4vw, var(--aj-space-5));
    border-block-start: 1px solid var(--aj-border);
}

@media (max-width: 900px) {
    .aj-home-news__grid {
        grid-template-columns: 1fr;
        gap: clamp(var(--aj-space-6), 4vw, var(--aj-space-8));
    }
}

@media (max-width: 640px) {
    .aj-home-news__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--aj-space-3);
    }
    .aj-home-news__grid .aj-news-card__link {
        aspect-ratio: 5 / 4;
        min-block-size: 300px;
    }
}

/* ================================================================ PARTNERS = */

.aj-home-partners {
    background-color: var(--aj-surface);
}

/*
 * A logo wall, not a table: no cell has a box of its own. The only rules drawn
 * are faded vertical hairlines between neighbours, and the row gap does the
 * rest. Column counts are explicit rather than auto-fit so the hairline can be
 * dropped from whichever cell begins a row.
 *
 * Four across rather than eight: every supplied mark is a wide, short wordmark
 * sitting on a 200x120 canvas, so eight to a row leaves each one tiny. Fewer,
 * wider cells is the only thing that actually enlarges the marks.
 */
.aj-partners__wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: clamp(var(--aj-space-4), 2vw, var(--aj-space-6));
}

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

/* the divider fades out at both ends so it never reads as a table rule */
.aj-partner::before {
    content: "";
    position: absolute;
    inset-block: var(--aj-space-2);
    inset-inline-start: 0;
    inline-size: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--aj-divider) 26%,
        var(--aj-divider) 74%,
        transparent 100%
    );
}

.aj-partner:nth-child(4n + 1)::before {
    display: none;
}

/*
 * Every mark is supplied on the same 200x120 canvas, so fitting the canvas is
 * what makes them render at one shared scale: no logo is cropped, and none is
 * larger than its neighbour because its artwork happens to be bolder. They are
 * shown in their own colours, with no hover treatment.
 */
.aj-partner img {
    /*
     * The box is the canvas: same ratio, capped by width. Every logo therefore
     * lands at exactly the same scale, whole, with no letterboxing — and the
     * scale is set on the width, where the supplied artwork varies least
     * (81-94% of the canvas, against 30-93% vertically).
     */
    inline-size: min(100%, 172px);
    aspect-ratio: 5 / 3;
    object-fit: contain;
    object-position: center;
    opacity: 1;
}

@media (max-width: 899px) {
    .aj-partners__wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .aj-partner:nth-child(4n + 1)::before {
        display: block;
    }
    .aj-partner:nth-child(3n + 1)::before {
        display: none;
    }
}

@media (max-width: 599px) {
    .aj-partners__wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .aj-partner {
        min-block-size: 96px;
        padding: var(--aj-space-2) var(--aj-space-4);
    }
    .aj-partner img {
        inline-size: min(100%, 132px);
    }
    .aj-partner:nth-child(3n + 1)::before {
        display: block;
    }
    .aj-partner:nth-child(2n + 1)::before {
        display: none;
    }
}

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

/*
 * Up to 720px: a phone, and a foldable folded or open. The iPad mini (744)
 * and everything wider keep the layouts above.
 */
@media (max-width: 720px) {

    /* ---- hero: the moving mark stands centred above the words, larger */
    .aj-home-hero__inner {
        --aj-hero-mark: clamp(7.25rem, 30vw, 8.5rem);
    }
    .aj-home-hero__emblem {
        justify-self: center;
    }

    /* ---- management's word: a smaller portrait; the heading and its
       quotation mark step in from the edge, and the sign-off closes the
       letter on the far side, as a signature does */
    .aj-home-message__portrait {
        max-inline-size: 14rem;
    }
    .aj-home-message__quote {
        inset-inline-start: 0.25rem;
    }
    .aj-home-message__head {
        padding-inline-start: var(--aj-space-5);
    }
    .aj-home-message__author {
        align-items: flex-end;
        text-align: end;
    }

    /* ---- featured project: film, card, words, mark and button on one
       screen. The description shows its first four lines here; the whole
       of it is on the project's own page, one tap away. */
    .aj-home-featured__media {
        min-block-size: clamp(190px, 50vw, 300px);
    }
    .aj-home-featured__panel {
        margin-block-start: -2.5rem;
        padding: var(--aj-space-5);
        gap: var(--aj-space-3);
    }
    .aj-home-featured__bar {
        inset-block-end: 2.5rem;
    }
    .aj-home-featured__title {
        font-size: clamp(1.625rem, 1.2rem + 2vw, 2rem);
    }
    .aj-home-featured__lead {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        display: -webkit-box;
        line-height: 1.85;
        line-clamp: 4;
        overflow: hidden;
    }
    .aj-home-featured__footer {
        align-items: center;
        flex-direction: row;
        gap: var(--aj-space-4);
        padding-block-start: var(--aj-space-4);
    }
    .aj-home-featured__mark {
        align-self: center;
        inline-size: 96px;
    }
    /* side by side where they fit; on the narrowest screen the button
       takes its own row rather than pushing the card past the edge */
    .aj-home-featured__footer {
        flex-wrap: wrap;
    }
    .aj-home-featured__cta {
        flex: 1 1 9.5rem;
        min-inline-size: 0;
    }

    /* ---- auctions: both gateways on one screen, each centred on its mark */
    .aj-home-auctions .aj-home-auctions__grid {
        gap: var(--aj-space-4);
    }
    .aj-home-auctions .aj-auction-card__visual {
        min-block-size: 112px;
        padding: var(--aj-space-4);
    }
    .aj-home-auctions .aj-auction-card__logo {
        block-size: 64px;
    }
    .aj-home-auctions .aj-auction-card__body {
        align-items: center;
        gap: var(--aj-space-2);
        padding: var(--aj-space-4) var(--aj-space-5) var(--aj-space-5);
        text-align: center;
    }
    .aj-home-auctions .aj-auction-card__title {
        font-size: var(--aj-fs-h3);
    }
    .aj-home-auctions .aj-auction-card__text {
        font-size: var(--aj-fs-sm);
    }
    .aj-home-auctions .aj-auction-card__meta {
        justify-content: center;
        padding-block-start: 0;
    }
    .aj-home-auctions .aj-auction-card__footer {
        margin-block-start: var(--aj-space-2);
    }
    .aj-home-auctions .aj-auction-card__footer .aj-btn {
        inline-size: auto;
        min-block-size: 44px;
        padding-inline: var(--aj-space-6);
    }
}

@media (max-width: 720px) {
    /* the words take the whole frame, so the centred mark sits on the
       screen's centre line on a wider foldable too, not on the column's */
    .aj-home-hero__inner {
        flex: 1 1 auto;
        inline-size: 100%;
        max-inline-size: none;
    }

    /* the auctions' own heading sits closer to its cards */
    .aj-home-auctions .aj-section-heading {
        margin-block-end: var(--aj-space-5);
    }
    .aj-home-auctions .aj-auction-card__visual {
        min-block-size: 96px;
        padding: var(--aj-space-3);
    }
    .aj-home-auctions .aj-auction-card__logo {
        block-size: 56px;
    }
    .aj-home-auctions .aj-auction-card__body {
        padding: var(--aj-space-3) var(--aj-space-4) var(--aj-space-4);
    }
}

/* an open foldable has the width for the two gateways side by side */
@media (min-width: 560px) and (max-width: 720px) {
    .aj-home-auctions .aj-home-auctions__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* a short phone (an iPhone SE, a phone on its side): a lower film and three
   lines, so the featured project still fits one screen */
@media (max-width: 720px) and (max-height: 700px) {
    .aj-home-featured__media {
        min-block-size: 160px;
    }
    .aj-home-featured__lead {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}