/* ============================================================
   CONTACT + WORK + CASE STUDY + LEGAL — pages-figma.css
   Fonts/variables inherit from home.css (:root block)
   ============================================================ */

/* ── Shared page wrapper ───────────────────────────────────── */
.cnt-page-wrapper,
.wrk-page-wrapper,
.cs-page-wrapper,
.csi-page-wrapper,
.leg-page-wrapper {
    font-family: 'Plus Jakarta Sans', 'Proxima Nova', sans-serif;
    overflow-x: hidden;
    background: #f3f2f8;
    padding: 20px 0 0;
}

/* Hide Salient header/footer on new templates */
body.page-template-page-contact-figma #header-outer,
body.page-template-page-contact-figma #header-space,
body.page-template-page-contact-figma #footer-outer,
body.page-template-page-work-figma #header-outer,
body.page-template-page-work-figma #header-space,
body.page-template-page-work-figma #footer-outer,
body.page-template-page-case-study-figma #header-outer,
body.page-template-page-case-study-figma #header-space,
body.page-template-page-case-study-figma #footer-outer,
body.page-template-page-legal-figma #header-outer,
body.page-template-page-legal-figma #header-space,
body.page-template-page-legal-figma #footer-outer {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.cnt-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #0d0630 0%, #1f0b55 25%, #3a1278 50%, #1a0945 75%, #0a051e 100%);
    max-width: 1240px;
    margin: 88px auto 0;
    border-radius: 22px;
    padding: 0;
}

.cnt-hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cnt-hero-blob-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #5C1CD1 0%, rgba(92,28,209,0) 70%);
    top: -160px; left: -80px;
    opacity: 0.35;
}
.cnt-hero-blob-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #3a12a0 0%, rgba(58,18,160,0) 70%);
    bottom: -100px; right: 30%;
    opacity: 0.45;
}
.cnt-hero-blob-3 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, #7B2FDB 0%, rgba(123,47,219,0) 70%);
    top: 10%; right: -60px;
    opacity: 0.3;
}

.cnt-hero-inner {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 48px;
    padding: 64px 56px 64px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
}

/* Left: contact info */
.cnt-hero-left { display: flex; flex-direction: column; gap: 40px; }

.cnt-hero-heading {
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    letter-spacing: -1.5px;
}

.cnt-hero-desc {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.7);
    margin: 0;
    max-width: 440px;
}

.cnt-hero-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.cnt-hero-contact-item {}
.cnt-hero-contact-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
}
.cnt-hero-contact-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: block;
    transition: opacity .2s;
}
.cnt-hero-contact-value:hover { opacity: .75; }

/* Offices */
.cnt-offices-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 16px;
}
.cnt-offices-grid {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.cnt-office {
    min-width: 130px;
}
.cnt-office-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.cnt-office-addr {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,0.6);
}

/* Right: form card */
.cnt-hero-form-card {
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 24px 72px rgba(0,0,0,0.22);
}

.cnt-form-heading {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 20px;
}

.cnt-form-divider {
    height: 1px;
    background: #e5e5ef;
    margin: 0 0 24px;
}

/* Form elements — shared with contact modal */
.cnt-form,
.sl-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cnt-form-select-wrap,
.sl-modal-select-wrap {
    position: relative;
}
.cnt-form-select,
.sl-modal-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;
    color: #888;
    border: 1px solid #e0e0ec;
    border-radius: 8px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color .2s;
}
.cnt-form-select:focus,
.sl-modal-select:focus { border-color: #4B23B0; color: #1a1a2e; }

.cnt-form-select-arrow,
.sl-modal-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaa;
    font-size: 12px;
}

.cnt-form-row,
.sl-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cnt-form-field,
.sl-modal-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cnt-form-input,
.sl-modal-input {
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a2e;
    border: none;
    border-bottom: 1px solid #e0e0ec;
    background: transparent;
    outline: none;
    transition: border-color .2s;
    border-radius: 0;
}
.cnt-form-input::placeholder,
.sl-modal-input::placeholder { color: #aab; font-size: 13.5px; }
.cnt-form-input:focus,
.sl-modal-input:focus { border-bottom-color: #4B23B0; }

.cnt-form-textarea,
.sl-modal-textarea {
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a2e;
    border: none;
    border-bottom: 1px solid #e0e0ec;
    background: transparent;
    outline: none;
    resize: none;
    min-height: 72px;
    transition: border-color .2s;
    border-radius: 0;
}
.cnt-form-textarea::placeholder,
.sl-modal-textarea::placeholder { color: #aab; font-size: 13.5px; }
.cnt-form-textarea:focus,
.sl-modal-textarea:focus { border-bottom-color: #4B23B0; }

.cnt-form-submit,
.sl-modal-submit {
    align-self: flex-end;
    margin-top: 8px;
    padding: 12px 28px;
    background: #1a1a2e;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background .2s, transform .15s;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
}
.cnt-form-submit:hover,
.sl-modal-submit:hover { background: #2d1e6b; transform: translateX(2px); }

body.page-template-page-contact-figma .cnt-hero-form-card button.cnt-form-submit[type="submit"] {
    border-radius: 999px !important;
    background: #252525 !important;
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', 'Proxima Nova', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

/* GF override inside contact card */
.cnt-hero-form-card .gform_wrapper,
.sl-modal-inner .gform_wrapper {
    margin: 0 !important;
}
.cnt-hero-form-card .gform_wrapper .gform_body,
.sl-modal-inner .gform_wrapper .gform_body { margin: 0; }

/* Desktop contact page fidelity pass. The early contact styles above stay as
   the mobile/tablet fallback; these selectors match the 1440px Figma frame. */
@media (min-width: 1101px) {
    body.page-template-page-contact-figma .cnt-page-wrapper,
    body.page-template-page-contact-figma .cnt-page-wrapper * {
        box-sizing: border-box;
    }

    body.page-template-page-contact-figma .cnt-page-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow-x: hidden;
        background: #f5f4fb;
        font-family: 'Plus Jakarta Sans', 'Proxima Nova', sans-serif;
    }

    body.page-template-page-contact-figma .cnt-hero {
        position: relative;
        max-width: none;
        width: calc(100% - 32px);
        height: 844px;
        margin: 96px 16px 0;
        border-radius: 20px;
        overflow: hidden;
        background:
            radial-gradient(circle 152px at 34% 90%, rgba(126,57,213,.62) 0 51%, rgba(37,29,139,.18) 72%, rgba(126,57,213,0) 73%),
            radial-gradient(circle 392px at 52% 62%, rgba(98,83,204,.5) 0 55%, rgba(98,83,204,0) 56%),
            radial-gradient(circle 430px at 104% 73%, rgba(78,139,207,.46) 0 55%, rgba(78,139,207,0) 56%),
            radial-gradient(circle 290px at 78% 13%, rgba(111,150,218,.38) 0 61%, rgba(111,150,218,0) 62%),
            radial-gradient(circle 640px at 8% 30%, rgba(171,43,222,.68) 0 49%, rgba(171,43,222,0) 50%),
            radial-gradient(circle 560px at 47% 18%, rgba(255,255,255,.16) 0 55%, rgba(255,255,255,0) 56%),
            linear-gradient(112deg, #811fd0 0%, #4d24ba 43%, #08588e 100%);
    }

    body.page-template-page-contact-figma .cnt-hero-blob {
        display: none;
    }

    body.page-template-page-contact-figma .cnt-hero-inner {
        position: relative;
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body.page-template-page-contact-figma .cnt-hero-left {
        position: absolute;
        left: 68px;
        top: 106px;
        width: 620px;
        display: flex;
        flex-direction: column;
        gap: 39px;
    }

    body.page-template-page-contact-figma .cnt-hero-heading {
        width: 520px;
        margin: 0;
        color: #fff;
        font-size: 60px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0;
    }

    body.page-template-page-contact-figma .cnt-hero-desc {
        max-width: 486px;
        margin: 22px 0 0 !important;
        padding: 0;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.35;
    }

    body.page-template-page-contact-figma .cnt-hero-contact-row {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        width: 608px;
        padding-bottom: 35px;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }

    body.page-template-page-contact-figma .cnt-hero-contact-label,
    body.page-template-page-contact-figma .cnt-offices-label {
        margin: 0 0 10px;
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
        letter-spacing: 0;
        text-transform: none;
    }

    body.page-template-page-contact-figma .cnt-hero-contact-value {
        color: #fff;
        font-size: 25px;
        font-weight: 400;
        line-height: 1.25;
        letter-spacing: 0;
    }

    body.page-template-page-contact-figma .cnt-offices-label {
        margin-bottom: 20px;
    }

    body.page-template-page-contact-figma .cnt-offices-grid {
        display: grid;
        grid-template-columns: 200px 190px 185px;
        gap: 30px;
        width: 635px;
    }

    body.page-template-page-contact-figma .cnt-office {
        min-width: 0;
    }

    body.page-template-page-contact-figma .cnt-office-name {
        margin: 0 0 10px;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
    }

    body.page-template-page-contact-figma .cnt-office-addr {
        color: #fff;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
    }

    body.page-template-page-contact-figma .cnt-hero-form-card {
        position: absolute;
        left: 714px;
        top: 68px;
        width: 598px;
        height: 708px;
        padding: 42px 56px 44px;
        border-radius: 24px;
        background: #fff;
        box-shadow: none;
    }

    body.page-template-page-contact-figma .cnt-form-heading {
        margin: 0 0 24px;
        color: #000;
        font-size: 32px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0;
    }

    body.page-template-page-contact-figma .cnt-form-divider {
        margin: 0 0 35px;
        background: #252525;
    }

    body.page-template-page-contact-figma .cnt-form {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    body.page-template-page-contact-figma .cnt-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 62px;
    }

    body.page-template-page-contact-figma .cnt-form-select-wrap {
        height: 36px;
        border-bottom: 1px solid #d8d8d8;
    }

    body.page-template-page-contact-figma .cnt-form-select-text {
        display: block;
        color: #595959;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
        pointer-events: none;
    }

    body.page-template-page-contact-figma .cnt-form-select,
    body.page-template-page-contact-figma .cnt-form-input,
    body.page-template-page-contact-figma .cnt-form-textarea {
        width: 100%;
        min-height: 36px;
        padding: 0 0 12px;
        border: 0 !important;
        border-bottom: 1px solid #d8d8d8 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #595959;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
    }

    body.page-template-page-contact-figma .cnt-hero-form-card select.cnt-form-select {
        border-width: 0 0 1px !important;
        border-style: solid !important;
        border-color: #d8d8d8 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    body.page-template-page-contact-figma .cnt-form-select {
        position: absolute;
        inset: 0;
        height: 36px;
        appearance: none;
        -webkit-appearance: none;
        opacity: 0;
    }

    body.page-template-page-contact-figma .cnt-form-select[hidden] {
        display: none !important;
    }

    body.page-template-page-contact-figma .cnt-form-select-wrap .fancy-select-wrap,
    body.page-template-page-contact-figma .cnt-form-select-wrap .select2 {
        display: none !important;
    }

    body.page-template-page-contact-figma .cnt-form-input::placeholder,
    body.page-template-page-contact-figma .cnt-form-textarea::placeholder {
        color: #595959;
        opacity: 1;
        font-size: 14px;
    }

    body.page-template-page-contact-figma .cnt-form-select-arrow {
        right: 0;
        color: #252525;
        font-size: 15px;
    }

    body.page-template-page-contact-figma .cnt-form-textarea {
        min-height: 63px;
        resize: none;
    }

    body.page-template-page-contact-figma .cnt-form-submit {
        align-self: flex-end;
        width: 133px;
        height: 48px;
        margin-top: 0;
        padding: 0 23px;
        justify-content: center;
        border: 0 !important;
        border-radius: 999px !important;
        background: #252525 !important;
        color: #fff !important;
        box-shadow: none !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
    }

    body.page-template-page-contact-figma .cnt-hero-form-card button.cnt-form-submit[type="submit"] {
        border-radius: 999px !important;
        font-family: 'Plus Jakarta Sans', 'Proxima Nova', sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-transform: none !important;
    }

    body.page-template-page-contact-figma .cnt-form > div:last-child {
        display: flex;
        justify-content: flex-end;
        margin-top: -20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   WORK / PORTFOLIO PAGE
═══════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.wrk-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #0d0630 0%, #1f0b55 25%, #3a1278 50%, #1a0945 75%, #0a051e 100%);
    max-width: 1240px;
    margin: 88px auto 0;
    border-radius: 22px;
}

.wrk-hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.wrk-hero-blob-1 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, #5C1CD1 0%, rgba(92,28,209,0) 70%);
    top: -140px; right: 8%;
    opacity: 0.45;
}
.wrk-hero-blob-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #3a12a0 0%, rgba(58,18,160,0) 70%);
    bottom: -80px; right: 28%;
    opacity: 0.35;
}

.wrk-hero-inner {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 58px 56px 56px;
    max-width: 1240px;
    margin: 0 auto;
}

.wrk-hero-content { flex: 1 1 auto; max-width: 560px; }

.wrk-hero-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 16px;
}

.wrk-hero-heading {
    font-size: clamp(36px, 4.5vw, 54px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 20px;
}

.wrk-hero-desc {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.wrk-hero-photos {
    flex: 0 0 auto;
    position: relative;
    width: 340px;
    height: 260px;
}
.wrk-hero-photo {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}
.wrk-hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.wrk-hero-photo-a {
    width: 200px; height: 220px;
    top: 0; left: 0;
    z-index: 2;
}
.wrk-hero-photo-b {
    width: 180px; height: 190px;
    bottom: 0; right: 0;
    z-index: 3;
}

/* ── Filters + Grid section ────────────────────────────────── */
.wrk-main-section {
    max-width: 1240px;
    margin: 24px auto;
    padding: 0 20px;
}

.wrk-filters-bar {
    background: #fff;
    border-radius: 50px;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.wrk-filter-btn {
    padding: 9px 22px;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #555;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.wrk-filter-btn:hover { background: #f0eeff; color: #4B23B0; }
.wrk-filter-btn.is-active {
    background: #1a1a2e;
    color: #fff;
}

/* Project grid */
.wrk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.wrk-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
    display: block;
}
.wrk-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.13);
}
.wrk-card.is-hidden { display: none; }

.wrk-card-img {
    aspect-ratio: 16/10;
    background: #e8e5f4;
    overflow: hidden;
}
.wrk-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.wrk-card:hover .wrk-card-img img { transform: scale(1.03); }

.wrk-card-body {
    padding: 18px 20px 20px;
}
.wrk-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.wrk-card-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6B4EFF;
    background: #f0eeff;
    border-radius: 50px;
    padding: 3px 10px;
}
.wrk-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.35;
}
.wrk-card-subtitle {
    font-size: 13px;
    color: #888;
    margin: 4px 0 0;
}

/* Load more */
.wrk-load-more-wrap {
    text-align: center;
    margin-bottom: 16px;
}
.wrk-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: #1a1a2e;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.wrk-load-more-btn:hover { border-color: #4B23B0; background: #f5f2ff; }
.wrk-load-more-btn.is-hidden { display: none; }

/* ── Work CTA ──────────────────────────────────────────────── */
.wrk-cta-section {
    max-width: 1240px;
    margin: 20px auto 0;
    background: linear-gradient(140deg, #0d0630 0%, #1f0b55 40%, #3a1278 100%);
    border-radius: 22px;
    padding: 56px 56px;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.wrk-cta-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.wrk-cta-blob-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #5C1CD1 0%, transparent 70%);
    right: -80px; bottom: -80px;
    opacity: 0.4;
}

.wrk-cta-mascot {
    width: 180px;
    flex-shrink: 0;
}
.wrk-cta-mascot img { width: 100%; display: block; }

.wrk-cta-body {
    position: relative;
    z-index: 2;
    flex: 1;
}
.wrk-cta-heading {
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.8px;
}
.wrk-cta-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    margin: 0 0 28px;
    max-width: 480px;
    line-height: 1.6;
}
.wrk-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #fff;
    color: #1a1a2e;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 50px;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.wrk-cta-btn:hover { background: #f0eeff; transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════
   CASE STUDY (INTERNAL) PAGE
═══════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.cs-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #040d2a 0%, #0d1a4a 35%, #142060 65%, #0a1235 100%);
    max-width: 1240px;
    margin: 88px auto 0;
    border-radius: 22px;
}

.cs-hero-blob {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.cs-hero-blob-1 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, #1a3a9a 0%, transparent 70%);
    top: -120px; right: 10%;
    opacity: 0.5;
}
.cs-hero-blob-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, #0d2870 0%, transparent 70%);
    bottom: -60px; left: 20%;
    opacity: 0.4;
}

.cs-hero-inner {
    position: relative;
    z-index: 10;
    padding: 56px 56px 0;
    max-width: 1240px;
    margin: 0 auto;
}

.cs-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 24px;
}
.cs-hero-sep { opacity: 0.4; }

.cs-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.cs-hero-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.15);
}

.cs-hero-heading {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin: 0 0 16px;
    max-width: 640px;
}

.cs-hero-client {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 40px;
    font-weight: 500;
}

.cs-hero-img-wrap {
    margin-top: 40px;
    text-align: center;
}
.cs-hero-img-wrap img {
    max-height: 380px;
    max-width: 100%;
    border-radius: 14px 14px 0 0;
    display: inline-block;
    object-fit: contain;
}

/* ── Challenge section ─────────────────────────────────────── */
.cs-challenge-section {
    max-width: 1240px;
    margin: 24px auto;
    background: #fff;
    border-radius: 22px;
    padding: 52px 56px;
}

.cs-challenge-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #4B23B0;
    margin-bottom: 16px;
}
.cs-challenge-heading {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 20px;
    letter-spacing: -0.8px;
}
.cs-challenge-text {
    font-size: 16px;
    line-height: 1.7;
    color: #4A4A6A;
    max-width: 780px;
}

/* ── Feature sections (alternating) ───────────────────────── */
.cs-section {
    max-width: 1240px;
    margin: 20px auto;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
}

.cs-section-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 380px;
}
.cs-section--dark {
    background: linear-gradient(145deg, #040d2a 0%, #0d1a4a 50%, #142060 100%);
}
.cs-section--dark .cs-section-text-body { background: transparent; }
.cs-section--dark .cs-section-label { color: rgba(255,255,255,0.45); }
.cs-section--dark .cs-section-heading { color: #fff; }
.cs-section--dark .cs-section-desc { color: rgba(255,255,255,0.7); }
.cs-section--dark .cs-section-bullet::before { background: rgba(255,255,255,0.5); }
.cs-section--dark .cs-section-bullet { color: rgba(255,255,255,0.75); }

.cs-section-img {
    overflow: hidden;
    background: #e8e5f4;
}
.cs-section-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.cs-section-text-body {
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    background: #fff;
}

.cs-section--reversed .cs-section-inner {
    direction: rtl;
}
.cs-section--reversed .cs-section-text-body {
    direction: ltr;
}

.cs-section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #4B23B0;
}
.cs-section-heading {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.cs-section-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #4A4A6A;
    margin: 0;
}
.cs-section-bullets {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-section-bullet {
    font-size: 14px;
    line-height: 1.6;
    color: #4A4A6A;
    padding-left: 20px;
    position: relative;
}
.cs-section-bullet::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4B23B0;
}

/* ── Case Study CTA ────────────────────────────────────────── */
.cs-cta-section {
    max-width: 1240px;
    margin: 20px auto 0;
    background: linear-gradient(140deg, #0d0630 0%, #1f0b55 40%, #3a1278 100%);
    border-radius: 22px;
    padding: 56px 56px;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
}
.cs-cta-blob {
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, #5C1CD1 0%, transparent 70%);
    right: -80px; bottom: -80px;
    opacity: 0.4;
    pointer-events: none;
}
.cs-cta-mascot { width: 180px; flex-shrink: 0; }
.cs-cta-mascot img { width: 100%; display: block; }
.cs-cta-body { position: relative; z-index: 2; flex: 1; }
.cs-cta-heading {
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.8px;
}
.cs-cta-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    margin: 0 0 28px;
    max-width: 480px;
    line-height: 1.6;
}
.cs-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #fff;
    color: #1a1a2e;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 50px;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.cs-cta-btn:hover { background: #f0eeff; transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO CASE STUDY — FIGMA INTERNAL PAGE
═══════════════════════════════════════════════════════════ */

.csi-page-wrapper,
.csi-page-wrapper * {
    box-sizing: border-box;
}

.csi-page-wrapper {
    --csi-inner: 1240px;
    --csi-pad: 16px;
    --csi-radius: 20px;
    background: #fff;
    color: #050505;
    padding: 0;
    font-family: 'Plus Jakarta Sans', 'Proxima Nova', Arial, sans-serif;
}

.csi-page-wrapper p,
.csi-page-wrapper h1,
.csi-page-wrapper h2,
.csi-page-wrapper h3 {
    padding-bottom: 0;
}

.csi-hero {
    position: relative;
    height: 516px;
    min-height: 516px;
    margin: 96px var(--csi-pad) 0;
    border-radius: var(--csi-radius);
    overflow: hidden;
    background:
        radial-gradient(circle at 45% 55%, rgba(29, 116, 150, .28) 0 12%, rgba(29, 116, 150, 0) 38%),
        linear-gradient(110deg, #092646 0%, #071f3a 52%, #052644 100%);
}

.csi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 29, 55, .08) 0%, rgba(5, 29, 55, .18) 45%, rgba(5, 29, 55, 0) 72%),
        radial-gradient(circle at 32% 59%, rgba(38, 156, 191, .32) 0 4%, rgba(38, 156, 191, 0) 31%);
    pointer-events: none;
    z-index: 1;
}

.csi-hero-visual {
    position: absolute;
    inset: 0 0 0 auto;
    width: 58%;
    z-index: 0;
}

.csi-hero-visual::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 28%;
    background: linear-gradient(90deg, #08233f 0%, rgba(8, 35, 63, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.csi-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.csi-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 68px 70px 58px;
}

.csi-hero-kicker {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 151px;
}

.csi-hero-title {
    max-width: 610px;
    margin: 0 0 24px;
    color: #fff;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: 0;
}

.csi-hero-desc {
    max-width: 700px;
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
}

.csi-intro {
    display: grid;
    grid-template-columns: minmax(0, 840px) 294px;
    gap: 106px;
    max-width: var(--csi-inner);
    margin: 108px auto 80px;
    padding: 0 0;
}

.csi-intro-copy h2 {
    margin: 0 0 24px;
    color: #282828;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0;
}

.csi-intro-text p {
    margin: 0 0 18px;
    color: #282828;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

.csi-intro-tags {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 2px;
}

.csi-tag-group h3 {
    margin: 0 0 21px;
    color: #050505;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.csi-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.csi-tags span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(5, 5, 5, .14);
    border-radius: 999px;
    color: #282828;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.csi-media-bleed {
    width: 100%;
    height: 689px;
    overflow: hidden;
    background: #072340;
}

.csi-media-bleed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csi-case-grid {
    display: grid;
    grid-template-columns: minmax(0, 926px) 294px;
    gap: 20px;
    max-width: var(--csi-inner);
    margin: 100px auto 0;
    align-items: start;
}

.csi-case-grid--single-work {
    margin-top: 0;
}

.csi-main-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.csi-copy-card {
    min-height: 310px;
    border: 1px solid rgba(5, 5, 5, .14);
    border-radius: 28px;
    padding: 61px 64px 48px;
    background: #fff;
}

.csi-copy-card h2 {
    max-width: 660px;
    margin: 0 0 22px;
    color: #050505;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: 0;
}

.csi-copy-card-text p {
    max-width: 660px;
    margin: 0 0 18px;
    color: #282828;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.42;
}

.csi-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 612px;
    padding: 35px 35px 26px;
    border-radius: 24px;
    background: #efedf6;
}

.csi-compare-col {
    padding: 43px 30px 34px 10px;
}

.csi-compare-col--white {
    padding: 43px 40px 34px;
    border-radius: 16px;
    background: #fff;
}

.csi-compare h3 {
    margin: 0 0 35px;
    color: #050505;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
}

.csi-compare p {
    min-height: 65px;
    margin: 0;
    padding: 18px 0 16px;
    border-top: 1px solid rgba(5, 5, 5, .16);
    color: #050505;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
}

.csi-target-card {
    min-height: 294px;
    overflow: hidden;
    border-radius: 12px;
    padding: 68px 64px 56px;
    color: #fff;
    background:
        radial-gradient(circle 520px at 17% 117%, rgba(143, 55, 177, .72) 0 48%, transparent 49%),
        radial-gradient(circle 320px at 55% 0%, rgba(107, 112, 183, .36) 0 58%, transparent 59%),
        radial-gradient(circle 320px at 98% 5%, rgba(42, 51, 151, .56) 0 58%, transparent 59%),
        radial-gradient(circle 310px at 100% 94%, rgba(52, 117, 153, .46) 0 58%, transparent 59%),
        linear-gradient(135deg, #7716cc 0%, #2e20ae 48%, #1d5b88 100%);
}

.csi-target-card h2 {
    margin: 0 0 28px;
    color: #fff;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0;
}

.csi-target-text p {
    max-width: 850px;
    margin: 0 0 18px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

.csi-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.csi-gallery-item,
.csi-framed-media,
.csi-design-media {
    overflow: hidden;
    border-radius: 28px;
    background: #e6edf9;
}

.csi-gallery-item {
    aspect-ratio: 1 / 1;
}

.csi-gallery-item img,
.csi-framed-media img,
.csi-design-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csi-framed-media {
    height: 845px;
    background: #062f61;
}

.csi-framed-media--admin {
    height: 746px;
}

.csi-design-media {
    height: 458px;
    background: #f0eff6;
}

.csi-side-card {
    position: sticky;
    top: 24px;
    min-height: 373px;
    padding: 38px 36px 32px;
    border-radius: 20px;
    background:
        radial-gradient(circle 210px at 104% 51%, rgba(129, 134, 177, .35) 0 58%, transparent 59%),
        radial-gradient(circle 215px at 84% -18%, rgba(131, 91, 180, .55) 0 58%, transparent 59%),
        linear-gradient(145deg, #6d27c6 0%, #2d2294 56%, #25258d 100%);
    color: #fff;
}

.csi-side-person {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 18px;
}

.csi-side-person--no-image {
    grid-template-columns: 1fr;
}

.csi-side-person img {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    object-fit: cover;
}

.csi-side-person strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.csi-side-person span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
}

.csi-side-rule {
    width: 100%;
    height: 1px;
    margin: 34px 0 32px;
    background: rgba(255,255,255,.22);
}

.csi-side-card h2 {
    margin: 0 0 22px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.18;
}

.csi-side-card p {
    margin: 0 0 34px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

.csi-side-card a {
    display: inline-flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 999px;
    background: #fff;
    color: #282828;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.csi-media-bleed--middle {
    height: 693px;
    margin-top: 60px;
}

.csi-case-grid--second {
    margin-top: 100px;
}

.csi-media-bleed--bottom {
    height: 672px;
    margin-top: 60px;
}

.csi-review {
    display: grid;
    grid-template-columns: minmax(0, 510px) minmax(0, 545px);
    justify-content: space-between;
    gap: 70px;
    max-width: var(--csi-inner);
    min-height: 520px;
    margin: 109px auto 0;
    padding: 65px 68px 65px;
    border-radius: 20px;
    background: #f0eff6;
}

.csi-review-label {
    margin-bottom: 28px;
    color: #050505;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.csi-review h2 {
    margin: 0 0 24px;
    color: #050505;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.17;
    letter-spacing: 0;
}

.csi-review-stars {
    margin-bottom: 22px;
    color: #ffb62d;
    font-size: 21px;
    line-height: 1;
    letter-spacing: 4px;
}

.csi-review-text p {
    max-width: 505px;
    margin: 0 0 20px;
    color: #050505;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
}

.csi-review-person {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 20px;
}

.csi-review-person--no-image {
    gap: 0;
}

.csi-review-person img {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
}

.csi-review-person strong {
    display: block;
    color: #050505;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.csi-review-person span {
    display: block;
    margin-top: 8px;
    color: rgba(5,5,5,.55);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.csi-review-image {
    overflow: hidden;
    align-self: center;
    min-height: 389px;
    border-radius: 12px;
    background: #082442;
}

.csi-review-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csi-bottom-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600px;
    gap: 70px;
    align-items: center;
    min-height: 520px;
    margin-top: 112px;
    padding: 0 100px 0;
    background: #f3f2f8;
    overflow: hidden;
}

.csi-bottom-mascot {
    align-self: end;
}

.csi-bottom-mascot img {
    display: block;
    width: min(670px, 100%);
    margin-left: 0;
}

.csi-bottom-mascot video {
    display: block;
    width: min(670px, 100%);
    max-width: 100%;
    margin-left: 0;
}

.csi-bottom-mascot .home-cta-mascot-fallback {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .csi-bottom-mascot video {
        display: none;
    }
    .csi-bottom-mascot .home-cta-mascot-fallback {
        display: block;
    }
}

.csi-bottom-card {
    min-height: 300px;
    padding: 54px 64px;
    border-radius: 12px;
    color: #fff;
    background:
        radial-gradient(circle 265px at 97% 13%, rgba(255,255,255,.13) 0 43%, transparent 44%),
        radial-gradient(circle 405px at 94% 95%, rgba(49, 51, 151, .82) 0 51%, transparent 52%),
        linear-gradient(135deg, #7a20cd 0%, #5c37b8 46%, #2b2b97 100%);
}

.csi-bottom-card h2 {
    max-width: 430px;
    margin: 0 0 26px;
    color: #fff;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: 0;
}

.csi-bottom-card p {
    max-width: 500px;
    margin: 0 0 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

.csi-bottom-card a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 18px;
    padding: 0 25px;
    border-radius: 999px;
    background: #fff;
    color: #282828;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 1280px) {
    .csi-intro,
    .csi-case-grid,
    .csi-review {
        margin-left: 24px;
        margin-right: 24px;
    }
    .csi-case-grid {
        grid-template-columns: minmax(0, 1fr) 294px;
    }
    .csi-bottom-cta {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 48vw);
        padding: 0 48px;
    }
}

@media (max-width: 980px) {
    .csi-hero {
        height: auto;
        min-height: 0;
        margin: 84px 12px 0;
    }
    .csi-hero-visual {
        position: relative;
        width: 100%;
        height: 320px;
        inset: auto;
    }
    .csi-hero-visual::before {
        display: none;
    }
    .csi-hero-content {
        padding: 42px 28px 36px;
    }
    .csi-hero-kicker {
        margin-bottom: 70px;
    }
    .csi-hero-title {
        font-size: 40px;
    }
    .csi-hero-desc {
        font-size: 16px;
    }
    .csi-intro {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 70px;
        margin-bottom: 70px;
    }
    .csi-intro-copy h2,
    .csi-copy-card h2 {
        font-size: 32px;
    }
    .csi-media-bleed,
    .csi-media-bleed--middle,
    .csi-media-bleed--bottom {
        height: auto;
        margin-top: 70px;
    }
    .csi-media-bleed:first-of-type {
        margin-top: 0;
    }
    .csi-media-bleed img {
        height: auto;
        object-fit: contain;
    }
    .csi-case-grid,
    .csi-case-grid--second {
        grid-template-columns: 1fr;
        margin-top: 70px;
    }
    .csi-side-card {
        position: relative;
        top: auto;
        order: -1;
    }
    .csi-copy-card {
        min-height: 0;
        padding: 42px 30px;
    }
    .csi-compare {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .csi-compare-col,
    .csi-compare-col--white {
        padding: 34px 26px;
    }
    .csi-target-card {
        min-height: 0;
        padding: 42px 30px;
    }
    .csi-framed-media,
    .csi-framed-media--admin,
    .csi-design-media {
        height: auto;
    }
    .csi-framed-media img,
    .csi-design-media img {
        height: auto;
        object-fit: contain;
    }
    .csi-review {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 42px 30px;
    }
    .csi-review-image {
        min-height: 0;
    }
    .csi-bottom-cta {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 50px 24px 0;
    }
    .csi-bottom-card {
        order: -1;
        min-height: 0;
        padding: 38px 30px;
    }
}

@media (max-width: 640px) {
    .csi-hero-content {
        padding: 34px 22px 30px;
    }
    .csi-hero-kicker {
        margin-bottom: 48px;
        font-size: 11px;
    }
    .csi-hero-title {
        font-size: 34px;
    }
    .csi-intro,
    .csi-case-grid,
    .csi-review {
        margin-left: 16px;
        margin-right: 16px;
    }
    .csi-intro-copy h2,
    .csi-copy-card h2,
    .csi-review h2,
    .csi-bottom-card h2 {
        font-size: 28px;
    }
    .csi-gallery {
        grid-template-columns: 1fr;
    }
    .csi-compare {
        padding: 12px;
    }
    .csi-compare h3 {
        font-size: 26px;
    }
    .csi-target-card h2 {
        font-size: 28px;
    }
    .csi-compare p {
        min-height: 0;
        font-size: 15px;
    }
    .csi-bottom-cta {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGE (Terms & Conditions / Privacy Policy)
═══════════════════════════════════════════════════════════ */
body.page-template-page-legal-figma,
body.page-template-page-legal-figma #ajax-content-wrap {
    background: #ebe9f8;
}

body.page-template-page-legal-figma .leg-page-wrapper,
body.page-template-page-legal-figma .leg-page-wrapper * {
    box-sizing: border-box;
}

body.page-template-page-legal-figma .leg-page-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(#ebe9f8 0 96px, #fff 96px);
    font-family: 'Plus Jakarta Sans', 'Proxima Nova', sans-serif;
}

body.page-template-page-legal-figma .leg-hero {
    position: relative;
    overflow: hidden;
    max-width: none;
    width: calc(100% - 32px);
    min-height: 269px;
    margin: 96px 16px 0;
    padding: 82px 68px 54px;
    border-radius: 20px;
    background:
        radial-gradient(circle 590px at 3% 0%, rgba(167,81,232,.48) 0 55%, rgba(167,81,232,0) 56%),
        radial-gradient(circle 305px at 59% 5%, rgba(255,255,255,.12) 0 68%, rgba(255,255,255,0) 69%),
        radial-gradient(circle 340px at 78% 59%, rgba(112,143,214,.28) 0 58%, rgba(112,143,214,0) 60%),
        radial-gradient(circle 360px at 51% 116%, rgba(117,98,230,.3) 0 58%, rgba(117,98,230,0) 60%),
        linear-gradient(112deg, #7a18cf 0%, #2d1eb5 48%, #10588d 100%);
}

body.page-template-page-legal-figma .leg-hero-inner {
    position: relative;
    z-index: 10;
    max-width: 980px;
}

body.page-template-page-legal-figma .leg-hero-label,
body.page-template-page-legal-figma .leg-hero-blob {
    display: none;
}

body.page-template-page-legal-figma .leg-hero-title {
    margin: 0 0 22px;
    color: #fff;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0;
    padding-bottom: 0;
}

body.page-template-page-legal-figma .leg-hero-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding-bottom: 0;
}

body.page-template-page-legal-figma .leg-hero-updated svg {
    width: 18px;
    height: 18px;
}

/* ── Content card ──────────────────────────────────────────── */
body.page-template-page-legal-figma .leg-content-wrap {
    max-width: 1028px;
    margin: 107px auto 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

body.page-template-page-legal-figma .leg-content {
    max-width: none;
    color: #050505;
}

body.page-template-page-legal-figma .leg-content h2 {
    margin: 60px 0 16px;
    color: #050505;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0;
    padding-bottom: 0;
}

body.page-template-page-legal-figma .leg-content h2:first-child {
    margin-top: 0;
}

body.page-template-page-legal-figma .leg-content h3 {
    margin: 50px 0 16px;
    color: #050505;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0;
    padding-bottom: 0;
}

body.page-template-page-legal-figma .leg-content p {
    margin: 0 0 20px;
    color: #050505;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    padding-bottom: 0;
}

body.page-template-page-legal-figma .leg-content ul,
body.page-template-page-legal-figma .leg-content ol {
    margin: 0 0 24px;
    padding: 0 0 0 24px;
}

body.page-template-page-legal-figma .leg-content li {
    margin: 0 0 4px;
    color: #050505;
    font-size: 16px;
    line-height: 1.45;
}

body.page-template-page-legal-figma .leg-content a {
    color: #7d48e4;
    text-decoration: underline;
}
body.page-template-page-legal-figma .leg-content a:hover { opacity: .75; }

.leg-toc {
    background: #f7f6fd;
    border-left: 3px solid #4B23B0;
    border-radius: 0 12px 12px 0;
    padding: 24px 28px;
    margin-bottom: 36px;
}
.leg-toc-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4B23B0;
    margin-bottom: 12px;
}
.leg-toc-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.leg-toc-list a {
    font-size: 14px;
    color: #1a1a2e;
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}
.leg-toc-list a:hover { color: #4B23B0; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    body.page-template-page-contact-figma,
    body.page-template-page-contact-figma .cnt-page-wrapper {
        overflow-x: hidden;
    }

    body.page-template-page-contact-figma .cnt-page-wrapper,
    body.page-template-page-contact-figma .cnt-page-wrapper * {
        box-sizing: border-box;
    }

    .cnt-page-wrapper,
    .wrk-page-wrapper,
    .cs-page-wrapper,
    .leg-page-wrapper {
        padding: 12px 0 0;
    }

    /* Contact */
    .cnt-hero {
        width: calc(100% - 24px);
        max-width: none;
        margin: 72px 12px 0;
    }
    .cnt-hero-inner {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 36px 24px 36px;
        gap: 32px;
    }
    .cnt-hero-heading {
        font-size: 34px;
        line-height: 1.18;
        letter-spacing: 0;
    }
    .cnt-hero-desc {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .cnt-hero-contact-row { grid-template-columns: 1fr; gap: 20px; }
    .cnt-offices-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cnt-office,
    .cnt-office-addr {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .cnt-hero-form-card {
        width: 100%;
        max-width: 100%;
        padding: 32px 24px;
        border-radius: 18px;
    }
    .cnt-form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cnt-form-select-wrap {
        min-height: 40px;
        border-bottom: 1px solid #e0e0ec;
    }
    .cnt-form-select-text {
        display: block;
        color: #888;
        font-size: 14px;
        line-height: 1.35;
        padding: 0 0 10px;
    }
    .cnt-form-select-wrap .fancy-select-wrap,
    .cnt-form-select-wrap .select2 {
        display: none !important;
    }
    .cnt-form-input,
    .cnt-form-textarea {
        background: transparent !important;
        box-shadow: none !important;
    }
    body.page-template-page-contact-figma .cnt-form > div:last-child {
        width: 100%;
        display: flex;
    }
    body.page-template-page-contact-figma .cnt-hero-form-card button.cnt-form-submit[type="submit"] {
        align-self: stretch;
        justify-content: center;
        width: 100%;
        min-height: 50px;
        margin-top: 6px;
        padding: 0 22px;
    }

    /* Work */
    .wrk-hero { margin: 72px 12px 0; }
    .wrk-hero-inner { flex-direction: column; padding: 36px 24px 36px; gap: 28px; }
    .wrk-hero-photos { display: none; }
    .wrk-main-section { padding: 0 12px; }
    .wrk-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .wrk-cta-section { margin: 12px 12px 0; padding: 36px 24px; flex-direction: column; border-radius: 18px; }
    .wrk-cta-mascot { width: 120px; }

    /* Case study */
    .cs-hero { margin: 72px 12px 0; }
    .cs-hero-inner { padding: 36px 24px 0; }
    .cs-challenge-section { margin: 12px 12px; padding: 36px 24px; border-radius: 18px; }
    .cs-section { margin: 12px 12px; border-radius: 18px; }
    .cs-section-inner { grid-template-columns: 1fr; direction: ltr !important; }
    .cs-section-img { min-height: 220px; }
    .cs-section-text-body { padding: 32px 24px; }
    .cs-cta-section { margin: 12px 12px 0; padding: 36px 24px; flex-direction: column; border-radius: 18px; }
    .cs-cta-mascot { width: 120px; }

    /* Legal */
    .leg-hero { margin: 72px 12px 0; padding: 36px 24px; border-radius: 18px; }
    .leg-content-wrap { margin: 12px 12px 0; padding: 36px 24px; border-radius: 18px; }
}

@media (max-width: 600px) {
    .wrk-grid { grid-template-columns: 1fr; }
    .wrk-filters-bar { flex-wrap: wrap; border-radius: 14px; }
    .cnt-hero-contact-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    body.page-template-page-legal-figma .leg-page-wrapper {
        padding: 0;
        background: linear-gradient(#ebe9f8 0 90px, #fff 90px);
    }

    body.page-template-page-legal-figma .leg-hero {
        width: calc(100% - 24px);
        min-height: 360px;
        margin: 90px 12px 0;
        padding: 72px 24px 42px;
        border-radius: 18px;
    }

    body.page-template-page-legal-figma .leg-hero-inner {
        max-width: 100%;
    }

    body.page-template-page-legal-figma .leg-hero-title {
        max-width: 100%;
        margin-bottom: 24px;
        font-size: 46px;
        line-height: 1.16;
    }

    body.page-template-page-legal-figma .leg-hero-updated {
        font-size: 14px;
    }

    body.page-template-page-legal-figma .leg-content-wrap {
        width: calc(100% - 32px);
        max-width: none;
        margin: 72px auto 0;
        padding: 0;
        border-radius: 0;
    }

    body.page-template-page-legal-figma .leg-content h2,
    body.page-template-page-legal-figma .leg-content h3 {
        font-size: 30px;
    }
}

@media (max-width: 430px) {
    body.page-template-page-legal-figma .leg-hero-title {
        font-size: 42px;
    }
}

/* ═══════════════════════════════════════════════════════════
   WORK PAGE — FIGMA REFINEMENT
═══════════════════════════════════════════════════════════ */
body.page-template-page-work-figma,
body.page-template-page-work-figma #ajax-content-wrap {
    background: #ebe9f8;
}

body.page-template-page-work-figma .wrk-page-wrapper,
body.page-template-page-work-figma .wrk-page-wrapper * {
    box-sizing: border-box;
}

body.page-template-page-work-figma .wrk-page-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(#ebe9f8 0 96px, #fff 96px 3628px, #f1f0f8 3628px);
    font-family: 'Plus Jakarta Sans', 'Proxima Nova', sans-serif;
}

body.page-template-page-work-figma .wrk-hero {
    position: relative;
    max-width: none;
    width: calc(100% - 32px);
    height: 502px;
    margin: 96px 16px 0;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle 590px at 3% 0%, rgba(167,81,232,.48) 0 55%, rgba(167,81,232,0) 56%),
        radial-gradient(circle 430px at 56% -6%, rgba(255,255,255,.14) 0 72%, rgba(255,255,255,0) 73%),
        radial-gradient(circle 360px at 75% 28%, rgba(119,153,217,.38) 0 58%, rgba(119,153,217,0) 60%),
        radial-gradient(circle 420px at 50% 100%, rgba(117,98,230,.38) 0 58%, rgba(117,98,230,0) 60%),
        radial-gradient(circle 360px at 95% 92%, rgba(81,133,211,.42) 0 58%, rgba(81,133,211,0) 60%),
        linear-gradient(112deg, #7a18cf 0%, #2d1eb5 48%, #10588d 100%);
}

body.page-template-page-work-figma .wrk-hero-blob {
    display: none;
}

body.page-template-page-work-figma .wrk-hero-inner {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
}

body.page-template-page-work-figma .wrk-hero-content {
    position: absolute;
    left: 68px;
    top: 84px;
    width: 520px;
    max-width: none;
}

body.page-template-page-work-figma .wrk-hero-heading {
    max-width: 360px;
    margin: 0 0 20px;
    color: #fff;
    font-size: 58px;
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: 0;
}

body.page-template-page-work-figma .wrk-hero-desc {
    max-width: 520px;
    margin: 0 0 32px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    padding-bottom: 0;
}

body.page-template-page-work-figma .wrk-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 141px;
    height: 49px;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    color: #252525;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform .15s, opacity .2s;
}

body.page-template-page-work-figma .wrk-hero-btn:hover {
    opacity: .9;
    transform: translateX(2px);
}

body.page-template-page-work-figma .wrk-hero-photos {
    position: static;
    width: auto;
    height: auto;
}

body.page-template-page-work-figma .wrk-hero-photo {
    position: absolute;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: none;
}

body.page-template-page-work-figma .wrk-hero-photo-a {
    left: 698px;
    top: 134px;
    width: 296px;
    height: 297px;
    z-index: 2;
}

body.page-template-page-work-figma .wrk-hero-photo-b {
    left: 1044px;
    top: 71px;
    right: auto;
    bottom: auto;
    width: 296px;
    height: 298px;
    z-index: 3;
}

body.page-template-page-work-figma .wrk-main-section {
    max-width: 1240px;
    margin: 100px auto 0;
    padding: 0;
}

body.page-template-page-work-figma .wrk-filters-bar {
    display: inline-flex;
    gap: 11px;
    align-items: center;
    margin: 0 0 48px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.page-template-page-work-figma .wrk-filter-btn {
    min-height: 34px;
    padding: 0 18px;
    border: 1px solid #dedee7 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #252525 !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

body.page-template-page-work-figma .wrk-filter-btn.is-active,
body.page-template-page-work-figma .wrk-filter-btn:hover {
    border-color: #252525 !important;
    background: #fff !important;
    color: #252525 !important;
}

body.page-template-page-work-figma .wrk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
}

body.page-template-page-work-figma .wrk-card {
    min-height: 483px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f0f8;
    box-shadow: none;
    text-decoration: none;
    transform: none;
}

body.page-template-page-work-figma .wrk-card:hover {
    transform: none;
    box-shadow: none;
}

body.page-template-page-work-figma .wrk-card-img {
    height: 300px;
    aspect-ratio: auto;
    background: #e5e2f1;
}

body.page-template-page-work-figma .wrk-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

body.page-template-page-work-figma .wrk-card:hover .wrk-card-img img {
    transform: none;
}

body.page-template-page-work-figma .wrk-card-body {
    height: 183px;
    padding: 31px 32px 28px;
}

body.page-template-page-work-figma .wrk-card-title {
    margin: 0 0 10px;
    color: #252525;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0;
}

body.page-template-page-work-figma .wrk-card-subtitle {
    max-width: 342px;
    margin: 0 0 16px;
    color: #4c4c4c;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    padding-bottom: 0;
}

body.page-template-page-work-figma .wrk-card-tags {
    gap: 8px;
    margin: 0;
}

body.page-template-page-work-figma .wrk-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 13px;
    border-radius: 999px;
    background: #e6e4ee;
    color: #25213d;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.page-template-page-work-figma .wrk-load-more-wrap {
    margin: 62px 0 0;
    text-align: center;
}

body.page-template-page-work-figma .wrk-load-more-btn {
    width: 126px;
    height: 48px;
    padding: 0;
    border: 1px solid #252525;
    border-radius: 999px;
    background: #fff;
    color: transparent;
    font-size: 0;
    box-shadow: none;
}

body.page-template-page-work-figma .wrk-load-more-btn::after {
    content: none;
}

body.page-template-page-work-figma .wrk-cta-section {
    position: relative;
    max-width: none;
    min-height: 342px;
    margin: 249px 0 0;
    padding: 0;
    border-radius: 0;
    background: #f1f0f8;
    display: block;
    overflow: visible;
}

body.page-template-page-work-figma .wrk-cta-blob {
    display: none;
}

body.page-template-page-work-figma .wrk-cta-mascot {
    position: absolute;
    left: 190px;
    top: -50px;
    width: 480px;
    z-index: 1;
}

body.page-template-page-work-figma .wrk-cta-mascot video,
body.page-template-page-work-figma .wrk-cta-mascot img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    top: 66px;
}

body.page-template-page-work-figma .wrk-cta-mascot .home-cta-mascot-fallback {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    body.page-template-page-work-figma .wrk-cta-mascot .home-cta-mascot-video {
        display: none;
    }

    body.page-template-page-work-figma .wrk-cta-mascot .home-cta-mascot-fallback {
        display: block;
    }
}

body.page-template-page-work-figma .wrk-cta-body {
    position: absolute;
    right: 108px;
    top: 48px;
    width: 600px;
    height: 300px;
    padding: 53px 64px 44px;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle 290px at 93% 1%, rgba(255,255,255,.1) 0 58%, rgba(255,255,255,0) 60%),
        radial-gradient(circle 300px at 86% 97%, rgba(112,143,214,.2) 0 58%, rgba(112,143,214,0) 60%),
        radial-gradient(circle 370px at 28% 4%, rgba(167,81,232,.24) 0 58%, rgba(167,81,232,0) 60%),
        linear-gradient(112deg, #8b18cf 0%, #4a1fc3 55%, #34269a 100%);
}

body.page-template-page-work-figma .wrk-cta-heading {
    max-width: 424px;
    margin: 0 0 18px;
    color: #fff;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
}

body.page-template-page-work-figma .wrk-cta-desc {
    max-width: 470px;
    margin: 0 0 22px;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.42;
    padding-bottom: 0;
}

body.page-template-page-work-figma .wrk-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 133px;
    height: 49px;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    color: #252525;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 900px) {
    body.page-template-page-work-figma .wrk-page-wrapper {
        background: linear-gradient(#ebe9f8 0 90px, #fff 90px);
    }

    body.page-template-page-work-figma .wrk-hero {
        width: calc(100% - 24px);
        height: auto;
        min-height: 560px;
        margin: 90px 12px 0;
        border-radius: 18px;
    }

    body.page-template-page-work-figma .wrk-hero-content {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        padding: 58px 24px 0;
    }

    body.page-template-page-work-figma .wrk-hero-heading {
        font-size: 46px;
        line-height: 1.14;
    }

    body.page-template-page-work-figma .wrk-hero-desc {
        font-size: 16px;
    }

    body.page-template-page-work-figma .wrk-hero-photos {
        display: block;
        position: relative;
        height: 238px;
        margin-top: 30px;
    }

    body.page-template-page-work-figma .wrk-hero-photo-a {
        left: 24px;
        top: 0;
        width: 48%;
        height: 218px;
    }

    body.page-template-page-work-figma .wrk-hero-photo-b {
        left: auto;
        right: 24px;
        top: 24px;
        width: 48%;
        height: 218px;
    }

    body.page-template-page-work-figma .wrk-main-section {
        width: calc(100% - 32px);
        margin: 68px auto 0;
    }

    body.page-template-page-work-figma .wrk-filters-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 28px;
    }

    body.page-template-page-work-figma .wrk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body.page-template-page-work-figma .wrk-card {
        min-height: 0;
    }

    body.page-template-page-work-figma .wrk-card-img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    body.page-template-page-work-figma .wrk-card-body {
        min-height: 170px;
        padding: 24px 22px;
    }

    body.page-template-page-work-figma .wrk-card-title {
        font-size: 22px;
    }

    body.page-template-page-work-figma .wrk-cta-section {
        min-height: 620px;
        margin-top: 120px;
    }

    body.page-template-page-work-figma .wrk-cta-mascot {
        left: 50%;
        top: -74px;
        width: min(460px, 88vw);
        transform: translateX(-50%);
    }

    body.page-template-page-work-figma .wrk-cta-body {
        left: 16px;
        right: 16px;
        top: 300px;
        width: auto;
        min-height: 0;
        padding: 36px 28px;
    }
}

@media (max-width: 600px) {
    body.page-template-page-work-figma .wrk-hero {
        min-height: 610px;
    }

    body.page-template-page-work-figma .wrk-hero-heading {
        font-size: 42px;
    }

    body.page-template-page-work-figma .wrk-grid {
        grid-template-columns: 1fr;
    }

    body.page-template-page-work-figma .wrk-card-body {
        min-height: 0;
    }

    body.page-template-page-work-figma .wrk-cta-heading {
        font-size: 34px;
    }
}