/* Arabic text direction is separate from the placement of the hero artwork. */
@font-face{font-family:PALWAArabic;src:url('assets/fonts/Cairo-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PALWAArabic;src:url('assets/fonts/Cairo-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:PALWAArabic;src:url('assets/fonts/Cairo-Bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}
.brand,.footer-brand{direction:ltr}
html[lang=ar] body{font-family:PALWAArabic,Arial,sans-serif}
html[lang=ar] .hero h1{letter-spacing:0;line-height:1.35}
html[lang=ar] .hero-description{line-height:1.9;text-align:right}
html[lang=ar] .hero-description>span{text-align:right;text-align-last:auto;white-space:normal}
html[lang=ar] .hero .eyebrow{letter-spacing:0;line-height:1.8}
html[lang=ar] .benefits span{font-size:11px;line-height:1.65;white-space:normal;max-width:none}
html[lang=ar] .categories a{font-size:12px;line-height:1.8}
html[lang=ar] h2,html[lang=ar] h3{letter-spacing:0;line-height:1.5}
html[lang=ar] nav a{font-size:14px}
@media(min-width:901px){
 html[lang=ar] .hero-content{direction:ltr;display:block;text-align:right}
 html[lang=ar] .hero-content>h1,html[lang=ar] .hero-content>.eyebrow,html[lang=ar] .hero-content>.hero-description,html[lang=ar] .hero-content>.actions,html[lang=ar] .hero-content>.benefits{direction:rtl;width:min(470px,100%);max-width:470px;margin-left:0;margin-right:auto}
 html[lang=ar] .hero h1{font-size:clamp(43px,3.2vw,59px)}
 html[lang=ar] .hero-description{font-size:16px;margin-top:12px;margin-bottom:18px}
 html[lang=ar] .hero .eyebrow{font-size:12px}
 html[lang=ar] .hero-content>.benefits{margin-top:18px}
 html[lang=ar] .actions .btn{font-size:14px}
}
@media(min-width:901px) and (max-width:1180px){html[lang=ar] .hero-content>h1,html[lang=ar] .hero-content>.eyebrow,html[lang=ar] .hero-content>.hero-description,html[lang=ar] .hero-content>.actions,html[lang=ar] .hero-content>.benefits{width:min(425px,100%);max-width:425px}html[lang=ar] nav a{font-size:12px}html[lang=ar] .hero h1{font-size:43px}}
@media(max-width:900px){
 html[lang=ar] .hero-content{display:block;direction:rtl;text-align:right}
 html[lang=ar] .hero h1{width:100%;font-size:clamp(30px,6vw,42px);line-height:1.45}
 html[lang=ar] .hero-description{font-size:14px}
 html[lang=ar] .hero .eyebrow{font-size:10px}
 html[lang=ar] .hero-content>.actions,html[lang=ar] .hero-content>.benefits{width:100%}
 html[lang=ar] .benefits span{font-size:9px;line-height:1.6}
 html[lang=ar] .categories a{font-size:10px}
 html[lang=ar] nav a{font-size:14px}
}
@media(max-width:360px){html[lang=ar] .hero h1{font-size:29px}html[lang=ar] .hero .eyebrow{font-size:9px}html[lang=ar] .actions .btn{font-size:11px}html[lang=ar] .benefits span{font-size:8px}}
@media(min-width:901px){html[lang=ar] .hero{direction:ltr}}

/* A lighter Arabic type hierarchy. */
html[lang=ar] .hero h1{font-weight:600;line-height:1.4}
html[lang=ar] h2,html[lang=ar] h3{font-weight:600;line-height:1.5}
html[lang=ar] .hero-description{font-weight:400}
html[lang=ar] .hero .eyebrow,html[lang=ar] nav a,html[lang=ar] .benefits span,html[lang=ar] .categories a{font-weight:600}
@media(min-width:901px){html[lang=ar] .hero h1{font-size:clamp(43px,3.2vw,56px)}}

/* Keep sustainability content in its original left-hand column in both languages. */
html[lang=ar] .sustain>.wrap{direction:ltr}
html[lang=ar] .sustain-copy{direction:rtl;text-align:right;margin-left:0;margin-right:auto}
html[lang=ar] .sustain-icons{direction:ltr}
html[lang=ar] .sustain-icons>div{direction:rtl}

/* Keep the copy and benefit row together inside the white side of the scene. */
@media(min-width:901px){
 .sustain>.wrap{direction:ltr}
 .sustain .sustain-copy,.sustain .sustain-icons{width:46%;max-width:510px;margin-left:0;margin-right:auto}
 .sustain .sustain-icons{margin-top:22px}
 .sustain .sustain-copy p:not(.eyebrow){max-width:none}
 .sustain:before,html[lang=ar] .sustain:before{background:linear-gradient(90deg,#fff 0%,#fff 48%,#ffffffed 53%,#fff0 72%)}
}

/* Nudge the Arabic hero group left while keeping its internal alignment. */
@media(min-width:901px){
 html[lang=ar] .hero-content>h1,html[lang=ar] .hero-content>.eyebrow,html[lang=ar] .hero-content>.hero-description,html[lang=ar] .hero-content>.actions,html[lang=ar] .hero-content>.benefits{transform:translateX(-20px)}
}

/* Align the Arabic copy edge with the rightmost benefit icon. */
@media(min-width:901px){
 html[lang=ar] .hero-content>h1,html[lang=ar] .hero-content>.eyebrow,html[lang=ar] .hero-content>.hero-description,html[lang=ar] .hero-content>.actions{width:min(430.25px,100%);max-width:430.25px}
}
@media(min-width:901px) and (max-width:1180px){
 html[lang=ar] .hero-content>h1,html[lang=ar] .hero-content>.eyebrow,html[lang=ar] .hero-content>.hero-description,html[lang=ar] .hero-content>.actions{width:min(390.875px,100%);max-width:390.875px}
}