/* =============================================================================
   Aamal Aljoud — Regular project page (D7 / B1)
   -----------------------------------------------------------------------------
   Composition follows the Eshbilia premium prototype; every colour, type step,
   radius, shadow and easing comes from the D1 tokens, so the page reads as the
   homepage's own rather than as the prototype's.

   Where the two disagree the site identity wins: light throughout, one restrained
   accent, hairline borders, near-invisible elevation.

   Scope: loaded by /project-details/{id} 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;
    }
}

/* ============================================================== 1. SHARED = */

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

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

.aj-pj-eyebrow--inverse {
    color: rgba(255, 255, 255, 0.86);
}

.aj-pj-eyebrow--inverse::after {
    background-color: rgba(255, 255, 255, 0.4);
}

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

.aj-pj-lead {
    margin: 0 0 var(--aj-space-4);
    max-inline-size: 72ch;
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-relaxed);
    color: var(--aj-text-secondary);
}

.aj-pj-link {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    flex: 0 0 auto;
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent);
    text-decoration: none;
    transition: color var(--aj-duration) var(--aj-ease);
}

.aj-pj-link:hover,
.aj-pj-link:focus-visible {
    color: var(--aj-accent-active);
}

/* stored rich text: only the tags the dashboard editor produces */
.aj-pj-prose {
    max-inline-size: 68ch;
    font-size: var(--aj-fs-body);
    line-height: var(--aj-lh-relaxed);
    color: var(--aj-text-secondary);
}

.aj-pj-prose > :first-child { margin-block-start: 0; }
.aj-pj-prose > :last-child { margin-block-end: 0; }
.aj-pj-prose p { margin-block: 0 var(--aj-space-4); }

.aj-pj-prose ul,
.aj-pj-prose ol {
    margin-block: 0 var(--aj-space-4);
    padding-inline-start: var(--aj-space-5);
}

.aj-pj-prose li::marker { color: var(--aj-accent); }
.aj-pj-prose a { color: var(--aj-accent); }

.aj-pj-prose img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--aj-radius-md);
}

/* ================================================================ 2. HERO = */

/*
 * Image led and anchored low on the reading edge, as the prototype sets it —
 * but the copy sits on a gradient rather than a dark slab, so the page opens in
 * the same light register as the rest of the site.
 */
.aj-pj-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: clamp(340px, 26vw + 180px, 480px);
    padding-block: var(--aj-space-12) var(--aj-space-16);
    background-color: var(--aj-charcoal);
    overflow: hidden;
    isolation: isolate;
}

.aj-pj-hero--plain {
    background-color: var(--aj-surface-muted);
    min-block-size: auto;
    padding-block: var(--aj-space-16) var(--aj-space-12);
}

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

.aj-pj-hero__media img,
.aj-pj-hero__media video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * Lighter than a slab: the gradient is strong enough to hold white type on the
 * reading edge and then gets out of the way, so most of the photograph is seen
 * rather than dimmed. The site is light, and the hero should not read as a dark
 * section bolted onto it.
 */
.aj-pj-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to left,
            rgba(32, 36, 43, 0.74) 0%,
            rgba(32, 36, 43, 0.42) 42%,
            rgba(32, 36, 43, 0.06) 78%,
            rgba(32, 36, 43, 0) 100%
        ),
        linear-gradient(to top, rgba(32, 36, 43, 0.42) 0%, transparent 42%);
}

[dir="ltr"] .aj-pj-hero__scrim {
    background:
        linear-gradient(
            to right,
            rgba(32, 36, 43, 0.74) 0%,
            rgba(32, 36, 43, 0.42) 42%,
            rgba(32, 36, 43, 0.06) 78%,
            rgba(32, 36, 43, 0) 100%
        ),
        linear-gradient(to top, rgba(32, 36, 43, 0.42) 0%, transparent 42%);
}

/*
 * The type keeps its contrast from its own shadow rather than from a heavier
 * wash over the picture.
 */
.aj-pj-hero__title,
.aj-pj-hero__lead,
.aj-pj-kicker {
    text-shadow: 0 1px 12px rgba(32, 36, 43, 0.45);
}

.aj-pj-hero--plain .aj-pj-hero__title,
.aj-pj-hero--plain .aj-pj-hero__lead,
.aj-pj-hero--plain .aj-pj-kicker {
    text-shadow: none;
}

/*
 * The supplied artwork, painted as a stencil so its proportions stay its own
 * and only the colour is ours. It sits on the far edge, away from the type.
 */
.aj-pj-hero__motif {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: clamp(160px, 22vw, 320px);
    /* white unless the project has a colour of its own */
    background-color: var(--aj-pj-motif-color, #fff);
    opacity: 0.08;
    -webkit-mask-image: var(--aj-motif),
        linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
    mask-image: var(--aj-motif),
        linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.35) 60%, 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: 300px auto, 100% 100%;
    mask-size: 300px auto, 100% 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    pointer-events: none;
    z-index: -1;
}

/* on the plain hero there is no photograph behind it: the project's own colour */
.aj-pj-hero--plain .aj-pj-hero__motif {
    background-color: var(--aj-pj-motif-plain-color, #fff);
}

[dir="ltr"] .aj-pj-hero__motif {
    -webkit-mask-image: var(--aj-motif),
        linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
    mask-image: var(--aj-motif),
        linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.35) 60%, 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-pj-hero__motif { display: none; }
}

.aj-pj-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-3);
}

.aj-pj-hero__crumb { margin-block-end: var(--aj-space-2); }

.aj-pj-hero__logo {
    display: block;
    block-size: clamp(48px, 5vw, 72px);
    inline-size: auto;
    margin-block-end: var(--aj-space-2);
}

/* the small locality line above the name, with the accent tick the prototype uses */
.aj-pj-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-sm);
    color: rgba(255, 255, 255, 0.82);
}

.aj-pj-kicker i {
    inline-size: 18px;
    block-size: 2px;
    background-color: var(--aj-accent);
    border-radius: var(--aj-radius-pill);
}

.aj-pj-hero--plain .aj-pj-kicker { color: var(--aj-text-secondary); }

.aj-pj-hero__title {
    margin: 0;
    font-size: var(--aj-fs-display);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    color: var(--aj-text-inverse);
}

.aj-pj-hero--plain .aj-pj-hero__title { color: var(--aj-text); }

.aj-pj-hero__lead {
    margin: 0;
    max-inline-size: 54ch;
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-snug);
    color: rgba(255, 255, 255, 0.86);
}

.aj-pj-hero--plain .aj-pj-hero__lead { color: var(--aj-text-secondary); }

.aj-pj-hero__actions { margin-block-start: var(--aj-space-3); }

/* the project state, pinned to the far corner of the frame */
.aj-pj-hero__badge {
    position: absolute;
    inset-block-start: var(--aj-space-8);
    inset-inline-end: var(--aj-space-8);
    padding: var(--aj-space-2) var(--aj-space-4);
    border-radius: var(--aj-radius-pill);
    background-color: rgba(32, 36, 43, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(6px);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-text-inverse);
}

.aj-pj-hero--plain .aj-pj-hero__badge {
    background-color: var(--aj-accent-soft);
    border-color: var(--aj-accent-border);
    color: var(--aj-accent);
    backdrop-filter: none;
}

/* ============================================================ 3. SNAPSHOT = */

/*
 * The fact bar rides up over the seam between the hero and the page, which is
 * what makes it read as part of the opening rather than as a first section.
 */
.aj-pj-snapshot-wrap {
    position: relative;
    z-index: 2;
    margin-block-start: calc(-1 * var(--aj-space-10));
    margin-block-end: var(--aj-space-4);
}

.aj-pj-snapshot {
    display: flex;
    flex-wrap: wrap;
    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-pj-stat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aj-space-3);
    flex: 1 1 0;
    min-inline-size: 150px;
    /* compact: the strip is a fact line, not a section of its own */
    padding: var(--aj-space-4) var(--aj-space-4);
}

/* faded hairlines between the cells, never at either end */
.aj-pj-stat + .aj-pj-stat::before {
    content: "";
    position: absolute;
    inset-block: 22%;
    inset-inline-start: 0;
    inline-size: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--aj-divider) 25%,
        var(--aj-divider) 75%,
        transparent
    );
}

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

.aj-pj-stat__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.aj-pj-stat__label {
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

.aj-pj-stat__value {
    font-size: var(--aj-fs-body-lg);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
    /* latin figures keep their own run inside the RTL cell */
    unicode-bidi: isolate;
}

/* =============================================================== 4. ABOUT = */

.aj-pj-about__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: clamp(var(--aj-space-8), 4vw, var(--aj-space-16));
}

/*
 * With no picture the copy takes the full measure: the prose keeps a readable
 * line length, but the tiles below it use the whole width rather than sitting
 * in a half-empty column.
 */
.aj-pj-about__grid--solo {
    grid-template-columns: minmax(0, 1fr);
}

.aj-pj-about__grid--solo .aj-pj-about__body { inline-size: 100%; }

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

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

.aj-pj-about__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ---- premium feature tiles ---- */

/*
 * The number of tiles is a content decision, so the layout follows it rather
 * than leaving a three-column grid with one filled cell. The count is stamped
 * on the element by the view.
 */
.aj-pj-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--aj-space-4);
    inline-size: 100%;
    margin-block-start: var(--aj-space-8);
}

.aj-pj-features[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.aj-pj-features[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aj-pj-features[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aj-pj-features[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* a single tile is a wide statement, not a stretched card */
.aj-pj-features[data-count="1"] .aj-pj-feature {
    flex-direction: row;
    align-items: center;
    gap: var(--aj-space-5);
    padding-block: var(--aj-space-8);
}

.aj-pj-features[data-count="1"] .aj-pj-feature__icon {
    inline-size: 60px;
    block-size: 60px;
}

/*
 * Not a card: a tile with a hairline, an accent rule that grows on hover, and
 * the ordinal set as a watermark behind the copy.
 */
.aj-pj-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-3);
    padding: var(--aj-space-6) var(--aj-space-5) var(--aj-space-6);
    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);
}

/* the accent rule on the reading edge */
.aj-pj-feature::before {
    content: "";
    position: absolute;
    inset-block-start: var(--aj-space-6);
    inset-inline-end: 0;
    inline-size: 2px;
    block-size: 28px;
    background-color: var(--aj-accent);
    transition: block-size var(--aj-duration) var(--aj-ease);
}

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

.aj-pj-feature:hover::before { block-size: 52px; }

@media (prefers-reduced-motion: reduce) {
    .aj-pj-feature::before,
    .aj-pj-feature:hover::before { transition: none; block-size: 28px; }
}

.aj-pj-feature__ghost {
    position: absolute;
    inset-block-start: var(--aj-space-3);
    inset-inline-start: var(--aj-space-4);
    font-size: 3rem;
    font-weight: var(--aj-fw-bold);
    line-height: 1;
    color: var(--aj-accent);
    opacity: 0.08;
    direction: ltr;
    unicode-bidi: isolate;
    pointer-events: none;
}

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

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

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

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

/* ================================================================ 5. PLAN = */

.aj-pj-plan {
    background-color: var(--aj-surface-muted);
}

.aj-pj-plan__shell {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr;
    align-items: start;
    gap: var(--aj-space-6);
    margin-block-start: var(--aj-space-6);
}

/* facts with no drawing: a plain rank of metrics, and a shorter section */
.aj-pj-plan__shell--facts-only {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * A drawing with no facts used to sit small inside a tall grey band. On its own
 * it takes the full measure and a wider crop, so it reads as the subject of the
 * section rather than as something dropped into it.
 */
.aj-pj-plan__shell--image-only {
    grid-template-columns: minmax(0, 1fr);
}

.aj-pj-plan__shell--image-only .aj-pj-plan__main img {
    aspect-ratio: 5 / 2;
}

/* nothing but a drawing means nothing to pad around: pull the band in */
.aj-pj-plan:has(.aj-pj-plan__shell--image-only) {
    padding-block: calc(var(--aj-section-y) * 0.72);
}

.aj-pj-plan__main {
    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);
    background-color: var(--aj-surface);
}

.aj-pj-plan__main img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* the caption bar sits inside the frame, over the base of the picture */
.aj-pj-plan__caption {
    position: absolute;
    inset-inline: var(--aj-space-4);
    inset-block-end: var(--aj-space-4);
    display: flex;
    align-items: baseline;
    gap: var(--aj-space-3);
    padding: var(--aj-space-3) var(--aj-space-5);
    border-radius: var(--aj-radius-md);
    background-color: rgba(32, 36, 43, 0.72);
    backdrop-filter: blur(6px);
    color: var(--aj-text-inverse);
}

.aj-pj-plan__caption-label {
    font-size: var(--aj-fs-caption);
    color: rgba(255, 255, 255, 0.78);
}

.aj-pj-plan__caption-value {
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
    unicode-bidi: isolate;
}

.aj-pj-plan__side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--aj-space-4);
}

.aj-pj-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-2);
    padding: var(--aj-space-5);
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-lg);
}

.aj-pj-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--aj-radius-sm);
    background-color: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-pj-metric__label {
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

.aj-pj-metric__value {
    font-size: var(--aj-fs-h3);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    color: var(--aj-text);
    unicode-bidi: isolate;
}

.aj-pj-metric__unit {
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-text-secondary);
}

/* ============================================================ 6. TIMELINE = */

/*
 * Editorial rather than diagrammatic: the picture carries each stage, the date
 * and ordinal share a thin meta line, and one hairline runs behind the row to
 * imply sequence without drawing a rail.
 */
.aj-pj-stages {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--aj-space-5);
    margin: var(--aj-space-8) 0 0;
    padding: 0;
    list-style: none;
}

/*
 * Two stages spread across a full row read as a section still waiting for its
 * other three. The shape follows the count: one becomes a single wide card,
 * two a strong pair, three to five the staggered rank, and six or more a rail.
 */
.aj-pj-stages[data-count="1"],
.aj-pj-stages[data-count="2"] {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--aj-stage-cols, 2), minmax(0, 1fr));
}

.aj-pj-stages[data-count="1"] { --aj-stage-cols: 1; }
.aj-pj-stages[data-count="2"] { --aj-stage-cols: 2; }

/* neither of those staggers — a drop with nothing beside it is just a gap */
.aj-pj-stages[data-count="1"] .aj-pj-stage,
.aj-pj-stages[data-count="2"] .aj-pj-stage {
    margin-block-start: 0;
}

/* one stage lies down and uses the width instead of towering */
.aj-pj-stages[data-count="1"] .aj-pj-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--aj-space-2) var(--aj-space-8);
}

.aj-pj-stages[data-count="1"] .aj-pj-stage__image { grid-row: 1 / span 3; }
.aj-pj-stages[data-count="1"] .aj-pj-stage__image img { aspect-ratio: 3 / 2; }
.aj-pj-stages[data-count="1"] .aj-pj-stage__title { font-size: var(--aj-fs-h3); }

/* a pair gets a taller, more deliberate crop */
.aj-pj-stages[data-count="2"] .aj-pj-stage__image img { aspect-ratio: 3 / 2; }

/* six or more stop dividing the row and become a rail */
.aj-pj-stages[data-count="6"] {
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-block-end: var(--aj-space-3);
}

.aj-pj-stages[data-count="6"] .aj-pj-stage { scroll-snap-align: start; }

.aj-pj-stage {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-3);
    min-inline-size: 0;
}

/* every second stage drops, which is what keeps a long row from reading flat */
.aj-pj-stage:nth-child(even) {
    margin-block-start: var(--aj-space-10);
}

.aj-pj-stage__image {
    border-radius: var(--aj-radius-lg);
    overflow: hidden;
    background-color: var(--aj-surface-muted);
    box-shadow: 0 0 0 1px var(--aj-divider);
}

.aj-pj-stage__image img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--aj-duration-slow) var(--aj-ease);
}

.aj-pj-stage:hover .aj-pj-stage__image img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .aj-pj-stage__image img,
    .aj-pj-stage:hover .aj-pj-stage__image img { transition: none; transform: none; }
}

.aj-pj-stage__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-3);
    padding-block-end: var(--aj-space-2);
    border-block-end: 1px solid var(--aj-border);
}

.aj-pj-stage__date {
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-accent);
    unicode-bidi: isolate;
}

.aj-pj-stage__index {
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text-muted);
    opacity: 0.6;
    unicode-bidi: isolate;
}

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

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

/* ============================================================= 7. GALLERY = */

.aj-pj-gallery {
    background-color: var(--aj-surface-muted);
    overflow: hidden;
}

.aj-pj-scroll-block + .aj-pj-scroll-block {
    margin-block-start: var(--aj-space-10);
}

.aj-pj-scroll-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--aj-space-4);
    margin-block-end: var(--aj-space-4);
}

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

.aj-pj-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

/*
 * The rail. It starts at the container's reading edge but runs to the very edge
 * of the viewport, so the next picture is visibly cut off — that overhang is
 * what tells the reader it scrolls. Snapping keeps it tidy on release.
 */
.aj-pj-scroll {
    display: flex;
    gap: var(--aj-space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--aj-container-pad);
    padding-inline: max(var(--aj-container-pad), calc((100vw - var(--aj-container-max)) / 2));
    padding-block-end: var(--aj-space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--aj-border-strong) transparent;
}

.aj-pj-scroll::-webkit-scrollbar { block-size: 6px; }
.aj-pj-scroll::-webkit-scrollbar-track { background: transparent; }

.aj-pj-scroll::-webkit-scrollbar-thumb {
    background-color: var(--aj-border-strong);
    border-radius: var(--aj-radius-pill);
}

.aj-pj-scroll:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 4px;
}

.aj-pj-scroll.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    /* a drag must not also click through to whatever is under the pointer */
    user-select: none;
}

/*
 * One picture is not a rail: it stays inside the container and takes a wide
 * crop rather than a card's worth of a scroller that cannot scroll.
 */
.aj-pj-scroll--single {
    display: block;
    overflow: visible;
    padding-inline: max(var(--aj-container-pad), calc((100vw - var(--aj-container-max)) / 2));
}

.aj-pj-scroll--single .aj-pj-scroll__item {
    inline-size: 100%;
}

.aj-pj-scroll--single .aj-pj-scroll__item img {
    aspect-ratio: 21 / 9;
    /* wide, but capped: one picture should not own half the scroll */
    max-block-size: 380px;
}

.aj-pj-scroll__item {
    position: relative;
    flex: 0 0 auto;
    inline-size: clamp(260px, 34vw, 460px);
    margin: 0;
    scroll-snap-align: start;
    border-radius: var(--aj-radius-lg);
    overflow: hidden;
    background-color: var(--aj-surface);
    box-shadow: 0 0 0 1px var(--aj-divider);
}

.aj-pj-scroll__item img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* a drag on the rail must not start a native image drag */
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.aj-pj-scroll__item figcaption {
    position: absolute;
    inset-block-end: var(--aj-space-3);
    inset-inline-end: var(--aj-space-3);
    padding: 2px var(--aj-space-3);
    border-radius: var(--aj-radius-pill);
    background-color: rgba(32, 36, 43, 0.62);
    backdrop-filter: blur(4px);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-text-inverse);
    direction: ltr;
    unicode-bidi: isolate;
}

/* ============================================================ 8. LOCATION = */

.aj-pj-location__card {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;
    border-radius: var(--aj-radius-xl);
    overflow: hidden;
    background-color: var(--aj-surface);
    box-shadow: 0 0 0 1px var(--aj-divider), var(--aj-shadow-md);
}

.aj-pj-location__card--no-map {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * A map with only a tag and a button beside it: stacking them puts the map at
 * full width and turns the info into a single compact bar, instead of leaving a
 * tall column of white next to the map.
 */
.aj-pj-location__card--compact {
    grid-template-columns: minmax(0, 1fr);
}

.aj-pj-location__card--compact .aj-pj-location__map {
    min-block-size: 0;
    aspect-ratio: 32 / 9;
    max-block-size: 400px;
}

.aj-pj-location__card--compact .aj-pj-location__info {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--aj-space-5) clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

.aj-pj-location__map {
    position: relative;
    min-block-size: 360px;
    background-color: var(--aj-surface-muted);
}

.aj-pj-location__map iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.aj-pj-location__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-4);
    padding: clamp(var(--aj-space-6), 2.6vw, var(--aj-space-10));
}

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

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

.aj-pj-points {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-4);
    inline-size: 100%;
    margin: 0;
    padding: var(--aj-space-4) 0 0;
    border-block-start: 1px solid var(--aj-divider);
    list-style: none;
}

.aj-pj-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--aj-space-3);
}

.aj-pj-points__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--aj-radius-pill);
    background-color: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-pj-points__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.aj-pj-points__body b {
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
}

.aj-pj-points__body small {
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

/* ============================================================ 9. BENEFITS = */

.aj-pj-benefits__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-6);
    margin-block-end: var(--aj-space-8);
}

.aj-pj-benefits__head .aj-pj-title { margin-block-end: 0; }

.aj-pj-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--aj-space-5);
}

.aj-pj-benefit {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-4);
    padding: var(--aj-space-5);
    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-pj-benefit:hover {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-sm);
}

.aj-pj-benefit__top {
    display: flex;
    align-items: center;
    gap: var(--aj-space-4);
}

/*
 * The logo is shown whole on its own plate: these marks arrive at every ratio,
 * so the box is fixed and the artwork is fitted inside it rather than cropped.
 */
.aj-pj-benefit__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 76px;
    block-size: 56px;
    padding: var(--aj-space-2);
    border-radius: var(--aj-radius-md);
    background-color: var(--aj-surface-muted);
    color: var(--aj-text-muted);
}

.aj-pj-benefit__logo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.aj-pj-benefit__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

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

.aj-pj-benefit__note {
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

/* one row per discount: the item on the reading edge, the figure opposite */
.aj-pj-offers {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-block-start: var(--aj-space-2);
    border-block-start: 1px solid var(--aj-divider);
}

.aj-pj-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-4);
    padding-block: var(--aj-space-3);
}

.aj-pj-offer + .aj-pj-offer {
    border-block-start: 1px solid var(--aj-divider);
}

.aj-pj-offer__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: var(--aj-fs-sm);
    color: var(--aj-text);
}

.aj-pj-offer__item small {
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

/*
 * Prominent but quiet: the accent on a soft plate, never a warning badge.
 */
.aj-pj-offer__value {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--aj-space-1) var(--aj-space-3);
    border-radius: var(--aj-radius-sm);
    background-color: var(--aj-accent-soft);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-accent);
    unicode-bidi: isolate;
}

/* ============================================================ 10. SIMILAR = */

.aj-pj-similar {
    background-color: var(--aj-surface-muted);
}

.aj-pj-similar__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-6);
    margin-block-end: var(--aj-space-8);
}

.aj-pj-similar__head .aj-pj-title { margin-block-end: 0; }

.aj-pj-similar__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--aj-space-6);
}

.aj-pj-similar__grid > .aj-pj-card {
    flex: 1 1 300px;
    max-inline-size: 420px;
}

/*
 * A single related project used to sit as one small card in a wide empty row.
 * On its own it turns horizontal and takes the full measure — picture on one
 * side, name and place on the other — so the section looks intended.
 */
.aj-pj-similar__grid[data-count="1"] > .aj-pj-card {
    flex: 1 1 100%;
    max-inline-size: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
}

.aj-pj-similar__grid[data-count="1"] .aj-pj-card__media img {
    block-size: 100%;
    aspect-ratio: auto;
    min-block-size: 240px;
}

.aj-pj-similar__grid[data-count="1"] .aj-pj-card__body {
    padding: clamp(var(--aj-space-6), 3vw, var(--aj-space-10));
}

.aj-pj-similar__grid[data-count="1"] .aj-pj-card__title {
    font-size: var(--aj-fs-h3);
}

.aj-pj-card {
    position: relative;
    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),
        transform var(--aj-duration) var(--aj-ease);
}

.aj-pj-card:hover,
.aj-pj-card:focus-within {
    border-color: var(--aj-accent-border);
    box-shadow: var(--aj-shadow-md);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .aj-pj-card:hover,
    .aj-pj-card:focus-within { transform: none; }
}

.aj-pj-card__media { background-color: var(--aj-surface-muted); }

.aj-pj-card__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.aj-pj-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-4);
    padding: var(--aj-space-5);
}

.aj-pj-card__copy {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-1);
    min-inline-size: 0;
}

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

.aj-pj-card__title a { color: inherit; text-decoration: none; }

/* the whole card is the hit area, driven from the one real link inside it */
.aj-pj-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.aj-pj-card__place {
    margin: 0;
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

.aj-pj-card__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 34px;
    block-size: 34px;
    border-radius: var(--aj-radius-pill);
    border: 1px solid var(--aj-border);
    color: var(--aj-text-secondary);
    transition: var(--aj-transition);
}

.aj-pj-card:hover .aj-pj-card__go,
.aj-pj-card:focus-within .aj-pj-card__go {
    border-color: var(--aj-accent);
    background-color: var(--aj-accent);
    color: var(--aj-text-inverse);
}

/* ================================================================ 11. CTA = */

.aj-pj-cta {
    position: relative;
    padding-block: clamp(var(--aj-space-12), 5vw, var(--aj-space-20));
    background-color: var(--aj-charcoal);
    overflow: hidden;
    isolation: isolate;
}

.aj-pj-cta__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.aj-pj-cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to left,
        rgba(32, 36, 43, 0.94) 0%,
        rgba(32, 36, 43, 0.82) 55%,
        rgba(32, 36, 43, 0.62) 100%
    );
}

[dir="ltr"] .aj-pj-cta__media::after {
    background: linear-gradient(
        to right,
        rgba(32, 36, 43, 0.94) 0%,
        rgba(32, 36, 43, 0.82) 55%,
        rgba(32, 36, 43, 0.62) 100%
    );
}

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

.aj-pj-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-8);
}

.aj-pj-cta__copy {
    display: flex;
    flex-direction: column;
}

.aj-pj-cta__title {
    margin: 0 0 var(--aj-space-3);
    font-size: var(--aj-fs-h2);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    color: var(--aj-text-inverse);
}

.aj-pj-cta__lead {
    margin: 0;
    max-inline-size: 56ch;
    font-size: var(--aj-fs-body);
    line-height: var(--aj-lh-normal);
    color: rgba(255, 255, 255, 0.82);
}

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

@media (max-width: 1024px) {
    .aj-pj-about__grid,
    .aj-pj-plan__shell,
    .aj-pj-location__card {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * The count-driven shapes above are desktop shapes. Below this width the
     * available room decides instead, or three tiles would still be trying to
     * share one row on a phone.
     */
    .aj-pj-features[data-count="3"],
    .aj-pj-features[data-count="5"],
    .aj-pj-features[data-count="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aj-pj-location__map { min-block-size: 300px; }

    /*
     * The timeline becomes a column: four stages squeezed into a tablet width
     * turn into unreadable slivers, so each takes a full line with its picture
     * beside the copy instead.
     */
    .aj-pj-stages {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: var(--aj-space-6);
    }

    .aj-pj-stage {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
        gap: var(--aj-space-2) var(--aj-space-5);
    }

    .aj-pj-stage:nth-child(even) { margin-block-start: 0; }

    .aj-pj-stage__image { grid-row: 1 / span 3; }
    .aj-pj-stage__image img { aspect-ratio: 3 / 2; }
}

@media (max-width: 768px) {
    .aj-pj-hero {
        min-block-size: clamp(300px, 46vw + 130px, 400px);
        padding-block: var(--aj-space-12);
    }

    .aj-pj-hero__badge {
        inset-block-start: var(--aj-space-5);
        inset-inline-end: var(--aj-space-5);
    }

    .aj-pj-snapshot-wrap { margin-block-start: calc(-1 * var(--aj-space-6)); }

    .aj-pj-benefits__head,
    .aj-pj-similar__head,
    .aj-pj-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .aj-pj-scroll__item { inline-size: clamp(240px, 62vw, 340px); }
}

@media (max-width: 640px) {
    /* one tile to a line: two columns of a phone width are unreadable */
    .aj-pj-features,
    .aj-pj-features[data-count="2"],
    .aj-pj-features[data-count="3"],
    .aj-pj-features[data-count="4"],
    .aj-pj-features[data-count="5"],
    .aj-pj-features[data-count="6"] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* a lone tile stops lying down once there is no width to lie down in */
    .aj-pj-features[data-count="1"] .aj-pj-feature {
        flex-direction: column;
        align-items: flex-start;
    }

    /* the same for the stage pair and the single related project */
    .aj-pj-stages[data-count="2"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-pj-similar__grid[data-count="1"] > .aj-pj-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-pj-similar__grid[data-count="1"] .aj-pj-card__media img {
        min-block-size: 0;
        aspect-ratio: 16 / 10;
    }

    /* the fact bar becomes a two-up plate rather than four slivers in a row */
    .aj-pj-stat {
        flex: 1 1 calc(50% - 1px);
        min-inline-size: 0;
        padding: var(--aj-space-4);
    }

    .aj-pj-stat__icon { inline-size: 36px; block-size: 36px; }
    .aj-pj-stat__value { font-size: var(--aj-fs-body); }

    .aj-pj-stage,
    .aj-pj-stages[data-count="1"] .aj-pj-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-pj-stage__image,
    .aj-pj-stages[data-count="1"] .aj-pj-stage__image { grid-row: auto; }
    .aj-pj-stage__image img { aspect-ratio: 16 / 10; }

    .aj-pj-similar__grid > .aj-pj-card {
        flex-basis: 100%;
        max-inline-size: none;
    }

    .aj-pj-feature__ghost { font-size: 2.5rem; }
}

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

/*
 * Up to 720px — a phone, and a foldable folded or open; the iPad mini and
 * wider are untouched.
 *
 * The cover of a project is often its own lockup — the name drawn large on
 * a coloured ground — and on a narrow screen the page title landed right on
 * top of that artwork. Here the cover stands on its own as a band at the top,
 * whole, and the name, the place and the button follow beneath it on the
 * charcoal the hero already has. Buttons are centred, as elsewhere.
 */
@media (max-width: 720px) {
    .aj-pj-hero:not(.aj-pj-hero--plain) {
        justify-content: flex-start;
        min-block-size: 0;
        padding-block: 0 var(--aj-space-12);
    }
    .aj-pj-hero:not(.aj-pj-hero--plain) .aj-pj-hero__media {
        aspect-ratio: 16 / 10;
        inset: auto;
        margin-block-end: var(--aj-space-6);
        position: relative;
        z-index: 0;
    }
    .aj-pj-hero:not(.aj-pj-hero--plain) .aj-pj-hero__scrim {
        display: none;
    }
    .aj-pj-hero__actions {
        align-self: center;
    }

    .aj-pj-location__info > .aj-btn {
        align-self: center;
    }

    /* the closing call: centred, on an even wash so the picture behind it
       cannot show its lettering through the words */
    .aj-pj-cta__media::after,
    [dir="ltr"] .aj-pj-cta__media::after {
        background: rgba(32, 36, 43, 0.9);
    }
    .aj-pj-cta__inner {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .aj-pj-cta__copy {
        align-items: center;
    }
}