/* REEF — white paper, the logo's leaf green, and one motif: the loaf itself.
   A REEF loaf is a thin square pierced by a grid of holes; every product sits on that square ("loaf" tiles).
   One family (Readex Pro) covers English, French and Arabic. Logical properties only, so RTL needs no overrides. */
:root{
  --leaf:#8BC34A; --leaf-ink:#3B6716; --leaf-deep:#264A0C; --leaf-hover:#2F5A10;
  --ink:#1B2416; --soft:#55604C; --paper:#FFFFFF; --crumb:#F1F6E8; --hole:#D7E6C0; --line:#E2E8D8;
  --on-deep:#E9F1DD; --on-deep-soft:#B7CB9C;
  --font:"Readex Pro","Segoe UI",Tahoma,sans-serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --ease:cubic-bezier(.2,.8,.2,1);
  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:400 17px/1.7 var(--font)}
[dir=rtl] body{line-height:1.85}
::selection{background:var(--leaf);color:var(--ink)}
img{display:block;max-width:100%;height:auto}
a{color:var(--leaf-ink);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--leaf-hover)}
h1,h2,h3{font-weight:600;line-height:1.2;margin:0;text-wrap:balance;letter-spacing:-.01em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0;line-height:1.4}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--leaf-ink);outline-offset:3px;border-radius:3px}
.deep :focus-visible,.foot :focus-visible{outline-color:var(--leaf)}
.wrap{max-width:1180px;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:var(--paper);padding:8px 14px}
.muted{color:var(--soft)}

/* the loaf: a square with a grid of baked holes */
.loaf{aspect-ratio:1;border-radius:6%;background-color:var(--crumb);
  background-image:radial-gradient(circle,var(--hole) 0 2.2px,transparent 2.8px);background-size:22px 22px;background-position:11px 11px;
  display:grid;place-items:center;overflow:hidden}
.loaf img{width:84%;height:84%;object-fit:contain}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:12px;
  font:500 1rem var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-leaf{background:var(--leaf-ink);color:#fff}.btn-leaf:hover{background:var(--leaf-deep);color:#fff}
.btn-line{border-color:var(--leaf-ink);color:var(--leaf-ink)}.btn-line:hover{background:var(--leaf-ink);color:#fff}
.btn-light{background:var(--leaf);color:var(--ink)}.btn-light:hover{background:#A3D26A;color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:progress}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{display:block;flex:none}
.brand img{height:40px;width:auto}
#nav{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
#nav ul{display:flex}
#nav ul a{display:block;padding:8px 10px;color:var(--ink);text-decoration:none;font-size:.97rem;border-radius:8px;white-space:nowrap}
#nav ul a:hover{background:var(--crumb)}
#nav ul a[aria-current=page]{color:var(--leaf-ink);box-shadow:inset 0 -2px 0 var(--leaf)}
.langs{display:flex;gap:2px;margin-inline-start:8px;padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.langs a{padding:6px 8px;font-size:.92rem;color:var(--soft);text-decoration:none;border-radius:6px}
.langs a:hover{background:var(--crumb);color:var(--ink)}
.langs a[aria-current=true]{color:var(--ink);font-weight:600}
.menu-btn{display:none;margin-inline-start:auto;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);background:none;font:500 .97rem var(--font);border-radius:10px;cursor:pointer;color:var(--ink)}

/* page heads */
.page-head{padding:44px 0 34px;border-bottom:1px solid var(--line)}
.crumbs{font-size:.9rem;color:var(--soft);margin-bottom:14px}
.crumbs a{color:var(--soft)}
.page-head h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.page-head .lead{margin-top:14px;font-size:1.12rem;color:var(--soft);max-width:60ch}
.sec{padding-block:64px}
.sec-title{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:12px}
.sec-lead{color:var(--soft);max-width:60ch;margin-bottom:32px}
.sec-row{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px}
.sec-row .sec-title{margin:0}

/* home hero */
.hero{padding:48px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.025em}
[dir=rtl] .hero h1{line-height:1.3;letter-spacing:0}
.hero .lead{margin:22px 0 30px;font-size:1.18rem;color:var(--soft);max-width:44ch}
.hero .loaf{max-width:520px;width:100%;justify-self:end}
.hero .loaf img{width:78%;height:78%}
.note{background:var(--crumb);border-block:1px solid var(--line);padding:14px 0;font-size:.95rem;color:var(--soft)}
.note p{max-width:none}

/* range */
.range{display:grid;gap:56px}
.fam{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:36px;align-items:start}
.fam h3{font-size:1.5rem;margin-bottom:8px}
.fam p{color:var(--soft);margin-bottom:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px}
.tile{display:block;text-decoration:none;color:var(--ink)}
.tile .loaf{transition:background-color .2s var(--ease)}
.tile:hover .loaf{background-color:#E8F1D9}
.tile b{display:block;margin-top:10px;font-weight:500;font-size:.98rem;line-height:1.35}
.tile:hover b{color:var(--leaf-ink)}

/* the deep band: why it looks like this */
.deep{background:var(--leaf-deep);color:var(--on-deep)}
.deep .sec-title{color:#fff}
.deep a{color:var(--leaf)}
.diff{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:8px}
.diff li{border-top:2px solid var(--leaf);padding-top:16px}
.diff b{display:block;color:#fff;font-weight:600;font-size:1.1rem;margin-bottom:6px}
.diff span{color:var(--on-deep-soft);font-size:.96rem}

/* calories: a real comparison, so bars */
.cal{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.bars{display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:9.5em 1fr 2.5em;gap:12px;align-items:center;font-size:.96rem}
.bars i{display:block;height:14px;border-radius:3px;background:#5F9A2C}
.bars b{font-weight:600;font-variant-numeric:tabular-nums;text-align:end}

/* story + voices */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story .big{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.5;margin-bottom:18px}
.voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.voice{border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:16px}
.voice blockquote{margin:0;font-size:1rem}
.voice figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.voice img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.voice figcaption b{display:block;font-weight:600;font-size:.96rem}
.voice figcaption span{display:block;font-size:.88rem;color:var(--soft);direction:ltr;text-align:start}
.voice [lang=ar]{font-family:var(--font)}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.post-card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.post-card img{aspect-ratio:16/10;object-fit:cover;border-radius:10px;width:100%;background:var(--crumb)}
.post-card b{font-weight:600;font-size:1.08rem;line-height:1.35}
.post-card:hover b{color:var(--leaf-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.post-card small{color:var(--soft);font-size:.88rem}

/* where to buy */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:22px}
.app{border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px}
.app b{font-size:1.3rem;font-weight:600}
.app .btn{align-self:start;margin-top:8px}

/* product page */
.prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"shots head" "shots body";column-gap:56px;row-gap:24px;align-items:start;padding:40px 0 64px}
.prod-head{grid-area:head}.shots{grid-area:shots}.prod-body{grid-area:body}
.shots{position:sticky;top:96px;display:grid;gap:14px}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumbs li{flex:none}
.thumbs a{display:block;width:72px;height:72px;border:1.5px solid var(--line);border-radius:10px;background:var(--crumb);padding:4px}
.thumbs a:hover{border-color:var(--leaf)}
.thumbs a[aria-current=true]{border-color:var(--leaf-ink);box-shadow:0 0 0 1px var(--leaf-ink)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.prod h1{font-size:clamp(2rem,4vw,2.9rem);margin:6px 0 12px}
.prod .cat{font-size:.95rem;color:var(--soft)}
.prod .lead{font-size:1.15rem;margin-bottom:28px}
.facts{display:grid;gap:22px}
.facts h2{font-size:1.05rem;font-weight:600;margin-bottom:6px}
.facts ul{display:grid;gap:6px}
.facts li{padding-inline-start:18px;position:relative}
.facts li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--leaf)}
.facts ul.free{display:flex;flex-wrap:wrap;gap:8px}
.facts ul.free li{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--crumb);font-size:.93rem}
.facts ul.free li::before{display:none}
.allergen{border:1.5px solid var(--leaf-ink);background:var(--crumb);padding:12px 16px;border-radius:10px}
.allergen p+p{margin-top:4px}

/* text pages */
.prose{max-width:70ch}
.prose>*+*{margin-top:1em}
.prose h2{font-size:1.5rem;margin-top:1.6em}
.prose h3{font-size:1.2rem;margin-top:1.4em}
.prose ul{list-style:disc;padding-inline-start:1.3em}
.prose ol{list-style:decimal;padding-inline-start:1.3em}
.prose li+li{margin-top:.35em}
.prose img{border-radius:10px;margin-block:1.4em;max-height:480px;width:auto}
.prose>img:first-child{margin-top:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px}
.split h2{font-size:1.25rem;margin-bottom:8px}
.split p{color:var(--soft)}
.checks li{padding-inline-start:20px;position:relative;margin-top:6px;color:var(--soft)}
.checks li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--leaf)}
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:500;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--leaf-ink);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding-bottom:20px;display:grid;gap:10px;color:var(--soft)}
.article-meta{color:var(--soft);font-size:.95rem;margin-top:12px}
.flash{display:none;padding:10px 14px;border-radius:10px;font-weight:500}
.flash:target{display:block}
.flash.ok{background:var(--crumb);color:var(--leaf-ink)}
.flash.err{background:#FBEAE8;color:#B3261E}
details.more{margin-top:24px}
details.more>summary{cursor:pointer;display:inline-flex;min-height:46px;align-items:center;padding:0 20px;border:1.5px solid var(--leaf-ink);border-radius:12px;color:var(--leaf-ink);font-weight:500;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary{margin-bottom:22px}
.next{margin-top:20px;font-weight:500}
.orig{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.95rem;color:var(--soft)}

/* videos: a thumbnail until you press play */
.vgroup{margin-top:44px}
.vgroup h2{font-size:1.4rem}
.vgroup p{color:var(--soft);margin:4px 0 18px}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.vid{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--ink)}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.vid .play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .play span{position:relative;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.vid .play span::before{content:"";margin-inline-start:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--leaf-deep)}
[dir=rtl] .vid .play span::before{margin-inline-start:0;margin-inline-end:5px;transform:scaleX(-1)}
.vid .play:focus-visible span{outline:3px solid var(--leaf);outline-offset:3px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;padding:44px 0 72px}
.form{display:grid;gap:16px}
.form h2,.c-list h2{font-size:1.3rem}
.form label{display:grid;gap:6px;font-weight:500}
.form label>span:first-child{display:block}
.form small{font-weight:400;color:var(--soft)}
.form input,.form select,.form textarea{font:inherit;padding:12px 14px;border:1.5px solid #C9D3BC;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--leaf-ink);box-shadow:0 0 0 3px rgba(139,195,74,.35)}
.form [aria-invalid=true]{border-color:#B3261E}
.field-err{color:#B3261E;font-size:.9rem;font-weight:400;min-height:0}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .btn{justify-self:start}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px}
.form .note-line{color:var(--soft);font-size:.95rem}
.form .note-line.ok{color:var(--leaf-ink);font-weight:500}
.form .note-line.err{color:#B3261E}
.c-list{display:grid;gap:22px;align-content:start}
.c-list h3{font-size:.95rem;font-weight:500;color:var(--soft);margin-bottom:4px}
.c-list ul{display:grid;gap:4px}
.c-list ul{display:grid;grid-template-columns:max-content auto;column-gap:1em;row-gap:4px;justify-content:start}
.c-list li{display:contents}
.c-list li span{color:var(--soft)}

/* footer */
.foot{background:var(--leaf-deep);color:var(--on-deep-soft);padding:56px 0 28px;margin-top:0;font-size:.96rem}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot h2{font-size:1rem;color:#fff;font-weight:600;margin-bottom:12px}
.foot ul{display:grid;gap:6px}
.foot a{color:var(--on-deep);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .logo{background:#fff;border-radius:10px;padding:10px 14px;display:inline-block;margin-bottom:14px}
.foot .logo img{height:34px;width:auto}
.foot .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.88rem}
.cta-band{background:var(--crumb);border-top:1px solid var(--line);padding:48px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.cta-band p{color:var(--soft);margin-top:6px}

/* responsive */
@media (max-width:1080px){
  .menu-btn{display:inline-flex;align-items:center}
  #nav{position:fixed;inset:72px 0 auto;background:var(--paper);border-bottom:1px solid var(--line);padding:12px var(--gut) 20px;
    flex-direction:column;align-items:stretch;display:none;max-height:calc(100dvh - 72px);overflow:auto}
  #nav.open{display:flex}
  #nav ul{flex-direction:column}
  #nav ul a{padding:12px 6px;font-size:1.05rem}
  .langs{margin:10px 0 0;padding:12px 0 0;border-inline-start:0;border-top:1px solid var(--line)}
  .langs a{padding:8px 12px}
  body.menu-open{overflow:hidden}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) #nav{display:flex;position:static;border:0;padding:8px 0 4px;max-height:none;width:100%}
  html:not(.js) .top .wrap{flex-wrap:wrap}
  .diff{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hero .wrap,.story,.cal,.fam,.prod,.contact,.split{grid-template-columns:1fr}
  .hero{padding-top:28px}
  .hero .wrap{gap:32px}
  .hero .loaf{justify-self:center;max-width:420px}
  .prod{grid-template-areas:"head" "shots" "body"}
  .shots{position:static;max-width:440px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .apps{grid-template-columns:1fr}
  .sec{padding-block:48px}
}
@media (max-width:560px){
  body{font-size:16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .diff{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .bars li{grid-template-columns:7.5em 1fr 2.2em}
  .brand img{height:34px}
  .sec-row{flex-direction:column;align-items:start}
}
@media print{.top,.foot,.cta-band,.note{display:none}}