.portfolio-main{padding-top:150px;padding-bottom:100px;max-width:1800px;margin:auto}
.portfolio-page .header{z-index:10}
.portfolio-intro,.case-intro{margin-bottom:64px}
.portfolio-intro h1{font-size:clamp(58px,10vw,160px);line-height:1;letter-spacing:-.035em;text-transform:uppercase;max-width:1200px;margin:70px 0 30px}
.portfolio-lead{font-size:clamp(18px,2vw,28px);line-height:1.5;max-width:650px;color:var(--muted)}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px 32px}
.portfolio-card{display:block;min-width:0}
.card-image{aspect-ratio:16/10;background:#30302e;overflow:hidden}
.card-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.portfolio-card:hover img{transform:scale(1.035)}
.card-caption{display:grid;grid-template-columns:30px 1fr 32px;align-items:center;gap:14px;margin-top:24px}
.card-caption h2{font-size:clamp(26px,3vw,50px);line-height:1.1;text-transform:uppercase;letter-spacing:-.02em}
.card-caption>.arrow-icon{font-size:30px;justify-self:end}
.card-meta{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-inline-start:44px;color:var(--muted);font-size:14px;line-height:1.6}
.eyebrow{display:block;font-size:12px;text-transform:uppercase;color:var(--muted);line-height:1.5}
.case-title{font-size:clamp(58px,10vw,160px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;margin:65px 0 50px;overflow-wrap:break-word}
.case-meta{display:grid;grid-template-columns:1fr .5fr 2fr;gap:30px;border-top:1px solid var(--line);padding-top:25px}
.case-meta p{font-size:18px;line-height:1.6;margin-top:12px}
.case-status{display:inline-block;margin-top:24px;padding:8px 14px;border:1px solid var(--line);border-radius:30px;font-size:13px}
.case-media{margin:0}
.case-media video{display:block;width:100%;height:auto;object-fit:contain;background:transparent}
.case-media figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font-size:12px;color:var(--muted);text-transform:uppercase;line-height:1.5}
.case-story{display:grid;grid-template-columns:1fr 1fr;gap:10vw;padding:100px 0 120px}
.case-story h2{font-size:clamp(34px,4.5vw,76px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase}
.case-story p{font-size:20px;line-height:1.6;max-width:630px}
.case-story h3{margin:40px 0 16px}
.case-next{border-top:1px solid var(--line);padding-top:32px}
.case-next>a:first-of-type{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:28px 0 35px;font-size:clamp(36px,7vw,110px);line-height:1.1;text-transform:uppercase}
.case-next>a:first-of-type:hover{color:var(--accent)}
.case-next .arrow-icon{font-size:.7em}
.portfolio-contact{background:var(--ink);color:var(--bg);padding-top:55px;padding-bottom:60px}
.portfolio-contact .eyebrow{color:inherit}
.portfolio-contact-link{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:24px;font-size:clamp(32px,5vw,80px);line-height:1.3}
.portfolio-contact-link .arrow-icon{flex-shrink:0}
html[lang=ar] .portfolio-intro h1,html[lang=ar] .case-story h2{letter-spacing:0;line-height:1.5}
html[lang=ar] .case-story p{line-height:1.9}
html[lang=ar] .case-title,html[lang=ar] .card-caption h2,html[lang=ar] .case-next [lang=en]{font-family:Ataero,Arial,sans-serif;text-align:right;line-height:1.1;text-transform:uppercase;letter-spacing:-.02em}
@media(max-width:900px){.portfolio-main{padding-top:125px}.case-meta{grid-template-columns:1fr 1fr}.case-meta>div:last-child{grid-column:1/-1}.case-story{gap:6vw}.case-story p{font-size:18px}.card-meta{padding-inline-start:0;flex-wrap:wrap}.card-caption{gap:10px;grid-template-columns:20px 1fr 24px}}
@media(max-width:600px){.portfolio-main{padding-top:115px;padding-bottom:65px}.portfolio-grid{grid-template-columns:1fr;gap:45px}.portfolio-intro,.case-intro{margin-bottom:35px}.portfolio-intro h1{margin-top:40px;font-size:15vw}.card-caption h2{font-size:9vw}.case-title{font-size:16vw;margin:42px 0 35px}.case-meta{gap:20px}.case-meta p{font-size:16px;margin-top:8px}.case-story{grid-template-columns:1fr;gap:28px;padding:55px 0 65px}.case-story h2{font-size:10vw}.case-story p{font-size:17px}.case-media figcaption{font-size:10px}.case-next>a:first-of-type{font-size:12vw;gap:15px}.portfolio-contact{padding-top:38px;padding-bottom:42px}.portfolio-contact-link{font-size:9vw}.card-meta{font-size:13px}}

/* Continuous wallpaper follows the full document, including long mobile pages. */
.portfolio-page{position:relative;isolation:isolate}
.portfolio-page>bahr-wallpaper{z-index:-1;mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.3) 30%,rgba(0,0,0,.2) 65%,#000);-webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.3) 30%,rgba(0,0,0,.2) 65%,#000)}
html[data-theme=dark] .portfolio-page{--bg:#08151e;--line:#2c3b44}
html[data-theme=light] .portfolio-page{--wallpaper-stroke:#4f6876;--wallpaper-opacity:.2;--wallpaper-accent:#24559b;--wallpaper-current-opacity:.4}
.portfolio-page .footer{background:transparent}
.portfolio-page .portfolio-contact{background:color-mix(in srgb,var(--ink) 94%,transparent)}
@media(max-width:600px){.portfolio-page>bahr-wallpaper{--wallpaper-opacity:.22;--wallpaper-current-opacity:.5;mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.22) 35%,rgba(0,0,0,.22) 65%,#000);-webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.22) 35%,rgba(0,0,0,.22) 65%,#000)}}