/* 360Riyadh Journey-style secondary pages.
 * Presentation only: services, about and contact. No content or business logic.
 */

/* ---------- Shared secondary page language ---------- */
.sr-services,
.sr-about,
.sr-contact {
    background: var(--srj-bg) !important;
    color: var(--srj-ink) !important;
}

.sr-services .sr-kicker,
.sr-about .sr-kicker,
.sr-contact .sr-kicker {
    color: var(--srj-muted) !important;
    letter-spacing: .10em;
}

.sr-services .sr-kicker > span,
.sr-about .sr-kicker > span,
.sr-contact .sr-kicker > span {
    background: var(--srj-ink) !important;
}

.sr-lang-ar .sr-services .sr-kicker,
.sr-lang-ar .sr-about .sr-kicker,
.sr-lang-ar .sr-contact .sr-kicker {
    letter-spacing: .02em;
}

/* ---------- Services index ---------- */
.sr-services-hero,
.sr-service-hero {
    background: var(--srj-dark) !important;
    color: #fff !important;
    border: 0 !important;
}

.sr-services-hero {
    min-height: 68svh;
    display: flex;
    align-items: flex-end;
    padding: 130px 0 72px !important;
}

.sr-services-hero-grid,
.sr-service-hero-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 42px !important;
    align-items: end !important;
}

.sr-services-hero h1,
.sr-service-hero h1 {
    max-width: 1120px !important;
    color: #fff !important;
    font-size: clamp(54px, 7.4vw, 108px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    font-weight: 600 !important;
}

.sr-lang-ar .sr-services-hero h1,
.sr-lang-ar .sr-service-hero h1 {
    max-width: 1000px !important;
    font-size: clamp(46px, 6.5vw, 88px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
}

.sr-services-lead,
.sr-service-hero p:not(.sr-kicker) {
    max-width: 760px !important;
    color: rgba(255,255,255,.68) !important;
    font-size: clamp(16px,1.45vw,20px) !important;
    line-height: 1.7 !important;
}

/* Remove the dashboard/orbit aesthetic. */
.sr-services-orbit {
    display: none !important;
}

.sr-services-list {
    background: var(--srj-bg) !important;
    border-block: 1px solid var(--srj-line) !important;
}

.sr-solution-row {
    grid-template-columns: 58px minmax(220px,.7fr) minmax(300px,1fr) auto !important;
    min-height: 142px !important;
    padding: 28px 0 !important;
    border-bottom: 1px solid var(--srj-line) !important;
    color: var(--srj-ink) !important;
}

.sr-solution-row:hover,
.sr-lang-ar .sr-solution-row:hover {
    transform: none !important;
}

.sr-solution-index,
.sr-solution-open {
    color: var(--srj-ink) !important;
}

.sr-solution-row small,
.sr-solution-row p {
    color: var(--srj-muted) !important;
}

.sr-solution-row h2 {
    color: var(--srj-ink) !important;
    font-size: clamp(25px,2.5vw,38px) !important;
    font-weight: 600 !important;
    letter-spacing: -.035em !important;
}

.sr-services-system,
.sr-services-agent,
.sr-service-block {
    background: var(--srj-bg) !important;
    color: var(--srj-ink) !important;
    border-color: var(--srj-line) !important;
}

.sr-services-system-grid,
.sr-service-two-col {
    grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr) !important;
}

.sr-services-system h2,
.sr-service-block h2,
.sr-agent-card h2 {
    color: var(--srj-ink) !important;
    font-weight: 600 !important;
    letter-spacing: -.045em !important;
}

.sr-services-system h2,
.sr-service-block h2 {
    font-size: clamp(42px,5vw,72px) !important;
    line-height: 1 !important;
}

.sr-lang-ar .sr-services-system h2,
.sr-lang-ar .sr-service-block h2 {
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
}

.sr-output-stack,
.sr-service-two-col ol {
    border-top-color: var(--srj-line) !important;
}

.sr-output-stack span,
.sr-service-two-col li {
    border-bottom-color: var(--srj-line) !important;
}

.sr-output-stack span,
.sr-service-two-col strong,
.sr-deliverable p,
.sr-use-grid span {
    color: var(--srj-ink) !important;
}

.sr-service-two-col li p,
.sr-service-notice p {
    color: var(--srj-muted) !important;
}

.sr-agent-card {
    grid-template-columns: 1fr auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--srj-dark) !important;
    padding: clamp(42px,6vw,82px) !important;
}

.sr-agent-card h2,
.sr-agent-card p,
.sr-agent-badge {
    color: #fff !important;
}

.sr-agent-card p { color: rgba(255,255,255,.65) !important; }
.sr-agent-badge { border-color: rgba(255,255,255,.35) !important; border-radius: 0 !important; }

/* Service detail hero: keep a restrained spatial diagram, not glowing UI. */
.sr-service-hero {
    padding: 130px 0 76px !important;
}

.sr-service-visual {
    min-height: 250px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sr-service-visual::before,
.sr-service-visual::after,
.sr-visual-line {
    display: none !important;
}

.sr-visual-core {
    width: auto !important;
    height: auto !important;
    padding: 13px 18px !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 16px !important;
}

.sr-visual-node {
    width: auto !important;
    height: auto !important;
    padding: 8px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.76) !important;
}

.sr-visual-label { color: rgba(255,255,255,.5) !important; }

.sr-deliverable-grid {
    border-color: var(--srj-line) !important;
}

.sr-deliverable {
    min-height: 150px !important;
    border-color: var(--srj-line) !important;
    background: transparent !important;
}

.sr-deliverable span,
.sr-service-two-col li > span {
    color: var(--srj-muted) !important;
}

.sr-use-grid { gap: 0 !important; border-top: 1px solid var(--srj-line); }
.sr-use-grid span {
    min-height: 92px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--srj-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.sr-service-process {
    background: var(--srj-dark) !important;
    color: #fff !important;
}
.sr-service-process h2,
.sr-service-process strong { color: #fff !important; }
.sr-service-process p { color: rgba(255,255,255,.62) !important; }
.sr-service-process li,
.sr-service-process ol { border-color: rgba(255,255,255,.22) !important; }

.sr-service-notice {
    border-radius: 0 !important;
    background: transparent !important;
    border-color: var(--srj-line) !important;
}
.sr-service-notice strong { color: var(--srj-ink) !important; }

/* ---------- About ---------- */
.sr-about {
    background: var(--srj-bg) !important;
    color: var(--srj-ink) !important;
}

.sr-about-hero {
    min-height: 72svh;
    display: flex;
    align-items: flex-end;
    padding: 130px 0 76px !important;
    border: 0 !important;
    background: var(--srj-dark) !important;
    color: #fff !important;
}

.sr-about-grid-noise,
.sr-about-system {
    display: none !important;
}

.sr-about-hero-grid { grid-template-columns: 1fr !important; }
.sr-about-copy { max-width: 1120px; }

.sr-about-copy h1 {
    max-width: 1060px !important;
    color: #fff !important;
    font-size: clamp(54px,7.3vw,108px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    font-weight: 600 !important;
}
.sr-about[dir="rtl"] .sr-about-copy h1 {
    max-width: 980px !important;
    font-size: clamp(46px,6.4vw,88px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
}
.sr-about-copy h1 em { color: #fff !important; }
.sr-about-copy > p:not(.sr-kicker) { color: rgba(255,255,255,.68) !important; }

.sr-about-section {
    border-bottom: 1px solid var(--srj-line) !important;
    background: var(--srj-bg) !important;
}

.sr-about-split h2,
.sr-about-heading h2,
.sr-about-proof h2,
.sr-about-big-copy,
.sr-about-card-grid h3,
.sr-about-stack-list strong,
.sr-about-sector-grid span {
    color: var(--srj-ink) !important;
}

.sr-about-split h2,
.sr-about-heading h2,
.sr-about-proof h2 {
    font-size: clamp(42px,5.2vw,76px) !important;
    font-weight: 600 !important;
    letter-spacing: -.045em !important;
}

.sr-about-big-copy { font-size: clamp(24px,2.6vw,38px) !important; line-height: 1.55 !important; }

.sr-about-card-grid {
    gap: 0 !important;
    border-top: 1px solid var(--srj-line);
}
.sr-about-card-grid article {
    min-height: 245px !important;
    padding: 24px 20px 28px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--srj-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.sr-about-card-grid article > span,
.sr-about-process-grid article > span,
.sr-about-stack-list span { color: var(--srj-muted) !important; }
.sr-about-card-grid p,
.sr-about-process-grid p,
.sr-about-stack-list p,
.sr-about-proof > div:first-child > p:last-child { color: var(--srj-muted) !important; }

.sr-about-stack { background: var(--srj-dark) !important; color: #fff !important; }
.sr-about-stack h2,
.sr-about-stack-list strong { color: #fff !important; }
.sr-about-stack-list p,
.sr-about-stack-list span { color: rgba(255,255,255,.58) !important; }
.sr-about-stack-list,
.sr-about-stack-list > div { border-color: rgba(255,255,255,.22) !important; }

.sr-about-sector-grid { border-color: var(--srj-line) !important; }
.sr-about-sector-grid span { border-color: var(--srj-line) !important; }

.sr-about-final-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--srj-dark) !important;
}
.sr-about-final-card h2,
.sr-about-final-card h2 em { color: #fff !important; }

/* ---------- Contact / qualifier ---------- */
.sr-contact {
    background: var(--srj-bg) !important;
    color: var(--srj-ink) !important;
}

.sr-contact .sr-nav { display: none !important; }

.sr-contact-hero {
    min-height: 68svh;
    display: flex;
    align-items: flex-end;
    padding: 130px 0 72px !important;
    border: 0 !important;
    background: var(--srj-dark) !important;
}
.sr-contact-hero-grid { grid-template-columns: 1fr !important; }
.sr-qualifier-signal,
.sr-contact-hero .sr-grid-noise { display: none !important; }

.sr-contact-copy { max-width: 1120px; }
.sr-contact-copy h1 {
    max-width: 1080px !important;
    color: #fff !important;
    font-size: clamp(54px,7.2vw,106px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    font-weight: 600 !important;
}
.sr-lang-ar .sr-contact-copy h1 {
    max-width: 980px !important;
    font-size: clamp(46px,6.4vw,86px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
}
.sr-contact-copy h1 em { color: #fff !important; }
.sr-contact-lead { max-width: 760px !important; color: rgba(255,255,255,.68) !important; }
.sr-contact-meta span {
    border-color: rgba(255,255,255,.24) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.58) !important;
}

.sr-qualifier { background: var(--srj-bg) !important; }
.sr-qualifier-grid { grid-template-columns: minmax(0,1fr) 330px !important; gap: 28px !important; }

.sr-q-form {
    border: 1px solid var(--srj-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--srj-ink) !important;
}

.sr-q-head > span,
.sr-q-progress span,
.sr-service-choice,
.sr-chip span,
.sr-q-summary,
.sr-success-card,
.sr-alert-card {
    border-radius: 0 !important;
}

.sr-q-head h2,
.sr-service-choice strong,
.sr-q-summary h3,
.sr-success-card h2 {
    color: var(--srj-ink) !important;
}

.sr-q-head p,
.sr-field-grid label > span,
.sr-field-full > span,
.sr-choice-fieldset legend,
.sr-privacy-check,
.sr-service-choice,
.sr-chip span {
    color: var(--srj-muted) !important;
}

.sr-service-choice {
    border-color: var(--srj-line) !important;
    background: transparent !important;
}
.sr-service-choice:hover,
.sr-service-choice.is-selected {
    border-color: var(--srj-ink) !important;
    background: #f7f6f2 !important;
    transform: none !important;
}
.sr-choice-code { color: var(--srj-muted) !important; }
.sr-service-choice.is-selected i { color: var(--srj-ink) !important; }

.sr-q-form input[type="text"],
.sr-q-form input[type="email"],
.sr-q-form input[type="tel"],
.sr-q-form input[type="number"],
.sr-q-form select,
.sr-q-form textarea {
    border-color: var(--srj-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--srj-ink) !important;
}
.sr-q-form input:focus,
.sr-q-form select:focus,
.sr-q-form textarea:focus {
    border-color: var(--srj-ink) !important;
    box-shadow: none !important;
}

.sr-q-progress span.is-active,
.sr-q-progress span.is-done {
    border-color: var(--srj-ink) !important;
    background: var(--srj-ink) !important;
    color: #fff !important;
}
.sr-q-progress i,
.sr-q-actions { border-color: var(--srj-line) !important; background-color: transparent; }

.sr-q-summary {
    border: 0 !important;
    background: var(--srj-dark) !important;
    box-shadow: none !important;
    color: #fff !important;
}
.sr-q-summary h3 { color: #fff !important; }
.sr-q-summary p,
.sr-q-summary span { color: rgba(255,255,255,.62) !important; }

.sr-summary-badge {
    border-radius: 0 !important;
    border-color: rgba(255,255,255,.28) !important;
    background: transparent !important;
    color: #fff !important;
}

.sr-success-card,
.sr-alert-card {
    border-color: var(--srj-line) !important;
    background: #fff !important;
}
.sr-success-mark,
.sr-alert-card strong {
    border-radius: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .sr-solution-row,
    .sr-services-system-grid,
    .sr-service-two-col,
    .sr-about-split,
    .sr-about-stack-grid,
    .sr-qualifier-grid {
        grid-template-columns: 1fr !important;
    }
    .sr-solution-row { gap: 12px !important; }
    .sr-solution-index { margin-bottom: 4px; }
    .sr-solution-open { justify-self: start; }
    .sr-q-summary { position: static !important; }
}

@media (max-width: 760px) {
    .sr-services-hero,
    .sr-service-hero,
    .sr-about-hero,
    .sr-contact-hero {
        min-height: auto;
        padding: 108px 0 54px !important;
    }

    .sr-services-hero h1,
    .sr-service-hero h1,
    .sr-about-copy h1,
    .sr-about[dir="rtl"] .sr-about-copy h1,
    .sr-contact-copy h1,
    .sr-lang-ar .sr-contact-copy h1 {
        font-size: clamp(36px,10.4vw,46px) !important;
        line-height: 1.12 !important;
        letter-spacing: -.025em !important;
    }

    .sr-solution-row { min-height: 0 !important; padding: 24px 0 !important; }
    .sr-services-system h2,
    .sr-service-block h2,
    .sr-about-split h2,
    .sr-about-heading h2,
    .sr-about-proof h2 { font-size: 36px !important; }

    .sr-deliverable-grid,
    .sr-use-grid,
    .sr-about-card-grid,
    .sr-about-sector-grid,
    .sr-service-choice-grid,
    .sr-field-grid {
        grid-template-columns: 1fr !important;
    }

    .sr-agent-card { grid-template-columns: 1fr !important; padding: 34px 24px !important; }
    .sr-service-visual { min-height: 220px !important; }
    .sr-about-card-grid article { min-height: 190px !important; }
    .sr-qualifier { padding-block: 54px 90px !important; }
    .sr-q-form { padding: 24px 18px !important; }
}