.portfolio-hero{background:#fff}
.portfolio-hero-media{height:clamp(420px,45vw,610px);position:relative;overflow:hidden;background:#18323a}
.portfolio-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,30,38,.85),rgba(8,30,38,.32) 56%,transparent)}
.portfolio-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.portfolio-hero-overlay{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:end;padding-bottom:clamp(45px,6vw,85px);color:#fff}
.portfolio-hero-overlay .eyebrow{color:#e4be78}
.portfolio-hero h1{font:600 clamp(42px,5.4vw,78px)/1.08 Manrope,'Noto Sans Arabic',sans-serif;letter-spacing:-2.8px;max-width:860px;margin:16px 0 0;text-wrap:balance}
.portfolio-intro{display:flex;align-items:center;justify-content:space-between;gap:50px;padding-top:31px;padding-bottom:33px;border-bottom:1px solid #dce5e7}
.portfolio-lead{max-width:700px;color:#405b64;font-size:17px;line-height:1.6;margin:0}
.portfolio-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;flex:none}
.portfolio-text-link{font-size:15px;font-weight:700;color:#183c48}
.portfolio-text-link:hover{color:#287eae}
.portfolio-ranges{padding-top:72px;padding-bottom:90px}
.portfolio-section-title{display:flex;align-items:end;justify-content:space-between;gap:40px}
.portfolio-section-title h2{max-width:630px;font-size:clamp(30px,3.7vw,49px)}
.portfolio-jump{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:30px}
.portfolio-jump a{grid-column:span 2;display:flex;align-items:center;gap:14px;min-width:0;min-height:104px;padding:12px;background:#f5f8f9;border:1px solid #dce5e7;color:#233d47;transition:background .2s,border-color .2s,transform .2s}
.portfolio-jump a:nth-child(n+4){grid-column:span 3}
.portfolio-jump a:hover,.portfolio-jump a:focus-visible{background:#eaf3f6;border-color:#8bb8ca;transform:translateY(-2px)}
.portfolio-jump .jump-thumb{width:78px;height:78px;flex:none;display:grid;place-items:center;background:#fff;overflow:hidden}
.portfolio-jump .jump-thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
.portfolio-jump .jump-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
.portfolio-jump .jump-copy small{font:700 12px 'DM Sans',sans-serif;color:#a17c36;direction:ltr;align-self:flex-start}
.portfolio-jump .jump-copy strong{font-size:16px;line-height:1.35;font-weight:700}
.portfolio-jump .jump-arrow{margin-inline-start:auto;align-self:flex-start;font-size:20px;line-height:1;color:#237db4}
.portfolio-chapters{margin-top:55px}
.portfolio-chapter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;min-height:520px;padding:65px 0;border-top:1px solid #dce5e7;scroll-margin-top:95px}
.portfolio-chapter:nth-child(even) .chapter-media{order:2}
.chapter-media{position:relative;height:430px;background:#f1f5f5;overflow:hidden;display:grid;place-items:center}
.chapter-media img{width:100%;height:100%;object-fit:contain;display:block}
.portfolio-chapter:first-child .chapter-media img{padding:35px;background:white}
.portfolio-chapter:nth-child(2) .chapter-media img{object-fit:cover;object-position:center 42%}
.portfolio-chapter:nth-child(3) .chapter-media img{padding:20px;background:white}
.portfolio-chapter:nth-child(4) .chapter-media img{padding:20px;background:white}
.portfolio-chapter:nth-child(5) .chapter-media img{object-fit:contain;background:#eaeaea}
.chapter-media>span{position:absolute;top:17px;inset-inline-start:17px;padding:6px 10px;background:#fff;color:#244650;font:700 12px 'DM Sans',sans-serif;letter-spacing:1px;direction:ltr}
.chapter-kicker,.chapter-list-label{font:700 12px 'DM Sans','Noto Sans Arabic',sans-serif;letter-spacing:1.6px;color:#b58a38}
.chapter-copy h3{font-size:clamp(29px,3.3vw,46px);letter-spacing:-1.8px;line-height:1.16;margin:13px 0 17px}
.chapter-intro{color:#5d7077;font-size:17px;line-height:1.7;max-width:550px}
.chapter-list-label{margin-top:31px;margin-bottom:7px;color:#42616a}
.family-list{border-top:1px solid #e0e8e9}
.family{display:grid;grid-template-columns:minmax(150px,.7fr) 1fr;gap:20px;align-items:start;padding:11px 0;border-bottom:1px solid #e0e8e9;font-size:14px;line-height:1.55}
.family strong{font-weight:700}
.family span{color:#62747b}
.chapter-brands{margin:24px 0 23px;display:flex;align-items:baseline;flex-wrap:wrap;gap:7px 17px}
.chapter-brands>span{font-size:13px;color:#6b7b81}
.chapter-brands>div{display:flex;flex-wrap:wrap;gap:7px}
.chapter-brands bdi{display:inline-block;border:1px solid #d9e3e5;background:#f7fafb;padding:4px 10px;font:600 13px 'DM Sans',sans-serif;color:#234551}
.chapter-link{display:inline-flex;align-items:center;gap:13px;font-size:15px;font-weight:700;color:#237db4;border-bottom:1px solid #237db4;padding-bottom:5px}
.chapter-link:hover{color:#185d88}
.portfolio-footnote{color:#74858b;font-size:13px;margin-top:15px}
.portfolio-sourcing{background:#142f39;color:#fff;padding:75px 0}
.sourcing-grid{display:grid;grid-template-columns:1fr 1fr;gap:11%;align-items:center}
.sourcing-grid h2{font-size:clamp(35px,4vw,55px)}
.sourcing-grid p:not(.eyebrow){font-size:18px;color:#c4d5d9;line-height:1.7;max-width:570px}
.sourcing-grid .button{margin-top:25px}
[dir=rtl] .portfolio-hero h1,[dir=rtl] .chapter-copy h3{letter-spacing:0;line-height:1.42}
[dir=rtl] .portfolio-hero-media::after{background:linear-gradient(270deg,rgba(8,30,38,.85),rgba(8,30,38,.32) 56%,transparent)}
[dir=rtl] .chapter-kicker,[dir=rtl] .chapter-list-label{letter-spacing:0}
nav [aria-current="page"]{color:#287eae}
@media(max-width:1000px){
  .portfolio-intro{display:block}
  .portfolio-actions{margin-top:20px}
  .portfolio-jump{grid-template-columns:1fr 1fr}
  .portfolio-jump a,.portfolio-jump a:nth-child(n+4){grid-column:span 1}
  .portfolio-jump a:last-child{grid-column:span 2}
  .portfolio-chapter{gap:30px}
  .chapter-media{height:365px}
  .family{grid-template-columns:1fr;gap:2px}
}
@media(max-width:680px){
  .portfolio-hero-media{height:390px}
  .portfolio-hero-media img{object-position:54% center}
  .portfolio-hero-media::after{background:linear-gradient(0deg,rgba(8,30,38,.9),rgba(8,30,38,.1) 78%)}
  [dir=rtl] .portfolio-hero-media::after{background:linear-gradient(0deg,rgba(8,30,38,.9),rgba(8,30,38,.1) 78%)}
  .portfolio-hero-overlay{padding-bottom:32px}
  .portfolio-hero h1{font-size:clamp(35px,9vw,48px);letter-spacing:-1.5px}
  .portfolio-intro{padding-top:24px;padding-bottom:27px}
  .portfolio-lead{font-size:16px}
  .portfolio-actions{gap:14px}
  .portfolio-ranges{padding-top:40px;padding-bottom:58px}
  .portfolio-section-title{display:block}
  .portfolio-section-title h2{font-size:32px}
  .portfolio-jump{display:grid;grid-template-columns:1fr;gap:9px;margin-top:22px}
  .portfolio-jump a,.portfolio-jump a:nth-child(n+4),.portfolio-jump a:last-child{grid-column:1;min-height:84px;padding:9px;gap:13px}
  .portfolio-jump .jump-thumb{width:64px;height:64px}
  .portfolio-jump .jump-copy strong{font-size:16px}
  .portfolio-jump .jump-arrow{align-self:center;margin-inline-end:7px}
  .portfolio-chapters{margin-top:35px}
  .portfolio-chapter{display:flex;flex-direction:column;align-items:stretch;gap:25px;min-height:0;padding:47px 0}
  .portfolio-chapter:nth-child(even) .chapter-media{order:0}
  .chapter-media{width:100%;height:auto;aspect-ratio:6/5}
  .chapter-copy h3{font-size:32px}
  .chapter-intro{font-size:16px}
  .family{display:block;padding:12px 0}
  .family strong,.family span{display:block}
  .family span{margin-top:2px}
  .chapter-brands{margin:21px 0}
  .portfolio-sourcing{padding:55px 0}
  .sourcing-grid{grid-template-columns:1fr;gap:20px}
  .sourcing-grid h2{font-size:36px}
  .sourcing-grid p:not(.eyebrow){font-size:16px}
  [dir=rtl] .portfolio-hero h1{font-size:37px}
}
@media(prefers-reduced-motion:reduce){.portfolio-jump{scroll-behavior:auto}}