/* =============================================================================
   Services Page — Grid Section (Arolax-style clean layout)
   ============================================================================= */

/* ── Partners marquee: override Arolax dark background ── */
.clients-area {
    background-color: #fff !important;
}
.clients-area-inner {
    padding-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

/* ── Partners title: ghost gray minimal label ── */
.clients-area .section-title,
.clients-area .client-area-text h2 {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #b0b0b0 !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}

.od-sg-section {
    padding: 80px 0 100px;
}

@media only screen and (max-width: 767px) {
    .od-sg-section { padding: 48px 0 64px; }
}

/* ── Header: title left, description right ── */
.od-sg-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px;
    align-items: flex-end;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.12);
    margin-bottom: 60px;
}

@media only screen and (max-width: 991px) {
    .od-sg-header {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding-bottom: 40px;
        margin-bottom: 40px;
    }
}

.od-sg-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.08;
    color: var(--primary);
    margin: 0;
}

@media only screen and (max-width: 1199px) {
    .od-sg-title { font-size: 44px; }
}

@media only screen and (max-width: 767px) {
    .od-sg-title { font-size: 32px; }
}

.od-sg-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--secondary);
    max-width: 400px;
    align-self: flex-end;
    margin: 0;
}

@media only screen and (max-width: 991px) {
    .od-sg-desc { max-width: 100%; }
}

/* ── Grid ── */
.od-sg-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0;
}

@media only screen and (max-width: 991px) {
    .od-sg-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media only screen and (max-width: 575px) {
    .od-sg-grid { grid-template-columns: 1fr !important; }
}

/* ── Item ── */
.od-sg-item {
    padding: 48px 40px 56px 40px;
    border-right: 1px solid rgba(18, 18, 18, 0.10);
}

/* First column in each row: flush with container edge */
.od-sg-item:nth-child(4n+1) {
    padding-left: 0;
}

/* Last column in each row: no right border */
.od-sg-item:last-child,
.od-sg-item:nth-child(4n) {
    border-right: none;
    padding-right: 0;
}

@media only screen and (max-width: 991px) {
    .od-sg-item {
        padding: 32px 24px 32px 24px;
        border-bottom: 1px solid rgba(18, 18, 18, 0.10);
    }
    /* Reset 4-col overrides */
    .od-sg-item:nth-child(4n+1) { padding-left: 0; }
    .od-sg-item:nth-child(4n) { border-right: 1px solid rgba(18, 18, 18, 0.10); padding-right: 24px; }
    /* 2-col: odd = left column, even = right column */
    .od-sg-item:nth-child(odd)  { padding-left: 0; }
    .od-sg-item:nth-child(even) { border-right: none; padding-right: 0; }
    /* Remove bottom border from last row */
    .od-sg-item:nth-last-child(-n+2) { border-bottom: none; }
}

@media only screen and (max-width: 575px) {
    .od-sg-item {
        padding: 28px 0 !important;
        border-right: none !important;
    }
    .od-sg-item:last-child { border-bottom: none; }
}

/* ── Icon ── */
.od-sg-icon {
    margin-bottom: 24px;
    color: var(--primary);
}

.od-sg-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.od-sg-icon--placeholder svg {
    display: block;
    color: var(--primary);
    opacity: 0.7;
}

/* ── Name ── */
.od-sg-name {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    margin: 0 0 24px;
}

.od-sg-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.od-sg-name a:hover {
    color: #c2f971;
}

/* ── Feature list ── */
.od-sg-features {
    list-style: disc !important;
    padding: 0 0 0 18px !important;
    margin: 0;
    display: block !important;
}

.od-sg-features li {
    font-size: 16px;
    line-height: 1.55;
    color: var(--secondary);
    font-weight: 300;
    padding-bottom: 12px;
    padding-inline-start: 0 !important;
    list-style: disc !important;
}

.od-sg-features li:last-child {
    padding-bottom: 0;
}

.od-sg-features li::before {
    display: none !important;
}

.od-sg-features li::marker {
    color: var(--secondary);
}

/* ── Excerpt fallback ── */
.od-sg-excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: var(--secondary);
    margin: 0;
}