/* =========================================================
   ASAL STUDIO — SERVICE LANDING PAGES
   Unified stylesheet
   ---------------------------------------------------------
   - Matches the Home and What I Do visual system
   - Contains no obsolete summary-card rules
   - Supports English/LTR, Persian/RTL, light and dark modes
========================================================= */

/* =========================================================
   01. PAGE AND SHARED SURFACES
========================================================= */

.service-landing-page {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    min-width: 0;
    padding: 0 0 30px;
    color: var(--text);
}

    .service-landing-page *,
    .service-landing-page *::before,
    .service-landing-page *::after {
        box-sizing: border-box;
    }

.service-landing-hero,
.service-landing-section,
.service-landing-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(210, 178, 112, 0.32);
    border-radius: 36px;
    background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%);
    box-shadow: 0 18px 42px rgba(86, 63, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

    .service-landing-hero::before,
    .service-landing-section::before,
    .service-landing-cta::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -210px;
        right: -150px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(241, 215, 149, 0.34) 0%, rgba(200, 154, 66, 0.13) 45%, transparent 72% );
        pointer-events: none;
    }

    .service-landing-hero > *,
    .service-landing-section > *,
    .service-landing-cta > * {
        position: relative;
        z-index: 1;
    }

/* =========================================================
   02. HERO
========================================================= */

.service-landing-hero {
    top: 6px;
    margin-bottom: 4px;
    padding: 36px 30px 32px;
    box-shadow: 0 24px 70px rgba(75, 53, 28, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.service-landing-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
    align-items: stretch;
    gap: 34px;
    width: 100%;
    min-width: 0;
}

.service-landing-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 8px 0;
}

.service-landing-hero__visual {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* =========================================================
   03. BREADCRUMB, EYEBROW AND TITLES
========================================================= */

.service-breadcrumb,
.service-landing-eyebrow,
.service-landing-section__heading > span,
.service-landing-cta > div > span {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid rgba(200, 154, 66, 0.25);
    border-radius: 999px;
    color: #895f23;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(247, 235, 210, 0.72) );
    box-shadow: 0 9px 22px rgba(84, 58, 28, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.service-breadcrumb {
    margin: 0 0 28px;
    color: #776b5c;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

    .service-breadcrumb a {
        color: #895f23;
        text-decoration: none;
        transition: color 0.28s ease, transform 0.28s ease;
    }

        .service-breadcrumb a:hover {
            color: #5f3f14;
            transform: translateY(-1px);
        }

    .service-breadcrumb span[aria-current="page"] {
        color: #102541;
        font-weight: 900;
    }

.service-landing-eyebrow {
    margin-bottom: 22px;
    padding: 10px 15px;
}

    .service-landing-eyebrow::before,
    .service-landing-section__heading > span::before,
    .service-landing-cta > div > span::before {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f2d586, #b9822d);
        box-shadow: 0 0 0 4px rgba(202, 157, 75, 0.10);
    }

    .service-landing-eyebrow::before {
        width: 9px;
        height: 9px;
        box-shadow: 0 0 0 5px rgba(202, 157, 75, 0.10);
    }

.service-landing-hero h1,
.service-landing-section__heading h2,
.service-landing-cta h2 {
    margin: 0;
    padding: 0 0 0.08em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% );
    background-size: 240% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    animation: amt205GoldFlow 4s ease-in-out infinite alternate;
    text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10);
    font-weight: 950;
    overflow-wrap: normal;
    word-break: normal;
    will-change: background-position;
}

.service-landing-hero h1 {
    max-width: 980px;
    font-size: clamp(48px, 5.4vw, 68px);
    line-height: 1.01;
    letter-spacing: -2.8px;
}

.service-landing-hero__lead {
    max-width: 850px;
    margin: 24px 0 0;
    color: #596b83;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.85;
}

/* =========================================================
   04. BUTTONS
========================================================= */

.service-landing-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.service-landing-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 22px;
    overflow: hidden;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transform: translateY(0) scale(1);
    transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), box-shadow 0.32s cubic-bezier(.2, .8, .2, 1), border-color 0.32s ease, filter 0.32s ease;
}

.service-landing-btn--primary {
    color: #071b33;
    border: 1px solid rgba(255, 241, 184, 0.72);
    background: linear-gradient( 135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% );
    box-shadow: 0 18px 38px rgba(216, 170, 79, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.28) inset, inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

    .service-landing-btn--primary::before {
        content: "";
        position: absolute;
        top: -90%;
        left: -42%;
        width: 42%;
        height: 280%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.45), transparent );
        transform: rotate(25deg) translateX(-160%);
        transition: transform 0.82s cubic-bezier(.2, .8, .2, 1);
        pointer-events: none;
    }

    .service-landing-btn--primary::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.26), transparent 42%, rgba(122, 77, 24, 0.12) );
        pointer-events: none;
    }

    .service-landing-btn--primary:hover {
        transform: translateY(-5px) scale(1.018);
        filter: saturate(1.08) contrast(1.02);
        box-shadow: 0 28px 48px rgba(216, 170, 79, 0.44), 0 0 0 5px rgba(216, 170, 79, 0.14), 0 0 34px rgba(245, 216, 139, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

        .service-landing-btn--primary:hover::before {
            transform: rotate(25deg) translateX(430%);
        }

.service-landing-btn--secondary {
    color: #061522;
    border: 1px solid rgba(216, 170, 79, 0.34);
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.78), rgba(255, 250, 240, 0.58) );
    box-shadow: 0 14px 30px rgba(7, 27, 51, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

    .service-landing-btn--secondary::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 0%, rgba(245, 216, 139, 0.22), transparent 38%), radial-gradient(circle at 90% 100%, rgba(216, 170, 79, 0.16), transparent 42%);
        opacity: 0;
        transition: opacity 0.32s ease;
        pointer-events: none;
    }

    .service-landing-btn--secondary:hover {
        transform: translateY(-4px) scale(1.012);
        border-color: rgba(216, 170, 79, 0.72);
        box-shadow: 0 24px 42px rgba(7, 27, 51, 0.14), 0 0 0 4px rgba(216, 170, 79, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    }

        .service-landing-btn--secondary:hover::before {
            opacity: 1;
        }

/* =========================================================
   05. HERO CAPABILITY PANEL
   Reuses the original What I Do component classes
========================================================= */

.service-capability-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 640px !important;
    height: 100% !important;
    padding: 30px 30px 28px !important;
}

    .service-capability-panel .whatido-capability-panel__top {
        flex: 0 0 auto !important;
        margin: -1px -1px 28px !important;
    }

    .service-capability-panel .whatido-capability-panel__content {
        flex: 0 0 auto !important;
    }

    /* =========================================================
   SERVICE CAPABILITY PANEL — TITLE
========================================================= */

    .service-capability-panel
    .whatido-capability-panel__content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

        .service-capability-panel
        .whatido-capability-panel__content h2 {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin: 0 0 18px !important;
            padding: 0 !important;
            font-size: clamp(32px, 2.35vw, 42px) !important;
            font-weight: 950 !important;
            line-height: 1.08 !important;
            letter-spacing: -1.1px !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

            .service-capability-panel
            .whatido-capability-panel__content h2 span {
                display: block !important;
                width: 100% !important;
            }


/* =========================================================
   SERVICE CAPABILITY PANEL — PERSIAN TITLE
========================================================= */

.service-landing-page[dir="rtl"]
.service-capability-panel
.whatido-capability-panel__content {
    direction: rtl !important;
    text-align: right !important;
}

    .service-landing-page[dir="rtl"]
    .service-capability-panel
    .whatido-capability-panel__content h2 {
        direction: rtl !important;
        text-align: right !important;
        font-size: clamp(28px, 2.05vw, 36px) !important;
        line-height: 1.42 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

        .service-landing-page[dir="rtl"]
        .service-capability-panel
        .whatido-capability-panel__content h2 span {
            display: block !important;
        }


    .service-capability-panel .whatido-capability-list {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: end !important;
        width: 100% !important;
        gap: 11px !important;
        margin-top: 28px !important;
    }

    .service-capability-panel .whatido-capability-item {
        min-height: 86px !important;
        padding: 12px 15px !important;
        border-radius: 18px !important;
    }

    .service-capability-panel .whatido-capability-item__number {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        font-size: 10px !important;
    }

    .service-capability-panel .whatido-capability-item__text strong {
        margin-bottom: 5px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .service-capability-panel .whatido-capability-item__text span {
        font-size: 10.7px !important;
        line-height: 1.45 !important;
    }

/* =========================================================
   06. CONTENT SECTIONS AND HEADINGS
========================================================= */

.service-landing-section {
    padding: 34px 28px 30px;
}

.service-landing-section__heading {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
}

    .service-landing-section__heading > span,
    .service-landing-cta > div > span {
        margin-bottom: 16px;
    }

    .service-landing-section__heading h2 {
        width: 100%;
        max-width: 1050px;
        font-size: clamp(34px, 4vw, 54px);
        line-height: 1.06;
        letter-spacing: -1.6px;
    }

    .service-landing-section__heading > p {
        max-width: 880px;
        margin: 12px 0 0;
        color: #65758d;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.75;
    }

/* =========================================================
   07. OVERVIEW
========================================================= */

.service-landing-overview {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.35fr);
    align-items: start;
    gap: 30px;
}

    .service-landing-overview .service-landing-section__heading {
        margin-bottom: 0;
    }

.service-landing-overview__content {
    display: grid;
    gap: 12px;
    min-width: 0;
}

    .service-landing-overview__content p {
        margin: 0;
        padding: 15px 18px;
        border: 1px solid rgba(217, 194, 156, 0.55);
        border-radius: 19px;
        color: #64748b;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(247, 241, 232, 0.96) );
        box-shadow: 0 13px 28px rgba(83, 58, 30, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.93);
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.8;
    }

/* =========================================================
   08. SHARED CARD SYSTEM
========================================================= */

.service-deliverables-grid,
.service-process-grid,
.service-applications-grid,
.service-value-grid {
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.service-deliverables-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-process-grid,
.service-applications-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-deliverable-card,
.service-process-card,
.service-application-card,
.service-value-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: auto;
    overflow: hidden;
    border: 1px solid rgba(217, 194, 156, 0.55);
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(247, 241, 232, 0.96) );
    box-shadow: 0 13px 28px rgba(83, 58, 30, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.93);
    transform: translate3d(0, 0, 0);
    transition: transform 0.55s cubic-bezier(.22, 1, .36, 1), border-color 0.44s ease, box-shadow 0.48s ease, background 0.48s ease;
    backface-visibility: hidden;
}

    .service-deliverable-card::before,
    .service-process-card::before,
    .service-application-card::before,
    .service-value-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 38px;
        right: 38px;
        height: 3px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient( 90deg, transparent, #efd586, #bd8430, #efd586, transparent );
        opacity: 0.72;
        transition: left 0.55s cubic-bezier(.22, 1, .36, 1), right 0.55s cubic-bezier(.22, 1, .36, 1), opacity 0.42s ease;
    }

    .service-deliverable-card:hover,
    .service-process-card:hover,
    .service-application-card:hover,
    .service-value-card:hover {
        transform: translate3d(0, -7px, 0) scale(1.01);
        border-color: rgba(207, 166, 91, 0.56);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.95), rgba(250, 244, 234, 0.98) );
        box-shadow: 0 25px 45px rgba(87, 60, 31, 0.14), 0 0 0 1px rgba(207, 166, 91, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

        .service-deliverable-card:hover::before,
        .service-process-card:hover::before,
        .service-application-card:hover::before,
        .service-value-card:hover::before {
            left: 22px;
            right: 22px;
            opacity: 1;
        }

    .service-deliverable-card > *,
    .service-process-card > *,
    .service-application-card > *,
    .service-value-card > * {
        position: relative;
        z-index: 2;
    }

    .service-deliverable-card h3,
    .service-process-card h3,
    .service-application-card h3,
    .service-value-card strong {
        margin: 0;
        color: #102541;
        font-weight: 920;
    }

    .service-deliverable-card p,
    .service-process-card p,
    .service-application-card p,
    .service-value-card p {
        margin: 0;
        color: #64748b;
        font-weight: 500;
    }

/* =========================================================
   09. DELIVERABLE CARDS AND ICONS
========================================================= */

.service-deliverable-card {
    min-height: 0;
    padding: 18px 18px 17px;
    border-radius: 23px;
}

.service-deliverable-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin-bottom: 16px;
    padding: 0;
    border-radius: 14px;
    color: #0b2344;
    background: linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% );
    box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
    transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease;
}

.service-deliverable-card:hover .service-deliverable-card__number {
    transform: translateY(-2px) scale(1.045);
    box-shadow: 0 17px 28px rgba(178, 126, 39, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.service-deliverable-card h3 {
    max-width: calc(100% - 2px);
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.45;
}

.service-deliverable-card p {
    font-size: 12.8px;
    line-height: 1.75;
}

.service-deliverable-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset-block-start: 17px;
    inset-inline-end: 17px;
    width: 48px;
    height: 48px;
    background-image: var(--service-deliverable-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.24;
    transform: rotate(0deg);
    transition: opacity 0.38s ease, transform 0.48s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.service-deliverable-card:hover::after {
    opacity: 0.44;
    transform: rotate(4deg) scale(1.08);
}

.service-deliverable-card:nth-child(1) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22l17-9 17 9-17 9z'/%3E%3Cpath d='M15 22v20l17 9 17-9V22M32 31v20'/%3E%3Cpath d='M47 10v8M43 14h8'/%3E%3C/g%3E%3C/svg%3E");
}

.service-deliverable-card:nth-child(2) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='18' r='6'/%3E%3Ccircle cx='50' cy='17' r='6'/%3E%3Ccircle cx='32' cy='48' r='7'/%3E%3Cpath d='M20 19l24-1M18 23l10 19M46 22L36 42'/%3E%3Cpath d='M27 29h10M32 24v10'/%3E%3C/g%3E%3C/svg%3E");
}

.service-deliverable-card:nth-child(3) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 13h38a7 7 0 017 7v23a7 7 0 01-7 7H29L17 58v-8h-4a7 7 0 01-7-7V20a7 7 0 017-7z'/%3E%3Cpath d='M27 24l16 9-16 9z'/%3E%3C/g%3E%3C/svg%3E");
}

.service-deliverable-card:nth-child(4) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8l18 10v21L32 50 14 39V18z'/%3E%3Ccircle cx='32' cy='29' r='8'/%3E%3Cpath d='M32 12v9M18 20l8 5M46 20l-8 5M18 38l8-5M46 38l-8-5M32 37v9'/%3E%3C/g%3E%3C/svg%3E");
}

.service-deliverable-card:nth-child(5) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='11' width='48' height='35' rx='6'/%3E%3Cpath d='M24 55h16M32 46v9M9 20h46'/%3E%3Cpath d='M27 27l13 7-13 7z'/%3E%3C/g%3E%3C/svg%3E");
}

.service-deliverable-card:nth-child(6) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 15c11-3 18-1 24 5v34c-6-6-13-8-24-5zM56 15c-11-3-18-1-24 5v34c6-6 13-8 24-5z'/%3E%3Cpath d='M39 27l10 6-10 6z'/%3E%3C/g%3E%3C/svg%3E");
}

.service-deliverable-card:nth-child(7) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 28h10l25-13v34L21 36H11zM21 36v14h-7V36'/%3E%3Cpath d='M50 24l6-5M52 32h8M50 40l6 5'/%3E%3C/g%3E%3C/svg%3E");
}

.service-deliverable-card:nth-child(8) {
    --service-deliverable-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b9802e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='45' r='6'/%3E%3Ccircle cx='51' cy='18' r='6'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M18 41l10-6M36 29l10-7M13 20c10-9 27-9 38 0M13 52c11 7 27 7 38-1'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================
   10. PROCESS AND APPLICATION CARDS
========================================================= */

.service-process-card,
.service-application-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 0;
    padding: 18px 16px;
    border-radius: 22px;
}

.service-process-card__number,
.service-application-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    color: #0b2344;
    background: linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% );
    box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
}

.service-process-card h3,
.service-application-card h3 {
    margin-bottom: 6px;
    font-size: 15.5px;
    line-height: 1.45;
}

.service-process-card p,
.service-application-card p {
    font-size: 12px;
    line-height: 1.7;
}

.service-process-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset-inline-end: -20px;
    inset-block-end: -24px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: repeating-radial-gradient( circle, rgba(185, 128, 46, 0.12) 0 1px, transparent 1px 10px );
    opacity: 0.30;
    pointer-events: none;
}

.service-application-card__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-application-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset-inline-end: -26px;
    inset-block-end: -30px;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(185, 128, 46, 0.14);
    border-radius: 34% 66% 46% 54% / 48% 38% 62% 52%;
    transform: rotate(24deg);
    opacity: 0.50;
    pointer-events: none;
}

/* =========================================================
   11. VALUE CARDS
========================================================= */

.service-value-card {
    min-height: 0;
    padding: 20px 18px 18px;
    border-radius: 22px;
}

    .service-value-card strong {
        font-size: 16px;
        line-height: 1.45;
    }

    .service-value-card p {
        margin-top: 8px;
        font-size: 12.5px;
        line-height: 1.75;
    }



/* =========================================================
   12. FINAL CTA
========================================================= */

.service-landing-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 36px;
    padding: 40px 44px;
    background: radial-gradient(circle at 85% 20%, rgba(230, 201, 126, 0.23), transparent 30%), linear-gradient(135deg, rgba(251, 247, 238, 0.98), rgba(240, 233, 222, 0.97));
    box-shadow: 0 18px 40px rgba(84, 59, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

    .service-landing-cta > div {
        max-width: 850px;
    }

    .service-landing-cta h2 {
        max-width: 820px;
        font-size: clamp(31px, 3.6vw, 48px);
        line-height: 1.08;
        letter-spacing: -1.4px;
    }

    .service-landing-cta p {
        max-width: 800px;
        margin: 16px 0 0;
        color: #63738a;
        font-size: 15px;
        line-height: 1.78;
    }

    .service-landing-cta .service-landing-btn {
        flex: 0 0 auto;
    }

/* =========================================================
   13. DARK THEME
========================================================= */

html[data-theme="dark"] .service-landing-page {
    color: var(--dark-text);
}

html[data-theme="dark"] :is( .service-landing-hero, .service-landing-section, .service-landing-cta ) {
    border-color: rgba(216, 170, 79, 0.19);
    background: radial-gradient(circle at 90% 7%, rgba(216, 170, 79, 0.09), transparent 30%), linear-gradient(145deg, rgba(20, 22, 27, 0.98), rgba(29, 25, 21, 0.97));
    box-shadow: var(--dark-shadow), var(--dark-inset);
}

    html[data-theme="dark"] :is( .service-landing-hero, .service-landing-section, .service-landing-cta )::before {
        background: radial-gradient( circle, rgba(241, 215, 149, 0.24) 0%, rgba(200, 154, 66, 0.12) 45%, transparent 72% );
    }

html[data-theme="dark"] :is( .service-breadcrumb, .service-landing-eyebrow, .service-landing-section__heading > span, .service-landing-cta > div > span ) {
    color: var(--dark-gold-light);
    border-color: rgba(216, 170, 79, 0.42);
    background: linear-gradient( 145deg, rgba(203, 171, 81, 0.45), rgba(216, 170, 79, 0.31) );
    box-shadow: var(--dark-shadow-soft), var(--dark-inset);
}

html[data-theme="dark"] .service-breadcrumb a {
    color: var(--dark-gold-pale);
}

    html[data-theme="dark"] .service-breadcrumb a:hover {
        color: #ffffff;
    }

html[data-theme="dark"] .service-breadcrumb span[aria-current="page"] {
    color: var(--dark-text);
}

html[data-theme="dark"] :is( .service-landing-hero__lead, .service-landing-section__heading > p, .service-landing-cta p ) {
    color: var(--dark-muted-cool);
}

html[data-theme="dark"] .service-landing-overview__content p,
html[data-theme="dark"] :is( .service-deliverable-card, .service-process-card, .service-application-card, .service-value-card ) {
    border-color: rgba(216, 170, 79, 0.30);
    background: linear-gradient( 145deg, rgba(255, 244, 219, 0.26), rgba(167, 147, 107, 0.33) );
    box-shadow: var(--dark-inset);
}

    html[data-theme="dark"] :is( .service-deliverable-card, .service-process-card, .service-application-card, .service-value-card ):hover {
        transform: translate3d(0, -3px, 0) scale(1.015);
        border-color: rgba(239, 196, 105, 0.58);
        background: linear-gradient( 145deg, rgba(255, 245, 218, 0.34) 0%, rgba(212, 170, 88, 0.29) 52%, rgba(145, 119, 78, 0.38) 100% );
        box-shadow: 0 13px 25px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(233, 186, 91, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

html[data-theme="dark"] .service-landing-overview__content p,
html[data-theme="dark"] :is( .service-deliverable-card p, .service-process-card p, .service-application-card p, .service-value-card p ) {
    color: var(--dark-muted);
}

html[data-theme="dark"] :is( .service-deliverable-card h3, .service-process-card h3, .service-application-card h3, .service-value-card strong ) {
    color: var(--dark-text);
}

html[data-theme="dark"] :is( .service-deliverable-card__number, .service-process-card__number, .service-application-card__icon ) {
    color: #0b2344;
    background: linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% );
    box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

html[data-theme="dark"] .service-deliverable-card::after {
    opacity: 0.32;
    filter: brightness(1.22) saturate(0.86);
}

html[data-theme="dark"] .service-deliverable-card:hover::after {
    opacity: 0.55;
}

html[data-theme="dark"] .service-process-card::after {
    background: repeating-radial-gradient( circle, rgba(245, 216, 139, 0.15) 0 1px, transparent 1px 10px );
    opacity: 0.38;
}

html[data-theme="dark"] .service-application-card::after {
    border-color: rgba(245, 216, 139, 0.17);
    opacity: 0.64;
}



html[data-theme="dark"] .service-landing-btn--secondary {
    color: var(--dark-gold-pale);
    border-color: rgba(216, 170, 79, 0.30);
    background: linear-gradient( 145deg, rgba(18, 20, 25, 0.94), rgba(31, 25, 19, 0.90) );
    box-shadow: var(--dark-shadow-soft), var(--dark-inset);
}

    html[data-theme="dark"] .service-landing-btn--secondary:hover {
        border-color: rgba(245, 216, 139, 0.62);
        box-shadow: 0 25px 46px rgba(0, 0, 0, 0.40), 0 0 0 4px rgba(216, 170, 79, 0.10), var(--dark-inset);
    }

/* =========================================================
   14. LANGUAGE DIRECTION
   Explicit LTR rules prevent Persian global styles from leaking
   into the English service route during route transitions.
========================================================= */

.service-landing-page[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

    .service-landing-page[dir="ltr"] :is( .service-landing-hero h1, .service-landing-hero__lead, .service-landing-section__heading, .service-landing-section__heading h2, .service-landing-section__heading > p, .service-landing-overview__content p, .service-deliverable-card h3, .service-deliverable-card p, .service-process-card h3, .service-process-card p, .service-application-card h3, .service-application-card p, .service-value-card strong, .service-value-card p, .service-landing-cta h2, .service-landing-cta p ) {
        direction: ltr !important;
        text-align: left !important;
    }

    .service-landing-page[dir="ltr"] .service-capability-panel,
    .service-landing-page[dir="ltr"] .service-capability-panel * {
        direction: ltr !important;
    }

        .service-landing-page[dir="ltr"] .service-capability-panel :is( .whatido-capability-panel__content h2, .whatido-capability-item__text, .whatido-capability-item__text strong, .whatido-capability-item__text span ) {
            text-align: left !important;
        }

.service-landing-page[dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
}

    .service-landing-page[dir="rtl"] :is( .service-landing-eyebrow, .service-landing-section__heading > span, .service-landing-cta > div > span ) {
        letter-spacing: 0;
        text-transform: none;
    }

    .service-landing-page[dir="rtl"] :is( .service-landing-hero h1, .service-landing-section__heading h2, .service-landing-cta h2, .service-deliverable-card h3, .service-process-card h3, .service-application-card h3, .service-value-card strong ) {
        direction: rtl !important;
        text-align: right !important;
        letter-spacing: 0;
        word-spacing: 0;
        line-height: 1.34;
    }

    .service-landing-page[dir="rtl"] :is( .service-landing-hero__lead, .service-landing-section__heading > p, .service-landing-overview__content p, .service-deliverable-card p, .service-process-card p, .service-application-card p, .service-value-card p, .service-landing-cta p ) {
        direction: rtl !important;
        text-align: right !important;
        letter-spacing: 0;
        line-height: 1.95;
    }

    .service-landing-page[dir="rtl"] .service-capability-panel,
    .service-landing-page[dir="rtl"] .service-capability-panel * {
        direction: rtl !important;
    }

        .service-landing-page[dir="rtl"] .service-capability-panel :is( .whatido-capability-panel__content h2, .whatido-capability-item__text, .whatido-capability-item__text strong, .whatido-capability-item__text span ) {
            text-align: right !important;
        }

        .service-landing-page[dir="rtl"] .service-capability-panel .whatido-capability-item:hover {
            transform: translate3d(-5px, 0, 0) scale(1.008) !important;
        }

/* =========================================================
   15. RESPONSIVE
========================================================= */

@media (max-width: 1500px) {
    .service-process-grid,
    .service-applications-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .service-landing-hero__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .service-landing-hero__visual {
        max-width: 620px;
    }

    .service-capability-panel {
        min-height: 610px !important;
    }

    .service-deliverables-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-landing-overview {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .service-value-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .service-landing-page {
        gap: 18px;
        padding-bottom: 20px;
    }

    .service-landing-hero,
    .service-landing-section,
    .service-landing-cta {
        border-radius: 28px;
    }

    .service-landing-hero {
        top: -22px;
        margin-bottom: -22px;
        padding: 28px 19px 24px;
    }

    .service-breadcrumb {
        width: 100%;
        margin-bottom: 22px;
        border-radius: 18px;
    }

    .service-landing-hero h1 {
        font-size: 44px;
        line-height: 1.13;
        letter-spacing: -1.7px;
    }

    .service-landing-hero__lead {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.85;
    }

    .service-landing-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 26px;
    }

    .service-landing-btn {
        width: 100%;
    }

    .service-landing-hero__visual {
        max-width: none;
    }

    .service-capability-panel {
        min-height: 0 !important;
        height: auto !important;
        padding: 22px 18px 20px !important;
        border-radius: 26px !important;
    }

        .service-capability-panel .whatido-capability-panel__top {
            margin: 0 0 24px !important;
        }

        .service-capability-panel .whatido-capability-panel__content h2 {
            font-size: 34px !important;
            line-height: 1.18 !important;
        }

        .service-capability-panel .whatido-capability-list {
            align-content: start !important;
            margin-top: 24px !important;
        }

        .service-capability-panel .whatido-capability-item {
            min-height: 82px !important;
            padding: 12px 13px !important;
            border-radius: 17px !important;
        }

    .service-landing-section {
        padding: 26px 17px 20px;
    }

    .service-landing-section__heading {
        margin-bottom: 24px;
    }

        .service-landing-section__heading h2,
        .service-landing-cta h2 {
            font-size: 35px;
            line-height: 1.18;
        }

    .service-deliverables-grid,
    .service-process-grid,
    .service-applications-grid,
    .service-value-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-deliverable-card {
        padding: 17px 16px 16px;
    }

        .service-deliverable-card::after {
            inset-block-start: 16px;
            inset-inline-end: 15px;
            width: 42px;
            height: 42px;
        }

    .service-deliverable-card__number {
        width: 40px;
        min-width: 40px;
        height: 40px;
        margin-bottom: 14px;
        font-size: 14px;
    }

    .service-process-card,
    .service-application-card {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 15px;
    }

    .service-process-card__number,
    .service-application-card__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .service-value-card {
        padding: 18px 16px 16px;
    }

    .service-landing-cta {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 22px;
    }

        .service-landing-cta .service-landing-btn {
            width: 100%;
        }
}

/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .service-landing-hero h1,
    .service-landing-section__heading h2,
    .service-landing-cta h2 {
        animation: none;
    }

    .service-landing-btn,
    .service-deliverable-card,
    .service-process-card,
    .service-application-card,
    .service-value-card,
    .service-deliverable-card::after {
        transition: none;
    }
}


.service-value-card::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   SERVICE HERO — COMPACT FINAL LAYOUT
   ---------------------------------------------------------
   Layout only. Existing light and dark theme colors remain.
========================================================= */


/* =========================================================
   HERO CONTAINER
========================================================= */

.service-landing-hero {
    padding: 26px 28px 28px !important;
}


/* =========================================================
   DESKTOP GRID
========================================================= */

.service-landing-hero__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(350px, 0.94fr) !important;
    align-items: stretch !important;
    gap: 38px !important;
    width: 100% !important;
    min-width: 0 !important;
}


/* =========================================================
   LEFT CONTENT COLUMN
========================================================= */

.service-landing-hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 570px !important;
    padding: 0 !important;
}


/* =========================================================
   EYEBROW + BREADCRUMB ROW
========================================================= */

.service-landing-hero__meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
}


    /* Eyebrow */

    .service-landing-hero__meta
    .service-landing-eyebrow {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        margin: 0 !important;
    }


    /* Breadcrumb */

    .service-landing-hero__meta
    .service-breadcrumb {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        white-space: normal !important;
    }


/* =========================================================
   TITLE
========================================================= */

.service-landing-hero__content > h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(52px, 4.4vw, 72px) !important;
    line-height: 1.01 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service-landing-hero__lead {
    width: 100% !important;
    max-width: 900px !important;
    margin: 26px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
}


/* =========================================================
   BUTTONS AT BOTTOM
========================================================= */

.service-landing-actions {
    margin-top: auto !important;
    padding-top: 30px !important;
}


/* =========================================================
   RIGHT CAPABILITY PANEL
========================================================= */

.service-landing-hero__visual {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
}


.service-capability-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 570px !important;
    height: 100% !important;
}


/* Compact internal panel spacing */

.service-capability-panel {
    padding: 25px 25px 24px !important;
}


    .service-capability-panel
    .whatido-capability-panel__top {
        margin: 0 0 22px !important;
    }


    .service-capability-panel
    .whatido-capability-panel__content h2 {
        margin: 0 0 20px !important;
    }


    .service-capability-panel
    .whatido-capability-list {
        gap: 9px !important;
        margin-top: auto !important;
    }


    .service-capability-panel
    .whatido-capability-item {
        min-height: 78px !important;
        padding: 11px 13px !important;
    }


/* =========================================================
   PERSIAN
========================================================= */

.service-landing-page[dir="rtl"]
.service-landing-hero__content {
    align-items: flex-start !important;
    text-align: right !important;
}


.service-landing-page[dir="rtl"]
.service-landing-hero__meta {
    direction: rtl !important;
}


.service-landing-page[dir="rtl"]
.service-landing-hero__content > h1,
.service-landing-page[dir="rtl"]
.service-landing-hero__lead {
    text-align: right !important;
}


/* =========================================================
   UP TO 1500PX
   Panel moves below the title/content
========================================================= */

@media (max-width: 1500px) {

    .service-landing-hero__grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 34px !important;
    }


    .service-landing-hero__content {
        min-height: 0 !important;
    }


    .service-landing-actions {
        margin-top: 0 !important;
        padding-top: 28px !important;
    }


    .service-landing-hero__visual,
    .service-capability-panel {
        width: 100% !important;
        max-width: none !important;
    }


    .service-capability-panel {
        min-height: 600px !important;
        height: auto !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .service-landing-hero {
        padding: 26px 24px 28px !important;
    }


    .service-landing-hero__meta {
        flex-wrap: wrap !important;
    }


    .service-landing-hero__content > h1 {
        font-size: clamp(46px, 7.4vw, 62px) !important;
    }


    .service-capability-panel {
        min-height: 570px !important;
    }
}


/* =========================================================
   MOBILE
   Eyebrow first, breadcrumb underneath
========================================================= */

@media (max-width: 760px) {

    .service-landing-hero {
        padding: 21px 18px 22px !important;
    }


    .service-landing-hero__grid {
        gap: 26px !important;
    }


    .service-landing-hero__meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        margin-bottom: 18px !important;
    }


        .service-landing-hero__meta
        .service-landing-eyebrow {
            width: fit-content !important;
            max-width: 100% !important;
        }


        .service-landing-hero__meta
        .service-breadcrumb {
            width: fit-content !important;
            max-width: 100% !important;
            min-height: 0 !important;
            margin: 0 !important;
        }


    .service-landing-hero__content > h1 {
        font-size: clamp(40px, 11vw, 50px) !important;
        line-height: 1.1 !important;
    }


    .service-landing-hero__lead {
        margin-top: 20px !important;
        font-size: 14px !important;
        line-height: 1.85 !important;
    }


    .service-landing-actions {
        width: 100% !important;
        padding-top: 23px !important;
    }


    .service-capability-panel {
        min-height: 0 !important;
        height: auto !important;
        padding: 21px 17px 19px !important;
    }


    /* Persian mobile alignment */

    .service-landing-page[dir="rtl"]
    .service-landing-hero__meta {
        align-items: flex-start !important;
    }
}





/* =========================================================
   SERVICE INTERNAL LINKING
========================================================= */

.service-internal-links {
    position: relative;
}

/* =========================================================
   INTERNAL LINKS — PRIMARY CARDS
========================================================= */

.service-internal-links__primary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}


/* CARD */

.service-internal-link-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 18px;
    min-height: 245px;
    padding: 25px;
    border: 1px solid rgba(178, 137, 61, 0.22);
    border-radius: 25px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.92), rgba(250, 242, 226, 0.82) );
    box-shadow: 0 16px 38px rgba(34, 25, 13, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    color: inherit;
    text-decoration: none;
    transition: transform 0.38s cubic-bezier(.16, 1, .3, 1), border-color 0.3s ease, box-shadow 0.38s ease;
}


    /* TOP GOLD LINE* TOP GOLD */

    .service-internal-link-card::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 24px;
        right: 24px;
        height: 3px;
        border-radius: 0 0 8px 8px;
        background: linear-gradient( 90deg, transparent, rgba(193, 143, 49, 0.85), rgba(231, 190, 104, 0.95), transparent );
        opacity: 0.72;
        transition: opacity 0.3s ease, left 0.38s ease, right 0.38s ease;
    }


    /* DECORATIVE GLOW */

    .service-internal-link-card::after {
        content: "";
        position: absolute;
        z-index: -2;
        width: 150px;
        height: 150px;
        top: -70px;
        right: -60px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(210, 160, 65, 0.17), transparent 68% );
        transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), opacity 0.3s ease;
    }


    /* HOVER */

    .service-internal-link-card:hover {
        transform: translateY(-7px);
        border-color: rgba(184, 132, 37, 0.48);
        box-shadow: 0 25px 52px rgba(34, 25, 13, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }

        .service-internal-link-card:hover::before {
            left: 14px;
            right: 14px;
            opacity: 1;
        }

        .service-internal-link-card:hover::after {
            transform: scale(1.22);
        }


/* NUMBER */

.service-internal-link-card__number {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(174, 127, 43, 0.28);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(220, 177, 92, 0.22), rgba(255, 255, 255, 0.64) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #9a6b1d;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
}


/* CONTENT */

.service-internal-link-card > div {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.service-internal-link-card small {
    display: block;
    margin: 3px 0 10px;
    color: #8c682d;
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.service-internal-link-card h3 {
    margin: 0 0 11px;
    color: #10233b;
    font-size: clamp(19px, 1.55vw, 23px);
    font-weight: 900;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.service-internal-link-card p {
    margin: 0;
    color: rgba(16, 35, 59, 0.76);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.75;
}


/* ARROW */

.service-internal-link-card__arrow {
    position: absolute;
    z-index: 3;
    right: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(174, 127, 43, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    color: #9a6b1d;
    transition: transform 0.32s cubic-bezier(.16, 1, .3, 1), background 0.3s ease, color 0.3s ease;
}

    .service-internal-link-card__arrow svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.service-internal-link-card:hover
.service-internal-link-card__arrow {
    transform: translateX(4px);
    background: rgba(184, 132, 37, 0.94);
    color: #ffffff;
}


/* CARD VARIATIONS */

.service-internal-link-card--overview {
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.95), rgba(244, 239, 228, 0.88) );
}

.service-internal-link-card--portfolio {
    background: linear-gradient( 145deg, rgba(255, 251, 242, 0.97), rgba(243, 225, 188, 0.68) );
}

.service-internal-link-card--project {
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.95), rgba(236, 242, 241, 0.88) );
}

.service-internal-link-card > div {
    position: relative;
    z-index: 1;
}

.service-internal-link-card small {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.service-internal-link-card h3 {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.25;
}

.service-internal-link-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
}



    .service-internal-link-card__arrow svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.service-internal-link-card:hover
.service-internal-link-card__arrow {
    transform: translateX(4px);
}


/* RELATED SERVICES */

.service-related-services {
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--service-border);
}

.service-related-services__heading {
    margin-bottom: 22px;
}

    .service-related-services__heading > span {
        display: block;
        margin-bottom: 7px;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .service-related-services__heading h3 {
        margin: 0;
        font-size: clamp(22px, 2.2vw, 31px);
        line-height: 1.25;
    }

.service-related-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.service-related-service-card {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 25px;
    border: 1px solid var(--service-border);
    border-radius: 24px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), border-color 0.3s ease, box-shadow 0.35s ease;
}

    .service-related-service-card:hover {
        transform: translateY(-5px);
        border-color: rgba(190, 145, 57, 0.46);
        box-shadow: 0 20px 40px rgba(12, 26, 44, 0.10);
    }

.service-related-service-card__category {
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.service-related-service-card h4 {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
}

.service-related-service-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
}

.service-related-service-card__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
    font-size: 12px;
    font-weight: 900;
}

    .service-related-service-card__action svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.3s ease;
    }

.service-related-service-card:hover
.service-related-service-card__action svg {
    transform: translateX(4px);
}


/* RTL */

[dir="rtl"]
.service-internal-link-card:hover
.service-internal-link-card__arrow,
[dir="rtl"]
.service-related-service-card:hover
.service-related-service-card__action svg {
    transform: translateX(-4px) rotate(180deg);
}

[dir="rtl"]
.service-internal-link-card__arrow svg,
[dir="rtl"]
.service-related-service-card__action svg {
    transform: rotate(180deg);
}


/* RESPONSIVE */

@media (max-width: 1050px) {
    .service-internal-links__primary-grid,
    .service-related-services__grid {
        grid-template-columns: 1fr;
    }

    .service-internal-link-card {
        min-height: 0;
    }

    .service-related-service-card {
        min-height: 220px;
    }
}

@media (max-width: 640px) {
    .service-internal-link-card {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 20px;
    }

    .service-internal-link-card__arrow {
        display: none;
    }

    .service-related-service-card {
        min-height: 0;
        padding: 21px;
    }
}




/* =========================================================
   SERVICE INTERNAL LINKS — FINAL UNIFIED STYLE
========================================================= */

.service-internal-links {
    --internal-card-bg: linear-gradient( 145deg, rgba(255, 251, 242, 0.98), rgba(243, 225, 188, 0.70) );
    --internal-card-border: rgba(178, 132, 45, 0.28);
    --internal-card-border-hover: rgba(178, 126, 28, 0.58);
    --internal-card-shadow: 0 14px 32px rgba(50, 35, 15, 0.08);
    --internal-card-shadow-hover: 0 22px 44px rgba(50, 35, 15, 0.14);
    --internal-card-title: #10233b;
    --internal-card-text: rgba(16, 35, 59, 0.76);
    --internal-card-accent: #9a6b1d;
    --internal-card-badge-bg: rgba(255, 255, 255, 0.48);
    --internal-card-arrow-bg: rgba(255, 255, 255, 0.58);
}


/* =========================================================
   THREE MAIN CARDS
========================================================= */

.service-internal-links__primary-grid {
    gap: 18px;
    margin-top: 30px;
}


.service-internal-link-card,
.service-internal-link-card--overview,
.service-internal-link-card--portfolio,
.service-internal-link-card--project {
    min-height: 188px;
    padding: 22px;
    border: 1px solid var(--internal-card-border);
    border-radius: 23px;
    background: var(--internal-card-bg);
    box-shadow: var(--internal-card-shadow);
    color: var(--internal-card-title);
}


    .service-internal-link-card:hover {
        transform: translateY(-5px);
        border-color: var(--internal-card-border-hover);
        box-shadow: var(--internal-card-shadow-hover);
    }


/* Remove different card colors */

.service-internal-link-card--overview,
.service-internal-link-card--portfolio,
.service-internal-link-card--project {
    background: var(--internal-card-bg);
}


/* Decorative glow */

.service-internal-link-card::after {
    width: 125px;
    height: 125px;
    top: -62px;
    right: -48px;
    background: radial-gradient( circle, rgba(201, 151, 56, 0.16), transparent 68% );
}


/* Number badge */

.service-internal-link-card__number {
    width: 42px;
    height: 42px;
    border-color: var(--internal-card-border);
    background: var(--internal-card-badge-bg);
    color: var(--internal-card-accent);
}


/* Text */

.service-internal-link-card small {
    color: var(--internal-card-accent);
}


.service-internal-link-card h3 {
    margin-bottom: 8px;
    color: var(--internal-card-title);
    font-size: clamp(18px, 1.45vw, 22px);
}


.service-internal-link-card p {
    color: var(--internal-card-text);
    line-height: 1.65;
}


/* Arrow */

.service-internal-link-card__arrow {
    right: 18px;
    bottom: 18px;
    width: 37px;
    height: 37px;
    border-color: var(--internal-card-border);
    background: var(--internal-card-arrow-bg);
    color: var(--internal-card-accent);
}


/* =========================================================
   RELATED SERVICE CARDS
========================================================= */

.service-related-services {
    margin-top: 36px;
    padding-top: 31px;
}


.service-related-services__grid {
    gap: 18px;
}


.service-related-service-card {
    min-height: 195px;
    padding: 22px;
    border: 1px solid var(--internal-card-border);
    border-radius: 23px;
    background: var(--internal-card-bg);
    box-shadow: var(--internal-card-shadow);
    color: var(--internal-card-title);
}


    .service-related-service-card:hover {
        transform: translateY(-5px);
        border-color: var(--internal-card-border-hover);
        box-shadow: var(--internal-card-shadow-hover);
    }


.service-related-service-card__category {
    margin-bottom: 13px;
    color: var(--internal-card-accent);
}


.service-related-service-card h4 {
    margin-bottom: 9px;
    color: var(--internal-card-title);
}


.service-related-service-card p {
    color: var(--internal-card-text);
    line-height: 1.65;
}


.service-related-service-card__action {
    padding-top: 18px;
    color: var(--internal-card-accent);
}


/* =========================================================
   DARK MODE
========================================================= */

/* =========================================================
   SERVICE INTERNAL LINKS — DARK MODE FINAL
   Warm brown / gold style
========================================================= */

html[data-theme="dark"] .service-internal-links,
html.dark .service-internal-links,
body.dark-theme .service-internal-links {
    --internal-card-bg: linear-gradient( 145deg, rgba(84, 72, 50, 0.98) 0%, rgba(68, 60, 46, 0.98) 52%, rgba(55, 51, 43, 0.99) 100% );
    --internal-card-border: rgba(224, 177, 82, 0.34);
    --internal-card-border-hover: rgba(242, 190, 80, 0.68);
    --internal-card-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 225, 161, 0.10);
    --internal-card-shadow-hover: 0 24px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 226, 163, 0.16);
    --internal-card-title: #fff8e9;
    --internal-card-text: rgba(242, 232, 210, 0.68);
    --internal-card-accent: #f1ba45;
    --internal-card-badge-bg: linear-gradient( 145deg, #f2c55f, #dda132 );
    --internal-card-arrow-bg: rgba(240, 183, 66, 0.10);
}


/* =========================================================
   ALL CARDS
========================================================= */

html[data-theme="dark"]
.service-internal-link-card,
html[data-theme="dark"]
.service-related-service-card,
html.dark
.service-internal-link-card,
html.dark
.service-related-service-card,
body.dark-theme
.service-internal-link-card,
body.dark-theme
.service-related-service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--internal-card-bg);
    border-color: var(--internal-card-border);
    box-shadow: var(--internal-card-shadow);
    color: var(--internal-card-title);
}


    /* =========================================================
   GOLD LIGHT AT TOP
========================================================= */

    html[data-theme="dark"]
    .service-internal-link-card::before,
    html.dark
    .service-internal-link-card::before,
    body.dark-theme
    .service-internal-link-card::before {
        left: 20px;
        right: 20px;
        height: 3px;
        background: linear-gradient( 90deg, transparent, rgba(232, 179, 71, 0.55), rgba(255, 213, 124, 0.95), rgba(232, 179, 71, 0.55), transparent );
        opacity: 0.88;
    }


    /* Add the same top highlight to related cards */

    html[data-theme="dark"]
    .service-related-service-card::before,
    html.dark
    .service-related-service-card::before,
    body.dark-theme
    .service-related-service-card::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 20px;
        right: 20px;
        height: 3px;
        border-radius: 0 0 8px 8px;
        background: linear-gradient( 90deg, transparent, rgba(232, 179, 71, 0.55), rgba(255, 213, 124, 0.95), rgba(232, 179, 71, 0.55), transparent );
        pointer-events: none;
    }


    /* =========================================================
   DECORATIVE CIRCLE / GLOW
========================================================= */

    html[data-theme="dark"]
    .service-internal-link-card::after,
    html.dark
    .service-internal-link-card::after,
    body.dark-theme
    .service-internal-link-card::after {
        width: 145px;
        height: 145px;
        top: auto;
        right: -60px;
        bottom: -72px;
        border: 1px solid rgba(235, 185, 83, 0.16);
        background: radial-gradient( circle, rgba(236, 181, 70, 0.08), transparent 68% );
    }


    html[data-theme="dark"]
    .service-related-service-card::after,
    html.dark
    .service-related-service-card::after,
    body.dark-theme
    .service-related-service-card::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 150px;
        height: 150px;
        right: -65px;
        bottom: -80px;
        border: 1px solid rgba(235, 185, 83, 0.14);
        border-radius: 50%;
        background: radial-gradient( circle, rgba(236, 181, 70, 0.07), transparent 68% );
        pointer-events: none;
        transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
    }


/* =========================================================
   NUMBER BADGES
========================================================= */

html[data-theme="dark"]
.service-internal-link-card__number,
html.dark
.service-internal-link-card__number,
body.dark-theme
.service-internal-link-card__number {
    border-color: rgba(255, 213, 123, 0.55);
    background: var(--internal-card-badge-bg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 246, 211, 0.55);
    color: #17263a;
}


/* =========================================================
   TEXT
========================================================= */

html[data-theme="dark"]
.service-internal-link-card small,
html[data-theme="dark"]
.service-related-service-card__category,
html.dark
.service-internal-link-card small,
html.dark
.service-related-service-card__category,
body.dark-theme
.service-internal-link-card small,
body.dark-theme
.service-related-service-card__category {
    color: var(--internal-card-accent);
}


html[data-theme="dark"]
.service-internal-link-card h3,
html[data-theme="dark"]
.service-related-service-card h4,
html.dark
.service-internal-link-card h3,
html.dark
.service-related-service-card h4,
body.dark-theme
.service-internal-link-card h3,
body.dark-theme
.service-related-service-card h4 {
    color: var(--internal-card-title);
}


html[data-theme="dark"]
.service-internal-link-card p,
html[data-theme="dark"]
.service-related-service-card p,
html.dark
.service-internal-link-card p,
html.dark
.service-related-service-card p,
body.dark-theme
.service-internal-link-card p,
body.dark-theme
.service-related-service-card p {
    color: var(--internal-card-text);
}


/* =========================================================
   ARROWS AND ACTIONS
========================================================= */

html[data-theme="dark"]
.service-internal-link-card__arrow,
html.dark
.service-internal-link-card__arrow,
body.dark-theme
.service-internal-link-card__arrow {
    border-color: rgba(238, 184, 72, 0.34);
    background: var(--internal-card-arrow-bg);
    color: var(--internal-card-accent);
}


html[data-theme="dark"]
.service-related-service-card__action,
html.dark
.service-related-service-card__action,
body.dark-theme
.service-related-service-card__action {
    color: var(--internal-card-accent);
}


/* =========================================================
   HOVER
========================================================= */

html[data-theme="dark"]
.service-internal-link-card:hover,
html[data-theme="dark"]
.service-related-service-card:hover,
html.dark
.service-internal-link-card:hover,
html.dark
.service-related-service-card:hover,
body.dark-theme
.service-internal-link-card:hover,
body.dark-theme
.service-related-service-card:hover {
    border-color: var(--internal-card-border-hover);
    box-shadow: var(--internal-card-shadow-hover);
}


    html[data-theme="dark"]
    .service-internal-link-card:hover
    .service-internal-link-card__arrow,
    html.dark
    .service-internal-link-card:hover
    .service-internal-link-card__arrow,
    body.dark-theme
    .service-internal-link-card:hover
    .service-internal-link-card__arrow {
        background: linear-gradient( 145deg, #f0bd50, #d99c30 );
        border-color: rgba(255, 216, 132, 0.72);
        color: #17263a;
    }


    html[data-theme="dark"]
    .service-related-service-card:hover::after,
    html.dark
    .service-related-service-card:hover::after,
    body.dark-theme
    .service-related-service-card:hover::after {
        transform: scale(1.18);
    }


/* =========================================================
   RTL DECORATION
========================================================= */

html[data-theme="dark"]
[dir="rtl"]
.service-internal-link-card::after,
html.dark
[dir="rtl"]
.service-internal-link-card::after,
body.dark-theme
[dir="rtl"]
.service-internal-link-card::after {
    right: auto;
    left: -60px;
}


html[data-theme="dark"]
[dir="rtl"]
.service-related-service-card::after,
html.dark
[dir="rtl"]
.service-related-service-card::after,
body.dark-theme
[dir="rtl"]
.service-related-service-card::after {
    right: auto;
    left: -65px;
}


/* =========================================================
   RTL
========================================================= */

[dir="rtl"]
.service-internal-link-card::after {
    right: auto;
    left: -48px;
}


[dir="rtl"]
.service-internal-link-card__arrow {
    right: auto;
    left: 18px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .service-internal-link-card {
        min-height: 170px;
    }

    .service-related-service-card {
        min-height: 175px;
    }
}


@media (max-width: 640px) {

    .service-internal-links__primary-grid,
    .service-related-services__grid {
        gap: 14px;
    }

    .service-internal-link-card {
        min-height: 0;
        padding: 19px;
        padding-bottom: 62px;
        border-radius: 20px;
    }

    .service-related-service-card {
        min-height: 0;
        padding: 20px;
        border-radius: 20px;
    }
}