/* 360Riyadh Experience Agency direction — inspired by editorial experience-agency patterns, not a replica. */

:root {
    --srj-bg: #f3f1ec;
    --srj-ink: #11110f;
    --srj-muted: #6f6d67;
    --srj-line: rgba(17,17,15,.18);
    --srj-dark: #11110f;
    --srj-light: #f7f5ef;
    --srj-accent: #24b8d2;
    --srj-max: 1440px;
}

.sr-journey-home,
.sr-portfolio,
.sr-case-study {
    background: var(--srj-bg) !important;
    color: var(--srj-ink) !important;
}

.sr-journey-home *,
.sr-portfolio *,
.sr-case-study * { box-sizing: border-box; }

.sr-journey-home .sr-content-width,
.sr-portfolio .sr-content-width,
.sr-case-study .sr-case-width {
    width: min(calc(100% - 64px), var(--srj-max));
    margin-inline: auto;
}

/* Shared rebuild shell: cleaner and editorial. */
.sr-rebuild-page .sr-global-header {
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(10,10,9,.78) !important;
    backdrop-filter: blur(18px);
}
.sr-rebuild-page .sr-global-brand,
.sr-rebuild-page .sr-global-desktop-nav a,
.sr-rebuild-page .sr-global-mobile-menu summary { color: #fff !important; }
.sr-rebuild-page .sr-global-cta {
    border-color: #fff !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
}

/* HOME */
.sr-j-hero {
    position: relative;
    min-height: calc(100svh - 72px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #0b0b0a;
    color: #fff;
}
.sr-j-hero-reel,
.sr-j-hero-reel figure,
.sr-j-hero-reel::after { position: absolute; inset: 0; }
.sr-j-hero-reel { z-index: 0; }
.sr-j-hero-reel figure {
    margin: 0;
    opacity: 0;
    animation: srj-reel 18s infinite;
}
.sr-j-hero-reel figure:nth-child(1) { animation-delay: 0s; opacity: 1; }
.sr-j-hero-reel figure:nth-child(2) { animation-delay: 6s; }
.sr-j-hero-reel figure:nth-child(3) { animation-delay: 12s; }
.sr-j-hero-reel img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.8) contrast(1.04);
    transform: scale(1.025);
}
.sr-j-hero-reel::after {
    content: "";
    background: linear-gradient(180deg, rgba(8,8,7,.10) 10%, rgba(8,8,7,.2) 45%, rgba(8,8,7,.86) 100%);
}
@keyframes srj-reel {
    0%, 28% { opacity: 1; transform: scale(1); }
    34%, 94% { opacity: 0; transform: scale(1.025); }
    100% { opacity: 1; }
}
.sr-j-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(100px, 14vw, 190px) clamp(42px, 6vw, 72px);
}
.sr-j-eyebrow {
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sr-lang-ar .sr-j-eyebrow { letter-spacing: .03em; }
.sr-j-hero h1 {
    max-width: 1050px;
    margin: 0;
    color: #fff;
    font-size: clamp(54px, 7.5vw, 112px);
    font-weight: 640;
    line-height: .94;
    letter-spacing: -.055em;
}
.sr-lang-ar .sr-j-hero h1 {
    max-width: 980px;
    font-size: clamp(46px, 6.6vw, 92px);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 680;
}
.sr-j-hero-bottom {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 30px;
    align-items: end;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.34);
}
.sr-j-hero-bottom p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: clamp(15px,1.4vw,19px);
    line-height: 1.6;
}
.sr-j-arrow-link {
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.sr-j-section {
    padding-block: clamp(78px, 10vw, 150px);
    border-bottom: 1px solid var(--srj-line);
}
.sr-j-section-head {
    display: grid;
    grid-template-columns: 1fr minmax(280px,.5fr);
    gap: clamp(40px,8vw,120px);
    align-items: end;
    margin-bottom: clamp(40px,6vw,82px);
}
.sr-j-section-head h2 {
    max-width: 920px;
    margin: 0;
    color: var(--srj-ink);
    font-size: clamp(44px,5.8vw,84px);
    font-weight: 620;
    line-height: .98;
    letter-spacing: -.05em;
}
.sr-lang-ar .sr-j-section-head h2 { line-height: 1.15; letter-spacing: -.02em; }
.sr-j-section-head p { margin: 0; color: var(--srj-muted); line-height: 1.7; }

.sr-j-work-list { display: grid; gap: clamp(54px,8vw,110px); }
.sr-j-work-item {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(280px,.5fr);
    gap: clamp(28px,5vw,72px);
    color: var(--srj-ink);
    text-decoration: none;
}
.sr-j-work-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #d8d5ce;
}
.sr-j-work-media img { width:100%; height:100%; object-fit:cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.sr-j-work-item:hover .sr-j-work-media img { transform: scale(1.025); }
.sr-j-work-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--srj-line);
}
.sr-j-work-copy small { color: var(--srj-muted); font-weight: 750; }
.sr-j-work-copy h3 {
    margin: 12px 0 24px;
    color: var(--srj-ink);
    font-size: clamp(28px,3.1vw,48px);
    line-height: 1.05;
    font-weight: 620;
    letter-spacing: -.035em;
}

.sr-j-capabilities { background: var(--srj-dark); color: #fff; }
.sr-j-capabilities .sr-j-section-head h2 { color: #fff; }
.sr-j-capabilities .sr-j-section-head p { color: rgba(255,255,255,.65); }
.sr-j-cap-list { border-top: 1px solid rgba(255,255,255,.25); }
.sr-j-cap-row {
    display: grid;
    grid-template-columns: 70px minmax(220px,.75fr) minmax(0,1.25fr) auto;
    gap: 24px;
    align-items: center;
    min-height: 118px;
    border-bottom: 1px solid rgba(255,255,255,.25);
}
.sr-j-cap-row span { color: rgba(255,255,255,.48); font-size: 11px; }
.sr-j-cap-row strong { color: #fff; font-size: clamp(22px,2vw,30px); font-weight: 560; }
.sr-j-cap-row p { margin:0; color:rgba(255,255,255,.62); line-height:1.55; }
.sr-j-cap-row b { color:#fff; font-size:18px; font-weight:400; }

.sr-j-tech-statement {
    min-height: 65vh;
    display: grid;
    place-items: center;
    text-align: center;
}
.sr-j-tech-statement h2 {
    max-width: 1180px;
    margin: 0;
    color: var(--srj-ink);
    font-size: clamp(54px,8vw,118px);
    font-weight: 590;
    line-height: .94;
    letter-spacing: -.06em;
}
.sr-lang-ar .sr-j-tech-statement h2 { line-height: 1.12; letter-spacing: -.025em; }
.sr-j-tech-statement em { color: var(--srj-accent); font-style: normal; }

/* WORK / PORTFOLIO */
.sr-portfolio .sr-nav,
.sr-portfolio .sr-footer { display:none !important; }
.sr-portfolio-hero {
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    padding: 120px 0 70px !important;
    background: var(--srj-dark) !important;
    color:#fff;
}
.sr-portfolio-hero .sr-grid-noise { display:none; }
.sr-portfolio-hero-grid { grid-template-columns:1fr !important; gap:38px !important; }
.sr-portfolio-hero h1 {
    max-width: 980px !important;
    color:#fff !important;
    font-size: clamp(42px,4.8vw,72px) !important;
    font-weight: 600 !important;
    line-height:1.02 !important;
    letter-spacing:-.04em !important;
}
.sr-lang-ar .sr-portfolio-hero h1 { line-height:1.18 !important; letter-spacing:-.02em !important; }
.sr-portfolio-intro { max-width:720px; }
.sr-portfolio-intro>p { color:rgba(255,255,255,.68) !important; font-size:17px !important; }
.sr-portfolio-stat { border-top-color:rgba(255,255,255,.24) !important; }
.sr-portfolio-stat strong { color:#fff !important; }
.sr-portfolio-stat span { color:rgba(255,255,255,.48) !important; }
.sr-portfolio-featured { display:none !important; }
.sr-portfolio-all { background:var(--srj-bg) !important; padding-block:90px 130px !important; }
.sr-portfolio-section-head h2 {
    max-width:780px;
    color:var(--srj-ink) !important;
    font-size:clamp(36px,4vw,56px) !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    letter-spacing:-.02em !important;
}
.sr-portfolio-filters {
    position: sticky;
    top: 72px;
    z-index: 12;
    margin: 0 0 62px !important;
    padding: 18px 0;
    border-block:1px solid var(--srj-line);
    background:rgba(243,241,236,.94);
    backdrop-filter:blur(14px);
}
.sr-portfolio-filter-button {
    min-height: 0 !important;
    padding: 5px 0 !important;
    margin-inline-end: 24px;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--srj-muted) !important;
    font-size:14px !important;
    font-weight:650 !important;
}
.sr-portfolio-filter-button.is-active { color:var(--srj-ink) !important; box-shadow:inset 0 -1px 0 var(--srj-ink); }
.sr-portfolio-filter-result { color:var(--srj-muted) !important; }
.sr-portfolio-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:70px 28px !important;
}
.sr-portfolio-card { color:var(--srj-ink) !important; }
.sr-portfolio-media {
    min-height:0 !important;
    aspect-ratio: 4 / 3;
    border:0 !important;
    border-radius:0 !important;
    filter:none !important;
    background-color:#dad7cf !important;
}
.sr-portfolio-card:nth-child(4n+1) .sr-portfolio-media { aspect-ratio: 16 / 10; }
.sr-portfolio-card:nth-child(4n+2) .sr-portfolio-media { aspect-ratio: 1 / 1; }
.sr-portfolio-index { left:14px !important; top:14px !important; background:rgba(0,0,0,.62) !important; }
.sr-portfolio-open { right:14px !important; top:14px !important; background:rgba(0,0,0,.62) !important; }
.sr-portfolio-card-copy { padding-top:15px !important; border-top:1px solid var(--srj-line); }
.sr-portfolio-card-copy>span { color:var(--srj-muted) !important; font-size:11px !important; }
.sr-portfolio-card-copy h3 { color:var(--srj-ink) !important; font-size:clamp(20px,2vw,29px) !important; font-weight:590 !important; }
.sr-portfolio .sr-final-cta { background:var(--srj-dark) !important; }

/* CASE STUDY */
.single-post #masthead,
.single-post #colophon { display:none !important; }
.sr-case-study { min-height:100vh; }
.sr-case-nav {
    position:absolute; z-index:20; top:0; inset-inline:0;
    height:78px; display:flex; align-items:center;
    color:#fff; border-bottom:1px solid rgba(255,255,255,.24);
}
.sr-case-nav-inner { width:min(calc(100% - 64px),var(--srj-max)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.sr-case-nav a { color:#fff; text-decoration:none; font-weight:700; }
.sr-case-hero {
    position:relative; min-height:88svh; display:flex; align-items:flex-end;
    overflow:hidden; background:#111; color:#fff;
}
.sr-case-hero-media { position:absolute; inset:0; }
.sr-case-hero-media img { width:100%; height:100%; object-fit:cover; }
.sr-case-hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18) 45%,rgba(0,0,0,.86)); }
.sr-case-hero-copy { position:relative; z-index:2; width:100%; padding-block:150px 60px; }
.sr-case-hero h1 {
    max-width:920px; margin:0; color:#fff;
    font-size:clamp(38px,4.5vw,68px); line-height:1.03; font-weight:600; letter-spacing:-.04em;
}
.sr-case-study[dir="rtl"] .sr-case-hero h1 { line-height:1.18; letter-spacing:-.02em; }
.sr-case-hero-copy>p { max-width:740px; margin:22px 0 0; color:rgba(255,255,255,.8); font-size:17px; line-height:1.7; }
.sr-case-meta {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    border-block:1px solid var(--srj-line); background:var(--srj-bg);
}
.sr-case-meta>div { min-height:112px; padding:22px 24px; border-inline-end:1px solid var(--srj-line); }
.sr-case-meta small { display:block; margin-bottom:16px; color:var(--srj-muted); text-transform:uppercase; letter-spacing:.08em; }
.sr-case-meta strong { color:var(--srj-ink); font-size:16px; font-weight:620; }
.sr-case-section { padding-block:clamp(68px,7vw,108px); border-bottom:1px solid var(--srj-line); }
.sr-case-story { display:grid; grid-template-columns:minmax(180px,.35fr) minmax(0,1.15fr); gap:clamp(32px,7vw,110px); }
.sr-case-story h2 { margin:0; color:var(--srj-ink); font-size:17px; font-weight:650; }
.sr-case-story .sr-case-big-copy { max-width:820px; margin:0; color:var(--srj-ink); font-size:clamp(22px,2.25vw,32px); line-height:1.45; letter-spacing:-.02em; }
.sr-case-live { background:var(--srj-dark); color:#fff; }
.sr-case-live h2 { color:#fff; }
.sr-case-live .sr-case-original { color:rgba(255,255,255,.72); }
.sr-case-launch { display:flex; justify-content:flex-end; margin-top:42px; padding-top:30px; border-top:1px solid rgba(255,255,255,.24); }
.sr-case-live-button {
    width:min(100%,430px);
    min-height:66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:14px 18px 14px 22px;
    border:1px solid var(--srj-accent);
    border-radius:2px;
    background:transparent;
    color:var(--srj-light);
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.sr-case-live-button i { width:38px; height:38px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-style:normal; transition:transform .25s ease; }
.sr-case-live-button:hover,
.sr-case-live-button:focus-visible { color:var(--srj-ink); background:var(--srj-accent); transform:translateY(-2px); }
.sr-case-live-button:hover i,
.sr-case-live-button:focus-visible i { transform:translate(3px,-3px); }
.sr-case-live-button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.sr-case-next { background:var(--srj-bg); }
.sr-case-next a { display:grid; grid-template-columns:1fr auto; gap:24px; padding-block:30px; border-top:1px solid var(--srj-line); color:var(--srj-ink); text-decoration:none; }
.sr-case-next strong { font-size:clamp(30px,4vw,58px); font-weight:590; }

@media (max-width: 900px) {
    .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% - 36px),var(--srj-max)); }
    .sr-j-section-head,
    .sr-j-work-item { grid-template-columns:1fr; }
    .sr-j-work-copy { min-height:150px; }
    .sr-j-cap-row { grid-template-columns:44px 1fr; padding-block:24px; }
    .sr-j-cap-row p,.sr-j-cap-row b { grid-column:2; }
    .sr-portfolio-grid { grid-template-columns:1fr !important; gap:46px !important; }
    .sr-case-meta { grid-template-columns:1fr 1fr; }
    .sr-case-story { grid-template-columns:1fr; gap:24px; }
}

@media (max-width: 680px) {
    .sr-j-hero { min-height:82svh; }
    .sr-j-hero-inner { padding-block:96px 30px; }
    .sr-j-hero h1 { font-size:42px; line-height:1.02; }
    .sr-lang-ar .sr-j-hero h1 { font-size:38px; line-height:1.16; }
    .sr-j-hero-bottom { grid-template-columns:1fr; gap:18px; margin-top:26px; }
    .sr-j-section { padding-block:68px; }
    .sr-j-section-head { margin-bottom:36px; gap:22px; }
    .sr-j-section-head h2 { font-size:38px; line-height:1.06; }
    .sr-j-work-list { gap:52px; }
    .sr-j-work-copy h3 { font-size:28px; }
    .sr-j-cap-row strong { font-size:22px; }
    .sr-j-tech-statement { min-height:50vh; }
    .sr-j-tech-statement h2 { font-size:46px; line-height:1; }
    .sr-lang-ar .sr-j-tech-statement h2 { font-size:40px; line-height:1.16; }
    .sr-portfolio-hero { min-height:52vh; padding:100px 0 48px !important; }
    .sr-portfolio-hero h1 { font-size:36px !important; line-height:1.12 !important; }
    .sr-lang-ar .sr-portfolio-hero h1 { line-height:1.16 !important; }
    .sr-portfolio-section-head h2 { font-size:34px !important; line-height:1.25 !important; }
    .sr-portfolio-all { padding-block:62px 90px !important; }
    .sr-portfolio-filters { top:64px; margin-bottom:42px !important; }
    .sr-case-nav { height:66px; }
    .sr-case-hero { min-height:72svh; }
    .sr-case-hero-copy { padding-block:120px 36px; }
    .sr-case-hero h1 { font-size:36px; line-height:1.12; }
    .sr-case-study[dir="rtl"] .sr-case-hero h1 { line-height:1.2; }
    .sr-case-hero-copy>p { font-size:15px; }
    .sr-case-meta { grid-template-columns:1fr; }
    .sr-case-meta>div { min-height:96px; border-bottom:1px solid var(--srj-line); }
    .sr-case-section { padding-block:60px; }
    .sr-case-story .sr-case-big-copy { font-size:22px; line-height:1.5; }
    .sr-case-launch { margin-top:32px; padding-top:24px; }
    .sr-case-live-button { width:100%; font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-j-hero-reel figure { animation:none !important; opacity:0; }
    .sr-j-hero-reel figure:first-child { opacity:1; }
    .sr-j-work-media img,
    .sr-case-live-button,
    .sr-case-live-button i { transition:none; }
}