/* Case study layout — design system shared with index.html
   Tokens mirror the Figma "Portfolio-2025" neutral/indigo ramp. */

:root {
    --case-bg: #09090b;
    --case-text: #a1a1a1;      /* neutral/400 */
    --case-muted: #737373;     /* neutral/500 */
    --case-dim: #525252;       /* neutral/600 */
    --case-line: #404040;      /* neutral/700 */
    --case-indigo: #615fff;    /* indigo/500 */
    --case-accent: #ffb86a;

    --case-gap-section: 233px;
    --case-gap-tight: 145px;
    --case-pad: 55px;
    --case-label-col: 610px;
    --case-content-col: 776px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 0.875rem; scroll-behavior: smooth; }
@media (min-width: 768px)  { html { font-size: 15px; } }
@media (min-width: 1024px) { html { font-size: 1rem; } }

body {
    font-family: 'M PLUS 1p', sans-serif;
    background-color: var(--case-bg);
    color: var(--case-text);
    line-height: 1;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }

.case { width: 100%; max-width: 1920px; margin: 0 auto; }

/* ---------- Hero ---------- */

.case-hero {
    display: flex;
    width: 100%;
    aspect-ratio: 1920 / 987;
    overflow: hidden;
    background: var(--case-bg);
}

/* Black column carrying the name, client logo and title; photo takes the rest. */
.case-hero-panel {
    width: 31.04%;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 72px 20px 20px var(--case-pad);
}

.case-hero-photo {
    flex: 1;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.case-hero-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 1.3125rem;
    color: #f5f5f5;
    letter-spacing: 0.315px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.case-hero-name:hover { color: #fff; }

.case-hero-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* keep the logo at its intrinsic ratio */
    gap: 13px;
}

/* Logo1.png carries 21px of transparent padding at 2x, so 89px tall puts the
   glyph itself at the 165x48 drawn in Figma. */
.case-hero-logo { height: 89px; width: auto; opacity: 0.85; }

.case-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 2.125rem);
    color: var(--case-text);
    text-transform: uppercase;
    letter-spacing: 0.51px;
    line-height: 1.1;
}

.case-hero-tags {
    display: flex;
    gap: 13px;
    font-size: 0.8125rem;
    color: var(--case-dim);
    letter-spacing: 0.195px;
}

/* ---------- Section grid: label column + content column ---------- */

.case-section {
    display: grid;
    grid-template-columns: var(--case-label-col) minmax(0, var(--case-content-col));
    padding: 0 var(--case-pad);
    margin-top: var(--case-gap-section);
}

.case-section--tight { margin-top: var(--case-gap-tight); }

/* The impact row is indented further than the rest of the page in the design. */
.case-section--impact {
    padding-left: 226px;
    grid-template-columns: 373px minmax(0, 1040px);
    margin-top: 140px;
}

.case-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 2.125rem;
    color: var(--case-text);
    letter-spacing: 0.51px;
    line-height: 1.25;
    max-width: 430px;
}

.case-content { display: flex; flex-direction: column; gap: 34px; }

.case-h2 {
    font-size: 2.125rem;
    font-weight: 700;
    color: var(--case-text);
    text-transform: uppercase;
    letter-spacing: 0.51px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 21px;
    flex-wrap: wrap;
}

.case-p {
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.315px;
    color: var(--case-text);
}

.case-p + .case-p { margin-top: 21px; }

.accent { color: var(--case-accent); }
.optional { color: var(--case-line); }

.case-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--case-line);
    border-radius: 13px;
    padding: 5px 13px;
    font-size: 1.3125rem;
    font-weight: 400;
    color: var(--case-dim);
    letter-spacing: 0.315px;
    line-height: 1;
    text-transform: none;
}

/* ---------- Impact ---------- */

.impact-row { display: flex; gap: 63px; }
.impact-item { width: 284px; flex: none; display: flex; flex-direction: column; gap: 21px; }

.impact-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.3125rem;
    color: var(--case-muted);
    text-transform: uppercase;
    letter-spacing: 0.315px;
    line-height: 1.2;
}

.impact-desc {
    font-size: 0.8125rem;
    color: var(--case-muted);
    letter-spacing: 0.195px;
    line-height: 1.4;
    margin-top: 8px;
}

.impact-bars { display: flex; flex-direction: column; gap: 13px; }
.impact-bar-row { display: flex; flex-direction: column; gap: 5px; }

.impact-bar { height: 13px; border-radius: 99px; }
.impact-bar.now { width: 174px; background: var(--case-indigo); }
.impact-bar.before { width: 17px; border: 1px solid var(--case-dim); }

.impact-bar-label {
    font-size: 0.8125rem;
    color: var(--case-dim);
    letter-spacing: 0.195px;
}

.impact-figure { display: block; }

/* ---------- Journey timeline ---------- */

.journey {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.journey li {
    position: relative;
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    column-gap: 33px;
    align-items: start;
}

/* Connector runs from the bottom of one marker to the top of the next. */
.journey li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 58px;
    height: 100%;
    width: 1px;
    background: var(--case-line);
}

.journey-marker {
    width: 55px;
    height: 55px;
    margin-top: 3px;
    border: 1px solid var(--case-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3125rem;
    color: var(--case-text);
    letter-spacing: 0.315px;
    background: var(--case-bg);
    position: relative;
    z-index: 1;
}

.journey-body {
    font-size: 1.3125rem;
    line-height: 1.45;
    letter-spacing: 0.315px;
    color: var(--case-text);
}

.journey-body strong { display: block; font-weight: 700; }

.journey-total {
    font-size: 1.3125rem;
    letter-spacing: 0.315px;
    color: var(--case-text);
}

/* ---------- Full-bleed imagery ---------- */

.case-strip {
    width: calc(100% - var(--case-pad));
    margin-left: var(--case-pad);
    margin-top: var(--case-gap-tight);
    height: auto;
}

.case-figure {
    width: calc(100% - (2 * var(--case-pad)));
    margin: var(--case-gap-section) var(--case-pad) 0;
    height: auto;
}

.case-figure--centered {
    max-width: 1199px;
    margin-left: auto;
    margin-right: auto;
}

.case-caption {
    margin-top: var(--case-gap-tight);
    padding: 0 var(--case-pad);
    display: grid;
    grid-template-columns: var(--case-label-col) minmax(0, var(--case-content-col));
}

.case-caption > p {
    grid-column: 2;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 2.125rem;
    color: var(--case-text);
    letter-spacing: 0.51px;
    line-height: 1.25;
}

.case-review-prompt { width: 237px; border-radius: 8px; }

/* Mirrors the .service-header / .contact-header treatment on the homepage. */
.case-footer {
    margin: var(--case-gap-section) var(--case-pad) 0;
    border-top: 1px solid #262626;
}

.case-footer-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 40px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    color: var(--case-text);
    text-transform: uppercase;
    letter-spacing: 0.51px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.case-footer-link:hover { color: #f5f5f5; }

.case-footer-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .case-footer-link:hover .case-footer-arrow { transform: translateX(-6px); }
}

.case-colophon {
    padding: 0 0 80px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    color: var(--case-dim);
    letter-spacing: 0.255px;
}

/* Wide image rows scroll sideways on small screens instead of shrinking to
   illegible slivers. On desktop the wrapper is transparent to layout. */
.case-scroller { display: contents; }

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

/* Laptop — pull the label column in, keep the two-column structure. */
@media (max-width: 1500px) {
    :root {
        --case-label-col: 420px;
        --case-gap-section: 160px;
        --case-gap-tight: 100px;
    }
    .case-section--impact {
        padding-left: var(--case-pad);
        grid-template-columns: 420px minmax(0, 1040px);
    }
    .impact-row { gap: 40px; }
    .impact-item { width: auto; flex: 1 1 220px; }
}

/* Tablet — single column, tighter rhythm. */
@media (max-width: 1100px) {
    :root {
        --case-pad: 32px;
        --case-gap-section: 96px;
        --case-gap-tight: 56px;
    }

    .case-section,
    .case-caption,
    .case-section--impact {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .case-caption > p { grid-column: 1; }
    .case-content { gap: 28px; }
    .case-p + .case-p { margin-top: 16px; }

    /* Panel and photo stack: photo on top, text block beneath it. */
    .case-hero {
        flex-direction: column;
        aspect-ratio: auto;
    }
    .case-hero-photo {
        order: -1;
        width: 100%;
        height: auto;
        aspect-ratio: 1324 / 987;
        flex: none;
    }
    .case-hero-panel {
        width: 100%;
        padding: 24px var(--case-pad) 0;
        gap: 24px;
    }
    .impact-row { flex-wrap: wrap; }
    .journey { gap: 40px; }
}

/* Small tablet — scale the display type down and start scrolling wide rows. */
@media (max-width: 900px) {
    :root {
        --case-gap-section: 72px;
        --case-gap-tight: 44px;
    }

    .case-label,
    .case-caption > p { font-size: 1.75rem; }
    .case-h2 { font-size: 1.625rem; gap: 14px; }
    .case-pill { font-size: 1rem; padding: 4px 10px; border-radius: 11px; }

    .case-scroller {
        display: block;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .case-scroller::-webkit-scrollbar { display: none; }

    .case-scroller .case-strip,
    .case-scroller .case-figure {
        width: auto;
        max-width: none;
        margin-left: var(--case-pad);
        margin-right: var(--case-pad);
    }
    .case-scroller .case-strip {
        height: 240px;
        margin-top: var(--case-gap-tight);
    }
    .case-scroller .case-figure {
        height: 420px;
        margin-top: var(--case-gap-section);
    }
}

/* Phone — compact spacing, smaller markers, body text sized for reading. */
@media (max-width: 700px) {
    :root {
        --case-pad: 24px;
        --case-gap-section: 56px;
        --case-gap-tight: 36px;
    }

    .case-label,
    .case-caption > p { font-size: 1.5rem; line-height: 1.2; }
    .case-h2 { font-size: 1.375rem; gap: 12px; }
    .case-p,
    .journey-body,
    .journey-total { font-size: 1.0625rem; line-height: 1.5; }
    .case-content { gap: 24px; }

    .case-hero-logo { height: 62px; }
    .case-hero-panel { gap: 20px; }

    .journey { gap: 28px; }
    .journey li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
    .journey-marker { width: 40px; height: 40px; font-size: 1rem; margin-top: 2px; }
    .journey li:not(:last-child)::before { left: 20px; top: 42px; }

    .impact-item { width: 100%; flex: 1 1 100%; gap: 16px; }
    .impact-row { gap: 32px; }
    .case-review-prompt { width: 190px; }

    .case-scroller .case-strip { height: 190px; }
    .case-scroller .case-figure { height: 340px; }

    .case-footer-link { padding: 28px 0; gap: 12px; }
    .case-colophon { padding-bottom: 48px; font-size: 0.9375rem; }
}

/* Narrow phone. */
@media (max-width: 420px) {
    :root {
        --case-pad: 20px;
        --case-gap-section: 48px;
        --case-gap-tight: 30px;
    }
    .case-label,
    .case-caption > p { font-size: 1.375rem; }
    .case-scroller .case-strip { height: 160px; }
    .case-scroller .case-figure { height: 300px; }
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        animation: case-reveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 22%;
    }

    @keyframes case-reveal {
        to { opacity: 1; transform: translateY(0); }
    }
}