/* REEF Holding — the group site. REEF's green, held back: deep forest for type and bands, the leaf green only as a
   hairline. White paper, generous space, one editorial serif for titles (Newsreader for Latin, Noto Naskh Arabic for
   Arabic) and Readex Pro for reading, the same reading face as the group's brand sites.
   The memorable thing: real photographs of the square REEF loaf, shown tall and calm. Everything else stays quiet. */
:root{
  --forest:#1D3A0F; --forest-2:#2B5216; --leaf:#8BC34A; --ink:#151D12; --soft:#58614F; --paper:#FFFFFF; --stone:#F4F5F1; --line:#E1E5DA;
  --title:"Newsreader","Noto Naskh Arabic",Georgia,serif; --body:"Readex Pro","Segoe UI",Tahoma,sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px)); color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:300 17px/1.75 var(--body)}
[lang=ar] body,body:lang(ar){line-height:1.9}
:lang(ar){--title:"Noto Naskh Arabic","Newsreader",serif}
img{display:block;max-width:100%;height:auto}
a{color:var(--forest-2);text-underline-offset:.25em;text-decoration-thickness:1px}
h1,h2,h3{margin:0;font-family:var(--title);font-weight:500;line-height:1.2;text-wrap:balance;color:var(--forest)}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{font-weight:600;line-height:1.55}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{font-weight:500}
:focus-visible{outline:2px solid var(--forest-2);outline-offset:3px}
.band :focus-visible,.foot :focus-visible{outline-color:var(--leaf)}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:-9999px}.skip:focus{inset-inline-start:16px;top:12px;z-index:60;background:#fff;padding:8px 14px}

/* links that act as buttons: quiet, ruled */
.link{display:inline-flex;align-items:center;gap:10px;font-weight:400;text-decoration:none;color:var(--forest);border-bottom:1px solid var(--leaf);padding-bottom:3px}
.link:hover{color:var(--forest-2);border-bottom-color:var(--forest-2)}
.link::after{content:"→";transition:transform .2s}
:lang(ar) .link::after{content:"←"}
.link:hover::after{transform:translateX(3px)}
:lang(ar) .link:hover::after{transform:translateX(-3px)}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;background:var(--forest);color:#fff;text-decoration:none;font-weight:400;border-radius:2px}
.btn:hover{background:var(--forest-2);color:#fff}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:78px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--forest)}
.brand img{height:30px;width:auto}
.brand span{font:500 1.05rem var(--title);letter-spacing:.02em;padding-inline-start:14px;border-inline-start:1px solid var(--line)}
#nav{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
#nav ul{display:flex;gap:2px}
#nav ul a{display:block;padding:8px 12px;color:var(--ink);text-decoration:none;font-size:.96rem}
#nav ul a:hover{color:var(--forest-2)}
#nav ul a[aria-current=page]{color:var(--forest);box-shadow:inset 0 -1px 0 var(--leaf)}
.langs{display:flex;gap:2px;margin-inline-start:14px;padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.langs a{padding:6px 7px;font-size:.88rem;color:var(--soft);text-decoration:none}
.langs a[aria-current=true]{color:var(--forest);font-weight:500}
.menu-btn{display:none;margin-inline-start:auto;min-height:44px;padding:0 16px;border:1px solid var(--forest);background:none;color:var(--forest);font:400 .96rem var(--body);cursor:pointer;border-radius:2px}

/* home hero: text and one tall photograph */
.hero{padding-block:72px 88px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.kicker{font-size:.9rem;letter-spacing:.06em;color:var(--soft);margin-bottom:22px;display:flex;align-items:center;gap:12px}
:lang(ar) .kicker{letter-spacing:0}
.kicker::before{content:"";width:36px;height:1px;background:var(--leaf)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.08;letter-spacing:-.01em}
:lang(ar) .hero h1{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.5;letter-spacing:0}
.hero .lead{margin:28px 0 36px;font-size:1.18rem;color:var(--soft);max-width:44ch}
.hero figure{margin:0}
.hero img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* facts: real numbers, set like an annual report */
.facts{border-block:1px solid var(--line)}
.facts ul{display:grid;grid-template-columns:repeat(5,1fr)}
.facts li{padding:30px 22px;border-inline-start:1px solid var(--line)}
.facts li:first-child{border-inline-start:0;padding-inline-start:0}
.facts b{display:block;font:400 clamp(2rem,3.4vw,2.8rem)/1 var(--title);color:var(--forest);margin-bottom:10px;font-variant-numeric:lining-nums}
.facts span{font-size:.92rem;color:var(--soft)}

/* sections */
.sec{padding-block:96px}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.sec-title{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.sec-lead{color:var(--soft);font-size:1.08rem;max-width:52ch}

/* companies */
.cos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.co{padding:40px 36px 44px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.co:first-child{border-inline-start:0;padding-inline-start:0}
.co .logo{height:56px;display:flex;align-items:center}
.co .logo img{max-height:46px;width:auto}
.co .field{font-size:.88rem;letter-spacing:.05em;color:var(--soft)}
:lang(ar) .co .field{letter-spacing:0}
.co h3{font-size:1.7rem}
.co p{color:var(--soft)}
.co .where{font-size:.92rem;color:var(--ink)}
.co .link{margin-top:auto;align-self:flex-start}

/* photo strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* values (and about principles) */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.cols.two{grid-template-columns:repeat(2,1fr);gap:40px 64px}
.cols li{border-top:1px solid var(--leaf);padding-top:22px}
.cols h3{font-size:1.45rem;margin-bottom:10px}
.cols p{color:var(--soft)}

/* deep band */
.band{background:var(--forest);color:#DCE6D2}
.band h2{color:#fff}
.band .sec-lead{color:#C2D1B3}
.band .btn{background:#fff;color:var(--forest)}.band .btn:hover{background:var(--leaf);color:var(--forest)}
.band-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-block:80px}
.band-row .sec-title{margin-bottom:12px}

/* inner pages */
.page-head{padding-block:80px 56px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.4rem,5vw,4rem)}
:lang(ar) .page-head h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.page-head .lead{margin-top:20px;font-size:1.2rem;color:var(--soft);max-width:56ch}
.story{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
.prose{display:grid;gap:1.1em;font-size:1.08rem;max-width:62ch}
.prose p:first-child{font-size:1.25rem;color:var(--ink)}
.story img{width:100%;aspect-ratio:4/5;object-fit:cover}
.quality{display:flex;gap:32px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:36px}
.quality h2{font-size:1.5rem;flex:0 0 auto}
.quality p{color:var(--soft);max-width:60ch}

/* companies page: alternating rows */
.co-rows{display:grid;gap:0}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding-block:72px;border-bottom:1px solid var(--line)}
.co-row:nth-child(even) .co-media{order:2}
.co-media{background:var(--stone);aspect-ratio:5/4;display:grid;place-items:center;overflow:hidden}
.co-media img.photo{width:100%;height:100%;object-fit:cover}
.co-media img.pack{width:62%;height:auto}
.co-media.dark{background:var(--ink)}
.co-media.dark img{width:58%}
.co-row .logo img{max-height:52px;width:auto;margin-bottom:22px}
.co-row h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:6px 0 16px}
.co-row p{color:var(--soft);max-width:52ch}
.co-row .where{margin:18px 0 26px;color:var(--ink)}

/* presence */
.countries{border-top:1px solid var(--line)}
.country{display:grid;grid-template-columns:1.2fr 1.6fr 1fr;gap:24px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.country h2{font-size:1.7rem}
.country .tag{display:inline-block;margin-inline-start:12px;font:400 .78rem var(--body);color:var(--forest-2);border:1px solid var(--leaf);padding:2px 10px;vertical-align:middle}
.country .place{color:var(--soft)}
.country a{justify-self:end;font-variant-numeric:tabular-nums}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.contact dl{margin:0;display:grid;gap:26px}
.contact dt{font-size:.88rem;color:var(--soft);margin-bottom:4px}
.contact dd{margin:0;font-size:1.15rem}
.contact .btn{margin-top:8px}

/* footer */
.foot{background:var(--ink);color:#A9B39F;padding-block:64px 32px;font-size:.94rem}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:40px}
.foot img{height:28px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.92}
.foot h2{font:500 .95rem var(--body);color:#fff;margin-bottom:12px}
.foot ul{display:grid;gap:6px}
.foot a{color:#DCE3D3;text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}
.foot .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:.85rem}

@media (max-width:1080px){
  .menu-btn{display:inline-flex;align-items:center}
  #nav{position:fixed;inset:78px 0 auto;background:#fff;border-bottom:1px solid var(--line);padding:12px var(--gut) 22px;flex-direction:column;align-items:stretch;display:none}
  #nav.open{display:flex}
  #nav ul{flex-direction:column}
  #nav ul a{padding:12px 4px;font-size:1.05rem}
  .langs{margin:12px 0 0;padding:14px 0 0;border-inline-start:0;border-top:1px solid var(--line)}
  html:not(.js) #nav{display:flex;position:static;border:0;padding:0 0 10px;width:100%}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .top .wrap{flex-wrap:wrap}
  .facts ul{grid-template-columns:repeat(3,1fr)}
  .facts li:nth-child(4){border-inline-start:0;padding-inline-start:0}
}
@media (max-width:860px){
  .hero .wrap,.sec-head,.story,.co-row,.contact{grid-template-columns:1fr}
  .hero{padding-block:44px 56px}.hero .wrap{gap:40px}
  .co-row:nth-child(even) .co-media{order:0}
  .co-row{gap:32px;padding-block:52px}
  .cos,.cols{grid-template-columns:1fr}
  .co{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line)}
  .co:first-child{border-top:0}
  .cols.two{grid-template-columns:1fr}
  .country{grid-template-columns:1fr;gap:6px}
  .country a{justify-self:start}
  .foot .wrap{grid-template-columns:1fr}
  .sec{padding-block:64px}
  .sec-head{margin-bottom:36px;gap:16px}
}
@media (max-width:560px){
  body{font-size:16px}
  .facts ul{grid-template-columns:repeat(2,1fr)}
  .facts li{padding:22px 16px}
  .facts li:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .facts li:nth-child(4){border-inline-start:1px solid var(--line);padding-inline-start:16px}
  .strip{grid-template-columns:1fr 1fr}.strip img:nth-child(3){display:none}
  .brand span{display:none}
}