/* 360Riyadh desktop-only refinement layer.
 * Mobile/tablet rules below 981px are intentionally untouched.
 */

@media (min-width: 981px) {
    /* ---------- Shared desktop shell ---------- */
    .sr-global-header-inner {
        min-height: 80px !important;
    }

    .sr-global-header .sr-global-brand {
        font-size: 20px !important;
    }

    .sr-global-header .sr-global-desktop-nav {
        gap: 6px !important;
    }

    .sr-global-header .sr-global-desktop-nav a {
        padding: 11px 12px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    /* Fix the blank white desktop CTA caused by inherited link colors. */
    .sr-global-header .sr-global-desktop-nav .sr-global-cta {
        min-width: 118px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border-color: #fff !important;
        color: #11110f !important;
        -webkit-text-fill-color: #11110f !important;
        opacity: 1 !important;
        text-align: center !important;
    }

    .sr-global-footer-grid {
        min-height: 160px !important;
        padding-block: 32px !important;
    }

    .sr-global-footer-brand strong {
        font-size: 21px !important;
    }

    .sr-global-footer-brand p,
    .sr-global-footer nav a {
        font-size: 14px !important;
    }

    .sr-global-footer-copy {
        font-size: 12px !important;
    }

    /* ---------- Journey Home ---------- */
    .sr-journey-home .sr-content-width,
    .sr-portfolio .sr-content-width,
    .sr-case-study .sr-case-width,
    .sr-case-nav-inner {
        width: min(calc(100% - 96px), 1320px) !important;
    }

    .sr-j-hero {
        min-height: min(780px, calc(100svh - 80px)) !important;
    }

    .sr-j-hero-inner {
        padding-block: 100px 54px !important;
    }

    .sr-j-hero h1 {
        max-width: 940px !important;
        font-size: clamp(58px, 5.2vw, 84px) !important;
        line-height: .98 !important;
    }

    .sr-lang-ar .sr-j-hero h1 {
        max-width: 860px !important;
        font-size: clamp(52px, 4.8vw, 76px) !important;
        line-height: 1.14 !important;
    }

    .sr-j-hero-bottom {
        margin-top: 28px !important;
        padding-top: 18px !important;
    }

    .sr-j-hero-bottom p {
        max-width: 720px !important;
        font-size: 17px !important;
    }

    .sr-j-section {
        padding-block: 96px !important;
    }

    .sr-j-section-head {
        grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important;
        gap: 64px !important;
        margin-bottom: 54px !important;
    }

    .sr-j-section-head h2 {
        max-width: 800px !important;
        font-size: clamp(46px, 4.3vw, 64px) !important;
        line-height: 1.02 !important;
    }

    .sr-lang-ar .sr-j-section-head h2 {
        line-height: 1.18 !important;
    }

    .sr-j-section-head p {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    .sr-j-work-list {
        gap: 72px !important;
    }

    .sr-j-work-item {
        grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr) !important;
        gap: 48px !important;
        align-items: stretch !important;
    }

    .sr-j-work-media {
        aspect-ratio: 16 / 10 !important;
    }

    .sr-j-work-copy h3 {
        margin: 10px 0 20px !important;
        font-size: clamp(30px, 2.6vw, 40px) !important;
        line-height: 1.12 !important;
    }

    .sr-j-cap-row {
        grid-template-columns: 54px minmax(240px, .72fr) minmax(0, 1.28fr) auto !important;
        min-height: 102px !important;
        gap: 22px !important;
    }

    .sr-j-cap-row strong {
        font-size: clamp(22px, 1.8vw, 27px) !important;
    }

    .sr-j-cap-row p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .sr-j-tech-statement {
        min-height: 52vh !important;
    }

    .sr-j-tech-statement h2 {
        max-width: 1000px !important;
        font-size: clamp(58px, 5.4vw, 84px) !important;
        line-height: .98 !important;
    }

    .sr-lang-ar .sr-j-tech-statement h2 {
        line-height: 1.14 !important;
    }

    /* ---------- Services ---------- */
    .sr-services-hero,
    .sr-service-hero {
        min-height: 58svh !important;
        padding: 110px 0 62px !important;
    }

    .sr-services-hero h1,
    .sr-service-hero h1 {
        max-width: 940px !important;
        font-size: clamp(54px, 5.1vw, 78px) !important;
        line-height: 1 !important;
    }

    .sr-lang-ar .sr-services-hero h1,
    .sr-lang-ar .sr-service-hero h1 {
        max-width: 900px !important;
        font-size: clamp(50px, 4.7vw, 72px) !important;
        line-height: 1.16 !important;
    }

    .sr-services-hero-grid,
    .sr-service-hero-grid {
        gap: 30px !important;
    }

    .sr-solution-row {
        grid-template-columns: 46px minmax(290px, .8fr) minmax(360px, 1fr) 120px !important;
        min-height: 122px !important;
        gap: 24px !important;
        padding: 24px 0 !important;
    }

    .sr-solution-row h2 {
        font-size: clamp(24px, 2vw, 32px) !important;
        line-height: 1.2 !important;
    }

    .sr-solution-row p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .sr-solution-open {
        min-width: 110px !important;
        font-size: 13px !important;
        justify-self: end !important;
    }

    .sr-services-system,
    .sr-services-agent,
    .sr-service-block {
        padding-block: 88px !important;
    }

    .sr-services-system-grid,
    .sr-service-two-col {
        gap: 62px !important;
    }

    .sr-services-system h2,
    .sr-service-block h2 {
        max-width: 650px !important;
        font-size: clamp(42px, 4vw, 58px) !important;
        line-height: 1.08 !important;
    }

    .sr-lang-ar .sr-services-system h2,
    .sr-lang-ar .sr-service-block h2 {
        line-height: 1.2 !important;
    }

    .sr-agent-card {
        padding: 54px 58px !important;
    }

    .sr-service-visual {
        min-height: 220px !important;
    }

    .sr-services .sr-final-cta {
        padding: 72px 0 !important;
        background: #080d17 !important;
    }

    .sr-services .sr-final-cta .sr-cta-shell {
        padding: 58px 64px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 0 !important;
        background: #11110f !important;
        color: #fff !important;
    }

    .sr-services .sr-final-cta .sr-kicker,
    .sr-services .sr-final-cta .sr-cta-shell p {
        color: rgba(255,255,255,.68) !important;
    }

    .sr-services .sr-final-cta h2,
    .sr-services .sr-final-cta h2 * {
        color: #fff !important;
        -webkit-text-fill-color: currentColor !important;
    }

    .sr-services .sr-final-cta h2 em {
        color: var(--srj-accent) !important;
        -webkit-text-fill-color: var(--srj-accent) !important;
    }

    .sr-services .sr-final-cta .sr-language-link {
        color: #fff !important;
    }

    /* ---------- Work / Portfolio ---------- */
    .sr-portfolio-hero {
        min-height: 52vh !important;
        padding: 108px 0 58px !important;
    }

    .sr-portfolio-hero h1 {
        max-width: 960px !important;
        font-size: clamp(58px, 5.2vw, 80px) !important;
        line-height: 1 !important;
    }

    .sr-lang-ar .sr-portfolio-hero h1 {
        max-width: 900px !important;
        font-size: clamp(52px, 4.8vw, 74px) !important;
        line-height: 1.16 !important;
    }

    .sr-portfolio-featured {
        padding: 84px 0 !important;
    }

    .sr-portfolio-featured-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .925fr) minmax(0, .925fr) !important;
        gap: 24px !important;
    }

    .sr-portfolio-all {
        padding-block: 72px 105px !important;
    }

    .sr-portfolio-filters {
        top: 80px !important;
        margin-bottom: 44px !important;
        padding-block: 15px !important;
    }

    .sr-portfolio-filter-button {
        margin-inline-end: 19px !important;
        font-size: 13px !important;
    }

    .sr-portfolio-card-copy h3 {
        font-size: clamp(20px, 1.55vw, 25px) !important;
        line-height: 1.25 !important;
    }

    /* ---------- Case Study ---------- */
    .sr-case-hero {
        min-height: 72svh !important;
    }

    .sr-case-hero-copy {
        padding-block: 126px 46px !important;
    }

    .sr-case-hero h1 {
        max-width: 900px !important;
        font-size: clamp(54px, 5vw, 78px) !important;
        line-height: 1 !important;
    }

    .sr-case-study[dir="rtl"] .sr-case-hero h1,
    .sr-lang-ar .sr-case-hero h1 {
        line-height: 1.14 !important;
    }

    .sr-case-hero-copy > p {
        max-width: 700px !important;
        font-size: 17px !important;
    }

    .sr-case-meta > div {
        min-height: 105px !important;
        padding: 20px 22px !important;
    }

    .sr-case-meta small {
        margin-bottom: 14px !important;
    }

    .sr-case-section {
        padding-block: 88px !important;
    }

    .sr-case-story {
        grid-template-columns: 200px minmax(0, 1fr) !important;
        gap: 64px !important;
        align-items: start !important;
    }

    .sr-case-story .sr-case-big-copy {
        max-width: 820px !important;
        font-size: clamp(30px, 2.7vw, 40px) !important;
        line-height: 1.28 !important;
    }

    .sr-case-frame {
        max-height: 720px !important;
    }

    .sr-case-next a {
        padding-block: 24px !important;
    }

    .sr-case-next strong {
        font-size: clamp(30px, 3vw, 46px) !important;
    }

    .sr-case-hero.is-clean-fallback::before {
        top: 16% !important;
        inset-inline-end: 6vw !important;
        font-size: clamp(100px, 18vw, 250px) !important;
    }

    /* ---------- About ---------- */
    .sr-about-hero {
        min-height: 58svh !important;
        padding: 108px 0 62px !important;
    }

    .sr-about-copy h1,
    .sr-about[dir="rtl"] .sr-about-copy h1 {
        max-width: 900px !important;
        font-size: clamp(50px, 4.7vw, 72px) !important;
        line-height: 1.16 !important;
    }

    .sr-about-section {
        padding-block: 88px !important;
    }

    .sr-about-split,
    .sr-about-stack-grid,
    .sr-about-proof {
        gap: 64px !important;
    }

    .sr-about-split h2,
    .sr-about-heading h2,
    .sr-about-proof h2 {
        font-size: clamp(38px, 3.8vw, 56px) !important;
        line-height: 1.16 !important;
    }

    .sr-about-big-copy {
        font-size: clamp(24px, 2.1vw, 32px) !important;
        line-height: 1.6 !important;
    }

    .sr-about-card-grid article {
        min-height: 220px !important;
    }

    .sr-about-final-card {
        padding: 62px !important;
    }

    /* ---------- Contact / Qualifier ---------- */
    .sr-contact-hero {
        min-height: 56svh !important;
        padding: 108px 0 60px !important;
    }

    .sr-contact-copy h1,
    .sr-lang-ar .sr-contact-copy h1 {
        max-width: 900px !important;
        font-size: clamp(50px, 4.7vw, 72px) !important;
        line-height: 1.16 !important;
    }

    .sr-contact-lead {
        max-width: 720px !important;
        font-size: 17px !important;
        line-height: 1.75 !important;
    }

    .sr-qualifier {
        padding-block: 72px 96px !important;
    }

    .sr-qualifier-grid {
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 24px !important;
    }
}

@media (min-width: 1280px) {
    /* Three columns are a better use of wide desktop space for the 70-project archive. */
    .sr-portfolio-all .sr-portfolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 50px 22px !important;
    }

    .sr-portfolio-all .sr-portfolio-grid .sr-portfolio-media,
    .sr-portfolio-all .sr-portfolio-card:nth-child(4n+1) .sr-portfolio-media,
    .sr-portfolio-all .sr-portfolio-card:nth-child(4n+2) .sr-portfolio-media {
        aspect-ratio: 4 / 3 !important;
    }
}