/* Homepage section 2 — «خدمات تقدّمها عقار 360» (owner design, 2026-10-17).
   A hub (logo + store / listings / services boxes) feeds one line per project card; each line is
   drawn as the visitor scrolls and the card appears when its line reaches it.
   Everything is scoped under #services: typography.css pins h3 / p sizes with !important, so the
   few size rules that must win carry an ID selector and !important too. */

#services.svc360 {
    --svc-d: #3b2a63;
    --svc-m: #5b4a8f;
    --svc-g: #f5b942;
    --svc-bg: #f6f4fb;
    --svc-text: #5a5275;
    --svc-night: #1d1540;
    position: relative;
    isolation: isolate;
    /* Night-purple ground woven with a Sadu pixel pattern — the Saudi National Day look in Aqar360
       colours. The hero ends on #1a1338, so the top fades from that into the weave without a seam,
       and, as on «من نحن» (owner, 2026-10-19), the weave stays at the edges while the middle is calmed
       in the same night purple, so the lines and cards stay the loudest thing. */
    --svc-pattern-opacity: 0.2;
    z-index: 2; /* above the next section, so the woven band's teeth can overlap it */
    background-color: var(--svc-night);
    color: #2b2340;
}
#services.svc360::before,
#services.svc360::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
/* The weave on its own layer so its strength is one number. */
#services.svc360::before {
    background: url("/images/Home/sadu-pattern.svg") 0 0 / 100px 160px repeat;
    opacity: var(--svc-pattern-opacity);
}
#services.svc360::after {
    background:
        linear-gradient(180deg, var(--svc-night) 0, rgba(29, 21, 64, 0) 220px),
        radial-gradient(ellipse 70% 40% at 50% 0, rgba(245, 185, 66, 0.08) 0, rgba(245, 185, 66, 0) 100%),
        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%);
}

#services .svc360__inner {
    position: relative;
    overflow-x: clip;
    max-width: 1520px; /* the hub row uses the extra width; head, project list and promos stay at 1180 */
    margin: 0 auto;
    padding: 72px 24px 220px; /* the last card hangs 140px below the grid, then the band */
}

#services .svc360__head,
#services .svc360__list,
#services .svc360__promos {
    max-width: 1132px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Head ---------- */
#services .svc360__head {
    position: relative;
    z-index: 2;
    text-align: center;
}
#services .svc360__head h2 {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.4vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.3;
    color: #ffffff;
}
/* Night ground: white word over a hand-drawn gold brush stroke (as across the site). */
#services .svc360__head h2 span {
    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;
}
#services .svc360__lead {
    max-width: 560px;
    margin: 0 auto;
    color: #c9bfe6;
    font-size: 17px !important;
    line-height: 1.8;
}

/* ---------- Hub: logo with three boxes at 120° ---------- */
#services .svc360__hubwrap {
    --cy: 280px;
    position: relative;
    z-index: 2;
    height: 650px;
    max-width: 1000px;
    margin: 30px auto 0;
}
#services .svc360__hub {
    position: absolute;
    left: 50%;
    top: var(--cy);
    z-index: 3;
    width: 190px;
    height: 190px;
    margin: -95px 0 0 -95px;
}
#services .svc360__ring {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(201, 186, 240, 0.55);
    border-radius: 50%;
    animation: svc360-spin 24s linear infinite;
}
@keyframes svc360-spin { to { transform: rotate(360deg); } }
#services .svc360__core {
    position: absolute;
    inset: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 16px 44px rgba(59, 42, 99, 0.22), 0 0 0 6px rgba(107, 90, 158, 0.12);
}
#services .svc360__core img {
    display: block;
    width: 100%;
    height: auto;
}
/* Hub connectors: a soft track plus a still dashed line, ending in a small chevron at the card. */
#services .svc360__links {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
#services .svc360__links path { fill: none; stroke-linecap: round; }
#services .svc360__links .track {
    stroke: rgba(201, 186, 240, 0.12);
    stroke-width: 9;
}
#services .svc360__links .flow {
    stroke: rgba(226, 216, 251, 0.85);
    stroke-width: 3;
    stroke-dasharray: 9 10;
}
#services .svc360__links .flow--gold { stroke: rgba(245, 185, 66, 0.9); }

/* ---------- Shared box / card skin ---------- */
#services .svc360__box,
#services .svc360__card {
    --c: #5b4a8f;
    position: relative;
    border: 1px solid #ece7f6;
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff) 0, #fff 90px);
    box-shadow: 0 1px 2px rgba(59, 42, 99, 0.05), 0 12px 32px rgba(59, 42, 99, 0.09);
    transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
}
/* Only with a real pointer: on touch phones a tap left the card lifted and ringed. */
@media (hover: hover) and (pointer: fine) {
    #services .svc360__box:hover,
    #services .svc360__card.is-on:hover {
        transform: translateY(-6px);
        border-color: color-mix(in srgb, var(--c) 45%, #fff);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent), 0 22px 48px color-mix(in srgb, var(--c) 22%, transparent);
    }
}

#services .svc360__ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, #fff);
}
#services .svc360__ico svg {
    width: 28px;
    height: 28px;
}

#services .svc360__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    background: var(--svc-d);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(59, 42, 99, 0.22);
    transition: background 0.2s, transform 0.2s;
}
#services .svc360__btn:hover {
    background: var(--svc-m);
    color: #fff;
    transform: translateY(-2px);
}
#services .svc360__btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--c, #5b4a8f) 45%, #fff);
    outline-offset: 2px;
}
#services .svc360__btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s;
}
#services .svc360__btn:hover svg { transform: translateX(-4px); }
#services[dir="ltr"] .svc360__btn svg { transform: scaleX(-1); }
#services[dir="ltr"] .svc360__btn:hover svg { transform: scaleX(-1) translateX(-4px); }

/* ---------- Hub boxes ---------- */
#services .svc360__box {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 280px;
    min-height: 210px;
    padding: 20px;
    overflow: hidden;
    text-align: center;
}
#services .svc360__box .svc360__ico { margin-bottom: 10px; }
#services .svc360__box h3 {
    margin: 0 0 6px;
    color: var(--svc-d);
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}
#services .svc360__box-text {
    margin: 0 0 14px;
    color: #6d6488;
    font-size: 14.5px !important;
    line-height: 1.7;
}
#services .svc360__box .svc360__btn {
    margin-top: auto;
    padding: 9px 16px;
    font-size: 14px;
}
#services .svc360__box--r { left: calc(50% + 146px); top: calc(var(--cy) - 270px); }
#services .svc360__box--l { right: calc(50% + 146px); top: calc(var(--cy) - 270px); }
#services .svc360__box--b {
    left: 50%;
    top: calc(var(--cy) + 180px);
    width: 320px;
    min-height: 0;
    margin-left: -160px;
    border: 2px solid color-mix(in srgb, var(--svc-d) 60%, #fff);
}
#services .svc360__box--b .svc360__box-text {
    margin: 0;
    color: var(--svc-m);
    font-weight: 700;
}

/* Live-number slots stay out of the layout until their data arrives. */
#services [hidden] { display: none !important; }

/* ---------- Feature boxes: store + listings, full cards around the hub ---------- */
/* --hub-gap: distance from the hub's centre to each card's inner edge (the ring itself is 95px). */
/* The hub row is wider than the rest of the section so the three cards can be landscape.
   --cy: hub centre (≈ the side cards' middle). --side-h: the side cards' height, set by the script,
   so the services card always starts below them. */
#services .svc360__hubwrap {
    --cy: 190px;
    --hub-gap: 165px;
    container: svchub / inline-size;
    height: auto;
    max-width: 1460px;
}
/* .svc360__box--rich = the full card look shared by all three; .svc360__box--feature = the two side cards. */
#services .svc360__box--rich {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: stretch; /* the base box centres its children; grid cells must fill their area */
    min-height: 0;
    gap: 14px;
    padding: 22px;
    text-align: start;
    overflow: visible;
}
/* Every card: the story on the inline-start side, and its photo filling the whole inline-end side
   (the left of the card in Arabic) from top to bottom, edge to edge, cut off from the text by an
   angled purple divider (owner, 2026-10-19). --pad is the card padding the photo bleeds back over. */
#services .svc360__box--rich {
    --pad: 22px;
    padding: var(--pad);
    grid-template-columns: minmax(0, 1fr) 46%;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "top side" "text side" "feats side" "actions side";
    column-gap: 14px;
}
#services .svc360__box--rich > .svc360__feat-top { grid-area: top; }
#services .svc360__box--rich > .svc360__box-text { grid-area: text; }
#services .svc360__box--rich > .svc360__side { grid-area: side; }
#services .svc360__box--rich > .svc360__feats { grid-area: feats; grid-template-columns: 1fr; align-content: start; }
#services .svc360__box--rich > .svc360__actions { grid-area: actions; flex-wrap: nowrap; gap: 6px; }
/* Two buttons share one line: no arrow, tighter padding, and both may shrink. */
#services .svc360__box--rich .svc360__actions:has(.svc360__btn--ghost) .svc360__btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 10px;
}
#services .svc360__box--rich .svc360__actions:has(.svc360__btn--ghost) .svc360__btn svg { display: none; }
#services .svc360__art {
    position: relative;
    min-width: 0;
    min-height: 200px;
    margin-block: calc(-1 * var(--pad));
    /* 4px toward the text, so the divider sits over the photo's edge rather than inside the photo */
    margin-inline: -4px calc(-1 * var(--pad));
    overflow: hidden;
    border-start-end-radius: 19px;
    border-end-end-radius: 19px;
    background: #efeaff;
    clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
/* The photo is shown whole (contain, never zoomed). Whatever the panel has left over is filled by a
   blurred copy of the same photo (--art, set on the figure), so there are no flat bars; a 6px purple
   band (::after) runs along the slanted divider. */
#services .svc360__art::before {
    content: "";
    position: absolute;
    inset: -30px;
    background: var(--art) center / cover no-repeat;
    filter: blur(18px) saturate(1.1);
}
#services .svc360__art img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#services .svc360__art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #6a5d8b;
    clip-path: polygon(calc(100% - 6px) 0, 100% 0, 84% 100%, calc(84% - 6px) 100%);
}
#services[dir="ltr"] .svc360__art { clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%); }
#services[dir="ltr"] .svc360__art::after { clip-path: polygon(0 0, 6px 0, calc(16% + 6px) 100%, 16% 100%); }
#services .svc360__box--feature {
    top: 0;
    width: min(460px, calc(50% - var(--hub-gap) - 10px));
}
#services .svc360__box--feature.svc360__box--r { left: calc(50% + var(--hub-gap)); }
#services .svc360__box--feature.svc360__box--l { right: calc(50% + var(--hub-gap)); left: auto; }
#services .svc360__hubwrap .svc360__box--b {
    position: relative;
    top: auto;
    left: auto;
    width: min(560px, 100%);
    margin: max(calc(var(--cy) + 205px), calc(var(--side-h, 0px) + 70px)) auto 0;
    border: 2px solid rgba(245, 185, 66, 0.75);
}

/* Landscape cards: once the side cards have room (≥ ~440px each), every card splits into
   header across the top, story on one side, live data on the other. */
@container svchub (min-width: 1250px) {
    /* 6:4 (3:2). A min-height rather than aspect-ratio: the grid's 1fr row only shares out height it
       can see as a size, and a card with more content still grows. Widths mirror the rules above. */
    /* THREE CARDS AT 120°. Each card's centre sits --r from the hub's centre: store at -30°, listings
       at -150° (210°), services straight down at 90°. All three are one size, --cw × --ch (6:4).
       The top cards' tops are at 0, so the hub centre is --r/2 + --ch/2 down. */
    #services .svc360__hubwrap > * {
        --cw: 460px;
        --ch: 307px;
        --r: 450px;
        --cy: calc((var(--r) + var(--ch)) / 2);
    }
    #services .svc360__box--feature {
        width: var(--cw);
        min-height: var(--ch);
    }
    /* cos 30° = 0.866: the card centre is 0.866·r to the side; its inner edge half a card closer. */
    #services .svc360__box--feature.svc360__box--r { left: calc(50% + 0.866 * var(--r) - var(--cw) / 2); }
    #services .svc360__box--feature.svc360__box--l { right: calc(50% + 0.866 * var(--r) - var(--cw) / 2); }
    #services .svc360__hubwrap .svc360__box--b {
        width: var(--cw);
        min-height: var(--ch);
        margin: calc(var(--cy) + var(--r) - var(--ch) / 2) auto 0;
    }
    #services .svc360__box--rich {
        --pad: 18px;
        gap: 10px;
        column-gap: 14px;
    }
    /* Fill the 3:2 frame instead of leaving a hole: the feature list sits in the middle of the free space. */
    #services .svc360__box--rich > .svc360__feats { align-self: center; gap: 10px; }

    /* Compact type so the content fits the smaller 6:4 frame. */
    #services .svc360__box--rich .svc360__ico { width: 44px; height: 44px; border-radius: 13px; }
    #services .svc360__box--rich .svc360__ico svg { width: 22px; height: 22px; }
    #services .svc360__box--rich h3 { font-size: 18px !important; }
    #services .svc360__box--rich .svc360__tag { font-size: 11px !important; padding: 1px 8px; }
    #services .svc360__box--rich .svc360__box-text { font-size: 13px !important; line-height: 1.6; }
    #services .svc360__box--rich .svc360__feats li { font-size: 12.5px; }
    #services .svc360__box--rich .svc360__feats { gap: 6px; }
    #services .svc360__box--rich .svc360__btn { padding: 9px 14px; font-size: 13.5px; }
}
#services .svc360__box--rich .svc360__ico { margin: 0; }
#services .svc360__box--rich .svc360__box-text { margin: 0; text-align: start; }
#services .svc360__box--b .svc360__box-text { color: #6d6488; font-weight: 400; }

#services .svc360__feat-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
#services .svc360__feat-top h3 { margin: 0; }
#services .svc360__tag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 99px;
    background: #fdf3dc;
    color: #7a5410;
    font-size: 12px !important;
    font-weight: 700;
}

#services .svc360__feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#services .svc360__feats li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4a3d72;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
#services .svc360__feats svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: #c99a3a;
}

#services .svc360__actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
#services .svc360__actions .svc360__btn {
    flex: 1 1 auto;
    justify-content: center;
    margin: 0;
    padding-inline: 14px;
    white-space: nowrap;
}
#services .svc360__actions .svc360__btn--ghost { flex: 0 1 auto; }
#services .svc360__btn--ghost {
    border: 1.5px solid #d9d1ee;
    background: #fff;
    color: var(--svc-d);
    box-shadow: none;
}
#services .svc360__btn--ghost:hover {
    border-color: var(--svc-m);
    background: #f6f4fb;
    color: var(--svc-d);
}


/* ---------- Lines (drawn by JS) ---------- */
/* Above the cards (z-index 2), so the line and its moving light are never hidden by a card (owner 2026-10-31). */
#services .svc360__lines {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
#services .svc360__lines path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#services .svc360__lines .bg { stroke: rgba(201, 186, 240, 0.14); }
#services .svc360__tip { transition: opacity 0.2s; }

/* ---------- Project cards: two staggered columns ---------- */
/* No z-index here: the list must not make its own layer, so the line (3) can pass over the picture (1)
   and under the card's dot (4). Owner 2026-10-31: picture, then line, then dot on top. */
#services .svc360__list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 170px;
    row-gap: 40px;
    margin-top: 90px;
}
#services .svc360__card {
    display: flex;
    flex-direction: column;
    align-self: start;
    min-height: 400px;
    padding: 28px 28px 24px;
}
#services .svc360__card:nth-child(odd) { grid-column: 1; }
#services .svc360__card:nth-child(even) {
    grid-column: 2;
    margin-top: 140px;
    margin-bottom: -140px;
}
/* Hidden until its line arrives — only once the script has taken over, so the cards never stay
   invisible if it fails. */
#services.svc360--anim .svc360__card {
    opacity: 0;
    transform: translateY(30px) translateX(var(--sx, 30px));
}
#services.svc360--anim .svc360__card:nth-child(even) { --sx: -30px; }
#services.svc360--anim .svc360__card.is-on,
#services.svc360--measure .svc360__card {
    opacity: 1;
    transform: none;
}
#services.svc360--measure .svc360__card { transition: none !important; }
/* The free calculator leads the list and never waits for its line (owner 2026-10-22: it hid on an iPhone). */
#services.svc360--anim .svc360__card--gold { opacity: 1; transform: none; }

#services .svc360__card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
#services .svc360__card h3 {
    margin: 0;
    color: var(--svc-d);
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}
#services .svc360__count {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--c) 12%, #fff);
    color: color-mix(in srgb, var(--c) 80%, #000);
    font-size: 13px !important;
    font-weight: 700;
}
#services .svc360__desc {
    margin: 0 0 18px;
    color: var(--svc-text);
    font-size: 15.5px !important;
    line-height: 1.95;
}
/* A service card (D68): the service's own image across the card's top, edge to edge; without an image the
   same area shows the family's icon, so no card is ever shorter or emptier than the others. The renders are
   square, so the image shows whole (contain), never cropped (D71); the rest of the banner continues the picture's
   own edge colours: each half stretches that side's edge column of the same image (--art, set on the figure).
   Physical left and right on purpose: the picture's left edge is on the left in both languages. */
/* border-box: the script gives the cards the tallest one's height as their min-height. */
#services .svc360__card--svc {
    box-sizing: border-box;
    min-height: 0;
}
#services .svc360__media {
    position: relative;
    height: 230px;
    margin: -28px -28px 20px;
    overflow: hidden;
    border-radius: 19px 19px 0 0;
    background: #fff;
}
#services .svc360__media:not(.svc360__media--icon)::before,
#services .svc360__media:not(.svc360__media--icon)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background-image: var(--art);
    background-repeat: no-repeat;
    background-size: 4000% 100%;
}
#services .svc360__media:not(.svc360__media--icon)::before {
    left: 0;
    background-position: left center;
}
#services .svc360__media:not(.svc360__media--icon)::after {
    right: 0;
    background-position: right center;
}
#services .svc360__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
#services .svc360__media--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, color-mix(in srgb, var(--c) 24%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
    color: var(--c);
}
#services .svc360__media--icon svg {
    width: 72px;
    height: 72px;
}
#services .svc360__card--svc .svc360__ico {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}
#services .svc360__card--svc .svc360__ico svg {
    width: 22px;
    height: 22px;
}
#services .svc360__card--svc .svc360__desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
#services .svc360__card .svc360__btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Node on the edge that faces the trunk: inline-end for the first column, inline-start for the second. */
/* Badges that sit on the card's top border: «مجاني» on the calculator, «الأكثر طلباً» on contracting. */
#services .svc360__flag {
    position: absolute;
    top: 0;
    inset-inline-start: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 99px;
    background: #f5b942;
    color: #3b2a63;
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(59, 42, 99, 0.45);
    transform: translateY(-50%);
}
#services .svc360__flag--hot {
    background: linear-gradient(135deg, #3b2a63, #5b4a8f);
    color: #fff;
}
/* On a service card the flag sits inside the banner, on its inline-start corner. */
#services .svc360__card--svc .svc360__flag {
    top: 12px;
    inset-inline-start: 12px;
    box-shadow: 0 6px 16px -6px rgba(59, 42, 99, 0.5);
    transform: none;
}
#services .svc360__flag--hot::before {
    content: "";
    width: 12px;
    height: 12px;
    background: #f5b942;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 6 5 11a5 5 0 01-10 0c0-2 1-3.5 2-4.5.3 1.8 1.2 2.8 2.5 3C11 9 11 5 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 6 5 11a5 5 0 01-10 0c0-2 1-3.5 2-4.5.3 1.8 1.2 2.8 2.5 3C11 9 11 5 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The line meets the card at its top, so the picture hangs under it (owner 2026-10-31). */
#services .svc360__node {
    position: absolute;
    z-index: 4; /* over the picture and over the line that ends under it */
    top: 30px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--line, var(--c));
    box-shadow: 0 0 0 4px #fff;
    opacity: 0;
    transition: opacity 0.4s;
}
#services .svc360__card:nth-child(odd) .svc360__node { inset-inline-end: -8px; }
#services .svc360__card:nth-child(even) .svc360__node { inset-inline-start: -8px; }
#services .svc360__card.is-on .svc360__node {
    opacity: 1;
    animation: svc360-pulse 1.8s ease-out infinite;
}
@keyframes svc360-pulse {
    0% { box-shadow: 0 0 0 4px #fff, 0 0 0 4px var(--line, var(--c)); }
    100% { box-shadow: 0 0 0 4px #fff, 0 0 0 18px transparent; }
}

/* Calculator: the one gold card. */
#services .svc360__card--gold {
    min-height: 0;
    border: 2px solid var(--svc-g);
    background: linear-gradient(150deg, var(--svc-d), var(--svc-m));
    color: #fff;
}
#services .svc360__card--gold h3 { color: #fff; }
#services .svc360__card--gold .svc360__desc { color: #e6e0f5; }
#services .svc360__card--gold .svc360__ico {
    background: var(--svc-g);
    color: var(--svc-d);
}
#services .svc360__card--gold .svc360__count {
    background: rgba(245, 185, 66, 0.18);
    color: var(--svc-g);
}
#services .svc360__card--gold .svc360__btn {
    border: 0;
    background: var(--svc-g);
    color: var(--svc-d);
    cursor: pointer;
}
#services .svc360__calc { margin: auto 0 0; }

/* Loading + empty states */
#services .svc360__skeleton {
    min-height: 320px;
    border-radius: 20px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 70%);
    background-size: 300% 100%;
    animation: svc360-shimmer 1.4s linear infinite;
}
#services .svc360__skeleton:nth-child(even) { margin-top: 140px; margin-bottom: -140px; }
@keyframes svc360-shimmer { to { background-position: -150% 0; } }
#services .svc360__empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #c9bfe6;
    text-align: center;
}
#services .svc360__empty a { color: var(--svc-g); font-weight: 700; }

#services .svc360__promos { margin-top: 180px; }

/* Sadu ribbon at the seam with the next (light) section: 65px of weave inside this section and
   15px of Najdi teeth hanging over the next one. */
#services .svc360__band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    z-index: 3;
    height: 80px;
    background: url("/images/Home/sadu-band.svg") 0 0 / 120px 80px repeat-x;
    pointer-events: none;
}

/* ---------- Narrow screens: hub stacked, one column, lanes down the inline-start side ---------- */
/* The hub row needs ~1250px for the 120° layout (the svchub container query). Below that, wedging
   the store and listings cards beside the circle squeezed them to ~220px (wrapped text, a button
   hanging out of the card), so tablets stack the hub exactly like phones: circle on top, then the
   three cards in a column joined by short dashed links. Keep 1299px in step with HUB_WIDE in
   home-services-hub.js (1250 + the section's 48px side padding). */
@media (max-width: 1299px) {
    #services .svc360__hubwrap {
        --cy: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 36px;
        height: auto;
    }
    #services .svc360__hub,
    #services .svc360__box,
    #services .svc360__box--b {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
    }
    #services .svc360__hub { order: -1; }
    #services .svc360__links { display: none; }
    #services .svc360__box {
        width: 100%;
        max-width: 520px;
        min-height: 0;
        overflow: visible;
    }
    #services .svc360__box--feature.svc360__box--r,
    #services .svc360__box--feature.svc360__box--l,
    #services .svc360__hubwrap .svc360__box--b {
        left: auto;
        right: auto;
        width: 100%;
        max-width: 520px;
        margin: 0;
    }
    #services .svc360__box::before {
        content: "";
        position: absolute;
        top: -38px;
        left: 50%;
        width: 4px;
        height: 36px;
        margin-left: -2px;
        border-radius: 4px;
        background: repeating-linear-gradient(to bottom, rgba(226, 216, 251, 0.85) 0 7px, transparent 7px 14px);
        background-size: 4px 14px;
    }
}

@media (max-width: 820px) {
    #services .svc360__inner { padding: 56px 18px 120px; }
    #services .svc360__list {
        grid-template-columns: 1fr;
        row-gap: 28px;
        margin-top: 70px;
        padding-inline-start: 78px;
    }
    #services .svc360__card:nth-child(n),
    #services .svc360__skeleton:nth-child(n) {
        grid-column: 1;
        margin: 0;
    }
    #services.svc360--anim .svc360__card:nth-child(n) { --sx: -24px; }
    #services[dir="ltr"].svc360--anim .svc360__card:nth-child(n) { --sx: 24px; }
    #services .svc360__card:nth-child(n) .svc360__node {
        inset-inline-start: -8px;
        inset-inline-end: auto;
    }
    #services .svc360__card {
        min-height: 0;
        padding: 20px;
    }
    #services .svc360__media {
        height: 200px;
        margin: -20px -20px 16px;
    }
    #services .svc360__promos { margin-top: 56px; }
}
/* Phones: too narrow for a side panel, so the photo becomes a banner across the top of the card with
   the same angled purple edge, now along its bottom. */
@media (max-width: 560px) {
    #services .svc360__box--rich {
        --pad: 18px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "side" "top" "text" "feats" "actions";
    }
    #services .svc360__art,
    #services[dir="ltr"] .svc360__art {
        min-height: 0;
        margin-block: calc(-1 * var(--pad)) 2px;
        margin-inline: calc(-1 * var(--pad));
        border-radius: 19px 19px 0 0;
        clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    }
    #services .svc360__art { height: 240px; }
    #services .svc360__art::after,
    #services[dir="ltr"] .svc360__art::after { clip-path: polygon(0 calc(100% - 6px), 100% calc(86% - 6px), 100% 86%, 0 100%); }
    #services .svc360__art img { object-fit: cover; object-position: 50% 52%; }
    /* The photo now covers the banner, so the blurred fill behind it never shows; skip its blur layer. */
    #services .svc360__art::before { display: none; }
    #services .svc360__card--svc .svc360__btn {
        align-self: stretch;
        justify-content: center;
        min-height: 48px;
    }
}
@media (max-width: 420px) {
    #services .svc360__list { padding-inline-start: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    #services .svc360__card,
    #services .svc360__box { transition: none; }
    #services .svc360__card.is-on .svc360__node { animation: none; }
    #services .svc360__skeleton { animation: none; }
    #services .svc360__ring { animation: none; }
}

/* Phones: the section title stays on one line (~15.8× its font size wide), sized to the screen. */
@media (max-width: 640px) {
    #services .svc360__head h2 {
        white-space: nowrap;
        font-size: min(26px, calc((100vw - 44px) / 16.5)) !important;
    }
    /* The English title is longer than the Arabic one, so it wraps instead of running past the edge (D37, M1). */
    #services .svc360__head h2:lang(en) {
        white-space: normal;
        text-wrap: balance;
    }
}