.sanam-about-section {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    min-height: 620px;
    padding: clamp(70px, 8vw, 112px) clamp(28px, 6vw, 96px) 90px !important;
    background: #662627;
    color: #fff;
}

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

.sanam-about-section > .sanam-about-layout {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-areas: "image copy";
    grid-template-columns: minmax(205px, 255px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(58px, 7vw, 120px);
    width: min(100%, 1120px);
    margin-inline: auto;
    direction: ltr;
}

.sanam-about-section .sanam-about-copy {
    grid-area: copy;
    direction: rtl;
    text-align: right;
}

.sanam-about-section .sanam-about-copy .elementor-widget-container,
.sanam-about-section .sanam-about-copy p {
    margin: 0;
}

.sanam-about-section .sanam-about-copy p {
    max-width: 740px;
    font-size: clamp(20px, 1.65vw, 24px);
    line-height: 1.7;
    font-weight: 400;
    color: #fff;
    text-wrap: pretty;
}

.sanam-about-section .sanam-about-media {
    grid-area: image;
    position: relative;
    width: 100%;
    max-width: 255px;
    justify-self: center;
    height: 450px;
    background: #d6a96f;
    -webkit-mask: url("about-mask.svg") center / 100% 100% no-repeat;
    mask: url("about-mask.svg") center / 100% 100% no-repeat;
    filter: drop-shadow(0 16px 28px rgb(19 5 8 / .14));
}

.sanam-about-section .sanam-about-media::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url("about-frame.svg?v=2") center / 100% 100% no-repeat;
}

.sanam-about-section .sanam-about-media img {
    display: block;
    width: 100%;
    height: 100% !important;
    background: #d6a96f;
    object-fit: cover;
    object-position: left center;
    transform: scale(1.85);
    transform-origin: left 35%;
}

@media (max-width: 767px) {
    .sanam-about-section {
        min-height: 0;
        padding: 62px 24px 72px !important;
    }

    .sanam-about-section > .sanam-about-layout {
        grid-template-areas: "copy" "image";
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
    }

    .sanam-about-section .sanam-about-copy p {
        font-size: clamp(18px, 4.8vw, 22px);
        line-height: 1.8;
    }

    .sanam-about-section .sanam-about-media {
        width: min(72%, 240px);
        height: 390px;
    }
}

/* The story's lines no longer run on into «نحظى بثقة» (partners follow now): let them fade out. */
.sanam-about-section::before {
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
}

/* Lines drawn on scroll (assets/line-draw.js): the inline SVG replaces the static background. */
.sanam-about-section.has-draw-lines::before { background: none !important; }
.sanam-about-section > .sanam-draw-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.sanam-draw-lines svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- The camel like on the 404 page: no arched frame, the whole illustration ----------
   (transparent picture, shown as it is, no fading). */
html body .sanam-about-section .sanam-about-media {
    max-width: 420px; /* the camel on its dunes is wider than tall */
    height: auto !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none;
}
html body .sanam-about-section .sanam-about-media::after { content: none !important; display: none !important; }
html body .sanam-about-section .sanam-about-media img {
    width: 100% !important;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    background: none !important;
    transform: none !important;
    -webkit-mask: none !important; /* no fading: the whole picture, sharp edges */
    mask: none !important;
}
@media (max-width: 767px) {
    html body .sanam-about-section .sanam-about-media { width: min(92%, 360px); height: auto !important; }
}
/* Wider picture column for the camel on its dunes (it was 205–255px for the narrow arched frame). */
@media (min-width: 768px) {
    html body .sanam-about-section > .sanam-about-layout { grid-template-columns: minmax(240px, 420px) minmax(0, 1fr) !important; }
}
/* Nothing around the picture may cut it (Elementor's widget box kept the old fixed height). */
html body .sanam-about-section .sanam-about-media,
html body .sanam-about-section .sanam-about-media > .elementor-widget-container,
html body .sanam-about-section .sanam-about-media .elementor-image,
html body .sanam-about-section .sanam-about-media figure {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
}
html body .sanam-about-section .sanam-about-media img.sanam-about-camel {
    aspect-ratio: 1172 / 1294 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
}

/* ===== «قصتنا»: the big camel bleeding off the left and bottom edges, the text wrapping its outline.
   No script: one picture per screen size, each cropped to exactly what shows (assets/sanam-about-camel-
   desktop.webp / -phone.webp) with its outline as a polygon traced from the picture (percentages of the
   picture itself, so every browser places it the same way). The section is as tall as the camel, so the
   camel always touches the bottom edge. ===== */
html body .sanam-about-section {
    overflow: clip !important;
    min-height: 0 !important;
    padding: clamp(48px, 5vw, 88px) clamp(24px, 7vw, 140px) 0 0 !important;
}
html body .sanam-about-section > .sanam-about-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 0 !important;
    direction: rtl;
}
html body .sanam-about-section .sanam-about-media { display: none !important; }
html body .sanam-about-section .sanam-about-copy,
html body .sanam-about-section .sanam-about-copy > .elementor-widget-container {
    display: flow-root !important;   /* as tall as the camel: it reaches the bottom edge */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: right;
}
html body .sanam-about-section .sanam-about-float {
    float: left;
    display: block;
    width: 46vw;
    max-width: 860px;
    margin: 0;                        /* no margins: the polygon's percentages are of the picture itself */
    shape-outside: polygon(0% 0%, 70.4% 0.0%, 70.4% 2.0%, 73.2% 2.0%, 73.2% 4.1%, 74.0% 4.1%, 74.0% 6.2%, 76.1% 6.2%, 76.1% 8.3%, 87.5% 8.3%, 87.5% 10.4%, 90.7% 10.4%, 90.7% 12.5%, 92.6% 12.5%, 92.6% 14.5%, 93.4% 14.5%, 93.4% 16.6%, 94.2% 16.6%, 94.2% 18.8%, 94.9% 18.8%, 94.9% 20.8%, 95.7% 20.8%, 95.7% 22.9%, 96.7% 22.9%, 96.7% 25.0%, 97.5% 25.0%, 97.5% 27.0%, 97.9% 27.0%, 97.9% 29.1%, 98.1% 29.1%, 98.1% 31.2%, 97.8% 31.2%, 97.8% 33.3%, 96.9% 33.3%, 96.9% 35.4%, 95.3% 35.4%, 95.3% 37.5%, 94.9% 37.5%, 94.9% 39.5%, 93.8% 39.5%, 93.8% 41.6%, 84.0% 41.6%, 84.0% 43.8%, 82.2% 43.8%, 82.2% 45.8%, 81.3% 45.8%, 81.3% 47.9%, 82.2% 47.9%, 82.2% 50.0%, 82.3% 50.0%, 82.3% 52.0%, 81.6% 52.0%, 81.6% 54.1%, 82.0% 54.1%, 82.0% 56.2%, 82.7% 56.2%, 82.7% 58.3%, 83.1% 58.3%, 83.1% 60.4%, 83.4% 60.4%, 83.4% 62.5%, 84.1% 62.5%, 84.1% 64.5%, 84.3% 64.5%, 84.3% 66.6%, 84.7% 66.6%, 84.7% 68.8%, 85.5% 68.8%, 85.5% 70.8%, 86.3% 70.8%, 86.3% 72.9%, 86.9% 72.9%, 86.9% 75.0%, 86.5% 75.0%, 86.5% 77.0%, 86.7% 77.0%, 86.7% 79.1%, 86.9% 79.1%, 86.9% 81.2%, 87.0% 81.2%, 87.0% 83.3%, 87.2% 83.3%, 87.2% 85.4%, 88.1% 85.4%, 88.1% 87.5%, 88.6% 87.5%, 88.6% 93.8%, 88.2% 93.8%, 88.2% 95.8%, 88.6% 95.8%, 88.6% 97.9%, 88.1% 97.9%, 88.1% 100.0%, 0% 100%);
    shape-margin: clamp(14px, 1.6vw, 26px);
    pointer-events: none;
    user-select: none;
}
html body .sanam-about-section .sanam-about-float img { display: block; width: 100%; height: auto; }
html body .sanam-about-section .sanam-about-copy p {
    max-width: none !important;
    margin: 0 0 .9em !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
    html body .sanam-about-section .sanam-about-float { width: 52vw; }
}
@media (max-width: 767px) {
    html body .sanam-about-section { padding: 28px 16px 0 0 !important; }
    html body .sanam-about-section .sanam-about-float {
        width: 60vw;
        shape-outside: polygon(0% 0%, 0.0% 0.0%, 0.0% 12.5%, 33.1% 12.5%, 33.1% 14.6%, 44.2% 14.6%, 44.2% 16.6%, 48.8% 16.6%, 48.8% 18.7%, 75.8% 18.7%, 75.8% 20.8%, 84.5% 20.8%, 84.5% 22.9%, 86.9% 22.9%, 86.9% 24.9%, 89.7% 24.9%, 89.7% 27.1%, 92.9% 27.1%, 92.9% 29.2%, 95.4% 29.2%, 95.4% 31.2%, 96.2% 31.2%, 96.2% 33.3%, 95.4% 33.3%, 95.4% 35.4%, 90.5% 35.4%, 90.5% 37.5%, 88.7% 37.5%, 88.7% 39.5%, 67.7% 39.5%, 67.7% 41.6%, 62.7% 41.6%, 62.7% 43.7%, 64.1% 43.7%, 64.1% 45.8%, 62.9% 45.8%, 62.9% 47.9%, 65.1% 47.9%, 65.1% 50.0%, 66.1% 50.0%, 66.1% 52.1%, 67.7% 52.1%, 67.7% 54.1%, 69.0% 54.1%, 69.0% 56.2%, 72.0% 56.2%, 72.0% 58.3%, 73.4% 58.3%, 73.4% 60.4%, 73.0% 60.4%, 73.0% 62.4%, 73.6% 62.4%, 73.6% 64.5%, 74.8% 64.5%, 74.8% 66.6%, 76.8% 66.6%, 76.8% 75.0%, 76.2% 75.0%, 76.2% 77.0%, 76.0% 77.0%, 76.0% 79.1%, 74.2% 79.1%, 74.2% 81.2%, 74.0% 81.2%, 74.0% 83.3%, 73.6% 83.3%, 73.6% 85.4%, 72.8% 85.4%, 72.8% 87.5%, 70.8% 87.5%, 70.8% 89.6%, 68.5% 89.6%, 68.5% 91.7%, 69.2% 91.7%, 69.2% 95.8%, 69.0% 95.8%, 69.0% 97.9%, 68.5% 97.9%, 68.5% 100.0%, 0% 100%);
        shape-margin: 4px;
    }
    /* No justified text in the narrow column (it spread the words with wide gaps). */
    html body .sanam-about-section .sanam-about-copy,
    html body .sanam-about-section .sanam-about-copy p {
        text-align: right !important;
        text-align-last: auto !important;
        text-justify: none !important;
        word-spacing: normal !important;
        letter-spacing: 0 !important;
    }
    html body .sanam-about-section .sanam-about-copy p {
        font-size: 17.5px !important;
        line-height: 1.75 !important;
        margin-bottom: 1em !important;
        text-wrap: pretty;
        overflow-wrap: break-word;
    }
}
/* The camel sits a little further back and lower, past the left and bottom edges (no maroon slit
   along them): Elementor's own spacing around the layout is removed, and the picture is shifted
   (a visual shift only, the text outline stays where it is). */
html body .sanam-about-section > .sanam-about-layout,
html body .sanam-about-section > .sanam-about-layout > .e-con-inner {
    padding: 0 !important;
    margin-bottom: 0 !important;
}
html body .sanam-about-section .sanam-about-copy,
html body .sanam-about-section .sanam-about-copy > .elementor-widget-container {
    margin-block: 0 !important;
    padding-bottom: 0 !important;
}
html body .sanam-about-section .sanam-about-float img {
    transform: translate(-3%, 4%) scale(1.04);
    transform-origin: left bottom;
}
@media (max-width: 767px) {
    html body .sanam-about-section .sanam-about-float img { transform: translate(-5%, 3%) scale(1.05); }
}
/* Desktop and tablet text, as in the design: larger, justified, and closer to the camel's outline. */
@media (min-width: 768px) {
    html body .sanam-about-section .sanam-about-float { shape-margin: clamp(6px, .8vw, 12px); }
    html body .sanam-about-section .sanam-about-copy p {
        font-size: clamp(21px, 1.85vw, 32px) !important;
        line-height: 1.65 !important;
        margin-bottom: .75em !important;
        text-align: justify !important;
        text-align-last: right !important;
        text-justify: inter-word;
    }
}
/* Desktop: the text sits lower beside the camel (closer to its middle), filling the empty space under it. */
@media (min-width: 768px) {
    html body .sanam-about-section .sanam-about-float + p,
    html body .sanam-about-section .sanam-about-copy p:first-of-type {
        margin-top: clamp(40px, 7.5vw, 150px) !important;
    }
}
/* Phone: same idea, the text sits lower and spreads down beside the neck, filling the space under it. */
@media (max-width: 767px) {
    html body .sanam-about-section .sanam-about-float + p,
    html body .sanam-about-section .sanam-about-copy p:first-of-type {
        margin-top: clamp(24px, 9vw, 44px) !important;
    }
    html body .sanam-about-section .sanam-about-copy p {
        line-height: 1.8 !important;
        margin-bottom: 1.15em !important;
    }
    /* A little bigger camel, so it still reaches the bottom edge beside the lowered text. */
    html body .sanam-about-section .sanam-about-float { width: 64vw; }
}

/* ===== Curtain (assets/vmv-curtain.js): the hero stays pinned and «قصتنا» slides up over it as a card
   with large rounded top corners; the hero shows behind the corners and dims/shrinks a little. ===== */
.sanam-curtain { position: relative; width: 100%; }
html body .sanam-curtain.is-on > .elementor-element-79712149 {
    position: sticky !important;
    top: var(--curtain-top, 0px);
    z-index: 0;
}
html body .sanam-curtain.is-on > .elementor-element-79712149 .hero-layout {
    transform: scale(calc(1 - var(--p, 0) * .05));
    transform-origin: 50% 60%;
    opacity: calc(1 - var(--p, 0) * .6);
}
html body .sanam-curtain.is-on > .sanam-about-section {
    position: relative !important;
    z-index: 1;
    border-start-start-radius: 56px;
    border-start-end-radius: 56px;
    box-shadow: 0 -24px 60px rgb(20 6 8 / .45);
}
@media (max-width: 767px) {
    html body .sanam-curtain.is-on > .sanam-about-section {
        border-start-start-radius: 30px;
        border-start-end-radius: 30px;
    }
}

/* «قصتنا» is a card: rounded bottom corners too; the sand vision band shows behind them. */
html body.home .sanam-about-section {
    position: relative !important;
    z-index: 1;
    border-end-start-radius: 56px;
    border-end-end-radius: 56px;
}
@media (max-width: 767px) {
    html body.home .sanam-about-section { border-end-start-radius: 30px; border-end-end-radius: 30px; }
}

/* ===== «قصتنا» text: the first line stands out in gold (heading font), the rest reads evenly:
   right-aligned without justification (it stretched short lines beside the camel), balanced line breaks. ===== */
html body .sanam-about-section .sanam-about-copy p {
    text-align: right !important;
    text-align-last: auto !important;
    text-justify: none !important;
    word-spacing: normal !important;
    text-wrap: pretty;
}
html body .sanam-about-section .sanam-about-copy p:first-of-type {
    color: #e4aa58 !important;
    font-family: var(--sanam-font-heading) !important;
    font-weight: 600 !important;
    font-size: clamp(30px, 2.9vw, 50px) !important;
    line-height: 1.35 !important;
    margin-bottom: .6em !important;
}
html[dir="ltr"] body .sanam-about-section .sanam-about-copy p,
html:not([dir="rtl"]) body .sanam-about-section .sanam-about-copy p { text-align: left !important; }
@media (min-width: 768px) {
    html body .sanam-about-section .sanam-about-copy p:not(:first-of-type) { margin-bottom: 1em !important; }
}
@media (max-width: 767px) {
    html body .sanam-about-section .sanam-about-copy p:first-of-type {
        font-size: 25px !important;
        line-height: 1.4 !important;
        margin-bottom: .55em !important;
    }
}

/* «قصتنا» typing (assets/about-typing.js): words fade in one after another, a gold caret follows them. */
html body .sanam-about-copy.is-typing-ready .sanam-type-w { opacity: 0; transition: opacity .18s ease; }
html body .sanam-about-copy.is-typing-ready .sanam-type-w.is-on { opacity: 1; }
.sanam-type-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-inline-start: 3px;
    vertical-align: -.15em;
    background: #e4aa58;
    animation: sanam-caret .8s steps(1) infinite;
}
@keyframes sanam-caret { 50% { opacity: 0; } }

/* ===== Desktop «قصتنا» text: lines run up to the camel's outline, justified; the gold first line large
   and centred. ===== */
@media (min-width: 1025px) {
    html body .sanam-about-section .sanam-about-copy p {
        font-size: clamp(19px, 1.55vw, 28px) !important;
        line-height: 1.8 !important;
        margin-bottom: .55em !important;
        text-align: justify !important;
        text-align-last: right !important;
        text-justify: inter-word !important;
        text-wrap: wrap;
    }
    html body .sanam-about-section .sanam-about-copy p:first-of-type {
        font-size: clamp(38px, 4.1vw, 72px) !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-align-last: center !important;
        margin-top: clamp(40px, 6vw, 110px) !important;
        margin-bottom: .75em !important;
    }
    html:not([dir="rtl"]) body .sanam-about-section .sanam-about-copy p { text-align-last: left !important; }
}

/* ===== Large text (phone text size, zoom): the camel stays on the bottom edge (assets/about-fit.js puts
   a zero-width float above it, as tall as needed; 0 at normal sizes). ===== */
html body .sanam-about-section .sanam-about-spacer { float: left; width: 0; height: 0; }
html body .sanam-about-section .sanam-about-float { clear: left; }
html body .sanam-about-section .sanam-about-copy p { overflow-wrap: break-word; }