/* GC Pixel Studio: three tactile pixel artworks, reused as decorative brand surfaces.
   Text remains HTML; opaque gradients preserve a quiet reading area. */
:root {
    --brand-ivory-art: url('../images/studio/pixel-ivory-v1-1536.webp');
    --brand-navy-art: url('../images/studio/pixel-navy-v1-1536.webp');
    --brand-warm-art: url('../images/studio/pixel-warm-v1-1536.webp');
}
.page-hero {
    background-color: #f6f5f1;
    background-image: linear-gradient(90deg, #f6f5f1 0%, #f6f5f1f5 46%, #f6f5f1b3 68%, #f6f5f114 100%), var(--brand-ivory-art);
    background-size: cover, auto 155%;
    background-position: center, right 65%;
    background-repeat: no-repeat;
    border-bottom: 1px solid #e2e2dc;
}
.page-hero h1 { max-width: 1020px; }
.page-hero p { max-width: 780px; }
.studio-hero {
    background-color: #101e32;
    background-image: linear-gradient(90deg, #101e32 0%, #101e32ed 43%, #101e3299 100%), var(--brand-navy-art);
    background-size: cover;
    background-position: center, right center;
}
.studio-hero::before { display: none; }
.capability {
    background-color: #faf8f3;
    background-image: linear-gradient(180deg, #faf8f3 0%, #faf8f3 46%, #faf8f3ed 55%, #faf8f300 70%, #faf8f3d9 94%, #faf8f3 100%), var(--brand-ivory-art);
    background-size: cover;
    background-position: center, right bottom;
}
.capability-1 {
    background-color: #101e32;
    border-color: #101e32;
    background-image: linear-gradient(180deg, #101e32 0%, #101e32 46%, #101e32ed 55%, #101e3200 70%, #101e32cf 94%, #101e32 100%), var(--brand-navy-art);
}
.capability-art { height: 175px; flex: 0 0 175px; margin-top: auto; }
.capability>p { margin-bottom: 15px; }
.capability-tags { padding-top: 18px; color: #435771; border-color: #cbd1d8; }
.capability-1 .capability-tags { color: #c1cee0; border-color: #40516b; }
.studio-standards {
    background-color: #13233a;
    background-image: linear-gradient(90deg, #13233ae8, #13233af5), var(--brand-navy-art);
    background-position: center, left bottom;
    background-size: cover;
}
.studio-contact {
    background-color: #fcfaf6;
    background-image: linear-gradient(90deg, #fcfaf6fa 0%, #fcfaf6e8 40%, #fcfaf6b3 100%), var(--brand-warm-art);
    background-size: cover;
    background-position: center, right bottom;
}
.cta-band {
    background-color: #faf7f1;
    background-image: linear-gradient(90deg, #faf7f1c7 0%, #faf7f1f5 30%, #faf7f1f5 70%, #faf7f170 100%), var(--brand-warm-art);
    background-size: cover;
    background-position: center, right 65%;
}
.cta-band p { color: #53657d; }
.client-care {
    background-color: #fff8ed;
    background-image: linear-gradient(90deg, #fff8edf5 0%, #fff8edf5 72%, #fff8edcf 100%), var(--brand-warm-art);
    background-size: cover;
    background-position: center, right center;
}
.service-core { background-color: #fff; }
.service-core-number {
    background-image: linear-gradient(90deg, #fffffffa 0%, #ffffff9e 70%, #ffffff33 100%), var(--brand-ivory-art);
    background-size: cover, 100% auto;
    background-position: center, right 68%;
    padding: 14px 12px;
    min-height: 72px;
    border-radius: 6px;
    margin-bottom: 25px;
}
.service-core-number i { background: #ffffffd9; padding: 8px; border-radius: 5px; }
.service-core-system { background-color: #172a46; }
.service-core-system .service-core-number {
    background-image: linear-gradient(90deg, #101e32f5, #101e3266), var(--brand-navy-art);
    color: #aecaff;
}
.service-core-system .service-core-number i { background: #172a46d9; }
@media(max-width:760px) {
    :root {
        --brand-ivory-art: url('../images/studio/pixel-ivory-v1-768.webp');
        --brand-navy-art: url('../images/studio/pixel-navy-v1-768.webp');
        --brand-warm-art: url('../images/studio/pixel-warm-v1-768.webp');
    }
    .page-hero { background-image: linear-gradient(90deg, #f6f5f1fa 0%, #f6f5f1ed 60%, #f6f5f1b8 100%), var(--brand-ivory-art); background-size: cover, auto 105%; }
    .studio-hero { background-image: linear-gradient(90deg, #101e32fa 0%, #101e32f0 60%, #101e32c4 100%), var(--brand-navy-art); }
    .capability-art { height: 155px; flex-basis: 155px; }
    .studio-contact { background-image: linear-gradient(90deg, #fcfaf6f5, #fcfaf6e6), var(--brand-warm-art); }
}
@media(forced-colors:active) {
    .page-hero,.studio-hero,.capability,.studio-standards,.studio-contact,.cta-band,.client-care,.service-core-number { background-image: none; }
}
@media print {
    .page-hero,.studio-hero,.capability,.studio-standards,.studio-contact,.cta-band,.client-care,.service-core-number { background-image: none; }
    .capability-art { display: none; }
}