/* =========================================================
   ARABIA GROUP — HOME V2.4 FINAL
   Workflow RTL + DB Systems + Black DB Articles
   ========================================================= */

:root{
    --ag24-solar:#F3C600;
    --ag24-ink:#0D0F10;
    --ag24-paper:#F4F1E8;
    --ag24-carbon:#292C2F;
}

/* =========================================================
   WORKFLOW
   ========================================================= */

.ag-workflow-v24{
    position:relative;
    z-index:20;
    overflow:visible;
    background:var(--ag24-solar);
    color:var(--ag24-ink);
    border-top:1px solid rgba(13,15,16,.06);
}

.ag-workflow-v24__inner{
    position:relative;
    overflow:visible;
    padding:26px 0 46px;
}

.ag-workflow-v24__intro{
    width:min(650px,55%);
    margin:0 0 8px auto;
    direction:rtl;
    text-align:right;
}

html[dir="ltr"] .ag-workflow-v24__intro{
    margin:0 auto 8px 0;
    direction:ltr;
    text-align:left;
}

.ag-workflow-v24__intro h2{
    margin:0;
    font-family:"Thmanyah Sans",ThmanyahSans,sans-serif;
    font-size:clamp(1.65rem,2.25vw,2.45rem);
    line-height:1.14;
    font-weight:900;
}

.ag-workflow-v24__intro p{
    max-width:640px;
    margin:7px 0 0;
    color:rgba(13,15,16,.65);
    font-size:clamp(.74rem,.82vw,.88rem);
    line-height:1.64;
}

/*
 Desktop physical placement:
 LEFT  = stages
 RIGHT = character

 IMPORTANT:
 this LTR is ONLY for physical grid columns.
 The stages themselves are RTL, so 01 appears at the RIGHT,
 then 02, 03, 04 moving LEFT.
*/
.ag-workflow-v24__top{
    direction:ltr;
    display:grid;
    grid-template-columns:minmax(0,64%) minmax(350px,36%);
    grid-template-areas:"stages visual";
    gap:0;
    align-items:start;
    min-height:500px;
    overflow:visible;
}

.ag-workflow-v24__stages{
    grid-area:stages;
    direction:rtl;
    position:relative;
    z-index:8;
    align-self:center;
    padding-top:28px;
    transform:translateX(clamp(34px,2.8vw,54px));
}

html[dir="ltr"] .ag-workflow-v24__stages{
    direction:ltr;
    transform:translateX(clamp(-54px,-2.8vw,-34px));
}

.ag-workflow-v24__stages-head{
    max-width:720px;
    margin:0 auto 17px;
    text-align:center;
}

.ag-workflow-v24__stages-head h3{
    margin:0;
    font-size:clamp(1.08rem,1.22vw,1.34rem);
    line-height:1.3;
    font-weight:900;
}

.ag-workflow-v24__stages-head p{
    max-width:660px;
    margin:5px auto 0;
    color:rgba(13,15,16,.59);
    font-size:clamp(.67rem,.73vw,.78rem);
    line-height:1.52;
}

/* RTL AUTO-PLACEMENT:
   01 RIGHTMOST -> 02 -> 03 -> 04 LEFTMOST */
.ag-workflow-v24__steps{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    align-items:start;
}

.ag-workflow-v24-step{
    direction:rtl;
    position:relative;
    min-width:0;
    text-align:center;
}

.ag-workflow-v24-step__number{
    display:grid;
    place-items:center;
    width:34px;
    height:27px;
    margin:0 auto 7px;
    border-radius:999px;
    background:var(--ag24-ink);
    color:var(--ag24-paper);
    font:900 .67rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.ag-workflow-v24-step__icon{
    width:clamp(116px,9.1vw,148px);
    height:clamp(116px,9.1vw,148px);
    margin:0 auto 9px;
    padding:6px;
    display:grid;
    place-items:center;
}

.ag-workflow-v24-step__icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 5px 4px rgba(13,15,16,.07));
}

.ag-workflow-v24-step h4{
    margin:0;
    font-size:clamp(.86rem,.94vw,1.01rem);
    line-height:1.3;
    font-weight:900;
}

.ag-workflow-v24-step p{
    max-width:180px;
    margin:5px auto 0;
    color:rgba(13,15,16,.64);
    font-size:clamp(.61rem,.67vw,.72rem);
    line-height:1.53;
}

/* Always placed on the LEFT edge of each RTL stage and points LEFT. */
.ag-workflow-v24-step__arrow{
    position:absolute;
    z-index:3;
    top:88px;
    left:-35px;
    width:50px;
    height:22px;
    color:var(--ag24-ink);
    opacity:.86;
}

.ag-workflow-v24-step__arrow svg{
    display:block;
    width:100%;
    height:100%;
}

.ag-workflow-v24-step__arrow path{
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Character = physical FAR RIGHT. */
.ag-workflow-v24__visual{
    grid-area:visual;
    position:relative;
    z-index:5;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
    min-width:0;
    padding-top:2px;
    overflow:visible;
}

.ag-workflow-v24__character{
    position:relative;
    z-index:5;
    width:min(100%,505px);
    margin:0 -20px 0 0;
    aspect-ratio:1204 / 1306;
    overflow:visible;
    pointer-events:none;
    user-select:none;
}

.ag-workflow-v24__character img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
    object-position:right top;
    filter:drop-shadow(0 10px 12px rgba(13,15,16,.09));
}

.ag-workflow-v24__character-preview{z-index:1;opacity:1}
.ag-workflow-v24__character-full{z-index:2;opacity:0;transition:opacity .16s ease}
.ag-workflow-v24__character.is-full .ag-workflow-v24__character-full{opacity:1}
.ag-workflow-v24__character.is-full .ag-workflow-v24__character-preview{opacity:0}

/* Below the whole top composition, centered.
   z15 > character z5, therefore cards cover the lower leg when they overlap. */
.ag-workflow-v24__delivery{
    position:relative;
    z-index:15;
    width:min(84%,1020px);
    margin:-72px auto 0;
}

.ag-workflow-v24__delivery-head{
    margin-bottom:12px;
    text-align:center;
}

.ag-workflow-v24__delivery-head h3{
    margin:0;
    font-size:clamp(1.03rem,1.14vw,1.23rem);
    font-weight:900;
}

.ag-workflow-v24__delivery-head p{
    max-width:720px;
    margin:5px auto 0;
    color:rgba(13,15,16,.59);
    font-size:clamp(.65rem,.71vw,.76rem);
    line-height:1.54;
}

.ag-workflow-v24__packages{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    direction:rtl;
}

.ag-workflow-v24-package{
    min-height:152px;
    padding:21px 22px;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:17px;
    align-items:center;
    border:1px solid rgba(13,15,16,.10);
    border-radius:18px;
    box-shadow:0 13px 30px rgba(13,15,16,.07);
    text-align:right;
}

.ag-workflow-v24-package__icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(243,198,0,.18);
}

.ag-workflow-v24-package__icon svg{
    width:30px;
    height:30px;
}

.ag-workflow-v24-package__icon svg *{
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ag-workflow-v24-package h4{
    margin:0;
    font-size:clamp(.94rem,1.03vw,1.09rem);
    font-weight:900;
}

.ag-workflow-v24-package p{
    margin:6px 0 0;
    font-size:clamp(.64rem,.70vw,.75rem);
    line-height:1.58;
}

.ag-workflow-v24-package--paper{
    background:var(--ag24-paper);
    color:var(--ag24-ink);
}

.ag-workflow-v24-package--paper p{
    color:rgba(13,15,16,.62);
}

.ag-workflow-v24-package--dark{
    background:var(--ag24-ink);
    color:var(--ag24-paper);
}

.ag-workflow-v24-package--dark p{
    color:rgba(244,241,232,.72);
}

.ag-workflow-v24-package--dark .ag-workflow-v24-package__icon{
    color:var(--ag24-solar);
    background:rgba(243,198,0,.12);
}

.ag-workflow-v24__cta{
    position:relative;
    z-index:16;
    direction:rtl;
    width:min(62%,760px);
    min-height:78px;
    margin:13px auto 0;
    padding:13px 18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    border-radius:17px;
    border:1px solid rgba(13,15,16,.07);
    background:rgba(244,241,232,.95);
    box-shadow:0 12px 26px rgba(13,15,16,.055);
}

.ag-workflow-v24__cta h3{
    margin:0;
    font-size:clamp(.93rem,1.03vw,1.09rem);
    font-weight:900;
}

.ag-workflow-v24__cta p{
    margin:4px 0 0;
    color:rgba(13,15,16,.58);
    font-size:clamp(.63rem,.68vw,.72rem);
    line-height:1.5;
}

.ag-workflow-v24__cta a{
    min-width:142px;
    min-height:45px;
    padding:8px 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--ag24-solar);
    color:var(--ag24-ink);
    text-decoration:none;
    font-weight:900;
}

/* =========================================================
   DB SYSTEMS — yellow, based on the user's reference:
   LEFT = large cover
   RIGHT = system copy + 3 DB screenshots/features
   CTA strip below
   ========================================================= */

.ag-systems-v24{
    position:relative;
    z-index:22;
    overflow:hidden;
    background:var(--ag24-solar);
    color:var(--ag24-ink);
    padding:42px 0 50px;
    border-top:1px solid rgba(13,15,16,.08);
}

.ag-systems-v24__header{
    direction:rtl;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    margin-bottom:20px;
}

.ag-systems-v24__header > div:first-child{
    max-width:660px;
    text-align:right;
}

.ag-systems-v24__header span{
    display:inline-flex;
    min-height:29px;
    align-items:center;
    padding:5px 11px;
    border-radius:999px;
    background:rgba(13,15,16,.08);
    font-size:.72rem;
    font-weight:900;
}

.ag-systems-v24__header h2{
    margin:9px 0 0;
    font-size:clamp(1.55rem,2.1vw,2.3rem);
    line-height:1.16;
    font-weight:900;
}

.ag-systems-v24__header p{
    margin:7px 0 0;
    color:rgba(13,15,16,.64);
    font-size:clamp(.70rem,.77vw,.82rem);
    line-height:1.62;
}

.ag-systems-v24__tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:7px;
}

.ag-systems-v24__tabs button{
    min-height:38px;
    padding:7px 12px;
    border:1px solid rgba(13,15,16,.14);
    border-radius:999px;
    background:transparent;
    color:var(--ag24-ink);
    font-family:inherit;
    font-size:.70rem;
    font-weight:850;
    cursor:pointer;
}

.ag-systems-v24__tabs button.is-active{
    background:var(--ag24-ink);
    color:var(--ag24-paper);
    border-color:var(--ag24-ink);
}

.ag-system-v24{
    direction:ltr;
    display:grid;
    grid-template-columns:minmax(420px,58%) minmax(340px,42%);
    grid-template-areas:"cover content";
    gap:30px;
    align-items:stretch;
}

.ag-system-v24[hidden]{
    display:none!important;
}

/* physical LEFT large square/cover */
.ag-system-v24__cover{
    grid-area:cover;
    position:relative;
    min-height:500px;
    overflow:hidden;
    border:2px solid rgba(13,15,16,.12);
    border-radius:18px;
    background:#15181B;
    box-shadow:0 16px 32px rgba(13,15,16,.12);
}

.ag-system-v24__cover img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* physical RIGHT */
.ag-system-v24__content{
    grid-area:content;
    direction:rtl;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:right;
    min-width:0;
}

html[dir="ltr"] .ag-system-v24__content{
    direction:ltr;
    text-align:left;
}

.ag-system-v24__type{
    align-self:flex-start;
    min-height:29px;
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    color:var(--ag24-paper);
    background:var(--ag24-ink);
    font-size:.69rem;
    font-weight:900;
}

.ag-system-v24__content h3{
    margin:11px 0 0;
    font-size:clamp(1.4rem,1.85vw,2rem);
    line-height:1.18;
    font-weight:900;
}

.ag-system-v24__summary{
    margin:8px 0 0;
    color:rgba(13,15,16,.68);
    font-size:clamp(.72rem,.79vw,.84rem);
    line-height:1.63;
}

.ag-system-v24__goal{
    margin:8px 0 0;
    color:rgba(13,15,16,.82);
    font-size:clamp(.68rem,.74vw,.79rem);
    line-height:1.56;
    font-weight:700;
}

.ag-system-v24__primary{
    align-self:flex-start;
    min-width:142px;
    min-height:43px;
    margin-top:13px;
    padding:8px 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--ag24-ink);
    color:var(--ag24-paper);
    text-decoration:none;
    font-size:.74rem;
    font-weight:900;
}

.ag-system-v24__mini-title{
    margin:17px 0 8px;
    font-size:.78rem;
    font-weight:900;
}

.ag-system-v24__mini-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.ag-system-v24-mini{
    margin:0;
    min-width:0;
}

.ag-system-v24-mini img{
    display:block;
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    border:1px solid rgba(13,15,16,.13);
    border-radius:9px;
    background:#111;
}

.ag-system-v24-mini figcaption{
    margin-top:5px;
    color:rgba(13,15,16,.72);
    font-size:.58rem;
    line-height:1.38;
    font-weight:750;
}

.ag-system-v24-feature{
    min-height:112px;
    padding:11px;
    border:1px solid rgba(13,15,16,.12);
    border-radius:11px;
    background:rgba(244,241,232,.52);
}

.ag-system-v24-feature > span{
    color:var(--ag24-ink);
    font-size:.68rem;
}

.ag-system-v24-feature strong{
    display:block;
    margin-top:5px;
    font-size:.68rem;
}

.ag-system-v24-feature p{
    margin:5px 0 0;
    color:rgba(13,15,16,.62);
    font-size:.56rem;
    line-height:1.42;
}

.ag-systems-v24__request{
    direction:rtl;
    min-height:104px;
    margin-top:22px;
    padding:18px 22px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:22px;
    align-items:center;
    border-radius:15px;
    background:var(--ag24-ink);
    color:var(--ag24-paper);
    box-shadow:0 14px 30px rgba(13,15,16,.13);
}

.ag-systems-v24__request small{
    display:inline-flex;
    min-height:25px;
    align-items:center;
    padding:4px 9px;
    border-radius:999px;
    color:var(--ag24-solar);
    border:1px solid rgba(243,198,0,.18);
    font-size:.62rem;
    font-weight:900;
}

.ag-systems-v24__request h3{
    margin:7px 0 0;
    font-size:clamp(1rem,1.14vw,1.23rem);
    font-weight:900;
}

.ag-systems-v24__request p{
    max-width:760px;
    margin:5px 0 0;
    color:rgba(244,241,232,.68);
    font-size:clamp(.65rem,.70vw,.75rem);
    line-height:1.54;
}

.ag-systems-v24__request a{
    min-width:155px;
    min-height:45px;
    padding:8px 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--ag24-solar);
    color:var(--ag24-ink);
    text-decoration:none;
    font-size:.75rem;
    font-weight:900;
}

.ag-systems-v24__empty{
    min-height:180px;
    display:grid;
    place-items:center;
    border:1px dashed rgba(13,15,16,.2);
    border-radius:16px;
    font-weight:800;
}

/* =========================================================
   DB ARTICLES — BLACK LAST CONTENT BLOCK
   ========================================================= */

.ag-articles-v24{
    position:relative;
    z-index:24;
    overflow:hidden;
    background:var(--ag24-ink);
    color:var(--ag24-paper);
    padding:48px 0 58px;
}

.ag-articles-v24__header{
    direction:rtl;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:22px;
    margin-bottom:20px;
}

.ag-articles-v24__header > div{
    max-width:680px;
    text-align:right;
}

.ag-articles-v24__header span{
    display:inline-flex;
    min-height:28px;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    color:var(--ag24-solar);
    border:1px solid rgba(243,198,0,.16);
    background:rgba(243,198,0,.06);
    font-size:.69rem;
    font-weight:900;
}

.ag-articles-v24__header h2{
    margin:9px 0 0;
    font-size:clamp(1.5rem,2vw,2.18rem);
    line-height:1.16;
    font-weight:900;
}

.ag-articles-v24__header p{
    margin:7px 0 0;
    color:rgba(244,241,232,.59);
    font-size:clamp(.69rem,.76vw,.81rem);
    line-height:1.58;
}

.ag-articles-v24__header > a{
    color:var(--ag24-paper);
    text-decoration:none;
    font-size:.75rem;
    font-weight:900;
}

.ag-articles-v24__grid{
    direction:rtl;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.ag-article-v24-card{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:17px;
    background:#15181B;
    box-shadow:0 16px 34px rgba(0,0,0,.17);
}

.ag-article-v24-card__image{
    display:block;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:#202429;
}

.ag-article-v24-card__image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.ag-article-v24-card:hover .ag-article-v24-card__image img{
    transform:scale(1.025);
}

.ag-article-v24-card__content{
    padding:16px 17px 18px;
    text-align:right;
}

.ag-article-v24-card__meta{
    min-height:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:rgba(244,241,232,.46);
    font-size:.60rem;
}

.ag-article-v24-card__meta .is-featured{
    color:var(--ag24-solar);
}

.ag-article-v24-card h3{
    margin:7px 0 0;
    font-size:clamp(.88rem,.98vw,1.05rem);
    line-height:1.43;
    font-weight:900;
}

.ag-article-v24-card h3 a{
    color:var(--ag24-paper);
    text-decoration:none;
}

.ag-article-v24-card p{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:7px 0 0;
    color:rgba(244,241,232,.59);
    font-size:clamp(.63rem,.69vw,.74rem);
    line-height:1.58;
}

.ag-article-v24-card__read{
    display:inline-flex;
    margin-top:13px;
    color:var(--ag24-solar);
    text-decoration:none;
    font-size:.69rem;
    font-weight:900;
}

/* =========================================================
   MOTION
   ========================================================= */

html.has-ag-v24-motion [data-ag-v24-reveal]{
    opacity:0;
    transform:translate3d(0,18px,0);
    transition:
        opacity .60s cubic-bezier(.2,.75,.2,1),
        transform .72s cubic-bezier(.2,.75,.2,1);
    transition-delay:var(--ag-v24-delay,0ms);
    will-change:opacity,transform;
}

html.has-ag-v24-motion .is-ag-v24-visible [data-ag-v24-reveal],
html.has-ag-v24-motion [data-ag-v24-reveal].is-ag-v24-visible{
    opacity:1;
    transform:none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1120px){
    .ag-workflow-v24__top{
        grid-template-columns:minmax(0,62%) minmax(310px,38%);
        min-height:465px;
    }

    .ag-workflow-v24__stages{
        transform:translateX(26px);
    }

    .ag-workflow-v24__character{
        width:min(100%,450px);
        margin-right:-8px;
    }

    .ag-workflow-v24-step__icon{
        width:112px;
        height:112px;
    }

    .ag-workflow-v24__delivery{
        margin-top:-50px;
    }

    .ag-system-v24{
        grid-template-columns:minmax(360px,55%) minmax(320px,45%);
    }

    .ag-system-v24__cover{
        min-height:440px;
    }
}

@media(max-width:820px){
    .ag-workflow-v24{
        overflow:hidden;
    }

    .ag-workflow-v24__intro{
        width:100%;
    }

    .ag-workflow-v24__top{
        display:flex;
        flex-direction:column;
        min-height:0;
    }

    .ag-workflow-v24__visual{
        order:1;
        width:100%;
        justify-content:center;
    }

    .ag-workflow-v24__character{
        width:min(82vw,430px);
        margin:0 auto -16px;
    }

    .ag-workflow-v24__stages{
        order:2;
        width:100%;
        transform:none;
        padding-top:4px;
    }

    .ag-workflow-v24__steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px 12px;
    }

    .ag-workflow-v24-step__arrow{
        display:none;
    }

    .ag-workflow-v24__delivery{
        width:100%;
        margin:18px auto 0;
    }

    .ag-workflow-v24__packages{
        grid-template-columns:1fr;
    }

    .ag-workflow-v24__cta{
        width:100%;
        grid-template-columns:1fr;
    }

    .ag-workflow-v24__cta a{
        width:100%;
    }

    .ag-systems-v24__header{
        align-items:flex-start;
        flex-direction:column;
    }

    .ag-system-v24{
        grid-template-columns:1fr;
        grid-template-areas:
            "content"
            "cover";
    }

    .ag-system-v24__cover{
        min-height:auto;
        aspect-ratio:1 / 1;
    }

    .ag-systems-v24__request{
        grid-template-columns:1fr;
    }

    .ag-systems-v24__request a{
        width:100%;
    }

    .ag-articles-v24__header{
        align-items:flex-start;
        flex-direction:column;
    }

    .ag-articles-v24__grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .ag-system-v24__mini-grid{
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce){
    html.has-ag-v24-motion [data-ag-v24-reveal]{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }
}