/* Scroll chapters follow the number of Elementor service stages, including the final link. */
body.home .sanam-pattern-surface { overflow: clip; }
.sanam-services-scroll {
    position: relative !important;
    display: block !important;
    width: 100%;
    height: var(--sanam-services-height, 400svh) !important;
    min-height: var(--sanam-services-min-height, 2400px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #662627;
    isolation: isolate;
}
.sanam-services-scroll > .sanam-services-viewport {
    position: sticky !important;
    top: 0;
    display: block !important;
    width: 100%;
    height: 100svh !important;
    height: 100dvh !important; /* follows the phone's toolbar, so no empty strip when it hides */
    min-height: 600px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #291f1e; /* shows under Safari's see-through bottom bar: dark, like the photos' overlay */
}
.sanam-services-viewport::after {
    content: '';
    position: absolute;
    z-index: 5;
    bottom: clamp(22px, 4vh, 38px);
    left: 50%;
    width: min(160px, 34vw);
    height: 2px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to right,
        #e4aa58 0 var(--sanam-stage-fill, 0%),
        rgb(255 255 255 / .38) var(--sanam-stage-fill, 0%) 100%);
    pointer-events: none;
}
.sanam-services-viewport > .sanam-service-stage {
    position: absolute !important;
    inset: 0;
    display: flex !important;
    width: 100% !important;
    height: 100%;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px clamp(28px, 7vw, 120px) !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .55s ease, visibility .55s ease;
}
.sanam-services-viewport > .sanam-service-stage.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}
.sanam-service-stage > .sanam-service-image,
.sanam-service-image .elementor-widget-container,
.sanam-service-image img {
    position: absolute !important;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.sanam-service-image { z-index: 0; }
.sanam-service-image img {
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important;
    transform: translate3d(0, var(--sanam-image-shift, 0px), 0) scale(1.1);
    transform-origin: center;
}
.sanam-service-stage.is-active .sanam-service-image img { will-change: transform; }
/* Overlay over the photo so the text stays readable. Elementor uses ::before on every container for
   its own background overlay (content: none by default), hence the stronger selector and !important. */
.sanam-services-viewport > .sanam-service-stage::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 1 !important;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgb(41 31 30 / .55) 0%, rgb(41 31 30 / 0) 75%),
        linear-gradient(180deg, rgb(41 31 30 / .55) 0%, rgb(41 31 30 / .45) 45%, rgb(41 31 30 / .8) 100%) !important;
    pointer-events: none;
}
.sanam-service-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.sanam-service-stage > .sanam-service-copy {
    position: relative !important;
    z-index: 2;
    width: min(100%, 820px);
    min-height: 0 !important;
    align-items: center !important;
    gap: clamp(12px, 2vh, 24px) !important;
    margin: auto !important;
    padding: 0 !important;
    text-align: center;
    color: #fff;
}
.sanam-service-copy .elementor-widget { width: 100%; }
.sanam-service-kicker .elementor-heading-title {
    color: #e4aa58 !important;
    font: 600 clamp(15px, 1.4vw, 20px)/1.7 'Lama Sans SemiBold', sans-serif;
}
.sanam-service-kicker .elementor-heading-title,
.sanam-service-title .elementor-heading-title,
.sanam-service-description,
.sanam-service-description p { text-shadow: 0 2px 18px rgb(20 6 7 / .55), 0 1px 3px rgb(20 6 7 / .45); }
.sanam-service-title .elementor-heading-title {
    color: #fff !important;
    font: 600 clamp(38px, 5.5vw, 86px)/1.24 'Kufam', sans-serif;
    text-wrap: balance;
}
.sanam-service-description,
.sanam-service-description p {
    max-width: 650px;
    margin: 0 auto !important;
    color: #fcf8f3;
    font: 600 clamp(17px, 1.55vw, 23px)/1.9 'Lama Sans SemiBold', sans-serif;
    text-wrap: balance;
}
.sanam-service-button .elementor-button {
    min-width: 220px;
    padding: 15px 28px;
    border: 1px solid #d09442;
    border-radius: 40px;
    background: #e4aa58 !important;
    color: #521e1f !important;
    font: 600 18px/1.6 'Lama Sans SemiBold', sans-serif;
    transition: background .2s ease, transform .2s ease;
}
.sanam-service-button .elementor-button:hover { background: #d09442 !important; transform: translateY(-2px); }
.sanam-services-next {
    display: flex !important;
    min-height: clamp(420px, 65svh, 680px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 30px !important;
    background: #fcf8f3;
    text-align: center;
}
.sanam-services-next .elementor-heading-title {
    color: #662627 !important;
    font: 600 clamp(30px, 4vw, 58px)/1.4 'Kufam', sans-serif;
}
.sanam-services-next .sanam-services-next-copy {
    align-items: center !important;
    text-align: center !important;
}
.sanam-services-next-copy > .elementor-widget { width: 100%; text-align: center !important; }
.sanam-services-next .elementor-button {
    padding: 13px 28px;
    border-radius: 36px;
    background: #662627 !important;
    color: #fff !important;
    font: 600 17px/1.6 'Lama Sans SemiBold', sans-serif;
}
.sanam-services-next .elementor-button:hover { background: #521e1f !important; }
@media (max-width: 1024px) {
    .sanam-services-scroll {
        height: var(--sanam-services-height, 400svh) !important;
        min-height: var(--sanam-services-min-height-mobile, 2000px) !important;
    }
    .sanam-services-scroll > .sanam-services-viewport {
        top: 80px;
        height: calc(100svh - 80px) !important;
        height: calc(100dvh - 80px) !important; /* Safari's bar collapses on scroll: fill the screen */
        min-height: 420px !important;
    }
    .sanam-services-viewport > .sanam-service-stage { padding: 36px 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sanam-services-viewport > .sanam-service-stage,
    .sanam-service-button .elementor-button { transition: none; }
}
body.page .sanam-services-page-intro {
    color: #662627;
    font: 600 clamp(19px, 2vw, 26px)/1.8 'Lama Sans SemiBold', sans-serif;
}
body.page .sanam-services-page-grid { display: grid; gap: 18px; margin-top: 34px; }
body.page .sanam-services-page-card {
    padding: 24px 30px;
    border: 1px solid rgb(102 38 39 / .18);
    border-radius: 18px;
    background: #fcf8f3;
}
body.page .sanam-services-page-card span { color: #b27735; font-weight: 700; }
body.page .sanam-services-page-card h2 { margin: 5px 0; color: #662627; font: 600 clamp(25px, 3vw, 35px)/1.5 'Kufam', sans-serif; }
body.page .sanam-services-page-card p { margin: 0; color: #291f1e; font: 600 18px/1.9 'Lama Sans SemiBold', sans-serif; }
/* «كل خدماتنا في مكان واحد»: a grid of square service photos behind the text (assets/services-mosaic.js). */
.sanam-service-stage.has-mosaic > .sanam-service-image { display: none !important; }
.sanam-mosaic {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols, 8), var(--tile, 180px));
    grid-auto-rows: var(--tile, 180px);
    gap: var(--gap, 10px);
    transform: translate3d(-50%, calc(-50% + var(--sanam-image-shift, 0px) * .6), 0) rotate(-8deg);
    pointer-events: none;
}
.sanam-mosaic > span {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
}
/* The photo fills its square (Elementor's img { height: auto } would leave the bottom empty). */
.sanam-mosaic > span > img {
    position: absolute !important;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 700px) { .sanam-mosaic > span { border-radius: 10px; } }

/* ===== Cinematic service stages: the photo fills the screen, darkening towards the bottom, and the text
   sits along the bottom: a large outlined number with the name on the right, a gold line, then the
   description, the «التفاصيل» link and the count on the left (assets/services-scroll.js adds the link and
   the count). Phones: name above, description under it. The last stage (call to action) is unchanged. ===== */
.sanam-services-viewport { counter-reset: sanam-svc; }
.sanam-services-viewport > .sanam-service-stage:has(.sanam-service-description) { counter-increment: sanam-svc; }
.sanam-services-viewport > .sanam-service-stage:has(.sanam-service-description)::before {
    background:
        linear-gradient(180deg, rgb(41 31 30 / .35) 0%, rgb(41 31 30 / .05) 30%, rgb(41 31 30 / .25) 55%, rgb(41 31 30 / .94) 100%),
        linear-gradient(90deg, rgb(41 31 30 / .25), transparent 60%) !important;
}
.sanam-services-viewport > .sanam-service-stage > .sanam-service-copy:has(.sanam-service-description) {
    width: min(100% - 64px, 1320px) !important;
    margin: auto auto clamp(56px, 9vh, 96px) !important;
    align-self: flex-end;
}
.sanam-service-copy:has(.sanam-service-description) > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 72px);
    align-items: end;
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    text-align: start;
}
.sanam-service-copy:has(.sanam-service-description) .sanam-service-kicker { display: none; }
.sanam-service-copy:has(.sanam-service-description) .sanam-service-title { grid-column: 1; margin: 0 !important; }
.sanam-service-copy:has(.sanam-service-description) .sanam-service-title .elementor-heading-title {
    font-size: clamp(36px, 4.6vw, 78px) !important;
    line-height: 1.15 !important;
    text-align: start;
    text-wrap: balance;
}
.sanam-service-copy:has(.sanam-service-description) .sanam-service-title .elementor-heading-title::before {
    content: counter(sanam-svc, decimal-leading-zero);
    display: block;
    margin-bottom: .1em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(228 170 88 / .85);
    font: 600 clamp(56px, 6.5vw, 112px)/1 'Kufam', sans-serif;
    text-shadow: none;
}
.sanam-service-copy:has(.sanam-service-description) .sanam-service-description {
    grid-column: 2;
    margin: 0 !important;
    padding-block: 6px;
    padding-inline-start: clamp(20px, 2.4vw, 36px);
    border-inline-start: 2px solid #e4aa58;
    text-align: start;
}
.sanam-service-copy:has(.sanam-service-description) .sanam-service-description p {
    max-width: 560px;
    margin: 0 !important;
    font-size: clamp(16px, 1.3vw, 21px);
    line-height: 1.85;
    text-align: start;
    text-wrap: pretty;
}
.sanam-service-foot { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.sanam-service-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid rgb(228 170 88 / .7);
    border-radius: 40px;
    color: #fff;
    font: 600 15px/1.4 'Lama Sans SemiBold', sans-serif;
    text-decoration: none;
    text-shadow: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sanam-service-more:hover, .sanam-service-more:focus-visible { background: #e4aa58; border-color: #e4aa58; color: #291f1e; }
.sanam-service-count { color: rgb(255 248 239 / .7); font: 600 14px/1 'Lama Sans SemiBold', sans-serif; letter-spacing: .08em; direction: ltr; unicode-bidi: isolate; text-shadow: none; }
.sanam-service-count b { color: #e4aa58; font-weight: 600; }
/* The text arrives when its stage becomes the current one. */
.sanam-service-stage:has(.sanam-service-description) :is(.sanam-service-title, .sanam-service-description) {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.sanam-service-stage.is-active:has(.sanam-service-description) :is(.sanam-service-title, .sanam-service-description) { opacity: 1; transform: none; }
.sanam-service-stage.is-active:has(.sanam-service-description) .sanam-service-description { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
    .sanam-service-stage:has(.sanam-service-description) :is(.sanam-service-title, .sanam-service-description) { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 767px) {
    .sanam-services-viewport > .sanam-service-stage > .sanam-service-copy:has(.sanam-service-description) { width: calc(100% - 36px) !important; margin-bottom: 40px !important; }
    .sanam-service-copy:has(.sanam-service-description) > .e-con-inner { grid-template-columns: 1fr; row-gap: 18px !important; }
    .sanam-service-copy:has(.sanam-service-description) .sanam-service-description { grid-column: 1; padding: 14px 0 0; border-inline-start: 0; border-top: 2px solid #e4aa58; }
    .sanam-service-copy:has(.sanam-service-description) .sanam-service-title .elementor-heading-title::before { font-size: 52px; }
}

/* Short description: it sits on the title's bottom line (the gold divider still runs the title's full height). */
@media (min-width: 768px) {
    .sanam-service-copy:has(.sanam-service-description) .sanam-service-description {
        align-self: stretch;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
    }
}