@font-face{
  font-family:"Bahij TheSansArabic";
  src:url("assets/Bahij_TheSansArabic-Light.ttf") format("truetype");
  font-weight:300;
  font-display:swap;
}
:root{--green:#008a33;--deep:#123c28;--orange:#ff8922;--gold:#ffb513;--paper:#fffcf5;--line:#e5e9de}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--deep);font:300 1rem/1.85 "Bahij TheSansArabic",Tahoma,Arial,sans-serif;background:white}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.28em}
a:focus-visible{outline:3px solid currentColor;outline-offset:4px}
h1,h2,h3,p,figure{margin:0}
h2{font-size:clamp(1.9rem,4vw,3.25rem);line-height:1.25;margin:.4rem 0 1rem}
h3{font-size:1.45rem;line-height:1.4}
.wrap{width:min(1150px,calc(100% - 2.5rem));margin-inline:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:.55rem}
.logo img{width:118px;height:auto}
nav{display:flex;flex-wrap:wrap;gap:.55rem clamp(.8rem,3vw,2.2rem)}
header.top>nav{gap:.2rem;padding:.25rem;background:#f1f6f0;border-radius:1rem}
header.top>nav a{padding:.35rem .65rem;border-radius:.7rem}
header.top>nav a:hover{background:white}
nav a,.contact-link,.button{font-weight:bold;text-decoration:none}
nav a:hover{color:var(--green);text-decoration:underline}
.header-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.language-switch{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:2rem;font:700 .75rem/1.2 Arial,sans-serif}
.language-switch a{padding:.5rem .55rem;border-radius:2rem}
.language-switch [aria-current="page"]{background:var(--deep);color:white}
.contact-link{background:var(--deep);color:white;padding:.4rem 1rem;border-radius:2rem}
.skip{position:absolute;top:0;inset-inline-start:1rem;transform:translateY(-120%);background:white;padding:.5rem;z-index:2}
.skip:focus{transform:none}
.hero{position:relative;isolation:isolate;overflow:hidden;width:min(1400px,calc(100% - 2rem));margin:.6rem auto 0;border-radius:clamp(1.25rem,3vw,2.8rem);color:white;background:radial-gradient(ellipse at 100% 0%,#1b6841,transparent 65%),#0d3926}
.hero::before{content:"";position:absolute;inset:0 46% 0 0;z-index:-1;background:linear-gradient(to left,#0d3926,transparent 30%),url(assets/banner.webp) left center / auto 100% no-repeat}
.hero-text{min-height:clamp(450px,44vw,620px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-block:3rem;padding-left:54%}
.hero-text>p{max-width:37ch}
html[lang="ar"] .hero-text{container-type:inline-size}
html[lang="ar"] .hero #intro{white-space:nowrap;font-size:clamp(1.5rem,4vw,4rem);font-size:min(15cqi,5.4rem)}
html[lang="en"] body{font-family:Arial,sans-serif;font-weight:400}
html[lang="en"] .hero h1{font-size:clamp(2.65rem,5.2vw,5.4rem);letter-spacing:-.06em}
.eyebrow{font-size:.86rem;font-weight:bold;color:#006d2b}
.hero .eyebrow,.contact .eyebrow{color:var(--gold)}
.hero .eyebrow{padding:.25rem .8rem;border:1px solid #ffffff40;border-radius:2rem;background:#ffffff10}
.hero-text>p:not(.lead){color:#e1eee6}
h1{font-size:clamp(3rem,7vw,6.4rem);line-height:1.15;margin:.55rem 0}
.lead{font-size:clamp(1.3rem,2.8vw,2.1rem);font-weight:bold;margin-bottom:.5rem}
.button{margin-top:1.5rem;color:#1c301e;background:linear-gradient(120deg,var(--gold),var(--orange));padding:.64rem 1.35rem;border-radius:2rem}
.section{padding-block:clamp(2.6rem,6vw,5.5rem)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1rem,6vw,5rem);align-items:start}
.copy p+p{margin-top:1rem}
.catalog{background:linear-gradient(155deg,#edf7ef,var(--paper) 60%);border-block:1px solid var(--line)}
.brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.card,.water-grid figure,.flavors li{background:white;border:1px solid var(--line);border-radius:1.35rem;overflow:hidden}
.card,.water-grid figure{box-shadow:0 8px 24px #123c280c}
.card{display:flex;flex-direction:column}
.card>img,.juice-cover{width:100%;height:auto;aspect-ratio:1.25;object-fit:cover}
.card>div:last-child{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:1.25rem 1.35rem 1.4rem}
.card p{margin:.4rem 0}
.card a{margin-top:auto;padding:.35rem .85rem;color:#006d2b;background:#edf7ef;border-radius:2rem;font-weight:bold;text-decoration:none}
.card a:hover{text-decoration:underline}
.juice-cover{display:flex;justify-content:center;gap:1rem;padding:1rem;background:radial-gradient(#fff4c2,#ffdb8c)}
.juice-cover img{height:100%;max-width:23%;object-fit:contain}
.product-section{margin-top:2.8rem;scroll-margin-top:1rem}
.product-section>h3{margin-bottom:1rem}
.product-section>h3::before{content:"";display:inline-block;width:.65rem;height:.65rem;margin-inline-end:.6rem;border-radius:50%;background:var(--gold);vertical-align:middle}
.water-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.water-grid img{width:100%;height:clamp(145px,25vw,300px);object-fit:cover;object-position:center}
.water-grid img.brand-image{object-fit:contain;padding:1.2rem}
figcaption{padding:.7rem 1rem;font-weight:bold}
.flavor-slider{position:relative}
.flavor-slider:has(.flavor-controls:not([hidden])){padding-inline:3.1rem}
.flavor-controls:not([hidden]){display:contents}
.flavor-controls button,#flavor-preview button{font:inherit;font-weight:bold;color:var(--deep);background:white;border:1px solid var(--line);border-radius:2rem;padding:.35rem .9rem;cursor:pointer}
.flavor-controls button{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;padding:0;font:700 1.25rem/1 Arial,sans-serif;background:var(--deep);color:white}
.flavor-controls [data-step="-1"]{inset-inline-start:0}
.flavor-controls [data-step="1"]{inset-inline-end:0}
.flavor-controls button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.flavor-controls button:disabled{opacity:.5;cursor:default}
.flavors{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(124px,22vw,180px);gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .25rem .9rem;margin:0;list-style:none}
.flavors li{text-align:center;scroll-snap-align:start}
.flavor-card{display:block;height:100%;padding:.8rem .35rem;text-decoration:none;cursor:zoom-in}
.flavor-card:focus-visible{outline-offset:-4px}
.flavors img{height:130px;width:100%;object-fit:contain;margin-bottom:.6rem}
.flavors small{display:block;color:#516257}
#flavor-preview{width:min(92vw,450px);max-height:94vh;border:0;border-radius:1rem;padding:1rem 1.4rem;text-align:center;color:var(--deep);background:var(--paper)}
#flavor-preview::backdrop{background:#0d271cd9}
#flavor-preview form{text-align:end}
#flavor-preview h2{font-size:1.65rem}
#flavor-preview img{margin-inline:auto;width:100%;height:min(62vh,570px);object-fit:contain}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.video-grid figure{border:1px solid var(--line);border-radius:1.35rem;overflow:hidden;background:#10291d;color:white}
.video-grid figure:first-child{grid-column:1/-1}
.video-grid video{display:block;width:100%;aspect-ratio:16/9;background:#10291d;object-fit:contain}
.video-grid figure:first-child video{max-height:62vh}
.exhibitions{background:#edf7ef;border-block:1px solid var(--line)}
.exhibition-list{display:grid;gap:1rem}
.exhibition-card{min-width:0;background:white;border:1px solid var(--line);border-radius:1.35rem;padding:clamp(1rem,3vw,2rem)}
.exhibition-card>p{white-space:pre-wrap;margin:.5rem 0 1rem;overflow-wrap:anywhere}
.exhibition-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.8rem;margin-block:1rem}
.exhibition-photos img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f2f6f1;border-radius:.8rem}
.exhibition-photos figcaption{padding:.35rem 0}
.exhibition-card video{display:block;width:100%;max-height:60vh;background:#10291d;border-radius:.8rem}
.checklist{margin:0;padding:0;list-style:none}
.checklist li{display:flex;gap:.8rem;align-items:baseline;padding:.75rem 0;border-block-end:1px solid var(--line)}
.checklist li::before{content:"";flex:0 0 .5rem;height:.5rem;border-radius:50%;background:var(--green)}
.quality{background:#ecf7ef;border-block:1px solid #d9ebdf}
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.values article{border:1px solid var(--line);border-radius:1.35rem;background:var(--paper);padding:clamp(1.35rem,3vw,2.25rem)}
.values article:nth-child(2){background:#edf7ef}
.values h2{font-size:1.65rem}
.agency{background:linear-gradient(#edf7ef,var(--paper) 55%);border-block-start:1px solid var(--line)}
#agency-popup{width:min(940px,calc(100% - 1.25rem));max-width:none;max-height:calc(100% - 1.25rem);margin:auto;padding:0;border:0;border-radius:1.25rem;color:var(--deep);background:white;overscroll-behavior:contain}
#agency-popup::backdrop{background:#0d271cbb}
html:has(#agency-popup[open]){overflow:hidden}
.agency-close{position:sticky;z-index:1;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:white;font-weight:bold}
.agency-close button{flex:none;border:1px solid var(--line);border-radius:2rem;padding:.3rem .8rem;background:var(--deep);color:white;font:inherit;cursor:pointer}
.agency-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch;gap:clamp(1.25rem,4vw,3rem);padding-block:clamp(2rem,6vw,5rem)}
.agency-copy{align-self:center}
.agency h2,.agency-details p{overflow-wrap:anywhere}
.agency #agency-title{font-size:clamp(1.8rem,4vw,3rem)}
.agency-details p{white-space:pre-wrap}
.agency-details .button{display:inline-flex;align-items:center;gap:.5rem}
.agency-mark{display:grid;place-content:center;justify-items:center;min-height:15rem;padding:1rem;border:1px solid var(--line);border-radius:1.8rem;background:#f5f5f5;text-align:center}
.agency-mark img{width:min(100%,460px);height:auto}
.agency-mark span{color:var(--deep);font-weight:bold}
.agency-topics{padding-top:0}
.agency-topics>p{margin-bottom:1rem}
.agency-topics details{margin:.6rem 0;padding:.9rem 1rem;border:1px solid var(--line);border-radius:.85rem;background:white}
.agency-topics details[open]{border-color:#82b393}
.agency-topics summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;font-weight:bold;list-style:none}
.agency-topics summary::-webkit-details-marker{display:none}
.agency-topics summary::after{content:"+" / "";color:var(--green);font:700 1.3rem/1 Arial,sans-serif}
.agency-topics details[open] summary::after{content:"−" / ""}
.agency-topics details p{padding-top:.6rem}
.agency a:hover,.agency summary:hover{color:#006d2b}
@media(max-width:720px){.agency-hero{grid-template-columns:1fr}.agency-mark{min-height:10rem}}
@media(prefers-reduced-motion:no-preference){
  .agency-topics details[open] p{animation:agency-reveal .24s ease-out}
  @keyframes agency-reveal{from{opacity:0;translate:0 .35rem}to{opacity:1;translate:0 0}}
}
.contact{background:radial-gradient(ellipse at 100% 0%,#1b6841,transparent 70%),var(--deep);color:white}
address{font-style:normal;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
address div{border-top:1px solid #ffffff60;padding-top:.55rem}
address span,address a,address strong{display:block;overflow-wrap:anywhere}
address span{color:#ffdf92}
footer.top{padding-block:1rem}
@media(max-width:720px){
  .top{justify-content:space-between}.top>nav{order:3;flex-basis:100%}
  .hero{width:calc(100% - 1rem)}
  .hero::before{inset:0 0 auto;height:235px;background:linear-gradient(0deg,#0d3926,transparent 70%),url(assets/banner.webp) left center / auto 100% no-repeat}
  .hero-text{min-height:0;padding:12rem 0 2rem}
  .split,.brands{grid-template-columns:1fr}.card>img,.juice-cover{max-height:280px}
  .video-grid{grid-template-columns:1fr}
}
@media(max-width:400px){.values,address{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
  .reveal-ready{transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.3,1)}
  .reveal-pending:not(:focus-within):not(:target){opacity:0;translate:0 22px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .card,.flavors li,.button{transition:transform .22s ease,box-shadow .22s ease}
  .card:hover,.flavors li:hover,.button:hover{transform:translateY(-4px);box-shadow:0 12px 24px #123c281a}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}