/* ==========================================================================
   success-stories — page-specific layout
   Built against design-output/success-stories/full-page.png and the section
   captures. Header, footer, buttons, pills, CTA banner, FAQ, spine and
   dividers are shared and live in global.css.

   The marquee and the story cards are the same components the home page
   draws; they are restated here because each page loads global.css plus one
   stylesheet of its own. If a third page needs them they should move up into
   global.css and come out of both page files.
   ========================================================================== */

/* ── Section 1 — Page head ──────────────────────────────────────────────── */

/* 800px of artwork with the title block centred on it, the bar floating over
   its top edge. Same type rhythm as the home hero — only the height and the
   treatment of the picture differ. */
.stories-hero {
    position: relative;
    isolation: isolate;          /* keeps the image behind this section only */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 800px;
    /* Symmetric, so the block stays on the centre line of the picture the way
       the reference sets it. The bar floats over the top of this padding. */
    padding: 120px var(--gutter);
    color: var(--text-inverse);
    text-align: center;
    /* Shows while the photograph decodes, and behind it if it fails to load */
    background: var(--c-ink-warm);
}

/* The source artwork for this head is a near-black dune scene, which is not
   among the exported assets. The hero photograph is carried over and pulled
   down to the same olive-black key: swap the src and drop the filter when the
   real picture lands. */
.stories-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.3) brightness(0.42) contrast(1.05);
}

/* Warm scrim over the cool photograph: without it the picture stays blue-grey
   rather than the olive-black of the reference, and the type loses contrast. */
.stories-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(2, 0, 0, 0.62) 0%,
        rgba(38, 39, 27, 0.50) 45%,
        rgba(2, 0, 0, 0.70) 100%
    );
}

.stories-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--r-lg);
    background: var(--c-ink-warm);
    font-size: var(--t-sm);
}

/* The B mark alone, from the brand pack's icon file — its own asset rather
   than the left end of the wordmark cropped by the box width. The height sets
   the size; the width follows the artwork's 0.8306:1 ratio. Still a mask, so
   it takes currentColor. */
.stories-hero__mark {
    flex: 0 0 auto;
    width: 10px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("../assets/images/logo-icon.png") no-repeat left center / contain;
            mask: url("../assets/images/logo-icon.png") no-repeat left center / contain;
}

/* Held to the width that breaks it after "use", as in the reference, rather
   than by a hard <br>. */
.stories-hero__title {
    max-width: 790px;
    margin: var(--s-5) auto 0;
    font-family: var(--font-serif);
    /* 64px at the 1440 design width */
    font-size: clamp(38px, 4.45vw, 64px);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
}

/* Likewise sized to break after "founders" */
.stories-hero__subtitle {
    max-width: 560px;
    margin: var(--s-4) auto 0;
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
}

.stories-hero__cta {
    margin-top: var(--s-6);
}

/* ── Section 2 — Client logo marquee ────────────────────────────────────── */

/* A 120px band of client logos that scrolls. The track holds the list twice
   so the loop has no seam; one pass of translate(-50%) returns it to the
   starting frame. The 80px gap and 40px logo height are the source values. */
.logo-strip {
    height: 120px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--c-bone-mid);
}

.logo-strip__track {
    display: flex;
    align-items: center;
    gap: var(--s-10);
    width: max-content;
    margin: 0;
    padding: 0 0 0 var(--s-10);
    list-style: none;
    animation: logo-scroll 45s linear infinite;
}

.logo-strip__item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Height is fixed and width follows each logo's own proportions. The mark
   is flattened to one near-black weight by the shared client-mark rule at
   the foot of global.css, with every other place a client logo appears. */
.logo-strip__item img {
    display: block;
    width: auto;
    height: 40px;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    /* Half the track is exactly one copy of the list plus one gap: the
       80px leading pad and the 80px seam gap cancel across the halves. */
    to   { transform: translateX(-50%); }
}

/* ── Section 3 — Stories ────────────────────────────────────────────────── */

/* Its own ground, and no bottom padding: the band's lower rule closes the
   section, with the next one opening 80px below it. */
.stories {
    padding-block-end: 0;
    background: var(--bg-primary);
}

/* Pill and heading left, the call out on the right sitting on the heading's
   last line. Both stay on the design column though the band below is
   page-wide. */
.stories__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-7);
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
}

/* min-width lets the column shrink past its longest word rather than pushing
   the call off the gutter on a narrow viewport. */
.stories__head-copy {
    min-width: 0;
}

.stories__title {
    max-width: 700px;   /* breaks after "teams", as in the reference */
    margin: var(--s-4) 0 var(--s-7);
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: var(--w-regular);
    line-height: 1.1;
}

.stories__more {
    flex: 0 0 auto;
    margin-block-end: var(--s-7);
}

/* Rules above and below run the width of the page. */
.stories__band {
    border-block: 1px solid var(--border-color);
}

/* Three equal cells on the design column, ruled down every edge: the two
   outer ones on the gutter and one between each pair. */
.stories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    border-inline: 1px solid var(--border-color);
}

.stories__cell + .stories__cell {
    border-left: 1px solid var(--border-color);
}

/* The card is an inset panel, 20px in from its cell on every side. */
.stories__cell {
    display: flex;
    padding: 20px;
}

.story-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 374px;
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--c-bone-mid);
}

/* align-self, because the card is a flex column: without it the logo is
   stretched to the card's width instead of keeping its own proportions. */
.story-card__logo {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 40px;
}

.story-card__quote {
    margin-block: 28px 0;
    font-size: var(--t-xl);
    line-height: 1.2;
}

/* Portrait and name on one line */
.story-card__by {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: 28px;
    font-size: var(--t-md);
}

.story-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* Pinned to the foot of the card and filling its width */
.story-card__cta {
    margin-top: auto;
    justify-content: center;
    padding-block: 10px;
    border-radius: var(--r-pill);
}

/* ── Section 4 — Spotlight ──────────────────────────────────────────────── */

/* Its own ground, so the page ground shows through nothing here. */
.spotlight {
    padding-block: var(--s-10);
    background: var(--bg-primary);
}

/* The two horizontals reach the page edges; the verticals stop on the
   gutter, and the rules between the three rows run between them. */
.spotlight__band {
    border-block: 1px solid var(--border-color);
}

.spotlight__inner {
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    border-inline: 1px solid var(--border-color);
}

/* Picture and panel are one rounded block split down the middle, inset 40px
   from the rules on every side. */
.spotlight__feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: var(--s-7);
}

.spotlight__portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-start-start-radius: var(--r-sm);
    border-end-start-radius: var(--r-sm);
}

/* The quote sits at the top of the panel and the credit at its foot, which
   is why the panel is a column rather than flowing text. */
.spotlight__panel {
    display: flex;
    flex-direction: column;
    min-height: 459px;   /* the picture's height at the design width */
    padding: var(--s-6) var(--s-7) var(--s-7);
    border-start-end-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);
    background: var(--c-bone-mid);
}

.spotlight__quote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--t-3xl);
    line-height: 1.4;
    color: var(--c-ink-soft);
}

.spotlight__caption {
    margin-top: auto;
    padding-top: var(--s-6);
}

.spotlight__logo {
    display: block;
    width: auto;
    height: 28px;
}

.spotlight__by {
    display: block;
    margin-top: var(--s-3);
    font-family: var(--font-serif);
    font-size: var(--t-xl);
    line-height: 1.2;
    color: var(--c-ink-soft);
}

/* Second row: the trust line, ruled off from the quote above it. */
.spotlight__trust {
    max-width: 640px;   /* breaks after "companies", as in the reference */
    padding: var(--s-6) var(--s-7) var(--s-7);
    border-top: 1px solid var(--border-color);
    font-family: var(--font-serif);
    font-size: var(--t-3xl);
    line-height: 1.25;
    color: var(--c-ink-soft);
}

/* Third row: client marks in ruled 160px cells, scrolling like the band
   under the hero. The row is clipped at the block's rules, so the cell at
   each end runs under them rather than stopping short. */
.spotlight__marks {
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

.mark-row {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: mark-scroll 60s linear infinite;
}

.mark-row__cell {
    display: grid;
    place-items: center;
    flex: 0 0 160px;
    height: 78px;
    border-right: 1px solid var(--border-subtle);
}

.mark-row__cell img {
    width: auto;
    height: 24px;
}

@keyframes mark-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Honour a reduced-motion preference: the logos still read, they just sit */
@media (prefers-reduced-motion: reduce) {
    .logo-strip__track,
    .mark-row {
        animation: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .stories-hero {
        min-height: 640px;
    }

    .stories__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Picture over panel: side by side, neither has room to set its type. */
    .spotlight__feature {
        grid-template-columns: 1fr;
        padding: var(--s-5);
    }

    .spotlight__portrait {
        max-height: 420px;
        border-radius: var(--r-sm) var(--r-sm) 0 0;
    }

    .spotlight__panel {
        min-height: 0;
        border-radius: 0 0 var(--r-sm) var(--r-sm);
        padding: var(--s-5);
    }

    .spotlight__trust {
        padding: var(--s-5);
    }
}

@media (max-width: 640px) {
    .stories-hero {
        min-height: 560px;
        padding: 110px var(--container-pad);
    }

    /* The call cannot sit beside a heading this narrow */
    .stories__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .stories__title {
        margin-block-end: var(--s-5);
    }

    .stories__grid {
        grid-template-columns: 1fr;
    }

    .stories__cell + .stories__cell {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

    .spotlight__quote,
    .spotlight__trust {
        font-size: var(--t-xl);
    }

    .spotlight__by {
        font-size: var(--t-md);
    }
}