/* «من نحن» (owner design, 2026-10-17). The homepage's language: skyline hero, night and white Sadu
   grounds joined by the woven band, hub-style cards. Scoped under .abp. typography.css pins h1–h3 /
   p sizes with !important, so the few size rules that must win carry !important; text blocks are divs. */

.abp {
    --abp-night: #1d1540;
    --abp-d: #3b2a63;
    --abp-m: #5b4a8f;
    --abp-g: #f5b942;
    --abp-ink: #2b2340;
    --abp-soft: #6d6488;
    --abp-line: #ece7f6;
    color: var(--abp-ink);
    font-family: "Tajawal", "Rubik", system-ui, sans-serif;
    overflow-x: clip;
}
/* Highlighted title words: a hand-drawn gold brush stroke a little under the word. The word is white
   on the dark grounds (hero, why-choose) and deep purple on the light sections. */
.abp .abp-gold {
    padding: 0 0 0.34em; /* the brush sits this far under the letters */
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15C60 6 140 4 296 9' fill='none' stroke='%23f5b942' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M30 20C110 13 190 12 280 16' fill='none' stroke='%23f5b942' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center bottom / 100% 0.4em no-repeat;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.abp .abp-light .abp-gold { color: #3b2a63; -webkit-text-fill-color: #3b2a63; }

/* Reveal on scroll (the script adds .visible; it shows everything at once if motion is reduced). */
.abp .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.abp .reveal.visible { opacity: 1; transform: none; }

/* ---------- Shared bits ---------- */
.abp .abp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 99px;
    background: #f1edfa;
    color: var(--abp-m);
    font-size: 13px !important;
    font-weight: 700;
}
.abp .abp-eyebrow svg { width: 13px; height: 13px; color: var(--abp-g); }
.abp .abp-eyebrow--dark {
    border: 1px solid rgba(255, 210, 166, 0.38);
    background: rgba(255, 255, 255, 0.07);
    color: #f8ebdd;
}

/* Woven band (same SVG as the homepage seams): --down hangs into the section below, --up into the one above. */
.abp .abp-band {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 80px;
    background: url("/images/Home/sadu-band.svg") 0 0 / 120px 80px repeat-x;
    pointer-events: none;
}
.abp .abp-band--down { bottom: -15px; }
.abp .abp-band--up { top: -15px; transform: scaleY(-1); }

/* ---------- Hero ---------- */
.abp-hero {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: min(70vh, 640px);
    padding: 70px 24px 120px; /* the layout already starts the page below the fixed header */
    background:
        linear-gradient(180deg, rgba(29, 21, 64, 0.25) 0, rgba(29, 21, 64, 0.55) 55%, #1d1540 100%),
        url("/images/Home/hero/hero-skyline.jpg") center 42% / cover no-repeat,
        #1d1540;
    color: #fff;
    text-align: center;
}
.abp-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 860px;
    margin: 0 auto;
}
.abp .abp-hero__title {
    /* «سوق عقاري متكامل في وجهة واحدة» on one line at every width: ~16.3× its font size wide, so the
       size follows the screen up to 52px (≈850px, inside the 860px hero column). */
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.28em;
    margin: 0;
    color: #fff;
    white-space: nowrap;
    font-size: min(52px, calc((100vw - 40px) / 17)) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-wrap: balance;
    filter: drop-shadow(0 6px 22px rgba(16, 9, 42, 0.55));
}
.abp-hero__lead {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.9;
    text-shadow: 0 2px 14px rgba(16, 9, 42, 0.7);
}
.abp-hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.abp-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(201, 186, 240, 0.3);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.abp-hero__trust svg { width: 17px; height: 17px; color: var(--abp-g); }
.abp-hero__trust img { border-radius: 2px; }

/* ---------- White Sadu ground ---------- */
.abp-light {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding: 110px 24px 120px;
    background: #fbfaff;
}
.abp-light::before,
.abp-light::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
/* The weave stays a texture at the edges; the reading area in the middle is kept almost clean. */
.abp-light::before {
    background: url("/images/Home/sadu-pattern.svg") 0 0 / 100px 160px repeat;
    opacity: 0.045;
}
.abp-light::after {
    background:
        linear-gradient(90deg, rgba(251, 250, 255, 0) 0, rgba(251, 250, 255, 0.85) 18%, rgba(251, 250, 255, 0.85) 82%, rgba(251, 250, 255, 0) 100%);
}
.abp-light > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---------- Quote ---------- */
.abp-quote {
    display: flex;
    align-items: center;
    gap: 36px;
    max-width: 920px !important;
    margin-bottom: 110px !important;
    padding: 32px 40px;
    border: 1px solid var(--abp-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(59, 42, 99, 0.05), 0 22px 50px -14px rgba(59, 42, 99, 0.2);
}
.abp-quote__portrait {
    flex: none;
    width: 150px;
    height: 150px;
    padding: 5px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, var(--abp-g), #ffe2a8, var(--abp-m), var(--abp-g));
}
.abp-quote__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    border: 4px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 18%;
}
.abp-quote__body { margin: 0; flex: 1; min-width: 0; }
.abp-quote__mark { display: block; width: 40px; height: 30px; margin-bottom: 10px; fill: var(--abp-g); }
.abp-quote__text {
    color: var(--abp-d);
    font-size: clamp(22px, 2.4vw, 30px) !important;
    font-weight: 800;
    line-height: 1.55;
}
.abp-quote__author {
    margin-top: 12px;
    color: var(--abp-soft);
    font-size: 15px !important;
    font-weight: 700;
}
.abp-quote__author::before { content: "— "; color: var(--abp-g); }

/* ---------- Stories ---------- */
.abp-light > .abp-story { max-width: 1320px; }
/* The stories run wider than the rest of the section, and every one splits the same way (text 1.1,
   picture 0.9), so all their pictures come out the same size and the longest title fits one line.
   In a flipped story the picture comes first in the grid, so the shares swap with it. */
.abp-story {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 64px;
}
.abp-story + .abp-story { margin-top: 120px; }
.abp-story--flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.abp-story--flip .abp-story__text { order: 2; }
.abp-story__text {
    position: relative;
    isolation: isolate; /* keeps the index's z-index:-1 above the section's white overlay */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
/* Story kicker: the label, then the big faint step index after it («قصتنا  01») — on the label's left
   in Arabic. The index keeps its outlined look; negative margins stop its 120px box from pushing the
   title down, so it overhangs the row the way it used to. */
.abp-story__kicker {
    display: flex;
    align-items: center;
    gap: 18px;
}
.abp-story__index {
    order: 1;
    margin-block: -0.36em;
    color: transparent;
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 2px rgba(91, 74, 143, 0.2);
    pointer-events: none;
    user-select: none;
}
.abp .abp-story__kicker .abp-eyebrow {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--abp-m);
    font-size: 30px !important;
    font-weight: 800;
    line-height: 1.2;
}
.abp .abp-story__text h2 {
    margin: 0;
    color: var(--abp-d);
    font-size: clamp(30px, 3.4vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}
/* «منظومة واحدة تربط أطراف السوق» keeps the 44px of the other story titles but never wraps. It is
   ~680px wide at 44px, which the 1.1 text column holds from ~1370px up; narrower screens scale it with
   the column (two columns) or with the screen (stacked, below 1024px). */
.abp .abp-story__text h2.abp-story__title--one-line {
    font-size: min(44px, calc((100vw - 112px) * 0.034)) !important;
    white-space: nowrap;
}
.abp-para {
    max-width: 34rem;
    color: var(--abp-soft);
    font-size: 16px !important;
    line-height: 1.95;
}
.abp-para--lead {
    color: #3f3463;
    font-size: 18px !important;
    font-weight: 500;
}
.abp-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    width: 100%;
    max-width: 34rem;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.abp-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--abp-d);
    font-size: 15px;
    font-weight: 700;
}
.abp-checks svg {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    background: #fdf3dc;
    color: #b07a12;
}
/* The challenge story lists problems, not features: a muted purple «!» instead of the gold tick. */
.abp-checks--issues svg { background: #efeaf8; color: #6a5d8b; }
/* Each challenge: a bold title and the line that explains it, one per row. */
.abp-checks--issues { grid-template-columns: 1fr; gap: 14px; max-width: 38rem; }
.abp-checks--issues li { align-items: flex-start; }
.abp-checks--issues svg { margin-top: 2px; }
.abp-issue { display: flex; flex-direction: column; gap: 2px; }
.abp-issue b { color: var(--abp-d); font-size: 16px; font-weight: 800; }
.abp-issue span { color: var(--abp-soft); font-size: 14.5px; font-weight: 500; line-height: 1.7; }

/* The illustration's own ground is white, so it multiplies into a soft tinted panel instead of
   sitting on a white card: the drawing reads as part of the page. A gold glow and a thin inner
   ring finish the frame; the white margins of the square artwork are cropped away. */
.abp-story__visual {
    position: relative;
    isolation: isolate;
    padding: 18px;
    border: 1px solid #ebe4f7;
    border-radius: 36px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 236, 200, 0.9) 0, rgba(255, 236, 200, 0) 45%),
        radial-gradient(circle at 85% 90%, rgba(214, 200, 244, 0.75) 0, rgba(214, 200, 244, 0) 50%),
        linear-gradient(150deg, #f7f3ff 0%, #fdfbf6 100%);
    box-shadow: 0 1px 2px rgba(59, 42, 99, 0.05), 0 34px 70px -34px rgba(59, 42, 99, 0.45);
}
.abp-story__visual::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: -1;
    border: 1px dashed rgba(176, 122, 18, 0.28);
    border-radius: 28px;
    pointer-events: none;
}
.abp-story__visual::after {
    content: "";
    position: absolute;
    inset: 12% 8%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 185, 66, 0.28), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}
.abp-story__visual img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 50%;
    border-radius: 24px;
    mix-blend-mode: multiply;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.abp-story:hover .abp-story__visual img { transform: scale(1.03); }
/* A picture with its own ground (a photo, or an illustration on a tinted backdrop) is shown as it is,
   not multiplied into the panel. */
.abp-story__visual--photo img { mix-blend-mode: normal; }

.abp-chip {
    position: absolute;
    bottom: -18px;
    inset-inline-start: 32px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border: 1px solid #ebe4f7;
    border-radius: 99px;
    background: #fff;
    color: var(--abp-d);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 30px -12px rgba(59, 42, 99, 0.4);
}
.abp[dir="rtl"] .abp-chip { padding: 8px 8px 8px 16px; }
.abp-chip svg {
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 50%;
    background: var(--abp-d);
    color: var(--abp-g);
}

/* ---------- Section heads ---------- */
.abp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px !important;
    text-align: center;
}
.abp .abp-head h2 {
    margin: 0;
    color: var(--abp-d);
    font-size: clamp(28px, 3.2vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}
.abp-head__lead { max-width: 620px; color: var(--abp-soft); font-size: 17px !important; line-height: 1.85; }
.abp .abp-head--dark h2 { color: #fff; }
.abp-head--dark .abp-head__lead { color: #c9bfe6; }

/* ---------- Why choose (night Sadu) ---------- */
.abp-dark {
    position: relative;
    z-index: 2;
    isolation: isolate;
    background: var(--abp-night);
    color: #fff;
}
.abp-dark::before,
.abp-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.abp-dark::before {
    background: url("/images/Home/sadu-pattern.svg") 0 0 / 100px 160px repeat;
    opacity: 0.2;
}
/* Like the light sections (owner, 2026-10-19): the weave stays at the edges, the middle calmed in the same night purple. */
.abp-dark::after {
    background: linear-gradient(90deg, rgba(29, 21, 64, 0) 0, rgba(29, 21, 64, 0.85) 18%, rgba(29, 21, 64, 0.85) 82%, rgba(29, 21, 64, 0) 100%);
}
.abp-dark__inner { max-width: 1180px; margin: 0 auto; padding: 140px 24px 150px; }
.abp-why {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px 20px; /* room above each row for the objects that stand on the cards */
    margin-top: 40px;
}
/* Each card carries a 3D-style object on its far top corner: its base sits on the card, the rest rises
   above the edge. It lifts a little with the card on hover. */
.abp-why__card { position: relative; }
.abp-why__art {
    position: absolute;
    top: -46px;
    inset-inline-end: 12px;
    width: 120px;
    height: 120px;
    pointer-events: none;
    filter: drop-shadow(0 14px 16px rgba(29, 21, 64, 0.22));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.abp-why__card:hover .abp-why__art { transform: translateY(-6px) rotate(-3deg); }
.abp-why__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: linear-gradient(180deg, #f6f2ff 0, #fff 90px);
    color: var(--abp-ink);
    box-shadow: 0 18px 40px -16px rgba(8, 4, 24, 0.7);
    transition: transform 0.25s, box-shadow 0.25s, opacity 0.6s ease;
}
.abp-why__card.visible:hover { transform: translateY(-5px); box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.55), 0 24px 46px -16px rgba(8, 4, 24, 0.8); }
.abp-why__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #ece5fb;
    color: var(--abp-m);
    box-shadow: inset 0 0 0 1px #dcd1f4;
}
.abp-why__icon svg { width: 26px; height: 26px; }
.abp .abp-why__card h3 {
    margin: 6px 0 0;
    color: var(--abp-d);
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}
.abp-why__desc { color: var(--abp-soft); font-size: 15px !important; line-height: 1.85; }
/* «الأول في المملكة»: the featured card — two columns wide, the draped flag on one side (its strip
   folded over the card's top edge), the crown, title, text and pill on the other. */
.abp-why__card--featured {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    min-height: 260px;
    padding: 34px 40px 34px 30px;
}
.abp[dir="ltr"] .abp-why__card--featured { padding: 34px 30px 34px 40px; }
.abp-why__flag {
    order: 2;
    flex: 0 0 auto;
    align-self: flex-start;
    width: min(46%, 400px);
    height: auto;
    margin-top: -40px; /* the short strip folded over the card's top edge sits just above it */
    pointer-events: none;
}
.abp-why__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.abp-why__icon--crown {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #efe8fc;
    box-shadow: inset 0 0 0 1px #e0d5f5, 0 8px 18px -10px rgba(59, 42, 99, 0.45);
}
.abp-why__icon--crown svg { width: 34px; height: 34px; }
.abp .abp-why__card--featured h3 { margin-top: 4px; font-size: clamp(22px, 2.2vw, 30px) !important; }
.abp-why__card--featured .abp-why__desc { font-size: 16.5px !important; }
.abp-why__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 6px 14px;
    border: 1px solid #ecd59a;
    border-radius: 99px;
    background: #fdf4dc;
    color: #8a5d0c;
    font-size: 14px;
    font-weight: 700;
}
.abp-why__pill i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe08a, #c99a3a);
    box-shadow: 0 0 0 3px rgba(201, 154, 58, 0.18);
}
.abp-why__pill img { border-radius: 2px; }

/* ---------- Process: sticky intro + one continuous timeline ---------- */
.abp-light--process { padding-top: 130px; }
.abp-process {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 64px;
}
.abp-process__intro {
    position: sticky;
    top: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.abp .abp-process__intro h2 {
    margin: 0;
    color: var(--abp-d);
    font-size: clamp(30px, 3.4vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}
.abp-process__lead { color: var(--abp-soft); font-size: 17px !important; line-height: 1.9; }
.abp-process__support {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 16px 18px;
    border: 1px solid var(--abp-line);
    border-radius: 18px;
    background: #fff;
    color: var(--abp-d);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: 0 12px 28px -14px rgba(59, 42, 99, 0.25);
}
.abp-process__support-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #fdf3dc;
    color: #b07a12;
}
.abp-process__support-icon svg { width: 22px; height: 22px; }

/* The line runs through the node column; its colour travels purple → gold from first step to last. */
.abp-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}
.abp-timeline::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    inset-inline-start: 27px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--abp-m), #a48fd6 50%, var(--abp-g));
}
.abp-timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}
.abp-timeline__node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 4px solid #fbfaff;
    border-radius: 50%;
    background: #fff;
    color: var(--abp-d);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px #d9cff1, 0 10px 22px -10px rgba(59, 42, 99, 0.45);
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.abp-timeline__step:last-child .abp-timeline__node {
    background: var(--abp-g);
    box-shadow: 0 0 0 2px rgba(245, 185, 66, 0.55), 0 10px 22px -10px rgba(245, 185, 66, 0.9);
}
.abp-timeline__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--abp-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(59, 42, 99, 0.04), 0 12px 28px rgba(59, 42, 99, 0.07);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.abp-timeline__step:hover .abp-timeline__card {
    border-color: #d4c8ef;
    transform: translateX(-4px);
    box-shadow: 0 0 0 4px rgba(91, 74, 143, 0.07), 0 18px 36px rgba(59, 42, 99, 0.12);
}
.abp[dir="ltr"] .abp-timeline__step:hover .abp-timeline__card { transform: translateX(4px); }
.abp-timeline__step:hover .abp-timeline__node { background: var(--abp-d); color: #fff; }
.abp-timeline__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f1edfa;
    color: var(--abp-m);
}
.abp-timeline__icon svg { width: 24px; height: 24px; }
/* Illustrated step icons: a bigger tinted tile, the drawing filling it. */
.abp-timeline__icon--art {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(160deg, #f6f2ff, #ece5fb);
    box-shadow: inset 0 0 0 1px #e3dbf6;
}
.abp-timeline__icon--art img { display: block; width: 58px; height: 58px; }
.abp-timeline__step:hover .abp-timeline__icon--art img { transform: translateY(-2px) scale(1.05); }
.abp-timeline__icon--art img { transition: transform 0.25s ease; }
.abp-timeline__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.abp-timeline__label {
    color: #b07a12;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.abp .abp-timeline__text h3 {
    margin: 0;
    color: var(--abp-d);
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}
.abp-timeline__desc { color: var(--abp-soft); font-size: 15px !important; line-height: 1.8; }

/* ---------- Call to action ---------- */
.abp-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 90px !important;
    padding: 40px 48px;
    border-radius: 28px;
    background: var(--abp-night);
    color: #fff;
    box-shadow: 0 30px 60px -24px rgba(29, 21, 64, 0.7);
}
.abp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/images/Home/sadu-pattern.svg") 0 0 / 100px 160px repeat;
    opacity: 0.22;
}
.abp-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 60% 120% at 20% 50%, rgba(245, 185, 66, 0.16), transparent 70%);
}
.abp .abp-cta h2 { margin: 0 0 6px; color: #fff; font-size: clamp(24px, 2.6vw, 32px) !important; font-weight: 800 !important; }
.abp-cta__lead { color: #c9bfe6; font-size: 16px !important; line-height: 1.8; }
.abp-cta__btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 14px;
    background: var(--abp-g);
    color: var(--abp-d);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 26px -10px rgba(245, 185, 66, 0.75);
    transition: transform 0.2s, box-shadow 0.2s;
}
.abp-cta__btn:hover { color: var(--abp-d); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(245, 185, 66, 0.9); }
.abp-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.abp-cta__btn svg { width: 17px; height: 17px; }
.abp[dir="ltr"] .abp-cta__btn svg { transform: scaleX(-1); }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
    .abp-story,
    .abp-story--flip { grid-template-columns: 1fr; gap: 40px; }
    .abp .abp-story__text h2.abp-story__title--one-line { font-size: min(44px, 5.2vw) !important; }
    .abp-story--flip .abp-story__text { order: 0; }
    .abp-story__text { align-items: center; text-align: center; }
    .abp-story__index { display: none; }
    .abp .abp-story__kicker .abp-eyebrow { font-size: 22px !important; }
    .abp-checks { width: auto; justify-items: start; text-align: start; }
    .abp-story + .abp-story { margin-top: 88px; }
    .abp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abp-process { grid-template-columns: 1fr; gap: 40px; }
    .abp-process__intro { position: static; align-items: center; text-align: center; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
    .abp-hero { min-height: 0; padding: 56px 16px 110px; }
    .abp-light { padding: 84px 16px 90px; }
    .abp-dark__inner { padding: 110px 16px 120px; }
    .abp-quote { flex-direction: column; gap: 18px; padding: 26px 20px; text-align: center; }
    .abp-quote__mark { margin-inline: auto; }
    .abp-quote__portrait { width: 120px; height: 120px; }
    .abp-why { grid-template-columns: 1fr; }
    .abp-why__art { width: 96px; height: 96px; top: -36px; }
    .abp-why__card--featured { grid-column: auto; flex-direction: column; align-items: stretch; padding: 0 22px 26px; }
    .abp-why__flag { order: 0; width: 100%; margin-top: -9px; }
    /* Timeline: the intro stacks above it; smaller nodes keep the cards wide. */
    .abp-timeline__step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
    .abp-timeline__node { width: 44px; height: 44px; font-size: 14px; border-width: 3px; }
    .abp-timeline::before { inset-inline-start: 20px; }
    .abp-timeline__card { flex-direction: column; gap: 10px; padding: 16px; }
    .abp-timeline__icon { width: 40px; height: 40px; }
    .abp-timeline__icon--art { width: 54px; height: 54px; }
    .abp-timeline__icon--art img { width: 48px; height: 48px; }
    .abp-cta { flex-direction: column; padding: 30px 22px; text-align: center; }
    .abp-cta__btn { width: 100%; justify-content: center; }
    .abp-chip { inset-inline-start: 16px; bottom: -16px; font-size: 13px; }
    .abp-story__visual { padding: 12px; border-radius: 28px; }
    .abp-story__visual img { border-radius: 18px; }
    .abp-checks { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .abp .reveal { opacity: 1; transform: none; transition: none; }
}

/* Phones: every section title stays on one line. The longest are ~15.4× (stories) and ~17.3× (why /
   process) their font size wide, so their size follows the screen (16px side padding plus slack). */
@media (max-width: 640px) {
    .abp .abp-story__text h2,
    .abp .abp-story__text h2.abp-story__title--one-line {
        white-space: nowrap;
        font-size: min(30px, calc((100vw - 40px) / 16)) !important;
    }
    .abp .abp-head h2,
    .abp .abp-process__intro h2 {
        white-space: nowrap;
        font-size: min(28px, calc((100vw - 40px) / 18)) !important;
    }
}

/* Phones: the quote and its author each stay on one line, sized to the screen: ~16.6× and ~20.5×
   their font size wide. The quote card adds 20px
   padding each side to the section's 16px. */
@media (max-width: 640px) {
    .abp .abp-quote__text {
        white-space: nowrap;
        font-size: min(22px, calc((100vw - 76px) / 17.3)) !important;
    }
    .abp .abp-quote__author {
        white-space: nowrap;
        font-size: min(15px, calc((100vw - 76px) / 21.3)) !important;
    }
}

/* «تشتت الخدمات وتعقيد رحلة العميل العقارية» stays on one line at every width. It is ~19.8× its font
   size wide (20.6 with slack), so its size follows the text column: 1.1 of 2.1 shares of the story row on
   desktop (row up to 1320px, 64px gap), the full width when stacked. */
.abp .abp-story__text h2.abp-story__title--challenge {
    white-space: nowrap;
    font-size: min(44px, calc((min(100vw, 1368px) - 112px) * 0.0254)) !important;
}
@media (max-width: 1023px) {
    .abp .abp-story__text h2.abp-story__title--challenge { font-size: min(44px, calc((100vw - 56px) / 20.6)) !important; }
}
@media (max-width: 640px) {
    .abp .abp-story__text h2.abp-story__title--challenge { font-size: calc((100vw - 40px) / 20.6) !important; }
}

/* «من تحديد الاحتياج إلى التنفيذ والتسليم» stays on one line at every width: it is ~15.1× its font size
   wide (15.6 with slack), so its size follows the width of the intro column it sits in. */
.abp-process__intro { container-type: inline-size; }
.abp .abp-process__intro h2.abp-process__title {
    white-space: nowrap;
    font-size: min(44px, calc(100cqi / 15.6)) !important;
}

/* The journey's picture under the process intro (owner 2026-10-26), framed like the challenge picture. */
.abp-process__visual { margin-top: 28px; }