/* =========================================================
   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;
    /* دور۳۱: هم‌زمان با کم‌شدن شدید گرادیان پس‌زمینه هیرو، این سایه‌متن (سنگین) اضافه
       شد. دور۳۲: سعیده گفت دور نوشته‌ها زشت شده (هاله تیره)؛ چون گرادیان بالا
       (style.css) دوباره تقویت شد (حالت وسط)، این سایه هم متناسب سبک‌تر شد - فقط
       یک سایه تماس ظریف، بدون هاله بزرگ ۲۸px. */
    text-shadow: 0 1px 2px rgba(2, 16, 26, 0.35), 0 4px 14px rgba(2, 16, 26, 0.22);
}

.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;
    /* دور۳۲: هم‌زمان با تقویت گرادیان پس‌زمینه (style.css)، سبک‌تر شد - رجوع کنید
       به توضیح کامل روی taj-hero-title بالای همین فایل. */
    text-shadow: 0 1px 2px rgba(2, 16, 26, 0.3), 0 3px 10px rgba(2, 16, 26, 0.2);
}

/* دور۳۷: خواسته صریح سعیده (عکس پنجم) - دکمه «بررسی خدمات» هیرو
   قشنگ‌تر/جذاب‌تر بشه، بیشتر جلب توجه کنه. چون خودِ .btn پایه
   overflow:hidden داره (لازم برای مکانیزم اسلاید متن/آیکون هاور
   موجود؛ عمدا دست‌نخورده موند)، سایه‌ی تازه با filter:drop-shadow
   گذاشته شد نه box-shadow - چون drop-shadow برخلاف box-shadow با
   overflow:hidden المان خودش بریده نمی‌شه (تست شد). حلقه ضربان هم
   روی یک wrapper بیرونی جدید (taj-hero-cta-wrap، در index.html)
   قرار گرفته، دقیقا به همون دلیل. */
.hero-area.style-three .hero-content .taj-hero-cta {
    position: relative;
    z-index: 1;

    margin-bottom: 0;

    filter:
        drop-shadow(0 18px 32px rgba(2, 16, 26, 0.4))
        drop-shadow(0 4px 10px rgba(2, 16, 26, 0.22));

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

.taj-hero-cta-wrap {
    position: relative;
    display: inline-block;
    border-radius: 50px;
}

.taj-hero-cta-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: 50px;
    box-shadow: 0 0 0 0 rgba(246, 140, 65, 0.45);
    pointer-events: none;

    animation: taj-cta-ripple 2400ms ease-out infinite;
}

@keyframes taj-cta-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(246, 140, 65, 0.45);
    }

    70%,
    100% {
        box-shadow: 0 0 0 16px rgba(246, 140, 65, 0);
    }
}

@media (hover: hover) and (pointer: fine) {

    .hero-area.style-three .hero-content .taj-hero-cta:hover {
        transform: translateY(-3px);
        filter:
            drop-shadow(0 24px 40px rgba(2, 16, 26, 0.46))
            drop-shadow(0 6px 14px rgba(2, 16, 26, 0.26));
    }

}

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

    .taj-hero-cta-wrap::before {
        animation: none;
        opacity: 0;
    }

    .hero-area.style-three .hero-content .taj-hero-cta {
        transition: none;
    }

}

.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;
    /* دور۳۲: هم‌زمان با تقویت گرادیان پس‌زمینه (style.css)، سبک‌تر شد - رجوع کنید
       به توضیح کامل روی taj-hero-title بالای همین فایل. */
    text-shadow: 0 1px 2px rgba(2, 16, 26, 0.28), 0 3px 9px rgba(2, 16, 26, 0.18);
}

/* 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 {
        /* دور۳۱: خواسته صریح سعیده - روی گوشی تیتر هیرو خیلی نزدیک به هدر/بالای
           عکس شروع می‌شد (فاصله فقط ۵۵px). برای فاصله بیشتر (نزدیک دو خط) بین
           هدر و شروع متن، padding-top افزایش یافت. */
        padding: 100px 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;
    /* دور۳۱: این گرادیان از قبل خیلی کم‌رنگ بود (حداکثر۸٪) و متن/بجی هم روی
       عکس نبود؛ طبق خواسته صریح سعیده (هیچ گرادیانی روی عکس‌ها نباشه) کامل
       حذف شد. */
    display: 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;
    /* دور۴۴: قبلا این گرادیان خیلی تیره بود (۰٫۸۲/۰٫۹۰)، بعد سبک‌تر شد
       (۰٫۲۲/۰٫۳۸). دور۳۱: سعیده صریح گفت اصلا گرادیان نباشه — چون این
       عکس هیچ متن/بجی روش نداره (متن «نشانه را می‌بینیم...» بالای عکسه،
       نه روش)، گرادیان کامل حذف شد؛ فقط رنگ navy برای حالت بدون‌عکس
       (var(--taj-method-photo,none)) به‌عنوان fallback باقی موند. */
    background-image: var(--taj-method-photo, none);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* دور۳۲: taj-method-photo-icon (آیکون fallback قبل‌از‌عکس) حذف شد - جزئیات کامل
   در همون بالای <div class="taj-method-photo"> در index.html. */

/* 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;
    /* دور۴۶: خواسته صریح سعیده - این سکشن (#f6f8f9) و سکشن قبلش
       taj-context-showcase (#f7f9fa) عملا یک رنگ بودن (فقط ۱ واحد اختلاف
       در هر کانال رنگ، با چشم غیرقابل‌تشخیص)؛ یعنی تنها چیزی که دو سکشن
       رو از هم جدا می‌کرد فاصله خالی بود، نه رنگ - دقیقا همون چیزی که
       سعیده گفت. حالا سفید خالص شد تا با تناوب سفید/تینت (همون الگویی که
       بقیه سکشن‌های سایت با taj-bg-white/taj-bg-tint دارن) یک مرز بصری
       واقعی بین دو سکشن ایجاد بشه. */
    background: #ffffff;
}

/* 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;
    /* دور۳۱ (آزمایش، رد شد): پس‌زمینه سفید شده بود، هم‌راستا با .taj-principles-story.
       دور۳۲: سعیده صریح بعد از دیدن نتیجه گفت قشنگ نشد و خواست دقیقا مثل نسخه قبلی
       (سرمه‌ای) برگرده - فقط «افکت روی خودِ عکس» (گرادیان‌زدایی از taj-case-featured-media،
       پایین همین فایل) حفظ بشه. برگشت به همون سرمه‌ای‌ای که الگوی خواهر/برادرش
       (.taj-cases-footer، همین سکشن، هیچوقت عوض نشده بود) هنوز داره؛ رنگ‌های متن داخل کارت
       (taj-case-source/h3/summary/proof/link، پایین همین فایل) هم به رنگ‌های روی سرمه‌ای
       (دقیقا هم‌قواره با taj-method-step و taj-cases-footer) برگشتن. */
    background: #0b4565;
    border: 1px solid rgba(10, 56, 84, 0.10);
    border-radius: 28px;
    box-shadow: none;
}

/* دور۳۳: قاب سرمه‌ای دور عکس - نگاه کن به کامنت کامل تو index.html. پدینگ یکسان هر۴طرف
   روی این المان جدا (نه روی taj-case-featured-media خودش) اضافه شد تا aspect-ratio دقیق
   عکس (پایین) هیچ‌وقت با پدینگ ترکیب/دستکاری نشه - عکس همیشه دقیقا با نسبت منبعش می‌مونه. */
.taj-case-featured-media-frame {
    /* هر۴طرف یکسان - عمدا هیچ ضلعی (ازجمله پایین) لبه‌به‌لبه با کارت/متن بعدی نمی‌مونه،
       وگرنه دقیقا همون خط‌درز روی همون یک لبه باقی می‌موند. */
    padding: 18px;
}

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

.taj-case-featured-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* تاریخچه: این گرادیان از دور۴۴ چندبار کم‌رنگ‌تر شد (آخرین‌بار دور۴۶، برای رفع حس
       غلط «افت کیفیت» که در واقع خودِ گرادیان تیره باعثش بود - با getBoundingClientRect
       ثابت شده بود عکس اصلا کراپ نشده). دور۳۱: سعیده صریح خواست گرادیان اصلا نباشه.
       با بررسی دقیق‌تر معلوم شد این گرادیان اصلا لازم نبود: بج «تولید»
       (.taj-case-featured-sector, پایین همین فایل) از قبل پس‌زمینه توپر مستقل خودش رو
       داره (rgba(3,10,16,.85))، پس خوانایی‌اش وابسته به گرادیان روی کل عکس نبود. کامل
       حذف شد؛ عکس الان صددرصد بدون گرادیان دیده می‌شه. */
    display: none;
}

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

/* دور۳۳: پوشش هاور ثابت (نه دنبال‌کننده‌ی موس) - نگاه کن به کامنت بالای همین بلوک تو
   index.html برای دلیل کامل. کل عکس (همراه آیکون‌های داخلش) موقع هاور تیره می‌شه و
   نشان مرکزی برجسته می‌مونه - چون موقعیتش ثابته (نه وابسته به مکان موس)، هیچ‌وقت با
   آیکون‌های خودِ عکس تصادف نمی‌کنه. */
.taj-case-featured-media-reveal {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(6, 18, 30, 0.6);
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s ease;
}

.taj-case-featured-media-reveal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 21px 21px 7px 21px;
    background: #cc5828;
    box-shadow: 0 14px 28px rgba(3, 10, 16, 0.4);
    color: #ffffff;
    font-size: 26px;
}

.taj-case-featured-media-reveal__label {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.taj-case-featured-media:hover .taj-case-featured-media-reveal,
.taj-case-featured-media:focus-visible .taj-case-featured-media-reveal {
    opacity: 1;
    transform: scale(1);
}

.taj-case-featured-media:hover img {
    transform: scale(1.04);
}

.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;
    /* دور۳۱ کارت رو سفید کرده بود و این رنگ رو به نارنجی روی‌سفید (#b34718) عوض کرده بود؛
       دور۳۲ با برگشت کارت به سرمه‌ای، به رنگ اصلی/قبلی روی سرمه‌ای برگشت. */
    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;
    /* دور۳۲: کارت به سرمه‌ای برگشت -> تیتر هم به سفید (مثل taj-method-title) برگشت. */
    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-depth-frame) روی article
       بیرونی (taj-case-brief) بود، نه این عکس. الان taj-depth-frame مستقیم روی همین
       المان اومده (index.html) - این none باید حذف بشه وگرنه (چون home.css بعد از
       taj-global.css لود می‌شه و اسپسیفیسیتی هردو یکیه) سایه رو کامل خنثی می‌کرد. */
}

.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;
}


/* دور۴۶: خواسته صریح سعیده - این کارت («از پیشنهاد تا اجرا») یه‌کم
   کشیده‌تر بشه و جمله‌اش طولانی‌تر؛ پدینگ (به‌خصوص بالا/پایین) افزایش
   یافت تا با متن کمی بلندتر (در index.html) قد کارت واقعا بلندتر بشه. */
.taj-execution-caption {
    padding:
        36px 32px 40px;

    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);
}

/* دور۴۶: خواسته صریح سعیده - مینیمالی این کارت‌ها (فقط یک نقطه ۸px + متن،
   بدون هیچ پس‌زمینه/کادر) محسوس‌تر بشه. یک پس‌زمینه و کادر خیلی سبک به
   خود آیتم اضافه شد (نه فقط روی هاور) تا هر آیتم به‌جای یک ردیف متن ساده،
   حس یک کارت واقعی بده؛ رنگ‌ها و شعاع گوشه دقیقا هم‌خانواده taj-principle-
   item بالاتر همین صفحه‌ست تا یکدست بمونه. */
.taj-execution-item {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-right: 12px;
    border-radius: 12px;
    background: rgba(12, 68, 103, 0.025);
    transition: background-color 0.3s ease;
}

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


.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:
            28px 24px 30px;
    }


    .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;
    /* دور۴۹: خواسته محمدرضا - چیدمان دانشنامه «اصلا خوشم نمیاد». علت پیدا شد: این
       ستون (taj-knowledge-layout, align-items:stretch, بالای همین فایل) قد کاملش رو
       از ستون taj-knowledge-featured کنارش می‌گیره (که با عکس بزرگ‌تره)، ولی خودِ
       2کارت taj-knowledge-brief داخلش فقط قد طبیعی خودشون رو می‌گیرن و همه بالا
       می‌چسبن - نتیجه یک فاصله خالی بزرگ و ناموزون فقط زیر کارت دوم، که کل بخش رو
       نامتوازن نشون می‌داد. center این فضای اضافه رو مساوی بالا/پایین جفت کارت پخش
       می‌کنه به‌جای این‌که همه‌ش یک‌جا زیر کارت دوم بیفته.
       */
    justify-content: center;

    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);
}

/* دور۳۲: کارت «مشاوره» تازه در صفحه دانشنامه (blog-left-sidebar.html) - چون
   عکس اختصاصی مناسب برند در دسترس نبود، این کارت با آیکون به‌جای عکس ساخته
   شد؛ برای تمایز بصری واقعی از ۲کارت عکس‌دار کنارش (نه فقط تکرار همون قاب
   خاکستری خالی)، پس‌زمینه‌اش گرادیان سرمه‌ای برند شد (شبیه سایر جاهای سایت
   که آیکون روی سرمه‌ای می‌شینه، مثل taj-method-step-index). */
.taj-knowledge-brief-media--icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #0f5075 0%, #072e46 100%);
}

/* دور۳۷: خواسته صریح سعیده - صفحه دانشنامه موشن گرافی قوی‌تر می‌خواد.
   این کارت (تنها کارت آیکونی، بدون عکس) تا الان کاملا ثابت بود؛ برای
   هم‌تراز شدن با حس زنده‌ی ۲کارت عکس‌دار کنارش (که الان taj-depth-frame/
   taj-depth-lift دارن)، یک گلوی نارنجی محو (دقیقا هم‌خانواده با
   taj-mission-glow) پشت آیکون اضافه شد - چون این باکس از قبل
   overflow:hidden داره (ارثی از taj-knowledge-brief-media)، گلو خودش
   داخل قاب گرد همین کارت محصور می‌مونه. */
.taj-knowledge-brief-media--icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;

    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;

    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 140, 65, 0.4) 0%, rgba(246, 140, 65, 0) 70%);
    filter: blur(26px);
    pointer-events: none;

    animation: moveHorizontal 9000ms ease-in-out infinite;
}

.taj-knowledge-brief-media--icon i {
    position: relative;
    z-index: 1;

    font-size: 60px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.92);

    animation: taj-icon-float 3400ms ease-in-out infinite;
}

@keyframes taj-icon-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

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

    .taj-knowledge-brief-media--icon::before,
    .taj-knowledge-brief-media--icon i {
        animation: none;
    }

}

/* دور۳۲: پاراگراف توضیح تازه‌ای که به کارت‌های brief صفحه دانشنامه اضافه شد
   (صفحه اصلی فقط تیتر رو نشون می‌ده، بدون این پاراگراف - تمایز عمدی چون
   اینجا «دانشنامه کامل» معرفی شده، نه تیزر). */
.taj-knowledge-brief-desc {
    margin: 8px 0 0;
    color: #62727b;
    font-size: 13px;
    line-height: 1.95;
}


.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;

    /* دور۴۷: کمی بیشتر شد (۵۲→۶۴px) تا نشان دایره‌ای شناور کارت زیرین
       (taj-contact-teaser-badge، که ۳۲px از لبه بالای کارت بیرون می‌زنه)
       فاصله امن‌تری تا این هدر داشته باشه - جزئیات در کامنت CSS خودِ
       taj-contact-teaser-badge (taj-global.css). */
    margin-bottom: 64px;
}


.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;
}


/* دور۳۲: دکمه جایگزین (facade) نقشه - تا کلیک نشه iframe گوگل‌مپ اصلا لود نمی‌شه.
   نگاه کن به کامنت توضیحی توی contact.html برای دلیل کامل.
   دور۳۳: سعیده این باکس رو «خراب» توصیف کرد - چون فقط یک مستطیل تخت خاکستری با یک آیکون
   کوچیک بود، هیچ نشونه‌ی بصری‌ای نداشت که این عمدا کلیک‌محوره، نه یک خطای بارگذاری. یک بافت
   نقطه‌چین شبیه نقشه + حلقه محو «محدوده» پشت یک نشان pin برندی جایگزین پس‌زمینه تخت شد. */
.taj-contact-map-facade {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: 100%;

    padding: 20px;

    border: 0;
    overflow: hidden;

    background-color: #eef2f4;
    background-image: radial-gradient(circle, rgba(15, 80, 117, 0.16) 1.5px, transparent 1.5px);
    background-size: 22px 22px;

    color: #3a5262;

    cursor: pointer;

    transition: background-color 0.25s ease, color 0.25s ease;
}

.taj-contact-map-facade::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 80, 117, 0.14) 0%, rgba(15, 80, 117, 0) 72%);
    pointer-events: none;
}

.taj-contact-map-facade-pin {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 2px;
    border-radius: 20px 20px 6px 20px;
    background: linear-gradient(155deg, #1a5f88 0%, #0a3f60 100%);
    box-shadow: 0 14px 26px rgba(6, 35, 54, 0.28);
    transition: transform 0.25s ease;
}

.taj-contact-map-facade-pin::after {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cc5828;
    box-shadow: 0 0 0 4px rgba(204, 88, 40, 0.22);
}

.taj-contact-map-facade i {
    position: relative;
    font-size: 26px;
    line-height: 1;

    color: #ffffff;
}

.taj-contact-map-facade span {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 700;
    color: #12364c;
}

.taj-contact-map-facade small {
    position: relative;
    z-index: 1;
    font-size: 11.5px;
    font-weight: 500;
    color: #62727b;
}

.taj-contact-map-facade:hover,
.taj-contact-map-facade:focus-visible {
    background-color: #e4eaed;
}

.taj-contact-map-facade:hover .taj-contact-map-facade-pin,
.taj-contact-map-facade:focus-visible .taj-contact-map-facade-pin {
    transform: translateY(-3px);
}

.taj-contact-map-facade:focus-visible {
    outline: 2px solid #0f5075;
    outline-offset: -4px;
}


/* =========================================================
   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: 46px;
    }


    .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;
}

/* === TAJ ACCESSIBILITY FINAL ===
   Component-scoped WCAG contrast rules.
   Do not replace with a global span/p rule.
*/
:root {
    --taj-a11y-text-light-surface: #46545c;
    --taj-a11y-accent-light-surface: #8f3c12;
    --taj-a11y-text-dark-surface: #f3f6f8;
}

/* ---------- Light surfaces ---------- */

.taj-context-showcase-card .taj-context-showcase-type {
    color: var(--taj-a11y-text-light-surface) !important;
}

.taj-cases-section .taj-cases-kicker {
    color: var(--taj-a11y-accent-light-surface) !important;
}

.taj-cases-section .taj-cases-note {
    color: var(--taj-a11y-text-light-surface) !important;
}

.taj-execution-section .taj-execution-item p {
    color: var(--taj-a11y-text-light-surface) !important;
}

/* Dark-link variant is used on light card surfaces */
.taj-cases-section .taj-ui-link--dark,
.taj-cases-section .taj-ui-link--dark span {
    color: var(--taj-a11y-text-light-surface) !important;
}

/* ---------- Featured case / dark surfaces ---------- */

.taj-case-featured .taj-case-featured-sector,
.taj-case-featured .taj-case-featured-media-reveal,
.taj-case-featured .taj-case-featured-media-reveal__label,
.taj-case-featured .taj-case-source,
.taj-case-featured dt,
.taj-case-featured .taj-case-featured-link__label {
    color: var(--taj-a11y-text-dark-surface) !important;
}

/* Sector labels rendered on the dark media/image area */
.taj-case-brief .taj-case-brief-media > span {
    color: var(--taj-a11y-text-dark-surface) !important;
}

/* Existing source labels in brief cards sit on dark visual surfaces */
.taj-case-brief .taj-case-source {
    color: var(--taj-a11y-text-dark-surface) !important;
}

/* Light-link variant always belongs on dark surfaces */
.taj-cases-section .taj-ui-link--light,
.taj-cases-section .taj-ui-link--light span {
    color: var(--taj-a11y-text-dark-surface) !important;
}

/* Cases closing/footer uses the dark blue surface */
.taj-cases-footer > span,
.taj-cases-footer .taj-case-featured-link__label {
    color: var(--taj-a11y-text-dark-surface) !important;
}