.sanam-trust-section {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    margin-top: -2px !important;
    padding: 8px clamp(28px, 6vw, 96px) clamp(88px, 9vw, 140px) !important;
    background: #662627;
    color: #fff;
}

.sanam-trust-section::before {
    content: "" !important;
    position: absolute;
    inset: 0 auto 0 0 !important;
    width: 114.285714% !important;
    z-index: 0;
    pointer-events: none;
    background: url("trust-lines.svg?v=5") left top / 100% 100% no-repeat;
}

.sanam-trust-section > .sanam-trust-layout {
    position: relative;
    z-index: 1;
    width: min(100%, 1120px);
    margin-inline: auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(28px, 4vw, 52px) !important;
}

.sanam-trust-section .sanam-trust-heading {
    position: relative;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
    padding-right: 54px;
    text-align: right;
}

.sanam-trust-section .sanam-trust-heading::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 35px;
    height: 2px;
    background: #e4aa58;
}

.sanam-trust-section .sanam-trust-heading .elementor-heading-title {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.5vw, 48px);
    line-height: 1.35;
}

.sanam-trust-section .sanam-trust-grid {
    width: 100%;
}

.sanam-trust-section .sanam-trust-grid > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100%;
    max-width: none;
}

.sanam-trust-section .sanam-trust-card {
    min-width: 0;
    min-height: 150px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    border: 1px solid rgb(255 248 235 / .19);
    border-radius: 18px;
    background: #6c3033;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.sanam-trust-section .sanam-trust-card:hover {
    border-color: rgb(232 170 82 / .65);
    background: #71383a;
    transform: translateY(-3px);
}

.sanam-trust-section .sanam-trust-logo,
.sanam-trust-section .sanam-trust-logo .elementor-widget-container {
    width: 100%;
    text-align: center;
}

.sanam-trust-section .sanam-trust-logo img {
    display: block;
    width: min(100%, 190px);
    height: 100px;
    margin-inline: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .sanam-trust-section .sanam-trust-grid > .e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch;
        gap: 16px !important;
    }

    .sanam-trust-section .sanam-trust-grid > .e-con-inner > .sanam-trust-card {
        --sanam-card-width: calc((100% - 32px) / 3);
        flex: 0 0 var(--sanam-card-width) !important;
        width: var(--sanam-card-width) !important;
        max-width: var(--sanam-card-width) !important;
        transition: flex-basis .35s ease, width .35s ease, max-width .35s ease,
            border-color .25s ease, background-color .25s ease, transform .25s ease;
    }

    .sanam-trust-section .sanam-trust-grid > .e-con-inner > .sanam-trust-card.is-compact {
        --sanam-card-width: calc((100% - 32px) / 4);
    }

    .sanam-trust-section .sanam-trust-grid > .e-con-inner > .sanam-trust-card.is-expanded {
        --sanam-card-width: calc((100% - 32px) / 2);
    }

    .sanam-trust-section .sanam-trust-card:hover {
        border-color: rgb(255 248 235 / .19);
        background: #6c3033;
        transform: none;
    }

    .sanam-trust-section .sanam-trust-card.is-expanded,
    .sanam-trust-section .sanam-trust-card.is-expanded:hover {
        border-color: rgb(232 170 82 / .65);
        background: #71383a;
        transform: translateY(-3px);
    }
}

@media (max-width: 767px) {
    .sanam-trust-section {
        padding: 0 24px 86px !important;
    }

    .sanam-trust-section .sanam-trust-grid > .e-con-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sanam-trust-section .sanam-trust-card {
        min-height: 118px;
        padding: 12px !important;
        border-radius: 14px;
    }

    .sanam-trust-section .sanam-trust-logo img {
        height: 88px;
    }
}

@media (max-width: 1024px) {
    .sanam-trust-section { overflow: hidden !important; }
}

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

/* ---------- Flip cards (trust-cards.js) ---------- */
.sanam-trust-section .sanam-trust-card.sanam-flip {
    position: relative;
    perspective: 1100px;
    cursor: pointer;
}

.sanam-trust-card .sanam-flip-front,
.sanam-trust-card .sanam-flip-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.sanam-trust-card .sanam-flip-front { transform: rotateY(0deg); }

.sanam-trust-card .sanam-flip-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    border-radius: inherit;
    background: #fcf8f3;
    text-align: center;
    transform: rotateY(-180deg);
}

.sanam-trust-card.is-flipped .sanam-flip-front { transform: rotateY(180deg); }
.sanam-trust-card.is-flipped .sanam-flip-back { transform: rotateY(0deg); }

.sanam-trust-card .sanam-flip-back {
    container-type: inline-size; /* the name sizes itself to the card's width */
    padding: 12px 14px;
}

/* Client name: large and centred, always on one line inside the card, on every screen size.
   It scales with the card (cqi); long names are shrunk further to fit by assets/trust-cards.js. */
.sanam-trust-card .sanam-flip-name {
    display: block;
    max-width: 100%;
    color: #662627;
    font: 600 clamp(18px, 14cqi, 32px)/1.25 var(--sanam-font-heading);
    text-transform: uppercase; /* Latin names in capitals; Arabic is unaffected */
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.sanam-trust-card .sanam-flip-name::after { /* short gold line under the name */
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: #e4aa58;
}

.sanam-trust-card .sanam-flip-toggle {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.sanam-trust-card .sanam-flip-toggle:focus-visible {
    outline: 3px solid #fcf8f3;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sanam-trust-card .sanam-flip-front,
    .sanam-trust-card .sanam-flip-back { transition-duration: .2s; }
}

/* ---------- Standalone layout (since the section moved after the services) ----------
   It used to continue the story section's lines from 8px under it; now it starts on its own:
   real top spacing, and its own pair of lines (mirrored from the story's) that fade out at the bottom. */
.sanam-trust-section {
    padding-top: clamp(76px, 8vw, 120px) !important;
}
.sanam-trust-section::before {
    inset: 0 !important;
    width: 100% !important;
    background: url("trust-lines-solo.svg?v=1") right top / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
}
@media (max-width: 767px) {
    .sanam-trust-section { padding-top: 64px !important; }
    .sanam-trust-section::before { background-size: 180% 100%; }
}

/* ---------- Card colours: dark face (white logos as they are), dark maroon back with the name in white ---------- */
.sanam-trust-section .sanam-trust-card,
.sanam-trust-section .sanam-trust-grid > .e-con-inner > .sanam-trust-card {
    border-color: rgb(228 170 88 / .22);
    background: #291f1e;
}
.sanam-trust-section .sanam-trust-card:hover {
    border-color: rgb(228 170 88 / .7);
    background: #2f2423;
}
@media (min-width: 768px) {
    .sanam-trust-section .sanam-trust-card:hover {
        border-color: rgb(228 170 88 / .22);
        background: #291f1e;
    }
    .sanam-trust-section .sanam-trust-card.is-expanded,
    .sanam-trust-section .sanam-trust-card.is-expanded:hover {
        border-color: rgb(228 170 88 / .7);
        background: #2f2423;
        box-shadow: 0 16px 34px rgb(20 12 12 / .3);
    }
}
.sanam-trust-card .sanam-flip-back { background: #521e1f; box-shadow: inset 0 0 0 1px rgb(228 170 88 / .45); }
.sanam-trust-card .sanam-flip-name { color: #fff; }
.sanam-trust-card .sanam-flip-name::after { background: #e4aa58; }
.sanam-trust-card .sanam-flip-toggle:focus-visible { outline-color: #e4aa58; }

/* Lines drawn on scroll (assets/line-draw.js): the inline SVG replaces the static background. */
.sanam-trust-section.has-draw-lines::before { background: none !important; }
.sanam-trust-section > .sanam-draw-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
}
.sanam-draw-lines svg { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) {
    .sanam-trust-section > .sanam-draw-lines svg { position: absolute; top: 0; right: 0; width: 180%; } /* right part, as the old background */
}