/* ==========================================================================
   work-2027.css — page-specific rules for /work
   --------------------------------------------------------------------------
   Everything generic (tokens, chrome, buttons, chips, hairline rows, cards,
   screenshot slots, reveal) lives in css/site-2027.css. Only what that file
   cannot express is here: the hero stat rail, the split feature panels, the
   two-up project cards, the five-across process strip, and the CTA panel.

   No !important, no bare descendant-element resets — every override below is
   scoped to a .cy27-work__* class so it can never outrank the shared layer by
   accident.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — copy left, stat rail right
   -------------------------------------------------------------------------- */

/* Design: 1.1fr .9fr, gap 64, baselines aligned to the bottom of the column.
   The shared split hero aligns to the top with a 56px gap. */
.cy27-work__hero .cy27-phero__inner {
    gap: 64px;
    align-items: end;
    padding-bottom: 60px;
}

.cy27-work__hero .cy27-phero__eyebrow {
    margin-bottom: 22px;
}

/* 0,2,0 so it clears .cy27-page h1 (0,1,1) without an element selector. */
.cy27-page .cy27-work__title {
    font-size: clamp(2.3rem, 4.6vw, 4rem);
    line-height: 1.03;
    margin-bottom: 26px;
}

.cy27-work__hero .cy27-phero__lead {
    max-width: 560px;
}

.cy27-work__stats {
    display: grid;
    gap: 14px;
    padding-left: 32px;
    border-left: 1px solid var(--cy27-line);
}

.cy27-work__stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.cy27-work__stat-label {
    color: var(--cy27-body);
    font-size: .95rem;
}

.cy27-work__stat-value {
    font-family: var(--cy27-mono);
    font-size: 1rem;
    color: var(--cy27-heading);
}

/* --------------------------------------------------------------------------
   2. Filter row
   -------------------------------------------------------------------------- */

.cy27-work__filters {
    padding-bottom: 30px;
}

/* The bar is immediately followed by its own section, so the shared 36px
   bottom margin would double up with the section padding. */
.cy27-work__filters .cy27-filterbar {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Project grid
   -------------------------------------------------------------------------- */

.cy27-work__projects {
    padding-bottom: 40px;
}

.cy27-work__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* The filter hides items with the `hidden` attribute so they leave the
   accessibility tree too. Scoped to 0,1,1 so it outranks the display rules on
   .cy27-work__feature / .cy27-work__card below without !important. */
.cy27-work__grid [hidden] {
    display: none;
}

/* -- Full-width split panels (UPA, DocSmith) ------------------------------- */

.cy27-work__feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    overflow: hidden;
}

/* Product panel: wider copy column, plain card surface, panel radius. */
.cy27-work__feature--product {
    grid-template-columns: 1.15fr 1fr;
    border-radius: 18px;
}

.cy27-work__feature-body {
    display: flex;
    flex-direction: column;
    padding: 44px 40px;
}

.cy27-work__feature .cy27-badge {
    margin-bottom: 24px;
}

.cy27-work__feature .cy27-sublabel {
    display: block;
    margin-bottom: 20px;
}

.cy27-page .cy27-work__feature-title {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    margin-bottom: 14px;
}

.cy27-page .cy27-work__feature--product .cy27-work__feature-title {
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
}

.cy27-work__copy {
    color: var(--cy27-body);
    line-height: 1.75;
}

.cy27-work__copy + .cy27-work__copy {
    margin-top: 20px;
}

.cy27-work__feature .cy27-tags {
    margin: 26px 0 30px;
}

.cy27-work__feature-cta {
    margin-top: auto;
    align-self: flex-start;
}

.cy27-work__feature-shot {
    min-height: 420px;
    border-left: 1px solid var(--cy27-line-soft);
}

.cy27-work__feature--product .cy27-work__feature-shot {
    min-height: 360px;
}

/* -- Two-up client cards (Matrix, SB Skincare) ----------------------------- */

.cy27-work__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cy27-work__card-shot {
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--cy27-line-soft);
}

.cy27-work__card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 32px 30px;
}

.cy27-work__card-body .cy27-sublabel {
    display: block;
    margin-bottom: 12px;
}

.cy27-page .cy27-work__card-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom: 12px;
}

.cy27-work__card-body .cy27-work__copy {
    margin-bottom: 18px;
    line-height: 1.7;
}

.cy27-work__card-body .cy27-tags {
    margin-bottom: 22px;
}

/* -- Shared inline link ---------------------------------------------------- */

.cy27-work__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: auto;
    min-height: 44px;
    color: var(--cy27-accent);
    font-weight: 700;
    font-size: .95rem;
}

.cy27-work__link i {
    font-size: .75rem;
}

/* --------------------------------------------------------------------------
   4. Process strip
   -------------------------------------------------------------------------- */

.cy27-work__process-sec {
    padding: 70px 0 120px;
}

.cy27-work__rule {
    border-top: 1px solid var(--cy27-line);
    padding-top: 40px;
}

.cy27-work__process-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}

.cy27-work__process-head .cy27-eyebrow {
    display: block;
    margin-bottom: 14px;
}

.cy27-page .cy27-work__process-title {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.cy27-work__inline-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    color: var(--cy27-accent);
    font-weight: 700;
    font-size: .97rem;
}

.cy27-work__inline-link i {
    font-size: .8rem;
}

/* Five hairline-topped cells across, not five boxes. */
.cy27-work__process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/* .cy27-row/.cy27-row--plain carry the hairline and the mono numeral; these
   tighten the vertical list proportions for a five-across strip. */
.cy27-work__step {
    padding: 26px 22px 26px 0;
    gap: 6px;
}

.cy27-work__step .cy27-row__num {
    padding-top: 0;
    margin-bottom: 8px;
    font-size: .8rem;
    letter-spacing: .1em;
}

.cy27-work__step h3 {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.cy27-work__step p {
    font-size: .93rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. Closing CTA — the one beam panel on this page
   -------------------------------------------------------------------------- */

.cy27-work__cta-sec {
    padding-bottom: 140px;
}

.cy27-work__cta {
    border-radius: 20px;
    padding: clamp(40px, 6vw, 84px) clamp(24px, 5vw, 64px);
    text-align: center;
    /* Feature wash re-aimed at the top centre for a symmetric panel. */
    background:
        radial-gradient(120% 150% at 50% 0%, rgba(0, 192, 250, .14), transparent 60%),
        linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6));
}

.cy27-page .cy27-work__cta-title {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    margin-bottom: 16px;
}

.cy27-work__cta-lead {
    max-width: 520px;
    margin: 0 auto 32px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--cy27-body);
}

.cy27-work__cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.cy27-work__cta-note {
    margin-top: 28px;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cy27-subtle);
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .cy27-work__hero .cy27-phero__inner {
        gap: 40px;
    }

    .cy27-work__stats {
        padding-left: 0;
        padding-top: 26px;
        border-left: 0;
        border-top: 1px solid var(--cy27-line);
    }

    .cy27-work__grid {
        grid-template-columns: 1fr;
    }

    .cy27-work__feature,
    .cy27-work__feature--product {
        grid-template-columns: 1fr;
    }

    .cy27-work__feature-shot,
    .cy27-work__feature--product .cy27-work__feature-shot {
        min-height: 260px;
        border-left: 0;
        border-top: 1px solid var(--cy27-line-soft);
    }

    .cy27-work__process {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .cy27-work__feature-body {
        padding: 32px 24px;
    }

    .cy27-work__card-body {
        padding: 28px 24px;
    }

    .cy27-work__process-sec {
        padding: 40px 0 90px;
    }

    .cy27-work__process {
        grid-template-columns: 1fr;
    }

    .cy27-work__step {
        padding-right: 0;
    }

    .cy27-work__cta-sec {
        padding-bottom: 100px;
    }
}