/* ==========================================================================
   Case studies — public pages
   Hand-maintained file (account.css convention — not part of the Mix build).
   Design source: design-refs/original-site (ghost numerals, hand-drawn
   arrows, tyre-tread trails, brush-stroke CTAs) on the live brand tokens.
   Fonts: BebasNeue (display) + Roboto_Condensed (body) from the main build,
   plus Covered By Your Grace (OFL) for the marker/annotation voice.
   ========================================================================== */

@font-face {
    font-family: 'CoveredByYourGrace';
    src: url('/fonts/CoveredByYourGrace.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.cs-page {
    --cs-bg: #0a0b0c;
    --cs-panel: #101114;
    --cs-line: #1d1f23;
    --cs-text: #b9bec8;
    --cs-strong: #ffffff;
    --cs-muted: #828996;
    --cs-red: #cc1212;
    --cs-red-hover: #e01414;
    /* Small red TEXT only: #cc1212 is ~3.3:1 on the dark panels, below the
       4.5:1 WCAG AA needs at small sizes. #ff3333 (already in the site's
       newer CSS) reads as the same brand red at >=5.2:1. Backgrounds,
       borders and large marker kickers keep #cc1212. */
    --cs-red-text: #ff3333;
    --cs-ghost: #15171a;
    --cs-display: 'BebasNeue', sans-serif;
    --cs-body: 'Roboto_Condensed', 'Roboto Condensed', Arial, sans-serif;
    --cs-marker: 'CoveredByYourGrace', cursive;

    background: var(--cs-bg);
    color: var(--cs-text);
    font-family: var(--cs-body);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
    padding: 0 0 1px; /* keep the last section's margin inside the dark shell */
    overflow-x: hidden;
}

.cs-page :focus-visible {
    outline: 2px solid var(--cs-red);
    outline-offset: 3px;
}

/* ---- shared bits ------------------------------------------------------- */

.cs-kicker {
    display: block;
    font-family: var(--cs-marker);
    font-size: 26px;
    line-height: 1;
    color: var(--cs-red);
    transform: rotate(-2deg);
    margin-bottom: 10px;
}

.cs-section-head h2,
.cs-related h2,
.cs-cta h2 {
    margin: 0;
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: clamp(36px, 7vw, 52px);
    line-height: 1.05;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cs-strong);
}

.cs-prose {
    max-width: 70ch;
    font-size: 17px;
    line-height: 1.85;
}
.cs-prose--narrow { max-width: 62ch; }
.cs-prose p { margin: 0 0 1.25em; }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose strong { color: var(--cs-strong); font-weight: 700; }
.cs-prose em { color: #d7dae0; }
.cs-prose a { color: var(--cs-red-text); }
.cs-prose ul, .cs-prose ol { padding-left: 22px; margin: 0 0 1.25em; }
.cs-prose li { margin-bottom: .4em; }

@media (min-width: 768px) {
    .cs-prose { font-size: 18px; }
}

/* Intro: the lead paragraph(s) straight after the hero */
.cs-intro { margin-top: clamp(40px, 7vw, 68px); }
.cs-intro-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
.cs-prose--lead {
    max-width: 66ch;
    font-size: 18.5px;
    line-height: 1.85;
    color: #c6cad2;
}
@media (min-width: 768px) {
    .cs-prose--lead { font-size: 19.5px; }
}

/* Buttons: brush-stroke primary (the live site's red brush SVG) + outline */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 28px;
    font-family: var(--cs-display);
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--cs-strong);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.cs-btn--brush {
    width: min(350px, 100%);
    min-height: 74px;
    padding: 0 30px;
    background: url('/images/top_slider__button.svg') center no-repeat;
    background-size: 100% 100%;
    letter-spacing: 1.8px;
}
.cs-btn--brush:hover { opacity: .82; }
.cs-btn--brush:focus-visible { outline-color: #fff; }
.cs-btn--outline {
    border: 2px solid var(--cs-red);
    background: transparent;
}
.cs-btn--outline:hover { background: var(--cs-red); }

/* Hand-drawn arrows (design-refs arr2/arr3), revealed on scroll */
.cs-arrow { display: none; }
@media (min-width: 1024px) {
    .cs-arrow {
        display: block;
        position: absolute;
        width: 69px;
        height: 110px;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transition: opacity .5s ease, transform .6s ease;
    }
    .cs-arrow--right {
        right: 6%;
        top: 40px;
        background: url('/images/case-studies/arr2.png') center/contain no-repeat;
        transform: rotate(80deg);
    }
    .cs-arrow--left {
        left: 4%;
        bottom: 60px;
        background: url('/images/case-studies/arr3.png') center/contain no-repeat;
        transform: rotate(-70deg) scaleX(-1);
    }
    .cs-arrow.is-in { opacity: .9; }
    .cs-arrow--right.is-in { transform: rotate(12deg); }
    .cs-arrow--left.is-in { transform: rotate(-5deg) scaleX(-1); }
}

/* ---- preview banner + breadcrumbs -------------------------------------- */

.cs-preview-banner {
    background: var(--cs-red);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 16px;
}

.cs-breadcrumbs {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 14px;
    letter-spacing: .3px;
}
.cs-breadcrumbs a { color: #fff; opacity: .62; text-decoration: none; }
.cs-breadcrumbs a:hover { color: var(--cs-red); opacity: 1; }
.cs-breadcrumbs-sep { opacity: .35; }
.cs-breadcrumbs span:not(.cs-breadcrumbs-sep) { color: #8a8f98; }
.cs-breadcrumbs-current {
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 1. hero ------------------------------------------------------------ */

.cs-hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 26px 20px 0;
    display: grid;
    gap: 34px;
}
.cs-hero-kicker { font-size: 30px; }
.cs-hero h1 {
    margin: 0 0 14px;
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: clamp(42px, 9vw, 68px);
    line-height: 1.02;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cs-strong);
}
.cs-hero-sub {
    margin: 0 0 22px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--cs-text);
    max-width: 58ch;
}
.cs-hero-facts {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cs-hero-facts li {
    border: 1px solid #2c2e33;
    padding: 7px 14px;
    font-size: 13.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #c6cad2;
}
.cs-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Helmet shot with the red splatter/glow treatment */
.cs-hero-media { position: relative; order: -1; }
.cs-hero-media::before {
    content: '';
    position: absolute;
    inset: -18% -22%;
    background: radial-gradient(closest-side, rgba(204, 18, 18, .55), rgba(204, 18, 18, .18) 58%, transparent 82%);
    z-index: 0;
}
.cs-hero-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 1024px) {
    .cs-hero-inner {
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: 56px;
        padding-top: 44px;
    }
    .cs-hero-media { order: 0; }
}

/* ---- 2. overview panel -------------------------------------------------- */

.cs-overview { margin-top: clamp(44px, 8vw, 76px); }
.cs-overview-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
.cs-overview-grid {
    margin: 0;
    background: var(--cs-panel);
    border: 1px solid var(--cs-line);
    border-top: 2px solid var(--cs-red);
    padding: clamp(24px, 5vw, 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px 26px;
}
.cs-overview-item--wide { grid-column: 1 / -1; }
.cs-overview-grid dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cs-muted);
    margin-bottom: 6px;
}
.cs-overview-grid dd {
    margin: 0;
    color: #e8e9eb;
    font-size: 16.5px;
    line-height: 1.55;
}
.cs-tags {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cs-tags li {
    color: var(--cs-red-text);
    border: 1px solid rgba(204, 18, 18, .45);
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ---- numbered story sections (the ghost-numeral motif) ------------------ */

.cs-story { counter-reset: cs-story; }
.cs-story .cs-section { counter-increment: cs-story; }

.cs-section {
    position: relative;
    padding: clamp(56px, 10vw, 104px) 0 0;
    overflow: hidden;
}
.cs-section-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Oversized ghost numeral behind each story section. CSS counter (not the
   01–04.png originals) so numbering re-sequences when a section is empty
   and never runs out — styled to match the design-refs numerals. */
.cs-story .cs-section::before {
    content: counter(cs-story, decimal-leading-zero) ".";
    position: absolute;
    top: clamp(8px, 2vw, 20px);
    left: -0.06em;
    z-index: 0;
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: clamp(130px, 26vw, 300px);
    line-height: .8;
    letter-spacing: 0;
    color: var(--cs-ghost);
    pointer-events: none;
    user-select: none;
}
.cs-story .cs-section:nth-child(even)::before {
    left: auto;
    right: -0.06em;
}
.cs-section-head { margin-bottom: clamp(22px, 4vw, 34px); }

/* Faint tyre-tread trails behind selected sections (design-refs sled art) */
@media (min-width: 1024px) {
    .cs-section--idea::after,
    .cs-section--process::after {
        content: '';
        position: absolute;
        z-index: 0;
        width: 620px;
        height: 500px;
        opacity: .06;
        pointer-events: none;
    }
    .cs-section--idea::after {
        right: -140px;
        top: 60px;
        background: url('/images/case-studies/sled1.png') center/contain no-repeat;
    }
    .cs-section--process::after {
        left: -160px;
        bottom: -80px;
        background: url('/images/case-studies/sled2.png') center/contain no-repeat;
    }
}

/* ---- image grids + lightbox links --------------------------------------- */

.cs-grid {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.cs-grid-item a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--cs-line);
    transition: border-color .2s ease, transform .2s ease;
}
.cs-grid-item a:hover {
    border-color: rgba(204, 18, 18, .65);
    transform: translateY(-2px);
}
.cs-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-grid-caption {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cs-muted);
}
@media (min-width: 768px) {
    .cs-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .cs-grid--lead .cs-grid-item:first-child { grid-column: span 2; grid-row: span 1; }
    .cs-grid--lead .cs-grid-item:first-child a { aspect-ratio: 16 / 10; }
}

/* ---- 6. final design solution ------------------------------------------- */

.cs-solution { display: grid; gap: 34px; }
.cs-solution-media { margin: 0; position: relative; }
.cs-solution-media a {
    display: block;
    border: 1px solid var(--cs-line);
    transition: border-color .2s ease;
}
.cs-solution-media a:hover { border-color: rgba(204, 18, 18, .65); }
.cs-solution-media img { width: 100%; height: auto; display: block; }
.cs-solution-media figcaption {
    margin-top: 12px;
    font-family: var(--cs-marker);
    font-size: 23px;
    color: #d8dade;
    transform: rotate(-1.5deg);
}
@media (min-width: 1024px) {
    .cs-solution:not(.cs-solution--textonly) {
        grid-template-columns: 1.1fr 1fr;
        gap: 56px;
        align-items: start;
    }
}

/* ---- 7. painting process timeline ---------------------------------------- */

.cs-process {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: clamp(40px, 6vw, 64px);
}
.cs-process::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 10px;
    bottom: 10px;
    border-left: 2px dotted rgba(204, 18, 18, .55);
}
.cs-process-stage { position: relative; padding-left: 74px; }
.cs-process-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cs-red);
    border-radius: 50%;
    background: var(--cs-bg);
    font-family: var(--cs-display);
    font-size: 21px;
    letter-spacing: 1px;
    color: var(--cs-strong);
}
.cs-process-body h3 {
    margin: 8px 0 16px;
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: 27px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--cs-strong);
}
.cs-process-body a {
    display: block;
    max-width: 640px;
    border: 1px solid var(--cs-line);
    transition: border-color .2s ease;
}
.cs-process-body a:hover { border-color: rgba(204, 18, 18, .65); }
.cs-process-body img { width: 100%; height: auto; display: block; }
.cs-process-caption {
    margin: 10px 0 0;
    max-width: 640px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cs-muted);
}

/* ---- 8. before & after slider -------------------------------------------- */

.cs-ba { max-width: 860px; margin: 30px auto 0; }
.cs-ba-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cs-line);
    touch-action: none; /* the range handles horizontal drags itself */
}
.cs-ba-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-ba-top {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--cs-ba-pos, 50%)) 0 0);
}
.cs-ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cs-ba-pos, 50%);
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
.cs-ba-handle::after {
    content: '\2039 \203A';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cs-red);
    border: 2px solid #fff;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    letter-spacing: 2px;
}
.cs-ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}
.cs-ba-frame:focus-within {
    outline: 2px solid var(--cs-red);
    outline-offset: 3px;
}
.cs-ba-tag {
    position: absolute;
    bottom: 12px;
    z-index: 2;
    background: rgba(0, 0, 0, .68);
    color: #fff;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.cs-ba-tag--before { left: 12px; }
.cs-ba-tag--after { right: 12px; }
.cs-ba-hint {
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--cs-marker);
    font-size: 21px;
    color: var(--cs-muted);
    transform: rotate(-1.5deg);
}

/* ---- 9. final gallery / 10. video ---------------------------------------- */

.cs-section--gallery .cs-section-head,
.cs-section--video .cs-section-head { text-align: center; }

.cs-video,
.cs-video-placeholder { max-width: 860px; margin: 28px auto 0; }
.cs-video-title {
    margin: 0 0 6px;
    text-align: center;
    font-family: var(--cs-display);
    font-size: 24px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cs-strong);
}
.cs-video-desc {
    margin: 0 auto;
    max-width: 62ch;
    text-align: center;
    font-size: 16px;
    color: var(--cs-muted);
}
.cs-video-play {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid var(--cs-line);
    background: #000;
    cursor: pointer;
}
.cs-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .85;
}
/* Red splatter play badge — design-refs block_8__label.png, reused as-is */
.cs-video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 112px;
    height: 106px;
    transform: translate(-50%, -50%);
    background: url('/images/case-studies/block_8__label.png') center/contain no-repeat;
    transition: transform .2s ease;
}
.cs-video-play:hover .cs-video-badge { transform: translate(-50%, -50%) scale(1.07); }
.cs-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}
.cs-video-ext {
    display: block;
    width: max-content;
    margin: 14px auto 0;
    color: var(--cs-muted);
    font-size: 14.5px;
    letter-spacing: .5px;
}
.cs-video-ext:hover { color: var(--cs-red); }

/* Labelled placeholder state: title set, link not live yet */
.cs-video-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--cs-panel);
    border: 1px dashed #3a3d42;
    padding: 20px;
    text-align: center;
}
.cs-video-placeholder-label {
    font-family: var(--cs-display);
    font-size: clamp(20px, 4vw, 27px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    background: var(--cs-red);
    padding: 8px 20px;
    transform: rotate(-2deg);
}
.cs-video-placeholder-sub { font-size: 15px; color: var(--cs-muted); }

/* ---- 11. testimonial ------------------------------------------------------ */

.cs-testimonial {
    margin-top: clamp(64px, 10vw, 104px);
    padding: 0 20px;
}
.cs-testimonial-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background: var(--cs-panel);
    border: 1px solid var(--cs-line);
    padding: clamp(30px, 6vw, 52px);
    text-align: center;
}
.cs-testimonial-mark {
    position: absolute;
    top: -6px;
    left: 16px;
    font-family: var(--cs-marker);
    font-size: 92px;
    line-height: 1;
    color: rgba(204, 18, 18, .8);
}
.cs-testimonial-stars {
    margin: 0 0 14px;
    font-size: 20px;
    letter-spacing: 5px;
    color: #3a3d42;
}
.cs-testimonial-stars .is-filled { color: var(--cs-red-text); }
.cs-testimonial-card blockquote {
    margin: 0 0 22px;
    font-size: clamp(19px, 3vw, 23px);
    line-height: 1.65;
    font-weight: 300;
    color: #e8e9eb;
}
.cs-testimonial-card figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.cs-testimonial-photo { border-radius: 50%; object-fit: cover; }
.cs-testimonial-name {
    font-family: var(--cs-display);
    font-size: 17px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--cs-muted);
}

/* ---- related strip --------------------------------------------------------- */

.cs-related { margin-top: clamp(64px, 10vw, 110px); }
.cs-related-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
.cs-related h2 {
    text-align: center;
    margin-bottom: clamp(24px, 4vw, 38px);
    font-size: clamp(32px, 6vw, 44px);
}
.cs-related-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
.cs-card {
    background: var(--cs-panel);
    border: 1px solid var(--cs-line);
    transition: border-color .2s ease, transform .2s ease;
}
.cs-card:hover {
    border-color: rgba(204, 18, 18, .6);
    transform: translateY(-3px);
}
.cs-card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.cs-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--cs-line);
}
.cs-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 22px;
}
.cs-card-cat {
    color: var(--cs-red-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.cs-card-title {
    font-family: var(--cs-display);
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cs-strong);
}
.cs-card-excerpt { font-size: 15px; line-height: 1.55; color: var(--cs-muted); }
.cs-card-more {
    margin-top: 6px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.cs-card:hover .cs-card-more { color: var(--cs-red); }
@media (min-width: 768px) {
    .cs-related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 12. final CTA ---------------------------------------------------------- */

.cs-cta {
    position: relative;
    overflow: hidden;
    margin-top: clamp(64px, 10vw, 120px);
    padding: clamp(64px, 10vw, 110px) 20px;
    background: #0d0e10;
    border-top: 1px solid #17181c;
    text-align: center;
}
.cs-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/case-studies/sled1.png') right -80px top -60px no-repeat;
    opacity: .06;
    pointer-events: none;
}
@media (min-width: 1024px) {
    .cs-cta::after {
        content: '';
        position: absolute;
        left: -20px;
        bottom: -8px;
        width: 230px;
        height: 140px;
        background: url('/images/case-studies/kraska.png') center/contain no-repeat;
        opacity: .35;
        pointer-events: none;
    }
}
.cs-cta-inner { position: relative; max-width: 820px; margin: 0 auto; }
.cs-cta .cs-kicker { font-size: 30px; margin-bottom: 14px; }
.cs-cta h2 { font-size: clamp(34px, 7vw, 54px); margin-bottom: 18px; }
.cs-cta p { margin: 0 auto 36px; max-width: 62ch; font-size: 17.5px; line-height: 1.8; }
.cs-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* ---- listing page ------------------------------------------------------------ */

.cs-index-head {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 52px) 20px 0;
    text-align: center;
}
.cs-index-head .cs-kicker { font-size: 28px; }
.cs-index-head h1 {
    margin: 0 0 16px;
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: clamp(46px, 10vw, 76px);
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cs-strong);
}
.cs-index-head p {
    margin: 0 auto;
    max-width: 64ch;
    font-size: 17.5px;
    line-height: 1.8;
}

/* Category filter chips — plain crawlable links, server-side filtering */
.cs-filters {
    max-width: 1140px;
    margin: clamp(28px, 5vw, 44px) auto 0;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.cs-chip {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #2c2e33;
    color: #c6cad2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cs-chip:hover { border-color: var(--cs-red); color: #fff; }
.cs-chip.is-active {
    background: var(--cs-red);
    border-color: var(--cs-red);
    color: #fff;
}

/* Featured spotlight */
.cs-spotlight {
    max-width: 1140px;
    margin: clamp(32px, 6vw, 56px) auto 0;
    padding: 0 20px;
}
.cs-spotlight-link {
    display: grid;
    text-decoration: none;
    color: inherit;
    background: var(--cs-panel);
    border: 1px solid var(--cs-line);
    border-top: 2px solid var(--cs-red);
    transition: border-color .2s ease, transform .2s ease;
}
.cs-spotlight-link:hover {
    border-color: rgba(204, 18, 18, .6);
    transform: translateY(-3px);
}
.cs-spotlight-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.cs-spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-spotlight-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(22px, 4vw, 40px);
}
.cs-spotlight-body .cs-kicker { margin-bottom: 0; }
.cs-spotlight-title {
    font-family: var(--cs-display);
    font-weight: 700;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.08;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cs-strong);
}
.cs-spotlight-sub { font-size: 16.5px; line-height: 1.65; color: var(--cs-muted); }
.cs-spotlight-btn { margin-top: 10px; min-height: 48px; font-size: 15px; }
.cs-spotlight-link:hover .cs-spotlight-btn { background: var(--cs-red); }
@media (min-width: 1024px) {
    .cs-spotlight-link { grid-template-columns: 1.15fr 1fr; align-items: center; }
    .cs-spotlight-media { height: 100%; aspect-ratio: auto; }
}

/* Listing grid + pagination */
.cs-index-grid-wrap {
    max-width: 1140px;
    margin: clamp(28px, 5vw, 44px) auto 0;
    padding: 0 20px;
}
.cs-index-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
@media (min-width: 640px) { .cs-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-index-grid { grid-template-columns: repeat(3, 1fr); } }

.cs-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.cs-card-date {
    color: var(--cs-muted);
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cs-index-empty {
    margin: clamp(32px, 6vw, 56px) 0;
    text-align: center;
    font-size: 17px;
    color: var(--cs-muted);
}
.cs-index-empty a { color: var(--cs-red-text); }

.cs-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(28px, 5vw, 44px);
}
.cs-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #2c2e33;
    color: #c6cad2;
    font-family: var(--cs-display);
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
a.cs-page-link:hover { border-color: var(--cs-red); color: #fff; }
.cs-page-link.is-active { background: var(--cs-red); border-color: var(--cs-red); color: #fff; }
.cs-page-link.is-disabled { opacity: .35; }

/* ---- reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cs-page *,
    .cs-page *::before,
    .cs-page *::after {
        transition: none !important;
        animation: none !important;
    }
    .cs-arrow { opacity: .9; }
    .cs-arrow--right { transform: rotate(12deg); }
    .cs-arrow--left { transform: rotate(-5deg) scaleX(-1); }
}