@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

/* One shared grid and spacing system for the complete bilingual experience. */
:root {
  --cream:#f5f0e5; --ink:#233b2c; --muted:#596454; --line:#d3d4c4;
  --soft:#e9e9dc; --citrus:#e8bf56; --focus:#81550b;
  --gutter:clamp(1.25rem,4vw,4rem);
  --page-inset:max(var(--gutter),calc((100% - 75rem)/2));
  --section-space:clamp(3.5rem,7vw,6rem);
  --column-gap:clamp(2rem,5vw,5rem);
}
*{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;background:var(--cream);color:var(--ink);font:1.0625rem/1.65 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow-wrap:break-word}
h1,h2,h3,p,figure{margin:0}
a{color:inherit}button{font:inherit}a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(35,59,44,.12)}
button{cursor:pointer}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
h1,h2,.growing-cycle{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(3.5rem,6.5vw,6.5rem);line-height:1.04}
h2{font-size:clamp(2.5rem,4.5vw,4.25rem);line-height:1.08}
h3{font-size:1.25rem;line-height:1.4;font-weight:600;text-wrap:balance}
em{font-weight:400}p+p{margin-block-start:1rem}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}bdi{unicode-bidi:isolate}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;inset-block-start:-100px;inset-inline-start:1rem;padding:.75rem;background:var(--cream);z-index:10}
.skip:focus{inset-block-start:1rem}

/* The mark and the controls share a single optical centre line. */
.header{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(0,2fr) auto;align-items:center;gap:1.5rem;padding:1rem var(--page-inset);border-block-end:1px solid var(--line)}
.identity{display:inline-flex;align-items:center;min-width:0;min-height:44px;max-width:100%;text-decoration:none;justify-self:start}
.identity picture{display:block;max-width:100%}
.brand-lockup{width:13rem;max-width:100%;height:auto;aspect-ratio:878.669 / 264}
.header-actions{grid-column:3;grid-row:1;display:flex;align-items:center;gap:.5rem;min-width:0}
.header nav{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:end;flex-wrap:wrap;gap:.25rem .5rem;min-width:0}
.header nav a{display:flex;align-items:center;min-height:44px;padding:.5rem .625rem;border-radius:6px;text-decoration:none;font-size:.875rem;line-height:1.4}
.header nav a:hover{background:var(--soft)}
.header nav .partner-link{font-weight:600}
.language-switch{display:flex;align-items:center;direction:ltr}
.language-switch button{min-height:44px;min-width:44px;padding:.5rem .75rem;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:.875rem;font-weight:600;line-height:1.4}
.language-switch button[lang="ar"]{font-family:'Noto Sans Arabic',Tahoma,sans-serif}
/* Show the destination language, not two competing selected-state buttons. */
.language-switch button[aria-pressed="true"]{display:none}
.language-switch button:hover,.menu-toggle:hover{background:var(--soft)}
.language-switch button:active,.menu-toggle:active{background:#dce0d0}
.menu-toggle{display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.5rem;border:0;border-radius:8px;background:transparent;color:var(--ink)}
.menu-close-icon{display:none}.menu-is-open .menu-open-icon{display:none}.menu-is-open .menu-close-icon{display:block}
html:not(.interactive-ready) .language-switch{display:none}

/* Aligned content edges; the drink image is the principal visual accent. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--column-gap);padding:clamp(2.5rem,5vw,4rem) var(--page-inset)}
.hero-copy{min-width:0;max-width:34rem}
.eyebrow{margin-block-end:1rem;font-size:.875rem;font-weight:600;line-height:1.5;letter-spacing:.065em;text-transform:uppercase}
.intro{font-size:1.125rem;line-height:1.65;margin-block-start:1.5rem;max-width:34rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.5rem;margin-block-start:1.5rem;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--cream);font-size:.9375rem;line-height:1.4;text-align:center;text-decoration:none}
.button:hover{background:#3c5944}.button:active{background:#15271c}
.status{margin-block-start:1.5rem;max-width:33rem;font-size:.8125rem;line-height:1.65;color:var(--muted)}
.hero-image{min-width:0}
.hero-image img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:48% center;border-radius:1rem}
.hero-image figcaption{margin-block-start:.75rem;font-size:.75rem;line-height:1.5;color:var(--muted)}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding:1.5rem var(--page-inset);border-block:1px solid var(--line);font-size:.875rem;line-height:1.5}
.section{padding:var(--section-space) var(--page-inset);scroll-margin-top:1.5rem}
.idea,.visits,.reuse,.growing,.partners{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--column-gap);align-items:start}
.section>div{min-width:0}.prose{max-width:36rem}.prose p,.growing-story p:not(.growing-cycle),.partner-details p{max-width:38rem}
.visits{background:var(--soft)}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.tabs button{flex:1 1 7rem;min-width:0;min-height:48px;border:1px solid #697364;border-radius:8px;padding:.75rem .5rem;font-size:.875rem;line-height:1.4;color:var(--ink);background:transparent}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--cream);font-weight:600;box-shadow:inset 0 -3px 0 var(--citrus)}
.tabs button:active{background:#d3dac8}.tabs button[aria-selected="true"]:active{background:#15271c}
.visit-body article{padding-block-start:1.5rem}
.visit-body article h3{font-size:1.5rem;margin-block-end:1rem}
.fine{font-size:.875rem;line-height:1.65;color:var(--muted)}
.menu>.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--column-gap);align-items:end}
.menu>.section-heading>p{max-width:34rem}
.menu-list{margin-block-start:2.5rem;border-block-start:1px solid var(--line)}
.drink{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding-block:1.5rem;border-block-end:1px solid var(--line)}
.drink h3{font:400 clamp(1.5rem,2.5vw,2rem)/1.25 'Libre Caslon Display',Georgia,serif;letter-spacing:-.02em}
.drink>span{font-size:.8125rem;line-height:1.5;color:var(--muted);text-align:end}
.menu-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--column-gap);margin-block-start:1.5rem}.menu-note p+p{margin:0}
.reuse{background:var(--ink);color:var(--cream)}
.reuse-title>p:not(.eyebrow){margin-block-start:1.5rem;max-width:30rem;font-size:1.125rem}
.pill{display:inline-block;margin-block-start:1.5rem;padding:.5rem 1rem;border:1px solid #78917b;border-radius:2rem;font-size:.8125rem;line-height:1.5}
.steps>div{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:1.25rem;padding-block:1.5rem;border-block-start:1px solid #57715d}
.steps>div>span{font-size:.875rem;color:var(--citrus);line-height:1.9}
.steps h3{margin-block-end:.5rem}.steps p{color:#dde2d7}.steps>.fine{color:#c2cbbf;margin-block-start:1rem}
.reuse :focus-visible{outline-color:var(--citrus)}
.growing-cycle{font-size:clamp(2rem,3.5vw,3rem);line-height:1.15;margin-block-end:1.5rem}
.partners{border-block-start:1px solid var(--line)}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-block-start:1.5rem}
.contact-actions .button{margin-block-start:0}
footer .contact-address{font-size:.9375rem;color:var(--ink)}
.contact-address a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.2em;overflow-wrap:anywhere}
.light{background:transparent;color:var(--ink)}.light:hover{background:var(--soft)}.light:active{background:#dce0d0}
.partner-details section+section{margin-block-start:1.5rem}.partner-details h3{font-size:1.0625rem;margin-block-end:.5rem}
footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:var(--column-gap);padding:2rem var(--page-inset);border-block-start:1px solid var(--line)}
footer .brand-lockup{width:11rem}footer p{font-size:.8125rem;line-height:1.65;color:var(--muted)}
html:not(.interactive-ready) .tabs,html:not(.interactive-ready) #print-button{display:none}
html:not(.interactive-ready) .visit-body article{margin-block-end:1.5rem}

/* Logical dimensions mirror the composition without mirroring brand artwork. */
html[lang="ar"] body{font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif;line-height:1.9}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] .drink h3,html[lang="ar"] .growing-cycle{font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif;line-height:1.45;letter-spacing:0;font-weight:500}
html[lang="ar"] h1{font-size:clamp(2.75rem,5vw,5rem)}
html[lang="ar"] h2{font-size:clamp(2rem,3.5vw,3.25rem)}
html[lang="ar"] h3{line-height:1.7}
html[lang="ar"] em{font-style:normal}
html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none}
html[lang="ar"] .intro,html[lang="ar"] .fine,html[lang="ar"] .status{line-height:1.85}
html[lang="ar"] .drink h3{font-size:clamp(1.25rem,2.25vw,1.75rem)}
html[lang="ar"] .growing-cycle{font-size:clamp(1.75rem,3vw,2.5rem)}

@media(max-width:68rem){
  .header{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
  .header .identity{flex:1 1 8rem}
  .header-actions{margin-inline-start:auto;flex:0 0 auto}
  .header-actions{grid-column:2;grid-row:1}
  .brand-lockup{width:11rem}
  .header nav{flex:0 0 100%;grid-column:1/-1;grid-row:2;flex-direction:column;align-items:stretch;gap:.25rem;padding-block-start:1rem;margin-block-start:1rem;border-block-start:1px solid var(--line)}
  .header nav a{font-size:1rem;min-height:48px;padding:.75rem 0}
  .header nav .partner-link{border-block-start:1px solid var(--line);border-radius:0;margin-block-start:.25rem;padding-block-start:1rem}
  .interactive-ready .menu-toggle{display:inline-flex}
  .interactive-ready .header:not(.menu-is-open) nav{display:none}
}
@media(max-width:52rem){
  .hero,.idea,.visits,.reuse,.growing,.partners,footer,.menu>.section-heading,.menu-note{grid-template-columns:minmax(0,1fr)}
  .hero{gap:2rem;padding-block:2.5rem}
  .hero-copy{max-width:38rem}
  .hero-image img{aspect-ratio:3/2;object-position:center}
  .idea,.visits,.reuse,.growing,.partners,.menu>.section-heading{gap:2rem}
  .menu-note,footer{gap:1.5rem}
  .principles{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .intro{margin-block-start:1.25rem}
  .drink{grid-template-columns:minmax(0,1fr);gap:.5rem}.drink>span{text-align:start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media(prefers-contrast:more){:root{--muted:#233b2c;--line:#697364}.steps p,.steps>.fine{color:#fff}.pill{border-color:#fff}}
@media print{
  body{background:#fff;color:#182d1e;font-size:11pt}
  .header-actions,.header nav,.button,.skip,.tabs{display:none!important}
  .header{display:block;padding:1rem 0}.brand-lockup{width:55mm}
  .hero,.idea,.visits,.reuse,.growing,.partners,.menu>.section-heading,.menu-note,footer{display:block}
  .hero,.section,footer{padding:1.5rem 0}.section{break-inside:auto}
  h1{font-size:42pt}h2{font-size:28pt}h2,h3,.eyebrow{break-after:avoid}
  .hero-image{margin-block-start:1.5rem}.hero-image img{max-height:200px;aspect-ratio:auto;object-fit:contain;width:auto;border-radius:0}
  .principles{padding:1rem 0}.reuse,.visits{background:#fff;color:#182d1e}
  .steps p,.steps>.fine,.steps>div>span,.fine,.pill{color:#374836}.pill{border-color:#374836}
  .visit-body article[hidden]{display:block!important}.visit-body article,.drink,.steps>div,.partner-details section{break-inside:avoid}
  .section>div+div,.menu-note>p+p,footer p{margin-block-start:1.5rem}
  html[lang="ar"] h1{font-size:34pt}html[lang="ar"] h2{font-size:25pt}
}