/* Homepage: hero with real footage, trust strip (styled in intelligence.css), what we do (major industries over real footage), case
   studies, footer CTAs and a column footer. Few words, real work on screen. Loaded after responsive.css. */

/* Section spacing ------------------------------------------------------------- */

/* Every section after the hero: 120px above and below, on all screen sizes. The logo strip
   is lighter, so it gets 64px. */
:root {
    --section-pad: 120px;
}

main > .section,
main > .cta {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

main > .proof {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* Section headings ------------------------------------------------------------ */

/* Every homepage section heading uses the same type. The small h2 labels (trust strip,
   footer columns) keep their own styles. */
.outcomes-head h2,
.section .case-head h2,
.cta-split h2 {
    font-family: "Inter Tight", Inter, Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 500;
    line-height: 64px;
    letter-spacing: -2.88px;
    color: #1a191f;
}

/* The closing band is dark, so its heading stays white. */
.cta-split h2 {
    color: #fff;
}

/* Hero: original headline and buttons, with real footage in the framed panel ------------- */

.hero-frame {
    align-self: stretch;
    margin-top: clamp(56px, 4vw + 32px, 80px);
    padding: 8px 8px 0;
    border: 1px solid var(--color-accent);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(252, 252, 251, .08);
    box-shadow: 0 0 32px 4px rgba(26, 25, 31, .8);
}

.hero-reel {
    position: relative;
    /* The clip's own shape, so its on-screen readouts near the edges are never cropped. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    background: radial-gradient(120% 90% at 50% 40%, #14161a, #0b0c0f 70%);
}

.hero-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* What we do: outcomes band, plain list on the left, footage on the right ----------- */

.industries--outcomes {
    color: var(--color-ink);
    background: var(--color-paper);
}

.industries--outcomes .eyebrow {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
    font-family: var(--font-sans);
    letter-spacing: .08em;
}

/* Copy on the left, button on the right, lined up with the bottom of the copy. */
.outcomes-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-8);
}

.outcomes-copy {
    max-width: 900px;
}

.outcomes-head h2 {
    margin-bottom: var(--space-3);
}

.outcomes-head h2 span {
    display: block;
}

/* Section descriptions under a heading (after the hero): 18px, ink. */
.outcomes-lede {
    max-width: 640px;
    margin-bottom: 0;
    color: #1a191f;
    font-size: 18px;
    line-height: 28px;
}

.industry-switcher {
    display: grid;
    grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.industries--outcomes .industry-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--color-line);
    border-radius: 0;
    background: none;
}

.industries--outcomes .industry-tab {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 18px 8px;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    color: var(--color-muted);
    background: none;
    font: 400 clamp(18px, .4vw + 15px, 21px)/1.2 var(--font-sans);
    text-align: left;
    transition: color .25s ease;
}

.industries--outcomes .industry-tab:hover {
    color: var(--color-ink);
}

/* Lime fails contrast on light surfaces, so the selected item uses the deep green. */
.industries--outcomes .industry-tab[aria-selected="true"] {
    color: var(--color-accent-deep);
    background: none;
}

.industry-tab-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.industry-tab-name svg {
    flex: none;
    opacity: 0;
    transition: opacity .25s ease, transform .25s var(--ease-out);
}

.industry-tab[aria-selected="true"] .industry-tab-name svg {
    opacity: 1;
}

/* Only the chosen industry shows its one-liner, as on roboflow.com. */
.industry-tab-benefit {
    display: none;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 24px;
}

.industry-tab[aria-selected="true"] .industry-tab-benefit {
    display: block;
}

.industry-reels {
    position: sticky;
    top: 110px;
}

.industry-reel {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-ink);
    box-shadow: var(--shadow);
    scroll-margin-top: 120px;
}

.industry-reel:focus-visible {
    border-radius: var(--radius-md);
}

.industry-reel video,
.industry-reel-still {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A still gets a slow push-in so it sits comfortably beside the videos. */
.industry-reel-still {
    animation: reel-push 16s ease-in-out infinite alternate;
}

@keyframes reel-push {
    to {
        transform: scale(1.12);
    }
}

/* Case studies: wide slides in a scroll-snap carousel, after roboflow.com ----------- */

.work {
    background: var(--color-paper);
}

/* Pinned mode (set by case-carousel.js when the carousel fits on screen): the section is
   made taller by the track's overflow, the carousel sticks, and page scroll moves the track.
   overflow: clip rather than .section's hidden, which would stop position: sticky working. */
/* Bottom padding is set by case-carousel.js while pinned (the 120px plus the phone button). */
.work.is-pinned {
    overflow: clip;
}

/* The carousel hugs its content. Its top padding clears the fixed nav while pinned, and the
   matching negative margin pulls it into the section padding, so the gap above the heading
   is still exactly the section's 120px. */
.work.is-pinned .case-carousel {
    --nav-clear: 104px;
    position: sticky;
    top: 0;
    margin-top: calc(var(--nav-clear) * -1);
    padding: var(--nav-clear) 0 0;
    overflow: hidden;
}

.work.is-pinned .case-track {
    overflow: hidden;
    scroll-snap-type: none;
}

/* Pinned slides take their picture height from the screen, so the whole slide fits. */
.work.is-pinned {
    --case-chrome: 470px;
}

.work.is-pinned .case-head {
    margin-bottom: var(--space-8);
}

/* --case-media-h is set by case-carousel.js when the first guess still overflows. */
.work.is-pinned .case-media {
    aspect-ratio: auto;
    height: var(--case-media-h, clamp(160px, 100svh - var(--case-chrome), 440px));
}

.work.is-pinned .case-text {
    margin-top: var(--space-3);
}

.work.is-pinned .case-read {
    margin-top: var(--space-1);
}

.work.is-pinned .case-progress {
    margin-top: var(--space-2);
}

.case-carousel {
    /* Gutter from the viewport edge to the container, so the track can run full-bleed
       while its first slide still lines up with the rest of the page. */
    --case-gutter: max(var(--page-pad), calc((100vw - var(--container)) / 2));
    --case-slide: min(64vw, 1000px);
}

.case-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

/* Grows to fill the row beside the button; below 480px it takes the whole line and the
   button wraps underneath instead of squeezing the heading into a narrow column. */
.section .case-head h2 {
    flex: 1 1 480px;
    min-width: 0;
    /* global.css resets h1/h3/p margins but not h2's, which adds ~53px above. */
    margin-top: 0;
}

.case-all {
    flex: none;
}

.case-after {
    display: none;
}

.case-track {
    position: relative;
    display: flex;
    gap: var(--space-4);
    margin: 0;
    /* Slides start on the header's left edge. The end padding lets the last slide scroll
       all the way back to that edge too. */
    padding: 0 calc(100% - var(--case-gutter) - var(--case-slide)) var(--space-2) var(--case-gutter);
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--case-gutter);
    scrollbar-width: none;
}

.case-track::-webkit-scrollbar {
    display: none;
}

.case-track:focus-visible {
    box-shadow: inset var(--focus-ring);
}

/* The story in focus is full size and colour; the rest are smaller and greyed out until
   they slide into place. case-carousel.js sets --focus (0 to 1) from each slide's distance
   to the resting spot, so this follows the scroll rather than animating on its own. */
.case-slide {
    --focus: 1;
    flex: 0 0 var(--case-slide);
    scroll-snap-align: start;
    opacity: calc(.4 + .6 * var(--focus));
    filter: grayscale(calc(1 - var(--focus)));
    transform: scale(calc(.86 + .14 * var(--focus)));
    transform-origin: center;
}

.case-card {
    display: flex;
    flex-direction: column;
}

.case-media {
    position: relative;
    aspect-ratio: 2.4 / 1;
    overflow: hidden;
    /* Square bottom-left corner, where the name tab sits. */
    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-ink);
}

.case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Name tab cut into the bottom-left of the picture, on the section's own colour. */
.case-tab {
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(36%, 380px);
    padding: var(--space-2) var(--space-3) 12px;
    border-top: 2px solid var(--color-accent);
    background: var(--color-paper);
}

.case-tab h3 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
}

.case-tab p {
    margin: 4px 0 0;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.4;
}

.case-text {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 56px);
    margin-top: var(--space-4);
}

p.case-desc {
    margin: 0;
    color: #6b6b6b;
    font-size: 16px;
    line-height: 24px;
}

.case-result-line {
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -.01em;
}

/* The highlight sweeps in with scroll: case-carousel.js sets --hl from 0 to 1 as each slide
   comes into view. The default box-decoration-break (slice) treats the wrapped lines as one
   strip, so line one fills before line two. Without JS it is simply fully highlighted. */
.case-result-line mark {
    padding: 0 4px;
    color: inherit;
    background: linear-gradient(rgba(124, 252, 0, .32), rgba(124, 252, 0, .32)) no-repeat;
    background-size: calc(var(--hl, 1) * 100%) 100%;
}

.case-result-label {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 14px;
}

.case-result-label strong {
    color: var(--color-ink);
    font-weight: 500;
}

.case-result-label span {
    font-family: var(--font-sans);
    font-size: 12px;
}

.case-read {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    min-height: 44px;
    margin-top: var(--space-3);
    color: var(--color-accent-deep);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.case-read svg {
    transition: transform .2s var(--ease-out);
}

.case-read:hover svg {
    transform: translateX(3px);
}

/* A hairline that fills as you scroll through the current story, then resets for the next. */
.case-progress {
    position: relative;
    height: 2px;
    margin: var(--space-4) 0 0;
    background: var(--color-line);
}

.case-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: var(--color-accent-deep);
    transform: scaleX(var(--story-progress, 0));
    transform-origin: left;
}

/* Footer CTA: heading on the left, the enquiry form on the right ---------------- */

.cta-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
    text-align: left;
}

.cta-split .cta-mark {
    justify-content: flex-start;
    margin-bottom: 0;
}

.cta-split .cta-mark svg {
    display: block;
    width: 72px;
    height: auto;
}

.cta-split h2 {
    max-width: 620px;
    margin: clamp(40px, 4vw, 64px) 0 var(--space-3);
    text-align: left;
}

.cta-split h2 em {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
}

.cta-lede {
    max-width: 520px;
    margin: 0;
    color: var(--color-muted-dark);
    font-size: 18px;
    line-height: 1.5;
}

.cta-split .field-error {
    margin: 0;
    color: #ff6b6b;
    font-size: 13px;
    line-height: 1.4;
}

.cta-split .form-status {
    margin: var(--space-2) 0 0;
    font-size: 15px;
}

.cta-split .form-status:empty {
    display: none;
}

/* Footer ------------------------------------------------------------------------ */

.site-footer--home {
    padding: clamp(56px, 5vw, 88px) 0 var(--space-4);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr);
    gap: clamp(40px, 5vw, 80px);
}

.footer-about .brand {
    width: auto;
    margin-bottom: var(--space-3);
    color: var(--color-ink);
}

.footer-about p {
    max-width: 320px;
    margin-bottom: var(--space-2);
}

.footer-email {
    color: var(--color-ink);
    font-weight: 500;
}

.site-footer--home .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    align-items: start;
}

.footer-col-title {
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-col ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col a {
    display: inline-block;
    padding: 6px 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 20px;
    transition: color .2s ease;
}

.footer-col a:hover,
.footer-bottom a:hover {
    color: var(--color-ink);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 14px;
}

/* Responsive -------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .site-footer--home .footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    /* minmax(0, …) so the scrolling rows of names can't widen the column past the screen. */
    .industry-switcher {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The list becomes a scrolling row of names above the footage. */
    .industries--outcomes .industry-tabs {
        flex-direction: row;
        gap: var(--space-1);
        margin-inline: calc(var(--page-pad) * -1);
        padding: 0 var(--page-pad) var(--space-3);
        overflow-x: auto;
        border-top: 0;
        scrollbar-width: none;
    }

    .industries--outcomes .industry-tab {
        flex: 0 0 auto;
        padding: 10px 16px;
        border: 1px solid var(--color-line);
        background: var(--color-paper);
        border-radius: var(--radius-pill);
        font-size: 16px;
    }

    .industries--outcomes .industry-tab[aria-selected="true"] {
        border-color: var(--color-accent-deep);
        background: var(--color-paper);
    }

    .industry-tab-name svg,
    .industry-tab[aria-selected="true"] .industry-tab-benefit {
        display: none;
    }

    .industry-reels {
        position: static;
    }

    .cta-split,
    .footer-top {
        grid-template-columns: 1fr;
    }

    /* Narrow enough that the next slide peeks in, so it's clear the row swipes. */
    .case-track {
        gap: var(--space-2);
    }

    .case-carousel {
        --case-slide: 80vw;
    }

    .case-text {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hero-frame {
        margin-inline: calc(var(--page-pad) * -1 + 8px);
    }

    .industry-reel {
        aspect-ratio: 4 / 3;
    }

    .case-media {
        aspect-ratio: 4 / 3;
    }

    .case-head .case-all {
        display: none;
    }

    .case-after {
        display: block;
        padding: var(--space-5) 0 var(--space-8);
    }

    .work:not(.is-pinned) .case-after {
        padding-bottom: 0;
    }

    .work.is-pinned .case-after {
        position: absolute;
        right: 0;
        bottom: var(--section-pad);
        left: 0;
        padding-bottom: 0;
    }

    .work.is-pinned {
        --case-chrome: 560px;
    }

    .outcomes-head h2,
    .section .case-head h2,
    .cta-split h2 {
        font-size: 2.5rem;
        line-height: 1;
        letter-spacing: -.045em;
    }

    .work.is-pinned .case-text {
        gap: var(--space-2);
    }

    /* 28px wraps to three or four lines on a phone and stops the stories pinning. */
    .work.is-pinned .case-result-line {
        margin-bottom: var(--space-1);
        font-size: 22px;
        line-height: 30px;
    }

    .case-tab {
        width: auto;
        max-width: 85%;
        padding: 12px var(--space-2) 10px;
    }

    .site-footer--home .footer-cols {
        flex-direction: row;
        align-items: start;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom nav {
        flex-direction: row !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industry-reel-still {
        animation: none;
    }
}