/*
 * Studio daylight (2026-11-12). The site was one pale blue sheet with white cards.
 * This layer gives it a warm paper ground, three brand voices (cyan, coral, amber; violet and mint
 * for art only), colour that changes down the page, and paper-cut art from assets/art
 * (scripts/art/build-art.mjs). Logical properties only: the site is RTL.
 */
:root {
    --aize-bg: #fbf8f3;
    --aize-paper: #ffffff;
    --aize-paper-strong: #ffffff;
    --aize-ink: #14202b;
    --aize-ink-soft: #51606e;
    --aize-line: #e6ded2;
    --aize-saffron: #ffb020;
    --aize-coral: #ff6b4a;
    --aize-sky: #dff1fb;
    --aize-blush: #ffe9df;
    --art-cyan: #0ea5e9;
    --art-coral: #ff6b4a;
    --art-amber: #ffb020;
    --art-violet: #7c5cff;
    --art-mint: #2dd4bf;
    --aize-shadow: 0 24px 60px rgba(20, 32, 43, 0.1);
    --aize-shadow-soft: 0 14px 30px rgba(20, 32, 43, 0.06);
}

body {
    background: var(--aize-bg);
}

body::before {
    display: none;
}

/* Hero: daylight from the visual's side, the 3D picture standing on a paper-cut backdrop. */
.hero-section,
.page-hero {
    position: relative;
    background:
        radial-gradient(44% 62% at 14% 38%, color-mix(in srgb, var(--art-amber) 26%, transparent), transparent 70%),
        radial-gradient(40% 60% at 0% 78%, color-mix(in srgb, var(--art-cyan) 18%, transparent), transparent 70%),
        radial-gradient(36% 56% at 46% 112%, color-mix(in srgb, var(--art-coral) 14%, transparent), transparent 70%);
}

.hero-section .hero-visual,
.page-hero .hero-visual {
    position: relative;
    isolation: isolate;
    padding: clamp(1rem, 4vw, 2.75rem);
    background: url("../art/hero-backdrop.svg") center / contain no-repeat;
}

.hero-section h1,
.page-hero h1 {
    text-wrap: balance;
}

.eyebrow {
    background: color-mix(in srgb, var(--art-amber) 22%, #ffffff);
    border-color: color-mix(in srgb, var(--art-amber) 45%, transparent);
    color: #7a4a00;
}

.proof-strip li {
    background: #ffffff;
    border-color: var(--aize-line);
}

.proof-strip li:nth-child(4n + 1) { box-shadow: inset 0 -3px 0 var(--art-cyan); }
.proof-strip li:nth-child(4n + 2) { box-shadow: inset 0 -3px 0 var(--art-coral); }
.proof-strip li:nth-child(4n + 3) { box-shadow: inset 0 -3px 0 var(--art-amber); }
.proof-strip li:nth-child(4n + 4) { box-shadow: inset 0 -3px 0 var(--art-violet); }

/* Bands: the page changes colour as you scroll instead of staying one tint. */
.section-shell:nth-of-type(even) {
    background: #ffffff;
}

.section-shell:nth-of-type(4n + 3) {
    background: color-mix(in srgb, var(--art-amber) 9%, var(--aize-bg));
}

.section-shell:nth-of-type(4n + 5) {
    background: color-mix(in srgb, var(--art-mint) 10%, var(--aize-bg));
}

.section-shell:nth-of-type(8n + 7) {
    background: color-mix(in srgb, var(--art-coral) 8%, var(--aize-bg));
}

.section-shell .eyebrow {
    background: color-mix(in srgb, var(--art-cyan) 14%, #ffffff);
    border-color: color-mix(in srgb, var(--art-cyan) 35%, transparent);
    color: #075985;
}

.section-shell:nth-of-type(odd) .eyebrow {
    background: color-mix(in srgb, var(--art-coral) 14%, #ffffff);
    border-color: color-mix(in srgb, var(--art-coral) 35%, transparent);
    color: #9a2f17;
}

/* Cards: white on paper, a coloured edge that cycles, a quiet lift on hover. */
.aize-card {
    background: #ffffff;
    border-block-start: 4px solid var(--art-cyan);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-grid > .aize-card:nth-child(4n + 2) { border-block-start-color: var(--art-coral); }
.card-grid > .aize-card:nth-child(4n + 3) { border-block-start-color: var(--art-amber); }
.card-grid > .aize-card:nth-child(4n + 4) { border-block-start-color: var(--art-violet); }

.aize-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--aize-shadow);
}

.aize-card .feature-index {
    color: var(--art-coral);
}

/* In-page pictures stand on a tilted colour panel. */
.section-shell figure,
.section-shell .section-visual,
.section-shell .split-visual {
    position: relative;
    isolation: isolate;
}

.section-shell figure::before,
.section-shell .section-visual::before,
.section-shell .split-visual::before {
    content: "";
    position: absolute;
    inset: 6% 4%;
    z-index: -1;
    border-radius: 2rem;
    background: color-mix(in srgb, var(--art-cyan) 22%, #ffffff);
    transform: rotate(-2deg);
}

.section-shell:nth-of-type(odd) figure::before,
.section-shell:nth-of-type(odd) .section-visual::before,
.section-shell:nth-of-type(odd) .split-visual::before {
    background: color-mix(in srgb, var(--art-amber) 30%, #ffffff);
    transform: rotate(2deg);
}

/* Closing band: the most colourful moment of the page. */
.section-shell.cta-band {
    padding-block-end: clamp(8rem, 20vw, 15rem);
    background: var(--aize-bg) url("../art/band-final.svg") center bottom / max(100%, 60rem) auto no-repeat;
}

.cta-band-inner {
    background: #ffffff;
    box-shadow: var(--aize-shadow);
}

/* Footer: ink, with a thread of the palette along its top edge. */
.site-footer {
    margin-top: 0;
    border-block-start: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--art-cyan), var(--art-mint), var(--art-amber), var(--art-coral), var(--art-violet)) 1;
    background: #0c1220;
}

@media (max-width: 782px) {
    .hero-section .hero-visual,
    .page-hero .hero-visual {
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aize-card {
        transition: none;
    }

    .aize-card:hover {
        transform: none;
    }
}