/* =========================================================
   TAJ HOME PAGE — CLEAN CONSOLIDATED STYLES
   Sections:
   0) Global UI / Motion
   1) Hero
   2) Principles / Brand Story
   3) Diagnostic Services
   4) Business Context Showcase
   5) Case Studies
========================================================= */


/* =========================================================
   0) GLOBAL UI / MOTION
========================================================= */

/* ---------- TAJ Link Component ---------- */
.taj-ui-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}

.taj-ui-link__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}

.taj-ui-link__icon i,
.taj-ui-link__icon img,
.taj-ui-link__icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;
    transform: translate(-50%, -50%);
}

.taj-ui-link__icon i {
    width: auto;
    height: auto;
    font-size: 15px;
    transition: transform 0.35s ease;
}

.taj-ui-link__icon img,
.taj-ui-link__icon svg {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* Section links on light surfaces */
.taj-ui-link--dark {
    gap: 9px;
    padding-bottom: 5px;
    color: #12364c;
    border-bottom: 1px solid rgba(18, 54, 76, 0.18);
}

.taj-ui-link--dark .taj-ui-link__icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: -5px;
    color: #0b4565;
    background: #edf3f5;
    border: 1px solid rgba(11, 69, 101, 0.08);
}

.taj-ui-link--dark:hover {
    color: #0b4565;
    border-color: rgba(11, 69, 101, 0.42);
}

.taj-ui-link--dark:hover .taj-ui-link__icon {
    color: #ffffff;
    background: #0b4565;
    border-color: #0b4565;
}

.taj-ui-link--dark:hover .taj-ui-link__icon i {
    transform: translate(-50%, -50%) translateX(-2px);
}

/* Links on dark / navy surfaces */
.taj-ui-link--light {
    color: #ffffff;
}

.taj-ui-link--light>span:first-child {
    color: inherit;
}

.taj-ui-link--light .taj-ui-link__icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.taj-ui-link--light:hover {
    color: #ffffff;
}

.taj-ui-link--light:hover .taj-ui-link__icon {
    color: #0b4565;
    background: #ffffff;
    border-color: #ffffff;
}

.taj-ui-link--light:hover .taj-ui-link__icon i {
    transform: translate(-50%, -50%) translateX(-2px);
}

/* Main conversion CTA */
.taj-ui-link--primary {
    gap: 10px;
    min-height: 46px;
    padding: 5px 7px 5px 17px;
    color: #ffffff !important;
    background: #0b4565;
    border: 0;
    border-radius: 999px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.taj-ui-link--primary .taj-ui-link__icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    color: #0b4565;
    background: #ffffff;
    border: 0;
}

.taj-ui-link--primary:hover {
    color: #ffffff !important;
    background: #083a56;
}

.taj-ui-link--primary:hover .taj-ui-link__icon {
    color: #0b4565;
    background: #ffffff;
}

.taj-ui-link--primary:hover .taj-ui-link__icon i {
    transform: translate(-50%, -50%) translateX(-2px);
}

.taj-ui-link:focus-visible {
    outline: 3px solid #d45c24;
    outline-offset: 5px;
    border-radius: 6px;
}

/* Keep legacy template CTA arrows visually centered */
.btn-icon-one,
.btn-icon-two {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.btn-icon-one i,
.btn-icon-two i,
.btn-icon-one img,
.btn-icon-two img,
.btn-icon-one svg,
.btn-icon-two svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;
    transform: translate(-50%, -50%);
}

.btn-icon-one i,
.btn-icon-two i {
    width: auto;
    height: auto;
    font-size: 15px;
}

.btn-icon-one img,
.btn-icon-two img,
.btn-icon-one svg,
.btn-icon-two svg {
    width: 14px;
    height: 14px;
    object-fit: contain;
}


/* ---------- TAJ Image Motion System ---------- */
.taj-motion-parallax,
.taj-motion-reveal {
    position: relative;
    overflow: hidden;
}

.taj-motion-parallax img,
.taj-motion-reveal img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
}

.taj-motion-reveal img {
    transition: transform 0.65s cubic-bezier(.2, .65, .3, 1);
}

.taj-motion-reveal:hover img {
    transform: scale(1.025);
}


/* ---------- Back To Top / Mobile ---------- */
@media (max-width: 767px) {

    #progress-wrap,
    .progress-wrap {
        left: 14px !important;
        right: auto !important;
        bottom: 14px !important;
        z-index: 50;
        width: 42px !important;
        height: 42px !important;
    }

    .taj-ui-link {
        font-size: 12.5px;
    }

    .taj-ui-link--light .taj-ui-link__icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .taj-ui-link--dark .taj-ui-link__icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .taj-ui-link--primary {
        min-height: 44px;
        padding: 4px 5px 4px 15px;
    }

    .taj-ui-link--primary .taj-ui-link__icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .taj-ui-link,
    .taj-ui-link__icon,
    .taj-ui-link__icon i,
    .taj-motion-parallax img,
    .taj-motion-reveal,
    .taj-motion-reveal img {
        transition: none !important;
    }

    .taj-ui-link:hover .taj-ui-link__icon i,
    .taj-motion-parallax img,
    .taj-motion-reveal,
    .taj-motion-reveal img {
        transform: none !important;
    }
}


/* =========================================================
   1) HERO
========================================================= */

.hero-area.style-three {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: calc(100svh - 90px);
    padding: 90px 0 55px;
}

.hero-area.style-three>.container {
    width: 100%;
}

.hero-area.style-three .hero-content {
    margin: 0;
    padding: 0;
}

.hero-area.style-three .hero-content .hero-para {
    width: 100%;
    margin: 0;
}

/* Background / Parallax Media */
.hero-area.style-three .hero-bg,
.hero-area.style-three .taj-hero-media {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.hero-area.style-three .taj-hero-image {
    position: absolute;
    top: -4%;
    left: 0;
    width: 100% !important;
    height: 108% !important;
    margin: 0;
    object-fit: cover;
    object-position: center 40%;
    will-change: transform;
}

/* Title / Copy */
.hero-area.style-three .hero-content h1.taj-hero-title {
    width: auto;
    max-width: 650px;
    margin: 0 0 22px;
    padding: 0;
    font-size: clamp(40px, 3vw, 54px);
    font-weight: 700;
    line-height: 1.3;
}

.hero-area.style-three .hero-content .taj-hero-description {
    max-width: 620px;
    margin: 0 0 24px;
    color: #eef2f6;
    font-size: clamp(16px, 1vw, 18px);
    font-weight: 400;
    line-height: 1.85;
    text-align: right;
}

.hero-area.style-three .hero-content .taj-hero-cta {
    margin-bottom: 0;
}

.hero-area.style-three .hero-content .taj-hero-cta .btn-text {
    color: #003a5b;
}

.hero-area.style-three .hero-content .taj-hero-trust {
    display: block;
    max-width: 560px;
    margin: 14px 0 0;
    color: rgba(238, 242, 246, 0.78);
    font-size: 14px;
    line-height: 1.75;
}

/* Brand Values */
.hero-area.style-three .taj-hero-values-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding-bottom: 18px;
    isolation: isolate;
}

.hero-area.style-three .taj-hero-values-card {
    position: relative;
    width: min(100%, 285px);
    padding: 24px 26px 24px 28px;
    background: linear-gradient(135deg,
            rgba(0, 58, 91, 0.64),
            rgba(0, 48, 76, 0.46));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 28, 46, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hero-area.style-three .taj-hero-values-card::before {
    content: "";
    position: absolute;
    top: 24px;
    right: 0;
    width: 3px;
    height: calc(100% - 48px);
    background-color: var(--taj-orange, #cc5501);
    border-radius: 999px;
    opacity: 0.9;
}

.hero-area.style-three .taj-hero-values-list {
    display: flex;
    flex-direction: column;
    gap: 17px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.hero-area.style-three .taj-hero-value-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
}

.hero-area.style-three .taj-hero-value-item img {
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.hero-area.style-three .taj-hero-values-wrap::before {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -48px;
    z-index: -1;
    width: 470px;
    height: 280px;
    background: radial-gradient(ellipse at 72% 45%,
            rgba(24, 86, 124, 0.28) 0%,
            rgba(12, 68, 104, 0.16) 36%,
            rgba(7, 45, 72, 0.06) 58%,
            transparent 76%);
    filter: blur(10px);
    pointer-events: none;
}

.hero-area.style-three .taj-hero-values-wrap::after {
    content: "";
    position: absolute;
    left: -18px;
    bottom: 12px;
    z-index: -1;
    width: 46px;
    height: 2px;
    background: var(--taj-orange, #cc5501);
    border-radius: 999px;
    opacity: 0.7;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .hero-area.style-three .taj-hero-values-wrap {
        transform: translateX(-32px);
    }
}

@media (max-width: 1199px) {
    .hero-area.style-three {
        min-height: auto;
        padding: 80px 0 50px;
    }

    .hero-area.style-three .hero-content h1.taj-hero-title {
        max-width: 600px;
        font-size: 46px;
        line-height: 1.35;
    }

    .hero-area.style-three .hero-content .taj-hero-description {
        max-width: 590px;
        font-size: 18px;
    }

    .hero-area.style-three .taj-hero-values-card {
        width: min(100%, 255px);
        padding: 22px 23px 22px 25px;
    }

    .hero-area.style-three .taj-hero-value-item {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .hero-area.style-three .taj-hero-values-wrap {
        justify-content: flex-start;
        height: auto;
        padding-top: 32px;
        padding-bottom: 0;
        transform: none;
    }

    .hero-area.style-three .taj-hero-values-wrap::before,
    .hero-area.style-three .taj-hero-values-wrap::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .hero-area.style-three {
        padding: 55px 0 45px;
        background-color: var(--secondaryColor);
    }

    /* روی موبایل، عکس پس‌زمینه دیگر قد کل سکشن (که با متن زیادش خیلی بلند می‌شود)
       را نمی‌گیرد؛ فقط یک نوار با ارتفاع متناسب با عرض صفحه در بالای سکشن است،
       تا object-fit:cover مجبور نشود عکس را برای پرکردن یک قاب باریک و بلند
       بیش‌ازحد بزرگ‌نمایی/برش بزند. ادامه سکشن (زیر این نوار) رنگ پس‌زمینه
       تیره برند (همان رنگ پس‌زمینه کارت ارزش‌ها) را می‌گیرد. */
    .hero-area.style-three .hero-bg,
    .hero-area.style-three .taj-hero-media {
        bottom: auto;
        height: min(62vw, 300px) !important;
    }

    .hero-area.style-three .hero-content h1.taj-hero-title {
        margin-bottom: 18px;
        font-size: 34px;
        line-height: 1.45;
    }

    .hero-area.style-three .hero-content .taj-hero-description {
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 1.9;
        text-align: right;
    }

    .hero-area.style-three .hero-content .taj-hero-trust {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.8;
    }

    .hero-area.style-three .taj-hero-image {
        top: -6%;
        height: 112% !important;
        object-position: center center;
    }

    .hero-area.style-three .taj-hero-values-wrap {
        padding-top: 28px;
    }

    .hero-area.style-three .taj-hero-values-card {
        width: 100%;
        padding: 20px 22px 20px 24px;
        background: rgba(0, 58, 91, 0.76);
        border-radius: 16px;
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

    .hero-area.style-three .taj-hero-values-card::before {
        top: 20px;
        height: calc(100% - 40px);
    }

    .hero-area.style-three .taj-hero-values-list {
        gap: 14px;
    }

    .hero-area.style-three .taj-hero-value-item {
        font-size: 15px;
        line-height: 1.6;
    }

    .hero-area.style-three .taj-hero-value-item img {
        flex-basis: 16px;
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .hero-area.style-three .hero-content h1.taj-hero-title {
        font-size: 30px;
    }

    .hero-area.style-three .taj-hero-values-card {
        padding: 18px 20px 18px 22px;
    }

    .hero-area.style-three .taj-hero-value-item {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-area.style-three .taj-hero-image {
        top: 0;
        height: 100% !important;
        transform: none !important;
        will-change: auto;
    }
}


/* =========================================================
   2) PRINCIPLES / BRAND STORY
========================================================= */

.taj-principles-section {
    position: relative;
    padding: 88px 0;
    overflow: hidden;
    background: linear-gradient(180deg,
            #f8fafc 0%,
            #ffffff 52%,
            #f8fafc 100%);
}

.taj-principles-section::before {
    content: "";
    position: absolute;
    top: 70px;
    right: -180px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle,
            rgba(16, 72, 108, 0.06) 0%,
            rgba(16, 72, 108, 0.025) 45%,
            transparent 72%);
    border-radius: 50%;
    pointer-events: none;
}

.taj-principles-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
    gap: clamp(55px, 6vw, 100px);
    align-items: start;
}

.taj-principles-header {
    max-width: 790px;
    margin-bottom: 58px;
}

.taj-principles-title {
    margin: 0 0 18px;
    color: #102f44;
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 700;
    line-height: 1.45;
}

.taj-principles-title span {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.taj-principles-title span::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 2px;
    z-index: -1;
    width: 34px;
    height: 4px;
    background: #d45c24;
    border-radius: 999px;
    opacity: 0.9;
}

.taj-principles-intro {
    max-width: 690px;
    margin: 0;
    color: #5f6c75;
    font-size: 17px;
    line-height: 2;
}

/* Principles Grid */
.taj-principles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(16, 47, 68, 0.12);
}

.taj-principle-item {
    position: relative;
    min-height: 245px;
    padding: 42px 34px 38px;
    border-bottom: 1px solid rgba(16, 47, 68, 0.12);
    transition: background-color 0.3s ease;
}

.taj-principle-item:nth-child(odd) {
    border-left: 1px solid rgba(16, 47, 68, 0.12);
}

.taj-principle-item:hover {
    background: rgba(12, 68, 103, 0.025);
}

.taj-principle-number {
    display: block;
    margin-bottom: 22px;
    color: rgba(12, 68, 103, 0.35);
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.taj-principle-item::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 34px;
    width: 34px;
    height: 3px;
    background: #d45c24;
    border-radius: 999px;
    transform: scaleX(0.35);
    transform-origin: right center;
    transition: transform 0.3s ease;
}

.taj-principle-item:hover::before {
    transform: scaleX(1);
}

.taj-principle-title {
    margin: 0 0 15px;
    color: #17384e;
    font-size: clamp(21px, 1.5vw, 26px);
    font-weight: 700;
    line-height: 1.65;
}

.taj-principle-description {
    margin: 0;
    color: #5f6c75;
    font-size: 16px;
    line-height: 2.05;
}

/* Brand Story */
.taj-principles-story {
    position: relative;
    padding: 28px 28px 34px;
    background: linear-gradient(155deg,
            rgba(12, 61, 91, 0.075),
            rgba(255, 255, 255, 0.82) 48%,
            rgba(12, 61, 91, 0.035));
    border: 1px solid rgba(15, 57, 83, 0.08);
    border-radius: 30px;
    box-shadow: 0 25px 70px rgba(17, 51, 72, 0.06);
    isolation: isolate;
}

.taj-principles-story-media {
    position: relative;
    /* دور۴۴: نسبت ثابت قبلی (۱/۱٫۰۳، تقریبا مربع) با نسبت واقعی
       taj-story-teaser.jpg (۶۰۵×۵۷۰ ≈ ۱٫۰۶) کمی فرق داشت و کراپ جزئی
       ایجاد می‌کرد؛ با نسبت دقیق فایل جایگزین شد (بدون کراپ). */
    aspect-ratio: 605 / 570;
    margin: 0 0 30px;
    overflow: hidden;
    border-radius: 22px;
}

.taj-principles-story-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 60%,
            rgba(3, 36, 57, 0.08) 100%);
    pointer-events: none;
}

.taj-principles-story-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease;
}

.taj-principles-story:hover .taj-principles-story-media img {
    transform: scale(1.025);
}

.taj-principles-story-content {
    padding: 4px 6px 0;
}

.taj-principles-story-title {
    position: relative;
    margin: 0 0 16px;
    padding-top: 22px;
    color: #15374d;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.6;
}

.taj-principles-story-title::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 2px;
    background: #d45c24;
    border-radius: 999px;
}

.taj-principles-story-text {
    margin: 0 0 28px;
    color: #5f6c75;
    font-size: 16px;
    line-height: 2.1;
}

.taj-principles-cta {
    margin-top: 2px;
}

.taj-principles-cta:focus-visible {
    outline: 3px solid #d45c24;
    outline-offset: 4px;
}

@media (max-width: 1199px) {
    .taj-principles-section {
        padding: 70px 0;
    }

    .taj-principles-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
        gap: 45px;
    }

    .taj-principle-item {
        padding: 36px 25px 32px;
    }
}

@media (max-width: 991px) {
    .taj-principles-layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .taj-principles-main {
        order: 1;
    }

    .taj-principles-story {
        order: 2;
        display: grid;
        grid-template-columns: minmax(260px, 0.85fr) 1fr;
        gap: 32px;
        align-items: center;
    }

    .taj-principles-story-media {
        margin: 0;
    }
}

@media (max-width: 767px) {
    .taj-principles-section {
        padding: 55px 0;
    }

    .taj-principles-header {
        margin-bottom: 38px;
    }

    .taj-principles-title {
        font-size: 30px;
    }

    .taj-principles-intro {
        font-size: 15px;
        line-height: 1.9;
    }

    .taj-principles-grid {
        grid-template-columns: 1fr;
    }

    .taj-principle-item {
        min-height: auto;
        padding: 32px 12px 30px;
    }

    .taj-principle-item:nth-child(odd) {
        border-left: 0;
    }

    .taj-principle-item::before {
        right: 12px;
    }

    .taj-principles-story {
        display: block;
        padding: 18px 18px 26px;
        border-radius: 24px;
    }

    .taj-principles-story-media {
        margin-bottom: 28px;
        border-radius: 18px;
    }

    .taj-principles-story-content {
        padding: 0 4px;
    }

    .taj-principles-story-title {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .taj-principle-item,
    .taj-principle-item::before,
    .taj-principles-story-media img {
        transition: none !important;
    }

    .taj-principles-story:hover .taj-principles-story-media img {
        transform: none !important;
    }
}


/* =========================================================
   3) DIAGNOSTIC SERVICES
========================================================= */

.taj-diagnosis-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background: #eaf1f4;
    background-image: none;
}

.taj-diagnosis-section::before,
.taj-diagnosis-section::after,
.taj-diagnosis-cases::before,
.taj-diagnosis-cases::after {
    content: none;
    display: none;
}

/* Header */
.taj-diagnosis-header {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr) minmax(330px, 0.72fr);
    gap: clamp(55px, 8vw, 120px);
    align-items: end;
    padding-bottom: 58px;
    margin-bottom: 74px;
    background: transparent;
    border-bottom: 1px solid rgba(15, 55, 78, 0.075);
}

.taj-diagnosis-kicker {
    display: block;
    margin-bottom: 13px;
    color: #b34718;
    font-size: 13px;
    font-weight: 700;
}

.taj-diagnosis-title {
    max-width: 700px;
    margin: 0;
    color: #102f44;
    font-size: clamp(36px, 3.2vw, 52px);
    font-weight: 700;
    line-height: 1.55;
}

.taj-diagnosis-title span {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.taj-diagnosis-title span::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 2px;
    z-index: -1;
    width: 65%;
    height: 4px;
    background: #d45c24;
    border-radius: 999px;
    opacity: 0.78;
}

.taj-diagnosis-intro {
    max-width: 600px;
    margin: 0;
    color: #596a74;
    font-size: 16px;
    line-height: 2.1;
}

/* Main Layout */
.taj-diagnosis-layout {
    display: grid;
    grid-template-areas: "method cases";
    grid-template-columns:
        minmax(330px, 0.72fr) minmax(0, 1.42fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: start;
    direction: ltr;
    background: transparent;
}

.taj-diagnosis-method {
    grid-area: method;
    direction: rtl;
}

.taj-diagnosis-cases {
    position: relative;
    grid-area: cases;
    direction: rtl;
    background: transparent;
    border-top: 1px solid rgba(15, 55, 78, 0.075);
    box-shadow: none;
    filter: none;
}

/* Sticky Method Panel */
.taj-diagnosis-method-inner {
    position: sticky;
    top: 115px;
    padding: 46px 38px 40px;
    color: #ffffff;
    background: #0b4565;
    border: 1px solid rgba(5, 42, 64, 0.08);
    border-radius: 28px;
    box-shadow: none;
    filter: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.taj-diagnosis-method-inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 38px;
    width: 52px;
    height: 3px;
    background: #d45c24;
    border-radius: 999px;
}

.taj-method-kicker {
    display: block;
    margin-bottom: 10px;
    color: #ff9b68;
    font-size: 13px;
    font-weight: 700;
}

.taj-method-title {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.65;
}

.taj-method-intro {
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.95;
}

.taj-method-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taj-method-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 23px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.105);
}

.taj-method-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #ff9b68;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.taj-method-step strong {
    display: block;
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.8;
}

.taj-method-step p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.9;
}

.taj-method-closing {
    margin: 28px 0 0;
    padding-top: 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.9;
    border-top: 1px solid rgba(255, 255, 255, 0.105);
}

.taj-method-closing strong {
    color: #ffffff;
}


/* =========================================================
   تصویر پشتیبان کارت روش تاج (دور بیست‌وسوم)
   ---------------------------------------------------------
   چون ستون سمت‌چپ (این کارت سرمه‌ای چسبان/sticky) از ستون سمت‌راست
   (فهرست سناریوهای مدیریتی) کوتاه‌تره، حین اسکرول یک فضای خالی
   واقعی زیر کارت دیده می‌شد (کارت زودتر از راست تمام می‌شد). کاربر
   خودش همین نقطه رو پیدا کرد و پیشنهاد افزودن عکس داد. عکس واقعی
   هنوز از مبینا نرسیده (مشخصاتش تازه به اکسل اضافه شد)، پس مثل
   پس‌زمینه بردکرامب، از background-image با متغیر CSS استفاده شده:
   تا وقتی فایل نرسیده فقط گرادیان + آیکون بزرگ کم‌رنگ (ذره‌بین،
   نماد «بررسی/تشخیص») دیده می‌شه که خودش به‌تنهایی هم طراحی‌شده
   به‌نظر می‌رسه، نه یک جای خالی خام؛ به‌محض رسیدن فایل، پشت همون
   آیکون/گرادیان (با شفافیت کمتر) نمایش داده می‌شه. ارتفاع عمدا کل
   فضای خالی رو پر نمی‌کنه (فقط بخشی از آن) تا افکت چسبان/sticky
   کارت همچنان حین اسکرول قابل حس باشه. */

.taj-method-photo {
    position: relative;
    height: 190px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: 16px;
    background-color: #072e46;
    /* دور۴۴: قبلا این گرادیان خیلی تیره بود (۰٫۸۲/۰٫۹۰) چون برای حالت
       بدون‌عکس (var(--taj-method-photo,none) فقط با پس‌زمینه navy) طراحی
       شده بود. از دور۴۳ عکس واقعی (taj-diagnosis-support.jpg) پشتش هست؛
       طبق خواسته صریح سعیده (عکس بیشتر مشخص باشه) خیلی سبک‌تر شد. */
    background-image:
        linear-gradient(160deg, rgba(15, 80, 117, 0.22) 0%, rgba(7, 46, 70, 0.38) 100%),
        var(--taj-method-photo, none);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.taj-method-photo-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 96px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.1);
}

/* Manager Scenarios */
.taj-diagnosis-case {
    position: relative;
    padding: 42px 8px 40px;
    background: transparent;
    border-bottom: 1px solid rgba(15, 55, 78, 0.075);
    box-shadow: none;
    filter: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.taj-diagnosis-case:hover {
    background: transparent;
}

.taj-diagnosis-case::before,
.taj-diagnosis-case::after {
    content: none;
    display: none;
}

.taj-case-signal {
    display: block;
    margin-bottom: 10px;
    color: #b34718;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}

.taj-case-title {
    max-width: 760px;
    margin: 0 0 13px;
    color: #12364c;
    font-size: clamp(21px, 1.7vw, 27px);
    font-weight: 700;
    line-height: 1.75;
}

.taj-case-description {
    max-width: 720px;
    margin: 0 0 25px;
    color: #596a74;
    font-size: 14px;
    line-height: 2;
}

.taj-case-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
    padding-top: 2px;
}

.taj-case-domain {
    color: #596a74;
    font-size: 13px;
    line-height: 1.8;
}

.taj-case-domain strong {
    color: #244f68;
    font-weight: 700;
}

.taj-case-link {
    flex: 0 0 auto;
}

/* Delivery Band */
.taj-diagnosis-delivery {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr) repeat(2, minmax(0, 0.9fr));
    gap: 0;
    margin-top: 75px;
    overflow: hidden;
    background: #0b4565;
    border-radius: 24px;
    box-shadow: none;
    filter: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.taj-diagnosis-delivery-copy,
.taj-diagnosis-delivery-mode {
    padding: 28px 30px;
}

.taj-diagnosis-delivery-mode {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.taj-diagnosis-delivery-copy>span {
    display: block;
    margin-bottom: 6px;
    color: #ff9b68;
    font-size: 12px;
    font-weight: 700;
}

.taj-diagnosis-delivery-copy>strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
}

.taj-diagnosis-delivery-mode>strong {
    display: block;
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 15px;
}

.taj-diagnosis-delivery-mode>p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.85;
}

@media (max-width: 1199px) {
    .taj-diagnosis-section {
        padding: 75px 0;
    }

    .taj-diagnosis-layout {
        grid-template-columns:
            minmax(300px, 0.75fr) minmax(0, 1.3fr);
        gap: 48px;
    }

    .taj-diagnosis-method-inner {
        padding: 40px 30px 35px;
    }
}

@media (max-width: 991px) {
    .taj-diagnosis-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .taj-diagnosis-layout {
        grid-template-areas:
            "method"
            "cases";
        grid-template-columns: 1fr;
        gap: 55px;
        direction: rtl;
    }

    .taj-diagnosis-method-inner {
        position: relative;
        top: auto;
        max-width: 760px;
        margin: 0 auto;
    }

    .taj-diagnosis-case {
        padding: 38px 6px;
    }

    .taj-diagnosis-delivery {
        grid-template-columns: 1fr;
    }

    .taj-diagnosis-delivery-mode {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 0;
    }
}

@media (max-width: 767px) {
    .taj-diagnosis-section {
        padding: 55px 0;
    }

    .taj-diagnosis-header {
        padding-bottom: 38px;
        margin-bottom: 48px;
    }

    .taj-diagnosis-title {
        font-size: 31px;
    }

    .taj-diagnosis-intro {
        font-size: 15px;
    }

    .taj-diagnosis-method-inner {
        padding: 33px 24px 30px;
        border-radius: 24px;
    }

    .taj-method-title {
        font-size: 24px;
    }

    .taj-diagnosis-case {
        padding: 31px 2px;
    }

    .taj-case-title {
        font-size: 21px;
    }

    .taj-case-description {
        margin-bottom: 22px;
        font-size: 14px;
        line-height: 1.95;
    }

    .taj-case-footer {
        display: block;
    }

    .taj-case-domain {
        display: block;
        margin-bottom: 15px;
    }

    .taj-diagnosis-delivery {
        margin-top: 52px;
        border-radius: 20px;
    }

    .taj-diagnosis-delivery-copy,
    .taj-diagnosis-delivery-mode {
        padding: 23px 21px;
    }
}


/* =========================================================
   4) BUSINESS CONTEXT SHOWCASE
========================================================= */

.taj-context-showcase {
    position: relative;
    padding: 85px 0;
    overflow: hidden;
    background: #f7f9fa;
}

/* Top Composition */
.taj-context-showcase-top {
    display: grid;
    grid-template-areas: "copy visual";
    grid-template-columns:
        minmax(0, 1.12fr) minmax(390px, 0.88fr);
    gap: clamp(60px, 7vw, 110px);
    align-items: center;
    margin-bottom: 72px;
    direction: ltr;
}

.taj-context-showcase-copy {
    grid-area: copy;
    max-width: 690px;
    padding-left: 12px;
    direction: rtl;
}

.taj-context-showcase-visual {
    position: relative;
    grid-area: visual;
    justify-self: stretch;
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    direction: rtl;
}

.taj-context-showcase-kicker {
    display: block;
    margin-bottom: 14px;
    color: #b34718;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

.taj-context-showcase-title {
    margin: 0 0 18px;
    color: #102f44;
    font-size: clamp(34px, 3vw, 50px);
    font-weight: 700;
    line-height: 1.55;
}

.taj-context-showcase-title span {
    color: inherit;
}

.taj-context-showcase-title span::after {
    content: none;
    display: none;
}

.taj-context-showcase-intro {
    max-width: 590px;
    margin-top: 22px;
    color: #596a74;
    font-size: 16px;
    line-height: 2.05;
}

/* Visual Panel
   دور۴۴: قبلا min-height ثابت (۴۳۰px دسکتاپ/۴۵۵px تبلت/۳۵۰px موبایل) قاب
   رو تقریبا مربعی (نسبت≈۱٫۱۶) می‌کرد درحالی‌که industry-bg-1.jpg نسبت
   ۱٫۵ (افقی‌تر) داره -> cover همیشه بخشی از عرض رو می‌برید. طبق خواسته
   صریح سعیده (بدون کراپ) با aspect-ratio دقیق خود عکس جایگزین شد؛ چون
   دیگه هیچ کراپی نیست، بج‌ها/کپشن روی عکس هم حذف شدن (هم پوشش سنگین
   گرادیان لازم نداره، هم همون‌مفاهیم تو ۴کارت زیرش تکرار می‌شدن). */
.taj-context-visual-card {
    position: relative;
    aspect-ratio: 1000 / 667;
    overflow: hidden;
    background: #0b4565;
    border-radius: 26px 26px 8px 26px;
    box-shadow: none;
    isolation: isolate;
}

.taj-context-visual-image {
    position: absolute;
    inset: 0;
}

.taj-context-visual-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* دور۴۴: گرادیان سنگین (.taj-context-visual-overlay)، ۳بج شناور
   (.taj-context-visual-badge×3) و کپشن روی عکس (.taj-context-visual-caption)
   همگی حذف شدن — طبق خواسته سعیده چون روی عکس جذاب نبودن و همون‌سه‌مفهوم
   تو۴کارت پایین همین سکشن هم تکرار می‌شدن؛ عکس حالا بدون هیچ پوششی و با
   نسبت دقیق خودش (بدون کراپ، تعریف در .taj-context-visual-card) دیده می‌شه.
   کلاس‌های badge-one/two/three که رو المان‌های حذف‌شده بودن هم دیگه لازم
   نیستن (تو HTML هم برداشته شدن). */

/* Context Cards */
.taj-context-showcase-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.taj-context-showcase-card {
    position: relative;
    min-height: 270px;
    padding: 30px 30px 26px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(15, 55, 78, 0.09);
    border-radius: 22px;
    box-shadow: none;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.taj-context-showcase-card:nth-child(1) {
    grid-column: span 7;
    background: #ffffff;
}

.taj-context-showcase-card:nth-child(2) {
    grid-column: span 5;
    background: #edf3f5;
}

.taj-context-showcase-card:nth-child(3) {
    grid-column: span 5;
    background: #edf3f5;
}

.taj-context-showcase-card:nth-child(4) {
    grid-column: span 7;
    background: #ffffff;
}

.taj-context-showcase-card:hover {
    background-color: #ffffff;
    border-color: rgba(11, 69, 101, 0.16);
    box-shadow: 0 18px 36px rgba(18, 54, 76, 0.08);
    transform: translateY(-4px);
}

.taj-context-showcase-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    background: #f4f6f7;
    border: 1px solid rgba(11, 69, 101, 0.10);
    border-radius: 16px;
}

.taj-context-showcase-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.taj-context-showcase-type {
    display: block;
    margin-bottom: 7px;
    color: #7a878e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

.taj-context-showcase-card-title {
    margin: 0 0 12px;
    color: #12364c;
    font-size: clamp(20px, 1.5vw, 25px);
    font-weight: 700;
    line-height: 1.65;
}

.taj-context-showcase-card-text {
    margin: 0 0 18px;
    color: #596a74;
    font-size: 14px;
    line-height: 2;
}

.taj-context-showcase-link {
    font-size: 13px;
}

.taj-context-showcase-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 32px;
    padding: 20px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(15, 55, 78, 0.10);
}

.taj-context-showcase-footer p {
    max-width: 760px;
    margin: 0;
    color: #5a6a73;
    font-size: 14px;
    line-height: 2;
}

.taj-context-showcase-footer p strong {
    color: #173b51;
    font-weight: 700;
}

.taj-context-showcase-footer-link {
    flex: 0 0 auto;
}

@media (max-width: 1199px) {
    .taj-context-showcase {
        padding: 70px 0;
    }

    .taj-context-showcase-top {
        grid-template-columns:
            minmax(0, 1fr) minmax(320px, 0.9fr);
    }

    .taj-context-visual-card {
        border-radius: 28px 28px 10px 28px;
    }
}

@media (max-width: 991px) {
    .taj-context-showcase-top {
        grid-template-areas:
            "copy"
            "visual";
        grid-template-columns: 1fr;
        gap: 34px;
        direction: rtl;
    }

    .taj-context-showcase-copy,
    .taj-context-showcase-visual {
        direction: rtl;
    }

    .taj-context-showcase-visual {
        justify-self: stretch;
        width: 100%;
    }

    .taj-context-showcase-card:nth-child(1),
    .taj-context-showcase-card:nth-child(2),
    .taj-context-showcase-card:nth-child(3),
    .taj-context-showcase-card:nth-child(4) {
        grid-column: span 6;
    }

    .taj-context-showcase-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .taj-context-showcase {
        padding: 50px 0;
    }

    .taj-context-showcase-top {
        grid-template-areas:
            "copy"
            "visual";
        grid-template-columns: 1fr;
        gap: 34px;
        margin-bottom: 42px;
        direction: rtl;
    }

    .taj-context-showcase-copy {
        grid-area: copy;
        width: 100%;
        max-width: none;
        padding: 0;
        direction: rtl;
    }

    .taj-context-showcase-visual {
        grid-area: visual;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .taj-context-showcase-kicker {
        margin-bottom: 12px;
        font-size: 12px;
        line-height: 1.8;
    }

    .taj-context-showcase-title {
        margin-bottom: 18px;
        font-size: clamp(27px, 7.2vw, 31px);
        line-height: 1.7;
    }

    .taj-context-showcase-intro {
        max-width: none;
        margin-top: 0;
        font-size: 14px;
        line-height: 2;
    }

    .taj-context-visual-card {
        border-radius: 22px 22px 8px 22px;
    }

    /* روی موبایل، به‌جای پشت‌هم‌چیدن کامل هر ۴ کارت (که فقط اسکرول رو زیاد
       می‌کرد)، همون چیدمان ۲ستونه‌ای که برای حالت تبلت (span 6) از قبل
       طراحی شده بود رو نگه می‌داریم؛ چون محتوای هر کارت (آیکون کوچک + یک
       عنوان + دو سه خط توضیح) به‌اندازه کافی جمع‌وجور هست که در یک ستون
       باریک‌تر هم خوانا بمونه. */
    .taj-context-showcase-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        width: 100%;
    }

    .taj-context-showcase-card,
    .taj-context-showcase-card:nth-child(1),
    .taj-context-showcase-card:nth-child(2),
    .taj-context-showcase-card:nth-child(3),
    .taj-context-showcase-card:nth-child(4) {
        grid-column: span 1 !important;
        width: 100%;
        min-width: 0;
        min-height: auto;
        margin: 0;
        padding: 18px 16px 18px;
        border-radius: 16px;
    }

    .taj-context-showcase-card:nth-child(1),
    .taj-context-showcase-card:nth-child(4) {
        background: #ffffff;
    }

    .taj-context-showcase-card:nth-child(2),
    .taj-context-showcase-card:nth-child(3) {
        background: #edf3f5;
    }

    .taj-context-showcase-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
        border-radius: 13px;
    }

    .taj-context-showcase-icon img {
        width: 23px;
        height: 23px;
    }

    .taj-context-showcase-type {
        margin-bottom: 6px;
        font-size: 11px;
    }

    .taj-context-showcase-card-title {
        margin-bottom: 8px;
        font-size: 17px;
        line-height: 1.5;
    }

    .taj-context-showcase-card-text {
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 1.8;
    }

    .taj-context-showcase-link {
        font-size: 12px;
    }

    .taj-context-showcase-footer {
        display: block;
        margin-top: 34px;
        padding: 24px 20px 22px;
        border-radius: 16px;
    }

    .taj-context-showcase-footer p {
        margin-bottom: 17px;
        font-size: 13px;
        line-height: 1.95;
    }

    .taj-context-showcase-footer-link {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taj-context-showcase-card {
        transition: none !important;
    }

    .taj-context-showcase-card:hover {
        transform: none !important;
    }
}


/* =========================================================
   5) CASE STUDIES
========================================================= */

.taj-cases-section {
    position: relative;
    padding: 70px 0 85px;
    overflow: hidden;
    color: #12364c;
    background: #f6f8f9;
}

/* Header */
.taj-cases-header {
    gap: clamp(45px, 7vw, 95px);
    margin-bottom: 42px;
}

.taj-cases-heading {
    max-width: 660px;
}

.taj-cases-kicker {
    display: block;
    margin-bottom: 10px;
    color: #c95824;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

.taj-cases-title {
    margin: 0;
    color: #102f44;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 700;
    line-height: 1.45;
}

.taj-cases-header-copy {
    max-width: 560px;
}

.taj-cases-header-copy p {
    margin: 0 0 12px;
    color: #596a74;
    font-size: 15px;
    line-height: 2;
}

.taj-cases-note {
    display: block;
    margin-top: 8px;
    color: #5f7078;
    font-size: 12px;
    line-height: 1.8;
}

/* Featured Case */
.taj-case-featured {
    /* تاریخچه: اول کنارهم (متن سمت راست/عکس سمت چپ) بود که چون ستون متن طبیعتا بلندتر از عکسه،
       یا عکس بد کشیده/بریده می‌شد (حالت اول) یا با نوار خالی سرمه‌ای بالا/پایین کوچیک دیده می‌شد
       (حالت دوم، pass-32/33). با اندازه‌گیری واقعی مشخص شد توی عرض ستون کنارهم (~۶۱۵px) هیچ
       نسبتی نیست که هم عکس کامل (هر۴آیکون) دیده بشه هم اندازه‌اش با ستون متن (~۷۳۹px) جور دربیاد؛
       تنها راه ریاضی‌اش این بود که عکس عرض کل کارت رو بگیره. برای همین حالا عکس بالا/تمام‌عرض و
       متن زیرش قرار گرفته؛ عکس با نسبت دقیق خودش (بدون هیچ کراپ) نمایش داده می‌شه. */
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    background: #0b4565;
    border: 1px solid rgba(10, 56, 84, 0.10);
    border-radius: 28px;
    box-shadow: none;
}

.taj-case-featured-media {
    position: relative;
    display: block;
    width: 100%;
    /* نسبت دقیق خود عکس منبع (۸۹۰×۵۲۰) -> صفر کراپ، هر۴آیکون (تولید/انبار/توزیع/نتیجه) کامل دیده می‌شه */
    aspect-ratio: 890 / 520;
    overflow: hidden;
}

.taj-case-featured-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* دور۴۴: خواسته صریح سعیده - عکس این کارت (taj-case-manufacturing.jpg) خودش آبی/سرمه‌ایه،
       و گرادیان قبلی هم سرمه‌ای بود؛ یعنی زیر بج «تولید» عملا آبی روی آبی می‌افتاد و افت
       کنتراست/جذابیت داشت. گرادیان رو خیلی تیره‌تر و نزدیک‌مشکی کردم (فقط پایین عکس، بالای
       عکس تقریبا دست‌نخورده می‌مونه) تا بج سفید روی یک زمینه تیره واقعی بشینه، نه روی آبی. */
    background: linear-gradient(180deg,
            rgba(3, 14, 22, 0.02) 15%,
            rgba(3, 14, 22, 0.32) 65%,
            rgba(3, 14, 22, 0.88) 100%);
    pointer-events: none;
}

.taj-case-featured-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.taj-case-featured-sector {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    padding: 8px 12px;
    color: #ffffff;
    /* دور۴۴: پس‌زمینه بج از سرمه‌ای روشن (که روی عکس آبی محو می‌شد) به تقریبا مشکی پررنگ تغییر
       کرد، هم‌راستا با گرادیان تیره‌شده‌ی بالا؛ کنتراست بج سفید الان مستقل از رنگ خود عکسه. */
    background: rgba(3, 10, 16, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

/* Featured Content */
.taj-case-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 5vw, 70px);
}

.taj-case-source {
    display: block;
    margin-bottom: 13px;
    color: #ef8b5a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;
}

.taj-case-featured-content h3 {
    /* max-width قبلا ۶۷۰px بود، از دوران کنارهم (بالا توضیح داده شد) که عرض ستون متن
       خودش ~۶۱۵px بود و این max-width اصلا فعال نمی‌شد (بی‌ضرر بود). بعد از تبدیل به
       چیدمان تمام‌عرض (پهنای واقعی محتوا ~۱۱۵۴px)، همون عدد قدیمی یه فاصله خالی واقعی
       (~۵۵۰px) سمت چپ ایجاد می‌کرد چون .taj-case-proof زیرش max-width نداره و تمام‌عرض
       کشیده می‌شه؛ برای یکدست‌شدن کامل لبه‌ها (تیتر/متن/ردیف‌های اثبات/دکمه) حذف شد. */
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 700;
    line-height: 1.75;
}

.taj-case-featured-summary {
    /* همون دلیل بالا: max-width قدیمی ۶۵۰px حذف شد تا لبه راست این پاراگراف هم دقیقا
       با تیتر و ردیف‌های اثبات یکی بشه، نه یه‌وجب کوتاه‌تر از عرض واقعی کارت. */
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 2;
}

/* Problem / Action / Goal */
.taj-case-proof {
    margin: 0 0 31px;
    padding: 0;
}

.taj-case-proof>div {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.taj-case-proof>div:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.taj-case-proof dt {
    margin: 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.9;
}

.taj-case-proof dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.95;
}

/* Featured CTA */
.taj-case-featured-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: fit-content;
    margin: 20px 0 0;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.taj-case-featured-link__label {
    display: inline-block;
    width: auto;
    height: auto;
    color: #ffffff;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Secondary Cases */
.taj-cases-more {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 46px;
}

.taj-case-brief {
    position: relative;
    min-width: 0;
    padding-bottom: 4px;
}

.taj-case-brief-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
    overflow: hidden;
    background: #0b3955;
    border-radius: 18px;
    box-shadow: none;
}

.taj-case-brief-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 40%,
            rgba(4, 31, 48, 0.70) 100%);
    pointer-events: none;
}

.taj-case-brief-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.taj-case-brief:hover .taj-case-brief-media img {
    transform: scale(1.025);
}

.taj-case-brief-media>span {
    position: absolute;
    right: 17px;
    bottom: 15px;
    z-index: 2;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.taj-case-brief-content {
    padding: 0 3px;
}

.taj-case-brief-content h3 {
    margin: 0 0 11px;
    color: #12364c;
    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 700;
    line-height: 1.75;
}

.taj-case-brief-content>p {
    margin: 0 0 21px;
    color: #62727b;
    font-size: 13px;
    line-height: 1.95;
}

.taj-case-brief .taj-case-source {
    color: #8a563f;
    font-size: 11px;
    font-weight: 600;
    opacity: 1;
}

.taj-case-brief-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(15, 55, 78, 0.10);
}

.taj-case-brief-bottom>span {
    max-width: 220px;
    color: #78868d;
    font-size: 11px;
    line-height: 1.8;
}

.taj-case-brief-bottom .taj-ui-link {
    flex: 0 0 auto;
    gap: 7px;
    font-size: 12px;
}

/* توجه: قبلا اینجا کارت وسط (تراکنش‌محور) با padding/background/margin-top
   جداگانه «برجسته» می‌شد؛ همین باعث می‌شد عکسش (چون توی پدینگ جمع می‌شد)
   حدود ۹۰-۹۴٪ عرض دو کارت کناری بشه و همیشه کوچیک‌تر دیده بشه.
   چون هر۳کارت (پیمانکاری/تراکنش‌محور/بازرگانی) هم‌رده و هم‌وزنن و دلیل
   کسب‌وکاری‌ای برای برجسته‌بودن یکی نسبت به بقیه نیست، این استایل حذف شد
   تا هرسه دقیقا هم‌سایز رندر بشن. */

/* Footer */
.taj-cases-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 62px;
    padding: 24px 26px;
    background: #0b4565;
    border: 0;
    border-radius: 18px;
}

.taj-cases-footer>div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.taj-cases-footer>div>span {
    color: rgba(255, 255, 255, 0.60);
    font-size: 13px;
}

.taj-cases-footer strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.taj-cases-all-link {
    flex: 0 0 auto;
    color: #ffffff;
}

.taj-cases-all-link>span:first-child {
    color: #ffffff;
}

.taj-case-featured-link:focus-visible,
.taj-case-brief-bottom a:focus-visible,
.taj-cases-all-link:focus-visible {
    outline: 3px solid #d45c24;
    outline-offset: 5px;
    border-radius: 4px;
}

@media (max-width: 1199px) {
    .taj-case-featured-content {
        padding: 40px;
    }
}

@media (max-width: 991px) {
    .taj-cases-header {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .taj-cases-header-copy {
        max-width: 720px;
    }

    .taj-cases-more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .taj-case-brief:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 14px);
    }
}

@media (max-width: 767px) {
    .taj-cases-section {
        padding: 55px 0;
    }

    .taj-cases-header {
        margin-bottom: 38px;
    }

    .taj-cases-title {
        font-size: 34px;
    }

    .taj-cases-header-copy p {
        font-size: 14px;
        line-height: 1.95;
    }

    .taj-case-featured {
        border-radius: 20px;
    }

    /* دور۴۴: قبلا زیر۷۶۷px نسبت خنثی+کراپ‌کناره عمدی بود (برای خوانایی
       آیکون‌ها)؛ طبق خواسته صریح سعیده (هیچ عکسی کراپ نشه) حذف شد — عکس
       حالا تو موبایل هم با همون نسبت دقیق دسکتاپ (۸۹۰:۵۲۰) کامل دیده
       می‌شه، فقط کوتاه‌تر می‌شه. */

    .taj-case-featured-content {
        padding: 28px 21px 30px;
    }

    .taj-case-featured-content h3 {
        font-size: 23px;
        line-height: 1.75;
    }

    .taj-case-featured-summary {
        font-size: 14px;
    }

    .taj-case-proof>div {
        display: block;
        padding: 12px 0;
    }

    .taj-case-proof dt {
        margin-bottom: 4px;
    }

    .taj-cases-more {
        grid-template-columns: 1fr;
        gap: 38px;
        margin-top: 38px;
    }

    .taj-case-brief:last-child {
        grid-column: auto;
        max-width: none;
    }

    .taj-case-brief-media {
        margin-bottom: 18px;
        border-radius: 18px;
    }

    .taj-case-brief-bottom {
        display: block;
    }

    .taj-case-brief-bottom>span {
        display: block;
        max-width: none;
        margin-bottom: 11px;
    }

    .taj-cases-footer {
        display: block;
        margin-top: 48px;
        padding: 22px 20px;
        border-radius: 16px;
    }

    .taj-cases-footer>div {
        display: block;
        margin-bottom: 18px;
    }

    .taj-cases-footer>div span,
    .taj-cases-footer>div strong {
        display: block;
    }

    .taj-cases-footer>div span {
        margin-bottom: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .taj-case-featured-media img,
    .taj-case-brief-media img {
        transition: none !important;
    }

    .taj-case-brief:hover .taj-case-brief-media img {
        transform: none !important;
    }
}

.taj-case-featured-media:focus-visible,
.taj-case-brief-media:focus-visible {
    outline: 3px solid #d45c24;
    outline-offset: 4px;
}


/* =========================================================
   EXECUTION STANDARD
========================================================= */

.taj-execution-section {
    position: relative;
    padding: 85px 0;
    background: #f7f9fa;
    overflow: hidden;
}


/* =========================================================
   Main Layout
========================================================= */

.taj-execution-layout {
    display: grid;

    grid-template-columns:
        minmax(330px, 0.78fr) minmax(0, 1.22fr);

    grid-template-areas:
        "visual content";

    gap: clamp(60px, 7vw, 110px);

    align-items: start;

    direction: ltr;
    gap: clamp(55px, 6vw, 90px);
}


.taj-execution-visual {
    grid-area: visual;
    direction: rtl;
}


.taj-execution-content {
    grid-area: content;
    direction: rtl;
}


/* =========================================================
   Header
========================================================= */

.taj-execution-header {
    max-width: 760px;
    margin-bottom: 46px;
}


.taj-execution-kicker {
    display: block;

    margin-bottom: 13px;

    color: #b34718;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}


.taj-execution-title {
    max-width: 720px;

    margin: 0 0 20px;

    color: #102f44;

    font-size: clamp(34px, 3vw, 50px);
    font-weight: 700;

    line-height: 1.55;
}


.taj-execution-intro {
    max-width: 720px;

    margin: 0;

    color: #596a74;
    font-size: 15.5px;
    line-height: 2.05;

}


/* =========================================================
   Visual
========================================================= */

.taj-execution-media {
    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;

    border-radius:
        28px 28px 10px 28px;

    background: #0b4565;
}


.taj-execution-image {
    position: relative;

    /* دور۴۴: قبلا height ثابت clamp(330px,31vw,430px) بود که نسبت واقعی
       عکس (taj-execution-visual.jpg ≈ ۱٫۴۷:۱) رو نادیده می‌گرفت و باعث
       کراپ محسوس کناره‌ها می‌شد (اندازه‌گیری زنده: قاب ۱٫۱:۱ در برابر
       عکس ۱٫۴۷:۱). با aspect-ratio دقیق خود فایل، دیگه هیچ کراپی نیست. */
    aspect-ratio: 975 / 665;

    overflow: hidden;
}


.taj-execution-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.taj-execution-caption {
    padding:
        28px 30px 30px;

    background: #0b4565;

    color: #ffffff;
}


.taj-execution-caption>span {
    display: block;

    margin-bottom: 8px;

    color: #f09a6e;

    font-size: 12px;
    font-weight: 700;
}


.taj-execution-caption>strong {
    display: block;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.85;
}


.taj-execution-caption>p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;
    line-height: 1.9;
}


/* =========================================================
   Framework
========================================================= */

.taj-execution-framework {
    border-top:
        1px solid rgba(15, 55, 78, 0.12);
}


.taj-execution-framework-head {
    padding: 24px 0 22px;
}

.taj-execution-framework-head span {
    color: #12364c;
    font-size: 17px;
    font-weight: 700;
}

.taj-execution-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin: 0;
    padding: 0;

    list-style: none;

    border-bottom:
        1px solid rgba(15, 55, 78, 0.10);
}


.taj-execution-item {
    position: relative;

    display: grid;

    grid-template-columns:
        16px minmax(0, 1fr);

    gap: 15px;

    min-height: 172px;

    padding:
        28px 24px 28px 0;

    border-top:
        1px solid rgba(15, 55, 78, 0.10);
}


.taj-execution-item:nth-child(odd) {
    padding-left: 30px;

    border-left:
        1px solid rgba(15, 55, 78, 0.10);
}


.taj-execution-marker {
    display: block;

    width: 8px;
    height: 8px;

    margin-top: 11px;

    border-radius: 50%;

    background: #d45c24;

    box-shadow:
        0 0 0 5px rgba(212, 92, 36, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.taj-execution-item:hover .taj-execution-marker {
    transform: scale(1.18);

    box-shadow:
        0 0 0 7px rgba(212, 92, 36, 0.09);
}


.taj-execution-item h3 {
    margin:
        0 0 8px;

    color: #12364c;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.8;
}


.taj-execution-item p {
    max-width: 350px;

    margin: 0;

    color: #687780;

    font-size: 13px;
    line-height: 1.95;
}


/* =========================================================
   Closing Statement
========================================================= */

.taj-execution-closing {
    position: relative;

    display: grid;

    grid-template-columns:
        115px minmax(0, 1fr);

    gap: 32px;

    align-items: center;

    margin-top: 72px;

    padding:
        30px 34px;

    border:
        1px solid rgba(15, 55, 78, 0.09);

    border-radius: 18px;

    background: #edf3f5;
}


.taj-execution-closing::before {
    content: "";

    position: absolute;

    top: 26px;
    right: 0;

    width: 3px;
    height: calc(100% - 52px);

    border-radius: 999px;

    background: #d45c24;
}


.taj-execution-closing-label {
    color: #0b4565;

    font-size: 13px;
    font-weight: 700;
}


.taj-execution-closing p {
    max-width: 940px;

    margin: 0;

    color: #173b51;

    font-size: 15px;
    font-weight: 600;

    line-height: 2;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1199px) {

    .taj-execution-section {
        padding: 70px 0;
    }


    .taj-execution-layout {
        grid-template-columns:
            minmax(300px, 0.8fr) minmax(0, 1.2fr);

        gap: 50px;
    }


    .taj-execution-item {
        padding-left: 20px;
        padding-right: 0;
    }


    .taj-execution-item:nth-child(odd) {
        padding-left: 20px;
    }

}


/* =========================================================
   Tablet / Small Desktop
========================================================= */

@media (max-width: 991px) {

    .taj-execution-layout {
        grid-template-columns: 1fr;

        grid-template-areas:
            "content"
            "visual";

        gap: 55px;

        direction: rtl;
    }


    .taj-execution-content,
    .taj-execution-visual {
        direction: rtl;
    }


    .taj-execution-header {
        max-width: 760px;
    }


    .taj-execution-media {
        max-width: 720px;

        margin:
            0 auto;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .taj-execution-section {
        padding: 55px 0;
    }


    .taj-execution-layout {
        gap: 42px;
    }


    .taj-execution-header {
        margin-bottom: 34px;
    }


    .taj-execution-title {
        font-size:
            clamp(28px, 7.4vw, 32px);

        line-height: 1.7;
    }


    .taj-execution-intro {
        font-size: 14px;
        line-height: 2;
    }


    .taj-execution-list {
        grid-template-columns: 1fr;
    }


    .taj-execution-item,
    .taj-execution-item:nth-child(odd) {
        min-height: auto;

        padding:
            24px 4px;

        border-left: 0;
    }


    .taj-execution-item h3 {
        font-size: 16px;
    }


    /* دور۴۴: height ثابت ۳۳۰px (که با aspect-ratio پایه هماهنگ نبود و
       کراپ ایجاد می‌کرد) حذف شد؛ حالا موبایل هم از همون aspect-ratio
       دقیق پایه (۹۷۵/۶۶۵) استفاده می‌کنه، صفر کراپ در هر عرضی. */


    .taj-execution-media {
        border-radius:
            22px 22px 8px 22px;
    }


    .taj-execution-caption {
        padding:
            24px 22px 25px;
    }


    .taj-execution-caption>strong {
        font-size: 17px;
    }


    .taj-execution-closing {
        display: block;

        margin-top: 50px;

        padding:
            25px 22px;
    }


    .taj-execution-closing-label {
        display: block;

        margin-bottom: 10px;
    }


    .taj-execution-closing p {
        font-size: 14px;
        line-height: 2;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .taj-execution-marker {
        transition: none !important;
    }


    .taj-execution-item:hover .taj-execution-marker {
        transform: none !important;
    }

}


/* =========================================================
   TEAM
========================================================= */

.taj-team-section {
    position: relative;

    padding: 85px 0 78px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   Header
========================================================= */

.taj-team-header {
    max-width: 820px;

    margin:
        0 auto 58px;

    text-align: center;
}


.taj-team-kicker {
    display: block;

    margin-bottom: 12px;

    color: #b34718;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.8;
}


.taj-team-title {
    margin:
        0 0 18px;

    color: #102f44;

    font-size:
        clamp(34px, 3vw, 50px);

    font-weight: 700;

    line-height: 1.55;
}


.taj-team-title span {
    position: relative;

    display: inline-block;

    color: inherit;

    isolation: isolate;
}


.taj-team-title span::after {
    content: "";

    position: absolute;

    right: 2px;
    bottom: 2px;

    width: 46px;
    height: 3px;

    border-radius: 999px;

    background: #d45c24;

    z-index: -1;
}


.taj-team-intro {
    max-width: 700px;

    margin:
        0 auto;

    color: #65747d;

    font-size: 15px;

    line-height: 2;
}


/* =========================================================
   Equal Team Grid
========================================================= */

.taj-team-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;

    align-items: stretch;
}


/* =========================================================
   Member
========================================================= */

.taj-team-member {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        0 4px;

    background: transparent;
}





/* =========================================================
   Image
========================================================= */

.taj-team-media {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    margin-bottom: 25px;

    border-radius:
        22px 22px 8px 22px;

    overflow: hidden;

    background: #eaf0f3;
}


.taj-team-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       مهم:
       تمام تصاویر دقیقاً یک Frame دارند.
       فقط اگر Crop چهره یکی از افراد بعداً نیاز داشت،
       برای همان شخص object-position جدا تعریف می‌کنیم.
    */
    object-position: center center;

    transition:
        transform 0.65s cubic-bezier(.2, .65, .3, 1);
}


.taj-team-member:hover .taj-team-media img {
    transform: scale(1.018);
}


/* کراپ اختصاصی عکس مبینا (دور ۲۳) اینجا حذف شد — دور ۴۳ عکس تیم صفحه
   اصلی کامل با ست جدید مبینا (taj-team-mobina-home.jpg) عوض شد که از
   همون ابتدا هم‌قاب با سعیده/محمدرضا اومده و دیگه نیاز به زوم نداشت. */


/* =========================================================
   Identity
========================================================= */

.taj-team-member-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    min-height: 88px;

    margin-bottom: 14px;
}


.taj-team-identity {
    min-width: 0;
}


.taj-team-name {
    margin:
        0 0 7px;

    color: #12364c;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.65;
}


.taj-team-name a {
    color: inherit;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.taj-team-name a:hover {
    color: #0b4565;
}


.taj-team-position {
    display: block;

    color: #65747d;
    font-size: 13px;
    font-weight: 500;

    line-height: 1.9;
}


/* =========================================================
   Email
========================================================= */

.taj-team-contact {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    margin-top: 2px;

    border:
        1px solid rgba(11, 69, 101, 0.12);

    border-radius: 50%;

    background: #edf3f5;

    color: #0b4565;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.taj-team-contact i {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0;

    font-size: 15px;

    line-height: 1;

    transform:
        translate(-50%, -50%);
}


.taj-team-contact:hover {
    background: #0b4565;

    border-color: #0b4565;

    color: #ffffff;
}


.taj-team-contact:focus-visible,
.taj-team-name a:focus-visible {
    outline:
        3px solid #d45c24;

    outline-offset: 4px;
}


/* =========================================================
   Role
========================================================= */

.taj-team-role {

    min-height: 64px;

    margin:
        0 0 25px;

    color: #596a74;
    font-size: 13.5px;
    line-height: 2;
}


/* =========================================================
   Expertise
========================================================= */

.taj-team-expertise {
    margin-top: auto;

    padding-top: 22px;

    border-top:
        1px solid rgba(15, 55, 78, 0.10);
}


.taj-team-expertise-label {
    display: block;

    margin-bottom: 15px;

    color: #173b51;

    font-size: 13px;
    font-weight: 700;
}


.taj-team-expertise-list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.taj-team-expertise-list li {
    position: relative;

    padding:
        10px 17px 10px 0;

    border-bottom:
        1px solid rgba(15, 55, 78, 0.065);

    color: #5f6f78;

    font-size: 12.5px;

    line-height: 1.85;
}


.taj-team-expertise-list li:last-child {
    border-bottom: 0;
}


.taj-team-expertise-list li::before {
    content: "";

    position: absolute;

    top: 20px;
    right: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #d45c24;
}


/* =========================================================
   Closing
========================================================= */

.taj-team-closing {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 64px;

    padding-top: 28px;

    border-top:
        1px solid rgba(15, 55, 78, 0.10);
}


.taj-team-closing span {
    flex: 0 0 auto;

    color: #b34718;

    font-size: 12px;
    font-weight: 700;
}


.taj-team-closing strong {
    max-width: 680px;

    color: #173b51;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.9;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1199px) {

    .taj-team-section {
        padding:
            70px 0;
    }


    .taj-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            50px 28px;
    }


    .taj-team-member:not(:last-child) {
        border-left: 0;

        padding-left: 4px;
    }


    /*
       عضو سوم بزرگ‌تر نمی‌شود.
       فقط همان عرض دو عضو دیگر را حفظ می‌کند
       و در وسط ردیف بعدی قرار می‌گیرد.
    */

    .taj-team-member:nth-child(3) {
        grid-column:
            1 / -1;

        width:
            calc(50% - 14px);

        justify-self: center;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .taj-team-section {
        padding:
            55px 0;
    }


    .taj-team-header {
        margin-bottom: 42px;

        text-align: right;
    }


    .taj-team-title {
        font-size:
            clamp(28px, 7.4vw, 32px);

        line-height: 1.7;
    }


    .taj-team-intro {
        font-size: 14px;

        line-height: 2;
    }


    .taj-team-grid {
        grid-template-columns: 1fr;

        gap: 52px;
    }


    .taj-team-member:nth-child(3) {
        grid-column: auto;

        width: 100%;
    }


    .taj-team-media {
        aspect-ratio: 4 / 5;

        margin-bottom: 22px;

        border-radius:
            20px 20px 8px 20px;
    }


    .taj-team-member-head {
        min-height: 0;
    }


    .taj-team-role {
        min-height: 0;
    }


    .taj-team-closing {
        display: block;

        margin-top: 52px;
    }


    .taj-team-closing span {
        display: block;

        margin-bottom: 9px;
    }


    .taj-team-closing strong {
        display: block;

        font-size: 14px;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .taj-team-media img,
    .taj-team-contact,
    .taj-team-name a {
        transition:
            none !important;
    }


    .taj-team-member:hover .taj-team-media img {
        transform:
            none !important;
    }

}

/*
   توضیح (مرداد ۱۴۰۴): بلوک قدیمی «TEAM PORTRAITS — EQUAL VISUAL WEIGHT»
   که اینجا بود حذف شد. اون بلوک برای هر عضو یک zoom دستی جدا (۱٫۱۳ /
   ۱٫۰۶ / ۱) تعریف کرده بود که مخصوص عکس‌های قبلی (Placeholder) کالیبره
   شده بود، نه عکس‌های واقعی تیم. با عکس‌های جدید این zoom های دستی باعث
   می‌شد بعضی افراد (سعیده، محمدرضا) خیلی بیشتر از مبینا بزرگ‌نمایی بشن
   و قاب‌ها هم‌تراز و هم‌سبک به‌نظر نرسن. قانون ساده‌ی اصلی فایل (پایین‌تر
   در بخش «Image»، همون object-position: center center با Crop خودکار)
   برای هر سه عکس فعلی خوب جواب می‌ده و دیگه لازم نیست دوباره تعریف بشه.
*/

/* =========================================================
   TEAM — TRUE EQUAL COLUMNS
========================================================= */

.taj-team-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 32px;

    align-items: stretch;
}


.taj-team-member {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    /* مهم: هر سه دقیقاً یک Padding */
    padding: 0;

    background: transparent;
}


/* ---------------------------------------------------------
   Separators
   Divider no longer changes member width
--------------------------------------------------------- */

.taj-team-member:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    /*
       Divider sits in the grid gap,
       not inside the member column.
    */
    left: -16px;

    width: 1px;

    background:
        rgba(15, 55, 78, 0.09);

    pointer-events: none;
}


/*
   توضیح (مرداد ۱۴۰۴): این بخش هم قبلاً یک بار دیگه aspect-ratio/Object-fit
   پایه رو (بدون هیچ تغییری) و بعد یک سیستم دوم Zoom دستی («Individual Crop
   Calibration»: سعیده ۱٫۲۴×, محمدرضا ۱٫۲۸×, مبینا ۱×) رو تعریف می‌کرد که
   چون آخرین تعریف در فایل بود، همین یکی روی صفحه واقعاً اجرا می‌شد. دقیقاً
   همین بلوک عامل شکایت «عکس مبینا زوم نشده ولی عکس‌های دیگه زوم شدن» بود:
   برای عکس‌های واقعی تیم (که همه تقریباً با فاصله یکسان از دوربین گرفته
   شدن) این Zoom های ۲۴ تا ۲۸ درصدی اضافی هیچ توجیهی نداشت. با حذف این
   بلوک، تعریف ساده‌ی اصلی («Image» در بالای فایل) دوباره فعال می‌شه: یک
   Frame ثابت ۴:۵ برای هر سه نفر، بدون Zoom دستی، با object-position:
   center center — که روی عکس‌های فعلی سه نفر (بررسی‌شده با شبیه‌سازی دقیق
   Crop) نتیجه‌ی هم‌تراز و هم‌سبکی می‌ده.
*/

/* =========================================================
   TEAM — FINAL RESPONSIVE OVERRIDES
   Must stay at the END of home.css
========================================================= */


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 1199px) {

    .taj-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            50px 28px;
    }


    .taj-team-member {
        width: 100%;
        padding: 0;
    }


    /* dividers should not influence tablet composition */
    .taj-team-member::after {
        display: none;
    }


    /* third member keeps the same visual width */
    .taj-team-member:nth-child(3) {
        grid-column: 1 / -1;

        width: calc(50% - 14px);

        justify-self: center;
    }

}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 767px) {

    .taj-team-section {
        padding:
            55px 0;
    }


    .taj-team-header {
        margin-bottom: 42px;

        text-align: right;
    }


    .taj-team-grid {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr);

        gap: 52px;
    }


    .taj-team-member,
    .taj-team-member:nth-child(1),
    .taj-team-member:nth-child(2),
    .taj-team-member:nth-child(3) {
        grid-column: auto;

        width: 100%;

        min-width: 0;

        padding: 0;

        justify-self: stretch;
    }


    .taj-team-member::after {
        display: none;
    }


    .taj-team-media {
        width: 100%;

        aspect-ratio: 4 / 5;

        margin-bottom: 22px;
    }


    .taj-team-member-head {
        min-height: 0;
    }


    .taj-team-role {
        min-height: 0;

        margin-bottom: 22px;
    }


    .taj-team-expertise {
        margin-top: 0;
    }


    .taj-team-closing {
        display: block;

        margin-top: 52px;
    }


    .taj-team-closing span {
        display: block;

        margin-bottom: 9px;
    }


    .taj-team-closing strong {
        display: block;

        max-width: none;

        font-size: 14px;
    }

}

/* =========================================================
   GLOBAL — BACK TO TOP
   Hidden on mobile to avoid covering interactive content
========================================================= */

@media (max-width: 767px) {

    #progress-wrap,
    .progress-wrap {
        display: none !important;
    }

}

/* =========================================================
   KNOWLEDGE / ARTICLES
========================================================= */

.taj-knowledge-section {
    position: relative;
    padding: 78px 0 65px;
    background: #f7f9fa;
    overflow: hidden;
}


/* =========================================================
   Header
========================================================= */

.taj-knowledge-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 52px;
}


.taj-knowledge-heading {
    max-width: 760px;
}


.taj-knowledge-kicker {
    display: block;

    margin-bottom: 12px;

    color: #b34718;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}


.taj-knowledge-title {
    margin: 0 0 16px;

    color: #102f44;

    font-size: clamp(34px, 3vw, 50px);
    font-weight: 700;
    line-height: 1.55;
}


.taj-knowledge-intro {
    max-width: 650px;

    margin: 0;

    color: #64737c;

    font-size: 15px;
    line-height: 2;
}


.taj-knowledge-all {
    flex: 0 0 auto;

    margin-bottom: 5px;
}


/* =========================================================
   Editorial Layout
========================================================= */

.taj-knowledge-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.22fr) minmax(400px, 0.78fr);

    grid-template-areas:
        "featured supporting";

    gap: clamp(42px, 4.5vw, 62px);

    align-items: stretch;

    direction: rtl;
}


/* =========================================================
   Featured Article
========================================================= */

.taj-knowledge-featured {
    grid-area: featured;

    min-width: 0;
}


.taj-knowledge-featured-media {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    margin-bottom: 27px;

    border-radius:
        26px 26px 8px 26px;

    overflow: hidden;

    background: #0b4565;
}


.taj-knowledge-featured-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(.2, .65, .3, 1);
}


.taj-knowledge-featured-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 55%,
            rgba(5, 38, 58, 0.18) 100%);

    pointer-events: none;
}


.taj-knowledge-featured:hover .taj-knowledge-featured-media img {
    transform: scale(1.02);
}


.taj-knowledge-category {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 2;

    padding:
        7px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    background:
        rgba(7, 49, 74, 0.72);

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}


.taj-knowledge-featured-content {
    max-width: 720px;
}


.taj-knowledge-type {
    display: block;

    margin-bottom: 9px;

    color: #b34718;

    font-size: 12px;
    font-weight: 700;
}


.taj-knowledge-featured-content h3 {
    margin: 0 0 13px;

    font-size:
        clamp(23px, 2vw, 31px);

    font-weight: 700;

    line-height: 1.7;
}


.taj-knowledge-featured-content h3 a {
    color: #12364c;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.taj-knowledge-featured-content h3 a:hover {
    color: #0b4565;
}


.taj-knowledge-featured-content p {
    max-width: 650px;

    margin:
        0 0 20px;

    color: #65747d;

    font-size: 14px;
    line-height: 2;
}


/* =========================================================
   Supporting Articles
========================================================= */

.taj-knowledge-supporting {
    grid-area: supporting;

    display: flex;
    flex-direction: column;

    border-top:
        1px solid rgba(15, 55, 78, 0.10);
}


.taj-knowledge-brief {
    display: grid;

    grid-template-columns:
        150px minmax(0, 1fr);

    gap: 22px;

    align-items: start;

    padding:
        26px 0;

    border-bottom:
        1px solid rgba(15, 55, 78, 0.10);
}


.taj-knowledge-brief-media {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    border-radius:
        18px 18px 6px 18px;

    overflow: hidden;

    background: #e9eff2;
}


.taj-knowledge-brief-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s cubic-bezier(.2, .65, .3, 1);
}


.taj-knowledge-brief:hover .taj-knowledge-brief-media img {
    transform: scale(1.025);
}


.taj-knowledge-category-text {
    display: block;

    margin-bottom: 8px;

    color: #b34718;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.8;
}


.taj-knowledge-brief-content h3 {
    margin:
        0 0 15px;

    font-size: 18.5px;
    font-weight: 700;

    line-height: 1.82;
}


.taj-knowledge-brief-content h3 a {
    color: #173b51;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.taj-knowledge-brief-content h3 a:hover {
    color: #0b4565;
}


/* compact global link inside article list */

.taj-knowledge-brief .taj-ui-link {
    font-size: 12px;
}


.taj-knowledge-brief .taj-ui-link__icon {
    width: 30px;
    height: 30px;

    flex-basis: 30px;
}


/* =========================================================
   Focus
========================================================= */

.taj-knowledge-featured-media:focus-visible,
.taj-knowledge-brief-media:focus-visible,
.taj-knowledge-featured-content h3 a:focus-visible,
.taj-knowledge-brief-content h3 a:focus-visible {
    outline:
        3px solid #d45c24;

    outline-offset: 4px;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1199px) {

    .taj-knowledge-section {
        padding:
            70px 0;
    }


    .taj-knowledge-layout {
        grid-template-columns:
            minmax(0, 1.15fr) minmax(330px, 0.85fr);

        gap: 42px;
    }


    .taj-knowledge-brief {
        grid-template-columns:
            125px minmax(0, 1fr);

        gap: 18px;
    }

}


/* =========================================================
   Tablet / Small Desktop
========================================================= */

@media (max-width: 991px) {

    .taj-knowledge-header {
        display: block;
    }


    .taj-knowledge-all {
        margin-top: 24px;
    }


    .taj-knowledge-layout {
        grid-template-columns: 1fr;

        grid-template-areas:
            "featured"
            "supporting";

        gap: 48px;
    }


    .taj-knowledge-supporting {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 28px;

        border-top: 0;
    }


    .taj-knowledge-brief {
        display: block;

        padding: 0;

        border-bottom: 0;
    }


    .taj-knowledge-brief-media {
        aspect-ratio: 16 / 10;

        margin-bottom: 18px;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .taj-knowledge-section {
        padding:
            55px 0;
    }


    .taj-knowledge-header {
        margin-bottom: 38px;
    }


    .taj-knowledge-title {
        font-size:
            clamp(28px, 7.4vw, 32px);

        line-height: 1.7;
    }


    .taj-knowledge-intro {
        font-size: 14px;
        line-height: 2;
    }


    .taj-knowledge-featured-media {
        aspect-ratio: 4 / 3;

        margin-bottom: 22px;

        border-radius:
            21px 21px 7px 21px;
    }


    .taj-knowledge-featured-content h3 {
        font-size: 21px;
    }


    .taj-knowledge-supporting {
        display: block;
    }


    .taj-knowledge-brief {
        display: grid;

        grid-template-columns:
            110px minmax(0, 1fr);

        gap: 16px;

        padding:
            24px 0;

        border-bottom:
            1px solid rgba(15, 55, 78, 0.10);
    }


    .taj-knowledge-brief:first-child {
        border-top:
            1px solid rgba(15, 55, 78, 0.10);
    }


    .taj-knowledge-brief-media {
        aspect-ratio: 1 / 1;

        margin: 0;
    }


    .taj-knowledge-brief-content h3 {
        margin-bottom: 12px;

        font-size: 16px;

        line-height: 1.85;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .taj-knowledge-featured-media img,
    .taj-knowledge-brief-media img,
    .taj-knowledge-featured-content h3 a,
    .taj-knowledge-brief-content h3 a {
        transition:
            none !important;
    }


    .taj-knowledge-featured:hover .taj-knowledge-featured-media img,
    .taj-knowledge-brief:hover .taj-knowledge-brief-media img {
        transform:
            none !important;
    }

}

/* =========================================================
   TAJ GLOBAL ARROW — FINAL OPTICAL ALIGNMENT
========================================================= */

/*
   Every TAJ navigation link uses one identical arrow.
   Existing <i>, <img> or <svg> inside the icon are hidden.
*/

.taj-ui-link__icon {
    position: relative;

    display: grid !important;
    place-items: center !important;

    flex-shrink: 0;

    line-height: 0 !important;
}


/* Remove different icon sources */
.taj-ui-link__icon>i,
.taj-ui-link__icon>img,
.taj-ui-link__icon>svg {
    display: none !important;
}


/* One unified left arrow */
.taj-ui-link__icon::before {
    content: "";

    display: block;

    width: 12px;
    height: 8px;

    background: currentColor;

    clip-path: polygon(0 50%,
            42% 0,
            42% 32%,
            100% 32%,
            100% 68%,
            42% 68%,
            42% 100%);

    transform: none !important;

    transition: none !important;
}


/* ---------------------------------------------------------
   Light-surface navigation links
   Underline belongs to text, not to the circle
--------------------------------------------------------- */

.taj-ui-link--dark {
    align-items: center;

    padding-bottom: 0;

    border-bottom: 0;
}


.taj-ui-link--dark>span:first-child {
    display: inline-block;

    padding-bottom: 5px;

    border-bottom:
        1px solid rgba(18, 54, 76, 0.18);

    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}


.taj-ui-link--dark .taj-ui-link__icon {
    margin-bottom: 0 !important;
}


.taj-ui-link--dark:hover>span:first-child {
    border-color:
        rgba(11, 69, 101, 0.42);
}


/* ---------------------------------------------------------
   Never move arrow away from center on hover
--------------------------------------------------------- */

.taj-ui-link:hover .taj-ui-link__icon::before,
.taj-ui-link--dark:hover .taj-ui-link__icon::before,
.taj-ui-link--light:hover .taj-ui-link__icon::before,
.taj-ui-link--primary:hover .taj-ui-link__icon::before {
    transform: none !important;
}


/* Disable previous icon movement rules */
.taj-ui-link:hover .taj-ui-link__icon i,
.taj-ui-link--dark:hover .taj-ui-link__icon i,
.taj-ui-link--light:hover .taj-ui-link__icon i,
.taj-ui-link--primary:hover .taj-ui-link__icon i {
    transform:
        translate(-50%, -50%) !important;
}


/* =========================================================
   CONTACT / START CONVERSATION
========================================================= */

.taj-contact-section {
    position: relative;

    padding: 82px 0 70px;

    background: #e4edf1;

    overflow: hidden;
}


/* =========================================================
   Header
========================================================= */

.taj-contact-header {
    max-width: 920px;

    margin-bottom: 52px;
}


.taj-contact-kicker {
    display: block;

    margin-bottom: 13px;

    color: #b34718;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.8;
}


.taj-contact-title {
    max-width: 900px;

    margin: 0;

    color: #102f44;

    font-size:
        clamp(35px, 3.1vw, 51px);

    font-weight: 700;

    line-height: 1.55;
}


.taj-contact-title span {
    position: relative;
    display: inline;
    color: inherit;
}

/* =========================================================
   Main Layout
========================================================= */

.taj-contact-layout {
    display: grid;

    grid-template-columns:
        minmax(350px, 0.82fr) minmax(0, 1.18fr);

    grid-template-areas:
        "aside form";

    gap: clamp(45px, 5.5vw, 80px);

    align-items: stretch;

    direction: ltr;
}


.taj-contact-aside {
    grid-area: aside;

    direction: rtl;
}


.taj-contact-form-panel {
    grid-area: form;

    direction: rtl;
}


/* =========================================================
   Navy Contact Panel
========================================================= */

.taj-contact-aside {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        38px 36px 34px;

    border-radius:
        28px 28px 10px 28px;

    background: #0b4565;

    color: #ffffff;

    overflow: hidden;
}


.taj-contact-aside-head {
    margin-bottom: 31px;
}


.taj-contact-aside-kicker {
    display: block;

    margin-bottom: 9px;

    color: #f09a6e;

    font-size: 12px;
    font-weight: 700;
}


.taj-contact-aside-head h3 {
    max-width: 390px;

    margin: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.8;
}


/* =========================================================
   Contact Details
========================================================= */

.taj-contact-details {
    display: flex;
    flex-direction: column;

    gap: 0;

    margin:
        0 0 30px;

    padding: 0;

    font-style: normal;

    border-top:
        1px solid rgba(255, 255, 255, 0.11);
}


.taj-contact-detail {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    gap: 15px;

    align-items: start;

    padding:
        20px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.11);

    color: #ffffff;

    text-decoration: none;
}


a.taj-contact-detail {
    transition:
        opacity 0.25s ease;
}


a.taj-contact-detail:hover {
    opacity: 0.86;
}


.taj-contact-detail-icon {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;
}


.taj-contact-detail-icon i {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0;

    font-size: 17px;

    line-height: 1;

    transform:
        translate(-50%, -50%);
}


.taj-contact-detail-content {
    min-width: 0;
}


.taj-contact-detail-content strong {
    display: block;

    color: rgba(255, 255, 255, 0.92);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.95;


}


/* =========================================================
   Map
========================================================= */

.taj-contact-map {
    position: relative;

    min-height: 260px;

    margin-top: auto;

    border-radius:
        18px 18px 6px 18px;

    overflow: hidden;

    background: #dfe7eb;

    isolation: isolate;
}


.taj-contact-map iframe {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   Form Panel
========================================================= */

.taj-contact-form-panel {
    min-width: 0;

    padding:
        42px 44px 44px;

    border:
        1px solid rgba(15, 55, 78, 0.08);

    border-radius: 28px;

    background: #ffffff;
}


/* =========================================================
   Form Header
========================================================= */

.taj-contact-form-head {
    max-width: 650px;

    margin-bottom: 36px;

    padding-bottom: 31px;

    border-bottom:
        1px solid rgba(15, 55, 78, 0.09);
}


.taj-contact-form-head>span {
    display: block;

    margin-bottom: 8px;

    color: #b34718;

    font-size: 12px;
    font-weight: 700;
}


.taj-contact-form-head h3 {
    margin:
        0 0 9px;

    color: #12364c;

    font-size:
        clamp(22px, 1.8vw, 28px);

    font-weight: 700;

    line-height: 1.75;
}


.taj-contact-form-head p {
    max-width: 590px;

    margin: 0;

    color: #5f7079;

    font-size: 13px;

    line-height: 2;
}


/* =========================================================
   Form Grid
========================================================= */

.taj-contact-form {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        27px 24px;
}


/* =========================================================
   Fields
========================================================= */

.taj-contact-field {
    min-width: 0;
}


.taj-contact-field--full,
.taj-contact-actions {
    grid-column:
        1 / -1;
}


.taj-contact-field label {
    display: flex;

    align-items: baseline;

    gap: 5px;

    margin-bottom: 9px;

    color: #24495f;

    font-size: 12.5px;
    font-weight: 700;

    line-height: 1.7;
}


.taj-contact-field label>span {
    color: #c95824;
}


.taj-contact-field label small {
    color: #87939a;

    font-size: 10px;
    font-weight: 500;
}


/* =========================================================
   Controls
========================================================= */

.taj-contact-field input,
.taj-contact-field select,
.taj-contact-field textarea {
    display: block;

    width: 100%;

    min-width: 0;

    border:
        1px solid rgba(15, 55, 78, 0.13);

    border-radius: 11px;

    outline: 0;

    background: #f8fafb;

    color: #173b51;

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}


.taj-contact-field input,
.taj-contact-field select {
    min-height: 50px;

    padding:
        0 15px;
}


.taj-contact-field textarea {
    min-height: 138px;

    padding:
        14px 15px;

    line-height: 1.9;

    resize: vertical;
}


.taj-contact-field input::placeholder,
.taj-contact-field textarea::placeholder {
    color: #9aa5ab;

    opacity: 1;
}


.taj-contact-field select {
    cursor: pointer;
}


/* =========================================================
   Focus
========================================================= */

.taj-contact-field input:focus,
.taj-contact-field select:focus,
.taj-contact-field textarea:focus {
    border-color:
        rgba(11, 69, 101, 0.65);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(11, 69, 101, 0.07);
}


.taj-contact-field input:focus-visible,
.taj-contact-field select:focus-visible,
.taj-contact-field textarea:focus-visible {
    outline:
        2px solid rgba(212, 92, 36, 0.70);

    outline-offset: 2px;
}


/* =========================================================
   Action
========================================================= */

.taj-contact-actions {
    display: flex;

    align-items: center;

    padding-top: 3px;
}


.taj-contact-submit {
    min-height: 46px;
}

.taj-contact-submit.taj-ui-link--primary {
    padding-left: 18px;
}

/* =========================================================
   Accessibility
========================================================= */

.taj-contact-detail:focus-visible,
.taj-contact-submit:focus-visible {
    outline:
        3px solid #d45c24;

    outline-offset: 5px;
}


/* =========================================================
   Honeypot (Anti-Spam)
   این فیلد فقط برای ربات‌های خودکار قابل مشاهده/پرشدن است؛
   کاربر واقعی هرگز آن را نمی‌بیند و با کیبورد هم به آن نمی‌رسد.
========================================================= */

.taj-contact-honeypot {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;

    border: 0;
}


/* =========================================================
   Submission Status
========================================================= */

.taj-contact-form-status {
    grid-column: 1 / -1;

    margin: -6px 0 0;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.8;
}

.taj-contact-form-status:empty {
    display: none;
}

.taj-contact-form-status.is-pending {
    color: #6b7a83;
}

.taj-contact-form-status.is-success {
    color: #1e7d51;
}

.taj-contact-form-status.is-error {
    color: #c0392b;
}

.taj-contact-submit:disabled {
    opacity: 0.7;

    cursor: not-allowed;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1199px) {

    .taj-contact-section {
        padding:
            70px 0 75px;
    }


    .taj-contact-layout {
        grid-template-columns:
            minmax(310px, 0.82fr) minmax(0, 1.18fr);

        gap: 40px;
    }


    .taj-contact-aside {
        padding:
            32px 28px 28px;
    }


    .taj-contact-form-panel {
        padding:
            36px 34px 38px;
    }

}


/* =========================================================
   Tablet / Small Desktop
========================================================= */

@media (max-width: 991px) {

    .taj-contact-layout {
        grid-template-columns: 1fr;

        grid-template-areas:
            "form"
            "aside";

        gap: 36px;

        direction: rtl;
    }


    .taj-contact-form-panel,
    .taj-contact-aside {
        direction: rtl;
    }


    .taj-contact-map {
        min-height: 300px;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .taj-contact-section {
        padding:
            55px 0 60px;
    }


    .taj-contact-header {
        margin-bottom: 38px;
    }


    .taj-contact-title {
        font-size:
            clamp(28px, 7.4vw, 32px);

        line-height: 1.72;
    }


    .taj-contact-layout {
        gap: 30px;
    }


    .taj-contact-form-panel {
        padding:
            28px 20px 30px;

        border-radius: 22px;
    }


    .taj-contact-form-head {
        margin-bottom: 28px;

        padding-bottom: 25px;
    }


    .taj-contact-form-head h3 {
        font-size: 21px;
    }


    .taj-contact-form {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .taj-contact-field,
    .taj-contact-field--full,
    .taj-contact-actions {
        grid-column: auto;
    }


    .taj-contact-aside {
        padding:
            28px 22px 24px;

        border-radius:
            22px 22px 8px 22px;
    }


    .taj-contact-aside-head h3 {
        font-size: 20px;
    }


    .taj-contact-map {
        min-height: 245px;

        border-radius:
            16px 16px 6px 16px;
    }


    .taj-contact-submit {
        min-height: 44px;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .taj-contact-detail,
    .taj-contact-field input,
    .taj-contact-field select,
    .taj-contact-field textarea {
        transition:
            none !important;
    }

}

/* =========================================================
   ACCESSIBILITY — VISUALLY HIDDEN
========================================================= */

.taj-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   FOOTER
========================================================= */

.taj-footer {
    position: relative;

    padding:
        86px
        0
        0;

    background: #082f48;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   Main Layout
========================================================= */

.taj-footer-main {
    display: grid;

    grid-template-columns:
        minmax(300px, 1.15fr)
        minmax(170px, 0.55fr)
        minmax(280px, 0.85fr);

    gap:
        clamp(55px, 7vw, 105px);

    align-items: start;

    padding-bottom: 62px;
}


/* =========================================================
   Brand
========================================================= */

.taj-footer-brand {
    min-width: 0;
}


.taj-footer-logo {
    display: inline-block;

    margin-bottom: 27px;
}


.taj-footer-logo img {
    display: block;

    width: 150px;
    height: auto;
}


.taj-footer-brand-text {
    max-width: 390px;

    margin:
        0
        0
        25px;

    color:
        rgba(255, 255, 255, 0.67);

    font-size: 13px;

    line-height: 2;
}


/* =========================================================
   Contact
========================================================= */

.taj-footer-contact {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    margin: 0;

    font-style: normal;
}


.taj-footer-contact a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255, 255, 255, 0.87);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.7;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.taj-footer-contact a:hover {
    color: #ffffff;
}


.taj-footer-contact i {
    color: #ef9468;

    font-size: 15px;
}


/* =========================================================
   Shared Heading
========================================================= */

.taj-footer-heading {
    display: block;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.8;
}


/* =========================================================
   Navigation
========================================================= */

.taj-footer-nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.taj-footer-nav li {
    margin-bottom: 11px;
}


.taj-footer-nav li:last-child {
    margin-bottom: 0;
}


.taj-footer-nav a {
    position: relative;

    display: inline-block;

    padding-bottom: 2px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 13px;
    font-weight: 500;

    line-height: 1.8;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.taj-footer-nav a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #ef9468;

    transition:
        width 0.3s ease;
}


.taj-footer-nav a:hover {
    color: #ffffff;
}


.taj-footer-nav a:hover::after {
    width: 100%;
}


/* =========================================================
   Knowledge / Newsletter
========================================================= */

.taj-footer-knowledge p {
    max-width: 350px;

    margin:
        0
        0
        22px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 13px;

    line-height: 2;
}


.taj-footer-newsletter-status {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    max-width: 100%;

    padding:
        12px
        14px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.055);

    color:
        rgba(255, 255, 255, 0.67);

    font-size: 11.5px;

    line-height: 1.8;
}


.taj-footer-newsletter-icon {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        0
        0
        32px;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color: #ef9468;
}


.taj-footer-newsletter-icon i {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0;

    font-size: 14px;

    line-height: 1;

    transform:
        translate(-50%, -50%);
}


/* =========================================================
   Brand Statement
========================================================= */

.taj-footer-statement {
    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        27px
        0;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    color:
        rgba(255, 255, 255, 0.90);

    font-size:
        clamp(16px, 1.25vw, 20px);

    font-weight: 700;

    line-height: 1.8;
}


.taj-footer-statement > span:nth-child(even) {
    flex:
        0
        0
        4px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #d45c24;
}


/* =========================================================
   Footer Bottom
========================================================= */

.taj-footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    min-height: 82px;

    padding:
        18px
        0;
}


.taj-footer-copyright {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.50);

    font-size: 11.5px;

    line-height: 1.8;
}


/* =========================================================
   Social
========================================================= */

.taj-footer-social {
    display: flex;

    align-items: center;

    gap: 8px;
}


.taj-footer-social-link {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        0
        0
        36px;

    width: 36px;
    height: 36px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        rgba(255, 255, 255, 0.82);

    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}


.taj-footer-social-link i {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0;

    font-size: 15px;

    line-height: 1;

    transform:
        translate(-50%, -50%);
}


a.taj-footer-social-link:hover {
    border-color: #ffffff;

    background: #ffffff;

    color: #0b4565;
}


.taj-footer-social-link.is-disabled {
    opacity: 0.38;

    cursor: default;
}


/* =========================================================
   Focus
========================================================= */

.taj-footer a:focus-visible {
    outline:
        3px solid #d45c24;

    outline-offset: 4px;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 991px) {

    .taj-footer {
        padding-top: 70px;
    }


    .taj-footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            48px
            40px;
    }


    .taj-footer-knowledge {
        grid-column:
            1 / -1;

        max-width: 600px;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .taj-footer {
        padding-top: 58px;
    }


    .taj-footer-main {
        grid-template-columns: 1fr;

        gap: 42px;

        padding-bottom: 46px;
    }


    .taj-footer-logo {
        margin-bottom: 22px;
    }


    .taj-footer-logo img {
        width: 135px;
    }


    .taj-footer-brand-text {
        max-width: none;

        font-size: 13px;
    }


    .taj-footer-knowledge {
        grid-column: auto;

        max-width: none;
    }


    .taj-footer-statement {
        flex-wrap: wrap;

        gap:
            8px
            11px;

        padding:
            24px
            0;

        font-size: 15px;
    }


    .taj-footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 19px;

        padding:
            23px
            0
            28px;
    }


    .taj-footer-social {
        order: 1;
    }


    .taj-footer-copyright {
        order: 2;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {

    .taj-footer-statement {
        display: grid;

        grid-template-columns:
            auto
            4px
            auto;

        justify-content: start;

        line-height: 1.9;
    }


    .taj-footer-statement > span:nth-child(5) {
        grid-column:
            1 / -1;
    }


    .taj-footer-statement > span:nth-child(4) {
        display: none;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .taj-footer-contact a,
    .taj-footer-nav a,
    .taj-footer-nav a::after,
    .taj-footer-social-link {
        transition:
            none !important;
    }

}


/* =========================================================
   FOOTER — KNOWLEDGE LINK
========================================================= */

.taj-footer-knowledge-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.055);

    color: rgba(255, 255, 255, 0.78);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}


.taj-footer-knowledge-link:hover {
    background: rgba(255, 255, 255, 0.09);

    border-color: rgba(255, 255, 255, 0.18);

    color: #ffffff;
}


.taj-footer-knowledge-link:focus-visible {
    outline: 3px solid #d45c24;
    outline-offset: 4px;
}